diff --git a/apps/web/src/lib/changes.test.ts b/apps/web/src/lib/changes.test.ts
new file mode 100644
index 0000000..e370919
--- /dev/null
+++ b/apps/web/src/lib/changes.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+
+import { summarizeChanges } from './changes';
+import type { DecisionState, TranscriptEntry } from './session';
+
+/** A permission gate entry. Fixed ids keep tests independent — the summary never asserts on them. */
+function gate(
+  toolName: string,
+  input: Record<string, unknown>,
+  decision: DecisionState = 'pending',
+): TranscriptEntry {
+  return { kind: 'permission', id: 'e1', requestId: 'r1', toolName, input, decision };
+}
+
+const EDIT = { file_path: 'src/a.ts', old_string: 'a\nb', new_string: 'a\nc' }; // +1 −1
+const WRITE = { file_path: 'src/b.ts', content: 'x\ny' }; // +2 −0
+const MULTI_EDIT = {
+  file_path: 'src/c.ts',
+  edits: [
+    { old_string: 'a', new_string: 'b' }, // +1 −1
+    { old_string: 'c', new_string: 'd\ne' }, // +2 −1
+  ],
+};
+
+describe('summarizeChanges', () => {
+  it('reads real +/- line counts from a pending edit gate and flags it pending', () => {
+    const summary = summarizeChanges([gate('Edit', EDIT, 'pending')]);
+    expect(summary.files).toEqual([{ path: 'src/a.ts', additions: 1, deletions: 1 }]);
+    expect(summary.additions).toBe(1);
+    expect(summary.deletions).toBe(1);
+    expect(summary.pending).toBe(1);
+  });
+
+  it('counts an approved write as applied (no longer pending)', () => {
+    const summary = summarizeChanges([gate('Write', WRITE, 'approved')]);
+    expect(summary.files).toEqual([{ path: 'src/b.ts', additions: 2, deletions: 0 }]);
+    expect(summary.pending).toBe(0);
+  });
+
+  it('counts an in-flight approving gate as a change, but not as pending', () => {
+    const summary = summarizeChanges([gate('Edit', EDIT, 'approving')]);
+    expect(summary.files).toEqual([{ path: 'src/a.ts', additions: 1, deletions: 1 }]);
+    expect(summary.pending).toBe(0);
+  });
+
+  it('excludes a rejected edit and an in-flight rejecting one — neither writes to disk', () => {
+    expect(summarizeChanges([gate('Edit', EDIT, 'rejected')]).files).toEqual([]);
+    expect(summarizeChanges([gate('Edit', EDIT, 'rejecting')]).files).toEqual([]);
+  });
+
+  it('reads additions/deletions from a MultiEdit gate (its own hunk parser)', () => {
+    const summary = summarizeChanges([gate('MultiEdit', MULTI_EDIT, 'approved')]);
+    expect(summary.files).toEqual([{ path: 'src/c.ts', additions: 3, deletions: 2 }]);
+  });
+
+  it('aggregates multiple edits to the same file', () => {
+    const summary = summarizeChanges([
+      gate('Edit', EDIT, 'approved'),
+      gate('Edit', EDIT, 'pending'),
+    ]);
+    expect(summary.files).toEqual([{ path: 'src/a.ts', additions: 2, deletions: 2 }]);
+    expect(summary.pending).toBe(1);
+  });
+
+  it('ignores non-file gates for the diff totals but still counts them as pending', () => {
+    const summary = summarizeChanges([gate('Bash', { command: 'ls' }, 'pending')]);
+    expect(summary.files).toEqual([]);
+    expect(summary.pending).toBe(1);
+  });
+});
diff --git a/apps/web/src/lib/changes.ts b/apps/web/src/lib/changes.ts
new file mode 100644
index 0000000..3b51d65
--- /dev/null
+++ b/apps/web/src/lib/changes.ts
@@ -0,0 +1,58 @@
+import { buildFileDiff } from './diff';
+import type { TranscriptEntry } from './session';
+
+/**
+ * The session-rail "Changes" summary: what files this session is touching, with real +/− line counts.
+ * Every consequential file edit passes through the approval gate (architecture invariant #4), so the
+ * permission entries are the authoritative record of proposed/applied changes — folding them through
+ * {@link buildFileDiff} (the same model the diff card renders) yields honest totals, never invented ones.
+ * A rejected gate never ran, so it is excluded; a still-pending gate is counted and surfaced as `pending`
+ * ("not yet written to disk"). Pure, so the rail stays a thin renderer and this unit-tests directly.
+ */
+export interface FileChange {
+  readonly path: string;
+  readonly additions: number;
+  readonly deletions: number;
+}
+
+export interface ChangesSummary {
+  /** Distinct files touched, with edits to the same path aggregated. */
+  readonly files: readonly FileChange[];
+  readonly additions: number;
+  readonly deletions: number;
+  /** Gates still awaiting a decision — proposed but not yet written. */
+  readonly pending: number;
+}
+
+/**
+ * The file diff a change-bearing entry implies, or null for non-file entries. A rejected gate — or an
+ * in-flight `rejecting` one, which is about to settle as rejected — never writes to disk, so it is not a
+ * change; everything else (pending, approving, approved) is a proposed or applied edit.
+ */
+function changeDiff(entry: TranscriptEntry): ReturnType<typeof buildFileDiff> {
+  if (entry.kind !== 'permission') return null;
+  if (entry.decision === 'rejected' || entry.decision === 'rejecting') return null;
+  return buildFileDiff(entry.toolName, entry.input);
+}
+
+export function summarizeChanges(entries: readonly TranscriptEntry[]): ChangesSummary {
+  const byPath = new Map<string, { additions: number; deletions: number }>();
+  let additions = 0;
+  let deletions = 0;
+  let pending = 0;
+
+  for (const entry of entries) {
+    if (entry.kind === 'permission' && entry.decision === 'pending') pending += 1;
+    const diff = changeDiff(entry);
+    if (!diff) continue;
+    const acc = byPath.get(diff.path) ?? { additions: 0, deletions: 0 };
+    acc.additions += diff.additions;
+    acc.deletions += diff.deletions;
+    byPath.set(diff.path, acc);
+    additions += diff.additions;
+    deletions += diff.deletions;
+  }
+
+  const files = [...byPath.entries()].map(([path, totals]) => ({ path, ...totals }));
+  return { files, additions, deletions, pending };
+}
diff --git a/apps/web/src/lib/components/LaunchDrawer.svelte b/apps/web/src/lib/components/LaunchDrawer.svelte
new file mode 100644
index 0000000..6d91c2d
--- /dev/null
+++ b/apps/web/src/lib/components/LaunchDrawer.svelte
@@ -0,0 +1,274 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
+  import { Button, Drawer } from '@telecode/ui';
+  import type { PermissionModeName } from '@telecode/protocol';
+
+  import PermissionModeField from '$lib/components/PermissionModeField.svelte';
+  import { launchRepo } from '$lib/launch-repo';
+  import type { RelayDevice, RelayRepo } from '$lib/server/relay-api';
+  import { launch } from '$lib/session-store';
+  import { DEFAULT_PERMISSION_MODE, readPermissionMode } from '$lib/settings';
+
+  /**
+   * The launch drawer (enterprise-ui §7 forms): pick where to run, an optional repo, the permission mode,
+   * and the first instruction. Submit stays enabled until submission starts, then shows real pending
+   * state — launch is verification-gated (the daemon must report the session started). Seeds the mode from
+   * the saved Settings default each time it opens. Without a device it routes the operator to pairing
+   * rather than presenting a form that can't run.
+   */
+  let {
+    open = $bindable(false),
+    device,
+    repos,
+    githubConnected,
+  }: {
+    open?: boolean;
+    device: RelayDevice | null;
+    repos: RelayRepo[];
+    githubConnected: boolean;
+  } = $props();
+
+  let prompt = $state('');
+  let title = $state('');
+  let selectedRepoId = $state('');
+  let mode = $state<PermissionModeName>(DEFAULT_PERMISSION_MODE);
+  let launching = $state(false);
+  let launchError = $state<string | null>(null);
+
+  // Seed the mode from the saved default whenever the drawer opens (Settings owns the persisted value).
+  $effect(() => {
+    if (open && browser) mode = readPermissionMode(localStorage);
+  });
+
+  async function onLaunch(event: Event): Promise<void> {
+    event.preventDefault();
+    const text = prompt.trim();
+    if (!text || launching || !device) return;
+    launching = true;
+    launchError = null;
+    try {
+      const repo = launchRepo(repos, selectedRepoId);
+      const id = await launch({
+        prompt: text,
+        permissionMode: mode,
+        ...(title.trim() ? { title: title.trim() } : {}),
+        ...(repo ? { repo } : {}),
+      });
+      open = false;
+      prompt = '';
+      title = '';
+      await goto(`/sessions/${id}`);
+    } catch (err) {
+      launchError = err instanceof Error ? err.message : 'Launch failed.';
+    } finally {
+      launching = false;
+    }
+  }
+
+  function onPromptKeydown(event: KeyboardEvent): void {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') void onLaunch(event);
+  }
+</script>
+
+<Drawer bind:open title="Launch session">
+  {#if !device}
+    <div class="no-device">
+      <p class="lede">No device is paired yet. Pair a machine to run agents on it.</p>
+      <a class="link" href="/activate" onclick={() => (open = false)}>Pair a device →</a>
+    </div>
+  {:else}
+    <form id="launch-form" class="form" onsubmit={onLaunch}>
+      <div class="field">
+        <span class="label">Run on</span>
+        <p class="readonly mono" title={device.name}>{device.name}</p>
+      </div>
+
+      {#if githubConnected && repos.length > 0}
+        <div class="field">
+          <label class="label" for="launch-repo">Repository</label>
+          <div class="select-wrap">
+            <select id="launch-repo" class="select" bind:value={selectedRepoId}>
+              <option value="">No repo — run in the default workspace</option>
+              {#each repos as repo (repo.id)}
+                <option value={String(repo.id)}>
+                  {repo.fullName}{repo.private ? ' (private)' : ''}
+                </option>
+              {/each}
+            </select>
+            <svg class="chevron" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3 4.5L6 7.5l3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          </div>
+        </div>
+      {:else if githubConnected}
+        <p class="note">No repositories found for your GitHub account.</p>
+      {:else}
+        <p class="note">
+          Connect GitHub in Settings to run in one of your repos. The session runs in the daemon’s
+          default workspace until then.
+        </p>
+      {/if}
+
+      <PermissionModeField bind:value={mode} />
+
+      <div class="field">
+        <label class="label" for="launch-prompt">First instruction</label>
+        <textarea
+          id="launch-prompt"
+          class="prompt"
+          bind:value={prompt}
+          onkeydown={onPromptKeydown}
+          placeholder="Describe the task. Be specific about edge cases — fewer interruptions later…"
+          rows="4"
+          autocomplete="off"
+          aria-keyshortcuts="Meta+Enter Control+Enter"
+        ></textarea>
+      </div>
+
+      {#if launchError}
+        <p class="error" role="alert">{launchError}</p>
+      {/if}
+    </form>
+  {/if}
+
+  {#snippet footer()}
+    <Button variant="ghost" onclick={() => (open = false)}>Cancel</Button>
+    {#if device}
+      <Button
+        form="launch-form"
+        type="submit"
+        variant="primary"
+        loading={launching}
+        disabled={launching}
+      >
+        Launch on {device.name}
+      </Button>
+    {/if}
+  {/snippet}
+</Drawer>
+
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .readonly {
+    margin: 0;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-muted);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Styled native <select>: keeps full keyboard + type-ahead while replacing the default OS-chrome
+     appearance with the token styling; color-scheme renders the open list dark. */
+  .select-wrap {
+    position: relative;
+  }
+  .select {
+    width: 100%;
+    height: 38px;
+    padding: 0 var(--space-8) 0 var(--space-3);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md);
+    background: var(--bg);
+    color: var(--text);
+    color-scheme: dark;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    appearance: none;
+    cursor: pointer;
+  }
+  .select:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent);
+  }
+  .chevron {
+    position: absolute;
+    top: 50%;
+    right: var(--space-3);
+    width: 12px;
+    height: 12px;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    pointer-events: none;
+  }
+
+  .prompt {
+    width: 100%;
+    min-height: 96px;
+    max-height: 240px;
+    resize: vertical;
+    padding: var(--space-3);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md);
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: var(--lh-base);
+  }
+  .prompt::placeholder {
+    color: var(--text-muted);
+  }
+  .prompt:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent);
+  }
+
+  .note {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    line-height: var(--lh-base);
+  }
+  .error {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--danger);
+  }
+
+  .no-device {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .lede {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    line-height: var(--lh-base);
+  }
+  .link {
+    color: var(--accent);
+    font-weight: 500;
+    font-size: var(--text-sm);
+    border-radius: var(--radius-sm);
+  }
+  .link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring);
+  }
+</style>
diff --git a/apps/web/src/lib/components/MobileNav.svelte b/apps/web/src/lib/components/MobileNav.svelte
new file mode 100644
index 0000000..6b692a6
--- /dev/null
+++ b/apps/web/src/lib/components/MobileNav.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import { isActive } from '$lib/nav';
+
+  /**
+   * The phone navigation (enterprise-ui §2 — the PWA is the mobile story): a bottom tab bar with a center
+   * launch FAB, shown only below the sidebar breakpoint. Real `<a href>` tabs mirror the sidebar's routes;
+   * the FAB opens the same launch drawer. Targets are ≥44px and the bar clears the home indicator via the
+   * bottom safe-area inset.
+   */
+  let { onlaunch }: { onlaunch: () => void } = $props();
+
+  const path = $derived($page.url.pathname);
+</script>
+
+<nav class="mobilenav" aria-label="Primary">
+  <a class="mtab" href="/" aria-current={isActive(path, '/') ? 'page' : undefined}>
+    <svg class="mi" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M2 4h11M2 7.5h11M2 11h7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+    <span>Sessions</span>
+  </a>
+  <a class="mtab" href="/devices" aria-current={isActive(path, '/devices') ? 'page' : undefined}>
+    <svg class="mi" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.6" y="2.6" width="11.8" height="8" rx="1.3" stroke="currentColor" stroke-width="1.3" /><path d="M5.2 13h4.6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+    <span>Devices</span>
+  </a>
+
+  <button class="fab" type="button" onclick={onlaunch} aria-label="Launch session">
+    <svg width="22" height="22" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+  </button>
+
+  <a class="mtab" href="/activate" aria-current={isActive(path, '/activate') ? 'page' : undefined}>
+    <svg class="mi" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M7.5 1.6l5 2.2v3.2c0 3-2.1 5-5 5.9-2.9-.9-5-2.9-5-5.9V3.8l5-2.2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" /></svg>
+    <span>Pair</span>
+  </a>
+  <a class="mtab" href="/settings" aria-current={isActive(path, '/settings') ? 'page' : undefined}>
+    <svg class="mi" viewBox="0 0 15 15" fill="none" aria-hidden="true"><circle cx="7.5" cy="7.5" r="2.1" stroke="currentColor" stroke-width="1.3" /><path d="M7.5 1.4v2M7.5 11.6v2M13.6 7.5h-2M3.4 7.5h-2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+    <span>Settings</span>
+  </a>
+</nav>
+
+<style>
+  .mobilenav {
+    display: none;
+  }
+
+  @media (max-width: 640px) {
+    .mobilenav {
+      grid-row: 3;
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      gap: var(--space-1);
+      padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
+      border-top: 1px solid var(--border);
+      background: var(--surface);
+    }
+  }
+
+  .mtab {
+    flex: 1;
+    max-width: 5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    padding: var(--space-1);
+    min-height: 44px;
+    justify-content: center;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.02em;
+  }
+  .mtab[aria-current='page'] {
+    color: var(--accent);
+  }
+  .mtab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring);
+    border-radius: var(--radius-sm);
+  }
+  .mi {
+    width: 20px;
+    height: 20px;
+  }
+
+  .fab {
+    flex: none;
+    width: 48px;
+    height: 48px;
+    margin-top: -20px;
+    display: grid;
+    place-items: center;
+    border: none;
+    border-radius: var(--radius-xl);
+    background: var(--accent);
+    color: var(--text-on-accent);
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+  }
+  .fab:active {
+    background: var(--accent-press);
+  }
+  .fab:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--bg),
+      0 0 0 4px var(--focus-ring);
+  }
+</style>
diff --git a/apps/web/src/lib/components/PageHeader.svelte b/apps/web/src/lib/components/PageHeader.svelte
new file mode 100644
index 0000000..11d92f8
--- /dev/null
+++ b/apps/web/src/lib/components/PageHeader.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * The standard route header (title + sub-line, hairline-divided from the scrollable body), shared by the
+   * dashboard, Devices, and Settings so the type ramp + responsive padding live in one place. An optional
+   * `actions` snippet fills the trailing edge (e.g. the dashboard's stat columns).
+   */
+  let { title, sub, actions }: { title: string; sub?: string; actions?: Snippet } = $props();
+</script>
+
+<header class="phead hairline-b">
+  <div class="heading">
+    <h1>{title}</h1>
+    {#if sub}<p class="sub">{sub}</p>{/if}
+  </div>
+  {#if actions}<div class="actions">{@render actions()}</div>{/if}
+</header>
+
+<style>
+  .phead {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-5);
+    padding: var(--space-6) var(--space-6) var(--space-5);
+    background: var(--surface);
+  }
+  .heading h1 {
+    margin: 0;
+    font-size: var(--text-2xl);
+    line-height: var(--lh-2xl);
+    font-weight: 600;
+    letter-spacing: -0.03em;
+  }
+  .sub {
+    margin: var(--space-1) 0 0;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+  .actions {
+    margin-left: auto;
+  }
+
+  @media (max-width: 640px) {
+    .phead {
+      padding: var(--space-5) var(--space-4) var(--space-4);
+    }
+  }
+</style>
diff --git a/apps/web/src/lib/components/PermissionModeField.svelte b/apps/web/src/lib/components/PermissionModeField.svelte
new file mode 100644
index 0000000..a6b1c2c
--- /dev/null
+++ b/apps/web/src/lib/components/PermissionModeField.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { PermissionModeName } from '@telecode/protocol';
+
+  import { PERMISSION_MODES } from '$lib/settings';
+
+  /**
+   * The permission-mode segmented control, shared by the launch drawer and Settings (enterprise-ui §4 —
+   * extract before you duplicate). Real radio inputs back the segments, so keyboard arrow-selection and
+   * focus come for free; the selected mode's hint sits below. `value` is bindable; `onselect` fires on a
+   * change so a consumer can persist it.
+   */
+  let {
+    value = $bindable(),
+    onselect,
+    name = 'permission-mode',
+  }: {
+    value: PermissionModeName;
+    onselect?: (value: PermissionModeName) => void;
+    name?: string;
+  } = $props();
+
+  function select(next: PermissionModeName): void {
+    value = next;
+    onselect?.(next);
+  }
+
+  const hint = $derived(PERMISSION_MODES.find((mode) => mode.value === value)?.hint ?? '');
+</script>
+
+<fieldset class="field">
+  <legend class="label">Permission mode</legend>
+  <div class="seg">
+    {#each PERMISSION_MODES as option (option.value)}
+      <label class="opt" class:on={value === option.value}>
+        <input
+          class="sr-only"
+          type="radio"
+          {name}
+          value={option.value}
+          checked={value === option.value}
+          onchange={() => select(option.value)}
+        />
+        {option.label}
+      </label>
+    {/each}
+  </div>
+  <p class="hint">{hint}</p>
+</fieldset>
+
+<style>
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .seg {
+    display: flex;
+    gap: var(--space-1);
+  }
+  .opt {
+    flex: 1;
+    padding: var(--space-2);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    text-align: center;
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .opt:hover {
+    background: var(--bg-muted);
+  }
+  .opt.on {
+    border-color: var(--accent-line);
+    background: var(--accent-soft);
+    color: var(--accent);
+  }
+  /* The radio still drives focus + keyboard; the ring rides the visible segment. */
+  .opt:has(:focus-visible) {
+    box-shadow: 0 0 0 2px var(--focus-ring);
+  }
+  .hint {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    line-height: var(--lh-sm);
+  }
+  .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;
+  }
+</style>
diff --git a/apps/web/src/lib/components/SessionGroupHeader.svelte b/apps/web/src/lib/components/SessionGroupHeader.svelte
new file mode 100644
index 0000000..f6cb7c0
--- /dev/null
+++ b/apps/web/src/lib/components/SessionGroupHeader.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  /** An eyebrow label + hairline rule separating the dashboard's session groups (enterprise-ui §1). */
+  let { label }: { label: string } = $props();
+</script>
+
+<div class="group">
+  <span class="eyebrow">{label}</span>
+  <span class="rule" aria-hidden="true"></span>
+</div>
+
+<style>
+  .group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-2) var(--space-2);
+  }
+  .eyebrow {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+  .rule {
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+</style>
diff --git a/apps/web/src/lib/components/SessionHeader.svelte b/apps/web/src/lib/components/SessionHeader.svelte
new file mode 100644
index 0000000..c3c0c25
--- /dev/null
+++ b/apps/web/src/lib/components/SessionHeader.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { Button, Pill, type PillTone } from '@telecode/ui';
+
+  import { SESSION_DISPLAY } from '$lib/session-display';
+  import type { SessionStatus } from '$lib/session';
+
+  /**
+   * The session-view header (enterprise-ui §7): a back link to the list, the session title + the machine
+   * it runs on, the live status pill, and the operator controls (Interrupt / End). Controls are disabled
+   * off a live channel and never optimistic — the daemon reports the resulting status. Only real metadata
+   * is shown (the device + short id; no invented repo/branch/worktree path).
+   */
+  let {
+    title,
+    deviceName,
+    sessionId,
+    status,
+    isBusy,
+    isTerminal,
+    showControls,
+    connected,
+    oninterrupt,
+    onend,
+  }: {
+    title: string;
+    deviceName: string | null;
+    sessionId: string;
+    status: SessionStatus;
+    isBusy: boolean;
+    isTerminal: boolean;
+    showControls: boolean;
+    connected: boolean;
+    oninterrupt: () => void;
+    onend: () => void;
+  } = $props();
+
+  const display = $derived(SESSION_DISPLAY[status]);
+  const tone = $derived<PillTone>(display.tone === 'muted' ? 'neutral' : display.tone);
+</script>
+
+<header class="shead hairline-b">
+  <a class="back" href="/" aria-label="Back to sessions">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M9 3L5 7l4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+  </a>
+
+  <div class="mid">
+    <h1 class="ttl" title={title}>{title}</h1>
+    <p class="path mono">
+      {#if deviceName}<span class="dev">{deviceName}</span> · {/if}<span class="sid">{sessionId.slice(0, 12)}</span>
+    </p>
+  </div>
+
+  <Pill {tone} dot pulse={display.pulse} label={display.label} aria-live="polite" />
+
+  {#if showControls}
+    <div class="ctrls">
+      {#if isBusy}
+        <Button variant="ghost" size="sm" disabled={!connected} onclick={oninterrupt}>Interrupt</Button>
+      {/if}
+      {#if !isTerminal}
+        <Button variant="danger" size="sm" disabled={!connected} onclick={onend}>End</Button>
+      {/if}
+    </div>
+  {/if}
+</header>
+
+<style>
+  .shead {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-5);
+    background: var(--surface);
+  }
+  .back {
+    width: 30px;
+    height: 30px;
+    flex: none;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .back:hover {
+    background: var(--bg-muted);
+    color: var(--text);
+  }
+  .back:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring);
+  }
+  .mid {
+    flex: 1;
+    min-width: 0;
+  }
+  .ttl {
+    margin: 0;
+    font-size: var(--text-base);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .path {
+    margin: 2px 0 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dev {
+    color: var(--text-secondary);
+  }
+  .ctrls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex: none;
+  }
+
+  @media (max-width: 640px) {
+    .shead {
+      padding: var(--space-3) var(--space-4);
+    }
+    .path {
+      display: none;
+    }
+    .ctrls {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/lib/components/SessionRail.svelte b/apps/web/src/lib/components/SessionRail.svelte
new file mode 100644
index 0000000..f9b78ac
--- /dev/null
+++ b/apps/web/src/lib/components/SessionRail.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { summarizeChanges } from '$lib/changes';
+  import { SESSION_DISPLAY } from '$lib/session-display';
+  import type { SessionState } from '$lib/session';
+  import type { ConnectionState } from '$lib/session-store';
+
+  /**
+   * The session-view right rail (enterprise-ui §7): durable facts about the run. "Session" and
+   * "Connection" are true invariants (the daemon dials out over WSS, E2E via x25519, the relay forwards
+   * ciphertext only). "Changes" is derived from the approval-gate record via {@link summarizeChanges} —
+   * real +/- line counts from the proposed edits, never invented totals. Collapses below the stream on
+   * a phone.
+   */
+  let {
+    session,
+    deviceName,
+    connection,
+  }: {
+    session: SessionState;
+    deviceName: string | null;
+    connection: ConnectionState;
+  } = $props();
+
+  const display = $derived(SESSION_DISPLAY[session.status]);
+  const changes = $derived(summarizeChanges(session.entries));
+  const online = $derived(connection === 'connected');
+</script>
+
+<aside class="rail" aria-label="Session details">
+  <section class="rsec">
+    <p class="eyebrow">Session</p>
+    <div class="meta hairline-b">
+      <span class="meta-key">Status</span>
+      <span class="meta-val mono" class:amber={display.tone === 'accent'}>{display.label}</span>
+    </div>
+    {#if deviceName}
+      <div class="meta hairline-b">
+        <span class="meta-key">Device</span>
+        <span class="meta-val mono">{deviceName}</span>
+      </div>
+    {/if}
+    <div class="meta">
+      <span class="meta-key">Session</span>
+      <span class="meta-val mono">{session.sessionId?.slice(0, 14) ?? '—'}</span>
+    </div>
+  </section>
+
+  <section class="rsec">
+    <div class="rh">
+      <span class="eyebrow">Changes</span>
+      {#if changes.files.length > 0}
+        <span class="totals mono">
+          <span class="add">+{changes.additions}</span>
+          <span class="del">−{changes.deletions}</span>
+        </span>
+      {/if}
+    </div>
+    {#if changes.files.length === 0}
+      <p class="muted">No file changes yet.</p>
+    {:else}
+      {#each changes.files as file (file.path)}
+        <div class="meta hairline-b file">
+          <span class="fname mono" title={file.path}>{file.path}</span>
+          <span class="fstat mono">
+            <span class="add">+{file.additions}</span>
+            <span class="del">−{file.deletions}</span>
+          </span>
+        </div>
+      {/each}
+      {#if changes.pending > 0}
+        <p class="pending mono">{changes.pending} pending · not yet written to disk</p>
+      {/if}
+    {/if}
+  </section>
+
+  <section class="rsec">
+    <p class="eyebrow">Connection</p>
+    <div class="meta hairline-b">
+      <span class="meta-key">Transport</span>
+      <span class="meta-val mono">{online ? 'WSS · outbound' : 'offline'}</span>
+    </div>
+    <div class="meta hairline-b">
+      <span class="meta-key">Encryption</span>
+      <span class="meta-val mono">x25519 · e2e</span>
+    </div>
+    <div class="meta">
+      <span class="meta-key">Relay sees</span>
+      <span class="meta-val mono">ciphertext</span>
+    </div>
+  </section>
+</aside>
+
+<style>
+  .rail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    padding: var(--space-5);
+    overflow-y: auto;
+    min-height: 0;
+    border-left: 1px solid var(--border);
+    background: var(--surface);
+  }
+  .rsec {
+    display: flex;
+    flex-direction: column;
+  }
+  .eyebrow {
+    margin: 0 0 var(--space-2);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .rh {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-2);
+  }
+  .rh .eyebrow {
+    margin: 0;
+  }
+  .totals {
+    display: flex;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+  }
+  .meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-2) 0;
+    font-size: var(--text-sm);
+  }
+  .meta-key {
+    color: var(--text-muted);
+    flex: none;
+  }
+  .meta-val {
+    font-size: var(--text-xs);
+    color: var(--text);
+    text-align: right;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .meta-val.amber {
+    color: var(--accent);
+  }
+  .file .fname {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+  .fstat {
+    display: flex;
+    gap: var(--space-2);
+    flex: none;
+    font-size: var(--text-xs);
+  }
+  .add {
+    color: var(--success);
+  }
+  .del {
+    color: var(--danger);
+  }
+  .muted {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+  .pending {
+    margin: var(--space-2) 0 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+</style>
diff --git a/apps/web/src/lib/components/SessionRow.svelte b/apps/web/src/lib/components/SessionRow.svelte
new file mode 100644
index 0000000..eaeba55
--- /dev/null
+++ b/apps/web/src/lib/components/SessionRow.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { StatusDot } from '@telecode/ui';
+
+  import { SESSION_DISPLAY } from '$lib/session-display';
+  import type { SessionRow } from '$lib/session-groups';
+  import { relativeTime } from '$lib/time';
+
+  /**
+   * One session in the dashboard list (enterprise-ui §7): a full-row `<a href>` to the session, with the
+   * house status (dot + UPPERCASE-mono label), the title (ellipsis + tooltip for long ones), the device it
+   * runs on, and a relative timestamp. An awaiting-input row carries the amber tint + accent edge — the one
+   * "needs you" signal. Only fields we actually persist are shown (no invented repo/branch/diff meta).
+   */
+  let { row }: { row: SessionRow } = $props();
+
+  const display = $derived(SESSION_DISPLAY[row.status]);
+  const awaiting = $derived(row.status === 'awaiting_input');
+</script>
+
+<a class="row hairline-b" class:await={awaiting} href="/sessions/{row.id}">
+  <span class="status">
+    <StatusDot tone={display.tone} label={display.label} pulse={display.pulse} />
+  </span>
+  <span class="title" title={row.title ?? row.id}>{row.title ?? row.id}</span>
+  {#if row.deviceName}
+    <span class="device mono">{row.deviceName}</span>
+  {/if}
+  <span class="time mono">{relativeTime(row.createdAt)}</span>
+  <span class="chev" aria-hidden="true">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+  </span>
+</a>
+
+<style>
+  .row {
+    display: grid;
+    grid-template-columns: 148px minmax(0, 1fr) minmax(0, auto) auto 16px;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    border: 1px solid transparent;
+    color: var(--text);
+    text-decoration: none;
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease);
+  }
+  .row:hover {
+    background: var(--bg-muted);
+  }
+  .row:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--focus-ring);
+  }
+  .row.await {
+    background: var(--accent-soft);
+    border-color: var(--accent-line);
+  }
+  .row.await:hover {
+    border-color: var(--accent);
+  }
+  .status {
+    min-width: 0;
+  }
+  .title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm);
+    font-weight: 500;
+  }
+  .device {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+  }
+  .time {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    text-align: right;
+  }
+  .chev {
+    display: grid;
+    place-items: center;
+    color: var(--text-muted);
+  }
+  .row:hover .chev {
+    color: var(--text-secondary);
+  }
+
+  @media (max-width: 860px) {
+    .row {
+      grid-template-columns: 148px minmax(0, 1fr) auto 16px;
+    }
+    .device {
+      display: none;
+    }
+  }
+  @media (max-width: 560px) {
+    .row {
+      grid-template-columns: auto 1fr auto;
+      gap: var(--space-2) var(--space-3);
+      grid-template-areas:
+        'status status time'
+        'title title title';
+    }
+    .status {
+      grid-area: status;
+    }
+    .time {
+      grid-area: time;
+    }
+    .title {
+      grid-area: title;
+      white-space: normal;
+    }
+    .chev {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
new file mode 100644
index 0000000..b32bdfc
--- /dev/null
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -0,0 +1,318 @@
+<script lang="ts">
+  import { enhance } from '$app/forms';
+  import { page } from '$app/stores';
+  import { BrandLogo, Button, Pill, StatusDot } from '@telecode/ui';
+
+  import { deviceStatus } from '$lib/devices';
+  import { isActive } from '$lib/nav';
+  import type { RelayDevice } from '$lib/server/relay-api';
+  import type { SessionCounts } from '$lib/session-groups';
+  import type { ConnectionState } from '$lib/session-store';
+
+  /**
+   * The persistent left rail (enterprise-ui §2): brand, the primary "Launch session" action, route-aware
+   * navigation with the 2px amber active indicator, the paired-device list, and the account footer. Real
+   * `<a href>` links so Cmd/middle-click and Back work. The device rows truncate long names with a
+   * tooltip + show honest presence (the long-name defect this redesign fixes).
+   */
+  let {
+    user,
+    devices,
+    connection,
+    counts,
+    onlaunch,
+  }: {
+    user: { displayName?: string | null; email?: string | null } | null;
+    devices: RelayDevice[];
+    connection: ConnectionState;
+    counts: SessionCounts;
+    onlaunch: () => void;
+  } = $props();
+
+  const path = $derived($page.url.pathname);
+
+  function initials(name: string | null | undefined, email: string | null | undefined): string {
+    const source = (name ?? email ?? '?').trim();
+    const parts = source.split(/\s+/).filter(Boolean);
+    const letters = parts.length >= 2 ? `${parts[0]![0]}${parts[1]![0]}` : source.slice(0, 2);
+    return letters.toUpperCase();
+  }
+</script>
+
+<aside class="sidebar">
+  <a class="brand" href="/" aria-label="telecode — sessions">
+    <BrandLogo size={20} />
+    <Pill label="beta" />
+  </a>
+
+  <div class="launch">
+    <Button variant="primary" size="lg" onclick={onlaunch}>
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+        <path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
+      </svg>
+      Launch session
+      <kbd class="kbd">⌘N</kbd>
+    </Button>
+  </div>
+
+  <nav class="nav" aria-label="Primary">
+    <p class="eyebrow">Workspace</p>
+    <a class="navlink" href="/" aria-current={isActive(path, '/') ? 'page' : undefined}>
+      <svg class="nav-icon" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M2 4h11M2 7.5h11M2 11h7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+      <span class="nav-label">Sessions</span>
+      <span class="nav-count mono">{counts.running + counts.awaiting}</span>
+    </a>
+    <a class="navlink" href="/devices" aria-current={isActive(path, '/devices') ? 'page' : undefined}>
+      <svg class="nav-icon" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1.6" y="2.6" width="11.8" height="8" rx="1.3" stroke="currentColor" stroke-width="1.3" /><path d="M5.2 13h4.6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+      <span class="nav-label">Devices</span>
+      <span class="nav-count mono">{devices.length}</span>
+    </a>
+
+    <p class="eyebrow">Account</p>
+    <a class="navlink" href="/activate" aria-current={isActive(path, '/activate') ? 'page' : undefined}>
+      <svg class="nav-icon" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M7.5 1.6l5 2.2v3.2c0 3-2.1 5-5 5.9-2.9-.9-5-2.9-5-5.9V3.8l5-2.2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" /></svg>
+      <span class="nav-label">Pair a device</span>
+    </a>
+    <a class="navlink" href="/settings" aria-current={isActive(path, '/settings') ? 'page' : undefined}>
+      <svg class="nav-icon" viewBox="0 0 15 15" fill="none" aria-hidden="true"><circle cx="7.5" cy="7.5" r="2.1" stroke="currentColor" stroke-width="1.3" /><path d="M7.5 1.4v2M7.5 11.6v2M13.6 7.5h-2M3.4 7.5h-2M11.8 3.2l-1.4 1.4M4.6 10.4l-1.4 1.4M11.8 11.8l-1.4-1.4M4.6 4.6L3.2 3.2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+      <span class="nav-label">Settings</span>
+    </a>
+  </nav>
+
+  <div class="foot">
+    {#if devices.length > 0}
+      <ul class="devices" aria-label="Paired devices">
+        {#each devices as device, i (device.id)}
+          {@const status = deviceStatus({
+            lastSeenAt: device.lastSeenAt,
+            isWatched: i === 0,
+            connection,
+          })}
+          <li class="device">
+            <span class="device-dot" data-tone={status.tone} aria-hidden="true"></span>
+            <span class="device-name" title={device.name}>{device.name}</span>
+            <span class="device-meta mono">{status.online ? 'online' : status.lastSeen}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    <div class="user">
+      <span class="avatar mono" aria-hidden="true">{initials(user?.displayName, user?.email)}</span>
+      <div class="who">
+        <span class="name" title={user?.displayName ?? undefined}>{user?.displayName ?? 'Account'}</span>
+        {#if user?.email}<span class="email mono" title={user.email}>{user.email}</span>{/if}
+      </div>
+      <form class="signout" method="POST" action="/?/logout" use:enhance>
+        <Button type="submit" variant="ghost" size="sm">Sign out</Button>
+      </form>
+    </div>
+  </div>
+</aside>
+
+<style>
+  .sidebar {
+    grid-row: 2;
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid var(--border);
+    background: var(--surface);
+  }
+  /* The phone uses the bottom MobileNav instead; the rail would otherwise overlap the content cell. */
+  @media (max-width: 640px) {
+    .sidebar {
+      display: none;
+    }
+  }
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-5) var(--space-4) var(--space-4);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+  }
+  .brand:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--focus-ring);
+  }
+  .launch {
+    padding: 0 var(--space-3) var(--space-4);
+  }
+  /* The launch button stretches to the rail width; its kbd hint sits at the trailing edge. */
+  .launch :global(.btn) {
+    width: 100%;
+    justify-content: flex-start;
+    gap: var(--space-2);
+  }
+  .kbd {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    opacity: 0.6;
+  }
+
+  .nav {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 0 var(--space-2);
+  }
+  .eyebrow {
+    margin: 0;
+    padding: var(--space-3) var(--space-2) var(--space-1);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .navlink {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: var(--text-sm);
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .navlink:hover {
+    background: var(--bg-muted);
+    color: var(--text);
+  }
+  .navlink:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--focus-ring);
+  }
+  .navlink[aria-current='page'] {
+    background: var(--bg-muted);
+    color: var(--text);
+  }
+  /* The 2px amber active indicator (enterprise-ui §4). */
+  .navlink[aria-current='page']::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 16px;
+    border-radius: var(--radius-full);
+    background: var(--accent);
+  }
+  .nav-icon {
+    width: 15px;
+    height: 15px;
+    flex: none;
+    color: var(--text-muted);
+  }
+  .navlink[aria-current='page'] .nav-icon {
+    color: var(--accent);
+  }
+  .nav-label {
+    flex: 1;
+  }
+  .nav-count {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .foot {
+    margin-top: auto;
+    border-top: 1px solid var(--border);
+    padding: var(--space-3);
+  }
+  .devices {
+    list-style: none;
+    margin: 0 0 var(--space-2);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .device {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
+    min-width: 0;
+  }
+  .device-dot {
+    width: 7px;
+    height: 7px;
+    flex: none;
+    border-radius: var(--radius-full);
+    background: var(--text-muted);
+  }
+  .device-dot[data-tone='success'] {
+    background: var(--success);
+  }
+  .device-dot[data-tone='warning'] {
+    background: var(--warning);
+  }
+  .device-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm);
+    color: var(--text);
+  }
+  .device-meta {
+    flex: none;
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .user {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-1) var(--space-1);
+    min-width: 0;
+  }
+  .avatar {
+    width: 28px;
+    height: 28px;
+    flex: none;
+    display: grid;
+    place-items: center;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-strong);
+    background: var(--bg-muted);
+    font-size: 11px;
+    color: var(--text-secondary);
+  }
+  .who {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .name {
+    font-size: var(--text-sm);
+    color: var(--text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .email {
+    font-size: 10px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .signout {
+    margin-left: auto;
+    flex: none;
+  }
+</style>
diff --git a/apps/web/src/lib/components/SystemBar.svelte b/apps/web/src/lib/components/SystemBar.svelte
new file mode 100644
index 0000000..fc3c2b2
--- /dev/null
+++ b/apps/web/src/lib/components/SystemBar.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { BrandLogo, StatusDot } from '@telecode/ui';
+
+  import type { Tone } from '$lib/session-display';
+  import type { SessionCounts } from '$lib/session-groups';
+  import type { ConnectionState } from '$lib/session-store';
+
+  /**
+   * The app-shell system bar (enterprise-ui §2): the honest relay-connection indicator, the standing
+   * "end-to-end encrypted" assurance, and a live tally of working / blocked agents. It spans the full
+   * width above the sidebar + content. On a phone (where the sidebar is hidden) it also carries the brand.
+   * Connection + the awaiting count are `aria-live` so a status change is announced, not just recolored.
+   */
+  let {
+    connection,
+    counts,
+  }: {
+    connection: ConnectionState;
+    counts: SessionCounts;
+  } = $props();
+
+  const RELAY: Record<ConnectionState, { tone: Tone; label: string; pulse: boolean }> = {
+    idle: { tone: 'muted', label: 'Relay offline', pulse: false },
+    connecting: { tone: 'warning', label: 'Connecting…', pulse: false },
+    connected: { tone: 'success', label: 'Relay connected', pulse: true },
+    error: { tone: 'danger', label: 'Relay offline', pulse: false },
+  };
+  const relay = $derived(RELAY[connection]);
+  const agents = $derived(counts.running + counts.awaiting);
+</script>
+
+<header class="systembar hairline-b">
+  <a class="brand" href="/" aria-label="telecode — sessions">
+    <BrandLogo size={16} showWordmark={false} />
+  </a>
+
+  <span class="relay" aria-live="polite">
+    <StatusDot tone={relay.tone} label={relay.label} pulse={relay.pulse} />
+  </span>
+  <span class="sep" aria-hidden="true">·</span>
+  <span class="e2e mono">end-to-end encrypted</span>
+
+  <div class="counts mono" aria-live="polite">
+    <span>{agents} {agents === 1 ? 'agent' : 'agents'}</span>
+    {#if counts.awaiting > 0}
+      <span class="sep" aria-hidden="true">·</span>
+      <span class="awaiting">{counts.awaiting} awaiting</span>
+    {/if}
+  </div>
+</header>
+
+<style>
+  .systembar {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    height: 36px;
+    padding: 0 var(--space-4);
+    background: var(--surface);
+    border-top: 1px solid var(--frame-top);
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+  }
+  /* The mark only earns a slot in the bar on mobile; on desktop the sidebar carries the brand. */
+  .brand {
+    display: none;
+    align-items: center;
+    border-radius: var(--radius-sm);
+  }
+  .brand:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring);
+  }
+  .relay {
+    display: inline-flex;
+  }
+  .sep {
+    color: var(--text-muted);
+  }
+  .e2e {
+    color: var(--text-muted);
+  }
+  .counts {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    color: var(--text-secondary);
+  }
+  .awaiting {
+    color: var(--accent);
+  }
+
+  @media (max-width: 640px) {
+    .brand {
+      display: inline-flex;
+    }
+    .e2e,
+    .systembar > .sep {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/lib/components/TopBar.svelte b/apps/web/src/lib/components/TopBar.svelte
deleted file mode 100644
index 0578d53..0000000
--- a/apps/web/src/lib/components/TopBar.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-  import { enhance } from '$app/forms';
-  import { BrandLogo, Button, StatusDot } from '@telecode/ui';
-
-  import type { Tone } from '$lib/session-display';
-  import type { ConnectionState } from '$lib/session-store';
-
-  /**
-   * The app-shell top bar (enterprise-ui §2): brand → home, the device being watched, the honest
-   * connection indicator, and the account + sign-out. Shared by the dashboard and the session view so
-   * navigation chrome stays identical across routes. Sign-out posts to the root route's `logout` action.
-   */
-
-  let {
-    user,
-    device = null,
-    connection,
-  }: {
-    user: { displayName?: string | null; email?: string | null } | null;
-    device?: { name: string } | null;
-    connection: ConnectionState;
-  } = $props();
-
-  const CONN: Record<ConnectionState, { tone: Tone; label: string }> = {
-    idle: { tone: 'muted', label: 'IDLE' },
-    connecting: { tone: 'warning', label: 'CONNECTING…' },
-    connected: { tone: 'success', label: 'CONNECTED' },
-    error: { tone: 'danger', label: 'OFFLINE' },
-  };
-  const conn = $derived(CONN[connection]);
-</script>
-
-<header class="topbar hairline-b">
-  <a class="brand" href="/">
-    <BrandLogo size={18} />
-  </a>
-
-  <div class="right">
-    {#if device}
-      <span class="device" title={device.name}>{device.name}</span>
-      <span class="sep" aria-hidden="true"></span>
-    {/if}
-    <StatusDot tone={conn.tone} label={conn.label} aria-live="polite" />
-    <span class="user" title={user?.email ?? undefined}>{user?.displayName ?? 'Account'}</span>
-    <form method="POST" action="/?/logout" use:enhance>
-      <Button type="submit" variant="ghost" size="sm">Sign out</Button>
-    </form>
-  </div>
-</header>
-
-<style>
-  .topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-4);
-    height: 48px;
-    padding: 0 var(--space-4);
-    background: var(--surface);
-  }
-  .brand {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    border-radius: var(--radius-sm);
-  }
-  .brand:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--focus-ring);
-  }
-  .right {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    min-width: 0;
-  }
-  .device {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 14rem;
-  }
-  .sep {
-    width: 1px;
-    height: 16px;
-    background: var(--border-strong);
-  }
-  .user {
-    color: var(--text-secondary);
-    max-width: 12rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
diff --git a/apps/web/src/lib/devices.test.ts b/apps/web/src/lib/devices.test.ts
new file mode 100644
index 0000000..2746b45
--- /dev/null
+++ b/apps/web/src/lib/devices.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+
+import { deviceStatus } from './devices';
+
+const NOW = new Date('2026-06-29T12:00:00Z').getTime();
+
+describe('deviceStatus', () => {
+  it('reports the watched device online only while the connection is up', () => {
+    const status = deviceStatus(
+      { lastSeenAt: new Date(NOW), isWatched: true, connection: 'connected' },
+      NOW,
+    );
+    expect(status).toEqual({ tone: 'success', label: 'ONLINE', online: true, lastSeen: 'now' });
+  });
+
+  it('shows the watched device as connecting before the channel is up', () => {
+    const status = deviceStatus(
+      { lastSeenAt: new Date(NOW - 2 * 3_600_000), isWatched: true, connection: 'connecting' },
+      NOW,
+    );
+    expect(status.online).toBe(false);
+    expect(status.label).toBe('CONNECTING…');
+    expect(status.lastSeen).toBe('2 hr ago');
+  });
+
+  it('reports the watched device offline when the channel drops (idle/error)', () => {
+    const status = deviceStatus(
+      { lastSeenAt: new Date(NOW - 5 * 60_000), isWatched: true, connection: 'idle' },
+      NOW,
+    );
+    expect(status).toEqual({
+      tone: 'muted',
+      label: 'OFFLINE',
+      online: false,
+      lastSeen: '5 min ago',
+    });
+  });
+
+  it('reports any non-watched device offline with its last-seen time (no live signal to guess from)', () => {
+    const status = deviceStatus(
+      { lastSeenAt: new Date(NOW - 2 * 3_600_000), isWatched: false, connection: 'connected' },
+      NOW,
+    );
+    expect(status).toEqual({
+      tone: 'muted',
+      label: 'OFFLINE',
+      online: false,
+      lastSeen: '2 hr ago',
+    });
+  });
+
+  it("reads a never-seen device's last-seen as 'never'", () => {
+    const status = deviceStatus({ lastSeenAt: null, isWatched: false, connection: 'idle' }, NOW);
+    expect(status.lastSeen).toBe('never');
+    expect(status.online).toBe(false);
+  });
+});
diff --git a/apps/web/src/lib/devices.ts b/apps/web/src/lib/devices.ts
new file mode 100644
index 0000000..79452d1
--- /dev/null
+++ b/apps/web/src/lib/devices.ts
@@ -0,0 +1,37 @@
+import type { Tone } from './session-display';
+import type { ConnectionState } from './session-store';
+import { relativeTime } from './time';
+
+/**
+ * Honest presence for a paired device, the single source for the sidebar device list and the Devices
+ * page. We only hold a live channel to the *watched* device, so only it can be truly "online" (and only
+ * while the connection is up); any other paired device has no live signal, so we report it offline with
+ * its last-seen time rather than guess. Pure (clock injected) so it unit-tests without a connection.
+ */
+export interface DeviceStatusInput {
+  readonly lastSeenAt: Date | null;
+  /** The device whose channel this browser is watching (the relay multiplexes one at a time). */
+  readonly isWatched: boolean;
+  readonly connection: ConnectionState;
+}
+
+export interface DeviceStatus {
+  readonly tone: Tone;
+  /** UPPERCASE label for the StatusDot (`ONLINE` / `CONNECTING…` / `OFFLINE`). */
+  readonly label: string;
+  readonly online: boolean;
+  /** Relative last-seen for the row meta ('now' when online, else 'never' / 'N min ago'). */
+  readonly lastSeen: string;
+}
+
+export function deviceStatus(input: DeviceStatusInput, now: number = Date.now()): DeviceStatus {
+  const lastSeen = input.lastSeenAt ? relativeTime(input.lastSeenAt, now) : 'never';
+
+  if (input.isWatched && input.connection === 'connected') {
+    return { tone: 'success', label: 'ONLINE', online: true, lastSeen: 'now' };
+  }
+  if (input.isWatched && input.connection === 'connecting') {
+    return { tone: 'warning', label: 'CONNECTING…', online: false, lastSeen };
+  }
+  return { tone: 'muted', label: 'OFFLINE', online: false, lastSeen };
+}
diff --git a/apps/web/src/lib/launch-drawer.ts b/apps/web/src/lib/launch-drawer.ts
new file mode 100644
index 0000000..da582a9
--- /dev/null
+++ b/apps/web/src/lib/launch-drawer.ts
@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+/**
+ * Shared open-state for the launch drawer, which is mounted once in the app shell but triggered from many
+ * places — the sidebar button, the mobile FAB, the ⌘N shortcut, and the dashboard's empty state. A single
+ * store decouples those triggers from where the drawer lives; callers open it with `.set(true)`.
+ */
+export const launchDrawerOpen = writable(false);
diff --git a/apps/web/src/lib/nav.test.ts b/apps/web/src/lib/nav.test.ts
new file mode 100644
index 0000000..f83002d
--- /dev/null
+++ b/apps/web/src/lib/nav.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+
+import { isActive } from './nav';
+
+describe('isActive', () => {
+  it('marks the Sessions link active on the dashboard and any session detail page', () => {
+    expect(isActive('/', '/')).toBe(true);
+    expect(isActive('/sessions/tc_abc', '/')).toBe(true);
+  });
+
+  it('does not mark Sessions active on an unrelated route', () => {
+    expect(isActive('/devices', '/')).toBe(false);
+    expect(isActive('/settings', '/')).toBe(false);
+  });
+
+  it('matches a route exactly and as a path prefix, but not a sibling that merely shares a string start', () => {
+    expect(isActive('/devices', '/devices')).toBe(true);
+    expect(isActive('/devices/dv_1', '/devices')).toBe(true);
+    expect(isActive('/devices-archive', '/devices')).toBe(false);
+  });
+});
diff --git a/apps/web/src/lib/nav.ts b/apps/web/src/lib/nav.ts
new file mode 100644
index 0000000..e935398
--- /dev/null
+++ b/apps/web/src/lib/nav.ts
@@ -0,0 +1,9 @@
+/**
+ * Whether a nav link is the active route, shared by the sidebar and the mobile nav so the highlight
+ * logic lives in one tested place. Pure (takes the pathname rather than reading `$page`), so the
+ * Sessions-link special case — active on the dashboard AND any `/sessions/...` detail page — is unit-tested.
+ */
+export function isActive(pathname: string, href: string): boolean {
+  if (href === '/') return pathname === '/' || pathname.startsWith('/sessions');
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
diff --git a/apps/web/src/lib/session-groups.test.ts b/apps/web/src/lib/session-groups.test.ts
new file mode 100644
index 0000000..f70681c
--- /dev/null
+++ b/apps/web/src/lib/session-groups.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+
+import type { SessionStatus } from './session';
+import { groupSessions, sessionCounts, type SessionRow } from './session-groups';
+
+function row(id: string, status: SessionStatus, createdAt: string): SessionRow {
+  return { id, title: id, status, deviceName: 'studio-mbp', createdAt: new Date(createdAt) };
+}
+
+describe('groupSessions', () => {
+  it('partitions rows into awaiting / active / recent by status', () => {
+    const groups = groupSessions([
+      row('done', 'done', '2026-06-29T10:00:00Z'),
+      row('await', 'awaiting_input', '2026-06-29T10:00:00Z'),
+      row('run', 'running', '2026-06-29T10:00:00Z'),
+      row('start', 'starting', '2026-06-29T10:00:00Z'),
+      row('err', 'error', '2026-06-29T10:00:00Z'),
+      row('paused', 'offline_paused', '2026-06-29T10:00:00Z'),
+      row('idle', 'idle', '2026-06-29T10:00:00Z'),
+    ]);
+    expect(groups.awaiting.map((r) => r.id)).toEqual(['await']);
+    expect(groups.active.map((r) => r.id).sort()).toEqual(['run', 'start']);
+    expect(groups.recent.map((r) => r.id).sort()).toEqual(['done', 'err', 'idle', 'paused']);
+  });
+
+  it('orders each group newest-first', () => {
+    const groups = groupSessions([
+      row('old', 'running', '2026-06-29T09:00:00Z'),
+      row('new', 'running', '2026-06-29T11:00:00Z'),
+      row('mid', 'running', '2026-06-29T10:00:00Z'),
+    ]);
+    expect(groups.active.map((r) => r.id)).toEqual(['new', 'mid', 'old']);
+  });
+
+  it('returns empty buckets rather than omitting them', () => {
+    expect(groupSessions([])).toEqual({ awaiting: [], active: [], recent: [] });
+  });
+});
+
+describe('sessionCounts', () => {
+  it('tallies running (incl. starting) and awaiting, ignoring terminal/idle', () => {
+    const counts = sessionCounts([
+      row('a', 'awaiting_input', '2026-06-29T10:00:00Z'),
+      row('b', 'running', '2026-06-29T10:00:00Z'),
+      row('c', 'starting', '2026-06-29T10:00:00Z'),
+      row('d', 'done', '2026-06-29T10:00:00Z'),
+      row('e', 'idle', '2026-06-29T10:00:00Z'),
+    ]);
+    expect(counts).toEqual({ running: 2, awaiting: 1 });
+  });
+
+  it('does not count error or offline_paused sessions as running or awaiting', () => {
+    const counts = sessionCounts([
+      row('a', 'error', '2026-06-29T10:00:00Z'),
+      row('b', 'offline_paused', '2026-06-29T10:00:00Z'),
+    ]);
+    expect(counts).toEqual({ running: 0, awaiting: 0 });
+  });
+});
diff --git a/apps/web/src/lib/session-groups.ts b/apps/web/src/lib/session-groups.ts
new file mode 100644
index 0000000..2f94514
--- /dev/null
+++ b/apps/web/src/lib/session-groups.ts
@@ -0,0 +1,79 @@
+import type { SessionStatus } from './session';
+
+/**
+ * The dashboard presentation layer: how the session list is bucketed, ordered, and tallied. Kept apart
+ * from the live frame reducer (`sessions.ts`) so each file owns one concern. Pure and unit-tested.
+ *
+ * One dashboard row: a persisted-registry session overlaid with live status, plus the watching device's
+ * display name for the row meta. Built in the page from `data.sessions` + the live session map.
+ */
+export interface SessionRow {
+  readonly id: string;
+  readonly title: string | null;
+  readonly status: SessionStatus;
+  readonly deviceName: string | null;
+  readonly createdAt: Date;
+}
+
+/** The dashboard's three buckets (the mockup's "Needs your decision" / "Active" / "Recent"). */
+export type SessionGroupKey = 'awaiting' | 'active' | 'recent';
+
+export interface SessionGroups {
+  readonly awaiting: readonly SessionRow[];
+  readonly active: readonly SessionRow[];
+  readonly recent: readonly SessionRow[];
+}
+
+/**
+ * Which bucket a status belongs to. Every status is listed explicitly so adding a new one to the protocol
+ * is a compile error here (via the `never` check) rather than a silent fall into "recent".
+ */
+function groupKey(status: SessionStatus): SessionGroupKey {
+  switch (status) {
+    case 'awaiting_input':
+      return 'awaiting';
+    case 'running':
+    case 'starting':
+      return 'active';
+    case 'done':
+    case 'error':
+    case 'offline_paused':
+    case 'idle':
+      return 'recent';
+    default: {
+      const _exhaustive: never = status;
+      return _exhaustive;
+    }
+  }
+}
+
+/** Partition rows into the dashboard's three groups, newest-first within each. */
+export function groupSessions(rows: readonly SessionRow[]): SessionGroups {
+  const groups: Record<SessionGroupKey, SessionRow[]> = { awaiting: [], active: [], recent: [] };
+  for (const row of rows) groups[groupKey(row.status)].push(row);
+  const newestFirst = (a: SessionRow, b: SessionRow): number =>
+    b.createdAt.getTime() - a.createdAt.getTime();
+  return {
+    awaiting: groups.awaiting.sort(newestFirst),
+    active: groups.active.sort(newestFirst),
+    recent: groups.recent.sort(newestFirst),
+  };
+}
+
+/** Live tallies for the system bar / dashboard header: agents doing work, and those blocked on you. */
+export interface SessionCounts {
+  /** Sessions actively working (running or starting). */
+  readonly running: number;
+  /** Sessions blocked awaiting a human decision — the loud signal. */
+  readonly awaiting: number;
+}
+
+export function sessionCounts(rows: readonly Pick<SessionRow, 'status'>[]): SessionCounts {
+  let running = 0;
+  let awaiting = 0;
+  for (const row of rows) {
+    if (row.status === 'awaiting_input') awaiting += 1;
+    else if (row.status === 'running' || row.status === 'starting') running += 1;
+  }
+  return { running, awaiting };
+}
diff --git a/apps/web/src/lib/sessions.test.ts b/apps/web/src/lib/sessions.test.ts
index 66dc2d0..2ff25db 100644
--- a/apps/web/src/lib/sessions.test.ts
+++ b/apps/web/src/lib/sessions.test.ts
@@ -1,7 +1,7 @@
 import { makeEnvelope, type Envelope } from '@telecode/protocol';
 import { describe, expect, it } from 'vitest';
 
-import { foldSessionFrame, statusPriority, type SessionMap } from './sessions';
+import { foldSessionFrame, type SessionMap } from './sessions';
 
 const USER = 'u_1';
 const DEVICE = 'd_1';
@@ -65,12 +65,3 @@ describe('multi-session demux (foldSessionFrame)', () => {
     expect(map.get('b')?.status).toBe('running'); // untouched
   });
 });
-
-describe('dashboard sort priority', () => {
-  it('puts awaiting-input first, live work next, terminal/idle last', () => {
-    expect(statusPriority('awaiting_input')).toBeLessThan(statusPriority('running'));
-    expect(statusPriority('running')).toBeLessThan(statusPriority('done'));
-    expect(statusPriority('starting')).toBe(statusPriority('running'));
-    expect(statusPriority('offline_paused')).toBe(statusPriority('error'));
-  });
-});
diff --git a/apps/web/src/lib/sessions.ts b/apps/web/src/lib/sessions.ts
index c957e62..c6eabad 100644
--- a/apps/web/src/lib/sessions.ts
+++ b/apps/web/src/lib/sessions.ts
@@ -1,11 +1,11 @@
-import { type Envelope, type SessionStatusName } from '@telecode/protocol';
+import { type Envelope } from '@telecode/protocol';
 
 import { applyEnvelope, initialSessionState, type SessionState } from './session';
 
 /**
  * The browser watches a device's whole channel, so it receives every session's frames; this is the live
  * per-session state, demultiplexed by `session_id`. Pure logic (no Svelte/DOM) so it unit-tests directly;
- * the reactive store in `session-store.ts` wraps it.
+ * the reactive store in `session-store.ts` wraps it. Dashboard bucketing/tallies live in `session-groups.ts`.
  */
 export type SessionMap = ReadonlyMap<string, SessionState>;
 
@@ -45,19 +45,3 @@ export function markChannelOffline(map: SessionMap): SessionMap {
   }
   return changed ? next : map;
 }
-
-/**
- * Dashboard sort priority: a blocked session ("awaiting input") is the loudest signal and sorts to the
- * top; live work next; everything terminal/idle last. Ties break on recency at the call site.
- */
-export function statusPriority(status: SessionStatusName | 'idle'): number {
-  switch (status) {
-    case 'awaiting_input':
-      return 0;
-    case 'running':
-    case 'starting':
-      return 1;
-    default:
-      return 2; // done · error · offline_paused · idle
-  }
-}
diff --git a/apps/web/src/lib/settings.test.ts b/apps/web/src/lib/settings.test.ts
new file mode 100644
index 0000000..2ffa385
--- /dev/null
+++ b/apps/web/src/lib/settings.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  DEFAULT_PERMISSION_MODE,
+  PERMISSION_MODES,
+  readPermissionMode,
+  writePermissionMode,
+} from './settings';
+
+/** A key-honouring in-memory Storage, so read and write must agree on the key to round-trip. */
+function memoryStorage(): Pick<Storage, 'getItem' | 'setItem'> {
+  const store = new Map<string, string>();
+  return {
+    getItem: (key) => store.get(key) ?? null,
+    setItem: (key, value) => {
+      store.set(key, value);
+    },
+  };
+}
+
+describe('permission-mode persistence', () => {
+  it('round-trips a written mode (read and write use the same key)', () => {
+    const storage = memoryStorage();
+    writePermissionMode(storage, 'acceptEdits');
+    expect(readPermissionMode(storage)).toBe('acceptEdits');
+  });
+
+  it('falls back to the conservative default when unset', () => {
+    expect(readPermissionMode(memoryStorage())).toBe(DEFAULT_PERMISSION_MODE);
+  });
+
+  it('falls back to the default for a corrupt/unknown stored value', () => {
+    const corrupt: Pick<Storage, 'getItem'> = { getItem: () => 'garbage' };
+    expect(readPermissionMode(corrupt)).toBe(DEFAULT_PERMISSION_MODE);
+  });
+
+  it('offers exactly the three surfaced modes and omits the gate-bypassing one', () => {
+    const values = PERMISSION_MODES.map((mode) => mode.value);
+    expect(values).toEqual(['plan', 'default', 'acceptEdits']);
+    expect(values).not.toContain('bypassPermissions');
+  });
+});
diff --git a/apps/web/src/lib/settings.ts b/apps/web/src/lib/settings.ts
new file mode 100644
index 0000000..7854e2c
--- /dev/null
+++ b/apps/web/src/lib/settings.ts
@@ -0,0 +1,48 @@
+import { permissionModeSchema, type PermissionModeName } from '@telecode/protocol';
+
+/**
+ * The default launch permission mode the operator picks once and reuses (the launch drawer seeds from it,
+ * Settings edits it). The persistence is split into pure read/write over a `Storage`-shaped seam so it
+ * unit-tests without a DOM; the Svelte surfaces call these with the real `localStorage` (browser-guarded).
+ *
+ * We surface three of the SDK's four modes; `bypassPermissions` (skip every gate) is deliberately omitted
+ * — the approval gate is telecode's safety boundary (architecture invariant #4), not a casual default.
+ */
+export interface PermissionModeOption {
+  readonly value: PermissionModeName;
+  readonly label: string;
+  readonly hint: string;
+}
+
+export const PERMISSION_MODES: readonly PermissionModeOption[] = [
+  { value: 'plan', label: 'Plan only', hint: 'The agent explores and plans but makes no changes.' },
+  {
+    value: 'default',
+    label: 'Approve edits',
+    hint: 'You approve each consequential action before it runs.',
+  },
+  {
+    value: 'acceptEdits',
+    label: 'Auto-accept edits',
+    hint: 'File edits apply automatically; other actions still ask.',
+  },
+];
+
+/** The conservative fallback for an unset or unrecognized stored value. */
+export const DEFAULT_PERMISSION_MODE: PermissionModeName = 'default';
+
+const STORAGE_KEY = 'telecode:default-permission-mode';
+
+/** Read the saved default mode, falling back to {@link DEFAULT_PERMISSION_MODE} for unset/invalid values. */
+export function readPermissionMode(storage: Pick<Storage, 'getItem'>): PermissionModeName {
+  const parsed = permissionModeSchema.safeParse(storage.getItem(STORAGE_KEY));
+  return parsed.success ? parsed.data : DEFAULT_PERMISSION_MODE;
+}
+
+/** Persist the default launch permission mode. */
+export function writePermissionMode(
+  storage: Pick<Storage, 'setItem'>,
+  mode: PermissionModeName,
+): void {
+  storage.setItem(STORAGE_KEY, mode);
+}
diff --git a/apps/web/src/lib/time.test.ts b/apps/web/src/lib/time.test.ts
new file mode 100644
index 0000000..33707ea
--- /dev/null
+++ b/apps/web/src/lib/time.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import { relativeTime } from './time';
+
+const NOW = new Date('2026-06-29T12:00:00Z').getTime();
+
+describe('relativeTime', () => {
+  it("reads the last few seconds as 'just now'", () => {
+    expect(relativeTime(new Date(NOW - 20_000), NOW)).toBe('just now');
+    expect(relativeTime(new Date(NOW), NOW)).toBe('just now');
+  });
+
+  it('reads minutes within the hour', () => {
+    expect(relativeTime(new Date(NOW - 5 * 60_000), NOW)).toBe('5 min ago');
+    expect(relativeTime(new Date(NOW - 59 * 60_000), NOW)).toBe('59 min ago');
+  });
+
+  it('rolls up to hours, then days', () => {
+    expect(relativeTime(new Date(NOW - 2 * 3_600_000), NOW)).toBe('2 hr ago');
+    expect(relativeTime(new Date(NOW - 3 * 86_400_000), NOW)).toBe('3 d ago');
+  });
+
+  it('rounds at the unit boundaries (30s → minutes, 60min → hours, 24hr → days)', () => {
+    expect(relativeTime(new Date(NOW - 30_000), NOW)).toBe('1 min ago');
+    expect(relativeTime(new Date(NOW - 60 * 60_000), NOW)).toBe('1 hr ago');
+    expect(relativeTime(new Date(NOW - 24 * 3_600_000), NOW)).toBe('1 d ago');
+  });
+});
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
new file mode 100644
index 0000000..9cf4ac8
--- /dev/null
+++ b/apps/web/src/lib/time.ts
@@ -0,0 +1,13 @@
+/**
+ * Compact relative timestamps for the session list and device rows ('just now', '5 min ago',
+ * '2 hr ago', '3 d ago'). Pure (the clock is an injectable `now`) so it unit-tests directly and the
+ * Svelte views stay thin renderers. A single source of truth keeps every surface phrasing identical.
+ */
+export function relativeTime(date: Date, now: number = Date.now()): string {
+  const mins = Math.round((now - date.getTime()) / 60_000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins} min ago`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return `${hrs} hr ago`;
+  return `${Math.round(hrs / 24)} d ago`;
+}
diff --git a/apps/web/src/routes/(app)/+layout.server.ts b/apps/web/src/routes/(app)/+layout.server.ts
new file mode 100644
index 0000000..4b233a9
--- /dev/null
+++ b/apps/web/src/routes/(app)/+layout.server.ts
@@ -0,0 +1,28 @@
+import { redirect } from '@sveltejs/kit';
+
+import { listDevices, listRepos } from '$lib/server/relay-api';
+import { getSessionToken } from '$lib/server/session-cookie';
+
+import type { LayoutServerLoad } from './$types';
+
+/**
+ * The authenticated app shell's shared data: the signed-in user, their paired devices, and their repos
+ * for the launch drawer. Loaded once for every page under `(app)` (the sidebar, system bar, and launch
+ * drawer all consume it), so individual pages no longer re-fetch devices/repos. Unauthenticated requests
+ * are bounced to sign-in here, the single guard for the whole group.
+ */
+export const load: LayoutServerLoad = async ({ locals, cookies }) => {
+  if (!locals.user) {
+    redirect(303, '/signin');
+  }
+  const token = getSessionToken(cookies);
+  const [devices, repoList] = token
+    ? await Promise.all([listDevices(token), listRepos(token)])
+    : [[], { connected: false, repos: [] }];
+  return {
+    user: locals.user,
+    devices,
+    githubConnected: repoList.connected,
+    repos: repoList.repos,
+  };
+};
diff --git a/apps/web/src/routes/(app)/+layout.svelte b/apps/web/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..49ce22a
--- /dev/null
+++ b/apps/web/src/routes/(app)/+layout.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import { browser } from '$app/environment';
+  import { env } from '$env/dynamic/public';
+
+  import LaunchDrawer from '$lib/components/LaunchDrawer.svelte';
+  import MobileNav from '$lib/components/MobileNav.svelte';
+  import Sidebar from '$lib/components/Sidebar.svelte';
+  import SystemBar from '$lib/components/SystemBar.svelte';
+  import { launchDrawerOpen } from '$lib/launch-drawer';
+  import { sessionCounts } from '$lib/session-groups';
+  import {
+    connectionState,
+    ensureConnection,
+    sessions as liveSessions,
+  } from '$lib/session-store';
+  import type { LayoutData } from './$types';
+
+  /**
+   * The persistent authenticated shell (enterprise-ui §2): system bar + sidebar + scrollable content,
+   * with the launch drawer and the phone bottom-nav. It owns the single relay connection — established
+   * once when a device exists and never torn down across SPA navigation (reopen = reconnect, invariant
+   * #7) — plus the drawer open-state and the ⌘N shortcut. Pages render only their own content into `main`.
+   */
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+  const RELAY_URL = env.PUBLIC_TELECODE_RELAY_URL ?? 'ws://127.0.0.1:8080/ws';
+  const device = $derived(data.devices[0] ?? null);
+  // Live working/blocked tallies for the system bar, straight from the demuxed session map.
+  const counts = $derived(sessionCounts([...$liveSessions.values()]));
+
+  // Open (and keep) the shared connection whenever a device is available; idempotent, so re-running on a
+  // later pairing is safe. Client-only ($effect never runs on the server).
+  $effect(() => {
+    if (device && browser) {
+      void ensureConnection({
+        relayUrl: RELAY_URL,
+        userId: data.user?.id ?? '',
+        deviceId: device.id,
+        daemonPublicKey: device.publicKey,
+      });
+    }
+  });
+
+  function openLaunchDrawer(): void {
+    launchDrawerOpen.set(true);
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'n') {
+      event.preventDefault();
+      openLaunchDrawer();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<div class="app">
+  <SystemBar connection={$connectionState} {counts} />
+  <Sidebar
+    user={data.user}
+    devices={data.devices}
+    connection={$connectionState}
+    {counts}
+    onlaunch={openLaunchDrawer}
+  />
+  <main id="main" class="content">
+    {@render children()}
+  </main>
+  <MobileNav onlaunch={openLaunchDrawer} />
+</div>
+
+<LaunchDrawer
+  bind:open={$launchDrawerOpen}
+  {device}
+  repos={data.repos}
+  githubConnected={data.githubConnected}
+/>
+
+<style>
+  .app {
+    height: 100dvh;
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  .content {
+    grid-row: 2;
+    grid-column: 2;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 640px) {
+    .app {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+    }
+    .content {
+      grid-column: 1 / -1;
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/(app)/+page.server.ts b/apps/web/src/routes/(app)/+page.server.ts
new file mode 100644
index 0000000..62ad4d5
--- /dev/null
+++ b/apps/web/src/routes/(app)/+page.server.ts
@@ -0,0 +1,27 @@
+import { redirect } from '@sveltejs/kit';
+
+import { destroyRelaySession, listSessions } from '$lib/server/relay-api';
+import { clearSessionCookie, getSessionToken } from '$lib/server/session-cookie';
+
+import type { Actions, PageServerLoad } from './$types';
+
+/**
+ * The dashboard's own data: the persisted session registry (survives reloads; live status overlays it in
+ * the page). The user + devices + repos come from the `(app)` layout load, so they aren't re-fetched here.
+ */
+export const load: PageServerLoad = async ({ cookies }) => {
+  const token = getSessionToken(cookies);
+  const sessions = token ? await listSessions(token) : [];
+  return { sessions };
+};
+
+export const actions: Actions = {
+  logout: async ({ cookies }) => {
+    const token = getSessionToken(cookies);
+    if (token) {
+      await destroyRelaySession(token);
+    }
+    clearSessionCookie(cookies);
+    redirect(303, '/signin');
+  },
+};
diff --git a/apps/web/src/routes/(app)/+page.svelte b/apps/web/src/routes/(app)/+page.svelte
new file mode 100644
index 0000000..f9248c1
--- /dev/null
+++ b/apps/web/src/routes/(app)/+page.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { Button } from '@telecode/ui';
+
+  import Onboarding from '$lib/components/Onboarding.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
+  import SessionGroupHeader from '$lib/components/SessionGroupHeader.svelte';
+  import SessionRow from '$lib/components/SessionRow.svelte';
+  import { deviceStatus } from '$lib/devices';
+  import { launchDrawerOpen } from '$lib/launch-drawer';
+  import { buildOnboardingSteps } from '$lib/onboarding';
+  import { pairingInstructions } from '$lib/pairing-instructions';
+  import type { SessionState } from '$lib/session';
+  import { groupSessions, sessionCounts, type SessionRow as Row } from '$lib/session-groups';
+  import { connectionState, sessions as liveSessions } from '$lib/session-store';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+
+  const device = $derived(data.devices[0] ?? null);
+
+  function deviceName(deviceId: string): string | null {
+    return data.devices.find((d) => d.id === deviceId)?.name ?? null;
+  }
+
+  function firstPrompt(entries: SessionState['entries']): string | undefined {
+    return entries.find((e) => e.kind === 'user')?.text;
+  }
+
+  // The persisted registry list (survives reloads) overlaid with live status from the channel; sessions
+  // launched this visit but not yet in the registry are appended. Grouping/sorting is done by groupSessions.
+  const rows = $derived.by<Row[]>(() => {
+    const byId = new Map<string, Row>();
+    for (const s of data.sessions) {
+      byId.set(s.id, {
+        id: s.id,
+        title: s.title,
+        status: s.status,
+        deviceName: deviceName(s.deviceId),
+        createdAt: s.createdAt,
+      });
+    }
+    for (const [id, state] of $liveSessions) {
+      const existing = byId.get(id);
+      const status = state.status === 'idle' ? (existing?.status ?? 'starting') : state.status;
+      const title = existing?.title ?? firstPrompt(state.entries) ?? null;
+      byId.set(id, {
+        id,
+        title,
+        status,
+        deviceName: existing?.deviceName ?? device?.name ?? null,
+        createdAt: existing?.createdAt ?? new Date(),
+      });
+    }
+    return [...byId.values()];
+  });
+
+  const groups = $derived(groupSessions(rows));
+  const counts = $derived(sessionCounts(rows));
+  const devicesOnline = $derived(
+    data.devices.filter(
+      (d, i) =>
+        deviceStatus({ lastSeenAt: d.lastSeenAt, isWatched: i === 0, connection: $connectionState })
+          .online,
+    ).length,
+  );
+
+  // First-run path (T14): pair → launch, shown when no device is paired yet.
+  const onboardingSteps = $derived(
+    buildOnboardingSteps({
+      paired: device !== null,
+      hasSessions: rows.length > 0,
+      instructions: pairingInstructions,
+    }),
+  );
+</script>
+
+<svelte:head>
+  <title>Sessions · telecode</title>
+</svelte:head>
+
+{#if !device}
+  <div class="onboard-scroll">
+    <Onboarding steps={onboardingSteps} />
+  </div>
+{:else}
+  <PageHeader title="Sessions" sub="Agents running on your machines, controlled from here.">
+    {#snippet actions()}
+      <dl class="stats">
+        <div class="stat">
+          <dd class="n">{counts.running}</dd>
+          <dt class="t">Running</dt>
+        </div>
+        <div class="stat">
+          <dd class="n" class:amber={counts.awaiting > 0}>{counts.awaiting}</dd>
+          <dt class="t">Awaiting input</dt>
+        </div>
+        <div class="stat">
+          <dd class="n">{devicesOnline}</dd>
+          <dt class="t">{devicesOnline === 1 ? 'Device online' : 'Devices online'}</dt>
+        </div>
+      </dl>
+    {/snippet}
+  </PageHeader>
+
+  <div class="scroll">
+    {#if rows.length === 0}
+      <div class="empty">
+        <p class="eyebrow">No sessions yet</p>
+        <p class="sub">Launch a session on {device.name} to watch the agent work.</p>
+        <Button variant="primary" onclick={() => launchDrawerOpen.set(true)}>Launch session</Button>
+      </div>
+    {:else}
+      <div class="list">
+        {#if groups.awaiting.length > 0}
+          <SessionGroupHeader label="Needs your decision" />
+          <ul class="rows" role="list">
+            {#each groups.awaiting as row (row.id)}
+              <li><SessionRow {row} /></li>
+            {/each}
+          </ul>
+        {/if}
+        {#if groups.active.length > 0}
+          <SessionGroupHeader label="Active" />
+          <ul class="rows" role="list">
+            {#each groups.active as row (row.id)}
+              <li><SessionRow {row} /></li>
+            {/each}
+          </ul>
+        {/if}
+        {#if groups.recent.length > 0}
+          <SessionGroupHeader label="Recent" />
+          <ul class="rows" role="list">
+            {#each groups.recent as row (row.id)}
+              <li><SessionRow {row} /></li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .onboard-scroll {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+  .sub {
+    margin: var(--space-1) 0 0;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+  .stats {
+    display: flex;
+    align-items: stretch;
+  }
+  .stat {
+    padding: 0 var(--space-5);
+    text-align: right;
+    border-left: 1px solid var(--border);
+  }
+  .stat:first-child {
+    border-left: none;
+  }
+  .n {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: var(--text-xl);
+    font-weight: 500;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+  }
+  .n.amber {
+    color: var(--accent);
+  }
+  .t {
+    margin-top: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .list {
+    max-width: 72rem;
+    padding: var(--space-1) var(--space-4) var(--space-8);
+  }
+  .rows {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    text-align: center;
+    padding: var(--space-16) var(--space-4);
+  }
+  .eyebrow {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .empty .sub {
+    margin: 0 0 var(--space-2);
+    max-width: 28rem;
+  }
+
+  @media (max-width: 640px) {
+    .stats {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/activate/+page.server.ts b/apps/web/src/routes/(app)/activate/+page.server.ts
similarity index 87%
rename from apps/web/src/routes/activate/+page.server.ts
rename to apps/web/src/routes/(app)/activate/+page.server.ts
index c3a3a52..320625e 100644
--- a/apps/web/src/routes/activate/+page.server.ts
+++ b/apps/web/src/routes/(app)/activate/+page.server.ts
@@ -3,7 +3,7 @@ import { fail, redirect } from '@sveltejs/kit';
 import { pairingInstructions } from '$lib/pairing-instructions';
 import { approveDevice } from '$lib/server/relay-api';
 
-import type { Actions, PageServerLoad } from './$types';
+import type { Actions } from './$types';
 
 // A code that doesn't approve is invalid or expired; tell the user how to mint a fresh one in this
 // environment. In dev `make run` reuses a healthy daemon (no new code), so point at a restart + the log.
@@ -11,13 +11,7 @@ const codeExpiredError = pairingInstructions.codeLocation
   ? `That code is invalid or expired. Restart the daemon and use the new code in \`${pairingInstructions.codeLocation}\`.`
   : `That code is invalid or expired. Run \`${pairingInstructions.command}\` again for a new one.`;
 
-export const load: PageServerLoad = ({ locals }) => {
-  if (!locals.user) {
-    redirect(303, '/signin');
-  }
-  return {};
-};
-
+// Auth + device/repo loading are handled by the `(app)` layout; this route only owns the approve action.
 export const actions: Actions = {
   default: async ({ request, locals }) => {
     if (!locals.user) {
diff --git a/apps/web/src/routes/activate/+page.svelte b/apps/web/src/routes/(app)/activate/+page.svelte
similarity index 98%
rename from apps/web/src/routes/activate/+page.svelte
rename to apps/web/src/routes/(app)/activate/+page.svelte
index 1105ef7..b3f21c9 100644
--- a/apps/web/src/routes/activate/+page.svelte
+++ b/apps/web/src/routes/(app)/activate/+page.svelte
@@ -17,7 +17,7 @@
   <title>Activate a device · telecode</title>
 </svelte:head>
 
-<main id="main" class="wrap">
+<div class="wrap">
   <section class="panel" aria-labelledby="activate-title">
     <p class="eyebrow">PAIR A DEVICE</p>
     <h1 id="activate-title">Activate a device</h1>
@@ -71,11 +71,12 @@
       <p class="back"><a href="/">Back to sessions</a></p>
     {/if}
   </section>
-</main>
+</div>
 
 <style>
   .wrap {
-    min-height: 100dvh;
+    height: 100%;
+    overflow-y: auto;
     display: grid;
     place-items: center;
     padding: var(--space-6);
diff --git a/apps/web/src/routes/(app)/devices/+page.svelte b/apps/web/src/routes/(app)/devices/+page.svelte
new file mode 100644
index 0000000..377c7b1
--- /dev/null
+++ b/apps/web/src/routes/(app)/devices/+page.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+  import { Panel } from '@telecode/ui';
+
+  import PageHeader from '$lib/components/PageHeader.svelte';
+  import { deviceStatus } from '$lib/devices';
+  import { connectionState } from '$lib/session-store';
+  import type { PageData } from './$types';
+
+  /**
+   * Paired devices — the machines that run agents on the user's behalf (never the cloud). Lists what we
+   * persist (name, id, presence from `lastSeenAt` + the live channel) and routes to pairing. Revoking a
+   * device needs a relay endpoint that does not exist yet, so it is intentionally omitted rather than
+   * shown as a dead control.
+   */
+  let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+  <title>Devices · telecode</title>
+</svelte:head>
+
+<PageHeader title="Devices" sub="Machines paired to your account. Agents run here, never in the cloud." />
+
+<div class="scroll">
+  <div class="content">
+    {#if data.devices.length === 0}
+      <div class="empty">
+        <p class="eyebrow">No devices paired</p>
+        <p class="sub">Pair a machine to run agents on it.</p>
+        <a class="cta cta-primary" href="/activate">Pair a device</a>
+      </div>
+    {:else}
+      <Panel title="Paired devices" meta="{data.devices.length} total">
+        <ul class="devices" role="list">
+          {#each data.devices as device, i (device.id)}
+            {@const status = deviceStatus({
+              lastSeenAt: device.lastSeenAt,
+              isWatched: i === 0,
+              connection: $connectionState,
+            })}
+            <li class="row hairline-b">
+              <span class="dot" data-tone={status.tone} aria-hidden="true"></span>
+              <div class="id">
+                <span class="name" title={device.name}>{device.name}</span>
+                <span class="did mono">{device.id.slice(0, 14)}</span>
+              </div>
+              <span class="seen mono">{status.online ? 'online · now' : `offline · ${status.lastSeen}`}</span>
+            </li>
+          {/each}
+        </ul>
+      </Panel>
+      <div class="actions">
+        <a class="cta cta-secondary" href="/activate">
+          <svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true"><path d="M6.5 2.5v8M2.5 6.5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
+          Pair a new device
+        </a>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .sub {
+    margin: var(--space-1) 0 0;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .content {
+    max-width: 52rem;
+    padding: var(--space-6);
+  }
+  .devices {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .row {
+    display: grid;
+    grid-template-columns: 10px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-4) var(--space-5);
+  }
+  .row:last-child {
+    border-bottom: none;
+  }
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--text-muted);
+  }
+  .dot[data-tone='success'] {
+    background: var(--success);
+  }
+  .dot[data-tone='warning'] {
+    background: var(--warning);
+  }
+  .id {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .name {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .did {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+  .seen {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+  .actions {
+    margin-top: var(--space-5);
+  }
+  /* Navigation CTAs are real links styled to read as buttons (enterprise-ui §3: links are links). */
+  .cta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: 32px;
+    padding: 0 var(--space-4);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    text-decoration: none;
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease);
+  }
+  .cta:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--bg),
+      0 0 0 4px var(--focus-ring);
+  }
+  .cta-primary {
+    background: var(--primary);
+    color: var(--primary-text);
+  }
+  .cta-primary:hover {
+    background: var(--accent-hover);
+  }
+  .cta-secondary {
+    border: 1px solid var(--border-strong);
+    background: var(--surface);
+    color: var(--text);
+  }
+  .cta-secondary:hover {
+    background: var(--bg-muted);
+  }
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    text-align: center;
+    padding: var(--space-16) var(--space-4);
+  }
+  .eyebrow {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .empty .sub {
+    margin: 0 0 var(--space-2);
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      padding: var(--space-4);
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/(app)/sessions/[id]/+page.server.ts b/apps/web/src/routes/(app)/sessions/[id]/+page.server.ts
new file mode 100644
index 0000000..7b20ddc
--- /dev/null
+++ b/apps/web/src/routes/(app)/sessions/[id]/+page.server.ts
@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+/**
+ * The session view only needs the route's session id; the user, devices, and auth guard come from the
+ * `(app)` layout load (the live transcript itself streams over the shared channel, not from here).
+ */
+export const load: PageServerLoad = ({ params }) => ({ sessionId: params.id });
diff --git a/apps/web/src/routes/(app)/sessions/[id]/+page.svelte b/apps/web/src/routes/(app)/sessions/[id]/+page.svelte
new file mode 100644
index 0000000..31836b7
--- /dev/null
+++ b/apps/web/src/routes/(app)/sessions/[id]/+page.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+  import type { SessionControlAction } from '@telecode/protocol';
+
+  import Composer from '$lib/components/Composer.svelte';
+  import SessionHeader from '$lib/components/SessionHeader.svelte';
+  import SessionRail from '$lib/components/SessionRail.svelte';
+  import Transcript from '$lib/components/Transcript.svelte';
+  import { initialSessionState, pendingPermission, type SessionState } from '$lib/session';
+  import { SESSION_DISPLAY } from '$lib/session-display';
+  import {
+    connectionState,
+    decide,
+    sendControl,
+    sendUserMessage,
+    sessions as liveSessions,
+    subscribe,
+  } from '$lib/session-store';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+  // Reactive so navigating /sessions/A → /sessions/B (same route, no remount) re-targets + re-subscribes.
+  const sessionId = $derived(data.sessionId);
+  const device = $derived(data.devices[0] ?? null);
+
+  const known = $derived($liveSessions.has(sessionId));
+  const session: SessionState = $derived($liveSessions.get(sessionId) ?? initialSessionState);
+
+  const display = $derived(SESSION_DISPLAY[session.status]);
+  const isBusy = $derived(
+    session.status === 'starting' ||
+      session.status === 'running' ||
+      session.status === 'awaiting_input',
+  );
+  // Operator controls (Task 9): interrupt stops the in-flight turn; end terminates it. Both need a live
+  // channel, and nothing is actionable on a terminal session.
+  const connected = $derived($connectionState === 'connected');
+  const isTerminal = $derived(session.status === 'done' || session.status === 'error');
+  const showControls = $derived(known && session.status !== 'idle');
+  // The session's first prompt names it (in the header + browser tab); fall back to the short id.
+  const sessionTitle = $derived(
+    session.entries.find((e) => e.kind === 'user')?.text ?? sessionId.slice(0, 12),
+  );
+
+  function onControl(action: SessionControlAction): void {
+    sendControl(sessionId, action);
+  }
+
+  // Re-attach once the channel is live (and again after any reconnect): the daemon backfills the
+  // transcript via session.history. Reopen is a reconnect, never a restart. The shared connection itself
+  // is opened by the app-shell layout.
+  $effect(() => {
+    if ($connectionState === 'connected' && device) {
+      subscribe(sessionId);
+    }
+  });
+
+  function submitPrompt(text: string): void {
+    sendUserMessage(sessionId, text);
+  }
+
+  function onDecide(behavior: 'allow' | 'deny'): void {
+    const pending = pendingPermission(session);
+    if (!pending || pending.kind !== 'permission') return;
+    decide(
+      sessionId,
+      behavior === 'allow'
+        ? { requestId: pending.requestId, behavior: 'allow' }
+        : { requestId: pending.requestId, behavior: 'deny' },
+    );
+  }
+</script>
+
+<svelte:head>
+  <title>{sessionTitle} · telecode</title>
+</svelte:head>
+
+<div class="view">
+  <SessionHeader
+    title={sessionTitle}
+    deviceName={device?.name ?? null}
+    {sessionId}
+    status={session.status}
+    {isBusy}
+    {isTerminal}
+    {showControls}
+    {connected}
+    oninterrupt={() => onControl('interrupt')}
+    onend={() => onControl('end')}
+  />
+
+  <div class="body">
+    <div class="stream-col">
+      {#if !known}
+        <div class="placeholder">
+          <p class="eyebrow">{$connectionState === 'error' ? 'OFFLINE' : 'RECONNECTING…'}</p>
+          <p class="sub">
+            {$connectionState === 'error'
+              ? 'The channel is offline. It will restore when the connection returns.'
+              : 'Restoring this session’s transcript.'}
+          </p>
+        </div>
+      {:else if session.entries.length === 0}
+        <div class="placeholder">
+          <p class="eyebrow">{display.label}</p>
+          <p class="sub">No activity yet — send an instruction to steer this session.</p>
+        </div>
+      {:else}
+        <Transcript
+          entries={session.entries}
+          onapprove={() => onDecide('allow')}
+          onreject={() => onDecide('deny')}
+        />
+      {/if}
+
+      {#if known}
+        <div class="dock hairline-t">
+          <Composer
+            isBusy={isBusy}
+            submitLabel="Send"
+            placeholder="Send a follow-up instruction…"
+            onsend={submitPrompt}
+          />
+        </div>
+      {/if}
+    </div>
+
+    {#if known}
+      <SessionRail {session} deviceName={device?.name ?? null} connection={$connectionState} />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .view {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .body {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+  }
+  .stream-col {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+  .placeholder {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    gap: var(--space-2);
+    padding: var(--space-8) var(--space-4);
+    overflow-y: auto;
+  }
+  .eyebrow {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .sub {
+    margin: 0;
+    max-width: 26rem;
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    line-height: var(--lh-base);
+  }
+  .dock {
+    padding: var(--space-3) var(--space-4);
+    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
+  }
+
+  /* Below the rail breakpoint the stream takes the full width; the rail is detail, not load-bearing. */
+  @media (max-width: 900px) {
+    .body {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .body :global(.rail) {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/(app)/settings/+page.svelte b/apps/web/src/routes/(app)/settings/+page.svelte
new file mode 100644
index 0000000..ee9101a
--- /dev/null
+++ b/apps/web/src/routes/(app)/settings/+page.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { enhance } from '$app/forms';
+  import { browser } from '$app/environment';
+  import { env } from '$env/dynamic/public';
+  import { Button, Panel } from '@telecode/ui';
+  import type { PermissionModeName } from '@telecode/protocol';
+
+  import PageHeader from '$lib/components/PageHeader.svelte';
+  import PermissionModeField from '$lib/components/PermissionModeField.svelte';
+  import { pushPermission, subscribeToPush, type PushState } from '$lib/push';
+  import { DEFAULT_PERMISSION_MODE, readPermissionMode, writePermissionMode } from '$lib/settings';
+
+  /**
+   * Settings: the relay this dashboard talks to, the default launch permission mode (persisted, seeds the
+   * launch drawer), web-push notifications, and account sign-out. Only real, wired controls are shown — the
+   * relay endpoint is read-only (it's an env/self-host concern), and the mode is the conservative default.
+   */
+  const RELAY_URL = env.PUBLIC_TELECODE_RELAY_URL ?? 'ws://127.0.0.1:8080/ws';
+  const VAPID_KEY = env.PUBLIC_VAPID_KEY ?? '';
+
+  let mode = $state<PermissionModeName>(DEFAULT_PERMISSION_MODE);
+  let pushState = $state<PushState>('unsupported');
+  let enabling = $state(false);
+
+  onMount(() => {
+    mode = readPermissionMode(localStorage);
+    pushState = pushPermission();
+  });
+
+  function persistMode(value: PermissionModeName): void {
+    if (browser) writePermissionMode(localStorage, value);
+  }
+
+  async function enableNotifications(): Promise<void> {
+    enabling = true;
+    try {
+      pushState = await subscribeToPush(VAPID_KEY);
+    } finally {
+      enabling = false;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Settings · telecode</title>
+</svelte:head>
+
+<PageHeader title="Settings" sub="Defaults for new sessions, notifications, and your relay." />
+
+<div class="scroll">
+  <div class="content">
+    <Panel title="Relay & defaults" meta="applied to new sessions">
+      <div class="body">
+        <div class="field">
+          <span class="label">Relay endpoint</span>
+          <p class="readonly mono" title={RELAY_URL}>{RELAY_URL}</p>
+          <p class="hint">Set <code class="mono">PUBLIC_TELECODE_RELAY_URL</code> to point at your own relay.</p>
+        </div>
+
+        <PermissionModeField bind:value={mode} onselect={persistMode} />
+
+        <div class="field">
+          <span class="label">Notifications</span>
+          {#if pushState === 'granted'}
+            <p class="status-on mono">On — you’ll be pinged when a session needs you.</p>
+          {:else if pushState === 'denied'}
+            <p class="hint">Blocked in your browser settings. Re-enable notifications for this site to turn them on.</p>
+          {:else if pushState === 'unsupported'}
+            <p class="hint">This browser can’t do web push. Install telecode to your home screen to enable it.</p>
+          {:else}
+            <p class="hint">Get pinged when a session is awaiting your input.</p>
+            <div>
+              <Button variant="secondary" size="sm" loading={enabling} onclick={enableNotifications}>
+                Enable notifications
+              </Button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </Panel>
+
+    <Panel title="Account">
+      <div class="body">
+        <form method="POST" action="/?/logout" use:enhance>
+          <Button type="submit" variant="secondary" size="sm">Sign out</Button>
+        </form>
+      </div>
+    </Panel>
+  </div>
+</div>
+
+<style>
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .content {
+    max-width: 44rem;
+    padding: var(--space-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .body {
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
+  .readonly {
+    margin: 0;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-muted);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .hint {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    line-height: var(--lh-sm);
+  }
+  .hint code,
+  code.mono {
+    font-size: 0.92em;
+    padding: 1px var(--space-1);
+    border-radius: var(--radius-sm);
+    background: var(--bg-muted);
+  }
+  .status-on {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--success);
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      padding: var(--space-4);
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/+page.server.ts b/apps/web/src/routes/+page.server.ts
deleted file mode 100644
index 3062c18..0000000
--- a/apps/web/src/routes/+page.server.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-import { destroyRelaySession, listDevices, listRepos, listSessions } from '$lib/server/relay-api';
-import { clearSessionCookie, getSessionToken } from '$lib/server/session-cookie';
-
-import type { Actions, PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ locals, cookies }) => {
-  if (!locals.user) {
-    redirect(303, '/signin');
-  }
-  const token = getSessionToken(cookies);
-  // The persisted session list survives UI restarts (reopen = reconnect); live status overlays it.
-  // Repos populate the launch picker (clone-on-demand); `connected:false` until the user links GitHub.
-  const [devices, sessions, repoList] = token
-    ? await Promise.all([listDevices(token), listSessions(token), listRepos(token)])
-    : [[], [], { connected: false, repos: [] }];
-  return {
-    user: locals.user,
-    devices,
-    sessions,
-    githubConnected: repoList.connected,
-    repos: repoList.repos,
-  };
-};
-
-export const actions: Actions = {
-  logout: async ({ cookies }) => {
-    const token = getSessionToken(cookies);
-    if (token) {
-      await destroyRelaySession(token);
-    }
-    clearSessionCookie(cookies);
-    redirect(303, '/signin');
-  },
-};
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
deleted file mode 100644
index 882a4b2..0000000
--- a/apps/web/src/routes/+page.svelte
+++ /dev/null
@@ -1,484 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  import { env } from '$env/dynamic/public';
-  import { goto } from '$app/navigation';
-  import { Button, StatusDot } from '@telecode/ui';
-
-  import Onboarding from '$lib/components/Onboarding.svelte';
-  import TopBar from '$lib/components/TopBar.svelte';
-  import { launchRepo } from '$lib/launch-repo';
-  import { buildOnboardingSteps } from '$lib/onboarding';
-  import { pairingInstructions } from '$lib/pairing-instructions';
-  import { pushPermission, subscribeToPush, type PushState } from '$lib/push';
-  import type { SessionState, SessionStatus } from '$lib/session';
-  import { SESSION_DISPLAY } from '$lib/session-display';
-  import {
-    connectionState,
-    ensureConnection,
-    launch,
-    sessions as liveSessions,
-  } from '$lib/session-store';
-  import { statusPriority } from '$lib/sessions';
-  import type { PageData } from './$types';
-
-  let { data }: { data: PageData } = $props();
-  const RELAY_URL = env.PUBLIC_TELECODE_RELAY_URL ?? 'ws://127.0.0.1:8080/ws';
-
-  const user = $derived(data.user);
-  const device = $derived(data.devices[0] ?? null);
-  const repos = $derived(data.repos);
-
-  interface Row {
-    id: string;
-    title: string | null;
-    status: SessionStatus;
-    createdAt: Date;
-  }
-
-  // The persisted registry list (survives reloads) overlaid with live status from the channel; sessions
-  // launched this visit but not yet in the registry are appended. Awaiting-input sorts loudest, to the top.
-  const rows = $derived.by<Row[]>(() => {
-    const byId = new Map<string, Row>();
-    for (const s of data.sessions) {
-      byId.set(s.id, { id: s.id, title: s.title, status: s.status, createdAt: s.createdAt });
-    }
-    for (const [id, state] of $liveSessions) {
-      const existing = byId.get(id);
-      const status = state.status === 'idle' ? (existing?.status ?? 'starting') : state.status;
-      const title = existing?.title ?? firstPrompt(state.entries) ?? null;
-      byId.set(id, { id, title, status, createdAt: existing?.createdAt ?? new Date() });
-    }
-    return [...byId.values()].sort(
-      (a, b) =>
-        statusPriority(a.status) - statusPriority(b.status) ||
-        b.createdAt.getTime() - a.createdAt.getTime(),
-    );
-  });
-
-  function firstPrompt(entries: SessionState['entries']): string | undefined {
-    return entries.find((e) => e.kind === 'user')?.text;
-  }
-
-  function relativeTime(date: Date): string {
-    const mins = Math.round((Date.now() - date.getTime()) / 60_000);
-    if (mins < 1) return 'just now';
-    if (mins < 60) return `${mins} min ago`;
-    const hrs = Math.round(mins / 60);
-    if (hrs < 24) return `${hrs} hr ago`;
-    return `${Math.round(hrs / 24)} d ago`;
-  }
-
-  // First-run path (T14): pair → launch. Shown when no device is paired yet; statuses derive from
-  // observable state so the stepper never lies about where the user is.
-  const onboardingSteps = $derived(
-    buildOnboardingSteps({
-      paired: device !== null,
-      hasSessions: rows.length > 0,
-      instructions: pairingInstructions,
-    }),
-  );
-
-  let prompt = $state('');
-  let title = $state('');
-  let selectedRepoId = $state('');
-  let launching = $state(false);
-  let launchError: string | null = $state(null);
-  let pushState = $state<PushState>('unsupported');
-
-  onMount(() => {
-    pushState = pushPermission();
-    if (device) {
-      void ensureConnection({
-        relayUrl: RELAY_URL,
-        userId: user?.id ?? '',
-        deviceId: device.id,
-        daemonPublicKey: device.publicKey,
-      });
-    }
-  });
-
-  async function onEnableNotifications(): Promise<void> {
-    pushState = await subscribeToPush(env.PUBLIC_VAPID_KEY ?? '');
-  }
-
-  async function onLaunch(event: Event): Promise<void> {
-    event.preventDefault();
-    const text = prompt.trim();
-    if (!text || launching || !device) return;
-    launching = true;
-    launchError = null;
-    try {
-      const repo = launchRepo(repos, selectedRepoId);
-      const id = await launch({
-        prompt: text,
-        ...(title.trim() ? { title: title.trim() } : {}),
-        ...(repo ? { repo } : {}),
-      });
-      await goto(`/sessions/${id}`);
-    } catch (err) {
-      launchError = err instanceof Error ? err.message : 'Launch failed.';
-      launching = false;
-    }
-  }
-
-  function onPromptKeydown(event: KeyboardEvent): void {
-    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') void onLaunch(event);
-  }
-</script>
-
-<svelte:head>
-  <title>Sessions · telecode</title>
-</svelte:head>
-
-<TopBar {user} {device} connection={$connectionState} />
-
-<main id="main" class="shell">
-  {#if !device}
-    <div class="onboard-scroll">
-      <Onboarding steps={onboardingSteps} />
-    </div>
-  {:else}
-    <aside class="rail" aria-label="Devices">
-      <p class="eyebrow">DEVICE</p>
-      <ul class="devices">
-        {#each data.devices as d (d.id)}
-          <li class="device-item" class:active={d.id === device.id}>
-            <StatusDot
-              tone={$connectionState === 'connected' ? 'success' : 'muted'}
-              label={d.name}
-            />
-          </li>
-        {/each}
-      </ul>
-    </aside>
-
-    <section class="body" aria-label="Sessions">
-      {#if pushState === 'default'}
-        <div class="notify hairline-b">
-          <span class="notify-text">Get pinged when a session needs your input.</span>
-          <Button variant="secondary" size="sm" onclick={onEnableNotifications}>
-            Enable notifications
-          </Button>
-        </div>
-      {:else if pushState === 'denied'}
-        <div class="notify hairline-b">
-          <span class="notify-text muted">Notifications are blocked in your browser settings.</span>
-        </div>
-      {/if}
-
-      <form class="launch" onsubmit={onLaunch} aria-label="Launch a session">
-        <p class="eyebrow">LAUNCH A SESSION ON {device.name}</p>
-        {#if data.githubConnected && repos.length > 0}
-          <label class="repo-field">
-            <span class="field-label">Repository</span>
-            <select class="repo" bind:value={selectedRepoId} aria-label="Repository">
-              <option value="">No repo — run in the default workspace</option>
-              {#each repos as repo (repo.id)}
-                <option value={String(repo.id)}>{repo.fullName}{repo.private ? ' (private)' : ''}</option>
-              {/each}
-            </select>
-          </label>
-        {:else if data.githubConnected}
-          <p class="repo-note">No repositories found for your GitHub account.</p>
-        {:else}
-          <p class="repo-note">
-            Connect GitHub to run a session in one of your repos. The session runs in the daemon’s
-            default workspace until then.
-          </p>
-        {/if}
-        <textarea
-          class="prompt"
-          bind:value={prompt}
-          onkeydown={onPromptKeydown}
-          placeholder="Describe a task for the agent…"
-          rows="2"
-          aria-label="Task"
-          aria-describedby="launch-hint"
-        ></textarea>
-        <div class="launch-row">
-          <input
-            class="title"
-            bind:value={title}
-            placeholder="Optional title…"
-            aria-label="Session title"
-            autocomplete="off"
-          />
-          <Button type="submit" variant="primary" size="lg" loading={launching}>Launch</Button>
-        </div>
-        {#if launchError}
-          <span class="error" role="alert">{launchError}</span>
-        {:else}
-          <span id="launch-hint" class="hint">⌘↵ to launch. You’ll approve each consequential action.</span>
-        {/if}
-      </form>
-
-      <div class="list-head hairline-b">
-        <span class="band-label">SESSIONS</span>
-        <span class="count">{rows.length}</span>
-      </div>
-
-      {#if rows.length === 0}
-        <div class="list-empty">
-          <p class="eyebrow">NO SESSIONS YET</p>
-          <p class="sub">Launch one above to watch the agent work.</p>
-        </div>
-      {:else}
-        <ul class="sessions" role="list">
-          {#each rows as row (row.id)}
-            {@const display = SESSION_DISPLAY[row.status]}
-            <li>
-              <a class="row hairline-b" href="/sessions/{row.id}">
-                <StatusDot tone={display.tone} label={display.label} pulse={display.pulse} />
-                <span class="row-title">{row.title ?? row.id}</span>
-                <span class="row-time">{relativeTime(row.createdAt)}</span>
-              </a>
-            </li>
-          {/each}
-        </ul>
-      {/if}
-    </section>
-  {/if}
-</main>
-
-<style>
-  .shell {
-    height: calc(100dvh - 48px);
-    display: grid;
-    grid-template-columns: 1fr;
-    min-height: 0;
-  }
-  @media (min-width: 720px) {
-    .shell:has(.rail) {
-      grid-template-columns: 13rem 1fr;
-    }
-  }
-
-  /* No-device first-run onboarding (T14) — scrolls on short viewports, never clips. */
-  .onboard-scroll {
-    grid-column: 1 / -1;
-    overflow-y: auto;
-    min-height: 0;
-  }
-  .eyebrow {
-    margin: 0 0 var(--space-2);
-    font-family: var(--font-mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    color: var(--text-muted);
-  }
-  .sub {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--text-base);
-    line-height: var(--lh-base);
-  }
-
-  /* Device rail */
-  .rail {
-    display: none;
-    padding: var(--space-5) var(--space-4);
-    border-right: 1px solid var(--border);
-    background: var(--surface);
-    overflow-y: auto;
-  }
-  @media (min-width: 720px) {
-    .rail {
-      display: block;
-    }
-  }
-  .devices {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-  .device-item {
-    padding: var(--space-2);
-    border-radius: var(--radius-md);
-    border-left: 2px solid transparent;
-  }
-  .device-item.active {
-    background: var(--accent-soft);
-    border-left-color: var(--accent);
-  }
-
-  /* Body */
-  .body {
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-  }
-  .notify {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    padding: var(--space-3) var(--space-4);
-    background: var(--surface);
-  }
-  .notify-text {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-  .notify-text.muted {
-    color: var(--text-muted);
-  }
-  .launch {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: var(--space-5) var(--space-4);
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-subtle);
-  }
-  .prompt {
-    width: 100%;
-    min-height: 56px;
-    max-height: 200px;
-    resize: vertical;
-    padding: var(--space-3);
-    background: var(--bg);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-md);
-    color: var(--text);
-    font-family: var(--font-sans);
-    font-size: 16px;
-    line-height: var(--lh-base);
-  }
-  .prompt:focus-visible {
-    outline: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 0 1px var(--accent);
-  }
-
-  /* Repo picker */
-  .repo-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-  .field-label {
-    font-family: var(--font-mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    color: var(--text-muted);
-  }
-  .repo {
-    width: 100%;
-    height: 40px;
-    padding: 0 var(--space-3);
-    background: var(--bg);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-md);
-    color: var(--text);
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-  }
-  .repo:focus-visible {
-    outline: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 0 1px var(--accent);
-  }
-  .repo-note {
-    margin: 0;
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    line-height: var(--lh-base);
-  }
-  .launch-row {
-    display: flex;
-    gap: var(--space-3);
-    align-items: stretch;
-  }
-  .title {
-    flex: 1;
-    min-width: 0;
-    height: 40px;
-    padding: 0 var(--space-3);
-    background: var(--bg);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-md);
-    color: var(--text);
-    font-family: var(--font-sans);
-    font-size: 16px;
-  }
-  .title:focus-visible {
-    outline: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 0 1px var(--accent);
-  }
-  .hint {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-  }
-  .error {
-    font-size: var(--text-xs);
-    color: var(--danger);
-  }
-
-  /* Session list */
-  .list-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--space-3) var(--space-4);
-    background: var(--surface);
-  }
-  .band-label {
-    font-family: var(--font-mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    color: var(--text-muted);
-  }
-  .count {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    font-variant-numeric: tabular-nums;
-  }
-  .list-empty {
-    padding: var(--space-12) var(--space-4);
-    text-align: center;
-  }
-  .sessions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-3) var(--space-4);
-    color: var(--text);
-    text-decoration: none;
-  }
-  .row:hover {
-    background: var(--bg-muted);
-  }
-  .row:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--focus-ring);
-  }
-  .row-title {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--text-sm);
-  }
-  .row-time {
-    flex: none;
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    font-variant-numeric: tabular-nums;
-  }
-</style>
diff --git a/apps/web/src/routes/sessions/[id]/+page.server.ts b/apps/web/src/routes/sessions/[id]/+page.server.ts
deleted file mode 100644
index 78975a1..0000000
--- a/apps/web/src/routes/sessions/[id]/+page.server.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-import { listDevices } from '$lib/server/relay-api';
-import { getSessionToken } from '$lib/server/session-cookie';
-
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ locals, cookies, params }) => {
-  if (!locals.user) {
-    redirect(303, '/signin');
-  }
-  const token = getSessionToken(cookies);
-  const devices = token ? await listDevices(token) : [];
-  return { user: locals.user, devices, sessionId: params.id };
-};
diff --git a/apps/web/src/routes/sessions/[id]/+page.svelte b/apps/web/src/routes/sessions/[id]/+page.svelte
deleted file mode 100644
index 9d6f00b..0000000
--- a/apps/web/src/routes/sessions/[id]/+page.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  import { env } from '$env/dynamic/public';
-  import { Button, StatusDot } from '@telecode/ui';
-  import type { SessionControlAction } from '@telecode/protocol';
-
-  import Composer from '$lib/components/Composer.svelte';
-  import TopBar from '$lib/components/TopBar.svelte';
-  import Transcript from '$lib/components/Transcript.svelte';
-  import { initialSessionState, pendingPermission, type SessionState } from '$lib/session';
-  import { SESSION_DISPLAY } from '$lib/session-display';
-  import {
-    connectionState,
-    decide,
-    ensureConnection,
-    sendControl,
-    sendUserMessage,
-    sessions as liveSessions,
-    subscribe,
-  } from '$lib/session-store';
-  import type { PageData } from './$types';
-
-  let { data }: { data: PageData } = $props();
-  const RELAY_URL = env.PUBLIC_TELECODE_RELAY_URL ?? 'ws://127.0.0.1:8080/ws';
-  // Reactive so navigating /sessions/A → /sessions/B (same route, no remount) re-targets + re-subscribes.
-  const sessionId = $derived(data.sessionId);
-
-  const user = $derived(data.user);
-  const device = $derived(data.devices[0] ?? null);
-
-  const known = $derived($liveSessions.has(sessionId));
-  const session: SessionState = $derived($liveSessions.get(sessionId) ?? initialSessionState);
-
-  const display = $derived(SESSION_DISPLAY[session.status]);
-  const isBusy = $derived(
-    session.status === 'starting' ||
-      session.status === 'running' ||
-      session.status === 'awaiting_input',
-  );
-  // Operator controls (Task 9). Interrupt stops the in-flight turn (the session stays followable, so you
-  // continue by sending another message); end terminates it. They need a live channel; nothing is
-  // actionable on a terminal session.
-  const connected = $derived($connectionState === 'connected');
-  const isTerminal = $derived(session.status === 'done' || session.status === 'error');
-  const showControls = $derived(known && session.status !== 'idle');
-
-  function onControl(action: SessionControlAction): void {
-    sendControl(sessionId, action);
-  }
-
-  onMount(() => {
-    if (device) {
-      void ensureConnection({
-        relayUrl: RELAY_URL,
-        userId: user?.id ?? '',
-        deviceId: device.id,
-        daemonPublicKey: device.publicKey,
-      });
-    }
-  });
-
-  // Re-attach once the channel is live (and again after any reconnect): the daemon backfills the
-  // transcript via session.history. Reopen is a reconnect, never a restart.
-  $effect(() => {
-    if ($connectionState === 'connected' && device) {
-      subscribe(sessionId);
-    }
-  });
-
-  function submitPrompt(text: string): void {
-    sendUserMessage(sessionId, text);
-  }
-
-  function onDecide(behavior: 'allow' | 'deny'): void {
-    const pending = pendingPermission(session);
-    if (!pending || pending.kind !== 'permission') return;
-    decide(
-      sessionId,
-      behavior === 'allow'
-        ? { requestId: pending.requestId, behavior: 'allow' }
-        : { requestId: pending.requestId, behavior: 'deny' },
-    );
-  }
-</script>
-
-<svelte:head>
-  <title>Session · telecode</title>
-</svelte:head>
-
-<TopBar {user} {device} connection={$connectionState} />
-
-<main id="main" class="view">
-  <div class="band hairline-b">
-    <a class="back" href="/">← Sessions</a>
-    <span class="sid">{sessionId.slice(0, 8)}</span>
-    <StatusDot tone={display.tone} label={display.label} pulse={display.pulse} aria-live="polite" />
-    {#if showControls}
-      <div class="controls" aria-label="Session controls">
-        {#if isBusy}
-          <Button variant="ghost" size="sm" disabled={!connected} onclick={() => onControl('interrupt')}>
-            Interrupt
-          </Button>
-        {/if}
-        {#if !isTerminal}
-          <Button variant="danger" size="sm" disabled={!connected} onclick={() => onControl('end')}>
-            End
-          </Button>
-        {/if}
-      </div>
-    {/if}
-  </div>
-
-  {#if !known}
-    <div class="placeholder">
-      <p class="eyebrow">{$connectionState === 'error' ? 'OFFLINE' : 'RECONNECTING…'}</p>
-      <p class="sub">
-        {$connectionState === 'error'
-          ? 'The channel is offline. It will restore when the connection returns.'
-          : 'Restoring this session’s transcript.'}
-      </p>
-    </div>
-  {:else}
-    {#if session.entries.length === 0}
-      <div class="placeholder">
-        <p class="eyebrow">{display.label}</p>
-        <p class="sub">No activity yet — send an instruction to steer this session.</p>
-      </div>
-    {:else}
-      <Transcript
-        entries={session.entries}
-        onapprove={() => onDecide('allow')}
-        onreject={() => onDecide('deny')}
-      />
-    {/if}
-    <div class="dock hairline-t">
-      <Composer
-        isBusy={isBusy}
-        submitLabel="Send"
-        placeholder="Send a follow-up instruction…"
-        onsend={submitPrompt}
-      />
-    </div>
-  {/if}
-</main>
-
-<style>
-  .view {
-    height: calc(100dvh - 48px);
-    width: 100%;
-    max-width: var(--width-content);
-    margin-inline: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-  .band {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-2) var(--space-4);
-    background: var(--surface);
-  }
-  .back {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: var(--radius-sm);
-  }
-  .back:hover {
-    color: var(--text);
-  }
-  .back:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--focus-ring);
-  }
-  .sid {
-    flex: 1;
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-  }
-  .controls {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
-  .placeholder {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    gap: var(--space-2);
-    padding: var(--space-8) var(--space-4);
-    overflow-y: auto;
-  }
-  .eyebrow {
-    margin: 0;
-    font-family: var(--font-mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    color: var(--text-muted);
-  }
-  .sub {
-    margin: 0;
-    max-width: 26rem;
-    color: var(--text-secondary);
-    font-size: var(--text-base);
-    line-height: var(--lh-base);
-  }
-  .dock {
-    padding: var(--space-3) var(--space-4);
-    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
-  }
-</style>
diff --git a/packages/ui/src/Drawer/Drawer.svelte b/packages/ui/src/Drawer/Drawer.svelte
new file mode 100644
index 0000000..3864be5
--- /dev/null
+++ b/packages/ui/src/Drawer/Drawer.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+
+  import { trapFocus } from '../actions';
+  import { IconButton } from '../IconButton';
+
+  /**
+   * A modal side panel (enterprise-ui §4/§7): slides in from the right on desktop, up as a bottom sheet on
+   * a phone. Focus is trapped while open (`use:trapFocus`) and restored on close; Escape and a backdrop
+   * tap dismiss; the page behind is scroll-locked. Transitions are gated on `prefers-reduced-motion` in the
+   * directive itself, since Svelte transitions run regardless of the CSS query. `open` is bindable so the
+   * parent owns the state; closing also fires `onclose`.
+   */
+  type Props = {
+    open?: boolean;
+    title: string;
+    onclose?: () => void;
+    children: Snippet;
+    footer?: Snippet;
+  };
+
+  let { open = $bindable(false), title, onclose, children, footer }: Props = $props();
+
+  function close(): void {
+    open = false;
+    onclose?.();
+  }
+
+  // Captured once at mount: Svelte's fly/fade take a static config object, so a reactive MediaQueryList
+  // would buy nothing without a custom transition factory. Re-evaluated each time the drawer remounts.
+  const reduce =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+  const mobile =
+    typeof window !== 'undefined' && window.matchMedia?.('(max-width: 640px)').matches === true;
+  const slide = reduce ? { duration: 0 } : mobile ? { y: 360, duration: 260 } : { x: 440, duration: 260 };
+  const dim = reduce ? { duration: 0 } : { duration: 180 };
+
+  // Lock the page behind the drawer so background scroll doesn't bleed through while it's open.
+  $effect(() => {
+    if (!open || typeof document === 'undefined') return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  });
+</script>
+
+{#if open}
+  <!-- The backdrop is a decorative dismiss target; keyboard users dismiss via Escape or the Close
+       button, so it carries no key handler by design. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div class="backdrop" transition:fade={dim} onclick={close} aria-hidden="true"></div>
+
+  <div
+    class="drawer"
+    role="dialog"
+    aria-modal="true"
+    aria-label={title}
+    use:trapFocus
+    transition:fly={slide}
+  >
+    <header class="dh hairline-b">
+      <h2 class="dtitle">{title}</h2>
+      <IconButton label="Close" variant="ghost" size="sm" onclick={close}>
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+          <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+    </header>
+
+    <div class="dbody">{@render children()}</div>
+
+    {#if footer}
+      <footer class="df hairline-t">{@render footer()}</footer>
+    {/if}
+  </div>
+{/if}
+
+<svelte:window onkeydown={(event) => open && event.key === 'Escape' && close()} />
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: rgba(0, 0, 0, 0.55);
+  }
+  .drawer {
+    position: fixed;
+    inset: 0 0 0 auto;
+    width: 440px;
+    max-width: 92vw;
+    z-index: var(--z-modal);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--surface-raised);
+    border-left: 1px solid var(--border-strong);
+    box-shadow: var(--shadow-lg);
+  }
+  .dh {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+  }
+  .dtitle {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .dbody {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--space-5);
+  }
+  .df {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
+  }
+
+  @media (max-width: 640px) {
+    .drawer {
+      inset: auto 0 0 0;
+      width: auto;
+      max-width: none;
+      height: 88dvh;
+      border-left: none;
+      border-top: 1px solid var(--border-strong);
+      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    }
+  }
+</style>
diff --git a/packages/ui/src/Drawer/index.ts b/packages/ui/src/Drawer/index.ts
new file mode 100644
index 0000000..2b5941b
--- /dev/null
+++ b/packages/ui/src/Drawer/index.ts
@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';
diff --git a/packages/ui/src/IconButton/IconButton.svelte b/packages/ui/src/IconButton/IconButton.svelte
new file mode 100644
index 0000000..acb84ab
--- /dev/null
+++ b/packages/ui/src/IconButton/IconButton.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  /**
+   * A square, icon-only control (back, pause, end, drawer-close, send) — the counterpart to {@link Button}
+   * for actions that read as a glyph. An accessible `label` is REQUIRED and becomes both `aria-label` and
+   * the native tooltip, since an icon carries no text (enterprise-ui §3). The icon rides in via `children`;
+   * `danger` tints the hover toward destructive (end session / revoke).
+   */
+  type Variant = 'outline' | 'ghost' | 'accent';
+  type Size = 'sm' | 'md' | 'lg';
+
+  type Props = Omit<HTMLButtonAttributes, 'aria-label'> & {
+    label: string;
+    variant?: Variant;
+    size?: Size;
+    danger?: boolean;
+    children: Snippet;
+  };
+
+  let {
+    label,
+    variant = 'outline',
+    size = 'md',
+    danger = false,
+    type = 'button',
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<button
+  class="icon-btn {variant} {size}"
+  class:danger
+  {type}
+  aria-label={label}
+  title={label}
+  {...rest}
+>
+  {@render children()}
+</button>
+
+<style>
+  .icon-btn {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .icon-btn:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--bg),
+      0 0 0 4px var(--focus-ring);
+  }
+  .icon-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes — dense control surface; ≥28px keeps the AA hit target while staying compact. */
+  .sm {
+    width: 28px;
+    height: 28px;
+  }
+  .md {
+    width: 32px;
+    height: 32px;
+  }
+  .lg {
+    width: 44px;
+    height: 44px;
+  }
+
+  .outline {
+    border-color: var(--border);
+    background: var(--surface);
+  }
+  .outline:hover:not(:disabled) {
+    background: var(--bg-muted);
+    color: var(--text);
+    border-color: var(--border-strong);
+  }
+
+  .ghost {
+    background: transparent;
+  }
+  .ghost:hover:not(:disabled) {
+    background: var(--bg-muted);
+    color: var(--text);
+  }
+
+  /* The one amber-filled icon control (the mobile launch FAB). */
+  .accent {
+    background: var(--accent);
+    color: var(--text-on-accent);
+  }
+  .accent:hover:not(:disabled) {
+    background: var(--accent-hover);
+  }
+
+  .icon-btn.danger:hover:not(:disabled) {
+    color: var(--danger);
+    border-color: var(--danger);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon-btn {
+      transition: none;
+    }
+  }
+</style>
diff --git a/packages/ui/src/IconButton/index.ts b/packages/ui/src/IconButton/index.ts
new file mode 100644
index 0000000..8ba804f
--- /dev/null
+++ b/packages/ui/src/IconButton/index.ts
@@ -0,0 +1 @@
+export { default as IconButton } from './IconButton.svelte';
diff --git a/packages/ui/src/Panel/Panel.svelte b/packages/ui/src/Panel/Panel.svelte
new file mode 100644
index 0000000..2c24811
--- /dev/null
+++ b/packages/ui/src/Panel/Panel.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  /**
+   * A welded panel (enterprise-ui §1): one bordered ink region with a hairline-divided header, the
+   * structural unit for the Devices and Settings surfaces and the session rail. Compose with hairline
+   * rows inside rather than nesting more bordered cards — one border level per region. `title` + `meta`
+   * render the default header; pass a `header` snippet to fully customize it. Body content flows via
+   * `children` with no inner padding, so callers choose full-bleed rows or a padded form.
+   */
+  type Props = HTMLAttributes<HTMLElement> & {
+    title?: string;
+    meta?: string;
+    header?: Snippet;
+    children: Snippet;
+  };
+
+  let { title, meta, header, children, ...rest }: Props = $props();
+</script>
+
+<section class="panel" {...rest}>
+  {#if header}
+    {@render header()}
+  {:else if title}
+    <header class="phead hairline-b">
+      <h2 class="title">{title}</h2>
+      {#if meta}<span class="meta">{meta}</span>{/if}
+    </header>
+  {/if}
+  {@render children()}
+</section>
+
+<style>
+  .panel {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+  .phead {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+  }
+  .title {
+    margin: 0;
+    font-size: var(--text-base);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--text);
+  }
+  .meta {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+</style>
diff --git a/packages/ui/src/Panel/index.ts b/packages/ui/src/Panel/index.ts
new file mode 100644
index 0000000..9dd7c9c
--- /dev/null
+++ b/packages/ui/src/Panel/index.ts
@@ -0,0 +1 @@
+export { default as Panel } from './Panel.svelte';
diff --git a/packages/ui/src/Pill/Pill.svelte b/packages/ui/src/Pill/Pill.svelte
new file mode 100644
index 0000000..a10bf13
--- /dev/null
+++ b/packages/ui/src/Pill/Pill.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import type { PillTone } from './types';
+
+  /**
+   * A bordered, pill-shaped label in monospace — the house "tag" for a session's current status, an
+   * inline marker like "PERMISSION REQUIRED", or a version chip. The accent tone is the scalpel
+   * (enterprise-ui §2): it tints the border + text amber for the one "awaiting / act now" signal, with an
+   * optional `dot` (pulsing on live states). Every other tone stays neutral hairline. State is never
+   * conveyed by color alone — the `label` always carries the meaning.
+   */
+  type Props = HTMLAttributes<HTMLSpanElement> & {
+    label: string;
+    tone?: PillTone;
+    dot?: boolean;
+    pulse?: boolean;
+  };
+
+  let { label, tone = 'neutral', dot = false, pulse = false, ...rest }: Props = $props();
+</script>
+
+<span class="pill" data-tone={tone} {...rest}>
+  {#if dot}<span class="dot" class:pulse aria-hidden="true"></span>{/if}
+  <span class="label">{label}</span>
+</span>
+
+<style>
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 3px var(--space-2);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-full);
+    background: transparent;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    line-height: 1;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    color: var(--text-secondary);
+  }
+  .label {
+    white-space: nowrap;
+  }
+  .dot {
+    width: 6px;
+    height: 6px;
+    flex: none;
+    border-radius: var(--radius-full);
+    background: currentcolor;
+  }
+
+  [data-tone='accent'] {
+    color: var(--accent);
+    border-color: var(--accent-line);
+    background: var(--accent-soft);
+  }
+  [data-tone='success'] {
+    color: var(--success);
+    border-color: color-mix(in srgb, var(--success) 45%, transparent);
+  }
+  [data-tone='warning'] {
+    color: var(--warning);
+    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
+  }
+  [data-tone='danger'] {
+    color: var(--danger);
+    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
+  }
+
+  .dot.pulse {
+    animation: pulse 1.6s var(--ease) infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .dot.pulse {
+      animation: none;
+    }
+  }
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+</style>
diff --git a/packages/ui/src/Pill/index.ts b/packages/ui/src/Pill/index.ts
new file mode 100644
index 0000000..77c20cc
--- /dev/null
+++ b/packages/ui/src/Pill/index.ts
@@ -0,0 +1,2 @@
+export { default as Pill } from './Pill.svelte';
+export type { PillTone } from './types';
diff --git a/packages/ui/src/Pill/types.ts b/packages/ui/src/Pill/types.ts
new file mode 100644
index 0000000..5df0c98
--- /dev/null
+++ b/packages/ui/src/Pill/types.ts
@@ -0,0 +1,2 @@
+/** The tones a {@link Pill} can take — accent is the scalpel; the rest are neutral/semantic. */
+export type PillTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
diff --git a/packages/ui/src/actions/index.ts b/packages/ui/src/actions/index.ts
new file mode 100644
index 0000000..85596f3
--- /dev/null
+++ b/packages/ui/src/actions/index.ts
@@ -0,0 +1 @@
+export { trapFocus } from './trapFocus';
diff --git a/packages/ui/src/actions/trapFocus.ts b/packages/ui/src/actions/trapFocus.ts
new file mode 100644
index 0000000..6e2e30b
--- /dev/null
+++ b/packages/ui/src/actions/trapFocus.ts
@@ -0,0 +1,43 @@
+/**
+ * Confine keyboard focus to a node while it's mounted (modal/drawer requirement, enterprise-ui §3/§4):
+ * Tab/Shift+Tab cycle within the node, focus moves to the first focusable element on mount, and the
+ * previously-focused element is restored on destroy. Pair with `{#if open}` so the action lives exactly
+ * as long as the overlay; Escape-to-close and backdrop dismissal are handled by the consumer.
+ */
+export function trapFocus(node: HTMLElement) {
+  const previous = document.activeElement as HTMLElement | null;
+  const selector =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),' +
+    'textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+  function focusable(): HTMLElement[] {
+    return Array.from(node.querySelectorAll<HTMLElement>(selector)).filter(
+      (el) => el.offsetParent !== null || el === document.activeElement,
+    );
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Tab') return;
+    const items = focusable();
+    if (items.length === 0) return;
+    const first = items[0]!;
+    const last = items[items.length - 1]!;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  node.addEventListener('keydown', onKeydown);
+  (focusable()[0] ?? node).focus();
+
+  return {
+    destroy(): void {
+      node.removeEventListener('keydown', onKeydown);
+      previous?.focus();
+    },
+  };
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 60b38b6..90d3fd2 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -4,4 +4,9 @@
  */
 export { BrandLogo } from './BrandLogo';
 export { Button } from './Button';
+export { Drawer } from './Drawer';
+export { IconButton } from './IconButton';
+export { Panel } from './Panel';
+export { Pill, type PillTone } from './Pill';
 export { StatusDot } from './StatusDot';
+export { trapFocus } from './actions';
diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css
index 436738f..40bf289 100644
--- a/packages/ui/src/tokens.css
+++ b/packages/ui/src/tokens.css
@@ -32,6 +32,7 @@
   --accent-hover: #f0b257;
   --accent-press: #d4922f;
   --accent-soft: #16140d;
+  --accent-line: rgba(232, 163, 61, 0.4);
   --accent-ring: #e8a33d;
 
   /* Status — muted, reserved meanings (dot + UPPERCASE MONO label, never a saturated pill) */
@@ -138,6 +139,7 @@
   --accent-hover: #a86f0a;
   --accent-press: #8a5b08;
   --accent-soft: #fbf2dd;
+  --accent-line: rgba(200, 134, 15, 0.4);
   --text-on-accent: #ffffff;
   --success: #3f9d76;
   --warning: #bb8a36;
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 430ec5d..11dfe33 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -3,7 +3,10 @@
   "compilerOptions": {
     "noEmit": true,
     "module": "esnext",
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    // The design system is browser-targeted (Svelte components + DOM `use:` actions), so it needs the
+    // DOM lib on top of the base ES libs.
+    "lib": ["ES2023", "DOM", "DOM.Iterable"]
   },
   "include": ["src"]
 }