feat: mobile responsive layout (#211)

## Summary

- **Collapsible sidebar**: sidebar collapses to a fixed overlay on
viewports below 768px, toggled via hamburger button or `b` keyboard
shortcut. On desktop, pressing `b` hides the sidebar and shows the
hamburger to reopen it.
- **Responsive header**: nav button labels hidden below 1024px (icons
only), nav buttons and project typeahead hidden below 768px,
export/publish buttons hidden on mobile.
- **Touch targets**: header buttons enlarged to 44px minimum on
`pointer: coarse` devices per Apple HIG.
- **Content overflow**: code blocks constrained to viewport width on
mobile, breadcrumb metadata (time, tokens, session ID) and status bar
stats hidden on narrow screens.
- **Reactive viewport tracking**: `matchMedia` listener in UIStore
tracks the 768px breakpoint, auto-closing sidebar on mobile and
auto-opening on desktop resize. Includes proper cleanup.
- **Accessibility**: sidebar backdrop uses a `<button>` with
`aria-label` instead of a plain div.

No new dependencies. No changes to the Go backend. Desktop layout (>=
1024px) is unchanged.

## Test plan

- [x] `cd frontend && npx vitest run` -- 740/740 tests pass (10 new
tests added)
- [x] `cd frontend && npx vite build` -- builds cleanly
- [x] `go vet -tags fts5 ./...` -- no issues
- [x] Browser devtools responsive mode at 375px (phone), 768px (tablet),
1024px, 1440px (desktop)
- [x] Press `b` to toggle sidebar at all widths; hamburger appears when
sidebar is closed
- [x] Resize browser across 768px boundary without reload (simulates
window manager retiling)
- [x] Select a session on mobile; sidebar auto-closes
- [x] All existing keyboard shortcuts (j/k/o/l/r/e/p/s/c/?) still work
- [x] No visual changes at >= 1024px (regression check)

---------

Co-authored-by: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 0xjjjjjj

frontend/src/App.svelte

@@ -72,6 +72,9 @@
         ui.pendingScrollSession = null;
       }
       if (id) {
+        if (ui.isMobileViewport) {
+          ui.closeSidebar();
+        }
         messages.loadSession(id);
         sessions.loadChildSessions(id);
         sync.watchSession(id, () => {

frontend/src/app.css

@@ -49,6 +49,8 @@
     "Fira Mono", Menlo, Consolas, monospace;
   --viewport-indicator: rgba(0, 0, 0, 0.08);
   --overlay-bg: rgba(0, 0, 0, 0.3);
+  --header-height: 40px;
+  --status-bar-height: 24px;
   color-scheme: light;
 }
 
@@ -87,6 +89,8 @@
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
   --viewport-indicator: rgba(255, 255, 255, 0.08);
   --overlay-bg: rgba(0, 0, 0, 0.6);
+  --header-height: 40px;
+  --status-bar-height: 24px;
   color-scheme: dark;
 }
 
@@ -319,4 +323,11 @@ mark.search-highlight--current {
   to {
     transform: rotate(360deg);
   }
-}
+}
+
+/* Enlarge header on touch devices so layout offsets stay in sync */
+@media (pointer: coarse) {
+  :root {
+    --header-height: 44px;
+  }
+}

frontend/src/lib/components/content/CodeBlock.svelte

@@ -51,4 +51,10 @@
   .code-content code {
     font-family: inherit;
   }
+
+  @media (max-width: 767px) {
+    .code-content {
+      max-width: calc(100vw - 32px);
+    }
+  }
 </style>

frontend/src/lib/components/layout/AppHeader.svelte

@@ -69,6 +69,24 @@
 
 <header class="header">
   <div class="header-left">
+    <button
+      class="hamburger"
+      onclick={() => {
+        if (ui.isMobileViewport && router.route !== "sessions") {
+          sessions.deselectSession();
+          router.navigate("sessions");
+          ui.sidebarOpen = true;
+        } else {
+          ui.toggleSidebar();
+        }
+      }}
+      title="Toggle sidebar (b)"
+      aria-label="Toggle sidebar"
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 7.75zm0 5a.75.75 0 01.75-.75h12.5a.75.75 0 010 1.5H1.75a.75.75 0 01-.75-.75z"/>
+      </svg>
+    </button>
     <button
       class="header-home"
       onclick={() => {
@@ -101,49 +119,53 @@
         router.navigate("sessions");
       }}
       title="Sessions"
+      aria-label="Sessions"
     >
       <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
         <path d="M0 1.5A1.5 1.5 0 011.5 0h2A1.5 1.5 0 015 1.5v2A1.5 1.5 0 013.5 5h-2A1.5 1.5 0 010 3.5v-2zm6 0A1.5 1.5 0 017.5 0h2A1.5 1.5 0 0111 1.5v2A1.5 1.5 0 019.5 5h-2A1.5 1.5 0 016 3.5v-2zm5 0A1.5 1.5 0 0112.5 0h2A1.5 1.5 0 0116 1.5v2A1.5 1.5 0 0114.5 5h-2A1.5 1.5 0 0111 3.5v-2zM0 7.5A1.5 1.5 0 011.5 6h2A1.5 1.5 0 015 7.5v2A1.5 1.5 0 013.5 11h-2A1.5 1.5 0 010 9.5v-2zm6 0A1.5 1.5 0 017.5 6h2A1.5 1.5 0 0111 7.5v2A1.5 1.5 0 019.5 11h-2A1.5 1.5 0 016 9.5v-2zm5 0A1.5 1.5 0 0112.5 6h2A1.5 1.5 0 0116 7.5v2a1.5 1.5 0 01-1.5 1.5h-2A1.5 1.5 0 0111 9.5v-2zM0 13.5A1.5 1.5 0 011.5 12h2A1.5 1.5 0 015 13.5v2A1.5 1.5 0 013.5 17h-2A1.5 1.5 0 010 15.5v-2zm6 0A1.5 1.5 0 017.5 12h2a1.5 1.5 0 011.5 1.5v2A1.5 1.5 0 019.5 17h-2A1.5 1.5 0 016 15.5v-2zm5 0a1.5 1.5 0 011.5-1.5h2a1.5 1.5 0 011.5 1.5v2a1.5 1.5 0 01-1.5 1.5h-2a1.5 1.5 0 01-1.5-1.5v-2z"/>
       </svg>
-      Sessions
+      <span class="nav-label">Sessions</span>
     </button>
 
     <button
       class="nav-btn"
       class:active={router.route === "pinned"}
       onclick={() => router.navigate("pinned")}
       title="Pinned Messages"
+      aria-label="Pinned"
     >
       <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
         <path d="M4.146.146A.5.5 0 014.5 0h7a.5.5 0 01.5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 01-.5.5H8.5v5.5a.5.5 0 01-1 0V10H3.5a.5.5 0 01-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 015 6.708V2.277a3 3 0 01-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 01.146-.354z"/>
       </svg>
-      Pinned
+      <span class="nav-label">Pinned</span>
     </button>
 
     <button
       class="nav-btn"
       class:active={router.route === "insights"}
       onclick={() => router.navigate("insights")}
       title="Insights"
+      aria-label="Insights"
     >
       <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
         <path d="M14.5 3a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-9a.5.5 0 01.5-.5h13zm-13-1A1.5 1.5 0 000 3.5v9A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 2h-13z"/>
         <path d="M3 5.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zM3 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 013 8zm0 2.5a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5z"/>
       </svg>
-      Insights
+      <span class="nav-label">Insights</span>
     </button>
 
     <button
       class="nav-btn"
       class:active={router.route === "trash"}
       onclick={() => router.navigate("trash")}
       title="Trash"
+      aria-label="Trash"
     >
       <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
         <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
         <path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H5.5l1-1h3l1 1h2.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
       </svg>
-      Trash
+      <span class="nav-label">Trash</span>
     </button>
   </div>
 
@@ -340,7 +362,7 @@
 
 <style>
   .header {
-    height: 40px;
+    height: var(--header-height, 40px);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -610,4 +632,57 @@
   .block-filter-reset:hover {
     color: var(--text-primary);
   }
+
+  .hamburger {
+    display: flex;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    transition: background 0.12s, color 0.12s;
+  }
+
+  .hamburger:hover {
+    background: var(--bg-surface-hover);
+    color: var(--text-primary);
+  }
+
+  @media (max-width: 1023px) {
+    .nav-label {
+      display: none;
+    }
+
+    .search-hint-text {
+      display: none;
+    }
+
+    .search-hint-kbd {
+      display: none;
+    }
+
+    .hamburger {
+      display: flex;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .header-left .nav-btn {
+      display: none;
+    }
+
+    .header-left :global(.typeahead) {
+      display: none;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .header-btn,
+    .nav-btn,
+    .hamburger {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
 </style>

frontend/src/lib/components/layout/SessionBreadcrumb.svelte

@@ -817,4 +817,22 @@
       transparent
     );
   }
+
+  @media (max-width: 767px) {
+    .breadcrumb-meta {
+      gap: 4px;
+    }
+
+    .session-time {
+      display: none;
+    }
+
+    .token-badge {
+      display: none;
+    }
+
+    .session-id {
+      display: none;
+    }
+  }
 </style>

frontend/src/lib/components/layout/StatusBar.svelte

@@ -108,7 +108,7 @@
 
 <style>
   .status-bar {
-    height: 24px;
+    height: var(--status-bar-height, 24px);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -207,4 +207,10 @@
     background: var(--bg-surface-hover);
     color: var(--text-secondary);
   }
+
+  @media (max-width: 767px) {
+    .status-left {
+      display: none;
+    }
+  }
 </style>