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);
 }