From 8c6cade69efa42fdcc280f51a283ea6f717d62fc Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 22 Jun 2026 23:56:14 +0800
Subject: [PATCH] refactor(web): consolidate storage and split root state and
 app shell into composables (#979)

* refactor(web): consolidate localStorage access and split appearance/notification modules

* refactor(web): extract task polling into useTaskPoller module

* refactor(web): split useKimiWebClient into workspace/sideChat/modelProvider modules

* refactor(web): extract App.vue composables for page title, auth, sidebar, detail panel and file preview

* refactor(web): funnel sessions and activeSessionId mutations through setters

* refactor(web): funnel messagesBySession mutations through setters

* refactor(web): move FileData type to types.ts to fix type-aware lint
---
 .../web-storage-appearance-notification.md    |    5 +
 apps/kimi-web/src/App.vue                     |  535 +---
 apps/kimi-web/src/components/FilePreview.vue  |   14 +-
 .../client/useModelProviderState.ts           |  385 +++
 .../src/composables/client/useSideChat.ts     |  242 ++
 .../src/composables/client/useTaskPoller.ts   |  264 ++
 .../composables/client/useWorkspaceState.ts   | 1657 +++++++++++
 apps/kimi-web/src/composables/useAuthGate.ts  |   67 +
 .../src/composables/useDetailPanel.ts         |  257 ++
 .../src/composables/useFilePreview.ts         |  190 ++
 .../src/composables/useKimiWebClient.ts       | 2622 ++---------------
 apps/kimi-web/src/composables/usePageTitle.ts |   55 +
 .../src/composables/useSidebarLayout.ts       |   54 +
 apps/kimi-web/src/types.ts                    |   13 +
 14 files changed, 3513 insertions(+), 2847 deletions(-)
 create mode 100644 .changeset/web-storage-appearance-notification.md
 create mode 100644 apps/kimi-web/src/composables/client/useModelProviderState.ts
 create mode 100644 apps/kimi-web/src/composables/client/useSideChat.ts
 create mode 100644 apps/kimi-web/src/composables/client/useTaskPoller.ts
 create mode 100644 apps/kimi-web/src/composables/client/useWorkspaceState.ts
 create mode 100644 apps/kimi-web/src/composables/useAuthGate.ts
 create mode 100644 apps/kimi-web/src/composables/useDetailPanel.ts
 create mode 100644 apps/kimi-web/src/composables/useFilePreview.ts
 create mode 100644 apps/kimi-web/src/composables/usePageTitle.ts
 create mode 100644 apps/kimi-web/src/composables/useSidebarLayout.ts

diff --git a/.changeset/web-storage-appearance-notification.md b/.changeset/web-storage-appearance-notification.md
new file mode 100644
index 000000000..792738db4
--- /dev/null
+++ b/.changeset/web-storage-appearance-notification.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Consolidate web client localStorage access and split the root state store and app shell into focused composables.
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index 0b5ea163e..beffa8e33 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -1,16 +1,15 @@
 <!-- apps/kimi-web/src/App.vue -->
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch, watchEffect } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Sidebar from './components/Sidebar.vue';
 import ResizeHandle from './components/ResizeHandle.vue';
 import ConversationPane from './components/ConversationPane.vue';
-import FilePreview, { type FileData } from './components/FilePreview.vue';
+import FilePreview from './components/FilePreview.vue';
 import ThinkingPanel from './components/ThinkingPanel.vue';
 import AgentDetailPanel from './components/AgentDetailPanel.vue';
 import SideChatPanel from './components/SideChatPanel.vue';
 import DiffView from './components/DiffView.vue';
-import type { AgentMember } from './types';
 import ModelPicker from './components/ModelPicker.vue';
 import ProviderManager from './components/ProviderManager.vue';
 import LoginDialog from './components/LoginDialog.vue';
@@ -28,10 +27,13 @@ import GlobalLoading from './components/GlobalLoading.vue';
 import DebugPanel from './debug/DebugPanel.vue';
 import { isTraceEnabled } from './debug/trace';
 import { useKimiWebClient } from './composables/useKimiWebClient';
+import { useAuthGate } from './composables/useAuthGate';
+import { usePageTitle } from './composables/usePageTitle';
+import { useSidebarLayout } from './composables/useSidebarLayout';
+import { useFilePreview, type DetailTarget } from './composables/useFilePreview';
+import { useDetailPanel } from './composables/useDetailPanel';
 import { useIsMobile } from './composables/useIsMobile';
 import type { AppConfig, ThinkingLevel } from './api/types';
-import type { FilePreviewRequest, ToolMedia } from './types';
-import { safeGetString, safeSetString, STORAGE_KEYS } from './lib/storage';
 
 const client = useKimiWebClient();
 provide('resolveImage', client.resolveImageUrl);
@@ -64,89 +66,14 @@ const running = computed(() => client.activity.value !== 'idle');
 
 // Auth readiness gates the main app. Once the first load finishes and auth is
 // still missing, show a full-page login entry instead of an in-app banner.
-const authReady = computed(() => client.authReady.value);
-const showAuthGate = computed(() => client.initialized.value && !authReady.value);
-const LOGIN_PATH = '/login';
-const authReturnPath = ref<string | null>(null);
 const authLogoRef = ref<SVGSVGElement | null>(null);
-let authLogoBlinkTimer: ReturnType<typeof setTimeout> | null = null;
-
-function currentPathWithSuffix(): string {
-  if (typeof window === 'undefined') return '/';
-  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
-}
-
-function replaceBrowserPath(path: string): void {
-  if (typeof window === 'undefined') return;
-  window.history.replaceState(window.history.state, '', path);
-}
-
-watch(showAuthGate, (show) => {
-  if (typeof window === 'undefined') return;
-  if (show) {
-    if (window.location.pathname !== LOGIN_PATH) {
-      authReturnPath.value = currentPathWithSuffix();
-      replaceBrowserPath(LOGIN_PATH);
-    }
-    return;
-  }
-  if (window.location.pathname === LOGIN_PATH) {
-    replaceBrowserPath(authReturnPath.value ?? '/');
-    authReturnPath.value = null;
-  }
-}, { immediate: true });
-
-function blinkAuthLogo(): void {
-  const el = authLogoRef.value;
-  if (!el) return;
-  el.classList.remove('blink-now');
-  void el.getBoundingClientRect();
-  el.classList.add('blink-now');
-  if (authLogoBlinkTimer !== null) clearTimeout(authLogoBlinkTimer);
-  authLogoBlinkTimer = setTimeout(() => {
-    authLogoBlinkTimer = null;
-    el.classList.remove('blink-now');
-  }, 300);
-}
+const { showAuthGate, blinkAuthLogo } = useAuthGate({ client, authLogoRef });
 
 
 // Static page title (app name only). The session title and workspace name are
-// intentionally excluded so the tab title stays stable.
-// Prefix an animated spinner when the agent is running so users can see activity
-// at a glance.
-const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
-const spinnerFrame = ref(0);
-let spinnerTimer: ReturnType<typeof setInterval> | null = null;
-
-function startSpinner(): void {
-  if (spinnerTimer !== null) return;
-  spinnerFrame.value = 0;
-  spinnerTimer = setInterval(() => {
-    spinnerFrame.value = (spinnerFrame.value + 1) % SPINNER_FRAMES.length;
-  }, 250);
-}
-
-function stopSpinner(): void {
-  if (spinnerTimer !== null) {
-    clearInterval(spinnerTimer);
-    spinnerTimer = null;
-  }
-  spinnerFrame.value = 0;
-}
-
-watch(running, (isRunning) => {
-  if (isRunning) startSpinner();
-  else stopSpinner();
-}, { immediate: true });
-
-const pageTitle = computed<string>(() => {
-  const prefix = running.value ? `${SPINNER_FRAMES[spinnerFrame.value]} ` : '';
-  if (showAuthGate.value) return `${prefix}${t('app.authPageTitle')} - Kimi Code Web`;
-  return `${prefix}Kimi Code Web`;
-});
-watchEffect(() => {
-  if (typeof document !== 'undefined') document.title = pageTitle.value;
-});
+// intentionally excluded so the tab title stays stable. Prefixes an animated
+// spinner while the agent is running so activity is visible at a glance.
+usePageTitle({ running, showAuthGate });
 
 // Thinking is on/off (TUI parity — no effort-level cycling). The /thinking
 // command flips between off and the backend default effort ('high').
@@ -175,21 +102,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('keydown', onGlobalKeydown, true);
-  stopSpinner();
-  if (authLogoBlinkTimer !== null) clearTimeout(authLogoBlinkTimer);
 });
 
-// Escape closes whichever transient right-side detail panel is open.
-function closeOpenSidePanel(): boolean {
-  if (detailTarget.value === 'thinking' && thinkingVisible.value) { closeThinkingPanel(); return true; }
-  if (detailTarget.value === 'compaction' && compactionPanelVisible.value) { closeCompactionPanel(); return true; }
-  if (detailTarget.value === 'agent' && agentPanelVisible.value) { closeAgentPanel(); return true; }
-  if (detailTarget.value === 'file') { closeFilePreview(); return true; }
-  if (detailTarget.value === 'diff') { closeDiffDetail(); return true; }
-  if (detailTarget.value === 'btw') { closeSideChat(); return true; }
-  return false;
-}
-
 function onGlobalKeydown(e: KeyboardEvent): void {
   if (e.key !== 'Escape') return;
   // A modal dialog open on top of the side panel owns Escape — leave the event
@@ -205,383 +119,72 @@ function onGlobalKeydown(e: KeyboardEvent): void {
 // Layout: resizable session column. ResizeHandle owns the column width (with
 // localStorage persistence); we mirror it here to drive the App grid.
 // ---------------------------------------------------------------------------
-const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
-const SIDEBAR_COLLAPSED_KEY = STORAGE_KEYS.sidebarCollapsed;
-const SIDEBAR_DEFAULT = 270;
-const SIDEBAR_MIN = 170;
-const SIDEBAR_MAX = 420;
-const SIDEBAR_COLLAPSED_WIDTH = 36;
-
-const sessionColWidth = ref(SIDEBAR_DEFAULT);
-const sidebarCollapsed = ref(false);
-const sideWidth = computed(() =>
-  sidebarCollapsed.value ? SIDEBAR_COLLAPSED_WIDTH : sessionColWidth.value,
-);
-
-function loadSidebarCollapsed(): void {
-  try {
-    sidebarCollapsed.value = safeGetString(SIDEBAR_COLLAPSED_KEY) === 'true';
-  } catch {
-    sidebarCollapsed.value = false;
-  }
-}
-
-function saveSidebarCollapsed(): void {
-  try {
-    safeSetString(SIDEBAR_COLLAPSED_KEY, String(sidebarCollapsed.value));
-  } catch {
-    // ignore
-  }
-}
-
-function toggleSidebarCollapse(): void {
-  sidebarCollapsed.value = !sidebarCollapsed.value;
-  saveSidebarCollapsed();
-}
+const {
+  SIDEBAR_WIDTH_KEY,
+  SIDEBAR_DEFAULT,
+  SIDEBAR_MIN,
+  SIDEBAR_MAX,
+  sessionColWidth,
+  sidebarCollapsed,
+  sideWidth,
+  loadSidebarCollapsed,
+  toggleSidebarCollapse,
+} = useSidebarLayout();
 
 // ---------------------------------------------------------------------------
-// Unified right-side detail layer. Only one detail is open at a time.
+// Unified right-side detail layer. Only one detail is open at a time. The
+// shared `detailTarget` ref lives here so the file-preview and detail-panel
+// composables can both claim the single right-side slot.
 // ---------------------------------------------------------------------------
-type DetailTarget = 'file' | 'diff' | 'thinking' | 'compaction' | 'agent' | 'btw';
 const detailTarget = ref<DetailTarget | null>(null);
 
-const PREVIEW_WIDTH_KEY = 'kimi-web.file-preview-width';
-const PREVIEW_MIN = 320;
-
-function previewAreaWidth(): number {
-  if (typeof window === 'undefined') return PREVIEW_MIN * 2;
-  return Math.max(0, window.innerWidth - sideWidth.value);
-}
-
-function clampPreviewWidth(width: number): number {
-  const max = Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN);
-  return Math.min(max, Math.max(PREVIEW_MIN, Math.round(width)));
-}
-
-function defaultPreviewWidth(): number {
-  return clampPreviewWidth(previewAreaWidth() / 2);
-}
-
-const previewDefaultWidth = computed(() => defaultPreviewWidth());
-const previewMaxWidth = computed(() => Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN));
-const previewWidth = ref(previewDefaultWidth.value);
-const previewTarget = ref<FilePreviewRequest | null>(null);
-const previewFile = ref<FileData | null>(null);
-const previewLoading = ref(false);
-const previewError = ref<string | null>(null);
-// Normalized workspace-relative path of the currently-open preview. Used for
-// the download URL so it matches the server's relative-path contract even when
-// the user opened the preview from an absolute path in the chat.
-const previewNormalizedPath = ref<string | null>(null);
-// Incremented on every openFilePreview call so a slower earlier request can't
-// overwrite the result of a later one (request-sequence guard).
-let previewRequestSeq = 0;
-
-const previewDownloadUrl = computed(() => {
-  const path = previewNormalizedPath.value;
-  return path ? client.getFileDownloadUrl(path) : null;
-});
-const previewExternalActions = computed(() => previewTarget.value !== null);
-
-function trimTrailingSlash(path: string): string {
-  return path.length > 1 ? path.replace(/\/+$/, '') : path;
-}
-
-function normalizeRelativePath(path: string): string {
-  const out: string[] = [];
-  for (const part of path.split(/[\\/]+/)) {
-    if (!part || part === '.') continue;
-    if (part === '..') {
-      out.pop();
-      continue;
-    }
-    out.push(part);
-  }
-  return out.join('/');
-}
-
-function normalizePreviewPath(inputPath: string): { path: string } | { error: string } {
-  const raw = inputPath.trim();
-  if (!raw) return { error: t('filePreview.errors.emptyPath') };
-  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(raw)) {
-    return { error: t('filePreview.errors.unsupportedPath') };
-  }
-  if (raw.startsWith('~')) {
-    return { error: t('filePreview.errors.outsideWorkspace') };
-  }
-
-  const cwd = trimTrailingSlash(client.status.value.cwd);
-  if (raw.startsWith('/')) {
-    if (!cwd || (raw !== cwd && !raw.startsWith(`${cwd}/`))) {
-      return { error: t('filePreview.errors.outsideWorkspace') };
-    }
-    const relative = raw === cwd ? '' : raw.slice(cwd.length + 1);
-    if (relative.split(/[\\/]+/).includes('..')) {
-      return { error: t('filePreview.errors.outsideWorkspace') };
-    }
-    const path = normalizeRelativePath(relative);
-    return path ? { path } : { error: t('filePreview.errors.isDirectory') };
-  }
-
-  if (raw.split(/[\\/]+/).includes('..')) {
-    return { error: t('filePreview.errors.outsideWorkspace') };
-  }
-
-  const path = normalizeRelativePath(raw);
-  return path ? { path } : { error: t('filePreview.errors.emptyPath') };
-}
-
-async function openFilePreview(target: FilePreviewRequest): Promise<void> {
-  const requestSeq = ++previewRequestSeq;
-  detailTarget.value = 'file';
-  previewFile.value = null;
-  previewError.value = null;
-  previewLoading.value = true;
-  previewTarget.value = target;
-  previewNormalizedPath.value = null;
-
-  const normalized = normalizePreviewPath(target.path);
-  if ('error' in normalized) {
-    previewLoading.value = false;
-    previewError.value = normalized.error;
-    return;
-  }
-  previewNormalizedPath.value = normalized.path;
-
-  try {
-    const result = await client.readFileContent(normalized.path);
-    // A newer openFilePreview started while this one was in flight — discard
-    // the stale result so the right-side panel shows the latest file.
-    if (requestSeq !== previewRequestSeq) return;
-    if (result) {
-      previewFile.value = { ...result, path: result.path || normalized.path };
-    } else {
-      previewFile.value = {
-        path: normalized.path,
-        content: '',
-        encoding: 'utf-8',
-        mime: 'text/plain',
-        isBinary: false,
-        size: 0,
-      };
-    }
-  } catch (err) {
-    if (requestSeq !== previewRequestSeq) return;
-    previewError.value = err instanceof Error ? err.message : t('filePreview.errors.loadFailed');
-  } finally {
-    if (requestSeq === previewRequestSeq) {
-      previewLoading.value = false;
-    }
-  }
-}
-
-function mimeFromDataUrl(url: string): string | undefined {
-  const match = /^data:([^;,]+)/i.exec(url);
-  return match?.[1];
-}
-
-function openMediaPreview(media: ToolMedia): void {
-  if (media.kind !== 'image') return;
-  detailTarget.value = 'file';
-  previewTarget.value = null;
-  previewNormalizedPath.value = null;
-  previewError.value = null;
-  previewLoading.value = false;
-  previewFile.value = {
-    path: media.path ?? 'ReadMediaFile image',
-    content: '',
-    encoding: 'utf-8',
-    mime: media.mimeType ?? mimeFromDataUrl(media.url) ?? 'image/*',
-    sourceUrl: media.url,
-    isBinary: true,
-    size: media.bytes ?? 0,
-  };
-}
-
-function closeFilePreview(): void {
-  previewTarget.value = null;
-  previewNormalizedPath.value = null;
-  previewFile.value = null;
-  previewError.value = null;
-  previewLoading.value = false;
-  if (detailTarget.value === 'file') detailTarget.value = null;
-}
+const {
+  previewTarget,
+  previewFile,
+  previewLoading,
+  previewError,
+  previewDownloadUrl,
+  previewExternalActions,
+  openFilePreview,
+  openMediaPreview,
+  closeFilePreview,
+  openPreviewInEditor,
+  revealPreviewFile,
+} = useFilePreview({ client, detailTarget });
 
 // ---------------------------------------------------------------------------
-// Thinking panel
+// Unified right-side detail layer (thinking / compaction / agent / diff / side
+// chat) plus the preview-panel width. Only one detail is open at a time.
 // ---------------------------------------------------------------------------
-const thinkingTarget = ref<{ turnId: string; blockIndex: number } | null>(null);
-
-const thinkingPanelText = computed<string | null>(() => {
-  const target = thinkingTarget.value;
-  if (!target) return null;
-  const turn = client.turns.value.find((tn) => tn.id === target.turnId);
-  const blk = turn?.blocks?.[target.blockIndex];
-  return blk?.kind === 'thinking' ? blk.thinking : null;
-});
-
-const thinkingVisible = computed(() => thinkingPanelText.value !== null);
-
-function openThinkingPanel(target: { turnId: string; blockIndex: number }): void {
-  const current = thinkingTarget.value;
-  if (current && current.turnId === target.turnId && current.blockIndex === target.blockIndex) {
-    thinkingTarget.value = null;
-    if (detailTarget.value === 'thinking') detailTarget.value = null;
-    return;
-  }
-  detailTarget.value = 'thinking';
-  thinkingTarget.value = target;
-}
-
-function closeThinkingPanel(): void {
-  thinkingTarget.value = null;
-  if (detailTarget.value === 'thinking') detailTarget.value = null;
-}
-
-// ---------------------------------------------------------------------------
-// Compaction summary panel
-// ---------------------------------------------------------------------------
-const compactionTarget = ref<{ turnId: string } | null>(null);
-
-const compactionPanelText = computed<string | null>(() => {
-  const target = compactionTarget.value;
-  if (!target) return null;
-  const turn = client.turns.value.find((tn) => tn.id === target.turnId);
-  return turn?.role === 'compaction' && turn.text ? turn.text : null;
-});
-
-const compactionPanelVisible = computed(() => compactionPanelText.value !== null);
-
-function openCompactionPanel(target: { turnId: string }): void {
-  if (compactionTarget.value?.turnId === target.turnId) {
-    compactionTarget.value = null;
-    if (detailTarget.value === 'compaction') detailTarget.value = null;
-    return;
-  }
-  detailTarget.value = 'compaction';
-  compactionTarget.value = target;
-}
-
-function closeCompactionPanel(): void {
-  compactionTarget.value = null;
-  if (detailTarget.value === 'compaction') detailTarget.value = null;
-}
-
-// ---------------------------------------------------------------------------
-// Subagent detail panel
-// ---------------------------------------------------------------------------
-const agentTarget = ref<{ turnId: string; blockIndex: number; memberId: string } | null>(null);
-
-const agentPanelMember = computed<AgentMember | null>(() => {
-  const target = agentTarget.value;
-  if (!target) return null;
-  const turn = client.turns.value.find((tn) => tn.id === target.turnId);
-  const blk = turn?.blocks?.[target.blockIndex];
-  if (!blk) return null;
-  if (blk.kind === 'agent') return blk.member.id === target.memberId ? blk.member : null;
-  if (blk.kind === 'agentGroup') return blk.members.find((m) => m.id === target.memberId) ?? null;
-  return null;
-});
-
-const agentPanelVisible = computed(() => agentPanelMember.value !== null);
-
-function openAgentPanel(target: { turnId: string; blockIndex: number; memberId: string }): void {
-  const current = agentTarget.value;
-  if (current && current.turnId === target.turnId && current.memberId === target.memberId) {
-    agentTarget.value = null;
-    if (detailTarget.value === 'agent') detailTarget.value = null;
-    return;
-  }
-  detailTarget.value = 'agent';
-  agentTarget.value = target;
-}
-
-function closeAgentPanel(): void {
-  agentTarget.value = null;
-  if (detailTarget.value === 'agent') detailTarget.value = null;
-}
-
-// ---------------------------------------------------------------------------
-// Diff detail layer (opened from the chat header git area)
-// ---------------------------------------------------------------------------
-const detailDiffMode = ref<'list' | 'detail'>('list');
-const detailDiffPath = ref<string | null>(null);
-
-function openDiffDetail(): void {
-  detailTarget.value = 'diff';
-  detailDiffMode.value = 'list';
-  detailDiffPath.value = null;
-  void client.loadGitStatus(client.activeSessionId.value!);
-}
-
-function closeDiffDetail(): void {
-  if (detailTarget.value === 'diff') detailTarget.value = null;
-  detailDiffMode.value = 'list';
-  detailDiffPath.value = null;
-  client.clearFileDiff();
-}
-
-async function selectDiffFile(path: string): Promise<void> {
-  detailDiffMode.value = 'detail';
-  detailDiffPath.value = path;
-  await client.loadFileDiff(path);
-}
-
-// ---------------------------------------------------------------------------
-// Side chat (BTW) — now rendered in the unified right-side detail layer.
-// ---------------------------------------------------------------------------
-async function openSideChatTab(prompt?: string): Promise<void> {
-  await client.openSideChat(prompt);
-  detailTarget.value = 'btw';
-}
-
-function closeSideChat(): void {
-  client.closeSideChat();
-  if (detailTarget.value === 'btw') detailTarget.value = null;
-}
-
-// Only hides the right-side BTW panel; the side-chat target is per-session and
-// preserved so switching back to a session restores its BTW transcript.
-function hideSideChatPanel(): void {
-  if (detailTarget.value === 'btw') detailTarget.value = null;
-}
-
-const btwVisible = computed(() => client.sideChatVisible.value);
-
-/** Any occupant of the shared right-side slot. */
-const sidePanelVisible = computed(
-  () =>
-    detailTarget.value !== null &&
-    (detailTarget.value !== 'thinking' || thinkingVisible.value) &&
-    (detailTarget.value !== 'compaction' || compactionPanelVisible.value) &&
-    (detailTarget.value !== 'agent' || agentPanelVisible.value) &&
-    (detailTarget.value !== 'btw' || btwVisible.value),
-);
-
-/** True while the panel's resize handle is being dragged — the width
-    transition is disabled so the panel follows the pointer 1:1. */
-const panelDragging = ref(false);
-
-function openPreviewInEditor(): void {
-  const path = previewFile.value?.path ?? previewTarget.value?.path;
-  if (!path) return;
-  void client.openWorkspaceFile(path, previewTarget.value?.line);
-}
-
-function revealPreviewFile(): void {
-  const path = previewFile.value?.path ?? previewTarget.value?.path;
-  if (!path) return;
-  void client.revealWorkspaceFile(path);
-}
-
-watch(client.activeSessionId, () => {
-  closeFilePreview();
-  closeThinkingPanel();
-  closeCompactionPanel();
-  closeAgentPanel();
-  closeDiffDetail();
-  hideSideChatPanel();
-});
+const {
+  PREVIEW_WIDTH_KEY,
+  PREVIEW_MIN,
+  previewDefaultWidth,
+  previewMaxWidth,
+  previewWidth,
+  thinkingPanelText,
+  thinkingVisible,
+  openThinkingPanel,
+  closeThinkingPanel,
+  compactionPanelText,
+  compactionPanelVisible,
+  openCompactionPanel,
+  closeCompactionPanel,
+  agentPanelMember,
+  openAgentPanel,
+  closeAgentPanel,
+  detailDiffMode,
+  detailDiffPath,
+  openDiffDetail,
+  closeDiffDetail,
+  selectDiffFile,
+  btwVisible,
+  openSideChatTab,
+  closeSideChat,
+  sidePanelVisible,
+  panelDragging,
+  closeOpenSidePanel,
+} = useDetailPanel({ client, sideWidth, detailTarget, closeFilePreview });
 
 // Reference to ConversationPane so we can imperatively switch tabs
 const conversationPaneRef = ref<InstanceType<typeof ConversationPane> | null>(null);
diff --git a/apps/kimi-web/src/components/FilePreview.vue b/apps/kimi-web/src/components/FilePreview.vue
index 8d3f04af1..6474dd9b5 100644
--- a/apps/kimi-web/src/components/FilePreview.vue
+++ b/apps/kimi-web/src/components/FilePreview.vue
@@ -4,7 +4,7 @@
 import { computed, inject, nextTick, provide, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Markdown from './Markdown.vue';
-import type { FilePreviewRequest } from '../types';
+import type { FileData, FilePreviewRequest } from '../types';
 
 const { t } = useI18n();
 
@@ -62,18 +62,6 @@ function resolveMarkdownFileTarget(target: { path: string; line?: number }): Fil
   return { ...target, path: resolveRelativePath(href, base) };
 }
 
-export interface FileData {
-  path: string;
-  content: string;
-  encoding: 'utf-8' | 'base64';
-  mime: string;
-  sourceUrl?: string;
-  languageId?: string;
-  isBinary: boolean;
-  size: number;
-  lineCount?: number;
-}
-
 const props = defineProps<{
   file: FileData | null;
   loading: boolean;
diff --git a/apps/kimi-web/src/composables/client/useModelProviderState.ts b/apps/kimi-web/src/composables/client/useModelProviderState.ts
new file mode 100644
index 000000000..f87184877
--- /dev/null
+++ b/apps/kimi-web/src/composables/client/useModelProviderState.ts
@@ -0,0 +1,385 @@
+// apps/kimi-web/src/composables/client/useModelProviderState.ts
+// Models, providers, starred/favorite models, the active-session thinking
+// level, session-scoped slash skills, and the managed OAuth device flow.
+// Owns the lazy-loaded model/provider caches plus the new-session "draft"
+// model pick. Cross-dependencies (failure reporting, status refresh, activity,
+// in-flight set, thinking storage) are injected by the facade.
+
+import { ref, type ComputedRef } from 'vue';
+import { getKimiWebApi } from '../../api';
+import type { AppMessage, AppModel, AppProvider, AppSession, AppSkill, ThinkingLevel } from '../../api/types';
+import { safeGetString, safeSetString, STORAGE_KEYS } from '../../lib/storage';
+import { coerceThinkingForModel } from '../../lib/modelThinking';
+import type { ActivityState } from '../../types';
+import type { ExtendedState } from '../useKimiWebClient';
+
+const STARRED_MODELS_STORAGE_KEY = STORAGE_KEYS.starredModels;
+
+function loadStarredModelsFromStorage(): string[] {
+  try {
+    const raw = safeGetString(STARRED_MODELS_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed) && parsed.every((item) => typeof item === 'string')) {
+      return parsed as string[];
+    }
+  } catch {
+    // ignore (localStorage not available or malformed)
+  }
+  return [];
+}
+
+function saveStarredModelsToStorage(v: string[]): void {
+  try {
+    safeSetString(STARRED_MODELS_STORAGE_KEY, JSON.stringify(v));
+  } catch {
+    // ignore
+  }
+}
+
+export interface PersistSessionProfilePatch {
+  model?: string;
+  permissionMode?: string;
+  planMode?: boolean;
+  swarmMode?: boolean;
+  goalObjective?: string;
+  goalControl?: 'pause' | 'resume' | 'cancel';
+  thinking?: string;
+}
+
+export interface UseModelProviderStateDeps {
+  pushOperationFailure: (
+    operation: string,
+    err: unknown,
+    opts?: { title?: string; message?: string; sessionId?: string },
+  ) => void;
+  refreshSessionStatus: (sessionId: string) => Promise<void>;
+  persistSessionProfile: (patch: PersistSessionProfilePatch) => void;
+  activity: ComputedRef<ActivityState>;
+  inFlightPromptSessions: Set<string>;
+  saveThinkingToStorage: (v: ThinkingLevel) => void;
+  /** Replace one session in place (matched by id). Owned by the facade so the
+   *  model module never assigns rawState.sessions directly. */
+  updateSession: (id: string, update: (session: AppSession) => AppSession) => void;
+  /** Update one session's message list via a function of the current list. */
+  updateSessionMessages: (
+    sessionId: string,
+    update: (messages: AppMessage[]) => AppMessage[],
+  ) => void;
+}
+
+export function useModelProviderState(
+  rawState: ExtendedState,
+  deps: UseModelProviderStateDeps,
+) {
+  const {
+    pushOperationFailure,
+    refreshSessionStatus,
+    persistSessionProfile,
+    activity,
+    inFlightPromptSessions,
+    saveThinkingToStorage,
+    updateSession,
+    updateSessionMessages,
+  } = deps;
+
+  // Models + Providers reactive state (lazy-loaded, cached)
+  const models = ref<AppModel[]>([]);
+  const starredModelIds = ref<string[]>(loadStarredModelsFromStorage());
+
+  // Session-scoped skills (slash-invocable). Loaded lazily per session; the active
+  // session's list feeds the composer's `/` menu.
+  const skillsBySession = ref<Record<string, AppSkill[]>>({});
+  const providers = ref<AppProvider[]>([]);
+
+  // Model picked while in the "new session draft" state (onboarding composer —
+  // no backend session exists yet, so POST /profile has nothing to target).
+  // Applied and cleared when the first prompt creates the session.
+  const draftModel = ref<string | null>(null);
+
+  function modelById(modelId: string | null | undefined): AppModel | undefined {
+    if (modelId === undefined || modelId === null || modelId.length === 0) return undefined;
+    return models.value.find((m) => m.id === modelId || m.model === modelId);
+  }
+
+  function activeThinkingModel(): AppModel | undefined {
+    const activeSession = rawState.activeSessionId
+      ? rawState.sessions.find((s) => s.id === rawState.activeSessionId)
+      : undefined;
+    return modelById(activeSession?.model ?? draftModel.value ?? rawState.defaultModel);
+  }
+
+  function applyThinkingLevel(level: ThinkingLevel): ThinkingLevel {
+    const next = coerceThinkingForModel(activeThinkingModel(), level);
+    rawState.thinking = next;
+    saveThinkingToStorage(next);
+    return next;
+  }
+
+  async function loadSkillsForSession(sessionId: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const list = await api.listSkills(sessionId);
+      skillsBySession.value = { ...skillsBySession.value, [sessionId]: list };
+    } catch {
+      // Skills are side data; an older daemon without /skills just yields no
+      // slash-skills, the built-in commands still work.
+    }
+  }
+
+  /** Load models (cached — call again to force refresh) */
+  async function loadModels(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      models.value = await api.listModels();
+      applyThinkingLevel(rawState.thinking);
+    } catch (err) {
+      pushOperationFailure('loadModels', err);
+    }
+  }
+
+  async function refreshOAuthProviderModels(): Promise<void> {
+    try {
+      const result = await getKimiWebApi().refreshOAuthProviderModels();
+      for (const failure of result.failed) {
+        pushOperationFailure('refreshOAuthProviderModels', new Error(failure.reason), {
+          message: failure.provider,
+        });
+      }
+    } catch {
+      // Older daemons may not expose this endpoint; model listing still works.
+    }
+  }
+
+  /** Load providers */
+  async function loadProviders(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      providers.value = await api.listProviders();
+    } catch (err) {
+      pushOperationFailure('loadProviders', err);
+    }
+  }
+
+  /**
+   * Switch model for the active session via POST /sessions/{id}/profile (the
+   * daemon dispatches agent_config.model to core.rpc.setModel). The profile echo
+   * can return model '', so the authoritative current model comes from
+   * GET /sessions/{id}/status, which we re-read right after. Optimistically show
+   * the chosen id meanwhile. Never crashes.
+   */
+  async function setModel(modelId: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    const nextThinking = coerceThinkingForModel(modelById(modelId), rawState.thinking);
+    const prevThinking = rawState.thinking;
+    if (!sid) {
+      // New-session draft (onboarding composer): no backend session to update.
+      // Remember the pick — startSessionAndSendPrompt applies it at create time.
+      draftModel.value = modelId;
+      applyThinkingLevel(nextThinking);
+      return;
+    }
+    // Optimistic: show the chosen model immediately, but remember the previous
+    // one so we can roll back if the switch never reaches the daemon.
+    const prevModel = rawState.sessions.find((s) => s.id === sid)?.model;
+    updateSession(sid, (s) => ({ ...s, model: modelId }));
+    if (nextThinking !== prevThinking) {
+      rawState.thinking = nextThinking;
+      saveThinkingToStorage(nextThinking);
+    }
+    try {
+      await getKimiWebApi().updateSession(sid, {
+        model: modelId,
+        thinking: nextThinking !== prevThinking ? nextThinking : undefined,
+      });
+    } catch (err) {
+      // The model change rides HTTP, not the WS, so a dropped socket alone does
+      // not fail it — but when the daemon is unreachable the request throws here.
+      // Roll the picker back to the real model so the UI can't keep showing the
+      // new one as if the switch succeeded, then surface the failure.
+      updateSession(sid, (s) => ({ ...s, model: prevModel ?? s.model }));
+      if (nextThinking !== prevThinking) {
+        rawState.thinking = prevThinking;
+        saveThinkingToStorage(prevThinking);
+      }
+      pushOperationFailure('setModel', err, { sessionId: sid });
+      return;
+    }
+    // refreshSessionStatus folds the authoritative current model from /status
+    // back into the session (the profile echo can return ''). Best-effort: a
+    // failure here does not mean the switch failed, so it must not roll back.
+    await refreshSessionStatus(sid);
+  }
+
+  /** Toggle whether a model is starred (favorited) in the model picker. */
+  function toggleStarModel(modelId: string): void {
+    const set = new Set(starredModelIds.value);
+    if (set.has(modelId)) {
+      set.delete(modelId);
+    } else {
+      set.add(modelId);
+    }
+    starredModelIds.value = Array.from(set);
+    saveStarredModelsToStorage(starredModelIds.value);
+  }
+
+  /**
+   * Activate a session skill (the web analogue of typing `/<skill> <args>` in the
+   * TUI). The daemon starts a turn with a `skill_activation` origin; progress
+   * arrives over the WS stream like any other turn. Never crashes the caller.
+   */
+  async function activateSkill(skillName: string, args?: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const guarded = activity.value === 'idle' && !inFlightPromptSessions.has(sid);
+    const tempId = `msg_skill_opt_${Date.now().toString(36)}`;
+
+    if (guarded) {
+      inFlightPromptSessions.add(sid);
+      rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: true };
+      const optimisticMsg: AppMessage = {
+        id: tempId,
+        sessionId: sid,
+        role: 'user',
+        content: [{ type: 'text', text: `/${skillName}${args ? ` ${args}` : ''}` }],
+        createdAt: new Date().toISOString(),
+        metadata: {
+          'kimiWeb.optimisticUserMessage': true,
+          origin: {
+            kind: 'skill_activation',
+            trigger: 'user-slash',
+            skillName,
+            skillArgs: args,
+          },
+        },
+      };
+      updateSessionMessages(sid, (msgs) => [...msgs, optimisticMsg]);
+    }
+
+    try {
+      await getKimiWebApi().activateSkill(sid, skillName, args);
+    } catch (err) {
+      if (guarded) {
+        inFlightPromptSessions.delete(sid);
+        rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
+        updateSessionMessages(sid, (msgs) => msgs.filter((m) => m.id !== tempId));
+      }
+      pushOperationFailure('activateSkill', err, { sessionId: sid });
+    }
+  }
+
+  /** Add a provider, then reload providers + models */
+  async function addProvider(input: {
+    type: string;
+    apiKey?: string;
+    baseUrl?: string;
+    defaultModel?: string;
+  }): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.addProvider(input);
+      await Promise.all([loadProviders(), loadModels()]);
+    } catch (err) {
+      pushOperationFailure('addProvider', err);
+    }
+  }
+
+  /** Delete a provider, then reload providers + models */
+  async function deleteProvider(id: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.deleteProvider(id);
+      await Promise.all([loadProviders(), loadModels()]);
+    } catch (err) {
+      pushOperationFailure('deleteProvider', err);
+    }
+  }
+
+  /** Refresh a provider status */
+  async function refreshProvider(id: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const updated = await api.refreshProvider(id);
+      providers.value = providers.value.map((p) => (p.id === id ? updated : p));
+    } catch (err) {
+      pushOperationFailure('refreshProvider', err);
+    }
+  }
+
+  /** Start managed Kimi OAuth device flow. Returns flow data or null on error. */
+  async function startOAuthLogin(): Promise<{
+    flowId: string;
+    provider: string;
+    verificationUri: string;
+    verificationUriComplete: string;
+    userCode: string;
+    expiresIn: number;
+    interval: number;
+    status: 'pending';
+    expiresAt: string;
+  } | null> {
+    try {
+      const api = getKimiWebApi();
+      return await api.startOAuthLogin();
+    } catch {
+      return null;
+    }
+  }
+
+  /** Poll the singleton OAuth flow. Returns null on error or no active flow. */
+  async function pollOAuthLogin(): Promise<{
+    flowId: string;
+    status: 'pending' | 'authenticated' | 'expired' | 'cancelled';
+    resolvedAt?: string;
+  } | null> {
+    try {
+      const api = getKimiWebApi();
+      return await api.pollOAuthLogin();
+    } catch {
+      return null;
+    }
+  }
+
+  /** Cancel the current OAuth flow (best-effort). */
+  async function cancelOAuthLogin(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.cancelOAuthLogin();
+    } catch {
+      // Best-effort
+    }
+  }
+
+  /** Persist and apply a new extended-thinking level (also pushed to the active
+   *  session profile so the daemon's /status reflects it; still sent per-prompt). */
+  function setThinking(level: ThinkingLevel): void {
+    const next = applyThinkingLevel(level);
+    persistSessionProfile({ thinking: next });
+  }
+
+  return {
+    // state
+    models,
+    starredModelIds,
+    providers,
+    draftModel,
+    skillsBySession,
+    // actions
+    loadSkillsForSession,
+    loadModels,
+    refreshOAuthProviderModels,
+    loadProviders,
+    setModel,
+    toggleStarModel,
+    activateSkill,
+    addProvider,
+    deleteProvider,
+    refreshProvider,
+    startOAuthLogin,
+    pollOAuthLogin,
+    cancelOAuthLogin,
+    setThinking,
+  };
+}
+
+export type UseModelProviderState = ReturnType<typeof useModelProviderState>;
diff --git a/apps/kimi-web/src/composables/client/useSideChat.ts b/apps/kimi-web/src/composables/client/useSideChat.ts
new file mode 100644
index 000000000..547ee52c2
--- /dev/null
+++ b/apps/kimi-web/src/composables/client/useSideChat.ts
@@ -0,0 +1,242 @@
+// apps/kimi-web/src/composables/client/useSideChat.ts
+// Side chat ("BTW") — a TUI-style forked agent rendered as a session tab.
+// It is not a child session and never appears in the sidebar. Each session can
+// have its own side chat; state is keyed by session id, while messages are
+// keyed by agent id so they survive session switches.
+//
+// Cross-dependencies (failure reporting, optimistic-id generation, the event
+// connection) are injected by the facade.
+
+import { computed, ref } from 'vue';
+import { getKimiWebApi } from '../../api';
+import type { AppMessage } from '../../api/types';
+import type { KimiEventConnection } from '../../api/types';
+import { messagesToTurns } from '../messagesToTurns';
+import type { ChatTurn } from '../../types';
+import type { ExtendedState } from '../useKimiWebClient';
+
+export interface UseSideChatDeps {
+  pushOperationFailure: (
+    operation: string,
+    err: unknown,
+    opts?: { title?: string; message?: string; sessionId?: string },
+  ) => void;
+  nextOptimisticMsgId: () => string;
+  connectEventsIfNeeded: () => void;
+  getEventConn: () => KimiEventConnection | null;
+}
+
+export function useSideChat(rawState: ExtendedState, deps: UseSideChatDeps) {
+  const { pushOperationFailure, nextOptimisticMsgId, connectEventsIfNeeded, getEventConn } = deps;
+
+  const sideChatTargetBySession = ref<Record<string, { agentId: string }>>({});
+
+  const activeSideChatTarget = computed<{ parentId: string; agentId: string } | null>(() => {
+    const sid = rawState.activeSessionId;
+    if (!sid) return null;
+    const target = sideChatTargetBySession.value[sid];
+    return target ? { parentId: sid, agentId: target.agentId } : null;
+  });
+
+  const sideChatSessionId = computed<string | null>(
+    () => activeSideChatTarget.value?.parentId ?? null,
+  );
+  const sideChatVisible = computed<boolean>(() => activeSideChatTarget.value !== null);
+
+  const sideChatSending = computed<boolean>(() => {
+    const target = activeSideChatTarget.value;
+    return target ? Boolean(rawState.sideChatSendingByAgent[target.agentId]) : false;
+  });
+
+  const sideChatRunning = computed<boolean>(() => {
+    const target = activeSideChatTarget.value;
+    if (!target) return false;
+    if (rawState.sideChatSendingByAgent[target.agentId]) return true;
+    return (rawState.tasksBySession[target.parentId] ?? []).some(
+      (task) => task.id === target.agentId && task.status === 'running',
+    );
+  });
+
+  const sideChatTurns = computed<ChatTurn[]>(() => {
+    const target = activeSideChatTarget.value;
+    if (!target) return [];
+    const messages = rawState.sideChatMessagesByAgent[target.agentId] ?? [];
+    return messagesToTurns(
+      messages,
+      [],
+      (fileId) => getKimiWebApi().getFileUrl(fileId),
+      sideChatRunning.value,
+      [],
+    );
+  });
+
+  function updateSideChatMessages(agentId: string, update: (messages: AppMessage[]) => AppMessage[]): void {
+    rawState.sideChatMessagesByAgent = {
+      ...rawState.sideChatMessagesByAgent,
+      [agentId]: update(rawState.sideChatMessagesByAgent[agentId] ?? []),
+    };
+  }
+
+  function appendSideChatMessage(agentId: string, message: AppMessage): void {
+    updateSideChatMessages(agentId, (messages) => [...messages, message]);
+  }
+
+  function removeLastSideChatUserMessage(agentId: string): void {
+    updateSideChatMessages(agentId, (messages) => {
+      const idx = [...messages].reverse().findIndex((message) => message.role === 'user');
+      if (idx === -1) return messages;
+      const removeIndex = messages.length - 1 - idx;
+      return messages.filter((_, index) => index !== removeIndex);
+    });
+  }
+
+  function stampLastSideChatUserPrompt(agentId: string, promptId: string): void {
+    updateSideChatMessages(agentId, (messages) => {
+      const next = [...messages];
+      for (let i = next.length - 1; i >= 0; i -= 1) {
+        const message = next[i]!;
+        if (message.role !== 'user') continue;
+        next[i] = { ...message, promptId: message.promptId ?? promptId };
+        return next;
+      }
+      return messages;
+    });
+  }
+
+  function appendSideChatAssistantText(agentId: string, sessionId: string, chunk: string): void {
+    if (!chunk) return;
+    updateSideChatMessages(agentId, (messages) => {
+      const last = messages.at(-1);
+      if (last?.role === 'assistant') {
+        const first = last.content[0];
+        const text = first?.type === 'text' ? first.text : '';
+        return [
+          ...messages.slice(0, -1),
+          {
+            ...last,
+            content: [{ type: 'text', text: `${text}${chunk}` }],
+          },
+        ];
+      }
+      return [
+        ...messages,
+        {
+          id: nextOptimisticMsgId(),
+          sessionId,
+          role: 'assistant',
+          content: [{ type: 'text', text: chunk }],
+          createdAt: new Date().toISOString(),
+        },
+      ];
+    });
+  }
+
+  function finishSideChatAgent(agentId: string, sessionId: string, outputPreview?: string): void {
+    rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: false };
+    if (!outputPreview) return;
+    const messages = rawState.sideChatMessagesByAgent[agentId] ?? [];
+    const last = messages.at(-1);
+    const lastText = last?.role === 'assistant' && last.content[0]?.type === 'text'
+      ? last.content[0].text
+      : '';
+    if (lastText.trim().length > 0) return;
+    appendSideChatAssistantText(agentId, sessionId, outputPreview);
+  }
+
+  /** Open (creating if needed) the side chat for the active session; optionally send a first prompt. */
+  async function openSideChat(initialPrompt?: string): Promise<void> {
+    const parent = rawState.activeSessionId;
+    if (!parent) return;
+    // Reuse the existing side chat for this session if it already exists.
+    if (!sideChatTargetBySession.value[parent]) {
+      let agentId: string;
+      try {
+        ({ agentId } = await getKimiWebApi().startBtw(parent));
+      } catch (err) {
+        pushOperationFailure('openSideChat', err, { sessionId: parent });
+        return;
+      }
+      rawState.sideChatMessagesByAgent = {
+        ...rawState.sideChatMessagesByAgent,
+        [agentId]: rawState.sideChatMessagesByAgent[agentId] ?? [],
+      };
+      sideChatTargetBySession.value = {
+        ...sideChatTargetBySession.value,
+        [parent]: { agentId },
+      };
+      connectEventsIfNeeded();
+      getEventConn()?.markSideChannelAgent(agentId);
+    }
+    if (initialPrompt && initialPrompt.trim()) {
+      await sendSideChatPrompt(initialPrompt.trim());
+    }
+  }
+
+  function closeSideChat(): void {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const { [sid]: _removed, ...rest } = sideChatTargetBySession.value;
+    void _removed;
+    sideChatTargetBySession.value = rest;
+  }
+
+  /** Send a plain prompt to the side-chat child (no plan/swarm/goal modes). */
+  async function sendSideChatPrompt(text: string): Promise<void> {
+    const target = activeSideChatTarget.value;
+    const trimmed = text.trim();
+    if (!target || !trimmed) return;
+    const sid = target.parentId;
+    const agentId = target.agentId;
+    rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: true };
+    const userMsg: AppMessage = {
+      id: nextOptimisticMsgId(),
+      sessionId: sid,
+      role: 'user',
+      content: [{ type: 'text', text: trimmed }],
+      createdAt: new Date().toISOString(),
+      metadata: { 'kimiWeb.optimisticUserMessage': true },
+    };
+    appendSideChatMessage(agentId, userMsg);
+    try {
+      const result = await getKimiWebApi().submitPrompt(sid, {
+        content: [{ type: 'text', text: trimmed }],
+        agentId,
+      });
+      stampLastSideChatUserPrompt(agentId, result.promptId);
+      rawState.sideChatUserMessageIdsBySession = {
+        ...rawState.sideChatUserMessageIdsBySession,
+        [sid]: [...(rawState.sideChatUserMessageIdsBySession[sid] ?? []), result.userMessageId],
+      };
+    } catch (err) {
+      pushOperationFailure('sendSideChatPrompt', err, { sessionId: sid });
+      removeLastSideChatUserMessage(agentId);
+      rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: false };
+    }
+  }
+
+  // When a session is deleted, drop its side-chat target so it cannot leak into a
+  // later session that happens to reuse the same id.
+  function clearSideChatForSession(sessionId: string): void {
+    if (!sideChatTargetBySession.value[sessionId]) return;
+    const { [sessionId]: _removed, ...rest } = sideChatTargetBySession.value;
+    void _removed;
+    sideChatTargetBySession.value = rest;
+  }
+
+  return {
+    sideChatTargetBySession,
+    sideChatSessionId,
+    sideChatVisible,
+    sideChatSending,
+    sideChatRunning,
+    sideChatTurns,
+    appendSideChatAssistantText,
+    finishSideChatAgent,
+    openSideChat,
+    closeSideChat,
+    sendSideChatPrompt,
+    clearSideChatForSession,
+  };
+}
+
+export type UseSideChat = ReturnType<typeof useSideChat>;
diff --git a/apps/kimi-web/src/composables/client/useTaskPoller.ts b/apps/kimi-web/src/composables/client/useTaskPoller.ts
new file mode 100644
index 000000000..f7b0327b2
--- /dev/null
+++ b/apps/kimi-web/src/composables/client/useTaskPoller.ts
@@ -0,0 +1,264 @@
+// apps/kimi-web/src/composables/client/useTaskPoller.ts
+// Background task output polling and the 1-second task clock used to keep
+// running-task elapsed timers live in the UI.
+
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
+import { getKimiWebApi } from '../../api';
+import type { AppTask } from '../../api/types';
+import { keepLiveSubagents } from '../../lib/taskMerge';
+import type { ExtendedState } from '../useKimiWebClient';
+
+const TASK_OUTPUT_POLL_INTERVAL_MS = 1000;
+const TASK_OUTPUT_POLL_BYTES = 4096;
+const TASK_OUTPUT_FINAL_BYTES = 32 * 1024;
+
+export interface UseTaskPoller {
+  /** 1-second clock that ticks while an active app task is running. */
+  taskClock: Readonly<Ref<number>>;
+  /** One-off load of the task list for a session, plus terminal-output backfill. */
+  loadTasksForSession: (sessionId: string) => Promise<void>;
+}
+
+export function useTaskPoller(
+  rawState: ExtendedState,
+  activeAppTasks: ComputedRef<AppTask[]>,
+): UseTaskPoller {
+  let taskOutputPollTimer: ReturnType<typeof setInterval> | null = null;
+  let lastPolledSessionId: string | undefined;
+  const fetchedTerminalTaskOutputIds = new Set<string>();
+
+  async function loadTasksForSession(sessionId: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const taskList = await api.listTasks(sessionId);
+      rawState.tasksBySession = {
+        ...rawState.tasksBySession,
+        // Keep WS-delivered swarm subagents that REST /tasks omits (see keepLiveSubagents).
+        [sessionId]: keepLiveSubagents(taskList, rawState.tasksBySession[sessionId] ?? []),
+      };
+      // Completed tasks may have real terminal output that never streamed over
+      // WS. Fetch it once now so the rows are expandable when the session opens.
+      await fetchTerminalTaskOutputs(sessionId, taskList);
+    } catch {
+      // Tasks are side data; old/stale sessions may fail without blocking messages.
+    }
+  }
+
+  /**
+   * Fetch the final output snapshot for terminal tasks that lack real streamed
+   * outputLines. Called once after loading the task list so already-completed
+   * tasks are clickable immediately.
+   */
+  async function fetchTerminalTaskOutputs(
+    sessionId: string,
+    taskList?: AppTask[],
+  ): Promise<void> {
+    if (rawState.activeSessionId !== sessionId) return;
+
+    const tasks = taskList ?? rawState.tasksBySession[sessionId] ?? [];
+    const api = getKimiWebApi();
+    const outputByTaskId = new Map<string, { preview: string; bytes?: number }>();
+
+    await Promise.all(
+      tasks.map(async (task) => {
+        const isTerminal =
+          task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled';
+        if (!isTerminal) return;
+        if (fetchedTerminalTaskOutputIds.has(task.id)) return;
+        if ((task.outputLines?.length ?? 0) > 0) return;
+
+        try {
+          const withOutput = await api.getTask(sessionId, task.id, {
+            withOutput: true,
+            outputBytes: TASK_OUTPUT_FINAL_BYTES,
+          });
+          if (withOutput.outputPreview !== undefined) {
+            outputByTaskId.set(task.id, {
+              preview: withOutput.outputPreview,
+              bytes: withOutput.outputBytes,
+            });
+          }
+        } catch {
+          // Task may have finished between listTasks and getTask; ignore.
+        } finally {
+          fetchedTerminalTaskOutputIds.add(task.id);
+        }
+      }),
+    );
+
+    if (outputByTaskId.size === 0) return;
+
+    const existing = rawState.tasksBySession[sessionId] ?? [];
+    rawState.tasksBySession = {
+      ...rawState.tasksBySession,
+      [sessionId]: existing.map((t) => {
+        const polled = outputByTaskId.get(t.id);
+        if (!polled) return t;
+        return { ...t, outputPreview: polled.preview, outputBytes: polled.bytes };
+      }),
+    };
+  }
+
+  /**
+   * Poll background task output for a session. Mirrors the TUI's 1-second refresh:
+   * refresh the task list, then fetch tail output for running tasks and a final
+   * snapshot for terminal tasks that haven't received output yet.
+   */
+  async function pollTaskOutputForSession(sessionId: string): Promise<void> {
+    if (rawState.activeSessionId !== sessionId) return;
+
+    const api = getKimiWebApi();
+    let taskList: AppTask[];
+    try {
+      taskList = await api.listTasks(sessionId);
+    } catch {
+      return;
+    }
+
+    const outputByTaskId = new Map<string, { preview: string; bytes?: number }>();
+
+    await Promise.all(
+      taskList.map(async (task) => {
+        const isRunning = task.status === 'running';
+        const isTerminal =
+          task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled';
+        if (!isRunning && !isTerminal) return;
+
+        // Running tasks: poll tail continuously. Terminal tasks: fetch a final
+        // snapshot once if we have not already received real streamed output.
+        // outputPreview may be a placeholder (`$ <command>`) or a partial tail,
+        // so we intentionally do not skip terminal tasks just because outputPreview
+        // is present.
+        if (isTerminal) {
+          if (fetchedTerminalTaskOutputIds.has(task.id)) return;
+          if ((task.outputLines?.length ?? 0) > 0) return;
+        }
+
+        try {
+          const withOutput = await api.getTask(sessionId, task.id, {
+            withOutput: true,
+            outputBytes: isRunning ? TASK_OUTPUT_POLL_BYTES : TASK_OUTPUT_FINAL_BYTES,
+          });
+          if (withOutput.outputPreview !== undefined) {
+            outputByTaskId.set(task.id, {
+              preview: withOutput.outputPreview,
+              bytes: withOutput.outputBytes,
+            });
+          }
+        } catch {
+          // Task may have finished between listTasks and getTask; ignore.
+        } finally {
+          if (isTerminal) {
+            fetchedTerminalTaskOutputIds.add(task.id);
+          }
+        }
+      }),
+    );
+
+    const existing = rawState.tasksBySession[sessionId] ?? [];
+    const existingById = new Map(existing.map((t) => [t.id, t] as const));
+
+    const refreshed: AppTask[] = taskList.map((fresh) => {
+      const old = existingById.get(fresh.id);
+      const polled = outputByTaskId.get(fresh.id);
+      return {
+        ...fresh,
+        // Preserve any WS-driven outputLines (future taskProgress events).
+        outputLines: old?.outputLines,
+        outputPreview: polled?.preview ?? old?.outputPreview,
+        outputBytes: polled?.bytes ?? old?.outputBytes,
+      };
+    });
+
+    rawState.tasksBySession = {
+      ...rawState.tasksBySession,
+      // Keep WS-delivered swarm subagents that REST /tasks omits (see keepLiveSubagents).
+      [sessionId]: keepLiveSubagents(refreshed, existing),
+    };
+  }
+
+  function startTaskOutputPolling(sessionId: string): void {
+    if (taskOutputPollTimer !== null && lastPolledSessionId === sessionId) {
+      return;
+    }
+    stopTaskOutputPolling();
+    lastPolledSessionId = sessionId;
+    void pollTaskOutputForSession(sessionId);
+    taskOutputPollTimer = setInterval(() => {
+      if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+        return;
+      }
+      if (rawState.activeSessionId === sessionId) {
+        void pollTaskOutputForSession(sessionId);
+      } else {
+        stopTaskOutputPolling();
+      }
+    }, TASK_OUTPUT_POLL_INTERVAL_MS);
+  }
+
+  function stopTaskOutputPolling(): void {
+    if (taskOutputPollTimer !== null) {
+      clearInterval(taskOutputPollTimer);
+      taskOutputPollTimer = null;
+    }
+    lastPolledSessionId = undefined;
+    fetchedTerminalTaskOutputIds.clear();
+  }
+
+  // A 1-second clock that only ticks while a task is running, so a running task's
+  // elapsed-time label keeps counting up. UI task mappers read Date.now() once per
+  // evaluation; without this the `tasks` computed only re-ran when tasksBySession
+  // changed, freezing the timer at whatever it read on the first render.
+  const taskClock = ref(0);
+  let taskClockTimer: ReturnType<typeof setInterval> | null = null;
+  watch(
+    () => activeAppTasks.value.some((tk) => tk.status === 'running'),
+    (hasRunning) => {
+      if (hasRunning && taskClockTimer === null) {
+        taskClockTimer = setInterval(() => {
+          taskClock.value = (taskClock.value + 1) % Number.MAX_SAFE_INTEGER;
+        }, 1000);
+      } else if (!hasRunning && taskClockTimer !== null) {
+        clearInterval(taskClockTimer);
+        taskClockTimer = null;
+      }
+    },
+    { immediate: true },
+  );
+
+  // Start/stop task output polling based on whether the active session has
+  // running background tasks. This mirrors the TUI's 1-second refresh.
+  watch(
+    () => {
+      const sid = rawState.activeSessionId;
+      if (!sid) return { sid: undefined as string | undefined, hasRunning: false };
+      const tasks = rawState.tasksBySession[sid] ?? [];
+      return { sid, hasRunning: tasks.some((t) => t.status === 'running') };
+    },
+    ({ sid, hasRunning }, _prev, onCleanup) => {
+      let cleanupTimer: ReturnType<typeof setTimeout> | undefined;
+      if (hasRunning && sid !== undefined) {
+        startTaskOutputPolling(sid);
+      } else if (sid !== undefined) {
+        // All tasks finished — wait a beat to catch final output, then stop.
+        cleanupTimer = setTimeout(() => {
+          const tasks = rawState.tasksBySession[sid] ?? [];
+          if (!tasks.some((t) => t.status === 'running')) {
+            stopTaskOutputPolling();
+          }
+        }, 1500);
+      } else {
+        stopTaskOutputPolling();
+      }
+      onCleanup(() => {
+        if (cleanupTimer !== undefined) clearTimeout(cleanupTimer);
+      });
+    },
+    { deep: true, immediate: true },
+  );
+
+  return {
+    taskClock: computed(() => taskClock.value),
+    loadTasksForSession,
+  };
+}
diff --git a/apps/kimi-web/src/composables/client/useWorkspaceState.ts b/apps/kimi-web/src/composables/client/useWorkspaceState.ts
new file mode 100644
index 000000000..54232f260
--- /dev/null
+++ b/apps/kimi-web/src/composables/client/useWorkspaceState.ts
@@ -0,0 +1,1657 @@
+// apps/kimi-web/src/composables/client/useWorkspaceState.ts
+// Workspace/session actions: session lifecycle, workspace CRUD, prompt
+// submission + queueing, approvals/questions/tasks, mode toggles, goals,
+// file/diff/git actions, auth/config, and URL<->session routing.
+//
+// The event reducer wiring (applyEvent, connectEventsIfNeeded, eventConn) and
+// the view-model computeds stay in the facade; cross-dependencies are injected
+// here as params.
+
+import { type ComputedRef, type Ref } from 'vue';
+import { getKimiWebApi } from '../../api';
+import { isDaemonApiError } from '../../api/errors';
+import type {
+  AppConfig,
+  AppMessage,
+  AppSession,
+  AppWorkspace,
+  ApprovalDecision,
+  ApprovalResponse,
+  FsEntry,
+  KimiEventConnection,
+  QuestionResponse,
+} from '../../api/types';
+import { safeRemove, STORAGE_KEYS } from '../../lib/storage';
+import { parseDiff } from '../../lib/parseDiff';
+import { readSessionIdFromLocation, sessionUrl } from '../../lib/sessionRoute';
+import type { SessionUrlMode } from '../../lib/sessionRoute';
+import type { ActivityState, ConversationStatus, DiffViewLine, PermissionMode } from '../../types';
+import type { ExtendedState, PromptAttachment } from '../useKimiWebClient';
+import type { UseModelProviderState } from './useModelProviderState';
+import type { UseSideChat } from './useSideChat';
+import type { UseTaskPoller } from './useTaskPoller';
+
+const MESSAGES_PAGE_SIZE = 50;
+const PROMPT_NOT_FOUND_CODE = 40402;
+
+type SyncSessionResult = 'ok' | 'not-found' | 'failed';
+
+export interface PersistSessionProfilePatch {
+  model?: string;
+  permissionMode?: string;
+  planMode?: boolean;
+  swarmMode?: boolean;
+  goalObjective?: string;
+  goalControl?: 'pause' | 'resume' | 'cancel';
+  thinking?: string;
+}
+
+export interface UseWorkspaceStateDeps {
+  taskPoller: UseTaskPoller;
+  sideChat: UseSideChat;
+  modelProvider: UseModelProviderState;
+  pushOperationFailure: (
+    operation: string,
+    err: unknown,
+    opts?: { title?: string; message?: string; sessionId?: string },
+  ) => void;
+  activity: ComputedRef<ActivityState>;
+  inFlightPromptSessions: Set<string>;
+  sessionsKnownEmpty: Set<string>;
+  // rawState.sessions mutation funnel, owned by the facade. This module never
+  // assigns rawState.sessions directly — it goes through these.
+  setSessions: (next: AppSession[]) => void;
+  updateSession: (id: string, update: (session: AppSession) => AppSession) => void;
+  upsertSessionFront: (session: AppSession) => void;
+  appendSession: (session: AppSession) => void;
+  removeSession: (id: string) => void;
+  setActiveSessionId: (id: string | undefined) => void;
+  /** Update one session's message list via a function of the current list. */
+  updateSessionMessages: (
+    sessionId: string,
+    update: (messages: AppMessage[]) => AppMessage[],
+  ) => void;
+  nextOptimisticMsgId: () => string;
+  getEventConn: () => KimiEventConnection | null;
+  syncSessionFromSnapshot: (sessionId: string) => Promise<SyncSessionResult>;
+  subscribeToSessionEvents: (sessionId: string) => void;
+  hasLoadedMessages: (sessionId: string) => boolean;
+  refreshSessionStatus: (sessionId: string) => Promise<void>;
+  persistSessionProfile: (patch: PersistSessionProfilePatch) => void;
+  mergedWorkspaces: ComputedRef<AppWorkspace[]>;
+  status: ComputedRef<ConversationStatus>;
+  workspaceIdForSession: (s: { workspaceId?: string; cwd: string }) => string;
+  savePermissionToStorage: (mode: PermissionMode) => void;
+  savePlanModeToStorage: (v: boolean) => void;
+  saveSwarmModeToStorage: (v: boolean) => void;
+  saveGoalModeToStorage: (v: boolean) => void;
+  saveUnread: (changes: Record<string, boolean>) => void;
+  saveActiveWorkspaceToStorage: (id: string) => void;
+  saveHiddenWorkspacesToStorage: (roots: string[]) => void;
+  goalErrorMessage: (err: unknown) => string | undefined;
+  basename: (path: string) => string;
+  resetFastMoon: () => void;
+  initialized: Ref<boolean>;
+  selectedDiffPath: Ref<string | null>;
+  fileDiffLines: Ref<DiffViewLine[]>;
+  fileDiffLoading: Ref<boolean>;
+}
+
+export function useWorkspaceState(rawState: ExtendedState, deps: UseWorkspaceStateDeps) {
+  const {
+    taskPoller,
+    sideChat,
+    modelProvider,
+    pushOperationFailure,
+    activity,
+    inFlightPromptSessions,
+    sessionsKnownEmpty,
+    setSessions,
+    updateSession,
+    upsertSessionFront,
+    appendSession,
+    removeSession,
+    setActiveSessionId,
+    updateSessionMessages,
+    nextOptimisticMsgId,
+    getEventConn,
+    syncSessionFromSnapshot,
+    subscribeToSessionEvents,
+    hasLoadedMessages,
+    refreshSessionStatus,
+    persistSessionProfile,
+    mergedWorkspaces,
+    status,
+    workspaceIdForSession,
+    savePermissionToStorage,
+    savePlanModeToStorage,
+    saveSwarmModeToStorage,
+    saveGoalModeToStorage,
+    saveUnread,
+    saveActiveWorkspaceToStorage,
+    saveHiddenWorkspacesToStorage,
+    goalErrorMessage,
+    basename,
+    resetFastMoon,
+    initialized,
+    selectedDiffPath,
+    fileDiffLines,
+    fileDiffLoading,
+  } = deps;
+
+  async function loadOlderMessages(sessionId: string): Promise<void> {
+    if (rawState.messagesLoadingMoreBySession[sessionId]) return;
+    const current = rawState.messagesBySession[sessionId];
+    if (!current || current.length === 0) return;
+
+    const beforeId = current[0]!.id;
+    rawState.messagesLoadingMoreBySession = {
+      ...rawState.messagesLoadingMoreBySession,
+      [sessionId]: true,
+    };
+    rawState.messagesLoadMoreErrorBySession = {
+      ...rawState.messagesLoadMoreErrorBySession,
+      [sessionId]: false,
+    };
+    try {
+      const page = await getKimiWebApi().listMessages(sessionId, {
+        beforeId,
+        pageSize: MESSAGES_PAGE_SIZE,
+      });
+      // Server returns newest-first; the UI keeps messages in chronological order.
+      const older = [...page.items].reverse();
+      // Live events may have appended messages while the request was in flight;
+      // the updater receives the latest array so those messages are not overwritten.
+      updateSessionMessages(sessionId, (latest) => [...older, ...latest]);
+      rawState.messagesHasMoreBySession = {
+        ...rawState.messagesHasMoreBySession,
+        [sessionId]: page.hasMore,
+      };
+    } catch (err) {
+      rawState.messagesLoadMoreErrorBySession = {
+        ...rawState.messagesLoadMoreErrorBySession,
+        [sessionId]: true,
+      };
+      pushOperationFailure('loadOlderMessages', err, { sessionId });
+    } finally {
+      rawState.messagesLoadingMoreBySession = {
+        ...rawState.messagesLoadingMoreBySession,
+        [sessionId]: false,
+      };
+    }
+  }
+
+  function refreshSessionSidecars(sessionId: string): void {
+    void taskPoller.loadTasksForSession(sessionId);
+    void loadGitStatus(sessionId);
+    void refreshSessionStatus(sessionId);
+    if (!Object.prototype.hasOwnProperty.call(modelProvider.skillsBySession.value, sessionId)) {
+      void modelProvider.loadSkillsForSession(sessionId);
+    }
+  }
+
+  async function loadFileDiff(path: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    selectedDiffPath.value = path;
+    fileDiffLines.value = [];
+    fileDiffLoading.value = true;
+    try {
+      const api = getKimiWebApi();
+      const result = await api.getFileDiff(sid, path);
+      // Guard against a stale response when the user tapped another file.
+      if (selectedDiffPath.value !== path) return;
+      fileDiffLines.value = parseDiff(result.diff);
+    } catch (err) {
+      // A single file's diff failing (a new/untracked/binary/deleted file the
+      // daemon can't diff) is LOCAL to this pane, not a session-level fault — the
+      // DiffView already shows a graceful "no diff" state when the lines are
+      // empty. Surfacing it as a global "kimi server api" error toast on a routine
+      // file click is disproportionate, so log it for the trace export instead.
+      if (selectedDiffPath.value === path) fileDiffLines.value = [];
+      console.warn('[loadFileDiff] diff unavailable for', path, err);
+    } finally {
+      if (selectedDiffPath.value === path) fileDiffLoading.value = false;
+    }
+  }
+
+  /** Close the ~/diff line-by-line view and return to the changed-file list. */
+  function clearFileDiff(): void {
+    selectedDiffPath.value = null;
+    fileDiffLines.value = [];
+    fileDiffLoading.value = false;
+  }
+
+  /** Load git status for a session — defensive, never throws */
+  async function loadGitStatus(sessionId: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const result = await api.getGitStatus(sessionId);
+      rawState.gitStatusBySession = {
+        ...rawState.gitStatusBySession,
+        [sessionId]: result,
+      };
+    } catch {
+      // Stale/old sessions may 404 — leave undefined, no crash
+    }
+  }
+
+  /** Fetch auth readiness from GET /api/v1/auth. Defensive — never throws. */
+  async function checkAuth(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const result = await api.getAuth();
+      rawState.authReady = result.ready;
+      rawState.defaultModel = result.defaultModel;
+      rawState.managedProviderStatus = result.managedProvider?.status ?? null;
+    } catch {
+      // Daemon may not have this endpoint yet; leave defaults (authReady: false)
+    }
+  }
+
+  /** Fetch global config from GET /api/v1/config. Defensive — never throws. */
+  async function loadConfig(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      rawState.config = await api.getConfig();
+    } catch {
+      // Daemon may not have this endpoint yet; leave null
+    }
+  }
+
+  /** Update global config via POST /api/v1/config. */
+  async function updateConfig(patch: Partial<AppConfig>): Promise<boolean> {
+    try {
+      const api = getKimiWebApi();
+      const next = await api.setConfig(patch);
+      rawState.config = next;
+      rawState.defaultModel = next.defaultModel ?? null;
+      return true;
+    } catch (err) {
+      pushOperationFailure('setConfig', err);
+      return false;
+    }
+  }
+
+  // Backend max page size for GET /sessions. Bigger pages mean fewer round-trips
+  // when draining the full session list.
+  const SESSION_PAGE_SIZE = 100;
+
+  /** Drain every page of sessions, newest first. A single global walk (instead of
+   *  per-workspace) so sessions whose cwd is not a registered workspace root are
+   *  still reachable after a refresh. */
+  async function listAllSessionsGlobal(): Promise<AppSession[]> {
+    const api = getKimiWebApi();
+    const items: AppSession[] = [];
+    let beforeId: string | undefined;
+    for (;;) {
+      const page = await api.listSessions({ pageSize: SESSION_PAGE_SIZE, beforeId });
+      items.push(...page.items);
+      if (!page.hasMore || page.items.length === 0) break;
+      beforeId = page.items[page.items.length - 1]!.id;
+    }
+    return items;
+  }
+
+  async function load(): Promise<void> {
+    rawState.loading = true;
+    try {
+      const api = getKimiWebApi();
+      // Parallel: health + meta + models
+      await Promise.all([
+        api.getHealth().catch(() => null),
+        api.getMeta().then((m) => {
+          rawState.serverVersion = m.serverVersion;
+          rawState.availableOpenInApps = m.openInApps;
+        }).catch(() => null),
+        modelProvider.loadModels(),
+      ]);
+
+      // Check auth readiness and global config (separate calls — defensive)
+      await checkAuth();
+      await loadConfig();
+
+      // Drain every session via a single global walk so sessions whose cwd is not
+      // a registered workspace root are still reachable after a refresh.
+      const sessions = await listAllSessionsGlobal().catch(() => [] as AppSession[]);
+      setSessions(sessions);
+
+      // Load workspaces (real if available, else derived from session cwds).
+      await loadWorkspaces();
+
+      // First load: pick the workspace of the most-recent session, unless the
+      // user already has a persisted active workspace that still exists.
+      const mostRecent = sessions[0];
+      const persisted = rawState.activeWorkspaceId;
+      const persistedStillExists =
+        persisted !== null && mergedWorkspaces.value.some((w) => w.id === persisted);
+      if (!persistedStillExists && mostRecent) {
+        selectWorkspace(workspaceIdForSession(mostRecent));
+      }
+
+      // URL deep link (/sessions/<id>) takes priority over auto-select. The
+      // session may live outside the loaded pages (e.g. archived) — fetch it then.
+      // selectSession syncs the active workspace off the (now present) entry.
+      bindSessionRoute();
+      const urlSessionId =
+        typeof window !== 'undefined' ? readSessionIdFromLocation(window.location) : undefined;
+      if (!rawState.activeSessionId && urlSessionId !== undefined) {
+        const available =
+          rawState.sessions.some((s) => s.id === urlSessionId) ||
+          (await fetchSessionIntoList(urlSessionId));
+        if (available) {
+          await selectSession(urlSessionId, { urlMode: 'replace' });
+        }
+      }
+
+      // Auto-select first session if none selected (also the fallback for a dead
+      // deep link — 'replace' rewrites the URL to the session actually shown).
+      if (!rawState.activeSessionId && sessions.length > 0) {
+        await selectSession(sessions[0]!.id, { urlMode: 'replace' });
+      }
+    } catch (err) {
+      pushOperationFailure('load', err);
+      // Do not re-throw — app stays mounted with empty sessions
+    } finally {
+      rawState.loading = false;
+      initialized.value = true;
+    }
+  }
+
+  /** Load workspaces from the daemon (falls back to derived in mergedWorkspaces). */
+  async function loadWorkspaces(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const [list, home] = await Promise.all([
+        api.listWorkspaces().catch(() => [] as AppWorkspace[]),
+        api.getFsHome().catch(() => ({ home: '', recentRoots: [] })),
+      ]);
+      rawState.workspaces = list;
+      rawState.fsHome = home.home || null;
+      rawState.recentRoots = home.recentRoots;
+    } catch {
+      // Defensive — derived workspaces still work off the loaded sessions.
+    }
+  }
+
+  /** Set the active workspace and persist it. */
+  function selectWorkspace(id: string): void {
+    rawState.activeWorkspaceId = id;
+    saveActiveWorkspaceToStorage(id);
+  }
+
+  /** Open a workspace in the main pane: clear the active session when the
+   *  workspace is empty so the centred composer is shown; otherwise activate
+   *  the most recent session in that workspace. */
+  function openWorkspace(id: string): void {
+    selectWorkspace(id);
+    const sessionsInWs = rawState.sessions.filter((s) => workspaceIdForSession(s) === id);
+    if (sessionsInWs.length > 0) {
+      const mostRecent = sessionsInWs[0];
+      if (mostRecent && mostRecent.id !== rawState.activeSessionId) {
+        // One user action (clicking the workspace) = one history entry.
+        void selectSession(mostRecent.id);
+      }
+    } else {
+      setActiveSessionId(undefined);
+      writeSessionUrl(undefined, 'push');
+    }
+  }
+
+  /** Upsert a workspace: preserve existing order when updating; prepend only
+   *  for truly new workspaces. */
+  function upsertWorkspacePreserveOrder(workspace: AppWorkspace): void {
+    // Re-adding a path the user previously removed should bring it back.
+    if (rawState.hiddenWorkspaceRoots.includes(workspace.root)) {
+      rawState.hiddenWorkspaceRoots = rawState.hiddenWorkspaceRoots.filter((r) => r !== workspace.root);
+      saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
+    }
+    const index = rawState.workspaces.findIndex(
+      (w) => w.id === workspace.id || w.root === workspace.root,
+    );
+    if (index === -1) {
+      rawState.workspaces = [workspace, ...rawState.workspaces];
+      return;
+    }
+    const next = [...rawState.workspaces];
+    next[index] = workspace;
+    rawState.workspaces = next;
+  }
+
+  type WorkspaceLifecycleEvent =
+    | { type: 'workspaceCreated'; workspace: AppWorkspace }
+    | { type: 'workspaceUpdated'; workspace: AppWorkspace }
+    | { type: 'workspaceDeleted'; workspaceId: string; root: string };
+
+  /** Apply a workspace lifecycle event broadcast by the daemon (multi-client sync).
+   *  Workspaces live outside the reducer in rawState, so these events are handled
+   *  here instead of in reduceAppEvent. */
+  function applyWorkspaceEvent(event: WorkspaceLifecycleEvent): void {
+    if (event.type === 'workspaceCreated' || event.type === 'workspaceUpdated') {
+      upsertWorkspacePreserveOrder(event.workspace);
+      return;
+    }
+    // workspaceDeleted — mirror the local deleteWorkspace so a removal initiated
+    // by another client stays hidden even though its surviving sessions would
+    // otherwise re-derive it in mergedWorkspaces.
+    const root =
+      rawState.workspaces.find((w) => w.id === event.workspaceId)?.root ?? event.root;
+    if (root && !rawState.hiddenWorkspaceRoots.includes(root)) {
+      rawState.hiddenWorkspaceRoots = [...rawState.hiddenWorkspaceRoots, root];
+      saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
+    }
+    rawState.workspaces = rawState.workspaces.filter(
+      (w) => w.id !== event.workspaceId && w.root !== root,
+    );
+    const removingActiveWorkspace =
+      rawState.activeWorkspaceId === event.workspaceId || rawState.activeWorkspaceId === root;
+    if (removingActiveWorkspace) {
+      const nextWorkspace = mergedWorkspaces.value[0]?.id ?? null;
+      rawState.activeWorkspaceId = nextWorkspace;
+      if (nextWorkspace) saveActiveWorkspaceToStorage(nextWorkspace);
+      else {
+        try {
+          safeRemove(STORAGE_KEYS.activeWorkspace);
+        } catch {
+          // ignore
+        }
+      }
+      setActiveSessionId(undefined);
+      rawState.sessionLoading = false;
+      clearFileDiff();
+      writeSessionUrl(undefined, 'replace');
+    }
+  }
+
+  /** Clear the active session without creating a new one. */
+  function clearActiveSession(): void {
+    setActiveSessionId(undefined);
+    writeSessionUrl(undefined, 'push');
+  }
+
+  /** Enter the "new session draft" state for a workspace: select it, clear the
+   *  active session, and show the onboarding composer. No backend session is
+   *  created until the user sends the first message. */
+  function openWorkspaceDraft(workspaceId: string): void {
+    selectWorkspace(workspaceId);
+    clearActiveSession();
+    clearFileDiff();
+  }
+
+  /**
+   * Create a session in a workspace — the one-click path (no cwd typing).
+   * Register/touch the workspace first when the daemon supports it; if that
+   * fails, fall back to the legacy cwd-only create path.
+   */
+  async function createSessionInWorkspace(workspaceId: string): Promise<AppSession | undefined> {
+    const ws = mergedWorkspaces.value.find((w) => w.id === workspaceId);
+    if (!ws) return undefined;
+    try {
+      const api = getKimiWebApi();
+      let workspaceIdForCreate: string | undefined;
+      let cwdForCreate = ws.root;
+      try {
+        const registered = await api.addWorkspace({ root: ws.root });
+        workspaceIdForCreate = registered.id;
+        cwdForCreate = registered.root;
+        upsertWorkspacePreserveOrder(registered);
+      } catch {
+        // Older daemons may not have /workspaces. In that mode, sending a local
+        // path-like workspace id as workspace_id would fail validation, so use
+        // metadata.cwd only.
+      }
+      const session = await api.createSession({ workspaceId: workspaceIdForCreate, cwd: cwdForCreate });
+      upsertSessionFront(session);
+      selectWorkspace(session.workspaceId ?? workspaceIdForCreate ?? workspaceId);
+      // Locally created sessions start empty; trust that so the empty-composer
+      // renders immediately instead of flashing a loading state.
+      sessionsKnownEmpty.add(session.id);
+      await selectSession(session.id);
+      return session;
+    } catch (err) {
+      pushOperationFailure('createSessionInWorkspace', err);
+      return undefined;
+    }
+  }
+
+  /**
+   * Create a session and immediately submit the first prompt.
+   * This is the unified path when there is no active session (e.g. after
+   * clicking "+" or in an empty workspace).
+   */
+  async function startSessionAndSendPrompt(
+    workspaceId: string,
+    text: string,
+    attachments?: PromptAttachment[],
+  ): Promise<void> {
+    const ws = mergedWorkspaces.value.find((w) => w.id === workspaceId);
+    if (!ws) return;
+    try {
+      const api = getKimiWebApi();
+      let workspaceIdForCreate: string | undefined;
+      let cwdForCreate = ws.root;
+      try {
+        const registered = await api.addWorkspace({ root: ws.root });
+        workspaceIdForCreate = registered.id;
+        cwdForCreate = registered.root;
+        upsertWorkspacePreserveOrder(registered);
+      } catch {
+        // Older daemons may not have /workspaces.
+      }
+      const draftPick = modelProvider.draftModel.value ?? undefined;
+      const session = await api.createSession({
+        workspaceId: workspaceIdForCreate,
+        cwd: cwdForCreate,
+        model: draftPick,
+      });
+      modelProvider.draftModel.value = null; // applied — the next draft starts from the default
+      // The create echo may return model as '' (same daemon quirk as /profile);
+      // keep the user's pick so the status line doesn't snap back to the default.
+      const created =
+        draftPick !== undefined && (!session.model || session.model.length === 0)
+          ? { ...session, model: draftPick }
+          : session;
+      upsertSessionFront(created);
+      selectWorkspace(session.workspaceId ?? workspaceIdForCreate ?? workspaceId);
+      // NOTE: do NOT mark this session known-empty. Unlike "open a new empty
+      // session" (createSession), here we immediately send a prompt: keeping
+      // sessionLoading=true through the snapshot avoids flashing the empty-session
+      // composer before the optimistic user message lands. selectSession resolves,
+      // then submitPromptInternal adds the user turn synchronously (no await in
+      // between), so the view goes loading → message with no empty-composer frame.
+      await selectSession(session.id);
+      await submitPromptInternal(session.id, text, attachments);
+    } catch (err) {
+      pushOperationFailure('startSessionAndSendPrompt', err);
+    }
+  }
+
+  /**
+   * Add a workspace by folder path. Tries the daemon registry; on failure (or in
+   * fallback mode) creates a locally-derived workspace from the path and
+   * remembers it, then selects it.
+   */
+  async function addWorkspaceByPath(root: string): Promise<void> {
+    const trimmed = root.trim();
+    if (!trimmed) return;
+    const api = getKimiWebApi();
+    try {
+      const ws = await api.addWorkspace({ root: trimmed });
+      upsertWorkspacePreserveOrder(ws);
+      openWorkspaceDraft(ws.id);
+    } catch {
+      // Fallback: remember a derived workspace locally (id = root = path).
+      const existing = rawState.workspaces.find((w) => w.root === trimmed);
+      if (!existing) {
+        rawState.workspaces = [
+          {
+            id: trimmed,
+            root: trimmed,
+            name: basename(trimmed),
+            isGitRepo: false,
+            sessionCount: 0,
+          },
+          ...rawState.workspaces,
+        ];
+      }
+      openWorkspaceDraft(trimmed);
+    }
+  }
+
+  /**
+   * Browse subdirectories under `path` (defaults to the daemon $HOME). Used by the
+   * add-workspace folder browser. Defensive: returns an empty path on error so
+   * the dialog can fall back to the paste-path field.
+   */
+  async function browseFs(path?: string): Promise<import('../../api/types').FsBrowseResult> {
+    try {
+      const api = getKimiWebApi();
+      return await api.browseFs(path);
+    } catch {
+      return { path: '', parent: null, entries: [] };
+    }
+  }
+
+  /** Start directory + recently-used roots for the folder browser. */
+  async function getFsHome(): Promise<{ home: string; recentRoots: string[] }> {
+    try {
+      const api = getKimiWebApi();
+      return await api.getFsHome();
+    } catch {
+      return { home: '', recentRoots: [] };
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // URL ↔ session binding (no router): '/' ↔ /sessions/<id>
+  // urlMode semantics: 'push' = user navigation (new history entry); 'replace' =
+  // programmatic/auto selection (first load, fallback after delete); 'none' =
+  // popstate-driven (the URL is already correct — writing it again would loop).
+  // ---------------------------------------------------------------------------
+
+  function writeSessionUrl(sessionId: string | undefined, mode: SessionUrlMode): void {
+    if (mode === 'none') return;
+    if (typeof window === 'undefined' || !window.history) return;
+    const target = sessionUrl(sessionId);
+    if (window.location.pathname === target) return;
+    try {
+      if (mode === 'push') window.history.pushState(null, '', target);
+      else window.history.replaceState(null, '', target);
+    } catch {
+      // history API unavailable (e.g. sandboxed iframe) — URL sync is best-effort
+    }
+  }
+
+  /** Fetch a session that is not in the loaded list (deep link beyond the first
+      page) and append it. Returns false when the daemon doesn't know it. */
+  async function fetchSessionIntoList(sessionId: string): Promise<boolean> {
+    try {
+      const session = await getKimiWebApi().getSession(sessionId);
+      if (!rawState.sessions.some((s) => s.id === session.id)) {
+        // Append, not prepend: the list is recency-ordered and a deep-linked old
+        // session shouldn't displace the most-recent ones at the top.
+        appendSession(session);
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function onSessionRoutePopState(): void {
+    const id = readSessionIdFromLocation(window.location);
+    if (id === undefined) {
+      // Back/forward landed on '/' — no active session.
+      setActiveSessionId(undefined);
+      return;
+    }
+    if (id === rawState.activeSessionId) return;
+    if (rawState.sessions.some((s) => s.id === id)) {
+      void selectSession(id, { urlMode: 'none' });
+      return;
+    }
+    // A history entry can point at a session that has since been deleted (or one
+    // outside the loaded page): try to fetch it; on failure fall back to the most
+    // recent session and FIX the URL so the bad entry doesn't stick around.
+    void (async () => {
+      if (await fetchSessionIntoList(id)) {
+        await selectSession(id, { urlMode: 'none' });
+        return;
+      }
+      const next = rawState.sessions[0];
+      if (next) {
+        await selectSession(next.id, { urlMode: 'replace' });
+      } else {
+        setActiveSessionId(undefined);
+        writeSessionUrl(undefined, 'replace');
+      }
+    })();
+  }
+
+  let sessionRouteBound = false;
+  function bindSessionRoute(): void {
+    if (sessionRouteBound || typeof window === 'undefined') return;
+    sessionRouteBound = true;
+    window.addEventListener('popstate', onSessionRoutePopState);
+  }
+
+  async function selectSession(
+    sessionId: string,
+    opts?: { urlMode?: SessionUrlMode },
+  ): Promise<void> {
+    const messagesLoaded = hasLoadedMessages(sessionId);
+    // Only sessions created locally in this client are trusted to be empty.
+    // The daemon-reported messageCount can be stale for old sessions, so relying
+    // on it causes the empty-composer to flash before the real snapshot arrives.
+    // A locally created session has no history to load: show the empty composer
+    // immediately by skipping the `sessionLoading` flag (no flash), while the
+    // snapshot still loads in the background like any other first open.
+    const knownEmpty = !messagesLoaded && sessionsKnownEmpty.has(sessionId);
+    // Single-use: after this select resolves the session is no longer "known empty".
+    sessionsKnownEmpty.delete(sessionId);
+    try {
+      // Write the URL synchronously (before any await) so rapid clicks lay down
+      // history entries in click order.
+      writeSessionUrl(sessionId, opts?.urlMode ?? 'push');
+      rawState.sessionLoading = !messagesLoaded && !knownEmpty;
+      setActiveSessionId(sessionId);
+      resetFastMoon();
+      // Opening a session clears its unread dot.
+      if (rawState.unreadBySession[sessionId]) {
+        rawState.unreadBySession = { ...rawState.unreadBySession, [sessionId]: false };
+        saveUnread({ [sessionId]: false });
+      }
+      // A diff belongs to the session it was loaded from — drop it on switch.
+      clearFileDiff();
+
+      // NOTE: persisted sessions are directly promptable on the current daemon —
+      // selecting one and sending a message just works, no re-activation needed.
+
+      // Keep the active workspace in sync with the selected session.
+      const selected = rawState.sessions.find((s) => s.id === sessionId);
+      if (selected) {
+        const wid = workspaceIdForSession(selected);
+        if (rawState.activeWorkspaceId !== wid) selectWorkspace(wid);
+      }
+
+      if (!messagesLoaded) {
+        // First open: full snapshot → seed → subscribe(asOfSeq).
+        const result = await syncSessionFromSnapshot(sessionId);
+        if (result === 'not-found') return;
+      } else {
+        // Re-open: resume from the tracked cursor; the daemon replays any
+        // missed durable events (or answers resync_required → snapshot).
+        subscribeToSessionEvents(sessionId);
+      }
+
+      // Refresh sidecars AFTER the snapshot settles so status/usage updates
+      // aren't overwritten by syncSessionFromSnapshot.
+      refreshSessionSidecars(sessionId);
+    } catch (err) {
+      pushOperationFailure('selectSession', err, { sessionId });
+    } finally {
+      if (rawState.activeSessionId === sessionId) {
+        rawState.sessionLoading = false;
+      }
+    }
+  }
+
+  async function createSession(cwd: string, opts?: { title?: string; model?: string }): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      const session = await api.createSession({ cwd, title: opts?.title, model: opts?.model });
+      upsertSessionFront(session);
+      // Locally created sessions start empty; trust that so the empty-composer
+      // renders immediately instead of flashing a loading state.
+      sessionsKnownEmpty.add(session.id);
+      await selectSession(session.id);
+    } catch (err) {
+      pushOperationFailure('createSession', err);
+    }
+  }
+
+  /** Internal: submit a prompt to a specific session, bypassing the queue check.
+      Returns true when the daemon accepted the prompt. */
+  async function submitPromptInternal(sid: string, text: string, attachments?: PromptAttachment[]): Promise<boolean> {
+    // Mark this session as having a prompt in flight BEFORE any await, so a racing
+    // sendPrompt sees it and enqueues. Cleared when activity returns to idle.
+    inFlightPromptSessions.add(sid);
+    rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: true };
+    const tempId = nextOptimisticMsgId();
+    try {
+      const api = getKimiWebApi();
+      const content: import('../../api/types').AppMessageContent[] = [];
+      if (text) content.push({ type: 'text', text });
+      for (const att of attachments ?? []) {
+        if (att.kind === 'video') content.push({ type: 'video', source: { kind: 'file', fileId: att.fileId } });
+        else content.push({ type: 'image', source: { kind: 'file', fileId: att.fileId } });
+      }
+      if (content.length === 0) {
+        inFlightPromptSessions.delete(sid);
+        rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
+        return false;
+      }
+
+      // OPTIMISTICALLY add the user message to local state BEFORE awaiting the
+      // submit.  The real daemon does NOT emit a user-message event over WS, so
+      // without this the user's own text never appears in the transcript.
+      const optimisticMsg: AppMessage = {
+        id: tempId,
+        sessionId: sid,
+        role: 'user',
+        content,
+        createdAt: new Date().toISOString(),
+        metadata: { 'kimiWeb.optimisticUserMessage': true },
+      };
+      updateSessionMessages(sid, (msgs) => [...msgs, optimisticMsg]);
+
+      // The daemon now requires `model` + `thinking` on every prompt. Resolve the
+      // model from the session (falls back to the daemon's default_model) and the
+      // thinking level from the user's setting.
+      const promptSession = rawState.sessions.find((s) => s.id === sid);
+      const model =
+        (promptSession?.model && promptSession.model.length > 0
+          ? promptSession.model
+          : rawState.defaultModel) ?? undefined;
+
+      if (rawState.goalMode && text) {
+        try {
+          await api.updateSession(sid, { goalObjective: text.trim() });
+        } catch (err) {
+          pushOperationFailure('createGoal', err, { sessionId: sid });
+          inFlightPromptSessions.delete(sid);
+          rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
+          updateSessionMessages(sid, (msgs) =>
+            msgs.some((m) => m.id === tempId) ? msgs.filter((m) => m.id !== tempId) : msgs,
+          );
+          return false;
+        }
+      }
+
+      const result = await api.submitPrompt(sid, {
+        content,
+        model,
+        thinking: rawState.thinking,
+        permissionMode: rawState.permission,
+        planMode: rawState.planMode,
+        swarmMode: rawState.swarmMode,
+      });
+
+      if (rawState.goalMode) {
+        rawState.goalMode = false;
+        saveGoalModeToStorage(false);
+      }
+
+      // Authoritative prompt_id for :abort — race-free (the projector binding can
+      // lose to a fast turn.started and synthesize a `pr_…` id the daemon rejects).
+      rawState.promptIdBySession = { ...rawState.promptIdBySession, [sid]: result.promptId };
+
+      // Reconcile without changing the id: ChatPane keys user turns by message id,
+      // so replacing msg_opt_* with userMessageId remounts the bubble and flickers.
+      // If a daemon/stub later echoes the user message, the reducer merges it into
+      // this optimistic entry instead of appending a duplicate.
+      updateSessionMessages(sid, (msgs) => {
+        const idx = msgs.findIndex((m) => m.id === tempId);
+        if (idx === -1) return msgs;
+        const updated = [...msgs];
+        updated[idx] = { ...updated[idx]!, promptId: updated[idx]!.promptId ?? result.promptId };
+        return updated;
+      });
+
+      // Bind the real daemon prompt_id into the event projector so the upcoming
+      // turn.started uses it (instead of synthesizing a random one). This is what
+      // makes Stop work on the real daemon: session.currentPromptId then matches
+      // the prompt_id the REST :abort endpoint expects.
+      getEventConn()?.bindNextPromptId(sid, result.promptId);
+
+      // NOTE: we no longer set a local auto-title here. The daemon generates a
+      // smarter title from the first prompt and announces it via
+      // session.meta.updated (projected to sessionMetaUpdated). PATCHing a title
+      // locally would mark the session isCustomTitle=true and SUPPRESS the
+      // daemon's auto-title, so we let the daemon own it.
+      return true;
+    } catch (err) {
+      // Submit failed — clear the in-flight flag so the next prompt isn't stuck
+      // queued forever (turn.ended will never arrive), and roll back the
+      // optimistic user message so the transcript doesn't show a delivered-
+      // looking message the daemon never received.
+      inFlightPromptSessions.delete(sid);
+      rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
+      updateSessionMessages(sid, (msgs) =>
+        msgs.some((m) => m.id === tempId) ? msgs.filter((m) => m.id !== tempId) : msgs,
+      );
+      pushOperationFailure('sendPrompt', err, { sessionId: sid });
+      return false;
+    }
+  }
+
+  async function sendPrompt(text: string, attachments?: PromptAttachment[]): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+
+    // If the session is not idle OR a prompt is already in flight (submitted but
+    // the WS turn.started hasn't flipped activity to 'running' yet), enqueue
+    // instead of submitting directly. Gating on inFlightPromptSessions closes the
+    // window where two rapid prompts would both submit and race.
+    if (activity.value !== 'idle' || inFlightPromptSessions.has(sid)) {
+      enqueue(text, attachments);
+      return;
+    }
+
+    await submitPromptInternal(sid, text, attachments);
+  }
+
+  /**
+   * steerPrompt() — TUI ctrl+s parity: merge any locally queued prompts with the
+   * live composer text and inject the result into the RUNNING turn instead of
+   * waiting for it to finish. Two-step against the daemon: submit (parks the
+   * prompt behind the active one) then POST /prompts:steer. Falls back to a
+   * normal send when the session is idle.
+   */
+  async function steerPrompt(text: string, attachments?: PromptAttachment[]): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+
+    // Merge queued texts (oldest first) + the live text, like the TUI does.
+    const queue = rawState.queuedBySession[sid] ?? [];
+    const parts: string[] = [];
+    const mergedAttachments: PromptAttachment[] = [];
+    for (const q of queue) {
+      const trimmed = q.text.trim();
+      if (trimmed) parts.push(trimmed);
+      if (q.attachments?.length) mergedAttachments.push(...q.attachments);
+    }
+    const live = text.trim();
+    if (live) parts.push(live);
+    if (attachments?.length) mergedAttachments.push(...attachments);
+    if (parts.length === 0 && mergedAttachments.length === 0) return;
+    if (queue.length > 0) {
+      rawState.queuedBySession = { ...rawState.queuedBySession, [sid]: [] };
+    }
+    const merged = parts.join('\n\n');
+
+    // Idle and nothing in flight — there is no turn to steer into; normal send.
+    if (activity.value === 'idle' && !inFlightPromptSessions.has(sid)) {
+      await submitPromptInternal(sid, merged, mergedAttachments);
+      return;
+    }
+
+    // Optimistic transcript echo (the daemon emits no user-message WS event).
+    const content: import('../../api/types').AppMessageContent[] = [];
+    if (merged) content.push({ type: 'text', text: merged });
+    for (const att of mergedAttachments) {
+      if (att.kind === 'video') content.push({ type: 'video', source: { kind: 'file', fileId: att.fileId } });
+      else content.push({ type: 'image', source: { kind: 'file', fileId: att.fileId } });
+    }
+    const tempId = nextOptimisticMsgId();
+    const optimisticMsg: AppMessage = {
+      id: tempId,
+      sessionId: sid,
+      role: 'user',
+      content,
+      createdAt: new Date().toISOString(),
+      metadata: { 'kimiWeb.optimisticUserMessage': true },
+    };
+    updateSessionMessages(sid, (msgs) => [...msgs, optimisticMsg]);
+
+    try {
+      const api = getKimiWebApi();
+      const promptSession = rawState.sessions.find((s) => s.id === sid);
+      const model =
+        (promptSession?.model && promptSession.model.length > 0
+          ? promptSession.model
+          : rawState.defaultModel) ?? undefined;
+      const result = await api.submitPrompt(sid, {
+        content,
+        model,
+        thinking: rawState.thinking,
+        permissionMode: rawState.permission,
+        planMode: rawState.planMode,
+        swarmMode: rawState.swarmMode,
+      });
+
+      // Stamp the real prompt_id onto the optimistic echo. Unlike a normal send,
+      // a steered prompt IS echoed back by the daemon as a messageCreated user
+      // event; matching that echo by prompt_id (instead of content) is what keeps
+      // an image steer from rendering two user bubbles.
+      updateSessionMessages(sid, (msgs) => {
+        const idx = msgs.findIndex((m) => m.id === tempId);
+        if (idx === -1) return msgs;
+        const updated = [...msgs];
+        updated[idx] = { ...updated[idx]!, promptId: updated[idx]!.promptId ?? result.promptId };
+        return updated;
+      });
+
+      if (result.status !== 'queued') {
+        // The turn ended while the user was typing — the prompt started a turn
+        // of its own. Wire it up like a regular send so :abort keeps working.
+        rawState.promptIdBySession = { ...rawState.promptIdBySession, [sid]: result.promptId };
+        getEventConn()?.bindNextPromptId(sid, result.promptId);
+        return;
+      }
+
+      try {
+        await api.steerPrompts(sid, [result.promptId]);
+      } catch {
+        // The active turn finished between submit and steer — the daemon starts
+        // the parked prompt as its own turn. Nothing to roll back.
+      }
+    } catch (err) {
+      // Submit failed: drop the optimistic echo so the transcript doesn't show
+      // a delivered-looking message the daemon never received.
+      updateSessionMessages(sid, (msgs) => msgs.filter((m) => m.id !== tempId));
+      pushOperationFailure('steer', err, { sessionId: sid });
+    }
+  }
+
+  /**
+   * Upload an image file to the daemon's /api/v1/files endpoint.
+   * Returns { fileId, name, mediaType } on success, or null on error (warning added to state).
+   */
+  async function uploadImage(file: Blob, name?: string): Promise<{ fileId: string; name: string; mediaType: string } | null> {
+    try {
+      const api = getKimiWebApi();
+      const result = await api.uploadFile({ file, name });
+      return { fileId: result.id, name: result.name, mediaType: result.mediaType };
+    } catch (err) {
+      pushOperationFailure('uploadImage', err);
+      return null;
+    }
+  }
+
+  /** Enqueue a message for the active session; flushed when activity returns to idle */
+  function enqueue(text: string, attachments?: PromptAttachment[]): void {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const current = rawState.queuedBySession[sid] ?? [];
+    rawState.queuedBySession = {
+      ...rawState.queuedBySession,
+      [sid]: [...current, { text, attachments }],
+    };
+  }
+
+  async function abortCurrentPrompt(): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const session = rawState.sessions.find((s) => s.id === sid);
+
+    // 1. Authoritative id captured at submit time.
+    let promptId = rawState.promptIdBySession[sid];
+
+    // 2. Fallback to projector-derived id only when it is a real daemon prompt_id
+    //    (synthetic `pr_...` ids are rejected by the daemon).
+    if (promptId === undefined) {
+      const candidate = session?.currentPromptId;
+      if (candidate?.startsWith('prompt_')) {
+        promptId = candidate;
+      }
+    }
+
+    const api = getKimiWebApi();
+
+    // 3. If we have a real id, try the per-prompt abort first. On 40402 fall back
+    //    to session-level abort (the daemon may have restarted or the id is stale).
+    if (promptId !== undefined) {
+      try {
+        await api.abortPrompt(sid, promptId);
+        return;
+      } catch (err) {
+        if (isDaemonApiError(err) && err.code === PROMPT_NOT_FOUND_CODE) {
+          // Stale id — try the session-level fallback below.
+        } else {
+          pushOperationFailure('abortCurrentPrompt', err, { sessionId: sid });
+          return;
+        }
+      }
+    }
+
+    // 4. No real id, or the prompt id is no longer recognized: cancel whatever
+    //    is running in the session (including skill activations).
+    try {
+      await api.abortSession(sid);
+    } catch (err) {
+      pushOperationFailure('abortCurrentPrompt', err, { sessionId: sid });
+    }
+  }
+
+  async function respondApproval(
+    approvalId: string,
+    response: { decision: ApprovalDecision; scope?: 'session'; feedback?: string },
+  ): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      const api = getKimiWebApi();
+      const fullResponse: ApprovalResponse = {
+        decision: response.decision,
+        scope: response.scope,
+        feedback: response.feedback,
+      };
+      await api.respondApproval(sid, approvalId, fullResponse);
+      // Remove from local approvals immediately (WS event will confirm)
+      const list = rawState.approvalsBySession[sid] ?? [];
+      rawState.approvalsBySession = {
+        ...rawState.approvalsBySession,
+        [sid]: list.filter((a) => a.approvalId !== approvalId),
+      };
+    } catch (err) {
+      pushOperationFailure('respondApproval', err, { sessionId: sid });
+    }
+  }
+
+  async function respondQuestion(
+    questionId: string,
+    response: QuestionResponse,
+  ): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      const api = getKimiWebApi();
+      await api.respondQuestion(sid, questionId, response);
+      const list = rawState.questionsBySession[sid] ?? [];
+      rawState.questionsBySession = {
+        ...rawState.questionsBySession,
+        [sid]: list.filter((q) => q.questionId !== questionId),
+      };
+    } catch (err) {
+      pushOperationFailure('respondQuestion', err, { sessionId: sid });
+    }
+  }
+
+  async function dismissQuestion(questionId: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      const api = getKimiWebApi();
+      await api.dismissQuestion(sid, questionId);
+      const list = rawState.questionsBySession[sid] ?? [];
+      rawState.questionsBySession = {
+        ...rawState.questionsBySession,
+        [sid]: list.filter((q) => q.questionId !== questionId),
+      };
+    } catch (err) {
+      pushOperationFailure('dismissQuestion', err, { sessionId: sid });
+    }
+  }
+
+  async function cancelTask(taskId: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      const api = getKimiWebApi();
+      await api.cancelTask(sid, taskId);
+      // Update task status locally
+      const list = rawState.tasksBySession[sid] ?? [];
+      rawState.tasksBySession = {
+        ...rawState.tasksBySession,
+        [sid]: list.map((t) =>
+          t.id === taskId ? { ...t, status: 'cancelled' as const } : t,
+        ),
+      };
+    } catch (err) {
+      pushOperationFailure('cancelTask', err, { sessionId: sid });
+    }
+  }
+
+  /** Persist and apply plan mode (pushed to the session profile + sent per-prompt). */
+  function setPlanMode(on: boolean): void {
+    rawState.planMode = on;
+    savePlanModeToStorage(on);
+    persistSessionProfile({ planMode: on });
+  }
+
+  /** Flip plan mode on/off. */
+  function togglePlanMode(): void {
+    setPlanMode(!rawState.planMode);
+  }
+
+  /** Persist and apply swarm mode (pushed to the session profile + sent per-prompt). */
+  function setSwarmMode(on: boolean): void {
+    rawState.swarmMode = on;
+    saveSwarmModeToStorage(on);
+    persistSessionProfile({ swarmMode: on });
+  }
+
+  /** Flip swarm mode on/off. In manual permission mode, ask before enabling. */
+  function toggleSwarmMode(): void {
+    const on = !rawState.swarmMode;
+    if (on && rawState.permission === 'manual') {
+      const ok = confirm('Enable swarm mode? The agent will run multiple sub agents in parallel.');
+      if (!ok) return;
+    }
+    setSwarmMode(on);
+  }
+
+  /** Persist goal mode locally. Unlike plan/swarm, this is a one-shot flag consumed on send. */
+  function setGoalMode(on: boolean): void {
+    rawState.goalMode = on;
+    saveGoalModeToStorage(on);
+  }
+
+  /** Flip goal mode on/off. */
+  function toggleGoalMode(): void {
+    setGoalMode(!rawState.goalMode);
+  }
+
+  /** Create a goal by sending its objective to the session profile, then submit it as a prompt. */
+  async function createGoal(objective: string): Promise<void> {
+    const trimmed = objective.trim();
+    if (!trimmed) return;
+    if (rawState.permission === 'manual') {
+      const ok = confirm(`Start goal: "${trimmed}"? The agent will run autonomously toward this objective.`);
+      if (!ok) return;
+    }
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      await getKimiWebApi().updateSession(sid, { goalObjective: trimmed });
+    } catch (err) {
+      pushOperationFailure('createGoal', err, { sessionId: sid, message: goalErrorMessage(err) });
+      return;
+    }
+    await sendPrompt(trimmed);
+  }
+
+  /** Send a one-shot goal control action (pause/resume/cancel). */
+  function controlGoal(action: 'pause' | 'resume' | 'cancel'): void {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    void Promise.resolve(getKimiWebApi().updateSession(sid, { goalControl: action }))
+      .catch((err) => {
+        pushOperationFailure('controlGoal', err, { sessionId: sid, message: goalErrorMessage(err) });
+      });
+  }
+
+  /** Persist and apply a new permission mode; auto-approve pending approvals if switching to auto/yolo */
+  function setPermission(mode: PermissionMode): void {
+    rawState.permission = mode;
+    savePermissionToStorage(mode);
+    persistSessionProfile({ permissionMode: mode });
+
+    // If switching to auto/yolo, auto-approve any currently-pending approvals for the active session
+    if (mode === 'auto' || mode === 'yolo') {
+      const sid = rawState.activeSessionId;
+      if (sid) {
+        const approvals = [...(rawState.approvalsBySession[sid] ?? [])];
+        for (const a of approvals) {
+          void respondApproval(a.approvalId, {
+            decision: 'approved',
+            scope: mode === 'yolo' ? 'session' : undefined,
+          });
+        }
+      }
+    }
+  }
+
+  /** Dismiss a warning by index */
+  function dismissWarning(index: number): void {
+    const list = [...rawState.warnings];
+    list.splice(index, 1);
+    rawState.warnings = list;
+  }
+
+  /** Rename a session — calls API and updates local state */
+  async function renameSession(id: string, title: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.updateSession(id, { title });
+      updateSession(id, (s) => ({ ...s, title }));
+    } catch (err) {
+      pushOperationFailure('renameSession', err, { sessionId: id });
+    }
+  }
+
+  /** Rename a workspace — local-only until the daemon ships a workspace update API. */
+  function renameWorkspace(id: string, name: string): void {
+    rawState.workspaces = rawState.workspaces.map((w) =>
+      w.id === id ? { ...w, name } : w,
+    );
+  }
+
+  /** Delete a workspace — calls API, removes locally */
+  async function deleteWorkspace(id: string): Promise<void> {
+    // "Remove workspace" only hides the sidebar entry — it never deletes sessions
+    // or history. The daemon DELETE is registry-only and mergedWorkspaces would
+    // otherwise re-derive the workspace from any session cwd still pointing at it,
+    // so it would pop right back. To make remove actually stick (even when the
+    // workspace has sessions), record its ROOT in the persisted hidden set; the
+    // merge then skips it. Re-adding the same path un-hides it (see addWorkspace).
+    const root =
+      rawState.workspaces.find((w) => w.id === id)?.root ??
+      mergedWorkspaces.value.find((w) => w.id === id)?.root ??
+      id; // derived workspaces use the cwd as their id
+    const activeSession = rawState.activeSessionId
+      ? rawState.sessions.find((s) => s.id === rawState.activeSessionId)
+      : undefined;
+    const removingActiveWorkspace = rawState.activeWorkspaceId === id || rawState.activeWorkspaceId === root;
+    const activeSessionInRemovedWorkspace = Boolean(
+      activeSession &&
+        (activeSession.cwd === root ||
+          activeSession.workspaceId === id ||
+          workspaceIdForSession(activeSession) === id),
+    );
+    if (root && !rawState.hiddenWorkspaceRoots.includes(root)) {
+      rawState.hiddenWorkspaceRoots = [...rawState.hiddenWorkspaceRoots, root];
+      saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
+    }
+    // Best-effort registry cleanup; ignore failures (the hide already took effect).
+    try {
+      await getKimiWebApi().deleteWorkspace(id);
+    } catch {
+      // registry delete is optional — the sidebar hide is what the user sees.
+    }
+    rawState.workspaces = rawState.workspaces.filter((w) => w.id !== id && w.root !== root);
+    if (removingActiveWorkspace || activeSessionInRemovedWorkspace) {
+      const nextWorkspace = mergedWorkspaces.value[0]?.id ?? null;
+      rawState.activeWorkspaceId = nextWorkspace;
+      if (nextWorkspace) saveActiveWorkspaceToStorage(nextWorkspace);
+      else {
+        try { safeRemove(STORAGE_KEYS.activeWorkspace); } catch { /* ignore */ }
+      }
+    }
+    if (removingActiveWorkspace || activeSessionInRemovedWorkspace) {
+      setActiveSessionId(undefined);
+      rawState.sessionLoading = false;
+      clearFileDiff();
+      writeSessionUrl(undefined, 'replace');
+    }
+  }
+
+  /** Archive a session — calls API, persists the archive flag, removes locally, picks another active session or none */
+  async function archiveSession(id: string): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.archiveSession(id);
+      removeSession(id);
+      sideChat.clearSideChatForSession(id);
+      const { [id]: _removedIds, ...restIds } = rawState.sideChatUserMessageIdsBySession;
+      void _removedIds;
+      rawState.sideChatUserMessageIdsBySession = restIds;
+
+      // If archived session was active, pick another. 'replace' so the address
+      // bar doesn't keep pointing at (and back doesn't return to) a dead session.
+      if (rawState.activeSessionId === id) {
+        const next = rawState.sessions[0];
+        if (next) {
+          await selectSession(next.id, { urlMode: 'replace' });
+        } else {
+          setActiveSessionId(undefined);
+          writeSessionUrl(undefined, 'replace');
+        }
+      }
+    } catch (err) {
+      pushOperationFailure('archiveSession', err, { sessionId: id });
+    }
+  }
+
+  /** Logout from the managed Kimi provider. Re-checks auth and reloads sessions. */
+  async function logout(): Promise<void> {
+    try {
+      const api = getKimiWebApi();
+      await api.logout();
+      await checkAuth();
+      await load();
+    } catch (err) {
+      pushOperationFailure('logout', err);
+    }
+  }
+
+  /**
+   * compact() — request history compaction via POST /sessions/{id}:compact.
+   * Progress arrives asynchronously through the WS compaction.* events (running
+   * notice → divider marker), so we just fire the request. An optional
+   * instruction (from `/compact <text>`) steers what the summary focuses on.
+   */
+  function compact(instruction?: string): void {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    void getKimiWebApi()
+      .compactSession(sid, instruction)
+      .catch((err) => {
+        pushOperationFailure('compact', err, { sessionId: sid });
+      });
+  }
+
+  /**
+   * forkSession() — fork the active session into a new child session via
+   * POST /sessions/{id}:fork, then add it to the list and select it.
+   */
+  async function forkSession(sessionId?: string): Promise<void> {
+    const sid = sessionId ?? rawState.activeSessionId;
+    if (!sid) return;
+    try {
+      const forked = await getKimiWebApi().forkSession(sid);
+      upsertSessionFront(forked);
+      await selectSession(forked.id);
+    } catch (err) {
+      pushOperationFailure('fork', err, { sessionId: sid });
+    }
+  }
+
+  /**
+   * Undo the last `count` turns of the active session (daemon :undo), then re-sync
+   * the snapshot so the local transcript matches the daemon's post-undo history.
+   * Returns the text of the most-recent user message that was undone, so the UI
+   * can offer "edit + resend" (load it back into the composer).
+   */
+  async function undo(count = 1): Promise<string | null> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return null;
+    // Capture the last user message text BEFORE the undo removes it.
+    const lastUserText = (() => {
+      const msgs = rawState.messagesBySession[sid] ?? [];
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i]!;
+        if (m.role !== 'user') continue;
+        if (m.metadata?.['origin'] && (m.metadata['origin'] as { kind?: string }).kind !== 'user') continue;
+        return m.content
+          .filter((c): c is { type: 'text'; text: string } => c.type === 'text')
+          .map((c) => c.text)
+          .join('\n');
+      }
+      return null;
+    })();
+    try {
+      await getKimiWebApi().undoSession(sid, count);
+      await syncSessionFromSnapshot(sid);
+      return lastUserText;
+    } catch (err) {
+      pushOperationFailure('undo', err, { sessionId: sid });
+      return null;
+    }
+  }
+
+  /**
+   * Remove a queued message for the active session by index.
+   * Defensive: no-op if index out of range or no active session.
+   */
+  function unqueue(index: number): void {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const current = rawState.queuedBySession[sid] ?? [];
+    if (index < 0 || index >= current.length) return;
+    const next = [...current];
+    next.splice(index, 1);
+    rawState.queuedBySession = { ...rawState.queuedBySession, [sid]: next };
+  }
+
+  /**
+   * List directory contents for the active session.
+   * Returns FsEntry[] — defensive, returns [] on error or no active session.
+   */
+  async function listDir(path: string): Promise<FsEntry[]> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return [];
+    try {
+      const api = getKimiWebApi();
+      const result = await api.listDirectory(sid, { path, includeGitStatus: true });
+      return result.items;
+    } catch {
+      return [];
+    }
+  }
+
+  /**
+   * Read file content for the active session.
+   * Returns the file metadata + content (including path), or null on error or no active session.
+   */
+  async function readFileContent(path: string): Promise<{
+    path: string;
+    content: string;
+    encoding: 'utf-8' | 'base64';
+    mime: string;
+    languageId?: string;
+    isBinary: boolean;
+    size: number;
+    lineCount?: number;
+  } | null> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return null;
+    try {
+      const api = getKimiWebApi();
+      const result = await api.readFile(sid, { path });
+      return {
+        path: result.path,
+        content: result.content,
+        encoding: result.encoding,
+        mime: result.mime,
+        languageId: result.languageId,
+        isBinary: result.isBinary,
+        size: result.size,
+        lineCount: result.lineCount,
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  // Matches the daemon's FS_READ_MAX_BYTES. Without an explicit length the
+  // protocol defaults to 1MiB and silently truncates — half a PNG decodes as a
+  // broken image, which is worse than falling back to the original src.
+  const IMAGE_READ_MAX_BYTES = 10_485_760;
+
+  function getFileDownloadUrl(path: string): string | null {
+    const sid = rawState.activeSessionId;
+    if (!sid) return null;
+    return getKimiWebApi().getFileDownloadUrl(sid, path);
+  }
+
+  async function openWorkspaceFile(path: string, line?: number): Promise<boolean> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return false;
+    try {
+      await getKimiWebApi().openFile(sid, { path, line });
+      return true;
+    } catch (err) {
+      pushOperationFailure('openFile', err, { sessionId: sid });
+      return false;
+    }
+  }
+
+  /** Open the current workspace in an external application (Finder, Cursor, etc.). */
+  async function openInApp(appId: string): Promise<void> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return;
+    const path = status.value.cwd || '.';
+    try {
+      await getKimiWebApi().openInApp(sid, appId, path);
+    } catch (err) {
+      pushOperationFailure('openInApp', err, { sessionId: sid });
+    }
+  }
+
+  async function revealWorkspaceFile(path: string): Promise<boolean> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return false;
+    try {
+      await getKimiWebApi().revealFile(sid, { path });
+      return true;
+    } catch (err) {
+      pushOperationFailure('revealFile', err, { sessionId: sid });
+      return false;
+    }
+  }
+
+  /**
+   * Resolve a local image path to a displayable data URL.
+   * Non-local URLs (http/https/data) pass through unchanged.
+   * Local paths are read via the daemon's readFile endpoint and returned as
+   * data:{mime};base64,{content} URLs so they render in the browser. Absolute
+   * paths are made cwd-relative first (the daemon rejects absolute paths), and
+   * truncated/non-binary reads fall back to the original src.
+   */
+  async function resolveImageUrl(src: string): Promise<string> {
+    // Pass through already-addressable URLs
+    if (/^(https?:|data:|blob:)/i.test(src)) return src;
+    const sid = rawState.activeSessionId;
+    if (!sid) return src;
+
+    // The daemon's path resolution only accepts session-relative paths, but the
+    // model usually references images by absolute path. Strip the session cwd.
+    let path = src;
+    if (path.startsWith('/')) {
+      const cwd = rawState.sessions.find((s) => s.id === sid)?.cwd;
+      if (cwd && (path === cwd || path.startsWith(cwd.endsWith('/') ? cwd : `${cwd}/`))) {
+        path = path.slice(cwd.length).replace(/^\//, '');
+        if (!path) return src;
+      } else {
+        return src; // absolute path outside the workspace — unreadable
+      }
+    }
+
+    try {
+      const api = getKimiWebApi();
+      const result = await api.readFile(sid, { path, length: IMAGE_READ_MAX_BYTES });
+      if (!result.isBinary || result.encoding !== 'base64' || result.truncated) return src;
+      return `data:${result.mime};base64,${result.content}`;
+    } catch {
+      return src;
+    }
+  }
+
+  /**
+   * Search files in the active session using the daemon searchFiles endpoint.
+   * Returns {path, name}[] — defensive, returns [] on error or no active session.
+   */
+  async function searchFiles(query: string): Promise<Array<{ path: string; name: string }>> {
+    const sid = rawState.activeSessionId;
+    if (!sid) return [];
+    try {
+      const api = getKimiWebApi();
+      const result = await api.searchFiles(sid, { query, limit: 20 });
+      return result.items.map((item) => ({ path: item.path, name: item.name }));
+    } catch {
+      return [];
+    }
+  }
+
+  return {
+    loadFileDiff,
+    clearFileDiff,
+    loadGitStatus,
+    checkAuth,
+    loadConfig,
+    updateConfig,
+    listAllSessionsGlobal,
+    load,
+    loadWorkspaces,
+    selectWorkspace,
+    openWorkspace,
+    upsertWorkspacePreserveOrder,
+    applyWorkspaceEvent,
+    clearActiveSession,
+    openWorkspaceDraft,
+    createSessionInWorkspace,
+    startSessionAndSendPrompt,
+    addWorkspaceByPath,
+    browseFs,
+    getFsHome,
+    writeSessionUrl,
+    fetchSessionIntoList,
+    onSessionRoutePopState,
+    bindSessionRoute,
+    selectSession,
+    createSession,
+    submitPromptInternal,
+    sendPrompt,
+    steerPrompt,
+    uploadImage,
+    enqueue,
+    unqueue,
+    abortCurrentPrompt,
+    respondApproval,
+    respondQuestion,
+    dismissQuestion,
+    cancelTask,
+    setPlanMode,
+    togglePlanMode,
+    setSwarmMode,
+    toggleSwarmMode,
+    setGoalMode,
+    toggleGoalMode,
+    createGoal,
+    controlGoal,
+    setPermission,
+    dismissWarning,
+    renameSession,
+    renameWorkspace,
+    deleteWorkspace,
+    archiveSession,
+    logout,
+    compact,
+    forkSession,
+    undo,
+    listDir,
+    readFileContent,
+    getFileDownloadUrl,
+    openWorkspaceFile,
+    openInApp,
+    revealWorkspaceFile,
+    resolveImageUrl,
+    searchFiles,
+    loadOlderMessages,
+    refreshSessionSidecars,
+  };
+}
+
+export type UseWorkspaceState = ReturnType<typeof useWorkspaceState>;
diff --git a/apps/kimi-web/src/composables/useAuthGate.ts b/apps/kimi-web/src/composables/useAuthGate.ts
new file mode 100644
index 000000000..f17654d6a
--- /dev/null
+++ b/apps/kimi-web/src/composables/useAuthGate.ts
@@ -0,0 +1,67 @@
+// apps/kimi-web/src/composables/useAuthGate.ts
+// Auth readiness gates the main app. Once the first load finishes and auth is
+// still missing, show a full-page login entry instead of an in-app banner.
+
+import { computed, onUnmounted, ref, watch, type Ref } from 'vue';
+import type { useKimiWebClient } from './useKimiWebClient';
+
+type KimiWebClient = ReturnType<typeof useKimiWebClient>;
+
+export interface UseAuthGateOptions {
+  client: KimiWebClient;
+  /** Template ref to the auth-page logo SVG; owned by the component so the
+      template `ref=` binding links, passed here so the blink handler can drive it. */
+  authLogoRef: Ref<SVGSVGElement | null>;
+}
+
+export function useAuthGate({ client, authLogoRef }: UseAuthGateOptions) {
+  const authReady = computed(() => client.authReady.value);
+  const showAuthGate = computed(() => client.initialized.value && !authReady.value);
+  const LOGIN_PATH = '/login';
+  const authReturnPath = ref<string | null>(null);
+  let authLogoBlinkTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function currentPathWithSuffix(): string {
+    if (typeof window === 'undefined') return '/';
+    return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+  }
+
+  function replaceBrowserPath(path: string): void {
+    if (typeof window === 'undefined') return;
+    window.history.replaceState(window.history.state, '', path);
+  }
+
+  watch(showAuthGate, (show) => {
+    if (typeof window === 'undefined') return;
+    if (show) {
+      if (window.location.pathname !== LOGIN_PATH) {
+        authReturnPath.value = currentPathWithSuffix();
+        replaceBrowserPath(LOGIN_PATH);
+      }
+      return;
+    }
+    if (window.location.pathname === LOGIN_PATH) {
+      replaceBrowserPath(authReturnPath.value ?? '/');
+      authReturnPath.value = null;
+    }
+  }, { immediate: true });
+
+  function blinkAuthLogo(): void {
+    const el = authLogoRef.value;
+    if (!el) return;
+    el.classList.remove('blink-now');
+    void el.getBoundingClientRect();
+    el.classList.add('blink-now');
+    if (authLogoBlinkTimer !== null) clearTimeout(authLogoBlinkTimer);
+    authLogoBlinkTimer = setTimeout(() => {
+      authLogoBlinkTimer = null;
+      el.classList.remove('blink-now');
+    }, 300);
+  }
+
+  onUnmounted(() => {
+    if (authLogoBlinkTimer !== null) clearTimeout(authLogoBlinkTimer);
+  });
+
+  return { showAuthGate, blinkAuthLogo };
+}
diff --git a/apps/kimi-web/src/composables/useDetailPanel.ts b/apps/kimi-web/src/composables/useDetailPanel.ts
new file mode 100644
index 000000000..a119d5ed5
--- /dev/null
+++ b/apps/kimi-web/src/composables/useDetailPanel.ts
@@ -0,0 +1,257 @@
+// apps/kimi-web/src/composables/useDetailPanel.ts
+// Unified right-side detail layer. Only one detail is open at a time.
+
+import { computed, ref, watch, type Ref } from 'vue';
+import type { AgentMember } from '../types';
+import type { DetailTarget } from './useFilePreview';
+import type { useKimiWebClient } from './useKimiWebClient';
+
+type KimiWebClient = ReturnType<typeof useKimiWebClient>;
+
+const PREVIEW_WIDTH_KEY = 'kimi-web.file-preview-width';
+const PREVIEW_MIN = 320;
+
+export interface UseDetailPanelOptions {
+  client: KimiWebClient;
+  /** Mirrored sidebar width (px) so the preview max-width stays within the viewport. */
+  sideWidth: Ref<number>;
+  /** Shared owner of the single right-side slot (also written by useFilePreview). */
+  detailTarget: Ref<DetailTarget | null>;
+  /** Closes the file preview; injected to avoid a composable-to-composable import cycle. */
+  closeFilePreview: () => void;
+}
+
+export function useDetailPanel({
+  client,
+  sideWidth,
+  detailTarget,
+  closeFilePreview,
+}: UseDetailPanelOptions) {
+  // ---------------------------------------------------------------------------
+  // Panel width helpers
+  // ---------------------------------------------------------------------------
+  function previewAreaWidth(): number {
+    if (typeof window === 'undefined') return PREVIEW_MIN * 2;
+    return Math.max(0, window.innerWidth - sideWidth.value);
+  }
+
+  function clampPreviewWidth(width: number): number {
+    const max = Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN);
+    return Math.min(max, Math.max(PREVIEW_MIN, Math.round(width)));
+  }
+
+  function defaultPreviewWidth(): number {
+    return clampPreviewWidth(previewAreaWidth() / 2);
+  }
+
+  const previewDefaultWidth = computed(() => defaultPreviewWidth());
+  const previewMaxWidth = computed(() => Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN));
+  const previewWidth = ref(previewDefaultWidth.value);
+
+  // ---------------------------------------------------------------------------
+  // Thinking panel
+  // ---------------------------------------------------------------------------
+  const thinkingTarget = ref<{ turnId: string; blockIndex: number } | null>(null);
+
+  const thinkingPanelText = computed<string | null>(() => {
+    const target = thinkingTarget.value;
+    if (!target) return null;
+    const turn = client.turns.value.find((tn) => tn.id === target.turnId);
+    const blk = turn?.blocks?.[target.blockIndex];
+    return blk?.kind === 'thinking' ? blk.thinking : null;
+  });
+
+  const thinkingVisible = computed(() => thinkingPanelText.value !== null);
+
+  function openThinkingPanel(target: { turnId: string; blockIndex: number }): void {
+    const current = thinkingTarget.value;
+    if (current && current.turnId === target.turnId && current.blockIndex === target.blockIndex) {
+      thinkingTarget.value = null;
+      if (detailTarget.value === 'thinking') detailTarget.value = null;
+      return;
+    }
+    detailTarget.value = 'thinking';
+    thinkingTarget.value = target;
+  }
+
+  function closeThinkingPanel(): void {
+    thinkingTarget.value = null;
+    if (detailTarget.value === 'thinking') detailTarget.value = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Compaction summary panel
+  // ---------------------------------------------------------------------------
+  const compactionTarget = ref<{ turnId: string } | null>(null);
+
+  const compactionPanelText = computed<string | null>(() => {
+    const target = compactionTarget.value;
+    if (!target) return null;
+    const turn = client.turns.value.find((tn) => tn.id === target.turnId);
+    return turn?.role === 'compaction' && turn.text ? turn.text : null;
+  });
+
+  const compactionPanelVisible = computed(() => compactionPanelText.value !== null);
+
+  function openCompactionPanel(target: { turnId: string }): void {
+    if (compactionTarget.value?.turnId === target.turnId) {
+      compactionTarget.value = null;
+      if (detailTarget.value === 'compaction') detailTarget.value = null;
+      return;
+    }
+    detailTarget.value = 'compaction';
+    compactionTarget.value = target;
+  }
+
+  function closeCompactionPanel(): void {
+    compactionTarget.value = null;
+    if (detailTarget.value === 'compaction') detailTarget.value = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Subagent detail panel
+  // ---------------------------------------------------------------------------
+  const agentTarget = ref<{ turnId: string; blockIndex: number; memberId: string } | null>(null);
+
+  const agentPanelMember = computed<AgentMember | null>(() => {
+    const target = agentTarget.value;
+    if (!target) return null;
+    const turn = client.turns.value.find((tn) => tn.id === target.turnId);
+    const blk = turn?.blocks?.[target.blockIndex];
+    if (!blk) return null;
+    if (blk.kind === 'agent') return blk.member.id === target.memberId ? blk.member : null;
+    if (blk.kind === 'agentGroup') return blk.members.find((m) => m.id === target.memberId) ?? null;
+    return null;
+  });
+
+  const agentPanelVisible = computed(() => agentPanelMember.value !== null);
+
+  function openAgentPanel(target: { turnId: string; blockIndex: number; memberId: string }): void {
+    const current = agentTarget.value;
+    if (current && current.turnId === target.turnId && current.memberId === target.memberId) {
+      agentTarget.value = null;
+      if (detailTarget.value === 'agent') detailTarget.value = null;
+      return;
+    }
+    detailTarget.value = 'agent';
+    agentTarget.value = target;
+  }
+
+  function closeAgentPanel(): void {
+    agentTarget.value = null;
+    if (detailTarget.value === 'agent') detailTarget.value = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Diff detail layer (opened from the chat header git area)
+  // ---------------------------------------------------------------------------
+  const detailDiffMode = ref<'list' | 'detail'>('list');
+  const detailDiffPath = ref<string | null>(null);
+
+  function openDiffDetail(): void {
+    detailTarget.value = 'diff';
+    detailDiffMode.value = 'list';
+    detailDiffPath.value = null;
+    void client.loadGitStatus(client.activeSessionId.value!);
+  }
+
+  function closeDiffDetail(): void {
+    if (detailTarget.value === 'diff') detailTarget.value = null;
+    detailDiffMode.value = 'list';
+    detailDiffPath.value = null;
+    client.clearFileDiff();
+  }
+
+  async function selectDiffFile(path: string): Promise<void> {
+    detailDiffMode.value = 'detail';
+    detailDiffPath.value = path;
+    await client.loadFileDiff(path);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Side chat (BTW) — now rendered in the unified right-side detail layer.
+  // ---------------------------------------------------------------------------
+  async function openSideChatTab(prompt?: string): Promise<void> {
+    await client.openSideChat(prompt);
+    detailTarget.value = 'btw';
+  }
+
+  function closeSideChat(): void {
+    client.closeSideChat();
+    if (detailTarget.value === 'btw') detailTarget.value = null;
+  }
+
+  // Only hides the right-side BTW panel; the side-chat target is per-session and
+  // preserved so switching back to a session restores its BTW transcript.
+  function hideSideChatPanel(): void {
+    if (detailTarget.value === 'btw') detailTarget.value = null;
+  }
+
+  const btwVisible = computed(() => client.sideChatVisible.value);
+
+  /** Any occupant of the shared right-side slot. */
+  const sidePanelVisible = computed(
+    () =>
+      detailTarget.value !== null &&
+      (detailTarget.value !== 'thinking' || thinkingVisible.value) &&
+      (detailTarget.value !== 'compaction' || compactionPanelVisible.value) &&
+      (detailTarget.value !== 'agent' || agentPanelVisible.value) &&
+      (detailTarget.value !== 'btw' || btwVisible.value),
+  );
+
+  /** True while the panel's resize handle is being dragged — the width
+      transition is disabled so the panel follows the pointer 1:1. */
+  const panelDragging = ref(false);
+
+  // Escape closes whichever transient right-side detail panel is open.
+  function closeOpenSidePanel(): boolean {
+    if (detailTarget.value === 'thinking' && thinkingVisible.value) { closeThinkingPanel(); return true; }
+    if (detailTarget.value === 'compaction' && compactionPanelVisible.value) { closeCompactionPanel(); return true; }
+    if (detailTarget.value === 'agent' && agentPanelVisible.value) { closeAgentPanel(); return true; }
+    if (detailTarget.value === 'file') { closeFilePreview(); return true; }
+    if (detailTarget.value === 'diff') { closeDiffDetail(); return true; }
+    if (detailTarget.value === 'btw') { closeSideChat(); return true; }
+    return false;
+  }
+
+  watch(client.activeSessionId, () => {
+    closeFilePreview();
+    closeThinkingPanel();
+    closeCompactionPanel();
+    closeAgentPanel();
+    closeDiffDetail();
+    hideSideChatPanel();
+  });
+
+  return {
+    PREVIEW_WIDTH_KEY,
+    PREVIEW_MIN,
+    previewDefaultWidth,
+    previewMaxWidth,
+    previewWidth,
+    thinkingPanelText,
+    thinkingVisible,
+    openThinkingPanel,
+    closeThinkingPanel,
+    compactionPanelText,
+    compactionPanelVisible,
+    openCompactionPanel,
+    closeCompactionPanel,
+    agentPanelMember,
+    agentPanelVisible,
+    openAgentPanel,
+    closeAgentPanel,
+    detailDiffMode,
+    detailDiffPath,
+    openDiffDetail,
+    closeDiffDetail,
+    selectDiffFile,
+    btwVisible,
+    openSideChatTab,
+    closeSideChat,
+    hideSideChatPanel,
+    sidePanelVisible,
+    panelDragging,
+    closeOpenSidePanel,
+  };
+}
diff --git a/apps/kimi-web/src/composables/useFilePreview.ts b/apps/kimi-web/src/composables/useFilePreview.ts
new file mode 100644
index 000000000..1419996a4
--- /dev/null
+++ b/apps/kimi-web/src/composables/useFilePreview.ts
@@ -0,0 +1,190 @@
+// apps/kimi-web/src/composables/useFilePreview.ts
+// File preview: download / path normalization / request-sequence guard. Claims
+// the 'file' slot of the shared right-side detail layer.
+
+import { computed, ref, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { FileData, FilePreviewRequest, ToolMedia } from '../types';
+import type { useKimiWebClient } from './useKimiWebClient';
+
+type KimiWebClient = ReturnType<typeof useKimiWebClient>;
+
+/** Which occupant currently owns the shared right-side detail layer. */
+export type DetailTarget = 'file' | 'diff' | 'thinking' | 'compaction' | 'agent' | 'btw';
+
+export interface UseFilePreviewOptions {
+  client: KimiWebClient;
+  detailTarget: Ref<DetailTarget | null>;
+}
+
+export function useFilePreview({ client, detailTarget }: UseFilePreviewOptions) {
+  const { t } = useI18n();
+
+  const previewTarget = ref<FilePreviewRequest | null>(null);
+  const previewFile = ref<FileData | null>(null);
+  const previewLoading = ref(false);
+  const previewError = ref<string | null>(null);
+  // Normalized workspace-relative path of the currently-open preview. Used for
+  // the download URL so it matches the server's relative-path contract even when
+  // the user opened the preview from an absolute path in the chat.
+  const previewNormalizedPath = ref<string | null>(null);
+  // Incremented on every openFilePreview call so a slower earlier request can't
+  // overwrite the result of a later one (request-sequence guard).
+  let previewRequestSeq = 0;
+
+  const previewDownloadUrl = computed(() => {
+    const path = previewNormalizedPath.value;
+    return path ? client.getFileDownloadUrl(path) : null;
+  });
+  const previewExternalActions = computed(() => previewTarget.value !== null);
+
+  function trimTrailingSlash(path: string): string {
+    return path.length > 1 ? path.replace(/\/+$/, '') : path;
+  }
+
+  function normalizeRelativePath(path: string): string {
+    const out: string[] = [];
+    for (const part of path.split(/[\\/]+/)) {
+      if (!part || part === '.') continue;
+      if (part === '..') {
+        out.pop();
+        continue;
+      }
+      out.push(part);
+    }
+    return out.join('/');
+  }
+
+  function normalizePreviewPath(inputPath: string): { path: string } | { error: string } {
+    const raw = inputPath.trim();
+    if (!raw) return { error: t('filePreview.errors.emptyPath') };
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(raw)) {
+      return { error: t('filePreview.errors.unsupportedPath') };
+    }
+    if (raw.startsWith('~')) {
+      return { error: t('filePreview.errors.outsideWorkspace') };
+    }
+
+    const cwd = trimTrailingSlash(client.status.value.cwd);
+    if (raw.startsWith('/')) {
+      if (!cwd || (raw !== cwd && !raw.startsWith(`${cwd}/`))) {
+        return { error: t('filePreview.errors.outsideWorkspace') };
+      }
+      const relative = raw === cwd ? '' : raw.slice(cwd.length + 1);
+      if (relative.split(/[\\/]+/).includes('..')) {
+        return { error: t('filePreview.errors.outsideWorkspace') };
+      }
+      const path = normalizeRelativePath(relative);
+      return path ? { path } : { error: t('filePreview.errors.isDirectory') };
+    }
+
+    if (raw.split(/[\\/]+/).includes('..')) {
+      return { error: t('filePreview.errors.outsideWorkspace') };
+    }
+
+    const path = normalizeRelativePath(raw);
+    return path ? { path } : { error: t('filePreview.errors.emptyPath') };
+  }
+
+  async function openFilePreview(target: FilePreviewRequest): Promise<void> {
+    const requestSeq = ++previewRequestSeq;
+    detailTarget.value = 'file';
+    previewFile.value = null;
+    previewError.value = null;
+    previewLoading.value = true;
+    previewTarget.value = target;
+    previewNormalizedPath.value = null;
+
+    const normalized = normalizePreviewPath(target.path);
+    if ('error' in normalized) {
+      previewLoading.value = false;
+      previewError.value = normalized.error;
+      return;
+    }
+    previewNormalizedPath.value = normalized.path;
+
+    try {
+      const result = await client.readFileContent(normalized.path);
+      // A newer openFilePreview started while this one was in flight — discard
+      // the stale result so the right-side panel shows the latest file.
+      if (requestSeq !== previewRequestSeq) return;
+      if (result) {
+        previewFile.value = { ...result, path: result.path || normalized.path };
+      } else {
+        previewFile.value = {
+          path: normalized.path,
+          content: '',
+          encoding: 'utf-8',
+          mime: 'text/plain',
+          isBinary: false,
+          size: 0,
+        };
+      }
+    } catch (err) {
+      if (requestSeq !== previewRequestSeq) return;
+      previewError.value = err instanceof Error ? err.message : t('filePreview.errors.loadFailed');
+    } finally {
+      if (requestSeq === previewRequestSeq) {
+        previewLoading.value = false;
+      }
+    }
+  }
+
+  function mimeFromDataUrl(url: string): string | undefined {
+    const match = /^data:([^;,]+)/i.exec(url);
+    return match?.[1];
+  }
+
+  function openMediaPreview(media: ToolMedia): void {
+    if (media.kind !== 'image') return;
+    detailTarget.value = 'file';
+    previewTarget.value = null;
+    previewNormalizedPath.value = null;
+    previewError.value = null;
+    previewLoading.value = false;
+    previewFile.value = {
+      path: media.path ?? 'ReadMediaFile image',
+      content: '',
+      encoding: 'utf-8',
+      mime: media.mimeType ?? mimeFromDataUrl(media.url) ?? 'image/*',
+      sourceUrl: media.url,
+      isBinary: true,
+      size: media.bytes ?? 0,
+    };
+  }
+
+  function closeFilePreview(): void {
+    previewTarget.value = null;
+    previewNormalizedPath.value = null;
+    previewFile.value = null;
+    previewError.value = null;
+    previewLoading.value = false;
+    if (detailTarget.value === 'file') detailTarget.value = null;
+  }
+
+  function openPreviewInEditor(): void {
+    const path = previewFile.value?.path ?? previewTarget.value?.path;
+    if (!path) return;
+    void client.openWorkspaceFile(path, previewTarget.value?.line);
+  }
+
+  function revealPreviewFile(): void {
+    const path = previewFile.value?.path ?? previewTarget.value?.path;
+    if (!path) return;
+    void client.revealWorkspaceFile(path);
+  }
+
+  return {
+    previewTarget,
+    previewFile,
+    previewLoading,
+    previewError,
+    previewDownloadUrl,
+    previewExternalActions,
+    openFilePreview,
+    openMediaPreview,
+    closeFilePreview,
+    openPreviewInEditor,
+    revealPreviewFile,
+  };
+}
diff --git a/apps/kimi-web/src/composables/useKimiWebClient.ts b/apps/kimi-web/src/composables/useKimiWebClient.ts
index d63ec7084..33d58de50 100644
--- a/apps/kimi-web/src/composables/useKimiWebClient.ts
+++ b/apps/kimi-web/src/composables/useKimiWebClient.ts
@@ -2,13 +2,17 @@
 // Vue state composable — the only place that imports both src/api/* and src/types.ts.
 // Components consume computed view props and call actions; they never touch the API or reducer.
 
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { i18n } from '../i18n';
 import { getKimiWebApi } from '../api';
 import { isDaemonApiError, isDaemonNetworkError } from '../api/errors';
 import { loadUnread, safeGetString, safeRemove, safeSetString, saveUnread, STORAGE_KEYS } from '../lib/storage';
 import { useAppearance } from './client/useAppearance';
 import { useNotification } from './client/useNotification';
+import { useTaskPoller } from './client/useTaskPoller';
+import { useModelProviderState } from './client/useModelProviderState';
+import { useSideChat } from './client/useSideChat';
+import { useWorkspaceState } from './client/useWorkspaceState';
 
 const appearance = useAppearance();
 const notification = useNotification();
@@ -29,19 +33,12 @@ import type {
   AppWarning,
   AppWorkspace,
   ApprovalDecision,
-  ApprovalResponse,
-  FsEntry,
   KimiEventConnection,
-  QuestionResponse,
   ThinkingLevel,
 } from '../api/types';
 import { createInitialState, reduceAppEvent, type CompactionStatus, type KimiClientState } from '../api/daemon/eventReducer';
-import { readSessionIdFromLocation, sessionUrl } from '../lib/sessionRoute';
-import type { SessionUrlMode } from '../lib/sessionRoute';
 import { toAppEvent } from '../api/daemon/mappers';
-import { parseDiff } from '../lib/parseDiff';
-import { coerceThinkingForModel } from '../lib/modelThinking';
-import { keepLiveSubagents } from '../lib/taskMerge';
+
 import { messagesToTurns } from './messagesToTurns';
 import { latestTodos } from './latestTodos';
 import { buildSwarmGroups, countSwarmMembers } from './swarmGroups';
@@ -77,9 +74,7 @@ const THINKING_STORAGE_KEY = STORAGE_KEYS.thinking;
 const PLAN_MODE_STORAGE_KEY = STORAGE_KEYS.planMode;
 const SWARM_MODE_STORAGE_KEY = STORAGE_KEYS.swarmMode;
 const GOAL_MODE_STORAGE_KEY = STORAGE_KEYS.goalMode;
-const STARRED_MODELS_STORAGE_KEY = STORAGE_KEYS.starredModels;
 const SESSION_NOT_FOUND_CODE = 40401;
-const PROMPT_NOT_FOUND_CODE = 40402;
 const ONBOARDED_STORAGE_KEY = STORAGE_KEYS.onboarded;
 const THINKING_LEVELS: readonly ThinkingLevel[] = ['off', 'low', 'medium', 'high', 'xhigh', 'max'];
 
@@ -176,28 +171,6 @@ function saveGoalModeToStorage(v: boolean): void {
   }
 }
 
-function loadStarredModelsFromStorage(): string[] {
-  try {
-    const raw = safeGetString(STARRED_MODELS_STORAGE_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed) && parsed.every((item) => typeof item === 'string')) {
-      return parsed as string[];
-    }
-  } catch {
-    // ignore (localStorage not available or malformed)
-  }
-  return [];
-}
-
-function saveStarredModelsToStorage(v: string[]): void {
-  try {
-    safeSetString(STARRED_MODELS_STORAGE_KEY, JSON.stringify(v));
-  } catch {
-    // ignore
-  }
-}
-
 function loadActiveWorkspaceFromStorage(): string | null {
   try {
     return safeGetString(ACTIVE_WORKSPACE_KEY);
@@ -270,7 +243,7 @@ interface GitStatusEntry {
 
 /** An uploaded attachment to send with a prompt. `kind` drives the content-block
     type (image vs video) so a still and a clip resolve to the right wire shape. */
-type PromptAttachment = { fileId: string; kind: 'image' | 'video' };
+export type PromptAttachment = { fileId: string; kind: 'image' | 'video' };
 
 /** A prompt waiting for the session to go idle. Keeps the uploaded
     fileIds so attachments survive queueing (not just the text). */
@@ -279,7 +252,7 @@ interface QueuedPrompt {
   attachments?: PromptAttachment[];
 }
 
-interface ExtendedState extends KimiClientState {
+export interface ExtendedState extends KimiClientState {
   connected: boolean;
   serverVersion: string;
   workspaceName: string;
@@ -368,6 +341,33 @@ const rawState: ExtendedState = reactive({
   messagesLoadMoreErrorBySession: {},
 });
 
+// ---------------------------------------------------------------------------
+// rawState.sessions — single mutation funnel.
+// Every change to the session list goes through one of these helpers, so
+// "where can sessions change?" has exactly one answer per intent. They are
+// injected into the workspace/model modules (via deps) so no module assigns
+// rawState.sessions directly.
+// ---------------------------------------------------------------------------
+function setSessions(next: AppSession[]): void {
+  rawState.sessions = next;
+}
+/** Replace one session in place (matched by id); no-op if it isn't loaded. */
+function updateSession(id: string, update: (session: AppSession) => AppSession): void {
+  rawState.sessions = rawState.sessions.map((s) => (s.id === id ? update(s) : s));
+}
+/** Add or move a session to the front (recency order), de-duped by id. */
+function upsertSessionFront(session: AppSession): void {
+  rawState.sessions = [session, ...rawState.sessions.filter((s) => s.id !== session.id)];
+}
+/** Append a session to the end (e.g. a deep-linked older session). */
+function appendSession(session: AppSession): void {
+  rawState.sessions = [...rawState.sessions, session];
+}
+/** Drop a session from the list by id. */
+function removeSession(id: string): void {
+  rawState.sessions = rawState.sessions.filter((s) => s.id !== id);
+}
+
 // Cross-tab sync: when another tab writes the unread key, adopt its value so a
 // clear on one tab doesn't get overwritten by this tab's stale in-memory map.
 //
@@ -406,46 +406,45 @@ if (typeof document !== 'undefined') {
   });
 }
 
-// Models + Providers reactive state (lazy-loaded, cached)
-const models = ref<AppModel[]>([]);
-const starredModelIds = ref<string[]>(loadStarredModelsFromStorage());
-
-// Session-scoped skills (slash-invocable). Loaded lazily per session; the active
-// session's list feeds the composer's `/` menu.
-const skillsBySession = ref<Record<string, AppSkill[]>>({});
-const providers = ref<AppProvider[]>([]);
-
-// Background task output polling — mirrors TUI's 1-second refresh.
-const TASK_OUTPUT_POLL_INTERVAL_MS = 1000;
-const TASK_OUTPUT_POLL_BYTES = 4096;
-const TASK_OUTPUT_FINAL_BYTES = 32 * 1024;
-let taskOutputPollTimer: ReturnType<typeof setInterval> | null = null;
-let lastPolledSessionId: string | undefined;
-let fetchedTerminalTaskOutputIds = new Set<string>();
-
-// Model picked while in the "new session draft" state (onboarding composer —
-// no backend session exists yet, so POST /profile has nothing to target).
-// Applied and cleared when the first prompt creates the session.
-const draftModel = ref<string | null>(null);
-
-function modelById(modelId: string | null | undefined): AppModel | undefined {
-  if (modelId === undefined || modelId === null || modelId.length === 0) return undefined;
-  return models.value.find((m) => m.id === modelId || m.model === modelId);
+// ---------------------------------------------------------------------------
+// rawState.activeSessionId — single mutation funnel.
+// ---------------------------------------------------------------------------
+/** Set the active session (or clear it with undefined). */
+function setActiveSessionId(id: string | undefined): void {
+  rawState.activeSessionId = id;
 }
 
-function activeThinkingModel(): AppModel | undefined {
-  const activeSession = rawState.activeSessionId
-    ? rawState.sessions.find((s) => s.id === rawState.activeSessionId)
-    : undefined;
-  return modelById(activeSession?.model ?? draftModel.value ?? rawState.defaultModel);
+// ---------------------------------------------------------------------------
+// rawState.messagesBySession — single mutation funnel.
+// ---------------------------------------------------------------------------
+/** Replace the whole messages map (e.g. from the reducer snapshot). */
+function setMessagesBySession(next: Record<string, AppMessage[]>): void {
+  rawState.messagesBySession = next;
+}
+/** Set one session's message list. */
+function setSessionMessages(sessionId: string, messages: AppMessage[]): void {
+  rawState.messagesBySession = { ...rawState.messagesBySession, [sessionId]: messages };
+}
+/** Update one session's message list via a function of the current list. */
+function updateSessionMessages(
+  sessionId: string,
+  update: (messages: AppMessage[]) => AppMessage[],
+): void {
+  rawState.messagesBySession = {
+    ...rawState.messagesBySession,
+    [sessionId]: update(rawState.messagesBySession[sessionId] ?? []),
+  };
+}
+/** Remove one session's message list. */
+function removeSessionMessages(sessionId: string): void {
+  const { [sessionId]: _removed, ...rest } = rawState.messagesBySession;
+  void _removed;
+  rawState.messagesBySession = rest;
 }
 
-function applyThinkingLevel(level: ThinkingLevel): ThinkingLevel {
-  const next = coerceThinkingForModel(activeThinkingModel(), level);
-  rawState.thinking = next;
-  saveThinkingToStorage(next);
-  return next;
-}
+// Models + Providers reactive state and helpers live in
+// ./client/useModelProviderState. It is instantiated below (after the
+// `activity` computed it depends on) as `modelProvider`.
 
 // ~/diff line-by-line view: the file the user tapped + its parsed unified diff.
 // Loaded on demand via loadFileDiff(); cleared when the file list is shown.
@@ -453,6 +452,10 @@ const selectedDiffPath = ref<string | null>(null);
 const fileDiffLines = ref<DiffViewLine[]>([]);
 const fileDiffLoading = ref(false);
 
+// False until the very first load() settles (success OR failure). Gates the
+// global connecting-splash so a page refresh doesn't flash a half-empty app.
+const initialized = ref(false);
+
 /**
  * Fetch GET /sessions/{id}/status and fold the live model + context usage back
  * into the cached session, so the status line and the WS `agent.status.updated`
@@ -466,19 +469,15 @@ async function refreshSessionStatus(sessionId: string): Promise<void> {
   } catch {
     return; // status endpoint missing/unreachable — keep what we have.
   }
-  rawState.sessions = rawState.sessions.map((s) =>
-    s.id === sessionId
-      ? {
-          ...s,
-          model: st.model || s.model,
-          usage: {
-            ...s.usage,
-            contextTokens: st.contextTokens,
-            contextLimit: st.maxContextTokens,
-          },
-        }
-      : s,
-  );
+  updateSession(sessionId, (s) => ({
+    ...s,
+    model: st.model || s.model,
+    usage: {
+      ...s.usage,
+      contextTokens: st.contextTokens,
+      contextLimit: st.maxContextTokens,
+    },
+  }));
   rawState.swarmMode = st.swarmMode;
   rawState.planMode = st.planMode;
 }
@@ -589,9 +588,9 @@ function applyEvent(event: ReturnType<typeof toAppEvent>, sessionId: string, seq
   };
   const next = reduceAppEvent(snapshot, event, { sessionId, seq });
   // Assign back to the reactive proxy
-  rawState.sessions = next.sessions;
-  rawState.activeSessionId = next.activeSessionId;
-  rawState.messagesBySession = next.messagesBySession;
+  setSessions(next.sessions);
+  setActiveSessionId(next.activeSessionId);
+  setMessagesBySession(next.messagesBySession);
   rawState.approvalsBySession = next.approvalsBySession;
   rawState.questionsBySession = next.questionsBySession;
   rawState.tasksBySession = next.tasksBySession;
@@ -638,7 +637,7 @@ function connectEventsIfNeeded(): void {
         appEvent.type === 'workspaceUpdated' ||
         appEvent.type === 'workspaceDeleted'
       ) {
-        applyWorkspaceEvent(appEvent);
+        workspaceState.applyWorkspaceEvent(appEvent);
         return;
       }
 
@@ -648,20 +647,20 @@ function connectEventsIfNeeded(): void {
       // is kept, only a marker line records the compaction).
       applyEvent(appEvent, meta.sessionId, meta.seq);
 
-      const sideTarget = sideChatTargetBySession.value[meta.sessionId];
+      const sideTarget = sideChat.sideChatTargetBySession.value[meta.sessionId];
       if (sideTarget) {
         const { agentId } = sideTarget;
         const parentId = meta.sessionId;
         if (appEvent.type === 'agentDelta' && appEvent.agentId === agentId) {
           if (appEvent.delta.text) {
-            appendSideChatAssistantText(agentId, parentId, appEvent.delta.text);
+            sideChat.appendSideChatAssistantText(agentId, parentId, appEvent.delta.text);
           }
         } else if (appEvent.type === 'agentTurnEnded' && appEvent.agentId === agentId) {
-          finishSideChatAgent(agentId, parentId);
+          sideChat.finishSideChatAgent(agentId, parentId);
         } else if (appEvent.type === 'taskProgress' && appEvent.taskId === agentId) {
-          appendSideChatAssistantText(agentId, parentId, appEvent.outputChunk);
+          sideChat.appendSideChatAssistantText(agentId, parentId, appEvent.outputChunk);
         } else if (appEvent.type === 'taskCompleted' && appEvent.taskId === agentId) {
-          finishSideChatAgent(agentId, parentId, appEvent.outputPreview);
+          sideChat.finishSideChatAgent(agentId, parentId, appEvent.outputPreview);
         }
       }
 
@@ -704,7 +703,7 @@ function connectEventsIfNeeded(): void {
       if (appEvent.type === 'approvalRequested') {
         const perm = rawState.permission;
         if (perm === 'auto' || perm === 'yolo') {
-          void respondApproval(appEvent.approval.approvalId, {
+          void workspaceState.respondApproval(appEvent.approval.approvalId, {
             decision: 'approved',
             scope: perm === 'yolo' ? 'session' : undefined,
           });
@@ -895,8 +894,8 @@ function goalErrorMessage(err: unknown): string | undefined {
 }
 
 async function handleSessionNotFound(sessionId: string): Promise<void> {
-  rawState.sessions = rawState.sessions.filter((s) => s.id !== sessionId);
-  delete rawState.messagesBySession[sessionId];
+  removeSession(sessionId);
+  removeSessionMessages(sessionId);
   delete rawState.approvalsBySession[sessionId];
   delete rawState.questionsBySession[sessionId];
   delete rawState.tasksBySession[sessionId];
@@ -914,11 +913,11 @@ async function handleSessionNotFound(sessionId: string): Promise<void> {
 
   const next = rawState.sessions[0];
   if (next) {
-    await selectSession(next.id, { urlMode: 'replace' });
+    await workspaceState.selectSession(next.id, { urlMode: 'replace' });
   } else {
-    rawState.activeSessionId = undefined;
+    setActiveSessionId(undefined);
     rawState.sessionLoading = false;
-    writeSessionUrl(undefined, 'replace');
+    workspaceState.writeSessionUrl(undefined, 'replace');
   }
 }
 
@@ -927,21 +926,14 @@ async function syncSessionFromSnapshot(sessionId: string): Promise<SyncSessionRe
     const api = getKimiWebApi();
     const snap = await api.getSessionSnapshot(sessionId);
 
-    rawState.sessions = rawState.sessions.map((s) =>
-      s.id === sessionId
-        ? {
-            ...snap.session,
-            model:
-              snap.session.model && snap.session.model.length > 0
-                ? snap.session.model
-                : s.model,
-          }
-        : s,
-    );
-    rawState.messagesBySession = {
-      ...rawState.messagesBySession,
-      [sessionId]: snap.messages,
-    };
+    updateSession(sessionId, (s) => ({
+      ...snap.session,
+      model:
+        snap.session.model && snap.session.model.length > 0
+          ? snap.session.model
+          : s.model,
+    }));
+    setSessionMessages(sessionId, snap.messages);
     rawState.messagesHasMoreBySession = {
       ...rawState.messagesHasMoreBySession,
       [sessionId]: snap.hasMoreMessages,
@@ -982,239 +974,6 @@ async function syncSessionFromSnapshot(sessionId: string): Promise<SyncSessionRe
   }
 }
 
-const MESSAGES_PAGE_SIZE = 50;
-
-async function loadOlderMessages(sessionId: string): Promise<void> {
-  if (rawState.messagesLoadingMoreBySession[sessionId]) return;
-  const current = rawState.messagesBySession[sessionId];
-  if (!current || current.length === 0) return;
-
-  const beforeId = current[0]!.id;
-  rawState.messagesLoadingMoreBySession = {
-    ...rawState.messagesLoadingMoreBySession,
-    [sessionId]: true,
-  };
-  rawState.messagesLoadMoreErrorBySession = {
-    ...rawState.messagesLoadMoreErrorBySession,
-    [sessionId]: false,
-  };
-  try {
-    const page = await getKimiWebApi().listMessages(sessionId, {
-      beforeId,
-      pageSize: MESSAGES_PAGE_SIZE,
-    });
-    // Server returns newest-first; the UI keeps messages in chronological order.
-    const older = [...page.items].reverse();
-    // Live events may have appended messages while the request was in flight;
-    // read the latest array so those messages are not overwritten.
-    const latest = rawState.messagesBySession[sessionId] ?? current;
-    rawState.messagesBySession = {
-      ...rawState.messagesBySession,
-      [sessionId]: [...older, ...latest],
-    };
-    rawState.messagesHasMoreBySession = {
-      ...rawState.messagesHasMoreBySession,
-      [sessionId]: page.hasMore,
-    };
-  } catch (err) {
-    rawState.messagesLoadMoreErrorBySession = {
-      ...rawState.messagesLoadMoreErrorBySession,
-      [sessionId]: true,
-    };
-    pushOperationFailure('loadOlderMessages', err, { sessionId });
-  } finally {
-    rawState.messagesLoadingMoreBySession = {
-      ...rawState.messagesLoadingMoreBySession,
-      [sessionId]: false,
-    };
-  }
-}
-
-async function loadTasksForSession(sessionId: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const taskList = await api.listTasks(sessionId);
-    rawState.tasksBySession = {
-      ...rawState.tasksBySession,
-      // Keep WS-delivered swarm subagents that REST /tasks omits (see keepLiveSubagents).
-      [sessionId]: keepLiveSubagents(taskList, rawState.tasksBySession[sessionId] ?? []),
-    };
-    // Completed tasks may have real terminal output that never streamed over
-    // WS. Fetch it once now so the rows are expandable when the session opens.
-    await fetchTerminalTaskOutputs(sessionId, taskList);
-  } catch {
-    // Tasks are side data; old/stale sessions may fail without blocking messages.
-  }
-}
-
-/**
- * Fetch the final output snapshot for terminal tasks that lack real streamed
- * outputLines. Called once after loading the task list so already-completed
- * tasks are clickable immediately.
- */
-async function fetchTerminalTaskOutputs(sessionId: string, taskList?: AppTask[]): Promise<void> {
-  if (rawState.activeSessionId !== sessionId) return;
-
-  const tasks = taskList ?? rawState.tasksBySession[sessionId] ?? [];
-  const api = getKimiWebApi();
-  const outputByTaskId = new Map<string, { preview: string; bytes?: number }>();
-
-  await Promise.all(
-    tasks.map(async (task) => {
-      const isTerminal =
-        task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled';
-      if (!isTerminal) return;
-      if (fetchedTerminalTaskOutputIds.has(task.id)) return;
-      if ((task.outputLines?.length ?? 0) > 0) return;
-
-      try {
-        const withOutput = await api.getTask(sessionId, task.id, {
-          withOutput: true,
-          outputBytes: TASK_OUTPUT_FINAL_BYTES,
-        });
-        if (withOutput.outputPreview !== undefined) {
-          outputByTaskId.set(task.id, {
-            preview: withOutput.outputPreview,
-            bytes: withOutput.outputBytes,
-          });
-        }
-      } catch {
-        // Task may have finished between listTasks and getTask; ignore.
-      } finally {
-        fetchedTerminalTaskOutputIds.add(task.id);
-      }
-    }),
-  );
-
-  if (outputByTaskId.size === 0) return;
-
-  const existing = rawState.tasksBySession[sessionId] ?? [];
-  rawState.tasksBySession = {
-    ...rawState.tasksBySession,
-    [sessionId]: existing.map((t) => {
-      const polled = outputByTaskId.get(t.id);
-      if (!polled) return t;
-      return { ...t, outputPreview: polled.preview, outputBytes: polled.bytes };
-    }),
-  };
-}
-
-/**
- * Poll background task output for a session. Mirrors the TUI's 1-second refresh:
- * refresh the task list, then fetch tail output for running tasks and a final
- * snapshot for terminal tasks that haven't received output yet.
- */
-async function pollTaskOutputForSession(sessionId: string): Promise<void> {
-  if (rawState.activeSessionId !== sessionId) return;
-
-  const api = getKimiWebApi();
-  let taskList: AppTask[];
-  try {
-    taskList = await api.listTasks(sessionId);
-  } catch {
-    return;
-  }
-
-  const outputByTaskId = new Map<string, { preview: string; bytes?: number }>();
-
-  await Promise.all(
-    taskList.map(async (task) => {
-      const isRunning = task.status === 'running';
-      const isTerminal = task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled';
-      if (!isRunning && !isTerminal) return;
-
-      // Running tasks: poll tail continuously. Terminal tasks: fetch a final
-      // snapshot once if we have not already received real streamed output.
-      // outputPreview may be a placeholder (`$ <command>`) or a partial tail,
-      // so we intentionally do not skip terminal tasks just because outputPreview
-      // is present.
-      if (isTerminal) {
-        if (fetchedTerminalTaskOutputIds.has(task.id)) return;
-        if ((task.outputLines?.length ?? 0) > 0) return;
-      }
-
-      try {
-        const withOutput = await api.getTask(sessionId, task.id, {
-          withOutput: true,
-          outputBytes: isRunning ? TASK_OUTPUT_POLL_BYTES : TASK_OUTPUT_FINAL_BYTES,
-        });
-        if (withOutput.outputPreview !== undefined) {
-          outputByTaskId.set(task.id, {
-            preview: withOutput.outputPreview,
-            bytes: withOutput.outputBytes,
-          });
-        }
-      } catch {
-        // Task may have finished between listTasks and getTask; ignore.
-      } finally {
-        if (isTerminal) {
-          fetchedTerminalTaskOutputIds.add(task.id);
-        }
-      }
-    }),
-  );
-
-  const existing = rawState.tasksBySession[sessionId] ?? [];
-  const existingById = new Map(existing.map((t) => [t.id, t] as const));
-
-  const refreshed: AppTask[] = taskList.map((fresh) => {
-    const old = existingById.get(fresh.id);
-    const polled = outputByTaskId.get(fresh.id);
-    return {
-      ...fresh,
-      // Preserve any WS-driven outputLines (future taskProgress events).
-      outputLines: old?.outputLines,
-      outputPreview: polled?.preview ?? old?.outputPreview,
-      outputBytes: polled?.bytes ?? old?.outputBytes,
-    };
-  });
-
-  rawState.tasksBySession = {
-    ...rawState.tasksBySession,
-    // Keep WS-delivered swarm subagents that REST /tasks omits (see keepLiveSubagents).
-    [sessionId]: keepLiveSubagents(refreshed, existing),
-  };
-}
-
-function startTaskOutputPolling(sessionId: string): void {
-  if (taskOutputPollTimer !== null && lastPolledSessionId === sessionId) {
-    return;
-  }
-  stopTaskOutputPolling();
-  lastPolledSessionId = sessionId;
-  void pollTaskOutputForSession(sessionId);
-  taskOutputPollTimer = setInterval(() => {
-    if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
-      return;
-    }
-    if (rawState.activeSessionId === sessionId) {
-      void pollTaskOutputForSession(sessionId);
-    } else {
-      stopTaskOutputPolling();
-    }
-  }, TASK_OUTPUT_POLL_INTERVAL_MS);
-}
-
-function stopTaskOutputPolling(): void {
-  if (taskOutputPollTimer !== null) {
-    clearInterval(taskOutputPollTimer);
-    taskOutputPollTimer = null;
-  }
-  lastPolledSessionId = undefined;
-  fetchedTerminalTaskOutputIds.clear();
-}
-
-async function loadSkillsForSession(sessionId: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const list = await api.listSkills(sessionId);
-    skillsBySession.value = { ...skillsBySession.value, [sessionId]: list };
-  } catch {
-    // Skills are side data; an older daemon without /skills just yields no
-    // slash-skills, the built-in commands still work.
-  }
-}
-
 function hasLoadedMessages(sessionId: string): boolean {
   return Object.prototype.hasOwnProperty.call(rawState.messagesBySession, sessionId);
 }
@@ -1228,15 +987,6 @@ function subscribeToSessionEvents(sessionId: string): void {
   }
 }
 
-function refreshSessionSidecars(sessionId: string): void {
-  void loadTasksForSession(sessionId);
-  void loadGitStatus(sessionId);
-  void refreshSessionStatus(sessionId);
-  if (!Object.prototype.hasOwnProperty.call(skillsBySession.value, sessionId)) {
-    void loadSkillsForSession(sessionId);
-  }
-}
-
 // ---------------------------------------------------------------------------
 // View-model mappers
 // ---------------------------------------------------------------------------
@@ -1251,7 +1001,7 @@ function isSessionEffectivelyRunning(sessionId: string): boolean {
   const session = rawState.sessions.find((s) => s.id === sessionId);
   if (!session) return false;
   if (session.status !== 'running') return false;
-  const hiddenBtwAgentId = sideChatTargetBySession.value[sessionId]?.agentId;
+  const hiddenBtwAgentId = sideChat.sideChatTargetBySession.value[sessionId]?.agentId;
   const tasks = rawState.tasksBySession[sessionId] ?? [];
   const runningTasks = tasks.filter((t) => t.status === 'running');
   if (runningTasks.length === 0) {
@@ -1556,7 +1306,7 @@ const activeSessionId = computed<string>(() => rawState.activeSessionId ?? '');
 const skills = computed<AppSkill[]>(() => {
   const sid = rawState.activeSessionId;
   if (!sid) return [];
-  return skillsBySession.value[sid] ?? [];
+  return modelProvider.skillsBySession.value[sid] ?? [];
 });
 
 const isSending = computed<boolean>(() => {
@@ -1565,13 +1315,22 @@ const isSending = computed<boolean>(() => {
   return rawState.sendingBySession[sid] ?? false;
 });
 
+const sideChat = useSideChat(rawState, {
+  pushOperationFailure,
+  nextOptimisticMsgId,
+  connectEventsIfNeeded,
+  getEventConn: () => eventConn,
+});
+
 const activeAppTasks = computed<AppTask[]>(() => {
   const sid = rawState.activeSessionId;
   if (!sid) return [];
-  const hiddenBtwAgentId = sideChatTargetBySession.value[sid]?.agentId;
+  const hiddenBtwAgentId = sideChat.sideChatTargetBySession.value[sid]?.agentId;
   return (rawState.tasksBySession[sid] ?? []).filter((task) => task.id !== hiddenBtwAgentId);
 });
 
+const taskPoller = useTaskPoller(rawState, activeAppTasks);
+
 const turns = computed<ChatTurn[]>(() => {
   const sid = rawState.activeSessionId;
   if (!sid) return [];
@@ -1587,261 +1346,9 @@ const turns = computed<ChatTurn[]>(() => {
   );
 });
 
-// ---------------------------------------------------------------------------
-// Side chat ("BTW") — a TUI-style forked agent rendered as a session tab.
-// It is not a child session and never appears in the sidebar. Each session can
-// have its own side chat; state is keyed by session id, while messages are
-// keyed by agent id so they survive session switches.
-// ---------------------------------------------------------------------------
-const sideChatTargetBySession = ref<Record<string, { agentId: string }>>({});
-
-const activeSideChatTarget = computed<{ parentId: string; agentId: string } | null>(() => {
-  const sid = rawState.activeSessionId;
-  if (!sid) return null;
-  const target = sideChatTargetBySession.value[sid];
-  return target ? { parentId: sid, agentId: target.agentId } : null;
-});
-
-const sideChatSessionId = computed<string | null>(
-  () => activeSideChatTarget.value?.parentId ?? null,
-);
-const sideChatVisible = computed<boolean>(() => activeSideChatTarget.value !== null);
-
-const sideChatSending = computed<boolean>(() => {
-  const target = activeSideChatTarget.value;
-  return target ? Boolean(rawState.sideChatSendingByAgent[target.agentId]) : false;
-});
-
-const sideChatRunning = computed<boolean>(() => {
-  const target = activeSideChatTarget.value;
-  if (!target) return false;
-  if (rawState.sideChatSendingByAgent[target.agentId]) return true;
-  return (rawState.tasksBySession[target.parentId] ?? []).some(
-    (task) => task.id === target.agentId && task.status === 'running',
-  );
-});
-
-const sideChatTurns = computed<ChatTurn[]>(() => {
-  const target = activeSideChatTarget.value;
-  if (!target) return [];
-  const messages = rawState.sideChatMessagesByAgent[target.agentId] ?? [];
-  return messagesToTurns(
-    messages,
-    [],
-    (fileId) => getKimiWebApi().getFileUrl(fileId),
-    sideChatRunning.value,
-    [],
-  );
-});
-
-function updateSideChatMessages(agentId: string, update: (messages: AppMessage[]) => AppMessage[]): void {
-  rawState.sideChatMessagesByAgent = {
-    ...rawState.sideChatMessagesByAgent,
-    [agentId]: update(rawState.sideChatMessagesByAgent[agentId] ?? []),
-  };
-}
-
-function appendSideChatMessage(agentId: string, message: AppMessage): void {
-  updateSideChatMessages(agentId, (messages) => [...messages, message]);
-}
-
-function removeLastSideChatUserMessage(agentId: string): void {
-  updateSideChatMessages(agentId, (messages) => {
-    const idx = [...messages].reverse().findIndex((message) => message.role === 'user');
-    if (idx === -1) return messages;
-    const removeIndex = messages.length - 1 - idx;
-    return messages.filter((_, index) => index !== removeIndex);
-  });
-}
-
-function stampLastSideChatUserPrompt(agentId: string, promptId: string): void {
-  updateSideChatMessages(agentId, (messages) => {
-    const next = [...messages];
-    for (let i = next.length - 1; i >= 0; i -= 1) {
-      const message = next[i]!;
-      if (message.role !== 'user') continue;
-      next[i] = { ...message, promptId: message.promptId ?? promptId };
-      return next;
-    }
-    return messages;
-  });
-}
-
-function appendSideChatAssistantText(agentId: string, sessionId: string, chunk: string): void {
-  if (!chunk) return;
-  updateSideChatMessages(agentId, (messages) => {
-    const last = messages.at(-1);
-    if (last?.role === 'assistant') {
-      const first = last.content[0];
-      const text = first?.type === 'text' ? first.text : '';
-      return [
-        ...messages.slice(0, -1),
-        {
-          ...last,
-          content: [{ type: 'text', text: `${text}${chunk}` }],
-        },
-      ];
-    }
-    return [
-      ...messages,
-      {
-        id: nextOptimisticMsgId(),
-        sessionId,
-        role: 'assistant',
-        content: [{ type: 'text', text: chunk }],
-        createdAt: new Date().toISOString(),
-      },
-    ];
-  });
-}
-
-function finishSideChatAgent(agentId: string, sessionId: string, outputPreview?: string): void {
-  rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: false };
-  if (!outputPreview) return;
-  const messages = rawState.sideChatMessagesByAgent[agentId] ?? [];
-  const last = messages.at(-1);
-  const lastText = last?.role === 'assistant' && last.content[0]?.type === 'text'
-    ? last.content[0].text
-    : '';
-  if (lastText.trim().length > 0) return;
-  appendSideChatAssistantText(agentId, sessionId, outputPreview);
-}
-
-/** Open (creating if needed) the side chat for the active session; optionally send a first prompt. */
-async function openSideChat(initialPrompt?: string): Promise<void> {
-  const parent = rawState.activeSessionId;
-  if (!parent) return;
-  // Reuse the existing side chat for this session if it already exists.
-  if (!sideChatTargetBySession.value[parent]) {
-    let agentId: string;
-    try {
-      ({ agentId } = await getKimiWebApi().startBtw(parent));
-    } catch (err) {
-      pushOperationFailure('openSideChat', err, { sessionId: parent });
-      return;
-    }
-    rawState.sideChatMessagesByAgent = {
-      ...rawState.sideChatMessagesByAgent,
-      [agentId]: rawState.sideChatMessagesByAgent[agentId] ?? [],
-    };
-    sideChatTargetBySession.value = {
-      ...sideChatTargetBySession.value,
-      [parent]: { agentId },
-    };
-    connectEventsIfNeeded();
-    eventConn?.markSideChannelAgent(agentId);
-  }
-  if (initialPrompt && initialPrompt.trim()) {
-    await sendSideChatPrompt(initialPrompt.trim());
-  }
-}
-
-function closeSideChat(): void {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const { [sid]: _removed, ...rest } = sideChatTargetBySession.value;
-  void _removed;
-  sideChatTargetBySession.value = rest;
-}
-
-/** Send a plain prompt to the side-chat child (no plan/swarm/goal modes). */
-async function sendSideChatPrompt(text: string): Promise<void> {
-  const target = activeSideChatTarget.value;
-  const trimmed = text.trim();
-  if (!target || !trimmed) return;
-  const sid = target.parentId;
-  const agentId = target.agentId;
-  rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: true };
-  const userMsg: AppMessage = {
-    id: nextOptimisticMsgId(),
-    sessionId: sid,
-    role: 'user',
-    content: [{ type: 'text', text: trimmed }],
-    createdAt: new Date().toISOString(),
-    metadata: { 'kimiWeb.optimisticUserMessage': true },
-  };
-  appendSideChatMessage(agentId, userMsg);
-  try {
-    const result = await getKimiWebApi().submitPrompt(sid, {
-      content: [{ type: 'text', text: trimmed }],
-      agentId,
-    });
-    stampLastSideChatUserPrompt(agentId, result.promptId);
-    rawState.sideChatUserMessageIdsBySession = {
-      ...rawState.sideChatUserMessageIdsBySession,
-      [sid]: [...(rawState.sideChatUserMessageIdsBySession[sid] ?? []), result.userMessageId],
-    };
-  } catch (err) {
-    pushOperationFailure('sendSideChatPrompt', err, { sessionId: sid });
-    removeLastSideChatUserMessage(agentId);
-    rawState.sideChatSendingByAgent = { ...rawState.sideChatSendingByAgent, [agentId]: false };
-  }
-}
-
-// When a session is deleted, drop its side-chat target so it cannot leak into a
-// later session that happens to reuse the same id.
-function clearSideChatForSession(sessionId: string): void {
-  if (!sideChatTargetBySession.value[sessionId]) return;
-  const { [sessionId]: _removed, ...rest } = sideChatTargetBySession.value;
-  void _removed;
-  sideChatTargetBySession.value = rest;
-}
-
-// A 1-second clock that only ticks while a task is running, so a running task's
-// elapsed-time label keeps counting up. toUiTask reads Date.now() once per
-// evaluation; without this the `tasks` computed only re-ran when tasksBySession
-// changed, freezing the timer at whatever it read on the first render.
-const taskClock = ref(0);
-let taskClockTimer: ReturnType<typeof setInterval> | null = null;
-watch(
-  () => activeAppTasks.value.some((tk) => tk.status === 'running'),
-  (hasRunning) => {
-    if (hasRunning && taskClockTimer === null) {
-      taskClockTimer = setInterval(() => {
-        taskClock.value = (taskClock.value + 1) % Number.MAX_SAFE_INTEGER;
-      }, 1000);
-    } else if (!hasRunning && taskClockTimer !== null) {
-      clearInterval(taskClockTimer);
-      taskClockTimer = null;
-    }
-  },
-  { immediate: true },
-);
-
-// Start/stop task output polling based on whether the active session has
-// running background tasks. This mirrors the TUI's 1-second refresh.
-watch(
-  () => {
-    const sid = rawState.activeSessionId;
-    if (!sid) return { sid: undefined as string | undefined, hasRunning: false };
-    const tasks = rawState.tasksBySession[sid] ?? [];
-    return { sid, hasRunning: tasks.some((t) => t.status === 'running') };
-  },
-  ({ sid, hasRunning }, _prev, onCleanup) => {
-    let cleanupTimer: ReturnType<typeof setTimeout> | undefined;
-    if (hasRunning && sid !== undefined) {
-      startTaskOutputPolling(sid);
-    } else if (sid !== undefined) {
-      // All tasks finished — wait a beat to catch final output, then stop.
-      cleanupTimer = setTimeout(() => {
-        const tasks = rawState.tasksBySession[sid] ?? [];
-        if (!tasks.some((t) => t.status === 'running')) {
-          stopTaskOutputPolling();
-        }
-      }, 1500);
-    } else {
-      stopTaskOutputPolling();
-    }
-    onCleanup(() => {
-      if (cleanupTimer !== undefined) clearTimeout(cleanupTimer);
-    });
-  },
-  { deep: true, immediate: true },
-);
-
 const tasks = computed<TaskItem[]>(() => {
   // Touch the clock so a running task's elapsed time recomputes each tick.
-  void taskClock.value;
+  void taskPoller.taskClock.value;
   return activeAppTasks.value.map(toUiTask);
 });
 
@@ -1966,6 +1473,17 @@ const activity = computed<ActivityState>(() => {
   return 'idle';
 });
 
+const modelProvider = useModelProviderState(rawState, {
+  pushOperationFailure,
+  refreshSessionStatus,
+  persistSessionProfile,
+  activity,
+  inFlightPromptSessions,
+  saveThinkingToStorage,
+  updateSession,
+  updateSessionMessages,
+});
+
 /** Git info for the active session from the daemon's fs:git_status response */
 const gitInfo = computed<{ branch: string; ahead: number; behind: number } | null>(() => {
   const sid = rawState.activeSessionId;
@@ -2014,7 +1532,7 @@ const status = computed<ConversationStatus>(() => {
   // agent.status.updated event during a turn; fall back to the daemon default.
   // In the draft state (no active session) the user's draft pick wins, so the
   // composer dropdown reflects the selection before the session exists.
-  const draftPick = activeSession === undefined ? draftModel.value : null;
+  const draftPick = activeSession === undefined ? modelProvider.draftModel.value : null;
   const rawModel =
     (activeSession?.model && activeSession.model.length > 0
       ? activeSession.model
@@ -2022,7 +1540,7 @@ const status = computed<ConversationStatus>(() => {
 
   // Use the friendly displayName from the models list; fall back to stripping
   // the provider prefix (e.g. "moonshot/moonshot-v1-128k" → "moonshot-v1-128k").
-  const matched = models.value.find((m) => m.id === rawModel || m.model === rawModel);
+  const matched = modelProvider.models.value.find((m) => m.id === rawModel || m.model === rawModel);
   const displayModel =
     matched?.displayName ||
     matched?.model ||
@@ -2305,6 +1823,47 @@ const availableOpenInApps = computed<string[]>(() => rawState.availableOpenInApp
 // prompt to it was silently enqueued and never flushed.
 // ---------------------------------------------------------------------------
 
+const workspaceState = useWorkspaceState(rawState, {
+  taskPoller,
+  sideChat,
+  modelProvider,
+  pushOperationFailure,
+  activity,
+  inFlightPromptSessions,
+  sessionsKnownEmpty,
+  setSessions,
+  updateSession,
+  upsertSessionFront,
+  appendSession,
+  removeSession,
+  setActiveSessionId,
+  updateSessionMessages,
+  nextOptimisticMsgId,
+  getEventConn: () => eventConn,
+  syncSessionFromSnapshot,
+  subscribeToSessionEvents,
+  hasLoadedMessages,
+  refreshSessionStatus,
+  persistSessionProfile,
+  mergedWorkspaces,
+  status,
+  workspaceIdForSession,
+  savePermissionToStorage,
+  savePlanModeToStorage,
+  saveSwarmModeToStorage,
+  saveGoalModeToStorage,
+  saveUnread,
+  saveActiveWorkspaceToStorage,
+  saveHiddenWorkspacesToStorage,
+  goalErrorMessage,
+  basename,
+  resetFastMoon: appearance.resetFastMoon,
+  initialized,
+  selectedDiffPath,
+  fileDiffLines,
+  fileDiffLoading,
+});
+
 function onSessionIdle(sid: string, status: 'idle' | 'aborted'): void {
   // The turn finished — this session no longer has a prompt in flight.
   inFlightPromptSessions.delete(sid);
@@ -2321,7 +1880,7 @@ function onSessionIdle(sid: string, status: 'idle' | 'aborted'): void {
   // and runtime status (model/context usage may have changed this turn).
   if (sid === rawState.activeSessionId) {
     appearance.resetFastMoon();
-    void loadGitStatus(sid);
+    void workspaceState.loadGitStatus(sid);
     void refreshSessionStatus(sid);
   } else if (status === 'idle') {
     // A background session finished a turn the user hasn't seen — light up its
@@ -2340,7 +1899,7 @@ function onSessionIdle(sid: string, status: 'idle' | 'aborted'): void {
       document.visibilityState === 'visible',
     sessionTitle: rawState.sessions.find((s) => s.id === sid)?.title ?? '',
     onClick: () => {
-      void selectSession(sid);
+      void workspaceState.selectSession(sid);
     },
   });
 
@@ -2352,7 +1911,7 @@ function onSessionIdle(sid: string, status: 'idle' | 'aborted'): void {
   // Flush the first queued message; on failure put it back at the head so a
   // transient error doesn't silently drop the prompt.
   if (next !== undefined) {
-    void submitPromptInternal(sid, next.text, next.attachments).then((ok) => {
+    void workspaceState.submitPromptInternal(sid, next.text, next.attachments).then((ok) => {
       if (!ok) {
         const current = rawState.queuedBySession[sid] ?? [];
         rawState.queuedBySession = {
@@ -2364,1679 +1923,6 @@ function onSessionIdle(sid: string, status: 'idle' | 'aborted'): void {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Actions
-// ---------------------------------------------------------------------------
-
-/**
- * Load + parse the unified diff for one changed file in the active session,
- * storing the result for the ~/diff line-by-line view. Defensive: on error
- * (or no active session) it leaves the diff empty but still records the path
- * so the panel opens with an empty state instead of silently doing nothing.
- */
-async function loadFileDiff(path: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  selectedDiffPath.value = path;
-  fileDiffLines.value = [];
-  fileDiffLoading.value = true;
-  try {
-    const api = getKimiWebApi();
-    const result = await api.getFileDiff(sid, path);
-    // Guard against a stale response when the user tapped another file.
-    if (selectedDiffPath.value !== path) return;
-    fileDiffLines.value = parseDiff(result.diff);
-  } catch (err) {
-    // A single file's diff failing (a new/untracked/binary/deleted file the
-    // daemon can't diff) is LOCAL to this pane, not a session-level fault — the
-    // DiffView already shows a graceful "no diff" state when the lines are
-    // empty. Surfacing it as a global "kimi server api" error toast on a routine
-    // file click is disproportionate, so log it for the trace export instead.
-    if (selectedDiffPath.value === path) fileDiffLines.value = [];
-    console.warn('[loadFileDiff] diff unavailable for', path, err);
-  } finally {
-    if (selectedDiffPath.value === path) fileDiffLoading.value = false;
-  }
-}
-
-/** Close the ~/diff line-by-line view and return to the changed-file list. */
-function clearFileDiff(): void {
-  selectedDiffPath.value = null;
-  fileDiffLines.value = [];
-  fileDiffLoading.value = false;
-}
-
-/** Load git status for a session — defensive, never throws */
-async function loadGitStatus(sessionId: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const result = await api.getGitStatus(sessionId);
-    rawState.gitStatusBySession = {
-      ...rawState.gitStatusBySession,
-      [sessionId]: result,
-    };
-  } catch {
-    // Stale/old sessions may 404 — leave undefined, no crash
-  }
-}
-
-/** Fetch auth readiness from GET /api/v1/auth. Defensive — never throws. */
-async function checkAuth(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const result = await api.getAuth();
-    rawState.authReady = result.ready;
-    rawState.defaultModel = result.defaultModel;
-    rawState.managedProviderStatus = result.managedProvider?.status ?? null;
-  } catch {
-    // Daemon may not have this endpoint yet; leave defaults (authReady: false)
-  }
-}
-
-/** Fetch global config from GET /api/v1/config. Defensive — never throws. */
-async function loadConfig(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    rawState.config = await api.getConfig();
-  } catch {
-    // Daemon may not have this endpoint yet; leave null
-  }
-}
-
-/** Update global config via POST /api/v1/config. */
-async function updateConfig(patch: Partial<AppConfig>): Promise<boolean> {
-  try {
-    const api = getKimiWebApi();
-    const next = await api.setConfig(patch);
-    rawState.config = next;
-    rawState.defaultModel = next.defaultModel ?? null;
-    return true;
-  } catch (err) {
-    pushOperationFailure('setConfig', err);
-    return false;
-  }
-}
-
-// False until the very first load() settles (success OR failure). Gates the
-// global connecting-splash so a page refresh doesn't flash a half-empty app.
-const initialized = ref(false);
-
-// Backend max page size for GET /sessions. Bigger pages mean fewer round-trips
-// when draining the full session list.
-const SESSION_PAGE_SIZE = 100;
-
-/** Drain every page of sessions, newest first. A single global walk (instead of
- *  per-workspace) so sessions whose cwd is not a registered workspace root are
- *  still reachable after a refresh. */
-async function listAllSessionsGlobal(): Promise<AppSession[]> {
-  const api = getKimiWebApi();
-  const items: AppSession[] = [];
-  let beforeId: string | undefined;
-  for (;;) {
-    const page = await api.listSessions({ pageSize: SESSION_PAGE_SIZE, beforeId });
-    items.push(...page.items);
-    if (!page.hasMore || page.items.length === 0) break;
-    beforeId = page.items[page.items.length - 1]!.id;
-  }
-  return items;
-}
-
-async function load(): Promise<void> {
-  rawState.loading = true;
-  try {
-    const api = getKimiWebApi();
-    // Parallel: health + meta + models
-    await Promise.all([
-      api.getHealth().catch(() => null),
-      api.getMeta().then((m) => {
-        rawState.serverVersion = m.serverVersion;
-        rawState.availableOpenInApps = m.openInApps;
-      }).catch(() => null),
-      loadModels(),
-    ]);
-
-    // Check auth readiness and global config (separate calls — defensive)
-    await checkAuth();
-    await loadConfig();
-
-    // Drain every session via a single global walk so sessions whose cwd is not
-    // a registered workspace root are still reachable after a refresh.
-    const sessions = await listAllSessionsGlobal().catch(() => [] as AppSession[]);
-    rawState.sessions = sessions;
-
-    // Load workspaces (real if available, else derived from session cwds).
-    await loadWorkspaces();
-
-    // First load: pick the workspace of the most-recent session, unless the
-    // user already has a persisted active workspace that still exists.
-    const mostRecent = sessions[0];
-    const persisted = rawState.activeWorkspaceId;
-    const persistedStillExists =
-      persisted !== null && mergedWorkspaces.value.some((w) => w.id === persisted);
-    if (!persistedStillExists && mostRecent) {
-      selectWorkspace(workspaceIdForSession(mostRecent));
-    }
-
-    // URL deep link (/sessions/<id>) takes priority over auto-select. The
-    // session may live outside the loaded pages (e.g. archived) — fetch it then.
-    // selectSession syncs the active workspace off the (now present) entry.
-    bindSessionRoute();
-    const urlSessionId =
-      typeof window !== 'undefined' ? readSessionIdFromLocation(window.location) : undefined;
-    if (!rawState.activeSessionId && urlSessionId !== undefined) {
-      const available =
-        rawState.sessions.some((s) => s.id === urlSessionId) ||
-        (await fetchSessionIntoList(urlSessionId));
-      if (available) {
-        await selectSession(urlSessionId, { urlMode: 'replace' });
-      }
-    }
-
-    // Auto-select first session if none selected (also the fallback for a dead
-    // deep link — 'replace' rewrites the URL to the session actually shown).
-    if (!rawState.activeSessionId && sessions.length > 0) {
-      await selectSession(sessions[0]!.id, { urlMode: 'replace' });
-    }
-  } catch (err) {
-    pushOperationFailure('load', err);
-    // Do not re-throw — app stays mounted with empty sessions
-  } finally {
-    rawState.loading = false;
-    initialized.value = true;
-  }
-}
-
-/** Load workspaces from the daemon (falls back to derived in mergedWorkspaces). */
-async function loadWorkspaces(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const [list, home] = await Promise.all([
-      api.listWorkspaces().catch(() => [] as AppWorkspace[]),
-      api.getFsHome().catch(() => ({ home: '', recentRoots: [] })),
-    ]);
-    rawState.workspaces = list;
-    rawState.fsHome = home.home || null;
-    rawState.recentRoots = home.recentRoots;
-  } catch {
-    // Defensive — derived workspaces still work off the loaded sessions.
-  }
-}
-
-/** Set the active workspace and persist it. */
-function selectWorkspace(id: string): void {
-  rawState.activeWorkspaceId = id;
-  saveActiveWorkspaceToStorage(id);
-}
-
-/** Open a workspace in the main pane: clear the active session when the
- *  workspace is empty so the centred composer is shown; otherwise activate
- *  the most recent session in that workspace. */
-function openWorkspace(id: string): void {
-  selectWorkspace(id);
-  const sessionsInWs = rawState.sessions.filter((s) => workspaceIdForSession(s) === id);
-  if (sessionsInWs.length > 0) {
-    const mostRecent = sessionsInWs[0];
-    if (mostRecent && mostRecent.id !== rawState.activeSessionId) {
-      // One user action (clicking the workspace) = one history entry.
-      void selectSession(mostRecent.id);
-    }
-  } else {
-    rawState.activeSessionId = undefined;
-    writeSessionUrl(undefined, 'push');
-  }
-}
-
-/** Upsert a workspace: preserve existing order when updating; prepend only
- *  for truly new workspaces. */
-function upsertWorkspacePreserveOrder(workspace: AppWorkspace): void {
-  // Re-adding a path the user previously removed should bring it back.
-  if (rawState.hiddenWorkspaceRoots.includes(workspace.root)) {
-    rawState.hiddenWorkspaceRoots = rawState.hiddenWorkspaceRoots.filter((r) => r !== workspace.root);
-    saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
-  }
-  const index = rawState.workspaces.findIndex(
-    (w) => w.id === workspace.id || w.root === workspace.root,
-  );
-  if (index === -1) {
-    rawState.workspaces = [workspace, ...rawState.workspaces];
-    return;
-  }
-  const next = [...rawState.workspaces];
-  next[index] = workspace;
-  rawState.workspaces = next;
-}
-
-type WorkspaceLifecycleEvent =
-  | { type: 'workspaceCreated'; workspace: AppWorkspace }
-  | { type: 'workspaceUpdated'; workspace: AppWorkspace }
-  | { type: 'workspaceDeleted'; workspaceId: string; root: string };
-
-/** Apply a workspace lifecycle event broadcast by the daemon (multi-client sync).
- *  Workspaces live outside the reducer in rawState, so these events are handled
- *  here instead of in reduceAppEvent. */
-function applyWorkspaceEvent(event: WorkspaceLifecycleEvent): void {
-  if (event.type === 'workspaceCreated' || event.type === 'workspaceUpdated') {
-    upsertWorkspacePreserveOrder(event.workspace);
-    return;
-  }
-  // workspaceDeleted — mirror the local deleteWorkspace so a removal initiated
-  // by another client stays hidden even though its surviving sessions would
-  // otherwise re-derive it in mergedWorkspaces.
-  const root =
-    rawState.workspaces.find((w) => w.id === event.workspaceId)?.root ?? event.root;
-  if (root && !rawState.hiddenWorkspaceRoots.includes(root)) {
-    rawState.hiddenWorkspaceRoots = [...rawState.hiddenWorkspaceRoots, root];
-    saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
-  }
-  rawState.workspaces = rawState.workspaces.filter(
-    (w) => w.id !== event.workspaceId && w.root !== root,
-  );
-  const removingActiveWorkspace =
-    rawState.activeWorkspaceId === event.workspaceId || rawState.activeWorkspaceId === root;
-  if (removingActiveWorkspace) {
-    const nextWorkspace = mergedWorkspaces.value[0]?.id ?? null;
-    rawState.activeWorkspaceId = nextWorkspace;
-    if (nextWorkspace) saveActiveWorkspaceToStorage(nextWorkspace);
-    else {
-      try {
-        safeRemove(ACTIVE_WORKSPACE_KEY);
-      } catch {
-        // ignore
-      }
-    }
-    rawState.activeSessionId = undefined;
-    rawState.sessionLoading = false;
-    clearFileDiff();
-    writeSessionUrl(undefined, 'replace');
-  }
-}
-
-/** Clear the active session without creating a new one. */
-function clearActiveSession(): void {
-  rawState.activeSessionId = undefined;
-  writeSessionUrl(undefined, 'push');
-}
-
-/** Enter the "new session draft" state for a workspace: select it, clear the
- *  active session, and show the onboarding composer. No backend session is
- *  created until the user sends the first message. */
-function openWorkspaceDraft(workspaceId: string): void {
-  selectWorkspace(workspaceId);
-  clearActiveSession();
-  clearFileDiff();
-}
-
-/**
- * Create a session in a workspace — the one-click path (no cwd typing).
- * Register/touch the workspace first when the daemon supports it; if that
- * fails, fall back to the legacy cwd-only create path.
- */
-async function createSessionInWorkspace(workspaceId: string): Promise<AppSession | undefined> {
-  const ws = mergedWorkspaces.value.find((w) => w.id === workspaceId);
-  if (!ws) return undefined;
-  try {
-    const api = getKimiWebApi();
-    let workspaceIdForCreate: string | undefined;
-    let cwdForCreate = ws.root;
-    try {
-      const registered = await api.addWorkspace({ root: ws.root });
-      workspaceIdForCreate = registered.id;
-      cwdForCreate = registered.root;
-      upsertWorkspacePreserveOrder(registered);
-    } catch {
-      // Older daemons may not have /workspaces. In that mode, sending a local
-      // path-like workspace id as workspace_id would fail validation, so use
-      // metadata.cwd only.
-    }
-    const session = await api.createSession({ workspaceId: workspaceIdForCreate, cwd: cwdForCreate });
-    rawState.sessions = [session, ...rawState.sessions.filter((s) => s.id !== session.id)];
-    selectWorkspace(session.workspaceId ?? workspaceIdForCreate ?? workspaceId);
-    // Locally created sessions start empty; trust that so the empty-composer
-    // renders immediately instead of flashing a loading state.
-    sessionsKnownEmpty.add(session.id);
-    await selectSession(session.id);
-    return session;
-  } catch (err) {
-    pushOperationFailure('createSessionInWorkspace', err);
-    return undefined;
-  }
-}
-
-/**
- * Create a session and immediately submit the first prompt.
- * This is the unified path when there is no active session (e.g. after
- * clicking "+" or in an empty workspace).
- */
-async function startSessionAndSendPrompt(
-  workspaceId: string,
-  text: string,
-  attachments?: PromptAttachment[],
-): Promise<void> {
-  const ws = mergedWorkspaces.value.find((w) => w.id === workspaceId);
-  if (!ws) return;
-  try {
-    const api = getKimiWebApi();
-    let workspaceIdForCreate: string | undefined;
-    let cwdForCreate = ws.root;
-    try {
-      const registered = await api.addWorkspace({ root: ws.root });
-      workspaceIdForCreate = registered.id;
-      cwdForCreate = registered.root;
-      upsertWorkspacePreserveOrder(registered);
-    } catch {
-      // Older daemons may not have /workspaces.
-    }
-    const draftPick = draftModel.value ?? undefined;
-    const session = await api.createSession({
-      workspaceId: workspaceIdForCreate,
-      cwd: cwdForCreate,
-      model: draftPick,
-    });
-    draftModel.value = null; // applied — the next draft starts from the default
-    // The create echo may return model as '' (same daemon quirk as /profile);
-    // keep the user's pick so the status line doesn't snap back to the default.
-    const created =
-      draftPick !== undefined && (!session.model || session.model.length === 0)
-        ? { ...session, model: draftPick }
-        : session;
-    rawState.sessions = [created, ...rawState.sessions.filter((s) => s.id !== session.id)];
-    selectWorkspace(session.workspaceId ?? workspaceIdForCreate ?? workspaceId);
-    // NOTE: do NOT mark this session known-empty. Unlike "open a new empty
-    // session" (createSession), here we immediately send a prompt: keeping
-    // sessionLoading=true through the snapshot avoids flashing the empty-session
-    // composer before the optimistic user message lands. selectSession resolves,
-    // then submitPromptInternal adds the user turn synchronously (no await in
-    // between), so the view goes loading → message with no empty-composer frame.
-    await selectSession(session.id);
-    await submitPromptInternal(session.id, text, attachments);
-  } catch (err) {
-    pushOperationFailure('startSessionAndSendPrompt', err);
-  }
-}
-
-/**
- * Add a workspace by folder path. Tries the daemon registry; on failure (or in
- * fallback mode) creates a locally-derived workspace from the path and
- * remembers it, then selects it.
- */
-async function addWorkspaceByPath(root: string): Promise<void> {
-  const trimmed = root.trim();
-  if (!trimmed) return;
-  const api = getKimiWebApi();
-  try {
-    const ws = await api.addWorkspace({ root: trimmed });
-    upsertWorkspacePreserveOrder(ws);
-    openWorkspaceDraft(ws.id);
-  } catch {
-    // Fallback: remember a derived workspace locally (id = root = path).
-    const existing = rawState.workspaces.find((w) => w.root === trimmed);
-    if (!existing) {
-      rawState.workspaces = [
-        {
-          id: trimmed,
-          root: trimmed,
-          name: basename(trimmed),
-          isGitRepo: false,
-          sessionCount: 0,
-        },
-        ...rawState.workspaces,
-      ];
-    }
-    openWorkspaceDraft(trimmed);
-  }
-}
-
-/**
- * Browse subdirectories under `path` (defaults to the daemon $HOME). Used by the
- * add-workspace folder browser. Defensive: returns an empty path on error so
- * the dialog can fall back to the paste-path field.
- */
-async function browseFs(path?: string): Promise<import('../api/types').FsBrowseResult> {
-  try {
-    const api = getKimiWebApi();
-    return await api.browseFs(path);
-  } catch {
-    return { path: '', parent: null, entries: [] };
-  }
-}
-
-/** Start directory + recently-used roots for the folder browser. */
-async function getFsHome(): Promise<{ home: string; recentRoots: string[] }> {
-  try {
-    const api = getKimiWebApi();
-    return await api.getFsHome();
-  } catch {
-    return { home: '', recentRoots: [] };
-  }
-}
-
-// ---------------------------------------------------------------------------
-// URL ↔ session binding (no router): '/' ↔ /sessions/<id>
-// urlMode semantics: 'push' = user navigation (new history entry); 'replace' =
-// programmatic/auto selection (first load, fallback after delete); 'none' =
-// popstate-driven (the URL is already correct — writing it again would loop).
-// ---------------------------------------------------------------------------
-
-function writeSessionUrl(sessionId: string | undefined, mode: SessionUrlMode): void {
-  if (mode === 'none') return;
-  if (typeof window === 'undefined' || !window.history) return;
-  const target = sessionUrl(sessionId);
-  if (window.location.pathname === target) return;
-  try {
-    if (mode === 'push') window.history.pushState(null, '', target);
-    else window.history.replaceState(null, '', target);
-  } catch {
-    // history API unavailable (e.g. sandboxed iframe) — URL sync is best-effort
-  }
-}
-
-/** Fetch a session that is not in the loaded list (deep link beyond the first
-    page) and append it. Returns false when the daemon doesn't know it. */
-async function fetchSessionIntoList(sessionId: string): Promise<boolean> {
-  try {
-    const session = await getKimiWebApi().getSession(sessionId);
-    if (!rawState.sessions.some((s) => s.id === session.id)) {
-      // Append, not prepend: the list is recency-ordered and a deep-linked old
-      // session shouldn't displace the most-recent ones at the top.
-      rawState.sessions = [...rawState.sessions, session];
-    }
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function onSessionRoutePopState(): void {
-  const id = readSessionIdFromLocation(window.location);
-  if (id === undefined) {
-    // Back/forward landed on '/' — no active session.
-    rawState.activeSessionId = undefined;
-    return;
-  }
-  if (id === rawState.activeSessionId) return;
-  if (rawState.sessions.some((s) => s.id === id)) {
-    void selectSession(id, { urlMode: 'none' });
-    return;
-  }
-  // A history entry can point at a session that has since been deleted (or one
-  // outside the loaded page): try to fetch it; on failure fall back to the most
-  // recent session and FIX the URL so the bad entry doesn't stick around.
-  void (async () => {
-    if (await fetchSessionIntoList(id)) {
-      await selectSession(id, { urlMode: 'none' });
-      return;
-    }
-    const next = rawState.sessions[0];
-    if (next) {
-      await selectSession(next.id, { urlMode: 'replace' });
-    } else {
-      rawState.activeSessionId = undefined;
-      writeSessionUrl(undefined, 'replace');
-    }
-  })();
-}
-
-let sessionRouteBound = false;
-function bindSessionRoute(): void {
-  if (sessionRouteBound || typeof window === 'undefined') return;
-  sessionRouteBound = true;
-  window.addEventListener('popstate', onSessionRoutePopState);
-}
-
-async function selectSession(
-  sessionId: string,
-  opts?: { urlMode?: SessionUrlMode },
-): Promise<void> {
-  const messagesLoaded = hasLoadedMessages(sessionId);
-  // Only sessions created locally in this client are trusted to be empty.
-  // The daemon-reported messageCount can be stale for old sessions, so relying
-  // on it causes the empty-composer to flash before the real snapshot arrives.
-  // A locally created session has no history to load: show the empty composer
-  // immediately by skipping the `sessionLoading` flag (no flash), while the
-  // snapshot still loads in the background like any other first open.
-  const knownEmpty = !messagesLoaded && sessionsKnownEmpty.has(sessionId);
-  // Single-use: after this select resolves the session is no longer "known empty".
-  sessionsKnownEmpty.delete(sessionId);
-  try {
-    // Write the URL synchronously (before any await) so rapid clicks lay down
-    // history entries in click order.
-    writeSessionUrl(sessionId, opts?.urlMode ?? 'push');
-    rawState.sessionLoading = !messagesLoaded && !knownEmpty;
-    rawState.activeSessionId = sessionId;
-    appearance.resetFastMoon();
-    // Opening a session clears its unread dot.
-    if (rawState.unreadBySession[sessionId]) {
-      rawState.unreadBySession = { ...rawState.unreadBySession, [sessionId]: false };
-      saveUnread({ [sessionId]: false });
-    }
-    // A diff belongs to the session it was loaded from — drop it on switch.
-    clearFileDiff();
-
-    // NOTE: persisted sessions are directly promptable on the current daemon —
-    // selecting one and sending a message just works, no re-activation needed.
-
-    // Keep the active workspace in sync with the selected session.
-    const selected = rawState.sessions.find((s) => s.id === sessionId);
-    if (selected) {
-      const wid = workspaceIdForSession(selected);
-      if (rawState.activeWorkspaceId !== wid) selectWorkspace(wid);
-    }
-
-    if (!messagesLoaded) {
-      // First open: full snapshot → seed → subscribe(asOfSeq).
-      const result = await syncSessionFromSnapshot(sessionId);
-      if (result === 'not-found') return;
-    } else {
-      // Re-open: resume from the tracked cursor; the daemon replays any
-      // missed durable events (or answers resync_required → snapshot).
-      subscribeToSessionEvents(sessionId);
-    }
-
-    // Refresh sidecars AFTER the snapshot settles so status/usage updates
-    // aren't overwritten by syncSessionFromSnapshot.
-    refreshSessionSidecars(sessionId);
-  } catch (err) {
-    pushOperationFailure('selectSession', err, { sessionId });
-  } finally {
-    if (rawState.activeSessionId === sessionId) {
-      rawState.sessionLoading = false;
-    }
-  }
-}
-
-async function createSession(cwd: string, opts?: { title?: string; model?: string }): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const session = await api.createSession({ cwd, title: opts?.title, model: opts?.model });
-    rawState.sessions = [session, ...rawState.sessions.filter((s) => s.id !== session.id)];
-    // Locally created sessions start empty; trust that so the empty-composer
-    // renders immediately instead of flashing a loading state.
-    sessionsKnownEmpty.add(session.id);
-    await selectSession(session.id);
-  } catch (err) {
-    pushOperationFailure('createSession', err);
-  }
-}
-
-/** Internal: submit a prompt to a specific session, bypassing the queue check.
-    Returns true when the daemon accepted the prompt. */
-async function submitPromptInternal(sid: string, text: string, attachments?: PromptAttachment[]): Promise<boolean> {
-  // Mark this session as having a prompt in flight BEFORE any await, so a racing
-  // sendPrompt sees it and enqueues. Cleared when activity returns to idle.
-  inFlightPromptSessions.add(sid);
-  rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: true };
-  const tempId = nextOptimisticMsgId();
-  try {
-    const api = getKimiWebApi();
-    const content: import('../api/types').AppMessageContent[] = [];
-    if (text) content.push({ type: 'text', text });
-    for (const att of attachments ?? []) {
-      if (att.kind === 'video') content.push({ type: 'video', source: { kind: 'file', fileId: att.fileId } });
-      else content.push({ type: 'image', source: { kind: 'file', fileId: att.fileId } });
-    }
-    if (content.length === 0) {
-      inFlightPromptSessions.delete(sid);
-      rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
-      return false;
-    }
-
-    // OPTIMISTICALLY add the user message to local state BEFORE awaiting the
-    // submit.  The real daemon does NOT emit a user-message event over WS, so
-    // without this the user's own text never appears in the transcript.
-    const optimisticMsg: AppMessage = {
-      id: tempId,
-      sessionId: sid,
-      role: 'user',
-      content,
-      createdAt: new Date().toISOString(),
-      metadata: { 'kimiWeb.optimisticUserMessage': true },
-    };
-    const existingMessages = rawState.messagesBySession[sid] ?? [];
-    rawState.messagesBySession = {
-      ...rawState.messagesBySession,
-      [sid]: [...existingMessages, optimisticMsg],
-    };
-
-    // The daemon now requires `model` + `thinking` on every prompt. Resolve the
-    // model from the session (falls back to the daemon's default_model) and the
-    // thinking level from the user's setting.
-    const promptSession = rawState.sessions.find((s) => s.id === sid);
-    const model =
-      (promptSession?.model && promptSession.model.length > 0
-        ? promptSession.model
-        : rawState.defaultModel) ?? undefined;
-
-    if (rawState.goalMode && text) {
-      try {
-        await api.updateSession(sid, { goalObjective: text.trim() });
-      } catch (err) {
-        pushOperationFailure('createGoal', err, { sessionId: sid });
-        inFlightPromptSessions.delete(sid);
-        rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
-        const msgs = rawState.messagesBySession[sid] ?? [];
-        if (msgs.some((m) => m.id === tempId)) {
-          rawState.messagesBySession = {
-            ...rawState.messagesBySession,
-            [sid]: msgs.filter((m) => m.id !== tempId),
-          };
-        }
-        return false;
-      }
-    }
-
-    const result = await api.submitPrompt(sid, {
-      content,
-      model,
-      thinking: rawState.thinking,
-      permissionMode: rawState.permission,
-      planMode: rawState.planMode,
-      swarmMode: rawState.swarmMode,
-    });
-
-    if (rawState.goalMode) {
-      rawState.goalMode = false;
-      saveGoalModeToStorage(false);
-    }
-
-    // Authoritative prompt_id for :abort — race-free (the projector binding can
-    // lose to a fast turn.started and synthesize a `pr_…` id the daemon rejects).
-    rawState.promptIdBySession = { ...rawState.promptIdBySession, [sid]: result.promptId };
-
-    // Reconcile without changing the id: ChatPane keys user turns by message id,
-    // so replacing msg_opt_* with userMessageId remounts the bubble and flickers.
-    // If a daemon/stub later echoes the user message, the reducer merges it into
-    // this optimistic entry instead of appending a duplicate.
-    const msgs = rawState.messagesBySession[sid] ?? [];
-    const idx = msgs.findIndex((m) => m.id === tempId);
-    if (idx !== -1) {
-      const updated = [...msgs];
-      updated[idx] = { ...updated[idx]!, promptId: updated[idx]!.promptId ?? result.promptId };
-      rawState.messagesBySession = { ...rawState.messagesBySession, [sid]: updated };
-    }
-
-    // Bind the real daemon prompt_id into the event projector so the upcoming
-    // turn.started uses it (instead of synthesizing a random one). This is what
-    // makes Stop work on the real daemon: session.currentPromptId then matches
-    // the prompt_id the REST :abort endpoint expects.
-    eventConn?.bindNextPromptId(sid, result.promptId);
-
-    // NOTE: we no longer set a local auto-title here. The daemon generates a
-    // smarter title from the first prompt and announces it via
-    // session.meta.updated (projected to sessionMetaUpdated). PATCHing a title
-    // locally would mark the session isCustomTitle=true and SUPPRESS the
-    // daemon's auto-title, so we let the daemon own it.
-    return true;
-  } catch (err) {
-    // Submit failed — clear the in-flight flag so the next prompt isn't stuck
-    // queued forever (turn.ended will never arrive), and roll back the
-    // optimistic user message so the transcript doesn't show a delivered-
-    // looking message the daemon never received.
-    inFlightPromptSessions.delete(sid);
-    rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
-    const msgs = rawState.messagesBySession[sid] ?? [];
-    if (msgs.some((m) => m.id === tempId)) {
-      rawState.messagesBySession = {
-        ...rawState.messagesBySession,
-        [sid]: msgs.filter((m) => m.id !== tempId),
-      };
-    }
-    pushOperationFailure('sendPrompt', err, { sessionId: sid });
-    return false;
-  }
-}
-
-async function sendPrompt(text: string, attachments?: PromptAttachment[]): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-
-  // If the session is not idle OR a prompt is already in flight (submitted but
-  // the WS turn.started hasn't flipped activity to 'running' yet), enqueue
-  // instead of submitting directly. Gating on inFlightPromptSessions closes the
-  // window where two rapid prompts would both submit and race.
-  if (activity.value !== 'idle' || inFlightPromptSessions.has(sid)) {
-    enqueue(text, attachments);
-    return;
-  }
-
-  await submitPromptInternal(sid, text, attachments);
-}
-
-/**
- * steerPrompt() — TUI ctrl+s parity: merge any locally queued prompts with the
- * live composer text and inject the result into the RUNNING turn instead of
- * waiting for it to finish. Two-step against the daemon: submit (parks the
- * prompt behind the active one) then POST /prompts:steer. Falls back to a
- * normal send when the session is idle.
- */
-async function steerPrompt(text: string, attachments?: PromptAttachment[]): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-
-  // Merge queued texts (oldest first) + the live text, like the TUI does.
-  const queue = rawState.queuedBySession[sid] ?? [];
-  const parts: string[] = [];
-  const mergedAttachments: PromptAttachment[] = [];
-  for (const q of queue) {
-    const trimmed = q.text.trim();
-    if (trimmed) parts.push(trimmed);
-    if (q.attachments?.length) mergedAttachments.push(...q.attachments);
-  }
-  const live = text.trim();
-  if (live) parts.push(live);
-  if (attachments?.length) mergedAttachments.push(...attachments);
-  if (parts.length === 0 && mergedAttachments.length === 0) return;
-  if (queue.length > 0) {
-    rawState.queuedBySession = { ...rawState.queuedBySession, [sid]: [] };
-  }
-  const merged = parts.join('\n\n');
-
-  // Idle and nothing in flight — there is no turn to steer into; normal send.
-  if (activity.value === 'idle' && !inFlightPromptSessions.has(sid)) {
-    await submitPromptInternal(sid, merged, mergedAttachments);
-    return;
-  }
-
-  // Optimistic transcript echo (the daemon emits no user-message WS event).
-  const content: import('../api/types').AppMessageContent[] = [];
-  if (merged) content.push({ type: 'text', text: merged });
-  for (const att of mergedAttachments) {
-    if (att.kind === 'video') content.push({ type: 'video', source: { kind: 'file', fileId: att.fileId } });
-    else content.push({ type: 'image', source: { kind: 'file', fileId: att.fileId } });
-  }
-  const tempId = nextOptimisticMsgId();
-  const optimisticMsg: AppMessage = {
-    id: tempId,
-    sessionId: sid,
-    role: 'user',
-    content,
-    createdAt: new Date().toISOString(),
-    metadata: { 'kimiWeb.optimisticUserMessage': true },
-  };
-  rawState.messagesBySession = {
-    ...rawState.messagesBySession,
-    [sid]: [...(rawState.messagesBySession[sid] ?? []), optimisticMsg],
-  };
-
-  try {
-    const api = getKimiWebApi();
-    const promptSession = rawState.sessions.find((s) => s.id === sid);
-    const model =
-      (promptSession?.model && promptSession.model.length > 0
-        ? promptSession.model
-        : rawState.defaultModel) ?? undefined;
-    const result = await api.submitPrompt(sid, {
-      content,
-      model,
-      thinking: rawState.thinking,
-      permissionMode: rawState.permission,
-      planMode: rawState.planMode,
-      swarmMode: rawState.swarmMode,
-    });
-
-    // Stamp the real prompt_id onto the optimistic echo. Unlike a normal send,
-    // a steered prompt IS echoed back by the daemon as a messageCreated user
-    // event; matching that echo by prompt_id (instead of content) is what keeps
-    // an image steer from rendering two user bubbles.
-    const echoMsgs = rawState.messagesBySession[sid] ?? [];
-    const echoIdx = echoMsgs.findIndex((m) => m.id === tempId);
-    if (echoIdx !== -1) {
-      const updated = [...echoMsgs];
-      updated[echoIdx] = { ...updated[echoIdx]!, promptId: updated[echoIdx]!.promptId ?? result.promptId };
-      rawState.messagesBySession = { ...rawState.messagesBySession, [sid]: updated };
-    }
-
-    if (result.status !== 'queued') {
-      // The turn ended while the user was typing — the prompt started a turn
-      // of its own. Wire it up like a regular send so :abort keeps working.
-      rawState.promptIdBySession = { ...rawState.promptIdBySession, [sid]: result.promptId };
-      eventConn?.bindNextPromptId(sid, result.promptId);
-      return;
-    }
-
-    try {
-      await api.steerPrompts(sid, [result.promptId]);
-    } catch {
-      // The active turn finished between submit and steer — the daemon starts
-      // the parked prompt as its own turn. Nothing to roll back.
-    }
-  } catch (err) {
-    // Submit failed: drop the optimistic echo so the transcript doesn't show
-    // a delivered-looking message the daemon never received.
-    const msgs = rawState.messagesBySession[sid] ?? [];
-    rawState.messagesBySession = {
-      ...rawState.messagesBySession,
-      [sid]: msgs.filter((m) => m.id !== tempId),
-    };
-    pushOperationFailure('steer', err, { sessionId: sid });
-  }
-}
-
-/**
- * Upload an image file to the daemon's /api/v1/files endpoint.
- * Returns { fileId, name, mediaType } on success, or null on error (warning added to state).
- */
-async function uploadImage(file: Blob, name?: string): Promise<{ fileId: string; name: string; mediaType: string } | null> {
-  try {
-    const api = getKimiWebApi();
-    const result = await api.uploadFile({ file, name });
-    return { fileId: result.id, name: result.name, mediaType: result.mediaType };
-  } catch (err) {
-    pushOperationFailure('uploadImage', err);
-    return null;
-  }
-}
-
-/** Enqueue a message for the active session; flushed when activity returns to idle */
-function enqueue(text: string, attachments?: PromptAttachment[]): void {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const current = rawState.queuedBySession[sid] ?? [];
-  rawState.queuedBySession = {
-    ...rawState.queuedBySession,
-    [sid]: [...current, { text, attachments }],
-  };
-}
-
-async function abortCurrentPrompt(): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const session = rawState.sessions.find((s) => s.id === sid);
-
-  // 1. Authoritative id captured at submit time.
-  let promptId = rawState.promptIdBySession[sid];
-
-  // 2. Fallback to projector-derived id only when it is a real daemon prompt_id
-  //    (synthetic `pr_...` ids are rejected by the daemon).
-  if (promptId === undefined) {
-    const candidate = session?.currentPromptId;
-    if (candidate?.startsWith('prompt_')) {
-      promptId = candidate;
-    }
-  }
-
-  const api = getKimiWebApi();
-
-  // 3. If we have a real id, try the per-prompt abort first. On 40402 fall back
-  //    to session-level abort (the daemon may have restarted or the id is stale).
-  if (promptId !== undefined) {
-    try {
-      await api.abortPrompt(sid, promptId);
-      return;
-    } catch (err) {
-      if (isDaemonApiError(err) && err.code === PROMPT_NOT_FOUND_CODE) {
-        // Stale id — try the session-level fallback below.
-      } else {
-        pushOperationFailure('abortCurrentPrompt', err, { sessionId: sid });
-        return;
-      }
-    }
-  }
-
-  // 4. No real id, or the prompt id is no longer recognized: cancel whatever
-  //    is running in the session (including skill activations).
-  try {
-    await api.abortSession(sid);
-  } catch (err) {
-    pushOperationFailure('abortCurrentPrompt', err, { sessionId: sid });
-  }
-}
-
-async function respondApproval(
-  approvalId: string,
-  response: { decision: ApprovalDecision; scope?: 'session'; feedback?: string },
-): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    const api = getKimiWebApi();
-    const fullResponse: ApprovalResponse = {
-      decision: response.decision,
-      scope: response.scope,
-      feedback: response.feedback,
-    };
-    await api.respondApproval(sid, approvalId, fullResponse);
-    // Remove from local approvals immediately (WS event will confirm)
-    const list = rawState.approvalsBySession[sid] ?? [];
-    rawState.approvalsBySession = {
-      ...rawState.approvalsBySession,
-      [sid]: list.filter((a) => a.approvalId !== approvalId),
-    };
-  } catch (err) {
-    pushOperationFailure('respondApproval', err, { sessionId: sid });
-  }
-}
-
-async function respondQuestion(
-  questionId: string,
-  response: QuestionResponse,
-): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    const api = getKimiWebApi();
-    await api.respondQuestion(sid, questionId, response);
-    const list = rawState.questionsBySession[sid] ?? [];
-    rawState.questionsBySession = {
-      ...rawState.questionsBySession,
-      [sid]: list.filter((q) => q.questionId !== questionId),
-    };
-  } catch (err) {
-    pushOperationFailure('respondQuestion', err, { sessionId: sid });
-  }
-}
-
-async function dismissQuestion(questionId: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    const api = getKimiWebApi();
-    await api.dismissQuestion(sid, questionId);
-    const list = rawState.questionsBySession[sid] ?? [];
-    rawState.questionsBySession = {
-      ...rawState.questionsBySession,
-      [sid]: list.filter((q) => q.questionId !== questionId),
-    };
-  } catch (err) {
-    pushOperationFailure('dismissQuestion', err, { sessionId: sid });
-  }
-}
-
-async function cancelTask(taskId: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    const api = getKimiWebApi();
-    await api.cancelTask(sid, taskId);
-    // Update task status locally
-    const list = rawState.tasksBySession[sid] ?? [];
-    rawState.tasksBySession = {
-      ...rawState.tasksBySession,
-      [sid]: list.map((t) =>
-        t.id === taskId ? { ...t, status: 'cancelled' as const } : t,
-      ),
-    };
-  } catch (err) {
-    pushOperationFailure('cancelTask', err, { sessionId: sid });
-  }
-}
-
-/** Persist and apply a new extended-thinking level (also pushed to the active
- *  session profile so the daemon's /status reflects it; still sent per-prompt). */
-function setThinking(level: ThinkingLevel): void {
-  const next = applyThinkingLevel(level);
-  persistSessionProfile({ thinking: next });
-}
-
-/** Persist and apply plan mode (pushed to the session profile + sent per-prompt). */
-function setPlanMode(on: boolean): void {
-  rawState.planMode = on;
-  savePlanModeToStorage(on);
-  persistSessionProfile({ planMode: on });
-}
-
-/** Flip plan mode on/off. */
-function togglePlanMode(): void {
-  setPlanMode(!rawState.planMode);
-}
-
-/** Persist and apply swarm mode (pushed to the session profile + sent per-prompt). */
-function setSwarmMode(on: boolean): void {
-  rawState.swarmMode = on;
-  saveSwarmModeToStorage(on);
-  persistSessionProfile({ swarmMode: on });
-}
-
-/** Flip swarm mode on/off. In manual permission mode, ask before enabling. */
-function toggleSwarmMode(): void {
-  const on = !rawState.swarmMode;
-  if (on && rawState.permission === 'manual') {
-    const ok = confirm('Enable swarm mode? The agent will run multiple sub agents in parallel.');
-    if (!ok) return;
-  }
-  setSwarmMode(on);
-}
-
-/** Persist goal mode locally. Unlike plan/swarm, this is a one-shot flag consumed on send. */
-function setGoalMode(on: boolean): void {
-  rawState.goalMode = on;
-  saveGoalModeToStorage(on);
-}
-
-/** Flip goal mode on/off. */
-function toggleGoalMode(): void {
-  setGoalMode(!rawState.goalMode);
-}
-
-/** Create a goal by sending its objective to the session profile, then submit it as a prompt. */
-async function createGoal(objective: string): Promise<void> {
-  const trimmed = objective.trim();
-  if (!trimmed) return;
-  if (rawState.permission === 'manual') {
-    const ok = confirm(`Start goal: "${trimmed}"? The agent will run autonomously toward this objective.`);
-    if (!ok) return;
-  }
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    await getKimiWebApi().updateSession(sid, { goalObjective: trimmed });
-  } catch (err) {
-    pushOperationFailure('createGoal', err, { sessionId: sid, message: goalErrorMessage(err) });
-    return;
-  }
-  await sendPrompt(trimmed);
-}
-
-/** Send a one-shot goal control action (pause/resume/cancel). */
-function controlGoal(action: 'pause' | 'resume' | 'cancel'): void {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  void Promise.resolve(getKimiWebApi().updateSession(sid, { goalControl: action }))
-    .catch((err) => {
-      pushOperationFailure('controlGoal', err, { sessionId: sid, message: goalErrorMessage(err) });
-    });
-}
-
-/** Persist and apply a new permission mode; auto-approve pending approvals if switching to auto/yolo */
-function setPermission(mode: PermissionMode): void {
-  rawState.permission = mode;
-  savePermissionToStorage(mode);
-  persistSessionProfile({ permissionMode: mode });
-
-  // If switching to auto/yolo, auto-approve any currently-pending approvals for the active session
-  if (mode === 'auto' || mode === 'yolo') {
-    const sid = rawState.activeSessionId;
-    if (sid) {
-      const approvals = [...(rawState.approvalsBySession[sid] ?? [])];
-      for (const a of approvals) {
-        void respondApproval(a.approvalId, {
-          decision: 'approved',
-          scope: mode === 'yolo' ? 'session' : undefined,
-        });
-      }
-    }
-  }
-}
-
-/** Dismiss a warning by index */
-function dismissWarning(index: number): void {
-  const list = [...rawState.warnings];
-  list.splice(index, 1);
-  rawState.warnings = list;
-}
-
-/** Rename a session — calls API and updates local state */
-async function renameSession(id: string, title: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.updateSession(id, { title });
-    rawState.sessions = rawState.sessions.map((s) =>
-      s.id === id ? { ...s, title } : s,
-    );
-  } catch (err) {
-    pushOperationFailure('renameSession', err, { sessionId: id });
-  }
-}
-
-/** Rename a workspace — local-only until the daemon ships a workspace update API. */
-function renameWorkspace(id: string, name: string): void {
-  rawState.workspaces = rawState.workspaces.map((w) =>
-    w.id === id ? { ...w, name } : w,
-  );
-}
-
-/** Delete a workspace — calls API, removes locally */
-async function deleteWorkspace(id: string): Promise<void> {
-  // "Remove workspace" only hides the sidebar entry — it never deletes sessions
-  // or history. The daemon DELETE is registry-only and mergedWorkspaces would
-  // otherwise re-derive the workspace from any session cwd still pointing at it,
-  // so it would pop right back. To make remove actually stick (even when the
-  // workspace has sessions), record its ROOT in the persisted hidden set; the
-  // merge then skips it. Re-adding the same path un-hides it (see addWorkspace).
-  const root =
-    rawState.workspaces.find((w) => w.id === id)?.root ??
-    mergedWorkspaces.value.find((w) => w.id === id)?.root ??
-    id; // derived workspaces use the cwd as their id
-  const activeSession = rawState.activeSessionId
-    ? rawState.sessions.find((s) => s.id === rawState.activeSessionId)
-    : undefined;
-  const removingActiveWorkspace = rawState.activeWorkspaceId === id || rawState.activeWorkspaceId === root;
-  const activeSessionInRemovedWorkspace = Boolean(
-    activeSession &&
-      (activeSession.cwd === root ||
-        activeSession.workspaceId === id ||
-        workspaceIdForSession(activeSession) === id),
-  );
-  if (root && !rawState.hiddenWorkspaceRoots.includes(root)) {
-    rawState.hiddenWorkspaceRoots = [...rawState.hiddenWorkspaceRoots, root];
-    saveHiddenWorkspacesToStorage(rawState.hiddenWorkspaceRoots);
-  }
-  // Best-effort registry cleanup; ignore failures (the hide already took effect).
-  try {
-    await getKimiWebApi().deleteWorkspace(id);
-  } catch {
-    // registry delete is optional — the sidebar hide is what the user sees.
-  }
-  rawState.workspaces = rawState.workspaces.filter((w) => w.id !== id && w.root !== root);
-  if (removingActiveWorkspace || activeSessionInRemovedWorkspace) {
-    const nextWorkspace = mergedWorkspaces.value[0]?.id ?? null;
-    rawState.activeWorkspaceId = nextWorkspace;
-    if (nextWorkspace) saveActiveWorkspaceToStorage(nextWorkspace);
-    else {
-      try { safeRemove(ACTIVE_WORKSPACE_KEY); } catch { /* ignore */ }
-    }
-  }
-  if (removingActiveWorkspace || activeSessionInRemovedWorkspace) {
-    rawState.activeSessionId = undefined;
-    rawState.sessionLoading = false;
-    clearFileDiff();
-    writeSessionUrl(undefined, 'replace');
-  }
-}
-
-/** Archive a session — calls API, persists the archive flag, removes locally, picks another active session or none */
-async function archiveSession(id: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.archiveSession(id);
-    rawState.sessions = rawState.sessions.filter((s) => s.id !== id);
-    clearSideChatForSession(id);
-    const { [id]: _removedIds, ...restIds } = rawState.sideChatUserMessageIdsBySession;
-    void _removedIds;
-    rawState.sideChatUserMessageIdsBySession = restIds;
-
-    // If archived session was active, pick another. 'replace' so the address
-    // bar doesn't keep pointing at (and back doesn't return to) a dead session.
-    if (rawState.activeSessionId === id) {
-      const next = rawState.sessions[0];
-      if (next) {
-        await selectSession(next.id, { urlMode: 'replace' });
-      } else {
-        rawState.activeSessionId = undefined;
-        writeSessionUrl(undefined, 'replace');
-      }
-    }
-  } catch (err) {
-    pushOperationFailure('archiveSession', err, { sessionId: id });
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Model + Provider actions
-// ---------------------------------------------------------------------------
-
-/** Load models (cached — call again to force refresh) */
-async function loadModels(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    models.value = await api.listModels();
-    applyThinkingLevel(rawState.thinking);
-  } catch (err) {
-    pushOperationFailure('loadModels', err);
-  }
-}
-
-async function refreshOAuthProviderModels(): Promise<void> {
-  try {
-    const result = await getKimiWebApi().refreshOAuthProviderModels();
-    for (const failure of result.failed) {
-      pushOperationFailure('refreshOAuthProviderModels', new Error(failure.reason), {
-        message: failure.provider,
-      });
-    }
-  } catch {
-    // Older daemons may not expose this endpoint; model listing still works.
-  }
-}
-
-/** Load providers */
-async function loadProviders(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    providers.value = await api.listProviders();
-  } catch (err) {
-    pushOperationFailure('loadProviders', err);
-  }
-}
-
-/**
- * Switch model for the active session via POST /sessions/{id}/profile (the
- * daemon dispatches agent_config.model to core.rpc.setModel). The profile echo
- * can return model '', so the authoritative current model comes from
- * GET /sessions/{id}/status, which we re-read right after. Optimistically show
- * the chosen id meanwhile. Never crashes.
- */
-async function setModel(modelId: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  const nextThinking = coerceThinkingForModel(modelById(modelId), rawState.thinking);
-  const prevThinking = rawState.thinking;
-  if (!sid) {
-    // New-session draft (onboarding composer): no backend session to update.
-    // Remember the pick — startSessionAndSendPrompt applies it at create time.
-    draftModel.value = modelId;
-    applyThinkingLevel(nextThinking);
-    return;
-  }
-  // Optimistic: show the chosen model immediately, but remember the previous
-  // one so we can roll back if the switch never reaches the daemon.
-  const prevModel = rawState.sessions.find((s) => s.id === sid)?.model;
-  rawState.sessions = rawState.sessions.map((s) => (s.id === sid ? { ...s, model: modelId } : s));
-  if (nextThinking !== prevThinking) {
-    rawState.thinking = nextThinking;
-    saveThinkingToStorage(nextThinking);
-  }
-  try {
-    await getKimiWebApi().updateSession(sid, {
-      model: modelId,
-      thinking: nextThinking !== prevThinking ? nextThinking : undefined,
-    });
-  } catch (err) {
-    // The model change rides HTTP, not the WS, so a dropped socket alone does
-    // not fail it — but when the daemon is unreachable the request throws here.
-    // Roll the picker back to the real model so the UI can't keep showing the
-    // new one as if the switch succeeded, then surface the failure.
-    rawState.sessions = rawState.sessions.map((s) =>
-      s.id === sid ? { ...s, model: prevModel ?? s.model } : s,
-    );
-    if (nextThinking !== prevThinking) {
-      rawState.thinking = prevThinking;
-      saveThinkingToStorage(prevThinking);
-    }
-    pushOperationFailure('setModel', err, { sessionId: sid });
-    return;
-  }
-  // refreshSessionStatus folds the authoritative current model from /status
-  // back into the session (the profile echo can return ''). Best-effort: a
-  // failure here does not mean the switch failed, so it must not roll back.
-  await refreshSessionStatus(sid);
-}
-
-/** Toggle whether a model is starred (favorited) in the model picker. */
-function toggleStarModel(modelId: string): void {
-  const set = new Set(starredModelIds.value);
-  if (set.has(modelId)) {
-    set.delete(modelId);
-  } else {
-    set.add(modelId);
-  }
-  starredModelIds.value = Array.from(set);
-  saveStarredModelsToStorage(starredModelIds.value);
-}
-
-/**
- * Activate a session skill (the web analogue of typing `/<skill> <args>` in the
- * TUI). The daemon starts a turn with a `skill_activation` origin; progress
- * arrives over the WS stream like any other turn. Never crashes the caller.
- */
-async function activateSkill(skillName: string, args?: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const guarded = activity.value === 'idle' && !inFlightPromptSessions.has(sid);
-  const tempId = `msg_skill_opt_${Date.now().toString(36)}`;
-
-  if (guarded) {
-    inFlightPromptSessions.add(sid);
-    rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: true };
-    const optimisticMsg: AppMessage = {
-      id: tempId,
-      sessionId: sid,
-      role: 'user',
-      content: [{ type: 'text', text: `/${skillName}${args ? ` ${args}` : ''}` }],
-      createdAt: new Date().toISOString(),
-      metadata: {
-        'kimiWeb.optimisticUserMessage': true,
-        origin: {
-          kind: 'skill_activation',
-          trigger: 'user-slash',
-          skillName,
-          skillArgs: args,
-        },
-      },
-    };
-    rawState.messagesBySession = {
-      ...rawState.messagesBySession,
-      [sid]: [...(rawState.messagesBySession[sid] ?? []), optimisticMsg],
-    };
-  }
-
-  try {
-    await getKimiWebApi().activateSkill(sid, skillName, args);
-  } catch (err) {
-    if (guarded) {
-      inFlightPromptSessions.delete(sid);
-      rawState.sendingBySession = { ...rawState.sendingBySession, [sid]: false };
-      const msgs = rawState.messagesBySession[sid] ?? [];
-      rawState.messagesBySession = {
-        ...rawState.messagesBySession,
-        [sid]: msgs.filter((m) => m.id !== tempId),
-      };
-    }
-    pushOperationFailure('activateSkill', err, { sessionId: sid });
-  }
-}
-
-/** Add a provider, then reload providers + models */
-async function addProvider(input: {
-  type: string;
-  apiKey?: string;
-  baseUrl?: string;
-  defaultModel?: string;
-}): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.addProvider(input);
-    await Promise.all([loadProviders(), loadModels()]);
-  } catch (err) {
-    pushOperationFailure('addProvider', err);
-  }
-}
-
-/** Delete a provider, then reload providers + models */
-async function deleteProvider(id: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.deleteProvider(id);
-    await Promise.all([loadProviders(), loadModels()]);
-  } catch (err) {
-    pushOperationFailure('deleteProvider', err);
-  }
-}
-
-/** Refresh a provider status */
-async function refreshProvider(id: string): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    const updated = await api.refreshProvider(id);
-    providers.value = providers.value.map((p) => (p.id === id ? updated : p));
-  } catch (err) {
-    pushOperationFailure('refreshProvider', err);
-  }
-}
-
-/** Start managed Kimi OAuth device flow. Returns flow data or null on error. */
-async function startOAuthLogin(): Promise<{
-  flowId: string;
-  provider: string;
-  verificationUri: string;
-  verificationUriComplete: string;
-  userCode: string;
-  expiresIn: number;
-  interval: number;
-  status: 'pending';
-  expiresAt: string;
-} | null> {
-  try {
-    const api = getKimiWebApi();
-    return await api.startOAuthLogin();
-  } catch {
-    return null;
-  }
-}
-
-/** Poll the singleton OAuth flow. Returns null on error or no active flow. */
-async function pollOAuthLogin(): Promise<{
-  flowId: string;
-  status: 'pending' | 'authenticated' | 'expired' | 'cancelled';
-  resolvedAt?: string;
-} | null> {
-  try {
-    const api = getKimiWebApi();
-    return await api.pollOAuthLogin();
-  } catch {
-    return null;
-  }
-}
-
-/** Cancel the current OAuth flow (best-effort). */
-async function cancelOAuthLogin(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.cancelOAuthLogin();
-  } catch {
-    // Best-effort
-  }
-}
-
-/** Logout from the managed Kimi provider. Re-checks auth and reloads sessions. */
-async function logout(): Promise<void> {
-  try {
-    const api = getKimiWebApi();
-    await api.logout();
-    await checkAuth();
-    await load();
-  } catch (err) {
-    pushOperationFailure('logout', err);
-  }
-}
-
-/**
- * compact() — request history compaction via POST /sessions/{id}:compact.
- * Progress arrives asynchronously through the WS compaction.* events (running
- * notice → divider marker), so we just fire the request. An optional
- * instruction (from `/compact <text>`) steers what the summary focuses on.
- */
-function compact(instruction?: string): void {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  void getKimiWebApi()
-    .compactSession(sid, instruction)
-    .catch((err) => {
-      pushOperationFailure('compact', err, { sessionId: sid });
-    });
-}
-
-/**
- * forkSession() — fork the active session into a new child session via
- * POST /sessions/{id}:fork, then add it to the list and select it.
- */
-async function forkSession(sessionId?: string): Promise<void> {
-  const sid = sessionId ?? rawState.activeSessionId;
-  if (!sid) return;
-  try {
-    const forked = await getKimiWebApi().forkSession(sid);
-    rawState.sessions = [forked, ...rawState.sessions.filter((s) => s.id !== forked.id)];
-    await selectSession(forked.id);
-  } catch (err) {
-    pushOperationFailure('fork', err, { sessionId: sid });
-  }
-}
-
-/**
- * Undo the last `count` turns of the active session (daemon :undo), then re-sync
- * the snapshot so the local transcript matches the daemon's post-undo history.
- * Returns the text of the most-recent user message that was undone, so the UI
- * can offer "edit + resend" (load it back into the composer).
- */
-async function undo(count = 1): Promise<string | null> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return null;
-  // Capture the last user message text BEFORE the undo removes it.
-  const lastUserText = (() => {
-    const msgs = rawState.messagesBySession[sid] ?? [];
-    for (let i = msgs.length - 1; i >= 0; i--) {
-      const m = msgs[i]!;
-      if (m.role !== 'user') continue;
-      if (m.metadata?.['origin'] && (m.metadata['origin'] as { kind?: string }).kind !== 'user') continue;
-      return m.content
-        .filter((c): c is { type: 'text'; text: string } => c.type === 'text')
-        .map((c) => c.text)
-        .join('\n');
-    }
-    return null;
-  })();
-  try {
-    await getKimiWebApi().undoSession(sid, count);
-    await syncSessionFromSnapshot(sid);
-    return lastUserText;
-  } catch (err) {
-    pushOperationFailure('undo', err, { sessionId: sid });
-    return null;
-  }
-}
-
-/**
- * Remove a queued message for the active session by index.
- * Defensive: no-op if index out of range or no active session.
- */
-function unqueue(index: number): void {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const current = rawState.queuedBySession[sid] ?? [];
-  if (index < 0 || index >= current.length) return;
-  const next = [...current];
-  next.splice(index, 1);
-  rawState.queuedBySession = { ...rawState.queuedBySession, [sid]: next };
-}
-
-/**
- * List directory contents for the active session.
- * Returns FsEntry[] — defensive, returns [] on error or no active session.
- */
-async function listDir(path: string): Promise<FsEntry[]> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return [];
-  try {
-    const api = getKimiWebApi();
-    const result = await api.listDirectory(sid, { path, includeGitStatus: true });
-    return result.items;
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Read file content for the active session.
- * Returns the file metadata + content (including path), or null on error or no active session.
- */
-async function readFileContent(path: string): Promise<{
-  path: string;
-  content: string;
-  encoding: 'utf-8' | 'base64';
-  mime: string;
-  languageId?: string;
-  isBinary: boolean;
-  size: number;
-  lineCount?: number;
-} | null> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return null;
-  try {
-    const api = getKimiWebApi();
-    const result = await api.readFile(sid, { path });
-    return {
-      path: result.path,
-      content: result.content,
-      encoding: result.encoding,
-      mime: result.mime,
-      languageId: result.languageId,
-      isBinary: result.isBinary,
-      size: result.size,
-      lineCount: result.lineCount,
-    };
-  } catch {
-    return null;
-  }
-}
-
-// Matches the daemon's FS_READ_MAX_BYTES. Without an explicit length the
-// protocol defaults to 1MiB and silently truncates — half a PNG decodes as a
-// broken image, which is worse than falling back to the original src.
-const IMAGE_READ_MAX_BYTES = 10_485_760;
-
-function getFileDownloadUrl(path: string): string | null {
-  const sid = rawState.activeSessionId;
-  if (!sid) return null;
-  return getKimiWebApi().getFileDownloadUrl(sid, path);
-}
-
-async function openWorkspaceFile(path: string, line?: number): Promise<boolean> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return false;
-  try {
-    await getKimiWebApi().openFile(sid, { path, line });
-    return true;
-  } catch (err) {
-    pushOperationFailure('openFile', err, { sessionId: sid });
-    return false;
-  }
-}
-
-/** Open the current workspace in an external application (Finder, Cursor, etc.). */
-async function openInApp(appId: string): Promise<void> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return;
-  const path = status.value.cwd || '.';
-  try {
-    await getKimiWebApi().openInApp(sid, appId, path);
-  } catch (err) {
-    pushOperationFailure('openInApp', err, { sessionId: sid });
-  }
-}
-
-async function revealWorkspaceFile(path: string): Promise<boolean> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return false;
-  try {
-    await getKimiWebApi().revealFile(sid, { path });
-    return true;
-  } catch (err) {
-    pushOperationFailure('revealFile', err, { sessionId: sid });
-    return false;
-  }
-}
-
-/**
- * Resolve a local image path to a displayable data URL.
- * Non-local URLs (http/https/data) pass through unchanged.
- * Local paths are read via the daemon's readFile endpoint and returned as
- * data:{mime};base64,{content} URLs so they render in the browser. Absolute
- * paths are made cwd-relative first (the daemon rejects absolute paths), and
- * truncated/non-binary reads fall back to the original src.
- */
-async function resolveImageUrl(src: string): Promise<string> {
-  // Pass through already-addressable URLs
-  if (/^(https?:|data:|blob:)/i.test(src)) return src;
-  const sid = rawState.activeSessionId;
-  if (!sid) return src;
-
-  // The daemon's path resolution only accepts session-relative paths, but the
-  // model usually references images by absolute path. Strip the session cwd.
-  let path = src;
-  if (path.startsWith('/')) {
-    const cwd = rawState.sessions.find((s) => s.id === sid)?.cwd;
-    if (cwd && (path === cwd || path.startsWith(cwd.endsWith('/') ? cwd : `${cwd}/`))) {
-      path = path.slice(cwd.length).replace(/^\//, '');
-      if (!path) return src;
-    } else {
-      return src; // absolute path outside the workspace — unreadable
-    }
-  }
-
-  try {
-    const api = getKimiWebApi();
-    const result = await api.readFile(sid, { path, length: IMAGE_READ_MAX_BYTES });
-    if (!result.isBinary || result.encoding !== 'base64' || result.truncated) return src;
-    return `data:${result.mime};base64,${result.content}`;
-  } catch {
-    return src;
-  }
-}
-
-/**
- * Search files in the active session using the daemon searchFiles endpoint.
- * Returns {path, name}[] — defensive, returns [] on error or no active session.
- */
-async function searchFiles(query: string): Promise<Array<{ path: string; name: string }>> {
-  const sid = rawState.activeSessionId;
-  if (!sid) return [];
-  try {
-    const api = getKimiWebApi();
-    const result = await api.searchFiles(sid, { query, limit: 20 });
-    return result.items.map((item) => ({ path: item.path, name: item.name }));
-  } catch {
-    return [];
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Composable return
 // ---------------------------------------------------------------------------
@@ -4105,9 +1991,9 @@ export function useKimiWebClient() {
     fastMoon: appearance.fastMoon,
 
     // Model + Provider reactive state
-    models,
-    starredModelIds,
-    providers,
+    models: modelProvider.models,
+    starredModelIds: modelProvider.starredModelIds,
+    providers: modelProvider.providers,
 
     // Theme
     theme: appearance.theme,
@@ -4133,88 +2019,88 @@ export function useKimiWebClient() {
     setOnboarded,
 
     // Actions
-    load,
-    selectSession,
-    createSession,
-    loadOlderMessages,
+    load: workspaceState.load,
+    selectSession: workspaceState.selectSession,
+    createSession: workspaceState.createSession,
+    loadOlderMessages: workspaceState.loadOlderMessages,
 
     // Workspace actions
-    loadWorkspaces,
-    selectWorkspace,
-    openWorkspace,
-    openWorkspaceDraft,
-    createSessionInWorkspace,
-    startSessionAndSendPrompt,
-    addWorkspaceByPath,
-    browseFs,
-    getFsHome,
+    loadWorkspaces: workspaceState.loadWorkspaces,
+    selectWorkspace: workspaceState.selectWorkspace,
+    openWorkspace: workspaceState.openWorkspace,
+    openWorkspaceDraft: workspaceState.openWorkspaceDraft,
+    createSessionInWorkspace: workspaceState.createSessionInWorkspace,
+    startSessionAndSendPrompt: workspaceState.startSessionAndSendPrompt,
+    addWorkspaceByPath: workspaceState.addWorkspaceByPath,
+    browseFs: workspaceState.browseFs,
+    getFsHome: workspaceState.getFsHome,
 
-    sendPrompt,
-    steerPrompt,
+    sendPrompt: workspaceState.sendPrompt,
+    steerPrompt: workspaceState.steerPrompt,
     // Side chat (BTW side-channel agent)
-    sideChatVisible,
-    sideChatSessionId,
-    sideChatTurns,
-    sideChatRunning,
-    sideChatSending,
-    openSideChat,
-    closeSideChat,
-    sendSideChatPrompt,
-    uploadImage,
-    abortCurrentPrompt,
-    respondApproval,
-    respondQuestion,
-    dismissQuestion,
-    cancelTask,
+    sideChatVisible: sideChat.sideChatVisible,
+    sideChatSessionId: sideChat.sideChatSessionId,
+    sideChatTurns: sideChat.sideChatTurns,
+    sideChatRunning: sideChat.sideChatRunning,
+    sideChatSending: sideChat.sideChatSending,
+    openSideChat: sideChat.openSideChat,
+    closeSideChat: sideChat.closeSideChat,
+    sendSideChatPrompt: sideChat.sendSideChatPrompt,
+    uploadImage: workspaceState.uploadImage,
+    abortCurrentPrompt: workspaceState.abortCurrentPrompt,
+    respondApproval: workspaceState.respondApproval,
+    respondQuestion: workspaceState.respondQuestion,
+    dismissQuestion: workspaceState.dismissQuestion,
+    cancelTask: workspaceState.cancelTask,
 
     // New Phase 1 actions
-    setPermission,
-    setThinking,
-    setPlanMode,
-    togglePlanMode,
-    setSwarmMode,
-    toggleSwarmMode,
-    setGoalMode,
-    toggleGoalMode,
-    createGoal,
-    controlGoal,
-    enqueue,
-    dismissWarning,
-    renameSession,
-    renameWorkspace,
-    deleteWorkspace,
-    archiveSession,
-    compact,
-    forkSession,
-    undo,
+    setPermission: workspaceState.setPermission,
+    setThinking: modelProvider.setThinking,
+    setPlanMode: workspaceState.setPlanMode,
+    togglePlanMode: workspaceState.togglePlanMode,
+    setSwarmMode: workspaceState.setSwarmMode,
+    toggleSwarmMode: workspaceState.toggleSwarmMode,
+    setGoalMode: workspaceState.setGoalMode,
+    toggleGoalMode: workspaceState.toggleGoalMode,
+    createGoal: workspaceState.createGoal,
+    controlGoal: workspaceState.controlGoal,
+    enqueue: workspaceState.enqueue,
+    dismissWarning: workspaceState.dismissWarning,
+    renameSession: workspaceState.renameSession,
+    renameWorkspace: workspaceState.renameWorkspace,
+    deleteWorkspace: workspaceState.deleteWorkspace,
+    archiveSession: workspaceState.archiveSession,
+    compact: workspaceState.compact,
+    forkSession: workspaceState.forkSession,
+    undo: workspaceState.undo,
 
     // New Phase 4 actions
-    unqueue,
-    searchFiles,
-    loadGitStatus,
-    loadFileDiff,
-    clearFileDiff,
+    unqueue: workspaceState.unqueue,
+    searchFiles: workspaceState.searchFiles,
+    loadGitStatus: workspaceState.loadGitStatus,
+    loadFileDiff: workspaceState.loadFileDiff,
+    clearFileDiff: workspaceState.clearFileDiff,
 
     // File system actions
-    listDir,
-    readFileContent,
-    getFileDownloadUrl,
-    openWorkspaceFile,
-    openInApp,
-    revealWorkspaceFile,
-    resolveImageUrl,
+    listDir: workspaceState.listDir,
+    readFileContent: workspaceState.readFileContent,
+    getFileDownloadUrl: workspaceState.getFileDownloadUrl,
+    openWorkspaceFile: workspaceState.openWorkspaceFile,
+    openInApp: workspaceState.openInApp,
+    revealWorkspaceFile: workspaceState.revealWorkspaceFile,
+    resolveImageUrl: workspaceState.resolveImageUrl,
 
     // Model + Provider actions
-    refreshOAuthProviderModels,
-    loadModels,
-    loadProviders,
+    refreshOAuthProviderModels: modelProvider.refreshOAuthProviderModels,
+    loadModels: modelProvider.loadModels,
+    loadProviders: modelProvider.loadProviders,
     skills,
-    activateSkill,
-    setModel,
-    toggleStarModel,
-    addProvider,
-    deleteProvider,
-    refreshProvider,
+    activateSkill: modelProvider.activateSkill,
+    setModel: modelProvider.setModel,
+    toggleStarModel: modelProvider.toggleStarModel,
+    addProvider: modelProvider.addProvider,
+    deleteProvider: modelProvider.deleteProvider,
+    refreshProvider: modelProvider.refreshProvider,
 
     // Auth state
     authReady,
@@ -4223,14 +2109,14 @@ export function useKimiWebClient() {
 
     // Config state + actions
     config,
-    updateConfig,
+    updateConfig: workspaceState.updateConfig,
 
     // Auth actions
-    checkAuth,
-    startOAuthLogin,
-    pollOAuthLogin,
-    cancelOAuthLogin,
-    logout,
+    checkAuth: workspaceState.checkAuth,
+    startOAuthLogin: modelProvider.startOAuthLogin,
+    pollOAuthLogin: modelProvider.pollOAuthLogin,
+    cancelOAuthLogin: modelProvider.cancelOAuthLogin,
+    logout: workspaceState.logout,
   };
 }
 
diff --git a/apps/kimi-web/src/composables/usePageTitle.ts b/apps/kimi-web/src/composables/usePageTitle.ts
new file mode 100644
index 000000000..f9baa6821
--- /dev/null
+++ b/apps/kimi-web/src/composables/usePageTitle.ts
@@ -0,0 +1,55 @@
+// apps/kimi-web/src/composables/usePageTitle.ts
+// Static page title (app name only). The session title and workspace name are
+// intentionally excluded so the tab title stays stable.
+// Prefix an animated spinner when the agent is running so users can see activity
+// at a glance.
+
+import { computed, onUnmounted, ref, watch, watchEffect, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export interface UsePageTitleOptions {
+  running: Ref<boolean>;
+  showAuthGate: Ref<boolean>;
+}
+
+export function usePageTitle({ running, showAuthGate }: UsePageTitleOptions): void {
+  const { t } = useI18n();
+
+  const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
+  const spinnerFrame = ref(0);
+  let spinnerTimer: ReturnType<typeof setInterval> | null = null;
+
+  function startSpinner(): void {
+    if (spinnerTimer !== null) return;
+    spinnerFrame.value = 0;
+    spinnerTimer = setInterval(() => {
+      spinnerFrame.value = (spinnerFrame.value + 1) % SPINNER_FRAMES.length;
+    }, 250);
+  }
+
+  function stopSpinner(): void {
+    if (spinnerTimer !== null) {
+      clearInterval(spinnerTimer);
+      spinnerTimer = null;
+    }
+    spinnerFrame.value = 0;
+  }
+
+  watch(running, (isRunning) => {
+    if (isRunning) startSpinner();
+    else stopSpinner();
+  }, { immediate: true });
+
+  const pageTitle = computed<string>(() => {
+    const prefix = running.value ? `${SPINNER_FRAMES[spinnerFrame.value]} ` : '';
+    if (showAuthGate.value) return `${prefix}${t('app.authPageTitle')} - Kimi Code Web`;
+    return `${prefix}Kimi Code Web`;
+  });
+  watchEffect(() => {
+    if (typeof document !== 'undefined') document.title = pageTitle.value;
+  });
+
+  onUnmounted(() => {
+    stopSpinner();
+  });
+}
diff --git a/apps/kimi-web/src/composables/useSidebarLayout.ts b/apps/kimi-web/src/composables/useSidebarLayout.ts
new file mode 100644
index 000000000..a05e1c080
--- /dev/null
+++ b/apps/kimi-web/src/composables/useSidebarLayout.ts
@@ -0,0 +1,54 @@
+// apps/kimi-web/src/composables/useSidebarLayout.ts
+// Layout: resizable session column. ResizeHandle owns the column width (with
+// localStorage persistence); we mirror it here to drive the App grid.
+
+import { computed, ref } from 'vue';
+import { safeGetString, safeSetString, STORAGE_KEYS } from '../lib/storage';
+
+const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
+const SIDEBAR_COLLAPSED_KEY = STORAGE_KEYS.sidebarCollapsed;
+const SIDEBAR_DEFAULT = 270;
+const SIDEBAR_MIN = 170;
+const SIDEBAR_MAX = 420;
+const SIDEBAR_COLLAPSED_WIDTH = 36;
+
+export function useSidebarLayout() {
+  const sessionColWidth = ref(SIDEBAR_DEFAULT);
+  const sidebarCollapsed = ref(false);
+  const sideWidth = computed(() =>
+    sidebarCollapsed.value ? SIDEBAR_COLLAPSED_WIDTH : sessionColWidth.value,
+  );
+
+  function loadSidebarCollapsed(): void {
+    try {
+      sidebarCollapsed.value = safeGetString(SIDEBAR_COLLAPSED_KEY) === 'true';
+    } catch {
+      sidebarCollapsed.value = false;
+    }
+  }
+
+  function saveSidebarCollapsed(): void {
+    try {
+      safeSetString(SIDEBAR_COLLAPSED_KEY, String(sidebarCollapsed.value));
+    } catch {
+      // ignore
+    }
+  }
+
+  function toggleSidebarCollapse(): void {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+    saveSidebarCollapsed();
+  }
+
+  return {
+    SIDEBAR_WIDTH_KEY,
+    SIDEBAR_DEFAULT,
+    SIDEBAR_MIN,
+    SIDEBAR_MAX,
+    sessionColWidth,
+    sidebarCollapsed,
+    sideWidth,
+    loadSidebarCollapsed,
+    toggleSidebarCollapse,
+  };
+}
diff --git a/apps/kimi-web/src/types.ts b/apps/kimi-web/src/types.ts
index 3244331b6..9418d1909 100644
--- a/apps/kimi-web/src/types.ts
+++ b/apps/kimi-web/src/types.ts
@@ -5,6 +5,19 @@ import type { AppSessionStatus } from './api/types';
     list can distinguish awaiting / aborted instead of collapsing to running|idle. */
 export type SessionStatus = AppSessionStatus;
 
+/** File content loaded for preview (text or base64-encoded binary). */
+export interface FileData {
+  path: string;
+  content: string;
+  encoding: 'utf-8' | 'base64';
+  mime: string;
+  sourceUrl?: string;
+  languageId?: string;
+  isBinary: boolean;
+  size: number;
+  lineCount?: number;
+}
+
 export interface Session {
   id: string;
   title: string;