From d9b9b56599165bdc0e7f96e5d81c276010d543d6 Mon Sep 17 00:00:00 2001
From: nerdosaurus <58043629+nerdosaurus@users.noreply.github.com>
Date: Mon, 8 Jun 2026 11:50:56 -0400
Subject: [PATCH] Diagram editor pr (#1432)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add draw.io diagram editor integration

Embed draw.io editor via react-drawio (MIT, zero deps) for inline
editing of .drawio files. Changes auto-save to disk. Includes
inline editor in FilesView with Visual/Source toggle, dark mode
support, template picker for new files, and chat file attachment
integration.

* fix: debounce diagram autosave to prevent reload loop

* fix: ignore watcher-triggered xml prop changes to prevent reload loop

* fix: remove auto-save-to-disk, add manual save button for diagrams

Autosave writes triggered file watcher cascade that reloaded the
draw.io iframe and reset zoom. Replaced with explicit Save button
in the toolbar (floppy disk icon). Editor XML is stable on mount
and ignores watcher-triggered prop changes.

* fix: remove auto-save write from DiagramView, add save button

* fix: hide draw.io save/exit buttons in editor

* fix: also hide save-and-exit button

* fix: brighten save button styling, add saved confirmation

* fix: remove autoSaveStatus toggle on diagram save to prevent toolbar collapse

* fix: add local save confirmation state for diagram button

* fix: remount drawio iframe on theme change, persisting XML across mounts

* fix: clear persisted xml on mount to prevent leaking between files

* fix: initialize dark mode synchronously, preserve edits across theme remount

* fix: auto-focus drawio iframe on mount/theme-change for keyboard shortcuts

* fix: add diagram i18n keys to Traditional Chinese locale

* fix: restore upstream HMR host and LAN address support

* fix: load sub-agent sessions on bootstrap for sidebar visibility

Two-phase session load: first fetch root sessions (for accurate
sessionTotal), then fetch all sessions and include child sessions
(sub-agent delegations). This ensures sub-agent sessions appear
in the sidebar immediately instead of relying on the async global
session store.

* remove opencode-drawio from PR branch

* fix: atomic file writes to prevent concurrent read/write truncation

Three-layer defense against the O_TRUNC race:

1. Write side (server): replace direct writeFile with write-to-temp-
   then-rename. fs.rename is atomic on POSIX.

2. Read side (server): retry up to 3 times with 50ms backoff when
   readFile returns empty but stat reported non-zero size.

3. FilesView client: refuse to save empty draftContent when the
   original fileContent was non-empty.

* fix(dev): clean up orphaned OpenCode processes on Ctrl+C

* fix: allow empty file saves, log warning instead of blocking

Replaces the hard block on saving empty content with a console.warn.
The atomic write + read retry on the server side handle the O_TRUNC
race properly. The previous guard caused a UX regression by silently
preventing users from clearing a file and saving.

* fix: remove time window from sub-agent fallback for live tasks

While a task tool is active, the fallback now matches any session
with the correct parentID regardless of creation time. This allows
late-appearing child sessions to be found when the OpenCode server
is slow or the SSE event pipeline is delayed. The time window is
still applied once the task tool has completed, as a final sanity
check.

* fix: three diagram editor bugs from Greptile review

1. stableXmlRef now resets when xml prop changes — switching
   between .drawio files renders the correct content.

2. Focus effect only runs on mount, not on isDark changes —
   theme toggle no longer steals keyboard focus 600ms later.

3. saveDiagram updates xml state after writing — dirty-check
   guard works correctly for subsequent saves.

* fix: route session.created SSE events to correct directory

Three-layer fix for sub-agent sessions not appearing in sidebar and
inline chat:

1. protocol.js: parseSseEventEnvelope now extracts directory from
   properties.info.directory (where session.created/updated events
   carry it) in addition to properties.directory. WS frames relayed
   to the browser now carry the real directory instead of 'global',
   so child sessions routed to the correct directory store.

2. event-pipeline.ts: same fallback in resolveEventDirectory for
   defense-in-depth when SSE events bypass the WS relay.

3. resolveFallbackTaskSessionId.ts: time window lower bound now
   allows 2s grace before taskStartTime to accommodate server timing
   jitter (child session creation timestamps consistently precede the
   tool's recorded start by ~6-9ms), fixing the 'Open subtask'
   button not rendering in OpenChamber's inline chat.

* fix: sub-agent sidebar visibility, file zeroing guard, inline badge fallback

- Sync watchdog: periodic child session discovery poll (every 15s) detects
  sessions created by other OpenCode instances, triggers parent materialization
- protocol.js: parseSseEventEnvelope extracts directory from
  properties.info.directory for session.created/updated events
- event-pipeline.ts: same fallback in resolveEventDirectory for defense-in-depth
- resolveFallbackTaskSessionId: don't require taskStartTime (cross-OpenCode);
  pick most recent child when multiple idle candidates exist
- readTaskSessionIdFromOutput: parse <task id="ses_xxx"> format from output
- FilesView: reinstate empty-draft guard (block save when draftContent='' but
  fileContent had content) to prevent file zeroing on tab switch

* Fix diagram autosave reload loop

* Highlight drawio files as XML

* Use diff-compatible highlighting for drawio files

* Restore drawio file icon mapping

* Stabilize drawio source preview toggle

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
---
 bun.lock                                      |   16 +-
 package.json                                  |    1 +
 packages/ui/package.json                      |    1 +
 .../ui/src/components/chat/FileAttachment.tsx |   38 +
 .../chat/message/parts/ToolPart.test.ts       |   13 +
 .../chat/message/parts/ToolPart.tsx           |   12 +-
 .../parts/resolveFallbackTaskSessionId.ts     |  225 +-
 .../chat/message/parts/taskSessionIdParser.ts |    4 +
 .../src/components/diagram/DiagramEditor.tsx  |  109 +
 packages/ui/src/components/diagram/index.ts   |    1 +
 packages/ui/src/components/layout/Header.tsx  |    1 +
 .../ui/src/components/layout/MainLayout.tsx   |    3 +
 .../ui/src/components/views/DiagramView.tsx   |  102 +
 .../ui/src/components/views/FilesView.tsx     | 7595 +++++++++--------
 .../src/lib/codemirror/languageByExtension.ts |    3 +
 packages/ui/src/lib/i18n/messages/en.ts       |    4 +
 packages/ui/src/lib/i18n/messages/es.ts       |    4 +
 packages/ui/src/lib/i18n/messages/ko.ts       |    4 +
 packages/ui/src/lib/i18n/messages/pl.ts       |    4 +
 packages/ui/src/lib/i18n/messages/pt-BR.ts    |    4 +
 packages/ui/src/lib/i18n/messages/uk.ts       |    4 +
 packages/ui/src/lib/i18n/messages/zh-CN.ts    |    4 +
 packages/ui/src/lib/i18n/messages/zh-TW.ts    |    4 +
 packages/ui/src/lib/router/types.ts           |    2 +-
 packages/ui/src/lib/toolHelpers.ts            |    7 +
 packages/ui/src/stores/useUIStore.ts          |   27 +-
 packages/ui/src/sync/event-pipeline.ts        |   15 +-
 packages/ui/src/sync/sync-context.tsx         | 5273 ++++++------
 .../web/server/lib/event-stream/protocol.js   |    4 +-
 packages/web/server/lib/fs/routes.js          |   27 +-
 scripts/dev-web-hmr.mjs                       |   68 +-
 31 files changed, 7102 insertions(+), 6477 deletions(-)
 create mode 100644 packages/ui/src/components/chat/message/parts/ToolPart.test.ts
 create mode 100644 packages/ui/src/components/chat/message/parts/taskSessionIdParser.ts
 create mode 100644 packages/ui/src/components/diagram/DiagramEditor.tsx
 create mode 100644 packages/ui/src/components/diagram/index.ts
 create mode 100644 packages/ui/src/components/views/DiagramView.tsx

diff --git a/bun.lock b/bun.lock
index adc087da..8c911f5e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -45,6 +45,7 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@xenova/transformers": "^2.17.2",
+        "@zumer/snapdom": "^2.12.8",
         "bun-pty": "^0.4.5",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -98,7 +99,7 @@
     },
     "packages/electron": {
       "name": "@openchamber/electron",
-      "version": "1.12.1",
+      "version": "1.12.3",
       "dependencies": {
         "@openchamber/web": "workspace:*",
         "electron-context-menu": "^4.1.2",
@@ -113,7 +114,7 @@
     },
     "packages/ui": {
       "name": "@openchamber/ui",
-      "version": "1.12.1",
+      "version": "1.12.3",
       "dependencies": {
         "@base-ui/react": "^1.4.0",
         "@codemirror/autocomplete": "^6.20.0",
@@ -172,6 +173,7 @@
         "qrcode": "^1.5.4",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-drawio": "1.0.7",
         "react-syntax-highlighter": "^15.6.6",
         "rehype-katex": "^7.0.1",
         "remark-math": "^6.0.0",
@@ -213,7 +215,7 @@
     },
     "packages/vscode": {
       "name": "openchamber",
-      "version": "1.12.1",
+      "version": "1.12.3",
       "dependencies": {
         "@openchamber/ui": "workspace:*",
         "@opencode-ai/sdk": "^1.16.0",
@@ -236,7 +238,7 @@
     },
     "packages/web": {
       "name": "@openchamber/web",
-      "version": "1.12.1",
+      "version": "1.12.3",
       "bin": {
         "openchamber": "./bin/cli.js",
       },
@@ -1408,7 +1410,7 @@
 
     "@yarnpkg/lockfile": ["@yarnpkg/lockfile@1.1.0", "", {}, "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ=="],
 
-    "@zumer/snapdom": ["@zumer/snapdom@2.12.0", "", {}, "sha512-TdLGu+1RkKI3JKfMFvn1gRPD/rl8hrAeN6aFjjd0w7S39nulbd94ChxSlfH7nSCm8kzuQkeWFxIsij4+Mk1RDg=="],
+    "@zumer/snapdom": ["@zumer/snapdom@2.12.8", "", {}, "sha512-dLX6ZMNjLveasn9yhcruOOfd8GBZBDp59F7iJoLlGf7BnGp0vfVsjxIZDIjN2UTZJN1KoJR/BXsxEnAyY7LuXA=="],
 
     "abbrev": ["abbrev@1.1.1", "", {}, "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="],
 
@@ -2750,6 +2752,8 @@
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
+    "react-drawio": ["react-drawio@1.0.7", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Vl3Bk7hLOl3k2i317CtxlG8axqBsLJMsuY6Sw5sT1wpvaT48L7o0JZQ1TW65+YF1GA1PuYeI3W2xpSggcB//wg=="],
+
     "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
 
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
@@ -3376,6 +3380,8 @@
 
     "@npmcli/agent/socks-proxy-agent": ["socks-proxy-agent@8.0.5", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "socks": "^2.8.3" } }, "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw=="],
 
+    "@openchamber/ui/@zumer/snapdom": ["@zumer/snapdom@2.12.0", "", {}, "sha512-TdLGu+1RkKI3JKfMFvn1gRPD/rl8hrAeN6aFjjd0w7S39nulbd94ChxSlfH7nSCm8kzuQkeWFxIsij4+Mk1RDg=="],
+
     "@openchamber/ui/ghostty-web": ["ghostty-web@0.4.0", "", {}, "sha512-0puDBik2qapbD/QQBW9o5ZHfXnZBqZWx/ctBiVtKZ6ZLds4NYb+wZuw1cRLXZk9zYovIQ908z3rvFhexAvc5Hg=="],
 
     "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
diff --git a/package.json b/package.json
index 800d18c5..25ad14d1 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@xenova/transformers": "^2.17.2",
+    "@zumer/snapdom": "^2.12.8",
     "bun-pty": "^0.4.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6ed832e5..833c99ee 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -68,6 +68,7 @@
     "qrcode": "^1.5.4",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-drawio": "1.0.7",
     "react-syntax-highlighter": "^15.6.6",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
diff --git a/packages/ui/src/components/chat/FileAttachment.tsx b/packages/ui/src/components/chat/FileAttachment.tsx
index 0c8f9e54..d0f8b4de 100644
--- a/packages/ui/src/components/chat/FileAttachment.tsx
+++ b/packages/ui/src/components/chat/FileAttachment.tsx
@@ -5,6 +5,7 @@ import { useUIStore } from '@/stores/useUIStore';
 import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { openExternalUrl } from '@/lib/url';
+import { isDrawioFile } from '@/lib/toolHelpers';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
@@ -551,6 +552,7 @@ interface FilePart {
   url?: string;
   filename?: string;
   size?: number;
+  source?: Record<string, unknown>;
 }
 
 const GITHUB_ISSUE_LINK_MIME = 'application/vnd.github.issue-link';
@@ -573,6 +575,7 @@ interface MessageFilesDisplayProps {
 }
 
 export const MessageFilesDisplay = memo(({ files, onShowPopup, compact = false }: MessageFilesDisplayProps) => {
+  const { t } = useI18n();
 
   const fileItems = files.filter(f => f.type === 'file' && (f.mime || f.url));
 
@@ -817,6 +820,41 @@ export const MessageFilesDisplay = memo(({ files, onShowPopup, compact = false }
           );
         }
 
+        const source = file.source;
+        const sourceType = typeof source?.type === 'string' ? source.type : undefined;
+        const sourcePath = source && typeof (source as Record<string, unknown>).path === 'string' ? (source as Record<string, unknown>).path as string : undefined;
+        const filePath = sourceType === 'file' && sourcePath ? sourcePath : (file.url || '');
+        const isDrawio = filePath && isDrawioFile(filePath);
+
+        if (isDrawio) {
+          return (
+            <Tooltip key={file.url || `${fileName}-${index}`}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => {
+                    useUIStore.getState().navigateToDiagram(filePath);
+                  }}
+                  className={cn(
+                    "flex items-center gap-2 p-2 rounded-lg border border-border/40 bg-muted/10 hover:bg-muted/20 transition-colors text-left cursor-pointer",
+                    compact ? "text-xs" : "text-sm"
+                  )}
+                >
+                  <Icon name="file" className={cn("text-muted-foreground shrink-0", compact ? "h-3.5 w-3.5" : "h-4 w-4")} />
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{fileName}</p>
+                    <p className="text-xs text-status-info">{t('chat.fileAttachment.openInDiagram')}</p>
+                  </div>
+                  <Icon name="external-link" className={cn("text-muted-foreground shrink-0", compact ? "h-3 w-3" : "h-3.5 w-3.5")} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t('chat.fileAttachment.openInDiagram')}</p>
+              </TooltipContent>
+            </Tooltip>
+          );
+        }
+
         return (
           <Tooltip key={file.url || `${fileName}-${index}`}>
             <TooltipTrigger asChild>
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.test.ts b/packages/ui/src/components/chat/message/parts/ToolPart.test.ts
new file mode 100644
index 00000000..36c4d4ed
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, test } from 'bun:test';
+
+import { readTaskTagSessionIdFromOutput } from './taskSessionIdParser';
+
+describe('readTaskTagSessionIdFromOutput', () => {
+    test('parses task tags without state attributes', () => {
+        expect(readTaskTagSessionIdFromOutput('<task id="ses_abc123">')).toBe('ses_abc123');
+    });
+
+    test('parses task tags with additional attributes', () => {
+        expect(readTaskTagSessionIdFromOutput('<task id="ses_def456" state="completed">')).toBe('ses_def456');
+    });
+});
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index 4359ae7e..3c90ca68 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -45,6 +45,7 @@ import { ToolRevealOnMount } from './ToolRevealOnMount';
 import { getToolIcon } from './toolPresentation';
 import { useDurationTickerNow } from './useDurationTicker';
 import { resolveFallbackTaskSessionId } from './resolveFallbackTaskSessionId';
+import { readTaskTagSessionIdFromOutput } from './taskSessionIdParser';
 import { areRenderRelevantPartsEqual } from '../renderCompare';
 import { useI18n } from '@/lib/i18n';
 import { getDiffPatchEntries, getPatchText } from './toolDiffUtils';
@@ -957,7 +958,16 @@ const readTaskSessionIdFromOutput = (output: string | undefined): string | undef
     const taskMatch = output.match(/task_id\s*:\s*([^\s<"']+)/i);
     const sessionMatch = output.match(/session[_\s-]?id\s*:\s*([^\s<"']+)/i);
     const candidate = taskMatch?.[1] ?? sessionMatch?.[1];
-    return normalizeSessionIdCandidate(candidate);
+    if (candidate) {
+        return normalizeSessionIdCandidate(candidate);
+    }
+
+    // OpenCode tool output may wrap child session id in <task id="ses_xxx">
+    const taskTagSessionId = readTaskTagSessionIdFromOutput(output);
+    if (taskTagSessionId) {
+        return normalizeSessionIdCandidate(taskTagSessionId);
+    }
+    return undefined;
 };
 
 const buildTaskSummaryEntriesFromSession = (messages: SessionMessageWithParts[]): TaskToolSummaryEntry[] => {
diff --git a/packages/ui/src/components/chat/message/parts/resolveFallbackTaskSessionId.ts b/packages/ui/src/components/chat/message/parts/resolveFallbackTaskSessionId.ts
index 436e9ee8..897747ad 100644
--- a/packages/ui/src/components/chat/message/parts/resolveFallbackTaskSessionId.ts
+++ b/packages/ui/src/components/chat/message/parts/resolveFallbackTaskSessionId.ts
@@ -1,103 +1,122 @@
-/**
- * resolveFallbackTaskSessionId — pure helper that resolves a pending task tool
- * to a child session from the directory session store when explicit taskSessionId
- * metadata is delayed.
- *
- * Conservative: only returns a session id when the match is unambiguous.
- */
-
-import type { Session, SessionStatus } from '@opencode-ai/sdk/v2/client';
-
-/**
- * Fallback is intentionally narrow: only sessions created shortly after the
- * task started are eligible. This avoids binding to earlier or later sibling
- * subagent sessions when explicit task metadata is delayed.
- */
-/**
- * Narrow initial window avoids binding to wrong sessions on first attempt.
- * Wide window on retry handles late-appearing child sessions under load.
- */
-const TASK_SESSION_MATCH_WINDOW_MS = 3000;
-const TASK_SESSION_MATCH_WINDOW_WIDE_MS = 8000;
-
-const LIVE_STATUSES = new Set<string>(['busy', 'retry']);
-
-export interface ResolveFallbackParams {
-  /** True when this tool is a task tool */
-  isTaskTool: boolean;
-  /** The parent session id (current session) */
-  parentSessionId: string | undefined;
-  /** When the task tool started (ms timestamp) */
-  taskStartTime: number | undefined;
-  /** True when the task tool is finalized (completed/error/etc.) */
-  isTaskFinalized?: boolean;
-  /** Sessions from the directory store */
-  sessions: Session[];
-  /** Session status map from the sync store */
-  sessionStatusMap?: Record<string, SessionStatus>;
-  /** True when a previous resolution attempt has already failed (enables wider window) */
-  hasRetried?: boolean;
-}
-
-/**
- * Attempts to resolve a child session id for a pending task tool by matching
- * against sessions in the directory store.
- *
- * Returns `undefined` when:
- * - Not a task tool
- * - Task is finalized
- * - Parent session is unknown
- * - No unambiguous match found
- */
-export function resolveFallbackTaskSessionId(params: ResolveFallbackParams): string | undefined {
-  const {
-    isTaskTool,
-    parentSessionId,
-    taskStartTime,
-    isTaskFinalized = false,
-    sessions,
-    sessionStatusMap,
-    hasRetried = false,
-  } = params;
-
-  if (!isTaskTool || isTaskFinalized || !parentSessionId || typeof taskStartTime !== 'number') {
-    return undefined;
-  }
-
-  const windowMs = hasRetried ? TASK_SESSION_MATCH_WINDOW_WIDE_MS : TASK_SESSION_MATCH_WINDOW_MS;
-  const latestAllowed = taskStartTime + windowMs;
-
-  // Filter candidate sessions: parentID matches and created shortly after task start.
-  const candidates = sessions.filter((session) => {
-    if (!session?.id || session.parentID !== parentSessionId) {
-      return false;
-    }
-    const created = session.time?.created;
-    if (typeof created !== 'number') {
-      return false;
-    }
-    return created >= taskStartTime && created <= latestAllowed;
-  });
-
-  if (candidates.length === 0) {
-    return undefined;
-  }
-
-  // If exactly one candidate, return it regardless of status
-  if (candidates.length === 1) {
-    return candidates[0].id;
-  }
-
-  // Multiple candidates: try to disambiguate by finding exactly one live (busy/retry)
-  const liveCandidates = candidates.filter((session) => {
-    const status = sessionStatusMap?.[session.id];
-    return status != null && LIVE_STATUSES.has(status.type);
-  });
-
-  if (liveCandidates.length === 1) {
-    return liveCandidates[0].id;
-  }
-
-  // Ambiguous — do not guess
-  return undefined;
-}
+/**
+ * resolveFallbackTaskSessionId — pure helper that resolves a pending task tool
+ * to a child session from the directory session store when explicit taskSessionId
+ * metadata is delayed.
+ *
+ * Conservative: only returns a session id when the match is unambiguous.
+ */
+
+import type { Session, SessionStatus } from '@opencode-ai/sdk/v2/client';
+
+/**
+ * Fallback is intentionally narrow: only sessions created shortly after the
+ * task started are eligible. This avoids binding to earlier or later sibling
+ * subagent sessions when explicit task metadata is delayed.
+ */
+/**
+ * Narrow initial window avoids binding to wrong sessions on first attempt.
+ * Wide window on retry handles late-appearing child sessions under load.
+ */
+const TASK_SESSION_MATCH_WINDOW_MS = 3000;
+const TASK_SESSION_MATCH_WINDOW_WIDE_MS = 8000;
+
+const LIVE_STATUSES = new Set<string>(['busy', 'retry']);
+
+export interface ResolveFallbackParams {
+  /** True when this tool is a task tool */
+  isTaskTool: boolean;
+  /** The parent session id (current session) */
+  parentSessionId: string | undefined;
+  /** When the task tool started (ms timestamp) */
+  taskStartTime: number | undefined;
+  /** True when the task tool is finalized (completed/error/etc.) */
+  isTaskFinalized?: boolean;
+  /** Sessions from the directory store */
+  sessions: Session[];
+  /** Session status map from the sync store */
+  sessionStatusMap?: Record<string, SessionStatus>;
+  /** True when a previous resolution attempt has already failed (enables wider window) */
+  hasRetried?: boolean;
+}
+
+/**
+ * Attempts to resolve a child session id for a pending task tool by matching
+ * against sessions in the directory store.
+ *
+ * Returns `undefined` when:
+ * - Not a task tool
+ * - Task is finalized
+ * - Parent session is unknown
+ * - No unambiguous match found
+ */
+export function resolveFallbackTaskSessionId(params: ResolveFallbackParams): string | undefined {
+  const {
+    isTaskTool,
+    parentSessionId,
+    taskStartTime,
+    isTaskFinalized = false,
+    sessions,
+    sessionStatusMap,
+    hasRetried = false,
+  } = params;
+
+  if (!isTaskTool || !parentSessionId) {
+    return undefined;
+  }
+
+  // Filter candidate sessions: parentID matches the current session.
+  let candidates = sessions.filter((session) => {
+    if (!session?.id || session.parentID !== parentSessionId) {
+      return false;
+    }
+    return true;
+  });
+
+  // When the task is still running, apply no time window — late-appearing
+  // child sessions should still match. Once finalized, restrict to sessions
+  // created within a generous window around the task start to avoid binding
+  // to stale siblings. If taskStartTime is unavailable (cross-OpenCode
+  // sessions), skip the time filter entirely.
+  if (typeof taskStartTime === 'number' && isTaskFinalized) {
+    const windowMs = hasRetried ? TASK_SESSION_MATCH_WINDOW_WIDE_MS : TASK_SESSION_MATCH_WINDOW_MS;
+    const latestAllowed = taskStartTime + windowMs;
+    candidates = candidates.filter((session) => {
+      const created = session.time?.created;
+      return typeof created === 'number' && created >= taskStartTime - 2_000 && created <= latestAllowed;
+    });
+  }
+
+  if (candidates.length === 0) {
+    return undefined;
+  }
+
+  // If exactly one candidate, return it regardless of status
+  if (candidates.length === 1) {
+    return candidates[0].id;
+  }
+
+  // Multiple candidates: try to disambiguate by finding exactly one live (busy/retry)
+  const liveCandidates = candidates.filter((session) => {
+    const status = sessionStatusMap?.[session.id];
+    return status != null && LIVE_STATUSES.has(status.type);
+  });
+
+  if (liveCandidates.length === 1) {
+    return liveCandidates[0].id;
+  }
+
+  // All idle: pick the most recently created child session.
+  // This handles the common case where a delegation completed and the
+  // user is viewing the task tool result inline.
+  if (liveCandidates.length === 0 && candidates.length > 1) {
+    const sorted = [...candidates].sort((a, b) => {
+      const aCreated = typeof a.time?.created === 'number' ? a.time.created : 0;
+      const bCreated = typeof b.time?.created === 'number' ? b.time.created : 0;
+      return bCreated - aCreated;
+    });
+    return sorted[0].id;
+  }
+
+  // Ambiguous — do not guess
+  return undefined;
+}
diff --git a/packages/ui/src/components/chat/message/parts/taskSessionIdParser.ts b/packages/ui/src/components/chat/message/parts/taskSessionIdParser.ts
new file mode 100644
index 00000000..65da370d
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/taskSessionIdParser.ts
@@ -0,0 +1,4 @@
+export const readTaskTagSessionIdFromOutput = (output: string): string | undefined => {
+    const taskTagMatch = output.match(/<task\s+id="([^"]+)"(?:\s+[^>]*)?>/i);
+    return taskTagMatch?.[1];
+};
diff --git a/packages/ui/src/components/diagram/DiagramEditor.tsx b/packages/ui/src/components/diagram/DiagramEditor.tsx
new file mode 100644
index 00000000..088cb3e7
--- /dev/null
+++ b/packages/ui/src/components/diagram/DiagramEditor.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { DrawIoEmbed } from 'react-drawio';
+import { cn } from '@/lib/utils';
+
+export interface DiagramEditorHandle {
+  getXml: () => string;
+}
+
+export interface DiagramEditorProps {
+  xml: string;
+  readOnly?: boolean;
+  className?: string;
+  onChange?: (xml: string) => void;
+}
+
+const BLANK_XML = '<mxfile><diagram id="new" name="Page-1"><mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>';
+
+function detectDark(): boolean {
+  if (typeof document === 'undefined') return false;
+  const theme = document.documentElement.getAttribute('data-theme');
+  return theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+}
+
+export const DiagramEditor = React.forwardRef<DiagramEditorHandle, DiagramEditorProps>(
+  function DiagramEditor({ xml, readOnly, className, onChange }, ref) {
+    const latestXmlRef = React.useRef(xml);
+    const drawioRef = React.useRef<React.ComponentRef<typeof DrawIoEmbed>>(null);
+    const hasShownTemplate = React.useRef(false);
+    const [isDark, setIsDark] = React.useState(detectDark);
+    const stableXmlRef = React.useRef(xml);
+
+    // When the parent switches files (xml prop changes), reset the stable
+    // reference so the new content renders instead of the first file's content.
+    const prevXmlRef = React.useRef(xml);
+    if (prevXmlRef.current !== xml) {
+      prevXmlRef.current = xml;
+      stableXmlRef.current = xml;
+      latestXmlRef.current = xml;
+    }
+
+    const prevIsDark = React.useRef(isDark);
+    if (prevIsDark.current !== isDark) {
+      prevIsDark.current = isDark;
+      stableXmlRef.current = latestXmlRef.current;
+    }
+
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+      const check = () => setIsDark(detectDark());
+      check();
+      const observer = new MutationObserver(check);
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+      return () => observer.disconnect();
+    }, []);
+
+    // Focus the iframe once on mount so keyboard shortcuts work without
+    // clicking the canvas. Intentionally not keyed on isDark — re-focusing
+    // on every theme toggle would steal keyboard focus from the user.
+    React.useEffect(() => {
+      const id = setTimeout(() => {
+        containerRef.current?.querySelector<HTMLIFrameElement>('.diagrams-iframe')?.focus();
+      }, 600);
+      return () => clearTimeout(id);
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      getXml: () => latestXmlRef.current,
+    }));
+
+    const handleLoad = React.useCallback(() => {
+      if (!xml && !hasShownTemplate.current) {
+        hasShownTemplate.current = true;
+        setTimeout(() => {
+          drawioRef.current?.template({});
+        }, 500);
+      }
+    }, [xml]);
+
+    const handleAutoSave = React.useCallback((data: { xml: string }) => {
+      latestXmlRef.current = data.xml;
+      onChange?.(data.xml);
+    }, [onChange]);
+
+    return (
+      <div ref={containerRef} className={cn('h-full w-full', className)}>
+        <DrawIoEmbed
+          key={isDark ? 'dark' : 'light'}
+          ref={drawioRef}
+          xml={stableXmlRef.current || BLANK_XML}
+          autosave
+          urlParameters={{
+            ui: readOnly ? 'simple' : isDark ? 'dark' : 'kennedy',
+            spin: true,
+            libraries: !readOnly,
+            chrome: readOnly,
+            nav: readOnly,
+            layers: readOnly,
+            noSaveBtn: true,
+            noExitBtn: true,
+            saveAndExit: false,
+          }}
+          onLoad={handleLoad}
+          onAutoSave={handleAutoSave}
+        />
+      </div>
+    );
+  },
+);
diff --git a/packages/ui/src/components/diagram/index.ts b/packages/ui/src/components/diagram/index.ts
new file mode 100644
index 00000000..9dcc2d6c
--- /dev/null
+++ b/packages/ui/src/components/diagram/index.ts
@@ -0,0 +1 @@
+export { DiagramEditor, type DiagramEditorProps, type DiagramEditorHandle } from './DiagramEditor';
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 8b896873..4712c112 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -1725,6 +1725,7 @@ export const Header: React.FC<HeaderProps> = ({
         { id: 'files', label: t('layout.mainTab.files'), icon: "folder-6" },
         { id: 'terminal', label: t('layout.mainTab.terminal'), icon: "terminal-box" },
         { id: 'context', label: t('layout.mainTab.context'), icon: "file-list-2" },
+        { id: 'diagram', label: t('layout.mainTab.diagram'), icon: 'file' },
       );
 
       return base;
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index cf042962..2f84da12 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -31,6 +31,7 @@ import { PlanView } from '@/components/views/PlanView';
 
 // Heavy views loaded on-demand to reduce initial bundle parse time.
 const TerminalView = lazyWithChunkRecovery(() => import('@/components/views/TerminalView').then(m => ({ default: m.TerminalView })));
+const DiagramView = lazyWithChunkRecovery(() => import('@/components/views/DiagramView').then(m => ({ default: m.DiagramView })));
 const SettingsView = lazyWithChunkRecovery(() => import('@/components/views/SettingsView').then(m => ({ default: m.SettingsView })));
 const SettingsWindow = lazyWithChunkRecovery(() => import('@/components/views/SettingsWindow').then(m => ({ default: m.SettingsWindow })));
 const MultiRunWindow = lazyWithChunkRecovery(() => import('@/components/views/MultiRunWindow').then(m => ({ default: m.MultiRunWindow })));
@@ -408,6 +409,8 @@ export const MainLayout: React.FC = () => {
                 return <React.Suspense fallback={null}><FilesView /></React.Suspense>;
             case 'context':
                 return <React.Suspense fallback={null}><ProjectContextPanel /></React.Suspense>;
+            case 'diagram':
+                return <React.Suspense fallback={null}><DiagramView /></React.Suspense>;
             default:
                 return null;
         }
diff --git a/packages/ui/src/components/views/DiagramView.tsx b/packages/ui/src/components/views/DiagramView.tsx
new file mode 100644
index 00000000..e2fdd5ad
--- /dev/null
+++ b/packages/ui/src/components/views/DiagramView.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useUIStore } from '@/stores/useUIStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useI18n } from '@/lib/i18n';
+import { DiagramEditor, type DiagramEditorHandle } from '@/components/diagram';
+import { Icon } from '@/components/icon/Icon';
+
+export function DiagramView() {
+  const { t } = useI18n();
+  const { files } = useRuntimeAPIs();
+
+  const [filePath, setFilePath] = React.useState<string | null>(null);
+  const [xml, setXml] = React.useState('');
+  const [loading, setLoading] = React.useState(true);
+  const editorRef = React.useRef<DiagramEditorHandle>(null);
+  const pendingDiagramFile = useUIStore((state) => state.pendingDiagramFile);
+
+  const loadFile = React.useCallback(async (path: string) => {
+    setLoading(true);
+    setFilePath(path);
+    try {
+      const result = await files?.readFile?.(path);
+      if (result) {
+        setXml(result.content);
+      }
+    } catch {
+      setXml('');
+    } finally {
+      setLoading(false);
+    }
+  }, [files]);
+
+  React.useEffect(() => {
+    if (!pendingDiagramFile) {
+      return;
+    }
+    const pending = useUIStore.getState().consumePendingDiagramFile();
+    if (pending) {
+      void loadFile(pending);
+    }
+  }, [loadFile, pendingDiagramFile]);
+
+  const saveDiagram = React.useCallback(async () => {
+    const newXml = editorRef.current?.getXml();
+    if (filePath && files?.writeFile && newXml && newXml !== xml) {
+      await files.writeFile(filePath, newXml);
+      setXml(newXml);
+    }
+  }, [filePath, files, xml]);
+
+  const fileName = filePath ? filePath.split('/').pop() || filePath : '';
+
+  if (!filePath) {
+    return (
+      <div className="flex h-full items-center justify-center p-3">
+        <div className="typography-ui text-muted-foreground">
+          {t('filesView.editor.pickFileFromTree')}
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center p-3">
+        <Icon name="loader-4" className="size-4 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-2 border-b border-border/30 px-3 py-1.5">
+        <Icon name="file" className="size-4 shrink-0 text-muted-foreground" />
+        <span className="typography-ui text-muted-foreground truncate flex-1">{fileName}</span>
+        <button
+          type="button"
+          onClick={() => void saveDiagram()}
+          className="size-6 flex items-center justify-center rounded-md text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          title={t('filesView.diagram.saveDiagram')}
+        >
+          <Icon name="save-3" className="size-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => useUIStore.getState().setActiveMainTab('chat')}
+          className="size-6 flex items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          title={t('filesView.diagram.closeDiagramView')}
+        >
+          <Icon name="close" className="size-4" />
+        </button>
+      </div>
+      <div className="flex-1 min-h-0">
+        <DiagramEditor
+          ref={editorRef}
+          xml={xml}
+          className="h-full"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/views/FilesView.tsx b/packages/ui/src/components/views/FilesView.tsx
index 3159f23a..d65b1321 100644
--- a/packages/ui/src/components/views/FilesView.tsx
+++ b/packages/ui/src/components/views/FilesView.tsx
@@ -1,3756 +1,3927 @@
-import React from 'react';
-import { runtimeFetch } from '@/lib/runtime-fetch';
-
-import { toast } from '@/components/ui';
-import { copyTextToClipboard } from '@/lib/clipboard';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { CodeMirrorEditor } from '@/components/ui/CodeMirrorEditor';
-import { GoToLineDialog } from './GoToLineDialog';
-import { PreviewToggleButton } from './PreviewToggleButton';
-import { JsonTreeView } from '@/components/ui/JsonTreeView';
-import { SimpleMarkdownRenderer } from '@/components/chat/MarkdownRenderer';
-import { languageByExtension, loadLanguageByExtension } from '@/lib/codemirror/languageByExtension';
-import { createFlexokiCodeMirrorTheme } from '@/lib/codemirror/flexokiTheme';
-import { File as PierreFile } from '@pierre/diffs/react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useDebouncedValue } from '@/hooks/useDebouncedValue';
-import { useFileSearchStore } from '@/stores/useFileSearchStore';
-import { useDeviceInfo } from '@/lib/device';
-import { cn, getModifierLabel, getRevealLabelKey, hasModifier } from '@/lib/utils';
-import { getLanguageFromExtension, getImageMimeType, isImageFile } from '@/lib/toolHelpers';
-import { getRuntimeUrlResolver } from '@/lib/runtime-url';
-import { refreshRuntimeUrlAuthToken } from '@/lib/runtime-auth';
-import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
-import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
-import { EditorView } from '@codemirror/view';
-import type { Extension } from '@codemirror/state';
-import { useThemeSystem } from '@/contexts/useThemeSystem';
-import { useUIStore } from '@/stores/useUIStore';
-import { useFilesViewTabsStore } from '@/stores/useFilesViewTabsStore';
-import { useGitStatus } from '@/stores/useGitStore';
-import { useConfigStore } from '@/stores/useConfigStore';
-import { buildCodeMirrorCommentWidgets, normalizeLineRange, useInlineCommentController } from '@/components/comments';
-import { opencodeClient } from '@/lib/opencode/client';
-import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
-import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
-import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
-import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
-import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
-import { Icon } from "@/components/icon/Icon";
-import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
-import { getDefaultTheme } from '@/lib/theme/themes';
-import { openDesktopFileInApp, openDesktopPath } from '@/lib/desktop';
-import { useOpenInAppsStore } from '@/stores/useOpenInAppsStore';
-import { eventMatchesShortcut, getEffectiveShortcutCombo } from '@/lib/shortcuts';
-import { useI18n } from '@/lib/i18n';
-
-type FileNode = {
-  name: string;
-  path: string;
-  type: 'file' | 'directory';
-  extension?: string;
-  relativePath?: string;
-};
-
-type FileStatSnapshot = {
-  path: string;
-  size: number;
-  mtimeMs?: number;
-};
-
-type SelectedLineRange = {
-  start: number;
-  end: number;
-};
-
-const getParentDirectoryPath = (path: string): string => {
-  const normalized = normalizePath(path);
-  if (!normalized) return '';
-  if (normalized === '/' || /^[A-Za-z]:\/$/.test(normalized)) {
-    return normalized;
-  }
-
-  const lastSlash = normalized.lastIndexOf('/');
-  if (lastSlash < 0) {
-    return normalized;
-  }
-  if (lastSlash === 0) {
-    return '/';
-  }
-
-  const parent = normalized.slice(0, lastSlash);
-  if (/^[A-Za-z]:$/.test(parent)) {
-    return `${parent}/`;
-  }
-  return parent;
-};
-
-const OpenInAppListIcon = ({ label, iconDataUrl }: { label: string; iconDataUrl?: string }) => {
-  const [failed, setFailed] = React.useState(false);
-  const initial = label.trim().slice(0, 1).toUpperCase() || '?';
-
-  if (iconDataUrl && !failed) {
-    return (
-      <img
-        src={iconDataUrl}
-        alt=""
-        className="size-4 rounded-sm"
-        onError={() => setFailed(true)}
-      />
-    );
-  }
-
-  return (
-    <span
-      className={cn(
-        'size-4 rounded-sm flex items-center justify-center',
-        'bg-[var(--surface-muted)] text-[9px] font-medium text-muted-foreground'
-      )}
-    >
-      {initial}
-    </span>
-  );
-};
-
-const sortNodes = (items: FileNode[]) =>
-  items.slice().sort((a, b) => {
-    if (a.type !== b.type) {
-      return a.type === 'directory' ? -1 : 1;
-    }
-    return a.name.localeCompare(b.name);
-  });
-
-const normalizePath = (value: string): string => {
-  if (!value) return '';
-
-  const raw = value.replace(/\\/g, '/');
-  const hadUncPrefix = raw.startsWith('//');
-
-  let normalized = raw.replace(/\/+/g, '/');
-  if (hadUncPrefix && !normalized.startsWith('//')) {
-    normalized = `/${normalized}`;
-  }
-
-  const isUnixRoot = normalized === '/';
-  const isWindowsDriveRoot = /^[A-Za-z]:\/$/.test(normalized);
-  if (!isUnixRoot && !isWindowsDriveRoot) {
-    normalized = normalized.replace(/\/+$/, '');
-  }
-
-  return normalized;
-};
-
-const isAbsolutePath = (value: string): boolean => {
-  return value.startsWith('/') || value.startsWith('//') || /^[A-Za-z]:\//.test(value);
-};
-
-const toComparablePath = (value: string): string => {
-  if (/^[A-Za-z]:\//.test(value)) {
-    return value.toLowerCase();
-  }
-  return value;
-};
-
-const isPathWithinRoot = (path: string, root: string): boolean => {
-  const normalizedRoot = normalizePath(root);
-  const normalizedPath = normalizePath(path);
-  if (!normalizedRoot || !normalizedPath) return false;
-
-  const comparableRoot = toComparablePath(normalizedRoot);
-  const comparablePath = toComparablePath(normalizedPath);
-  return comparablePath === comparableRoot || comparablePath.startsWith(`${comparableRoot}/`);
-};
-
-const getAncestorPaths = (filePath: string, root: string): string[] => {
-  const normalizedRoot = normalizePath(root);
-  const normalizedFile = normalizePath(filePath);
-
-  // Ensure file is within root
-  if (!isPathWithinRoot(normalizedFile, normalizedRoot)) return [];
-
-  const relative = normalizedFile.slice(normalizedRoot.length).replace(/^\//, '');
-  const parts = relative.split('/');
-  const ancestors: string[] = [];
-  let current = normalizedRoot;
-
-  for (let i = 0; i < parts.length - 1; i++) {
-    current = current ? `${current}/${parts[i]}` : parts[i];
-    ancestors.push(current);
-  }
-  return ancestors;
-};
-
-const getDisplayPath = (root: string | null, path: string): string => {
-  if (!path) {
-    return '';
-  }
-
-  const normalizedFilePath = normalizePath(path);
-  if (!root || !isPathWithinRoot(normalizedFilePath, root)) {
-    return normalizedFilePath;
-  }
-
-  const relative = normalizedFilePath.slice(root.length);
-  return relative.startsWith('/') ? relative.slice(1) : relative;
-};
-
-const DEFAULT_IGNORED_DIR_NAMES = new Set(['node_modules']);
-
-type FileStatus = 'open' | 'modified' | 'git-modified' | 'git-added' | 'git-deleted';
-
-const FileStatusDot: React.FC<{ status: FileStatus }> = ({ status }) => {
-  const color = {
-    open: 'var(--status-info)',
-    modified: 'var(--status-warning)',
-    'git-modified': 'var(--status-warning)',
-    'git-added': 'var(--status-success)',
-    'git-deleted': 'var(--status-error)',
-  }[status];
-
-  return <span className="size-2 rounded-full" style={{ backgroundColor: color }} />;
-};
-
-const ScrollingFileName: React.FC<{ name: string }> = ({ name }) => {
-  const containerRef = React.useRef<HTMLSpanElement | null>(null);
-  const textRef = React.useRef<HTMLSpanElement | null>(null);
-  const [overflowing, setOverflowing] = React.useState(false);
-
-  React.useLayoutEffect(() => {
-    const container = containerRef.current;
-    const text = textRef.current;
-    if (!container || !text) {
-      return;
-    }
-
-    const updateOverflow = () => {
-      setOverflowing(text.scrollWidth > container.clientWidth + 1);
-    };
-
-    updateOverflow();
-    const resizeObserver = new ResizeObserver(updateOverflow);
-    resizeObserver.observe(container);
-    resizeObserver.observe(text);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [name]);
-
-  return (
-    <span ref={containerRef} className="relative block min-w-0 flex-1 overflow-hidden whitespace-nowrap">
-      <span ref={textRef} aria-hidden="true" className="invisible absolute whitespace-nowrap">{name}</span>
-      {overflowing ? (
-        <span className="open-file-name-marquee-track">
-          <span className="open-file-name-marquee-item">{name}</span>
-          <span className="open-file-name-marquee-item" aria-hidden="true">{name}</span>
-        </span>
-      ) : (
-        <span className="block min-w-0 truncate">{name}</span>
-      )}
-    </span>
-  );
-};
-
-const shouldIgnoreEntryName = (name: string): boolean => DEFAULT_IGNORED_DIR_NAMES.has(name);
-
-const shouldIgnorePath = (path: string): boolean => {
-  const normalized = normalizePath(path);
-  return normalized === 'node_modules' || normalized.endsWith('/node_modules') || normalized.includes('/node_modules/');
-};
-
-const isDirectoryReadError = (error: unknown): boolean => {
-  const message = error instanceof Error ? error.message : String(error ?? '');
-  const normalized = message.toLowerCase();
-  return normalized.includes('is a directory') || normalized.includes('eisdir');
-};
-
-const isFileMissingError = (error: unknown): boolean => {
-  const message = error instanceof Error ? error.message : String(error ?? '');
-  const normalized = message.toLowerCase();
-  return normalized.includes('file not found')
-    || normalized.includes('enoent')
-    || normalized.includes('no such file')
-    || normalized.includes('does not exist');
-};
-
-const MAX_VIEW_CHARS = 200_000;
-const FILE_EDITOR_AUTO_SAVE_KEY = 'openchamber:files:auto-save-enabled';
-type FileLineEnding = '\n' | '\r\n';
-
-const detectFileLineEnding = (content: string): FileLineEnding => {
-  let crlf = 0;
-  let lf = 0;
-
-  for (let index = 0; index < content.length; index += 1) {
-    if (content.charCodeAt(index) !== 10) {
-      continue;
-    }
-    if (index > 0 && content.charCodeAt(index - 1) === 13) {
-      crlf += 1;
-    } else {
-      lf += 1;
-    }
-  }
-
-  return crlf > lf ? '\r\n' : '\n';
-};
-
-const normalizeEditorLineEndings = (content: string): string => content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-
-const serializeEditorContent = (content: string, lineEnding: FileLineEnding): string => {
-  const normalized = normalizeEditorLineEndings(content);
-  return lineEnding === '\r\n' ? normalized.replace(/\n/g, '\r\n') : normalized;
-};
-
-const getInitialAutoSaveEnabled = (): boolean => {
-  if (typeof window === 'undefined') {
-    return true;
-  }
-
-  try {
-    return window.localStorage.getItem(FILE_EDITOR_AUTO_SAVE_KEY) !== 'false';
-  } catch {
-    return true;
-  }
-};
-
-const getFileIcon = (filePath: string, extension?: string): React.ReactNode => {
-  return <FileTypeIcon filePath={filePath} extension={extension} />;
-};
-
-const isMarkdownFile = (path: string): boolean => {
-  if (!path) return false;
-  const ext = path.toLowerCase().split('.').pop();
-  return ext === 'md' || ext === 'markdown';
-};
-
-const isJsonFile = (path: string): boolean => {
-  if (!path) return false;
-  const ext = path.toLowerCase().split('.').pop();
-  return ext === 'json' || ext === 'jsonc' || ext === 'json5' || ext === 'geojson';
-};
-
-const isHtmlFile = (path: string): boolean => {
-  if (!path) return false;
-  const ext = path.toLowerCase().split('.').pop();
-  return ext === 'html' || ext === 'htm';
-};
-
-interface FileRowProps {
-  node: FileNode;
-  root: string;
-  isExpanded: boolean;
-  isActive: boolean;
-  isMobile: boolean;
-  alwaysShowActions: boolean;
-  status?: FileStatus | null;
-  badge?: { modified: number; added: number } | null;
-  permissions: {
-    canRename: boolean;
-    canCreateFile: boolean;
-    canCreateFolder: boolean;
-    canDelete: boolean;
-    canReveal: boolean;
-  };
-  downloadFile?: (path: string) => Promise<void>;
-  contextMenuPath: string | null;
-  setContextMenuPath: (path: string | null) => void;
-  onSelect: (node: FileNode) => void;
-  onToggle: (path: string) => void;
-  onRevealPath: (path: string) => void;
-  onOpenDialog: (type: 'createFile' | 'createFolder' | 'rename' | 'delete', data: { path: string; name?: string; type?: 'file' | 'directory' }) => void;
-}
-
-const FileRow: React.FC<FileRowProps> = ({
-  node,
-  root,
-  isExpanded,
-  isActive,
-  isMobile,
-  alwaysShowActions,
-  status,
-  badge,
-  permissions,
-  downloadFile,
-  contextMenuPath,
-  setContextMenuPath,
-  onSelect,
-  onToggle,
-  onRevealPath,
-  onOpenDialog,
-}) => {
-  const { t } = useI18n();
-  const isDir = node.type === 'directory';
-  const { canRename, canCreateFile, canCreateFolder, canDelete, canReveal } = permissions;
-
-  const handleContextMenu = React.useCallback((event?: React.MouseEvent) => {
-    if (!canRename && !canCreateFile && !canCreateFolder && !canDelete && !canReveal) {
-      return;
-    }
-    event?.preventDefault();
-    setContextMenuPath(node.path);
-  }, [canRename, canCreateFile, canCreateFolder, canDelete, canReveal, node.path, setContextMenuPath]);
-
-  const handleInteraction = React.useCallback(() => {
-    if (isDir) {
-      onToggle(node.path);
-    } else {
-      onSelect(node);
-    }
-  }, [isDir, node, onSelect, onToggle]);
-
-  const handleMenuButtonClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-    setContextMenuPath(node.path);
-  }, [node.path, setContextMenuPath]);
-
-  return (
-    <div
-      className="group relative flex items-center"
-      onContextMenu={!isMobile ? handleContextMenu : undefined}
-    >
-      <button
-        type="button"
-        onClick={handleInteraction}
-        onContextMenu={!isMobile ? handleContextMenu : undefined}
-        className={cn(
-          'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors pr-8 select-none',
-          isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
-        )}
-      >
-        {isDir ? (
-          isExpanded ? (
-            <Icon name="folder-open-fill" className="size-4 flex-shrink-0 text-primary/60" />
-          ) : (
-            <Icon name="folder-3-fill" className="size-4 flex-shrink-0 text-primary/60" />
-          )
-        ) : (
-          getFileIcon(node.path, node.extension)
-        )}
-        <span
-          className="min-w-0 flex-1 truncate typography-meta"
-          title={node.path}
-        >
-          {node.name}
-        </span>
-        {!isDir && status && <FileStatusDot status={status} />}
-        {isDir && badge && (
-          <span className="text-xs flex items-center gap-1 ml-auto mr-1">
-            {badge.modified > 0 && <span className="text-[var(--status-warning)]">M{badge.modified}</span>}
-            {badge.added > 0 && <span className="text-[var(--status-success)]">+{badge.added}</span>}
-          </span>
-        )}
-      </button>
-      {(canRename || canCreateFile || canCreateFolder || canDelete || canReveal) && (
-        <div className={cn(
-          "absolute right-1 top-1/2 -translate-y-1/2",
-          alwaysShowActions ? "opacity-100" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100"
-        )}>
-          <DropdownMenu
-            open={contextMenuPath === node.path}
-            onOpenChange={(open) => setContextMenuPath(open ? node.path : null)}
-          >
-            <DropdownMenuTrigger asChild>
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                className="size-6"
-                onClick={handleMenuButtonClick}
-              >
-                <Icon name="more-2-fill" className="size-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" side={isMobile ? "bottom" : "bottom"} onCloseAutoFocus={() => setContextMenuPath(null)}>
-              {canRename && (
-                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('rename', node); }}>
-                  <Icon name="edit" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.rename')}
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem onClick={(e) => {
-                e.stopPropagation();
-                void copyTextToClipboard(node.path).then((result) => {
-                  if (result.ok) {
-                    toast.success(t('sidebarFilesTree.toast.pathCopied'));
-                    return;
-                  }
-                  toast.error(t('sidebarFilesTree.toast.copyFailed'));
-                });
-              }}>
-                <Icon name="file-copy" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.copyPath')}
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={(e) => {
-                e.stopPropagation();
-                const relativePath = getDisplayPath(root, node.path) || node.path;
-                void copyTextToClipboard(relativePath).then((result) => {
-                  if (result.ok) {
-                    toast.success(t('filesView.toast.relativePathCopied'));
-                    return;
-                  }
-                  toast.error(t('sidebarFilesTree.toast.copyFailed'));
-                });
-              }}>
-                <Icon name="file-copy-2" className="mr-2 size-4" /> {t('filesView.tree.menu.copyRelativePath')}
-              </DropdownMenuItem>
-              {!isDir && downloadFile && (
-                <DropdownMenuItem onClick={(e) => {
-                  e.stopPropagation();
-                  void downloadFile(node.path);
-                }}>
-                  <Icon name="download" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.save')}
-                </DropdownMenuItem>
-              )}
-              {canReveal && (
-                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onRevealPath(node.path); }}>
-                  <Icon name="folder-received" className="mr-2 size-4" /> {t(getRevealLabelKey())}
-                </DropdownMenuItem>
-              )}
-              {isDir && (canCreateFile || canCreateFolder) && (
-                <>
-                  <DropdownMenuSeparator />
-                  {canCreateFile && (
-                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('createFile', node); }}>
-                      <Icon name="file-add" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.newFile')}
-                    </DropdownMenuItem>
-                  )}
-                  {canCreateFolder && (
-                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('createFolder', node); }}>
-                      <Icon name="folder-add" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.newFolder')}
-                    </DropdownMenuItem>
-                  )}
-                </>
-              )}
-              {canDelete && (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={(e) => { e.stopPropagation(); onOpenDialog('delete', node); }}
-                    className="text-destructive focus:text-destructive"
-                  >
-                    <Icon name="delete-bin" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.delete')}
-                  </DropdownMenuItem>
-                </>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
-    </div>
-  );
-};
-
-interface DialogsProps {
-  activeDialog: 'createFile' | 'createFolder' | 'rename' | 'delete' | null;
-  dialogData: { path: string; name?: string; type?: 'file' | 'directory' } | null;
-  dialogInputValue: string;
-  onDialogInputChange: (value: string) => void;
-  isDialogSubmitting: boolean;
-  onDialogSubmit: (e?: React.FormEvent) => Promise<void>;
-  onClose: () => void;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-}
-
-const Dialogs: React.FC<DialogsProps> = ({
-  activeDialog,
-  dialogData,
-  dialogInputValue,
-  onDialogInputChange,
-  isDialogSubmitting,
-  onDialogSubmit,
-  onClose,
-  inputRef,
-}) => {
-  const { t } = useI18n();
-
-  return (
-    <Dialog open={!!activeDialog} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent initialFocus={inputRef}>
-        <DialogHeader>
-          <DialogTitle>
-            {activeDialog === 'createFile' && t('filesView.dialog.createFile.title')}
-            {activeDialog === 'createFolder' && t('filesView.dialog.createFolder.title')}
-            {activeDialog === 'rename' && t('filesView.dialog.rename.title')}
-            {activeDialog === 'delete' && t('filesView.dialog.delete.title')}
-          </DialogTitle>
-          <DialogDescription>
-            {activeDialog === 'createFile' && t('filesView.dialog.createFile.description', { path: dialogData?.path ?? t('filesView.dialog.rootFallback') })}
-            {activeDialog === 'createFolder' && t('filesView.dialog.createFolder.description', { path: dialogData?.path ?? t('filesView.dialog.rootFallback') })}
-            {activeDialog === 'rename' && t('filesView.dialog.rename.description', { name: dialogData?.name ?? '' })}
-            {activeDialog === 'delete' && t('filesView.dialog.delete.description', { name: dialogData?.name ?? '' })}
-          </DialogDescription>
-        </DialogHeader>
-
-        {activeDialog !== 'delete' && (
-          <div className="py-4">
-            <Input
-              value={dialogInputValue}
-              onChange={(e) => onDialogInputChange(e.target.value)}
-              placeholder={activeDialog === 'rename' ? t('filesView.dialog.rename.placeholder') : t('filesView.dialog.namePlaceholder')}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  void onDialogSubmit();
-                }
-              }}
-              ref={inputRef}
-              />
-            </div>
-          )}
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose} disabled={isDialogSubmitting}>
-            {t('filesView.dialog.cancel')}
-          </Button>
-          <Button
-            variant={activeDialog === 'delete' ? 'destructive' : 'default'}
-            onClick={() => void onDialogSubmit()}
-            disabled={isDialogSubmitting || (activeDialog !== 'delete' && !dialogInputValue.trim())}
-          >
-            {isDialogSubmitting ? <Icon name="loader-4" className="size-4 animate-spin" /> : (
-                activeDialog === 'delete' ? t('filesView.dialog.delete.confirm') : t('filesView.dialog.confirm')
-            )}
-          </Button>
-        </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-};
-
-interface FilesViewProps {
-  mode?: 'full' | 'editor-only';
-}
-
-export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
-  const { t } = useI18n();
-  const { files, runtime } = useRuntimeAPIs();
-  const { currentTheme, availableThemes, lightThemeId, darkThemeId } = useThemeSystem();
-  const { isMobile, isTablet, screenWidth } = useDeviceInfo();
-  const alwaysShowActions = isMobile || isTablet;
-  const showHidden = useDirectoryShowHidden();
-  const showGitignored = useFilesViewShowGitignored();
-
-  const currentDirectory = useEffectiveDirectory() ?? '';
-  const root = normalizePath(currentDirectory.trim());
-  const showEditorTabsRow = isMobile || mode !== 'editor-only';
-  const suppressFileLoadingIndicator = mode === 'editor-only' && !isMobile;
-  const searchFiles = useFileSearchStore((state) => state.searchFiles);
-  const gitStatus = useGitStatus(currentDirectory);
-
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 200);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const [showMobilePageContent, setShowMobilePageContent] = React.useState(false);
-  const [wrapLines, setWrapLines] = React.useState(true);
-  const [isFullscreen, setIsFullscreen] = React.useState(false);
-  const [isSearchOpen, setIsSearchOpen] = React.useState(false);
-  const [isFloatingToolbarOpen, setIsFloatingToolbarOpen] = React.useState(false);
-  const floatingToolbarRef = React.useRef<HTMLDivElement | null>(null);
-  const toolbarDropdownOpenCountRef = React.useRef(0);
-
-  const handleToolbarDropdownOpenChange = React.useCallback((open: boolean) => {
-    toolbarDropdownOpenCountRef.current = Math.max(
-      0,
-      toolbarDropdownOpenCountRef.current + (open ? 1 : -1),
-    );
-  }, []);
-
-  const isClickInsidePortalledMenu = React.useCallback((target: EventTarget | null) => {
-    if (!(target instanceof Element)) return false;
-    return target.closest('[data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]') !== null;
-  }, []);
-
-  React.useEffect(() => {
-    if (!isFloatingToolbarOpen) return;
-    const handler = (event: MouseEvent) => {
-      if (toolbarDropdownOpenCountRef.current > 0) return;
-      if (isClickInsidePortalledMenu(event.target)) return;
-      if (floatingToolbarRef.current && !floatingToolbarRef.current.contains(event.target as Node)) {
-        setIsFloatingToolbarOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [isClickInsidePortalledMenu, isFloatingToolbarOpen]);
-  type TextViewMode = 'view' | 'edit';
-  type PreviewViewMode = 'preview' | 'edit';
-
-  const [textViewMode, setTextViewMode] = React.useState<TextViewMode>('edit');
-  const [mdViewMode, setMdViewMode] = React.useState<PreviewViewMode>('edit');
+import React from 'react';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+
+import { toast } from '@/components/ui';
+import { copyTextToClipboard } from '@/lib/clipboard';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { CodeMirrorEditor } from '@/components/ui/CodeMirrorEditor';
+import { GoToLineDialog } from './GoToLineDialog';
+import { PreviewToggleButton } from './PreviewToggleButton';
+import { JsonTreeView } from '@/components/ui/JsonTreeView';
+import { SimpleMarkdownRenderer } from '@/components/chat/MarkdownRenderer';
+import { languageByExtension, loadLanguageByExtension } from '@/lib/codemirror/languageByExtension';
+import { createFlexokiCodeMirrorTheme } from '@/lib/codemirror/flexokiTheme';
+import { File as PierreFile } from '@pierre/diffs/react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+import { useFileSearchStore } from '@/stores/useFileSearchStore';
+import { useDeviceInfo } from '@/lib/device';
+import { cn, getModifierLabel, getRevealLabelKey, hasModifier } from '@/lib/utils';
+import { getLanguageFromExtension, getImageMimeType, isDrawioFile, isImageFile } from '@/lib/toolHelpers';
+import { getRuntimeUrlResolver } from '@/lib/runtime-url';
+import { refreshRuntimeUrlAuthToken } from '@/lib/runtime-auth';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
+import { DiagramEditor } from '@/components/diagram';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useUIStore } from '@/stores/useUIStore';
+import { useFilesViewTabsStore } from '@/stores/useFilesViewTabsStore';
+import { useGitStatus } from '@/stores/useGitStore';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { buildCodeMirrorCommentWidgets, normalizeLineRange, useInlineCommentController } from '@/components/comments';
+import { opencodeClient } from '@/lib/opencode/client';
+import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
+import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
+import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
+import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
+import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
+import { Icon } from "@/components/icon/Icon";
+import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
+import { getDefaultTheme } from '@/lib/theme/themes';
+import { openDesktopFileInApp, openDesktopPath } from '@/lib/desktop';
+import { useOpenInAppsStore } from '@/stores/useOpenInAppsStore';
+import { eventMatchesShortcut, getEffectiveShortcutCombo } from '@/lib/shortcuts';
+import { useI18n } from '@/lib/i18n';
+
+type FileNode = {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  extension?: string;
+  relativePath?: string;
+};
+
+type FileStatSnapshot = {
+  path: string;
+  size: number;
+  mtimeMs?: number;
+};
+
+type SelectedLineRange = {
+  start: number;
+  end: number;
+};
+
+const getParentDirectoryPath = (path: string): string => {
+  const normalized = normalizePath(path);
+  if (!normalized) return '';
+  if (normalized === '/' || /^[A-Za-z]:\/$/.test(normalized)) {
+    return normalized;
+  }
+
+  const lastSlash = normalized.lastIndexOf('/');
+  if (lastSlash < 0) {
+    return normalized;
+  }
+  if (lastSlash === 0) {
+    return '/';
+  }
+
+  const parent = normalized.slice(0, lastSlash);
+  if (/^[A-Za-z]:$/.test(parent)) {
+    return `${parent}/`;
+  }
+  return parent;
+};
+
+const OpenInAppListIcon = ({ label, iconDataUrl }: { label: string; iconDataUrl?: string }) => {
+  const [failed, setFailed] = React.useState(false);
+  const initial = label.trim().slice(0, 1).toUpperCase() || '?';
+
+  if (iconDataUrl && !failed) {
+    return (
+      <img
+        src={iconDataUrl}
+        alt=""
+        className="size-4 rounded-sm"
+        onError={() => setFailed(true)}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        'size-4 rounded-sm flex items-center justify-center',
+        'bg-[var(--surface-muted)] text-[9px] font-medium text-muted-foreground'
+      )}
+    >
+      {initial}
+    </span>
+  );
+};
+
+const sortNodes = (items: FileNode[]) =>
+  items.slice().sort((a, b) => {
+    if (a.type !== b.type) {
+      return a.type === 'directory' ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+
+const normalizePath = (value: string): string => {
+  if (!value) return '';
+
+  const raw = value.replace(/\\/g, '/');
+  const hadUncPrefix = raw.startsWith('//');
+
+  let normalized = raw.replace(/\/+/g, '/');
+  if (hadUncPrefix && !normalized.startsWith('//')) {
+    normalized = `/${normalized}`;
+  }
+
+  const isUnixRoot = normalized === '/';
+  const isWindowsDriveRoot = /^[A-Za-z]:\/$/.test(normalized);
+  if (!isUnixRoot && !isWindowsDriveRoot) {
+    normalized = normalized.replace(/\/+$/, '');
+  }
+
+  return normalized;
+};
+
+const isAbsolutePath = (value: string): boolean => {
+  return value.startsWith('/') || value.startsWith('//') || /^[A-Za-z]:\//.test(value);
+};
+
+const toComparablePath = (value: string): string => {
+  if (/^[A-Za-z]:\//.test(value)) {
+    return value.toLowerCase();
+  }
+  return value;
+};
+
+const isPathWithinRoot = (path: string, root: string): boolean => {
+  const normalizedRoot = normalizePath(root);
+  const normalizedPath = normalizePath(path);
+  if (!normalizedRoot || !normalizedPath) return false;
+
+  const comparableRoot = toComparablePath(normalizedRoot);
+  const comparablePath = toComparablePath(normalizedPath);
+  return comparablePath === comparableRoot || comparablePath.startsWith(`${comparableRoot}/`);
+};
+
+const getAncestorPaths = (filePath: string, root: string): string[] => {
+  const normalizedRoot = normalizePath(root);
+  const normalizedFile = normalizePath(filePath);
+
+  // Ensure file is within root
+  if (!isPathWithinRoot(normalizedFile, normalizedRoot)) return [];
+
+  const relative = normalizedFile.slice(normalizedRoot.length).replace(/^\//, '');
+  const parts = relative.split('/');
+  const ancestors: string[] = [];
+  let current = normalizedRoot;
+
+  for (let i = 0; i < parts.length - 1; i++) {
+    current = current ? `${current}/${parts[i]}` : parts[i];
+    ancestors.push(current);
+  }
+  return ancestors;
+};
+
+const getDisplayPath = (root: string | null, path: string): string => {
+  if (!path) {
+    return '';
+  }
+
+  const normalizedFilePath = normalizePath(path);
+  if (!root || !isPathWithinRoot(normalizedFilePath, root)) {
+    return normalizedFilePath;
+  }
+
+  const relative = normalizedFilePath.slice(root.length);
+  return relative.startsWith('/') ? relative.slice(1) : relative;
+};
+
+const DEFAULT_IGNORED_DIR_NAMES = new Set(['node_modules']);
+
+type FileStatus = 'open' | 'modified' | 'git-modified' | 'git-added' | 'git-deleted';
+
+const FileStatusDot: React.FC<{ status: FileStatus }> = ({ status }) => {
+  const color = {
+    open: 'var(--status-info)',
+    modified: 'var(--status-warning)',
+    'git-modified': 'var(--status-warning)',
+    'git-added': 'var(--status-success)',
+    'git-deleted': 'var(--status-error)',
+  }[status];
+
+  return <span className="size-2 rounded-full" style={{ backgroundColor: color }} />;
+};
+
+const ScrollingFileName: React.FC<{ name: string }> = ({ name }) => {
+  const containerRef = React.useRef<HTMLSpanElement | null>(null);
+  const textRef = React.useRef<HTMLSpanElement | null>(null);
+  const [overflowing, setOverflowing] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) {
+      return;
+    }
+
+    const updateOverflow = () => {
+      setOverflowing(text.scrollWidth > container.clientWidth + 1);
+    };
+
+    updateOverflow();
+    const resizeObserver = new ResizeObserver(updateOverflow);
+    resizeObserver.observe(container);
+    resizeObserver.observe(text);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [name]);
+
+  return (
+    <span ref={containerRef} className="relative block min-w-0 flex-1 overflow-hidden whitespace-nowrap">
+      <span ref={textRef} aria-hidden="true" className="invisible absolute whitespace-nowrap">{name}</span>
+      {overflowing ? (
+        <span className="open-file-name-marquee-track">
+          <span className="open-file-name-marquee-item">{name}</span>
+          <span className="open-file-name-marquee-item" aria-hidden="true">{name}</span>
+        </span>
+      ) : (
+        <span className="block min-w-0 truncate">{name}</span>
+      )}
+    </span>
+  );
+};
+
+const shouldIgnoreEntryName = (name: string): boolean => DEFAULT_IGNORED_DIR_NAMES.has(name);
+
+const shouldIgnorePath = (path: string): boolean => {
+  const normalized = normalizePath(path);
+  return normalized === 'node_modules' || normalized.endsWith('/node_modules') || normalized.includes('/node_modules/');
+};
+
+const isDirectoryReadError = (error: unknown): boolean => {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  const normalized = message.toLowerCase();
+  return normalized.includes('is a directory') || normalized.includes('eisdir');
+};
+
+const isFileMissingError = (error: unknown): boolean => {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  const normalized = message.toLowerCase();
+  return normalized.includes('file not found')
+    || normalized.includes('enoent')
+    || normalized.includes('no such file')
+    || normalized.includes('does not exist');
+};
+
+const MAX_VIEW_CHARS = 200_000;
+const FILE_EDITOR_AUTO_SAVE_KEY = 'openchamber:files:auto-save-enabled';
+type FileLineEnding = '\n' | '\r\n';
+
+const detectFileLineEnding = (content: string): FileLineEnding => {
+  let crlf = 0;
+  let lf = 0;
+
+  for (let index = 0; index < content.length; index += 1) {
+    if (content.charCodeAt(index) !== 10) {
+      continue;
+    }
+    if (index > 0 && content.charCodeAt(index - 1) === 13) {
+      crlf += 1;
+    } else {
+      lf += 1;
+    }
+  }
+
+  return crlf > lf ? '\r\n' : '\n';
+};
+
+const normalizeEditorLineEndings = (content: string): string => content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+const serializeEditorContent = (content: string, lineEnding: FileLineEnding): string => {
+  const normalized = normalizeEditorLineEndings(content);
+  return lineEnding === '\r\n' ? normalized.replace(/\n/g, '\r\n') : normalized;
+};
+
+const getInitialAutoSaveEnabled = (): boolean => {
+  if (typeof window === 'undefined') {
+    return true;
+  }
+
+  try {
+    return window.localStorage.getItem(FILE_EDITOR_AUTO_SAVE_KEY) !== 'false';
+  } catch {
+    return true;
+  }
+};
+
+const getFileIcon = (filePath: string, extension?: string): React.ReactNode => {
+  return <FileTypeIcon filePath={filePath} extension={extension} />;
+};
+
+const isMarkdownFile = (path: string): boolean => {
+  if (!path) return false;
+  const ext = path.toLowerCase().split('.').pop();
+  return ext === 'md' || ext === 'markdown';
+};
+
+const isJsonFile = (path: string): boolean => {
+  if (!path) return false;
+  const ext = path.toLowerCase().split('.').pop();
+  return ext === 'json' || ext === 'jsonc' || ext === 'json5' || ext === 'geojson';
+};
+
+const isHtmlFile = (path: string): boolean => {
+  if (!path) return false;
+  const ext = path.toLowerCase().split('.').pop();
+  return ext === 'html' || ext === 'htm';
+};
+
+interface FileRowProps {
+  node: FileNode;
+  root: string;
+  isExpanded: boolean;
+  isActive: boolean;
+  isMobile: boolean;
+  alwaysShowActions: boolean;
+  status?: FileStatus | null;
+  badge?: { modified: number; added: number } | null;
+  permissions: {
+    canRename: boolean;
+    canCreateFile: boolean;
+    canCreateFolder: boolean;
+    canDelete: boolean;
+    canReveal: boolean;
+  };
+  downloadFile?: (path: string) => Promise<void>;
+  contextMenuPath: string | null;
+  setContextMenuPath: (path: string | null) => void;
+  onSelect: (node: FileNode) => void;
+  onToggle: (path: string) => void;
+  onRevealPath: (path: string) => void;
+  onOpenDialog: (type: 'createFile' | 'createFolder' | 'rename' | 'delete', data: { path: string; name?: string; type?: 'file' | 'directory' }) => void;
+}
+
+const FileRow: React.FC<FileRowProps> = ({
+  node,
+  root,
+  isExpanded,
+  isActive,
+  isMobile,
+  alwaysShowActions,
+  status,
+  badge,
+  permissions,
+  downloadFile,
+  contextMenuPath,
+  setContextMenuPath,
+  onSelect,
+  onToggle,
+  onRevealPath,
+  onOpenDialog,
+}) => {
+  const { t } = useI18n();
+  const isDir = node.type === 'directory';
+  const { canRename, canCreateFile, canCreateFolder, canDelete, canReveal } = permissions;
+
+  const handleContextMenu = React.useCallback((event?: React.MouseEvent) => {
+    if (!canRename && !canCreateFile && !canCreateFolder && !canDelete && !canReveal) {
+      return;
+    }
+    event?.preventDefault();
+    setContextMenuPath(node.path);
+  }, [canRename, canCreateFile, canCreateFolder, canDelete, canReveal, node.path, setContextMenuPath]);
+
+  const handleInteraction = React.useCallback(() => {
+    if (isDir) {
+      onToggle(node.path);
+    } else {
+      onSelect(node);
+    }
+  }, [isDir, node, onSelect, onToggle]);
+
+  const handleMenuButtonClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    setContextMenuPath(node.path);
+  }, [node.path, setContextMenuPath]);
+
+  return (
+    <div
+      className="group relative flex items-center"
+      onContextMenu={!isMobile ? handleContextMenu : undefined}
+    >
+      <button
+        type="button"
+        onClick={handleInteraction}
+        onContextMenu={!isMobile ? handleContextMenu : undefined}
+        className={cn(
+          'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors pr-8 select-none',
+          isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
+        )}
+      >
+        {isDir ? (
+          isExpanded ? (
+            <Icon name="folder-open-fill" className="size-4 flex-shrink-0 text-primary/60" />
+          ) : (
+            <Icon name="folder-3-fill" className="size-4 flex-shrink-0 text-primary/60" />
+          )
+        ) : (
+          getFileIcon(node.path, node.extension)
+        )}
+        <span
+          className="min-w-0 flex-1 truncate typography-meta"
+          title={node.path}
+        >
+          {node.name}
+        </span>
+        {!isDir && status && <FileStatusDot status={status} />}
+        {isDir && badge && (
+          <span className="text-xs flex items-center gap-1 ml-auto mr-1">
+            {badge.modified > 0 && <span className="text-[var(--status-warning)]">M{badge.modified}</span>}
+            {badge.added > 0 && <span className="text-[var(--status-success)]">+{badge.added}</span>}
+          </span>
+        )}
+      </button>
+      {(canRename || canCreateFile || canCreateFolder || canDelete || canReveal) && (
+        <div className={cn(
+          "absolute right-1 top-1/2 -translate-y-1/2",
+          alwaysShowActions ? "opacity-100" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100"
+        )}>
+          <DropdownMenu
+            open={contextMenuPath === node.path}
+            onOpenChange={(open) => setContextMenuPath(open ? node.path : null)}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                className="size-6"
+                onClick={handleMenuButtonClick}
+              >
+                <Icon name="more-2-fill" className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side={isMobile ? "bottom" : "bottom"} onCloseAutoFocus={() => setContextMenuPath(null)}>
+              {canRename && (
+                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('rename', node); }}>
+                  <Icon name="edit" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.rename')}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={(e) => {
+                e.stopPropagation();
+                void copyTextToClipboard(node.path).then((result) => {
+                  if (result.ok) {
+                    toast.success(t('sidebarFilesTree.toast.pathCopied'));
+                    return;
+                  }
+                  toast.error(t('sidebarFilesTree.toast.copyFailed'));
+                });
+              }}>
+                <Icon name="file-copy" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.copyPath')}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => {
+                e.stopPropagation();
+                const relativePath = getDisplayPath(root, node.path) || node.path;
+                void copyTextToClipboard(relativePath).then((result) => {
+                  if (result.ok) {
+                    toast.success(t('filesView.toast.relativePathCopied'));
+                    return;
+                  }
+                  toast.error(t('sidebarFilesTree.toast.copyFailed'));
+                });
+              }}>
+                <Icon name="file-copy-2" className="mr-2 size-4" /> {t('filesView.tree.menu.copyRelativePath')}
+              </DropdownMenuItem>
+              {!isDir && downloadFile && (
+                <DropdownMenuItem onClick={(e) => {
+                  e.stopPropagation();
+                  void downloadFile(node.path);
+                }}>
+                  <Icon name="download" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.save')}
+                </DropdownMenuItem>
+              )}
+              {canReveal && (
+                <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onRevealPath(node.path); }}>
+                  <Icon name="folder-received" className="mr-2 size-4" /> {t(getRevealLabelKey())}
+                </DropdownMenuItem>
+              )}
+              {isDir && (canCreateFile || canCreateFolder) && (
+                <>
+                  <DropdownMenuSeparator />
+                  {canCreateFile && (
+                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('createFile', node); }}>
+                      <Icon name="file-add" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.newFile')}
+                    </DropdownMenuItem>
+                  )}
+                  {canCreateFolder && (
+                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('createFolder', node); }}>
+                      <Icon name="folder-add" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.newFolder')}
+                    </DropdownMenuItem>
+                  )}
+                </>
+              )}
+              {canDelete && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={(e) => { e.stopPropagation(); onOpenDialog('delete', node); }}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Icon name="delete-bin" className="mr-2 size-4" /> {t('sidebarFilesTree.menu.delete')}
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface DialogsProps {
+  activeDialog: 'createFile' | 'createFolder' | 'rename' | 'delete' | null;
+  dialogData: { path: string; name?: string; type?: 'file' | 'directory' } | null;
+  dialogInputValue: string;
+  onDialogInputChange: (value: string) => void;
+  isDialogSubmitting: boolean;
+  onDialogSubmit: (e?: React.FormEvent) => Promise<void>;
+  onClose: () => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+const Dialogs: React.FC<DialogsProps> = ({
+  activeDialog,
+  dialogData,
+  dialogInputValue,
+  onDialogInputChange,
+  isDialogSubmitting,
+  onDialogSubmit,
+  onClose,
+  inputRef,
+}) => {
+  const { t } = useI18n();
+
+  return (
+    <Dialog open={!!activeDialog} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent initialFocus={inputRef}>
+        <DialogHeader>
+          <DialogTitle>
+            {activeDialog === 'createFile' && t('filesView.dialog.createFile.title')}
+            {activeDialog === 'createFolder' && t('filesView.dialog.createFolder.title')}
+            {activeDialog === 'rename' && t('filesView.dialog.rename.title')}
+            {activeDialog === 'delete' && t('filesView.dialog.delete.title')}
+          </DialogTitle>
+          <DialogDescription>
+            {activeDialog === 'createFile' && t('filesView.dialog.createFile.description', { path: dialogData?.path ?? t('filesView.dialog.rootFallback') })}
+            {activeDialog === 'createFolder' && t('filesView.dialog.createFolder.description', { path: dialogData?.path ?? t('filesView.dialog.rootFallback') })}
+            {activeDialog === 'rename' && t('filesView.dialog.rename.description', { name: dialogData?.name ?? '' })}
+            {activeDialog === 'delete' && t('filesView.dialog.delete.description', { name: dialogData?.name ?? '' })}
+          </DialogDescription>
+        </DialogHeader>
+
+        {activeDialog !== 'delete' && (
+          <div className="py-4">
+            <Input
+              value={dialogInputValue}
+              onChange={(e) => onDialogInputChange(e.target.value)}
+              placeholder={activeDialog === 'rename' ? t('filesView.dialog.rename.placeholder') : t('filesView.dialog.namePlaceholder')}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  void onDialogSubmit();
+                }
+              }}
+              ref={inputRef}
+              />
+            </div>
+          )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isDialogSubmitting}>
+            {t('filesView.dialog.cancel')}
+          </Button>
+          <Button
+            variant={activeDialog === 'delete' ? 'destructive' : 'default'}
+            onClick={() => void onDialogSubmit()}
+            disabled={isDialogSubmitting || (activeDialog !== 'delete' && !dialogInputValue.trim())}
+          >
+            {isDialogSubmitting ? <Icon name="loader-4" className="size-4 animate-spin" /> : (
+                activeDialog === 'delete' ? t('filesView.dialog.delete.confirm') : t('filesView.dialog.confirm')
+            )}
+          </Button>
+        </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+};
+
+interface FilesViewProps {
+  mode?: 'full' | 'editor-only';
+}
+
+export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
+  const { t } = useI18n();
+  const { files, runtime } = useRuntimeAPIs();
+  const { currentTheme, availableThemes, lightThemeId, darkThemeId } = useThemeSystem();
+  const { isMobile, isTablet, screenWidth } = useDeviceInfo();
+  const alwaysShowActions = isMobile || isTablet;
+  const showHidden = useDirectoryShowHidden();
+  const showGitignored = useFilesViewShowGitignored();
+
+  const currentDirectory = useEffectiveDirectory() ?? '';
+  const root = normalizePath(currentDirectory.trim());
+  const showEditorTabsRow = isMobile || mode !== 'editor-only';
+  const suppressFileLoadingIndicator = mode === 'editor-only' && !isMobile;
+  const searchFiles = useFileSearchStore((state) => state.searchFiles);
+  const gitStatus = useGitStatus(currentDirectory);
+
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 200);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const [showMobilePageContent, setShowMobilePageContent] = React.useState(false);
+  const [wrapLines, setWrapLines] = React.useState(true);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+  const [isFloatingToolbarOpen, setIsFloatingToolbarOpen] = React.useState(false);
+  const floatingToolbarRef = React.useRef<HTMLDivElement | null>(null);
+  const toolbarDropdownOpenCountRef = React.useRef(0);
+
+  const handleToolbarDropdownOpenChange = React.useCallback((open: boolean) => {
+    toolbarDropdownOpenCountRef.current = Math.max(
+      0,
+      toolbarDropdownOpenCountRef.current + (open ? 1 : -1),
+    );
+  }, []);
+
+  const isClickInsidePortalledMenu = React.useCallback((target: EventTarget | null) => {
+    if (!(target instanceof Element)) return false;
+    return target.closest('[data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]') !== null;
+  }, []);
+
+  React.useEffect(() => {
+    if (!isFloatingToolbarOpen) return;
+    const handler = (event: MouseEvent) => {
+      if (toolbarDropdownOpenCountRef.current > 0) return;
+      if (isClickInsidePortalledMenu(event.target)) return;
+      if (floatingToolbarRef.current && !floatingToolbarRef.current.contains(event.target as Node)) {
+        setIsFloatingToolbarOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isClickInsidePortalledMenu, isFloatingToolbarOpen]);
+  type TextViewMode = 'view' | 'edit';
+  type PreviewViewMode = 'preview' | 'edit';
+
+  const [textViewMode, setTextViewMode] = React.useState<TextViewMode>('edit');
+  const [mdViewMode, setMdViewMode] = React.useState<PreviewViewMode>('edit');
   const [jsonViewMode, setJsonViewMode] = React.useState<'tree' | 'text'>('tree');
   const [htmlViewMode, setHtmlViewMode] = React.useState<PreviewViewMode>('edit');
+  const [drawioViewMode, setDrawioViewMode] = React.useState<PreviewViewMode>('preview');
+  const [drawioRemountNonce, setDrawioRemountNonce] = React.useState(0);
   const textViewModeByPathRef = React.useRef<Record<string, TextViewMode>>({});
   const mdViewModeByPathRef = React.useRef<Record<string, PreviewViewMode>>({});
   const htmlViewModeByPathRef = React.useRef<Record<string, PreviewViewMode>>({});
-
-  const lightTheme = React.useMemo(
-    () => availableThemes.find((theme) => theme.metadata.id === lightThemeId) ?? getDefaultTheme(false),
-    [availableThemes, lightThemeId],
-  );
-  const darkTheme = React.useMemo(
-    () => availableThemes.find((theme) => theme.metadata.id === darkThemeId) ?? getDefaultTheme(true),
-    [availableThemes, darkThemeId],
-  );
-
-  React.useEffect(() => {
-    ensurePierreThemeRegistered(lightTheme);
-    ensurePierreThemeRegistered(darkTheme);
-  }, [lightTheme, darkTheme]);
-
-  const EMPTY_PATHS: string[] = React.useMemo(() => [], []);
-  const openPaths = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.openPaths ?? EMPTY_PATHS) : EMPTY_PATHS));
-  const selectedPath = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.selectedPath ?? null) : null));
-  const expandedPaths = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.expandedPaths ?? EMPTY_PATHS) : EMPTY_PATHS));
-  const addOpenPath = useFilesViewTabsStore((state) => state.addOpenPath);
-  const removeOpenPath = useFilesViewTabsStore((state) => state.removeOpenPath);
-  const removeOpenPathsByPrefix = useFilesViewTabsStore((state) => state.removeOpenPathsByPrefix);
-  const setSelectedPath = useFilesViewTabsStore((state) => state.setSelectedPath);
-  const toggleExpandedPath = useFilesViewTabsStore((state) => state.toggleExpandedPath);
-  const expandPaths = useFilesViewTabsStore((state) => state.expandPaths);
-
-  const toFileNode = React.useCallback((path: string): FileNode => {
-    const normalized = normalizePath(path);
-    const parts = normalized.split('/');
-    const name = parts[parts.length - 1] || normalized;
-    const extension = name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined;
-    return {
-      name,
-      path: normalized,
-      type: 'file',
-      extension,
-    };
-  }, []);
-
-  const openFiles = React.useMemo(() => openPaths.map(toFileNode), [openPaths, toFileNode]);
-  const effectiveSelectedPath = React.useMemo(() => selectedPath ?? openPaths[0] ?? null, [openPaths, selectedPath]);
-  const selectedFile = React.useMemo(() => (effectiveSelectedPath ? toFileNode(effectiveSelectedPath) : null), [effectiveSelectedPath, toFileNode]);
-  const selectedFilePath = selectedFile?.path ?? '';
-  const selectedFileIsOutsideWorkspace = Boolean(root && selectedFilePath && !isPathWithinRoot(selectedFilePath, root));
-  const selectedFileReadOptions = React.useMemo(
-    () => ({ allowOutsideWorkspace: mode === 'editor-only' && selectedFileIsOutsideWorkspace }),
-    [mode, selectedFileIsOutsideWorkspace],
-  );
-
-  // Editor tabs horizontal scroll fades
-  const editorTabsScrollRef = React.useRef<HTMLDivElement>(null);
-  const [editorTabsOverflow, setEditorTabsOverflow] = React.useState<{ left: boolean; right: boolean }>({ left: false, right: false });
-  const updateEditorTabsOverflow = React.useCallback(() => {
-    const el = editorTabsScrollRef.current;
-    if (!el) return;
-    setEditorTabsOverflow({
-      left: el.scrollLeft > 2,
-      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
-    });
-  }, []);
-  const updateEditorTabsOverflowRef = React.useRef(updateEditorTabsOverflow);
-  updateEditorTabsOverflowRef.current = updateEditorTabsOverflow;
-  React.useEffect(() => {
-    const el = editorTabsScrollRef.current;
-    if (!el) return;
-    const handler = () => updateEditorTabsOverflowRef.current();
-    handler();
-    el.addEventListener('scroll', handler, { passive: true });
-    const ro = new ResizeObserver(handler);
-    ro.observe(el);
-    return () => {
-      el.removeEventListener('scroll', handler);
-      ro.disconnect();
-    };
-  }, [openFiles.length]);
-
-  const [childrenByDir, setChildrenByDir] = React.useState<Record<string, FileNode[]>>({});
-  const [loadErrorsByDir, setLoadErrorsByDir] = React.useState<Record<string, string>>({});
-  const loadedDirsRef = React.useRef<Set<string>>(new Set());
-  const inFlightDirsRef = React.useRef<Set<string>>(new Set());
-  const activeDirectoryLoadIdsRef = React.useRef<Map<string, number>>(new Map());
-  const nextDirectoryLoadIdRef = React.useRef(0);
-
-  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
-  const [searching, setSearching] = React.useState(false);
-
-  const [fileContent, setFileContent] = React.useState<string>('');
-  const [fileLoading, setFileLoading] = React.useState(false);
-  const [fileError, setFileError] = React.useState<string | null>(null);
-  const [desktopImageSrc, setDesktopImageSrc] = React.useState<string>('');
-  const [imageAssetAuthReadyKey, setImageAssetAuthReadyKey] = React.useState('');
-
-  const [loadedFilePath, setLoadedFilePath] = React.useState<string | null>(null);
-
-  const [draftContent, setDraftContent] = React.useState('');
-  const [isSaving, setIsSaving] = React.useState(false);
-  const [loadedFileLineEnding, setLoadedFileLineEnding] = React.useState<FileLineEnding>('\n');
+  const drawioViewModeByPathRef = React.useRef<Record<string, PreviewViewMode>>({});
+
+  const lightTheme = React.useMemo(
+    () => availableThemes.find((theme) => theme.metadata.id === lightThemeId) ?? getDefaultTheme(false),
+    [availableThemes, lightThemeId],
+  );
+  const darkTheme = React.useMemo(
+    () => availableThemes.find((theme) => theme.metadata.id === darkThemeId) ?? getDefaultTheme(true),
+    [availableThemes, darkThemeId],
+  );
+
+  React.useEffect(() => {
+    ensurePierreThemeRegistered(lightTheme);
+    ensurePierreThemeRegistered(darkTheme);
+  }, [lightTheme, darkTheme]);
+
+  const EMPTY_PATHS: string[] = React.useMemo(() => [], []);
+  const openPaths = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.openPaths ?? EMPTY_PATHS) : EMPTY_PATHS));
+  const selectedPath = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.selectedPath ?? null) : null));
+  const expandedPaths = useFilesViewTabsStore((state) => (root ? (state.byRoot[root]?.expandedPaths ?? EMPTY_PATHS) : EMPTY_PATHS));
+  const addOpenPath = useFilesViewTabsStore((state) => state.addOpenPath);
+  const removeOpenPath = useFilesViewTabsStore((state) => state.removeOpenPath);
+  const removeOpenPathsByPrefix = useFilesViewTabsStore((state) => state.removeOpenPathsByPrefix);
+  const setSelectedPath = useFilesViewTabsStore((state) => state.setSelectedPath);
+  const toggleExpandedPath = useFilesViewTabsStore((state) => state.toggleExpandedPath);
+  const expandPaths = useFilesViewTabsStore((state) => state.expandPaths);
+
+  const toFileNode = React.useCallback((path: string): FileNode => {
+    const normalized = normalizePath(path);
+    const parts = normalized.split('/');
+    const name = parts[parts.length - 1] || normalized;
+    const extension = name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined;
+    return {
+      name,
+      path: normalized,
+      type: 'file',
+      extension,
+    };
+  }, []);
+
+  const openFiles = React.useMemo(() => openPaths.map(toFileNode), [openPaths, toFileNode]);
+  const effectiveSelectedPath = React.useMemo(() => selectedPath ?? openPaths[0] ?? null, [openPaths, selectedPath]);
+  const selectedFile = React.useMemo(() => (effectiveSelectedPath ? toFileNode(effectiveSelectedPath) : null), [effectiveSelectedPath, toFileNode]);
+  const selectedFilePath = selectedFile?.path ?? '';
+  const selectedFileIsOutsideWorkspace = Boolean(root && selectedFilePath && !isPathWithinRoot(selectedFilePath, root));
+  const selectedFileReadOptions = React.useMemo(
+    () => ({ allowOutsideWorkspace: mode === 'editor-only' && selectedFileIsOutsideWorkspace }),
+    [mode, selectedFileIsOutsideWorkspace],
+  );
+
+  // Editor tabs horizontal scroll fades
+  const editorTabsScrollRef = React.useRef<HTMLDivElement>(null);
+  const [editorTabsOverflow, setEditorTabsOverflow] = React.useState<{ left: boolean; right: boolean }>({ left: false, right: false });
+  const updateEditorTabsOverflow = React.useCallback(() => {
+    const el = editorTabsScrollRef.current;
+    if (!el) return;
+    setEditorTabsOverflow({
+      left: el.scrollLeft > 2,
+      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
+    });
+  }, []);
+  const updateEditorTabsOverflowRef = React.useRef(updateEditorTabsOverflow);
+  updateEditorTabsOverflowRef.current = updateEditorTabsOverflow;
+  React.useEffect(() => {
+    const el = editorTabsScrollRef.current;
+    if (!el) return;
+    const handler = () => updateEditorTabsOverflowRef.current();
+    handler();
+    el.addEventListener('scroll', handler, { passive: true });
+    const ro = new ResizeObserver(handler);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener('scroll', handler);
+      ro.disconnect();
+    };
+  }, [openFiles.length]);
+
+  const [childrenByDir, setChildrenByDir] = React.useState<Record<string, FileNode[]>>({});
+  const [loadErrorsByDir, setLoadErrorsByDir] = React.useState<Record<string, string>>({});
+  const loadedDirsRef = React.useRef<Set<string>>(new Set());
+  const inFlightDirsRef = React.useRef<Set<string>>(new Set());
+  const activeDirectoryLoadIdsRef = React.useRef<Map<string, number>>(new Map());
+  const nextDirectoryLoadIdRef = React.useRef(0);
+
+  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
+  const [searching, setSearching] = React.useState(false);
+
+  const [fileContent, setFileContent] = React.useState<string>('');
+  const [fileLoading, setFileLoading] = React.useState(false);
+  const [fileError, setFileError] = React.useState<string | null>(null);
+  const [desktopImageSrc, setDesktopImageSrc] = React.useState<string>('');
+  const [imageAssetAuthReadyKey, setImageAssetAuthReadyKey] = React.useState('');
+
+  const [loadedFilePath, setLoadedFilePath] = React.useState<string | null>(null);
+
+  const [draftContent, setDraftContent] = React.useState('');
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [loadedFileLineEnding, setLoadedFileLineEnding] = React.useState<FileLineEnding>('\n');
   const dialogInputRef = React.useRef<HTMLInputElement>(null);
   const autoSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastLoadedFileStatRef = React.useRef<FileStatSnapshot | null>(null);
-  const activeFileLoadIdRef = React.useRef(0);
-  const [autoSaveStatus, setAutoSaveStatus] = React.useState<'idle' | 'saved'>('idle');
-  const [autoSaveEnabled, setAutoSaveEnabled] = React.useState(getInitialAutoSaveEnabled);
-
-  const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false);
-  const pendingSelectFileRef = React.useRef<FileNode | null>(null);
-  const pendingTabRef = React.useRef<import('@/stores/useUIStore').MainTab | null>(null);
-  const pendingClosePathRef = React.useRef<string | null>(null);
-  const skipDirtyOnceRef = React.useRef(false);
-  const copiedContentTimeoutRef = React.useRef<number | null>(null);
-  const copiedPathTimeoutRef = React.useRef<number | null>(null);
-  const editorViewRef = React.useRef<EditorView | null>(null);
-  const editorWrapperRef = React.useRef<HTMLDivElement | null>(null);
-  const [editorViewReadyNonce, setEditorViewReadyNonce] = React.useState(0);
-  const pendingNavigationRafRef = React.useRef<number | null>(null);
-  const pendingNavigationCycleRef = React.useRef<{ key: string; attempts: number }>({ key: '', attempts: 0 });
-
-  React.useEffect(() => {
-    return () => {
-      if (pendingNavigationRafRef.current !== null && typeof window !== 'undefined') {
-        window.cancelAnimationFrame(pendingNavigationRafRef.current);
-        pendingNavigationRafRef.current = null;
-      }
-    };
-  }, []);
-
-  const [activeDialog, setActiveDialog] = React.useState<'createFile' | 'createFolder' | 'rename' | 'delete' | null>(null);
-  const [dialogData, setDialogData] = React.useState<{ path: string; name?: string; type?: 'file' | 'directory' } | null>(null);
-  const [dialogInputValue, setDialogInputValue] = React.useState('');
-  const [isDialogSubmitting, setIsDialogSubmitting] = React.useState(false);
-  const [contextMenuPath, setContextMenuPath] = React.useState<string | null>(null);
-  const [copiedContent, setCopiedContent] = React.useState(false);
-  const [copiedPath, setCopiedPath] = React.useState(false);
-  const [isGoToLineOpen, setIsGoToLineOpen] = React.useState(false);
-
-  const canCreateFile = Boolean(files.writeFile);
-  const canCreateFolder = Boolean(files.createDirectory);
-  const canRename = Boolean(files.rename);
-  const canDelete = Boolean(files.delete);
-  const canReveal = Boolean(files.revealPath);
-  const openInApps = useOpenInAppsStore((state) => state.availableApps);
-  const openInCacheStale = useOpenInAppsStore((state) => state.isCacheStale);
-  const initializeOpenInApps = useOpenInAppsStore((state) => state.initialize);
-  const loadOpenInApps = useOpenInAppsStore((state) => state.loadInstalledApps);
-
-  React.useEffect(() => {
-    initializeOpenInApps();
-  }, [initializeOpenInApps]);
-
-  const handleRevealPath = React.useCallback((targetPath: string) => {
-    if (!files.revealPath) return;
-    void files.revealPath(targetPath).catch(() => {
-      toast.error(t('sidebarFilesTree.toast.revealFailed'));
-    });
-  }, [files, t]);
-
-  const handleOpenInApp = React.useCallback(async (app: { id: string; appName: string }) => {
-    if (!selectedFile?.path) {
-      return;
-    }
-
-    const openedInApp = await openDesktopFileInApp(selectedFile.path, app.id, app.appName);
-    if (openedInApp) {
-      return;
-    }
-
-    const openedFile = await openDesktopPath(selectedFile.path, app.appName);
-    if (openedFile) {
-      return;
-    }
-
-    const fileDirectory = getParentDirectoryPath(selectedFile.path) || root;
-    if (fileDirectory) {
-      const openedDirectory = await openDesktopPath(fileDirectory, app.appName);
-      if (openedDirectory) {
-        return;
-      }
-    }
-    toast.error(t('filesView.toast.openInAppFailed', { app: app.appName }));
-  }, [root, selectedFile?.path, t]);
-
-  const handleOpenDialog = React.useCallback((type: 'createFile' | 'createFolder' | 'rename' | 'delete', data: { path: string; name?: string; type?: 'file' | 'directory' }) => {
-    setActiveDialog(type);
-    setDialogData(data);
-    setDialogInputValue(type === 'rename' ? data.name || '' : '');
-    setIsDialogSubmitting(false);
-  }, []);
-
-  // Line selection state for commenting
-  const [lineSelection, setLineSelection] = React.useState<SelectedLineRange | null>(null);
-  const isSelectingRef = React.useRef(false);
-  const selectionStartRef = React.useRef<number | null>(null);
-  const [isDragging, setIsDragging] = React.useState(false);
-
-  // Session/config for sending comments
-  const setMainTabGuard = useUIStore((state) => state.setMainTabGuard);
-  const pendingFileNavigation = useUIStore((state) => state.pendingFileNavigation);
-  const setPendingFileNavigation = useUIStore((state) => state.setPendingFileNavigation);
-  const pendingFileFocusPath = useUIStore((state) => state.pendingFileFocusPath);
-  const setPendingFileFocusPath = useUIStore((state) => state.setPendingFileFocusPath);
-  const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
-  const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
-
-  // Global mouseup to end drag selection
-  React.useEffect(() => {
-    const handleGlobalMouseUp = () => {
-      isSelectingRef.current = false;
-      selectionStartRef.current = null;
-      setIsDragging(false);
-    };
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
-  }, []);
-
-  React.useEffect(() => {
-    return () => {
-      if (copiedContentTimeoutRef.current !== null) {
-        window.clearTimeout(copiedContentTimeoutRef.current);
-      }
-      if (copiedPathTimeoutRef.current !== null) {
-        window.clearTimeout(copiedPathTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Extract selected code
-  const extractSelectedCode = React.useCallback((content: string, range: SelectedLineRange): string => {
-    const lines = content.split('\n');
-    const startLine = Math.max(1, range.start);
-    const endLine = Math.min(lines.length, range.end);
-    if (startLine > endLine) return '';
-    return lines.slice(startLine - 1, endLine).join('\n');
-  }, []);
-
-  const fileCommentController = useInlineCommentController<SelectedLineRange>({
-    source: 'file',
-    fileLabel: selectedFile?.path ?? null,
-    language: selectedFile?.path ? getLanguageFromExtension(selectedFile.path) || 'text' : 'text',
-    getCodeForRange: (range) => extractSelectedCode(fileContent, normalizeLineRange(range)),
-    toStoreRange: (range) => ({ startLine: range.start, endLine: range.end }),
-    fromDraftRange: (draft) => ({ start: draft.startLine, end: draft.endLine }),
-  });
-
-  const {
-    drafts: filesFileDrafts,
-    commentText,
-    editingDraftId,
-    setSelection: setCommentSelection,
-    saveComment,
-    cancel,
-    reset,
-    startEdit,
-    deleteDraft,
-  } = fileCommentController;
-
-  React.useEffect(() => {
-    setLineSelection(null);
-    reset();
-    setMainTabGuard(null);
-    setDraftContent('');
-    setIsSaving(false);
-  }, [selectedFile?.path, reset, setMainTabGuard]);
-
-  React.useEffect(() => {
-    setCommentSelection(lineSelection);
-  }, [lineSelection, setCommentSelection]);
-
-  React.useEffect(() => {
-    if (!lineSelection && !editingDraftId) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-
-      if (target.closest('[data-comment-input="true"]') || target.closest('[data-comment-card="true"]')) return;
-      if (target.closest('.cm-gutterElement')) return;
-      if (target.closest('[data-sonner-toast]') || target.closest('[data-sonner-toaster]')) return;
-
-      setLineSelection(null);
-      cancel();
-    };
-
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('click', handleClickOutside);
-    }, 100);
-
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [cancel, editingDraftId, lineSelection]);
-
-  const handleSaveComment = React.useCallback((text: string, range?: { start: number; end: number }) => {
-    const finalRange = range ?? lineSelection ?? undefined;
-    if (range) {
-      setLineSelection(range);
-    }
-    saveComment(text, finalRange);
-    setLineSelection(null);
-  }, [lineSelection, saveComment]);
-
-  const mapDirectoryEntries = React.useCallback((dirPath: string, entries: Array<{ name: string; path: string; isDirectory: boolean }>): FileNode[] => {
-    const nodes: FileNode[] = [];
-    for (const entry of entries) {
-      if (!(entry && typeof entry.name === 'string' && entry.name.length > 0)) continue;
-      if (!showHidden && entry.name.startsWith('.')) continue;
-      if (!showGitignored && shouldIgnoreEntryName(entry.name)) continue;
-      const name = entry.name;
-      const normalizedEntryPath = normalizePath(entry.path || '');
-      const path = normalizedEntryPath
-        ? (isAbsolutePath(normalizedEntryPath)
-          ? normalizedEntryPath
-          : normalizePath(`${dirPath}/${normalizedEntryPath}`))
-        : normalizePath(`${dirPath}/${name}`);
-      const type = entry.isDirectory ? 'directory' : 'file';
-      const extension = type === 'file' && name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined;
-      nodes.push({ name, path, type, extension });
-    }
-
-    return sortNodes(nodes);
-  }, [showGitignored, showHidden]);
-
-  const loadDirectory = React.useCallback(async (dirPath: string) => {
-    const normalizedDir = normalizePath(dirPath.trim());
-    if (!normalizedDir) {
-      return;
-    }
-
-    if (loadedDirsRef.current.has(normalizedDir) || inFlightDirsRef.current.has(normalizedDir)) {
-      return;
-    }
-
-    inFlightDirsRef.current = new Set(inFlightDirsRef.current);
-    inFlightDirsRef.current.add(normalizedDir);
-    const requestId = nextDirectoryLoadIdRef.current + 1;
-    nextDirectoryLoadIdRef.current = requestId;
-    activeDirectoryLoadIdsRef.current = new Map(activeDirectoryLoadIdsRef.current);
-    activeDirectoryLoadIdsRef.current.set(normalizedDir, requestId);
-
-    const isCurrentRequest = () => activeDirectoryLoadIdsRef.current.get(normalizedDir) === requestId;
-
-    const listPromise = files.listDirectory
-      ? files.listDirectory(normalizedDir).then((result) => result.entries.map((entry) => ({
-        name: entry.name,
-        path: entry.path,
-        isDirectory: entry.isDirectory,
-      })))
-      : opencodeClient.listLocalDirectory(normalizedDir).then((result) => result.map((entry) => ({
-        name: entry.name,
-        path: entry.path,
-        isDirectory: entry.isDirectory,
-      })));
-
-    await listPromise
-      .then((entries) => {
-        if (!isCurrentRequest()) {
-          return;
-        }
-
-        const mapped = mapDirectoryEntries(normalizedDir, entries);
-
-        loadedDirsRef.current = new Set(loadedDirsRef.current);
-        loadedDirsRef.current.add(normalizedDir);
-        setLoadErrorsByDir((prev) => {
-          if (!prev[normalizedDir]) return prev;
-          const next = { ...prev };
-          delete next[normalizedDir];
-          return next;
-        });
-        setChildrenByDir((prev) => ({ ...prev, [normalizedDir]: mapped }));
-      })
-      .catch((error) => {
-        if (!isCurrentRequest()) {
-          return;
-        }
-
-        const message = error instanceof Error ? error.message : String(error ?? '');
-        console.error('Failed to load files directory:', error);
-        setLoadErrorsByDir((prev) => ({
-          ...prev,
-          [normalizedDir]: message,
-        }));
-      })
-      .finally(() => {
-        if (!isCurrentRequest()) {
-          return;
-        }
-
-        activeDirectoryLoadIdsRef.current = new Map(activeDirectoryLoadIdsRef.current);
-        activeDirectoryLoadIdsRef.current.delete(normalizedDir);
-        inFlightDirsRef.current = new Set(inFlightDirsRef.current);
-        inFlightDirsRef.current.delete(normalizedDir);
-      });
-  }, [files, mapDirectoryEntries]);
-
-  const refreshRoot = React.useCallback(async () => {
-    if (!root) {
-      return;
-    }
-
-    loadedDirsRef.current = new Set();
-    inFlightDirsRef.current = new Set();
-    activeDirectoryLoadIdsRef.current = new Map();
-    setLoadErrorsByDir({});
-    setChildrenByDir((prev) => (Object.keys(prev).length === 0 ? prev : {}));
-
-    await loadDirectory(root);
-  }, [loadDirectory, root]);
-
-  /**
-   * Incrementally refresh a single directory without nuking the rest of the
-   * tree.  After the operation the parent directory is reloaded in-place so
-   * the new/renamed/deleted entry becomes visible immediately while every
-   * other expanded directory keeps its cached children.
-   */
-  const refreshDirectory = React.useCallback(async (dirPath: string) => {
-    if (!dirPath) {
-      await refreshRoot();
-      return;
-    }
-    const normalized = normalizePath(dirPath);
-    // Remove from loaded set so loadDirectory will actually fetch again.
-    loadedDirsRef.current = new Set(loadedDirsRef.current);
-    loadedDirsRef.current.delete(normalized);
-    // Also cancel any in-flight request for this dir so the new fetch wins.
-    inFlightDirsRef.current = new Set(inFlightDirsRef.current);
-    inFlightDirsRef.current.delete(normalized);
-    await loadDirectory(normalized);
-  }, [loadDirectory, refreshRoot]);
-
-  const lastFilesViewDirRef = React.useRef<string>('');
-  const lastFilesViewTreeKeyRef = React.useRef<string>('');
-
-  React.useEffect(() => {
-    if (!root) {
-      return;
-    }
-
-    const treeKey = `${root}|h${showHidden ? '1' : '0'}|g${showGitignored ? '1' : '0'}`;
-    const dirChanged = lastFilesViewDirRef.current !== root;
-    const treeKeyChanged = lastFilesViewTreeKeyRef.current !== treeKey;
-
-    if (!dirChanged && !treeKeyChanged) {
-      return;
-    }
-
-    if (dirChanged) {
-      lastFilesViewDirRef.current = root;
-      setFileContent('');
-      setFileError(null);
-      setDesktopImageSrc('');
-      setLoadedFilePath(null);
-      setShowMobilePageContent(false);
-    }
-
-    if (treeKeyChanged) {
-      lastFilesViewTreeKeyRef.current = treeKey;
-      loadedDirsRef.current = new Set();
-      inFlightDirsRef.current = new Set();
-      activeDirectoryLoadIdsRef.current = new Map();
-      setLoadErrorsByDir({});
-      setChildrenByDir((prev) => (Object.keys(prev).length === 0 ? prev : {}));
-      void loadDirectory(root);
-    }
-  }, [loadDirectory, root, showGitignored, showHidden]);
-
-  // Auto-refresh expanded directories when user returns to the tab
-  React.useEffect(() => {
-    if (!files.listDirectory) return;
-
-    const handleVisibilityChange = () => {
-      if (!document.hidden && expandedPaths.length > 0) {
-        for (const dir of expandedPaths) {
-          void refreshDirectory(dir);
-        }
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
-  }, [expandedPaths, files.listDirectory, refreshDirectory]);
-
-  // Poll expanded directories for external changes
-  React.useEffect(() => {
-    if (!files.listDirectory) return;
-    if (expandedPaths.length === 0) return;
-
-    const interval = setInterval(() => {
-      if (document.hidden) return;
-      for (const dir of expandedPaths) {
-        void refreshDirectory(dir);
-      }
-    }, 8000);
-
-    return () => clearInterval(interval);
-  }, [expandedPaths, files.listDirectory, refreshDirectory]);
-
-  const handleDialogSubmit = React.useCallback(async (e?: React.FormEvent) => {
-    e?.preventDefault();
-    if (!dialogData || !activeDialog) return;
-
-    setIsDialogSubmitting(true);
-    const finishDialogOperation = () => {
-      setActiveDialog(null);
-    };
-
-    const failDialogOperation = (message: string) => {
-      toast.error(message);
-    };
-
-    const done = () => {
-      setIsDialogSubmitting(false);
-    };
-
-    if (activeDialog === 'createFile') {
-      if (!dialogInputValue.trim()) {
-        failDialogOperation(t('sidebarFilesTree.toast.filenameRequired'));
-        done();
-        return;
-      }
-      if (!files.writeFile) {
-        failDialogOperation(t('sidebarFilesTree.toast.writeNotSupported'));
-        done();
-        return;
-      }
-
-      const parentPath = dialogData.path;
-      const prefix = parentPath ? `${parentPath}/` : '';
-      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
-      await files.writeFile(newPath, '')
-        .then(async (result) => {
-          if (result.success) {
-            toast.success(t('sidebarFilesTree.toast.fileCreated'));
-            await refreshDirectory(parentPath);
-          }
-          finishDialogOperation();
-        })
-        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
-        .finally(done);
-      return;
-    }
-
-    if (activeDialog === 'createFolder') {
-      if (!dialogInputValue.trim()) {
-        failDialogOperation(t('sidebarFilesTree.toast.folderNameRequired'));
-        done();
-        return;
-      }
-
-      const parentPath = dialogData.path;
-      const prefix = parentPath ? `${parentPath}/` : '';
-      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
-      await files.createDirectory(newPath)
-        .then(async (result) => {
-          if (result.success) {
-            toast.success(t('sidebarFilesTree.toast.folderCreated'));
-            await refreshDirectory(parentPath);
-          }
-          finishDialogOperation();
-        })
-        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
-        .finally(done);
-      return;
-    }
-
-    if (activeDialog === 'rename') {
-      if (!dialogInputValue.trim()) {
-        failDialogOperation(t('sidebarFilesTree.toast.nameRequired'));
-        done();
-        return;
-      }
-
-      if (!files.rename) {
-        failDialogOperation(t('sidebarFilesTree.toast.renameNotSupported'));
-        done();
-        return;
-      }
-
-      const oldPath = dialogData.path;
-      const parentDir = oldPath.split('/').slice(0, -1).join('/');
-      const prefix = parentDir ? `${parentDir}/` : '';
-      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
-
-      await files.rename(oldPath, newPath)
-        .then(async (result) => {
-          if (result.success) {
-            toast.success(t('sidebarFilesTree.toast.renamedSuccessfully'));
-            await refreshDirectory(parentDir);
-            if (root) {
-              removeOpenPathsByPrefix(root, oldPath);
-            }
-            if (selectedFile?.path === oldPath || selectedFile?.path.startsWith(`${oldPath}/`)) {
-              if (root) {
-                setSelectedPath(root, null);
-              }
-              setFileContent('');
-              setFileError(null);
-              setDesktopImageSrc('');
-              setLoadedFilePath(null);
-              if (isMobile) {
-                setShowMobilePageContent(false);
-              }
-            }
-          }
-          finishDialogOperation();
-        })
-        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
-        .finally(done);
-      return;
-    }
-
-    if (activeDialog === 'delete') {
-      if (!files.delete) {
-        failDialogOperation(t('sidebarFilesTree.toast.deleteNotSupported'));
-        done();
-        return;
-      }
-
-      const deletedPath = dialogData.path;
-      const parentDir = deletedPath.split('/').slice(0, -1).join('/');
-      await files.delete(deletedPath)
-        .then(async (result) => {
-          if (result.success) {
-            toast.success(t('sidebarFilesTree.toast.deletedSuccessfully'));
-            await refreshDirectory(parentDir);
-            if (root) {
-              removeOpenPathsByPrefix(root, deletedPath);
-            }
-            if (selectedFile?.path === deletedPath || selectedFile?.path.startsWith(`${deletedPath}/`)) {
-              if (root) {
-                setSelectedPath(root, null);
-              }
-              setFileContent('');
-              setFileError(null);
-              setDesktopImageSrc('');
-              setLoadedFilePath(null);
-              if (isMobile) {
-                setShowMobilePageContent(false);
-              }
-            }
-          }
-          finishDialogOperation();
-        })
-        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
-        .finally(done);
-      return;
-    }
-
-    done();
-  }, [activeDialog, dialogData, dialogInputValue, files, refreshDirectory, isMobile, removeOpenPathsByPrefix, root, selectedFile?.path, setSelectedPath, t]);
-
-  React.useEffect(() => {
-    if (!currentDirectory) {
-      setSearchResults([]);
-      setSearching(false);
-      return;
-    }
-
-    const trimmedQuery = debouncedSearchQuery.trim();
-    if (!trimmedQuery) {
-      setSearchResults([]);
-      setSearching(false);
-      return;
-    }
-
-    let cancelled = false;
-    setSearching(true);
-
-    searchFiles(currentDirectory, trimmedQuery, 150, {
-      includeHidden: showHidden,
-      respectGitignore: !showGitignored,
-      type: 'file',
-    })
-      .then((hits) => {
-        if (cancelled) {
-          return;
-        }
-
-        const filtered = hits.filter((hit) => showGitignored || !shouldIgnorePath(hit.path));
-
-        const mapped: FileNode[] = filtered.map((hit) => ({
-          name: hit.name,
-          path: normalizePath(hit.path),
-          type: 'file',
-          extension: hit.extension,
-          relativePath: hit.relativePath,
-        }));
-
-        setSearchResults(mapped);
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setSearchResults([]);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setSearching(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [currentDirectory, debouncedSearchQuery, searchFiles, showHidden, showGitignored]);
-
-  const readFile = React.useCallback(async (path: string, options?: { allowOutsideWorkspace?: boolean; optional?: boolean }): Promise<string> => {
-    if (files.readFile) {
-      const result = await files.readFile(path, options);
-      return result.content ?? '';
-    }
-
-    const params = new URLSearchParams({ path });
-    if (options?.allowOutsideWorkspace) {
-      params.set('allowOutsideWorkspace', 'true');
-    }
-    if (options?.optional) {
-      params.set('optional', 'true');
-    }
-    const response = await runtimeFetch(`/api/fs/read?${params.toString()}`, {
-      // Avoid conditional requests (304 + empty body).
-      cache: options?.optional ? 'no-store' : 'default',
-    });
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: response.statusText }));
-      throw new Error((error as { error?: string }).error || t('filesView.error.readFileFailed'));
-    }
-    return response.text();
-  }, [files, t]);
-
-  const readFileStat = React.useCallback(async (path: string, options?: { allowOutsideWorkspace?: boolean }): Promise<FileStatSnapshot | null> => {
-    if (files.statFile) {
-      const result = await files.statFile(path, options);
-      return {
-        path: result.path,
-        size: result.size,
-        mtimeMs: result.mtimeMs,
-      };
-    }
-    return null;
-  }, [files]);
-
-  React.useEffect(() => {
-    if (!root || !files.statFile || openPaths.length === 0) {
-      return;
-    }
-
-    let cancelled = false;
-    const paths = [...openPaths];
-
-    void Promise.all(paths.map(async (path) => {
-      try {
-        const stat = await files.statFile?.(path);
-        if (!cancelled && stat && !stat.isFile) {
-          removeOpenPathsByPrefix(root, path);
-        }
-      } catch (error) {
-        if (!cancelled && isFileMissingError(error)) {
-          removeOpenPathsByPrefix(root, path);
-        }
-      }
-    }));
-
-    return () => {
-      cancelled = true;
-    };
-  }, [files, openPaths, removeOpenPathsByPrefix, root]);
-
-  const displayedContent = React.useMemo(() =>
-    fileContent.length > MAX_VIEW_CHARS
-      ? `${fileContent.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …`
-      : fileContent,
-    [fileContent]
-  );
-
-  const isDirty = draftContent !== displayedContent;
-
-  const saveDraft = React.useCallback(async () => {
-    if (!selectedFile || !files.writeFile) {
-      toast.error(t('filesView.toast.savingNotSupported'));
+  const diagramAutoSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const diagramXmlRef = React.useRef('');
+  const diagramSavedXmlRef = React.useRef('');
+  const pendingDrawioPreviewFrameRef = React.useRef<number | null>(null);
+  const diagramEditorRef = React.useRef<React.ComponentRef<typeof DiagramEditor>>(null);
+  const lastLoadedFileStatRef = React.useRef<FileStatSnapshot | null>(null);
+  const activeFileLoadIdRef = React.useRef(0);
+  const [autoSaveStatus, setAutoSaveStatus] = React.useState<'idle' | 'saved'>('idle');
+  const [diagramSaved, setDiagramSaved] = React.useState(false);
+  const [autoSaveEnabled, setAutoSaveEnabled] = React.useState(getInitialAutoSaveEnabled);
+
+  const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false);
+  const pendingSelectFileRef = React.useRef<FileNode | null>(null);
+  const pendingTabRef = React.useRef<import('@/stores/useUIStore').MainTab | null>(null);
+  const pendingClosePathRef = React.useRef<string | null>(null);
+  const skipDirtyOnceRef = React.useRef(false);
+  const copiedContentTimeoutRef = React.useRef<number | null>(null);
+  const copiedPathTimeoutRef = React.useRef<number | null>(null);
+  const editorViewRef = React.useRef<EditorView | null>(null);
+  const editorWrapperRef = React.useRef<HTMLDivElement | null>(null);
+  const [editorViewReadyNonce, setEditorViewReadyNonce] = React.useState(0);
+  const pendingNavigationRafRef = React.useRef<number | null>(null);
+  const pendingNavigationCycleRef = React.useRef<{ key: string; attempts: number }>({ key: '', attempts: 0 });
+
+  React.useEffect(() => {
+    return () => {
+      if (pendingNavigationRafRef.current !== null && typeof window !== 'undefined') {
+        window.cancelAnimationFrame(pendingNavigationRafRef.current);
+        pendingNavigationRafRef.current = null;
+      }
+    };
+  }, []);
+
+  const [activeDialog, setActiveDialog] = React.useState<'createFile' | 'createFolder' | 'rename' | 'delete' | null>(null);
+  const [dialogData, setDialogData] = React.useState<{ path: string; name?: string; type?: 'file' | 'directory' } | null>(null);
+  const [dialogInputValue, setDialogInputValue] = React.useState('');
+  const [isDialogSubmitting, setIsDialogSubmitting] = React.useState(false);
+  const [contextMenuPath, setContextMenuPath] = React.useState<string | null>(null);
+  const [copiedContent, setCopiedContent] = React.useState(false);
+  const [copiedPath, setCopiedPath] = React.useState(false);
+  const [isGoToLineOpen, setIsGoToLineOpen] = React.useState(false);
+
+  const canCreateFile = Boolean(files.writeFile);
+  const canCreateFolder = Boolean(files.createDirectory);
+  const canRename = Boolean(files.rename);
+  const canDelete = Boolean(files.delete);
+  const canReveal = Boolean(files.revealPath);
+  const openInApps = useOpenInAppsStore((state) => state.availableApps);
+  const openInCacheStale = useOpenInAppsStore((state) => state.isCacheStale);
+  const initializeOpenInApps = useOpenInAppsStore((state) => state.initialize);
+  const loadOpenInApps = useOpenInAppsStore((state) => state.loadInstalledApps);
+
+  React.useEffect(() => {
+    initializeOpenInApps();
+  }, [initializeOpenInApps]);
+
+  const handleRevealPath = React.useCallback((targetPath: string) => {
+    if (!files.revealPath) return;
+    void files.revealPath(targetPath).catch(() => {
+      toast.error(t('sidebarFilesTree.toast.revealFailed'));
+    });
+  }, [files, t]);
+
+  const handleOpenInApp = React.useCallback(async (app: { id: string; appName: string }) => {
+    if (!selectedFile?.path) {
+      return;
+    }
+
+    const openedInApp = await openDesktopFileInApp(selectedFile.path, app.id, app.appName);
+    if (openedInApp) {
+      return;
+    }
+
+    const openedFile = await openDesktopPath(selectedFile.path, app.appName);
+    if (openedFile) {
+      return;
+    }
+
+    const fileDirectory = getParentDirectoryPath(selectedFile.path) || root;
+    if (fileDirectory) {
+      const openedDirectory = await openDesktopPath(fileDirectory, app.appName);
+      if (openedDirectory) {
+        return;
+      }
+    }
+    toast.error(t('filesView.toast.openInAppFailed', { app: app.appName }));
+  }, [root, selectedFile?.path, t]);
+
+  const handleOpenDialog = React.useCallback((type: 'createFile' | 'createFolder' | 'rename' | 'delete', data: { path: string; name?: string; type?: 'file' | 'directory' }) => {
+    setActiveDialog(type);
+    setDialogData(data);
+    setDialogInputValue(type === 'rename' ? data.name || '' : '');
+    setIsDialogSubmitting(false);
+  }, []);
+
+  // Line selection state for commenting
+  const [lineSelection, setLineSelection] = React.useState<SelectedLineRange | null>(null);
+  const isSelectingRef = React.useRef(false);
+  const selectionStartRef = React.useRef<number | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  // Session/config for sending comments
+  const setMainTabGuard = useUIStore((state) => state.setMainTabGuard);
+  const pendingFileNavigation = useUIStore((state) => state.pendingFileNavigation);
+  const setPendingFileNavigation = useUIStore((state) => state.setPendingFileNavigation);
+  const pendingFileFocusPath = useUIStore((state) => state.pendingFileFocusPath);
+  const setPendingFileFocusPath = useUIStore((state) => state.setPendingFileFocusPath);
+  const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
+  const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
+
+  // Global mouseup to end drag selection
+  React.useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      isSelectingRef.current = false;
+      selectionStartRef.current = null;
+      setIsDragging(false);
+    };
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
+  }, []);
+
+  React.useEffect(() => {
+    return () => {
+      if (copiedContentTimeoutRef.current !== null) {
+        window.clearTimeout(copiedContentTimeoutRef.current);
+      }
+      if (copiedPathTimeoutRef.current !== null) {
+        window.clearTimeout(copiedPathTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Extract selected code
+  const extractSelectedCode = React.useCallback((content: string, range: SelectedLineRange): string => {
+    const lines = content.split('\n');
+    const startLine = Math.max(1, range.start);
+    const endLine = Math.min(lines.length, range.end);
+    if (startLine > endLine) return '';
+    return lines.slice(startLine - 1, endLine).join('\n');
+  }, []);
+
+  const fileCommentController = useInlineCommentController<SelectedLineRange>({
+    source: 'file',
+    fileLabel: selectedFile?.path ?? null,
+    language: selectedFile?.path ? getLanguageFromExtension(selectedFile.path) || 'text' : 'text',
+    getCodeForRange: (range) => extractSelectedCode(fileContent, normalizeLineRange(range)),
+    toStoreRange: (range) => ({ startLine: range.start, endLine: range.end }),
+    fromDraftRange: (draft) => ({ start: draft.startLine, end: draft.endLine }),
+  });
+
+  const {
+    drafts: filesFileDrafts,
+    commentText,
+    editingDraftId,
+    setSelection: setCommentSelection,
+    saveComment,
+    cancel,
+    reset,
+    startEdit,
+    deleteDraft,
+  } = fileCommentController;
+
+  React.useEffect(() => {
+    setLineSelection(null);
+    reset();
+    setMainTabGuard(null);
+    setDraftContent('');
+    setIsSaving(false);
+  }, [selectedFile?.path, reset, setMainTabGuard]);
+
+  React.useEffect(() => {
+    setCommentSelection(lineSelection);
+  }, [lineSelection, setCommentSelection]);
+
+  React.useEffect(() => {
+    if (!lineSelection && !editingDraftId) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      if (target.closest('[data-comment-input="true"]') || target.closest('[data-comment-card="true"]')) return;
+      if (target.closest('.cm-gutterElement')) return;
+      if (target.closest('[data-sonner-toast]') || target.closest('[data-sonner-toaster]')) return;
+
+      setLineSelection(null);
+      cancel();
+    };
+
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', handleClickOutside);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [cancel, editingDraftId, lineSelection]);
+
+  const handleSaveComment = React.useCallback((text: string, range?: { start: number; end: number }) => {
+    const finalRange = range ?? lineSelection ?? undefined;
+    if (range) {
+      setLineSelection(range);
+    }
+    saveComment(text, finalRange);
+    setLineSelection(null);
+  }, [lineSelection, saveComment]);
+
+  const mapDirectoryEntries = React.useCallback((dirPath: string, entries: Array<{ name: string; path: string; isDirectory: boolean }>): FileNode[] => {
+    const nodes: FileNode[] = [];
+    for (const entry of entries) {
+      if (!(entry && typeof entry.name === 'string' && entry.name.length > 0)) continue;
+      if (!showHidden && entry.name.startsWith('.')) continue;
+      if (!showGitignored && shouldIgnoreEntryName(entry.name)) continue;
+      const name = entry.name;
+      const normalizedEntryPath = normalizePath(entry.path || '');
+      const path = normalizedEntryPath
+        ? (isAbsolutePath(normalizedEntryPath)
+          ? normalizedEntryPath
+          : normalizePath(`${dirPath}/${normalizedEntryPath}`))
+        : normalizePath(`${dirPath}/${name}`);
+      const type = entry.isDirectory ? 'directory' : 'file';
+      const extension = type === 'file' && name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined;
+      nodes.push({ name, path, type, extension });
+    }
+
+    return sortNodes(nodes);
+  }, [showGitignored, showHidden]);
+
+  const loadDirectory = React.useCallback(async (dirPath: string) => {
+    const normalizedDir = normalizePath(dirPath.trim());
+    if (!normalizedDir) {
+      return;
+    }
+
+    if (loadedDirsRef.current.has(normalizedDir) || inFlightDirsRef.current.has(normalizedDir)) {
+      return;
+    }
+
+    inFlightDirsRef.current = new Set(inFlightDirsRef.current);
+    inFlightDirsRef.current.add(normalizedDir);
+    const requestId = nextDirectoryLoadIdRef.current + 1;
+    nextDirectoryLoadIdRef.current = requestId;
+    activeDirectoryLoadIdsRef.current = new Map(activeDirectoryLoadIdsRef.current);
+    activeDirectoryLoadIdsRef.current.set(normalizedDir, requestId);
+
+    const isCurrentRequest = () => activeDirectoryLoadIdsRef.current.get(normalizedDir) === requestId;
+
+    const listPromise = files.listDirectory
+      ? files.listDirectory(normalizedDir).then((result) => result.entries.map((entry) => ({
+        name: entry.name,
+        path: entry.path,
+        isDirectory: entry.isDirectory,
+      })))
+      : opencodeClient.listLocalDirectory(normalizedDir).then((result) => result.map((entry) => ({
+        name: entry.name,
+        path: entry.path,
+        isDirectory: entry.isDirectory,
+      })));
+
+    await listPromise
+      .then((entries) => {
+        if (!isCurrentRequest()) {
+          return;
+        }
+
+        const mapped = mapDirectoryEntries(normalizedDir, entries);
+
+        loadedDirsRef.current = new Set(loadedDirsRef.current);
+        loadedDirsRef.current.add(normalizedDir);
+        setLoadErrorsByDir((prev) => {
+          if (!prev[normalizedDir]) return prev;
+          const next = { ...prev };
+          delete next[normalizedDir];
+          return next;
+        });
+        setChildrenByDir((prev) => ({ ...prev, [normalizedDir]: mapped }));
+      })
+      .catch((error) => {
+        if (!isCurrentRequest()) {
+          return;
+        }
+
+        const message = error instanceof Error ? error.message : String(error ?? '');
+        console.error('Failed to load files directory:', error);
+        setLoadErrorsByDir((prev) => ({
+          ...prev,
+          [normalizedDir]: message,
+        }));
+      })
+      .finally(() => {
+        if (!isCurrentRequest()) {
+          return;
+        }
+
+        activeDirectoryLoadIdsRef.current = new Map(activeDirectoryLoadIdsRef.current);
+        activeDirectoryLoadIdsRef.current.delete(normalizedDir);
+        inFlightDirsRef.current = new Set(inFlightDirsRef.current);
+        inFlightDirsRef.current.delete(normalizedDir);
+      });
+  }, [files, mapDirectoryEntries]);
+
+  const refreshRoot = React.useCallback(async () => {
+    if (!root) {
+      return;
+    }
+
+    loadedDirsRef.current = new Set();
+    inFlightDirsRef.current = new Set();
+    activeDirectoryLoadIdsRef.current = new Map();
+    setLoadErrorsByDir({});
+    setChildrenByDir((prev) => (Object.keys(prev).length === 0 ? prev : {}));
+
+    await loadDirectory(root);
+  }, [loadDirectory, root]);
+
+  /**
+   * Incrementally refresh a single directory without nuking the rest of the
+   * tree.  After the operation the parent directory is reloaded in-place so
+   * the new/renamed/deleted entry becomes visible immediately while every
+   * other expanded directory keeps its cached children.
+   */
+  const refreshDirectory = React.useCallback(async (dirPath: string) => {
+    if (!dirPath) {
+      await refreshRoot();
+      return;
+    }
+    const normalized = normalizePath(dirPath);
+    // Remove from loaded set so loadDirectory will actually fetch again.
+    loadedDirsRef.current = new Set(loadedDirsRef.current);
+    loadedDirsRef.current.delete(normalized);
+    // Also cancel any in-flight request for this dir so the new fetch wins.
+    inFlightDirsRef.current = new Set(inFlightDirsRef.current);
+    inFlightDirsRef.current.delete(normalized);
+    await loadDirectory(normalized);
+  }, [loadDirectory, refreshRoot]);
+
+  const lastFilesViewDirRef = React.useRef<string>('');
+  const lastFilesViewTreeKeyRef = React.useRef<string>('');
+
+  React.useEffect(() => {
+    if (!root) {
+      return;
+    }
+
+    const treeKey = `${root}|h${showHidden ? '1' : '0'}|g${showGitignored ? '1' : '0'}`;
+    const dirChanged = lastFilesViewDirRef.current !== root;
+    const treeKeyChanged = lastFilesViewTreeKeyRef.current !== treeKey;
+
+    if (!dirChanged && !treeKeyChanged) {
+      return;
+    }
+
+    if (dirChanged) {
+      lastFilesViewDirRef.current = root;
+      setFileContent('');
+      setFileError(null);
+      setDesktopImageSrc('');
+      setLoadedFilePath(null);
+      setShowMobilePageContent(false);
+    }
+
+    if (treeKeyChanged) {
+      lastFilesViewTreeKeyRef.current = treeKey;
+      loadedDirsRef.current = new Set();
+      inFlightDirsRef.current = new Set();
+      activeDirectoryLoadIdsRef.current = new Map();
+      setLoadErrorsByDir({});
+      setChildrenByDir((prev) => (Object.keys(prev).length === 0 ? prev : {}));
+      void loadDirectory(root);
+    }
+  }, [loadDirectory, root, showGitignored, showHidden]);
+
+  // Auto-refresh expanded directories when user returns to the tab
+  React.useEffect(() => {
+    if (!files.listDirectory) return;
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden && expandedPaths.length > 0) {
+        for (const dir of expandedPaths) {
+          void refreshDirectory(dir);
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [expandedPaths, files.listDirectory, refreshDirectory]);
+
+  // Poll expanded directories for external changes
+  React.useEffect(() => {
+    if (!files.listDirectory) return;
+    if (expandedPaths.length === 0) return;
+
+    const interval = setInterval(() => {
+      if (document.hidden) return;
+      for (const dir of expandedPaths) {
+        void refreshDirectory(dir);
+      }
+    }, 8000);
+
+    return () => clearInterval(interval);
+  }, [expandedPaths, files.listDirectory, refreshDirectory]);
+
+  const handleDialogSubmit = React.useCallback(async (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if (!dialogData || !activeDialog) return;
+
+    setIsDialogSubmitting(true);
+    const finishDialogOperation = () => {
+      setActiveDialog(null);
+    };
+
+    const failDialogOperation = (message: string) => {
+      toast.error(message);
+    };
+
+    const done = () => {
+      setIsDialogSubmitting(false);
+    };
+
+    if (activeDialog === 'createFile') {
+      if (!dialogInputValue.trim()) {
+        failDialogOperation(t('sidebarFilesTree.toast.filenameRequired'));
+        done();
+        return;
+      }
+      if (!files.writeFile) {
+        failDialogOperation(t('sidebarFilesTree.toast.writeNotSupported'));
+        done();
+        return;
+      }
+
+      const parentPath = dialogData.path;
+      const prefix = parentPath ? `${parentPath}/` : '';
+      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
+      await files.writeFile(newPath, '')
+        .then(async (result) => {
+          if (result.success) {
+            toast.success(t('sidebarFilesTree.toast.fileCreated'));
+            await refreshDirectory(parentPath);
+          }
+          finishDialogOperation();
+        })
+        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
+        .finally(done);
+      return;
+    }
+
+    if (activeDialog === 'createFolder') {
+      if (!dialogInputValue.trim()) {
+        failDialogOperation(t('sidebarFilesTree.toast.folderNameRequired'));
+        done();
+        return;
+      }
+
+      const parentPath = dialogData.path;
+      const prefix = parentPath ? `${parentPath}/` : '';
+      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
+      await files.createDirectory(newPath)
+        .then(async (result) => {
+          if (result.success) {
+            toast.success(t('sidebarFilesTree.toast.folderCreated'));
+            await refreshDirectory(parentPath);
+          }
+          finishDialogOperation();
+        })
+        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
+        .finally(done);
+      return;
+    }
+
+    if (activeDialog === 'rename') {
+      if (!dialogInputValue.trim()) {
+        failDialogOperation(t('sidebarFilesTree.toast.nameRequired'));
+        done();
+        return;
+      }
+
+      if (!files.rename) {
+        failDialogOperation(t('sidebarFilesTree.toast.renameNotSupported'));
+        done();
+        return;
+      }
+
+      const oldPath = dialogData.path;
+      const parentDir = oldPath.split('/').slice(0, -1).join('/');
+      const prefix = parentDir ? `${parentDir}/` : '';
+      const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`);
+
+      await files.rename(oldPath, newPath)
+        .then(async (result) => {
+          if (result.success) {
+            toast.success(t('sidebarFilesTree.toast.renamedSuccessfully'));
+            await refreshDirectory(parentDir);
+            if (root) {
+              removeOpenPathsByPrefix(root, oldPath);
+            }
+            if (selectedFile?.path === oldPath || selectedFile?.path.startsWith(`${oldPath}/`)) {
+              if (root) {
+                setSelectedPath(root, null);
+              }
+              setFileContent('');
+              setFileError(null);
+              setDesktopImageSrc('');
+              setLoadedFilePath(null);
+              if (isMobile) {
+                setShowMobilePageContent(false);
+              }
+            }
+          }
+          finishDialogOperation();
+        })
+        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
+        .finally(done);
+      return;
+    }
+
+    if (activeDialog === 'delete') {
+      if (!files.delete) {
+        failDialogOperation(t('sidebarFilesTree.toast.deleteNotSupported'));
+        done();
+        return;
+      }
+
+      const deletedPath = dialogData.path;
+      const parentDir = deletedPath.split('/').slice(0, -1).join('/');
+      await files.delete(deletedPath)
+        .then(async (result) => {
+          if (result.success) {
+            toast.success(t('sidebarFilesTree.toast.deletedSuccessfully'));
+            await refreshDirectory(parentDir);
+            if (root) {
+              removeOpenPathsByPrefix(root, deletedPath);
+            }
+            if (selectedFile?.path === deletedPath || selectedFile?.path.startsWith(`${deletedPath}/`)) {
+              if (root) {
+                setSelectedPath(root, null);
+              }
+              setFileContent('');
+              setFileError(null);
+              setDesktopImageSrc('');
+              setLoadedFilePath(null);
+              if (isMobile) {
+                setShowMobilePageContent(false);
+              }
+            }
+          }
+          finishDialogOperation();
+        })
+        .catch(() => failDialogOperation(t('sidebarFilesTree.toast.operationFailed')))
+        .finally(done);
+      return;
+    }
+
+    done();
+  }, [activeDialog, dialogData, dialogInputValue, files, refreshDirectory, isMobile, removeOpenPathsByPrefix, root, selectedFile?.path, setSelectedPath, t]);
+
+  React.useEffect(() => {
+    if (!currentDirectory) {
+      setSearchResults([]);
+      setSearching(false);
+      return;
+    }
+
+    const trimmedQuery = debouncedSearchQuery.trim();
+    if (!trimmedQuery) {
+      setSearchResults([]);
+      setSearching(false);
+      return;
+    }
+
+    let cancelled = false;
+    setSearching(true);
+
+    searchFiles(currentDirectory, trimmedQuery, 150, {
+      includeHidden: showHidden,
+      respectGitignore: !showGitignored,
+      type: 'file',
+    })
+      .then((hits) => {
+        if (cancelled) {
+          return;
+        }
+
+        const filtered = hits.filter((hit) => showGitignored || !shouldIgnorePath(hit.path));
+
+        const mapped: FileNode[] = filtered.map((hit) => ({
+          name: hit.name,
+          path: normalizePath(hit.path),
+          type: 'file',
+          extension: hit.extension,
+          relativePath: hit.relativePath,
+        }));
+
+        setSearchResults(mapped);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSearchResults([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setSearching(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentDirectory, debouncedSearchQuery, searchFiles, showHidden, showGitignored]);
+
+  const readFile = React.useCallback(async (path: string, options?: { allowOutsideWorkspace?: boolean; optional?: boolean }): Promise<string> => {
+    if (files.readFile) {
+      const result = await files.readFile(path, options);
+      return result.content ?? '';
+    }
+
+    const params = new URLSearchParams({ path });
+    if (options?.allowOutsideWorkspace) {
+      params.set('allowOutsideWorkspace', 'true');
+    }
+    if (options?.optional) {
+      params.set('optional', 'true');
+    }
+    const response = await runtimeFetch(`/api/fs/read?${params.toString()}`, {
+      // Avoid conditional requests (304 + empty body).
+      cache: options?.optional ? 'no-store' : 'default',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error((error as { error?: string }).error || t('filesView.error.readFileFailed'));
+    }
+    return response.text();
+  }, [files, t]);
+
+  const readFileStat = React.useCallback(async (path: string, options?: { allowOutsideWorkspace?: boolean }): Promise<FileStatSnapshot | null> => {
+    if (files.statFile) {
+      const result = await files.statFile(path, options);
+      return {
+        path: result.path,
+        size: result.size,
+        mtimeMs: result.mtimeMs,
+      };
+    }
+    return null;
+  }, [files]);
+
+  React.useEffect(() => {
+    if (!root || !files.statFile || openPaths.length === 0) {
+      return;
+    }
+
+    let cancelled = false;
+    const paths = [...openPaths];
+
+    void Promise.all(paths.map(async (path) => {
+      try {
+        const stat = await files.statFile?.(path);
+        if (!cancelled && stat && !stat.isFile) {
+          removeOpenPathsByPrefix(root, path);
+        }
+      } catch (error) {
+        if (!cancelled && isFileMissingError(error)) {
+          removeOpenPathsByPrefix(root, path);
+        }
+      }
+    }));
+
+    return () => {
+      cancelled = true;
+    };
+  }, [files, openPaths, removeOpenPathsByPrefix, root]);
+
+  const displayedContent = React.useMemo(() =>
+    fileContent.length > MAX_VIEW_CHARS
+      ? `${fileContent.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …`
+      : fileContent,
+    [fileContent]
+  );
+
+  const isDirty = draftContent !== displayedContent;
+
+  const saveDraft = React.useCallback(async () => {
+    if (!selectedFile || !files.writeFile) {
+      toast.error(t('filesView.toast.savingNotSupported'));
+      return false;
+    }
+
+    if (!isDirty) {
+      return true;
+    }
+
+    if (draftContent === '' && fileContent !== '' && loadedFilePath !== selectedFile.path) {
+      console.warn(
+        `[saveDraft] refusing to save empty draft for "${selectedFile.path}" (${fileContent.length} bytes were expected). ` +
+        'The file may have been read during a concurrent write (O_TRUNC race). ' +
+        'Try again after content finishes loading if the save was intentional.',
+      );
       return false;
     }
-
-    if (!isDirty) {
-      return true;
-    }
-
-    setIsSaving(true);
-
-    try {
-      const contentToWrite = serializeEditorContent(draftContent, loadedFileLineEnding);
-      const result = await files.writeFile(selectedFile.path, contentToWrite);
-      if (!result?.success) {
-        toast.error(t('filesView.toast.writeFileFailed'));
-        return false;
+
+    setIsSaving(true);
+
+    try {
+      const contentToWrite = serializeEditorContent(draftContent, loadedFileLineEnding);
+      const result = await files.writeFile(selectedFile.path, contentToWrite);
+      if (!result?.success) {
+        toast.error(t('filesView.toast.writeFileFailed'));
+        return false;
       }
       setFileContent(draftContent);
+      if (selectedFile?.path && isDrawioFile(selectedFile.path)) {
+        diagramXmlRef.current = draftContent;
+        diagramSavedXmlRef.current = draftContent;
+      }
       // Refresh stat after write so polling doesn't see a stale metadata change.
-      void readFileStat(selectedFile.path)
-        .then((stat) => {
-          if (stat) {
-            lastLoadedFileStatRef.current = stat;
-          }
-        })
-        .catch(() => {});
-      return true;
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t('filesView.toast.saveFailed'));
-      return false;
-    } finally {
-      setIsSaving(false);
-    }
-  }, [draftContent, files, isDirty, loadedFileLineEnding, readFileStat, selectedFile, t]);
-
-  React.useEffect(() => {
-    if (!isDirty) {
-      setMainTabGuard(null);
-      return;
-    }
-
-    const guard = (_nextTab: import('@/stores/useUIStore').MainTab) => {
-      if (skipDirtyOnceRef.current) {
-        skipDirtyOnceRef.current = false;
-        return true;
-      }
-      setConfirmDiscardOpen(true);
-      pendingTabRef.current = _nextTab;
-      return false;
-    };
-
-    setMainTabGuard(guard);
-
-    return () => {
-      const currentGuard = useUIStore.getState().mainTabGuard;
-      if (currentGuard === guard) {
-        setMainTabGuard(null);
-      }
-    };
-  }, [isDirty, setMainTabGuard]);
-
-  React.useEffect(() => {
-    try {
-      window.localStorage.setItem(FILE_EDITOR_AUTO_SAVE_KEY, autoSaveEnabled ? 'true' : 'false');
-    } catch {
-      // Ignore localStorage errors; the in-memory preference still applies.
-    }
-  }, [autoSaveEnabled]);
-
-  React.useEffect(() => {
-    if (autoSaveEnabled) {
-      return;
-    }
-
-    setAutoSaveStatus('idle');
-    if (autoSaveTimerRef.current) {
-      clearTimeout(autoSaveTimerRef.current);
-      autoSaveTimerRef.current = null;
-    }
-  }, [autoSaveEnabled]);
-
-  // Auto-save: debounce 1.5s after user stops typing
-  const AUTO_SAVE_DELAY = 1500;
-
-  React.useEffect(() => {
-    const canWrite = Boolean(selectedFile && files.writeFile);
-    if (!autoSaveEnabled || !isDirty || !canWrite || isSaving) {
-      return;
-    }
-
-    autoSaveTimerRef.current = setTimeout(() => {
-      void saveDraft().then((saved) => {
-        if (!saved) return;
-        setAutoSaveStatus('saved');
-        setTimeout(() => setAutoSaveStatus('idle'), 2000);
-      });
-    }, AUTO_SAVE_DELAY);
-
-    return () => {
-      if (autoSaveTimerRef.current) {
-        clearTimeout(autoSaveTimerRef.current);
-        autoSaveTimerRef.current = null;
-      }
-    };
-  }, [autoSaveEnabled, draftContent, isDirty, selectedFile, files.writeFile, isSaving, saveDraft]);
-
-  // Reset auto-save status when switching files
-  React.useEffect(() => {
-    setAutoSaveStatus('idle');
-  }, [selectedFile?.path]);
-
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!hasModifier(e)) {
-        return;
-      }
-
-      if (e.key.toLowerCase() === 's') {
-        e.preventDefault();
-        // Cancel pending auto-save; user wants immediate save
-        if (autoSaveTimerRef.current) {
-          clearTimeout(autoSaveTimerRef.current);
-          autoSaveTimerRef.current = null;
-        }
-        if (!isSaving) {
-          void saveDraft().then((saved) => {
-            if (!saved) return;
-            setAutoSaveStatus('saved');
-            setTimeout(() => setAutoSaveStatus('idle'), 2000);
-          });
-        }
-      } else if (e.key.toLowerCase() === 'f') {
-        e.preventDefault();
-        setIsSearchOpen(true);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isSaving, saveDraft]);
-
-  const loadSelectedFile = React.useCallback(async (node: FileNode) => {
-    const loadId = activeFileLoadIdRef.current + 1;
-    activeFileLoadIdRef.current = loadId;
-    const isCurrentLoad = () => {
-      if (!root) return false;
-      const rootState = useFilesViewTabsStore.getState().byRoot[root];
-      const currentPath = rootState?.selectedPath ?? rootState?.openPaths[0] ?? null;
-      return activeFileLoadIdRef.current === loadId && currentPath === node.path;
-    };
-
-    setFileError(null);
-    setDesktopImageSrc('');
-    setLoadedFilePath(null);
-
-    const selectedIsImage = isImageFile(node.path);
-    const isSvg = node.path.toLowerCase().endsWith('.svg');
-
-    if (isMobile) {
-      setShowMobilePageContent(true);
-    }
-
-    // Desktop: binary images are loaded via readFileBinary (data URL).
-    if (runtime.isDesktop && selectedIsImage && !isSvg) {
-      setFileContent('');
-      setDraftContent('');
-      setFileLoading(true);
-      return;
-    }
-
-    // Web: binary images should not be read as utf8.
-    if (!runtime.isDesktop && selectedIsImage && !isSvg) {
-      setFileContent('');
-      setDraftContent('');
-      setLoadedFilePath(node.path);
-      setFileLoading(false);
-      return;
-    }
-
-    setFileLoading(true);
-
-    const readOptions = { allowOutsideWorkspace: mode === 'editor-only' && Boolean(root) && !isPathWithinRoot(node.path, root) };
-
-    await readFile(node.path, readOptions)
-      .then((content) => {
-        if (!isCurrentLoad()) {
-          return;
-        }
+      void readFileStat(selectedFile.path)
+        .then((stat) => {
+          if (stat) {
+            lastLoadedFileStatRef.current = stat;
+          }
+        })
+        .catch(() => {});
+      return true;
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : t('filesView.toast.saveFailed'));
+      return false;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [draftContent, fileContent, files, isDirty, loadedFileLineEnding, loadedFilePath, readFileStat, selectedFile, t]);
+
+  React.useEffect(() => {
+    if (!isDirty) {
+      setMainTabGuard(null);
+      return;
+    }
+
+    const guard = (_nextTab: import('@/stores/useUIStore').MainTab) => {
+      if (skipDirtyOnceRef.current) {
+        skipDirtyOnceRef.current = false;
+        return true;
+      }
+      setConfirmDiscardOpen(true);
+      pendingTabRef.current = _nextTab;
+      return false;
+    };
+
+    setMainTabGuard(guard);
+
+    return () => {
+      const currentGuard = useUIStore.getState().mainTabGuard;
+      if (currentGuard === guard) {
+        setMainTabGuard(null);
+      }
+    };
+  }, [isDirty, setMainTabGuard]);
+
+  React.useEffect(() => {
+    try {
+      window.localStorage.setItem(FILE_EDITOR_AUTO_SAVE_KEY, autoSaveEnabled ? 'true' : 'false');
+    } catch {
+      // Ignore localStorage errors; the in-memory preference still applies.
+    }
+  }, [autoSaveEnabled]);
+
+  React.useEffect(() => {
+    if (autoSaveEnabled) {
+      return;
+    }
+
+    setAutoSaveStatus('idle');
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+      autoSaveTimerRef.current = null;
+    }
+  }, [autoSaveEnabled]);
+
+  // Auto-save: debounce 1.5s after user stops typing
+  const AUTO_SAVE_DELAY = 1500;
+
+  React.useEffect(() => {
+    const canWrite = Boolean(selectedFile && files.writeFile);
+    if (!autoSaveEnabled || !isDirty || !canWrite || isSaving) {
+      return;
+    }
+
+    autoSaveTimerRef.current = setTimeout(() => {
+      void saveDraft().then((saved) => {
+        if (!saved) return;
+        setAutoSaveStatus('saved');
+        setTimeout(() => setAutoSaveStatus('idle'), 2000);
+      });
+    }, AUTO_SAVE_DELAY);
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = null;
+      }
+    };
+  }, [autoSaveEnabled, draftContent, isDirty, selectedFile, files.writeFile, isSaving, saveDraft]);
+
+  // Reset auto-save status when switching files
+  React.useEffect(() => {
+    setAutoSaveStatus('idle');
+  }, [selectedFile?.path]);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!hasModifier(e)) {
+        return;
+      }
+
+      if (e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        // Cancel pending auto-save; user wants immediate save
+        if (autoSaveTimerRef.current) {
+          clearTimeout(autoSaveTimerRef.current);
+          autoSaveTimerRef.current = null;
+        }
+        if (!isSaving) {
+          void saveDraft().then((saved) => {
+            if (!saved) return;
+            setAutoSaveStatus('saved');
+            setTimeout(() => setAutoSaveStatus('idle'), 2000);
+          });
+        }
+      } else if (e.key.toLowerCase() === 'f') {
+        e.preventDefault();
+        setIsSearchOpen(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isSaving, saveDraft]);
+
+  const loadSelectedFile = React.useCallback(async (node: FileNode) => {
+    const loadId = activeFileLoadIdRef.current + 1;
+    activeFileLoadIdRef.current = loadId;
+    const isCurrentLoad = () => {
+      if (!root) return false;
+      const rootState = useFilesViewTabsStore.getState().byRoot[root];
+      const currentPath = rootState?.selectedPath ?? rootState?.openPaths[0] ?? null;
+      return activeFileLoadIdRef.current === loadId && currentPath === node.path;
+    };
+
+    setFileError(null);
+    setDesktopImageSrc('');
+    setLoadedFilePath(null);
+
+    const selectedIsImage = isImageFile(node.path);
+    const isSvg = node.path.toLowerCase().endsWith('.svg');
+
+    if (isMobile) {
+      setShowMobilePageContent(true);
+    }
+
+    // Desktop: binary images are loaded via readFileBinary (data URL).
+    if (runtime.isDesktop && selectedIsImage && !isSvg) {
+      setFileContent('');
+      setDraftContent('');
+      setFileLoading(true);
+      return;
+    }
+
+    // Web: binary images should not be read as utf8.
+    if (!runtime.isDesktop && selectedIsImage && !isSvg) {
+      setFileContent('');
+      setDraftContent('');
+      setLoadedFilePath(node.path);
+      setFileLoading(false);
+      return;
+    }
+
+    setFileLoading(true);
+
+    const readOptions = { allowOutsideWorkspace: mode === 'editor-only' && Boolean(root) && !isPathWithinRoot(node.path, root) };
+
+    await readFile(node.path, readOptions)
+      .then((content) => {
+        if (!isCurrentLoad()) {
+          return;
+        }
         const editorContent = normalizeEditorLineEndings(content);
         setLoadedFileLineEnding(detectFileLineEnding(content));
         setFileContent(editorContent);
+        diagramXmlRef.current = editorContent;
+        diagramSavedXmlRef.current = editorContent;
         setDraftContent(editorContent.length > MAX_VIEW_CHARS
-          ? `${editorContent.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …`
-          : editorContent);
-        setLoadedFilePath(node.path);
-        void readFileStat(node.path, readOptions)
-          .then((stat) => {
-            if (stat && isCurrentLoad()) {
-              lastLoadedFileStatRef.current = stat;
-            }
-          })
-          .catch(() => {});
-      })
-      .catch((error) => {
-        if (!isCurrentLoad()) {
-          return;
-        }
-        if (isDirectoryReadError(error)) {
-          setFileLoading(false);
-          if (root) {
-            setSelectedPath(root, null);
-          }
-          setFileError(null);
-          setFileContent('');
-          setDraftContent('');
-          setLoadedFilePath(null);
-          lastLoadedFileStatRef.current = null;
-          if (searchQuery.trim().length > 0) {
-            setSearchQuery('');
-          }
-          if (isMobile) {
-            setShowMobilePageContent(false);
-          }
-          if (root) {
-            const ancestors = getAncestorPaths(node.path, root);
-            const pathsToExpand = [...ancestors, node.path];
-            if (pathsToExpand.length > 0) {
-              expandPaths(root, pathsToExpand);
-            }
-            for (const path of pathsToExpand) {
-              if (!loadedDirsRef.current.has(path)) {
-                void loadDirectory(path);
-              }
-            }
-          }
-          return;
-        }
-        if (isFileMissingError(error)) {
-          if (root) {
-            removeOpenPathsByPrefix(root, node.path);
-          }
-          setFileContent('');
-          setDraftContent('');
-          setFileError(null);
-          lastLoadedFileStatRef.current = null;
-          if (isMobile) {
-            setShowMobilePageContent(false);
-          }
-          return;
-        }
-        setFileContent('');
-        setDraftContent('');
-        setFileError(error instanceof Error ? error.message : t('filesView.error.readFileFailed'));
-        lastLoadedFileStatRef.current = null;
-      })
-      .finally(() => {
-        if (isCurrentLoad()) {
-          setFileLoading(false);
-        }
-      });
-  }, [expandPaths, isMobile, loadDirectory, mode, readFile, readFileStat, removeOpenPathsByPrefix, root, runtime.isDesktop, searchQuery, setSelectedPath, t]);
-
-  const ensurePathVisible = React.useCallback(async (targetPath: string, includeTarget: boolean) => {
-    if (!root) {
-      return;
-    }
-
-    const ancestors = getAncestorPaths(targetPath, root);
-    const pathsToExpand = includeTarget ? [...ancestors, targetPath] : ancestors;
-
-    if (pathsToExpand.length > 0) {
-      expandPaths(root, pathsToExpand);
-    }
-
-    const loadPromises = pathsToExpand.map((path) => {
-      if (!loadedDirsRef.current.has(path)) {
-        return loadDirectory(path);
-      }
-      return undefined;
-    }).filter(Boolean);
-    await Promise.all(loadPromises);
-  }, [expandPaths, loadDirectory, root]);
-
-  const getNextOpenFile = React.useCallback((path: string, filesList: FileNode[]) => {
-    const index = filesList.findIndex((file) => file.path === path);
-    if (index === -1 || filesList.length <= 1) {
-      return null;
-    }
-    return filesList[index + 1] ?? filesList[index - 1] ?? null;
-  }, []);
-
-  const handleSelectFile = React.useCallback(async (node: FileNode) => {
-    if (skipDirtyOnceRef.current) {
-      skipDirtyOnceRef.current = false;
-    } else if (isDirty) {
-      setConfirmDiscardOpen(true);
-      pendingSelectFileRef.current = node;
-      return;
-    }
-
-    if (root) {
-      setSelectedPath(root, node.path);
-      addOpenPath(root, node.path);
-      void ensurePathVisible(node.path, false);
-    }
-
+          ? `${editorContent.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …`
+          : editorContent);
+        setLoadedFilePath(node.path);
+        void readFileStat(node.path, readOptions)
+          .then((stat) => {
+            if (stat && isCurrentLoad()) {
+              lastLoadedFileStatRef.current = stat;
+            }
+          })
+          .catch(() => {});
+      })
+      .catch((error) => {
+        if (!isCurrentLoad()) {
+          return;
+        }
+        if (isDirectoryReadError(error)) {
+          setFileLoading(false);
+          if (root) {
+            setSelectedPath(root, null);
+          }
+          setFileError(null);
+          setFileContent('');
+          setDraftContent('');
+          setLoadedFilePath(null);
+          lastLoadedFileStatRef.current = null;
+          if (searchQuery.trim().length > 0) {
+            setSearchQuery('');
+          }
+          if (isMobile) {
+            setShowMobilePageContent(false);
+          }
+          if (root) {
+            const ancestors = getAncestorPaths(node.path, root);
+            const pathsToExpand = [...ancestors, node.path];
+            if (pathsToExpand.length > 0) {
+              expandPaths(root, pathsToExpand);
+            }
+            for (const path of pathsToExpand) {
+              if (!loadedDirsRef.current.has(path)) {
+                void loadDirectory(path);
+              }
+            }
+          }
+          return;
+        }
+        if (isFileMissingError(error)) {
+          if (root) {
+            removeOpenPathsByPrefix(root, node.path);
+          }
+          setFileContent('');
+          setDraftContent('');
+          setFileError(null);
+          lastLoadedFileStatRef.current = null;
+          if (isMobile) {
+            setShowMobilePageContent(false);
+          }
+          return;
+        }
+        setFileContent('');
+        setDraftContent('');
+        setFileError(error instanceof Error ? error.message : t('filesView.error.readFileFailed'));
+        lastLoadedFileStatRef.current = null;
+      })
+      .finally(() => {
+        if (isCurrentLoad()) {
+          setFileLoading(false);
+        }
+      });
+  }, [expandPaths, isMobile, loadDirectory, mode, readFile, readFileStat, removeOpenPathsByPrefix, root, runtime.isDesktop, searchQuery, setSelectedPath, t]);
+
+  const ensurePathVisible = React.useCallback(async (targetPath: string, includeTarget: boolean) => {
+    if (!root) {
+      return;
+    }
+
+    const ancestors = getAncestorPaths(targetPath, root);
+    const pathsToExpand = includeTarget ? [...ancestors, targetPath] : ancestors;
+
+    if (pathsToExpand.length > 0) {
+      expandPaths(root, pathsToExpand);
+    }
+
+    const loadPromises = pathsToExpand.map((path) => {
+      if (!loadedDirsRef.current.has(path)) {
+        return loadDirectory(path);
+      }
+      return undefined;
+    }).filter(Boolean);
+    await Promise.all(loadPromises);
+  }, [expandPaths, loadDirectory, root]);
+
+  const getNextOpenFile = React.useCallback((path: string, filesList: FileNode[]) => {
+    const index = filesList.findIndex((file) => file.path === path);
+    if (index === -1 || filesList.length <= 1) {
+      return null;
+    }
+    return filesList[index + 1] ?? filesList[index - 1] ?? null;
+  }, []);
+
+  const handleSelectFile = React.useCallback(async (node: FileNode) => {
+    if (skipDirtyOnceRef.current) {
+      skipDirtyOnceRef.current = false;
+    } else if (isDirty) {
+      setConfirmDiscardOpen(true);
+      pendingSelectFileRef.current = node;
+      return;
+    }
+
+    if (root) {
+      setSelectedPath(root, node.path);
+      addOpenPath(root, node.path);
+      void ensurePathVisible(node.path, false);
+    }
+
     setFileError(null);
     setDesktopImageSrc('');
     setFileContent('');
+    diagramXmlRef.current = '';
+    diagramSavedXmlRef.current = '';
     setDraftContent('');
-    setLoadedFilePath(null);
-    if (isMobile) {
-      setShowMobilePageContent(true);
-    }
-  }, [addOpenPath, ensurePathVisible, isDirty, isMobile, root, setSelectedPath]);
-
-  React.useEffect(() => {
-    if (!selectedFile?.path) {
-      return;
-    }
-
-    void ensurePathVisible(selectedFile.path, false);
-  }, [ensurePathVisible, selectedFile?.path]);
-
-  React.useEffect(() => {
-    if (!selectedFile) {
-      activeFileLoadIdRef.current += 1;
-      setFileLoading(false);
-      return;
-    }
-
-    if (loadedFilePath === selectedFile.path) {
-      return;
-    }
-
-    // Selection changes are guarded; this effect is also what restores persisted tabs on mount.
-    void loadSelectedFile(selectedFile);
-  }, [loadSelectedFile, loadedFilePath, selectedFile]);
-
-  // Sync isDirty to a ref so the polling interval can read the latest value
-  // without isDirty in its dependency array (avoids interval restart on every edit/save).
-  const isDirtyRef = React.useRef(isDirty);
-  isDirtyRef.current = isDirty;
-
-  // Poll open file for external changes.
-  // When a change is detected, reset loadedFilePath so the effect above
-  // triggers a single reload — no double-load.
-  React.useEffect(() => {
-    if (!selectedFile?.path || loadedFilePath !== selectedFile.path) {
-      return;
-    }
-
-    let cancelled = false;
-    const interval = window.setInterval(() => {
-      if (document.hidden) {
-        return;
-      }
-
-      void readFileStat(selectedFile.path, selectedFileReadOptions)
-        .then((latestStat) => {
-          if (cancelled || !latestStat) {
-            return;
-          }
-
-          const previousStat = lastLoadedFileStatRef.current;
-          if (!previousStat || previousStat.path !== selectedFile.path) {
-            lastLoadedFileStatRef.current = latestStat;
-            return;
-          }
-
-          const changedByMtime = latestStat.mtimeMs !== undefined
-            && previousStat.mtimeMs !== undefined
-            && latestStat.mtimeMs !== previousStat.mtimeMs;
-          const changedBySize = latestStat.size !== previousStat.size;
-
-          if (!changedByMtime && !changedBySize) {
-            return;
-          }
-
-          if (isDirtyRef.current) {
-            return;
-          }
-
-          lastLoadedFileStatRef.current = latestStat;
-          // Reset loadedFilePath so the effect above triggers a single reload.
-          setLoadedFilePath(null);
-        })
-        .catch(() => {});
-    }, 2000);
-
-    return () => {
-      cancelled = true;
-      window.clearInterval(interval);
-    };
-  }, [loadedFilePath, readFileStat, selectedFile?.path, selectedFileReadOptions]);
-
-  const discardAndContinue = React.useCallback(() => {
-    const nextFile = pendingSelectFileRef.current;
-    const nextTab = pendingTabRef.current;
-    const closePath = pendingClosePathRef.current;
-
-    pendingSelectFileRef.current = null;
-    pendingTabRef.current = null;
-    pendingClosePathRef.current = null;
-
-    // Allow one guarded navigation (tab/file) without re-opening dialog.
-    skipDirtyOnceRef.current = true;
-
-    setConfirmDiscardOpen(false);
-
-    // Discard draft by reverting back to last loaded content
-    setDraftContent(displayedContent);
-
-    if (closePath) {
-      if (root) {
-        removeOpenPath(root, closePath);
-      }
-      if (selectedFile?.path === closePath) {
-        if (nextFile) {
-          void handleSelectFile(nextFile);
-        } else {
-          if (root) {
-            setSelectedPath(root, null);
-          }
-          setFileContent('');
-          setFileError(null);
-          setDesktopImageSrc('');
-          setLoadedFilePath(null);
-          if (isMobile) {
-            setShowMobilePageContent(false);
-          }
-        }
-      }
-      return;
-    }
-
-    if (nextFile) {
-      void handleSelectFile(nextFile);
-      return;
-    }
-
-    if (nextTab) {
-      setMainTabGuard(null);
-      useUIStore.getState().setActiveMainTab(nextTab);
-    }
-  }, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setMainTabGuard, setSelectedPath]);
-
-  const saveAndContinue = React.useCallback(async () => {
-    const nextFile = pendingSelectFileRef.current;
-    const nextTab = pendingTabRef.current;
-    const closePath = pendingClosePathRef.current;
-
-    const saved = await saveDraft();
-    if (!saved) {
-      skipDirtyOnceRef.current = false;
-      return;
-    }
-
-    pendingSelectFileRef.current = null;
-    pendingTabRef.current = null;
-    pendingClosePathRef.current = null;
-
-    // We'll proceed after saving; suppress guard reopening.
-    skipDirtyOnceRef.current = true;
-
-    setConfirmDiscardOpen(false);
-
-    if (closePath) {
-      if (root) {
-        removeOpenPath(root, closePath);
-      }
-      if (selectedFile?.path === closePath) {
-        if (nextFile) {
-          await handleSelectFile(nextFile);
-        } else {
-          if (root) {
-            setSelectedPath(root, null);
-          }
-          setFileContent('');
-          setFileError(null);
-          setDesktopImageSrc('');
-          setLoadedFilePath(null);
-          if (isMobile) {
-            setShowMobilePageContent(false);
-          }
-        }
-      }
-      return;
-    }
-
-    if (nextFile) {
-      await handleSelectFile(nextFile);
-      return;
-    }
-
-    if (nextTab) {
-      setMainTabGuard(null);
-      useUIStore.getState().setActiveMainTab(nextTab);
-    }
-  }, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setMainTabGuard, setSelectedPath]);
-
-  const handleCloseFile = React.useCallback((path: string) => {
-    const isActive = selectedFile?.path === path;
-    const nextFile = getNextOpenFile(path, openFiles);
-
-    if (isActive && isDirty) {
-      setConfirmDiscardOpen(true);
-      pendingSelectFileRef.current = nextFile;
-      pendingClosePathRef.current = path;
-      return;
-    }
-
-    if (root) {
-      removeOpenPath(root, path);
-    }
-
-    if (!isActive) {
-      return;
-    }
-
-    if (nextFile) {
-      void handleSelectFile(nextFile);
-      return;
-    }
-
-    if (root) {
-      setSelectedPath(root, null);
-    }
-    setFileContent('');
-    setFileError(null);
-    setDesktopImageSrc('');
-    setLoadedFilePath(null);
-    if (isMobile) {
-      setShowMobilePageContent(false);
-    }
-  }, [getNextOpenFile, handleSelectFile, isDirty, isMobile, openFiles, removeOpenPath, root, selectedFile?.path, setSelectedPath]);
-
-  const getFileStatus = React.useCallback((path: string): FileStatus | null => {
-    // Check open status
-    if (openPaths.includes(path)) return 'open';
-    
-    // Check git status
-    if (gitStatus?.files) {
-      const relative = path.startsWith(root + '/') ? path.slice(root.length + 1) : path;
-      const file = gitStatus.files.find(f => f.path === relative);
-      if (file) {
-        if (file.index === 'A' || file.working_dir === '?') return 'git-added';
-        if (file.index === 'D') return 'git-deleted';
-        if (file.index === 'M' || file.working_dir === 'M') return 'git-modified';
-      }
-    }
-    return null;
-  }, [openPaths, gitStatus, root]);
-
-  const getFolderBadge = React.useCallback((dirPath: string): { modified: number; added: number } | null => {
-    if (!gitStatus?.files) return null;
-    const relativeDir = dirPath.startsWith(root + '/') ? dirPath.slice(root.length + 1) : dirPath;
-    const prefix = relativeDir ? `${relativeDir}/` : '';
-    
-    let modified = 0, added = 0;
-    for (const f of gitStatus.files) {
-      if (f.path.startsWith(prefix)) {
-        if (f.index === 'M' || f.working_dir === 'M') modified++;
-        if (f.index === 'A' || f.working_dir === '?') added++;
-      }
-    }
-    return modified + added > 0 ? { modified, added } : null;
-  }, [gitStatus, root]);
-
-  const toggleDirectory = React.useCallback(async (dirPath: string) => {
-    const normalized = normalizePath(dirPath);
-    if (!root) return;
-
-    toggleExpandedPath(root, normalized);
-
-    if (!loadedDirsRef.current.has(normalized)) {
-      await loadDirectory(normalized);
-    }
-  }, [loadDirectory, root, toggleExpandedPath]);
-
-  const fileRowPermissions = React.useMemo(
-    () => ({ canRename, canCreateFile, canCreateFolder, canDelete, canReveal }),
-    [canRename, canCreateFile, canCreateFolder, canDelete, canReveal]
-  );
-
-  function renderTree(dirPath: string, depth: number): React.ReactNode {
-    const nodes = childrenByDir[dirPath] ?? [];
-
-    return nodes.map((node, index) => {
-      const isDir = node.type === 'directory';
-      const isExpanded = isDir && expandedPaths.includes(node.path);
-      const isActive = selectedFile?.path === node.path;
-      const isLast = index === nodes.length - 1;
-
-      return (
-        <li key={node.path} className="relative">
-          {depth > 0 && (
-            <>
-              <span className="absolute top-3.5 left-[-12px] w-3 h-px bg-border/40" />
-              {isLast && (
-                <span className="absolute top-3.5 bottom-0 left-[-13px] w-[2px] bg-background" />
-              )}
-            </>
-          )}
-          <FileRow
-            node={node}
-            root={root}
-            isExpanded={isExpanded}
-            isActive={isActive}
-            isMobile={isMobile}
-            alwaysShowActions={alwaysShowActions}
-            status={!isDir ? getFileStatus(node.path) : undefined}
-            badge={isDir ? getFolderBadge(node.path) : undefined}
-            permissions={fileRowPermissions}
-            downloadFile={files.downloadFile}
-            contextMenuPath={contextMenuPath}
-            setContextMenuPath={setContextMenuPath}
-            onSelect={handleSelectFile}
-            onToggle={toggleDirectory}
-            onRevealPath={handleRevealPath}
-            onOpenDialog={handleOpenDialog}
-          />
-          {isDir && isExpanded && (
-            <ul className="flex flex-col gap-1 ml-3 pl-3 border-l border-border/40 relative">
-              {loadErrorsByDir[node.path] ? (
-                <li className="flex items-center gap-2 px-2 py-1 typography-meta text-muted-foreground">
-                  <span className="min-w-0 flex-1 truncate text-[var(--status-error)]" title={loadErrorsByDir[node.path]}>{loadErrorsByDir[node.path]}</span>
-                  <Button variant="ghost" size="xs" className="h-6 gap-1" onClick={() => void refreshDirectory(node.path)}>
-                    <Icon name="refresh" className="size-3.5" />
-                    {t('filesView.tree.actions.refreshTitle')}
-                  </Button>
-                </li>
-              ) : null}
-              {renderTree(node.path, depth + 1)}
-            </ul>
-          )}
-        </li>
-      );
-    });
-  }
-
-  const isSelectedImage = Boolean(selectedFile?.path && isImageFile(selectedFile.path));
-  const isSelectedSvg = Boolean(selectedFile?.path && selectedFile.path.toLowerCase().endsWith('.svg'));
-  const pendingNavigationTargetPath = React.useMemo(
-    () => normalizePath(pendingFileNavigation?.path ?? ''),
-    [pendingFileNavigation?.path],
-  );
-  const shouldMaskEditorForPendingNavigation = Boolean(
-    pendingFileNavigation
-      && pendingNavigationTargetPath
-      && selectedFilePath
-      && selectedFilePath === pendingNavigationTargetPath
-      && !fileLoading
-      && !fileError
-      && !isSelectedImage,
-  );
-
-  const displaySelectedPath = React.useMemo(() => {
-    return getDisplayPath(root, selectedFilePath);
-  }, [selectedFilePath, root]);
-
-  const canCopy = Boolean(selectedFile && (!isSelectedImage || isSelectedSvg) && fileContent.length > 0);
-  const canCopyPath = Boolean(selectedFile && displaySelectedPath.length > 0);
-  const canEdit = Boolean(selectedFile && !selectedFileIsOutsideWorkspace && !isSelectedImage && files.writeFile && fileContent.length <= MAX_VIEW_CHARS);
-  const isMarkdown = Boolean(selectedFile?.path && isMarkdownFile(selectedFile.path));
-  const isJson = Boolean(selectedFile?.path && isJsonFile(selectedFile.path));
-  const isHtml = Boolean(selectedFile?.path && isHtmlFile(selectedFile.path));
-  const isTextFile = Boolean(selectedFile && !isSelectedImage);
-  const canUseShikiFileView = isTextFile && !isMarkdown && !(isHtml && htmlViewMode === 'preview');
-  const staticLanguageExtension = React.useMemo(
-    () => (selectedFilePath ? languageByExtension(selectedFilePath) : null),
-    [selectedFilePath],
-  );
-  const [dynamicLanguageExtension, setDynamicLanguageExtension] = React.useState<Extension | null>(null);
-
-  React.useEffect(() => {
-    let cancelled = false;
-    const selectedPath = selectedFile?.path;
-
-    if (!selectedPath || staticLanguageExtension) {
-      setDynamicLanguageExtension(null);
-      return;
-    }
-
-    setDynamicLanguageExtension(null);
-    void loadLanguageByExtension(selectedPath).then((extension) => {
-      if (!cancelled) {
-        setDynamicLanguageExtension(extension);
-      }
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedFile?.path, staticLanguageExtension]);
-
-  React.useEffect(() => {
-    if (!canEdit && textViewMode === 'edit') {
-      setTextViewMode('view');
-    }
-  }, [canEdit, textViewMode]);
-
-  const MD_VIEWER_MODE_KEY = 'openchamber:files:md-viewer-mode';
-  const HTML_VIEWER_MODE_KEY = 'openchamber:files:html-viewer-mode';
-  const JSON_VIEWER_MODE_KEY = 'openchamber:files:json-viewer-mode';
-
-  React.useEffect(() => {
-    const selectedPath = selectedFile?.path;
-    if (!selectedPath) {
-      return;
-    }
-
-    const defaultMode: TextViewMode = settingsDefaultFileViewerPreview ? 'view' : 'edit';
-    setTextViewMode(textViewModeByPathRef.current[selectedPath] ?? defaultMode);
-
-    // Respect per-type localStorage preference when available,
-    // falling back to the setting-derived default when nothing is stored.
-    let mdDefault: PreviewViewMode = settingsDefaultFileViewerPreview ? 'preview' : 'edit';
-    try {
-      const stored = localStorage.getItem(MD_VIEWER_MODE_KEY);
-      if (stored === 'preview' || stored === 'edit') {
-        mdDefault = stored;
-      }
-    } catch {
-      // Ignore localStorage errors
-    }
-    setMdViewMode(mdViewModeByPathRef.current[selectedPath] ?? mdDefault);
-
-    let htmlDefault: PreviewViewMode = settingsDefaultFileViewerPreview ? 'preview' : 'edit';
-    try {
-      const stored = localStorage.getItem(HTML_VIEWER_MODE_KEY);
-      if (stored === 'preview' || stored === 'edit') {
-        htmlDefault = stored;
-      }
-    } catch {
-      // Ignore localStorage errors
-    }
+    setLoadedFilePath(null);
+    if (isMobile) {
+      setShowMobilePageContent(true);
+    }
+  }, [addOpenPath, ensurePathVisible, isDirty, isMobile, root, setSelectedPath]);
+
+  React.useEffect(() => {
+    if (!selectedFile?.path) {
+      return;
+    }
+
+    void ensurePathVisible(selectedFile.path, false);
+  }, [ensurePathVisible, selectedFile?.path]);
+
+  React.useEffect(() => {
+    if (!selectedFile) {
+      activeFileLoadIdRef.current += 1;
+      setFileLoading(false);
+      return;
+    }
+
+    if (loadedFilePath === selectedFile.path) {
+      return;
+    }
+
+    // Selection changes are guarded; this effect is also what restores persisted tabs on mount.
+    void loadSelectedFile(selectedFile);
+  }, [loadSelectedFile, loadedFilePath, selectedFile]);
+
+  // Sync isDirty to a ref so the polling interval can read the latest value
+  // without isDirty in its dependency array (avoids interval restart on every edit/save).
+  const isDirtyRef = React.useRef(isDirty);
+  isDirtyRef.current = isDirty;
+
+  // Poll open file for external changes.
+  // When a change is detected, reset loadedFilePath so the effect above
+  // triggers a single reload — no double-load.
+  React.useEffect(() => {
+    if (!selectedFile?.path || loadedFilePath !== selectedFile.path) {
+      return;
+    }
+
+    let cancelled = false;
+    const interval = window.setInterval(() => {
+      if (document.hidden) {
+        return;
+      }
+
+      void readFileStat(selectedFile.path, selectedFileReadOptions)
+        .then((latestStat) => {
+          if (cancelled || !latestStat) {
+            return;
+          }
+
+          const previousStat = lastLoadedFileStatRef.current;
+          if (!previousStat || previousStat.path !== selectedFile.path) {
+            lastLoadedFileStatRef.current = latestStat;
+            return;
+          }
+
+          const changedByMtime = latestStat.mtimeMs !== undefined
+            && previousStat.mtimeMs !== undefined
+            && latestStat.mtimeMs !== previousStat.mtimeMs;
+          const changedBySize = latestStat.size !== previousStat.size;
+
+          if (!changedByMtime && !changedBySize) {
+            return;
+          }
+
+          if (isDirtyRef.current) {
+            return;
+          }
+
+          lastLoadedFileStatRef.current = latestStat;
+          // Reset loadedFilePath so the effect above triggers a single reload.
+          setLoadedFilePath(null);
+        })
+        .catch(() => {});
+    }, 2000);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [loadedFilePath, readFileStat, selectedFile?.path, selectedFileReadOptions]);
+
+  const discardAndContinue = React.useCallback(() => {
+    const nextFile = pendingSelectFileRef.current;
+    const nextTab = pendingTabRef.current;
+    const closePath = pendingClosePathRef.current;
+
+    pendingSelectFileRef.current = null;
+    pendingTabRef.current = null;
+    pendingClosePathRef.current = null;
+
+    // Allow one guarded navigation (tab/file) without re-opening dialog.
+    skipDirtyOnceRef.current = true;
+
+    setConfirmDiscardOpen(false);
+
+    // Discard draft by reverting back to last loaded content
+    setDraftContent(displayedContent);
+
+    if (closePath) {
+      if (root) {
+        removeOpenPath(root, closePath);
+      }
+      if (selectedFile?.path === closePath) {
+        if (nextFile) {
+          void handleSelectFile(nextFile);
+        } else {
+          if (root) {
+            setSelectedPath(root, null);
+          }
+          setFileContent('');
+          setFileError(null);
+          setDesktopImageSrc('');
+          setLoadedFilePath(null);
+          if (isMobile) {
+            setShowMobilePageContent(false);
+          }
+        }
+      }
+      return;
+    }
+
+    if (nextFile) {
+      void handleSelectFile(nextFile);
+      return;
+    }
+
+    if (nextTab) {
+      setMainTabGuard(null);
+      useUIStore.getState().setActiveMainTab(nextTab);
+    }
+  }, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setMainTabGuard, setSelectedPath]);
+
+  const saveAndContinue = React.useCallback(async () => {
+    const nextFile = pendingSelectFileRef.current;
+    const nextTab = pendingTabRef.current;
+    const closePath = pendingClosePathRef.current;
+
+    const saved = await saveDraft();
+    if (!saved) {
+      skipDirtyOnceRef.current = false;
+      return;
+    }
+
+    pendingSelectFileRef.current = null;
+    pendingTabRef.current = null;
+    pendingClosePathRef.current = null;
+
+    // We'll proceed after saving; suppress guard reopening.
+    skipDirtyOnceRef.current = true;
+
+    setConfirmDiscardOpen(false);
+
+    if (closePath) {
+      if (root) {
+        removeOpenPath(root, closePath);
+      }
+      if (selectedFile?.path === closePath) {
+        if (nextFile) {
+          await handleSelectFile(nextFile);
+        } else {
+          if (root) {
+            setSelectedPath(root, null);
+          }
+          setFileContent('');
+          setFileError(null);
+          setDesktopImageSrc('');
+          setLoadedFilePath(null);
+          if (isMobile) {
+            setShowMobilePageContent(false);
+          }
+        }
+      }
+      return;
+    }
+
+    if (nextFile) {
+      await handleSelectFile(nextFile);
+      return;
+    }
+
+    if (nextTab) {
+      setMainTabGuard(null);
+      useUIStore.getState().setActiveMainTab(nextTab);
+    }
+  }, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setMainTabGuard, setSelectedPath]);
+
+  const handleCloseFile = React.useCallback((path: string) => {
+    const isActive = selectedFile?.path === path;
+    const nextFile = getNextOpenFile(path, openFiles);
+
+    if (isActive && isDirty) {
+      setConfirmDiscardOpen(true);
+      pendingSelectFileRef.current = nextFile;
+      pendingClosePathRef.current = path;
+      return;
+    }
+
+    if (root) {
+      removeOpenPath(root, path);
+    }
+
+    if (!isActive) {
+      return;
+    }
+
+    if (nextFile) {
+      void handleSelectFile(nextFile);
+      return;
+    }
+
+    if (root) {
+      setSelectedPath(root, null);
+    }
+    setFileContent('');
+    setFileError(null);
+    setDesktopImageSrc('');
+    setLoadedFilePath(null);
+    if (isMobile) {
+      setShowMobilePageContent(false);
+    }
+  }, [getNextOpenFile, handleSelectFile, isDirty, isMobile, openFiles, removeOpenPath, root, selectedFile?.path, setSelectedPath]);
+
+  const getFileStatus = React.useCallback((path: string): FileStatus | null => {
+    // Check open status
+    if (openPaths.includes(path)) return 'open';
+    
+    // Check git status
+    if (gitStatus?.files) {
+      const relative = path.startsWith(root + '/') ? path.slice(root.length + 1) : path;
+      const file = gitStatus.files.find(f => f.path === relative);
+      if (file) {
+        if (file.index === 'A' || file.working_dir === '?') return 'git-added';
+        if (file.index === 'D') return 'git-deleted';
+        if (file.index === 'M' || file.working_dir === 'M') return 'git-modified';
+      }
+    }
+    return null;
+  }, [openPaths, gitStatus, root]);
+
+  const getFolderBadge = React.useCallback((dirPath: string): { modified: number; added: number } | null => {
+    if (!gitStatus?.files) return null;
+    const relativeDir = dirPath.startsWith(root + '/') ? dirPath.slice(root.length + 1) : dirPath;
+    const prefix = relativeDir ? `${relativeDir}/` : '';
+    
+    let modified = 0, added = 0;
+    for (const f of gitStatus.files) {
+      if (f.path.startsWith(prefix)) {
+        if (f.index === 'M' || f.working_dir === 'M') modified++;
+        if (f.index === 'A' || f.working_dir === '?') added++;
+      }
+    }
+    return modified + added > 0 ? { modified, added } : null;
+  }, [gitStatus, root]);
+
+  const toggleDirectory = React.useCallback(async (dirPath: string) => {
+    const normalized = normalizePath(dirPath);
+    if (!root) return;
+
+    toggleExpandedPath(root, normalized);
+
+    if (!loadedDirsRef.current.has(normalized)) {
+      await loadDirectory(normalized);
+    }
+  }, [loadDirectory, root, toggleExpandedPath]);
+
+  const fileRowPermissions = React.useMemo(
+    () => ({ canRename, canCreateFile, canCreateFolder, canDelete, canReveal }),
+    [canRename, canCreateFile, canCreateFolder, canDelete, canReveal]
+  );
+
+  function renderTree(dirPath: string, depth: number): React.ReactNode {
+    const nodes = childrenByDir[dirPath] ?? [];
+
+    return nodes.map((node, index) => {
+      const isDir = node.type === 'directory';
+      const isExpanded = isDir && expandedPaths.includes(node.path);
+      const isActive = selectedFile?.path === node.path;
+      const isLast = index === nodes.length - 1;
+
+      return (
+        <li key={node.path} className="relative">
+          {depth > 0 && (
+            <>
+              <span className="absolute top-3.5 left-[-12px] w-3 h-px bg-border/40" />
+              {isLast && (
+                <span className="absolute top-3.5 bottom-0 left-[-13px] w-[2px] bg-background" />
+              )}
+            </>
+          )}
+          <FileRow
+            node={node}
+            root={root}
+            isExpanded={isExpanded}
+            isActive={isActive}
+            isMobile={isMobile}
+            alwaysShowActions={alwaysShowActions}
+            status={!isDir ? getFileStatus(node.path) : undefined}
+            badge={isDir ? getFolderBadge(node.path) : undefined}
+            permissions={fileRowPermissions}
+            downloadFile={files.downloadFile}
+            contextMenuPath={contextMenuPath}
+            setContextMenuPath={setContextMenuPath}
+            onSelect={handleSelectFile}
+            onToggle={toggleDirectory}
+            onRevealPath={handleRevealPath}
+            onOpenDialog={handleOpenDialog}
+          />
+          {isDir && isExpanded && (
+            <ul className="flex flex-col gap-1 ml-3 pl-3 border-l border-border/40 relative">
+              {loadErrorsByDir[node.path] ? (
+                <li className="flex items-center gap-2 px-2 py-1 typography-meta text-muted-foreground">
+                  <span className="min-w-0 flex-1 truncate text-[var(--status-error)]" title={loadErrorsByDir[node.path]}>{loadErrorsByDir[node.path]}</span>
+                  <Button variant="ghost" size="xs" className="h-6 gap-1" onClick={() => void refreshDirectory(node.path)}>
+                    <Icon name="refresh" className="size-3.5" />
+                    {t('filesView.tree.actions.refreshTitle')}
+                  </Button>
+                </li>
+              ) : null}
+              {renderTree(node.path, depth + 1)}
+            </ul>
+          )}
+        </li>
+      );
+    });
+  }
+
+  const isSelectedImage = Boolean(selectedFile?.path && isImageFile(selectedFile.path));
+  const isSelectedSvg = Boolean(selectedFile?.path && selectedFile.path.toLowerCase().endsWith('.svg'));
+  const pendingNavigationTargetPath = React.useMemo(
+    () => normalizePath(pendingFileNavigation?.path ?? ''),
+    [pendingFileNavigation?.path],
+  );
+  const shouldMaskEditorForPendingNavigation = Boolean(
+    pendingFileNavigation
+      && pendingNavigationTargetPath
+      && selectedFilePath
+      && selectedFilePath === pendingNavigationTargetPath
+      && !fileLoading
+      && !fileError
+      && !isSelectedImage,
+  );
+
+  const displaySelectedPath = React.useMemo(() => {
+    return getDisplayPath(root, selectedFilePath);
+  }, [selectedFilePath, root]);
+
+  const canCopy = Boolean(selectedFile && (!isSelectedImage || isSelectedSvg) && fileContent.length > 0);
+  const canCopyPath = Boolean(selectedFile && displaySelectedPath.length > 0);
+  const canEdit = Boolean(selectedFile && !selectedFileIsOutsideWorkspace && !isSelectedImage && files.writeFile && fileContent.length <= MAX_VIEW_CHARS);
+  const isMarkdown = Boolean(selectedFile?.path && isMarkdownFile(selectedFile.path));
+  const isJson = Boolean(selectedFile?.path && isJsonFile(selectedFile.path));
+  const isHtml = Boolean(selectedFile?.path && isHtmlFile(selectedFile.path));
+  const isDrawio = Boolean(selectedFile?.path && isDrawioFile(selectedFile.path));
+  const isTextFile = Boolean(selectedFile && !isSelectedImage);
+  const canUseShikiFileView = isTextFile && !isMarkdown && !isDrawio && !(isHtml && htmlViewMode === 'preview');
+  const staticLanguageExtension = React.useMemo(
+    () => (selectedFilePath ? languageByExtension(selectedFilePath) : null),
+    [selectedFilePath],
+  );
+  const [dynamicLanguageExtension, setDynamicLanguageExtension] = React.useState<Extension | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    const selectedPath = selectedFile?.path;
+
+    if (!selectedPath || staticLanguageExtension) {
+      setDynamicLanguageExtension(null);
+      return;
+    }
+
+    setDynamicLanguageExtension(null);
+    void loadLanguageByExtension(selectedPath).then((extension) => {
+      if (!cancelled) {
+        setDynamicLanguageExtension(extension);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedFile?.path, staticLanguageExtension]);
+
+  React.useEffect(() => {
+    if (!canEdit && textViewMode === 'edit') {
+      setTextViewMode('view');
+    }
+  }, [canEdit, textViewMode]);
+
+  const MD_VIEWER_MODE_KEY = 'openchamber:files:md-viewer-mode';
+  const HTML_VIEWER_MODE_KEY = 'openchamber:files:html-viewer-mode';
+  const JSON_VIEWER_MODE_KEY = 'openchamber:files:json-viewer-mode';
+
+  React.useEffect(() => {
+    const selectedPath = selectedFile?.path;
+    if (!selectedPath) {
+      return;
+    }
+
+    const defaultMode: TextViewMode = settingsDefaultFileViewerPreview ? 'view' : 'edit';
+    setTextViewMode(textViewModeByPathRef.current[selectedPath] ?? defaultMode);
+
+    // Respect per-type localStorage preference when available,
+    // falling back to the setting-derived default when nothing is stored.
+    let mdDefault: PreviewViewMode = settingsDefaultFileViewerPreview ? 'preview' : 'edit';
+    try {
+      const stored = localStorage.getItem(MD_VIEWER_MODE_KEY);
+      if (stored === 'preview' || stored === 'edit') {
+        mdDefault = stored;
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
+    setMdViewMode(mdViewModeByPathRef.current[selectedPath] ?? mdDefault);
+
+    let htmlDefault: PreviewViewMode = settingsDefaultFileViewerPreview ? 'preview' : 'edit';
+    try {
+      const stored = localStorage.getItem(HTML_VIEWER_MODE_KEY);
+      if (stored === 'preview' || stored === 'edit') {
+        htmlDefault = stored;
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
     setHtmlViewMode(htmlViewModeByPathRef.current[selectedPath] ?? htmlDefault);
+    setDrawioViewMode(drawioViewModeByPathRef.current[selectedPath] ?? 'preview');
 
     let jsonDefault: 'tree' | 'text' = settingsDefaultFileViewerPreview ? 'tree' : 'text';
-    try {
-      const stored = localStorage.getItem(JSON_VIEWER_MODE_KEY);
-      if (stored === 'tree' || stored === 'text') {
-        jsonDefault = stored;
-      }
-    } catch {
-      // Ignore localStorage errors
-    }
-    setJsonViewMode(jsonDefault);
-  }, [selectedFile?.path, settingsDefaultFileViewerPreview]);
-
-  const saveTextViewMode = React.useCallback((mode: TextViewMode) => {
-    const selectedPath = selectedFile?.path;
-    if (selectedPath) {
-      textViewModeByPathRef.current[selectedPath] = mode;
-    }
-    setTextViewMode(mode);
-  }, [selectedFile?.path]);
-
-  const saveMdViewMode = React.useCallback((mode: PreviewViewMode) => {
-    const selectedPath = selectedFile?.path;
-    if (selectedPath) {
-      mdViewModeByPathRef.current[selectedPath] = mode;
-    }
-    setMdViewMode(mode);
-    try {
-      localStorage.setItem(MD_VIEWER_MODE_KEY, mode);
-    } catch {
-      // Ignore localStorage errors
-    }
-  }, [selectedFile?.path]);
-
-  const getMdViewMode = React.useCallback((): PreviewViewMode => {
-    return mdViewMode;
-  }, [mdViewMode]);
-
-  const saveJsonViewMode = React.useCallback((mode: 'tree' | 'text') => {
-    setJsonViewMode(mode);
-    try {
-      localStorage.setItem(JSON_VIEWER_MODE_KEY, mode);
-    } catch {
-      // Ignore localStorage errors
-    }
-  }, []);
-
+    try {
+      const stored = localStorage.getItem(JSON_VIEWER_MODE_KEY);
+      if (stored === 'tree' || stored === 'text') {
+        jsonDefault = stored;
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
+    setJsonViewMode(jsonDefault);
+  }, [selectedFile?.path, settingsDefaultFileViewerPreview]);
+
+  const saveTextViewMode = React.useCallback((mode: TextViewMode) => {
+    const selectedPath = selectedFile?.path;
+    if (selectedPath) {
+      textViewModeByPathRef.current[selectedPath] = mode;
+    }
+    setTextViewMode(mode);
+  }, [selectedFile?.path]);
+
+  const saveMdViewMode = React.useCallback((mode: PreviewViewMode) => {
+    const selectedPath = selectedFile?.path;
+    if (selectedPath) {
+      mdViewModeByPathRef.current[selectedPath] = mode;
+    }
+    setMdViewMode(mode);
+    try {
+      localStorage.setItem(MD_VIEWER_MODE_KEY, mode);
+    } catch {
+      // Ignore localStorage errors
+    }
+  }, [selectedFile?.path]);
+
+  const getMdViewMode = React.useCallback((): PreviewViewMode => {
+    return mdViewMode;
+  }, [mdViewMode]);
+
+  const saveJsonViewMode = React.useCallback((mode: 'tree' | 'text') => {
+    setJsonViewMode(mode);
+    try {
+      localStorage.setItem(JSON_VIEWER_MODE_KEY, mode);
+    } catch {
+      // Ignore localStorage errors
+    }
+  }, []);
+
   const saveHtmlViewMode = React.useCallback((mode: PreviewViewMode) => {
-    const selectedPath = selectedFile?.path;
-    if (selectedPath) {
-      htmlViewModeByPathRef.current[selectedPath] = mode;
-    }
-    setHtmlViewMode(mode);
-    try {
-      localStorage.setItem(HTML_VIEWER_MODE_KEY, mode);
-    } catch {
-      // Ignore localStorage errors
-    }
+    const selectedPath = selectedFile?.path;
+    if (selectedPath) {
+      htmlViewModeByPathRef.current[selectedPath] = mode;
+    }
+    setHtmlViewMode(mode);
+    try {
+      localStorage.setItem(HTML_VIEWER_MODE_KEY, mode);
+    } catch {
+      // Ignore localStorage errors
+    }
   }, [selectedFile?.path]);
 
-  const getHtmlViewMode = React.useCallback((): PreviewViewMode => {
-    return htmlViewMode;
-  }, [htmlViewMode]);
-
-  React.useEffect(() => {
-    const applyDefaultFileViewerMode = (enabled: boolean) => {
-      const textMode: TextViewMode = enabled ? 'view' : 'edit';
-      const previewMode: PreviewViewMode = enabled ? 'preview' : 'edit';
-      const nextJsonMode: 'tree' | 'text' = enabled ? 'tree' : 'text';
-
-      for (const path of openPaths) {
-        textViewModeByPathRef.current[path] = textMode;
-        if (isMarkdownFile(path)) {
-          mdViewModeByPathRef.current[path] = previewMode;
-        }
-        if (isHtmlFile(path)) {
-          htmlViewModeByPathRef.current[path] = previewMode;
-        }
-      }
-
-      setTextViewMode(textMode);
-      setMdViewMode(previewMode);
-      setHtmlViewMode(previewMode);
-      setJsonViewMode(nextJsonMode);
-
-      try {
-        localStorage.setItem(MD_VIEWER_MODE_KEY, previewMode);
-        localStorage.setItem(HTML_VIEWER_MODE_KEY, previewMode);
-        localStorage.setItem(JSON_VIEWER_MODE_KEY, nextJsonMode);
-      } catch {
-        // Ignore localStorage errors
-      }
-    };
-
-    const handleFileViewerModeChanged = (event: Event) => {
-      const enabled = Boolean((event as CustomEvent<{ enabled?: boolean }>).detail?.enabled);
-      applyDefaultFileViewerMode(enabled);
-    };
-
-    window.addEventListener('openchamber:file-viewer-preview-mode-changed', handleFileViewerModeChanged);
-    return () => {
-      window.removeEventListener('openchamber:file-viewer-preview-mode-changed', handleFileViewerModeChanged);
-    };
-  }, [openPaths]);
-
-  React.useEffect(() => {
-    if (!pendingFileNavigation || !root) {
-      return;
+  const saveDrawioViewMode = React.useCallback((mode: PreviewViewMode) => {
+    const selectedPath = selectedFile?.path;
+    if (selectedPath) {
+      drawioViewModeByPathRef.current[selectedPath] = mode;
     }
-
-    const scheduleNavigationRetry = () => {
-      if (typeof window === 'undefined') {
-        return;
-      }
-      if (pendingNavigationRafRef.current !== null) {
-        return;
-      }
-
-      pendingNavigationRafRef.current = window.requestAnimationFrame(() => {
-        pendingNavigationRafRef.current = null;
-        setEditorViewReadyNonce((value) => value + 1);
-      });
-    };
-
-    const isEditorSyncedWithDraft = (view: EditorView, expectedContent: string): boolean => {
-      if (view.state.doc.length !== expectedContent.length) {
-        return false;
-      }
-
-      if (expectedContent.length === 0) {
-        return true;
-      }
-
-      const sampleSize = Math.min(128, expectedContent.length);
-      const startSample = view.state.sliceDoc(0, sampleSize);
-      if (startSample !== expectedContent.slice(0, sampleSize)) {
-        return false;
-      }
-
-      const endFrom = Math.max(0, expectedContent.length - sampleSize);
-      const endSample = view.state.sliceDoc(endFrom, expectedContent.length);
-      return endSample === expectedContent.slice(endFrom);
-    };
-
-    const targetPath = normalizePath(pendingFileNavigation.path);
-    if (!targetPath) {
-      setPendingFileNavigation(null);
-      pendingNavigationCycleRef.current = { key: '', attempts: 0 };
-      return;
+    if (diagramAutoSaveTimerRef.current) {
+      clearTimeout(diagramAutoSaveTimerRef.current);
+      diagramAutoSaveTimerRef.current = null;
     }
-
-    const navigationKey = `${targetPath}:${pendingFileNavigation.line}:${pendingFileNavigation.column ?? 1}`;
-    if (pendingNavigationCycleRef.current.key !== navigationKey) {
-      pendingNavigationCycleRef.current = { key: navigationKey, attempts: 0 };
+    if (pendingDrawioPreviewFrameRef.current !== null) {
+      cancelAnimationFrame(pendingDrawioPreviewFrameRef.current);
+      pendingDrawioPreviewFrameRef.current = null;
     }
-
-    if (selectedFile?.path !== targetPath) {
-      if (confirmDiscardOpen) {
-        return;
-      }
-      void handleSelectFile(toFileNode(targetPath));
-      return;
-    }
-
-    if (fileLoading || loadedFilePath !== targetPath) {
-      return;
-    }
-
-    if (fileError || isSelectedImage) {
-      setPendingFileNavigation(null);
-      pendingNavigationCycleRef.current = { key: '', attempts: 0 };
-      return;
-    }
-
-    if (!canEdit) {
-      return;
-    }
-
-    if (textViewMode !== 'edit') {
-      setTextViewMode('edit');
-      return;
-    }
-
-    const view = editorViewRef.current;
-    if (!view) {
-      scheduleNavigationRetry();
-      return;
-    }
-
-    if (!isEditorSyncedWithDraft(view, draftContent)) {
-      scheduleNavigationRetry();
-      return;
-    }
-
-    const targetLineNumber = Math.max(1, Math.min(pendingFileNavigation.line, view.state.doc.lines));
-    const targetLine = view.state.doc.line(targetLineNumber);
-    const targetColumn = Math.max(1, pendingFileNavigation.column || 1);
-    const lineLength = Math.max(0, targetLine.to - targetLine.from);
-    const clampedColumnOffset = Math.min(lineLength, targetColumn - 1);
-    const targetPosition = targetLine.from + clampedColumnOffset;
-    const isAtTarget = view.state.selection.main.head === targetPosition;
-    const shouldDispatch = !isAtTarget || pendingNavigationCycleRef.current.attempts === 0;
-
-    if (shouldDispatch) {
-      pendingNavigationCycleRef.current.attempts += 1;
-      view.dispatch({
-        selection: { anchor: targetPosition },
-        effects: EditorView.scrollIntoView(targetPosition, { y: 'center' }),
-      });
-      view.focus();
-      scheduleNavigationRetry();
-      return;
-    }
-
-    if (typeof window !== 'undefined') {
-      window.requestAnimationFrame(() => {
-        const syncedView = editorViewRef.current;
-        if (!syncedView) {
-          return;
-        }
-
-        syncedView.dispatch({
-          selection: { anchor: targetPosition },
-          effects: EditorView.scrollIntoView(targetPosition, { y: 'center' }),
-        });
-        syncedView.focus();
-      });
-    }
-
-    setPendingFileNavigation(null);
-    pendingNavigationCycleRef.current = { key: '', attempts: 0 };
-  }, [
-    canEdit,
-    confirmDiscardOpen,
-    draftContent,
-    editorViewReadyNonce,
-    fileError,
-    fileLoading,
-    isSelectedImage,
-    loadedFilePath,
-    handleSelectFile,
-    pendingFileNavigation,
-    root,
-    selectedFile?.path,
-    setPendingFileNavigation,
-    textViewMode,
-    toFileNode,
-  ]);
-
-  React.useEffect(() => {
-    if (!pendingFileFocusPath || !root) {
-      return;
-    }
-
-    const targetPath = normalizePath(pendingFileFocusPath);
-    if (!targetPath) {
-      setPendingFileFocusPath(null);
-      return;
-    }
-
-    if (selectedFile?.path !== targetPath) {
-      if (confirmDiscardOpen) {
-        return;
-      }
-      void handleSelectFile(toFileNode(targetPath));
-      return;
-    }
-
-    if (fileLoading || loadedFilePath !== targetPath || fileError || isSelectedImage) {
-      return;
-    }
-
-    if (canEdit && textViewMode === 'edit') {
-      const view = editorViewRef.current;
-      if (!view) {
-        return;
-      }
-      view.focus();
-    }
-
-    setPendingFileFocusPath(null);
-  }, [
-    canEdit,
-    confirmDiscardOpen,
-    fileError,
-    fileLoading,
-    handleSelectFile,
-    isSelectedImage,
-    loadedFilePath,
-    pendingFileFocusPath,
-    root,
-    selectedFile?.path,
-    setPendingFileFocusPath,
-    textViewMode,
-    toFileNode,
-  ]);
-
-  const nudgeEditorSelectionAboveKeyboard = React.useCallback((view: EditorView | null) => {
-    if (!isMobile || !view || !view.hasFocus || typeof window === 'undefined') {
-      return;
-    }
-
-    const viewport = window.visualViewport;
-    if (!viewport) {
-      return;
-    }
-
-    const layoutHeight = document.documentElement.clientHeight || window.innerHeight;
-    const occludedBottom = Math.max(0, layoutHeight - (viewport.offsetTop + viewport.height));
-    if (occludedBottom <= 0) {
-      return;
-    }
-
-    const head = view.state.selection.main.head;
-    const cursorRect = view.coordsAtPos(head);
-    if (!cursorRect) {
-      return;
-    }
-
-    const visibleBottom = Math.round(viewport.offsetTop + viewport.height);
-    const clearance = 20;
-    const overlap = cursorRect.bottom + clearance - visibleBottom;
-    if (overlap <= 0) {
-      return;
-    }
-
-    view.scrollDOM.scrollTop += overlap;
-  }, [isMobile]);
-
-  React.useEffect(() => {
-    if (!isMobile || typeof window === 'undefined') {
-      return;
-    }
-
-    const runNudge = () => {
-      window.requestAnimationFrame(() => {
-        nudgeEditorSelectionAboveKeyboard(editorViewRef.current);
-      });
-    };
-
-    const viewport = window.visualViewport;
-    viewport?.addEventListener('resize', runNudge);
-    viewport?.addEventListener('scroll', runNudge, { passive: true });
-    document.addEventListener('selectionchange', runNudge);
-
-    return () => {
-      viewport?.removeEventListener('resize', runNudge);
-      viewport?.removeEventListener('scroll', runNudge);
-      document.removeEventListener('selectionchange', runNudge);
-    };
-  }, [isMobile, nudgeEditorSelectionAboveKeyboard]);
-
-  React.useEffect(() => {
-    if (!canEdit || textViewMode !== 'edit' || isMobile) {
-      return;
-    }
-
-    const goToLineCombo = getEffectiveShortcutCombo('open_go_to_line', shortcutOverrides);
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as Element | null;
-      if (target?.closest('[role="dialog"]')) {
-        return;
-      }
-
-      const isEditorTarget = Boolean(target?.closest('.cm-editor'));
-      const isTypingTarget = Boolean(
-        target?.closest('input, textarea, [contenteditable="true"], [role="textbox"]')
-      );
-      if (isTypingTarget && !isEditorTarget) {
-        return;
-      }
-
-      const activeElement = document.activeElement as Element | null;
-      const editorHasFocus = Boolean(activeElement?.closest('.cm-editor'));
-      if (!editorHasFocus) {
-        return;
-      }
-
-      if (eventMatchesShortcut(event, goToLineCombo)) {
-        event.preventDefault();
-        setIsGoToLineOpen(true);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [canEdit, isMobile, shortcutOverrides, textViewMode]);
-
-  const editorExtensions = React.useMemo(() => {
-    if (!selectedFile?.path) {
-      return [createFlexokiCodeMirrorTheme(currentTheme)];
-    }
-
-    const extensions = [createFlexokiCodeMirrorTheme(currentTheme)];
-    const language = staticLanguageExtension ?? dynamicLanguageExtension;
-    if (language) {
-      extensions.push(language);
-    }
-    if (wrapLines) {
-      extensions.push(EditorView.lineWrapping);
-    }
-    if (isMobile) {
-      extensions.push(EditorView.updateListener.of((update) => {
-        if (!update.view.hasFocus) {
-          return;
-        }
-        if (!(update.selectionSet || update.focusChanged || update.viewportChanged || update.geometryChanged)) {
-          return;
-        }
-
-        window.requestAnimationFrame(() => {
-          nudgeEditorSelectionAboveKeyboard(update.view);
-        });
-      }));
-    }
-    return extensions;
-  }, [currentTheme, selectedFile?.path, staticLanguageExtension, dynamicLanguageExtension, wrapLines, isMobile, nudgeEditorSelectionAboveKeyboard]);
-
-  const pierreTheme = React.useMemo(
-    () => ({ light: lightTheme.metadata.id, dark: darkTheme.metadata.id }),
-    [lightTheme.metadata.id, darkTheme.metadata.id],
-  );
-
-  const imageAssetAuthKey = selectedFile?.path && isSelectedImage && !runtime.isDesktop && !isSelectedSvg
-    ? `${selectedFile.path}|${selectedFileReadOptions.allowOutsideWorkspace ? 'outside' : 'workspace'}`
-    : '';
-
-  React.useEffect(() => {
-    if (!imageAssetAuthKey) {
-      setImageAssetAuthReadyKey('');
-      return;
-    }
-
-    let cancelled = false;
-    setImageAssetAuthReadyKey('');
-    void refreshRuntimeUrlAuthToken(getRuntimeApiBaseUrl())
-      .then((token) => {
-        if (!cancelled && token) setImageAssetAuthReadyKey(imageAssetAuthKey);
-      })
-      .catch(() => {});
-
-    return () => {
-      cancelled = true;
-    };
-  }, [imageAssetAuthKey]);
-
-  const isImageAssetAuthLoading = Boolean(imageAssetAuthKey && imageAssetAuthReadyKey !== imageAssetAuthKey);
-
-  const imageSrc = selectedFile?.path && isSelectedImage
-    ? (runtime.isDesktop
-      ? (isSelectedSvg
-        ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}`
-        : desktopImageSrc)
-      : (isSelectedSvg
-        ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}`
-        : imageAssetAuthReadyKey === imageAssetAuthKey ? getRuntimeUrlResolver().authenticatedAsset('/api/fs/raw', {
-          path: selectedFile.path,
-          allowOutsideWorkspace: selectedFileReadOptions.allowOutsideWorkspace ? 'true' : undefined,
-        }) : ''))
-    : '';
-
-  React.useEffect(() => {
-    let cancelled = false;
-
-    const resolveDesktopImage = async () => {
-      if (!runtime.isDesktop || !selectedFile?.path || !isSelectedImage || isSelectedSvg) {
-        setDesktopImageSrc('');
-        return;
-      }
-
-      setFileError(null);
-
-      const srcPromise = files.readFileBinary
-        ? files.readFileBinary(selectedFile.path, selectedFileReadOptions).then((result) => result.dataUrl)
-        : Promise.resolve(getRuntimeUrlResolver().authenticatedAsset('/api/fs/raw', {
-          path: selectedFile.path,
-          allowOutsideWorkspace: selectedFileReadOptions.allowOutsideWorkspace ? 'true' : undefined,
-        }));
-
-      await srcPromise
-        .then((src) => {
-          if (!cancelled) {
-            setDesktopImageSrc(src);
-            setLoadedFilePath(selectedFile.path);
-          }
-        })
-        .catch((error) => {
-          if (!cancelled) {
-            setDesktopImageSrc('');
-            setFileError(error instanceof Error ? error.message : t('filesView.error.readFileFailed'));
-            setLoadedFilePath(null);
-          }
-        })
-        .finally(() => {
-          if (!cancelled) {
-            setFileLoading(false);
+    if (mode === 'edit') {
+      setDraftContent(diagramXmlRef.current || fileContent);
+      setDrawioViewMode(mode);
+    } else {
+      diagramXmlRef.current = draftContent;
+      const pathAtToggle = selectedPath;
+      setDrawioViewMode('edit');
+      pendingDrawioPreviewFrameRef.current = requestAnimationFrame(() => {
+        pendingDrawioPreviewFrameRef.current = requestAnimationFrame(() => {
+          pendingDrawioPreviewFrameRef.current = null;
+          if (root && pathAtToggle && useFilesViewTabsStore.getState().byRoot[root]?.selectedPath !== pathAtToggle) {
+            return;
           }
+          setDrawioRemountNonce((value) => value + 1);
+          setDrawioViewMode('preview');
         });
-    };
+      });
+      return;
+    }
+  }, [draftContent, fileContent, root, selectedFile?.path]);
 
-    void resolveDesktopImage();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [files, isSelectedImage, isSelectedSvg, runtime.isDesktop, selectedFile?.path, selectedFileReadOptions, t]);
-
-  const handleCloseDialog = React.useCallback(() => setActiveDialog(null), []);
-
-  const blockWidgets = React.useMemo(() => {
-    return buildCodeMirrorCommentWidgets({
-      drafts: filesFileDrafts,
-      editingDraftId,
-      commentText,
-      selection: lineSelection,
-      isDragging,
-      fileLabel: selectedFile?.path ?? '',
-      newWidgetId: 'files-new-comment-input',
-      mapDraftToRange: (draft) => ({ start: draft.startLine, end: draft.endLine }),
-      onSave: handleSaveComment,
-      onCancel: () => {
-        setLineSelection(null);
-        cancel();
-      },
-      onEdit: (draft) => {
-        startEdit(draft);
-        setLineSelection({ start: draft.startLine, end: draft.endLine });
-      },
-      onDelete: deleteDraft,
-    });
-  }, [cancel, commentText, deleteDraft, editingDraftId, filesFileDrafts, handleSaveComment, isDragging, lineSelection, selectedFile?.path, startEdit]);
-
-  const renderShikiFileView = React.useCallback((file: FileNode, content: string) => {
-    return (
-      <div className="h-full">
-        <PierreFile
-          file={{
-            name: file.name,
-            contents: content,
-            lang: getLanguageFromExtension(file.path) || undefined,
-          }}
-          options={{
-            disableFileHeader: true,
-            overflow: wrapLines ? 'wrap' : 'scroll',
-            theme: pierreTheme,
-            themeType: currentTheme.metadata.variant === 'dark' ? 'dark' : 'light',
-          }}
-          className="block h-full w-full"
-          style={{ height: '100%' }}
-        />
-      </div>
-    );
-  }, [currentTheme.metadata.variant, pierreTheme, wrapLines]);
-
-  const renderFloatingFileControls = ({ exitFullscreenOnly = false }: { exitFullscreenOnly?: boolean } = {}) => {
-    if (!selectedFile) {
-      return null;
+  const saveDiagramXml = React.useCallback(async (path: string, xml: string) => {
+    if (!files.writeFile || xml === diagramSavedXmlRef.current) {
+      return false;
     }
 
-    const withTooltip = (label: React.ReactNode, trigger: React.ReactElement) => (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="inline-flex">
-            {trigger}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent side="bottom" sideOffset={6}>{label}</TooltipContent>
-      </Tooltip>
-    );
+    const result = await files.writeFile(path, xml);
+    if (!result?.success) {
+      toast.error(t('filesView.toast.writeFileFailed'));
+      return false;
+    }
 
-    return (
-      <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
-        {canEdit && textViewMode === 'edit' && (
-          <>
-            {isSaving ? (
-              <span className="flex items-center gap-1 px-1 text-muted-foreground typography-meta">
-                <Icon name="loader-4" className="size-3.5 animate-spin" />
-                {t('filesView.editor.saving')}
-              </span>
-            ) : autoSaveEnabled && autoSaveStatus === 'saved' && !isDirty ? (
-              <span className="flex items-center gap-1 px-1 text-[color:var(--status-success)] typography-meta">
-                <Icon name="check" className="size-3.5" />
-                {t('filesView.editor.saved')}
-              </span>
-            ) : isDirty ? withTooltip(t(autoSaveEnabled ? 'filesView.editor.saveNowTitle' : 'filesView.editor.saveNowManualTitle', { shortcut: `${getModifierLabel()}+S` }),
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => void saveDraft()}
-                className="h-6 gap-1 px-1 text-muted-foreground opacity-80 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
-                title={t(autoSaveEnabled ? 'filesView.editor.saveNowTitle' : 'filesView.editor.saveNowManualTitle', { shortcut: `${getModifierLabel()}+S` })}
-                aria-label={t('filesView.editor.saveAria', { shortcut: `${getModifierLabel()}+S` })}
-              >
-                <Icon name="save-3" className="size-4" />
-              </Button>
-            ) : null}
-            {withTooltip(autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave'),
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
-                className={cn(
-                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
-                  autoSaveEnabled ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
-                )}
-                title={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
-                aria-label={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
-              >
-                {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
-              </Button>
-            )}
-          </>
-        )}
+    diagramXmlRef.current = xml;
+    diagramSavedXmlRef.current = xml;
+    setDraftContent(xml);
+    const stat = await readFileStat(path, selectedFileReadOptions).catch(() => null);
+    if (stat) {
+      lastLoadedFileStatRef.current = stat;
+    }
+    return true;
+  }, [files, readFileStat, selectedFileReadOptions, t]);
 
-        <DropdownMenu onOpenChange={handleToolbarDropdownOpenChange}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex">
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                    title={t('filesView.editor.openInDesktopApp')}
-                    aria-label={t('filesView.editor.openInDesktopApp')}
-                  >
-                    <Icon name="file-transfer" className="size-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.openInDesktopApp')}</TooltipContent>
-          </Tooltip>
-          <DropdownMenuContent align="end" className="w-56 max-h-[70vh] overflow-y-auto">
-            {openInApps.map((app) => (
-              <DropdownMenuItem
-                key={app.id}
-                className="flex items-center gap-2"
-                onClick={() => void handleOpenInApp(app)}
-              >
-                <OpenInAppListIcon label={app.label} iconDataUrl={app.iconDataUrl} />
-                <span className="typography-ui-label text-foreground">{app.label}</span>
-              </DropdownMenuItem>
-            ))}
-            {openInCacheStale ? (
-              <DropdownMenuItem
-                className="flex items-center gap-2"
-                onClick={() => void loadOpenInApps(true)}
-              >
-                <Icon name="refresh" className="size-4" />
-                <span className="typography-ui-label text-foreground">{t('filesView.editor.refreshApps')}</span>
-              </DropdownMenuItem>
-            ) : null}
-          </DropdownMenuContent>
-        </DropdownMenu>
+  React.useEffect(() => {
+    return () => {
+      if (diagramAutoSaveTimerRef.current) {
+        clearTimeout(diagramAutoSaveTimerRef.current);
+        diagramAutoSaveTimerRef.current = null;
+      }
+      if (pendingDrawioPreviewFrameRef.current !== null) {
+        cancelAnimationFrame(pendingDrawioPreviewFrameRef.current);
+        pendingDrawioPreviewFrameRef.current = null;
+      }
+    };
+  }, [drawioViewMode, selectedFile?.path]);
 
-        {!isSelectedImage && (
-          <>
-            {withTooltip(wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap'),
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setWrapLines(!wrapLines)}
-                className={cn(
-                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
-                  wrapLines ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
-                )}
-                title={wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap')}
-              >
-                <Icon name="text-wrap" className="size-4" />
-              </Button>
-            )}
-            {textViewMode === 'edit' && (
-              <>
-                {withTooltip(t('filesView.editor.findInFile'),
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={(event) => {
-                      setIsSearchOpen(!isSearchOpen);
-                      event.currentTarget.blur();
-                    }}
-                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                    title={t('filesView.editor.findInFile')}
-                  >
-                    <Icon name="search" className="size-4" />
-                  </Button>
-                )}
-                {withTooltip(t('filesView.editor.goToLine'),
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={(event) => {
-                      setIsGoToLineOpen((open) => !open);
-                      event.currentTarget.blur();
-                    }}
-                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                    title={t('filesView.editor.goToLine')}
-                  >
-                    <Icon name="menu-fold-2" className="size-4" />
-                  </Button>
-                )}
-                <GoToLineDialog
-                  open={isGoToLineOpen}
-                  onOpenChange={setIsGoToLineOpen}
-                  view={editorViewRef.current}
-                  variant="inline"
-                />
-              </>
-            )}
-          </>
-        )}
+  const handleDiagramChange = React.useCallback((xml: string) => {
+    diagramXmlRef.current = xml;
+    if (!selectedFile?.path || drawioViewMode !== 'preview' || !files.writeFile) {
+      return;
+    }
 
-        {canUseShikiFileView && canEdit && !isJson && !isHtml && (
-          <PreviewToggleButton
-            currentMode={textViewMode === 'view' ? 'preview' : 'edit'}
-            onToggle={() => {
-              saveTextViewMode(textViewMode === 'view' ? 'edit' : 'view');
-            }}
-          />
-        )}
+    if (diagramAutoSaveTimerRef.current) {
+      clearTimeout(diagramAutoSaveTimerRef.current);
+    }
 
-        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
-          <PreviewToggleButton
-            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
-            onToggle={() => {
-              if (isHtmlFile(selectedFile?.path ?? '')) {
-                saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview');
-              } else {
-                saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview');
-              }
-            }}
-          />
-        )}
+    const path = selectedFile.path;
+    diagramAutoSaveTimerRef.current = setTimeout(() => {
+      diagramAutoSaveTimerRef.current = null;
+      void saveDiagramXml(path, xml).then((saved) => {
+        if (!saved) return;
+        setDiagramSaved(true);
+        setTimeout(() => setDiagramSaved(false), 1500);
+      }).catch((error) => {
+        toast.error(error instanceof Error ? error.message : t('filesView.toast.saveFailed'));
+      });
+    }, AUTO_SAVE_DELAY);
+  }, [drawioViewMode, files.writeFile, saveDiagramXml, selectedFile?.path, t]);
 
-        {isJson && (
-          withTooltip(jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView'),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
-              className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
-              title={jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView')}
-            >
-              {jsonViewMode === 'tree' ? (
-                <Icon name="code-sslash" className="size-4" />
-              ) : (
-                <Icon name="node-tree" className="size-4" />
-              )}
-            </Button>
-          )
-        )}
-
-        {canCopy && (
-          withTooltip(t('filesView.editor.copyFileContents'),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={async () => {
-                const result = await copyTextToClipboard(fileContent);
-                if (result.ok) {
-                  setCopiedContent(true);
-                  if (copiedContentTimeoutRef.current !== null) {
-                    window.clearTimeout(copiedContentTimeoutRef.current);
-                  }
-                  copiedContentTimeoutRef.current = window.setTimeout(() => {
-                    setCopiedContent(false);
-                  }, 1200);
-                } else {
-                  toast.error(t('filesView.toast.copyFailed'));
-                }
-              }}
-              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={t('filesView.editor.copyFileContents')}
-              aria-label={t('filesView.editor.copyFileContents')}
-            >
-              {copiedContent ? (
-                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-              ) : (
-                <Icon name="clipboard" className="size-4" />
-              )}
-            </Button>
-          )
-        )}
-
-        {canCopyPath && (
-          withTooltip(t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath }),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={async () => {
-                const result = await copyTextToClipboard(displaySelectedPath);
-                if (result.ok) {
-                  setCopiedPath(true);
-                  if (copiedPathTimeoutRef.current !== null) {
-                    window.clearTimeout(copiedPathTimeoutRef.current);
-                  }
-                  copiedPathTimeoutRef.current = window.setTimeout(() => {
-                    setCopiedPath(false);
-                  }, 1200);
-                } else {
-                  toast.error(t('filesView.toast.copyFailed'));
-                }
-              }}
-              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-              aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-            >
-              {copiedPath ? (
-                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-              ) : (
-                <Icon name="file-copy-2" className="size-4" />
-              )}
-            </Button>
-          )
-        )}
-
-        {files.downloadFile && (
-          withTooltip(t('filesView.editor.saveFile'),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                const fn = files.downloadFile;
-                if (fn) void fn(selectedFile.path);
-              }}
-              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={t('filesView.editor.saveFile')}
-              aria-label={t('filesView.editor.saveFile')}
-            >
-              <Icon name="download" className="size-4" />
-            </Button>
-          )
-        )}
-
-        {exitFullscreenOnly ? (
-          withTooltip(t('filesView.editor.exitFullscreen'),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsFullscreen(false)}
-              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={t('filesView.editor.exitFullscreen')}
-              aria-label={t('filesView.editor.exitFullscreen')}
-            >
-              <Icon name="fullscreen-exit" className="size-4" />
-            </Button>
-          )
-        ) : (!isMobile && mode === 'full' && (
-          withTooltip(isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen'),
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsFullscreen(!isFullscreen)}
-              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
-              aria-label={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
-            >
-              {isFullscreen ? (
-                <Icon name="fullscreen-exit" className="size-4" />
-              ) : (
-                <Icon name="fullscreen" className="size-4" />
-              )}
-            </Button>
-          )
-        ))}
-      </div>
-    );
-  };
-
-  const fileViewer = (
-    <div
-      className="relative flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden"
-    >
-      <Dialog open={confirmDiscardOpen} onOpenChange={(open) => {
-        // Intentionally no "cancel" action. Keep dialog modal.
-        if (!open) {
-          setConfirmDiscardOpen(true);
-        }
-      }}>
-        <DialogContent showCloseButton={false} className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('filesView.unsaved.title')}</DialogTitle>
-            <DialogDescription>
-              {t('filesView.unsaved.description')}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => void saveAndContinue()}
-              disabled={isSaving}
-              className="border-[var(--status-success-border)] bg-[var(--status-success-background)] text-[var(--status-success)] hover:bg-[rgb(var(--status-success)/0.2)]"
-            >
-              {t('filesView.unsaved.saveChanges')}
-            </Button>
-            <Button variant="destructive" onClick={discardAndContinue}>{t('filesView.unsaved.discard')}</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <div className={cn('flex flex-col flex-shrink-0', showEditorTabsRow && 'border-b border-border/40')}>
-        {/* Row 1: Tabs */}
-        {showEditorTabsRow ? (
-        <div className="flex min-w-0 items-center px-3 py-1.5">
-          {isMobile && showMobilePageContent && (
-            <button
-              type="button"
-              onClick={() => setShowMobilePageContent(false)}
-              aria-label={t('filesView.editor.back')}
-              className="inline-flex size-7 flex-shrink-0 items-center justify-center mr-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-            >
-              <Icon name="arrow-left-s" className="size-5" />
-            </button>
-          )}
-
-          {isMobile ? (
-            selectedFile ? (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    type="button"
-                    className="inline-flex min-w-0 max-w-full items-center gap-1 text-left typography-ui-label font-medium"
-                    aria-label={t('filesView.editor.openFilesAria')}
-                  >
-                    <FileTypeIcon filePath={selectedFile.path} extension={selectedFile.extension} className="size-3.5 flex-shrink-0" />
-                    <ScrollingFileName name={selectedFile.name} />
-                    <Icon name="arrow-down-s" className="size-4 flex-shrink-0 text-muted-foreground" />
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="w-[min(24rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)]">
-                  {openFiles.map((file) => {
-                    const isActive = selectedFile?.path === file.path;
-                    return (
-                      <DropdownMenuItem
-                        key={file.path}
-                        onSelect={(event) => {
-                          const target = event.target as HTMLElement;
-                          if (target.closest('[data-close-open-file]')) {
-                            event.preventDefault();
-                            return;
-                          }
-                          if (!isActive) {
-                            void handleSelectFile(file);
-                          }
-                        }}
-                        className={cn(
-                          'flex min-w-0 items-center justify-between gap-2 overflow-hidden',
-                          isActive && 'bg-[var(--interactive-selection)] text-[var(--interactive-selection-foreground)]'
-                        )}
-                      >
-                        <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
-                          <FileTypeIcon filePath={file.path} extension={file.extension} className="size-3.5 flex-shrink-0" />
-                          <ScrollingFileName name={file.name} />
-                        </span>
-                        <button
-                          type="button"
-                          data-close-open-file
-                          onPointerDown={(event) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                          }}
-                          onClick={(event) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            handleCloseFile(file.path);
-                          }}
-                          className="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-[var(--surface-muted-foreground)] hover:text-[var(--surface-foreground)]"
-                          aria-label={t('filesView.editor.closeFileAria', { name: file.name })}
-                        >
-                          <Icon name="close" className="size-3.5" />
-                        </button>
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : (
-              <div className="typography-ui-label font-medium truncate">{t('filesView.editor.selectFile')}</div>
-            )
-          ) : (
-            openFiles.length > 0 ? (
-              <div className="relative min-w-0 flex-1">
-                {editorTabsOverflow.left && (
-                  <div className="pointer-events-none absolute left-0 top-0 bottom-0 w-6 z-10 bg-gradient-to-r from-background to-transparent" />
-                )}
-                {editorTabsOverflow.right && (
-                  <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-6 z-10 bg-gradient-to-l from-background to-transparent" />
-                )}
-                <div
-                  ref={editorTabsScrollRef}
-                  className="flex min-w-0 items-center gap-1 overflow-x-auto scrollbar-none"
-                  style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-                >
-                  {openFiles.map((file) => {
-                    const isActive = selectedFile?.path === file.path;
-                    return (
-                      <div
-                        key={file.path}
-                        title={getDisplayPath(root, file.path)}
-                        className={cn(
-                          'group inline-flex items-center gap-1 rounded-md border px-2 py-1 typography-ui-label transition-colors whitespace-nowrap',
-                          isActive
-                            ? 'bg-[var(--interactive-selection)] border-[var(--primary-muted)] text-[var(--interactive-selection-foreground)]'
-                            : 'bg-transparent border-[var(--interactive-border)] text-[var(--surface-muted-foreground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]'
-                        )}
-                      >
-                        <FileTypeIcon filePath={file.path} extension={file.extension} className="size-3.5 flex-shrink-0" />
-                        <button
-                          type="button"
-                          onClick={() => {
-                            if (!isActive) {
-                              void handleSelectFile(file);
-                            }
-                          }}
-                          className="max-w-[12rem] truncate text-left"
-                        >
-                          {file.name}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleCloseFile(file.path);
-                          }}
-                          className={cn(
-                            'rounded-sm p-0.5 text-[var(--surface-muted-foreground)] hover:text-[var(--surface-foreground)]',
-                            !isActive && !alwaysShowActions && 'opacity-0 group-hover:opacity-100'
-                          )}
-                          aria-label={t('filesView.editor.closeFileAria', { name: file.name })}
-                        >
-                          <Icon name="close" className="size-3.5" />
-                        </button>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            ) : (
-              <div className="typography-ui-label font-medium truncate">{t('filesView.editor.selectFile')}</div>
-            )
-          )}
-        </div>
-        ) : null}
-
-      </div>
-
-      <div className="flex-1 min-h-0 min-w-0 relative">
-        {selectedFile && !isSearchOpen && (
-          <div
-            ref={floatingToolbarRef}
-            className="absolute right-3 top-3 z-30"
-            onMouseEnter={() => setIsFloatingToolbarOpen(true)}
-            onMouseLeave={() => {
-              if (toolbarDropdownOpenCountRef.current > 0) return;
-              setIsFloatingToolbarOpen(false);
-            }}
-          >
-            {isFloatingToolbarOpen ? (
-              renderFloatingFileControls()
-            ) : (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="inline-flex">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setIsFloatingToolbarOpen(true)}
-                      className="size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 text-muted-foreground shadow-sm hover:text-foreground"
-                      aria-label={t('filesView.editor.showControlsAria')}
-                      title={t('filesView.editor.controlsTitle')}
-                    >
-                      <Icon name="more-2-fill" className="size-4" />
-                    </Button>
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.controlsTitle')}</TooltipContent>
-              </Tooltip>
-            )}
-          </div>
-        )}
-        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
-          {!selectedFile ? (
-            <div className="p-3 typography-ui text-muted-foreground">{t('filesView.editor.pickFileFromTree')}</div>
-          ) : (fileLoading || isImageAssetAuthLoading) ? (
-            suppressFileLoadingIndicator
-              ? <div className="p-3" />
-              : (
-                <div className="p-3 flex items-center gap-2 typography-ui text-muted-foreground">
-                  <Icon name="loader-4" className="size-4 animate-spin" />
-                  {t('filesView.state.loading')}
-                </div>
-              )
-          ) : fileError ? (
-            <div className="p-3 typography-ui text-[color:var(--status-error)]">{fileError}</div>
-          ) : isSelectedImage ? (
-            <div className="flex h-full items-center justify-center p-3">
-              <img
-                src={imageSrc}
-                alt={selectedFile?.name ?? t('filesView.editor.imageAltFallback')}
-                className="max-w-full max-h-[70vh] object-contain rounded-md border border-border/30 bg-primary/10"
-              />
-            </div>
-          ) : selectedFile && isJson && jsonViewMode === 'tree' ? (
-            <ErrorBoundary
-              fallback={
-                <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
-                  <div className="mb-1 font-medium text-destructive">{t('filesView.error.jsonViewerUnavailable')}</div>
-                  <div className="text-sm text-muted-foreground">
-                    {t('filesView.error.switchToTextMode')}
-                  </div>
-                </div>
-              }
-            >
-              <div className="h-full overflow-auto">
-                <JsonTreeView
-                  jsonString={fileContent}
-                  maxHeight="100%"
-                  initiallyExpandedDepth={2}
-                />
-              </div>
-            </ErrorBoundary>
-          ) : selectedFile && isMarkdown && getMdViewMode() === 'preview' ? (
-            <div className="h-full overflow-auto p-3">
-              {fileContent.length > 500 * 1024 && (
-                <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
-                  {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
-                </div>
-              )}
-              <ErrorBoundary
-                fallback={
-                  <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
-                    <div className="mb-1 font-medium text-destructive">{t('filesView.error.previewUnavailable')}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {t('filesView.error.switchToEditMode')}
-                    </div>
-                  </div>
-                }
-              >
-                <SimpleMarkdownRenderer
-                  content={fileContent}
-                  className="typography-markdown-body"
-                  stripFrontmatter
-                />
-              </ErrorBoundary>
-            </div>
-          ) : selectedFile && isHtml && htmlViewMode === 'preview' ? (
-            <div className="h-full overflow-hidden">
-              <iframe
-                srcDoc={(() => {
-                  // Inject base tag for relative paths (CSS/JS/images) to work
-                  const basePath = selectedFile.path.substring(0, selectedFile.path.lastIndexOf('/') + 1);
-                  if (!basePath) return fileContent;
-                  const baseTag = `<base href="${runtime.isDesktop ? basePath : basePath}">`;
-                  return fileContent.replace(/<head([^>]*)>/i, `<head$1>${baseTag}`);
-                })()}
-                className="w-full h-full border-none"
-                sandbox="allow-scripts allow-same-origin allow-forms"
-                title={t('filesView.editor.htmlPreviewTitle')}
-              />
-            </div>
-          ) : selectedFile && canUseShikiFileView && textViewMode === 'view' ? (
-            renderShikiFileView(selectedFile, draftContent)
-          ) : (
-            <div
-              className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}
-              ref={editorWrapperRef}
-            >
-              <div className={cn('h-full', shouldMaskEditorForPendingNavigation && 'invisible')}>
-                <CodeMirrorEditor
-                  value={draftContent}
-                  onChange={setDraftContent}
-                  readOnly={!canEdit}
-                  extensions={editorExtensions}
-                  className="h-full"
-                  blockWidgets={blockWidgets}
-                  onViewReady={(view) => {
-                    editorViewRef.current = view;
-                    setEditorViewReadyNonce((value) => value + 1);
-                    window.requestAnimationFrame(() => {
-                      nudgeEditorSelectionAboveKeyboard(view);
-                    });
-                  }}
-                  onViewDestroy={() => {
-                    if (editorViewRef.current) {
-                      editorViewRef.current = null;
-                    }
-                    setEditorViewReadyNonce((value) => value + 1);
-                  }}
-                  enableSearch
-                  searchOpen={isSearchOpen}
-                  onSearchOpenChange={setIsSearchOpen}
-                  highlightLines={lineSelection
-                    ? {
-                      start: Math.min(lineSelection.start, lineSelection.end),
-                      end: Math.max(lineSelection.start, lineSelection.end),
-                    }
-                    : undefined}
-                  lineNumbersConfig={{
-                    domEventHandlers: {
-                      mousedown: (view: EditorView, line: { from: number; to: number }, event: Event) => {
-                        if (!(event instanceof MouseEvent)) {
-                          return false;
-                        }
-                        if (event.button !== 0) {
-                          return false;
-                        }
-                        event.preventDefault();
-
-                        const lineNumber = view.state.doc.lineAt(line.from).number;
-
-                        // Mobile: tap-to-extend selection
-                          if (isMobile && lineSelection && !event.shiftKey) {
-                            const start = Math.min(lineSelection.start, lineSelection.end, lineNumber);
-                            const end = Math.max(lineSelection.start, lineSelection.end, lineNumber);
-                            setLineSelection({ start, end });
-                            isSelectingRef.current = false;
-                            selectionStartRef.current = null;
-                            setIsDragging(false);
-                            return true;
-                          }
-
-                          isSelectingRef.current = true;
-                          selectionStartRef.current = lineNumber;
-                          setIsDragging(true);
-
-                          if (lineSelection && event.shiftKey) {
-                          const start = Math.min(lineSelection.start, lineNumber);
-                          const end = Math.max(lineSelection.end, lineNumber);
-                          setLineSelection({ start, end });
-                        } else {
-                          setLineSelection({ start: lineNumber, end: lineNumber });
-                        }
-
-                        return true;
-                      },
-                      mouseover: (view: EditorView, line: { from: number; to: number }, event: Event) => {
-                        if (!(event instanceof MouseEvent)) {
-                          return false;
-                        }
-                        if (event.buttons !== 1) {
-                          return false;
-                        }
-                        if (!isSelectingRef.current || selectionStartRef.current === null) {
-                          return false;
-                        }
-
-                        const lineNumber = view.state.doc.lineAt(line.from).number;
-                          const start = Math.min(selectionStartRef.current, lineNumber);
-                          const end = Math.max(selectionStartRef.current, lineNumber);
-                          setLineSelection({ start, end });
-                          setIsDragging(true);
-                          return false;
-                        },
-                        mouseup: () => {
-                          isSelectingRef.current = false;
-                          selectionStartRef.current = null;
-                          setIsDragging(false);
-                          return false;
-                        },
-                      },
-                  }}
-                />
-              </div>
-              {shouldMaskEditorForPendingNavigation && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background">
-                  <div className="flex items-center gap-2 typography-ui text-muted-foreground">
-                    <Icon name="loader-4" className="size-4 animate-spin" />
-                    {t('filesView.state.openingFileAtChange')}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </ScrollableOverlay>
-      </div>
-    </div>
-  );
-
-  const hasTree = Boolean(root && childrenByDir[root]);
-  const rootLoadError = root ? loadErrorsByDir[root] : null;
-
-  const treePanel = (
-    <section className={cn(
-      "flex min-h-0 flex-col overflow-hidden",
-      isMobile ? "h-full w-full bg-background" : "h-full rounded-xl border border-border/60 bg-background/70"
-    )}>
-      <div className={cn("flex flex-col gap-2 py-2", isMobile ? "px-3" : "px-2")}>
-        <div className="flex items-center gap-2">
-          <div className="relative flex-1 min-w-0">
-            <Icon name="search" className="pointer-events-none absolute left-2 top-2 size-4 text-muted-foreground" />
-            <Input
-              ref={searchInputRef}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder={t('filesView.tree.search.placeholder')}
-              className="h-8 pl-8 pr-8 typography-meta"
+  const diagramEditorXml = React.useMemo(() => {
+    if (!isDrawio) {
+      return fileContent;
+    }
+    return diagramXmlRef.current || draftContent || fileContent;
+  }, [draftContent, fileContent, isDrawio]);
+
+  const getHtmlViewMode = React.useCallback((): PreviewViewMode => {
+    return htmlViewMode;
+  }, [htmlViewMode]);
+
+  React.useEffect(() => {
+    const applyDefaultFileViewerMode = (enabled: boolean) => {
+      const textMode: TextViewMode = enabled ? 'view' : 'edit';
+      const previewMode: PreviewViewMode = enabled ? 'preview' : 'edit';
+      const nextJsonMode: 'tree' | 'text' = enabled ? 'tree' : 'text';
+
+      for (const path of openPaths) {
+        textViewModeByPathRef.current[path] = textMode;
+        if (isMarkdownFile(path)) {
+          mdViewModeByPathRef.current[path] = previewMode;
+        }
+        if (isHtmlFile(path)) {
+          htmlViewModeByPathRef.current[path] = previewMode;
+        }
+      }
+
+      setTextViewMode(textMode);
+      setMdViewMode(previewMode);
+      setHtmlViewMode(previewMode);
+      setJsonViewMode(nextJsonMode);
+
+      try {
+        localStorage.setItem(MD_VIEWER_MODE_KEY, previewMode);
+        localStorage.setItem(HTML_VIEWER_MODE_KEY, previewMode);
+        localStorage.setItem(JSON_VIEWER_MODE_KEY, nextJsonMode);
+      } catch {
+        // Ignore localStorage errors
+      }
+    };
+
+    const handleFileViewerModeChanged = (event: Event) => {
+      const enabled = Boolean((event as CustomEvent<{ enabled?: boolean }>).detail?.enabled);
+      applyDefaultFileViewerMode(enabled);
+    };
+
+    window.addEventListener('openchamber:file-viewer-preview-mode-changed', handleFileViewerModeChanged);
+    return () => {
+      window.removeEventListener('openchamber:file-viewer-preview-mode-changed', handleFileViewerModeChanged);
+    };
+  }, [openPaths]);
+
+  React.useEffect(() => {
+    if (!pendingFileNavigation || !root) {
+      return;
+    }
+
+    const scheduleNavigationRetry = () => {
+      if (typeof window === 'undefined') {
+        return;
+      }
+      if (pendingNavigationRafRef.current !== null) {
+        return;
+      }
+
+      pendingNavigationRafRef.current = window.requestAnimationFrame(() => {
+        pendingNavigationRafRef.current = null;
+        setEditorViewReadyNonce((value) => value + 1);
+      });
+    };
+
+    const isEditorSyncedWithDraft = (view: EditorView, expectedContent: string): boolean => {
+      if (view.state.doc.length !== expectedContent.length) {
+        return false;
+      }
+
+      if (expectedContent.length === 0) {
+        return true;
+      }
+
+      const sampleSize = Math.min(128, expectedContent.length);
+      const startSample = view.state.sliceDoc(0, sampleSize);
+      if (startSample !== expectedContent.slice(0, sampleSize)) {
+        return false;
+      }
+
+      const endFrom = Math.max(0, expectedContent.length - sampleSize);
+      const endSample = view.state.sliceDoc(endFrom, expectedContent.length);
+      return endSample === expectedContent.slice(endFrom);
+    };
+
+    const targetPath = normalizePath(pendingFileNavigation.path);
+    if (!targetPath) {
+      setPendingFileNavigation(null);
+      pendingNavigationCycleRef.current = { key: '', attempts: 0 };
+      return;
+    }
+
+    const navigationKey = `${targetPath}:${pendingFileNavigation.line}:${pendingFileNavigation.column ?? 1}`;
+    if (pendingNavigationCycleRef.current.key !== navigationKey) {
+      pendingNavigationCycleRef.current = { key: navigationKey, attempts: 0 };
+    }
+
+    if (selectedFile?.path !== targetPath) {
+      if (confirmDiscardOpen) {
+        return;
+      }
+      void handleSelectFile(toFileNode(targetPath));
+      return;
+    }
+
+    if (fileLoading || loadedFilePath !== targetPath) {
+      return;
+    }
+
+    if (fileError || isSelectedImage) {
+      setPendingFileNavigation(null);
+      pendingNavigationCycleRef.current = { key: '', attempts: 0 };
+      return;
+    }
+
+    if (!canEdit) {
+      return;
+    }
+
+    if (textViewMode !== 'edit') {
+      setTextViewMode('edit');
+      return;
+    }
+
+    const view = editorViewRef.current;
+    if (!view) {
+      scheduleNavigationRetry();
+      return;
+    }
+
+    if (!isEditorSyncedWithDraft(view, draftContent)) {
+      scheduleNavigationRetry();
+      return;
+    }
+
+    const targetLineNumber = Math.max(1, Math.min(pendingFileNavigation.line, view.state.doc.lines));
+    const targetLine = view.state.doc.line(targetLineNumber);
+    const targetColumn = Math.max(1, pendingFileNavigation.column || 1);
+    const lineLength = Math.max(0, targetLine.to - targetLine.from);
+    const clampedColumnOffset = Math.min(lineLength, targetColumn - 1);
+    const targetPosition = targetLine.from + clampedColumnOffset;
+    const isAtTarget = view.state.selection.main.head === targetPosition;
+    const shouldDispatch = !isAtTarget || pendingNavigationCycleRef.current.attempts === 0;
+
+    if (shouldDispatch) {
+      pendingNavigationCycleRef.current.attempts += 1;
+      view.dispatch({
+        selection: { anchor: targetPosition },
+        effects: EditorView.scrollIntoView(targetPosition, { y: 'center' }),
+      });
+      view.focus();
+      scheduleNavigationRetry();
+      return;
+    }
+
+    if (typeof window !== 'undefined') {
+      window.requestAnimationFrame(() => {
+        const syncedView = editorViewRef.current;
+        if (!syncedView) {
+          return;
+        }
+
+        syncedView.dispatch({
+          selection: { anchor: targetPosition },
+          effects: EditorView.scrollIntoView(targetPosition, { y: 'center' }),
+        });
+        syncedView.focus();
+      });
+    }
+
+    setPendingFileNavigation(null);
+    pendingNavigationCycleRef.current = { key: '', attempts: 0 };
+  }, [
+    canEdit,
+    confirmDiscardOpen,
+    draftContent,
+    editorViewReadyNonce,
+    fileError,
+    fileLoading,
+    isSelectedImage,
+    loadedFilePath,
+    handleSelectFile,
+    pendingFileNavigation,
+    root,
+    selectedFile?.path,
+    setPendingFileNavigation,
+    textViewMode,
+    toFileNode,
+  ]);
+
+  React.useEffect(() => {
+    if (!pendingFileFocusPath || !root) {
+      return;
+    }
+
+    const targetPath = normalizePath(pendingFileFocusPath);
+    if (!targetPath) {
+      setPendingFileFocusPath(null);
+      return;
+    }
+
+    if (selectedFile?.path !== targetPath) {
+      if (confirmDiscardOpen) {
+        return;
+      }
+      void handleSelectFile(toFileNode(targetPath));
+      return;
+    }
+
+    if (fileLoading || loadedFilePath !== targetPath || fileError || isSelectedImage) {
+      return;
+    }
+
+    if (canEdit && textViewMode === 'edit') {
+      const view = editorViewRef.current;
+      if (!view) {
+        return;
+      }
+      view.focus();
+    }
+
+    setPendingFileFocusPath(null);
+  }, [
+    canEdit,
+    confirmDiscardOpen,
+    fileError,
+    fileLoading,
+    handleSelectFile,
+    isSelectedImage,
+    loadedFilePath,
+    pendingFileFocusPath,
+    root,
+    selectedFile?.path,
+    setPendingFileFocusPath,
+    textViewMode,
+    toFileNode,
+  ]);
+
+  const nudgeEditorSelectionAboveKeyboard = React.useCallback((view: EditorView | null) => {
+    if (!isMobile || !view || !view.hasFocus || typeof window === 'undefined') {
+      return;
+    }
+
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return;
+    }
+
+    const layoutHeight = document.documentElement.clientHeight || window.innerHeight;
+    const occludedBottom = Math.max(0, layoutHeight - (viewport.offsetTop + viewport.height));
+    if (occludedBottom <= 0) {
+      return;
+    }
+
+    const head = view.state.selection.main.head;
+    const cursorRect = view.coordsAtPos(head);
+    if (!cursorRect) {
+      return;
+    }
+
+    const visibleBottom = Math.round(viewport.offsetTop + viewport.height);
+    const clearance = 20;
+    const overlap = cursorRect.bottom + clearance - visibleBottom;
+    if (overlap <= 0) {
+      return;
+    }
+
+    view.scrollDOM.scrollTop += overlap;
+  }, [isMobile]);
+
+  React.useEffect(() => {
+    if (!isMobile || typeof window === 'undefined') {
+      return;
+    }
+
+    const runNudge = () => {
+      window.requestAnimationFrame(() => {
+        nudgeEditorSelectionAboveKeyboard(editorViewRef.current);
+      });
+    };
+
+    const viewport = window.visualViewport;
+    viewport?.addEventListener('resize', runNudge);
+    viewport?.addEventListener('scroll', runNudge, { passive: true });
+    document.addEventListener('selectionchange', runNudge);
+
+    return () => {
+      viewport?.removeEventListener('resize', runNudge);
+      viewport?.removeEventListener('scroll', runNudge);
+      document.removeEventListener('selectionchange', runNudge);
+    };
+  }, [isMobile, nudgeEditorSelectionAboveKeyboard]);
+
+  React.useEffect(() => {
+    if (!canEdit || textViewMode !== 'edit' || isMobile) {
+      return;
+    }
+
+    const goToLineCombo = getEffectiveShortcutCombo('open_go_to_line', shortcutOverrides);
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as Element | null;
+      if (target?.closest('[role="dialog"]')) {
+        return;
+      }
+
+      const isEditorTarget = Boolean(target?.closest('.cm-editor'));
+      const isTypingTarget = Boolean(
+        target?.closest('input, textarea, [contenteditable="true"], [role="textbox"]')
+      );
+      if (isTypingTarget && !isEditorTarget) {
+        return;
+      }
+
+      const activeElement = document.activeElement as Element | null;
+      const editorHasFocus = Boolean(activeElement?.closest('.cm-editor'));
+      if (!editorHasFocus) {
+        return;
+      }
+
+      if (eventMatchesShortcut(event, goToLineCombo)) {
+        event.preventDefault();
+        setIsGoToLineOpen(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [canEdit, isMobile, shortcutOverrides, textViewMode]);
+
+  const editorExtensions = React.useMemo(() => {
+    if (!selectedFile?.path) {
+      return [createFlexokiCodeMirrorTheme(currentTheme)];
+    }
+
+    const extensions = [createFlexokiCodeMirrorTheme(currentTheme)];
+    const language = staticLanguageExtension ?? dynamicLanguageExtension;
+    if (language) {
+      extensions.push(language);
+    }
+    if (wrapLines) {
+      extensions.push(EditorView.lineWrapping);
+    }
+    if (isMobile) {
+      extensions.push(EditorView.updateListener.of((update) => {
+        if (!update.view.hasFocus) {
+          return;
+        }
+        if (!(update.selectionSet || update.focusChanged || update.viewportChanged || update.geometryChanged)) {
+          return;
+        }
+
+        window.requestAnimationFrame(() => {
+          nudgeEditorSelectionAboveKeyboard(update.view);
+        });
+      }));
+    }
+    return extensions;
+  }, [currentTheme, selectedFile?.path, staticLanguageExtension, dynamicLanguageExtension, wrapLines, isMobile, nudgeEditorSelectionAboveKeyboard]);
+
+  const pierreTheme = React.useMemo(
+    () => ({ light: lightTheme.metadata.id, dark: darkTheme.metadata.id }),
+    [lightTheme.metadata.id, darkTheme.metadata.id],
+  );
+
+  const imageAssetAuthKey = selectedFile?.path && isSelectedImage && !runtime.isDesktop && !isSelectedSvg
+    ? `${selectedFile.path}|${selectedFileReadOptions.allowOutsideWorkspace ? 'outside' : 'workspace'}`
+    : '';
+
+  React.useEffect(() => {
+    if (!imageAssetAuthKey) {
+      setImageAssetAuthReadyKey('');
+      return;
+    }
+
+    let cancelled = false;
+    setImageAssetAuthReadyKey('');
+    void refreshRuntimeUrlAuthToken(getRuntimeApiBaseUrl())
+      .then((token) => {
+        if (!cancelled && token) setImageAssetAuthReadyKey(imageAssetAuthKey);
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [imageAssetAuthKey]);
+
+  const isImageAssetAuthLoading = Boolean(imageAssetAuthKey && imageAssetAuthReadyKey !== imageAssetAuthKey);
+
+  const imageSrc = selectedFile?.path && isSelectedImage
+    ? (runtime.isDesktop
+      ? (isSelectedSvg
+        ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}`
+        : desktopImageSrc)
+      : (isSelectedSvg
+        ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}`
+        : imageAssetAuthReadyKey === imageAssetAuthKey ? getRuntimeUrlResolver().authenticatedAsset('/api/fs/raw', {
+          path: selectedFile.path,
+          allowOutsideWorkspace: selectedFileReadOptions.allowOutsideWorkspace ? 'true' : undefined,
+        }) : ''))
+    : '';
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const resolveDesktopImage = async () => {
+      if (!runtime.isDesktop || !selectedFile?.path || !isSelectedImage || isSelectedSvg) {
+        setDesktopImageSrc('');
+        return;
+      }
+
+      setFileError(null);
+
+      const srcPromise = files.readFileBinary
+        ? files.readFileBinary(selectedFile.path, selectedFileReadOptions).then((result) => result.dataUrl)
+        : Promise.resolve(getRuntimeUrlResolver().authenticatedAsset('/api/fs/raw', {
+          path: selectedFile.path,
+          allowOutsideWorkspace: selectedFileReadOptions.allowOutsideWorkspace ? 'true' : undefined,
+        }));
+
+      await srcPromise
+        .then((src) => {
+          if (!cancelled) {
+            setDesktopImageSrc(src);
+            setLoadedFilePath(selectedFile.path);
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            setDesktopImageSrc('');
+            setFileError(error instanceof Error ? error.message : t('filesView.error.readFileFailed'));
+            setLoadedFilePath(null);
+          }
+        })
+        .finally(() => {
+          if (!cancelled) {
+            setFileLoading(false);
+          }
+        });
+    };
+
+    void resolveDesktopImage();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [files, isSelectedImage, isSelectedSvg, runtime.isDesktop, selectedFile?.path, selectedFileReadOptions, t]);
+
+  const handleCloseDialog = React.useCallback(() => setActiveDialog(null), []);
+
+  const blockWidgets = React.useMemo(() => {
+    return buildCodeMirrorCommentWidgets({
+      drafts: filesFileDrafts,
+      editingDraftId,
+      commentText,
+      selection: lineSelection,
+      isDragging,
+      fileLabel: selectedFile?.path ?? '',
+      newWidgetId: 'files-new-comment-input',
+      mapDraftToRange: (draft) => ({ start: draft.startLine, end: draft.endLine }),
+      onSave: handleSaveComment,
+      onCancel: () => {
+        setLineSelection(null);
+        cancel();
+      },
+      onEdit: (draft) => {
+        startEdit(draft);
+        setLineSelection({ start: draft.startLine, end: draft.endLine });
+      },
+      onDelete: deleteDraft,
+    });
+  }, [cancel, commentText, deleteDraft, editingDraftId, filesFileDrafts, handleSaveComment, isDragging, lineSelection, selectedFile?.path, startEdit]);
+
+  const renderShikiFileView = React.useCallback((file: FileNode, content: string) => {
+    return (
+      <div className="h-full">
+        <PierreFile
+          file={{
+            name: file.name,
+            contents: content,
+            lang: getLanguageFromExtension(file.path) || undefined,
+          }}
+          options={{
+            disableFileHeader: true,
+            overflow: wrapLines ? 'wrap' : 'scroll',
+            theme: pierreTheme,
+            themeType: currentTheme.metadata.variant === 'dark' ? 'dark' : 'light',
+          }}
+          className="block h-full w-full"
+          style={{ height: '100%' }}
+        />
+      </div>
+    );
+  }, [currentTheme.metadata.variant, pierreTheme, wrapLines]);
+
+  const renderFloatingFileControls = ({ exitFullscreenOnly = false }: { exitFullscreenOnly?: boolean } = {}) => {
+    if (!selectedFile) {
+      return null;
+    }
+
+    const withTooltip = (label: React.ReactNode, trigger: React.ReactElement) => (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex">
+            {trigger}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={6}>{label}</TooltipContent>
+      </Tooltip>
+    );
+
+    return (
+      <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
+        {canEdit && textViewMode === 'edit' && (
+          <>
+            {isSaving ? (
+              <span className="flex items-center gap-1 px-1 text-muted-foreground typography-meta">
+                <Icon name="loader-4" className="size-3.5 animate-spin" />
+                {t('filesView.editor.saving')}
+              </span>
+            ) : autoSaveEnabled && autoSaveStatus === 'saved' && !isDirty ? (
+              <span className="flex items-center gap-1 px-1 text-[color:var(--status-success)] typography-meta">
+                <Icon name="check" className="size-3.5" />
+                {t('filesView.editor.saved')}
+              </span>
+            ) : isDirty ? withTooltip(t(autoSaveEnabled ? 'filesView.editor.saveNowTitle' : 'filesView.editor.saveNowManualTitle', { shortcut: `${getModifierLabel()}+S` }),
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => void saveDraft()}
+                className="h-6 gap-1 px-1 text-muted-foreground opacity-80 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
+                title={t(autoSaveEnabled ? 'filesView.editor.saveNowTitle' : 'filesView.editor.saveNowManualTitle', { shortcut: `${getModifierLabel()}+S` })}
+                aria-label={t('filesView.editor.saveAria', { shortcut: `${getModifierLabel()}+S` })}
+              >
+                <Icon name="save-3" className="size-4" />
+              </Button>
+            ) : null}
+            {withTooltip(autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave'),
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
+                className={cn(
+                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
+                  autoSaveEnabled ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
+                )}
+                title={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
+                aria-label={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
+              >
+                {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
+              </Button>
+            )}
+          </>
+        )}
+
+        <DropdownMenu onOpenChange={handleToolbarDropdownOpenChange}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                    title={t('filesView.editor.openInDesktopApp')}
+                    aria-label={t('filesView.editor.openInDesktopApp')}
+                  >
+                    <Icon name="file-transfer" className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.openInDesktopApp')}</TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent align="end" className="w-56 max-h-[70vh] overflow-y-auto">
+            {openInApps.map((app) => (
+              <DropdownMenuItem
+                key={app.id}
+                className="flex items-center gap-2"
+                onClick={() => void handleOpenInApp(app)}
+              >
+                <OpenInAppListIcon label={app.label} iconDataUrl={app.iconDataUrl} />
+                <span className="typography-ui-label text-foreground">{app.label}</span>
+              </DropdownMenuItem>
+            ))}
+            {openInCacheStale ? (
+              <DropdownMenuItem
+                className="flex items-center gap-2"
+                onClick={() => void loadOpenInApps(true)}
+              >
+                <Icon name="refresh" className="size-4" />
+                <span className="typography-ui-label text-foreground">{t('filesView.editor.refreshApps')}</span>
+              </DropdownMenuItem>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {!isSelectedImage && (
+          <>
+            {withTooltip(wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap'),
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setWrapLines(!wrapLines)}
+                className={cn(
+                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
+                  wrapLines ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
+                )}
+                title={wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap')}
+              >
+                <Icon name="text-wrap" className="size-4" />
+              </Button>
+            )}
+            {textViewMode === 'edit' && (
+              <>
+                {withTooltip(t('filesView.editor.findInFile'),
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(event) => {
+                      setIsSearchOpen(!isSearchOpen);
+                      event.currentTarget.blur();
+                    }}
+                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                    title={t('filesView.editor.findInFile')}
+                  >
+                    <Icon name="search" className="size-4" />
+                  </Button>
+                )}
+                {withTooltip(t('filesView.editor.goToLine'),
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(event) => {
+                      setIsGoToLineOpen((open) => !open);
+                      event.currentTarget.blur();
+                    }}
+                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                    title={t('filesView.editor.goToLine')}
+                  >
+                    <Icon name="menu-fold-2" className="size-4" />
+                  </Button>
+                )}
+                <GoToLineDialog
+                  open={isGoToLineOpen}
+                  onOpenChange={setIsGoToLineOpen}
+                  view={editorViewRef.current}
+                  variant="inline"
+                />
+              </>
+            )}
+          </>
+        )}
+
+        {canUseShikiFileView && canEdit && !isJson && !isHtml && (
+          <PreviewToggleButton
+            currentMode={textViewMode === 'view' ? 'preview' : 'edit'}
+            onToggle={() => {
+              saveTextViewMode(textViewMode === 'view' ? 'edit' : 'view');
+            }}
+          />
+        )}
+
+        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
+          <PreviewToggleButton
+            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
+            onToggle={() => {
+              if (isHtmlFile(selectedFile?.path ?? '')) {
+                saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview');
+              } else {
+                saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview');
+              }
+            }}
+          />
+        )}
+        {isDrawio && (
+          <>
+            <PreviewToggleButton
+              currentMode={drawioViewMode}
+              onToggle={() => saveDrawioViewMode(drawioViewMode === 'preview' ? 'edit' : 'preview')}
             />
-            {searchQuery.trim().length > 0 && (
-              <button
-                type="button"
-                aria-label={t('filesView.tree.search.clearAria')}
-                className="absolute right-2 top-2 inline-flex size-4 items-center justify-center text-muted-foreground hover:text-foreground"
-                onClick={() => {
-                  setSearchQuery('');
-                  searchInputRef.current?.focus();
-                }}
-              >
-                <Icon name="close" className="size-4" />
-              </button>
-            )}
-          </div>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex flex-shrink-0">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
-                  className="size-8 p-0 flex-shrink-0"
-                  title={t('filesView.tree.actions.newFileTitle')}
-                  aria-label={t('filesView.tree.actions.newFileTitle')}
-                >
-                  <Icon name="file-add" className="size-4" />
-                </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFileTitle')}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex flex-shrink-0">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
-                  className="size-8 p-0 flex-shrink-0"
-                  title={t('filesView.tree.actions.newFolderTitle')}
-                  aria-label={t('filesView.tree.actions.newFolderTitle')}
-                >
-                  <Icon name="folder-add" className="size-4" />
-                </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFolderTitle')}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex flex-shrink-0">
-                <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="size-8 p-0 flex-shrink-0" title={t('filesView.tree.actions.refreshTitle')} aria-label={t('filesView.tree.actions.refreshTitle')}>
-                  <Icon name="refresh" className="size-4" />
-                </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.refreshTitle')}</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-
-      <ScrollableOverlay outerClassName="flex-1 min-h-0" className={cn("py-2", isMobile ? "px-3" : "px-2")}>
-        <ul className="flex flex-col">
-          {searching ? (
-            <li className="flex items-center gap-1.5 px-2 py-1 typography-meta text-muted-foreground">
-              <Icon name="loader-4" className="size-4 animate-spin" />
-              {t('filesView.tree.search.searching')}
-            </li>
-          ) : searchResults.length > 0 ? (
-            searchResults.map((node) => {
-              const isActive = selectedFile?.path === node.path;
-              return (
-                <li key={node.path}>
-                  <button
-                    type="button"
-                    onClick={() => void handleSelectFile(node)}
-                    className={cn(
-                      'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors',
-                      isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
-                    )}
-                  >
-                    {getFileIcon(node.path, node.extension)}
-                    <span
-                      className="min-w-0 flex-1 truncate typography-meta"
-                      style={{ direction: 'rtl', textAlign: 'left' }}
-                      title={node.path}
-                    >
-                      {node.relativePath ?? node.path}
-                    </span>
-                  </button>
-                </li>
-              );
-            })
-          ) : rootLoadError ? (
-            <li className="flex flex-col gap-2 px-2 py-1 typography-meta text-muted-foreground">
-              <span className="text-[var(--status-error)]">{rootLoadError}</span>
-              <Button variant="outline" size="xs" className="w-fit gap-1.5" onClick={() => void refreshRoot()}>
-                <Icon name="refresh" className="size-3.5" />
-                {t('filesView.tree.actions.refreshTitle')}
-              </Button>
-            </li>
-          ) : hasTree ? (
-            renderTree(root, 0)
-          ) : (
-            <li className="px-2 py-1 typography-meta text-muted-foreground">{t('filesView.state.loading')}</li>
-          )}
-        </ul>
-      </ScrollableOverlay>
-    </section>
-  );
-
-  // Fullscreen file viewer overlay
-  const fullscreenViewer = mode === 'full' && isFullscreen && selectedFile && (
-    <div className="absolute inset-0 z-50 flex flex-col bg-background">
-      {/* Fullscreen content */}
-      <div className="flex-1 min-h-0 min-w-0 relative">
-        <div className="absolute right-4 top-4 z-30">
-          {renderFloatingFileControls({ exitFullscreenOnly: true })}
-        </div>
-        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
-          {(fileLoading || isImageAssetAuthLoading) ? (
-            suppressFileLoadingIndicator
-              ? <div className="p-4" />
-              : (
-                <div className="p-4 flex items-center gap-2 typography-ui text-muted-foreground">
-                  <Icon name="loader-4" className="size-4 animate-spin" />
-                  Loading…
-                </div>
-              )
-          ) : fileError ? (
-            <div className="p-4 typography-ui text-[color:var(--status-error)]">{fileError}</div>
-          ) : isSelectedImage ? (
-            <div className="flex h-full items-center justify-center p-4">
-              <img
-                src={imageSrc}
-                alt={selectedFile.name}
-                className="max-w-full max-h-full object-contain rounded-md border border-border/30 bg-primary/10"
-              />
-            </div>
-          ) : isMarkdown && getMdViewMode() === 'preview' ? (
-            <div className="h-full overflow-auto p-4">
-              {fileContent.length > 500 * 1024 && (
-                  <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
-                    {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
-                  </div>
-                )}
-              <ErrorBoundary
-                fallback={
-                  <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
-                    <div className="mb-1 font-medium text-destructive">{t('filesView.error.previewUnavailable')}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {t('filesView.error.switchToEditMode')}
-                    </div>
-                  </div>
-                }
-              >
-                <SimpleMarkdownRenderer
-                  content={fileContent}
-                  className="typography-markdown-body"
-                  stripFrontmatter
-                />
-              </ErrorBoundary>
-            </div>
-          ) : canUseShikiFileView && textViewMode === 'view' ? (
-            renderShikiFileView(selectedFile, draftContent)
-          ) : (
-            <div className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}>
-              <div className={cn('h-full', shouldMaskEditorForPendingNavigation && 'invisible')}>
-              <CodeMirrorEditor
-                value={draftContent}
-                onChange={setDraftContent}
-                readOnly={!canEdit}
-                extensions={editorExtensions}
-                className="h-full"
-                onViewReady={(view) => {
-                  editorViewRef.current = view;
-                  window.requestAnimationFrame(() => {
-                    nudgeEditorSelectionAboveKeyboard(view);
-                  });
-                }}
-                onViewDestroy={() => {
-                  if (editorViewRef.current) {
-                    editorViewRef.current = null;
+            {drawioViewMode === 'preview' && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={async () => {
+                  const xml = diagramEditorRef.current?.getXml();
+                  if (diagramAutoSaveTimerRef.current) {
+                    clearTimeout(diagramAutoSaveTimerRef.current);
+                    diagramAutoSaveTimerRef.current = null;
+                  }
+                  if (selectedFile?.path && xml) {
+                    const saved = await saveDiagramXml(selectedFile.path, xml);
+                    if (!saved) return;
+                    setDiagramSaved(true);
+                    setTimeout(() => setDiagramSaved(false), 1500);
                   }
                 }}
+                className="size-6 p-0 text-foreground hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                title={t('filesView.diagram.saveDiagram')}
+              >
+                {diagramSaved ? (
+                  <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
+                ) : (
+                  <Icon name="save-3" className="size-4" />
+                )}
+              </Button>
+            )}
+          </>
+        )}
+
+        {isJson && (
+          withTooltip(jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
+              className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
+              title={jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView')}
+            >
+              {jsonViewMode === 'tree' ? (
+                <Icon name="code-sslash" className="size-4" />
+              ) : (
+                <Icon name="node-tree" className="size-4" />
+              )}
+            </Button>
+          )
+        )}
+
+        {canCopy && (
+          withTooltip(t('filesView.editor.copyFileContents'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                const result = await copyTextToClipboard(fileContent);
+                if (result.ok) {
+                  setCopiedContent(true);
+                  if (copiedContentTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedContentTimeoutRef.current);
+                  }
+                  copiedContentTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedContent(false);
+                  }, 1200);
+                } else {
+                  toast.error(t('filesView.toast.copyFailed'));
+                }
+              }}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.copyFileContents')}
+              aria-label={t('filesView.editor.copyFileContents')}
+            >
+              {copiedContent ? (
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
+              ) : (
+                <Icon name="clipboard" className="size-4" />
+              )}
+            </Button>
+          )
+        )}
+
+        {canCopyPath && (
+          withTooltip(t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath }),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                const result = await copyTextToClipboard(displaySelectedPath);
+                if (result.ok) {
+                  setCopiedPath(true);
+                  if (copiedPathTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedPathTimeoutRef.current);
+                  }
+                  copiedPathTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedPath(false);
+                  }, 1200);
+                } else {
+                  toast.error(t('filesView.toast.copyFailed'));
+                }
+              }}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+              aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+            >
+              {copiedPath ? (
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
+              ) : (
+                <Icon name="file-copy-2" className="size-4" />
+              )}
+            </Button>
+          )
+        )}
+
+        {files.downloadFile && (
+          withTooltip(t('filesView.editor.saveFile'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                const fn = files.downloadFile;
+                if (fn) void fn(selectedFile.path);
+              }}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.saveFile')}
+              aria-label={t('filesView.editor.saveFile')}
+            >
+              <Icon name="download" className="size-4" />
+            </Button>
+          )
+        )}
+
+        {exitFullscreenOnly ? (
+          withTooltip(t('filesView.editor.exitFullscreen'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsFullscreen(false)}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.exitFullscreen')}
+              aria-label={t('filesView.editor.exitFullscreen')}
+            >
+              <Icon name="fullscreen-exit" className="size-4" />
+            </Button>
+          )
+        ) : (!isMobile && mode === 'full' && (
+          withTooltip(isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsFullscreen(!isFullscreen)}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
+              aria-label={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
+            >
+              {isFullscreen ? (
+                <Icon name="fullscreen-exit" className="size-4" />
+              ) : (
+                <Icon name="fullscreen" className="size-4" />
+              )}
+            </Button>
+          )
+        ))}
+      </div>
+    );
+  };
+
+  const fileViewer = (
+    <div
+      className="relative flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden"
+    >
+      <Dialog open={confirmDiscardOpen} onOpenChange={(open) => {
+        // Intentionally no "cancel" action. Keep dialog modal.
+        if (!open) {
+          setConfirmDiscardOpen(true);
+        }
+      }}>
+        <DialogContent showCloseButton={false} className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('filesView.unsaved.title')}</DialogTitle>
+            <DialogDescription>
+              {t('filesView.unsaved.description')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => void saveAndContinue()}
+              disabled={isSaving}
+              className="border-[var(--status-success-border)] bg-[var(--status-success-background)] text-[var(--status-success)] hover:bg-[rgb(var(--status-success)/0.2)]"
+            >
+              {t('filesView.unsaved.saveChanges')}
+            </Button>
+            <Button variant="destructive" onClick={discardAndContinue}>{t('filesView.unsaved.discard')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <div className={cn('flex flex-col flex-shrink-0', showEditorTabsRow && 'border-b border-border/40')}>
+        {/* Row 1: Tabs */}
+        {showEditorTabsRow ? (
+        <div className="flex min-w-0 items-center px-3 py-1.5">
+          {isMobile && showMobilePageContent && (
+            <button
+              type="button"
+              onClick={() => setShowMobilePageContent(false)}
+              aria-label={t('filesView.editor.back')}
+              className="inline-flex size-7 flex-shrink-0 items-center justify-center mr-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            >
+              <Icon name="arrow-left-s" className="size-5" />
+            </button>
+          )}
+
+          {isMobile ? (
+            selectedFile ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    className="inline-flex min-w-0 max-w-full items-center gap-1 text-left typography-ui-label font-medium"
+                    aria-label={t('filesView.editor.openFilesAria')}
+                  >
+                    <FileTypeIcon filePath={selectedFile.path} extension={selectedFile.extension} className="size-3.5 flex-shrink-0" />
+                    <ScrollingFileName name={selectedFile.name} />
+                    <Icon name="arrow-down-s" className="size-4 flex-shrink-0 text-muted-foreground" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="w-[min(24rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)]">
+                  {openFiles.map((file) => {
+                    const isActive = selectedFile?.path === file.path;
+                    return (
+                      <DropdownMenuItem
+                        key={file.path}
+                        onSelect={(event) => {
+                          const target = event.target as HTMLElement;
+                          if (target.closest('[data-close-open-file]')) {
+                            event.preventDefault();
+                            return;
+                          }
+                          if (!isActive) {
+                            void handleSelectFile(file);
+                          }
+                        }}
+                        className={cn(
+                          'flex min-w-0 items-center justify-between gap-2 overflow-hidden',
+                          isActive && 'bg-[var(--interactive-selection)] text-[var(--interactive-selection-foreground)]'
+                        )}
+                      >
+                        <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+                          <FileTypeIcon filePath={file.path} extension={file.extension} className="size-3.5 flex-shrink-0" />
+                          <ScrollingFileName name={file.name} />
+                        </span>
+                        <button
+                          type="button"
+                          data-close-open-file
+                          onPointerDown={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                          }}
+                          onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleCloseFile(file.path);
+                          }}
+                          className="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-[var(--surface-muted-foreground)] hover:text-[var(--surface-foreground)]"
+                          aria-label={t('filesView.editor.closeFileAria', { name: file.name })}
+                        >
+                          <Icon name="close" className="size-3.5" />
+                        </button>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <div className="typography-ui-label font-medium truncate">{t('filesView.editor.selectFile')}</div>
+            )
+          ) : (
+            openFiles.length > 0 ? (
+              <div className="relative min-w-0 flex-1">
+                {editorTabsOverflow.left && (
+                  <div className="pointer-events-none absolute left-0 top-0 bottom-0 w-6 z-10 bg-gradient-to-r from-background to-transparent" />
+                )}
+                {editorTabsOverflow.right && (
+                  <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-6 z-10 bg-gradient-to-l from-background to-transparent" />
+                )}
+                <div
+                  ref={editorTabsScrollRef}
+                  className="flex min-w-0 items-center gap-1 overflow-x-auto scrollbar-none"
+                  style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                >
+                  {openFiles.map((file) => {
+                    const isActive = selectedFile?.path === file.path;
+                    return (
+                      <div
+                        key={file.path}
+                        title={getDisplayPath(root, file.path)}
+                        className={cn(
+                          'group inline-flex items-center gap-1 rounded-md border px-2 py-1 typography-ui-label transition-colors whitespace-nowrap',
+                          isActive
+                            ? 'bg-[var(--interactive-selection)] border-[var(--primary-muted)] text-[var(--interactive-selection-foreground)]'
+                            : 'bg-transparent border-[var(--interactive-border)] text-[var(--surface-muted-foreground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]'
+                        )}
+                      >
+                        <FileTypeIcon filePath={file.path} extension={file.extension} className="size-3.5 flex-shrink-0" />
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (!isActive) {
+                              void handleSelectFile(file);
+                            }
+                          }}
+                          className="max-w-[12rem] truncate text-left"
+                        >
+                          {file.name}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            handleCloseFile(file.path);
+                          }}
+                          className={cn(
+                            'rounded-sm p-0.5 text-[var(--surface-muted-foreground)] hover:text-[var(--surface-foreground)]',
+                            !isActive && !alwaysShowActions && 'opacity-0 group-hover:opacity-100'
+                          )}
+                          aria-label={t('filesView.editor.closeFileAria', { name: file.name })}
+                        >
+                          <Icon name="close" className="size-3.5" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <div className="typography-ui-label font-medium truncate">{t('filesView.editor.selectFile')}</div>
+            )
+          )}
+        </div>
+        ) : null}
+
+      </div>
+
+      <div className="flex-1 min-h-0 min-w-0 relative">
+        {selectedFile && !isSearchOpen && (
+          <div
+            ref={floatingToolbarRef}
+            className="absolute right-3 top-3 z-30"
+            onMouseEnter={() => setIsFloatingToolbarOpen(true)}
+            onMouseLeave={() => {
+              if (toolbarDropdownOpenCountRef.current > 0) return;
+              setIsFloatingToolbarOpen(false);
+            }}
+          >
+            {isFloatingToolbarOpen ? (
+              renderFloatingFileControls()
+            ) : (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setIsFloatingToolbarOpen(true)}
+                      className="size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 text-muted-foreground shadow-sm hover:text-foreground"
+                      aria-label={t('filesView.editor.showControlsAria')}
+                      title={t('filesView.editor.controlsTitle')}
+                    >
+                      <Icon name="more-2-fill" className="size-4" />
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.controlsTitle')}</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        )}
+        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
+          {!selectedFile ? (
+            <div className="p-3 typography-ui text-muted-foreground">{t('filesView.editor.pickFileFromTree')}</div>
+          ) : (fileLoading || isImageAssetAuthLoading) ? (
+            suppressFileLoadingIndicator
+              ? <div className="p-3" />
+              : (
+                <div className="p-3 flex items-center gap-2 typography-ui text-muted-foreground">
+                  <Icon name="loader-4" className="size-4 animate-spin" />
+                  {t('filesView.state.loading')}
+                </div>
+              )
+          ) : fileError ? (
+            <div className="p-3 typography-ui text-[color:var(--status-error)]">{fileError}</div>
+          ) : isSelectedImage ? (
+            <div className="flex h-full items-center justify-center p-3">
+              <img
+                src={imageSrc}
+                alt={selectedFile?.name ?? t('filesView.editor.imageAltFallback')}
+                className="max-w-full max-h-[70vh] object-contain rounded-md border border-border/30 bg-primary/10"
+              />
+            </div>
+          ) : selectedFile && isDrawio && drawioViewMode === 'preview' ? (
+            <div className="h-full overflow-hidden" style={{ minHeight: '400px' }}>
+              <DiagramEditor
+                key={`${selectedFile.path}:${drawioRemountNonce}`}
+                ref={diagramEditorRef}
+                xml={diagramEditorXml}
+                onChange={handleDiagramChange}
               />
-              </div>
-              {shouldMaskEditorForPendingNavigation && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background">
-                  <div className="flex items-center gap-2 typography-ui text-muted-foreground">
-                    <Icon name="loader-4" className="size-4 animate-spin" />
-                    {t('filesView.state.openingFileAtChange')}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </ScrollableOverlay>
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="flex h-full min-h-0 overflow-hidden bg-background relative">
-      <Dialogs
-        activeDialog={activeDialog}
-        dialogData={dialogData}
-        dialogInputValue={dialogInputValue}
-        onDialogInputChange={setDialogInputValue}
-        isDialogSubmitting={isDialogSubmitting}
-        onDialogSubmit={handleDialogSubmit}
-        onClose={handleCloseDialog}
-        inputRef={dialogInputRef}
-      />
-      {fullscreenViewer}
-      {isMobile ? (
-        showMobilePageContent ? (
-          fileViewer
-        ) : (
-          treePanel
-        )
-       ) : mode === 'editor-only' ? (
-         <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
-            <div className="flex-1 min-h-0 min-w-0 overflow-hidden bg-background">
-             {fileViewer}
-            </div>
-          </div>
-       ) : (
-         <div className="flex flex-1 min-h-0 min-w-0 gap-3 px-3 pb-3 pt-2">
-            {screenWidth >= 700 && (
-              <div className="w-72 flex-shrink-0 min-h-0 overflow-hidden">
-               {treePanel}
-             </div>
-           )}
-           <div className="flex-1 min-h-0 min-w-0 overflow-hidden rounded-xl border border-border/60 bg-background">
-             {fileViewer}
-           </div>
-         </div>
-       )}
-    </div>
-  );
-};
+            </div>
+          ) : selectedFile && isJson && jsonViewMode === 'tree' ? (
+            <ErrorBoundary
+              fallback={
+                <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
+                  <div className="mb-1 font-medium text-destructive">{t('filesView.error.jsonViewerUnavailable')}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {t('filesView.error.switchToTextMode')}
+                  </div>
+                </div>
+              }
+            >
+              <div className="h-full overflow-auto">
+                <JsonTreeView
+                  jsonString={fileContent}
+                  maxHeight="100%"
+                  initiallyExpandedDepth={2}
+                />
+              </div>
+            </ErrorBoundary>
+          ) : selectedFile && isMarkdown && getMdViewMode() === 'preview' ? (
+            <div className="h-full overflow-auto p-3">
+              {fileContent.length > 500 * 1024 && (
+                <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
+                  {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
+                </div>
+              )}
+              <ErrorBoundary
+                fallback={
+                  <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
+                    <div className="mb-1 font-medium text-destructive">{t('filesView.error.previewUnavailable')}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {t('filesView.error.switchToEditMode')}
+                    </div>
+                  </div>
+                }
+              >
+                <SimpleMarkdownRenderer
+                  content={fileContent}
+                  className="typography-markdown-body"
+                  stripFrontmatter
+                />
+              </ErrorBoundary>
+            </div>
+          ) : selectedFile && isHtml && htmlViewMode === 'preview' ? (
+            <div className="h-full overflow-hidden">
+              <iframe
+                srcDoc={(() => {
+                  // Inject base tag for relative paths (CSS/JS/images) to work
+                  const basePath = selectedFile.path.substring(0, selectedFile.path.lastIndexOf('/') + 1);
+                  if (!basePath) return fileContent;
+                  const baseTag = `<base href="${runtime.isDesktop ? basePath : basePath}">`;
+                  return fileContent.replace(/<head([^>]*)>/i, `<head$1>${baseTag}`);
+                })()}
+                className="w-full h-full border-none"
+                sandbox="allow-scripts allow-same-origin allow-forms"
+                title={t('filesView.editor.htmlPreviewTitle')}
+              />
+            </div>
+          ) : selectedFile && canUseShikiFileView && textViewMode === 'view' ? (
+            renderShikiFileView(selectedFile, draftContent)
+          ) : (
+            <div
+              className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}
+              ref={editorWrapperRef}
+            >
+              <div className={cn('h-full', shouldMaskEditorForPendingNavigation && 'invisible')}>
+                <CodeMirrorEditor
+                  value={draftContent}
+                  onChange={setDraftContent}
+                  readOnly={!canEdit}
+                  extensions={editorExtensions}
+                  className="h-full"
+                  blockWidgets={blockWidgets}
+                  onViewReady={(view) => {
+                    editorViewRef.current = view;
+                    setEditorViewReadyNonce((value) => value + 1);
+                    window.requestAnimationFrame(() => {
+                      nudgeEditorSelectionAboveKeyboard(view);
+                    });
+                  }}
+                  onViewDestroy={() => {
+                    if (editorViewRef.current) {
+                      editorViewRef.current = null;
+                    }
+                    setEditorViewReadyNonce((value) => value + 1);
+                  }}
+                  enableSearch
+                  searchOpen={isSearchOpen}
+                  onSearchOpenChange={setIsSearchOpen}
+                  highlightLines={lineSelection
+                    ? {
+                      start: Math.min(lineSelection.start, lineSelection.end),
+                      end: Math.max(lineSelection.start, lineSelection.end),
+                    }
+                    : undefined}
+                  lineNumbersConfig={{
+                    domEventHandlers: {
+                      mousedown: (view: EditorView, line: { from: number; to: number }, event: Event) => {
+                        if (!(event instanceof MouseEvent)) {
+                          return false;
+                        }
+                        if (event.button !== 0) {
+                          return false;
+                        }
+                        event.preventDefault();
+
+                        const lineNumber = view.state.doc.lineAt(line.from).number;
+
+                        // Mobile: tap-to-extend selection
+                          if (isMobile && lineSelection && !event.shiftKey) {
+                            const start = Math.min(lineSelection.start, lineSelection.end, lineNumber);
+                            const end = Math.max(lineSelection.start, lineSelection.end, lineNumber);
+                            setLineSelection({ start, end });
+                            isSelectingRef.current = false;
+                            selectionStartRef.current = null;
+                            setIsDragging(false);
+                            return true;
+                          }
+
+                          isSelectingRef.current = true;
+                          selectionStartRef.current = lineNumber;
+                          setIsDragging(true);
+
+                          if (lineSelection && event.shiftKey) {
+                          const start = Math.min(lineSelection.start, lineNumber);
+                          const end = Math.max(lineSelection.end, lineNumber);
+                          setLineSelection({ start, end });
+                        } else {
+                          setLineSelection({ start: lineNumber, end: lineNumber });
+                        }
+
+                        return true;
+                      },
+                      mouseover: (view: EditorView, line: { from: number; to: number }, event: Event) => {
+                        if (!(event instanceof MouseEvent)) {
+                          return false;
+                        }
+                        if (event.buttons !== 1) {
+                          return false;
+                        }
+                        if (!isSelectingRef.current || selectionStartRef.current === null) {
+                          return false;
+                        }
+
+                        const lineNumber = view.state.doc.lineAt(line.from).number;
+                          const start = Math.min(selectionStartRef.current, lineNumber);
+                          const end = Math.max(selectionStartRef.current, lineNumber);
+                          setLineSelection({ start, end });
+                          setIsDragging(true);
+                          return false;
+                        },
+                        mouseup: () => {
+                          isSelectingRef.current = false;
+                          selectionStartRef.current = null;
+                          setIsDragging(false);
+                          return false;
+                        },
+                      },
+                  }}
+                />
+              </div>
+              {shouldMaskEditorForPendingNavigation && (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background">
+                  <div className="flex items-center gap-2 typography-ui text-muted-foreground">
+                    <Icon name="loader-4" className="size-4 animate-spin" />
+                    {t('filesView.state.openingFileAtChange')}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </ScrollableOverlay>
+      </div>
+    </div>
+  );
+
+  const hasTree = Boolean(root && childrenByDir[root]);
+  const rootLoadError = root ? loadErrorsByDir[root] : null;
+
+  const treePanel = (
+    <section className={cn(
+      "flex min-h-0 flex-col overflow-hidden",
+      isMobile ? "h-full w-full bg-background" : "h-full rounded-xl border border-border/60 bg-background/70"
+    )}>
+      <div className={cn("flex flex-col gap-2 py-2", isMobile ? "px-3" : "px-2")}>
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1 min-w-0">
+            <Icon name="search" className="pointer-events-none absolute left-2 top-2 size-4 text-muted-foreground" />
+            <Input
+              ref={searchInputRef}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={t('filesView.tree.search.placeholder')}
+              className="h-8 pl-8 pr-8 typography-meta"
+            />
+            {searchQuery.trim().length > 0 && (
+              <button
+                type="button"
+                aria-label={t('filesView.tree.search.clearAria')}
+                className="absolute right-2 top-2 inline-flex size-4 items-center justify-center text-muted-foreground hover:text-foreground"
+                onClick={() => {
+                  setSearchQuery('');
+                  searchInputRef.current?.focus();
+                }}
+              >
+                <Icon name="close" className="size-4" />
+              </button>
+            )}
+          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
+                  className="size-8 p-0 flex-shrink-0"
+                  title={t('filesView.tree.actions.newFileTitle')}
+                  aria-label={t('filesView.tree.actions.newFileTitle')}
+                >
+                  <Icon name="file-add" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFileTitle')}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
+                  className="size-8 p-0 flex-shrink-0"
+                  title={t('filesView.tree.actions.newFolderTitle')}
+                  aria-label={t('filesView.tree.actions.newFolderTitle')}
+                >
+                  <Icon name="folder-add" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFolderTitle')}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="size-8 p-0 flex-shrink-0" title={t('filesView.tree.actions.refreshTitle')} aria-label={t('filesView.tree.actions.refreshTitle')}>
+                  <Icon name="refresh" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.refreshTitle')}</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      <ScrollableOverlay outerClassName="flex-1 min-h-0" className={cn("py-2", isMobile ? "px-3" : "px-2")}>
+        <ul className="flex flex-col">
+          {searching ? (
+            <li className="flex items-center gap-1.5 px-2 py-1 typography-meta text-muted-foreground">
+              <Icon name="loader-4" className="size-4 animate-spin" />
+              {t('filesView.tree.search.searching')}
+            </li>
+          ) : searchResults.length > 0 ? (
+            searchResults.map((node) => {
+              const isActive = selectedFile?.path === node.path;
+              return (
+                <li key={node.path}>
+                  <button
+                    type="button"
+                    onClick={() => void handleSelectFile(node)}
+                    className={cn(
+                      'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors',
+                      isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
+                    )}
+                  >
+                    {getFileIcon(node.path, node.extension)}
+                    <span
+                      className="min-w-0 flex-1 truncate typography-meta"
+                      style={{ direction: 'rtl', textAlign: 'left' }}
+                      title={node.path}
+                    >
+                      {node.relativePath ?? node.path}
+                    </span>
+                  </button>
+                </li>
+              );
+            })
+          ) : rootLoadError ? (
+            <li className="flex flex-col gap-2 px-2 py-1 typography-meta text-muted-foreground">
+              <span className="text-[var(--status-error)]">{rootLoadError}</span>
+              <Button variant="outline" size="xs" className="w-fit gap-1.5" onClick={() => void refreshRoot()}>
+                <Icon name="refresh" className="size-3.5" />
+                {t('filesView.tree.actions.refreshTitle')}
+              </Button>
+            </li>
+          ) : hasTree ? (
+            renderTree(root, 0)
+          ) : (
+            <li className="px-2 py-1 typography-meta text-muted-foreground">{t('filesView.state.loading')}</li>
+          )}
+        </ul>
+      </ScrollableOverlay>
+    </section>
+  );
+
+  // Fullscreen file viewer overlay
+  const fullscreenViewer = mode === 'full' && isFullscreen && selectedFile && (
+    <div className="absolute inset-0 z-50 flex flex-col bg-background">
+      {/* Fullscreen content */}
+      <div className="flex-1 min-h-0 min-w-0 relative">
+        <div className="absolute right-4 top-4 z-30">
+          {renderFloatingFileControls({ exitFullscreenOnly: true })}
+        </div>
+        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
+          {(fileLoading || isImageAssetAuthLoading) ? (
+            suppressFileLoadingIndicator
+              ? <div className="p-4" />
+              : (
+                <div className="p-4 flex items-center gap-2 typography-ui text-muted-foreground">
+                  <Icon name="loader-4" className="size-4 animate-spin" />
+                  Loading…
+                </div>
+              )
+          ) : fileError ? (
+            <div className="p-4 typography-ui text-[color:var(--status-error)]">{fileError}</div>
+          ) : isSelectedImage ? (
+            <div className="flex h-full items-center justify-center p-4">
+              <img
+                src={imageSrc}
+                alt={selectedFile.name}
+                className="max-w-full max-h-full object-contain rounded-md border border-border/30 bg-primary/10"
+              />
+            </div>
+          ) : isMarkdown && getMdViewMode() === 'preview' ? (
+            <div className="h-full overflow-auto p-4">
+              {fileContent.length > 500 * 1024 && (
+                  <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
+                    {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
+                  </div>
+                )}
+              <ErrorBoundary
+                fallback={
+                  <div className="rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2">
+                    <div className="mb-1 font-medium text-destructive">{t('filesView.error.previewUnavailable')}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {t('filesView.error.switchToEditMode')}
+                    </div>
+                  </div>
+                }
+              >
+                <SimpleMarkdownRenderer
+                  content={fileContent}
+                  className="typography-markdown-body"
+                  stripFrontmatter
+                />
+              </ErrorBoundary>
+            </div>
+          ) : canUseShikiFileView && textViewMode === 'view' ? (
+            renderShikiFileView(selectedFile, draftContent)
+          ) : (
+            <div className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}>
+              <div className={cn('h-full', shouldMaskEditorForPendingNavigation && 'invisible')}>
+              <CodeMirrorEditor
+                value={draftContent}
+                onChange={setDraftContent}
+                readOnly={!canEdit}
+                extensions={editorExtensions}
+                className="h-full"
+                onViewReady={(view) => {
+                  editorViewRef.current = view;
+                  window.requestAnimationFrame(() => {
+                    nudgeEditorSelectionAboveKeyboard(view);
+                  });
+                }}
+                onViewDestroy={() => {
+                  if (editorViewRef.current) {
+                    editorViewRef.current = null;
+                  }
+                }}
+              />
+              </div>
+              {shouldMaskEditorForPendingNavigation && (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background">
+                  <div className="flex items-center gap-2 typography-ui text-muted-foreground">
+                    <Icon name="loader-4" className="size-4 animate-spin" />
+                    {t('filesView.state.openingFileAtChange')}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </ScrollableOverlay>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-full min-h-0 overflow-hidden bg-background relative">
+      <Dialogs
+        activeDialog={activeDialog}
+        dialogData={dialogData}
+        dialogInputValue={dialogInputValue}
+        onDialogInputChange={setDialogInputValue}
+        isDialogSubmitting={isDialogSubmitting}
+        onDialogSubmit={handleDialogSubmit}
+        onClose={handleCloseDialog}
+        inputRef={dialogInputRef}
+      />
+      {fullscreenViewer}
+      {isMobile ? (
+        showMobilePageContent ? (
+          fileViewer
+        ) : (
+          treePanel
+        )
+       ) : mode === 'editor-only' ? (
+         <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
+            <div className="flex-1 min-h-0 min-w-0 overflow-hidden bg-background">
+             {fileViewer}
+            </div>
+          </div>
+       ) : (
+         <div className="flex flex-1 min-h-0 min-w-0 gap-3 px-3 pb-3 pt-2">
+            {screenWidth >= 700 && (
+              <div className="w-72 flex-shrink-0 min-h-0 overflow-hidden">
+               {treePanel}
+             </div>
+           )}
+           <div className="flex-1 min-h-0 min-w-0 overflow-hidden rounded-xl border border-border/60 bg-background">
+             {fileViewer}
+           </div>
+         </div>
+       )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/lib/codemirror/languageByExtension.ts b/packages/ui/src/lib/codemirror/languageByExtension.ts
index 8f394e7f..d46d6403 100644
--- a/packages/ui/src/lib/codemirror/languageByExtension.ts
+++ b/packages/ui/src/lib/codemirror/languageByExtension.ts
@@ -128,6 +128,9 @@ export function languageByExtension(filePath: string): Extension | null {
       return css();
     case 'html':
     case 'htm':
+    case 'xml':
+    case 'drawio':
+    case 'dio':
       return html();
     case 'md':
     case 'mdx':
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts
index cc5641fa..5b4b4ded 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -23,6 +23,7 @@ export const dict = {
   'layout.mainTab.chat': 'Chat',
   'layout.mainTab.plan': 'Plan',
   'layout.mainTab.diff': 'Diff',
+  'layout.mainTab.diagram': 'Diagram',
   'layout.mainTab.files': 'Files',
   'layout.mainTab.terminal': 'Terminal',
   'layout.mainTab.context': 'Context',
@@ -1120,6 +1121,8 @@ export const dict = {
   'filesView.error.switchToEditMode': 'Switch to edit mode to fix the issue.',
   'filesView.error.readFileFailed': 'Failed to read file',
   'filesView.editor.htmlPreviewTitle': 'HTML Preview',
+  'filesView.diagram.closeDiagramView': 'Close diagram view',
+  'filesView.diagram.saveDiagram': 'Save diagram',
   'contextUsage.aria.label': 'Context usage',
   'contextUsage.mobile.title': 'Context Usage',
   'contextUsage.mobile.usedTokens': 'Used tokens',
@@ -1565,6 +1568,7 @@ export const dict = {
   'chat.fileAttachment.activeEditor.addFile': 'Add file:{name} to context',
   'chat.fileAttachment.activeEditor.pinSelection': 'Pin selection to context',
   'chat.fileAttachment.activeEditor.remove': 'Remove from context',
+  'chat.fileAttachment.openInDiagram': 'Open in diagram view',
   'chat.pendingChanges.fileCountSingle': '{count} file',
   'chat.pendingChanges.fileCountPlural': '{count} files',
   'chat.pendingChanges.changedInWorkspace': 'changed in workspace',
diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts
index 93954178..450decc3 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   "layout.mainTab.chat": "Chat",
   "layout.mainTab.plan": "Plan",
   "layout.mainTab.diff": "Diff",
+  "layout.mainTab.diagram": "Diagrama",
   "layout.mainTab.files": "Archivos",
   "layout.mainTab.terminal": "Terminal",
   "layout.mainTab.context": "Contexto",
@@ -1086,6 +1087,8 @@ export const dict: Record<I18nKey, string> = {
   "filesView.error.switchToEditMode": "Cambia al modo de edición para resolver el problema.",
   "filesView.error.readFileFailed": "No se pudo leer el archivo",
   "filesView.editor.htmlPreviewTitle": "Vista previa HTML",
+  "filesView.diagram.closeDiagramView": "Cerrar vista de diagrama",
+  "filesView.diagram.saveDiagram": "Guardar diagrama",
   "contextUsage.aria.label": "Uso del contexto",
   "contextUsage.mobile.title": "Uso del contexto",
   "contextUsage.mobile.usedTokens": "Tokens usados",
@@ -1531,6 +1534,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.fileAttachment.activeEditor.addFile": "Agregar archivo:{name} al contexto",
   "chat.fileAttachment.activeEditor.pinSelection": "Anclar selección al contexto",
   "chat.fileAttachment.activeEditor.remove": "Quitar del contexto",
+  "chat.fileAttachment.openInDiagram": "Abrir en vista de diagrama",
   "chat.pendingChanges.fileCountSingle": "{count} archivo",
   "chat.pendingChanges.fileCountPlural": "{count} archivos",
   "chat.pendingChanges.changedInWorkspace": "modificado en el espacio de trabajo",
diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts
index 157c1bcb..4745aa61 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   'layout.mainTab.chat': '채팅',
   'layout.mainTab.plan': '계획',
   'layout.mainTab.diff': '변경사항',
+  'layout.mainTab.diagram': '다이어그램',
   'layout.mainTab.files': '파일',
   'layout.mainTab.terminal': '터미널',
   'layout.mainTab.context': '컨텍스트',
@@ -1123,6 +1124,8 @@ export const dict: Record<I18nKey, string> = {
   'filesView.error.switchToEditMode': '문제를 수정하려면 편집 모드로 전환하세요.',
   'filesView.error.readFileFailed': '파일 읽기 실패',
   'filesView.editor.htmlPreviewTitle': 'HTML 미리보기',
+  'filesView.diagram.closeDiagramView': '다이어그램 보기 닫기',
+  'filesView.diagram.saveDiagram': '다이어그램 저장',
   'contextUsage.aria.label': '컨텍스트 사용량',
   'contextUsage.mobile.title': '컨텍스트 사용량',
   'contextUsage.mobile.usedTokens': '사용한 토큰',
@@ -1567,6 +1570,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.fileAttachment.activeEditor.addFile': '컨텍스트에 파일 추가:{name}',
   'chat.fileAttachment.activeEditor.pinSelection': '컨텍스트에 선택 고정',
   'chat.fileAttachment.activeEditor.remove': '컨텍스트에서 제거',
+  'chat.fileAttachment.openInDiagram': '다이어그램 보기에서 열기',
   'chat.pendingChanges.fileCountSingle': '{count} 파일',
   'chat.pendingChanges.fileCountPlural': '{count} 파일',
   'chat.pendingChanges.changedInWorkspace': '워크스페이스에서 변경됨',
diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts
index 1cb2e326..03de9766 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -25,6 +25,7 @@ export const dict: Record<I18nKey, string> = {
   'layout.mainTab.chat': 'Czat',
   'layout.mainTab.plan': 'Plan',
   'layout.mainTab.diff': 'Różnice',
+  'layout.mainTab.diagram': 'Diagram',
   'layout.mainTab.files': 'Pliki',
   'layout.mainTab.terminal': 'Terminal',
   'layout.mainTab.context': 'Kontekst',
@@ -541,6 +542,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.fileAttachment.activeEditor.addFile': 'Dodaj plik:{name} do kontekstu',
   'chat.fileAttachment.activeEditor.pinSelection': 'Przypnij zaznaczenie do kontekstu',
   'chat.fileAttachment.activeEditor.remove': 'Usuń z kontekstu',
+  'chat.fileAttachment.openInDiagram': 'Otwórz w widoku diagramu',
   'chat.pendingChanges.fileCountSingle': '{count} plik',
   'chat.pendingChanges.fileCountPlural': '{count} plików',
   'chat.pendingChanges.changedInWorkspace': 'zmienione w przestrzeni roboczej',
@@ -1499,6 +1501,8 @@ export const dict: Record<I18nKey, string> = {
   'filesView.editor.fullscreen': 'Pełny ekran',
   'filesView.editor.goToLine': 'Przejdź do linii',
   'filesView.editor.htmlPreviewTitle': 'Podgląd HTML',
+  'filesView.diagram.closeDiagramView': 'Zamknij widok diagramu',
+  'filesView.diagram.saveDiagram': 'Zapisz diagram',
   'filesView.editor.imageAltFallback': 'Obraz',
   'filesView.editor.openFilesAria': 'Otwarte pliki',
   'filesView.editor.openInDesktopApp': 'Otwórz w aplikacji desktopowej',
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts
index dd6ab2ef..73aa786d 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   "layout.mainTab.chat": "Chat",
   "layout.mainTab.plan": "Plano",
   "layout.mainTab.diff": "Diff",
+  "layout.mainTab.diagram": "Diagrama",
   "layout.mainTab.files": "Arquivos",
   "layout.mainTab.terminal": "Terminal",
   "layout.mainTab.context": "Contexto",
@@ -1086,6 +1087,8 @@ export const dict: Record<I18nKey, string> = {
   "filesView.error.switchToEditMode": "Alterne para o modo de edição para resolver o problema.",
   "filesView.error.readFileFailed": "Não foi possível ler o arquivo",
   "filesView.editor.htmlPreviewTitle": "Pré-visualização HTML",
+  "filesView.diagram.closeDiagramView": "Fechar visualização de diagrama",
+  "filesView.diagram.saveDiagram": "Salvar diagrama",
   "contextUsage.aria.label": "Uso do contexto",
   "contextUsage.mobile.title": "Uso do contexto",
   "contextUsage.mobile.usedTokens": "Tokens usados",
@@ -1531,6 +1534,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.fileAttachment.activeEditor.addFile": "Adicionar arquivo:{name} ao contexto",
   "chat.fileAttachment.activeEditor.pinSelection": "Fixar seleção no contexto",
   "chat.fileAttachment.activeEditor.remove": "Remover do contexto",
+  "chat.fileAttachment.openInDiagram": "Abrir na visualização de diagrama",
   "chat.pendingChanges.fileCountSingle": "{count} arquivo",
   "chat.pendingChanges.fileCountPlural": "{count} arquivos",
   "chat.pendingChanges.changedInWorkspace": "modificado no workspace",
diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts
index d75f153b..396be6ff 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   "layout.mainTab.chat": "Чат",
   "layout.mainTab.plan": "План",
   "layout.mainTab.diff": "Diff",
+  "layout.mainTab.diagram": "Діаграма",
   "layout.mainTab.files": "Файли",
   "layout.mainTab.terminal": "Термінал",
   "layout.mainTab.context": "Контекст",
@@ -1086,6 +1087,8 @@ export const dict: Record<I18nKey, string> = {
   "filesView.error.switchToEditMode": "Перейдіть у режим редагування, щоб усунути проблему.",
   "filesView.error.readFileFailed": "Не вдалося прочитати файл",
   "filesView.editor.htmlPreviewTitle": "Попередній перегляд HTML",
+  "filesView.diagram.closeDiagramView": "Закрити перегляд діаграми",
+  "filesView.diagram.saveDiagram": "Зберегти діаграму",
   "contextUsage.aria.label": "Використання контексту",
   "contextUsage.mobile.title": "Використання контексту",
   "contextUsage.mobile.usedTokens": "Використані токени",
@@ -1531,6 +1534,7 @@ export const dict: Record<I18nKey, string> = {
   "chat.fileAttachment.activeEditor.addFile": "Додати файл:{name} до контексту",
   "chat.fileAttachment.activeEditor.pinSelection": "Закріпити вибір у контексті",
   "chat.fileAttachment.activeEditor.remove": "Видалити з контексту",
+  "chat.fileAttachment.openInDiagram": "Відкрити в перегляді діаграми",
   "chat.pendingChanges.fileCountSingle": "Файл: {count}",
   "chat.pendingChanges.fileCountPlural": "Файлів: {count}",
   "chat.pendingChanges.changedInWorkspace": "змінено в гілці",
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts
index daef3318..54c5b387 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   'layout.mainTab.chat': '聊天',
   'layout.mainTab.plan': '计划',
   'layout.mainTab.diff': '差异',
+  'layout.mainTab.diagram': '图表',
   'layout.mainTab.files': '文件',
   'layout.mainTab.terminal': '终端',
   'layout.mainTab.context': '上下文',
@@ -1086,6 +1087,8 @@ export const dict: Record<I18nKey, string> = {
   'filesView.error.switchToEditMode': '请切换到编辑模式修复问题。',
   'filesView.error.readFileFailed': '读取文件失败',
   'filesView.editor.htmlPreviewTitle': 'HTML 预览',
+  'filesView.diagram.closeDiagramView': '关闭图表视图',
+  'filesView.diagram.saveDiagram': '保存图表',
   'contextUsage.aria.label': '上下文用量',
   'contextUsage.mobile.title': '上下文用量',
   'contextUsage.mobile.usedTokens': '已用 Token',
@@ -1531,6 +1534,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.fileAttachment.activeEditor.addFile': '将文件添加到上下文:{name}',
   'chat.fileAttachment.activeEditor.pinSelection': '将选择固定到上下文',
   'chat.fileAttachment.activeEditor.remove': '从上下文中移除',
+  'chat.fileAttachment.openInDiagram': '在图表视图中打开',
   'chat.pendingChanges.fileCountSingle': '{count} 个文件',
   'chat.pendingChanges.fileCountPlural': '{count} 个文件',
   'chat.pendingChanges.changedInWorkspace': '工作区中有变更',
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts
index ef3ecff9..eddea77f 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts
@@ -24,6 +24,7 @@ export const dict: Record<I18nKey, string> = {
   'layout.mainTab.chat': '聊天',
   'layout.mainTab.plan': '計畫',
   'layout.mainTab.diff': '差異',
+  'layout.mainTab.diagram': '圖表',
   'layout.mainTab.files': '檔案',
   'layout.mainTab.terminal': '終端機',
   'layout.mainTab.context': '上下文',
@@ -1096,6 +1097,8 @@ export const dict: Record<I18nKey, string> = {
   'filesView.error.switchToEditMode': '請切換到編輯模式修復問題。',
   'filesView.error.readFileFailed': '讀取檔案失敗',
   'filesView.editor.htmlPreviewTitle': 'HTML 預覽',
+  'filesView.diagram.closeDiagramView': '關閉圖表檢視',
+  'filesView.diagram.saveDiagram': '儲存圖表',
   'contextUsage.aria.label': '上下文用量',
   'contextUsage.mobile.title': '上下文用量',
   'contextUsage.mobile.usedTokens': '已用 Token',
@@ -1535,6 +1538,7 @@ export const dict: Record<I18nKey, string> = {
   'chat.fileAttachment.activeEditor.addFile': '將檔案加入上下文:{name}',
   'chat.fileAttachment.activeEditor.pinSelection': '將選擇釘選到上下文',
   'chat.fileAttachment.activeEditor.remove': '從上下文中移除',
+  'chat.fileAttachment.openInDiagram': '在圖表檢視中開啟',
   'chat.pendingChanges.fileCountSingle': '{count} 個檔案',
   'chat.pendingChanges.fileCountPlural': '{count} 個檔案',
   'chat.pendingChanges.changedInWorkspace': '工作區中有變更',
diff --git a/packages/ui/src/lib/router/types.ts b/packages/ui/src/lib/router/types.ts
index d9a7c023..0341587f 100644
--- a/packages/ui/src/lib/router/types.ts
+++ b/packages/ui/src/lib/router/types.ts
@@ -29,7 +29,7 @@ export interface RouterContext {
 /**
  * Valid main tab values for URL routing.
  */
-export const VALID_TABS: readonly MainTab[] = ['chat', 'git', 'diff', 'terminal', 'files'] as const;
+export const VALID_TABS: readonly MainTab[] = ['chat', 'git', 'diff', 'terminal', 'files', 'diagram'] as const;
 
 /**
  * Valid settings section values for URL routing.
diff --git a/packages/ui/src/lib/toolHelpers.ts b/packages/ui/src/lib/toolHelpers.ts
index f80514eb..3e67070c 100644
--- a/packages/ui/src/lib/toolHelpers.ts
+++ b/packages/ui/src/lib/toolHelpers.ts
@@ -679,6 +679,13 @@ export function getLanguageFromExtension(filePath: string): string | null {
   return languageMap[ext || ''] || null;
 }
 
+const DIAGRAM_EXTENSIONS = ['drawio', 'dio'];
+
+export function isDrawioFile(filePath: string): boolean {
+  const ext = filePath.split('.').pop()?.toLowerCase();
+  return DIAGRAM_EXTENSIONS.includes(ext || '');
+}
+
 const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp', 'avif'];
 
 export function isImageFile(filePath: string): boolean {
diff --git a/packages/ui/src/stores/useUIStore.ts b/packages/ui/src/stores/useUIStore.ts
index e2c4d672..a1b39aec 100644
--- a/packages/ui/src/stores/useUIStore.ts
+++ b/packages/ui/src/stores/useUIStore.ts
@@ -9,7 +9,7 @@ import { DEFAULT_MONO_FONT, DEFAULT_UI_FONT, type MonoFontOption, type UiFontOpt
 import { getStoredMobileKeyboardMode, type MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 
-export type MainTab = 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files' | 'context';
+export type MainTab = 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files' | 'context' | 'diagram';
 export type RightSidebarTab = 'git' | 'files' | 'context';
 export type ContextPanelMode = 'diff' | 'file' | 'context' | 'plan' | 'chat' | 'preview' | 'browser';
 export type MermaidRenderingMode = 'svg' | 'ascii';
@@ -519,6 +519,7 @@ interface UIStore {
   sidebarOpenBeforeFullscreenTab: boolean | null;
   pendingDiffFile: string | null;
   pendingDiffStaged: boolean;
+  pendingDiagramFile: string | null;
   pendingFileNavigation: PendingFileNavigation | null;
   pendingFileFocusPath: string | null;
   isMobile: boolean;
@@ -658,10 +659,13 @@ interface UIStore {
   restoreForRuntimeSwitch: (runtimeKey?: string | null) => void;
   setMainTabGuard: (guard: MainTabGuard | null) => void;
   setPendingDiffFile: (filePath: string | null, staged?: boolean) => void;
+  setPendingDiagramFile: (filePath: string | null) => void;
   setPendingFileNavigation: (navigation: PendingFileNavigation | null) => void;
   setPendingFileFocusPath: (path: string | null) => void;
   navigateToDiff: (filePath: string, staged?: boolean) => void;
   consumePendingDiffFile: () => string | null;
+  navigateToDiagram: (filePath: string) => void;
+  consumePendingDiagramFile: () => string | null;
   setIsMobile: (isMobile: boolean) => void;
   toggleCommandPalette: () => void;
   setCommandPaletteOpen: (open: boolean) => void;
@@ -799,6 +803,7 @@ export const useUIStore = create<UIStore>()(
         sidebarOpenBeforeFullscreenTab: null,
         pendingDiffFile: null,
         pendingDiffStaged: false,
+        pendingDiagramFile: null,
         pendingFileNavigation: null,
         pendingFileFocusPath: null,
         isMobile: false,
@@ -1383,6 +1388,10 @@ export const useUIStore = create<UIStore>()(
           set({ pendingDiffFile: filePath, pendingDiffStaged: filePath ? staged : false });
         },
 
+        setPendingDiagramFile: (filePath) => {
+          set({ pendingDiagramFile: filePath });
+        },
+
         setPendingFileNavigation: (navigation) => {
           set({ pendingFileNavigation: navigation });
         },
@@ -1407,6 +1416,22 @@ export const useUIStore = create<UIStore>()(
           return pendingDiffFile;
         },
 
+        navigateToDiagram: (filePath) => {
+          const guard = get().mainTabGuard;
+          if (guard && !guard('diagram')) {
+            return;
+          }
+          set({ pendingDiagramFile: filePath, activeMainTab: 'diagram' });
+        },
+
+        consumePendingDiagramFile: () => {
+          const { pendingDiagramFile } = get();
+          if (pendingDiagramFile) {
+            set({ pendingDiagramFile: null });
+          }
+          return pendingDiagramFile;
+        },
+
         setIsMobile: (isMobile) => {
           set({ isMobile });
         },
diff --git a/packages/ui/src/sync/event-pipeline.ts b/packages/ui/src/sync/event-pipeline.ts
index e7b057f4..c7520468 100644
--- a/packages/ui/src/sync/event-pipeline.ts
+++ b/packages/ui/src/sync/event-pipeline.ts
@@ -167,8 +167,21 @@ function resolveEventDirectory(event: unknown, payload: Event): string {
       ? (payload.properties as Record<string, unknown>)
       : null
   const propertyDirectory = typeof properties?.directory === "string" ? properties.directory : null
+  if (propertyDirectory && propertyDirectory.length > 0) {
+    return propertyDirectory
+  }
 
-  return propertyDirectory && propertyDirectory.length > 0 ? propertyDirectory : "global"
+  // session.created / session.updated carry directory inside properties.info
+  const info =
+    typeof properties?.info === "object" && properties.info !== null
+      ? (properties.info as Record<string, unknown>)
+      : null
+  const infoDirectory = typeof info?.directory === "string" ? info.directory : null
+  if (infoDirectory && infoDirectory.length > 0) {
+    return infoDirectory
+  }
+
+  return "global"
 }
 
 function resolveEventPayload(payload: unknown): Event | null {
diff --git a/packages/ui/src/sync/sync-context.tsx b/packages/ui/src/sync/sync-context.tsx
index 17ebe696..1f44bfe3 100644
--- a/packages/ui/src/sync/sync-context.tsx
+++ b/packages/ui/src/sync/sync-context.tsx
@@ -1,2596 +1,2677 @@
-/* eslint-disable react-refresh/only-export-components */
-import React, { createContext, useContext, useEffect, useRef, useCallback, useMemo } from "react"
-import type { Event, Message, Part } from "@opencode-ai/sdk/v2/client"
-import type { Session } from "@opencode-ai/sdk/v2"
-import type { StoreApi } from "zustand"
-import { useStore } from "zustand"
-import type { OpencodeClient } from "@opencode-ai/sdk/v2/client"
-import { createEventPipeline } from "./event-pipeline"
-import { isVSCodeRuntime } from "@/lib/desktop"
-import { isMobileSurfaceRuntime } from "@/lib/runtimeSurface"
-import { reduceGlobalEvent, applyGlobalProject, applyDirectoryEvent } from "./event-reducer"
-import { useGlobalSyncStore, type GlobalSyncStore } from "./global-sync-store"
-import { ChildStoreManager, type DirectoryStore } from "./child-store"
-import {
-  aggregateLiveSessions,
-  aggregateLiveSessionStatuses,
-  areSessionListsEquivalent,
-  areStatusMapsEquivalent,
-  findLiveSession,
-  findLiveSessionStatus,
-} from "./live-aggregate"
-import { bootstrapGlobal, bootstrapDirectory } from "./bootstrap"
-import { retry } from "./retry"
-import { updateStreamingState } from "./streaming"
-import { setActionRefs } from "./session-actions"
-import { setSyncRefs } from "./sync-refs"
-import { stripMessageDiffSnapshots, stripSessionDiffSnapshots } from "./sanitize"
-import { syncDebug } from "./debug"
-import { getReconnectCandidateSessionIds } from "./reconnect-recovery"
-import { opencodeClient } from "@/lib/opencode/client"
-import { usePermissionStore } from "@/stores/permissionStore"
-import { useConfigStore } from "@/stores/useConfigStore"
-import { useTodosPersistStore } from "@/stores/useTodosPersistStore"
-import { toast } from "@/components/ui"
-import { appendNotification } from "./notification-store"
-import type { State } from "./types"
-import type { SessionStatus } from "@opencode-ai/sdk/v2/client"
-import type { PermissionRequest } from "@/types/permission"
-import type { QuestionRequest } from "@/types/question"
-import * as sessionActions from "./session-actions"
-import { getSessionMaterializationStatus, materializeSessionSnapshots } from "./materialization"
-import { openSessionFromToast } from "./session-navigation"
-import { getRuntimeLiveStatusSeed, LIVE_STATUS_TTL_MS } from "./runtime-live-memory"
-import { getRuntimeKey } from "@/lib/runtime-switch"
-import { getRegisteredRuntimeAPIs } from "@/contexts/runtimeAPIRegistry"
-import { setSessionPrefetch } from "./session-prefetch-cache"
-import { listGlobalSessionPages } from "@/stores/globalSessions"
-import { useGlobalSessionsStore } from "@/stores/useGlobalSessionsStore"
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-type SyncSystem = {
-  childStores: ChildStoreManager
-  sdk: OpencodeClient
-  directory: string
-}
-
-const SYNC_CONTEXT_GLOBAL_KEY = "__openchamber_sync_context__"
-type SyncGlobal = typeof globalThis & {
-  [SYNC_CONTEXT_GLOBAL_KEY]?: React.Context<SyncSystem | null>
-}
-
-const syncGlobal = globalThis as SyncGlobal
-const SyncContext = syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] ?? createContext<SyncSystem | null>(null)
-syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] = SyncContext
-
-type SdkResult<T> = {
-  data?: T
-  error?: unknown
-  response?: {
-    status?: number
-    headers?: { get?: (name: string) => string | null }
-  }
-}
-
-function formatSdkError(error: unknown): string {
-  if (error instanceof Error) return error.message
-  if (typeof error === "string") return error
-  if (error && typeof error === "object" && "message" in error && typeof (error as { message?: unknown }).message === "string") {
-    return (error as { message: string }).message
-  }
-  try {
-    return JSON.stringify(error)
-  } catch {
-    return String(error)
-  }
-}
-
-function assertSdkSuccess<T>(result: SdkResult<T>, operation: string): T | undefined {
-  if (!result.error) return result.data
-  const status = result.response?.status
-  throw new Error(`${operation} failed${status ? ` (${status})` : ""}: ${formatSdkError(result.error)}`)
-}
-
-function useSyncSystem() {
-  const ctx = useContext(SyncContext)
-  if (!ctx) throw new Error("useSyncSystem must be used within <SyncProvider>")
-  return ctx
-}
-
-function getLiveStates(childStores: ChildStoreManager): State[] {
-  return Array.from(childStores.children.values(), (store) => store.getState())
-}
-
-function useLiveSyncSelector<T>(selector: (states: State[]) => T, isEqual: (left: T, right: T) => boolean = Object.is): T {
-  const { childStores } = useSyncSystem()
-  const cacheRef = useRef<T | undefined>(undefined)
-  const initializedRef = useRef(false)
-
-  const getSnapshot = useCallback(() => {
-    const next = selector(getLiveStates(childStores))
-    if (initializedRef.current && isEqual(cacheRef.current as T, next)) {
-      return cacheRef.current as T
-    }
-
-    cacheRef.current = next
-    initializedRef.current = true
-    return next
-  }, [childStores, isEqual, selector])
-
-  return React.useSyncExternalStore(
-    useCallback((notify) => childStores.subscribeAll(notify), [childStores]),
-    getSnapshot,
-    getSnapshot,
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Event handler — applies one SSE event at a time to the live store.
-// Each event reads live state, creates a shallow draft, applies, writes back.
-// React 18 batches synchronous setState calls automatically.
-// ---------------------------------------------------------------------------
-
-/** Read status for a session across all directories */
-export function useGlobalSessionStatus(sessionId: string): SessionStatus | undefined {
-  return useLiveSyncSelector(
-    useCallback((states) => findLiveSessionStatus(states, sessionId), [sessionId]),
-  )
-}
-
-/** Read all session statuses (for sidebar) */
-export function useAllSessionStatuses(): Record<string, SessionStatus> {
-  return useLiveSyncSelector(
-    useCallback((states) => aggregateLiveSessionStatuses(states), []),
-    areStatusMapsEquivalent,
-  )
-}
-
-type LiveSessionStatusCounts = {
-  running: number
-}
-
-const EMPTY_LIVE_SESSION_STATUS_COUNTS: LiveSessionStatusCounts = { running: 0 }
-
-const isRunningSessionStatus = (status: SessionStatus | undefined): boolean => (
-  status?.type === "busy" || status?.type === "retry"
-)
-
-const areLiveSessionStatusCountsEquivalent = (left: LiveSessionStatusCounts, right: LiveSessionStatusCounts): boolean => (
-  left.running === right.running
-)
-
-export function useLiveSessionStatusCounts(): LiveSessionStatusCounts {
-  return useLiveSyncSelector(
-    useCallback((states) => {
-      let running = 0
-      for (const state of states) {
-        for (const status of Object.values(state.session_status ?? {})) {
-          if (isRunningSessionStatus(status)) running += 1
-        }
-      }
-      return running === 0 ? EMPTY_LIVE_SESSION_STATUS_COUNTS : { running }
-    }, []),
-    areLiveSessionStatusCountsEquivalent,
-  )
-}
-
-export function useAllLiveSessions(): Session[] {
-  return useLiveSyncSelector(
-    useCallback((states) => aggregateLiveSessions(states), []),
-    areSessionListsEquivalent,
-  )
-}
-
-// Boot debounce — suppresses redundant refresh/re-bootstrap events during startup.
-let bootingRoot = false
-let bootedAt = 0
-let globalBootstrapGeneration = 0
-const BOOT_DEBOUNCE_MS = 1500
-const RECONNECT_MESSAGE_LIMIT = 30
-const SESSION_MATERIALIZATION_MESSAGE_LIMIT = 30
-const RECONNECT_SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
-const ACTIVE_SESSION_WATCHDOG_INTERVAL_MS = 5_000
-const ACTIVE_SESSION_STATUS_POLL_INTERVAL_MS = 5_000
-const ACTIVE_SESSION_STALE_EVENT_MS = 20_000
-const ACTIVE_SESSION_FULL_RESYNC_COOLDOWN_MS = 15_000
-const requestSignature = (items: Array<{ id: string }> | undefined): string => {
-  if (!items || items.length === 0) return ""
-  return items
-    .map((item) => item.id)
-    .sort(cmp)
-    .join("|")
-}
-
-const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
-
-const syncSnapshotSignature = (value: unknown): string => JSON.stringify(value)
-
-function haveEquivalentSyncSnapshots(left: unknown, right: unknown): boolean {
-  return syncSnapshotSignature(left) === syncSnapshotSignature(right)
-}
-
-// ---------------------------------------------------------------------------
-// Session materialization scheduler — when local message/part state is incomplete,
-// fetch the canonical session snapshot and materialize messages and parts together.
-// Tracked per-directory, deduplicated, and auto-expiring.
-// ---------------------------------------------------------------------------
-
-type PendingSessionMaterialization = {
-  sessionID: string
-  directory: string
-  enqueuedAt: number
-}
-
-const SESSION_MATERIALIZATION_COOLDOWN_MS = 5_000
-const pendingSessionMaterializations = new Map<string, PendingSessionMaterialization>() // key: directory:sessionID
-
-const materializationKey = (directory: string, sessionID: string) => `${directory}:${sessionID}`
-
-function enqueueSessionMaterialization(directory: string, sessionID: string, childStores: ChildStoreManager) {
-  if (!directory || directory === "global" || !sessionID) return
-  const k = materializationKey(directory, sessionID)
-  const existing = pendingSessionMaterializations.get(k)
-  if (existing && Date.now() - existing.enqueuedAt < SESSION_MATERIALIZATION_COOLDOWN_MS) return
-
-  pendingSessionMaterializations.set(k, { sessionID, directory, enqueuedAt: Date.now() })
-
-  // Defer to next microtask so we don't hold up the current event batch
-  void Promise.resolve().then(async () => {
-    const store = childStores.getChild(directory)
-    if (!store) {
-      pendingSessionMaterializations.delete(k)
-      return
-    }
-    try {
-      await materializeSessionFromServer(directory, sessionID, store)
-    } catch {
-      // Transient failure — next SSE event or reconnect will catch up.
-    } finally {
-      pendingSessionMaterializations.delete(k)
-    }
-  })
-}
-
-async function materializeSessionFromServer(
-  directory: string,
-  sessionID: string,
-  store: StoreApi<DirectoryStore>,
-) {
-  const scopedClient = opencodeClient.getScopedSdkClient(directory)
-  const result = await retry(async () => {
-    const response = await scopedClient.session.messages({ sessionID, limit: SESSION_MATERIALIZATION_MESSAGE_LIMIT })
-    assertSdkSuccess(response, "session.messages")
-    return response
-  })
-  const records = (result.data ?? []).filter((record: { info?: { id?: string } }) => !!record?.info?.id)
-  if (records.length === 0) return
-  const cursor = result.response?.headers?.get?.("x-next-cursor") ?? undefined
-  setSessionPrefetch({
-    directory,
-    sessionID,
-    limit: records.length,
-    cursor,
-    complete: !cursor,
-  })
-
-  store.setState((state: DirectoryStore) => {
-    const materialized = materializeSessionSnapshots(
-      state,
-      sessionID,
-      records.map((record: { info: Message; parts?: Part[] }) => ({
-        info: stripMessageDiffSnapshots(record.info),
-        parts: record.parts ?? [],
-      })),
-      { skipPartTypes: RECONNECT_SKIP_PARTS },
-    )
-    return { message: materialized.message, part: materialized.part }
-  })
-}
-
-// Module-level refs for notification viewed check.
-// Used to determine if user is currently viewing the session when a notification arrives.
-let _activeDirectory = ""
-let _activeSession = ""
-const externallyViewedSessions = new Map<string, number>()
-const EXTERNAL_VIEW_TTL_MS = 15_000
-
-const viewedSessionKey = (directory: string, sessionId: string) => `${directory}\n${sessionId}`
-
-function pruneExternallyViewedSessions(now = Date.now()) {
-  for (const [key, expiresAt] of externallyViewedSessions.entries()) {
-    if (expiresAt <= now) {
-      externallyViewedSessions.delete(key)
-    }
-  }
-}
-const pendingQuestionToastIds = new Set<string>()
-const pendingPermissionToastIds = new Set<string>()
-
-const getQuestionToastKey = (sessionID?: string, requestID?: string) => {
-  if (!sessionID || !requestID) return null
-  return `${sessionID}:${requestID}`
-}
-
-const getPermissionToastKey = (sessionID?: string, requestID?: string) => {
-  if (!sessionID || !requestID) return null
-  return `${sessionID}:${requestID}`
-}
-
-type UiNotificationPayload = {
-  title?: unknown
-  body?: unknown
-  tag?: unknown
-  kind?: unknown
-  sessionId?: unknown
-  directory?: unknown
-  requireHidden?: unknown
-  desktopStdoutActive?: unknown
-}
-
-const asOptionalString = (value: unknown): string | undefined => {
-  if (typeof value !== "string") return undefined
-  const trimmed = value.trim()
-  return trimmed.length > 0 ? trimmed : undefined
-}
-
-const handleUiNotificationEvent = (payload: Event, fallbackDirectory: string): boolean => {
-  if ((payload as { type?: unknown }).type !== "openchamber:notification") {
-    return false
-  }
-
-  const properties = (payload as { properties?: unknown }).properties
-  if (!properties || typeof properties !== "object") {
-    return true
-  }
-
-  const notification = properties as UiNotificationPayload
-  if (notification.desktopStdoutActive === true && getRuntimeKey() === "local") {
-    return true
-  }
-
-  const notifications = getRegisteredRuntimeAPIs()?.notifications
-  if (!notifications?.notifyAgentCompletion) {
-    return true
-  }
-
-  void notifications.notifyAgentCompletion({
-    title: asOptionalString(notification.title),
-    body: asOptionalString(notification.body),
-    tag: asOptionalString(notification.tag),
-    kind: asOptionalString(notification.kind),
-    sessionId: asOptionalString(notification.sessionId),
-    directory: asOptionalString(notification.directory) ?? (fallbackDirectory && fallbackDirectory !== "global" ? fallbackDirectory : undefined),
-    requireHidden: notification.requireHidden === true,
-  }).catch((error) => {
-    console.warn("[notifications] failed to dispatch UI notification", error)
-  })
-
-  return true
-}
-
-export function setActiveSession(directory: string, sessionId: string) {
-  _activeDirectory = directory
-  _activeSession = sessionId
-}
-
-export function setExternallyViewedSession(directory: string, sessionId: string, viewed: boolean) {
-  if (!directory || !sessionId) return
-  const key = viewedSessionKey(directory, sessionId)
-  if (!viewed) {
-    externallyViewedSessions.delete(key)
-    return
-  }
-  externallyViewedSessions.set(key, Date.now() + EXTERNAL_VIEW_TTL_MS)
-}
-
-function isViewedInCurrentSession(directory: string, sessionId?: string): boolean {
-  if (!sessionId) return false
-  if (_activeDirectory && _activeSession && directory === _activeDirectory && sessionId === _activeSession) return true
-  pruneExternallyViewedSessions()
-  return externallyViewedSessions.has(viewedSessionKey(directory, sessionId))
-}
-
-function isRecentBoot() {
-  return bootingRoot || Date.now() - bootedAt < BOOT_DEBOUNCE_MS
-}
-
-function getViewedSessionMaterializationTarget(directory: string) {
-  if (!_activeDirectory || !_activeSession) return null
-  if (directory !== _activeDirectory) return null
-  return {
-    directory: _activeDirectory,
-    sessionId: _activeSession,
-  }
-}
-
-function toSessionStatus(status: Awaited<ReturnType<typeof opencodeClient.getSessionStatus>>[string]): SessionStatus | undefined {
-  if (!status) return undefined
-  if (status.type === "idle" || status.type === "busy") {
-    return { type: status.type }
-  }
-  if (
-    status.type === "retry"
-    && typeof status.attempt === "number"
-    && typeof status.message === "string"
-    && typeof status.next === "number"
-  ) {
-    return {
-      type: "retry",
-      attempt: status.attempt,
-      message: status.message,
-      next: status.next,
-    }
-  }
-  return undefined
-}
-
-function isStreamHeartbeatEvent(payload: Event): boolean {
-  const type = (payload as { type?: unknown }).type
-  return type === "server.heartbeat" || type === "openchamber:heartbeat"
-}
-
-function getActiveSessionCandidateIds(directory: string, state: DirectoryStore): string[] {
-  return getReconnectCandidateSessionIds(state, {
-    directory,
-    viewedSession: getViewedSessionMaterializationTarget(directory),
-  })
-}
-
-function buildRelevantSessionStatuses(
-  nextStatuses: Awaited<ReturnType<typeof opencodeClient.getSessionStatusForDirectory>>,
-  candidateSessionIds: string[],
-): Record<string, SessionStatus> | null {
-  if (nextStatuses === null) return null
-  const relevantStatuses: Record<string, SessionStatus> = {}
-  for (const sessionId of candidateSessionIds) {
-    relevantStatuses[sessionId] = toSessionStatus(nextStatuses[sessionId]) ?? { type: "idle" }
-  }
-  return relevantStatuses
-}
-
-function applySessionStatusSnapshot(
-  store: StoreApi<DirectoryStore>,
-  relevantStatuses: Record<string, SessionStatus>,
-): boolean {
-  if (Object.keys(relevantStatuses).length === 0) return false
-
-  let changed = false
-  store.setState((state: DirectoryStore) => {
-    for (const [sessionId, nextStatus] of Object.entries(relevantStatuses)) {
-      if (!haveEquivalentSyncSnapshots(state.session_status?.[sessionId], nextStatus)) {
-        changed = true
-        break
-      }
-    }
-
-    if (!changed) {
-      return state
-    }
-
-    return {
-      session_status: { ...state.session_status, ...relevantStatuses },
-    }
-  })
-
-  return changed
-}
-
-async function resyncDirectorySessionStatuses(
-  directory: string,
-  store: StoreApi<DirectoryStore>,
-  candidateSessionIds: string[],
-): Promise<Record<string, SessionStatus> | null> {
-  const nextStatuses = await opencodeClient.getSessionStatusForDirectory(directory)
-  // null = fetch failed; preserve existing state. {} or populated = authoritative
-  // snapshot of active sessions — candidates not listed are idle now.
-  const relevantStatuses = buildRelevantSessionStatuses(nextStatuses, candidateSessionIds)
-  if (relevantStatuses === null) return null
-  applySessionStatusSnapshot(store, relevantStatuses)
-  return relevantStatuses
-}
-
-function needsSnapshotAfterStatusPoll(
-  state: DirectoryStore,
-  sessionId: string,
-  nextStatus: SessionStatus | undefined,
-): boolean {
-  if (nextStatus?.type !== "idle") return false
-  const currentStatus = state.session_status?.[sessionId]
-  if (currentStatus && currentStatus.type !== "idle") return true
-
-  const messages = state.message[sessionId]
-  const lastMessage = messages?.[messages.length - 1]
-  return !!lastMessage
-    && lastMessage.role === "assistant"
-    && typeof (lastMessage as { time?: { completed?: number } }).time?.completed !== "number"
-}
-
-type EventRoutingIndex = {
-  sessionDirectoryById: Map<string, string>
-  messageSessionById: Map<string, string>
-  sessionMessageIdsById: Map<string, Set<string>>
-}
-
-const SHOULD_DISPATCH_VSCODE_NOTIFICATIONS = isVSCodeRuntime()
-
-const dispatchVSCodeRuntimeNotificationEvent = (directory: string, payload: Event) => {
-  if (!SHOULD_DISPATCH_VSCODE_NOTIFICATIONS || typeof window === "undefined") return
-  window.dispatchEvent(new CustomEvent("openchamber:vscode-notification-event", {
-    detail: { directory, payload },
-  }))
-}
-
-const createEventRoutingIndex = (): EventRoutingIndex => ({
-  sessionDirectoryById: new Map(),
-  messageSessionById: new Map(),
-  sessionMessageIdsById: new Map(),
-})
-
-const normalizeEventDirectory = (rawDirectory: string): string => {
-  if (!rawDirectory || rawDirectory === "global") {
-    return rawDirectory
-  }
-  const normalized = rawDirectory.replace(/\\/g, "/").replace(/^([a-z]):/, (_, l: string) => l.toUpperCase() + ":")
-  // Strip trailing slashes to match child store keys (normalizeDirectoryPath in useDirectoryStore)
-  return normalized.length > 1 ? normalized.replace(/\/+$/, "") : normalized
-}
-
-const getSessionIdFromPayload = (event: Event): string | null => {
-  const properties = (event as { properties?: unknown }).properties
-  if (!properties || typeof properties !== "object") {
-    return null
-  }
-
-  const props = properties as Record<string, unknown>
-
-  if (event.type === "message.updated") {
-    const info = props.info
-    if (!info || typeof info !== "object") {
-      return null
-    }
-    const sessionID = (info as { sessionID?: unknown }).sessionID
-    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
-  }
-
-  if (
-    event.type === "message.removed"
-    || event.type === "session.status"
-    || event.type === "todo.updated"
-    || event.type === "permission.asked"
-    || event.type === "permission.replied"
-    || event.type === "question.asked"
-    || event.type === "question.replied"
-    || event.type === "question.rejected"
-    || event.type === "session.deleted"
-  ) {
-    const sessionID = props.sessionID
-    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
-  }
-
-  if (event.type === "message.part.updated") {
-    const sessionID = props.sessionID
-    if (typeof sessionID === "string" && sessionID.length > 0) {
-      return sessionID
-    }
-
-    const part = props.part
-    if (!part || typeof part !== "object") {
-      return null
-    }
-    const partSessionID = (part as { sessionID?: unknown }).sessionID
-    return typeof partSessionID === "string" && partSessionID.length > 0 ? partSessionID : null
-  }
-
-  if (event.type === "message.part.delta" || event.type === "message.part.removed") {
-    const sessionID = props.sessionID
-    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
-  }
-
-  if (event.type === "session.created" || event.type === "session.updated") {
-    const info = props.info
-    if (!info || typeof info !== "object") {
-      return null
-    }
-    const id = (info as { id?: unknown }).id
-    return typeof id === "string" && id.length > 0 ? id : null
-  }
-
-  return null
-}
-
-const getSessionInfoFromPayload = (event: Event): Session | null => {
-  if (event.type !== "session.created" && event.type !== "session.updated" && event.type !== "session.deleted") {
-    return null
-  }
-
-  const properties = (event as { properties?: unknown }).properties
-  if (!properties || typeof properties !== "object") {
-    return null
-  }
-
-  const info = (properties as { info?: unknown }).info
-  if (!info || typeof info !== "object") {
-    return null
-  }
-
-  const session = info as Partial<Session>
-  if (typeof session.id !== "string" || !session.time) {
-    return null
-  }
-
-  return stripSessionDiffSnapshots(session as Session)
-}
-
-const applySessionEventToGlobalSessions = (payload: Event) => {
-  if (payload.type === "session.created" || payload.type === "session.updated") {
-    const session = getSessionInfoFromPayload(payload)
-    if (session) {
-      useGlobalSessionsStore.getState().upsertSession(session)
-    }
-    return
-  }
-
-  if (payload.type === "session.deleted") {
-    const sessionID = getSessionIdFromPayload(payload) ?? getSessionInfoFromPayload(payload)?.id
-    if (sessionID) {
-      useGlobalSessionsStore.getState().removeSessions([sessionID])
-    }
-  }
-}
-
-const getMessageIdFromPayload = (event: Event): string | null => {
-  const properties = (event as { properties?: unknown }).properties
-  if (!properties || typeof properties !== "object") {
-    return null
-  }
-
-  const props = properties as Record<string, unknown>
-
-  if (event.type === "message.updated") {
-    const info = props.info
-    if (!info || typeof info !== "object") {
-      return null
-    }
-    const id = (info as { id?: unknown }).id
-    return typeof id === "string" && id.length > 0 ? id : null
-  }
-
-  if (event.type === "message.removed" || event.type === "message.part.delta" || event.type === "message.part.removed") {
-    const messageID = props.messageID
-    return typeof messageID === "string" && messageID.length > 0 ? messageID : null
-  }
-
-  if (event.type === "message.part.updated") {
-    const part = props.part
-    if (!part || typeof part !== "object") {
-      return null
-    }
-    const partMessageID = (part as { messageID?: unknown }).messageID
-    return typeof partMessageID === "string" && partMessageID.length > 0 ? partMessageID : null
-  }
-
-  return null
-}
-
-const setIndexedSessionDirectory = (routingIndex: EventRoutingIndex, sessionID: string, directory: string) => {
-  if (!sessionID || !directory || directory === "global") {
-    return
-  }
-  routingIndex.sessionDirectoryById.set(sessionID, directory)
-}
-
-const setIndexedSessionMessages = (
-  routingIndex: EventRoutingIndex,
-  sessionID: string,
-  directory: string,
-  messages: Message[],
-) => {
-  if (!sessionID) {
-    return
-  }
-
-  setIndexedSessionDirectory(routingIndex, sessionID, directory)
-
-  const previous = routingIndex.sessionMessageIdsById.get(sessionID)
-  const next = new Set<string>()
-
-  for (const message of messages) {
-    if (!message?.id) {
-      continue
-    }
-    next.add(message.id)
-    routingIndex.messageSessionById.set(message.id, sessionID)
-  }
-
-  if (previous) {
-    for (const previousMessageID of previous) {
-      if (!next.has(previousMessageID)) {
-        routingIndex.messageSessionById.delete(previousMessageID)
-      }
-    }
-  }
-
-  routingIndex.sessionMessageIdsById.set(sessionID, next)
-}
-
-const setIndexedMessage = (
-  routingIndex: EventRoutingIndex,
-  sessionID: string,
-  messageID: string,
-  directory: string,
-) => {
-  if (!sessionID || !messageID) {
-    return
-  }
-
-  setIndexedSessionDirectory(routingIndex, sessionID, directory)
-  routingIndex.messageSessionById.set(messageID, sessionID)
-
-  const existing = routingIndex.sessionMessageIdsById.get(sessionID)
-  if (existing) {
-    existing.add(messageID)
-  } else {
-    routingIndex.sessionMessageIdsById.set(sessionID, new Set([messageID]))
-  }
-}
-
-const removeIndexedMessage = (
-  routingIndex: EventRoutingIndex,
-  messageID: string,
-  sessionHint?: string | null,
-) => {
-  if (!messageID) {
-    return
-  }
-
-  const sessionID = sessionHint ?? routingIndex.messageSessionById.get(messageID)
-  routingIndex.messageSessionById.delete(messageID)
-
-  if (!sessionID) {
-    return
-  }
-
-  const messageIds = routingIndex.sessionMessageIdsById.get(sessionID)
-  if (!messageIds) {
-    return
-  }
-
-  messageIds.delete(messageID)
-  if (messageIds.size === 0) {
-    routingIndex.sessionMessageIdsById.delete(sessionID)
-  }
-}
-
-const removeIndexedSession = (routingIndex: EventRoutingIndex, sessionID: string) => {
-  if (!sessionID) {
-    return
-  }
-
-  routingIndex.sessionDirectoryById.delete(sessionID)
-  const messageIds = routingIndex.sessionMessageIdsById.get(sessionID)
-  if (messageIds) {
-    for (const messageID of messageIds) {
-      routingIndex.messageSessionById.delete(messageID)
-    }
-  }
-  routingIndex.sessionMessageIdsById.delete(sessionID)
-}
-
-const ingestDirectoryStateIntoRoutingIndex = (
-  routingIndex: EventRoutingIndex,
-  directory: string,
-  state: State,
-) => {
-  const nextSessionIds = new Set<string>()
-
-  for (const session of state.session) {
-    if (!session?.id) {
-      continue
-    }
-    nextSessionIds.add(session.id)
-    setIndexedSessionDirectory(routingIndex, session.id, directory)
-  }
-
-  for (const sessionID of Object.keys(state.message)) {
-    nextSessionIds.add(sessionID)
-    setIndexedSessionDirectory(routingIndex, sessionID, directory)
-    setIndexedSessionMessages(routingIndex, sessionID, directory, state.message[sessionID] ?? EMPTY_MESSAGES)
-  }
-
-  for (const [indexedSessionID, indexedDirectory] of routingIndex.sessionDirectoryById) {
-    if (indexedDirectory !== directory) {
-      continue
-    }
-    if (!nextSessionIds.has(indexedSessionID)) {
-      removeIndexedSession(routingIndex, indexedSessionID)
-    }
-  }
-}
-
-const findSessionInChildStores = (
-  sessionID: string,
-  childStores: ChildStoreManager,
-  routingIndex: EventRoutingIndex,
-): string | null => {
-  for (const [dir, store] of childStores.children) {
-    const state = store.getState()
-    if (
-      state.session.some((s) => s.id === sessionID)
-      || Object.prototype.hasOwnProperty.call(state.message, sessionID)
-      || Object.prototype.hasOwnProperty.call(state.session_status ?? {}, sessionID)
-    ) {
-      // Self-heal: populate the routing index so future events resolve instantly
-      setIndexedSessionDirectory(routingIndex, sessionID, dir)
-      return dir
-    }
-  }
-  return null
-}
-
-const childStoreHasSessionState = (
-  childStores: ChildStoreManager,
-  directory: string,
-  sessionID: string,
-): boolean => {
-  const store = childStores.getChild(directory)
-  if (!store) return false
-  const state = store.getState()
-  return state.session.some((session) => session.id === sessionID)
-    || Object.prototype.hasOwnProperty.call(state.message, sessionID)
-    || Object.prototype.hasOwnProperty.call(state.session_status ?? {}, sessionID)
-}
-
-const childStoreHasMessagePartState = (
-  childStores: ChildStoreManager,
-  directory: string,
-  messageID: string,
-): boolean => {
-  const store = childStores.getChild(directory)
-  if (!store) return false
-  return Object.prototype.hasOwnProperty.call(store.getState().part, messageID)
-}
-
-const resolveDirectoryFromRoutingIndex = (
-  routingIndex: EventRoutingIndex,
-  rawDirectory: string,
-  payload: Event,
-  childStores: ChildStoreManager,
-): string => {
-  const normalizedDirectory = normalizeEventDirectory(rawDirectory)
-
-  const sessionID = getSessionIdFromPayload(payload)
-  if (sessionID) {
-    if (normalizedDirectory && normalizedDirectory !== "global" && childStoreHasSessionState(childStores, normalizedDirectory, sessionID)) {
-      setIndexedSessionDirectory(routingIndex, sessionID, normalizedDirectory)
-      return normalizedDirectory
-    }
-
-    const indexedDirectory = routingIndex.sessionDirectoryById.get(sessionID)
-    if (indexedDirectory && childStores.getChild(indexedDirectory)) {
-      return indexedDirectory
-    }
-
-    // Routing index miss — scan child stores for this session.
-    // Covers optimistic sessions not yet indexed and events with wrong/empty directory.
-    const found = findSessionInChildStores(sessionID, childStores, routingIndex)
-    if (found) {
-      return found
-    }
-  }
-
-  const messageID = getMessageIdFromPayload(payload)
-  if (messageID) {
-    if (normalizedDirectory && normalizedDirectory !== "global" && childStoreHasMessagePartState(childStores, normalizedDirectory, messageID)) {
-      return normalizedDirectory
-    }
-
-    const sessionFromMessage = routingIndex.messageSessionById.get(messageID)
-    if (sessionFromMessage) {
-      const indexedDirectory = routingIndex.sessionDirectoryById.get(sessionFromMessage)
-      if (indexedDirectory && childStores.getChild(indexedDirectory)) {
-        return indexedDirectory
-      }
-    }
-
-    // Scan child stores for a store that has parts for this message
-    for (const [dir, store] of childStores.children) {
-      if (Object.prototype.hasOwnProperty.call(store.getState().part, messageID)) {
-        return dir
-      }
-    }
-  }
-
-  // Single-store fallback: if there's only one directory, use it
-  if (
-    (sessionID || messageID)
-    && (!normalizedDirectory || normalizedDirectory === "global")
-    && childStores.children.size === 1
-  ) {
-    const onlyDirectory = childStores.children.keys().next().value
-    if (typeof onlyDirectory === "string" && onlyDirectory.length > 0) {
-      return onlyDirectory
-    }
-  }
-
-  return normalizedDirectory
-}
-
-const updateRoutingIndexFromEvent = (
-  routingIndex: EventRoutingIndex,
-  directory: string,
-  payload: Event,
-) => {
-  if (!directory || directory === "global") {
-    return
-  }
-
-  const sessionID = getSessionIdFromPayload(payload)
-  if (sessionID) {
-    setIndexedSessionDirectory(routingIndex, sessionID, directory)
-  }
-
-  switch (payload.type) {
-    case "session.created":
-    case "session.updated": {
-      const info = (payload.properties as { info?: Session }).info
-      if (info?.id) {
-        setIndexedSessionDirectory(routingIndex, info.id, directory)
-      }
-      return
-    }
-
-    case "session.deleted": {
-      const deletedSessionID = (payload.properties as { sessionID?: string }).sessionID
-      if (deletedSessionID) {
-        removeIndexedSession(routingIndex, deletedSessionID)
-      }
-      return
-    }
-
-    case "message.updated": {
-      const info = (payload.properties as { info?: Message }).info
-      if (info?.id && info.sessionID) {
-        setIndexedMessage(routingIndex, info.sessionID, info.id, directory)
-      }
-      return
-    }
-
-    case "message.removed": {
-      const props = payload.properties as { sessionID?: string; messageID?: string }
-      if (props.messageID) {
-        removeIndexedMessage(routingIndex, props.messageID, props.sessionID)
-      }
-      return
-    }
-
-    case "message.part.updated": {
-      const props = payload.properties as { sessionID?: string; part?: Part }
-      const part = props.part as (Part & { sessionID?: string; messageID?: string }) | undefined
-      const sessionID = part?.sessionID ?? props.sessionID
-      const messageID = part?.messageID
-      if (messageID && sessionID) {
-        setIndexedMessage(routingIndex, sessionID, messageID, directory)
-      }
-      return
-    }
-
-    default:
-      return
-  }
-}
-
-/**
- * Re-fetch pending questions and permissions for a directory and merge them
- * into the directory's child store, preserving any in-flight SSE updates that
- * arrived while the request was pending. Used by reconnect/materialization
- * recovery paths only; normal session switches rely on primary SSE reducer
- * state for `question.asked` / `permission.asked` events. When
- * `candidateSessionIds` is omitted, every session known to the directory store
- * is treated as a candidate.
- */
-export async function resyncBlockingRequestsForDirectory(
-  directory: string,
-  store: StoreApi<DirectoryStore>,
-  candidateSessionIds?: string[],
-) {
-  const before = store.getState()
-  const knownSessionIds = new Set<string>([
-    ...before.session.map((session) => session.id),
-    ...Object.keys(before.message ?? {}),
-    ...Object.keys(before.session_status ?? {}),
-    ...Object.keys(before.question ?? {}),
-    ...Object.keys(before.permission ?? {}),
-  ])
-  const candidates = candidateSessionIds ?? Array.from(knownSessionIds)
-  if (candidates.length === 0) return
-
-  // Re-fetch pending questions that may have been asked during an SSE gap,
-  // reconnect window, or directory materialization gap.
-  try {
-    const beforeSignatures = new Map(
-      candidates.map((sessionId) => [sessionId, requestSignature(before.question[sessionId])]),
-    )
-    const pendingQuestions = await opencodeClient.listPendingQuestions({ directories: [directory] })
-    const grouped: Record<string, QuestionRequest[]> = {}
-    for (const q of pendingQuestions) {
-      if (!q?.id || !q.sessionID) continue
-      if (!knownSessionIds.has(q.sessionID)) continue
-      const list = grouped[q.sessionID]
-      if (list) list.push(q)
-      else grouped[q.sessionID] = [q]
-    }
-    for (const sessionId of Object.keys(grouped)) {
-      grouped[sessionId].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-    }
-
-    for (const [sessionId, questions] of Object.entries(grouped)) {
-      const knownIds = new Set((before.question[sessionId] ?? []).map((item) => item.id))
-      const isViewed = isViewedInCurrentSession(directory, sessionId)
-      if (isViewed) continue
-      for (const question of questions) {
-        if (knownIds.has(question.id)) continue
-        const toastKey = getQuestionToastKey(sessionId, question.id)
-        if (!toastKey || pendingQuestionToastIds.has(toastKey)) continue
-        pendingQuestionToastIds.add(toastKey)
-        const firstQuestion = question.questions?.[0]
-        const title = firstQuestion?.header?.trim() || "Input needed"
-        const description = firstQuestion?.question?.trim() || "Agent is waiting for your response"
-        toast.info(title, {
-          id: `question-${toastKey}`,
-          description,
-          action: {
-            label: "Open session",
-            onClick: () => openSessionFromToast(sessionId, directory),
-          },
-        })
-      }
-    }
-
-    store.setState((state: DirectoryStore) => {
-      const merged = { ...state.question }
-      for (const [sessionId, questions] of Object.entries(grouped)) {
-        merged[sessionId] = questions
-      }
-      for (const sessionId of candidates) {
-        if (grouped[sessionId]) continue
-        const beforeSignature = beforeSignatures.get(sessionId) ?? ""
-        const currentSignature = requestSignature(state.question[sessionId])
-        if (currentSignature !== beforeSignature) continue
-        delete merged[sessionId]
-      }
-      return { question: merged }
-    })
-  } catch {
-    // Non-fatal: question resync best-effort
-  }
-
-  // Re-fetch pending permissions — same rationale as questions.
-  try {
-    const beforeSignatures = new Map(
-      candidates.map((sessionId) => [sessionId, requestSignature(before.permission[sessionId])]),
-    )
-    const pendingPermissions = await opencodeClient.listPendingPermissions({ directories: [directory] })
-    const grouped: Record<string, PermissionRequest[]> = {}
-    for (const permission of pendingPermissions) {
-      if (!permission?.id || !permission.sessionID) continue
-      if (!knownSessionIds.has(permission.sessionID)) continue
-      const list = grouped[permission.sessionID]
-      if (list) list.push(permission)
-      else grouped[permission.sessionID] = [permission]
-    }
-    for (const sessionId of Object.keys(grouped)) {
-      grouped[sessionId].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-    }
-
-    const permissionStore = usePermissionStore.getState()
-    const autoAcceptingSessionIds = Object.keys(grouped).filter((sessionId) => permissionStore.isSessionAutoAccepting(sessionId))
-
-    if (autoAcceptingSessionIds.length > 0) {
-      const acceptedIdsBySession = new Map<string, Set<string>>()
-      await Promise.all(autoAcceptingSessionIds.flatMap((sessionId) =>
-        (grouped[sessionId] ?? []).map(async (permission) => {
-          try {
-            await sessionActions.respondToPermission(permission.sessionID, permission.id, "once")
-            const accepted = acceptedIdsBySession.get(sessionId) ?? new Set<string>()
-            accepted.add(permission.id)
-            acceptedIdsBySession.set(sessionId, accepted)
-          } catch {
-            // Keep failed auto-accept permissions in UI state so the user can act.
-          }
-        }),
-      ))
-
-      for (const sessionId of autoAcceptingSessionIds) {
-        const acceptedIds = acceptedIdsBySession.get(sessionId)
-        if (!acceptedIds) continue
-        const remaining = (grouped[sessionId] ?? []).filter((permission) => !acceptedIds.has(permission.id))
-        if (remaining.length > 0) grouped[sessionId] = remaining
-        else delete grouped[sessionId]
-      }
-    }
-
-    for (const [sessionId, permissions] of Object.entries(grouped)) {
-      const knownIds = new Set((before.permission[sessionId] ?? []).map((item) => item.id))
-      const isViewed = isViewedInCurrentSession(directory, sessionId)
-      if (isViewed) continue
-      for (const permission of permissions) {
-        if (knownIds.has(permission.id)) continue
-        const toastKey = getPermissionToastKey(sessionId, permission.id)
-        if (!toastKey || pendingPermissionToastIds.has(toastKey)) continue
-        pendingPermissionToastIds.add(toastKey)
-        const description = typeof permission.permission === "string" && permission.permission.trim().length > 0
-          ? permission.permission
-          : "Agent needs your approval"
-        toast.info("Permission needed", {
-          id: `permission-${toastKey}`,
-          description,
-          action: {
-            label: "Open session",
-            onClick: () => openSessionFromToast(sessionId, directory),
-          },
-        })
-      }
-    }
-
-    store.setState((state: DirectoryStore) => {
-      const merged = { ...state.permission }
-      for (const [sessionId, permissions] of Object.entries(grouped)) {
-        merged[sessionId] = permissions
-      }
-      for (const sessionId of candidates) {
-        if (grouped[sessionId]) continue
-        const beforeSignature = beforeSignatures.get(sessionId) ?? ""
-        const currentSignature = requestSignature(state.permission[sessionId])
-        if (currentSignature !== beforeSignature) continue
-        delete merged[sessionId]
-      }
-      return { permission: merged }
-    })
-  } catch {
-    // Non-fatal: permission resync best-effort
-  }
-}
-
-async function resyncDirectoryAfterReconnect(
-  directory: string,
-  store: StoreApi<DirectoryStore>,
-  routingIndex: EventRoutingIndex,
-) {
-  const current = store.getState()
-  const candidateSessionIds = getActiveSessionCandidateIds(directory, current)
-  if (candidateSessionIds.length === 0) return
-
-  await resyncDirectorySessionStatuses(directory, store, candidateSessionIds)
-
-  const scopedClient = opencodeClient.getScopedSdkClient(directory)
-  await Promise.all(candidateSessionIds.map(async (sessionId) => {
-    const [sessionResponse, messageResponse] = await Promise.all([
-      retry(async () => {
-        const response = await scopedClient.session.get({ sessionID: sessionId })
-        assertSdkSuccess(response, "session.get")
-        return response
-      }).catch(() => null),
-      retry(async () => {
-        const response = await scopedClient.session.messages({ sessionID: sessionId, limit: RECONNECT_MESSAGE_LIMIT })
-        assertSdkSuccess(response, "session.messages")
-        return response
-      }).catch(() => null),
-    ])
-    const session = sessionResponse?.data
-    const records = messageResponse?.data
-    if (!session || !records) return
-    const cursor = messageResponse.response?.headers?.get?.("x-next-cursor") ?? undefined
-    setSessionPrefetch({
-      directory,
-      sessionID: sessionId,
-      limit: records.length,
-      cursor,
-      complete: !cursor,
-    })
-
-    const nextSession = stripSessionDiffSnapshots(session)
-    const nextMessages = records
-      .filter((record) => !!record?.info?.id)
-      .map((record) => stripMessageDiffSnapshots(record.info))
-      .sort((a, b) => cmp(a.id, b.id))
-
-    store.setState((state: DirectoryStore) => {
-      const sessionIndex = state.session.findIndex((item) => item.id === nextSession.id)
-      let sessions = state.session
-      let sessionChanged = false
-      let sessionTotal = state.sessionTotal
-
-      if (sessionIndex >= 0) {
-        if (!haveEquivalentSyncSnapshots(sessions[sessionIndex], nextSession)) {
-          sessions = [...state.session]
-          sessions[sessionIndex] = nextSession
-          sessionChanged = true
-        }
-      } else {
-        sessions = [...state.session]
-        sessions.push(nextSession)
-        sessions.sort((a, b) => cmp(a.id, b.id))
-        if (!nextSession.parentID) sessionTotal += 1
-        sessionChanged = true
-      }
-
-      const materialized = materializeSessionSnapshots(
-        state,
-        sessionId,
-        records.map((record) => ({
-          info: stripMessageDiffSnapshots(record.info),
-          parts: record.parts ?? [],
-        })),
-        { skipPartTypes: RECONNECT_SKIP_PARTS },
-      )
-      const messagesChanged = materialized.messagesChanged
-      const partsChanged = materialized.partsChanged
-      if (!sessionChanged && !messagesChanged && !partsChanged) {
-        return state
-      }
-
-      return {
-        ...(sessionChanged ? { session: sessions, sessionTotal } : {}),
-        ...(messagesChanged ? { message: materialized.message } : {}),
-        ...(partsChanged ? { part: materialized.part } : {}),
-      }
-    })
-
-    setIndexedSessionDirectory(routingIndex, nextSession.id, directory)
-    setIndexedSessionMessages(routingIndex, sessionId, directory, nextMessages)
-  }))
-
-  await resyncBlockingRequestsForDirectory(directory, store, candidateSessionIds)
-
-  ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
-}
-
-function handleEvent(
-  rawDirectory: string,
-  payload: Event,
-  childStores: ChildStoreManager,
-  routingIndex: EventRoutingIndex,
-) {
-  const directory = resolveDirectoryFromRoutingIndex(routingIndex, rawDirectory, payload, childStores)
-
-  if (handleUiNotificationEvent(payload, directory)) {
-    return
-  }
-
-  applySessionEventToGlobalSessions(payload)
-
-  // Global events
-  if (directory === "global" || !directory) {
-    const recent = isRecentBoot()
-    const result = reduceGlobalEvent(payload)
-    if (!result) return
-    if (result.type === "refresh") {
-      // Suppress refresh during/shortly after bootstrap
-      if (!recent) {
-        useGlobalSyncStore.setState({ reload: "pending" })
-      }
-    } else if (result.type === "project") {
-      const current = useGlobalSyncStore.getState()
-      useGlobalSyncStore.setState({
-        projects: applyGlobalProject(current, result.project).projects,
-      })
-    }
-    // On server.connected / global.disposed, re-bootstrap all directories
-    // but only if not during recent boot
-    if (payload.type === "server.connected" || payload.type === "global.disposed") {
-      if (!recent) {
-        for (const dir of childStores.children.keys()) {
-          const store = childStores.getChild(dir)
-          if (store && store.getState().status !== "loading") {
-            // Mark as loading to trigger re-bootstrap
-            store.setState({ status: "loading" as const })
-            childStores.ensureChild(dir)
-          }
-        }
-      }
-    }
-    return
-  }
-
-  // Directory events
-  let store = childStores.getChild(directory)
-  let resolvedDirectory = directory
-
-  if (!store) {
-    // Store not found for this directory — attempt recovery by scanning
-    // child stores for the session. This handles directory mismatches
-    // (trailing slashes, case differences, events with wrong directory).
-    const sessionID = getSessionIdFromPayload(payload)
-    if (sessionID) {
-      const fallbackDir = findSessionInChildStores(sessionID, childStores, routingIndex)
-      if (fallbackDir) {
-        store = childStores.getChild(fallbackDir)
-        resolvedDirectory = fallbackDir
-      }
-    }
-  }
-
-  if (!store) {
-    // Try as global event for unknown directories
-    const result = reduceGlobalEvent(payload)
-    if (result?.type === "refresh") {
-      useGlobalSyncStore.setState({ reload: "pending" })
-    } else if (result?.type === "project") {
-      const current = useGlobalSyncStore.getState()
-      useGlobalSyncStore.setState({
-        projects: applyGlobalProject(current, result.project).projects,
-      })
-    }
-    return
-  }
-
-  childStores.mark(resolvedDirectory)
-
-  if (payload.type === "permission.asked") {
-    const permission = payload.properties as PermissionRequest
-    const permissionStore = usePermissionStore.getState()
-    if (permissionStore.isSessionAutoAccepting(permission.sessionID)) {
-      updateRoutingIndexFromEvent(routingIndex, resolvedDirectory, payload)
-      void sessionActions.respondToPermission(permission.sessionID, permission.id, "once").catch(() => undefined)
-      return
-    }
-
-    const toastKey = getPermissionToastKey(permission.sessionID, permission.id)
-    const isViewed = isViewedInCurrentSession(resolvedDirectory, permission.sessionID)
-    if (!isViewed && toastKey && !pendingPermissionToastIds.has(toastKey)) {
-      pendingPermissionToastIds.add(toastKey)
-      const description = typeof permission.permission === "string" && permission.permission.trim().length > 0
-        ? permission.permission
-        : "Agent needs your approval"
-      toast.info("Permission needed", {
-        id: `permission-${toastKey}`,
-        description,
-        action: {
-          label: "Open session",
-          onClick: () => openSessionFromToast(permission.sessionID, resolvedDirectory),
-        },
-      })
-    }
-  }
-
-  if (payload.type === "permission.replied") {
-    const props = payload.properties as { sessionID?: string; requestID?: string }
-    const toastKey = getPermissionToastKey(props.sessionID, props.requestID)
-    if (toastKey) {
-      pendingPermissionToastIds.delete(toastKey)
-      toast.dismiss(`permission-${toastKey}`)
-    }
-  }
-
-  if (payload.type === "question.asked") {
-    const question = payload.properties as QuestionRequest
-    const sessionID = question.sessionID
-    const toastKey = getQuestionToastKey(sessionID, question.id)
-    const isViewed = isViewedInCurrentSession(resolvedDirectory, sessionID)
-    if (!isViewed && toastKey && !pendingQuestionToastIds.has(toastKey)) {
-      pendingQuestionToastIds.add(toastKey)
-      const firstQuestion = question.questions?.[0]
-      const title = firstQuestion?.header?.trim() || "Input needed"
-      const description = firstQuestion?.question?.trim() || "Agent is waiting for your response"
-      toast.info(title, {
-        id: `question-${toastKey}`,
-        description,
-        action: {
-          label: "Open session",
-          onClick: () => openSessionFromToast(sessionID, resolvedDirectory),
-        },
-      })
-    }
-  }
-
-  if (payload.type === "question.replied" || payload.type === "question.rejected") {
-    const props = payload.properties as { sessionID?: string; requestID?: string }
-    const toastKey = getQuestionToastKey(props.sessionID, props.requestID)
-    if (toastKey) {
-      pendingQuestionToastIds.delete(toastKey)
-      toast.dismiss(`question-${toastKey}`)
-    }
-  }
-
-  // Notification dispatch for session turn-complete and error events.
-  // These are NOT handled by the event reducer — only the notification store.
-  if (payload.type === "session.idle" || payload.type === "session.error") {
-    const props = payload.properties as { sessionID?: string; error?: { message?: string; code?: string } }
-    const sessionID = props.sessionID
-    // Skip subtask sessions — only top-level sessions generate notifications
-    const storeState = store.getState()
-    const session = storeState.session.find((s) => s.id === sessionID)
-    if (session && (session as { parentID?: string }).parentID) {
-      // subtask — skip notification
-    } else if (sessionID) {
-      appendNotification({
-        directory: resolvedDirectory,
-        session: sessionID,
-        time: Date.now(),
-        viewed: isViewedInCurrentSession(resolvedDirectory, sessionID),
-        ...(payload.type === "session.error"
-          ? { type: "error" as const, error: props.error }
-          : { type: "turn-complete" as const }),
-      })
-    }
-  }
-
-  // Sync-layer parent resync: when a child session goes idle, recover
-  // the parent session snapshot. This ensures the
-  // parent's task tool part reflects the child's completion even when
-  // no ToolPart component is mounted.
-  if (payload.type === "session.idle") {
-    const idleSessionId = getSessionIdFromPayload(payload)
-    if (idleSessionId && resolvedDirectory && resolvedDirectory !== "global") {
-      const sessionState = store.getState()
-      const idleSession = sessionState.session.find((s) => s.id === idleSessionId)
-      const parentID = idleSession
-        ? (idleSession as Session & { parentID?: string | null }).parentID
-        : null
-      if (parentID) {
-        enqueueSessionMaterialization(resolvedDirectory, parentID, childStores)
-      }
-    }
-  }
-
-  // Read live state, create targeted draft cloning ONLY fields that event
-  // type will mutate. This preserves reference identity for untouched slices
-  // so Zustand selectors skip re-renders for unrelated subscribers.
-  const current = store.getState()
-  const draft: State = { ...current }
-
-  switch (payload.type) {
-    case "session.created":
-    case "session.updated":
-    case "session.deleted":
-      draft.session = [...current.session]
-      draft.permission = { ...current.permission }
-      draft.todo = { ...current.todo }
-      draft.part = { ...current.part }
-      break
-    case "session.diff":
-      draft.session_diff = { ...current.session_diff }
-      break
-    case "session.status":
-    case "session.idle":
-    case "session.error":
-      draft.session_status = { ...(current.session_status ?? {}) }
-      break
-    case "todo.updated":
-      draft.todo = { ...current.todo }
-      break
-    case "message.updated":
-      draft.message = { ...current.message }
-      break
-    case "message.removed":
-      draft.message = { ...current.message }
-      draft.part = { ...current.part }
-      break
-    case "message.part.updated":
-    case "message.part.removed":
-    case "message.part.delta":
-      draft.part = { ...current.part }
-      break
-    case "vcs.branch.updated":
-      break
-    case "permission.asked":
-    case "permission.replied":
-      draft.permission = { ...current.permission }
-      break
-    case "question.asked":
-    case "question.replied":
-    case "question.rejected":
-      draft.question = { ...current.question }
-      break
-    case "lsp.updated":
-      draft.lsp = [...current.lsp]
-      break
-    default:
-      break
-  }
-
-  const reducerResult = applyDirectoryEvent(draft, payload, {
-    onSetSessionTodo: (sessionID, todos) => {
-      useTodosPersistStore.getState().setSessionTodos(sessionID, todos)
-    },
-  })
-  const reducerChanged = typeof reducerResult === "boolean" ? reducerResult : reducerResult.changed
-  const materializationResult = typeof reducerResult === "boolean" ? undefined : reducerResult.materialization
-
-  if (reducerChanged) {
-    store.setState(draft)
-    const sessionID = getSessionIdFromPayload(payload) ?? undefined
-    const messageID = getMessageIdFromPayload(payload) ?? undefined
-    syncDebug.dispatch.eventApplied(payload.type, sessionID, messageID)
-
-    // Snapshot materialization on message.updated: if the message was inserted or
-    // replaced but draft.part[messageID] is empty, the parts were lost or
-    // never arrived. Recover the session so the UI doesn't render a blank bubble.
-    if (sessionID && messageID && payload.type === "message.updated") {
-      const after = store.getState()
-      const info = (payload.properties as { info: Message }).info
-      if (info.role === "assistant" && (!after.part[messageID] || after.part[messageID].length === 0)) {
-        enqueueSessionMaterialization(resolvedDirectory, sessionID, childStores)
-      }
-    }
-  } else {
-    const sessionID = getSessionIdFromPayload(payload) ?? undefined
-    const messageID = getMessageIdFromPayload(payload) ?? undefined
-    syncDebug.dispatch.eventNoChange(payload.type, sessionID, messageID)
-
-  }
-
-  // Snapshot materialization is driven by typed reducer outcomes, not by
-  // inferring meaning from a generic false/no-change result.
-  if (materializationResult) {
-    const materializationSessionID = materializationResult.sessionID ?? getSessionIdFromPayload(payload) ?? undefined
-    if (materializationSessionID) {
-      enqueueSessionMaterialization(resolvedDirectory, materializationSessionID, childStores)
-    }
-  }
-
-  updateRoutingIndexFromEvent(routingIndex, resolvedDirectory, payload)
-}
-
-// ---------------------------------------------------------------------------
-// Provider
-// ---------------------------------------------------------------------------
-
-const dispatchOpenCodeUpdateAvailable = (payload: { version: string }) => {
-  if (typeof window === "undefined") return
-  window.dispatchEvent(new CustomEvent("openchamber:opencode-update-available", { detail: payload }))
-}
-
-export function SyncProvider(props: {
-  sdk: OpencodeClient
-  directory: string
-  children: React.ReactNode
-}) {
-  const messageStreamTransport = useConfigStore((state) => state.settingsMessageStreamTransport)
-  const childStoresRef = useRef<ChildStoreManager | null>(null)
-  if (!childStoresRef.current) childStoresRef.current = new ChildStoreManager()
-  const childStores = childStoresRef.current
-  const routingIndexRef = useRef<EventRoutingIndex | null>(null)
-  if (!routingIndexRef.current) routingIndexRef.current = createEventRoutingIndex()
-  const routingIndex = routingIndexRef.current
-  const lastActiveEventAtByDirectoryRef = useRef(new Map<string, number>())
-  const lastStatusPollAtByDirectoryRef = useRef(new Map<string, number>())
-  const lastFullResyncAtByDirectoryRef = useRef(new Map<string, number>())
-  const resyncingDirectoriesRef = useRef(new Set<string>())
-  const statusPollingDirectoriesRef = useRef(new Set<string>())
-  const pipelineReconnectRef = useRef<((reason?: string) => void) | null>(null)
-
-  const system = useMemo<SyncSystem>(
-    () => ({
-      childStores,
-      sdk: props.sdk,
-      directory: props.directory,
-    }),
-    [childStores, props.sdk, props.directory],
-  )
-
-  const triggerDirectoryResync = useCallback((directory: string) => {
-    const store = childStores.children.get(directory)
-    if (!store) return
-    const resyncing = resyncingDirectoriesRef.current
-    if (resyncing.has(directory)) return
-
-    lastFullResyncAtByDirectoryRef.current.set(directory, Date.now())
-    resyncing.add(directory)
-    void resyncDirectoryAfterReconnect(directory, store, routingIndex)
-      .catch(() => {
-        // Transient failure — the watchdog, next SSE event, or reconnect will catch up.
-      })
-      .finally(() => {
-        resyncing.delete(directory)
-      })
-  }, [childStores, routingIndex])
-
-  // Configure child store manager
-  useEffect(() => {
-    const bootingDirs = new Set<string>()
-
-    childStores.configure({
-      onBootstrap: (directory) => {
-        if (bootingDirs.has(directory)) return
-        bootingDirs.add(directory)
-
-        const store = childStores.getChild(directory)
-        if (!store) return
-
-        const runBootstrap = async (attempt: number) => {
-          const globalState = useGlobalSyncStore.getState()
-          await bootstrapDirectory({
-            directory,
-            sdk: props.sdk,
-            getState: () => store.getState(),
-            set: (patch) => {
-              store.setState(patch)
-              if (patch.session || patch.message) {
-                ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
-              }
-            },
-            global: {
-              config: globalState.config,
-              projects: globalState.projects,
-              providers: globalState.providers,
-            },
-            loadSessions: (dir) => retry(async () => {
-              const sessions = (await listGlobalSessionPages(props.sdk, {
-                directory: dir,
-                archived: false,
-                roots: true,
-                pageSize: 500,
-              }))
-                .filter((s) => !!s?.id)
-                .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
-              // Race guard: if the list came back empty but event pipeline
-              // already populated the store, don't clobber. OpenCode can
-              // answer HTTP with empty sessions while WS delivers session
-              // events for the same data (disk warmup race on app launch).
-              const currentSessions = store.getState().session
-              if (sessions.length === 0 && currentSessions.length > 0) {
-                console.warn(
-                  `[bootstrap] experimental.session.list returned empty for ${dir}; preserving ${currentSessions.length} existing sessions`,
-                )
-                return
-              }
-              store.setState({ session: sessions, sessionTotal: sessions.length, limit: Math.max(sessions.length, 50) })
-              ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
-            }),
-          })
-
-          // VS Code race: if sessions are still empty after bootstrap, OpenCode
-          // wasn't ready yet (bridge returned 503). Retry a few times.
-          const state = store.getState()
-          if (state.session.length === 0 && attempt < 5) {
-            console.warn(`[bootstrap] sessions empty for ${directory} after attempt ${attempt + 1}; retrying in 2s`)
-            await new Promise((r) => setTimeout(r, 2000))
-            store.setState({ status: "loading" as const })
-            await runBootstrap(attempt + 1)
-          } else if (state.session.length === 0) {
-            console.warn(`[bootstrap] sessions empty for ${directory} after ${attempt + 1} attempts; giving up`)
-          }
-        }
-
-        runBootstrap(0).finally(() => {
-          bootingDirs.delete(directory)
-        })
-      },
-      onDispose: (directory) => {
-        bootingDirs.delete(directory)
-      },
-      isBooting: (directory) => bootingDirs.has(directory),
-      isLoadingSessions: () => false,
-    })
-  }, [childStores, props.sdk, routingIndex])
-
-  // Bootstrap global state — set bootingRoot/bootedAt to suppress
-  // redundant refresh events during startup
-  useEffect(() => {
-    const generation = ++globalBootstrapGeneration
-    bootingRoot = true
-    const globalActions = useGlobalSyncStore.getState().actions
-    bootstrapGlobal(props.sdk, (patch) => {
-      if (globalBootstrapGeneration === generation) {
-        globalActions.set(patch)
-      }
-    })
-      .then(() => {
-        if (globalBootstrapGeneration === generation) {
-          bootedAt = Date.now()
-        }
-      })
-      .finally(() => {
-        if (globalBootstrapGeneration === generation) {
-          bootingRoot = false
-        }
-      })
-    return () => {
-      if (globalBootstrapGeneration === generation) {
-        bootingRoot = false
-      }
-    }
-  }, [props.sdk])
-
-  // Event pipeline — created once per mount. No class, no start/stop.
-  // Abort controller owned by the pipeline closure. Cleanup aborts + flushes.
-  useEffect(() => {
-    const pipeline = createEventPipeline({
-      sdk: props.sdk,
-      transport: messageStreamTransport,
-      routeDirectory: (directory, payload) => {
-        return resolveDirectoryFromRoutingIndex(routingIndex, directory, payload, childStores)
-      },
-      onEvent: (directory, payload) => {
-        if (!isStreamHeartbeatEvent(payload)) {
-          lastActiveEventAtByDirectoryRef.current.set(directory, Date.now())
-        }
-        dispatchVSCodeRuntimeNotificationEvent(directory, payload)
-        if (payload.type === "installation.update-available") {
-          const version = typeof (payload.properties as { version?: unknown })?.version === "string"
-            ? (payload.properties as { version: string }).version
-            : ""
-          if (version) {
-            dispatchOpenCodeUpdateAvailable({ version })
-          }
-        }
-        handleEvent(directory, payload, childStores, routingIndex)
-      },
-      onReconnect: () => {
-        useConfigStore.setState({
-          isConnected: true,
-          hasEverConnected: true,
-          connectionPhase: "connected",
-        })
-        if (isRecentBoot()) {
-          return
-        }
-        for (const dir of childStores.children.keys()) {
-          triggerDirectoryResync(dir)
-        }
-      },
-      onDisconnect: (reason) => {
-        const { hasEverConnected } = useConfigStore.getState()
-        useConfigStore.setState({
-          isConnected: false,
-          connectionPhase: hasEverConnected ? "reconnecting" : "connecting",
-          lastDisconnectReason: reason,
-        })
-      },
-      onTransportSwitch: () => {
-        // Transport changes are gap-prone in real networks. Treat them like a
-        // reconnect and refresh active session snapshots from HTTP.
-        useConfigStore.setState({
-          isConnected: true,
-          hasEverConnected: true,
-          connectionPhase: "connected",
-        })
-        for (const dir of childStores.children.keys()) {
-          triggerDirectoryResync(dir)
-        }
-      },
-    })
-    pipelineReconnectRef.current = pipeline.reconnect
-    return () => {
-      if (pipelineReconnectRef.current === pipeline.reconnect) {
-        pipelineReconnectRef.current = null
-      }
-      pipeline.cleanup()
-    }
-  }, [props.sdk, childStores, routingIndex, messageStreamTransport, triggerDirectoryResync])
-
-  useEffect(() => {
-    let stopped = false
-    let running = false
-
-    const pollDirectoryStatuses = async (
-      directory: string,
-      store: StoreApi<DirectoryStore>,
-      candidateSessionIds: string[],
-    ) => {
-      const polling = statusPollingDirectoriesRef.current
-      if (polling.has(directory)) return
-      polling.add(directory)
-      try {
-        const before = store.getState()
-        const statuses = await resyncDirectorySessionStatuses(directory, store, candidateSessionIds)
-        if (!statuses) return
-        const needsSnapshot = candidateSessionIds.some((sessionId) => (
-          needsSnapshotAfterStatusPoll(before, sessionId, statuses[sessionId])
-        ))
-        if (needsSnapshot) {
-          triggerDirectoryResync(directory)
-        }
-      } finally {
-        polling.delete(directory)
-      }
-    }
-
-    const tick = () => {
-      if (running || stopped) return
-      running = true
-      void Promise.resolve()
-        .then(() => {
-          if (stopped) return
-          const now = Date.now()
-          for (const [directory, store] of childStores.children.entries()) {
-            const state = store.getState()
-            const candidateSessionIds = getActiveSessionCandidateIds(directory, state)
-            if (candidateSessionIds.length === 0) {
-              lastActiveEventAtByDirectoryRef.current.delete(directory)
-              lastStatusPollAtByDirectoryRef.current.delete(directory)
-              lastFullResyncAtByDirectoryRef.current.delete(directory)
-              continue
-            }
-
-            if (!lastActiveEventAtByDirectoryRef.current.has(directory)) {
-              lastActiveEventAtByDirectoryRef.current.set(directory, now)
-            }
-
-            const lastStatusPollAt = lastStatusPollAtByDirectoryRef.current.get(directory) ?? 0
-            if (now - lastStatusPollAt >= ACTIVE_SESSION_STATUS_POLL_INTERVAL_MS) {
-              lastStatusPollAtByDirectoryRef.current.set(directory, now)
-              void pollDirectoryStatuses(directory, store, candidateSessionIds).catch(() => undefined)
-            }
-
-            const lastActiveEventAt = lastActiveEventAtByDirectoryRef.current.get(directory) ?? now
-            const lastFullResyncAt = lastFullResyncAtByDirectoryRef.current.get(directory) ?? 0
-            if (
-              now - lastActiveEventAt >= ACTIVE_SESSION_STALE_EVENT_MS
-              && now - lastFullResyncAt >= ACTIVE_SESSION_FULL_RESYNC_COOLDOWN_MS
-            ) {
-              pipelineReconnectRef.current?.("active_stream_stale")
-              triggerDirectoryResync(directory)
-            }
-          }
-        })
-        .finally(() => {
-          running = false
-          if (stopped) {
-            statusPollingDirectoriesRef.current.clear()
-          }
-        })
-    }
-
-    const interval = setInterval(tick, ACTIVE_SESSION_WATCHDOG_INTERVAL_MS)
-    tick()
-
-    return () => {
-      stopped = true
-      clearInterval(interval)
-    }
-  }, [childStores, triggerDirectoryResync])
-
-  // Ensure current directory's child store exists
-  useEffect(() => {
-    let seedExpiryTimer: ReturnType<typeof setTimeout> | undefined
-    if (props.directory) {
-      const store = childStores.ensureChild(props.directory)
-      const statusSeed = getRuntimeLiveStatusSeed(getRuntimeKey(), props.directory)
-      if (statusSeed) {
-        store.setState((state: DirectoryStore) => ({
-          session_status: {
-            ...state.session_status,
-            [statusSeed.sessionId]: state.session_status[statusSeed.sessionId] ?? statusSeed.status,
-          },
-        }))
-        seedExpiryTimer = setTimeout(() => {
-          store.setState((state: DirectoryStore) => {
-            if (state.session_status[statusSeed.sessionId] !== statusSeed.status) {
-              return state
-            }
-            return {
-              session_status: {
-                ...state.session_status,
-                [statusSeed.sessionId]: { type: "idle" as const },
-              },
-            }
-          })
-        }, LIVE_STATUS_TTL_MS)
-      }
-      ingestDirectoryStateIntoRoutingIndex(routingIndex, props.directory, store.getState())
-    }
-    return () => {
-      if (seedExpiryTimer) clearTimeout(seedExpiryTimer)
-    }
-  }, [props.directory, childStores, routingIndex])
-
-  // Set refs so non-React code (session-actions, session-ui-store) can access sync state
-  useEffect(() => {
-    setSyncRefs(props.sdk, childStores, props.directory, (sessionID, dir) => {
-      setIndexedSessionDirectory(routingIndex, sessionID, dir)
-    })
-    setActionRefs(
-      props.sdk,
-      childStores,
-      () => opencodeClient.getDirectory() || props.directory,
-    )
-  }, [props.sdk, props.directory, childStores, routingIndex])
-
-  // Subscribe to child store for streaming state derivation
-  useEffect(() => {
-    if (!props.directory) return
-    const store = childStores.getChild(props.directory)
-    if (!store) return
-    updateStreamingState(store.getState())
-    const unsubscribe = store.subscribe((state) => {
-      updateStreamingState(state)
-    })
-    return unsubscribe
-  }, [props.directory, childStores])
-
-  return <SyncContext.Provider value={system}>{props.children}</SyncContext.Provider>
-}
-
-// ---------------------------------------------------------------------------
-// Hooks
-// ---------------------------------------------------------------------------
-
-/** Access the global sync store */
-export function useGlobalSync() {
-  return useGlobalSyncStore()
-}
-
-/** Access the global sync store with a selector */
-export function useGlobalSyncSelector<T>(selector: (state: GlobalSyncStore) => T): T {
-  return useGlobalSyncStore(selector)
-}
-
-/** Get the child store for a directory (defaults to current) */
-export function useDirectoryStore(directory?: string): StoreApi<DirectoryStore> {
-  const system = useSyncSystem()
-  const dir = directory ?? system.directory
-  return system.childStores.ensureChild(dir)
-}
-
-/** Select from the current directory's store */
-export function useDirectorySync<T>(selector: (state: State) => T, directory?: string): T {
-  const store = useDirectoryStore(directory)
-  return useStore(store, selector)
-}
-
-/** Get the revert messageID for a session (if reverted) */
-export function useSessionRevertMessageID(sessionID: string, directory?: string): string | undefined {
-  return useDirectorySync(
-    useCallback((state: State) => {
-      const session = state.session.find((s) => s.id === sessionID)
-      return (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
-    }, [sessionID]),
-    directory,
-  )
-}
-
-/** Get session messages for a specific session */
-export function useSessionMessages(sessionID: string, directory?: string) {
-  const store = useDirectoryStore(directory)
-  const getSnapshot = useCallback(() => {
-    if (!sessionID) return EMPTY_MESSAGES
-    return store.getState().message[sessionID] ?? EMPTY_MESSAGES
-  }, [sessionID, store])
-  const subscribe = useCallback((notify: () => void) => {
-    if (!sessionID) return () => undefined
-    return store.subscribe(notify)
-  }, [sessionID, store])
-  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-}
-
-/**
- * Get visible session messages — filters out reverted messages.
- * Filters out reverted messages (id >= session.revert.messageID).
- */
-export function useVisibleSessionMessages(sessionID: string, directory?: string) {
-  const messages = useSessionMessages(sessionID, directory)
-  const revertMessageID = useSessionRevertMessageID(sessionID, directory)
-  return useMemo(() => {
-    if (!revertMessageID) return messages
-    return messages.filter((m) => m.id < revertMessageID)
-  }, [messages, revertMessageID])
-}
-
-/** Check whether the message list for a session has been loaded into sync state. */
-export function useSessionMessagesResolved(sessionID: string, directory?: string): boolean {
-  return useDirectorySync(
-    useCallback((state: State) => {
-      if (!sessionID) return false
-      return Object.prototype.hasOwnProperty.call(state.message, sessionID)
-    }, [sessionID]),
-    directory,
-  )
-}
-
-/** Get parts for a specific message */
-export function useSessionParts(messageID: string, directory?: string) {
-  return useDirectorySync(
-    useCallback((state: State) => state.part[messageID] ?? EMPTY_PARTS, [messageID]),
-    directory,
-  )
-}
-
-/** Get status for a specific session */
-export function useSessionStatus(sessionID: string, directory?: string) {
-  const store = useDirectoryStore(directory)
-  const getSnapshot = useCallback(() => {
-    if (!sessionID) return undefined
-    return store.getState().session_status?.[sessionID]
-  }, [sessionID, store])
-  const subscribe = useCallback((notify: () => void) => {
-    if (!sessionID) return () => undefined
-    return store.subscribe(notify)
-  }, [sessionID, store])
-  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-}
-
-/** Get permissions for a specific session */
-export function useSessionPermissions(sessionID: string, directory?: string) {
-  const store = useDirectoryStore(directory)
-  const getSnapshot = useCallback(() => {
-    if (!sessionID) return EMPTY_PERMISSION_REQUESTS
-    return store.getState().permission[sessionID] ?? EMPTY_PERMISSION_REQUESTS
-  }, [sessionID, store])
-  const subscribe = useCallback((notify: () => void) => {
-    if (!sessionID) return () => undefined
-    return store.subscribe(notify)
-  }, [sessionID, store])
-  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-}
-
-/** Get questions for a specific session */
-export function useSessionQuestions(sessionID: string, directory?: string) {
-  return useDirectorySync(
-    useCallback((state: State) => state.question[sessionID] ?? EMPTY_QUESTION_REQUESTS, [sessionID]),
-    directory,
-  )
-}
-
-/** Get sessions list for a directory */
-export function useSessions(directory?: string) {
-  return useDirectorySync(
-    useCallback((state: State) => state.session, []),
-    directory,
-  )
-}
-
-const getSidebarSessionSignature = (session: Session, stableUpdatedAt: number): string => {
-  const directory = (session as Session & { directory?: string | null }).directory ?? ''
-  const parentID = (session as Session & { parentID?: string | null }).parentID ?? ''
-  const projectWorktree = (session as Session & { project?: { worktree?: string | null } | null }).project?.worktree ?? ''
-  const shared = session.share?.url ?? ''
-  return [
-    session.id,
-    session.title ?? '',
-    session.time?.created ?? 0,
-    session.time?.archived ? 1 : 0,
-    directory,
-    parentID,
-    projectWorktree,
-    shared,
-    stableUpdatedAt,
-  ].join('|')
-}
-
-/** Get sessions stabilized for sidebar tree rendering */
-export function useSidebarSessions(directory?: string): Session[] {
-  const store = useDirectoryStore(directory)
-  const cacheRef = React.useRef<{
-    source: Session[]
-    streamingSignature: string
-    array: Session[]
-    signatures: Map<string, string>
-    sessionsById: Map<string, Session>
-    stableUpdatedAtById: Map<string, number>
-    streamingById: Map<string, boolean>
-  } | null>(null)
-
-  const getSnapshot = React.useCallback(() => {
-    const state = store.getState()
-    const source = state.session
-    const cached = cacheRef.current
-    const streamingSignature = source
-      .map((session) => {
-        const statusType = state.session_status?.[session.id]?.type
-        const isStreaming = statusType === 'busy' || statusType === 'retry'
-        return `${session.id}:${isStreaming ? 1 : 0}`
-      })
-      .join('|')
-
-    if (cached && cached.source === source && cached.streamingSignature === streamingSignature) {
-      return cached.array
-    }
-
-    const signatures = new Map<string, string>()
-    const sessionsById = new Map<string, Session>()
-    const stableUpdatedAtById = new Map<string, number>()
-    const streamingById = new Map<string, boolean>()
-    let changed = !cached || cached.array.length !== source.length
-
-    const array = source.map((session) => {
-      const rawUpdatedAt = Number(session.time?.updated ?? session.time?.created ?? 0)
-      const statusType = state.session_status?.[session.id]?.type
-      const isStreaming = statusType === 'busy' || statusType === 'retry'
-      const cachedUpdatedAt = cached?.stableUpdatedAtById.get(session.id) ?? rawUpdatedAt
-      const wasStreaming = cached?.streamingById.get(session.id) ?? false
-      const stableUpdatedAt = isStreaming
-        ? (wasStreaming ? cachedUpdatedAt : Math.max(rawUpdatedAt, cachedUpdatedAt, Date.now()))
-        : Math.max(rawUpdatedAt, cachedUpdatedAt)
-      const signature = getSidebarSessionSignature(session, stableUpdatedAt)
-      signatures.set(session.id, signature)
-      stableUpdatedAtById.set(session.id, stableUpdatedAt)
-      streamingById.set(session.id, isStreaming)
-
-      const cachedSession = cached?.sessionsById.get(session.id)
-      if (
-        cachedSession
-        && cached?.signatures.get(session.id) === signature
-      ) {
-        sessionsById.set(session.id, cachedSession)
-        return cachedSession
-      }
-
-      changed = true
-      const nextSession = stableUpdatedAt === rawUpdatedAt
-        ? session
-        : {
-            ...session,
-            time: {
-              ...session.time,
-              updated: stableUpdatedAt,
-            },
-          }
-      sessionsById.set(session.id, nextSession)
-      return nextSession
-    })
-
-    if (!changed && cached) {
-      cacheRef.current = {
-        source,
-        streamingSignature,
-        array: cached.array,
-        signatures,
-        sessionsById: cached.sessionsById,
-        stableUpdatedAtById,
-        streamingById,
-      }
-      return cached.array
-    }
-
-    cacheRef.current = { source, streamingSignature, array, signatures, sessionsById, stableUpdatedAtById, streamingById }
-    return array
-  }, [store])
-
-  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
-}
-
-/** Get one session by id for a directory */
-export function useSession(sessionID?: string | null, directory?: string) {
-  const { childStores } = useSyncSystem()
-  const getSnapshot = useCallback(() => {
-    if (directory) {
-      return childStores.getChild(directory)?.getState().session.find((session) => session.id === sessionID)
-    }
-    return findLiveSession(getLiveStates(childStores), sessionID)
-  }, [childStores, directory, sessionID])
-
-  const subscribe = useCallback((notify: () => void) => {
-    if (directory) {
-      return childStores.ensureChild(directory).subscribe(notify)
-    }
-    return childStores.subscribeAll(notify)
-  }, [childStores, directory])
-
-  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-}
-
-/** Get one session directory by id for a directory */
-export function useSessionDirectory(sessionID?: string | null, directory?: string): string | undefined {
-  const session = useSession(sessionID, directory)
-  return (session as (typeof session & { directory?: string | null }) | undefined)?.directory ?? undefined
-}
-
-/** Get the SDK client */
-export function useSyncSDK() {
-  return useSyncSystem().sdk
-}
-
-/** Get the current directory */
-export function useSyncDirectory() {
-  return useSyncSystem().directory
-}
-
-/** Get the child store manager (for advanced operations) */
-export function useChildStoreManager() {
-  return useSyncSystem().childStores
-}
-
-export type SessionTextMessage = {
-  id: string
-  role: string | null
-  text: string
-}
-
-const getPartText = (part: Part): string => {
-  if (part?.type !== "text") return ""
-  const text = (part as { text?: unknown }).text
-  return typeof text === "string" ? text : ""
-}
-
-const getConcatenatedTextFromParts = (parts: Part[]): string => {
-  let text = ""
-  for (const part of parts) {
-    text += getPartText(part)
-  }
-  return text
-}
-
-const getFirstTextFromParts = (parts: Part[]): string => {
-  for (const part of parts) {
-    const text = getPartText(part)
-    if (text.length > 0) return text
-  }
-  return ""
-}
-
-type SessionMessageRecord = { info: Message; parts: Part[] }
-const EMPTY_SESSION_MESSAGE_RECORDS: SessionMessageRecord[] = []
-
-type SessionMessageRecordsSnapshot = {
-  sessionID: string
-  sourceMessages: Message[]
-  visibleMessages: Message[]
-  revertMessageID?: string
-  suspendPartUpdates: boolean
-  list: SessionMessageRecord[]
-  byId: Map<string, SessionMessageRecord>
-}
-
-const SESSION_MESSAGE_RECORDS_CACHE_MAX = 40
-const VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX = 4
-const VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES = 30
-const MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX = 4
-const MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES = 30
-const sessionMessageRecordsCache = new WeakMap<StoreApi<DirectoryStore>, Map<string, SessionMessageRecordsSnapshot>>()
-
-const getSessionMessageRecordsCacheKey = (sessionID: string, suspendPartUpdates: boolean): string => (
-  `${sessionID}\u0000${suspendPartUpdates ? 1 : 0}`
-)
-
-const getSessionMessageRecordsCache = (store: StoreApi<DirectoryStore>): Map<string, SessionMessageRecordsSnapshot> => {
-  let cache = sessionMessageRecordsCache.get(store)
-  if (!cache) {
-    cache = new Map()
-    sessionMessageRecordsCache.set(store, cache)
-  }
-  return cache
-}
-
-const readCachedSessionMessageRecordsSnapshot = (
-  store: StoreApi<DirectoryStore>,
-  sessionID: string,
-  suspendPartUpdates: boolean,
-): SessionMessageRecordsSnapshot | undefined => {
-  const cache = sessionMessageRecordsCache.get(store)
-  if (!cache) return undefined
-  const key = getSessionMessageRecordsCacheKey(sessionID, suspendPartUpdates)
-  const cached = cache.get(key)
-  if (!cached) return undefined
-  cache.delete(key)
-  cache.set(key, cached)
-  return cached
-}
-
-const rememberSessionMessageRecordsSnapshot = (
-  store: StoreApi<DirectoryStore>,
-  snapshot: SessionMessageRecordsSnapshot,
-): void => {
-  if (!snapshot.sessionID) return
-  const cache = getSessionMessageRecordsCache(store)
-  const key = getSessionMessageRecordsCacheKey(snapshot.sessionID, snapshot.suspendPartUpdates)
-  const constrainedMaxMessages = isVSCodeRuntime()
-    ? VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES
-    : isMobileSurfaceRuntime()
-      ? MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES
-      : null
-  if (constrainedMaxMessages !== null && snapshot.list.length > constrainedMaxMessages) {
-    cache.delete(key)
-    return
-  }
-  cache.delete(key)
-  cache.set(key, snapshot)
-  const max = isVSCodeRuntime()
-    ? VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX
-    : isMobileSurfaceRuntime()
-      ? MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX
-      : SESSION_MESSAGE_RECORDS_CACHE_MAX
-  while (cache.size > max) {
-    const oldest = cache.keys().next().value
-    if (typeof oldest !== "string") break
-    cache.delete(oldest)
-  }
-}
-
-export function dropCachedSessionMessageRecordsSnapshots(
-  store: StoreApi<DirectoryStore>,
-  sessionIDs: Iterable<string>,
-): void {
-  const cache = sessionMessageRecordsCache.get(store)
-  if (!cache) return
-  for (const sessionID of sessionIDs) {
-    if (!sessionID) continue
-    cache.delete(getSessionMessageRecordsCacheKey(sessionID, false))
-    cache.delete(getSessionMessageRecordsCacheKey(sessionID, true))
-  }
-}
-
-const snapshotPartsMatchState = (snapshot: SessionMessageRecordsSnapshot, state: State): boolean => {
-  if (snapshot.suspendPartUpdates) {
-    return true
-  }
-
-  for (const record of snapshot.list) {
-    if ((state.part[record.info.id] ?? EMPTY_PARTS) !== record.parts) {
-      return false
-    }
-  }
-
-  return true
-}
-
-const getReusableSessionMessageRecordsSnapshot = (
-  store: StoreApi<DirectoryStore>,
-  state: State,
-  sessionID: string,
-  suspendPartUpdates: boolean,
-): SessionMessageRecordsSnapshot | undefined => {
-  const cached = readCachedSessionMessageRecordsSnapshot(store, sessionID, suspendPartUpdates)
-  if (!cached) return undefined
-  const sourceMessages = state.message[sessionID] ?? EMPTY_MESSAGES
-  const session = state.session.find((candidate) => candidate.id === sessionID)
-  const revertMessageID = (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
-  if (
-    cached.sourceMessages === sourceMessages
-    && cached.revertMessageID === revertMessageID
-    && cached.suspendPartUpdates === suspendPartUpdates
-    && snapshotPartsMatchState(cached, state)
-  ) {
-    return cached
-  }
-  return undefined
-}
-
-function getVisibleMessagesForSession(state: State, sessionID: string, previous?: SessionMessageRecordsSnapshot): {
-  sourceMessages: Message[]
-  visibleMessages: Message[]
-  revertMessageID?: string
-} {
-  const sourceMessages = state.message[sessionID] ?? EMPTY_MESSAGES
-  const session = state.session.find((candidate) => candidate.id === sessionID)
-  const revertMessageID = (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
-
-  if (
-    previous
-    && previous.sourceMessages === sourceMessages
-    && previous.revertMessageID === revertMessageID
-  ) {
-    return {
-      sourceMessages,
-      visibleMessages: previous.visibleMessages,
-      revertMessageID,
-    }
-  }
-
-  return {
-    sourceMessages,
-    visibleMessages: revertMessageID ? sourceMessages.filter((message) => message.id < revertMessageID) : sourceMessages,
-    revertMessageID,
-  }
-}
-
-export function buildSessionMessageRecordsSnapshot(
-  state: State,
-  sessionID: string,
-  previous?: SessionMessageRecordsSnapshot,
-  suspendPartUpdates = false,
-): SessionMessageRecordsSnapshot {
-  const { sourceMessages, visibleMessages, revertMessageID } = getVisibleMessagesForSession(state, sessionID, previous)
-  const nextById = new Map<string, SessionMessageRecord>()
-  const nextList = visibleMessages.map((message) => {
-    const previousRecord = previous?.byId.get(message.id)
-    const parts = suspendPartUpdates && previousRecord
-      ? previousRecord.parts
-      : (state.part[message.id] ?? EMPTY_PARTS)
-
-    const nextRecord = previousRecord && previousRecord.info === message && previousRecord.parts === parts
-      ? previousRecord
-      : { info: message, parts }
-
-    nextById.set(message.id, nextRecord)
-    return nextRecord
-  })
-
-  const unchanged = Boolean(previous)
-    && previous?.visibleMessages === visibleMessages
-    && previous.list.length === nextList.length
-    && previous.list.every((record, index) => record === nextList[index])
-
-  if (unchanged && previous) {
-    return previous
-  }
-
-  return {
-    sessionID,
-    sourceMessages,
-    visibleMessages,
-    revertMessageID,
-    suspendPartUpdates,
-    list: nextList,
-    byId: nextById,
-  }
-}
-
-export function useSessionMessageCount(sessionID: string, directory?: string): number {
-  return useDirectorySync(
-    useCallback((state: State) => {
-      if (!sessionID) return 0
-      return state.message[sessionID]?.length ?? 0
-    }, [sessionID]),
-    directory,
-  )
-}
-
-export function useSessionTextMessages(sessionID: string, directory?: string): SessionTextMessage[] {
-  const records = useSessionMessageRecords(sessionID, directory)
-
-  return useMemo(
-    () => records.map((record) => ({
-      id: record.info.id,
-      role: typeof record.info.role === "string" ? record.info.role : null,
-      text: getConcatenatedTextFromParts(record.parts),
-    })),
-    [records],
-  )
-}
-
-export function useUserMessageHistory(sessionID: string, directory?: string): string[] {
-  const records = useSessionMessageRecords(sessionID, directory)
-  const userMessages = useMemo(() => records.filter((record) => record.info.role === 'user'), [records])
-
-  return useMemo(() => {
-    const history: string[] = []
-    for (let index = userMessages.length - 1; index >= 0; index -= 1) {
-      const message = userMessages[index]
-      const text = getFirstTextFromParts(message.parts)
-      if (text.length > 0) {
-        history.push(text)
-      }
-    }
-    return history
-  }, [userMessages])
-}
-
-/**
- * Get messages for a session in the old {info, parts}[] format.
- * Uses visible messages (filtered by revert state).
- *
- * Uses a ref-stable parts lookup that only triggers re-renders when
- * a part array for one of our displayed messages actually changes.
- */
-export function useSessionMessageRecords(
-  sessionID: string,
-  directory?: string,
-  options?: { suspendPartUpdates?: boolean },
-) {
-  const store = useDirectoryStore(directory)
-  const snapshotRef = useRef<SessionMessageRecordsSnapshot>({
-    sessionID,
-    sourceMessages: EMPTY_MESSAGES,
-    visibleMessages: EMPTY_MESSAGES,
-    revertMessageID: undefined,
-    suspendPartUpdates: Boolean(options?.suspendPartUpdates),
-    list: [],
-    byId: new Map(),
-  })
-
-  const getSnapshot = useCallback(() => {
-    if (!sessionID) {
-      return EMPTY_SESSION_MESSAGE_RECORDS
-    }
-
-    const state = store.getState()
-    const suspendPartUpdates = Boolean(options?.suspendPartUpdates)
-    const reusableSnapshot = getReusableSessionMessageRecordsSnapshot(store, state, sessionID, suspendPartUpdates)
-    if (reusableSnapshot) {
-      snapshotRef.current = reusableSnapshot
-      return reusableSnapshot.list
-    }
-
-    const previousSnapshot = snapshotRef.current.sessionID === sessionID
-      ? snapshotRef.current
-      : readCachedSessionMessageRecordsSnapshot(store, sessionID, suspendPartUpdates)
-
-    const nextSnapshot = buildSessionMessageRecordsSnapshot(
-      state,
-      sessionID,
-      previousSnapshot,
-      suspendPartUpdates,
-    )
-    snapshotRef.current = nextSnapshot
-    rememberSessionMessageRecordsSnapshot(store, nextSnapshot)
-    return nextSnapshot.list
-  }, [options?.suspendPartUpdates, sessionID, store])
-
-  const subscribe = useCallback((notify: () => void) => {
-    if (!sessionID) return () => undefined
-    return store.subscribe(notify)
-  }, [sessionID, store])
-
-  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-}
-
-/**
- * Ensures a session's messages are loaded into the sync store.
- * If the session exists in state.session but messages haven't been fetched
- * (state.message[sessionID] is absent), triggers a background API fetch.
- *
- * This covers the case where a user navigates to an old parent session
- * whose child session messages were never loaded — bootstrap only loads
- * session metadata, not messages.
- */
-
-// Module-level in-flight tracking for useEnsureSessionMessages.
-// Prevents redundant parallel fetches when multiple component instances
-// (e.g. multiple ToolParts) request the same session's messages.
-const _ensureMessagesLoading = new Set<string>()
-
-export function useEnsureSessionMessages(sessionID: string, directory?: string) {
-  const syncDirectory = useSyncDirectory()
-  const resolvedDirectory = directory ?? syncDirectory
-  const store = useDirectoryStore(resolvedDirectory)
-
-  React.useEffect(() => {
-    if (!sessionID) return
-
-    const state = store.getState()
-    // Already loaded into a renderable message/part snapshot — nothing to do.
-    if (getSessionMaterializationStatus(state, sessionID).renderable) return
-    // Session doesn't exist — nothing to load
-    if (!state.session.some((s) => s.id === sessionID)) return
-
-    const loadingKey = `${resolvedDirectory}:${sessionID}`
-    // Already loading this session for this directory
-    if (_ensureMessagesLoading.has(loadingKey)) return
-
-    _ensureMessagesLoading.add(loadingKey)
-
-    void (async () => {
-      try {
-        await materializeSessionFromServer(resolvedDirectory, sessionID, store)
-      } catch {
-        // Transient failure — next navigation or reconnect will retry
-      } finally {
-        _ensureMessagesLoading.delete(loadingKey)
-      }
-    })()
-  }, [sessionID, store, resolvedDirectory])
-}
-
-/**
- * Determines if a session is actively working.
- * Checks session_status and only falls back to incomplete assistant messages
- * when authoritative status is missing.
- * Returns false when permissions are pending (permission indicator takes priority).
- */
-export function useIsSessionWorking(sessionID: string, directory?: string): boolean {
-  const status = useSessionStatus(sessionID, directory)
-  const permissions = useSessionPermissions(sessionID, directory)
-  const messages = useSessionMessages(sessionID, directory)
-
-  return useMemo(() => {
-    // Permissions pending → not "working" (show permission indicator instead)
-    if (permissions.length > 0) return false
-
-    // Check session_status
-    const hasAuthoritativeStatus = status !== undefined
-    const statusWorking = hasAuthoritativeStatus && status.type !== "idle"
-
-    // Check for incomplete assistant message (fallback if status event delayed)
-    let hasPendingAssistant = false
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const m = messages[i]
-      if (m.role === "assistant" && typeof (m as { time?: { completed?: number } }).time?.completed !== "number") {
-        hasPendingAssistant = true
-        break
-      }
-    }
-
-    if (hasAuthoritativeStatus) return statusWorking
-    return hasPendingAssistant
-  }, [status, permissions, messages])
-}
-
-const EMPTY_MESSAGES: Message[] = []
-const EMPTY_PARTS: Part[] = []
-const EMPTY_PERMISSION_REQUESTS: PermissionRequest[] = []
-const EMPTY_QUESTION_REQUESTS: QuestionRequest[] = []
+/* eslint-disable react-refresh/only-export-components */
+import React, { createContext, useContext, useEffect, useRef, useCallback, useMemo } from "react"
+import type { Event, Message, Part } from "@opencode-ai/sdk/v2/client"
+import type { Session } from "@opencode-ai/sdk/v2"
+import type { StoreApi } from "zustand"
+import { useStore } from "zustand"
+import type { OpencodeClient } from "@opencode-ai/sdk/v2/client"
+import { createEventPipeline } from "./event-pipeline"
+import { isVSCodeRuntime } from "@/lib/desktop"
+import { isMobileSurfaceRuntime } from "@/lib/runtimeSurface"
+import { reduceGlobalEvent, applyGlobalProject, applyDirectoryEvent } from "./event-reducer"
+import { useGlobalSyncStore, type GlobalSyncStore } from "./global-sync-store"
+import { ChildStoreManager, type DirectoryStore } from "./child-store"
+import {
+  aggregateLiveSessions,
+  aggregateLiveSessionStatuses,
+  areSessionListsEquivalent,
+  areStatusMapsEquivalent,
+  findLiveSession,
+  findLiveSessionStatus,
+} from "./live-aggregate"
+import { bootstrapGlobal, bootstrapDirectory } from "./bootstrap"
+import { retry } from "./retry"
+import { updateStreamingState } from "./streaming"
+import { setActionRefs } from "./session-actions"
+import { setSyncRefs } from "./sync-refs"
+import { stripMessageDiffSnapshots, stripSessionDiffSnapshots } from "./sanitize"
+import { syncDebug } from "./debug"
+import { getReconnectCandidateSessionIds } from "./reconnect-recovery"
+import { opencodeClient } from "@/lib/opencode/client"
+import { usePermissionStore } from "@/stores/permissionStore"
+import { useConfigStore } from "@/stores/useConfigStore"
+import { useTodosPersistStore } from "@/stores/useTodosPersistStore"
+import { toast } from "@/components/ui"
+import { appendNotification } from "./notification-store"
+import type { State } from "./types"
+import type { SessionStatus } from "@opencode-ai/sdk/v2/client"
+import type { PermissionRequest } from "@/types/permission"
+import type { QuestionRequest } from "@/types/question"
+import * as sessionActions from "./session-actions"
+import { getSessionMaterializationStatus, materializeSessionSnapshots } from "./materialization"
+import { openSessionFromToast } from "./session-navigation"
+import { getRuntimeLiveStatusSeed, LIVE_STATUS_TTL_MS } from "./runtime-live-memory"
+import { getRuntimeKey } from "@/lib/runtime-switch"
+import { getRegisteredRuntimeAPIs } from "@/contexts/runtimeAPIRegistry"
+import { setSessionPrefetch } from "./session-prefetch-cache"
+import { listGlobalSessionPages } from "@/stores/globalSessions"
+import { useGlobalSessionsStore } from "@/stores/useGlobalSessionsStore"
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+type SyncSystem = {
+  childStores: ChildStoreManager
+  sdk: OpencodeClient
+  directory: string
+}
+
+const SYNC_CONTEXT_GLOBAL_KEY = "__openchamber_sync_context__"
+type SyncGlobal = typeof globalThis & {
+  [SYNC_CONTEXT_GLOBAL_KEY]?: React.Context<SyncSystem | null>
+}
+
+const syncGlobal = globalThis as SyncGlobal
+const SyncContext = syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] ?? createContext<SyncSystem | null>(null)
+syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] = SyncContext
+
+type SdkResult<T> = {
+  data?: T
+  error?: unknown
+  response?: {
+    status?: number
+    headers?: { get?: (name: string) => string | null }
+  }
+}
+
+function formatSdkError(error: unknown): string {
+  if (error instanceof Error) return error.message
+  if (typeof error === "string") return error
+  if (error && typeof error === "object" && "message" in error && typeof (error as { message?: unknown }).message === "string") {
+    return (error as { message: string }).message
+  }
+  try {
+    return JSON.stringify(error)
+  } catch {
+    return String(error)
+  }
+}
+
+function assertSdkSuccess<T>(result: SdkResult<T>, operation: string): T | undefined {
+  if (!result.error) return result.data
+  const status = result.response?.status
+  throw new Error(`${operation} failed${status ? ` (${status})` : ""}: ${formatSdkError(result.error)}`)
+}
+
+function useSyncSystem() {
+  const ctx = useContext(SyncContext)
+  if (!ctx) throw new Error("useSyncSystem must be used within <SyncProvider>")
+  return ctx
+}
+
+function getLiveStates(childStores: ChildStoreManager): State[] {
+  return Array.from(childStores.children.values(), (store) => store.getState())
+}
+
+function useLiveSyncSelector<T>(selector: (states: State[]) => T, isEqual: (left: T, right: T) => boolean = Object.is): T {
+  const { childStores } = useSyncSystem()
+  const cacheRef = useRef<T | undefined>(undefined)
+  const initializedRef = useRef(false)
+
+  const getSnapshot = useCallback(() => {
+    const next = selector(getLiveStates(childStores))
+    if (initializedRef.current && isEqual(cacheRef.current as T, next)) {
+      return cacheRef.current as T
+    }
+
+    cacheRef.current = next
+    initializedRef.current = true
+    return next
+  }, [childStores, isEqual, selector])
+
+  return React.useSyncExternalStore(
+    useCallback((notify) => childStores.subscribeAll(notify), [childStores]),
+    getSnapshot,
+    getSnapshot,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Event handler — applies one SSE event at a time to the live store.
+// Each event reads live state, creates a shallow draft, applies, writes back.
+// React 18 batches synchronous setState calls automatically.
+// ---------------------------------------------------------------------------
+
+/** Read status for a session across all directories */
+export function useGlobalSessionStatus(sessionId: string): SessionStatus | undefined {
+  return useLiveSyncSelector(
+    useCallback((states) => findLiveSessionStatus(states, sessionId), [sessionId]),
+  )
+}
+
+/** Read all session statuses (for sidebar) */
+export function useAllSessionStatuses(): Record<string, SessionStatus> {
+  return useLiveSyncSelector(
+    useCallback((states) => aggregateLiveSessionStatuses(states), []),
+    areStatusMapsEquivalent,
+  )
+}
+
+type LiveSessionStatusCounts = {
+  running: number
+}
+
+const EMPTY_LIVE_SESSION_STATUS_COUNTS: LiveSessionStatusCounts = { running: 0 }
+
+const isRunningSessionStatus = (status: SessionStatus | undefined): boolean => (
+  status?.type === "busy" || status?.type === "retry"
+)
+
+const areLiveSessionStatusCountsEquivalent = (left: LiveSessionStatusCounts, right: LiveSessionStatusCounts): boolean => (
+  left.running === right.running
+)
+
+export function useLiveSessionStatusCounts(): LiveSessionStatusCounts {
+  return useLiveSyncSelector(
+    useCallback((states) => {
+      let running = 0
+      for (const state of states) {
+        for (const status of Object.values(state.session_status ?? {})) {
+          if (isRunningSessionStatus(status)) running += 1
+        }
+      }
+      return running === 0 ? EMPTY_LIVE_SESSION_STATUS_COUNTS : { running }
+    }, []),
+    areLiveSessionStatusCountsEquivalent,
+  )
+}
+
+export function useAllLiveSessions(): Session[] {
+  return useLiveSyncSelector(
+    useCallback((states) => aggregateLiveSessions(states), []),
+    areSessionListsEquivalent,
+  )
+}
+
+// Boot debounce — suppresses redundant refresh/re-bootstrap events during startup.
+let bootingRoot = false
+let bootedAt = 0
+let globalBootstrapGeneration = 0
+const BOOT_DEBOUNCE_MS = 1500
+const RECONNECT_MESSAGE_LIMIT = 30
+const SESSION_MATERIALIZATION_MESSAGE_LIMIT = 30
+const RECONNECT_SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
+const ACTIVE_SESSION_WATCHDOG_INTERVAL_MS = 5_000
+const ACTIVE_SESSION_STATUS_POLL_INTERVAL_MS = 5_000
+const ACTIVE_SESSION_STALE_EVENT_MS = 20_000
+const ACTIVE_SESSION_FULL_RESYNC_COOLDOWN_MS = 15_000
+const CHILD_SESSION_DISCOVERY_INTERVAL_MS = 15_000
+const requestSignature = (items: Array<{ id: string }> | undefined): string => {
+  if (!items || items.length === 0) return ""
+  return items
+    .map((item) => item.id)
+    .sort(cmp)
+    .join("|")
+}
+
+const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
+
+const syncSnapshotSignature = (value: unknown): string => JSON.stringify(value)
+
+function haveEquivalentSyncSnapshots(left: unknown, right: unknown): boolean {
+  return syncSnapshotSignature(left) === syncSnapshotSignature(right)
+}
+
+// ---------------------------------------------------------------------------
+// Session materialization scheduler — when local message/part state is incomplete,
+// fetch the canonical session snapshot and materialize messages and parts together.
+// Tracked per-directory, deduplicated, and auto-expiring.
+// ---------------------------------------------------------------------------
+
+type PendingSessionMaterialization = {
+  sessionID: string
+  directory: string
+  enqueuedAt: number
+}
+
+const SESSION_MATERIALIZATION_COOLDOWN_MS = 5_000
+const pendingSessionMaterializations = new Map<string, PendingSessionMaterialization>() // key: directory:sessionID
+
+const materializationKey = (directory: string, sessionID: string) => `${directory}:${sessionID}`
+
+function enqueueSessionMaterialization(directory: string, sessionID: string, childStores: ChildStoreManager) {
+  if (!directory || directory === "global" || !sessionID) return
+  const k = materializationKey(directory, sessionID)
+  const existing = pendingSessionMaterializations.get(k)
+  if (existing && Date.now() - existing.enqueuedAt < SESSION_MATERIALIZATION_COOLDOWN_MS) return
+
+  pendingSessionMaterializations.set(k, { sessionID, directory, enqueuedAt: Date.now() })
+
+  // Defer to next microtask so we don't hold up the current event batch
+  void Promise.resolve().then(async () => {
+    const store = childStores.getChild(directory)
+    if (!store) {
+      pendingSessionMaterializations.delete(k)
+      return
+    }
+    try {
+      await materializeSessionFromServer(directory, sessionID, store)
+    } catch {
+      // Transient failure — next SSE event or reconnect will catch up.
+    } finally {
+      pendingSessionMaterializations.delete(k)
+    }
+  })
+}
+
+async function materializeSessionFromServer(
+  directory: string,
+  sessionID: string,
+  store: StoreApi<DirectoryStore>,
+) {
+  const scopedClient = opencodeClient.getScopedSdkClient(directory)
+  const result = await retry(async () => {
+    const response = await scopedClient.session.messages({ sessionID, limit: SESSION_MATERIALIZATION_MESSAGE_LIMIT })
+    assertSdkSuccess(response, "session.messages")
+    return response
+  })
+  const records = (result.data ?? []).filter((record: { info?: { id?: string } }) => !!record?.info?.id)
+  if (records.length === 0) return
+  const cursor = result.response?.headers?.get?.("x-next-cursor") ?? undefined
+  setSessionPrefetch({
+    directory,
+    sessionID,
+    limit: records.length,
+    cursor,
+    complete: !cursor,
+  })
+
+  store.setState((state: DirectoryStore) => {
+    const materialized = materializeSessionSnapshots(
+      state,
+      sessionID,
+      records.map((record: { info: Message; parts?: Part[] }) => ({
+        info: stripMessageDiffSnapshots(record.info),
+        parts: record.parts ?? [],
+      })),
+      { skipPartTypes: RECONNECT_SKIP_PARTS },
+    )
+    return { message: materialized.message, part: materialized.part }
+  })
+}
+
+// Module-level refs for notification viewed check.
+// Used to determine if user is currently viewing the session when a notification arrives.
+let _activeDirectory = ""
+let _activeSession = ""
+const externallyViewedSessions = new Map<string, number>()
+const EXTERNAL_VIEW_TTL_MS = 15_000
+
+const viewedSessionKey = (directory: string, sessionId: string) => `${directory}\n${sessionId}`
+
+function pruneExternallyViewedSessions(now = Date.now()) {
+  for (const [key, expiresAt] of externallyViewedSessions.entries()) {
+    if (expiresAt <= now) {
+      externallyViewedSessions.delete(key)
+    }
+  }
+}
+const pendingQuestionToastIds = new Set<string>()
+const pendingPermissionToastIds = new Set<string>()
+
+const getQuestionToastKey = (sessionID?: string, requestID?: string) => {
+  if (!sessionID || !requestID) return null
+  return `${sessionID}:${requestID}`
+}
+
+const getPermissionToastKey = (sessionID?: string, requestID?: string) => {
+  if (!sessionID || !requestID) return null
+  return `${sessionID}:${requestID}`
+}
+
+type UiNotificationPayload = {
+  title?: unknown
+  body?: unknown
+  tag?: unknown
+  kind?: unknown
+  sessionId?: unknown
+  directory?: unknown
+  requireHidden?: unknown
+  desktopStdoutActive?: unknown
+}
+
+const asOptionalString = (value: unknown): string | undefined => {
+  if (typeof value !== "string") return undefined
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : undefined
+}
+
+const handleUiNotificationEvent = (payload: Event, fallbackDirectory: string): boolean => {
+  if ((payload as { type?: unknown }).type !== "openchamber:notification") {
+    return false
+  }
+
+  const properties = (payload as { properties?: unknown }).properties
+  if (!properties || typeof properties !== "object") {
+    return true
+  }
+
+  const notification = properties as UiNotificationPayload
+  if (notification.desktopStdoutActive === true && getRuntimeKey() === "local") {
+    return true
+  }
+
+  const notifications = getRegisteredRuntimeAPIs()?.notifications
+  if (!notifications?.notifyAgentCompletion) {
+    return true
+  }
+
+  void notifications.notifyAgentCompletion({
+    title: asOptionalString(notification.title),
+    body: asOptionalString(notification.body),
+    tag: asOptionalString(notification.tag),
+    kind: asOptionalString(notification.kind),
+    sessionId: asOptionalString(notification.sessionId),
+    directory: asOptionalString(notification.directory) ?? (fallbackDirectory && fallbackDirectory !== "global" ? fallbackDirectory : undefined),
+    requireHidden: notification.requireHidden === true,
+  }).catch((error) => {
+    console.warn("[notifications] failed to dispatch UI notification", error)
+  })
+
+  return true
+}
+
+export function setActiveSession(directory: string, sessionId: string) {
+  _activeDirectory = directory
+  _activeSession = sessionId
+}
+
+export function setExternallyViewedSession(directory: string, sessionId: string, viewed: boolean) {
+  if (!directory || !sessionId) return
+  const key = viewedSessionKey(directory, sessionId)
+  if (!viewed) {
+    externallyViewedSessions.delete(key)
+    return
+  }
+  externallyViewedSessions.set(key, Date.now() + EXTERNAL_VIEW_TTL_MS)
+}
+
+function isViewedInCurrentSession(directory: string, sessionId?: string): boolean {
+  if (!sessionId) return false
+  if (_activeDirectory && _activeSession && directory === _activeDirectory && sessionId === _activeSession) return true
+  pruneExternallyViewedSessions()
+  return externallyViewedSessions.has(viewedSessionKey(directory, sessionId))
+}
+
+function isRecentBoot() {
+  return bootingRoot || Date.now() - bootedAt < BOOT_DEBOUNCE_MS
+}
+
+function getViewedSessionMaterializationTarget(directory: string) {
+  if (!_activeDirectory || !_activeSession) return null
+  if (directory !== _activeDirectory) return null
+  return {
+    directory: _activeDirectory,
+    sessionId: _activeSession,
+  }
+}
+
+function toSessionStatus(status: Awaited<ReturnType<typeof opencodeClient.getSessionStatus>>[string]): SessionStatus | undefined {
+  if (!status) return undefined
+  if (status.type === "idle" || status.type === "busy") {
+    return { type: status.type }
+  }
+  if (
+    status.type === "retry"
+    && typeof status.attempt === "number"
+    && typeof status.message === "string"
+    && typeof status.next === "number"
+  ) {
+    return {
+      type: "retry",
+      attempt: status.attempt,
+      message: status.message,
+      next: status.next,
+    }
+  }
+  return undefined
+}
+
+function isStreamHeartbeatEvent(payload: Event): boolean {
+  const type = (payload as { type?: unknown }).type
+  return type === "server.heartbeat" || type === "openchamber:heartbeat"
+}
+
+function getActiveSessionCandidateIds(directory: string, state: DirectoryStore): string[] {
+  return getReconnectCandidateSessionIds(state, {
+    directory,
+    viewedSession: getViewedSessionMaterializationTarget(directory),
+  })
+}
+
+function buildRelevantSessionStatuses(
+  nextStatuses: Awaited<ReturnType<typeof opencodeClient.getSessionStatusForDirectory>>,
+  candidateSessionIds: string[],
+): Record<string, SessionStatus> | null {
+  if (nextStatuses === null) return null
+  const relevantStatuses: Record<string, SessionStatus> = {}
+  for (const sessionId of candidateSessionIds) {
+    relevantStatuses[sessionId] = toSessionStatus(nextStatuses[sessionId]) ?? { type: "idle" }
+  }
+  return relevantStatuses
+}
+
+function applySessionStatusSnapshot(
+  store: StoreApi<DirectoryStore>,
+  relevantStatuses: Record<string, SessionStatus>,
+): boolean {
+  if (Object.keys(relevantStatuses).length === 0) return false
+
+  let changed = false
+  store.setState((state: DirectoryStore) => {
+    for (const [sessionId, nextStatus] of Object.entries(relevantStatuses)) {
+      if (!haveEquivalentSyncSnapshots(state.session_status?.[sessionId], nextStatus)) {
+        changed = true
+        break
+      }
+    }
+
+    if (!changed) {
+      return state
+    }
+
+    return {
+      session_status: { ...state.session_status, ...relevantStatuses },
+    }
+  })
+
+  return changed
+}
+
+async function resyncDirectorySessionStatuses(
+  directory: string,
+  store: StoreApi<DirectoryStore>,
+  candidateSessionIds: string[],
+): Promise<Record<string, SessionStatus> | null> {
+  const nextStatuses = await opencodeClient.getSessionStatusForDirectory(directory)
+  // null = fetch failed; preserve existing state. {} or populated = authoritative
+  // snapshot of active sessions — candidates not listed are idle now.
+  const relevantStatuses = buildRelevantSessionStatuses(nextStatuses, candidateSessionIds)
+  if (relevantStatuses === null) return null
+  applySessionStatusSnapshot(store, relevantStatuses)
+  return relevantStatuses
+}
+
+function needsSnapshotAfterStatusPoll(
+  state: DirectoryStore,
+  sessionId: string,
+  nextStatus: SessionStatus | undefined,
+): boolean {
+  if (nextStatus?.type !== "idle") return false
+  const currentStatus = state.session_status?.[sessionId]
+  if (currentStatus && currentStatus.type !== "idle") return true
+
+  const messages = state.message[sessionId]
+  const lastMessage = messages?.[messages.length - 1]
+  return !!lastMessage
+    && lastMessage.role === "assistant"
+    && typeof (lastMessage as { time?: { completed?: number } }).time?.completed !== "number"
+}
+
+type EventRoutingIndex = {
+  sessionDirectoryById: Map<string, string>
+  messageSessionById: Map<string, string>
+  sessionMessageIdsById: Map<string, Set<string>>
+}
+
+const SHOULD_DISPATCH_VSCODE_NOTIFICATIONS = isVSCodeRuntime()
+
+const dispatchVSCodeRuntimeNotificationEvent = (directory: string, payload: Event) => {
+  if (!SHOULD_DISPATCH_VSCODE_NOTIFICATIONS || typeof window === "undefined") return
+  window.dispatchEvent(new CustomEvent("openchamber:vscode-notification-event", {
+    detail: { directory, payload },
+  }))
+}
+
+const createEventRoutingIndex = (): EventRoutingIndex => ({
+  sessionDirectoryById: new Map(),
+  messageSessionById: new Map(),
+  sessionMessageIdsById: new Map(),
+})
+
+const normalizeEventDirectory = (rawDirectory: string): string => {
+  if (!rawDirectory || rawDirectory === "global") {
+    return rawDirectory
+  }
+  const normalized = rawDirectory.replace(/\\/g, "/").replace(/^([a-z]):/, (_, l: string) => l.toUpperCase() + ":")
+  // Strip trailing slashes to match child store keys (normalizeDirectoryPath in useDirectoryStore)
+  return normalized.length > 1 ? normalized.replace(/\/+$/, "") : normalized
+}
+
+const getSessionIdFromPayload = (event: Event): string | null => {
+  const properties = (event as { properties?: unknown }).properties
+  if (!properties || typeof properties !== "object") {
+    return null
+  }
+
+  const props = properties as Record<string, unknown>
+
+  if (event.type === "message.updated") {
+    const info = props.info
+    if (!info || typeof info !== "object") {
+      return null
+    }
+    const sessionID = (info as { sessionID?: unknown }).sessionID
+    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
+  }
+
+  if (
+    event.type === "message.removed"
+    || event.type === "session.status"
+    || event.type === "todo.updated"
+    || event.type === "permission.asked"
+    || event.type === "permission.replied"
+    || event.type === "question.asked"
+    || event.type === "question.replied"
+    || event.type === "question.rejected"
+    || event.type === "session.deleted"
+  ) {
+    const sessionID = props.sessionID
+    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
+  }
+
+  if (event.type === "message.part.updated") {
+    const sessionID = props.sessionID
+    if (typeof sessionID === "string" && sessionID.length > 0) {
+      return sessionID
+    }
+
+    const part = props.part
+    if (!part || typeof part !== "object") {
+      return null
+    }
+    const partSessionID = (part as { sessionID?: unknown }).sessionID
+    return typeof partSessionID === "string" && partSessionID.length > 0 ? partSessionID : null
+  }
+
+  if (event.type === "message.part.delta" || event.type === "message.part.removed") {
+    const sessionID = props.sessionID
+    return typeof sessionID === "string" && sessionID.length > 0 ? sessionID : null
+  }
+
+  if (event.type === "session.created" || event.type === "session.updated") {
+    const info = props.info
+    if (!info || typeof info !== "object") {
+      return null
+    }
+    const id = (info as { id?: unknown }).id
+    return typeof id === "string" && id.length > 0 ? id : null
+  }
+
+  return null
+}
+
+const getSessionInfoFromPayload = (event: Event): Session | null => {
+  if (event.type !== "session.created" && event.type !== "session.updated" && event.type !== "session.deleted") {
+    return null
+  }
+
+  const properties = (event as { properties?: unknown }).properties
+  if (!properties || typeof properties !== "object") {
+    return null
+  }
+
+  const info = (properties as { info?: unknown }).info
+  if (!info || typeof info !== "object") {
+    return null
+  }
+
+  const session = info as Partial<Session>
+  if (typeof session.id !== "string" || !session.time) {
+    return null
+  }
+
+  return stripSessionDiffSnapshots(session as Session)
+}
+
+const applySessionEventToGlobalSessions = (payload: Event) => {
+  if (payload.type === "session.created" || payload.type === "session.updated") {
+    const session = getSessionInfoFromPayload(payload)
+    if (session) {
+      useGlobalSessionsStore.getState().upsertSession(session)
+    }
+    return
+  }
+
+  if (payload.type === "session.deleted") {
+    const sessionID = getSessionIdFromPayload(payload) ?? getSessionInfoFromPayload(payload)?.id
+    if (sessionID) {
+      useGlobalSessionsStore.getState().removeSessions([sessionID])
+    }
+  }
+}
+
+const getMessageIdFromPayload = (event: Event): string | null => {
+  const properties = (event as { properties?: unknown }).properties
+  if (!properties || typeof properties !== "object") {
+    return null
+  }
+
+  const props = properties as Record<string, unknown>
+
+  if (event.type === "message.updated") {
+    const info = props.info
+    if (!info || typeof info !== "object") {
+      return null
+    }
+    const id = (info as { id?: unknown }).id
+    return typeof id === "string" && id.length > 0 ? id : null
+  }
+
+  if (event.type === "message.removed" || event.type === "message.part.delta" || event.type === "message.part.removed") {
+    const messageID = props.messageID
+    return typeof messageID === "string" && messageID.length > 0 ? messageID : null
+  }
+
+  if (event.type === "message.part.updated") {
+    const part = props.part
+    if (!part || typeof part !== "object") {
+      return null
+    }
+    const partMessageID = (part as { messageID?: unknown }).messageID
+    return typeof partMessageID === "string" && partMessageID.length > 0 ? partMessageID : null
+  }
+
+  return null
+}
+
+const setIndexedSessionDirectory = (routingIndex: EventRoutingIndex, sessionID: string, directory: string) => {
+  if (!sessionID || !directory || directory === "global") {
+    return
+  }
+  routingIndex.sessionDirectoryById.set(sessionID, directory)
+}
+
+const setIndexedSessionMessages = (
+  routingIndex: EventRoutingIndex,
+  sessionID: string,
+  directory: string,
+  messages: Message[],
+) => {
+  if (!sessionID) {
+    return
+  }
+
+  setIndexedSessionDirectory(routingIndex, sessionID, directory)
+
+  const previous = routingIndex.sessionMessageIdsById.get(sessionID)
+  const next = new Set<string>()
+
+  for (const message of messages) {
+    if (!message?.id) {
+      continue
+    }
+    next.add(message.id)
+    routingIndex.messageSessionById.set(message.id, sessionID)
+  }
+
+  if (previous) {
+    for (const previousMessageID of previous) {
+      if (!next.has(previousMessageID)) {
+        routingIndex.messageSessionById.delete(previousMessageID)
+      }
+    }
+  }
+
+  routingIndex.sessionMessageIdsById.set(sessionID, next)
+}
+
+const setIndexedMessage = (
+  routingIndex: EventRoutingIndex,
+  sessionID: string,
+  messageID: string,
+  directory: string,
+) => {
+  if (!sessionID || !messageID) {
+    return
+  }
+
+  setIndexedSessionDirectory(routingIndex, sessionID, directory)
+  routingIndex.messageSessionById.set(messageID, sessionID)
+
+  const existing = routingIndex.sessionMessageIdsById.get(sessionID)
+  if (existing) {
+    existing.add(messageID)
+  } else {
+    routingIndex.sessionMessageIdsById.set(sessionID, new Set([messageID]))
+  }
+}
+
+const removeIndexedMessage = (
+  routingIndex: EventRoutingIndex,
+  messageID: string,
+  sessionHint?: string | null,
+) => {
+  if (!messageID) {
+    return
+  }
+
+  const sessionID = sessionHint ?? routingIndex.messageSessionById.get(messageID)
+  routingIndex.messageSessionById.delete(messageID)
+
+  if (!sessionID) {
+    return
+  }
+
+  const messageIds = routingIndex.sessionMessageIdsById.get(sessionID)
+  if (!messageIds) {
+    return
+  }
+
+  messageIds.delete(messageID)
+  if (messageIds.size === 0) {
+    routingIndex.sessionMessageIdsById.delete(sessionID)
+  }
+}
+
+const removeIndexedSession = (routingIndex: EventRoutingIndex, sessionID: string) => {
+  if (!sessionID) {
+    return
+  }
+
+  routingIndex.sessionDirectoryById.delete(sessionID)
+  const messageIds = routingIndex.sessionMessageIdsById.get(sessionID)
+  if (messageIds) {
+    for (const messageID of messageIds) {
+      routingIndex.messageSessionById.delete(messageID)
+    }
+  }
+  routingIndex.sessionMessageIdsById.delete(sessionID)
+}
+
+const ingestDirectoryStateIntoRoutingIndex = (
+  routingIndex: EventRoutingIndex,
+  directory: string,
+  state: State,
+) => {
+  const nextSessionIds = new Set<string>()
+
+  for (const session of state.session) {
+    if (!session?.id) {
+      continue
+    }
+    nextSessionIds.add(session.id)
+    setIndexedSessionDirectory(routingIndex, session.id, directory)
+  }
+
+  for (const sessionID of Object.keys(state.message)) {
+    nextSessionIds.add(sessionID)
+    setIndexedSessionDirectory(routingIndex, sessionID, directory)
+    setIndexedSessionMessages(routingIndex, sessionID, directory, state.message[sessionID] ?? EMPTY_MESSAGES)
+  }
+
+  for (const [indexedSessionID, indexedDirectory] of routingIndex.sessionDirectoryById) {
+    if (indexedDirectory !== directory) {
+      continue
+    }
+    if (!nextSessionIds.has(indexedSessionID)) {
+      removeIndexedSession(routingIndex, indexedSessionID)
+    }
+  }
+}
+
+const findSessionInChildStores = (
+  sessionID: string,
+  childStores: ChildStoreManager,
+  routingIndex: EventRoutingIndex,
+): string | null => {
+  for (const [dir, store] of childStores.children) {
+    const state = store.getState()
+    if (
+      state.session.some((s) => s.id === sessionID)
+      || Object.prototype.hasOwnProperty.call(state.message, sessionID)
+      || Object.prototype.hasOwnProperty.call(state.session_status ?? {}, sessionID)
+    ) {
+      // Self-heal: populate the routing index so future events resolve instantly
+      setIndexedSessionDirectory(routingIndex, sessionID, dir)
+      return dir
+    }
+  }
+  return null
+}
+
+const childStoreHasSessionState = (
+  childStores: ChildStoreManager,
+  directory: string,
+  sessionID: string,
+): boolean => {
+  const store = childStores.getChild(directory)
+  if (!store) return false
+  const state = store.getState()
+  return state.session.some((session) => session.id === sessionID)
+    || Object.prototype.hasOwnProperty.call(state.message, sessionID)
+    || Object.prototype.hasOwnProperty.call(state.session_status ?? {}, sessionID)
+}
+
+const childStoreHasMessagePartState = (
+  childStores: ChildStoreManager,
+  directory: string,
+  messageID: string,
+): boolean => {
+  const store = childStores.getChild(directory)
+  if (!store) return false
+  return Object.prototype.hasOwnProperty.call(store.getState().part, messageID)
+}
+
+const resolveDirectoryFromRoutingIndex = (
+  routingIndex: EventRoutingIndex,
+  rawDirectory: string,
+  payload: Event,
+  childStores: ChildStoreManager,
+): string => {
+  const normalizedDirectory = normalizeEventDirectory(rawDirectory)
+
+  const sessionID = getSessionIdFromPayload(payload)
+  if (sessionID) {
+    if (normalizedDirectory && normalizedDirectory !== "global" && childStoreHasSessionState(childStores, normalizedDirectory, sessionID)) {
+      setIndexedSessionDirectory(routingIndex, sessionID, normalizedDirectory)
+      return normalizedDirectory
+    }
+
+    const indexedDirectory = routingIndex.sessionDirectoryById.get(sessionID)
+    if (indexedDirectory && childStores.getChild(indexedDirectory)) {
+      return indexedDirectory
+    }
+
+    // Routing index miss — scan child stores for this session.
+    // Covers optimistic sessions not yet indexed and events with wrong/empty directory.
+    const found = findSessionInChildStores(sessionID, childStores, routingIndex)
+    if (found) {
+      return found
+    }
+  }
+
+  const messageID = getMessageIdFromPayload(payload)
+  if (messageID) {
+    if (normalizedDirectory && normalizedDirectory !== "global" && childStoreHasMessagePartState(childStores, normalizedDirectory, messageID)) {
+      return normalizedDirectory
+    }
+
+    const sessionFromMessage = routingIndex.messageSessionById.get(messageID)
+    if (sessionFromMessage) {
+      const indexedDirectory = routingIndex.sessionDirectoryById.get(sessionFromMessage)
+      if (indexedDirectory && childStores.getChild(indexedDirectory)) {
+        return indexedDirectory
+      }
+    }
+
+    // Scan child stores for a store that has parts for this message
+    for (const [dir, store] of childStores.children) {
+      if (Object.prototype.hasOwnProperty.call(store.getState().part, messageID)) {
+        return dir
+      }
+    }
+  }
+
+  // Single-store fallback: if there's only one directory, use it
+  if (
+    (sessionID || messageID)
+    && (!normalizedDirectory || normalizedDirectory === "global")
+    && childStores.children.size === 1
+  ) {
+    const onlyDirectory = childStores.children.keys().next().value
+    if (typeof onlyDirectory === "string" && onlyDirectory.length > 0) {
+      return onlyDirectory
+    }
+  }
+
+  return normalizedDirectory
+}
+
+const updateRoutingIndexFromEvent = (
+  routingIndex: EventRoutingIndex,
+  directory: string,
+  payload: Event,
+) => {
+  if (!directory || directory === "global") {
+    return
+  }
+
+  const sessionID = getSessionIdFromPayload(payload)
+  if (sessionID) {
+    setIndexedSessionDirectory(routingIndex, sessionID, directory)
+  }
+
+  switch (payload.type) {
+    case "session.created":
+    case "session.updated": {
+      const info = (payload.properties as { info?: Session }).info
+      if (info?.id) {
+        setIndexedSessionDirectory(routingIndex, info.id, directory)
+      }
+      return
+    }
+
+    case "session.deleted": {
+      const deletedSessionID = (payload.properties as { sessionID?: string }).sessionID
+      if (deletedSessionID) {
+        removeIndexedSession(routingIndex, deletedSessionID)
+      }
+      return
+    }
+
+    case "message.updated": {
+      const info = (payload.properties as { info?: Message }).info
+      if (info?.id && info.sessionID) {
+        setIndexedMessage(routingIndex, info.sessionID, info.id, directory)
+      }
+      return
+    }
+
+    case "message.removed": {
+      const props = payload.properties as { sessionID?: string; messageID?: string }
+      if (props.messageID) {
+        removeIndexedMessage(routingIndex, props.messageID, props.sessionID)
+      }
+      return
+    }
+
+    case "message.part.updated": {
+      const props = payload.properties as { sessionID?: string; part?: Part }
+      const part = props.part as (Part & { sessionID?: string; messageID?: string }) | undefined
+      const sessionID = part?.sessionID ?? props.sessionID
+      const messageID = part?.messageID
+      if (messageID && sessionID) {
+        setIndexedMessage(routingIndex, sessionID, messageID, directory)
+      }
+      return
+    }
+
+    default:
+      return
+  }
+}
+
+/**
+ * Re-fetch pending questions and permissions for a directory and merge them
+ * into the directory's child store, preserving any in-flight SSE updates that
+ * arrived while the request was pending. Used by reconnect/materialization
+ * recovery paths only; normal session switches rely on primary SSE reducer
+ * state for `question.asked` / `permission.asked` events. When
+ * `candidateSessionIds` is omitted, every session known to the directory store
+ * is treated as a candidate.
+ */
+export async function resyncBlockingRequestsForDirectory(
+  directory: string,
+  store: StoreApi<DirectoryStore>,
+  candidateSessionIds?: string[],
+) {
+  const before = store.getState()
+  const knownSessionIds = new Set<string>([
+    ...before.session.map((session) => session.id),
+    ...Object.keys(before.message ?? {}),
+    ...Object.keys(before.session_status ?? {}),
+    ...Object.keys(before.question ?? {}),
+    ...Object.keys(before.permission ?? {}),
+  ])
+  const candidates = candidateSessionIds ?? Array.from(knownSessionIds)
+  if (candidates.length === 0) return
+
+  // Re-fetch pending questions that may have been asked during an SSE gap,
+  // reconnect window, or directory materialization gap.
+  try {
+    const beforeSignatures = new Map(
+      candidates.map((sessionId) => [sessionId, requestSignature(before.question[sessionId])]),
+    )
+    const pendingQuestions = await opencodeClient.listPendingQuestions({ directories: [directory] })
+    const grouped: Record<string, QuestionRequest[]> = {}
+    for (const q of pendingQuestions) {
+      if (!q?.id || !q.sessionID) continue
+      if (!knownSessionIds.has(q.sessionID)) continue
+      const list = grouped[q.sessionID]
+      if (list) list.push(q)
+      else grouped[q.sessionID] = [q]
+    }
+    for (const sessionId of Object.keys(grouped)) {
+      grouped[sessionId].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+    }
+
+    for (const [sessionId, questions] of Object.entries(grouped)) {
+      const knownIds = new Set((before.question[sessionId] ?? []).map((item) => item.id))
+      const isViewed = isViewedInCurrentSession(directory, sessionId)
+      if (isViewed) continue
+      for (const question of questions) {
+        if (knownIds.has(question.id)) continue
+        const toastKey = getQuestionToastKey(sessionId, question.id)
+        if (!toastKey || pendingQuestionToastIds.has(toastKey)) continue
+        pendingQuestionToastIds.add(toastKey)
+        const firstQuestion = question.questions?.[0]
+        const title = firstQuestion?.header?.trim() || "Input needed"
+        const description = firstQuestion?.question?.trim() || "Agent is waiting for your response"
+        toast.info(title, {
+          id: `question-${toastKey}`,
+          description,
+          action: {
+            label: "Open session",
+            onClick: () => openSessionFromToast(sessionId, directory),
+          },
+        })
+      }
+    }
+
+    store.setState((state: DirectoryStore) => {
+      const merged = { ...state.question }
+      for (const [sessionId, questions] of Object.entries(grouped)) {
+        merged[sessionId] = questions
+      }
+      for (const sessionId of candidates) {
+        if (grouped[sessionId]) continue
+        const beforeSignature = beforeSignatures.get(sessionId) ?? ""
+        const currentSignature = requestSignature(state.question[sessionId])
+        if (currentSignature !== beforeSignature) continue
+        delete merged[sessionId]
+      }
+      return { question: merged }
+    })
+  } catch {
+    // Non-fatal: question resync best-effort
+  }
+
+  // Re-fetch pending permissions — same rationale as questions.
+  try {
+    const beforeSignatures = new Map(
+      candidates.map((sessionId) => [sessionId, requestSignature(before.permission[sessionId])]),
+    )
+    const pendingPermissions = await opencodeClient.listPendingPermissions({ directories: [directory] })
+    const grouped: Record<string, PermissionRequest[]> = {}
+    for (const permission of pendingPermissions) {
+      if (!permission?.id || !permission.sessionID) continue
+      if (!knownSessionIds.has(permission.sessionID)) continue
+      const list = grouped[permission.sessionID]
+      if (list) list.push(permission)
+      else grouped[permission.sessionID] = [permission]
+    }
+    for (const sessionId of Object.keys(grouped)) {
+      grouped[sessionId].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+    }
+
+    const permissionStore = usePermissionStore.getState()
+    const autoAcceptingSessionIds = Object.keys(grouped).filter((sessionId) => permissionStore.isSessionAutoAccepting(sessionId))
+
+    if (autoAcceptingSessionIds.length > 0) {
+      const acceptedIdsBySession = new Map<string, Set<string>>()
+      await Promise.all(autoAcceptingSessionIds.flatMap((sessionId) =>
+        (grouped[sessionId] ?? []).map(async (permission) => {
+          try {
+            await sessionActions.respondToPermission(permission.sessionID, permission.id, "once")
+            const accepted = acceptedIdsBySession.get(sessionId) ?? new Set<string>()
+            accepted.add(permission.id)
+            acceptedIdsBySession.set(sessionId, accepted)
+          } catch {
+            // Keep failed auto-accept permissions in UI state so the user can act.
+          }
+        }),
+      ))
+
+      for (const sessionId of autoAcceptingSessionIds) {
+        const acceptedIds = acceptedIdsBySession.get(sessionId)
+        if (!acceptedIds) continue
+        const remaining = (grouped[sessionId] ?? []).filter((permission) => !acceptedIds.has(permission.id))
+        if (remaining.length > 0) grouped[sessionId] = remaining
+        else delete grouped[sessionId]
+      }
+    }
+
+    for (const [sessionId, permissions] of Object.entries(grouped)) {
+      const knownIds = new Set((before.permission[sessionId] ?? []).map((item) => item.id))
+      const isViewed = isViewedInCurrentSession(directory, sessionId)
+      if (isViewed) continue
+      for (const permission of permissions) {
+        if (knownIds.has(permission.id)) continue
+        const toastKey = getPermissionToastKey(sessionId, permission.id)
+        if (!toastKey || pendingPermissionToastIds.has(toastKey)) continue
+        pendingPermissionToastIds.add(toastKey)
+        const description = typeof permission.permission === "string" && permission.permission.trim().length > 0
+          ? permission.permission
+          : "Agent needs your approval"
+        toast.info("Permission needed", {
+          id: `permission-${toastKey}`,
+          description,
+          action: {
+            label: "Open session",
+            onClick: () => openSessionFromToast(sessionId, directory),
+          },
+        })
+      }
+    }
+
+    store.setState((state: DirectoryStore) => {
+      const merged = { ...state.permission }
+      for (const [sessionId, permissions] of Object.entries(grouped)) {
+        merged[sessionId] = permissions
+      }
+      for (const sessionId of candidates) {
+        if (grouped[sessionId]) continue
+        const beforeSignature = beforeSignatures.get(sessionId) ?? ""
+        const currentSignature = requestSignature(state.permission[sessionId])
+        if (currentSignature !== beforeSignature) continue
+        delete merged[sessionId]
+      }
+      return { permission: merged }
+    })
+  } catch {
+    // Non-fatal: permission resync best-effort
+  }
+}
+
+async function resyncDirectoryAfterReconnect(
+  directory: string,
+  store: StoreApi<DirectoryStore>,
+  routingIndex: EventRoutingIndex,
+) {
+  const current = store.getState()
+  const candidateSessionIds = getActiveSessionCandidateIds(directory, current)
+  if (candidateSessionIds.length === 0) return
+
+  await resyncDirectorySessionStatuses(directory, store, candidateSessionIds)
+
+  const scopedClient = opencodeClient.getScopedSdkClient(directory)
+  await Promise.all(candidateSessionIds.map(async (sessionId) => {
+    const [sessionResponse, messageResponse] = await Promise.all([
+      retry(async () => {
+        const response = await scopedClient.session.get({ sessionID: sessionId })
+        assertSdkSuccess(response, "session.get")
+        return response
+      }).catch(() => null),
+      retry(async () => {
+        const response = await scopedClient.session.messages({ sessionID: sessionId, limit: RECONNECT_MESSAGE_LIMIT })
+        assertSdkSuccess(response, "session.messages")
+        return response
+      }).catch(() => null),
+    ])
+    const session = sessionResponse?.data
+    const records = messageResponse?.data
+    if (!session || !records) return
+    const cursor = messageResponse.response?.headers?.get?.("x-next-cursor") ?? undefined
+    setSessionPrefetch({
+      directory,
+      sessionID: sessionId,
+      limit: records.length,
+      cursor,
+      complete: !cursor,
+    })
+
+    const nextSession = stripSessionDiffSnapshots(session)
+    const nextMessages = records
+      .filter((record) => !!record?.info?.id)
+      .map((record) => stripMessageDiffSnapshots(record.info))
+      .sort((a, b) => cmp(a.id, b.id))
+
+    store.setState((state: DirectoryStore) => {
+      const sessionIndex = state.session.findIndex((item) => item.id === nextSession.id)
+      let sessions = state.session
+      let sessionChanged = false
+      let sessionTotal = state.sessionTotal
+
+      if (sessionIndex >= 0) {
+        if (!haveEquivalentSyncSnapshots(sessions[sessionIndex], nextSession)) {
+          sessions = [...state.session]
+          sessions[sessionIndex] = nextSession
+          sessionChanged = true
+        }
+      } else {
+        sessions = [...state.session]
+        sessions.push(nextSession)
+        sessions.sort((a, b) => cmp(a.id, b.id))
+        if (!nextSession.parentID) sessionTotal += 1
+        sessionChanged = true
+      }
+
+      const materialized = materializeSessionSnapshots(
+        state,
+        sessionId,
+        records.map((record) => ({
+          info: stripMessageDiffSnapshots(record.info),
+          parts: record.parts ?? [],
+        })),
+        { skipPartTypes: RECONNECT_SKIP_PARTS },
+      )
+      const messagesChanged = materialized.messagesChanged
+      const partsChanged = materialized.partsChanged
+      if (!sessionChanged && !messagesChanged && !partsChanged) {
+        return state
+      }
+
+      return {
+        ...(sessionChanged ? { session: sessions, sessionTotal } : {}),
+        ...(messagesChanged ? { message: materialized.message } : {}),
+        ...(partsChanged ? { part: materialized.part } : {}),
+      }
+    })
+
+    setIndexedSessionDirectory(routingIndex, nextSession.id, directory)
+    setIndexedSessionMessages(routingIndex, sessionId, directory, nextMessages)
+  }))
+
+  await resyncBlockingRequestsForDirectory(directory, store, candidateSessionIds)
+
+  ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
+}
+
+function handleEvent(
+  rawDirectory: string,
+  payload: Event,
+  childStores: ChildStoreManager,
+  routingIndex: EventRoutingIndex,
+) {
+  const directory = resolveDirectoryFromRoutingIndex(routingIndex, rawDirectory, payload, childStores)
+
+  if (handleUiNotificationEvent(payload, directory)) {
+    return
+  }
+
+  applySessionEventToGlobalSessions(payload)
+
+  // Global events
+  if (directory === "global" || !directory) {
+    const recent = isRecentBoot()
+    const result = reduceGlobalEvent(payload)
+    if (!result) return
+    if (result.type === "refresh") {
+      // Suppress refresh during/shortly after bootstrap
+      if (!recent) {
+        useGlobalSyncStore.setState({ reload: "pending" })
+      }
+    } else if (result.type === "project") {
+      const current = useGlobalSyncStore.getState()
+      useGlobalSyncStore.setState({
+        projects: applyGlobalProject(current, result.project).projects,
+      })
+    }
+    // On server.connected / global.disposed, re-bootstrap all directories
+    // but only if not during recent boot
+    if (payload.type === "server.connected" || payload.type === "global.disposed") {
+      if (!recent) {
+        for (const dir of childStores.children.keys()) {
+          const store = childStores.getChild(dir)
+          if (store && store.getState().status !== "loading") {
+            // Mark as loading to trigger re-bootstrap
+            store.setState({ status: "loading" as const })
+            childStores.ensureChild(dir)
+          }
+        }
+      }
+    }
+    return
+  }
+
+  // Directory events
+  let store = childStores.getChild(directory)
+  let resolvedDirectory = directory
+
+  if (!store) {
+    // Store not found for this directory — attempt recovery by scanning
+    // child stores for the session. This handles directory mismatches
+    // (trailing slashes, case differences, events with wrong directory).
+    const sessionID = getSessionIdFromPayload(payload)
+    if (sessionID) {
+      const fallbackDir = findSessionInChildStores(sessionID, childStores, routingIndex)
+      if (fallbackDir) {
+        store = childStores.getChild(fallbackDir)
+        resolvedDirectory = fallbackDir
+      }
+    }
+  }
+
+  if (!store) {
+    // Try as global event for unknown directories
+    const result = reduceGlobalEvent(payload)
+    if (result?.type === "refresh") {
+      useGlobalSyncStore.setState({ reload: "pending" })
+    } else if (result?.type === "project") {
+      const current = useGlobalSyncStore.getState()
+      useGlobalSyncStore.setState({
+        projects: applyGlobalProject(current, result.project).projects,
+      })
+    }
+    return
+  }
+
+  childStores.mark(resolvedDirectory)
+
+  if (payload.type === "permission.asked") {
+    const permission = payload.properties as PermissionRequest
+    const permissionStore = usePermissionStore.getState()
+    if (permissionStore.isSessionAutoAccepting(permission.sessionID)) {
+      updateRoutingIndexFromEvent(routingIndex, resolvedDirectory, payload)
+      void sessionActions.respondToPermission(permission.sessionID, permission.id, "once").catch(() => undefined)
+      return
+    }
+
+    const toastKey = getPermissionToastKey(permission.sessionID, permission.id)
+    const isViewed = isViewedInCurrentSession(resolvedDirectory, permission.sessionID)
+    if (!isViewed && toastKey && !pendingPermissionToastIds.has(toastKey)) {
+      pendingPermissionToastIds.add(toastKey)
+      const description = typeof permission.permission === "string" && permission.permission.trim().length > 0
+        ? permission.permission
+        : "Agent needs your approval"
+      toast.info("Permission needed", {
+        id: `permission-${toastKey}`,
+        description,
+        action: {
+          label: "Open session",
+          onClick: () => openSessionFromToast(permission.sessionID, resolvedDirectory),
+        },
+      })
+    }
+  }
+
+  if (payload.type === "permission.replied") {
+    const props = payload.properties as { sessionID?: string; requestID?: string }
+    const toastKey = getPermissionToastKey(props.sessionID, props.requestID)
+    if (toastKey) {
+      pendingPermissionToastIds.delete(toastKey)
+      toast.dismiss(`permission-${toastKey}`)
+    }
+  }
+
+  if (payload.type === "question.asked") {
+    const question = payload.properties as QuestionRequest
+    const sessionID = question.sessionID
+    const toastKey = getQuestionToastKey(sessionID, question.id)
+    const isViewed = isViewedInCurrentSession(resolvedDirectory, sessionID)
+    if (!isViewed && toastKey && !pendingQuestionToastIds.has(toastKey)) {
+      pendingQuestionToastIds.add(toastKey)
+      const firstQuestion = question.questions?.[0]
+      const title = firstQuestion?.header?.trim() || "Input needed"
+      const description = firstQuestion?.question?.trim() || "Agent is waiting for your response"
+      toast.info(title, {
+        id: `question-${toastKey}`,
+        description,
+        action: {
+          label: "Open session",
+          onClick: () => openSessionFromToast(sessionID, resolvedDirectory),
+        },
+      })
+    }
+  }
+
+  if (payload.type === "question.replied" || payload.type === "question.rejected") {
+    const props = payload.properties as { sessionID?: string; requestID?: string }
+    const toastKey = getQuestionToastKey(props.sessionID, props.requestID)
+    if (toastKey) {
+      pendingQuestionToastIds.delete(toastKey)
+      toast.dismiss(`question-${toastKey}`)
+    }
+  }
+
+  // Notification dispatch for session turn-complete and error events.
+  // These are NOT handled by the event reducer — only the notification store.
+  if (payload.type === "session.idle" || payload.type === "session.error") {
+    const props = payload.properties as { sessionID?: string; error?: { message?: string; code?: string } }
+    const sessionID = props.sessionID
+    // Skip subtask sessions — only top-level sessions generate notifications
+    const storeState = store.getState()
+    const session = storeState.session.find((s) => s.id === sessionID)
+    if (session && (session as { parentID?: string }).parentID) {
+      // subtask — skip notification
+    } else if (sessionID) {
+      appendNotification({
+        directory: resolvedDirectory,
+        session: sessionID,
+        time: Date.now(),
+        viewed: isViewedInCurrentSession(resolvedDirectory, sessionID),
+        ...(payload.type === "session.error"
+          ? { type: "error" as const, error: props.error }
+          : { type: "turn-complete" as const }),
+      })
+    }
+  }
+
+  // Sync-layer parent resync: when a child session goes idle, recover
+  // the parent session snapshot. This ensures the
+  // parent's task tool part reflects the child's completion even when
+  // no ToolPart component is mounted.
+  if (payload.type === "session.idle") {
+    const idleSessionId = getSessionIdFromPayload(payload)
+    if (idleSessionId && resolvedDirectory && resolvedDirectory !== "global") {
+      const sessionState = store.getState()
+      const idleSession = sessionState.session.find((s) => s.id === idleSessionId)
+      const parentID = idleSession
+        ? (idleSession as Session & { parentID?: string | null }).parentID
+        : null
+      if (parentID) {
+        enqueueSessionMaterialization(resolvedDirectory, parentID, childStores)
+      }
+    }
+  }
+
+  // Read live state, create targeted draft cloning ONLY fields that event
+  // type will mutate. This preserves reference identity for untouched slices
+  // so Zustand selectors skip re-renders for unrelated subscribers.
+  const current = store.getState()
+  const draft: State = { ...current }
+
+  switch (payload.type) {
+    case "session.created":
+    case "session.updated":
+    case "session.deleted":
+      draft.session = [...current.session]
+      draft.permission = { ...current.permission }
+      draft.todo = { ...current.todo }
+      draft.part = { ...current.part }
+      break
+    case "session.diff":
+      draft.session_diff = { ...current.session_diff }
+      break
+    case "session.status":
+    case "session.idle":
+    case "session.error":
+      draft.session_status = { ...(current.session_status ?? {}) }
+      break
+    case "todo.updated":
+      draft.todo = { ...current.todo }
+      break
+    case "message.updated":
+      draft.message = { ...current.message }
+      break
+    case "message.removed":
+      draft.message = { ...current.message }
+      draft.part = { ...current.part }
+      break
+    case "message.part.updated":
+    case "message.part.removed":
+    case "message.part.delta":
+      draft.part = { ...current.part }
+      break
+    case "vcs.branch.updated":
+      break
+    case "permission.asked":
+    case "permission.replied":
+      draft.permission = { ...current.permission }
+      break
+    case "question.asked":
+    case "question.replied":
+    case "question.rejected":
+      draft.question = { ...current.question }
+      break
+    case "lsp.updated":
+      draft.lsp = [...current.lsp]
+      break
+    default:
+      break
+  }
+
+  const reducerResult = applyDirectoryEvent(draft, payload, {
+    onSetSessionTodo: (sessionID, todos) => {
+      useTodosPersistStore.getState().setSessionTodos(sessionID, todos)
+    },
+  })
+  const reducerChanged = typeof reducerResult === "boolean" ? reducerResult : reducerResult.changed
+  const materializationResult = typeof reducerResult === "boolean" ? undefined : reducerResult.materialization
+
+  if (reducerChanged) {
+    store.setState(draft)
+    const sessionID = getSessionIdFromPayload(payload) ?? undefined
+    const messageID = getMessageIdFromPayload(payload) ?? undefined
+    syncDebug.dispatch.eventApplied(payload.type, sessionID, messageID)
+
+    // Snapshot materialization on message.updated: if the message was inserted or
+    // replaced but draft.part[messageID] is empty, the parts were lost or
+    // never arrived. Recover the session so the UI doesn't render a blank bubble.
+    if (sessionID && messageID && payload.type === "message.updated") {
+      const after = store.getState()
+      const info = (payload.properties as { info: Message }).info
+      if (info.role === "assistant" && (!after.part[messageID] || after.part[messageID].length === 0)) {
+        enqueueSessionMaterialization(resolvedDirectory, sessionID, childStores)
+      }
+    }
+  } else {
+    const sessionID = getSessionIdFromPayload(payload) ?? undefined
+    const messageID = getMessageIdFromPayload(payload) ?? undefined
+    syncDebug.dispatch.eventNoChange(payload.type, sessionID, messageID)
+
+  }
+
+  // Snapshot materialization is driven by typed reducer outcomes, not by
+  // inferring meaning from a generic false/no-change result.
+  if (materializationResult) {
+    const materializationSessionID = materializationResult.sessionID ?? getSessionIdFromPayload(payload) ?? undefined
+    if (materializationSessionID) {
+      enqueueSessionMaterialization(resolvedDirectory, materializationSessionID, childStores)
+    }
+  }
+
+  updateRoutingIndexFromEvent(routingIndex, resolvedDirectory, payload)
+}
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+const dispatchOpenCodeUpdateAvailable = (payload: { version: string }) => {
+  if (typeof window === "undefined") return
+  window.dispatchEvent(new CustomEvent("openchamber:opencode-update-available", { detail: payload }))
+}
+
+export function SyncProvider(props: {
+  sdk: OpencodeClient
+  directory: string
+  children: React.ReactNode
+}) {
+  const messageStreamTransport = useConfigStore((state) => state.settingsMessageStreamTransport)
+  const childStoresRef = useRef<ChildStoreManager | null>(null)
+  if (!childStoresRef.current) childStoresRef.current = new ChildStoreManager()
+  const childStores = childStoresRef.current
+  const routingIndexRef = useRef<EventRoutingIndex | null>(null)
+  if (!routingIndexRef.current) routingIndexRef.current = createEventRoutingIndex()
+  const routingIndex = routingIndexRef.current
+  const lastActiveEventAtByDirectoryRef = useRef(new Map<string, number>())
+  const lastStatusPollAtByDirectoryRef = useRef(new Map<string, number>())
+  const lastFullResyncAtByDirectoryRef = useRef(new Map<string, number>())
+  const lastChildDiscoveryAtByDirectoryRef = useRef(new Map<string, number>())
+  const resyncingDirectoriesRef = useRef(new Set<string>())
+  const statusPollingDirectoriesRef = useRef(new Set<string>())
+  const pipelineReconnectRef = useRef<((reason?: string) => void) | null>(null)
+
+  const system = useMemo<SyncSystem>(
+    () => ({
+      childStores,
+      sdk: props.sdk,
+      directory: props.directory,
+    }),
+    [childStores, props.sdk, props.directory],
+  )
+
+  const triggerDirectoryResync = useCallback((directory: string) => {
+    const store = childStores.children.get(directory)
+    if (!store) return
+    const resyncing = resyncingDirectoriesRef.current
+    if (resyncing.has(directory)) return
+
+    lastFullResyncAtByDirectoryRef.current.set(directory, Date.now())
+    resyncing.add(directory)
+    void resyncDirectoryAfterReconnect(directory, store, routingIndex)
+      .catch(() => {
+        // Transient failure — the watchdog, next SSE event, or reconnect will catch up.
+      })
+      .finally(() => {
+        resyncing.delete(directory)
+      })
+  }, [childStores, routingIndex])
+
+  // Configure child store manager
+  useEffect(() => {
+    const bootingDirs = new Set<string>()
+
+    childStores.configure({
+      onBootstrap: (directory) => {
+        if (bootingDirs.has(directory)) return
+        bootingDirs.add(directory)
+
+        const store = childStores.getChild(directory)
+        if (!store) return
+
+        const runBootstrap = async (attempt: number) => {
+          const globalState = useGlobalSyncStore.getState()
+          await bootstrapDirectory({
+            directory,
+            sdk: props.sdk,
+            getState: () => store.getState(),
+            set: (patch) => {
+              store.setState(patch)
+              if (patch.session || patch.message) {
+                ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
+              }
+            },
+            global: {
+              config: globalState.config,
+              projects: globalState.projects,
+              providers: globalState.providers,
+            },
+            loadSessions: (dir) => retry(async () => {
+              const rootSessions = (await listGlobalSessionPages(props.sdk, {
+                directory: dir,
+                archived: false,
+                roots: true,
+                pageSize: 500,
+              }))
+                .filter((s) => !!s?.id)
+                .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+
+              // Also load child sessions (sub-agent delegations) so they
+              // appear in the sidebar immediately instead of relying on
+              // the async global session store.
+              let allSessions: typeof rootSessions = []
+              try {
+                const allResult = await props.sdk.session.list({
+                  directory: dir,
+                  limit: 200,
+                })
+                const allError = (allResult as { error?: unknown }).error
+                if (!allError) {
+                  allSessions = ((allResult as { data?: unknown }).data ?? []) as typeof rootSessions
+                }
+              } catch {
+                // Child load is best-effort; fall back to roots only
+              }
+
+              // Merge: keep root sessions from the first query (for accurate
+              // sessionTotal), plus any child sessions from the broader query.
+              const rootIds = new Set(rootSessions.map((s: { id: string }) => s.id))
+              const childSessions = allSessions.filter((s: { id: string; parentID?: string | null }) => s?.id && !rootIds.has(s.id) && s.parentID)
+
+              const sessions = rootSessions.concat(childSessions)
+              // Race guard: if the list came back empty but event pipeline
+              // already populated the store, don't clobber. OpenCode can
+              // answer HTTP with empty sessions while WS delivers session
+              // events for the same data (disk warmup race on app launch).
+              const currentSessions = store.getState().session
+              if (sessions.length === 0 && currentSessions.length > 0) {
+                console.warn(
+                  `[bootstrap] experimental.session.list returned empty for ${dir}; preserving ${currentSessions.length} existing sessions`,
+                )
+                return
+              }
+              store.setState({ session: sessions, sessionTotal: rootSessions.length, limit: Math.max(sessions.length, 50) })
+              ingestDirectoryStateIntoRoutingIndex(routingIndex, directory, store.getState())
+            }),
+          })
+
+          // VS Code race: if sessions are still empty after bootstrap, OpenCode
+          // wasn't ready yet (bridge returned 503). Retry a few times.
+          const state = store.getState()
+          if (state.session.length === 0 && attempt < 5) {
+            console.warn(`[bootstrap] sessions empty for ${directory} after attempt ${attempt + 1}; retrying in 2s`)
+            await new Promise((r) => setTimeout(r, 2000))
+            store.setState({ status: "loading" as const })
+            await runBootstrap(attempt + 1)
+          } else if (state.session.length === 0) {
+            console.warn(`[bootstrap] sessions empty for ${directory} after ${attempt + 1} attempts; giving up`)
+          }
+        }
+
+        runBootstrap(0).finally(() => {
+          bootingDirs.delete(directory)
+        })
+      },
+      onDispose: (directory) => {
+        bootingDirs.delete(directory)
+      },
+      isBooting: (directory) => bootingDirs.has(directory),
+      isLoadingSessions: () => false,
+    })
+  }, [childStores, props.sdk, routingIndex])
+
+  // Bootstrap global state — set bootingRoot/bootedAt to suppress
+  // redundant refresh events during startup
+  useEffect(() => {
+    const generation = ++globalBootstrapGeneration
+    bootingRoot = true
+    const globalActions = useGlobalSyncStore.getState().actions
+    bootstrapGlobal(props.sdk, (patch) => {
+      if (globalBootstrapGeneration === generation) {
+        globalActions.set(patch)
+      }
+    })
+      .then(() => {
+        if (globalBootstrapGeneration === generation) {
+          bootedAt = Date.now()
+        }
+      })
+      .finally(() => {
+        if (globalBootstrapGeneration === generation) {
+          bootingRoot = false
+        }
+      })
+    return () => {
+      if (globalBootstrapGeneration === generation) {
+        bootingRoot = false
+      }
+    }
+  }, [props.sdk])
+
+  // Event pipeline — created once per mount. No class, no start/stop.
+  // Abort controller owned by the pipeline closure. Cleanup aborts + flushes.
+  useEffect(() => {
+    const pipeline = createEventPipeline({
+      sdk: props.sdk,
+      transport: messageStreamTransport,
+      routeDirectory: (directory, payload) => {
+        return resolveDirectoryFromRoutingIndex(routingIndex, directory, payload, childStores)
+      },
+      onEvent: (directory, payload) => {
+        if (!isStreamHeartbeatEvent(payload)) {
+          lastActiveEventAtByDirectoryRef.current.set(directory, Date.now())
+        }
+        dispatchVSCodeRuntimeNotificationEvent(directory, payload)
+        if (payload.type === "installation.update-available") {
+          const version = typeof (payload.properties as { version?: unknown })?.version === "string"
+            ? (payload.properties as { version: string }).version
+            : ""
+          if (version) {
+            dispatchOpenCodeUpdateAvailable({ version })
+          }
+        }
+        handleEvent(directory, payload, childStores, routingIndex)
+      },
+      onReconnect: () => {
+        useConfigStore.setState({
+          isConnected: true,
+          hasEverConnected: true,
+          connectionPhase: "connected",
+        })
+        if (isRecentBoot()) {
+          return
+        }
+        for (const dir of childStores.children.keys()) {
+          triggerDirectoryResync(dir)
+        }
+      },
+      onDisconnect: (reason) => {
+        const { hasEverConnected } = useConfigStore.getState()
+        useConfigStore.setState({
+          isConnected: false,
+          connectionPhase: hasEverConnected ? "reconnecting" : "connecting",
+          lastDisconnectReason: reason,
+        })
+      },
+      onTransportSwitch: () => {
+        // Transport changes are gap-prone in real networks. Treat them like a
+        // reconnect and refresh active session snapshots from HTTP.
+        useConfigStore.setState({
+          isConnected: true,
+          hasEverConnected: true,
+          connectionPhase: "connected",
+        })
+        for (const dir of childStores.children.keys()) {
+          triggerDirectoryResync(dir)
+        }
+      },
+    })
+    pipelineReconnectRef.current = pipeline.reconnect
+    return () => {
+      if (pipelineReconnectRef.current === pipeline.reconnect) {
+        pipelineReconnectRef.current = null
+      }
+      pipeline.cleanup()
+    }
+  }, [props.sdk, childStores, routingIndex, messageStreamTransport, triggerDirectoryResync])
+
+  useEffect(() => {
+    let stopped = false
+    let running = false
+
+    const discoverChildSessions = async (
+      directory: string,
+      store: StoreApi<DirectoryStore>,
+      parentSessionIds: string[],
+    ) => {
+      if (parentSessionIds.length === 0) return
+      try {
+        const scopedClient = opencodeClient.getScopedSdkClient(directory)
+        const result = await scopedClient.session.list({ directory, limit: 200 })
+        const allSessions = ((result as { data?: unknown }).data ?? []) as Session[]
+        const state = store.getState()
+        const existingIds = new Set(state.session.map((s) => s.id))
+        const parentIdSet = new Set(parentSessionIds)
+        const newChildSessions: Session[] = []
+        for (const session of allSessions) {
+          if (
+            session?.id
+            && !existingIds.has(session.id)
+            && (session as { parentID?: string | null }).parentID
+            && parentIdSet.has((session as { parentID: string }).parentID)
+          ) {
+            newChildSessions.push(session)
+          }
+        }
+        if (newChildSessions.length === 0) return
+        // Collect unique parent IDs for materialization
+        const parentIdsForMaterialization = new Set<string>()
+        for (const session of newChildSessions) {
+          const pid = (session as { parentID?: string | null }).parentID
+          if (pid) parentIdsForMaterialization.add(pid)
+        }
+        store.setState((state: DirectoryStore) => {
+          const sessions = [...state.session, ...newChildSessions].sort((a, b) =>
+            a.id < b.id ? -1 : a.id > b.id ? 1 : 0
+          )
+          return { session: sessions, limit: Math.max(sessions.length, 50) }
+        })
+        // Trigger parent session materialization so the task tool part
+        // state (metadata, sessionId, output) is refreshed.
+        for (const pid of parentIdsForMaterialization) {
+          enqueueSessionMaterialization(directory, pid, childStores)
+        }
+      } catch {
+        // Best-effort — next tick will retry.
+      }
+    }
+
+    const pollDirectoryStatuses = async (
+      directory: string,
+      store: StoreApi<DirectoryStore>,
+      candidateSessionIds: string[],
+    ) => {
+      const polling = statusPollingDirectoriesRef.current
+      if (polling.has(directory)) return
+      polling.add(directory)
+      try {
+        const before = store.getState()
+        const statuses = await resyncDirectorySessionStatuses(directory, store, candidateSessionIds)
+        if (!statuses) return
+        const needsSnapshot = candidateSessionIds.some((sessionId) => (
+          needsSnapshotAfterStatusPoll(before, sessionId, statuses[sessionId])
+        ))
+        if (needsSnapshot) {
+          triggerDirectoryResync(directory)
+        }
+      } finally {
+        polling.delete(directory)
+      }
+    }
+
+    const tick = () => {
+      if (running || stopped) return
+      running = true
+      void Promise.resolve()
+        .then(() => {
+          if (stopped) return
+          const now = Date.now()
+          for (const [directory, store] of childStores.children.entries()) {
+            const state = store.getState()
+            const candidateSessionIds = getActiveSessionCandidateIds(directory, state)
+            if (candidateSessionIds.length === 0) {
+              lastActiveEventAtByDirectoryRef.current.delete(directory)
+              lastStatusPollAtByDirectoryRef.current.delete(directory)
+              lastFullResyncAtByDirectoryRef.current.delete(directory)
+              continue
+            }
+
+            if (!lastActiveEventAtByDirectoryRef.current.has(directory)) {
+              lastActiveEventAtByDirectoryRef.current.set(directory, now)
+            }
+
+            const lastStatusPollAt = lastStatusPollAtByDirectoryRef.current.get(directory) ?? 0
+            if (now - lastStatusPollAt >= ACTIVE_SESSION_STATUS_POLL_INTERVAL_MS) {
+              lastStatusPollAtByDirectoryRef.current.set(directory, now)
+              void pollDirectoryStatuses(directory, store, candidateSessionIds).catch(() => undefined)
+            }
+
+            const lastActiveEventAt = lastActiveEventAtByDirectoryRef.current.get(directory) ?? now
+            const lastFullResyncAt = lastFullResyncAtByDirectoryRef.current.get(directory) ?? 0
+            if (
+              now - lastActiveEventAt >= ACTIVE_SESSION_STALE_EVENT_MS
+              && now - lastFullResyncAt >= ACTIVE_SESSION_FULL_RESYNC_COOLDOWN_MS
+            ) {
+              pipelineReconnectRef.current?.("active_stream_stale")
+              triggerDirectoryResync(directory)
+            }
+
+            // Discover child sessions created by other OpenCode instances
+            // that didn't broadcast a session.created event on this stream.
+            const lastChildDiscoveryAt = lastChildDiscoveryAtByDirectoryRef.current.get(directory) ?? 0
+            if (now - lastChildDiscoveryAt >= CHILD_SESSION_DISCOVERY_INTERVAL_MS) {
+              lastChildDiscoveryAtByDirectoryRef.current.set(directory, now)
+              void discoverChildSessions(directory, store, candidateSessionIds)
+            }
+          }
+        })
+        .finally(() => {
+          running = false
+          if (stopped) {
+            statusPollingDirectoriesRef.current.clear()
+          }
+        })
+    }
+
+    const interval = setInterval(tick, ACTIVE_SESSION_WATCHDOG_INTERVAL_MS)
+    tick()
+
+    return () => {
+      stopped = true
+      clearInterval(interval)
+    }
+  }, [childStores, triggerDirectoryResync])
+
+  // Ensure current directory's child store exists
+  useEffect(() => {
+    let seedExpiryTimer: ReturnType<typeof setTimeout> | undefined
+    if (props.directory) {
+      const store = childStores.ensureChild(props.directory)
+      const statusSeed = getRuntimeLiveStatusSeed(getRuntimeKey(), props.directory)
+      if (statusSeed) {
+        store.setState((state: DirectoryStore) => ({
+          session_status: {
+            ...state.session_status,
+            [statusSeed.sessionId]: state.session_status[statusSeed.sessionId] ?? statusSeed.status,
+          },
+        }))
+        seedExpiryTimer = setTimeout(() => {
+          store.setState((state: DirectoryStore) => {
+            if (state.session_status[statusSeed.sessionId] !== statusSeed.status) {
+              return state
+            }
+            return {
+              session_status: {
+                ...state.session_status,
+                [statusSeed.sessionId]: { type: "idle" as const },
+              },
+            }
+          })
+        }, LIVE_STATUS_TTL_MS)
+      }
+      ingestDirectoryStateIntoRoutingIndex(routingIndex, props.directory, store.getState())
+    }
+    return () => {
+      if (seedExpiryTimer) clearTimeout(seedExpiryTimer)
+    }
+  }, [props.directory, childStores, routingIndex])
+
+  // Set refs so non-React code (session-actions, session-ui-store) can access sync state
+  useEffect(() => {
+    setSyncRefs(props.sdk, childStores, props.directory, (sessionID, dir) => {
+      setIndexedSessionDirectory(routingIndex, sessionID, dir)
+    })
+    setActionRefs(
+      props.sdk,
+      childStores,
+      () => opencodeClient.getDirectory() || props.directory,
+    )
+  }, [props.sdk, props.directory, childStores, routingIndex])
+
+  // Subscribe to child store for streaming state derivation
+  useEffect(() => {
+    if (!props.directory) return
+    const store = childStores.getChild(props.directory)
+    if (!store) return
+    updateStreamingState(store.getState())
+    const unsubscribe = store.subscribe((state) => {
+      updateStreamingState(state)
+    })
+    return unsubscribe
+  }, [props.directory, childStores])
+
+  return <SyncContext.Provider value={system}>{props.children}</SyncContext.Provider>
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+/** Access the global sync store */
+export function useGlobalSync() {
+  return useGlobalSyncStore()
+}
+
+/** Access the global sync store with a selector */
+export function useGlobalSyncSelector<T>(selector: (state: GlobalSyncStore) => T): T {
+  return useGlobalSyncStore(selector)
+}
+
+/** Get the child store for a directory (defaults to current) */
+export function useDirectoryStore(directory?: string): StoreApi<DirectoryStore> {
+  const system = useSyncSystem()
+  const dir = directory ?? system.directory
+  return system.childStores.ensureChild(dir)
+}
+
+/** Select from the current directory's store */
+export function useDirectorySync<T>(selector: (state: State) => T, directory?: string): T {
+  const store = useDirectoryStore(directory)
+  return useStore(store, selector)
+}
+
+/** Get the revert messageID for a session (if reverted) */
+export function useSessionRevertMessageID(sessionID: string, directory?: string): string | undefined {
+  return useDirectorySync(
+    useCallback((state: State) => {
+      const session = state.session.find((s) => s.id === sessionID)
+      return (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
+    }, [sessionID]),
+    directory,
+  )
+}
+
+/** Get session messages for a specific session */
+export function useSessionMessages(sessionID: string, directory?: string) {
+  const store = useDirectoryStore(directory)
+  const getSnapshot = useCallback(() => {
+    if (!sessionID) return EMPTY_MESSAGES
+    return store.getState().message[sessionID] ?? EMPTY_MESSAGES
+  }, [sessionID, store])
+  const subscribe = useCallback((notify: () => void) => {
+    if (!sessionID) return () => undefined
+    return store.subscribe(notify)
+  }, [sessionID, store])
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
+/**
+ * Get visible session messages — filters out reverted messages.
+ * Filters out reverted messages (id >= session.revert.messageID).
+ */
+export function useVisibleSessionMessages(sessionID: string, directory?: string) {
+  const messages = useSessionMessages(sessionID, directory)
+  const revertMessageID = useSessionRevertMessageID(sessionID, directory)
+  return useMemo(() => {
+    if (!revertMessageID) return messages
+    return messages.filter((m) => m.id < revertMessageID)
+  }, [messages, revertMessageID])
+}
+
+/** Check whether the message list for a session has been loaded into sync state. */
+export function useSessionMessagesResolved(sessionID: string, directory?: string): boolean {
+  return useDirectorySync(
+    useCallback((state: State) => {
+      if (!sessionID) return false
+      return Object.prototype.hasOwnProperty.call(state.message, sessionID)
+    }, [sessionID]),
+    directory,
+  )
+}
+
+/** Get parts for a specific message */
+export function useSessionParts(messageID: string, directory?: string) {
+  return useDirectorySync(
+    useCallback((state: State) => state.part[messageID] ?? EMPTY_PARTS, [messageID]),
+    directory,
+  )
+}
+
+/** Get status for a specific session */
+export function useSessionStatus(sessionID: string, directory?: string) {
+  const store = useDirectoryStore(directory)
+  const getSnapshot = useCallback(() => {
+    if (!sessionID) return undefined
+    return store.getState().session_status?.[sessionID]
+  }, [sessionID, store])
+  const subscribe = useCallback((notify: () => void) => {
+    if (!sessionID) return () => undefined
+    return store.subscribe(notify)
+  }, [sessionID, store])
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
+/** Get permissions for a specific session */
+export function useSessionPermissions(sessionID: string, directory?: string) {
+  const store = useDirectoryStore(directory)
+  const getSnapshot = useCallback(() => {
+    if (!sessionID) return EMPTY_PERMISSION_REQUESTS
+    return store.getState().permission[sessionID] ?? EMPTY_PERMISSION_REQUESTS
+  }, [sessionID, store])
+  const subscribe = useCallback((notify: () => void) => {
+    if (!sessionID) return () => undefined
+    return store.subscribe(notify)
+  }, [sessionID, store])
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
+/** Get questions for a specific session */
+export function useSessionQuestions(sessionID: string, directory?: string) {
+  return useDirectorySync(
+    useCallback((state: State) => state.question[sessionID] ?? EMPTY_QUESTION_REQUESTS, [sessionID]),
+    directory,
+  )
+}
+
+/** Get sessions list for a directory */
+export function useSessions(directory?: string) {
+  return useDirectorySync(
+    useCallback((state: State) => state.session, []),
+    directory,
+  )
+}
+
+const getSidebarSessionSignature = (session: Session, stableUpdatedAt: number): string => {
+  const directory = (session as Session & { directory?: string | null }).directory ?? ''
+  const parentID = (session as Session & { parentID?: string | null }).parentID ?? ''
+  const projectWorktree = (session as Session & { project?: { worktree?: string | null } | null }).project?.worktree ?? ''
+  const shared = session.share?.url ?? ''
+  return [
+    session.id,
+    session.title ?? '',
+    session.time?.created ?? 0,
+    session.time?.archived ? 1 : 0,
+    directory,
+    parentID,
+    projectWorktree,
+    shared,
+    stableUpdatedAt,
+  ].join('|')
+}
+
+/** Get sessions stabilized for sidebar tree rendering */
+export function useSidebarSessions(directory?: string): Session[] {
+  const store = useDirectoryStore(directory)
+  const cacheRef = React.useRef<{
+    source: Session[]
+    streamingSignature: string
+    array: Session[]
+    signatures: Map<string, string>
+    sessionsById: Map<string, Session>
+    stableUpdatedAtById: Map<string, number>
+    streamingById: Map<string, boolean>
+  } | null>(null)
+
+  const getSnapshot = React.useCallback(() => {
+    const state = store.getState()
+    const source = state.session
+    const cached = cacheRef.current
+    const streamingSignature = source
+      .map((session) => {
+        const statusType = state.session_status?.[session.id]?.type
+        const isStreaming = statusType === 'busy' || statusType === 'retry'
+        return `${session.id}:${isStreaming ? 1 : 0}`
+      })
+      .join('|')
+
+    if (cached && cached.source === source && cached.streamingSignature === streamingSignature) {
+      return cached.array
+    }
+
+    const signatures = new Map<string, string>()
+    const sessionsById = new Map<string, Session>()
+    const stableUpdatedAtById = new Map<string, number>()
+    const streamingById = new Map<string, boolean>()
+    let changed = !cached || cached.array.length !== source.length
+
+    const array = source.map((session) => {
+      const rawUpdatedAt = Number(session.time?.updated ?? session.time?.created ?? 0)
+      const statusType = state.session_status?.[session.id]?.type
+      const isStreaming = statusType === 'busy' || statusType === 'retry'
+      const cachedUpdatedAt = cached?.stableUpdatedAtById.get(session.id) ?? rawUpdatedAt
+      const wasStreaming = cached?.streamingById.get(session.id) ?? false
+      const stableUpdatedAt = isStreaming
+        ? (wasStreaming ? cachedUpdatedAt : Math.max(rawUpdatedAt, cachedUpdatedAt, Date.now()))
+        : Math.max(rawUpdatedAt, cachedUpdatedAt)
+      const signature = getSidebarSessionSignature(session, stableUpdatedAt)
+      signatures.set(session.id, signature)
+      stableUpdatedAtById.set(session.id, stableUpdatedAt)
+      streamingById.set(session.id, isStreaming)
+
+      const cachedSession = cached?.sessionsById.get(session.id)
+      if (
+        cachedSession
+        && cached?.signatures.get(session.id) === signature
+      ) {
+        sessionsById.set(session.id, cachedSession)
+        return cachedSession
+      }
+
+      changed = true
+      const nextSession = stableUpdatedAt === rawUpdatedAt
+        ? session
+        : {
+            ...session,
+            time: {
+              ...session.time,
+              updated: stableUpdatedAt,
+            },
+          }
+      sessionsById.set(session.id, nextSession)
+      return nextSession
+    })
+
+    if (!changed && cached) {
+      cacheRef.current = {
+        source,
+        streamingSignature,
+        array: cached.array,
+        signatures,
+        sessionsById: cached.sessionsById,
+        stableUpdatedAtById,
+        streamingById,
+      }
+      return cached.array
+    }
+
+    cacheRef.current = { source, streamingSignature, array, signatures, sessionsById, stableUpdatedAtById, streamingById }
+    return array
+  }, [store])
+
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
+
+/** Get one session by id for a directory */
+export function useSession(sessionID?: string | null, directory?: string) {
+  const { childStores } = useSyncSystem()
+  const getSnapshot = useCallback(() => {
+    if (directory) {
+      return childStores.getChild(directory)?.getState().session.find((session) => session.id === sessionID)
+    }
+    return findLiveSession(getLiveStates(childStores), sessionID)
+  }, [childStores, directory, sessionID])
+
+  const subscribe = useCallback((notify: () => void) => {
+    if (directory) {
+      return childStores.ensureChild(directory).subscribe(notify)
+    }
+    return childStores.subscribeAll(notify)
+  }, [childStores, directory])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
+/** Get one session directory by id for a directory */
+export function useSessionDirectory(sessionID?: string | null, directory?: string): string | undefined {
+  const session = useSession(sessionID, directory)
+  return (session as (typeof session & { directory?: string | null }) | undefined)?.directory ?? undefined
+}
+
+/** Get the SDK client */
+export function useSyncSDK() {
+  return useSyncSystem().sdk
+}
+
+/** Get the current directory */
+export function useSyncDirectory() {
+  return useSyncSystem().directory
+}
+
+/** Get the child store manager (for advanced operations) */
+export function useChildStoreManager() {
+  return useSyncSystem().childStores
+}
+
+export type SessionTextMessage = {
+  id: string
+  role: string | null
+  text: string
+}
+
+const getPartText = (part: Part): string => {
+  if (part?.type !== "text") return ""
+  const text = (part as { text?: unknown }).text
+  return typeof text === "string" ? text : ""
+}
+
+const getConcatenatedTextFromParts = (parts: Part[]): string => {
+  let text = ""
+  for (const part of parts) {
+    text += getPartText(part)
+  }
+  return text
+}
+
+const getFirstTextFromParts = (parts: Part[]): string => {
+  for (const part of parts) {
+    const text = getPartText(part)
+    if (text.length > 0) return text
+  }
+  return ""
+}
+
+type SessionMessageRecord = { info: Message; parts: Part[] }
+const EMPTY_SESSION_MESSAGE_RECORDS: SessionMessageRecord[] = []
+
+type SessionMessageRecordsSnapshot = {
+  sessionID: string
+  sourceMessages: Message[]
+  visibleMessages: Message[]
+  revertMessageID?: string
+  suspendPartUpdates: boolean
+  list: SessionMessageRecord[]
+  byId: Map<string, SessionMessageRecord>
+}
+
+const SESSION_MESSAGE_RECORDS_CACHE_MAX = 40
+const VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX = 4
+const VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES = 30
+const MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX = 4
+const MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES = 30
+const sessionMessageRecordsCache = new WeakMap<StoreApi<DirectoryStore>, Map<string, SessionMessageRecordsSnapshot>>()
+
+const getSessionMessageRecordsCacheKey = (sessionID: string, suspendPartUpdates: boolean): string => (
+  `${sessionID}\u0000${suspendPartUpdates ? 1 : 0}`
+)
+
+const getSessionMessageRecordsCache = (store: StoreApi<DirectoryStore>): Map<string, SessionMessageRecordsSnapshot> => {
+  let cache = sessionMessageRecordsCache.get(store)
+  if (!cache) {
+    cache = new Map()
+    sessionMessageRecordsCache.set(store, cache)
+  }
+  return cache
+}
+
+const readCachedSessionMessageRecordsSnapshot = (
+  store: StoreApi<DirectoryStore>,
+  sessionID: string,
+  suspendPartUpdates: boolean,
+): SessionMessageRecordsSnapshot | undefined => {
+  const cache = sessionMessageRecordsCache.get(store)
+  if (!cache) return undefined
+  const key = getSessionMessageRecordsCacheKey(sessionID, suspendPartUpdates)
+  const cached = cache.get(key)
+  if (!cached) return undefined
+  cache.delete(key)
+  cache.set(key, cached)
+  return cached
+}
+
+const rememberSessionMessageRecordsSnapshot = (
+  store: StoreApi<DirectoryStore>,
+  snapshot: SessionMessageRecordsSnapshot,
+): void => {
+  if (!snapshot.sessionID) return
+  const cache = getSessionMessageRecordsCache(store)
+  const key = getSessionMessageRecordsCacheKey(snapshot.sessionID, snapshot.suspendPartUpdates)
+  const constrainedMaxMessages = isVSCodeRuntime()
+    ? VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES
+    : isMobileSurfaceRuntime()
+      ? MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX_MESSAGES
+      : null
+  if (constrainedMaxMessages !== null && snapshot.list.length > constrainedMaxMessages) {
+    cache.delete(key)
+    return
+  }
+  cache.delete(key)
+  cache.set(key, snapshot)
+  const max = isVSCodeRuntime()
+    ? VSCODE_SESSION_MESSAGE_RECORDS_CACHE_MAX
+    : isMobileSurfaceRuntime()
+      ? MOBILE_SESSION_MESSAGE_RECORDS_CACHE_MAX
+      : SESSION_MESSAGE_RECORDS_CACHE_MAX
+  while (cache.size > max) {
+    const oldest = cache.keys().next().value
+    if (typeof oldest !== "string") break
+    cache.delete(oldest)
+  }
+}
+
+export function dropCachedSessionMessageRecordsSnapshots(
+  store: StoreApi<DirectoryStore>,
+  sessionIDs: Iterable<string>,
+): void {
+  const cache = sessionMessageRecordsCache.get(store)
+  if (!cache) return
+  for (const sessionID of sessionIDs) {
+    if (!sessionID) continue
+    cache.delete(getSessionMessageRecordsCacheKey(sessionID, false))
+    cache.delete(getSessionMessageRecordsCacheKey(sessionID, true))
+  }
+}
+
+const snapshotPartsMatchState = (snapshot: SessionMessageRecordsSnapshot, state: State): boolean => {
+  if (snapshot.suspendPartUpdates) {
+    return true
+  }
+
+  for (const record of snapshot.list) {
+    if ((state.part[record.info.id] ?? EMPTY_PARTS) !== record.parts) {
+      return false
+    }
+  }
+
+  return true
+}
+
+const getReusableSessionMessageRecordsSnapshot = (
+  store: StoreApi<DirectoryStore>,
+  state: State,
+  sessionID: string,
+  suspendPartUpdates: boolean,
+): SessionMessageRecordsSnapshot | undefined => {
+  const cached = readCachedSessionMessageRecordsSnapshot(store, sessionID, suspendPartUpdates)
+  if (!cached) return undefined
+  const sourceMessages = state.message[sessionID] ?? EMPTY_MESSAGES
+  const session = state.session.find((candidate) => candidate.id === sessionID)
+  const revertMessageID = (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
+  if (
+    cached.sourceMessages === sourceMessages
+    && cached.revertMessageID === revertMessageID
+    && cached.suspendPartUpdates === suspendPartUpdates
+    && snapshotPartsMatchState(cached, state)
+  ) {
+    return cached
+  }
+  return undefined
+}
+
+function getVisibleMessagesForSession(state: State, sessionID: string, previous?: SessionMessageRecordsSnapshot): {
+  sourceMessages: Message[]
+  visibleMessages: Message[]
+  revertMessageID?: string
+} {
+  const sourceMessages = state.message[sessionID] ?? EMPTY_MESSAGES
+  const session = state.session.find((candidate) => candidate.id === sessionID)
+  const revertMessageID = (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID
+
+  if (
+    previous
+    && previous.sourceMessages === sourceMessages
+    && previous.revertMessageID === revertMessageID
+  ) {
+    return {
+      sourceMessages,
+      visibleMessages: previous.visibleMessages,
+      revertMessageID,
+    }
+  }
+
+  return {
+    sourceMessages,
+    visibleMessages: revertMessageID ? sourceMessages.filter((message) => message.id < revertMessageID) : sourceMessages,
+    revertMessageID,
+  }
+}
+
+export function buildSessionMessageRecordsSnapshot(
+  state: State,
+  sessionID: string,
+  previous?: SessionMessageRecordsSnapshot,
+  suspendPartUpdates = false,
+): SessionMessageRecordsSnapshot {
+  const { sourceMessages, visibleMessages, revertMessageID } = getVisibleMessagesForSession(state, sessionID, previous)
+  const nextById = new Map<string, SessionMessageRecord>()
+  const nextList = visibleMessages.map((message) => {
+    const previousRecord = previous?.byId.get(message.id)
+    const parts = suspendPartUpdates && previousRecord
+      ? previousRecord.parts
+      : (state.part[message.id] ?? EMPTY_PARTS)
+
+    const nextRecord = previousRecord && previousRecord.info === message && previousRecord.parts === parts
+      ? previousRecord
+      : { info: message, parts }
+
+    nextById.set(message.id, nextRecord)
+    return nextRecord
+  })
+
+  const unchanged = Boolean(previous)
+    && previous?.visibleMessages === visibleMessages
+    && previous.list.length === nextList.length
+    && previous.list.every((record, index) => record === nextList[index])
+
+  if (unchanged && previous) {
+    return previous
+  }
+
+  return {
+    sessionID,
+    sourceMessages,
+    visibleMessages,
+    revertMessageID,
+    suspendPartUpdates,
+    list: nextList,
+    byId: nextById,
+  }
+}
+
+export function useSessionMessageCount(sessionID: string, directory?: string): number {
+  return useDirectorySync(
+    useCallback((state: State) => {
+      if (!sessionID) return 0
+      return state.message[sessionID]?.length ?? 0
+    }, [sessionID]),
+    directory,
+  )
+}
+
+export function useSessionTextMessages(sessionID: string, directory?: string): SessionTextMessage[] {
+  const records = useSessionMessageRecords(sessionID, directory)
+
+  return useMemo(
+    () => records.map((record) => ({
+      id: record.info.id,
+      role: typeof record.info.role === "string" ? record.info.role : null,
+      text: getConcatenatedTextFromParts(record.parts),
+    })),
+    [records],
+  )
+}
+
+export function useUserMessageHistory(sessionID: string, directory?: string): string[] {
+  const records = useSessionMessageRecords(sessionID, directory)
+  const userMessages = useMemo(() => records.filter((record) => record.info.role === 'user'), [records])
+
+  return useMemo(() => {
+    const history: string[] = []
+    for (let index = userMessages.length - 1; index >= 0; index -= 1) {
+      const message = userMessages[index]
+      const text = getFirstTextFromParts(message.parts)
+      if (text.length > 0) {
+        history.push(text)
+      }
+    }
+    return history
+  }, [userMessages])
+}
+
+/**
+ * Get messages for a session in the old {info, parts}[] format.
+ * Uses visible messages (filtered by revert state).
+ *
+ * Uses a ref-stable parts lookup that only triggers re-renders when
+ * a part array for one of our displayed messages actually changes.
+ */
+export function useSessionMessageRecords(
+  sessionID: string,
+  directory?: string,
+  options?: { suspendPartUpdates?: boolean },
+) {
+  const store = useDirectoryStore(directory)
+  const snapshotRef = useRef<SessionMessageRecordsSnapshot>({
+    sessionID,
+    sourceMessages: EMPTY_MESSAGES,
+    visibleMessages: EMPTY_MESSAGES,
+    revertMessageID: undefined,
+    suspendPartUpdates: Boolean(options?.suspendPartUpdates),
+    list: [],
+    byId: new Map(),
+  })
+
+  const getSnapshot = useCallback(() => {
+    if (!sessionID) {
+      return EMPTY_SESSION_MESSAGE_RECORDS
+    }
+
+    const state = store.getState()
+    const suspendPartUpdates = Boolean(options?.suspendPartUpdates)
+    const reusableSnapshot = getReusableSessionMessageRecordsSnapshot(store, state, sessionID, suspendPartUpdates)
+    if (reusableSnapshot) {
+      snapshotRef.current = reusableSnapshot
+      return reusableSnapshot.list
+    }
+
+    const previousSnapshot = snapshotRef.current.sessionID === sessionID
+      ? snapshotRef.current
+      : readCachedSessionMessageRecordsSnapshot(store, sessionID, suspendPartUpdates)
+
+    const nextSnapshot = buildSessionMessageRecordsSnapshot(
+      state,
+      sessionID,
+      previousSnapshot,
+      suspendPartUpdates,
+    )
+    snapshotRef.current = nextSnapshot
+    rememberSessionMessageRecordsSnapshot(store, nextSnapshot)
+    return nextSnapshot.list
+  }, [options?.suspendPartUpdates, sessionID, store])
+
+  const subscribe = useCallback((notify: () => void) => {
+    if (!sessionID) return () => undefined
+    return store.subscribe(notify)
+  }, [sessionID, store])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
+/**
+ * Ensures a session's messages are loaded into the sync store.
+ * If the session exists in state.session but messages haven't been fetched
+ * (state.message[sessionID] is absent), triggers a background API fetch.
+ *
+ * This covers the case where a user navigates to an old parent session
+ * whose child session messages were never loaded — bootstrap only loads
+ * session metadata, not messages.
+ */
+
+// Module-level in-flight tracking for useEnsureSessionMessages.
+// Prevents redundant parallel fetches when multiple component instances
+// (e.g. multiple ToolParts) request the same session's messages.
+const _ensureMessagesLoading = new Set<string>()
+
+export function useEnsureSessionMessages(sessionID: string, directory?: string) {
+  const syncDirectory = useSyncDirectory()
+  const resolvedDirectory = directory ?? syncDirectory
+  const store = useDirectoryStore(resolvedDirectory)
+
+  React.useEffect(() => {
+    if (!sessionID) return
+
+    const state = store.getState()
+    // Already loaded into a renderable message/part snapshot — nothing to do.
+    if (getSessionMaterializationStatus(state, sessionID).renderable) return
+    // Session doesn't exist — nothing to load
+    if (!state.session.some((s) => s.id === sessionID)) return
+
+    const loadingKey = `${resolvedDirectory}:${sessionID}`
+    // Already loading this session for this directory
+    if (_ensureMessagesLoading.has(loadingKey)) return
+
+    _ensureMessagesLoading.add(loadingKey)
+
+    void (async () => {
+      try {
+        await materializeSessionFromServer(resolvedDirectory, sessionID, store)
+      } catch {
+        // Transient failure — next navigation or reconnect will retry
+      } finally {
+        _ensureMessagesLoading.delete(loadingKey)
+      }
+    })()
+  }, [sessionID, store, resolvedDirectory])
+}
+
+/**
+ * Determines if a session is actively working.
+ * Checks session_status and only falls back to incomplete assistant messages
+ * when authoritative status is missing.
+ * Returns false when permissions are pending (permission indicator takes priority).
+ */
+export function useIsSessionWorking(sessionID: string, directory?: string): boolean {
+  const status = useSessionStatus(sessionID, directory)
+  const permissions = useSessionPermissions(sessionID, directory)
+  const messages = useSessionMessages(sessionID, directory)
+
+  return useMemo(() => {
+    // Permissions pending → not "working" (show permission indicator instead)
+    if (permissions.length > 0) return false
+
+    // Check session_status
+    const hasAuthoritativeStatus = status !== undefined
+    const statusWorking = hasAuthoritativeStatus && status.type !== "idle"
+
+    // Check for incomplete assistant message (fallback if status event delayed)
+    let hasPendingAssistant = false
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i]
+      if (m.role === "assistant" && typeof (m as { time?: { completed?: number } }).time?.completed !== "number") {
+        hasPendingAssistant = true
+        break
+      }
+    }
+
+    if (hasAuthoritativeStatus) return statusWorking
+    return hasPendingAssistant
+  }, [status, permissions, messages])
+}
+
+const EMPTY_MESSAGES: Message[] = []
+const EMPTY_PARTS: Part[] = []
+const EMPTY_PERMISSION_REQUESTS: PermissionRequest[] = []
+const EMPTY_QUESTION_REQUESTS: QuestionRequest[] = []
diff --git a/packages/web/server/lib/event-stream/protocol.js b/packages/web/server/lib/event-stream/protocol.js
index 394fa502..1cb97f67 100644
--- a/packages/web/server/lib/event-stream/protocol.js
+++ b/packages/web/server/lib/event-stream/protocol.js
@@ -56,7 +56,9 @@ export function parseSseEventEnvelope(block) {
         ? parsed.directory
         : typeof parsed?.properties?.directory === 'string' && parsed.properties.directory.length > 0
           ? parsed.properties.directory
-          : null;
+          : typeof parsed?.properties?.info?.directory === 'string' && parsed.properties.info.directory.length > 0
+            ? parsed.properties.info.directory
+            : null;
 
     return {
       eventId,
diff --git a/packages/web/server/lib/fs/routes.js b/packages/web/server/lib/fs/routes.js
index 10da2314..62c82e49 100644
--- a/packages/web/server/lib/fs/routes.js
+++ b/packages/web/server/lib/fs/routes.js
@@ -668,7 +668,18 @@ export const registerFsRoutes = (app, dependencies) => {
         return res.status(400).json({ error: 'Specified path is not a file' });
       }
 
-      const content = await fsPromises.readFile(canonicalPath, 'utf8');
+      let content = await fsPromises.readFile(canonicalPath, 'utf8');
+      // Retry empty reads — concurrent writer may have truncated the file
+      // between our stat and read (O_TRUNC window). If the file existed with
+      // content at stat time but we read nothing, the writer hasn't finished
+      // writing yet.
+      if (content.length === 0 && stats.size > 0) {
+        for (let attempt = 0; attempt < 3; attempt++) {
+          await new Promise((r) => setTimeout(r, 50 * (attempt + 1)));
+          content = await fsPromises.readFile(canonicalPath, 'utf8');
+          if (content.length > 0) break;
+        }
+      }
       return res.type('text/plain').send(content);
     } catch (error) {
       const err = error;
@@ -785,7 +796,19 @@ export const registerFsRoutes = (app, dependencies) => {
       }
 
       await fsPromises.mkdir(path.dirname(resolved.resolved), { recursive: true });
-      await fsPromises.writeFile(resolved.resolved, content, 'utf8');
+
+      // Atomic write: write to temp then rename to avoid concurrent readers
+      // seeing an empty file during the O_TRUNC window of direct writeFile.
+      const tmp = `${resolved.resolved}.tmp-${process.pid}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      let tmpExists = false;
+      try {
+        await fsPromises.writeFile(tmp, content, 'utf8');
+        tmpExists = true;
+        await fsPromises.rename(tmp, resolved.resolved);
+      } catch (error) {
+        if (tmpExists) await fsPromises.unlink(tmp).catch(() => {});
+        throw error;
+      }
       return res.json({ success: true, path: resolved.resolved });
     } catch (error) {
       const err = error;
diff --git a/scripts/dev-web-hmr.mjs b/scripts/dev-web-hmr.mjs
index cf2463c7..fc7e69e5 100644
--- a/scripts/dev-web-hmr.mjs
+++ b/scripts/dev-web-hmr.mjs
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { spawn, spawnSync } from 'node:child_process';
+import { spawn } from 'node:child_process';
 import { existsSync, rmSync } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
@@ -8,39 +8,15 @@ import { fileURLToPath } from 'node:url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const repoRoot = path.resolve(__dirname, '..');
-const useDetachedChildren = process.platform === 'darwin' || process.platform === 'linux';
+const useDetachedChildren = process.platform === 'darwin';
 const webRoot = path.join(repoRoot, 'packages/web');
 
-const quoteWindowsCommandArg = (value) => `"${String(value).replace(/"/g, '""')}"`;
-
-function resolveWindowsCommand(command) {
-  if (process.platform !== 'win32' || path.isAbsolute(command)) {
-    return command;
-  }
-
-  const result = spawnSync('where.exe', [command], { encoding: 'utf8', windowsHide: true });
-  if (result.error || result.status !== 0) {
-    return command;
-  }
-
-  const candidates = String(result.stdout || '').split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
-  return candidates.find((entry) => /\.(exe|cmd|bat)$/i.test(entry)) || candidates[0] || command;
-}
-
 function run(label, command, args, env = {}, options = {}) {
-  const resolvedCommand = resolveWindowsCommand(command);
-  const isWindowsCommandScript = process.platform === 'win32' && /\.(cmd|bat)$/i.test(resolvedCommand);
-  const spawnCommand = isWindowsCommandScript ? (process.env.ComSpec || 'cmd.exe') : resolvedCommand;
-  const spawnArgs = isWindowsCommandScript
-    ? ['/d', '/s', '/c', ['call', quoteWindowsCommandArg(resolvedCommand), ...args.map(quoteWindowsCommandArg)].join(' ')]
-    : args;
-
-  return spawn(spawnCommand, spawnArgs, {
+  return spawn(command, args, {
     cwd: options.cwd || repoRoot,
     stdio: 'inherit',
     env: { ...process.env, ...env },
     detached: useDetachedChildren,
-    windowsVerbatimArguments: isWindowsCommandScript,
   }).on('error', (error) => {
     console.error(`[dev:web:hmr] Failed to start ${label}:`, error);
   });
@@ -67,17 +43,6 @@ function waitForExit(child, timeoutMs) {
   });
 }
 
-function killWindowsProcessTree(pid) {
-  if (!pid) return;
-  try {
-    spawnSync('taskkill.exe', ['/PID', String(pid), '/T', '/F'], {
-      stdio: 'ignore',
-      windowsHide: true,
-    });
-  } catch {
-  }
-}
-
 function signalChild(child, signal) {
   if (!child || child.exitCode !== null || child.signalCode !== null) {
     return;
@@ -105,11 +70,6 @@ async function stopChildTree(child) {
   signalChild(child, 'SIGINT');
   await waitForExit(child, 2500);
 
-  if (process.platform === 'win32' && child.exitCode === null && child.signalCode === null) {
-    killWindowsProcessTree(child.pid);
-    await waitForExit(child, 1000);
-  }
-
   if (child.exitCode === null && child.signalCode === null) {
     signalChild(child, 'SIGTERM');
     await waitForExit(child, 2500);
@@ -152,15 +112,9 @@ function clearViteCache() {
 
 clearViteCache();
 
-const api = run(
-  'api',
-  'bun',
-  ['x', 'nodemon', '--watch', 'server', '--ext', 'js', '--exec', `bun server/index.js --port ${backendPort}`],
-  {
-    OPENCHAMBER_PORT: backendPort,
-  },
-  { cwd: webRoot },
-);
+const api = run('api', 'bun', ['run', '--cwd', 'packages/web', 'dev:server:watch'], {
+  OPENCHAMBER_PORT: backendPort,
+});
 const vite = run(
   'vite',
   'bun',
@@ -172,10 +126,9 @@ const vite = run(
   { cwd: webRoot },
 );
 
-const lanAddresses = hmrHost === '0.0.0.0' || hmrHost === '::' ? getLanAddresses() : [];
-
 console.log(`[dev:web:hmr] UI with HMR: http://127.0.0.1:${uiPort}`);
 if (hmrHost === '0.0.0.0' || hmrHost === '::') {
+  const lanAddresses = getLanAddresses();
   if (lanAddresses.length > 0) {
     for (const address of lanAddresses) {
       console.log(`[dev:web:hmr] LAN/mobile UI: http://${address}:${uiPort}`);
@@ -193,6 +146,13 @@ async function shutdown(exitCode = 0) {
   if (shuttingDown) return;
   shuttingDown = true;
   await Promise.all([stopChildTree(api), stopChildTree(vite)]);
+  // Clean up orphaned OpenCode processes that weren't killed by
+  // the Express server's shutdown (e.g. when nodemon is killed first).
+  try {
+    spawnSync('pkill', ['-f', 'opencode serve'], { stdio: 'ignore' });
+  } catch {
+    // best-effort
+  }
   process.exit(exitCode);
 }