Merge branch 'feat/web-tier1-features'

opal-web/src/app.css

@@ -68,6 +68,8 @@
 	--color-overdue-text: #f85149;
 	--color-tag-bg: rgba(139, 148, 158, 0.1);
 	--color-tag-text: #8b949e;
+	--color-active-bg: rgba(57, 208, 186, 0.15);
+	--color-active-text: #39d0ba;
 
 	color-scheme: dark;
 }
@@ -118,6 +120,8 @@
 	--color-overdue-text: #be123c;
 	--color-tag-bg: #f5f5f4;
 	--color-tag-text: #78716c;
+	--color-active-bg: rgba(99, 102, 241, 0.12);
+	--color-active-text: #4f46e5;
 
 	color-scheme: light;
 }
@@ -168,6 +172,8 @@
 	--color-overdue-text: #ef4444;
 	--color-tag-bg: rgba(148, 163, 184, 0.1);
 	--color-tag-text: #94a3b8;
+	--color-active-bg: rgba(139, 92, 246, 0.15);
+	--color-active-text: #8b5cf6;
 
 	color-scheme: dark;
 }

opal-web/src/lib/components/BottomSheet.svelte

@@ -0,0 +1,253 @@
+<script>
+	import { onMount, afterUpdate } from 'svelte';
+
+	/** @type {boolean} */
+	export let open = false;
+
+	/** @type {() => void} */
+	export let onClose;
+
+	let dragOffset = 0;
+	let dragging = false;
+	let locked = false;
+	let mounted = false;
+
+	/** @type {number|null} */
+	let startY = null;
+	/** @type {number|null} */
+	let startX = null;
+	/** @type {number|null} */
+	let lastY = null;
+	/** @type {number} */
+	let lastTime = 0;
+	/** @type {number} */
+	let velocity = 0;
+
+	const DISMISS_THRESHOLD = 150;
+	const VELOCITY_THRESHOLD = 0.5;
+
+	/** @type {HTMLDivElement|null} */
+	let sheetEl = null;
+
+	// Body scroll lock — managed in afterUpdate to avoid SSR document access
+	afterUpdate(() => {
+		if (!mounted) return;
+		if (open) {
+			document.documentElement.style.overflow = 'hidden';
+		} else {
+			document.documentElement.style.overflow = '';
+			dragOffset = 0;
+			dragging = false;
+			locked = false;
+		}
+	});
+
+	/**
+	 * @param {KeyboardEvent} e
+	 */
+	function handleKeydown(e) {
+		if (!open) return;
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose();
+		}
+		// Focus trap
+		if (e.key === 'Tab' && sheetEl) {
+			const focusable = sheetEl.querySelectorAll(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			);
+			if (focusable.length === 0) return;
+			const first = /** @type {HTMLElement} */ (focusable[0]);
+			const last = /** @type {HTMLElement} */ (focusable[focusable.length - 1]);
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+	}
+
+	onMount(() => {
+		mounted = true;
+		document.addEventListener('keydown', handleKeydown);
+
+		return () => {
+			document.removeEventListener('keydown', handleKeydown);
+			document.documentElement.style.overflow = '';
+		};
+	});
+
+	/**
+	 * @param {TouchEvent} e
+	 */
+	function handleDragStart(e) {
+		const touch = e.touches[0];
+		startY = touch.clientY;
+		startX = touch.clientX;
+		lastY = touch.clientY;
+		lastTime = Date.now();
+		locked = false;
+		dragging = false;
+		velocity = 0;
+	}
+
+	/**
+	 * @param {TouchEvent} e
+	 */
+	function handleDragMove(e) {
+		if (startY === null || startX === null) return;
+		const touch = e.touches[0];
+		const deltaY = touch.clientY - startY;
+		const deltaX = touch.clientX - startX;
+
+		if (!locked && !dragging) {
+			if (Math.abs(deltaY) > 10 && Math.abs(deltaY) > Math.abs(deltaX) * 2) {
+				dragging = true;
+				locked = true;
+			} else if (Math.abs(deltaX) > 10) {
+				startY = null;
+				startX = null;
+				return;
+			}
+		}
+
+		if (dragging) {
+			if (e.cancelable) e.preventDefault();
+			// Only allow dragging down (positive)
+			dragOffset = Math.max(0, deltaY);
+
+			// Track velocity
+			const now = Date.now();
+			const dt = now - lastTime;
+			if (dt > 0 && lastY !== null) {
+				velocity = (touch.clientY - lastY) / dt;
+			}
+			lastY = touch.clientY;
+			lastTime = now;
+		}
+	}
+
+	function handleDragEnd() {
+		if (!dragging) {
+			startY = null;
+			startX = null;
+			return;
+		}
+
+		if (dragOffset > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
+			onClose();
+		}
+		dragOffset = 0;
+		dragging = false;
+		startY = null;
+		startX = null;
+	}
+
+	function handleScrimClick() {
+		onClose();
+	}
+
+	$: transitioning = !dragging && dragOffset === 0;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="sheet-scrim" class:open on:click={handleScrimClick}>
+	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions a11y-interactive-supports-focus -->
+	<div
+		bind:this={sheetEl}
+		class="sheet"
+		class:open
+		class:transitioning
+		style:transform={open
+			? `translateY(${dragOffset}px)`
+			: undefined}
+		on:click|stopPropagation
+		role="dialog"
+		aria-modal="true"
+	>
+		<div
+			class="sheet-handle"
+			on:touchstart={handleDragStart}
+			on:touchmove={handleDragMove}
+			on:touchend={handleDragEnd}
+		>
+			<div class="handle-bar"></div>
+		</div>
+		<div class="sheet-content">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<style>
+	.sheet-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: rgba(0, 0, 0, 0.5);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s ease;
+	}
+
+	.sheet-scrim.open {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.sheet {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		max-height: 85dvh;
+		background: var(--bg-primary);
+		border-radius: 1rem 1rem 0 0;
+		box-shadow: var(--shadow-lg);
+		transform: translateY(100%);
+		display: flex;
+		flex-direction: column;
+		z-index: 51;
+	}
+
+	.sheet.transitioning {
+		transition: transform 0.3s ease-out;
+	}
+
+	.sheet.open {
+		transform: translateY(0);
+	}
+
+	.sheet-handle {
+		display: flex;
+		justify-content: center;
+		padding: var(--spacing-sm) 0;
+		cursor: grab;
+		touch-action: none;
+		flex-shrink: 0;
+	}
+
+	.handle-bar {
+		width: 2.5rem;
+		height: 0.25rem;
+		background: var(--text-tertiary);
+		border-radius: 9999px;
+	}
+
+	.sheet-content {
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0 var(--spacing-md) var(--spacing-lg);
+	}
+
+	@media (min-width: 769px) {
+		.sheet {
+			max-width: 480px;
+			left: 50%;
+			margin-left: -240px;
+		}
+	}
+</style>

opal-web/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,178 @@
+<script>
+	/** @type {string} */
+	export let title;
+
+	/** @type {string} */
+	export let message;
+
+	/** @type {string|undefined} */
+	export let detail = undefined;
+
+	/** @type {string} */
+	export let confirmLabel;
+
+	/** @type {'danger'|'primary'} */
+	export let confirmVariant = 'danger';
+
+	/** @type {() => void} */
+	export let onConfirm;
+
+	/** @type {() => void} */
+	export let onCancel;
+
+	/** @type {HTMLDialogElement|null} */
+	let dialogEl = null;
+
+	/** @type {HTMLButtonElement|null} */
+	let cancelBtn = null;
+
+	export function open() {
+		dialogEl?.showModal();
+		requestAnimationFrame(() => cancelBtn?.focus());
+	}
+
+	function handleConfirm() {
+		dialogEl?.close();
+		onConfirm();
+	}
+
+	function handleCancel() {
+		dialogEl?.close();
+		onCancel();
+	}
+
+	/**
+	 * @param {MouseEvent} e
+	 */
+	function handleBackdropClick(e) {
+		if (e.target === dialogEl) {
+			handleCancel();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialogEl}
+	class="confirm-dialog"
+	on:click={handleBackdropClick}
+	on:cancel|preventDefault={handleCancel}
+>
+	<div class="dialog-content">
+		<h3 class="dialog-title">{title}</h3>
+
+		<p class="dialog-message">"{message}"</p>
+
+		{#if detail}
+			<p class="dialog-detail">{detail}</p>
+		{/if}
+
+		<div class="dialog-actions">
+			<button
+				bind:this={cancelBtn}
+				class="btn btn-ghost"
+				on:click={handleCancel}
+				type="button"
+			>
+				Cancel
+			</button>
+			<button
+				class="btn btn-{confirmVariant}"
+				on:click={handleConfirm}
+				type="button"
+			>
+				{confirmLabel}
+			</button>
+		</div>
+	</div>
+</dialog>
+
+<style>
+	.confirm-dialog {
+		border: none;
+		border-radius: var(--border-radius);
+		background: transparent;
+		padding: 0;
+		margin: auto;
+		max-width: min(360px, calc(100vw - 2rem));
+		width: 100%;
+	}
+
+	.confirm-dialog::backdrop {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.dialog-content {
+		background-color: var(--bg-primary);
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-lg);
+		padding: var(--spacing-lg);
+	}
+
+	.dialog-title {
+		font-size: var(--font-size-lg);
+		font-weight: 600;
+		color: var(--text-primary);
+		margin: 0 0 var(--spacing-md) 0;
+	}
+
+	.dialog-message {
+		font-size: var(--font-size-base);
+		color: var(--text-primary);
+		margin: 0 0 var(--spacing-xs) 0;
+		word-break: break-word;
+	}
+
+	.dialog-detail {
+		font-size: var(--font-size-sm);
+		color: var(--text-secondary);
+		margin: 0 0 var(--spacing-lg) 0;
+	}
+
+	.dialog-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+	}
+
+	.btn {
+		padding: var(--spacing-sm) var(--spacing-md);
+		border: none;
+		border-radius: var(--border-radius);
+		font-size: var(--font-size-sm);
+		font-family: inherit;
+		font-weight: 500;
+		cursor: pointer;
+		min-height: 40px;
+		min-width: unset;
+	}
+
+	.btn-ghost {
+		background: none;
+		color: var(--text-secondary);
+	}
+
+	.btn-ghost:hover {
+		background-color: var(--bg-secondary);
+		color: var(--text-primary);
+	}
+
+	.btn-danger {
+		background-color: var(--color-danger);
+		color: white;
+	}
+
+	.btn-danger:hover {
+		opacity: 0.9;
+	}
+
+	.btn-primary {
+		background-color: var(--color-primary);
+		color: white;
+	}
+
+	.btn-primary:hover {
+		opacity: 0.9;
+	}
+</style>

opal-web/src/lib/components/SwipeAction.svelte

@@ -2,12 +2,23 @@
 	/**
 	 * @type {() => void}
 	 */
-	export let onSwipe;
+	export let onSwipeRight;
+
+	/**
+	 * @type {() => void}
+	 */
+	export let onSwipeLeft;
+
+	/**
+	 * @type {'start' | 'stop'}
+	 */
+	export let leftIcon;
 
 	let offsetX = 0;
 	let swiping = false;
 	let locked = false;
 	let completed = false;
+	let triggered = false;
 
 	/** @type {number|null} */
 	let startX = null;
@@ -52,8 +63,7 @@
 
 		if (swiping) {
 			if (e.cancelable) e.preventDefault();
-			// Only allow right swipe
+			offsetX = deltaX;
-			offsetX = Math.max(0, deltaX);
 		}
 	}
 
@@ -64,11 +74,20 @@
 		}
 
 		if (offsetX >= THRESHOLD) {
+			// Right swipe — complete (row collapses)
 			completed = true;
-			// Animate to full width before firing callback
 			offsetX = window.innerWidth;
 			setTimeout(() => {
-				onSwipe();
+				onSwipeRight();
+			}, 200);
+		} else if (offsetX <= -THRESHOLD) {
+			// Left swipe — start/stop (row stays)
+			triggered = true;
+			offsetX = -window.innerWidth;
+			setTimeout(() => {
+				onSwipeLeft();
+				offsetX = 0;
+				triggered = false;
 			}, 200);
 		} else {
 			offsetX = 0;
@@ -86,7 +105,8 @@
 		startY = null;
 	}
 
-	$: progress = Math.min(offsetX / THRESHOLD, 1);
+	$: rightProgress = offsetX > 0 ? Math.min(offsetX / THRESHOLD, 1) : 0;
+	$: leftProgress = offsetX < 0 ? Math.min(Math.abs(offsetX) / THRESHOLD, 1) : 0;
 	$: transitioning = !swiping && offsetX !== 0;
 </script>
 
@@ -97,15 +117,28 @@
 	on:touchend={handleTouchEnd}
 	on:touchcancel={resetState}
 >
-	<div
+	<!-- Left background (revealed on RIGHT swipe — complete) -->
-		class="swipe-background"
+	<div class="swipe-bg swipe-bg-right"
-		style:opacity={progress}
+		style:opacity={rightProgress}>
-	>
+		<svg class="swipe-icon check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-		<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
 		</svg>
 	</div>
 
+	<!-- Right background (revealed on LEFT swipe — start/stop) -->
+	<div class="swipe-bg swipe-bg-left"
+		style:opacity={leftProgress}>
+		{#if leftIcon === 'stop'}
+			<svg class="swipe-icon fill-icon" viewBox="0 0 24 24">
+				<rect x="6" y="6" width="12" height="12" rx="1" />
+			</svg>
+		{:else}
+			<svg class="swipe-icon fill-icon" viewBox="0 0 24 24">
+				<polygon points="6,4 20,12 6,20" />
+			</svg>
+		{/if}
+	</div>
+
 	<div
 		class="swipe-content"
 		class:transitioning
@@ -122,21 +155,44 @@
 		touch-action: pan-y;
 	}
 
-	.swipe-background {
+	.swipe-bg {
 		position: absolute;
 		inset: 0;
-		background-color: var(--color-success);
 		display: flex;
 		align-items: center;
-		padding-left: var(--spacing-lg);
 	}
 
-	.check-icon {
+	.swipe-bg-right {
+		background-color: var(--color-success);
+		padding-left: var(--spacing-lg);
+		justify-content: flex-start;
+	}
+
+	.swipe-bg-left {
+		background-color: var(--color-primary);
+		padding-right: var(--spacing-lg);
+		justify-content: flex-end;
+	}
+
+	.swipe-icon {
 		width: 1.5rem;
 		height: 1.5rem;
 		color: white;
 	}
 
+	.check-icon {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 3;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	.fill-icon {
+		fill: white;
+		stroke: none;
+	}
+
 	.swipe-content {
 		position: relative;
 		background-color: var(--bg-primary);

opal-web/src/lib/components/TaskItem.svelte

@@ -14,10 +14,21 @@
 	 */
 	export let onComplete;
 
+	/**
+	 * @type {(task: import('$lib/api/types.js').Task) => void}
+	 */
+	export let onTap;
+
+	/**
+	 * @type {(uuid: string) => void}
+	 */
+	export let onStartStop;
+
 	let completing = false;
 
 	$: overdue = task.due && isOverdue(task.due);
 	$: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
+	$: active = task.start !== null && task.start !== undefined;
 
 	function handleCheckbox() {
 		if (completing) return;
@@ -34,13 +45,18 @@
 	}
 </script>
 
-<SwipeAction onSwipe={() => onComplete(task.uuid)}>
+<SwipeAction
-	<div class="task-item" class:completing on:transitionend={handleTransitionEnd}>
+	onSwipeRight={() => onComplete(task.uuid)}
+	onSwipeLeft={() => onStartStop(task.uuid)}
+	leftIcon={active ? 'stop' : 'start'}
+>
+	<div class="task-item" class:completing class:active on:transitionend={handleTransitionEnd}>
 		<button class="task-checkbox" on:click|stopPropagation={handleCheckbox} type="button" aria-label="Complete task">
 			<Checkbox checked={task.status === 'C'} />
 		</button>
 
-		<div class="task-content">
+		<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+		<div class="task-content" on:click={() => onTap(task)}>
 			<div class="task-header">
 				<span class="task-description" class:completed={task.status === 'C'}>
 					{task.description}
@@ -48,6 +64,10 @@
 			</div>
 
 			<div class="task-meta">
+				{#if active}
+					<span class="meta-item active-pill">Active</span>
+				{/if}
+
 				{#if task.project}
 					<span class="meta-item project">{task.project}</span>
 				{/if}
@@ -109,6 +129,11 @@
 		overflow: hidden;
 	}
 
+	.task-item.active {
+		border-left: 3px solid var(--color-primary);
+		padding-left: calc(var(--spacing-md) - 3px);
+	}
+
 	.task-checkbox {
 		flex-shrink: 0;
 		display: flex;
@@ -127,6 +152,7 @@
 	.task-content {
 		flex: 1;
 		min-width: 0;
+		cursor: pointer;
 	}
 
 	.task-header {
@@ -158,6 +184,11 @@
 		font-weight: 500;
 	}
 
+	.active-pill {
+		background-color: var(--color-active-bg);
+		color: var(--color-active-text);
+	}
+
 	.project {
 		background-color: var(--color-project-bg);
 		color: var(--color-project-text);

opal-web/src/lib/components/TaskList.svelte

@@ -11,6 +11,16 @@
 	 */
 	export let onComplete;
 
+	/**
+	 * @type {(task: import('$lib/api/types.js').Task) => void}
+	 */
+	export let onTap;
+
+	/**
+	 * @type {(uuid: string) => void}
+	 */
+	export let onStartStop;
+
 	export let loading = false;
 	export let activeReport = 'list';
 
@@ -50,6 +60,8 @@
 			<TaskItem
 				{task}
 				{onComplete}
+				{onTap}
+				{onStartStop}
 			/>
 		{/each}
 	{/if}

opal-web/src/lib/components/Toast.svelte

@@ -0,0 +1,102 @@
+<script>
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	/** @type {string} */
+	export let message;
+
+	/** @type {{ label: string, handler: () => void }|undefined} */
+	export let action = undefined;
+
+	/** @type {number} */
+	export let duration = 5000;
+
+	/** @type {() => void} */
+	export let onDismiss;
+
+	/** @type {ReturnType<typeof setTimeout>|null} */
+	let timer = null;
+
+	function startTimer() {
+		if (duration > 0) {
+			timer = setTimeout(() => {
+				onDismiss();
+			}, duration);
+		}
+	}
+
+	function clearTimer() {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	}
+
+	function handleAction() {
+		clearTimer();
+		if (action) action.handler();
+		onDismiss();
+	}
+
+	onMount(() => {
+		startTimer();
+		return () => clearTimer();
+	});
+</script>
+
+<div class="toast" transition:fly={{ y: 50, duration: 200 }}>
+	<span class="toast-message">{message}</span>
+	{#if action}
+		<button class="toast-action" on:click={handleAction} type="button">
+			{action.label}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.toast {
+		position: fixed;
+		bottom: calc(3.5rem + var(--spacing-md));
+		left: var(--spacing-md);
+		right: var(--spacing-md);
+		max-width: var(--content-max-width);
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--spacing-md);
+		padding: var(--spacing-sm) var(--spacing-md);
+		background-color: var(--bg-tertiary);
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-md);
+		z-index: 40;
+	}
+
+	.toast-message {
+		font-size: var(--font-size-sm);
+		color: var(--text-primary);
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.toast-action {
+		font-size: var(--font-size-sm);
+		font-weight: 600;
+		color: var(--color-primary);
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: var(--spacing-xs) var(--spacing-sm);
+		border-radius: 0.25rem;
+		white-space: nowrap;
+		min-width: unset;
+		min-height: 36px;
+	}
+
+	.toast-action:hover {
+		background-color: var(--bg-secondary);
+	}
+</style>

opal-web/src/lib/stores/tasks.js

@@ -140,6 +140,55 @@ function createTasksStore() {
 			}
 		},
 
+		/**
+		 * Start task timer (optimistic)
+		 * @param {string} uuid
+		 */
+		async startTask(uuid) {
+			const now = Math.floor(Date.now() / 1000);
+			update(tasks => tasks.map(t =>
+				t.uuid === uuid ? { ...t, start: now } : t
+			));
+			try {
+				const updated = await tasksAPI.start(uuid);
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? updated : t
+				));
+			} catch (error) {
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? { ...t, start: null } : t
+				));
+				throw error;
+			}
+		},
+
+		/**
+		 * Stop task timer (optimistic)
+		 * @param {string} uuid
+		 */
+		async stopTask(uuid) {
+			/** @type {number|null} */
+			let prevStart = null;
+			update(tasks => tasks.map(t => {
+				if (t.uuid === uuid) {
+					prevStart = t.start;
+					return { ...t, start: null };
+				}
+				return t;
+			}));
+			try {
+				const updated = await tasksAPI.stop(uuid);
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? updated : t
+				));
+			} catch (error) {
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? { ...t, start: prevStart } : t
+				));
+				throw error;
+			}
+		},
+
 		/**
 		 * Complete task
 		 * @param {string} uuid

opal-web/src/routes/+page.svelte

@@ -8,6 +8,10 @@
 	import Header from '$lib/components/Header.svelte';
 	import TaskList from '$lib/components/TaskList.svelte';
 	import InputBar from '$lib/components/InputBar.svelte';
+	import BottomSheet from '$lib/components/BottomSheet.svelte';
+	import TaskDetail from '$lib/components/TaskDetail.svelte';
+	import Toast from '$lib/components/Toast.svelte';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 
 	let activeReport = 'list';
 	/** @type {import('$lib/api/types.js').Task[]} */
@@ -15,6 +19,21 @@
 	let loading = true;
 	let inputError = '';
 
+	// Bottom sheet state
+	/** @type {import('$lib/api/types.js').Task|null} */
+	let selectedTask = null;
+
+	// Undo toast state
+	/** @type {{ uuid: string, description: string }|null} */
+	let undoToast = null;
+
+	// Delete confirmation state
+	/** @type {{ uuid: string, description: string }|null} */
+	let deleteTarget = null;
+
+	/** @type {ConfirmDialog} */
+	let confirmDialog;
+
 	// Subscribe to store
 	const unsubscribe = tasksStore.subscribe(value => {
 		tasks = value;
@@ -124,12 +143,97 @@
 	 * @param {string} uuid
 	 */
 	async function handleComplete(uuid) {
+		const task = tasks.find(t => t.uuid === uuid);
+		if (!task) return;
+
 		try {
 			await tasksStore.complete(uuid);
+			undoToast = { uuid: task.uuid, description: task.description };
 		} catch (error) {
 			console.error('Failed to complete task:', error);
 		}
 	}
+
+	async function handleUndo() {
+		if (!undoToast) return;
+		const { uuid } = undoToast;
+		undoToast = null;
+
+		try {
+			await tasksStore.updateTask(uuid, { status: 'P', end: null });
+			await loadReport(activeReport);
+		} catch (error) {
+			console.error('Failed to undo completion:', error);
+		}
+	}
+
+	/**
+	 * @param {string} uuid
+	 */
+	async function handleStartStop(uuid) {
+		const task = tasks.find(t => t.uuid === uuid);
+		if (!task) return;
+
+		try {
+			if (task.start) {
+				await tasksStore.stopTask(uuid);
+			} else {
+				await tasksStore.startTask(uuid);
+			}
+			// Update selectedTask if it's the same task
+			if (selectedTask?.uuid === uuid) {
+				const updated = tasks.find(t => t.uuid === uuid);
+				if (updated) selectedTask = updated;
+			}
+		} catch (error) {
+			console.error('Failed to start/stop task:', error);
+		}
+	}
+
+	/**
+	 * @param {string} uuid
+	 * @param {Partial<import('$lib/api/types.js').Task>} updates
+	 */
+	async function handleUpdate(uuid, updates) {
+		try {
+			await tasksStore.updateTask(uuid, updates);
+			// Keep selectedTask fresh
+			if (selectedTask?.uuid === uuid) {
+				selectedTask = { ...selectedTask, ...updates };
+			}
+		} catch (error) {
+			console.error('Failed to update task:', error);
+		}
+	}
+
+	/**
+	 * @param {string} uuid
+	 */
+	function handleDeleteRequest(uuid) {
+		const task = tasks.find(t => t.uuid === uuid)
+			?? (selectedTask?.uuid === uuid ? selectedTask : null);
+		if (!task) return;
+
+		deleteTarget = { uuid: task.uuid, description: task.description };
+		confirmDialog.open();
+	}
+
+	async function handleDeleteConfirm() {
+		if (!deleteTarget) return;
+		const { uuid } = deleteTarget;
+		deleteTarget = null;
+		selectedTask = null;
+
+		try {
+			await tasksStore.deleteTask(uuid);
+		} catch (error) {
+			console.error('Failed to delete task:', error);
+		}
+	}
+
+	function handleDeleteCancel() {
+		deleteTarget = null;
+	}
 </script>
 
 <Header {activeReport} onReportChange={handleReportChange} />
@@ -139,9 +243,44 @@
 	{loading}
 	{activeReport}
 	onComplete={handleComplete}
+	onTap={(task) => selectedTask = task}
+	onStartStop={handleStartStop}
 />
 
 <InputBar
 	onSubmit={handleSubmit}
 	error={inputError}
 />
+
+<BottomSheet open={selectedTask !== null} onClose={() => selectedTask = null}>
+	{#if selectedTask}
+		<TaskDetail
+			task={selectedTask}
+			onUpdate={handleUpdate}
+			onStart={(uuid) => handleStartStop(uuid)}
+			onStop={(uuid) => handleStartStop(uuid)}
+			onDelete={handleDeleteRequest}
+			onComplete={handleComplete}
+			onClose={() => selectedTask = null}
+		/>
+	{/if}
+</BottomSheet>
+
+{#if undoToast}
+	<Toast
+		message={'Completed "' + undoToast.description + '"'}
+		action={{ label: 'Undo', handler: handleUndo }}
+		onDismiss={() => undoToast = null}
+	/>
+{/if}
+
+<ConfirmDialog
+	bind:this={confirmDialog}
+	title="Delete task?"
+	message={deleteTarget?.description ?? ''}
+	detail="This cannot be undone."
+	confirmLabel="Delete"
+	confirmVariant="danger"
+	onConfirm={handleDeleteConfirm}
+	onCancel={handleDeleteCancel}
+/>