diff --git a/docs/web-ui.md b/docs/web-ui.md
index 1965c00..d89eb41 100644
--- a/docs/web-ui.md
+++ b/docs/web-ui.md
@@ -1,6 +1,6 @@
-# Web UI: how it works
+# Web UI architecture
 
-This document explains the built-in browser UI served by the gateway.
+This document explains the redesigned built-in browser UI served by the gateway.
 
 Source file:
 
@@ -10,148 +10,173 @@ Source file:
 
 ## Overview
 
-The Web UI is a single HTML page returned by `GET /` (when enabled).
+The web UI is still served from `GET /`, but now uses a reusable app shell:
 
-It is intentionally simple:
+- shared **header + sidebar** layout
+- responsive navigation (desktop sidebar + mobile sheet)
+- shadcn-style design tokens and component primitives
+- light/dark theme toggle with persisted preference
+- chat + conversations + API guide views
 
-- plain HTML/CSS/JS (no framework)
-- sends requests to `/v1/chat/stream`
-- renders streamed assistant text in real time
-- stores and reuses `conversationId` in `localStorage`
+The gateway API contract is unchanged. Chat requests still use `/v1/chat/stream`.
 
 ---
 
-## Availability
+## App shell and routes
 
-The UI route is controlled by `GATEWAY_ENABLE_WEB_UI`:
+The page is a small client-side multi-view app with three route panels:
 
-- `true` (default): `GET /` returns UI
+- `#/chat` (default)
+- `#/conversations`
+- `#/api`
+
+Routing is hash-based and keeps the shell consistent across views:
+
+- **Sidebar**: primary navigation/actions
+- **Top header**: current page title, status badge, theme toggle, mobile menu trigger
+- **Main content**: route panel content
+
+### Shared shell behavior
+
+- Desktop (`>960px`): sidebar is always visible
+- Mobile (`<=960px`): sidebar is replaced with a sheet/drawer opened from header
+- Escape key and backdrop click close the mobile sheet
+
+---
+
+## UI primitives and design tokens
+
+The redesigned UI follows shadcn-style structure and naming:
+
+- card surfaces
+- buttons (`default`, `secondary`, `outline`, `ghost`)
+- inputs and textarea
+- badge/status pill
+- separator
+- sheet/drawer-style mobile nav
+
+Design tokens are centralized as CSS variables on `:root` and overridden for dark mode via `[data-theme="dark"]`.
+
+Key token families:
+
+- `--background`, `--foreground`
+- `--card`, `--card-foreground`
+- `--primary`, `--secondary`, `--accent`
+- `--muted`, `--muted-foreground`
+- `--border`, `--input`, `--ring`
+- sidebar-specific tokens
+
+---
+
+## Theme system (light/dark)
+
+### Behavior
+
+- Initial theme defaults to system preference (`prefers-color-scheme`) if no saved preference exists.
+- User can toggle theme from the header button.
+- Selected theme is persisted in `localStorage` under:
+  - `pi_gateway_theme`
+- Theme applies by setting:
+  - `document.documentElement.dataset.theme`
+  - `document.documentElement.style.colorScheme`
+
+### Persistence and system changes
+
+- If user has explicitly chosen a theme, that preference wins.
+- If no explicit preference exists, system theme changes are applied live.
+
+---
+
+## Chat view
+
+The Chat panel contains:
+
+1. **Session settings card**
+   - Conversation ID input (`#conversationId`)
+   - optional bearer token input (`#token`)
+   - new session and refresh conversations actions
+2. **Messages card**
+   - streaming message log (`#messages`)
+   - clear visible messages action
+3. **Composer card**
+   - prompt textarea (`#message`)
+   - send action (`#send`)
+   - keyboard shortcut hint
+
+### Streaming behavior
+
+- Sends `POST /v1/chat/stream`
+- Parses SSE incrementally
+- Handles key events:
+  - `assistant_text_delta`
+  - `assistant_thinking_delta`
+  - `tool_start`
+  - `done`
+  - `error`
+- Saves `conversationId` from `done` into:
+  - input field
+  - localStorage key `pi_gateway_conversation_id`
+
+---
+
+## Conversations view
+
+The Conversations panel reads `GET /v1/conversations` and renders:
+
+- conversation id
+- created/updated timestamps
+- loaded/streaming indicators
+
+Per-conversation actions:
+
+- **Use in chat**: sets `#conversationId`, persists it, routes back to chat
+- **Delete**: calls `DELETE /v1/conversations/:id`
+
+---
+
+## API guide view
+
+A lightweight route that summarizes core gateway endpoints used by adapters and the web UI:
+
+- `/v1/chat/stream`
+- `/v1/chat`
+- `/v1/conversations`
+- `/v1/adapters/chat/stream`
+
+---
+
+## Accessibility notes
+
+The redesigned UI includes:
+
+- keyboard-focus-visible styles using `--ring`
+- semantic regions (`nav`, `header`, `main`, `section`)
+- `aria-current` on active nav item
+- mobile sheet dialog semantics (`role="dialog"`, `aria-modal="true"`)
+- message log with `role="log"` + `aria-live="polite"`
+- keyboard send shortcut (`Cmd/Ctrl + Enter`)
+
+---
+
+## Availability and auth
+
+The route is controlled by `GATEWAY_ENABLE_WEB_UI`:
+
+- `true` (default): `GET /` serves UI
 - `false`: `GET /` returns `404` with `{ "error": "Web UI disabled" }`
 
-If `GATEWAY_AUTH_TOKEN` is enabled, `GET /` also requires an `Authorization` header, because auth is global in the gateway.
+If `GATEWAY_AUTH_TOKEN` is set, auth is still global, so `GET /` also requires bearer auth.
 
 ---
 
-## UI sections
-
-### 1) Session/header card
-
-- **Conversation ID input** (`#conversationId`)
-  - if empty, server auto-creates one during first message
-  - persisted locally under `pi_gateway_conversation_id`
-- **Auth token input** (`#token`)
-  - optional bearer token included in API requests from the page
-  - this affects `fetch` calls only; it does not add auth headers to the initial page load
-
-### 2) Messages card
-
-- container `#messages`
-- each message is appended as a `.msg.user` or `.msg.assistant` block
-- text is rendered as plain text (`textContent`), not Markdown/HTML
-
-### 3) Composer card
-
-- textarea `#message`
-- status text `#status`
-- buttons:
-  - `Send`
-  - `New session`
-
----
-
-## Local state
-
-The page keeps only minimal browser-side state:
-
-- `conversationId` in input + local storage
-- rendered message list in DOM
-- current request state via button disabled/enabled
-
-Storage key:
+## Storage keys used by the UI
 
 - `pi_gateway_conversation_id`
-
-On load, if this key exists, it pre-fills the conversation input.
+- `pi_gateway_theme`
 
 ---
 
-## Send flow
-
-When user presses **Send** (or Cmd/Ctrl + Enter):
-
-1. Trim textarea value; ignore empty input.
-2. Disable `Send` and `New session` buttons.
-3. Append user message bubble.
-4. Append empty assistant bubble.
-5. Build payload:
-   - required: `message`
-   - optional: `conversationId` (if input non-empty)
-6. POST to `/v1/chat/stream` with JSON body.
-7. Parse SSE stream incrementally.
-8. Update assistant bubble and status based on events.
-9. Re-enable buttons when request finishes/fails.
-
----
-
-## SSE event handling in UI
-
-Handled events:
-
-- `assistant_text_delta`
-  - appends `data.delta` to assistant message bubble
-- `done`
-  - reads `data.conversationId`
-  - updates conversation input
-  - writes `pi_gateway_conversation_id`
-  - status becomes `Done • conversation <id>`
-- `error`
-  - status becomes error text
-  - writes fallback error into assistant bubble if empty
-
-Other event types are currently ignored by the UI.
-
----
-
-## New session button behavior
-
-Clicking **New session**:
-
-- does nothing if a request is currently streaming (`Send` disabled)
-- clears conversation ID input
-- removes `pi_gateway_conversation_id` from local storage
-- clears rendered message list
-- sets status to `New session ready`
-- focuses the message textarea
-
-This starts a fresh client-side chat thread. The next send will create a new conversation on the server.
-
----
-
-## Keyboard shortcut
-
-In the message textarea:
-
-- `Cmd + Enter` (macOS) or `Ctrl + Enter` (Windows/Linux)
-- triggers the same send flow as the Send button
-
----
-
-## Limitations
-
-Current UI is intentionally minimal:
-
-- no server-side message history loading
-- no cancel/abort button for in-flight response
-- no rendering for tool events/thinking events
-- no Markdown formatting
-- no multi-conversation sidebar
-
-It is best used as a lightweight test/debug interface.
-
----
-
-## Related API docs
-
-For full gateway/API details, see:
+## Related docs
 
 - `docs/gateway.md`
+- `docs/channels.md`
diff --git a/src/gateway/web-ui.ts b/src/gateway/web-ui.ts
index a54ad06..01b9c10 100644
--- a/src/gateway/web-ui.ts
+++ b/src/gateway/web-ui.ts
@@ -4,314 +4,1401 @@ export function getWebUiHtml(): string {
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Pi Gateway Chat</title>
+    <title>MoA Agent Gateway</title>
+    <script>
+      (function () {
+        var storageKey = "pi_gateway_theme";
+        var fallbackTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        var storedTheme = null;
+
+        try {
+          storedTheme = localStorage.getItem(storageKey);
+        } catch {
+          storedTheme = null;
+        }
+
+        var theme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : fallbackTheme;
+        document.documentElement.setAttribute("data-theme", theme);
+        document.documentElement.style.colorScheme = theme;
+      })();
+    </script>
     <style>
       :root {
-        color-scheme: dark;
-        --bg: #0f1115;
-        --card: #171a21;
-        --muted: #9da6b7;
-        --accent: #7cc6ff;
-        --user: #1b3146;
-        --assistant: #1d2a1e;
-        --border: #283042;
+        --radius: 0.75rem;
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 221.2 83.2% 53.3%;
+        --sidebar: 210 40% 98%;
+        --sidebar-foreground: 222.2 47.4% 11.2%;
+        --sidebar-accent: 210 40% 96.1%;
+        --sidebar-border: 214.3 31.8% 91.4%;
+        --message-user: 214 100% 96%;
+        --message-assistant: 160 30% 96%;
       }
 
-      * { box-sizing: border-box; }
+      :root[data-theme="dark"] {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 217.2 91.2% 59.8%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 224.3 76.3% 48%;
+        --sidebar: 222.2 70% 6.5%;
+        --sidebar-foreground: 210 40% 98%;
+        --sidebar-accent: 217.2 32.6% 17.5%;
+        --sidebar-border: 217.2 32.6% 17.5%;
+        --message-user: 214 45% 20%;
+        --message-assistant: 146 36% 15%;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
       body {
         margin: 0;
-        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-        background: var(--bg);
-        color: #f6f8ff;
+        min-height: 100%;
       }
 
-      main {
-        max-width: 960px;
-        margin: 0 auto;
-        padding: 20px;
-        display: grid;
-        gap: 16px;
-      }
-
-      .card {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: 10px;
-        padding: 14px;
-      }
-
-      label {
-        display: block;
-        font-size: 12px;
-        margin-bottom: 6px;
-        color: var(--muted);
-      }
-
-      input, textarea, button {
-        width: 100%;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        background: #10131b;
-        color: #f6f8ff;
-        padding: 10px;
-        font: inherit;
-      }
-
-      textarea {
-        min-height: 90px;
-        resize: vertical;
-      }
-
-      .grid {
-        display: grid;
-        gap: 10px;
-      }
-
-      .actions {
-        display: grid;
-        grid-template-columns: 1fr auto auto;
-        gap: 10px;
-        align-items: center;
-      }
-
-      button {
-        background: #24415f;
-        cursor: pointer;
-        width: auto;
-        padding: 10px 18px;
-      }
-
-      button.secondary {
-        background: #1f2734;
-      }
-
-      button:disabled {
-        opacity: 0.6;
-        cursor: default;
-      }
-
-      #messages {
-        display: grid;
-        gap: 8px;
-        max-height: 65vh;
-        overflow: auto;
-      }
-
-      .msg {
-        white-space: pre-wrap;
-        border-radius: 8px;
-        padding: 10px;
-        border: 1px solid var(--border);
-      }
-
-      .msg.user { background: var(--user); }
-      .msg.assistant { background: var(--assistant); }
-      .meta {
-        color: var(--muted);
-        font-size: 12px;
+      body {
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+        background: hsl(var(--background));
+        color: hsl(var(--foreground));
+        line-height: 1.4;
       }
 
       code {
-        background: #0b0f14;
-        padding: 1px 6px;
-        border-radius: 5px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      }
+
+      .app-shell {
+        min-height: 100vh;
+        display: grid;
+        grid-template-columns: 16rem 1fr;
+      }
+
+      .sidebar {
+        border-right: 1px solid hsl(var(--sidebar-border));
+        background: hsl(var(--sidebar));
+        color: hsl(var(--sidebar-foreground));
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .sidebar-title {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 600;
+      }
+
+      .sidebar-subtitle {
+        margin: 0.35rem 0 0;
+        font-size: 0.8rem;
+        color: hsl(var(--muted-foreground));
+      }
+
+      .separator {
+        height: 1px;
+        width: 100%;
+        background: hsl(var(--sidebar-border));
+      }
+
+      .sidebar-nav {
+        display: grid;
+        gap: 0.35rem;
+      }
+
+      .nav-item {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: 0.6rem;
+        border: 1px solid transparent;
+        border-radius: calc(var(--radius) - 0.1rem);
+        background: transparent;
+        color: inherit;
+        padding: 0.55rem 0.65rem;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .nav-item:hover {
+        background: hsl(var(--sidebar-accent));
+      }
+
+      .nav-item[aria-current="page"] {
+        background: hsl(var(--sidebar-accent));
+        border-color: hsl(var(--sidebar-border));
+        font-weight: 600;
+      }
+
+      .sidebar-footer {
+        margin-top: auto;
+        display: grid;
+        gap: 0.55rem;
+      }
+
+      .main-content {
+        min-width: 0;
+        display: grid;
+        grid-template-rows: auto 1fr;
+      }
+
+      .topbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: hsl(var(--background) / 0.92);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid hsl(var(--border));
+        padding: 0.85rem 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+      }
+
+      .topbar-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        min-width: 0;
+      }
+
+      .topbar-title-group {
+        min-width: 0;
+      }
+
+      .overline {
+        font-size: 0.75rem;
+        color: hsl(var(--muted-foreground));
+        margin: 0;
+      }
+
+      .page-title {
+        margin: 0.15rem 0 0;
+        font-size: 1.15rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .topbar-actions {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .page-stack {
+        padding: 1rem;
+        display: grid;
+      }
+
+      .page-panel {
+        display: none;
+      }
+
+      .page-panel.is-active {
+        display: grid;
+        gap: 1rem;
+      }
+
+      .chat-layout {
+        display: grid;
+        grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
+        gap: 1rem;
+        align-items: start;
+      }
+
+      .chat-main {
+        display: grid;
+        gap: 1rem;
+      }
+
+      .card {
+        border: 1px solid hsl(var(--border));
+        border-radius: var(--radius);
+        background: hsl(var(--card));
+        color: hsl(var(--card-foreground));
+        padding: 1rem;
+      }
+
+      .card-title {
+        margin: 0;
+        font-size: 1rem;
+      }
+
+      .card-description {
+        margin: 0.5rem 0 0;
+        color: hsl(var(--muted-foreground));
+        font-size: 0.9rem;
+      }
+
+      .stack {
+        display: grid;
+        gap: 0.8rem;
+      }
+
+      .field {
+        display: grid;
+        gap: 0.45rem;
+      }
+
+      label {
+        font-size: 0.84rem;
+        color: hsl(var(--muted-foreground));
+      }
+
+      .input,
+      .textarea {
+        width: 100%;
+        border: 1px solid hsl(var(--input));
+        border-radius: calc(var(--radius) - 0.2rem);
+        background: hsl(var(--background));
+        color: hsl(var(--foreground));
+        padding: 0.55rem 0.7rem;
+        font: inherit;
+      }
+
+      .textarea {
+        min-height: 7rem;
+        resize: vertical;
+      }
+
+      .input::placeholder,
+      .textarea::placeholder {
+        color: hsl(var(--muted-foreground));
+      }
+
+      .input:focus,
+      .textarea:focus,
+      .button:focus,
+      .nav-item:focus {
+        outline: none;
+      }
+
+      .input:focus-visible,
+      .textarea:focus-visible,
+      .button:focus-visible,
+      .nav-item:focus-visible,
+      .conversation-action:focus-visible {
+        box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
+      }
+
+      .button {
+        border: 1px solid transparent;
+        border-radius: calc(var(--radius) - 0.2rem);
+        font: inherit;
+        font-weight: 500;
+        cursor: pointer;
+        padding: 0.5rem 0.8rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.45rem;
+        background: hsl(var(--primary));
+        color: hsl(var(--primary-foreground));
+      }
+
+      .button:hover {
+        filter: brightness(0.95);
+      }
+
+      .button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .button-secondary {
+        background: hsl(var(--secondary));
+        color: hsl(var(--secondary-foreground));
+      }
+
+      .button-outline {
+        border-color: hsl(var(--border));
+        background: transparent;
+        color: hsl(var(--foreground));
+      }
+
+      .button-ghost {
+        background: transparent;
+        color: hsl(var(--foreground));
+      }
+
+      .button-icon {
+        width: 2.2rem;
+        height: 2.2rem;
+        padding: 0;
+      }
+
+      .menu-trigger {
+        display: none;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.65rem;
+      }
+
+      .row-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .hint {
+        margin: 0;
+        font-size: 0.8rem;
+        color: hsl(var(--muted-foreground));
+      }
+
+      .messages {
+        border: 1px solid hsl(var(--border));
+        border-radius: calc(var(--radius) - 0.2rem);
+        background: hsl(var(--muted) / 0.35);
+        min-height: 15rem;
+        max-height: 58vh;
+        overflow-y: auto;
+        padding: 0.7rem;
+        display: grid;
+        align-content: start;
+        gap: 0.65rem;
+      }
+
+      .message {
+        border: 1px solid hsl(var(--border));
+        border-radius: calc(var(--radius) - 0.2rem);
+        padding: 0.65rem;
+        display: grid;
+        gap: 0.35rem;
+      }
+
+      .message.user {
+        background: hsl(var(--message-user));
+      }
+
+      .message.assistant {
+        background: hsl(var(--message-assistant));
+      }
+
+      .message-meta {
+        font-size: 0.76rem;
+        color: hsl(var(--muted-foreground));
+        display: flex;
+        justify-content: space-between;
+        gap: 0.4rem;
+      }
+
+      .message-body {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .composer-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.7rem;
+      }
+
+      .badge {
+        border-radius: 999px;
+        padding: 0.25rem 0.65rem;
+        font-size: 0.78rem;
+        border: 1px solid hsl(var(--border));
+        background: hsl(var(--secondary));
+        color: hsl(var(--secondary-foreground));
+      }
+
+      .badge[data-state="streaming"] {
+        background: hsl(var(--primary));
+        color: hsl(var(--primary-foreground));
+      }
+
+      .badge[data-state="success"] {
+        background: hsl(142 50% 35%);
+        color: hsl(0 0% 100%);
+        border-color: transparent;
+      }
+
+      .badge[data-state="error"] {
+        background: hsl(var(--destructive));
+        color: hsl(var(--destructive-foreground));
+        border-color: transparent;
+      }
+
+      .conversation-list {
+        display: grid;
+        gap: 0.7rem;
+      }
+
+      .conversation-item {
+        border: 1px solid hsl(var(--border));
+        border-radius: calc(var(--radius) - 0.2rem);
+        padding: 0.7rem;
+        background: hsl(var(--card));
+      }
+
+      .conversation-id {
+        margin: 0;
+        font-size: 0.9rem;
+        overflow-wrap: anywhere;
+      }
+
+      .conversation-meta {
+        margin: 0.35rem 0 0;
+        font-size: 0.8rem;
+        color: hsl(var(--muted-foreground));
+      }
+
+      .conversation-actions {
+        margin-top: 0.55rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.45rem;
+      }
+
+      .conversation-action {
+        border: 1px solid hsl(var(--border));
+        background: transparent;
+        color: hsl(var(--foreground));
+        border-radius: calc(var(--radius) - 0.25rem);
+        padding: 0.35rem 0.6rem;
+        font: inherit;
+        cursor: pointer;
+      }
+
+      .conversation-action:hover {
+        background: hsl(var(--accent));
+      }
+
+      .api-grid {
+        display: grid;
+        gap: 0.7rem;
+      }
+
+      .api-item {
+        border: 1px solid hsl(var(--border));
+        border-radius: calc(var(--radius) - 0.2rem);
+        padding: 0.75rem;
+        background: hsl(var(--muted) / 0.35);
+      }
+
+      .api-item p {
+        margin: 0.3rem 0 0;
+        color: hsl(var(--muted-foreground));
+        font-size: 0.88rem;
+      }
+
+      .mobile-sheet-backdrop {
+        position: fixed;
+        inset: 0;
+        background: hsl(0 0% 0% / 0.45);
+      }
+
+      .mobile-sheet {
+        position: fixed;
+        inset: 0 auto 0 0;
+        width: min(18rem, 88vw);
+        background: hsl(var(--sidebar));
+        border-right: 1px solid hsl(var(--sidebar-border));
+        color: hsl(var(--sidebar-foreground));
+        padding: 1rem;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: 1rem;
+      }
+
+      .mobile-sheet[hidden],
+      .mobile-sheet-backdrop[hidden] {
+        display: none;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      @media (max-width: 960px) {
+        .app-shell {
+          grid-template-columns: 1fr;
+        }
+
+        .sidebar {
+          display: none;
+        }
+
+        .menu-trigger {
+          display: inline-flex;
+        }
+
+        .chat-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (max-width: 640px) {
+        .topbar {
+          padding: 0.75rem;
+        }
+
+        .page-stack {
+          padding: 0.75rem;
+        }
+
+        .card {
+          padding: 0.85rem;
+        }
+
+        .composer-actions {
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        .topbar-actions {
+          gap: 0.35rem;
+        }
+
+        .status-pill {
+          display: none;
+        }
       }
     </style>
   </head>
   <body>
-    <main>
-      <section class="card grid">
-        <div class="meta">Gateway endpoint: <code>/v1/chat/stream</code></div>
+    <div class="app-shell">
+      <aside class="sidebar" aria-label="Desktop sidebar navigation">
         <div>
-          <label for="conversationId">Conversation ID (reuse this across clients to continue context)</label>
-          <input id="conversationId" placeholder="auto-generated when empty" />
+          <h1 class="sidebar-title">MoA Agent Gateway</h1>
+          <p class="sidebar-subtitle">Shared shell • shadcn-style primitives</p>
         </div>
-        <div>
-          <label for="token">Auth token (optional; only if gateway enforces Bearer auth)</label>
-          <input id="token" type="password" placeholder="Bearer token" />
-        </div>
-      </section>
 
-      <section id="messages" class="card"></section>
+        <div class="separator"></div>
 
-      <section class="card grid">
-        <div>
-          <label for="message">Message</label>
-          <textarea id="message" placeholder="Ask the coding agent..."></textarea>
+        <nav class="sidebar-nav" aria-label="Primary">
+          <button type="button" class="nav-item" data-route-button data-route="chat" aria-current="page">
+            <span aria-hidden="true">💬</span>
+            <span>Chat</span>
+          </button>
+          <button type="button" class="nav-item" data-route-button data-route="conversations">
+            <span aria-hidden="true">🧵</span>
+            <span>Conversations</span>
+          </button>
+          <button type="button" class="nav-item" data-route-button data-route="api">
+            <span aria-hidden="true">🧪</span>
+            <span>API guide</span>
+          </button>
+        </nav>
+
+        <div class="sidebar-footer">
+          <button id="newSessionSidebar" type="button" class="button button-secondary">New session</button>
+          <p class="hint">Conversation context persists while you reuse the same conversation ID.</p>
         </div>
-        <div class="actions">
-          <div class="meta" id="status">Idle</div>
-          <button id="newSession" type="button" class="secondary">New session</button>
-          <button id="send">Send</button>
-        </div>
-      </section>
-    </main>
+      </aside>
+
+      <div class="main-content">
+        <header class="topbar">
+          <div class="topbar-left">
+            <button
+              id="menuButton"
+              type="button"
+              class="button button-ghost button-icon menu-trigger"
+              aria-haspopup="dialog"
+              aria-expanded="false"
+              aria-controls="mobileSheet"
+            >
+              ☰
+              <span class="sr-only">Open navigation</span>
+            </button>
+            <div class="topbar-title-group">
+              <p class="overline">Gateway endpoint: <code>/v1/chat/stream</code></p>
+              <h2 id="pageTitle" class="page-title">Chat</h2>
+            </div>
+          </div>
+
+          <div class="topbar-actions">
+            <span id="status" class="badge status-pill" data-state="idle">Idle</span>
+            <button id="themeToggle" type="button" class="button button-outline" aria-label="Toggle color theme">
+              Toggle theme
+            </button>
+          </div>
+        </header>
+
+        <main class="page-stack">
+          <section class="page-panel is-active" data-route-panel="chat" aria-labelledby="pageTitle">
+            <div class="chat-layout">
+              <article class="card stack">
+                <div>
+                  <h3 class="card-title">Session settings</h3>
+                  <p class="card-description">Use a stable conversation ID to continue context across tabs and clients.</p>
+                </div>
+
+                <div class="field">
+                  <label for="conversationId">Conversation ID</label>
+                  <input id="conversationId" class="input" placeholder="auto-generated when empty" />
+                </div>
+
+                <div class="field">
+                  <label for="token">Auth token (optional)</label>
+                  <input id="token" type="password" class="input" autocomplete="off" placeholder="Bearer token" />
+                </div>
+
+                <div class="row-wrap">
+                  <button id="newSession" type="button" class="button button-secondary">New session</button>
+                  <button id="refreshConversationsInline" type="button" class="button button-outline">Refresh conversations</button>
+                </div>
+
+                <p class="hint">The page uses Server-Sent Events and keeps the API contract unchanged.</p>
+              </article>
+
+              <div class="chat-main">
+                <article class="card stack">
+                  <div class="row">
+                    <h3 class="card-title">Messages</h3>
+                    <button id="clearMessages" type="button" class="button button-ghost">Clear visible messages</button>
+                  </div>
+                  <div id="messages" class="messages" role="log" aria-live="polite" aria-label="Chat messages"></div>
+                </article>
+
+                <article class="card stack">
+                  <div class="field">
+                    <label for="message">Message</label>
+                    <textarea id="message" class="textarea" placeholder="Ask the coding agent..."></textarea>
+                  </div>
+                  <div class="composer-actions">
+                    <p class="hint">Press Cmd/Ctrl + Enter to send</p>
+                    <button id="send" type="button" class="button">Send message</button>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </section>
+
+          <section class="page-panel" data-route-panel="conversations" aria-labelledby="pageTitle">
+            <article class="card stack">
+              <div class="row">
+                <h3 class="card-title">Conversations</h3>
+                <button id="refreshConversations" type="button" class="button button-secondary">Refresh</button>
+              </div>
+              <p class="card-description">Data from <code>GET /v1/conversations</code>. Choose a conversation to continue in chat.</p>
+              <div id="conversationList" class="conversation-list"></div>
+            </article>
+          </section>
+
+          <section class="page-panel" data-route-panel="api" aria-labelledby="pageTitle">
+            <article class="card stack">
+              <div>
+                <h3 class="card-title">Gateway API quick guide</h3>
+                <p class="card-description">The redesigned UI still uses the same gateway endpoints.</p>
+              </div>
+
+              <div class="api-grid">
+                <div class="api-item">
+                  <code>POST /v1/chat/stream</code>
+                  <p>Streaming SSE chat endpoint used by this UI.</p>
+                </div>
+                <div class="api-item">
+                  <code>POST /v1/chat</code>
+                  <p>Non-streaming JSON response for automation scripts.</p>
+                </div>
+                <div class="api-item">
+                  <code>GET /v1/conversations</code>
+                  <p>List all known conversations and their state.</p>
+                </div>
+                <div class="api-item">
+                  <code>POST /v1/adapters/chat/stream</code>
+                  <p>Adapter-friendly streaming endpoint for Slack/Matrix/custom bots.</p>
+                </div>
+              </div>
+
+              <p class="hint">Tip: open the Conversations page to reuse or clean up session IDs.</p>
+            </article>
+          </section>
+        </main>
+      </div>
+    </div>
+
+    <div id="mobileSheetBackdrop" class="mobile-sheet-backdrop" hidden></div>
+    <aside id="mobileSheet" class="mobile-sheet" role="dialog" aria-modal="true" aria-label="Navigation menu" hidden>
+      <div class="row">
+        <strong>Navigation</strong>
+        <button id="closeSheetButton" type="button" class="button button-ghost button-icon" aria-label="Close navigation">
+          ✕
+        </button>
+      </div>
+
+      <nav class="sidebar-nav" aria-label="Mobile primary">
+        <button type="button" class="nav-item" data-route-button data-route="chat" aria-current="page">
+          <span aria-hidden="true">💬</span>
+          <span>Chat</span>
+        </button>
+        <button type="button" class="nav-item" data-route-button data-route="conversations">
+          <span aria-hidden="true">🧵</span>
+          <span>Conversations</span>
+        </button>
+        <button type="button" class="nav-item" data-route-button data-route="api">
+          <span aria-hidden="true">🧪</span>
+          <span>API guide</span>
+        </button>
+      </nav>
+
+      <button id="newSessionMobile" type="button" class="button button-secondary">New session</button>
+    </aside>
 
     <script>
-      const conversationInput = document.getElementById("conversationId");
-      const tokenInput = document.getElementById("token");
-      const messageInput = document.getElementById("message");
-      const sendButton = document.getElementById("send");
-      const newSessionButton = document.getElementById("newSession");
-      const messagesEl = document.getElementById("messages");
-      const statusEl = document.getElementById("status");
+      (function () {
+        var STORAGE_KEYS = {
+          conversationId: "pi_gateway_conversation_id",
+          theme: "pi_gateway_theme",
+        };
 
-      const storedConversationId = localStorage.getItem("pi_gateway_conversation_id");
-      if (storedConversationId) {
-        conversationInput.value = storedConversationId;
-      }
+        var ROUTES = {
+          chat: { title: "Chat" },
+          conversations: { title: "Conversations" },
+          api: { title: "API guide" },
+        };
 
-      function setStatus(text) {
-        statusEl.textContent = text;
-      }
+        var conversationInput = document.getElementById("conversationId");
+        var tokenInput = document.getElementById("token");
+        var messageInput = document.getElementById("message");
+        var sendButton = document.getElementById("send");
+        var newSessionButton = document.getElementById("newSession");
+        var newSessionSidebarButton = document.getElementById("newSessionSidebar");
+        var newSessionMobileButton = document.getElementById("newSessionMobile");
+        var clearMessagesButton = document.getElementById("clearMessages");
+        var refreshConversationsButton = document.getElementById("refreshConversations");
+        var refreshConversationsInlineButton = document.getElementById("refreshConversationsInline");
+        var messagesEl = document.getElementById("messages");
+        var statusEl = document.getElementById("status");
+        var pageTitleEl = document.getElementById("pageTitle");
+        var conversationListEl = document.getElementById("conversationList");
+        var routeButtons = Array.from(document.querySelectorAll("[data-route-button]"));
+        var routePanels = Array.from(document.querySelectorAll("[data-route-panel]"));
 
-      function addMessage(role, text = "") {
-        const el = document.createElement("div");
-        el.className = "msg " + role;
-        el.textContent = text;
-        messagesEl.appendChild(el);
-        messagesEl.scrollTop = messagesEl.scrollHeight;
-        return el;
-      }
+        var themeToggleButton = document.getElementById("themeToggle");
+        var menuButton = document.getElementById("menuButton");
+        var mobileSheet = document.getElementById("mobileSheet");
+        var mobileSheetBackdrop = document.getElementById("mobileSheetBackdrop");
+        var closeSheetButton = document.getElementById("closeSheetButton");
 
-      function startNewSession() {
-        if (sendButton.disabled) {
-          return;
-        }
+        var currentRoute = "chat";
+        var isSending = false;
+        var hasStoredTheme = false;
 
-        conversationInput.value = "";
-        localStorage.removeItem("pi_gateway_conversation_id");
-        messagesEl.textContent = "";
-        setStatus("New session ready");
-        messageInput.focus();
-      }
-
-      async function consumeSse(body, onEvent) {
-        const reader = body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = "";
-
-        while (true) {
-          const { value, done } = await reader.read();
-          if (done) {
-            break;
-          }
-
-          buffer += decoder.decode(value, { stream: true });
-
-          while (true) {
-            const boundary = buffer.indexOf("\\n\\n");
-            if (boundary === -1) {
-              break;
-            }
-
-            const raw = buffer.slice(0, boundary);
-            buffer = buffer.slice(boundary + 2);
-
-            let eventName = "message";
-            const dataLines = [];
-
-            for (const line of raw.split("\\n")) {
-              if (line.startsWith("event:")) {
-                eventName = line.slice(6).trim();
-              } else if (line.startsWith("data:")) {
-                dataLines.push(line.slice(5).trim());
-              }
-            }
-
-            const payloadText = dataLines.join("\\n");
-            const payload = payloadText ? JSON.parse(payloadText) : null;
-            onEvent(eventName, payload);
+        function safeLocalStorageGet(key) {
+          try {
+            return localStorage.getItem(key);
+          } catch {
+            return null;
           }
         }
-      }
 
-      async function sendMessage() {
-        const message = messageInput.value.trim();
-        if (!message) {
-          return;
+        function safeLocalStorageSet(key, value) {
+          try {
+            localStorage.setItem(key, value);
+          } catch {
+            // ignore storage errors in restricted environments
+          }
         }
 
-        sendButton.disabled = true;
-        newSessionButton.disabled = true;
-        setStatus("Streaming response...");
-
-        addMessage("user", message);
-        const assistantEl = addMessage("assistant", "");
-
-        const payload = { message };
-        const conversationId = conversationInput.value.trim();
-        if (conversationId) {
-          payload.conversationId = conversationId;
+        function safeLocalStorageRemove(key) {
+          try {
+            localStorage.removeItem(key);
+          } catch {
+            // ignore storage errors in restricted environments
+          }
         }
 
-        const headers = { "Content-Type": "application/json" };
-        const token = tokenInput.value.trim();
-        if (token) {
-          headers.Authorization = "Bearer " + token;
+        function setStatus(text, state) {
+          statusEl.textContent = text;
+          statusEl.setAttribute("data-state", state || "idle");
         }
 
-        messageInput.value = "";
+        function renderEmptyMessagesState() {
+          messagesEl.innerHTML = "";
+          var empty = document.createElement("div");
+          empty.className = "message assistant";
 
-        try {
-          const response = await fetch("/v1/chat/stream", {
-            method: "POST",
-            headers,
-            body: JSON.stringify(payload),
-          });
+          var meta = document.createElement("div");
+          meta.className = "message-meta";
+          meta.textContent = "Assistant";
 
-          if (!response.ok || !response.body) {
-            const text = await response.text();
-            assistantEl.textContent = "Request failed (" + response.status + "): " + text;
-            setStatus("Request failed");
+          var body = document.createElement("p");
+          body.className = "message-body";
+          body.textContent = "Start by sending a prompt. The response will stream here.";
+
+          empty.appendChild(meta);
+          empty.appendChild(body);
+          messagesEl.appendChild(empty);
+        }
+
+        function addMessage(role, text) {
+          var wrapper = document.createElement("article");
+          wrapper.className = "message " + role;
+
+          var meta = document.createElement("div");
+          meta.className = "message-meta";
+
+          var roleText = document.createElement("span");
+          roleText.textContent = role === "user" ? "You" : "Assistant";
+
+          var timeText = document.createElement("span");
+          timeText.textContent = new Date().toLocaleTimeString();
+
+          meta.appendChild(roleText);
+          meta.appendChild(timeText);
+
+          var body = document.createElement("p");
+          body.className = "message-body";
+          body.textContent = text || "";
+
+          wrapper.appendChild(meta);
+          wrapper.appendChild(body);
+          messagesEl.appendChild(wrapper);
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+
+          return body;
+        }
+
+        function startNewSession() {
+          if (isSending) {
             return;
           }
 
-          await consumeSse(response.body, (eventName, data) => {
-            switch (eventName) {
-              case "assistant_text_delta":
-                assistantEl.textContent += data?.delta ?? "";
-                messagesEl.scrollTop = messagesEl.scrollHeight;
-                break;
+          conversationInput.value = "";
+          safeLocalStorageRemove(STORAGE_KEYS.conversationId);
+          renderEmptyMessagesState();
+          setStatus("New session ready", "idle");
+          messageInput.focus();
+        }
 
-              case "done": {
-                const id = data?.conversationId;
-                if (id) {
-                  conversationInput.value = id;
-                  localStorage.setItem("pi_gateway_conversation_id", id);
-                }
-                setStatus("Done • conversation " + (id ?? "(unknown)"));
+        function setSendingState(sending) {
+          isSending = sending;
+          sendButton.disabled = sending;
+          newSessionButton.disabled = sending;
+          newSessionSidebarButton.disabled = sending;
+          newSessionMobileButton.disabled = sending;
+        }
+
+        function normalizeRoute(rawRoute) {
+          if (rawRoute in ROUTES) {
+            return rawRoute;
+          }
+          return "chat";
+        }
+
+        function getHashRoute() {
+          var hash = window.location.hash || "";
+          if (hash.startsWith("#/")) {
+            return hash.slice(2);
+          }
+          if (hash.startsWith("#")) {
+            return hash.slice(1);
+          }
+          return "chat";
+        }
+
+        function setRoute(nextRoute, updateHash) {
+          var route = normalizeRoute(nextRoute);
+          currentRoute = route;
+
+          routePanels.forEach(function (panel) {
+            if (panel.getAttribute("data-route-panel") === route) {
+              panel.classList.add("is-active");
+            } else {
+              panel.classList.remove("is-active");
+            }
+          });
+
+          routeButtons.forEach(function (button) {
+            var isActive = button.getAttribute("data-route") === route;
+            if (isActive) {
+              button.setAttribute("aria-current", "page");
+            } else {
+              button.removeAttribute("aria-current");
+            }
+          });
+
+          pageTitleEl.textContent = ROUTES[route].title;
+
+          if (updateHash !== false) {
+            window.location.hash = "#/" + route;
+          }
+
+          if (route === "conversations") {
+            void refreshConversations();
+          }
+        }
+
+        function setMobileSheetOpen(open) {
+          if (open) {
+            mobileSheet.removeAttribute("hidden");
+            mobileSheetBackdrop.removeAttribute("hidden");
+            menuButton.setAttribute("aria-expanded", "true");
+          } else {
+            mobileSheet.setAttribute("hidden", "hidden");
+            mobileSheetBackdrop.setAttribute("hidden", "hidden");
+            menuButton.setAttribute("aria-expanded", "false");
+          }
+        }
+
+        function getAuthHeaders(baseHeaders) {
+          var headers = baseHeaders || {};
+          var token = tokenInput.value.trim();
+          if (token) {
+            headers.Authorization = "Bearer " + token;
+          }
+          return headers;
+        }
+
+        function formatTimestamp(iso) {
+          if (!iso) {
+            return "unknown";
+          }
+
+          var date = new Date(iso);
+          if (Number.isNaN(date.getTime())) {
+            return iso;
+          }
+
+          return date.toLocaleString();
+        }
+
+        function createConversationRow(conversation) {
+          var item = document.createElement("article");
+          item.className = "conversation-item";
+
+          var idEl = document.createElement("p");
+          idEl.className = "conversation-id";
+
+          var code = document.createElement("code");
+          code.textContent = conversation.id || "(missing id)";
+          idEl.appendChild(code);
+
+          var meta = document.createElement("p");
+          meta.className = "conversation-meta";
+
+          var tags = [];
+          if (conversation.isLoaded) {
+            tags.push("loaded");
+          }
+          if (conversation.isStreaming) {
+            tags.push("streaming");
+          }
+
+          meta.textContent =
+            "Updated " +
+            formatTimestamp(conversation.updatedAt) +
+            " • Created " +
+            formatTimestamp(conversation.createdAt) +
+            (tags.length ? " • " + tags.join(", ") : "");
+
+          var actions = document.createElement("div");
+          actions.className = "conversation-actions";
+
+          var useButton = document.createElement("button");
+          useButton.type = "button";
+          useButton.className = "conversation-action";
+          useButton.textContent = "Use in chat";
+          useButton.addEventListener("click", function () {
+            conversationInput.value = conversation.id;
+            safeLocalStorageSet(STORAGE_KEYS.conversationId, conversation.id);
+            setRoute("chat");
+            messageInput.focus();
+          });
+
+          var deleteButton = document.createElement("button");
+          deleteButton.type = "button";
+          deleteButton.className = "conversation-action";
+          deleteButton.textContent = "Delete";
+          deleteButton.addEventListener("click", async function () {
+            if (!window.confirm("Delete conversation " + conversation.id + "?")) {
+              return;
+            }
+
+            try {
+              var response = await fetch("/v1/conversations/" + encodeURIComponent(conversation.id), {
+                method: "DELETE",
+                headers: getAuthHeaders({}),
+              });
+
+              if (!response.ok) {
+                throw new Error("Delete failed with status " + response.status);
+              }
+
+              if (conversationInput.value.trim() === conversation.id) {
+                startNewSession();
+              }
+
+              await refreshConversations();
+              setStatus("Conversation deleted", "success");
+            } catch (error) {
+              setStatus("Delete failed", "error");
+              console.error(error);
+            }
+          });
+
+          actions.appendChild(useButton);
+          actions.appendChild(deleteButton);
+
+          item.appendChild(idEl);
+          item.appendChild(meta);
+          item.appendChild(actions);
+          return item;
+        }
+
+        async function refreshConversations() {
+          conversationListEl.innerHTML = "";
+
+          var loading = document.createElement("p");
+          loading.className = "hint";
+          loading.textContent = "Loading conversations...";
+          conversationListEl.appendChild(loading);
+
+          try {
+            var response = await fetch("/v1/conversations", {
+              headers: getAuthHeaders({}),
+            });
+
+            if (!response.ok) {
+              throw new Error("Request failed with status " + response.status);
+            }
+
+            var body = await response.json();
+            var conversations = Array.isArray(body.conversations) ? body.conversations : [];
+
+            conversationListEl.innerHTML = "";
+
+            if (conversations.length === 0) {
+              var empty = document.createElement("p");
+              empty.className = "hint";
+              empty.textContent = "No conversations yet. Send a message to create one.";
+              conversationListEl.appendChild(empty);
+              return;
+            }
+
+            conversations.forEach(function (conversation) {
+              conversationListEl.appendChild(createConversationRow(conversation));
+            });
+          } catch (error) {
+            conversationListEl.innerHTML = "";
+            var failed = document.createElement("p");
+            failed.className = "hint";
+            failed.textContent = "Failed to load conversations.";
+            conversationListEl.appendChild(failed);
+            console.error(error);
+          }
+        }
+
+        async function consumeSse(stream, onEvent) {
+          var reader = stream.getReader();
+          var decoder = new TextDecoder();
+          var buffer = "";
+
+          while (true) {
+            var readResult = await reader.read();
+            if (readResult.done) {
+              break;
+            }
+
+            buffer += decoder.decode(readResult.value, { stream: true }).replace(/\r/g, "");
+
+            while (true) {
+              var boundary = buffer.indexOf("\n\n");
+              if (boundary === -1) {
                 break;
               }
 
-              case "error":
-                setStatus("Error: " + (data?.message ?? "unknown"));
-                if (!assistantEl.textContent) {
-                  assistantEl.textContent = data?.message ?? "Unknown error";
-                }
-                break;
+              var rawEvent = buffer.slice(0, boundary);
+              buffer = buffer.slice(boundary + 2);
 
-              default:
-                break;
+              if (!rawEvent.trim()) {
+                continue;
+              }
+
+              var eventName = "message";
+              var dataLines = [];
+
+              rawEvent.split("\n").forEach(function (line) {
+                if (line.startsWith("event:")) {
+                  eventName = line.slice(6).trim();
+                } else if (line.startsWith("data:")) {
+                  dataLines.push(line.slice(5).trim());
+                }
+              });
+
+              var payloadText = dataLines.join("\n");
+              var payload = null;
+
+              if (payloadText) {
+                try {
+                  payload = JSON.parse(payloadText);
+                } catch {
+                  payload = { raw: payloadText };
+                }
+              }
+
+              onEvent(eventName, payload);
+            }
+          }
+        }
+
+        async function sendMessage() {
+          var message = messageInput.value.trim();
+          if (!message || isSending) {
+            return;
+          }
+
+          setSendingState(true);
+          setStatus("Streaming response...", "streaming");
+
+          if (messagesEl.children.length === 1) {
+            var maybeEmpty = messagesEl.firstElementChild;
+            if (maybeEmpty && maybeEmpty.querySelector(".message-body") && maybeEmpty.querySelector(".message-body").textContent === "Start by sending a prompt. The response will stream here.") {
+              messagesEl.innerHTML = "";
+            }
+          }
+
+          addMessage("user", message);
+          var assistantBody = addMessage("assistant", "");
+          var hasAssistantText = false;
+
+          var payload = { message: message };
+          var conversationId = conversationInput.value.trim();
+          if (conversationId) {
+            payload.conversationId = conversationId;
+          }
+
+          messageInput.value = "";
+
+          try {
+            var response = await fetch("/v1/chat/stream", {
+              method: "POST",
+              headers: getAuthHeaders({ "Content-Type": "application/json" }),
+              body: JSON.stringify(payload),
+            });
+
+            if (!response.ok || !response.body) {
+              var text = await response.text();
+              assistantBody.textContent = "Request failed (" + response.status + "): " + text;
+              setStatus("Request failed", "error");
+              return;
+            }
+
+            await consumeSse(response.body, function (eventName, data) {
+              if (eventName === "assistant_text_delta") {
+                if (!hasAssistantText) {
+                  assistantBody.textContent = "";
+                  hasAssistantText = true;
+                }
+                assistantBody.textContent += data && data.delta ? data.delta : "";
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+                return;
+              }
+
+              if (eventName === "assistant_thinking_delta") {
+                setStatus("Assistant is thinking...", "streaming");
+                return;
+              }
+
+              if (eventName === "tool_start") {
+                var toolName = data && data.toolName ? data.toolName : "tool";
+                setStatus("Running " + toolName + "...", "streaming");
+                return;
+              }
+
+              if (eventName === "done") {
+                var id = data && data.conversationId ? data.conversationId : "";
+                if (id) {
+                  conversationInput.value = id;
+                  safeLocalStorageSet(STORAGE_KEYS.conversationId, id);
+                }
+                setStatus("Done", "success");
+
+                if (!hasAssistantText && data && typeof data.assistantText === "string") {
+                  assistantBody.textContent = data.assistantText;
+                }
+
+                if (currentRoute === "conversations") {
+                  void refreshConversations();
+                }
+                return;
+              }
+
+              if (eventName === "error") {
+                var messageText = data && data.message ? data.message : "unknown error";
+                if (!assistantBody.textContent) {
+                  assistantBody.textContent = messageText;
+                }
+                setStatus("Error", "error");
+              }
+            });
+          } catch (error) {
+            assistantBody.textContent = String(error);
+            setStatus("Request failed", "error");
+          } finally {
+            setSendingState(false);
+            messageInput.focus();
+          }
+        }
+
+        function resolveTheme() {
+          var storedTheme = safeLocalStorageGet(STORAGE_KEYS.theme);
+          if (storedTheme === "light" || storedTheme === "dark") {
+            hasStoredTheme = true;
+            return storedTheme;
+          }
+
+          hasStoredTheme = false;
+          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        }
+
+        function updateThemeToggle(theme) {
+          var nextTheme = theme === "dark" ? "light" : "dark";
+          themeToggleButton.textContent = "Switch to " + nextTheme;
+          themeToggleButton.setAttribute("aria-label", "Switch to " + nextTheme + " mode");
+        }
+
+        function applyTheme(theme, persist) {
+          document.documentElement.setAttribute("data-theme", theme);
+          document.documentElement.style.colorScheme = theme;
+          updateThemeToggle(theme);
+
+          if (persist) {
+            hasStoredTheme = true;
+            safeLocalStorageSet(STORAGE_KEYS.theme, theme);
+          }
+        }
+
+        var initialConversationId = safeLocalStorageGet(STORAGE_KEYS.conversationId);
+        if (initialConversationId) {
+          conversationInput.value = initialConversationId;
+        }
+
+        renderEmptyMessagesState();
+        setStatus("Idle", "idle");
+
+        var initialTheme = resolveTheme();
+        applyTheme(initialTheme, false);
+
+        var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        if (typeof mediaQuery.addEventListener === "function") {
+          mediaQuery.addEventListener("change", function () {
+            if (!hasStoredTheme) {
+              applyTheme(mediaQuery.matches ? "dark" : "light", false);
             }
           });
-        } catch (error) {
-          assistantEl.textContent = String(error);
-          setStatus("Request failed");
-        } finally {
-          sendButton.disabled = false;
-          newSessionButton.disabled = false;
         }
-      }
 
-      newSessionButton.addEventListener("click", startNewSession);
-      sendButton.addEventListener("click", sendMessage);
-      messageInput.addEventListener("keydown", (event) => {
-        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-          event.preventDefault();
-          sendMessage();
-        }
-      });
+        themeToggleButton.addEventListener("click", function () {
+          var currentTheme = document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+          var nextTheme = currentTheme === "dark" ? "light" : "dark";
+          applyTheme(nextTheme, true);
+        });
+
+        routeButtons.forEach(function (button) {
+          button.addEventListener("click", function () {
+            setRoute(button.getAttribute("data-route") || "chat");
+            setMobileSheetOpen(false);
+          });
+        });
+
+        menuButton.addEventListener("click", function () {
+          setMobileSheetOpen(true);
+        });
+
+        closeSheetButton.addEventListener("click", function () {
+          setMobileSheetOpen(false);
+        });
+
+        mobileSheetBackdrop.addEventListener("click", function () {
+          setMobileSheetOpen(false);
+        });
+
+        document.addEventListener("keydown", function (event) {
+          if (event.key === "Escape") {
+            setMobileSheetOpen(false);
+          }
+        });
+
+        newSessionButton.addEventListener("click", startNewSession);
+        newSessionSidebarButton.addEventListener("click", startNewSession);
+        newSessionMobileButton.addEventListener("click", function () {
+          startNewSession();
+          setMobileSheetOpen(false);
+        });
+
+        clearMessagesButton.addEventListener("click", function () {
+          renderEmptyMessagesState();
+          setStatus("Messages cleared", "idle");
+        });
+
+        sendButton.addEventListener("click", sendMessage);
+
+        messageInput.addEventListener("keydown", function (event) {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void sendMessage();
+          }
+        });
+
+        refreshConversationsButton.addEventListener("click", function () {
+          void refreshConversations();
+        });
+
+        refreshConversationsInlineButton.addEventListener("click", function () {
+          void refreshConversations();
+          setStatus("Conversations refreshed", "idle");
+        });
+
+        window.addEventListener("hashchange", function () {
+          setRoute(getHashRoute(), false);
+        });
+
+        setRoute(getHashRoute(), false);
+      })();
     </script>
   </body>
 </html>`;