From 66ce095eb13b5f3cd1be4423e0c5d2fccdf5f2e4 Mon Sep 17 00:00:00 2001
From: dawn <90008@klbr.net>
Date: Wed, 1 Jul 2026 12:36:17 +0300
Subject: [PATCH] split web app components

---
 .beads/interactions.jsonl                     |   1 +
 .beads/issues.jsonl                           |   2 +-
 klbr-web/src/App.svelte                       | 942 ++----------------
 klbr-web/src/components/AddDaemonModal.svelte |  56 ++
 klbr-web/src/components/ChatHeader.svelte     | 364 +++++++
 klbr-web/src/components/Composer.svelte       |  68 ++
 klbr-web/src/components/ConnectionRail.svelte |  91 ++
 klbr-web/src/components/ReflinkPopover.svelte |  56 ++
 .../src/components/ResolutionTraces.svelte    | 174 ++++
 klbr-web/src/lib/ui-types.ts                  | 120 +++
 10 files changed, 1021 insertions(+), 853 deletions(-)
 create mode 100644 klbr-web/src/components/AddDaemonModal.svelte
 create mode 100644 klbr-web/src/components/ChatHeader.svelte
 create mode 100644 klbr-web/src/components/Composer.svelte
 create mode 100644 klbr-web/src/components/ConnectionRail.svelte
 create mode 100644 klbr-web/src/components/ReflinkPopover.svelte
 create mode 100644 klbr-web/src/components/ResolutionTraces.svelte
 create mode 100644 klbr-web/src/lib/ui-types.ts

diff --git a/.beads/interactions.jsonl b/.beads/interactions.jsonl
index 707e16b..d76a330 100644
--- a/.beads/interactions.jsonl
+++ b/.beads/interactions.jsonl
@@ -95,3 +95,4 @@
 {"id":"int-24fd625d","kind":"field_change","created_at":"2026-07-01T09:18:07.32698818Z","actor":"dawn","issue_id":"klbr-q53","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Moved external crate versions into root workspace.dependencies and switched member manifests to workspace=true; verified cargo metadata, workspace check, and workspace tests."}}
 {"id":"int-04183019","kind":"field_change","created_at":"2026-07-01T09:25:30.275787695Z","actor":"dawn","issue_id":"klbr-so2","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Split agent run_turn into stream_iteration and execute_tool_iteration phase helpers, reducing run_turn to a smaller dispatcher while preserving tool/preemption behavior; verified core and workspace tests."}}
 {"id":"int-5dcd101a","kind":"field_change","created_at":"2026-07-01T09:26:28.189416219Z","actor":"dawn","issue_id":"klbr-ds9","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Satisfied by e61b0e5 and 453b014: deduplicated run-loop failure handling and split run_turn into stream/tool phase helpers while preserving behavior; workspace tests passed."}}
+{"id":"int-706d5ee3","kind":"field_change","created_at":"2026-07-01T09:35:51.422527514Z","actor":"dawn","issue_id":"klbr-6m2","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Split App.svelte into ConnectionRail, ChatHeader, Composer, AddDaemonModal, ReflinkPopover, ResolutionTraces, and shared UI types; verified svelte-check, build, diff check, and local Vite smoke."}}
diff --git a/.beads/issues.jsonl b/.beads/issues.jsonl
index afbefcc..6e4dff9 100644
--- a/.beads/issues.jsonl
+++ b/.beads/issues.jsonl
@@ -56,7 +56,7 @@
 {"_type":"issue","id":"klbr-ow7","title":"core: refactor agent.rs run() loop failure-handling duplication","description":"agent.rs run() loop copy-pastes the exact same ~30-line backoff/failure-handling parsing block 4 times across different event stream branches. Extract to a helper function.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:39:23Z","created_by":"dawn","updated_at":"2026-07-01T09:14:49Z","started_at":"2026-07-01T09:12:29Z","closed_at":"2026-07-01T09:14:49Z","close_reason":"Extracted duplicated agent run-loop stream-failure backoff handling into a shared helper with a named retry limit; verified klbr-core tests.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"klbr-7e0","title":"core: clean up dead tool files in src/tools/","description":"There are 12 unused tool files in klbr-core/src/tools/ (remember.rs, recall.rs, tag_memory.rs, etc.) that are not declared as submodules or registered. They should be deleted.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:39:16Z","created_by":"dawn","updated_at":"2026-06-30T22:08:24Z","started_at":"2026-06-30T22:05:01Z","closed_at":"2026-06-30T22:08:24Z","close_reason":"Removed unregistered old memory tool modules and updated memory docs","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"klbr-q53","title":"workspace: consolidate dependency versions via workspace.dependencies","description":"Workspace is not utilizing cargo workspace dependencies, causing version drift between core, daemon, discord, and ipc. Consolidate them in the root Cargo.toml.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:39:10Z","created_by":"dawn","updated_at":"2026-07-01T09:18:07Z","started_at":"2026-07-01T09:15:45Z","closed_at":"2026-07-01T09:18:07Z","close_reason":"Moved external crate versions into root workspace.dependencies and switched member manifests to workspace=true; verified cargo metadata, workspace check, and workspace tests.","dependency_count":0,"dependent_count":0,"comment_count":0}
-{"_type":"issue","id":"klbr-6m2","title":"web: refactor and split App.svelte monolith","description":"App.svelte is currently a 3000+ line file holding all UI, WS client, and styles. Needs to be split into modular components like Sidebar, ChatPane, Metrics, and XmlVisualizer.","status":"open","priority":2,"issue_type":"task","owner":"90008@klbr.net","created_at":"2026-06-30T21:39:03Z","created_by":"dawn","updated_at":"2026-06-30T21:39:03Z","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"klbr-6m2","title":"web: refactor and split App.svelte monolith","description":"App.svelte is currently a 3000+ line file holding all UI, WS client, and styles. Needs to be split into modular components like Sidebar, ChatPane, Metrics, and XmlVisualizer.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:39:03Z","created_by":"dawn","updated_at":"2026-07-01T09:35:51Z","started_at":"2026-07-01T09:26:57Z","closed_at":"2026-07-01T09:35:51Z","close_reason":"Split App.svelte into ConnectionRail, ChatHeader, Composer, AddDaemonModal, ReflinkPopover, ResolutionTraces, and shared UI types; verified svelte-check, build, diff check, and local Vite smoke.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"klbr-ds9","title":"refactor and simplify core agent loop without losing behaviour","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:20:30Z","created_by":"dawn","updated_at":"2026-07-01T09:26:28Z","started_at":"2026-07-01T09:26:28Z","closed_at":"2026-07-01T09:26:28Z","close_reason":"Satisfied by e61b0e5 and 453b014: deduplicated run-loop failure handling and split run_turn into stream/tool phase helpers while preserving behavior; workspace tests passed.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"klbr-jae","title":"Design aggregate evidence value representation","description":"LongMemEval aggregate misses show that a prompt fix would be benchmark-shaped and brittle. The structural gap is evidence representation: EvidenceFactRow currently stores only the first numeric value from a chunk, often capturing list ordinals, dates, or distractors instead of the values needed for counts/sums. Design and implement a general value representation for memory evidence that can keep multiple numeric mentions with nearby unit/currency/date/entity context, then only enable deterministic aggregate synthesis when the rendered facts are grounded and unambiguous.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T21:01:47Z","created_by":"dawn","updated_at":"2026-06-30T21:11:59Z","started_at":"2026-06-30T21:02:38Z","closed_at":"2026-06-30T21:11:59Z","close_reason":"Implemented typed evidence value mentions for fact rows, rendered them in memory packets, and made aggregate synthesis use only finite same-kind/unit aggregateable values. Ordinals, dates, and mixed-unit rows now abstain instead of falling back to first-number arithmetic; no prompt fixes were added.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"klbr-2jh","title":"Inspect aggregate and value-synthesis LongMemEval misses","description":"The sample-100 query-time LongMemEval run showed 12 official failures where the answer ref was rendered but the answer value was not visible, plus 10 value-visible reader or synthesis failures. Inspect aggregate_count, aggregate_sum, lookup, and update_resolution misses to decide whether packet rendering, fact extraction, or final reader prompting needs the next fix. Use measured miss buckets rather than broad context fanout.","notes":"Inspected sample-100 aggregate/value misses without prompt changes. User explicitly rejected prompt-fix/hardcoding route. Findings: many aggregate misses are not simple retrieval failures; literal answer_value_visible is misleading for derived answers like 5+3=8 or component expenses summing to 85, and short numeric answers can produce false positives from unrelated dates/list ordinals. Also found a real diagnostic bug: assemble_context marked every selected packet ref as used/rendered even when render_evidence_packet omitted that ref under packet budget. Fixed core ref accounting so render_evidence_packet_with_refs reports emitted body/fact/timeline refs and assemble_context.used_refs tracks only those. Tightened bench diagnostics so answer_value_visible requires an answer-bearing ref to have been emitted, and critical_fact_row_visible requires a fact row for an answer-bearing ref. Targeted retrieval-only rerun for 46a3abf7 now reports answer_bearing_ref_selected=1.0 but rendered/in_context/value_visible/critical_fact_row_visible=0.0, correctly rebucketing it as selected_not_rendered instead of value-visible reader failure. Tests: cargo fmt --check, cargo test -p klbr-core, cargo test -p klbr-bench, git diff --check.","status":"closed","priority":2,"issue_type":"task","assignee":"dawn","owner":"90008@klbr.net","created_at":"2026-06-30T20:47:37Z","created_by":"dawn","updated_at":"2026-06-30T21:01:48Z","started_at":"2026-06-30T20:49:47Z","closed_at":"2026-06-30T21:01:48Z","close_reason":"Completed structural inspection and diagnostic fix; filed aggregate value representation follow-up.","dependency_count":0,"dependent_count":0,"comment_count":0}
diff --git a/klbr-web/src/App.svelte b/klbr-web/src/App.svelte
index fdfe47a..3e75c66 100644
--- a/klbr-web/src/App.svelte
+++ b/klbr-web/src/App.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
     import { onMount, tick } from "svelte";
+    import AddDaemonModal from "./components/AddDaemonModal.svelte";
+    import ChatHeader from "./components/ChatHeader.svelte";
+    import Composer from "./components/Composer.svelte";
+    import ConnectionRail from "./components/ConnectionRail.svelte";
+    import ReflinkPopover from "./components/ReflinkPopover.svelte";
+    import ResolutionTraces from "./components/ResolutionTraces.svelte";
     import {
-        AtSign,
         Brain,
         Check,
         ChevronDown,
@@ -10,27 +15,10 @@
         CircleAlert,
         Clipboard,
         Database,
-        Download,
-        EllipsisVertical,
-        History,
-        Menu,
-        Plug,
-        Plus,
         Radio,
-        RefreshCw,
-        RotateCcw,
-        Send,
-        Server,
-        SquareStack,
         Terminal,
-        Trash2,
-        Unplug,
-        User,
-        X,
         Zap,
-        Paperclip,
         FileText,
-        Activity,
     } from "lucide-svelte";
     import {
         DEFAULT_WS_URL,
@@ -48,111 +36,19 @@
         type CompactionRecord,
         type HistoryEntry,
         type ServerMsg,
-        type ToolCall,
         type ResolutionEvent,
     } from "./lib/protocol";
-
-    type ConnectionState =
-        | "disconnected"
-        | "connecting"
-        | "connected"
-        | "error";
-    type AssistantStep =
-        | "prompt"
-        | "reasoning"
-        | "scratchpad"
-        | "tool_call"
-        | "response"
-        | "done";
-    type AssistantMode = "chat" | "reflect" | "compact";
-
-    interface DaemonProfile {
-        id: string;
-        name: string;
-        url: string;
-    }
-
-    interface Metrics {
-        turnCount: number;
-        contextTokens: number;
-        watermark: number;
-        promptTokens?: number;
-        completionTokens?: number;
-        cachedPromptTokens?: number;
-        promptProcessingMs?: number;
-        generationMs?: number;
-        bridgeProcessingMs?: number;
-    }
-
-    interface ToolCallItem {
-        kind: "tool";
-        id?: string;
-        name: string;
-        args: string;
-        result: string | null;
-    }
-
-    type AssistantItem =
-        | { kind: "think"; content: string }
-        | { kind: "scratchpad"; content: string }
-        | { kind: "text"; content: string }
-        | { kind: "compaction_stream"; content: string }
-        | { kind: "compaction"; record: CompactionRecord }
-        | ToolCallItem;
-
-    type ChatMessage =
-        | {
-              id: string;
-              kind: "system";
-              content: string;
-              timestamp?: number;
-              entryId?: number;
-          }
-        | {
-              id: string;
-              kind: "user";
-              source: string;
-              content: string;
-              timestamp?: number;
-              entryId?: number;
-          }
-        | {
-              id: string;
-              kind: "external";
-              source: string;
-              conversationId?: string;
-              content: string;
-              timestamp?: number;
-              entryId?: number;
-          }
-        | {
-              id: string;
-              kind: "assistant";
-              items: AssistantItem[];
-              step: AssistantStep;
-              thinkingExpanded: boolean;
-              mode: AssistantMode;
-              timestamp?: number;
-              entryId?: number;
-          };
-
-    interface DaemonSession extends DaemonProfile {
-        state: ConnectionState;
-        statusText: string;
-        messages: ChatMessage[];
-        metrics: Metrics;
-        socket: WebSocket | null;
-        oldestTurnId: number | null;
-        historyExhausted: boolean;
-        loadingHistory: boolean;
-        streamStart: number | null;
-        streamTokens: number;
-        lastTps: number;
-        atBottom: boolean;
-        reconnectTimer: number | null;
-        reconnectAttempts: number;
-        manualDisconnect: boolean;
-    }
+    import type {
+        AssistantItem,
+        AssistantMode,
+        ChatMessage,
+        ConnectionState,
+        DaemonProfile,
+        DaemonSession,
+        ReflinkPopoverState,
+        ToolCall,
+        ToolCallItem,
+    } from "./lib/ui-types";
 
     const PROFILE_KEY = "klbr.web.daemons";
     const HISTORY_PAGE = 50;
@@ -213,18 +109,7 @@
         }
     })();
 
-    let activeRefPopover: {
-        alias: string;
-        refId?: string;
-        entityType?: string;
-        status?: string;
-        replacementRefId?: string;
-        body?: string;
-        tokenCount?: number;
-        loading: boolean;
-        x: number;
-        y: number;
-    } | null = null;
+    let activeRefPopover: ReflinkPopoverState | null = null;
 
     let popoverTimeout: number | null = null;
 
@@ -1969,417 +1854,51 @@
 </svelte:head>
 
 <div class="app-shell">
-    <aside class="connection-rail" aria-label="daemon connections">
-        <div class="brand-row">
-            <div class="brand-mark"><Server size={20} /></div>
-            <div>
-                <h1>klbr</h1>
-                <p>{connectedCount}/{sessions.length} connected</p>
-            </div>
-            <button
-                class="icon-button"
-                title="edit daemon profiles"
-                onclick={() => (editProfiles = !editProfiles)}
-            >
-                <SquareStack size={18} />
-            </button>
-        </div>
-
-        <button
-            class="add-profile-button"
-            type="button"
-            onclick={() => {
-                showAddDaemon = true;
-                showMobileProfiles = false;
-            }}
-        >
-            <Plus size={16} />
-            add daemon
-        </button>
-
-        <div class="daemon-list">
-            {#each sessions as session (session.id)}
-                <button
-                    class:active={activeId === session.id}
-                    class="daemon-row"
-                    onclick={() => setActive(session.id)}
-                    title={session.url}
-                >
-                    <span class="daemon-main">
-                        <strong>{session.name}</strong>
-                        <small
-                            >{statusLabel(session.state)} · {session.url}</small
-                        >
-                    </span>
-                </button>
-            {/each}
-        </div>
-
-        {#if editProfiles}
-            <div class="profile-editor">
-                {#each sessions as session (session.id)}
-                    <div class="profile-row">
-                        <input
-                            aria-label="daemon label"
-                            placeholder="label"
-                            value={session.name}
-                            oninput={(event) =>
-                                updateProfile(session, "name", event)}
-                        />
-                        <input
-                            aria-label="daemon url"
-                            placeholder="url"
-                            value={session.url}
-                            oninput={(event) =>
-                                updateProfile(session, "url", event)}
-                        />
-                        <button
-                            class="icon-button danger"
-                            title="remove daemon"
-                            onclick={() => removeDaemon(session)}
-                        >
-                            <Trash2 size={16} />
-                        </button>
-                    </div>
-                {/each}
-            </div>
-        {/if}
-    </aside>
+    <ConnectionRail
+        {sessions}
+        {activeId}
+        {connectedCount}
+        {editProfiles}
+        {statusLabel}
+        {setActive}
+        showAddDaemon={() => {
+            showAddDaemon = true;
+            showMobileProfiles = false;
+        }}
+        toggleEditProfiles={() => (editProfiles = !editProfiles)}
+        {updateProfile}
+        {removeDaemon}
+    />
 
     <main class="workspace">
         {#if active}
-            <header class="chat-header">
-                <div class="mobile-profile-control">
-                    <button
-                        class="icon-button"
-                        title="profiles"
-                        onclick={() =>
-                            (showMobileProfiles = !showMobileProfiles)}
-                    >
-                        <Menu size={18} />
-                    </button>
-                    {#if showMobileProfiles}
-                        <div class="header-dropdown profile-dropdown">
-                            <button
-                                class="dropdown-action"
-                                type="button"
-                                onclick={() => {
-                                    showAddDaemon = true;
-                                    showMobileProfiles = false;
-                                }}
-                            >
-                                <Plus size={16} />
-                                add daemon
-                            </button>
-                            <div class="dropdown-list">
-                                {#each sessions as session (session.id)}
-                                    <button
-                                        class:active={activeId === session.id}
-                                        class:connected={session.state ===
-                                            "connected"}
-                                        class:error={session.state === "error"}
-                                        class="daemon-row dropdown-daemon-row"
-                                        type="button"
-                                        onclick={() => setActive(session.id)}
-                                        title={session.url}
-                                    >
-                                        <span class="daemon-main">
-                                            <strong>{session.name}</strong>
-                                            <small
-                                                >{statusLabel(session.state)} · {session.url}</small
-                                            >
-                                        </span>
-                                    </button>
-                                {/each}
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-
-                <div class="daemon-title">
-                    <div>
-                        <h2>{active.name}</h2>
-                        <p>{sessionLine(active)}</p>
-                    </div>
-                </div>
-
-                {#if active.state !== "connected"}
-                    <div
-                        class:error={active.state === "error"}
-                        class="disconnect-banner"
-                    >
-                        {active.statusText || statusLabel(active.state)}
-                    </div>
-                {/if}
-
-                <div class="chat-actions">
-                    <div class="action-group">
-                        {#if active.state === "connected"}
-                            <button
-                                class="icon-button"
-                                title="disconnect"
-                                onclick={() => disconnect(active)}
-                            >
-                                <Unplug size={18} />
-                            </button>
-                        {:else}
-                            <button
-                                class="icon-button"
-                                title="connect"
-                                onclick={() => connect(active)}
-                            >
-                                <Plug size={18} />
-                            </button>
-                        {/if}
-                        <button
-                            class="icon-button"
-                            title="reconnect"
-                            onclick={() => connect(active)}
-                        >
-                            <RefreshCw size={18} />
-                        </button>
-                    </div>
-
-                    <div class="action-group">
-                        <button
-                            class="icon-button"
-                            disabled={active.loadingHistory ||
-                                active.historyExhausted ||
-                                active.state !== "connected"}
-                            title="load older history"
-                            onclick={() => fetchHistory(active)}
-                        >
-                            <History size={18} />
-                        </button>
-                        <button
-                            class="icon-button"
-                            disabled={active.state !== "connected"}
-                            title="compact context"
-                            onclick={() => compact(active)}
-                        >
-                            <Zap size={18} />
-                        </button>
-                        <button
-                            class:copied={copiedKey ===
-                                transcriptCopyKey(active)}
-                            class="icon-button"
-                            disabled={!active.messages.length}
-                            title={copiedKey === transcriptCopyKey(active)
-                                ? "messages copied"
-                                : "copy loaded messages"}
-                            onclick={() => copyMessages(active)}
-                        >
-                            {#if copiedKey === transcriptCopyKey(active)}
-                                <Check size={18} />
-                            {:else}
-                                <Clipboard size={18} />
-                            {/if}
-                        </button>
-                    </div>
-
-                    <div class="header-menu-control">
-                        <button
-                            class="icon-button"
-                            title="more actions"
-                            onclick={() => (showMoreActions = !showMoreActions)}
-                        >
-                            <EllipsisVertical size={18} />
-                        </button>
-                        {#if showMoreActions}
-                            <div class="header-dropdown actions-dropdown">
-                                <button
-                                    class="dropdown-action"
-                                    disabled={active.state !== "connected"}
-                                    type="button"
-                                    onclick={() => {
-                                        debugReflectRequest(active);
-                                        showMoreActions = false;
-                                    }}
-                                >
-                                    <Clipboard size={16} />
-                                    copy reflect request
-                                </button>
-                                <button
-                                    class="dropdown-action"
-                                    disabled={active.state !== "connected"}
-                                    type="button"
-                                    onclick={() => {
-                                        reset(active);
-                                        showMoreActions = false;
-                                    }}
-                                >
-                                    <RotateCcw size={16} />
-                                    reset
-                                </button>
-                                <button
-                                    class="dropdown-action"
-                                    disabled={active.state !== "connected"}
-                                    type="button"
-                                    onclick={() => {
-                                        dumpMemories(active);
-                                        showMoreActions = false;
-                                    }}
-                                >
-                                    <Download size={16} />
-                                    dump memories
-                                </button>
-                                <button
-                                    class="dropdown-action"
-                                    disabled={active.state !== "connected"}
-                                    type="button"
-                                    onclick={() => {
-                                        triggerSoulFile();
-                                        showMoreActions = false;
-                                    }}
-                                >
-                                    <User size={16} />
-                                    set soul
-                                </button>
-                                <button
-                                    class="dropdown-action"
-                                    disabled={active.state !== "connected"}
-                                    type="button"
-                                    onclick={() => {
-                                        fetchResolutionEvents(active);
-                                        showMoreActions = false;
-                                    }}
-                                >
-                                    <Activity size={16} />
-                                    trace diagnostics
-                                </button>
-                            </div>
-                        {/if}
-                    </div>
-                </div>
-
-                <div class="mobile-actions-control">
-                    <button
-                        class="icon-button"
-                        title="actions"
-                        onclick={() => (showMobileActions = !showMobileActions)}
-                    >
-                        <EllipsisVertical size={18} />
-                    </button>
-                    {#if showMobileActions}
-                        <div class="header-dropdown actions-dropdown">
-                            {#if active.state === "connected"}
-                                <button
-                                    class="dropdown-action"
-                                    type="button"
-                                    onclick={() => {
-                                        disconnect(active);
-                                        showMobileActions = false;
-                                    }}
-                                >
-                                    <Unplug size={16} />
-                                    disconnect
-                                </button>
-                            {:else}
-                                <button
-                                    class="dropdown-action"
-                                    type="button"
-                                    onclick={() => {
-                                        connect(active);
-                                        showMobileActions = false;
-                                    }}
-                                >
-                                    <Plug size={16} />
-                                    connect
-                                </button>
-                            {/if}
-                            <button
-                                class="dropdown-action"
-                                type="button"
-                                onclick={() => {
-                                    connect(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <RefreshCw size={16} />
-                                reconnect
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={active.loadingHistory ||
-                                    active.historyExhausted ||
-                                    active.state !== "connected"}
-                                type="button"
-                                onclick={() => {
-                                    fetchHistory(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <History size={16} />
-                                load history
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={!active.messages.length}
-                                type="button"
-                                onclick={() => {
-                                    copyMessages(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                {#if copiedKey === transcriptCopyKey(active)}
-                                    <Check size={16} />
-                                {:else}
-                                    <Clipboard size={16} />
-                                {/if}
-                                copy messages
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={active.state !== "connected"}
-                                type="button"
-                                onclick={() => {
-                                    compact(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <Zap size={16} />
-                                compact
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={active.state !== "connected"}
-                                type="button"
-                                onclick={() => {
-                                    debugReflectRequest(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <Clipboard size={16} />
-                                copy reflect request
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={active.state !== "connected"}
-                                type="button"
-                                onclick={() => {
-                                    reset(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <RotateCcw size={16} />
-                                reset
-                            </button>
-                            <button
-                                class="dropdown-action"
-                                disabled={active.state !== "connected"}
-                                type="button"
-                                onclick={() => {
-                                    dumpMemories(active);
-                                    showMobileActions = false;
-                                }}
-                            >
-                                <Download size={16} />
-                                dump memories
-                            </button>
-                        </div>
-                    {/if}
-                </div>
-            </header>
+            <ChatHeader
+                {active}
+                {sessions}
+                {activeId}
+                {copiedKey}
+                bind:showMobileProfiles
+                bind:showMoreActions
+                bind:showMobileActions
+                {statusLabel}
+                {sessionLine}
+                {transcriptCopyKey}
+                {setActive}
+                showAddDaemon={() => {
+                    showAddDaemon = true;
+                    showMobileProfiles = false;
+                }}
+                {connect}
+                {disconnect}
+                {fetchHistory}
+                {compact}
+                {copyMessages}
+                {debugReflectRequest}
+                {reset}
+                {dumpMemories}
+                {triggerSoulFile}
+                {fetchResolutionEvents}
+            />
 
             <section
                 class="message-pane"
@@ -2740,61 +2259,16 @@
                 {/if}
             </section>
 
-            <form
-                class="composer"
-                onsubmit={(event) => {
-                    event.preventDefault();
-                    submitMessage();
-                }}
-            >
-                <div class="composer-row">
-                    <label class="upload-button" title="upload file">
-                        <Paperclip size={18} />
-                        <input
-                            type="file"
-                            style="display: none;"
-                            disabled={!targetSession}
-                            onchange={handleFileUpload}
-                        />
-                    </label>
-                    <textarea
-                        bind:value={draft}
-                        disabled={!targetSession}
-                        onkeydown={handleComposerKeydown}
-                        placeholder={targetSession
-                            ? `message ${active.name}`
-                            : "no connected target"}
-                        rows="1"
-                    ></textarea>
-                    <div class="source-control">
-                        <button
-                            class="source-button"
-                            title={`change message source: ${source}`}
-                            type="button"
-                            onclick={() =>
-                                (showSourcePicker = !showSourcePicker)}
-                        >
-                            <AtSign size={18} />
-                        </button>
-                        {#if showSourcePicker}
-                            <div class="source-popover">
-                                <label>
-                                    <span>source</span>
-                                    <input bind:value={source} />
-                                </label>
-                            </div>
-                        {/if}
-                    </div>
-                    <button
-                        class="send-button"
-                        disabled={!draft.trim() || !targetSession}
-                        title="send message"
-                        type="submit"
-                    >
-                        <Send size={20} />
-                    </button>
-                </div>
-            </form>
+            <Composer
+                {active}
+                {targetSession}
+                bind:draft
+                bind:source
+                bind:showSourcePicker
+                {submitMessage}
+                {handleFileUpload}
+                {handleComposerKeydown}
+            />
         {:else}
             <div class="empty-state full">
                 <CircleAlert size={28} />
@@ -2805,54 +2279,13 @@
 </div>
 
 {#if showAddDaemon}
-    <div class="modal-backdrop" role="presentation">
-        <form
-            class="daemon-modal"
-            onsubmit={(event) => {
-                event.preventDefault();
-                addDaemon();
-            }}
-        >
-            <div class="modal-head">
-                <h2>add daemon</h2>
-                <button
-                    class="icon-button"
-                    title="close"
-                    type="button"
-                    onclick={() => (showAddDaemon = false)}
-                >
-                    <X size={18} />
-                </button>
-            </div>
-            <label>
-                <span>label</span>
-                <input
-                    aria-label="new daemon label"
-                    bind:value={newName}
-                    placeholder="local"
-                />
-            </label>
-            <label>
-                <span>url</span>
-                <input
-                    aria-label="new daemon url"
-                    bind:value={newUrl}
-                    placeholder={DEFAULT_WS_URL}
-                />
-            </label>
-            <div class="modal-actions">
-                <button
-                    class="icon-text"
-                    type="button"
-                    onclick={() => (showAddDaemon = false)}>cancel</button
-                >
-                <button class="primary icon-text" type="submit">
-                    <Plus size={16} />
-                    add
-                </button>
-            </div>
-        </form>
-    </div>
+    <AddDaemonModal
+        defaultUrl={DEFAULT_WS_URL}
+        bind:name={newName}
+        bind:url={newUrl}
+        close={() => (showAddDaemon = false)}
+        {addDaemon}
+    />
 {/if}
 
 <input
@@ -2864,215 +2297,20 @@
 />
 
 {#if showResolutionTraces}
-    <div class="resolution-traces-overlay">
-        <div class="resolution-traces-modal">
-            <div class="modal-header">
-                <h2>
-                    <Activity size={18} />
-                    Reflink Resolution & Hydration Diagnostics
-                </h2>
-                <button
-                    class="close-btn"
-                    type="button"
-                    onclick={() => (showResolutionTraces = false)}
-                >
-                    <X size={18} />
-                </button>
-            </div>
-            <div class="modal-body">
-                <div class="traces-list-pane">
-                    {#if resolutionEvents.length === 0}
-                        <div class="trace-detail-empty">
-                            <span>No resolution events tracked yet.</span>
-                        </div>
-                    {:else}
-                        {#each resolutionEvents as event (event.event_id)}
-                            <button
-                                class="trace-item"
-                                class:active={activeEventId === event.event_id}
-                                onclick={() => (activeEventId = event.event_id)}
-                            >
-                                <div class="trace-meta-row">
-                                    <span class="trace-id">Event #{event.event_id}</span>
-                                    <span class="trace-time">{formatTimestamp(event.created_at)}</span>
-                                </div>
-                                <div class="trace-stats-summary">
-                                    <span class="stat-chip">seeds: {event.input_ref_count}</span>
-                                    <span class="stat-chip">cands: {event.candidate_ref_count}</span>
-                                    <span class="stat-chip">injected: {event.injected_ref_count}</span>
-                                    <span class="stat-chip">{event.total_token_estimate} tok</span>
-                                </div>
-                            </button>
-                        {/each}
-                    {/if}
-                </div>
-                
-                <div class="trace-detail-pane">
-                    {#if !activeEventTrace}
-                        <div class="trace-detail-empty">
-                            <Activity size={32} />
-                            <span>Select a resolution trace from the list to inspect</span>
-                        </div>
-                    {:else}
-                        <div class="detail-header">
-                            <h3 class="detail-title">Resolution Trace #{activeEvent?.event_id}</h3>
-                            <div class="trace-time">Recorded at {activeEvent ? formatTimestamp(activeEvent.created_at) : ""}</div>
-                        </div>
-
-                        <div class="detail-metrics-grid">
-                            <div class="metric-card">
-                                <span class="metric-label">Input Seeds</span>
-                                <span class="metric-value">{activeEvent?.input_ref_count}</span>
-                            </div>
-                            <div class="metric-card">
-                                <span class="metric-label">Total Candidates</span>
-                                <span class="metric-value">{activeEvent?.candidate_ref_count}</span>
-                            </div>
-                            <div class="metric-card">
-                                <span class="metric-label">Injected References</span>
-                                <span class="metric-value">{activeEvent?.injected_ref_count}</span>
-                            </div>
-                            <div class="metric-card">
-                                <span class="metric-label">Omitted (Budget)</span>
-                                <span class="metric-value">{activeEvent?.omitted_ref_count}</span>
-                            </div>
-                            <div class="metric-card">
-                                <span class="metric-label">Token Estimate</span>
-                                <span class="metric-value">{activeEvent?.total_token_estimate}</span>
-                            </div>
-                        </div>
-
-                        <div class="section-title">
-                            Scanned Input Seeds (Exact Lane Entry)
-                        </div>
-                        <div class="trace-table-container">
-                            <table class="trace-table">
-                                <thead>
-                                    <tr>
-                                        <th>Alias / Scanned Reference</th>
-                                        <th>Priority Lane</th>
-                                        <th>Canonical ID</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {#if activeEventTrace.seeds && activeEventTrace.seeds.length > 0}
-                                        {#each activeEventTrace.seeds as seed}
-                                            <tr>
-                                                <td style="font-family: monospace; font-weight: 600;">[{seed.alias}]</td>
-                                                <td><span class="badge badge-lane">{seed.lane}</span></td>
-                                                <td style="font-family: monospace; font-size: 12px; color: #a1a1aa;">{seed.canonical_id || "n/a"}</td>
-                                            </tr>
-                                        {/each}
-                                    {:else}
-                                        <tr>
-                                            <td colspan="3" style="text-align: center; color: #71717a; padding: 16px;">No seeds scanned in this turn.</td>
-                                        </tr>
-                                    {/if}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <div class="section-title">
-                            Candidates & Allocation Decisions
-                        </div>
-                        <div class="trace-table-container">
-                            <table class="trace-table">
-                                <thead>
-                                    <tr>
-                                        <th>Alias</th>
-                                        <th>Canonical ID</th>
-                                        <th>Status</th>
-                                        <th>Hydration Lanes</th>
-                                        <th>Token Est</th>
-                                        <th>Budget Allocation</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {#if activeEventTrace.candidates && activeEventTrace.candidates.length > 0}
-                                        {#each activeEventTrace.candidates as cand}
-                                            <tr>
-                                                <td style="font-family: monospace; font-weight: 600;">[{cand.alias}]</td>
-                                                <td style="font-family: monospace; font-size: 12px; color: #a1a1aa;">{cand.canonical_id}</td>
-                                                <td>
-                                                    <span class="badge badge-status {cand.status}">
-                                                        {cand.status}
-                                                    </span>
-                                                </td>
-                                                <td>
-                                                    <div style="display: flex; flex-wrap: wrap; gap: 4px;">
-                                                        {#each cand.lanes as lane}
-                                                            <span class="badge badge-lane">{lane}</span>
-                                                        {/each}
-                                                    </div>
-                                                </td>
-                                                <td>{cand.token_estimate}</td>
-                                                <td>
-                                                    <span class="badge {cand.decision === 'included' ? 'badge-included' : 'badge-omitted'}">
-                                                        {cand.decision === 'included' ? 'injected' : 'omitted'}
-                                                    </span>
-                                                </td>
-                                            </tr>
-                                        {/each}
-                                    {:else}
-                                        <tr>
-                                            <td colspan="6" style="text-align: center; color: #71717a; padding: 16px;">No candidates generated in this turn.</td>
-                                        </tr>
-                                    {/if}
-                                </tbody>
-                            </table>
-                        </div>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    </div>
+    <ResolutionTraces
+        {resolutionEvents}
+        bind:activeEventId
+        {activeEvent}
+        {activeEventTrace}
+        {formatTimestamp}
+        close={() => (showResolutionTraces = false)}
+    />
 {/if}
 
 {#if activeRefPopover}
-    <div
-        class="reflink-popover"
-        role="tooltip"
-        style="left: {activeRefPopover.x}px; top: {activeRefPopover.y}px;"
-        onmouseenter={handlePopoverMouseEnter}
-        onmouseleave={handlePopoverMouseLeave}
-    >
-        {#if activeRefPopover.loading}
-            <div class="popover-loading">
-                <span class="loading-spinner"></span> resolving {activeRefPopover.alias}...
-            </div>
-        {:else if !activeRefPopover.refId}
-            <div class="popover-error">
-                could not resolve reference <strong>[{activeRefPopover.alias}]</strong>
-            </div>
-        {:else}
-            <div class="popover-header">
-                <span class="popover-alias">[{activeRefPopover.alias}]</span>
-                <span class="popover-type-badge">{activeRefPopover.entityType || 'unknown'}</span>
-                <span class="popover-status-badge {activeRefPopover.status || 'unknown'}">{activeRefPopover.status || 'unknown'}</span>
-            </div>
-            
-            <div class="popover-body">
-                {#if activeRefPopover.status === 'tombstoned'}
-                    <div class="popover-redacted">[content redacted / tombstoned]</div>
-                {:else if activeRefPopover.status === 'suppressed'}
-                    <div class="popover-redacted">[content redacted / suppressed]</div>
-                {:else if activeRefPopover.status === 'purged'}
-                    <div class="popover-redacted">[content redacted / purged]</div>
-                {:else if activeRefPopover.body}
-                    <pre class="popover-excerpt">{activeRefPopover.body}</pre>
-                {:else}
-                    <div class="popover-empty">no content cache available</div>
-                {/if}
-            </div>
-
-            {#if activeRefPopover.tokenCount !== undefined}
-                <div class="popover-footer">
-                    <span>{activeRefPopover.tokenCount} tokens</span>
-                    {#if activeRefPopover.refId !== activeRefPopover.alias}
-                        <span class="popover-canonical">id: {activeRefPopover.refId}</span>
-                    {/if}
-                </div>
-            {/if}
-        {/if}
-    </div>
+    <ReflinkPopover
+        popover={activeRefPopover}
+        {handlePopoverMouseEnter}
+        {handlePopoverMouseLeave}
+    />
 {/if}
diff --git a/klbr-web/src/components/AddDaemonModal.svelte b/klbr-web/src/components/AddDaemonModal.svelte
new file mode 100644
index 0000000..68eee53
--- /dev/null
+++ b/klbr-web/src/components/AddDaemonModal.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Plus, X } from "lucide-svelte";
+
+    export let defaultUrl: string;
+    export let name: string;
+    export let url: string;
+    export let close: () => void;
+    export let addDaemon: () => void;
+</script>
+
+<div class="modal-backdrop" role="presentation">
+    <form
+        class="daemon-modal"
+        onsubmit={(event) => {
+            event.preventDefault();
+            addDaemon();
+        }}
+    >
+        <div class="modal-head">
+            <h2>add daemon</h2>
+            <button
+                class="icon-button"
+                title="close"
+                type="button"
+                onclick={close}
+            >
+                <X size={18} />
+            </button>
+        </div>
+        <label>
+            <span>label</span>
+            <input
+                aria-label="new daemon label"
+                bind:value={name}
+                placeholder="local"
+            />
+        </label>
+        <label>
+            <span>url</span>
+            <input
+                aria-label="new daemon url"
+                bind:value={url}
+                placeholder={defaultUrl}
+            />
+        </label>
+        <div class="modal-actions">
+            <button class="icon-text" type="button" onclick={close}>
+                cancel
+            </button>
+            <button class="primary icon-text" type="submit">
+                <Plus size={16} />
+                add
+            </button>
+        </div>
+    </form>
+</div>
diff --git a/klbr-web/src/components/ChatHeader.svelte b/klbr-web/src/components/ChatHeader.svelte
new file mode 100644
index 0000000..16d75cb
--- /dev/null
+++ b/klbr-web/src/components/ChatHeader.svelte
@@ -0,0 +1,364 @@
+<script lang="ts">
+    import {
+        Activity,
+        Check,
+        Clipboard,
+        Download,
+        EllipsisVertical,
+        History,
+        Menu,
+        Plug,
+        Plus,
+        RefreshCw,
+        RotateCcw,
+        Unplug,
+        User,
+        Zap,
+    } from "lucide-svelte";
+    import type { DaemonSession } from "../lib/ui-types";
+
+    export let active: DaemonSession;
+    export let sessions: DaemonSession[];
+    export let activeId: string;
+    export let copiedKey: string;
+    export let showMobileProfiles: boolean;
+    export let showMoreActions: boolean;
+    export let showMobileActions: boolean;
+    export let statusLabel: (state: DaemonSession["state"]) => string;
+    export let sessionLine: (session: DaemonSession) => string;
+    export let transcriptCopyKey: (session: DaemonSession) => string;
+    export let setActive: (id: string) => void;
+    export let showAddDaemon: () => void;
+    export let connect: (session: DaemonSession) => void;
+    export let disconnect: (session: DaemonSession) => void;
+    export let fetchHistory: (session: DaemonSession) => void;
+    export let compact: (session: DaemonSession) => void;
+    export let copyMessages: (session: DaemonSession) => void;
+    export let debugReflectRequest: (session: DaemonSession) => void;
+    export let reset: (session: DaemonSession) => void;
+    export let dumpMemories: (session: DaemonSession) => void;
+    export let triggerSoulFile: () => void;
+    export let fetchResolutionEvents: (session: DaemonSession) => void;
+</script>
+
+<header class="chat-header">
+    <div class="mobile-profile-control">
+        <button
+            class="icon-button"
+            title="profiles"
+            onclick={() => (showMobileProfiles = !showMobileProfiles)}
+        >
+            <Menu size={18} />
+        </button>
+        {#if showMobileProfiles}
+            <div class="header-dropdown profile-dropdown">
+                <button
+                    class="dropdown-action"
+                    type="button"
+                    onclick={showAddDaemon}
+                >
+                    <Plus size={16} />
+                    add daemon
+                </button>
+                <div class="dropdown-list">
+                    {#each sessions as session (session.id)}
+                        <button
+                            class:active={activeId === session.id}
+                            class:connected={session.state === "connected"}
+                            class:error={session.state === "error"}
+                            class="daemon-row dropdown-daemon-row"
+                            type="button"
+                            onclick={() => setActive(session.id)}
+                            title={session.url}
+                        >
+                            <span class="daemon-main">
+                                <strong>{session.name}</strong>
+                                <small>{statusLabel(session.state)} · {session.url}</small>
+                            </span>
+                        </button>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+    </div>
+
+    <div class="daemon-title">
+        <div>
+            <h2>{active.name}</h2>
+            <p>{sessionLine(active)}</p>
+        </div>
+    </div>
+
+    {#if active.state !== "connected"}
+        <div class:error={active.state === "error"} class="disconnect-banner">
+            {active.statusText || statusLabel(active.state)}
+        </div>
+    {/if}
+
+    <div class="chat-actions">
+        <div class="action-group">
+            {#if active.state === "connected"}
+                <button
+                    class="icon-button"
+                    title="disconnect"
+                    onclick={() => disconnect(active)}
+                >
+                    <Unplug size={18} />
+                </button>
+            {:else}
+                <button
+                    class="icon-button"
+                    title="connect"
+                    onclick={() => connect(active)}
+                >
+                    <Plug size={18} />
+                </button>
+            {/if}
+            <button
+                class="icon-button"
+                title="reconnect"
+                onclick={() => connect(active)}
+            >
+                <RefreshCw size={18} />
+            </button>
+        </div>
+
+        <div class="action-group">
+            <button
+                class="icon-button"
+                disabled={active.loadingHistory ||
+                    active.historyExhausted ||
+                    active.state !== "connected"}
+                title="load older history"
+                onclick={() => fetchHistory(active)}
+            >
+                <History size={18} />
+            </button>
+            <button
+                class="icon-button"
+                disabled={active.state !== "connected"}
+                title="compact context"
+                onclick={() => compact(active)}
+            >
+                <Zap size={18} />
+            </button>
+            <button
+                class:copied={copiedKey === transcriptCopyKey(active)}
+                class="icon-button"
+                disabled={!active.messages.length}
+                title={copiedKey === transcriptCopyKey(active)
+                    ? "messages copied"
+                    : "copy loaded messages"}
+                onclick={() => copyMessages(active)}
+            >
+                {#if copiedKey === transcriptCopyKey(active)}
+                    <Check size={18} />
+                {:else}
+                    <Clipboard size={18} />
+                {/if}
+            </button>
+        </div>
+
+        <div class="header-menu-control">
+            <button
+                class="icon-button"
+                title="more actions"
+                onclick={() => (showMoreActions = !showMoreActions)}
+            >
+                <EllipsisVertical size={18} />
+            </button>
+            {#if showMoreActions}
+                <div class="header-dropdown actions-dropdown">
+                    <button
+                        class="dropdown-action"
+                        disabled={active.state !== "connected"}
+                        type="button"
+                        onclick={() => {
+                            debugReflectRequest(active);
+                            showMoreActions = false;
+                        }}
+                    >
+                        <Clipboard size={16} />
+                        copy reflect request
+                    </button>
+                    <button
+                        class="dropdown-action"
+                        disabled={active.state !== "connected"}
+                        type="button"
+                        onclick={() => {
+                            reset(active);
+                            showMoreActions = false;
+                        }}
+                    >
+                        <RotateCcw size={16} />
+                        reset
+                    </button>
+                    <button
+                        class="dropdown-action"
+                        disabled={active.state !== "connected"}
+                        type="button"
+                        onclick={() => {
+                            dumpMemories(active);
+                            showMoreActions = false;
+                        }}
+                    >
+                        <Download size={16} />
+                        dump memories
+                    </button>
+                    <button
+                        class="dropdown-action"
+                        disabled={active.state !== "connected"}
+                        type="button"
+                        onclick={() => {
+                            triggerSoulFile();
+                            showMoreActions = false;
+                        }}
+                    >
+                        <User size={16} />
+                        set soul
+                    </button>
+                    <button
+                        class="dropdown-action"
+                        disabled={active.state !== "connected"}
+                        type="button"
+                        onclick={() => {
+                            fetchResolutionEvents(active);
+                            showMoreActions = false;
+                        }}
+                    >
+                        <Activity size={16} />
+                        trace diagnostics
+                    </button>
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    <div class="mobile-actions-control">
+        <button
+            class="icon-button"
+            title="actions"
+            onclick={() => (showMobileActions = !showMobileActions)}
+        >
+            <EllipsisVertical size={18} />
+        </button>
+        {#if showMobileActions}
+            <div class="header-dropdown actions-dropdown">
+                {#if active.state === "connected"}
+                    <button
+                        class="dropdown-action"
+                        type="button"
+                        onclick={() => {
+                            disconnect(active);
+                            showMobileActions = false;
+                        }}
+                    >
+                        <Unplug size={16} />
+                        disconnect
+                    </button>
+                {:else}
+                    <button
+                        class="dropdown-action"
+                        type="button"
+                        onclick={() => {
+                            connect(active);
+                            showMobileActions = false;
+                        }}
+                    >
+                        <Plug size={16} />
+                        connect
+                    </button>
+                {/if}
+                <button
+                    class="dropdown-action"
+                    type="button"
+                    onclick={() => {
+                        connect(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <RefreshCw size={16} />
+                    reconnect
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={active.loadingHistory ||
+                        active.historyExhausted ||
+                        active.state !== "connected"}
+                    type="button"
+                    onclick={() => {
+                        fetchHistory(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <History size={16} />
+                    load history
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={!active.messages.length}
+                    type="button"
+                    onclick={() => {
+                        copyMessages(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    {#if copiedKey === transcriptCopyKey(active)}
+                        <Check size={16} />
+                    {:else}
+                        <Clipboard size={16} />
+                    {/if}
+                    copy messages
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={active.state !== "connected"}
+                    type="button"
+                    onclick={() => {
+                        compact(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <Zap size={16} />
+                    compact
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={active.state !== "connected"}
+                    type="button"
+                    onclick={() => {
+                        debugReflectRequest(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <Clipboard size={16} />
+                    copy reflect request
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={active.state !== "connected"}
+                    type="button"
+                    onclick={() => {
+                        reset(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <RotateCcw size={16} />
+                    reset
+                </button>
+                <button
+                    class="dropdown-action"
+                    disabled={active.state !== "connected"}
+                    type="button"
+                    onclick={() => {
+                        dumpMemories(active);
+                        showMobileActions = false;
+                    }}
+                >
+                    <Download size={16} />
+                    dump memories
+                </button>
+            </div>
+        {/if}
+    </div>
+</header>
diff --git a/klbr-web/src/components/Composer.svelte b/klbr-web/src/components/Composer.svelte
new file mode 100644
index 0000000..8e23b6e
--- /dev/null
+++ b/klbr-web/src/components/Composer.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { AtSign, Paperclip, Send } from "lucide-svelte";
+    import type { DaemonSession } from "../lib/ui-types";
+
+    export let active: DaemonSession;
+    export let targetSession: DaemonSession | null;
+    export let draft: string;
+    export let source: string;
+    export let showSourcePicker: boolean;
+    export let submitMessage: () => void;
+    export let handleFileUpload: (event: Event) => void;
+    export let handleComposerKeydown: (event: KeyboardEvent) => void;
+</script>
+
+<form
+    class="composer"
+    onsubmit={(event) => {
+        event.preventDefault();
+        submitMessage();
+    }}
+>
+    <div class="composer-row">
+        <label class="upload-button" title="upload file">
+            <Paperclip size={18} />
+            <input
+                type="file"
+                style="display: none;"
+                disabled={!targetSession}
+                onchange={handleFileUpload}
+            />
+        </label>
+        <textarea
+            bind:value={draft}
+            disabled={!targetSession}
+            onkeydown={handleComposerKeydown}
+            placeholder={targetSession
+                ? `message ${active.name}`
+                : "no connected target"}
+            rows="1"
+        ></textarea>
+        <div class="source-control">
+            <button
+                class="source-button"
+                title={`change message source: ${source}`}
+                type="button"
+                onclick={() => (showSourcePicker = !showSourcePicker)}
+            >
+                <AtSign size={18} />
+            </button>
+            {#if showSourcePicker}
+                <div class="source-popover">
+                    <label>
+                        <span>source</span>
+                        <input bind:value={source} />
+                    </label>
+                </div>
+            {/if}
+        </div>
+        <button
+            class="send-button"
+            disabled={!draft.trim() || !targetSession}
+            title="send message"
+            type="submit"
+        >
+            <Send size={20} />
+        </button>
+    </div>
+</form>
diff --git a/klbr-web/src/components/ConnectionRail.svelte b/klbr-web/src/components/ConnectionRail.svelte
new file mode 100644
index 0000000..609aa2a
--- /dev/null
+++ b/klbr-web/src/components/ConnectionRail.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { Plus, Server, SquareStack, Trash2 } from "lucide-svelte";
+    import type { DaemonSession } from "../lib/ui-types";
+
+    export let sessions: DaemonSession[];
+    export let activeId: string;
+    export let connectedCount: number;
+    export let editProfiles: boolean;
+    export let statusLabel: (state: DaemonSession["state"]) => string;
+    export let setActive: (id: string) => void;
+    export let showAddDaemon: () => void;
+    export let toggleEditProfiles: () => void;
+    export let updateProfile: (
+        session: DaemonSession,
+        field: "name" | "url",
+        event: Event,
+    ) => void;
+    export let removeDaemon: (session: DaemonSession) => void;
+</script>
+
+<aside class="connection-rail" aria-label="daemon connections">
+    <div class="brand-row">
+        <div class="brand-mark"><Server size={20} /></div>
+        <div>
+            <h1>klbr</h1>
+            <p>{connectedCount}/{sessions.length} connected</p>
+        </div>
+        <button
+            class="icon-button"
+            title="edit daemon profiles"
+            onclick={toggleEditProfiles}
+        >
+            <SquareStack size={18} />
+        </button>
+    </div>
+
+    <button
+        class="add-profile-button"
+        type="button"
+        onclick={showAddDaemon}
+    >
+        <Plus size={16} />
+        add daemon
+    </button>
+
+    <div class="daemon-list">
+        {#each sessions as session (session.id)}
+            <button
+                class:active={activeId === session.id}
+                class="daemon-row"
+                onclick={() => setActive(session.id)}
+                title={session.url}
+            >
+                <span class="daemon-main">
+                    <strong>{session.name}</strong>
+                    <small>{statusLabel(session.state)} · {session.url}</small>
+                </span>
+            </button>
+        {/each}
+    </div>
+
+    {#if editProfiles}
+        <div class="profile-editor">
+            {#each sessions as session (session.id)}
+                <div class="profile-row">
+                    <input
+                        aria-label="daemon label"
+                        placeholder="label"
+                        value={session.name}
+                        oninput={(event) =>
+                            updateProfile(session, "name", event)}
+                    />
+                    <input
+                        aria-label="daemon url"
+                        placeholder="url"
+                        value={session.url}
+                        oninput={(event) =>
+                            updateProfile(session, "url", event)}
+                    />
+                    <button
+                        class="icon-button danger"
+                        title="remove daemon"
+                        onclick={() => removeDaemon(session)}
+                    >
+                        <Trash2 size={16} />
+                    </button>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</aside>
diff --git a/klbr-web/src/components/ReflinkPopover.svelte b/klbr-web/src/components/ReflinkPopover.svelte
new file mode 100644
index 0000000..b1ffc26
--- /dev/null
+++ b/klbr-web/src/components/ReflinkPopover.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import type { ReflinkPopoverState } from "../lib/ui-types";
+
+    export let popover: ReflinkPopoverState;
+    export let handlePopoverMouseEnter: () => void;
+    export let handlePopoverMouseLeave: () => void;
+</script>
+
+<div
+    class="reflink-popover"
+    role="tooltip"
+    style="left: {popover.x}px; top: {popover.y}px;"
+    onmouseenter={handlePopoverMouseEnter}
+    onmouseleave={handlePopoverMouseLeave}
+>
+    {#if popover.loading}
+        <div class="popover-loading">
+            <span class="loading-spinner"></span> resolving {popover.alias}...
+        </div>
+    {:else if !popover.refId}
+        <div class="popover-error">
+            could not resolve reference <strong>[{popover.alias}]</strong>
+        </div>
+    {:else}
+        <div class="popover-header">
+            <span class="popover-alias">[{popover.alias}]</span>
+            <span class="popover-type-badge">{popover.entityType || "unknown"}</span>
+            <span class="popover-status-badge {popover.status || 'unknown'}">
+                {popover.status || "unknown"}
+            </span>
+        </div>
+
+        <div class="popover-body">
+            {#if popover.status === "tombstoned"}
+                <div class="popover-redacted">[content redacted / tombstoned]</div>
+            {:else if popover.status === "suppressed"}
+                <div class="popover-redacted">[content redacted / suppressed]</div>
+            {:else if popover.status === "purged"}
+                <div class="popover-redacted">[content redacted / purged]</div>
+            {:else if popover.body}
+                <pre class="popover-excerpt">{popover.body}</pre>
+            {:else}
+                <div class="popover-empty">no content cache available</div>
+            {/if}
+        </div>
+
+        {#if popover.tokenCount !== undefined}
+            <div class="popover-footer">
+                <span>{popover.tokenCount} tokens</span>
+                {#if popover.refId !== popover.alias}
+                    <span class="popover-canonical">id: {popover.refId}</span>
+                {/if}
+            </div>
+        {/if}
+    {/if}
+</div>
diff --git a/klbr-web/src/components/ResolutionTraces.svelte b/klbr-web/src/components/ResolutionTraces.svelte
new file mode 100644
index 0000000..42c3560
--- /dev/null
+++ b/klbr-web/src/components/ResolutionTraces.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+    import { Activity, X } from "lucide-svelte";
+    import type { ResolutionEvent } from "../lib/protocol";
+
+    export let resolutionEvents: ResolutionEvent[];
+    export let activeEventId: number | null;
+    export let activeEvent: ResolutionEvent | null;
+    export let activeEventTrace: any;
+    export let formatTimestamp: (timestamp?: number) => string;
+    export let close: () => void;
+</script>
+
+<div class="resolution-traces-overlay">
+    <div class="resolution-traces-modal">
+        <div class="modal-header">
+            <h2>
+                <Activity size={18} />
+                Reflink Resolution & Hydration Diagnostics
+            </h2>
+            <button class="close-btn" type="button" onclick={close}>
+                <X size={18} />
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="traces-list-pane">
+                {#if resolutionEvents.length === 0}
+                    <div class="trace-detail-empty">
+                        <span>No resolution events tracked yet.</span>
+                    </div>
+                {:else}
+                    {#each resolutionEvents as event (event.event_id)}
+                        <button
+                            class="trace-item"
+                            class:active={activeEventId === event.event_id}
+                            onclick={() => (activeEventId = event.event_id)}
+                        >
+                            <div class="trace-meta-row">
+                                <span class="trace-id">Event #{event.event_id}</span>
+                                <span class="trace-time">{formatTimestamp(event.created_at)}</span>
+                            </div>
+                            <div class="trace-stats-summary">
+                                <span class="stat-chip">seeds: {event.input_ref_count}</span>
+                                <span class="stat-chip">cands: {event.candidate_ref_count}</span>
+                                <span class="stat-chip">injected: {event.injected_ref_count}</span>
+                                <span class="stat-chip">{event.total_token_estimate} tok</span>
+                            </div>
+                        </button>
+                    {/each}
+                {/if}
+            </div>
+
+            <div class="trace-detail-pane">
+                {#if !activeEventTrace}
+                    <div class="trace-detail-empty">
+                        <Activity size={32} />
+                        <span>Select a resolution trace from the list to inspect</span>
+                    </div>
+                {:else}
+                    <div class="detail-header">
+                        <h3 class="detail-title">Resolution Trace #{activeEvent?.event_id}</h3>
+                        <div class="trace-time">
+                            Recorded at {activeEvent
+                                ? formatTimestamp(activeEvent.created_at)
+                                : ""}
+                        </div>
+                    </div>
+
+                    <div class="detail-metrics-grid">
+                        <div class="metric-card">
+                            <span class="metric-label">Input Seeds</span>
+                            <span class="metric-value">{activeEvent?.input_ref_count}</span>
+                        </div>
+                        <div class="metric-card">
+                            <span class="metric-label">Total Candidates</span>
+                            <span class="metric-value">{activeEvent?.candidate_ref_count}</span>
+                        </div>
+                        <div class="metric-card">
+                            <span class="metric-label">Injected References</span>
+                            <span class="metric-value">{activeEvent?.injected_ref_count}</span>
+                        </div>
+                        <div class="metric-card">
+                            <span class="metric-label">Omitted (Budget)</span>
+                            <span class="metric-value">{activeEvent?.omitted_ref_count}</span>
+                        </div>
+                        <div class="metric-card">
+                            <span class="metric-label">Token Estimate</span>
+                            <span class="metric-value">{activeEvent?.total_token_estimate}</span>
+                        </div>
+                    </div>
+
+                    <div class="section-title">
+                        Scanned Input Seeds (Exact Lane Entry)
+                    </div>
+                    <div class="trace-table-container">
+                        <table class="trace-table">
+                            <thead>
+                                <tr>
+                                    <th>Alias / Scanned Reference</th>
+                                    <th>Priority Lane</th>
+                                    <th>Canonical ID</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {#if activeEventTrace.seeds && activeEventTrace.seeds.length > 0}
+                                    {#each activeEventTrace.seeds as seed}
+                                        <tr>
+                                            <td style="font-family: monospace; font-weight: 600;">[{seed.alias}]</td>
+                                            <td><span class="badge badge-lane">{seed.lane}</span></td>
+                                            <td style="font-family: monospace; font-size: 12px; color: #a1a1aa;">{seed.canonical_id || "n/a"}</td>
+                                        </tr>
+                                    {/each}
+                                {:else}
+                                    <tr>
+                                        <td colspan="3" style="text-align: center; color: #71717a; padding: 16px;">No seeds scanned in this turn.</td>
+                                    </tr>
+                                {/if}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="section-title">
+                        Candidates & Allocation Decisions
+                    </div>
+                    <div class="trace-table-container">
+                        <table class="trace-table">
+                            <thead>
+                                <tr>
+                                    <th>Alias</th>
+                                    <th>Canonical ID</th>
+                                    <th>Status</th>
+                                    <th>Hydration Lanes</th>
+                                    <th>Token Est</th>
+                                    <th>Budget Allocation</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {#if activeEventTrace.candidates && activeEventTrace.candidates.length > 0}
+                                    {#each activeEventTrace.candidates as cand}
+                                        <tr>
+                                            <td style="font-family: monospace; font-weight: 600;">[{cand.alias}]</td>
+                                            <td style="font-family: monospace; font-size: 12px; color: #a1a1aa;">{cand.canonical_id}</td>
+                                            <td>
+                                                <span class="badge badge-status {cand.status}">
+                                                    {cand.status}
+                                                </span>
+                                            </td>
+                                            <td>
+                                                <div style="display: flex; flex-wrap: wrap; gap: 4px;">
+                                                    {#each cand.lanes as lane}
+                                                        <span class="badge badge-lane">{lane}</span>
+                                                    {/each}
+                                                </div>
+                                            </td>
+                                            <td>{cand.token_estimate}</td>
+                                            <td>
+                                                <span class="badge {cand.decision === 'included' ? 'badge-included' : 'badge-omitted'}">
+                                                    {cand.decision === "included" ? "injected" : "omitted"}
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    {/each}
+                                {:else}
+                                    <tr>
+                                        <td colspan="6" style="text-align: center; color: #71717a; padding: 16px;">No candidates generated in this turn.</td>
+                                    </tr>
+                                {/if}
+                            </tbody>
+                        </table>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/klbr-web/src/lib/ui-types.ts b/klbr-web/src/lib/ui-types.ts
new file mode 100644
index 0000000..3b1afd7
--- /dev/null
+++ b/klbr-web/src/lib/ui-types.ts
@@ -0,0 +1,120 @@
+import type { CompactionRecord, ToolCall } from "./protocol";
+
+export type ConnectionState =
+    | "disconnected"
+    | "connecting"
+    | "connected"
+    | "error";
+
+export type AssistantStep =
+    | "prompt"
+    | "reasoning"
+    | "scratchpad"
+    | "tool_call"
+    | "response"
+    | "done";
+
+export type AssistantMode = "chat" | "reflect" | "compact";
+
+export interface DaemonProfile {
+    id: string;
+    name: string;
+    url: string;
+}
+
+export interface Metrics {
+    turnCount: number;
+    contextTokens: number;
+    watermark: number;
+    promptTokens?: number;
+    completionTokens?: number;
+    cachedPromptTokens?: number;
+    promptProcessingMs?: number;
+    generationMs?: number;
+    bridgeProcessingMs?: number;
+}
+
+export interface ToolCallItem {
+    kind: "tool";
+    id?: string;
+    name: string;
+    args: string;
+    result: string | null;
+}
+
+export type AssistantItem =
+    | { kind: "think"; content: string }
+    | { kind: "scratchpad"; content: string }
+    | { kind: "text"; content: string }
+    | { kind: "compaction_stream"; content: string }
+    | { kind: "compaction"; record: CompactionRecord }
+    | ToolCallItem;
+
+export type ChatMessage =
+    | {
+          id: string;
+          kind: "system";
+          content: string;
+          timestamp?: number;
+          entryId?: number;
+      }
+    | {
+          id: string;
+          kind: "user";
+          source: string;
+          content: string;
+          timestamp?: number;
+          entryId?: number;
+      }
+    | {
+          id: string;
+          kind: "external";
+          source: string;
+          conversationId?: string;
+          content: string;
+          timestamp?: number;
+          entryId?: number;
+      }
+    | {
+          id: string;
+          kind: "assistant";
+          items: AssistantItem[];
+          step: AssistantStep;
+          thinkingExpanded: boolean;
+          mode: AssistantMode;
+          timestamp?: number;
+          entryId?: number;
+      };
+
+export interface DaemonSession extends DaemonProfile {
+    state: ConnectionState;
+    statusText: string;
+    messages: ChatMessage[];
+    metrics: Metrics;
+    socket: WebSocket | null;
+    oldestTurnId: number | null;
+    historyExhausted: boolean;
+    loadingHistory: boolean;
+    streamStart: number | null;
+    streamTokens: number;
+    lastTps: number;
+    atBottom: boolean;
+    reconnectTimer: number | null;
+    reconnectAttempts: number;
+    manualDisconnect: boolean;
+}
+
+export interface ReflinkPopoverState {
+    alias: string;
+    refId?: string;
+    entityType?: string;
+    status?: string;
+    replacementRefId?: string;
+    body?: string;
+    tokenCount?: number;
+    loading: boolean;
+    x: number;
+    y: number;
+}
+
+export type { ToolCall };
-- 
2.51.2