diff --git a/CLAUDE.md b/CLAUDE.md
index 8b6ee99..fb216d0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,8 +16,13 @@ pnpm build            # builds all three; shared builds first (topological)
 pnpm typecheck        # tsc --noEmit across all packages (svelte-check for web)
 pnpm test             # runs each package's test (only server has real tests)
 pnpm dev              # server (:3000) + web Vite (:5173) in parallel
+pnpm lint             # eslint . (flat config in eslint.config.js; extends prettier)
+pnpm format           # prettier --write .  (format:check is the CI gate)
+pnpm start            # node server/dist/index.js (serves built web too; run after build)
 ```
 
+CI (`.github/workflows`) gates on `format:check`, `lint`, `typecheck`, `build`, and `test`; run them locally before pushing.
+
 Important ordering: `server` and `web` import from `@hub/shared`'s built `dist/`. Before `pnpm dev`, build shared at least once (`pnpm --filter @hub/shared build`), or run it in watch (`pnpm --filter @hub/shared dev`). A stale `shared/dist` is the usual cause of phantom type errors after editing shared.
 
 Server-specific (run from repo root):
@@ -41,7 +46,7 @@ The spine is: **engine adapter normalizes a CLI stream into `NormalizedEvent`s -
 
 - `shared/` (`@hub/shared`) is the contract package: the `NormalizedEvent` schema, the WS `ClientMsg`/`ServerMsg` protocol, and REST DTOs. Both other packages depend on it. Change a type here and rebuild before the change is visible downstream.
 - `server/` (`@hub/server`) is Fastify + `ws`, backed by better-sqlite3.
-- `web/` (`@hub/web`) is a Svelte 5 SPA (no SvelteKit): plain Vite, markdown via `marked` + `DOMPurify` + `highlight.js`.
+- `web/` (`@hub/web`) is a Svelte 5 SPA (no SvelteKit): plain Vite, markdown via `marked` + `DOMPurify` + `highlight.js`. Styling is dependency-free: semantic design tokens in `web/src/app.css` (`--surface-*`, `--status-*`, spacing/type/radius/motion scales; a light theme would be a `[data-theme]` override block) plus scoped component styles keyed off `data-*` attributes. Shared primitives live in `web/src/components/ui/` (`Icon` inline-SVG set, `Toasts` + `lib/toasts.ts` with severities/undo actions, `ConfirmDialog` + `lib/confirm.ts` promise API over native `<dialog>`, `ShortcutsHelp` + `lib/shortcuts.ts` global hotkeys). The sidebar collapses to an overlay drawer at <= 900px (drawer state owned by `App.svelte`). Offline behavior: `ws.ts send()` returns a boolean, sends are disabled while disconnected, and optimistic user messages live in `stores.ts pendingSends` (outside `eventsBySession`, reconciled by FIFO text match against the server echo; interrupt clears them with a restore toast).
 
 ### Event flow and key types
 
@@ -56,6 +61,8 @@ The spine is: **engine adapter normalizes a CLI stream into `NormalizedEvent`s -
 - **Two state axes** (both on `SessionDto`): interaction `status` (idle/running/awaiting_approval/error) and engine liveness `engineState` (`new` -> `live` on spawn -> `hibernated` on idle-dispose/stop/boot-reconcile, or `dead` on an unexpected exit) plus `enginePid`. `stopEngine()` (WS `stop_engine`) tears the process down now while keeping the session resumable; a crash mid-turn also closes the open turn with a `done{error}`.
 - **Resume**: `engine_session_id` is updated from *every* engine `init` (`engine_meta`), not just the first, because some CLI versions mint a new session id per resume and only the latest resumes correctly. The hibernated/dead engine is respawned with `--resume <engineSessionId>` on the next message.
 - **Fork** (`POST /api/sessions/:id/fork` -> `SessionManager.fork`): copies the parent's config + event log (`EventsRepo.copyEvents`) into a new session that seeds the parent's `engine_session_id` and sets a one-shot `fork_pending` flag (migration 4). On the fork's first `ensureRun` that flag adds `--fork-session` alongside `--resume <parent>`, so the CLI replays the parent transcript but writes into a *new* engine session id; `fork_pending` is consumed on the first `engine_meta`. The parent is untouched. Only a session that has run (non-null `engineSessionId`) is forkable.
+- **Isolated git worktree** (the New Session launcher, `web/src/components/Launcher.svelte`): a `CreateSessionRequest` with `worktree: true` (+ optional base `branch`) makes `SessionManager.create` call `addWorktree` (`server/src/fs/git.ts`) to check out a fresh `hub/<id8>` branch into `<worktreeRoot>/<id>`, and runs the session there instead of the source repo, so its edits never touch the source working tree. `worktreeRoot` defaults to `<dataDir>/worktrees` (`WORKTREE_ROOT`). Requires a git-repo cwd; failures raise `HubError('worktree_failed')`. `delete` best-effort removes the worktree and its `hub/…` branch (only ever a hub-managed branch, never a user branch). The launcher populates its branch dropdown from `GET /api/git/info` (`gitInfo`, best-effort, never throws for a non-repo cwd).
+- **Archive**: a session is soft-hidden via `PATCH /api/sessions/:id {archived:true}` (sets `archivedAt`); `GET /api/sessions` omits archived rows unless `?includeArchived=1`. Archive is a list-visibility flag only, it does not touch the engine or event log; `delete` is the hard removal (cascades events).
 
 ### Permission control (the "safety dial")
 
@@ -80,7 +87,7 @@ The CLI's `permission_suggestions` (allow-rules it proposes for a prompt) ride t
 
 ### Transport
 
-- **REST** (`server/src/api/routes.ts`): sessions CRUD, `/api/engines`, `/api/fs/{validate,browse}`, `/api/health`. Bearer-token auth via an `onRequest` hook (`health` exempt). `HubError` maps to status codes (`not_found` -> 404, `session_busy` -> 409, else 400).
+- **REST** (`server/src/api/routes.ts`): sessions CRUD (`PATCH` toggles `archived`, `POST :id/fork`), `/api/engines`, `/api/fs/{validate,browse}`, `/api/git/info`, `/api/health`. Bearer-token auth via an `onRequest` hook (`health` exempt). `HubError` maps to status codes (`not_found` -> 404, `session_busy` -> 409, else 400, so `worktree_failed` -> 400).
 - **WebSocket** (`server/src/api/ws.ts`, protocol in `shared/src/protocol.ts`): one socket per tab at `/ws`, all sessions multiplexed. **Auth is by first message, never a URL token** (keeps it out of access logs). After auth, `subscribe {sessionId, afterEventId?, limit?}` replays persisted history (synchronous better-sqlite3 read, so no live event interleaves), then marks the subscription live. With `afterEventId` it is forward catch-up (full); omitted, it is a bounded initial load of the most recent `limit` events followed by a `replay_meta {hasMoreBefore, oldestEventId}` frame the client uses to page older history over REST (`/api/sessions/:id/events?beforeId&limit`). The web client (`web/src/lib/ws.ts`) reconnects with backoff and re-subscribes every known session from its last-seen event id.
 
 ### Working-directory safety
@@ -89,6 +96,6 @@ The CLI's `permission_suggestions` (allow-rules it proposes for a prompt) ride t
 
 ## Configuration and deployment
 
-Config is env-only (`server/src/config.ts`); see the table in `README.md` §10. Key vars: `AUTH_TOKEN` (generated + logged per boot if unset), `WORKSPACE_ROOTS` (colon-separated, default `$HOME`), `ENGINES` (default `claude-code,echo`), `CLAUDE_BIN`, `ENGINE_IDLE_TIMEOUT_MS`, `APPROVAL_TIMEOUT_MS` (0 = wait forever). `deploy/` holds a Dockerfile (pins the claude CLI version via ARG), docker-compose (mounts host `~/.claude` + `~/.claude.json` for auth; the platform stores no keys), and a systemd unit.
+Config is env-only (`server/src/config.ts`); see the table in `README.md` §10. Key vars: `AUTH_TOKEN` (generated + logged per boot if unset), `WORKSPACE_ROOTS` (colon-separated, default `$HOME`), `ENGINES` (default `claude-code,echo`), `CLAUDE_BIN`, `ENGINE_IDLE_TIMEOUT_MS`, `APPROVAL_TIMEOUT_MS` (0 = wait forever), `DATA_DIR` (SQLite + default worktree parent, default `./data`), `WORKTREE_ROOT` (isolated-worktree parent, default `<DATA_DIR>/worktrees`). `deploy/` holds a Dockerfile (pins the claude CLI version via ARG), docker-compose (mounts host `~/.claude` + `~/.claude.json` for auth; the platform stores no keys), and a systemd unit.
 
 Keep the workspace mount path stable across deploys: the claude CLI keys its transcript store by project path, so moving it breaks session resume. When bumping the pinned CLI version, run `pnpm --filter @hub/server spike` first and diff the output against `server/test/fixtures/*.ndjson` (captured from a known-good live run; `normalize.test.ts` asserts against them).
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 1596d26..6b49245 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,34 +1,146 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { activeSessionId, sessions, token, upsertSession } from './lib/stores.js';
-  import { api } from './lib/api.js';
-  import { connect, disconnect, onWsError } from './lib/ws.js';
+  import { onMount, tick } from 'svelte';
+  import {
+    activeSessionId,
+    connState,
+    logoutReason,
+    sessions,
+    statusBySession,
+    token,
+    upsertSession,
+  } from './lib/stores.js';
+  import { ApiError, api } from './lib/api.js';
+  import {
+    connect,
+    disconnect,
+    onWsError,
+    reconnectNow,
+    sendInterrupt,
+    subscribeSession,
+  } from './lib/ws.js';
+  import { friendlyWsError } from './lib/format.js';
+  import { toast } from './lib/toasts.js';
+  import { handleShortcut, shortcutsHelpOpen } from './lib/shortcuts.js';
   import LoginGate from './components/LoginGate.svelte';
   import SessionSidebar from './components/SessionSidebar.svelte';
   import ChatView from './components/ChatView.svelte';
   import Launcher from './components/Launcher.svelte';
+  import Icon from './components/ui/Icon.svelte';
+  import Toasts from './components/ui/Toasts.svelte';
+  import ConfirmDialog from './components/ui/ConfirmDialog.svelte';
+  import ShortcutsHelp from './components/ui/ShortcutsHelp.svelte';
 
-  let toast: string | null = $state(null);
-  let toastTimer: ReturnType<typeof setTimeout> | undefined;
+  onWsError((code, message) => {
+    toast.error(friendlyWsError(code, message));
+  });
 
-  function showToast(message: string): void {
-    toast = message;
-    if (toastTimer) clearTimeout(toastTimer);
-    toastTimer = setTimeout(() => (toast = null), 5000);
-  }
+  // Narrow viewports collapse the sidebar into an off-canvas drawer.
+  let isNarrow = $state(false);
+  let sidebarOpen = $state(false);
+  /** Desktop-only: sidebar hidden via Ctrl+B. */
+  let sidebarHidden = $state(false);
+  let hamburger: HTMLButtonElement | undefined = $state();
 
-  onWsError((code, message) => {
-    showToast(`${code}: ${message}`);
+  onMount(() => {
+    const mq = window.matchMedia('(max-width: 900px)');
+    isNarrow = mq.matches;
+    const onChange = (e: MediaQueryListEvent): void => {
+      isNarrow = e.matches;
+    };
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
   });
 
+  $effect(() => {
+    if (!isNarrow) sidebarOpen = false;
+  });
+
+  function openSidebar(): void {
+    sidebarOpen = true;
+    void tick().then(() => document.getElementById('session-search')?.focus());
+  }
+
+  function closeSidebar(): void {
+    if (!sidebarOpen) return;
+    sidebarOpen = false;
+    // Wait for <main> to lose `inert` before restoring focus to the hamburger.
+    void tick().then(() => hamburger?.focus());
+  }
+
+  const activeSession = $derived($sessions.find((s) => s.id === $activeSessionId));
+  const approvalsPending = $derived(
+    $sessions.filter((s) => ($statusBySession.get(s.id) ?? s.status) === 'awaiting_approval')
+      .length,
+  );
+
+  function selectSession(id: string): void {
+    activeSessionId.set(id);
+    subscribeSession(id);
+    if (isNarrow) closeSidebar();
+  }
+
+  /** Step through the visible (non-archived, recency-ordered) sessions. */
+  function stepSession(delta: number): void {
+    const list = $sessions.filter((s) => s.archivedAt === null);
+    if (!list.length) return;
+    const idx = list.findIndex((s) => s.id === $activeSessionId);
+    const next = idx < 0 ? list[0] : list[Math.min(list.length - 1, Math.max(0, idx + delta))];
+    if (next && next.id !== $activeSessionId) selectSession(next.id);
+  }
+
+  const shortcutCtx = {
+    toggleSidebar: () => {
+      if (isNarrow) {
+        if (sidebarOpen) closeSidebar();
+        else openSidebar();
+      } else {
+        sidebarHidden = !sidebarHidden;
+      }
+    },
+    newSession: () => {
+      activeSessionId.set(null);
+      if (isNarrow) closeSidebar();
+    },
+    focusSearch: () => {
+      if (isNarrow && !sidebarOpen) openSidebar();
+      else document.getElementById('session-search')?.focus();
+    },
+    focusComposer: () => document.getElementById('composer-input')?.focus(),
+    stopTurn: () => {
+      const id = $activeSessionId;
+      if (!id) return;
+      const status = $statusBySession.get(id) ?? activeSession?.status;
+      if (status === 'running' || status === 'awaiting_approval') sendInterrupt(id);
+    },
+    nextSession: () => stepSession(1),
+    prevSession: () => stepSession(-1),
+    showHelp: () => shortcutsHelpOpen.set(true),
+  };
+
+  function onWindowKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      if (sidebarOpen) closeSidebar();
+      return;
+    }
+    if (!$token) return;
+    if (handleShortcut(e, shortcutCtx)) e.preventDefault();
+  }
+
   async function bootstrap(): Promise<void> {
     try {
       for (const s of await api.sessions()) upsertSession(s);
       connect();
-    } catch {
-      // token invalid — force re-login
-      token.set(null);
-      disconnect();
+    } catch (e) {
+      if (e instanceof ApiError && e.status === 401) {
+        // Token invalid — force re-login, and say why on the login gate.
+        logoutReason.set('You were signed out: the access token was rejected.');
+        token.set(null);
+        disconnect();
+      } else {
+        toast.error(`Could not reach the server: ${(e as Error).message}`, {
+          action: { label: 'Retry', run: () => void bootstrap() },
+        });
+      }
     }
   }
 
@@ -41,46 +153,187 @@
   }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 {#if !$token}
   <LoginGate loggedIn={onLoggedIn} />
 {:else}
-  <div class="layout">
-    <SessionSidebar {showToast} />
-    <main>
-      {#if $activeSessionId && $sessions.some((s) => s.id === $activeSessionId)}
-        <ChatView sessionId={$activeSessionId} {showToast} />
-      {:else}
-        <Launcher />
+  <div class="shell">
+    {#if $connState !== 'online'}
+      <div class="conn-banner" data-state={$connState} aria-live="polite">
+        <span>{$connState === 'connecting' ? 'Reconnecting…' : 'Offline'}</span>
+        <button class="retry" onclick={reconnectNow}>Retry now</button>
+      </div>
+    {/if}
+    <div class="layout" class:sidebar-hidden={sidebarHidden && !isNarrow}>
+      {#if isNarrow && sidebarOpen}
+        <button class="scrim" aria-label="Close sidebar" onclick={closeSidebar}></button>
       {/if}
-    </main>
+      <div id="sidebar" class="sidebar" data-open={sidebarOpen}>
+        <SessionSidebar onNavigate={closeSidebar} />
+      </div>
+      <main inert={isNarrow && sidebarOpen}>
+        {#if isNarrow}
+          <div class="topstrip">
+            <button
+              bind:this={hamburger}
+              class="quiet hamburger"
+              aria-label="Open sidebar"
+              aria-expanded={sidebarOpen}
+              aria-controls="sidebar"
+              onclick={openSidebar}
+            >
+              <Icon name="menu" size={18} />
+              {#if approvalsPending > 0}
+                <span class="badge" title="{approvalsPending} session(s) awaiting approval"
+                  >{approvalsPending}</span
+                >
+              {/if}
+            </button>
+            <span class="strip-title">{activeSession?.title ?? 'New session'}</span>
+          </div>
+        {/if}
+        {#if activeSession}
+          <div class="view"><ChatView sessionId={activeSession.id} /></div>
+        {:else}
+          <div class="view"><Launcher /></div>
+        {/if}
+      </main>
+    </div>
   </div>
 {/if}
 
-{#if toast}
-  <div class="toast" role="alert">{toast}</div>
-{/if}
+<Toasts />
+<ConfirmDialog />
+<ShortcutsHelp />
 
 <style>
+  .shell {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .conn-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--font-size-sm);
+    background: var(--status-warning-surface);
+    border-bottom: 1px solid var(--status-warning);
+    color: var(--text-primary);
+  }
+  .conn-banner[data-state='offline'] {
+    background: var(--status-danger-surface);
+    border-bottom-color: var(--status-danger);
+  }
+  .retry {
+    font-size: var(--font-size-xs);
+    padding: 2px 10px;
+  }
   .layout {
+    flex: 1;
+    min-height: 0;
     display: grid;
-    grid-template-columns: 290px 1fr;
+    grid-template-columns: var(--sidebar-width) 1fr;
+  }
+  .layout.sidebar-hidden {
+    grid-template-columns: 1fr;
+  }
+  .layout.sidebar-hidden .sidebar {
+    display: none;
+  }
+  .sidebar {
     height: 100%;
+    min-height: 0;
   }
   main {
     min-width: 0;
     height: 100%;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .view {
+    flex: 1;
+    min-height: 0;
+  }
+  .topstrip {
+    display: none;
   }
-  .toast {
-    position: fixed;
-    bottom: 18px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--bg-raised);
-    border: 1px solid var(--red);
-    border-radius: 8px;
-    padding: 10px 16px;
-    max-width: 70vw;
-    z-index: 100;
+
+  @media (max-width: 900px) {
+    .layout {
+      grid-template-columns: 1fr;
+    }
+    .sidebar {
+      position: fixed;
+      inset-block: 0;
+      left: 0;
+      width: min(320px, 85vw);
+      transform: translateX(-100%);
+      /* visibility flips after the slide-out so the closed drawer leaves the
+         tab order without cutting the exit animation short. */
+      visibility: hidden;
+      transition:
+        transform var(--duration-normal) var(--ease-out),
+        visibility 0s linear var(--duration-normal);
+      z-index: var(--z-drawer);
+    }
+    .sidebar[data-open='true'] {
+      transform: translateX(0);
+      box-shadow: var(--shadow-overlay);
+      visibility: visible;
+      transition:
+        transform var(--duration-normal) var(--ease-out),
+        visibility 0s;
+    }
+    .scrim {
+      position: fixed;
+      inset: 0;
+      background: rgb(0 0 0 / 0.45);
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      z-index: calc(var(--z-drawer) - 1);
+    }
+    .scrim:hover {
+      background: rgb(0 0 0 / 0.45);
+    }
+    .topstrip {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-1) var(--space-2);
+      border-bottom: 1px solid var(--border-default);
+      background: var(--surface-panel);
+    }
+    .hamburger {
+      position: relative;
+      padding: var(--space-2);
+    }
+    .badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      min-width: 15px;
+      height: 15px;
+      border-radius: var(--radius-full);
+      background: var(--status-warning);
+      color: #1c1503;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 15px;
+      text-align: center;
+      padding: 0 3px;
+    }
+    .strip-title {
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 </style>
diff --git a/web/src/app.css b/web/src/app.css
index e08d330..a46668d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,18 +1,95 @@
+/* ---------------------------------------------------------------------------
+ * Design tokens. Two layers:
+ *  - semantic tokens (below) are what components use;
+ *  - a future light theme is a `[data-theme='light']` block overriding them.
+ * Legacy aliases at the bottom keep unmigrated components working and are
+ * removed once every component reads the semantic names.
+ * ------------------------------------------------------------------------- */
 :root {
-  --bg: #0f1115;
-  --bg-panel: #161a21;
-  --bg-raised: #1d232d;
-  --bg-hover: #232a36;
-  --border: #2a3240;
-  --text: #d7dde6;
-  --text-dim: #8b95a5;
+  color-scheme: dark;
+
+  /* surfaces */
+  --surface-base: #0f1115;
+  --surface-panel: #161a21;
+  --surface-raised: #1d232d;
+  --surface-hover: #232a36;
+  --surface-sunken: #0b0d11;
+
+  /* borders */
+  --border-default: #2a3240;
+  --border-strong: #3a4557;
+  --border-focus: var(--accent);
+
+  /* text */
+  --text-primary: #d7dde6;
+  --text-secondary: #97a1b1;
+  --text-on-accent: #eaf1fb;
+
+  /* accent + status */
   --accent: #6ea8fe;
-  --accent-dim: #2c4a77;
-  --green: #4ade80;
-  --amber: #fbbf24;
-  --red: #f87171;
-  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --accent-muted: #2c4a77;
+  --status-success: #4ade80;
+  --status-warning: #fbbf24;
+  --status-danger: #f87171;
+  --status-info: var(--accent);
+  --status-success-surface: color-mix(in srgb, var(--status-success) 8%, var(--surface-panel));
+  --status-warning-surface: color-mix(in srgb, var(--status-warning) 8%, var(--surface-panel));
+  --status-danger-surface: color-mix(in srgb, var(--status-danger) 8%, var(--surface-panel));
+
+  /* spacing (4px scale) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* type scale */
+  --font-size-xs: 11px;
+  --font-size-sm: 12.5px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 26px;
+  --leading-tight: 1.3;
+  --leading-normal: 1.55;
+  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+
+  /* radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-full: 999px;
+
+  /* focus ring */
+  --focus-ring-color: var(--accent);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 1px;
+
+  /* motion */
+  --duration-fast: 120ms;
+  --duration-normal: 200ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+
+  /* elevation + layers */
+  --shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.5);
+  --z-drawer: 40;
+  --z-dialog: 50;
+  --z-toast: 60;
+
+  /* layout */
+  --sidebar-width: 290px;
+
+  /* code highlighting (highlight.js) */
+  --code-keyword: #c678dd;
+  --code-string: #98c379;
+  --code-number: #d19a66;
+  --code-title: #61afef;
+  --code-comment: #7f848e;
+  --code-variable: #e06c75;
 }
 
 * {
@@ -23,35 +100,66 @@ html,
 body {
   margin: 0;
   height: 100%;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--sans);
-  font-size: 14px;
+  background: var(--surface-base);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
 }
 
 #app {
   height: 100%;
 }
+/* Track the real visual viewport on mobile (URL bar show/hide). */
+@supports (height: 100dvh) {
+  body,
+  #app {
+    height: 100dvh;
+  }
+}
+
+/* Visible focus for keyboard users, on everything. */
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
 
 button {
   font: inherit;
   color: inherit;
-  background: var(--bg-raised);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
   padding: 6px 12px;
   cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
 }
 button:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 button.primary {
-  background: var(--accent-dim);
+  background: var(--accent-muted);
   border-color: var(--accent);
 }
 button.danger {
-  border-color: var(--red);
-  color: var(--red);
+  border-color: var(--status-danger);
+  color: var(--status-danger);
+}
+/* Borderless icon-button base: components add their own sizing. */
+button.quiet {
+  background: none;
+  border: none;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+button.quiet:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
 }
 button:disabled {
   opacity: 0.5;
@@ -62,36 +170,50 @@ input,
 select,
 textarea {
   font: inherit;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  color: var(--text-primary);
+  background: var(--surface-base);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
   padding: 8px 10px;
 }
-input:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: 0;
+  border-color: var(--border-focus);
+}
+
+/* Visually hidden but readable by assistive tech. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .markdown {
-  line-height: 1.55;
+  line-height: var(--leading-normal);
   overflow-wrap: break-word;
 }
 .markdown pre {
-  background: #0b0d11;
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
   padding: 10px 12px;
   overflow-x: auto;
-  font-family: var(--mono);
-  font-size: 12.5px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
 }
 .markdown code {
-  font-family: var(--mono);
+  font-family: var(--font-mono);
   font-size: 0.92em;
-  background: #0b0d11;
+  background: var(--surface-sunken);
   border-radius: 4px;
   padding: 1px 5px;
 }
@@ -100,10 +222,10 @@ textarea:focus {
   padding: 0;
 }
 .markdown blockquote {
-  border-left: 3px solid var(--border);
+  border-left: 3px solid var(--border-default);
   margin: 6px 0;
   padding: 2px 12px;
-  color: var(--text-dim);
+  color: var(--text-secondary);
 }
 .markdown p {
   margin: 0.4em 0;
@@ -118,7 +240,7 @@ textarea:focus {
 }
 .markdown th,
 .markdown td {
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   padding: 4px 10px;
 }
 
@@ -127,30 +249,49 @@ textarea:focus {
 .hljs-selector-tag,
 .hljs-literal,
 .hljs-section {
-  color: #c678dd;
+  color: var(--code-keyword);
 }
 .hljs-string,
 .hljs-attr,
 .hljs-template-tag {
-  color: #98c379;
+  color: var(--code-string);
 }
 .hljs-number,
 .hljs-symbol,
 .hljs-bullet {
-  color: #d19a66;
+  color: var(--code-number);
 }
 .hljs-title,
 .hljs-name,
 .hljs-type {
-  color: #61afef;
+  color: var(--code-title);
 }
 .hljs-comment,
 .hljs-quote,
 .hljs-meta {
-  color: #7f848e;
+  color: var(--code-comment);
   font-style: italic;
 }
 .hljs-variable,
 .hljs-regexp {
-  color: #e06c75;
+  color: var(--code-variable);
+}
+
+/* Comfortable touch targets on coarse pointers. */
+@media (pointer: coarse) {
+  button.quiet {
+    min-width: 28px;
+    min-height: 28px;
+  }
+}
+
+/* Respect reduced-motion: stop continuous animation and instant transitions. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
diff --git a/web/src/components/ApprovalCard.svelte b/web/src/components/ApprovalCard.svelte
index 022267a..9acf0d6 100644
--- a/web/src/components/ApprovalCard.svelte
+++ b/web/src/components/ApprovalCard.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import type { TimelineItem } from '../lib/timeline.js';
   import { sendApproval } from '../lib/ws.js';
+  import { connState } from '../lib/stores.js';
   import { permissionSuggestionLabels, summarizeInput } from '../lib/format.js';
+  import { toolCommand, toolDiff } from '../lib/toolPresentation.js';
+  import { focusSelect } from '../lib/actions.js';
+  import { toast } from '../lib/toasts.js';
+  import Icon from './ui/Icon.svelte';
+  import DiffBlock from './ui/DiffBlock.svelte';
 
   let {
     sessionId,
@@ -11,17 +17,30 @@
   let denyMessage = $state('');
   let showDeny = $state(false);
   let responded = $state(false);
+  let showRaw = $state(false);
 
+  const online = $derived($connState === 'online');
+
+  // `responded` only latches when the response actually left the socket, so a
+  // dropped send never bricks the card.
   function allow(): void {
+    if (!sendApproval(sessionId, approval.requestId, 'allow')) {
+      toast.error('Not connected: the response was not sent.');
+      return;
+    }
     responded = true;
-    sendApproval(sessionId, approval.requestId, 'allow');
   }
   function deny(): void {
+    if (!sendApproval(sessionId, approval.requestId, 'deny', denyMessage.trim() || undefined)) {
+      toast.error('Not connected: the response was not sent.');
+      return;
+    }
     responded = true;
-    sendApproval(sessionId, approval.requestId, 'deny', denyMessage.trim() || undefined);
   }
 
   const suggestions = $derived(permissionSuggestionLabels(approval.permissionSuggestions));
+  const diff = $derived(toolDiff(approval.toolName, approval.input));
+  const command = $derived(toolCommand(approval.toolName, approval.input));
 
   const resolvedLabel = $derived.by(() => {
     if (!approval.resolved) return null;
@@ -39,18 +58,34 @@
 
 {#if approval.resolved}
   <div class="resolved" class:denied={approval.resolved.behavior === 'deny'}>
-    {approval.resolved.behavior === 'allow' ? '✓' : '✗'}
+    <Icon name={approval.resolved.behavior === 'allow' ? 'check' : 'close'} size={12} />
     <span class="tool">{approval.toolName}</span>
     {resolvedLabel}
   </div>
 {:else}
-  <div class="card">
+  <div class="card" role="group" aria-label={`Approval request: ${approval.toolName}`}>
     <div class="head">
       <span class="badge">approval needed</span>
       <span class="tool">{approval.toolName}</span>
       <span class="summary">{summarizeInput(approval.toolName, approval.input)}</span>
     </div>
-    <pre>{JSON.stringify(approval.input, null, 2)}</pre>
+
+    {#if diff}
+      <DiffBlock {diff} />
+    {:else if command !== null}
+      <pre class="command">{command}</pre>
+    {/if}
+
+    <div class="raw">
+      <button class="disclosure" aria-expanded={showRaw} onclick={() => (showRaw = !showRaw)}>
+        <span class="chevron" class:open={showRaw}><Icon name="chevron-right" size={12} /></span>
+        details
+      </button>
+      {#if showRaw}
+        <pre>{JSON.stringify(approval.input, null, 2)}</pre>
+      {/if}
+    </div>
+
     {#if suggestions.length}
       <div class="suggestions">
         <span class="sg-label">CLI suggests</span>
@@ -59,18 +94,30 @@
         {/each}
       </div>
     {/if}
+
     <div class="actions">
-      <button class="primary" disabled={responded} onclick={allow}>Allow</button>
-      <button class="danger" disabled={responded} onclick={() => (showDeny = !showDeny)}
+      <button class="primary" disabled={responded || !online} onclick={allow}>Allow</button>
+      <button class="danger" disabled={responded || !online} onclick={() => (showDeny = !showDeny)}
         >Deny…</button
       >
       {#if showDeny}
         <input
-          placeholder="optional reason sent to the agent"
+          placeholder="Optional reason sent to the agent"
+          aria-label="Reason for denying"
+          use:focusSelect
           bind:value={denyMessage}
-          onkeydown={(e) => e.key === 'Enter' && deny()}
+          onkeydown={(e) => {
+            if (e.key === 'Enter') deny();
+            if (e.key === 'Escape') {
+              e.stopPropagation();
+              showDeny = false;
+            }
+          }}
         />
-        <button class="danger" disabled={responded} onclick={deny}>Confirm deny</button>
+        <button class="danger" disabled={responded || !online} onclick={deny}>Confirm deny</button>
+      {/if}
+      {#if !online}
+        <span class="offline-note" role="status">Reconnecting: responses are paused.</span>
       {/if}
     </div>
   </div>
@@ -78,9 +125,9 @@
 
 <style>
   .card {
-    border: 1px solid var(--amber);
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--amber) 6%, var(--bg-panel));
+    border: 1px solid var(--status-warning);
+    border-radius: var(--radius-lg);
+    background: var(--status-warning-surface);
     padding: 12px 14px;
     display: flex;
     flex-direction: column;
@@ -97,19 +144,19 @@
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.07em;
-    color: var(--amber);
-    border: 1px solid var(--amber);
-    border-radius: 999px;
+    color: var(--status-warning);
+    border: 1px solid var(--status-warning);
+    border-radius: var(--radius-full);
     padding: 2px 8px;
     white-space: nowrap;
   }
   .tool {
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-weight: 600;
   }
   .summary {
-    color: var(--text-dim);
-    font-family: var(--mono);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
@@ -117,16 +164,41 @@
   }
   pre {
     margin: 0;
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-size: 12px;
-    background: #0b0d11;
-    border-radius: 6px;
+    background: var(--surface-sunken);
+    border-radius: var(--radius-sm);
     padding: 8px 10px;
     max-height: 260px;
     overflow: auto;
     white-space: pre-wrap;
     overflow-wrap: break-word;
   }
+  .raw {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .disclosure {
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .chevron {
+    display: inline-flex;
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+  .chevron.open {
+    transform: rotate(90deg);
+  }
   .suggestions {
     display: flex;
     align-items: center;
@@ -137,14 +209,14 @@
     font-size: 10.5px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--text-dim);
+    color: var(--text-secondary);
   }
   .chip {
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-size: 11.5px;
-    background: var(--bg-raised);
-    border: 1px solid var(--border);
-    border-radius: 999px;
+    background: var(--surface-raised);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
     padding: 2px 8px;
     max-width: 100%;
     overflow: hidden;
@@ -162,13 +234,20 @@
     min-width: 180px;
     padding: 5px 8px;
   }
+  .offline-note {
+    font-size: var(--font-size-xs);
+    color: var(--status-warning);
+  }
   .resolved {
-    color: var(--text-dim);
-    font-size: 12.5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
     padding: 2px 6px;
   }
   .resolved.denied {
-    color: var(--red);
+    color: var(--status-danger);
   }
   .resolved .tool {
     font-size: 12px;
diff --git a/web/src/components/ChatView.svelte b/web/src/components/ChatView.svelte
index 10bb3dd..1dd9b28 100644
--- a/web/src/components/ChatView.svelte
+++ b/web/src/components/ChatView.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import {
+    addPendingSend,
+    composerInject,
+    connState,
     deltasBySession,
     eventsBySession,
     historyMetaBySession,
+    pendingSends,
     sessions,
     statusBySession,
   } from '../lib/stores.js';
   import { loadEarlier, sendInterrupt, sendUserMessage, subscribeSession } from '../lib/ws.js';
   import { buildTimeline } from '../lib/timeline.js';
+  import { toast } from '../lib/toasts.js';
   import StatusBar from './StatusBar.svelte';
   import MessageBubble from './MessageBubble.svelte';
   import ToolCallCard from './ToolCallCard.svelte';
   import ApprovalCard from './ApprovalCard.svelte';
   import MarkdownStream from './MarkdownStream.svelte';
   import DoneMarker from './DoneMarker.svelte';
+  import Icon from './ui/Icon.svelte';
 
-  let { sessionId, showToast }: { sessionId: string; showToast: (m: string) => void } = $props();
+  let { sessionId }: { sessionId: string } = $props();
 
   let composer = $state('');
   let scroller: HTMLElement | undefined = $state();
@@ -27,8 +33,15 @@
   const events = $derived($eventsBySession.get(sessionId) ?? []);
   const timeline = $derived(buildTimeline(events));
   const streamBuffers = $derived([...($deltasBySession.get(sessionId)?.entries() ?? [])]);
-  const busy = $derived(status === 'running' || status === 'awaiting_approval');
+  const busy = $derived(
+    status === 'running' || status === 'awaiting_approval' || status === 'starting',
+  );
+  const online = $derived($connState === 'online');
+  const pending = $derived($pendingSends.get(sessionId) ?? []);
   const historyMeta = $derived($historyMetaBySession.get(sessionId));
+  const empty = $derived(
+    timeline.length === 0 && streamBuffers.length === 0 && pending.length === 0 && !busy,
+  );
   let loadingEarlier = $state(false);
 
   async function onLoadEarlier(): Promise<void> {
@@ -42,7 +55,7 @@
       // Keep the viewport anchored: prepended content grows scrollHeight from the top.
       if (scroller) scroller.scrollTop = prevTop + (scroller.scrollHeight - before);
     } catch (e) {
-      showToast(`Load earlier failed: ${(e as Error).message}`);
+      toast.error(`Could not load earlier messages: ${(e as Error).message}`);
     } finally {
       loadingEarlier = false;
     }
@@ -57,22 +70,42 @@
   $effect(() => {
     void timeline;
     void streamBuffers;
+    void pending;
     if (pinnedToBottom && scroller) {
       void tick().then(() => scroller?.scrollTo({ top: scroller.scrollHeight }));
     }
   });
 
+  // Queue-drop restore: append the dropped follow-up text back into the composer.
+  $effect(() => {
+    const inject = $composerInject;
+    if (inject && inject.sessionId === sessionId) {
+      composer = composer ? `${composer}\n\n${inject.text}` : inject.text;
+      composerInject.set(null);
+    }
+  });
+
   function onScroll(): void {
     if (!scroller) return;
     pinnedToBottom = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 60;
   }
 
+  function jumpToLatest(): void {
+    pinnedToBottom = true;
+    scroller?.scrollTo({ top: scroller.scrollHeight });
+  }
+
   function send(): void {
     const text = composer.trim();
     if (!text) return;
     // While a turn is running the server queues this for the next turn.
+    if (!sendUserMessage(sessionId, text)) {
+      // Never clear the draft on a failed send.
+      toast.error('Not connected: the message was not sent. Your draft is preserved.');
+      return;
+    }
+    addPendingSend(sessionId, text, busy);
     composer = '';
-    sendUserMessage(sessionId, text);
   }
 
   function onKeydown(e: KeyboardEvent): void {
@@ -85,7 +118,7 @@
 
 <div class="chat">
   {#if session}
-    <StatusBar {session} {status} {showToast} />
+    <StatusBar {session} {status} />
   {/if}
 
   <div class="scroll" bind:this={scroller} onscroll={onScroll}>
@@ -96,6 +129,17 @@
         </button>
       {/if}
 
+      {#if empty}
+        <div class="empty">
+          <p class="empty-title">No messages yet</p>
+          <p>Describe a task below to get the agent going.</p>
+          {#if session}
+            <p class="empty-cwd" title={session.cwd}>Working in <code>{session.cwd}</code></p>
+          {/if}
+          <p class="empty-hint">Enter sends · Shift+Enter for a newline</p>
+        </div>
+      {/if}
+
       {#each timeline as item (item.id)}
         {#if item.kind === 'message'}
           <MessageBubble role={item.role} text={item.text} />
@@ -115,33 +159,66 @@
         </div>
       {/each}
 
-      {#if status === 'running' && streamBuffers.length === 0}
-        <div class="working">working<span class="pulse">…</span></div>
+      {#if (status === 'running' || status === 'starting') && streamBuffers.length === 0}
+        <div class="working" role="status">
+          {status === 'starting' ? 'starting engine' : 'working'}<span class="pulse">…</span>
+        </div>
       {/if}
+
+      {#each pending as p (p.localId)}
+        <div class="pending-bubble">
+          <pre class="pending-text">{p.text}</pre>
+          <span class="pending-caption">{p.queued ? 'queued' : 'sending…'}</span>
+        </div>
+      {/each}
     </div>
   </div>
 
+  {#if !pinnedToBottom}
+    <button class="jump" onclick={jumpToLatest}>
+      <Icon name="chevron-down" size={14} /> Jump to latest
+    </button>
+  {/if}
+
   <div class="composer">
-    <textarea
-      rows="3"
-      placeholder={busy
-        ? 'Queue a follow-up (runs after this turn, Enter to send)…'
-        : 'Message the agent (Enter to send, Shift+Enter for newline)'}
-      bind:value={composer}
-      onkeydown={onKeydown}></textarea>
-    <div class="composer-actions">
-      {#if busy}
-        <button class="danger" onclick={() => sendInterrupt(sessionId)}>■ Interrupt</button>
-      {/if}
-      <button class="primary" onclick={send} disabled={!composer.trim()}>
-        {busy ? 'Queue' : 'Send'}
-      </button>
+    {#if !online}
+      <div class="offline-hint" role="status">
+        <Icon name="alert-triangle" size={12} /> Reconnecting: sending is paused, your draft is safe here.
+      </div>
+    {/if}
+    <div class="composer-row">
+      <textarea
+        id="composer-input"
+        rows="3"
+        aria-label="Message the agent"
+        placeholder={busy
+          ? 'Queue a follow-up (runs after this turn, Enter to send)…'
+          : 'Message the agent (Enter to send, Shift+Enter for newline)'}
+        bind:value={composer}
+        onkeydown={onKeydown}></textarea>
+      <div class="composer-actions">
+        {#if busy && status !== 'starting'}
+          <button
+            class="stop-turn"
+            disabled={!online}
+            onclick={() => sendInterrupt(sessionId)}
+            title="Interrupt the current turn (the session stays usable)"
+          >
+            <Icon name="square" size={12} /> Stop turn
+          </button>
+        {/if}
+        <button class="primary send" onclick={send} disabled={!composer.trim() || !online}>
+          <Icon name="send" size={14} />
+          {busy ? 'Queue' : 'Send'}
+        </button>
+      </div>
     </div>
   </div>
 </div>
 
 <style>
   .chat {
+    position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -161,17 +238,49 @@
   .load-earlier {
     align-self: center;
     padding: 5px 14px;
-    font-size: 12.5px;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+    background: var(--surface-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    color: var(--text-secondary);
+  }
+  .empty {
+    align-self: center;
+    text-align: center;
+    margin-top: 10vh;
+    max-width: 420px;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .empty p {
+    margin: 0;
+  }
+  .empty-title {
+    font-size: var(--font-size-lg);
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+  .empty-cwd {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .empty-cwd code {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+  }
+  .empty-hint {
+    margin-top: var(--space-2);
+    font-size: var(--font-size-xs);
   }
   .streaming {
     position: relative;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: 10px;
+    background: var(--surface-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
     padding: 10px 14px;
   }
   .cursor {
@@ -179,7 +288,7 @@
     animation: blink 1s step-end infinite;
   }
   .working {
-    color: var(--text-dim);
+    color: var(--text-secondary);
     font-size: 13px;
     padding: 4px 8px;
   }
@@ -191,10 +300,60 @@
       opacity: 0;
     }
   }
+  .jump {
+    position: absolute;
+    bottom: 96px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 5px 14px;
+    font-size: var(--font-size-sm);
+    border-radius: var(--radius-full);
+    background: var(--surface-raised);
+    border: 1px solid var(--border-strong);
+    box-shadow: var(--shadow-overlay);
+  }
+  .pending-bubble {
+    align-self: flex-end;
+    max-width: 85%;
+    background: var(--accent-muted);
+    border-radius: var(--radius-lg);
+    padding: 10px 14px;
+    opacity: 0.6;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .pending-text {
+    margin: 0;
+    font-family: var(--font-sans);
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+  .pending-caption {
+    align-self: flex-end;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    font-style: italic;
+  }
   .composer {
-    border-top: 1px solid var(--border);
-    background: var(--bg-panel);
+    border-top: 1px solid var(--border-default);
+    background: var(--surface-panel);
     padding: 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .offline-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--font-size-sm);
+    color: var(--status-warning);
+  }
+  .composer-row {
     display: flex;
     gap: 10px;
     align-items: flex-end;
@@ -210,4 +369,27 @@
     flex-direction: column;
     gap: 6px;
   }
+  .composer-actions button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+  }
+  .stop-turn {
+    border-color: var(--status-warning);
+    color: var(--status-warning);
+    background: none;
+  }
+  .stop-turn:hover {
+    background: var(--status-warning-surface);
+  }
+  @media (max-width: 480px) {
+    .timeline {
+      padding: 12px 10px 20px;
+    }
+    .composer {
+      padding: 8px 10px;
+    }
+  }
 </style>
diff --git a/web/src/components/DoneMarker.svelte b/web/src/components/DoneMarker.svelte
index 952f80d..e24afb5 100644
--- a/web/src/components/DoneMarker.svelte
+++ b/web/src/components/DoneMarker.svelte
@@ -44,21 +44,21 @@
   .line {
     flex: 1;
     height: 1px;
-    background: var(--border);
+    background: var(--border-default);
   }
   .label {
-    font-size: 11px;
-    color: var(--text-dim);
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
     white-space: nowrap;
     max-width: 70%;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .marker[data-reason='error'] .label {
-    color: var(--red);
+    color: var(--status-danger);
   }
   .marker[data-reason='interrupted'] .label,
   .marker[data-reason='killed'] .label {
-    color: var(--amber);
+    color: var(--status-warning);
   }
 </style>
diff --git a/web/src/components/Launcher.svelte b/web/src/components/Launcher.svelte
index e7460f0..a155cd9 100644
--- a/web/src/components/Launcher.svelte
+++ b/web/src/components/Launcher.svelte
@@ -8,13 +8,15 @@
     PermissionMode,
   } from '@hub/shared';
   import { api } from '../lib/api.js';
-  import { PERMISSION_MODES } from '../lib/format.js';
+  import { PERMISSION_MODES, basename } from '../lib/format.js';
   import { activeSessionId, sessions, upsertSession } from '../lib/stores.js';
+  import Icon from './ui/Icon.svelte';
 
   let engines = $state<EngineDescriptor[]>([]);
   let engineId = $state('');
   let cwd = $state('');
   let validation = $state<FsValidateResponse | null>(null);
+  let validationError = $state<string | null>(null);
   let git = $state<GitInfoResponse | null>(null);
   let browseData = $state<FsBrowseResponse | null>(null);
   let showBrowse = $state(false);
@@ -50,6 +52,7 @@
 
   function resetProject(): void {
     validation = null;
+    validationError = null;
     git = null;
     branch = '';
     branchTouched = false;
@@ -67,13 +70,16 @@
 
   async function runValidate(value: string): Promise<void> {
     try {
+      validationError = null;
       validation = await api.fsValidate(value);
       if (validation.ok && validation.isGitRepo && validation.resolved) {
         git = await api.gitInfo(validation.resolved);
         if (!branchTouched) branch = git.currentBranch ?? git.defaultBranch ?? '';
       }
-    } catch {
+    } catch (e) {
+      // Distinguish "could not check" (network/server) from "path invalid".
       validation = null;
+      validationError = `Could not check the directory: ${(e as Error).message}`;
     }
   }
 
@@ -127,10 +133,6 @@
       void launch();
     }
   }
-
-  function baseName(p: string): string {
-    return p.replace(/\/+$/, '').split('/').pop() || p;
-  }
 </script>
 
 <div class="launcher">
@@ -151,7 +153,7 @@
         <div class="chips">
           {#each recentProjects as p (p)}
             <button type="button" class="chip" title={p} onclick={() => pickRecent(p)}>
-              {baseName(p)}
+              {basename(p)}
             </button>
           {/each}
         </div>
@@ -173,39 +175,69 @@
       </div>
       {#if validation}
         {#if validation.ok}
-          <span class="hint ok"
-            >✓ {validation.resolved}{validation.isGitRepo ? ' · git repo' : ''}</span
-          >
+          <span class="hint ok">
+            <Icon name="check" size={12} />
+            {validation.resolved}{validation.isGitRepo ? ' · git repo' : ''}
+          </span>
         {:else}
-          <span class="hint bad">✗ {validation.error}</span>
+          <span class="hint bad"><Icon name="close" size={12} /> {validation.error}</span>
         {/if}
+      {:else if validationError}
+        <span class="hint bad"><Icon name="alert-triangle" size={12} /> {validationError}</span>
       {/if}
     </label>
 
     {#if showBrowse && browseData}
-      <div class="browser">
+      <!-- Escape-to-close convenience; the Close button is the accessible control. -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <div
+        class="browser"
+        role="group"
+        aria-label="Directory browser"
+        onkeydown={(e) => {
+          if (e.key === 'Escape') {
+            e.stopPropagation();
+            showBrowse = false;
+          }
+        }}
+      >
         <div class="browser-path">
           {#if browseData.parent !== null || browseData.path}
             <button
               type="button"
-              class="icon"
-              onclick={() => openBrowse(browseData?.parent ?? undefined)}>↑</button
+              class="quiet"
+              aria-label="Up one directory"
+              onclick={() => openBrowse(browseData?.parent ?? undefined)}
             >
+              <Icon name="arrow-up" size={14} />
+            </button>
           {/if}
-          <span>{browseData.path || '(workspace roots)'}</span>
+          <span class="browser-cwd">{browseData.path || '(workspace roots)'}</span>
+          <button
+            type="button"
+            class="quiet"
+            aria-label="Close directory browser"
+            onclick={() => (showBrowse = false)}
+          >
+            <Icon name="close" size={14} />
+          </button>
         </div>
         <div class="browser-list">
           {#each browseData.entries as entry (entry.path)}
             <div class="browser-entry">
               <button type="button" class="entry-name" onclick={() => openBrowse(entry.path)}>
-                📁 {entry.name}{entry.isGitRepo ? ' ⎇' : ''}
+                <Icon name="folder" size={13} />
+                {entry.name}
+                {#if entry.isGitRepo}<span class="entry-git" title="Git repository"
+                    ><Icon name="branch" size={11} /></span
+                  >{/if}
               </button>
               <button type="button" class="entry-pick" onclick={() => pickDir(entry.path)}
-                >select</button
+                >Select</button
               >
             </div>
           {:else}
-            <p class="hint">no subdirectories</p>
+            <p class="hint">No subdirectories.</p>
           {/each}
         </div>
         {#if browseData.path}
@@ -252,8 +284,16 @@
     </label>
 
     <div class="advanced">
-      <button type="button" class="disclosure" onclick={() => (showAdvanced = !showAdvanced)}>
-        {showAdvanced ? '▾' : '▸'} Advanced
+      <button
+        type="button"
+        class="disclosure"
+        aria-expanded={showAdvanced}
+        onclick={() => (showAdvanced = !showAdvanced)}
+      >
+        <span class="chevron" class:open={showAdvanced}
+          ><Icon name="chevron-right" size={13} /></span
+        >
+        Advanced
       </button>
       {#if showAdvanced}
         <div class="advanced-body">
@@ -334,7 +374,7 @@
   }
   .sub {
     margin: 0;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     font-size: 13px;
   }
   .field {
@@ -344,7 +384,7 @@
   }
   .field-label {
     font-size: 12px;
-    color: var(--text-dim);
+    color: var(--text-secondary);
   }
   .row {
     display: flex;
@@ -356,14 +396,21 @@
   .hint {
     font-size: 12px;
   }
+  .hint.ok,
+  .hint.bad {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    overflow-wrap: anywhere;
+  }
   .hint.dim {
-    color: var(--text-dim);
+    color: var(--text-secondary);
   }
   .ok {
-    color: var(--green);
+    color: var(--status-success);
   }
   .bad {
-    color: var(--red);
+    color: var(--status-danger);
   }
   .recent {
     display: flex;
@@ -379,18 +426,18 @@
     font-size: 12px;
     padding: 4px 10px;
     border-radius: 999px;
-    background: var(--bg-raised);
-    border: 1px solid var(--border);
+    background: var(--surface-raised);
+    border: 1px solid var(--border-default);
   }
   .cta {
-    border: 1px solid var(--amber);
+    border: 1px solid var(--status-warning);
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 13px;
-    background: color-mix(in srgb, var(--amber) 6%, var(--bg-panel));
+    background: color-mix(in srgb, var(--status-warning) 6%, var(--surface-panel));
   }
   .git {
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-default);
     border-radius: 8px;
     padding: 10px 12px;
     gap: 8px;
@@ -415,22 +462,32 @@
   }
   .disclosure {
     align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
     background: none;
     border: none;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     padding: 2px 0;
     font-size: 13px;
   }
+  .chevron {
+    display: inline-flex;
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+  .chevron.open {
+    transform: rotate(90deg);
+  }
   .advanced-body {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    border-left: 2px solid var(--border);
+    border-left: 2px solid var(--border-default);
     padding-left: 12px;
   }
   .field.danger .field-label,
   .field.danger :global(select) {
-    color: var(--red);
+    color: var(--status-danger);
   }
   .actions {
     display: flex;
@@ -442,7 +499,7 @@
     font-size: 14px;
   }
   .browser {
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-default);
     border-radius: 8px;
     padding: 10px;
     display: flex;
@@ -454,9 +511,16 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-size: 12px;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+  }
+  .browser-cwd {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .browser-list {
     max-height: 200px;
@@ -474,13 +538,18 @@
     border: none;
     text-align: left;
     flex: 1;
+    min-width: 0;
     padding: 4px 6px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .entry-git {
+    display: inline-flex;
+    color: var(--text-secondary);
   }
   .entry-pick {
     font-size: 11px;
     padding: 2px 8px;
   }
-  .icon {
-    padding: 2px 8px;
-  }
 </style>
diff --git a/web/src/components/LoginGate.svelte b/web/src/components/LoginGate.svelte
index 70977fe..cf40933 100644
--- a/web/src/components/LoginGate.svelte
+++ b/web/src/components/LoginGate.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { api } from '../lib/api.js';
-  import { token } from '../lib/stores.js';
+  import { logoutReason, token } from '../lib/stores.js';
 
   let { loggedIn }: { loggedIn: () => void } = $props();
 
@@ -16,10 +16,11 @@
     token.set(value.trim());
     try {
       await api.authCheck();
+      logoutReason.set(null);
       loggedIn();
     } catch {
       token.set(null);
-      error = 'Invalid token';
+      error = 'That token was rejected. Check AUTH_TOKEN in the server environment or startup log.';
     } finally {
       busy = false;
     }
@@ -29,10 +30,21 @@
 <div class="gate">
   <form onsubmit={submit}>
     <h1>agentic-cli-hub</h1>
+    {#if $logoutReason}
+      <p class="reason" role="alert">{$logoutReason}</p>
+    {/if}
     <p>Enter the access token (see AUTH_TOKEN in the server environment or startup log).</p>
-    <input type="password" placeholder="access token" bind:value autocomplete="current-password" />
-    {#if error}<p class="error">{error}</p>{/if}
-    <button class="primary" type="submit" disabled={busy || !value.trim()}>Sign in</button>
+    <input
+      type="password"
+      placeholder="Access token"
+      aria-label="Access token"
+      bind:value
+      autocomplete="current-password"
+    />
+    {#if error}<p class="error" role="alert">{error}</p>{/if}
+    <button class="primary" type="submit" disabled={busy || !value.trim()}>
+      {busy ? 'Signing in…' : 'Sign in'}
+    </button>
   </form>
 </div>
 
@@ -42,27 +54,35 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: var(--space-4);
   }
   form {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    width: 340px;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: 12px;
+    gap: var(--space-3);
+    width: min(340px, 100%);
+    background: var(--surface-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xl);
     padding: 28px;
   }
   h1 {
     margin: 0;
-    font-size: 20px;
+    font-size: var(--font-size-xl);
   }
   p {
     margin: 0;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     font-size: 13px;
   }
+  .reason {
+    color: var(--status-warning);
+    background: var(--status-warning-surface);
+    border: 1px solid var(--status-warning);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+  }
   .error {
-    color: var(--red);
+    color: var(--status-danger);
   }
 </style>
diff --git a/web/src/components/MessageBubble.svelte b/web/src/components/MessageBubble.svelte
index 3e55dec..f670202 100644
--- a/web/src/components/MessageBubble.svelte
+++ b/web/src/components/MessageBubble.svelte
@@ -18,21 +18,21 @@
     padding: 10px 14px;
   }
   .bubble.user {
-    background: var(--accent-dim);
+    background: var(--accent-muted);
     align-self: flex-end;
     max-width: 85%;
   }
   .bubble.assistant {
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
+    background: var(--surface-panel);
+    border: 1px solid var(--border-default);
   }
   .bubble.system {
-    color: var(--text-dim);
+    color: var(--text-secondary);
     font-size: 13px;
   }
   .user-text {
     margin: 0;
-    font-family: var(--sans);
+    font-family: var(--font-sans);
     white-space: pre-wrap;
     overflow-wrap: break-word;
   }
diff --git a/web/src/components/SessionSidebar.svelte b/web/src/components/SessionSidebar.svelte
index bdf3d20..f661e3d 100644
--- a/web/src/components/SessionSidebar.svelte
+++ b/web/src/components/SessionSidebar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { SvelteMap } from 'svelte/reactivity';
+  import type { SessionDto, SessionStatus } from '@hub/shared';
   import {
     activeSessionId,
     connState,
@@ -9,15 +11,29 @@
   } from '../lib/stores.js';
   import { api } from '../lib/api.js';
   import { disconnect, subscribeSession } from '../lib/ws.js';
-  import { engineStateLabel, isDangerMode, relativeTime } from '../lib/format.js';
+  import {
+    basename,
+    engineStateLabel,
+    isDangerMode,
+    relativeTime,
+    statusLabel,
+  } from '../lib/format.js';
+  import { toast } from '../lib/toasts.js';
+  import { confirmDialog } from '../lib/confirm.js';
+  import { focusSelect } from '../lib/actions.js';
+  import { now } from '../lib/now.js';
+  import Icon from './ui/Icon.svelte';
 
-  let { showToast }: { showToast: (m: string) => void } = $props();
+  /** Called after choosing a session or "New session" (App closes the drawer). */
+  let { onNavigate }: { onNavigate?: () => void } = $props();
 
   let renamingId: string | null = $state(null);
   let renameValue = $state('');
   let showArchived = $state(false);
   let filterText = $state('');
   let loadedArchived = false;
+  /** Row action in flight, per session id (disables + shows a spinner). */
+  const busyAction = new SvelteMap<string, 'fork' | 'archive' | 'delete'>();
 
   const visibleSessions = $derived(
     $sessions.filter((s) => {
@@ -27,9 +43,22 @@
     }),
   );
 
+  const CONN_LABEL = {
+    online: 'Online',
+    connecting: 'Reconnecting…',
+    offline: 'Offline',
+    unauthenticated: 'Offline',
+  } as const;
+
   function select(id: string): void {
     activeSessionId.set(id);
     subscribeSession(id);
+    onNavigate?.();
+  }
+
+  function newSession(): void {
+    activeSessionId.set(null);
+    onNavigate?.();
   }
 
   async function toggleArchived(): Promise<void> {
@@ -41,59 +70,81 @@
         for (const s of await api.sessions(true)) upsertSession(s);
       } catch (e) {
         loadedArchived = false;
-        showToast(`Load archived failed: ${(e as Error).message}`);
+        toast.error(`Could not load archived sessions: ${(e as Error).message}`);
       }
     }
   }
 
-  function statusColor(id: string): string {
-    switch ($statusBySession.get(id) ?? $sessions.find((s) => s.id === id)?.status) {
-      case 'running':
-        return 'var(--accent)';
-      case 'awaiting_approval':
-        return 'var(--amber)';
-      case 'error':
-        return 'var(--red)';
-      default:
-        return 'var(--text-dim)';
-    }
+  function rowStatus(id: string): SessionStatus {
+    return $statusBySession.get(id) ?? $sessions.find((s) => s.id === id)?.status ?? 'idle';
   }
 
-  async function rename(id: string): Promise<void> {
-    const title = renameValue.trim();
+  function startRename(s: SessionDto): void {
+    renamingId = s.id;
+    renameValue = s.title;
+  }
+
+  function commitRename(id: string): void {
+    if (renamingId !== id) return; // already committed or cancelled
     renamingId = null;
+    const title = renameValue.trim();
     if (!title) return;
-    try {
-      await api.updateSession(id, { title });
-    } catch (e) {
-      showToast(`Rename failed: ${(e as Error).message}`);
-    }
+    void api
+      .updateSession(id, { title })
+      .catch((e: unknown) => toast.error(`Rename failed: ${(e as Error).message}`));
   }
 
-  async function remove(id: string, title: string): Promise<void> {
-    if (!confirm(`Delete session "${title}" and its history?`)) return;
+  async function remove(s: SessionDto): Promise<void> {
+    const extra = s.worktreePath ? ' Its isolated worktree will be removed too.' : '';
+    const ok = await confirmDialog({
+      danger: true,
+      title: 'Delete session?',
+      body: `"${s.title}" and its full history will be permanently deleted.${extra}`,
+      confirmLabel: 'Delete',
+    });
+    if (!ok) return;
+    busyAction.set(s.id, 'delete');
     try {
-      await api.deleteSession(id);
+      await api.deleteSession(s.id);
     } catch (e) {
-      showToast(`Delete failed: ${(e as Error).message}`);
+      toast.error(`Delete failed: ${(e as Error).message}`);
+    } finally {
+      busyAction.delete(s.id);
     }
   }
 
   async function fork(id: string): Promise<void> {
+    busyAction.set(id, 'fork');
     try {
       const dto = await api.forkSession(id);
       upsertSession(dto);
       select(dto.id);
     } catch (e) {
-      showToast(`Fork failed: ${(e as Error).message}`);
+      toast.error(`Fork failed: ${(e as Error).message}`);
+    } finally {
+      busyAction.delete(id);
     }
   }
 
   async function archive(id: string, archived: boolean): Promise<void> {
+    busyAction.set(id, 'archive');
     try {
       await api.archiveSession(id, archived);
+      if (archived) {
+        toast.success('Session archived', {
+          action: {
+            label: 'Undo',
+            run: () =>
+              void api
+                .archiveSession(id, false)
+                .catch((e: unknown) => toast.error(`Unarchive failed: ${(e as Error).message}`)),
+          },
+        });
+      }
     } catch (e) {
-      showToast(`${archived ? 'Archive' : 'Unarchive'} failed: ${(e as Error).message}`);
+      toast.error(`${archived ? 'Archive' : 'Unarchive'} failed: ${(e as Error).message}`);
+    } finally {
+      busyAction.delete(id);
     }
   }
 
@@ -106,94 +157,134 @@
 <aside>
   <header>
     <span class="brand">agentic-cli-hub</span>
-    <span class="conn" title="connection state" data-state={$connState}>●</span>
+    <span class="conn" data-state={$connState} role="status">
+      <span class="conn-dot"></span>{CONN_LABEL[$connState]}
+    </span>
   </header>
 
-  <button class="primary new" onclick={() => activeSessionId.set(null)}>+ New session</button>
+  <button class="primary new" onclick={newSession}>
+    <Icon name="plus" size={14} /> New session
+  </button>
 
   <div class="filters">
-    <input class="search" placeholder="Search sessions…" bind:value={filterText} />
+    <input
+      id="session-search"
+      class="search"
+      placeholder="Search sessions…"
+      aria-label="Search sessions"
+      bind:value={filterText}
+    />
     <button
       class="toggle"
       class:on={showArchived}
+      aria-pressed={showArchived}
       title={showArchived ? 'Show active sessions' : 'Show archived sessions'}
-      onclick={toggleArchived}>🗄</button
+      onclick={toggleArchived}
     >
+      <Icon
+        name="archive"
+        label={showArchived ? 'Show active sessions' : 'Show archived sessions'}
+      />
+    </button>
   </div>
 
-  <nav>
+  <nav aria-label="Sessions">
     {#each visibleSessions as s (s.id)}
-      <div
-        class="item"
-        class:active={s.id === $activeSessionId}
-        onclick={() => select(s.id)}
-        onkeydown={(e) => e.key === 'Enter' && select(s.id)}
-        role="button"
-        tabindex="0"
-      >
-        <span class="dot" style="color: {statusColor(s.id)}">●</span>
-        <div class="meta">
-          {#if renamingId === s.id}
-            <!-- svelte-ignore a11y_autofocus -->
-            <input
-              autofocus
-              bind:value={renameValue}
-              onblur={() => rename(s.id)}
-              onkeydown={(e) => {
-                if (e.key === 'Enter') rename(s.id);
-                if (e.key === 'Escape') renamingId = null;
-              }}
-              onclick={(e) => e.stopPropagation()}
-            />
-          {:else}
-            <span class="title" title={s.title}>{s.title}</span>
-          {/if}
-          <span class="sub">
-            <span
-              class="engine-dot"
-              data-engine={s.engineState}
-              title={`Engine process: ${engineStateLabel(s.engineState)}`}
-            ></span>
-            <span class="engine">{s.engineId}</span>
-            {#if isDangerMode(s.permissionMode)}<span class="yolo">BYPASS</span>{/if}
-            <span>{relativeTime(s.updatedAt)}</span>
-          </span>
-        </div>
+      <div class="item" class:active={s.id === $activeSessionId}>
+        {#if renamingId === s.id}
+          <input
+            class="rename"
+            aria-label="Session title"
+            use:focusSelect
+            bind:value={renameValue}
+            onblur={() => commitRename(s.id)}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') {
+                e.stopPropagation();
+                commitRename(s.id);
+              }
+              if (e.key === 'Escape') {
+                e.stopPropagation();
+                renamingId = null;
+              }
+            }}
+          />
+        {:else}
+          <button
+            class="row-main"
+            aria-current={s.id === $activeSessionId ? 'true' : undefined}
+            onclick={() => select(s.id)}
+          >
+            <span class="dot" data-status={rowStatus(s.id)} title={statusLabel(rowStatus(s.id))}>
+              <span class="sr-only">{statusLabel(rowStatus(s.id))}</span>
+            </span>
+            <span class="meta">
+              <span class="title" title={s.title}>{s.title}</span>
+              <span class="sub">
+                <span
+                  class="chip engine"
+                  data-engine={s.engineState}
+                  title={`Engine process: ${engineStateLabel(s.engineState)}`}
+                >
+                  <span class="engine-dot"></span>{s.engineId}
+                  <span class="sr-only">, engine {engineStateLabel(s.engineState)}</span>
+                </span>
+                {#if isDangerMode(s.permissionMode)}
+                  <span class="chip yolo" title="Permission prompts are bypassed">BYPASS</span>
+                {/if}
+                {#if s.worktreePath}
+                  <span class="chip wt" title={`Isolated worktree: ${s.worktreePath}`}>
+                    <Icon name="branch" size={11} />{basename(s.worktreePath)}
+                  </span>
+                {/if}
+                {#if rowStatus(s.id) === 'awaiting_approval'}
+                  <span class="chip approval">needs approval</span>
+                {/if}
+                <span class="time">{relativeTime(s.updatedAt, $now)}</span>
+              </span>
+            </span>
+          </button>
+        {/if}
         <div class="actions">
           <button
-            class="icon"
-            title="Rename"
-            onclick={(e) => {
-              e.stopPropagation();
-              renamingId = s.id;
-              renameValue = s.title;
-            }}>✎</button
+            class="quiet act"
+            aria-label={`Rename session "${s.title}"`}
+            onclick={() => startRename(s)}
           >
+            <Icon name="pencil" size={14} />
+          </button>
           <button
-            class="icon"
-            title="Fork session"
-            disabled={!s.engineSessionId}
-            onclick={(e) => {
-              e.stopPropagation();
-              void fork(s.id);
-            }}>⑂</button
+            class="quiet act"
+            aria-label={`Fork session "${s.title}"`}
+            title={s.engineSessionId ? 'Fork session' : 'Only a session that has run can be forked'}
+            disabled={!s.engineSessionId || busyAction.has(s.id)}
+            onclick={() => void fork(s.id)}
           >
+            <Icon name={busyAction.get(s.id) === 'fork' ? 'spinner' : 'fork'} size={14} />
+          </button>
           <button
-            class="icon"
-            title={s.archivedAt ? 'Unarchive' : 'Archive'}
-            onclick={(e) => {
-              e.stopPropagation();
-              void archive(s.id, !s.archivedAt);
-            }}>{s.archivedAt ? '↩' : '📁'}</button
+            class="quiet act"
+            aria-label={`${s.archivedAt ? 'Unarchive' : 'Archive'} session "${s.title}"`}
+            disabled={busyAction.has(s.id)}
+            onclick={() => void archive(s.id, !s.archivedAt)}
           >
+            <Icon
+              name={busyAction.get(s.id) === 'archive'
+                ? 'spinner'
+                : s.archivedAt
+                  ? 'unarchive'
+                  : 'archive'}
+              size={14}
+            />
+          </button>
           <button
-            class="icon"
-            title="Delete"
-            onclick={(e) => {
-              e.stopPropagation();
-              void remove(s.id, s.title);
-            }}>🗑</button
+            class="quiet act delete"
+            aria-label={`Delete session "${s.title}"`}
+            disabled={busyAction.has(s.id)}
+            onclick={() => void remove(s)}
           >
+            <Icon name={busyAction.get(s.id) === 'delete' ? 'spinner' : 'trash'} size={14} />
+          </button>
         </div>
       </div>
     {:else}
@@ -202,7 +293,7 @@
   </nav>
 
   <footer>
-    <button onclick={logout}>Sign out</button>
+    <button onclick={logout}><Icon name="log-out" size={14} /> Sign out</button>
   </footer>
 </aside>
 
@@ -211,30 +302,52 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--bg-panel);
-    border-right: 1px solid var(--border);
+    background: var(--surface-panel);
+    border-right: 1px solid var(--border-default);
   }
   header {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--space-2);
     padding: 14px 16px 8px;
   }
   .brand {
     font-weight: 600;
   }
   .conn {
-    font-size: 11px;
-    color: var(--red);
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+  .conn-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--status-danger);
+    flex: none;
   }
-  .conn[data-state='online'] {
-    color: var(--green);
+  .conn[data-state='online'] .conn-dot {
+    background: var(--status-success);
   }
-  .conn[data-state='connecting'] {
-    color: var(--amber);
+  .conn[data-state='connecting'] .conn-dot {
+    background: var(--status-warning);
+    animation: conn-pulse 1.2s ease-in-out infinite;
+  }
+  @keyframes conn-pulse {
+    50% {
+      opacity: 0.4;
+    }
   }
   .new {
     margin: 8px 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
   }
   .filters {
     display: flex;
@@ -250,13 +363,16 @@
   .toggle {
     padding: 4px 8px;
     background: none;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    font-size: 12px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    display: inline-flex;
+    align-items: center;
   }
   .toggle.on {
-    background: var(--bg-raised);
+    background: var(--surface-raised);
     border-color: var(--accent);
+    color: var(--text-primary);
   }
   nav {
     flex: 1;
@@ -266,25 +382,60 @@
   .item {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 8px;
-    border-radius: 8px;
-    cursor: pointer;
+    gap: 2px;
+    border-radius: var(--radius-md);
   }
   .item:hover {
-    background: var(--bg-hover);
+    background: var(--surface-hover);
   }
   .item.active {
-    background: var(--bg-raised);
+    background: var(--surface-raised);
+  }
+  .row-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: none;
+    border: none;
+    text-align: left;
+    border-radius: var(--radius-md);
+  }
+  .row-main:hover {
+    background: none;
+  }
+  .rename {
+    flex: 1;
+    min-width: 0;
+    margin: 4px;
+    padding: 5px 8px;
+    font-size: var(--font-size-sm);
   }
   .dot {
-    font-size: 10px;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--text-secondary);
+    flex: none;
+  }
+  .dot[data-status='running'],
+  .dot[data-status='starting'] {
+    background: var(--accent);
+  }
+  .dot[data-status='awaiting_approval'] {
+    background: var(--status-warning);
+  }
+  .dot[data-status='error'] {
+    background: var(--status-danger);
   }
   .meta {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
+    gap: 2px;
   }
   .title {
     white-space: nowrap;
@@ -294,54 +445,101 @@
   .sub {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 11px;
-    color: var(--text-dim);
+    gap: 6px;
+    flex-wrap: wrap;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .chip.engine {
+    font-family: var(--font-mono);
   }
   .engine-dot {
     width: 7px;
     height: 7px;
-    border-radius: 50%;
-    background: var(--text-dim);
+    border-radius: var(--radius-full);
+    background: transparent;
+    border: 1px solid var(--text-secondary);
     flex: none;
   }
-  .engine-dot[data-engine='live'] {
-    background: var(--green);
+  .chip.engine[data-engine='live'] .engine-dot {
+    background: var(--status-success);
+    border-color: var(--status-success);
   }
-  .engine-dot[data-engine='dead'] {
-    background: var(--red);
+  .chip.engine[data-engine='hibernated'] .engine-dot {
+    background: var(--text-secondary);
+    border-color: var(--text-secondary);
+    opacity: 0.5;
   }
-  .engine {
-    font-family: var(--mono);
+  .chip.engine[data-engine='dead'] .engine-dot {
+    background: var(--status-danger);
+    border-color: var(--status-danger);
   }
-  .yolo {
-    color: var(--red);
+  .chip.yolo {
+    color: var(--status-danger);
     font-weight: 700;
     letter-spacing: 0.04em;
   }
-  .actions {
-    display: none;
-    gap: 2px;
+  .chip.wt {
+    color: var(--text-secondary);
   }
-  .item:hover .actions {
-    display: flex;
+  .chip.approval {
+    color: var(--status-warning);
+    border: 1px solid var(--status-warning);
+    border-radius: var(--radius-full);
+    padding: 0 6px;
+    font-size: 10px;
   }
-  .icon {
-    padding: 2px 6px;
-    font-size: 12px;
-    background: none;
-    border: none;
+  .time {
+    margin-left: auto;
+    flex: none;
   }
-  .icon:disabled {
+  .actions {
+    display: flex;
+    gap: 0;
+    padding-right: 4px;
+    visibility: hidden;
+  }
+  .item:hover .actions,
+  .item:focus-within .actions,
+  .item.active .actions {
+    visibility: visible;
+  }
+  @media (pointer: coarse) {
+    .actions {
+      visibility: visible;
+    }
+    .act {
+      min-width: 28px;
+      min-height: 28px;
+    }
+  }
+  .act:disabled {
     opacity: 0.3;
     cursor: default;
   }
+  .act.delete:hover {
+    color: var(--status-danger);
+  }
   .none {
-    color: var(--text-dim);
+    color: var(--text-secondary);
     text-align: center;
   }
   footer {
     padding: 10px 12px;
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--border-default);
+  }
+  footer button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
   }
 </style>
diff --git a/web/src/components/StatusBar.svelte b/web/src/components/StatusBar.svelte
index 9526464..0b06e60 100644
--- a/web/src/components/StatusBar.svelte
+++ b/web/src/components/StatusBar.svelte
@@ -1,29 +1,52 @@
 <script lang="ts">
   import type { PermissionMode, SessionDto, SessionStatus } from '@hub/shared';
   import { api } from '../lib/api.js';
-  import { PERMISSION_MODES, engineStateLabel, formatCost, isDangerMode } from '../lib/format.js';
+  import {
+    PERMISSION_MODES,
+    basename,
+    engineStateLabel,
+    formatCost,
+    isDangerMode,
+    statusLabel,
+  } from '../lib/format.js';
   import { sendStopEngine } from '../lib/ws.js';
+  import { toast } from '../lib/toasts.js';
+  import { confirmDialog } from '../lib/confirm.js';
+  import Icon from './ui/Icon.svelte';
 
-  let {
-    session,
-    status,
-    showToast,
-  }: { session: SessionDto; status: SessionStatus; showToast: (m: string) => void } = $props();
+  let { session, status }: { session: SessionDto; status: SessionStatus } = $props();
 
   async function changeMode(e: Event): Promise<void> {
-    const raw = (e.currentTarget as HTMLSelectElement).value;
+    const select = e.currentTarget as HTMLSelectElement;
+    const raw = select.value;
     const mode = (raw === '' ? null : raw) as PermissionMode | null;
+    if (isDangerMode(mode)) {
+      const ok = await confirmDialog({
+        danger: true,
+        title: 'Bypass all permission prompts?',
+        body:
+          'In Full auto (bypass) the agent runs every tool without asking. ' +
+          'It can modify and delete anything the server user can reach in this directory.',
+        confirmLabel: 'Bypass prompts',
+      });
+      if (!ok) {
+        select.value = session.permissionMode ?? '';
+        return;
+      }
+    }
     try {
       await api.updateSession(session.id, { permissionMode: mode });
+      if (isDangerMode(mode)) toast.success('Permission mode: Full auto (bypass)');
     } catch (err) {
-      showToast(`Could not change permission mode: ${(err as Error).message}`);
+      select.value = session.permissionMode ?? '';
+      toast.error(`Could not change permission mode: ${(err as Error).message}`);
     }
   }
 </script>
 
 <div class="bar" class:yolo={isDangerMode(session.permissionMode)}>
   <div class="left">
-    <span class="status" data-status={status}>{status.replace('_', ' ')}</span>
+    <span class="status" data-status={status}>{statusLabel(status)}</span>
     <span
       class="engine-state"
       data-engine={session.engineState}
@@ -31,6 +54,11 @@
     >
       <span class="dot"></span>{engineStateLabel(session.engineState)}
     </span>
+    {#if session.worktreePath}
+      <span class="wt" title={`Isolated worktree: ${session.worktreePath}`}>
+        <Icon name="branch" size={12} />{basename(session.worktreePath)}
+      </span>
+    {/if}
     <span class="cwd" title={session.cwd}>{session.cwd}</span>
   </div>
   <div class="right">
@@ -38,16 +66,17 @@
       <button
         class="stop"
         onclick={() => sendStopEngine(session.id)}
-        title="Stop the engine process (the session stays resumable)">stop engine</button
+        title="Stop the engine process (the session stays resumable)">Stop engine</button
       >
     {/if}
     {#if session.model}<span class="model">{session.model}</span>{/if}
     {#if formatCost(session.lastCostUsd)}
-      <span class="cost" title="cost of last turn">{formatCost(session.lastCostUsd)}</span>
+      <span class="cost" title="Cost of last turn">{formatCost(session.lastCostUsd)}</span>
     {/if}
     <select
       value={session.permissionMode ?? ''}
       onchange={changeMode}
+      aria-label="Permission mode"
       title="Permission mode (--permission-mode; applies to the next turn)"
     >
       {#each PERMISSION_MODES as mode (mode.value ?? 'inherit')}
@@ -62,81 +91,99 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
+    gap: var(--space-3);
     padding: 8px 16px;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-panel);
-    font-size: 12.5px;
+    border-bottom: 1px solid var(--border-default);
+    background: var(--surface-panel);
+    font-size: var(--font-size-sm);
   }
   .bar.yolo {
-    border-bottom: 2px solid var(--red);
+    border-bottom: 2px solid var(--status-danger);
   }
   .left,
   .right {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--space-3);
     min-width: 0;
   }
   .status {
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    font-size: 11px;
-    color: var(--text-dim);
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    white-space: nowrap;
   }
-  .status[data-status='running'] {
+  .status[data-status='running'],
+  .status[data-status='starting'] {
     color: var(--accent);
   }
   .status[data-status='awaiting_approval'] {
-    color: var(--amber);
+    color: var(--status-warning);
   }
   .status[data-status='error'] {
-    color: var(--red);
+    color: var(--status-danger);
   }
   .engine-state {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    white-space: nowrap;
   }
   .dot {
     width: 7px;
     height: 7px;
-    border-radius: 50%;
-    background: var(--text-dim);
+    border-radius: var(--radius-full);
+    background: var(--text-secondary);
   }
   .engine-state[data-engine='live'] .dot {
-    background: var(--green);
+    background: var(--status-success);
   }
   .engine-state[data-engine='dead'] .dot {
-    background: var(--red);
+    background: var(--status-danger);
   }
   .engine-state[data-engine='dead'] {
-    color: var(--red);
+    color: var(--status-danger);
+  }
+  .wt {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    white-space: nowrap;
   }
   .stop {
     padding: 3px 8px;
-    font-size: 11px;
+    font-size: var(--font-size-xs);
   }
   .cwd {
-    font-family: var(--mono);
-    color: var(--text-dim);
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .model {
-    font-family: var(--mono);
-    color: var(--text-dim);
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
   }
   .cost {
-    color: var(--green);
+    color: var(--status-success);
   }
   select {
     padding: 3px 6px;
     font-size: 12px;
   }
+  @media (max-width: 480px) {
+    .cwd,
+    .model {
+      display: none;
+    }
+  }
 </style>
diff --git a/web/src/components/ToolCallCard.svelte b/web/src/components/ToolCallCard.svelte
index 2401a7d..182f8ec 100644
--- a/web/src/components/ToolCallCard.svelte
+++ b/web/src/components/ToolCallCard.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import type { TimelineItem } from '../lib/timeline.js';
   import { formatDuration, summarizeInput } from '../lib/format.js';
+  import { toolDiff } from '../lib/toolPresentation.js';
+  import { toast } from '../lib/toasts.js';
+  import Icon from './ui/Icon.svelte';
+  import DiffBlock from './ui/DiffBlock.svelte';
 
   let { tool }: { tool: Extract<TimelineItem, { kind: 'tool' }> } = $props();
 
@@ -10,29 +14,7 @@
   const summary = $derived(summarizeInput(tool.toolName, tool.input));
   const running = $derived(tool.endTs === undefined);
   const duration = $derived(tool.endTs !== undefined ? tool.endTs - tool.startTs : null);
-
-  // Edit/Write inputs render as a simple ± patch instead of raw JSON.
-  interface DiffView {
-    file: string;
-    removed: string[];
-    added: string[];
-  }
-  const diff: DiffView | null = $derived.by(() => {
-    if (tool.input == null || typeof tool.input !== 'object') return null;
-    const input = tool.input as Record<string, unknown>;
-    const file = typeof input.file_path === 'string' ? input.file_path : '';
-    if (
-      tool.toolName === 'Edit' &&
-      typeof input.old_string === 'string' &&
-      typeof input.new_string === 'string'
-    ) {
-      return { file, removed: input.old_string.split('\n'), added: input.new_string.split('\n') };
-    }
-    if (tool.toolName === 'Write' && typeof input.content === 'string') {
-      return { file, removed: [], added: input.content.split('\n') };
-    }
-    return null;
-  });
+  const diff = $derived(toolDiff(tool.toolName, tool.input));
 
   const OUTPUT_CLAMP = 4000;
   const clampedOutput = $derived(
@@ -40,15 +22,25 @@
       ? tool.output.slice(0, OUTPUT_CLAMP)
       : tool.output,
   );
+
+  async function copyOutput(): Promise<void> {
+    if (tool.output === undefined) return;
+    try {
+      await navigator.clipboard.writeText(tool.output);
+      toast.success('Output copied');
+    } catch {
+      toast.error('Could not copy to the clipboard.');
+    }
+  }
 </script>
 
 <div class="card" class:error={tool.isError}>
-  <button class="head" onclick={() => (open = !open)}>
-    <span class="chevron">{open ? '▾' : '▸'}</span>
+  <button class="head" aria-expanded={open} onclick={() => (open = !open)}>
+    <span class="chevron" class:open><Icon name="chevron-right" size={13} /></span>
     <span class="state">
-      {#if running}<span class="spinner">◌</span>
-      {:else if tool.isError}<span class="err">✗</span>
-      {:else}<span class="ok">✓</span>{/if}
+      {#if running}<Icon name="spinner" size={13} label="running" />
+      {:else if tool.isError}<span class="err"><Icon name="close" size={13} label="failed" /></span>
+      {:else}<span class="ok"><Icon name="check" size={13} label="succeeded" /></span>{/if}
     </span>
     <span class="name">{tool.toolName}</span>
     <span class="summary" title={summary}>{summary}</span>
@@ -58,23 +50,23 @@
   {#if open}
     <div class="body">
       {#if diff}
-        <div class="section-label">{diff.file}</div>
-        <pre class="patch">{#each diff.removed as line, i (i)}<span class="minus"
-              >- {line}
-</span>{/each}{#each diff.added as line, i (i)}<span class="plus"
-              >+ {line}
-</span>{/each}</pre>
+        <DiffBlock {diff} />
       {:else if tool.input !== undefined}
         <div class="section-label">input</div>
         <pre>{JSON.stringify(tool.input, null, 2)}</pre>
       {/if}
 
       {#if tool.output !== undefined}
-        <div class="section-label">{tool.isError ? 'error' : 'result'}</div>
+        <div class="section-row">
+          <span class="section-label">{tool.isError ? 'error' : 'result'}</span>
+          <button class="quiet copy" aria-label="Copy output" onclick={copyOutput}>
+            <Icon name="copy" size={12} />
+          </button>
+        </div>
         <pre class:err-text={tool.isError}>{clampedOutput}</pre>
         {#if tool.output.length > OUTPUT_CLAMP}
           <button class="more" onclick={() => (showFullOutput = !showFullOutput)}>
-            {showFullOutput ? 'show less' : `show all ${tool.output.length.toLocaleString()} chars`}
+            {showFullOutput ? 'Show less' : `Show all ${tool.output.length.toLocaleString()} chars`}
           </button>
         {/if}
       {/if}
@@ -84,13 +76,13 @@
 
 <style>
   .card {
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    background: var(--bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    background: var(--surface-panel);
     font-size: 13px;
   }
   .card.error {
-    border-color: color-mix(in srgb, var(--red) 50%, var(--border));
+    border-color: color-mix(in srgb, var(--status-danger) 50%, var(--border-default));
   }
   .head {
     display: flex;
@@ -103,61 +95,69 @@
     text-align: left;
   }
   .chevron {
-    color: var(--text-dim);
-    width: 10px;
+    color: var(--text-secondary);
+    display: inline-flex;
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+  .chevron.open {
+    transform: rotate(90deg);
+  }
+  .state {
+    display: inline-flex;
   }
   .name {
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-weight: 600;
   }
   .summary {
     flex: 1;
     min-width: 0;
-    color: var(--text-dim);
-    font-family: var(--mono);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .duration {
-    color: var(--text-dim);
-    font-size: 11px;
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
   }
   .ok {
-    color: var(--green);
+    color: var(--status-success);
+    display: inline-flex;
   }
   .err {
-    color: var(--red);
-  }
-  .spinner {
-    display: inline-block;
-    animation: spin 1s linear infinite;
-  }
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
+    color: var(--status-danger);
+    display: inline-flex;
   }
   .body {
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--border-default);
     padding: 10px 12px;
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
+  .section-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
   .section-label {
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+  }
+  .copy {
+    padding: 2px;
   }
   pre {
     margin: 0;
-    font-family: var(--mono);
+    font-family: var(--font-mono);
     font-size: 12px;
-    background: #0b0d11;
-    border-radius: 6px;
+    background: var(--surface-sunken);
+    border-radius: var(--radius-sm);
     padding: 8px 10px;
     overflow-x: auto;
     white-space: pre-wrap;
@@ -166,19 +166,11 @@
     overflow-y: auto;
   }
   .err-text {
-    color: var(--red);
-  }
-  .patch .minus {
-    color: var(--red);
-    display: block;
-  }
-  .patch .plus {
-    color: var(--green);
-    display: block;
+    color: var(--status-danger);
   }
   .more {
     align-self: flex-start;
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     padding: 2px 8px;
   }
 </style>
diff --git a/web/src/components/ui/ConfirmDialog.svelte b/web/src/components/ui/ConfirmDialog.svelte
new file mode 100644
index 0000000..120d57b
--- /dev/null
+++ b/web/src/components/ui/ConfirmDialog.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { confirmRequest } from '../../lib/confirm.js';
+
+  let dialog: HTMLDialogElement | undefined = $state();
+  let cancelBtn: HTMLButtonElement | undefined = $state();
+  let confirmBtn: HTMLButtonElement | undefined = $state();
+
+  const req = $derived($confirmRequest);
+
+  $effect(() => {
+    if (!req) return;
+    void tick().then(() => {
+      if (!dialog || dialog.open) return;
+      dialog.returnValue = '';
+      dialog.showModal();
+      // Destructive default is Cancel; otherwise land on Confirm.
+      (req.danger ? cancelBtn : confirmBtn)?.focus();
+    });
+  });
+
+  // Resolves for every close path (buttons, Escape) via the dialog close event.
+  function onClose(): void {
+    const ok = dialog?.returnValue === 'confirm';
+    const current = $confirmRequest;
+    confirmRequest.set(null);
+    current?.resolve(ok);
+  }
+</script>
+
+{#if req}
+  <dialog bind:this={dialog} onclose={onClose} aria-labelledby="confirm-title">
+    <h2 id="confirm-title">{req.title}</h2>
+    <p>{req.body}</p>
+    <form method="dialog" class="actions">
+      <button bind:this={cancelBtn} value="cancel">{req.cancelLabel ?? 'Cancel'}</button>
+      <button bind:this={confirmBtn} class={req.danger ? 'danger' : 'primary'} value="confirm">
+        {req.confirmLabel ?? 'Confirm'}
+      </button>
+    </form>
+  </dialog>
+{/if}
+
+<style>
+  dialog {
+    background: var(--surface-raised);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(420px, calc(100vw - 2 * var(--space-4)));
+    box-shadow: var(--shadow-overlay);
+  }
+  dialog::backdrop {
+    background: rgb(0 0 0 / 0.55);
+  }
+  h2 {
+    margin: 0 0 var(--space-2);
+    font-size: var(--font-size-lg);
+  }
+  p {
+    margin: 0 0 var(--space-4);
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-normal);
+    overflow-wrap: break-word;
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    margin: 0;
+  }
+  button.danger {
+    background: var(--status-danger-surface);
+  }
+</style>
diff --git a/web/src/components/ui/DiffBlock.svelte b/web/src/components/ui/DiffBlock.svelte
new file mode 100644
index 0000000..69a2f5c
--- /dev/null
+++ b/web/src/components/ui/DiffBlock.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { DiffView } from '../../lib/toolPresentation.js';
+
+  let { diff }: { diff: DiffView } = $props();
+</script>
+
+{#if diff.file}
+  <div class="file">{diff.file}</div>
+{/if}
+<pre class="patch">{#each diff.removed as line, i (i)}<span class="minus"
+      >- {line}
+</span>{/each}{#each diff.added as line, i (i)}<span class="plus"
+      >+ {line}
+</span>{/each}</pre>
+
+<style>
+  .file {
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+    overflow-wrap: break-word;
+  }
+  pre {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    background: var(--surface-sunken);
+    border-radius: var(--radius-sm);
+    padding: 8px 10px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    max-height: 420px;
+    overflow-y: auto;
+  }
+  .patch .minus {
+    color: var(--status-danger);
+    display: block;
+  }
+  .patch .plus {
+    color: var(--status-success);
+    display: block;
+  }
+</style>
diff --git a/web/src/components/ui/Icon.svelte b/web/src/components/ui/Icon.svelte
new file mode 100644
index 0000000..cc29214
--- /dev/null
+++ b/web/src/components/ui/Icon.svelte
@@ -0,0 +1,149 @@
+<script lang="ts" module>
+  /**
+   * Minimal inline-SVG icon set (feather/lucide-style 24x24 stroke paths).
+   * Paths only — no {@html}, so nothing to sanitize. Icons inherit color
+   * from `currentColor`.
+   */
+  export type IconName =
+    | 'menu'
+    | 'close'
+    | 'plus'
+    | 'search'
+    | 'pencil'
+    | 'fork'
+    | 'branch'
+    | 'archive'
+    | 'unarchive'
+    | 'trash'
+    | 'folder'
+    | 'arrow-up'
+    | 'chevron-right'
+    | 'chevron-down'
+    | 'check'
+    | 'alert-triangle'
+    | 'info'
+    | 'square'
+    | 'send'
+    | 'copy'
+    | 'log-out'
+    | 'spinner';
+
+  const ICONS: Record<IconName, string[]> = {
+    menu: ['M3 6h18', 'M3 12h18', 'M3 18h18'],
+    close: ['M18 6 6 18', 'm6 6 12 12'],
+    plus: ['M12 5v14', 'M5 12h14'],
+    search: ['M11 5a6 6 0 1 0 0 12a6 6 0 1 0 0-12', 'm21 21-4.35-4.35'],
+    pencil: [
+      'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z',
+    ],
+    fork: [
+      'M9 18a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      'M3 6a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      'M15 6a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      'M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9',
+      'M12 12v3',
+    ],
+    branch: [
+      'M6 3v12',
+      'M15 6a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      'M3 18a3 3 0 1 0 6 0a3 3 0 1 0-6 0',
+      'M18 9a9 9 0 0 1-9 9',
+    ],
+    archive: [
+      'M2 4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z',
+      'M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8',
+      'M10 12h4',
+    ],
+    unarchive: [
+      'M2 4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z',
+      'M4 8v11a2 2 0 0 0 2 2h2',
+      'M20 8v11a2 2 0 0 1-2 2h-2',
+      'm9 15 3-3 3 3',
+      'M12 12v9',
+    ],
+    trash: [
+      'M3 6h18',
+      'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6',
+      'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
+      'M10 11v6',
+      'M14 11v6',
+    ],
+    folder: [
+      'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z',
+    ],
+    'arrow-up': ['M12 19V5', 'm5 12 7-7 7 7'],
+    'chevron-right': ['m9 18 6-6-6-6'],
+    'chevron-down': ['m6 9 6 6 6-6'],
+    check: ['M20 6 9 17l-5-5'],
+    'alert-triangle': [
+      'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3',
+      'M12 9v4',
+      'M12 17h.01',
+    ],
+    info: ['M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0', 'M12 16v-4', 'M12 8h.01'],
+    square: ['M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'],
+    send: [
+      'M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z',
+      'm21.854 2.147-10.94 10.939',
+    ],
+    copy: [
+      'M8 10a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2Z',
+      'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
+    ],
+    'log-out': ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'm16 17 5-5-5-5', 'M21 12H9'],
+    spinner: ['M21 12a9 9 0 1 1-6.22-8.56'],
+  };
+</script>
+
+<script lang="ts">
+  let {
+    name,
+    size = 16,
+    label,
+  }: {
+    name: IconName;
+    size?: number;
+    /** Accessible name. Omit for purely decorative icons (aria-hidden). */
+    label?: string;
+  } = $props();
+</script>
+
+<svg
+  class:spin={name === 'spinner'}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  role={label ? 'img' : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : 'true'}
+>
+  {#each ICONS[name] as d (d)}
+    <path {d} />
+  {/each}
+</svg>
+
+<style>
+  svg {
+    flex: none;
+    vertical-align: -0.15em;
+  }
+  .spin {
+    animation: icon-spin 0.9s linear infinite;
+  }
+  @keyframes icon-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spin {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+</style>
diff --git a/web/src/components/ui/ShortcutsHelp.svelte b/web/src/components/ui/ShortcutsHelp.svelte
new file mode 100644
index 0000000..9d1bdb6
--- /dev/null
+++ b/web/src/components/ui/ShortcutsHelp.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { SHORTCUTS, shortcutsHelpOpen } from '../../lib/shortcuts.js';
+
+  let dialog: HTMLDialogElement | undefined = $state();
+
+  $effect(() => {
+    if (!$shortcutsHelpOpen) return;
+    void tick().then(() => {
+      if (dialog && !dialog.open) dialog.showModal();
+    });
+  });
+
+  function onClose(): void {
+    shortcutsHelpOpen.set(false);
+  }
+</script>
+
+{#if $shortcutsHelpOpen}
+  <dialog bind:this={dialog} onclose={onClose} aria-labelledby="shortcuts-title">
+    <h2 id="shortcuts-title">Keyboard shortcuts</h2>
+    <table>
+      <tbody>
+        {#each SHORTCUTS as s (s.keys)}
+          <tr>
+            <td class="keys"><kbd>{s.keys}</kbd></td>
+            <td>{s.description}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+    <form method="dialog" class="actions">
+      <button value="close">Close</button>
+    </form>
+  </dialog>
+{/if}
+
+<style>
+  dialog {
+    background: var(--surface-raised);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(440px, calc(100vw - 2 * var(--space-4)));
+    box-shadow: var(--shadow-overlay);
+  }
+  dialog::backdrop {
+    background: rgb(0 0 0 / 0.55);
+  }
+  h2 {
+    margin: 0 0 var(--space-3);
+    font-size: var(--font-size-lg);
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+  }
+  td {
+    padding: 5px 0;
+    color: var(--text-secondary);
+  }
+  .keys {
+    width: 40%;
+    color: var(--text-primary);
+  }
+  kbd {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    background: var(--surface-sunken);
+    border: 1px solid var(--border-default);
+    border-radius: 4px;
+    padding: 2px 6px;
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin: var(--space-4) 0 0;
+  }
+</style>
diff --git a/web/src/components/ui/Toasts.svelte b/web/src/components/ui/Toasts.svelte
new file mode 100644
index 0000000..a34cb67
--- /dev/null
+++ b/web/src/components/ui/Toasts.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { dismissToast, pauseToast, resumeToast, toasts, type Toast } from '../../lib/toasts.js';
+  import Icon from './Icon.svelte';
+
+  function runAction(t: Toast): void {
+    t.action?.run();
+    dismissToast(t.id);
+  }
+
+  const ICON = { info: 'info', success: 'check', error: 'alert-triangle' } as const;
+</script>
+
+<div class="toasts" aria-live="polite" aria-label="Notifications">
+  {#each $toasts as t (t.id)}
+    <div
+      class="toast"
+      data-severity={t.severity}
+      role={t.severity === 'error' ? 'alert' : 'status'}
+      onmouseenter={() => pauseToast(t.id)}
+      onmouseleave={() => resumeToast(t)}
+    >
+      <span class="sev-icon"><Icon name={ICON[t.severity]} /></span>
+      <span class="msg">{t.message}</span>
+      {#if t.action}
+        <button class="action" onclick={() => runAction(t)}>{t.action.label}</button>
+      {/if}
+      <button class="quiet" aria-label="Dismiss notification" onclick={() => dismissToast(t.id)}>
+        <Icon name="close" size={14} />
+      </button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .toasts {
+    position: fixed;
+    right: var(--space-4);
+    bottom: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    z-index: var(--z-toast);
+    max-width: min(420px, calc(100vw - 2 * var(--space-4)));
+  }
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    background: var(--surface-raised);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-3);
+    box-shadow: var(--shadow-overlay);
+    font-size: var(--font-size-sm);
+    animation: toast-in var(--duration-normal) var(--ease-out);
+  }
+  .toast[data-severity='error'] {
+    border-color: var(--status-danger);
+  }
+  .toast[data-severity='error'] .sev-icon {
+    color: var(--status-danger);
+  }
+  .toast[data-severity='success'] .sev-icon {
+    color: var(--status-success);
+  }
+  .toast[data-severity='info'] .sev-icon {
+    color: var(--status-info);
+  }
+  .sev-icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .msg {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+  .action {
+    flex: none;
+    font-size: var(--font-size-xs);
+    padding: 3px 10px;
+    border-color: var(--accent);
+    color: var(--accent);
+    background: none;
+  }
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+  }
+</style>
diff --git a/web/src/lib/actions.ts b/web/src/lib/actions.ts
new file mode 100644
index 0000000..85d9159
--- /dev/null
+++ b/web/src/lib/actions.ts
@@ -0,0 +1,8 @@
+/**
+ * Svelte action: focus the element on mount and select its text. Used for
+ * user-initiated inline editors (rename, deny reason) instead of `autofocus`.
+ */
+export function focusSelect(node: HTMLElement): void {
+  node.focus();
+  if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) node.select();
+}
diff --git a/web/src/lib/confirm.ts b/web/src/lib/confirm.ts
new file mode 100644
index 0000000..4d66524
--- /dev/null
+++ b/web/src/lib/confirm.ts
@@ -0,0 +1,29 @@
+import { get, writable } from 'svelte/store';
+
+export interface ConfirmOptions {
+  title: string;
+  body: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Destructive action: red confirm button, initial focus on Cancel. */
+  danger?: boolean;
+}
+
+export interface ConfirmRequest extends ConfirmOptions {
+  resolve: (ok: boolean) => void;
+}
+
+/** The currently open confirmation, consumed by the single <ConfirmDialog/> in App. */
+export const confirmRequest = writable<ConfirmRequest | null>(null);
+
+/**
+ * Ask the user to confirm an action via the app-level modal dialog.
+ * Resolves false on Cancel, Escape, or when superseded by a newer request.
+ */
+export function confirmDialog(opts: ConfirmOptions): Promise<boolean> {
+  // A second request while one is open cancels the first.
+  get(confirmRequest)?.resolve(false);
+  return new Promise((resolve) => {
+    confirmRequest.set({ ...opts, resolve });
+  });
+}
diff --git a/web/src/lib/format.ts b/web/src/lib/format.ts
index 1263f5f..2925df0 100644
--- a/web/src/lib/format.ts
+++ b/web/src/lib/format.ts
@@ -1,5 +1,5 @@
-export function relativeTime(ts: number): string {
-  const diff = Date.now() - ts;
+export function relativeTime(ts: number, nowMs = Date.now()): string {
+  const diff = nowMs - ts;
   const min = Math.floor(diff / 60_000);
   if (min < 1) return 'just now';
   if (min < 60) return `${min}m ago`;
@@ -30,13 +30,50 @@ export function summarizeInput(toolName: string, input: unknown): string {
   return s.length > 80 ? s.slice(0, 77) + '…' : s;
 }
 
-import type { EngineState, PermissionMode } from '@hub/shared';
+import type { EngineState, PermissionMode, SessionStatus } from '@hub/shared';
 
 /** Short human label for the engine-process liveness dot. */
 export function engineStateLabel(state: EngineState): string {
   return { new: 'not started', live: 'live', hibernated: 'asleep', dead: 'crashed' }[state];
 }
 
+/** Short human label for the session interaction status. */
+export function statusLabel(status: SessionStatus): string {
+  return {
+    idle: 'idle',
+    starting: 'starting',
+    running: 'running',
+    awaiting_approval: 'awaiting approval',
+    error: 'error',
+  }[status];
+}
+
+/** Last path segment, for compact directory/worktree chips. */
+export function basename(p: string): string {
+  return p.replace(/\/+$/, '').split('/').pop() || p;
+}
+
+/** Human sentences for protocol/REST error codes; falls back to the raw message. */
+const ERROR_TEXT: Record<string, string> = {
+  bad_json: 'The server could not read that message. Please try again.',
+  unauthorized: 'You are not signed in. Enter your access token again.',
+  internal: 'Something went wrong on the server. Check the server log.',
+  not_found: 'That session no longer exists.',
+  session_busy: 'The session is busy with another operation. Try again in a moment.',
+  queue_full: 'Too many follow-ups are queued already. Wait for the current turn to finish.',
+  unknown_approval: 'That approval request has expired.',
+  cannot_fork: 'Only a session that has run at least once can be forked.',
+  engine_unavailable: 'The engine CLI is not available on the server.',
+  unknown_engine: 'The server does not know that engine.',
+  invalid_cwd: 'That directory is outside the allowed workspace roots.',
+  worktree_failed: 'Could not create the isolated git worktree.',
+  bad_request: 'The server rejected the request.',
+};
+
+export function friendlyWsError(code: string, message: string): string {
+  return ERROR_TEXT[code] ?? message ?? code;
+}
+
 /**
  * Permission modes in dial order with display labels. These are the Claude CLI's
  * own `--permission-mode` values; `value: null` means inherit the directory's
diff --git a/web/src/lib/now.ts b/web/src/lib/now.ts
new file mode 100644
index 0000000..9bce564
--- /dev/null
+++ b/web/src/lib/now.ts
@@ -0,0 +1,7 @@
+import { readable } from 'svelte/store';
+
+/** Current time ticking every 30s, so relative timestamps stay fresh on screen. */
+export const now = readable(Date.now(), (set) => {
+  const timer = setInterval(() => set(Date.now()), 30_000);
+  return () => clearInterval(timer);
+});
diff --git a/web/src/lib/shortcuts.ts b/web/src/lib/shortcuts.ts
new file mode 100644
index 0000000..f4c4315
--- /dev/null
+++ b/web/src/lib/shortcuts.ts
@@ -0,0 +1,74 @@
+import { writable } from 'svelte/store';
+
+/** Whether the keyboard-shortcuts help dialog is open. */
+export const shortcutsHelpOpen = writable(false);
+
+/** Registry rendered by the "?" help dialog. Keep in sync with handleShortcut. */
+export const SHORTCUTS: { keys: string; description: string }[] = [
+  { keys: 'n', description: 'New session' },
+  { keys: '/', description: 'Focus session search' },
+  { keys: 'i', description: 'Focus the composer' },
+  { keys: 'x', description: 'Stop the current turn' },
+  { keys: 'Ctrl+B', description: 'Toggle the sidebar' },
+  { keys: 'Alt+↑ / Alt+↓', description: 'Previous / next session' },
+  { keys: 'Esc', description: 'Close drawer, dialog, or panel' },
+  { keys: '?', description: 'Show keyboard shortcuts' },
+  { keys: 'Enter / Shift+Enter', description: 'Send / newline (in the composer)' },
+];
+
+export interface ShortcutContext {
+  toggleSidebar: () => void;
+  newSession: () => void;
+  focusSearch: () => void;
+  focusComposer: () => void;
+  stopTurn: () => void;
+  nextSession: () => void;
+  prevSession: () => void;
+  showHelp: () => void;
+}
+
+/** True when the event originates in a field or open dialog, where single-key shortcuts must not fire. */
+export function isTypingTarget(e: KeyboardEvent): boolean {
+  const t = e.target as HTMLElement | null;
+  if (!t) return false;
+  if (t.closest?.('dialog[open]')) return true;
+  const tag = t.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t.isContentEditable;
+}
+
+/** Dispatch a global shortcut. Returns true when handled (caller preventDefaults). */
+export function handleShortcut(e: KeyboardEvent, ctx: ShortcutContext): boolean {
+  if ((e.ctrlKey || e.metaKey) && !e.altKey && e.key.toLowerCase() === 'b') {
+    ctx.toggleSidebar();
+    return true;
+  }
+  if (e.altKey && !e.ctrlKey && !e.metaKey && e.key === 'ArrowUp') {
+    ctx.prevSession();
+    return true;
+  }
+  if (e.altKey && !e.ctrlKey && !e.metaKey && e.key === 'ArrowDown') {
+    ctx.nextSession();
+    return true;
+  }
+  if (e.ctrlKey || e.metaKey || e.altKey) return false;
+  if (isTypingTarget(e)) return false;
+  switch (e.key) {
+    case 'n':
+      ctx.newSession();
+      return true;
+    case '/':
+      ctx.focusSearch();
+      return true;
+    case 'i':
+      ctx.focusComposer();
+      return true;
+    case 'x':
+      ctx.stopTurn();
+      return true;
+    case '?':
+      ctx.showHelp();
+      return true;
+    default:
+      return false;
+  }
+}
diff --git a/web/src/lib/stores.ts b/web/src/lib/stores.ts
index f96006e..65f7d67 100644
--- a/web/src/lib/stores.ts
+++ b/web/src/lib/stores.ts
@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store';
 import type { SessionDto, SessionEvent, SessionStatus } from '@hub/shared';
+import { toast } from './toasts.js';
 
 export const token = writable<string | null>(localStorage.getItem('hub_token'));
 token.subscribe((t) => {
@@ -10,6 +11,9 @@ token.subscribe((t) => {
 export type ConnState = 'connecting' | 'online' | 'offline' | 'unauthenticated';
 export const connState = writable<ConnState>('offline');
 
+/** Why the user was signed out, shown on the login gate (null = normal login). */
+export const logoutReason = writable<string | null>(null);
+
 export const sessions = writable<SessionDto[]>([]);
 export const activeSessionId = writable<string | null>(null);
 
@@ -28,6 +32,63 @@ export const lastEventId = new Map<string, number>();
 /** Sessions whose history has been requested at least once. */
 export const subscribed = new Set<string>();
 
+/**
+ * Optimistically rendered user messages, per session. Kept OUTSIDE
+ * `eventsBySession` on purpose: entries have no server event id, so they must
+ * never interact with the `lastEventId` replay dedupe. An entry is removed when
+ * the server echoes the persisted user message (FIFO text match — the server
+ * mints message ids at persist time, so there is nothing else to correlate on).
+ */
+export interface PendingSend {
+  localId: string;
+  text: string;
+  ts: number;
+  /** True when sent mid-turn: held in the server queue until the turn drains. */
+  queued: boolean;
+}
+export const pendingSends = writable<Map<string, PendingSend[]>>(new Map());
+
+/** One-shot request to append text into a session's composer (queue-drop restore). */
+export const composerInject = writable<{ sessionId: string; text: string } | null>(null);
+
+export function addPendingSend(sessionId: string, text: string, queued: boolean): void {
+  pendingSends.update((m) => {
+    const list = m.get(sessionId) ?? [];
+    m.set(sessionId, [...list, { localId: crypto.randomUUID(), text, ts: Date.now(), queued }]);
+    return new Map(m);
+  });
+}
+
+function removePendingByText(sessionId: string, text: string): void {
+  pendingSends.update((m) => {
+    const list = m.get(sessionId);
+    if (!list?.length) return m;
+    const idx = list.findIndex((p) => p.text === text);
+    if (idx < 0) return m;
+    m.set(sessionId, [...list.slice(0, idx), ...list.slice(idx + 1)]);
+    return new Map(m);
+  });
+}
+
+/** Interrupt drops the server-side queue: clear its optimistic entries and offer a restore. */
+function dropPendingOnInterrupt(sessionId: string): void {
+  let dropped: PendingSend[] = [];
+  pendingSends.update((m) => {
+    dropped = m.get(sessionId) ?? [];
+    if (!dropped.length) return m;
+    m.delete(sessionId);
+    return new Map(m);
+  });
+  if (!dropped.length) return;
+  const text = dropped.map((p) => p.text).join('\n\n');
+  toast.info(
+    `Interrupt dropped ${dropped.length} queued follow-up${dropped.length > 1 ? 's' : ''}`,
+    {
+      action: { label: 'Restore to composer', run: () => composerInject.set({ sessionId, text }) },
+    },
+  );
+}
+
 export function upsertSession(dto: SessionDto): void {
   sessions.update((list) => {
     const idx = list.findIndex((s) => s.id === dto.id);
@@ -42,6 +103,10 @@ export function removeSession(id: string): void {
     m.delete(id);
     return new Map(m);
   });
+  pendingSends.update((m) => {
+    m.delete(id);
+    return new Map(m);
+  });
   subscribed.delete(id);
   lastEventId.delete(id);
   activeSessionId.update((a) => (a === id ? null : a));
@@ -66,6 +131,13 @@ export function appendEvent(e: SessionEvent): void {
       return new Map(m);
     });
   }
+  // The server echoed a persisted user message: retire its optimistic entry.
+  if (e.event.type === 'message' && e.event.role === 'user') {
+    removePendingByText(e.sessionId, e.event.text);
+  }
+  if (e.event.type === 'done' && e.event.reason === 'interrupted') {
+    dropPendingOnInterrupt(e.sessionId);
+  }
 }
 
 export function setHistoryMeta(
diff --git a/web/src/lib/toasts.ts b/web/src/lib/toasts.ts
new file mode 100644
index 0000000..9f7844b
--- /dev/null
+++ b/web/src/lib/toasts.ts
@@ -0,0 +1,86 @@
+import { writable } from 'svelte/store';
+
+export interface ToastAction {
+  label: string;
+  run: () => void;
+}
+
+export interface Toast {
+  id: number;
+  severity: 'info' | 'success' | 'error';
+  message: string;
+  action?: ToastAction;
+  /** Auto-dismiss delay in ms; 0 = sticky until dismissed by the user. */
+  timeout: number;
+}
+
+/** Visible toast stack, oldest first (rendered bottom-up, capped). */
+export const toasts = writable<Toast[]>([]);
+
+const MAX_VISIBLE = 4;
+let nextId = 1;
+
+// One auto-dismiss timer per toast; paused while the pointer is over it.
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+function arm(t: Toast): void {
+  if (t.timeout <= 0 || timers.has(t.id)) return;
+  timers.set(
+    t.id,
+    setTimeout(() => {
+      timers.delete(t.id);
+      dismissToast(t.id);
+    }, t.timeout),
+  );
+}
+
+function push(
+  severity: Toast['severity'],
+  message: string,
+  opts?: { action?: ToastAction; timeout?: number },
+): number {
+  const id = nextId++;
+  // Errors stay until dismissed so a burst of failures cannot be missed.
+  const timeout = opts?.timeout ?? (severity === 'error' ? 0 : 5000);
+  const t: Toast = { id, severity, message, action: opts?.action, timeout };
+  toasts.update((list) => {
+    const next = [...list, t];
+    // Overflowing oldest toasts are dropped; release their timers too.
+    for (const dropped of next.slice(0, Math.max(0, next.length - MAX_VISIBLE))) {
+      const timer = timers.get(dropped.id);
+      if (timer) clearTimeout(timer);
+      timers.delete(dropped.id);
+    }
+    return next.slice(-MAX_VISIBLE);
+  });
+  arm(t);
+  return id;
+}
+
+export function dismissToast(id: number): void {
+  const timer = timers.get(id);
+  if (timer) clearTimeout(timer);
+  timers.delete(id);
+  toasts.update((list) => list.filter((t) => t.id !== id));
+}
+
+/** Hold a toast open (pointer is over it). */
+export function pauseToast(id: number): void {
+  const timer = timers.get(id);
+  if (timer) clearTimeout(timer);
+  timers.delete(id);
+}
+
+/** Restart the full auto-dismiss delay after a pause. */
+export function resumeToast(t: Toast): void {
+  arm(t);
+}
+
+export const toast = {
+  info: (message: string, opts?: { action?: ToastAction; timeout?: number }) =>
+    push('info', message, opts),
+  success: (message: string, opts?: { action?: ToastAction; timeout?: number }) =>
+    push('success', message, opts),
+  error: (message: string, opts?: { action?: ToastAction; timeout?: number }) =>
+    push('error', message, opts),
+};
diff --git a/web/src/lib/toolPresentation.ts b/web/src/lib/toolPresentation.ts
new file mode 100644
index 0000000..e6b0125
--- /dev/null
+++ b/web/src/lib/toolPresentation.ts
@@ -0,0 +1,35 @@
+/**
+ * Friendlier renderings of well-known tool inputs, shared by ToolCallCard and
+ * ApprovalCard: Edit/Write become a ± patch, Bash becomes its command string.
+ */
+
+export interface DiffView {
+  file: string;
+  removed: string[];
+  added: string[];
+}
+
+/** A ± patch view for Edit/Write inputs, or null when not applicable. */
+export function toolDiff(toolName: string, input: unknown): DiffView | null {
+  if (input == null || typeof input !== 'object') return null;
+  const obj = input as Record<string, unknown>;
+  const file = typeof obj.file_path === 'string' ? obj.file_path : '';
+  if (
+    toolName === 'Edit' &&
+    typeof obj.old_string === 'string' &&
+    typeof obj.new_string === 'string'
+  ) {
+    return { file, removed: obj.old_string.split('\n'), added: obj.new_string.split('\n') };
+  }
+  if (toolName === 'Write' && typeof obj.content === 'string') {
+    return { file, removed: [], added: obj.content.split('\n') };
+  }
+  return null;
+}
+
+/** The shell command for Bash-style inputs, or null when not applicable. */
+export function toolCommand(toolName: string, input: unknown): string | null {
+  if (toolName !== 'Bash' || input == null || typeof input !== 'object') return null;
+  const command = (input as Record<string, unknown>).command;
+  return typeof command === 'string' ? command : null;
+}
diff --git a/web/src/lib/ws.ts b/web/src/lib/ws.ts
index 7175bcc..78412e8 100644
--- a/web/src/lib/ws.ts
+++ b/web/src/lib/ws.ts
@@ -7,6 +7,7 @@ import {
   connState,
   historyMetaBySession,
   lastEventId,
+  logoutReason,
   prependEvents,
   removeSession,
   setHistoryMeta,
@@ -26,6 +27,7 @@ const REPLAY_LIMIT = 500;
 let ws: WebSocket | null = null;
 let backoff = 500;
 let closedByUser = false;
+let retryTimer: ReturnType<typeof setTimeout> | null = null;
 let errorHandler: (code: string, message: string, sessionId?: string) => void = () => {};
 
 export function onWsError(cb: typeof errorHandler): void {
@@ -33,6 +35,11 @@ export function onWsError(cb: typeof errorHandler): void {
 }
 
 export function connect(): void {
+  if (ws) return; // already open or connecting
+  if (retryTimer) {
+    clearTimeout(retryTimer);
+    retryTimer = null;
+  }
   closedByUser = false;
   const t = get(token);
   if (!t) return;
@@ -45,7 +52,13 @@ export function connect(): void {
   };
 
   ws.onmessage = (ev) => {
-    const msg = JSON.parse(ev.data as string) as ServerMsg;
+    let msg: ServerMsg;
+    try {
+      msg = JSON.parse(ev.data as string) as ServerMsg;
+    } catch (err) {
+      console.error('Ignoring malformed server frame', err);
+      return;
+    }
     switch (msg.type) {
       case 'auth_ok':
         backoff = 500;
@@ -57,6 +70,7 @@ export function connect(): void {
         return;
       case 'auth_error':
         connState.set('unauthenticated');
+        logoutReason.set('You were signed out: the access token was rejected.');
         token.set(null);
         return;
       case 'event':
@@ -93,20 +107,34 @@ export function connect(): void {
       return;
     }
     connState.set('connecting');
-    setTimeout(connect, backoff);
+    retryTimer = setTimeout(connect, backoff);
     backoff = Math.min(backoff * 2, 10_000);
   };
 }
 
+/** Skip the current backoff delay and reconnect immediately (user-initiated). */
+export function reconnectNow(): void {
+  backoff = 500;
+  if (ws) return; // already open or connecting
+  connect();
+}
+
 export function disconnect(): void {
   closedByUser = true;
+  if (retryTimer) {
+    clearTimeout(retryTimer);
+    retryTimer = null;
+  }
   ws?.close();
   ws = null;
   connState.set('offline');
 }
 
-function send(msg: ClientMsg): void {
-  if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
+/** Returns false when the socket is not open — callers surface that, never swallow it. */
+function send(msg: ClientMsg): boolean {
+  if (ws?.readyState !== WebSocket.OPEN) return false;
+  ws.send(JSON.stringify(msg));
+  return true;
 }
 
 export function subscribeSession(sessionId: string): void {
@@ -130,8 +158,8 @@ export async function loadEarlier(sessionId: string): Promise<void> {
   });
 }
 
-export function sendUserMessage(sessionId: string, text: string): void {
-  send({ type: 'user_message', sessionId, text });
+export function sendUserMessage(sessionId: string, text: string): boolean {
+  return send({ type: 'user_message', sessionId, text });
 }
 
 export function sendApproval(
@@ -139,14 +167,14 @@ export function sendApproval(
   requestId: string,
   behavior: 'allow' | 'deny',
   message?: string,
-): void {
-  send({ type: 'approval_response', sessionId, requestId, behavior, message });
+): boolean {
+  return send({ type: 'approval_response', sessionId, requestId, behavior, message });
 }
 
-export function sendInterrupt(sessionId: string): void {
-  send({ type: 'interrupt', sessionId });
+export function sendInterrupt(sessionId: string): boolean {
+  return send({ type: 'interrupt', sessionId });
 }
 
-export function sendStopEngine(sessionId: string): void {
-  send({ type: 'stop_engine', sessionId });
+export function sendStopEngine(sessionId: string): boolean {
+  return send({ type: 'stop_engine', sessionId });
 }