diff --git a/apps/desktop/src/app/page.tsx b/apps/desktop/src/app/page.tsx
index 4ab637f4..d36341f4 100644
--- a/apps/desktop/src/app/page.tsx
+++ b/apps/desktop/src/app/page.tsx
@@ -1,4 +1,5 @@
 import type { Thread } from "@llm-space/core";
+import type { EditorCommitScopeHandle } from "@llm-space/ui/components/code-editor/editor-commit-scope";
 import { FirecrawlLimitDialog } from "@llm-space/ui/components/firecrawl-limit-dialog";
 import {
   useModels,
@@ -299,6 +300,27 @@ function PageWorkspace({
     );
   }, []);
   const tabs = useThreadTabs({ canPruneRestoredTab });
+  const threadViewCommitHandlesRef = useRef(
+    new Map<string, EditorCommitScopeHandle>()
+  );
+  const commitThreadView = useCallback((paneId: string) => {
+    threadViewCommitHandlesRef.current.get(paneId)?.commitAll();
+  }, []);
+  const commitThreadViews = useCallback(
+    (closingTabs: AppTab[]) => {
+      for (const tab of closingTabs) {
+        if (tab.type === "thread") commitThreadView(tab.paneId);
+      }
+    },
+    [commitThreadView]
+  );
+  const handleViewCommitScopeReady = useCallback(
+    (paneId: string, handle: EditorCommitScopeHandle | null) => {
+      if (handle) threadViewCommitHandlesRef.current.set(paneId, handle);
+      else threadViewCommitHandlesRef.current.delete(paneId);
+    },
+    []
+  );
   const { executeCommand } = useCommands();
   const models = useModels();
   const refreshModels = useRefreshModels();
@@ -748,6 +770,7 @@ function PageWorkspace({
         tabs: tabs.tabs,
         targetId: target,
         onBlocked: () => showRuntimeRunBlocked("closing this tab"),
+        commitViews: commitThreadViews,
         close,
       });
     },
@@ -763,6 +786,7 @@ function PageWorkspace({
         keepId: target,
         runtimeId: targetRuntimeId,
         onBlocked: () => showRuntimeRunBlocked("closing other tabs"),
+        commitViews: commitThreadViews,
         closeOthers: closeOthersInRuntime,
       });
     },
@@ -773,6 +797,7 @@ function PageWorkspace({
         tabs: tabs.tabs,
         runtimeId,
         onBlocked: () => showRuntimeRunBlocked("closing all tabs"),
+        commitViews: commitThreadViews,
         closeAll: closeAllInRuntime,
       });
     },
@@ -1144,6 +1169,8 @@ function PageWorkspace({
               onToggleSidebar={handleToggleSidebar}
               lifecycleHost={paneLifecycleHost}
               mutationRevision={mutationRevision}
+              commitThreadView={commitThreadView}
+              onViewCommitScopeReady={handleViewCommitScopeReady}
               onThreadStateChange={handleThreadStateChange}
               toolbarSlot={<UpdateIndicator />}
             />
diff --git a/apps/desktop/src/app/workspace-model-scope.test.tsx b/apps/desktop/src/app/workspace-model-scope.test.tsx
index 6b1428c0..449f4982 100644
--- a/apps/desktop/src/app/workspace-model-scope.test.tsx
+++ b/apps/desktop/src/app/workspace-model-scope.test.tsx
@@ -1,14 +1,39 @@
 /* eslint-disable @typescript-eslint/await-thenable, @typescript-eslint/no-empty-function, @typescript-eslint/unbound-method */
 import { afterEach, describe, expect, test } from "bun:test";
 
-import type { AgentEvent, AgentTransport, Thread } from "@llm-space/core";
-import type { ModelClient } from "@llm-space/ui/host";
+import type {
+  AgentEvent,
+  AgentTransport,
+  ModelProviderGroup,
+  Thread,
+} from "@llm-space/core";
+import {
+  EditorCommitScope,
+  useRegisterEditorCommit,
+  type EditorCommitScopeHandle,
+} from "@llm-space/ui/components/code-editor/editor-commit-scope";
+import {
+  ThreadPlaygroundSession,
+  ThreadPlaygroundView,
+} from "@llm-space/ui/components/thread-playground";
+import {
+  HostServicesProvider,
+  type HostServices,
+  type ModelClient,
+} from "@llm-space/ui/host";
 import {
   QueryClient,
   QueryClientProvider,
   useQuery,
 } from "@tanstack/react-query";
-import { act, useCallback, useEffect, useLayoutEffect, useState } from "react";
+import {
+  act,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { createRoot, type Root } from "react-dom/client";
 
 import { runRemoteRuntimeActionIfAllowed } from "@/components/remote-runtime-actions";
@@ -18,11 +43,15 @@ import { switchWorkspaceRuntimeIfAllowed } from "@/components/thread-tabs/runtim
 import { SerializedPersistence } from "@/components/thread-tabs/serialized-persistence";
 import { settleStreamingPane } from "@/components/thread-tabs/settle-streaming-pane";
 import { usePaneRefreshAcknowledgement } from "@/components/thread-tabs/use-pane-refresh-ack";
+import type { AppTab } from "@/components/thread-tabs/use-thread-tabs";
+import { useThreadViewLru } from "@/components/thread-tabs/use-thread-view-lru";
 import type { RuntimeId } from "@/shared/runtime";
 
 import {
   createThreadStore,
   type ThreadStore,
+  useThreadStore,
+  useThreadStoreApi,
 } from "../../../../packages/ui/src/components/thread-playground/stores";
 import {
   useThreadPlaygroundEvents,
@@ -346,6 +375,156 @@ function _StoreEventBridge({
   return null;
 }
 
+function _ThreadSessionProbe({
+  onStore,
+  onUnmount,
+}: {
+  onStore(store: ThreadStore): void;
+  onUnmount(): void;
+}) {
+  const store = useThreadStoreApi();
+  useEffect(() => {
+    onStore(store);
+    return onUnmount;
+  }, [onStore, onUnmount, store]);
+  return null;
+}
+
+function _ThreadViewProbe({
+  onMessageCount,
+  onUnmount,
+}: {
+  onMessageCount(count: number): void;
+  onUnmount(): void;
+}) {
+  const count = useThreadStore(
+    (state) => state.thread.context?.messages?.length ?? 0
+  );
+  useEffect(() => {
+    onMessageCount(count);
+  }, [count, onMessageCount]);
+  useEffect(() => onUnmount, [onUnmount]);
+  return null;
+}
+
+function _ThreadSessionHarness({
+  host,
+  initialValue,
+  onMessageCount,
+  onSessionStore,
+  onSessionUnmount,
+  onViewUnmount,
+  showView,
+  transport,
+}: {
+  host: HostServices;
+  initialValue: Thread;
+  onMessageCount(count: number): void;
+  onSessionStore(store: ThreadStore): void;
+  onSessionUnmount(): void;
+  onViewUnmount(): void;
+  showView: boolean;
+  transport?: AgentTransport;
+}) {
+  return (
+    <HostServicesProvider value={host}>
+      <ThreadPlaygroundSession
+        initialValue={initialValue}
+        runtimeId="local"
+        transport={transport}
+      >
+        <_ThreadSessionProbe
+          onStore={onSessionStore}
+          onUnmount={onSessionUnmount}
+        />
+        {showView ? (
+          <_ThreadViewProbe
+            onMessageCount={onMessageCount}
+            onUnmount={onViewUnmount}
+          />
+        ) : null}
+      </ThreadPlaygroundSession>
+    </HostServicesProvider>
+  );
+}
+
+function _EditorCommitProbe({
+  editorId,
+  events,
+}: {
+  editorId: string;
+  events: string[];
+}) {
+  const commit = useCallback(() => {
+    events.push(`commit:${editorId}`);
+  }, [editorId, events]);
+  useRegisterEditorCommit(commit);
+  return null;
+}
+
+function _CommitScopeView({
+  events,
+  handles,
+  paneId,
+}: {
+  events: string[];
+  handles: Map<string, EditorCommitScopeHandle>;
+  paneId: string;
+}) {
+  const handleReady = useCallback(
+    (handle: EditorCommitScopeHandle | null) => {
+      if (handle) handles.set(paneId, handle);
+      else handles.delete(paneId);
+    },
+    [handles, paneId]
+  );
+  useEffect(
+    () => () => {
+      events.push(`unmount:${paneId}`);
+    },
+    [events, paneId]
+  );
+  return (
+    <EditorCommitScope onReady={handleReady}>
+      <_EditorCommitProbe editorId={`${paneId}:message`} events={events} />
+      <_EditorCommitProbe editorId={`${paneId}:tool-result`} events={events} />
+    </EditorCommitScope>
+  );
+}
+
+function _ThreadViewLruHarness({
+  activeId,
+  capacity,
+  events,
+  tabs,
+}: {
+  activeId: string;
+  capacity: number;
+  events: string[];
+  tabs: AppTab[];
+}) {
+  const handlesRef = useRef(new Map<string, EditorCommitScopeHandle>());
+  const commitPane = useCallback((paneId: string) => {
+    handlesRef.current.get(paneId)?.commitAll();
+  }, []);
+  const retained = useThreadViewLru({
+    tabs,
+    activeId,
+    capacity,
+    commitPane,
+  });
+  return tabs.map((tab) =>
+    tab.type === "thread" && retained.has(tab.paneId) ? (
+      <_CommitScopeView
+        key={tab.paneId}
+        events={events}
+        handles={handlesRef.current}
+        paneId={tab.paneId}
+      />
+    ) : null
+  );
+}
+
 describe("WorkspaceModelScope", () => {
   test("runtime changes preserve the mounted workspace identity", async () => {
     const clients = new Map<RuntimeId, ModelClient>([
@@ -410,6 +589,199 @@ describe("WorkspaceModelScope", () => {
   });
 });
 
+describe("ThreadPlayground Session/View lifecycle", () => {
+  test("releasing and remounting a view preserves the exact session store", async () => {
+    const modelProvider = {
+      id: "openai",
+      name: "OpenAI",
+      profiles: [{ id: "default", name: "Default" }],
+      models: [
+        {
+          id: "test-model",
+          name: "Test Model",
+          api: "openai-responses",
+          provider: "openai",
+          baseUrl: "https://example.test/v1",
+          reasoning: false,
+          input: ["text"],
+          cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+          contextWindow: 1000,
+          maxTokens: 100,
+        },
+      ],
+    } as ModelProviderGroup;
+    const client: ModelClient = {
+      ..._client(),
+      availableModels: async () => [modelProvider],
+    };
+    const createClient = () => client;
+    const streamStarted = _deferred();
+    const releaseStream = _deferred();
+    const transport: AgentTransport = async function* () {
+      streamStarted.resolve();
+      await releaseStream.promise;
+      yield* [
+        _event({
+          type: "message_start",
+          message: { role: "assistant" },
+        }),
+        _event({
+          type: "message_update",
+          assistantMessageEvent: { type: "text_start", contentIndex: 0 },
+        }),
+        _event({
+          type: "message_update",
+          assistantMessageEvent: {
+            type: "text_delta",
+            contentIndex: 0,
+            delta: "Completed while hidden",
+          },
+        }),
+        _event({
+          type: "message_end",
+          message: { role: "assistant" },
+        }),
+      ];
+    };
+    const host = {
+      executeTool: null,
+      files: {},
+      skills: {},
+    } as HostServices;
+    const initialValue: Thread = {
+      model: { provider: "openai", id: "test-model" },
+      context: {
+        messages: [
+          {
+            id: "user-1",
+            role: "user",
+            content: [{ type: "text", text: "Run" }],
+          },
+        ],
+      },
+    };
+    let sessionStore: ThreadStore | null = null;
+    let firstStore: ThreadStore | null = null;
+    let sessionUnmounts = 0;
+    let viewUnmounts = 0;
+    const messageCounts: number[] = [];
+    const onSessionStore = (store: ThreadStore) => {
+      sessionStore = store;
+      firstStore ??= store;
+    };
+    const onSessionUnmount = () => {
+      sessionUnmounts += 1;
+    };
+    const onViewUnmount = () => {
+      viewUnmounts += 1;
+    };
+    const onMessageCount = (count: number) => {
+      messageCounts.push(count);
+    };
+    const render = (showView: boolean) => (
+      <WorkspaceModelScope
+        runtimeId="local"
+        createClient={createClient}
+      >
+        <_ThreadSessionHarness
+          host={host}
+          initialValue={initialValue}
+          onMessageCount={onMessageCount}
+          onSessionStore={onSessionStore}
+          onSessionUnmount={onSessionUnmount}
+          onViewUnmount={onViewUnmount}
+          showView={showView}
+          transport={transport}
+        />
+      </WorkspaceModelScope>
+    );
+    activeRoot = _createRoot();
+
+    await act(async () => {
+      activeRoot?.render(render(true));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(typeof ThreadPlaygroundView).toBe("function");
+    expect(firstStore).not.toBeNull();
+    const runningStore = sessionStore as ThreadStore | null;
+    if (!runningStore) throw new Error("Thread session did not mount");
+
+    const runPromise = runningStore.getState().run();
+    await streamStarted.promise;
+
+    await act(async () => activeRoot?.render(render(false)));
+    expect({ sessionUnmounts, viewUnmounts }).toEqual({
+      sessionUnmounts: 0,
+      viewUnmounts: 1,
+    });
+
+    await act(async () => {
+      releaseStream.resolve();
+      await runPromise;
+    });
+    expect(runningStore.getState().status).toBe("idle");
+
+    await act(async () => activeRoot?.render(render(true)));
+    expect(sessionStore).toBe(firstStore);
+    expect(messageCounts.at(-1)).toBe(2);
+    expect(
+      runningStore.getState().thread.context?.messages?.at(-1)?.content
+    ).toContainEqual({ type: "text", text: "Completed while hidden" });
+    expect(sessionUnmounts).toBe(0);
+  });
+});
+
+describe("Thread View LRU draft commits", () => {
+  const tabs: AppTab[] = ["a", "b"].map((id) => ({
+    id: `thread:${id}`,
+    type: "thread",
+    path: `/${id}.json`,
+    runtimeId: "local",
+    paneId: `pane:${id}`,
+  }));
+
+  test("commits every registered editor before an evicted view unmounts", async () => {
+    const events: string[] = [];
+    const render = (activeId: string) => (
+      <_ThreadViewLruHarness
+        activeId={activeId}
+        capacity={1}
+        events={events}
+        tabs={tabs}
+      />
+    );
+    activeRoot = _createRoot();
+
+    await act(async () => activeRoot?.render(render("thread:a")));
+    await act(async () => activeRoot?.render(render("thread:b")));
+
+    expect(events).toEqual([
+      "commit:pane:a:message",
+      "commit:pane:a:tool-result",
+      "unmount:pane:a",
+    ]);
+  });
+
+  test("does not request a commit when no view is evicted", async () => {
+    const events: string[] = [];
+    const render = (activeId: string) => (
+      <_ThreadViewLruHarness
+        activeId={activeId}
+        capacity={2}
+        events={events}
+        tabs={tabs}
+      />
+    );
+    activeRoot = _createRoot();
+
+    await act(async () => activeRoot?.render(render("thread:a")));
+    await act(async () => activeRoot?.render(render("thread:b")));
+
+    expect(events).toEqual([]);
+  });
+});
+
 describe("RuntimePaneHost", () => {
   test("switching active panes does not rerender an unrelated hidden pane", async () => {
     const panes: TestPane[] = [
diff --git a/apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx b/apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx
new file mode 100644
index 00000000..bc6130bc
--- /dev/null
+++ b/apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx
@@ -0,0 +1,302 @@
+import { afterAll, afterEach, beforeEach, describe, expect, test } from "bun:test";
+
+import type {
+  CodeEditorHandle,
+  CodeEditorProps,
+} from "@llm-space/ui/components/code-editor";
+import { createRegexHighlightEnhancement } from "@llm-space/ui/components/code-editor";
+import {
+  EditorCommitScope,
+  type EditorCommitScopeHandle,
+} from "@llm-space/ui/components/code-editor/editor-commit-scope";
+import {
+  OnDemandCodeEditor,
+  OnDemandEditorScope,
+} from "@llm-space/ui/components/code-editor/on-demand-code-editor";
+import { ThemeProvider } from "@llm-space/ui/components/theme-provider";
+import {
+  act,
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  type FormEvent,
+} from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+import {
+  installReactTestDom,
+  TestElement,
+  TestEvent,
+} from "@/test/react-test-dom";
+
+const TEST_DOM = installReactTestDom();
+let root: Root | null = null;
+let container: TestElement | null = null;
+
+const PROMPT_HIGHLIGHTS = [
+  createRegexHighlightEnhancement({
+    id: "prompt-variable-highlight",
+    pattern: String.raw`\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}`,
+    className: "cm-prompt-variable",
+    style: { color: "var(--cm-variable)", fontWeight: "500" },
+    priority: 10,
+  }),
+  createRegexHighlightEnhancement({
+    id: "prompt-template-tag-highlight",
+    pattern: String.raw`\{%[-+]?[\s\S]*?[-+]?%\}`,
+    className: "cm-template-tag",
+    style: { color: "var(--cm-template-tag)", fontWeight: "500" },
+    priority: 20,
+  }),
+] as const;
+
+const FakeFullEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
+  function FakeFullEditor(
+    { autoFocus, enhancements, onBlur, onChange, value },
+    forwardedRef
+  ) {
+    const elementRef = useRef<HTMLTextAreaElement>(null);
+    const draftRef = useRef(value);
+    const commit = () => onChange?.(draftRef.current);
+    useImperativeHandle(forwardedRef, () => ({
+      commit,
+      getValue: () => draftRef.current,
+      insertText: (text) => {
+        draftRef.current += text;
+      },
+    }));
+    useLayoutEffect(() => {
+      if (autoFocus) elementRef.current?.focus();
+    }, [autoFocus]);
+    return (
+      <textarea
+        ref={elementRef}
+        data-testid="full-editor"
+        data-enhancement-count={enhancements?.length ?? 0}
+        defaultValue={value}
+        onBlur={() => {
+          commit();
+          onBlur?.();
+        }}
+        onInput={(event: FormEvent<HTMLTextAreaElement>) => {
+          draftRef.current = event.currentTarget.value;
+        }}
+      />
+    );
+  }
+);
+
+function _preview(): TestElement | null {
+  return TEST_DOM.document.body.querySelector("[data-on-demand-preview]");
+}
+
+function _editor(): TestElement | null {
+  return TEST_DOM.document.body.querySelector("[data-testid=full-editor]");
+}
+
+async function _render(element: React.ReactNode) {
+  await act(async () =>
+    root?.render(<ThemeProvider>{element}</ThemeProvider>)
+  );
+}
+
+beforeEach(() => {
+  container = TEST_DOM.document.createElement("div");
+  TEST_DOM.document.body.appendChild(container);
+  root = createRoot(container as unknown as Element);
+});
+
+afterEach(async () => {
+  await act(async () => root?.unmount());
+  root = null;
+  container?.remove();
+  container = null;
+});
+
+afterAll(() => TEST_DOM.restore());
+
+describe("OnDemandCodeEditor", () => {
+  test("keeps syntax-highlighted segments in the preformatted text flow", async () => {
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value={'<system-reminder date="2026-08-11">text</system-reminder>'}
+        />
+      </OnDemandEditorScope>
+    );
+
+    const preview = _preview();
+    expect(preview?.children.length).toBeGreaterThan(1);
+    expect(preview?.classList.contains("flex")).toBe(false);
+    expect(preview?.classList.contains("flex-col")).toBe(false);
+  });
+
+  test("uses CodeMirror's 1.4 line height in the static preview", async () => {
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor FullEditor={FakeFullEditor} value="line 1\nline 2" />
+      </OnDemandEditorScope>
+    );
+
+    expect(_preview()?.classList.contains("leading-[1.4]")).toBe(true);
+  });
+
+  test("renders prompt-template overlays before CodeMirror is mounted", async () => {
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value="{{current_date}} {% if enabled %}"
+          language="markdown"
+          enhancements={PROMPT_HIGHLIGHTS}
+        />
+      </OnDemandEditorScope>
+    );
+
+    const preview = _preview();
+    const spans = preview?.children ?? [];
+    const variable = spans.find(
+      (span) => span.textContent === "{{current_date}}"
+    );
+    const templateTag = spans.find(
+      (span) => span.textContent === "{% if enabled %}"
+    );
+    expect(variable?.style.color).toBe("var(--cm-variable)");
+    expect(variable?.style.fontWeight).toBe("500");
+    expect(templateTag?.style.color).toBe("var(--cm-template-tag)");
+    expect(templateTag?.style.fontWeight).toBe("500");
+
+    await act(async () => {
+      preview?.dispatchEvent(new TestEvent("pointerdown"));
+    });
+    expect(_editor()?.getAttribute("data-enhancement-count")).toBe("2");
+  });
+
+  test.each([
+    ["Enter", "Enter"],
+    ["Space", " "],
+  ])("%s activates the full editor and focuses it", async (_label, key) => {
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value="**hello**"
+        />
+      </OnDemandEditorScope>
+    );
+
+    expect(_preview()?.getAttribute("role")).toBe("textbox");
+    await act(async () => {
+      _preview()?.dispatchEvent(new TestEvent("keydown", { key }));
+    });
+
+    const editor = _editor();
+    if (!editor) throw new Error("Full editor did not activate");
+    expect(TEST_DOM.document.activeElement).toBe(editor);
+  });
+
+  test("pointer activation edits, commits on blur, and returns to preview", async () => {
+    const changes: string[] = [];
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value="before"
+          onChange={(value) => changes.push(value)}
+        />
+      </OnDemandEditorScope>
+    );
+
+    await act(async () => {
+      _preview()?.dispatchEvent(new TestEvent("pointerdown"));
+    });
+    const editor = _editor();
+    if (!editor) throw new Error("Full editor did not activate");
+    editor.value = "after";
+    editor.dispatchEvent(new TestEvent("input"));
+    await act(async () => editor.dispatchEvent(new TestEvent("focusout")));
+
+    expect(changes).toEqual(["after"]);
+    expect(_editor()).toBeNull();
+    expect(_preview()?.textContent).toBe("after");
+  });
+
+  test("readonly previews remain selectable but never activate", async () => {
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value="readonly"
+          readonly
+        />
+      </OnDemandEditorScope>
+    );
+
+    expect(_preview()?.getAttribute("aria-readonly")).toBe("true");
+    await act(async () => {
+      _preview()?.dispatchEvent(new TestEvent("pointerdown"));
+      _preview()?.dispatchEvent(new TestEvent("keydown", { key: "Enter" }));
+    });
+    expect(_editor()).toBeNull();
+  });
+
+  test("activating another editor commits the first", async () => {
+    const firstChanges: string[] = [];
+    await _render(
+      <OnDemandEditorScope active>
+        <OnDemandCodeEditor
+          FullEditor={FakeFullEditor}
+          value="first"
+          onChange={(value) => firstChanges.push(value)}
+        />
+        <OnDemandCodeEditor FullEditor={FakeFullEditor} value="second" />
+      </OnDemandEditorScope>
+    );
+
+    const previews = TEST_DOM.document.body.querySelectorAll(
+      "[data-on-demand-preview]"
+    );
+    await act(async () => previews[0]?.dispatchEvent(new TestEvent("pointerdown")));
+    const firstEditor = _editor();
+    if (!firstEditor) throw new Error("First editor did not activate");
+    firstEditor.value = "first edited";
+    firstEditor.dispatchEvent(new TestEvent("input"));
+    await act(async () => {
+      TEST_DOM.document.body
+        .querySelector("[data-on-demand-preview]")
+        ?.dispatchEvent(new TestEvent("pointerdown"));
+    });
+
+    expect(firstChanges).toEqual(["first edited"]);
+    expect(_editor()).not.toBeNull();
+  });
+
+  test("the View commit scope commits an active draft", async () => {
+    const changes: string[] = [];
+    let scope: EditorCommitScopeHandle | null = null;
+    await _render(
+      <EditorCommitScope onReady={(handle) => (scope = handle)}>
+        <OnDemandEditorScope active>
+          <OnDemandCodeEditor
+            FullEditor={FakeFullEditor}
+            value="before"
+            onChange={(value) => changes.push(value)}
+          />
+        </OnDemandEditorScope>
+      </EditorCommitScope>
+    );
+    await act(async () => {
+      _preview()?.dispatchEvent(new TestEvent("pointerdown"));
+    });
+    const editor = _editor();
+    if (!editor) throw new Error("Full editor did not activate");
+    editor.value = "committed by scope";
+    editor.dispatchEvent(new TestEvent("input"));
+
+    await act(async () => scope?.commitAll());
+    expect(changes).toEqual(["committed by scope"]);
+    expect(_preview()?.textContent).toBe("committed by scope");
+  });
+});
diff --git a/apps/desktop/src/components/settings/general-page.tsx b/apps/desktop/src/components/settings/general-page.tsx
index 5cb53845..df95dd3e 100644
--- a/apps/desktop/src/components/settings/general-page.tsx
+++ b/apps/desktop/src/components/settings/general-page.tsx
@@ -43,6 +43,12 @@ import { electrobun } from "@/lib/electrobun";
 import { DEFAULT_ANALYTICS_SETTINGS } from "@/shared/analytics";
 import { DEFAULT_UPDATE_MODE, type UpdateMode } from "@/shared/updates";
 
+import {
+  MAX_THREAD_VIEW_CACHE_SIZE,
+  MIN_THREAD_VIEW_CACHE_SIZE,
+  useThreadViewCacheSize,
+} from "../thread-tabs/thread-view-cache-size";
+
 import { PrimaryColorPicker } from "./primary-color-picker";
 import { SettingsPage } from "./settings-page";
 
@@ -295,6 +301,8 @@ export function GeneralPage() {
   const { theme, setTheme } = useTheme();
   const { executeCommand } = useCommands();
   const { fidelity, setFidelity } = useRenderingFidelity();
+  const [threadViewCacheSize, setCachedThreadViews] =
+    useThreadViewCacheSize();
   const [updateMode, setUpdateMode] = useUpdateMode();
   const {
     primaryColor,
@@ -379,7 +387,7 @@ export function GeneralPage() {
             label={
               <RowLabel
                 title="Rendering"
-                hint="Full renders messages with full editors. Fast shows them as plain text for smoother scrolling on large threads."
+                hint="Full keeps every message editor mounted. On Demand shows lightweight syntax highlighting and activates an editor after focus; editing at a specific position may require a second click. Fast uses plain text for the lowest overhead."
               />
             }
           >
@@ -392,10 +400,44 @@ export function GeneralPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="rich">Full</SelectItem>
+                <SelectItem value="on-demand">On Demand</SelectItem>
                 <SelectItem value="lite">Fast</SelectItem>
               </SelectContent>
             </Select>
           </SettingsRow>
+
+          <SettingsRow
+            label={
+              <RowLabel
+                title="Cached thread views"
+                hint="Maximum recently used thread views kept mounted. Background sessions keep running after a view is released."
+              />
+            }
+          >
+            <Select
+              value={String(threadViewCacheSize)}
+              onValueChange={(value) => setCachedThreadViews(Number(value))}
+            >
+              <SelectTrigger className="w-32" aria-label="Cached thread views">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from(
+                  {
+                    length:
+                      MAX_THREAD_VIEW_CACHE_SIZE -
+                      MIN_THREAD_VIEW_CACHE_SIZE +
+                      1,
+                  },
+                  (_, index) => MIN_THREAD_VIEW_CACHE_SIZE + index
+                ).map((value) => (
+                  <SelectItem key={value} value={String(value)}>
+                    {value}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </SettingsRow>
         </SettingsSection>
 
         <SettingsSection title="Defaults">
diff --git a/apps/desktop/src/components/share-thread-parent-wiring.test.tsx b/apps/desktop/src/components/share-thread-parent-wiring.test.tsx
index 40894a1c..cf0d085e 100644
--- a/apps/desktop/src/components/share-thread-parent-wiring.test.tsx
+++ b/apps/desktop/src/components/share-thread-parent-wiring.test.tsx
@@ -542,6 +542,8 @@ describe("mounted share-thread parents preserve runtime ownership", () => {
             onRunStart: () => true,
           }}
           mutationRevision={0}
+          commitThreadView={() => undefined}
+          onViewCommitScopeReady={() => undefined}
         />
       </_Providers>
     );
diff --git a/apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts b/apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts
index 8761b95f..47768cfd 100644
--- a/apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts
+++ b/apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, test } from "bun:test";
 
+import type { Thread } from "@llm-space/core";
+
+import { createThreadStore } from "../../../../../packages/ui/src/components/thread-playground/stores";
+
 import { acquireFileMutationForTabs } from "./pane-file-mutation";
 import {
   closeAllTabsIfAllowed,
@@ -8,6 +12,7 @@ import {
   refreshTabIfAllowed,
 } from "./pane-mutation-actions";
 import { RuntimeRunTracker } from "./runtime-run-tracker";
+import { SerializedPersistence } from "./serialized-persistence";
 import type { AppTab } from "./use-thread-tabs";
 
 const TABS: AppTab[] = [
@@ -44,6 +49,7 @@ describe("pane mutation production actions", () => {
         tabs: TABS,
         targetId: TABS[0].id,
         onBlocked,
+        commitViews: () => undefined,
         close: () => {
           mutations += 1;
         },
@@ -56,6 +62,7 @@ describe("pane mutation production actions", () => {
         keepId: TABS[0].id,
         runtimeId: "local",
         onBlocked,
+        commitViews: () => undefined,
         closeOthers: () => {
           mutations += 1;
         },
@@ -67,6 +74,7 @@ describe("pane mutation production actions", () => {
         tabs: TABS,
         runtimeId: "local",
         onBlocked,
+        commitViews: () => undefined,
         closeAll: () => {
           mutations += 1;
         },
@@ -86,6 +94,134 @@ describe("pane mutation production actions", () => {
     expect({ blocked, mutations }).toEqual({ blocked: 4, mutations: 0 });
   });
 
+  test("commits the exact closing views before removing their tabs", () => {
+    const tracker = new RuntimeRunTracker();
+    const events: string[] = [];
+    const commitViews = (tabs: AppTab[]) => {
+      events.push(`commit:${tabs.map((tab) => tab.id).join(",")}`);
+    };
+
+    expect(
+      closeTabIfAllowed({
+        tracker,
+        tabs: TABS,
+        targetId: TABS[0].id,
+        onBlocked: () => undefined,
+        commitViews,
+        close: (id) => events.push(`close:${id}`),
+      })
+    ).toBe(true);
+    expect(events).toEqual([
+      `commit:${TABS[0].id}`,
+      `close:${TABS[0].id}`,
+    ]);
+
+    events.length = 0;
+    expect(
+      closeOtherTabsIfAllowed({
+        tracker,
+        tabs: TABS,
+        keepId: TABS[0].id,
+        runtimeId: "local",
+        onBlocked: () => undefined,
+        commitViews,
+        closeOthers: (id) => events.push(`closeOthers:${id}`),
+      })
+    ).toBe(true);
+    expect(events).toEqual([
+      `commit:${TABS[1].id}`,
+      `closeOthers:${TABS[0].id}`,
+    ]);
+
+    events.length = 0;
+    expect(
+      closeAllTabsIfAllowed({
+        tracker,
+        tabs: TABS,
+        runtimeId: "local",
+        onBlocked: () => undefined,
+        commitViews,
+        closeAll: (runtimeId) => events.push(`closeAll:${runtimeId}`),
+      })
+    ).toBe(true);
+    expect(events).toEqual([
+      `commit:${TABS.map((tab) => tab.id).join(",")}`,
+      "closeAll:local",
+    ]);
+  });
+
+  test("persists a committed editor draft while its close reservation is active", async () => {
+    const initial: Thread = {
+      context: {
+        messages: [
+          {
+            id: "message-1",
+            role: "user",
+            content: [{ type: "text", text: "before" }],
+          },
+        ],
+      },
+    };
+    const store = createThreadStore(initial);
+    const tracker = new RuntimeRunTracker();
+    const writes: Thread[] = [];
+    const persistenceOwner = {};
+    const persistence = new SerializedPersistence<Thread>(
+      async (thread) => {
+        writes.push(thread);
+      },
+      {
+        onBusyChange: (busy) =>
+          tracker.setPersistenceBusy(
+            "pane-a",
+            "local",
+            persistenceOwner,
+            busy,
+            "folder/a.json"
+          ),
+      }
+    );
+    const unsubscribe = store.subscribe((state, previous) => {
+      if (state.thread === previous.thread) return;
+      if (
+        tracker.isMutationReserved("pane-a", "local", "folder/a.json")
+      ) {
+        return;
+      }
+      persistence.setPending(state.thread);
+    });
+    let closeCalled = false;
+    let closeFlush = Promise.resolve();
+
+    expect(
+      closeTabIfAllowed({
+        tracker,
+        tabs: TABS,
+        targetId: TABS[0].id,
+        onBlocked: () => undefined,
+        commitViews: () => {
+          expect(tracker.beginRun("pane-a", "local", "late-run")).toBe(false);
+          store
+            .getState()
+            .updateMessageTextContent("message-1", "committed on close");
+        },
+        close: () => {
+          closeCalled = true;
+          closeFlush = persistence.flush();
+        },
+      })
+    ).toBe(true);
+    expect(closeCalled).toBe(true);
+    await closeFlush;
+    unsubscribe();
+
+    expect(writes).toHaveLength(1);
+    expect(writes[0].context?.messages?.[0]?.content).toContainEqual({
+      type: "text",
+      text: "committed on close",
+    });
+  });
+
   test("delete and overwrite path guards include open descendants", () => {
     const tracker = new RuntimeRunTracker();
     tracker.beginRun("pane-a", "local", "run-a");
diff --git a/apps/desktop/src/components/thread-tabs/pane-mutation-actions.ts b/apps/desktop/src/components/thread-tabs/pane-mutation-actions.ts
index dac5271c..67a03e23 100644
--- a/apps/desktop/src/components/thread-tabs/pane-mutation-actions.ts
+++ b/apps/desktop/src/components/thread-tabs/pane-mutation-actions.ts
@@ -30,7 +30,7 @@ function _runIfIdle({
     onBlocked();
     return false;
   }
-  const release = tracker.reservePanes(tabs.map(paneIdForTab));
+  const release = tracker.reservePanesForClose(tabs.map(paneIdForTab));
   if (!release) {
     onBlocked();
     return false;
@@ -48,12 +48,14 @@ export function closeTabIfAllowed({
   tabs,
   targetId,
   onBlocked,
+  commitViews,
   close,
 }: {
   tracker: RuntimeRunTracker;
   tabs: AppTab[];
   targetId: string;
   onBlocked: () => void;
+  commitViews: (tabs: AppTab[]) => void;
   close: (id: string) => void;
 }): boolean {
   const target = tabs.find((tab) => tab.id === targetId);
@@ -62,7 +64,10 @@ export function closeTabIfAllowed({
     tracker,
     tabs: [target],
     onBlocked,
-    action: () => close(target.id),
+    action: () => {
+      commitViews([target]);
+      close(target.id);
+    },
   });
 }
 
@@ -72,6 +77,7 @@ export function closeOtherTabsIfAllowed({
   keepId,
   runtimeId,
   onBlocked,
+  commitViews,
   closeOthers,
 }: {
   tracker: RuntimeRunTracker;
@@ -79,6 +85,7 @@ export function closeOtherTabsIfAllowed({
   keepId: string;
   runtimeId: RuntimeId;
   onBlocked: () => void;
+  commitViews: (tabs: AppTab[]) => void;
   closeOthers: (id: string, runtimeId: RuntimeId) => void;
 }): boolean {
   const removed = tabs.filter(
@@ -88,7 +95,10 @@ export function closeOtherTabsIfAllowed({
     tracker,
     tabs: removed,
     onBlocked,
-    action: () => closeOthers(keepId, runtimeId),
+    action: () => {
+      commitViews(removed);
+      closeOthers(keepId, runtimeId);
+    },
   });
 }
 
@@ -97,19 +107,25 @@ export function closeAllTabsIfAllowed({
   tabs,
   runtimeId,
   onBlocked,
+  commitViews,
   closeAll,
 }: {
   tracker: RuntimeRunTracker;
   tabs: AppTab[];
   runtimeId: RuntimeId;
   onBlocked: () => void;
+  commitViews: (tabs: AppTab[]) => void;
   closeAll: (runtimeId: RuntimeId) => void;
 }): boolean {
+  const removed = tabs.filter((tab) => tab.runtimeId === runtimeId);
   return _runIfIdle({
     tracker,
-    tabs: tabs.filter((tab) => tab.runtimeId === runtimeId),
+    tabs: removed,
     onBlocked,
-    action: () => closeAll(runtimeId),
+    action: () => {
+      commitViews(removed);
+      closeAll(runtimeId);
+    },
   });
 }
 
diff --git a/apps/desktop/src/components/thread-tabs/runtime-run-tracker.ts b/apps/desktop/src/components/thread-tabs/runtime-run-tracker.ts
index 369cbdea..142e47d9 100644
--- a/apps/desktop/src/components/thread-tabs/runtime-run-tracker.ts
+++ b/apps/desktop/src/components/thread-tabs/runtime-run-tracker.ts
@@ -54,6 +54,7 @@ function _pathsOverlap(left: string, right: string): boolean {
 /** Tracks panes whose run or terminal persistence still owns its runtime. */
 export class RuntimeRunTracker {
   private _globalMutation = false;
+  private readonly _closingPanes = new Set<string>();
   private readonly _mutatingPanes = new Set<string>();
   private readonly _mutatingPaths = new Map<RuntimeId, Map<object, string[]>>();
   private readonly _mutatingRuntimes = new Set<RuntimeId>();
@@ -78,7 +79,12 @@ export class RuntimeRunTracker {
     runId: string,
     path?: string
   ): boolean {
-    if (this.isMutationReserved(paneId, runtimeId, path)) return false;
+    if (
+      this._closingPanes.has(paneId) ||
+      this.isMutationReserved(paneId, runtimeId, path)
+    ) {
+      return false;
+    }
     let leases = this._runningPanes.get(paneId);
     if (!leases) {
       leases = new Map();
@@ -168,7 +174,9 @@ export class RuntimeRunTracker {
       this._mutatingRuntimes.size > 0 ||
       ids.some(
         (paneId) =>
-          this.isPaneBusy(paneId) || this._mutatingPanes.has(paneId)
+          this.isPaneBusy(paneId) ||
+          this._mutatingPanes.has(paneId) ||
+          this._closingPanes.has(paneId)
       )
     ) {
       return null;
@@ -184,6 +192,36 @@ export class RuntimeRunTracker {
     };
   }
 
+  /**
+   * Blocks new runs and competing mutations while a close synchronously commits
+   * editor drafts. Unlike a destructive mutation reservation, this must not
+   * suppress the closing pane's own Store-to-persistence notification.
+   */
+  reservePanesForClose(paneIds: Iterable<string>): (() => void) | null {
+    const ids = [...new Set(paneIds)];
+    if (
+      this._globalMutation ||
+      this._mutatingRuntimes.size > 0 ||
+      ids.some(
+        (paneId) =>
+          this.isPaneBusy(paneId) ||
+          this._mutatingPanes.has(paneId) ||
+          this._closingPanes.has(paneId)
+      )
+    ) {
+      return null;
+    }
+    ids.forEach((paneId) => this._closingPanes.add(paneId));
+    this._notifyMutationChange();
+    let active = true;
+    return () => {
+      if (!active) return;
+      active = false;
+      ids.forEach((paneId) => this._closingPanes.delete(paneId));
+      this._notifyMutationChange();
+    };
+  }
+
   reservePaths(
     runtimeId: RuntimeId,
     paths: Iterable<string>,
@@ -204,7 +242,9 @@ export class RuntimeRunTracker {
       this._mutatingRuntimes.has(runtimeId) ||
       ids.some(
         (paneId) =>
-          this.isPaneBusy(paneId) || this._mutatingPanes.has(paneId)
+          this.isPaneBusy(paneId) ||
+          this._mutatingPanes.has(paneId) ||
+          this._closingPanes.has(paneId)
       ) ||
       normalizedPaths.some((path) =>
         existingPaths.some((reserved) => _pathsOverlap(path, reserved))
@@ -250,6 +290,7 @@ export class RuntimeRunTracker {
       this._mutatingRuntimes.has(runtimeId) ||
       this._mutatingPaths.has(runtimeId) ||
       this._mutatingPanes.size > 0 ||
+      this._closingPanes.size > 0 ||
       this.hasRunning(runtimeId) ||
       this._persistingPanes
         .values()
@@ -276,6 +317,7 @@ export class RuntimeRunTracker {
       this._mutatingRuntimes.size > 0 ||
       this._mutatingPaths.size > 0 ||
       this._mutatingPanes.size > 0 ||
+      this._closingPanes.size > 0 ||
       this.hasAnyRunning() ||
       [...this._persistingPanes.values()].some((leases) => leases.size > 0)
     ) {
diff --git a/apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx b/apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx
index dae6bcdc..f2823419 100644
--- a/apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx
+++ b/apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import type { Thread } from "@llm-space/core";
-import { ThreadPlayground } from "@llm-space/ui/components/thread-playground";
+import type { EditorCommitScopeHandle } from "@llm-space/ui/components/code-editor/editor-commit-scope";
+import {
+  ThreadPlayground,
+  ThreadPlaygroundSession,
+  ThreadPlaygroundView,
+  type ThreadScrollSnapshot,
+} from "@llm-space/ui/components/thread-playground";
 import {
   nextCompactedThreadPath,
   normalizeThreadForPath,
@@ -47,6 +53,11 @@ interface ThreadTabPaneProps {
   consumeDiscardedPane?: (paneId: string) => boolean;
   /** Publish the pane's latest in-memory thread for host integrations. */
   onThreadStateChange?: (tabId: string, thread: Thread | null) => void;
+  /** Register the commit boundary owned by this pane's disposable View. */
+  onViewCommitScopeReady?: (
+    paneId: string,
+    handle: EditorCommitScopeHandle | null
+  ) => void;
 }
 
 /**
@@ -68,6 +79,7 @@ function _ThreadTabPane({
   onClose,
   consumeDiscardedPane,
   onThreadStateChange,
+  onViewCommitScopeReady,
 }: ThreadTabPaneProps) {
   const qc = useQueryClient();
   const fs = useMemo(() => createFileSystemClient(runtimeId), [runtimeId]);
@@ -380,6 +392,19 @@ function _ThreadTabPane({
     void mutationRevision;
     return lifecycleHost.isMutationReserved(paneId, runtimeId, path);
   }, [lifecycleHost, mutationRevision, paneId, path, runtimeId]);
+  const handleViewCommitScopeReady = useCallback(
+    (handle: EditorCommitScopeHandle | null) => {
+      onViewCommitScopeReady?.(paneId, handle);
+    },
+    [onViewCommitScopeReady, paneId]
+  );
+  const scrollSnapshotRef = useRef<ThreadScrollSnapshot | null>(null);
+  const handleScrollSnapshotChange = useCallback(
+    (snapshot: ThreadScrollSnapshot) => {
+      scrollSnapshotRef.current = snapshot;
+    },
+    []
+  );
 
   if (loadError) {
     return viewMounted ? (
@@ -394,26 +419,50 @@ function _ThreadTabPane({
     ) : null;
   }
 
+  if (!thread) {
+    return viewMounted ? (
+      <div className={cn("size-full", !active && "hidden")}>
+        <ThreadPlayground
+          className="bg-background size-full shadow-lg"
+          loading={isLoading}
+          path={path}
+        />
+      </div>
+    ) : null;
+  }
+
   return (
-    <ThreadPlayground
+    <ThreadPlaygroundSession
       storeKey={reloadKey}
-      className={cn("bg-background size-full shadow-lg", !active && "hidden")}
-      loading={isLoading}
-      path={path}
       initialValue={thread}
-      readonly={mutationReserved}
-      active={active}
-      viewMounted={viewMounted}
       transport={rpcTransport}
       runtimeId={runtimeId}
       onChange={handleChange}
       onStreamingStart={handleStreamingStart}
       onStreamingEnd={handleStreamingEnd}
-      onApplyCompaction={handleApplyCompaction}
       archiveRunSnapshot={archiveRunSnapshot}
       readRunSnapshot={readRunSnapshot}
-      onRenameTitle={handleRenameTitle}
-    />
+    >
+      {viewMounted ? (
+        <div
+          className={cn("size-full", !active && "hidden")}
+          data-thread-view-pane-id={paneId}
+        >
+          <ThreadPlaygroundView
+            className="bg-background size-full shadow-lg"
+            path={path}
+            readonly={mutationReserved}
+            active={active}
+            initialScrollSnapshot={scrollSnapshotRef.current}
+            onScrollSnapshotChange={handleScrollSnapshotChange}
+            runtimeId={runtimeId}
+            onApplyCompaction={handleApplyCompaction}
+            onRenameTitle={handleRenameTitle}
+            onEditorCommitScopeReady={handleViewCommitScopeReady}
+          />
+        </div>
+      ) : null}
+    </ThreadPlaygroundSession>
   );
 }
 
diff --git a/apps/desktop/src/components/thread-tabs/thread-tabs.tsx b/apps/desktop/src/components/thread-tabs/thread-tabs.tsx
index df2353e9..0f598f42 100644
--- a/apps/desktop/src/components/thread-tabs/thread-tabs.tsx
+++ b/apps/desktop/src/components/thread-tabs/thread-tabs.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { Thread } from "@llm-space/core";
+import type { EditorCommitScopeHandle } from "@llm-space/ui/components/code-editor/editor-commit-scope";
 import { useTheme } from "@llm-space/ui/components/theme-provider";
 import { Tooltip } from "@llm-space/ui/components/tooltip";
 import { cn } from "@llm-space/ui/lib/utils";
@@ -34,8 +35,10 @@ import type { PaneLifecycleHost } from "./pane-lifecycle-host";
 import { RuntimePaneHost } from "./runtime-pane-host";
 import { ShareThreadMenuItem } from "./share-thread-menu-item";
 import { ThreadTabPane } from "./thread-tab-pane";
+import { useThreadViewCacheSize } from "./thread-view-cache-size";
 import { TraceTabPane } from "./trace-tab-pane";
 import { tabLabel, type AppTab } from "./use-thread-tabs";
+import { useThreadViewLru } from "./use-thread-view-lru";
 
 const _isWindows =
   typeof navigator !== "undefined" && /Win/i.test(navigator.userAgent);
@@ -94,6 +97,13 @@ interface ThreadTabsProps {
   onToggleSidebar?: () => void;
   lifecycleHost: PaneLifecycleHost;
   mutationRevision: number;
+  /** Commit editor-local drafts before a Thread View is evicted. */
+  commitThreadView: (paneId: string) => void;
+  /** Publish each disposable Thread View's current commit boundary. */
+  onViewCommitScopeReady: (
+    paneId: string,
+    handle: EditorCommitScopeHandle | null
+  ) => void;
   onThreadStateChange?: (tabId: string, thread: Thread | null) => void;
   /** Extra content pinned at the right end of the tab strip, before "+". */
   toolbarSlot?: ReactNode;
@@ -125,6 +135,8 @@ export function ThreadTabs({
   onToggleSidebar,
   lifecycleHost,
   mutationRevision,
+  commitThreadView,
+  onViewCommitScopeReady,
   onThreadStateChange,
   toolbarSlot,
 }: ThreadTabsProps) {
@@ -222,6 +234,13 @@ export function ThreadTabs({
   // over the strip can't leak into a later gesture and close the wrong tab.
   // preventDefault also disables middle-click autoscroll on Windows/Linux.
   const middlePressedTabIdRef = useRef<string | null>(null);
+  const [threadViewCacheSize] = useThreadViewCacheSize();
+  const retainedThreadViews = useThreadViewLru({
+    tabs: paneTabs,
+    activeId,
+    capacity: threadViewCacheSize,
+    commitPane: commitThreadView,
+  });
   const handleMouseDownCapture = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
       if (event.button !== 1) return;
@@ -257,7 +276,7 @@ export function ThreadTabs({
           path={tab.path}
           runtimeId={tab.runtimeId}
           active={active}
-          viewMounted={viewMounted}
+          viewMounted={retainedThreadViews.has(tab.paneId)}
           lifecycleHost={lifecycleHost}
           mutationRevision={mutationRevision}
           refreshNonce={tab.refreshNonce ?? 0}
@@ -266,6 +285,7 @@ export function ThreadTabs({
           onClose={close}
           consumeDiscardedPane={consumeDiscardedPane}
           onThreadStateChange={onThreadStateChange}
+          onViewCommitScopeReady={onViewCommitScopeReady}
         />
       ) : (
         <TraceTabPane
@@ -290,6 +310,8 @@ export function ThreadTabs({
       onMove,
       onThreadStateChange,
       onTraceTitleChange,
+      onViewCommitScopeReady,
+      retainedThreadViews,
     ]
   );
 
diff --git a/apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts b/apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts
new file mode 100644
index 00000000..9a87acc0
--- /dev/null
+++ b/apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts
@@ -0,0 +1,120 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+
+import { LOCAL_STORAGE_KEYS } from "@llm-space/ui/lib/local-storage";
+
+import {
+  DEFAULT_THREAD_VIEW_CACHE_SIZE,
+  MAX_THREAD_VIEW_CACHE_SIZE,
+  getThreadViewCacheSize,
+  setThreadViewCacheSize,
+  subscribeThreadViewCacheSize,
+} from "./thread-view-cache-size";
+
+class MemoryStorage implements Storage {
+  readonly #values = new Map<string, string>();
+
+  get length() {
+    return this.#values.size;
+  }
+
+  clear() {
+    this.#values.clear();
+  }
+
+  getItem(key: string) {
+    return this.#values.get(key) ?? null;
+  }
+
+  key(index: number) {
+    return [...this.#values.keys()][index] ?? null;
+  }
+
+  removeItem(key: string) {
+    this.#values.delete(key);
+  }
+
+  setItem(key: string, value: string) {
+    this.#values.set(key, value);
+  }
+}
+
+describe("thread view cache size", () => {
+  const originalWindow = globalThis.window;
+
+  beforeEach(() => {
+    Object.defineProperty(globalThis, "window", {
+      configurable: true,
+      value: {
+        localStorage: new MemoryStorage(),
+        addEventListener() {
+          return undefined;
+        },
+        removeEventListener() {
+          return undefined;
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(globalThis, "window", {
+      configurable: true,
+      value: originalWindow,
+    });
+  });
+
+  test("defaults to three cached views", () => {
+    expect(DEFAULT_THREAD_VIEW_CACHE_SIZE).toBe(3);
+    expect(getThreadViewCacheSize()).toBe(3);
+  });
+
+  test("accepts persisted integers from one through ten", () => {
+    for (const value of [1, 2, 3, 7, 10]) {
+      window.localStorage.setItem(
+        LOCAL_STORAGE_KEYS.threadViewCacheSize,
+        String(value)
+      );
+      expect(getThreadViewCacheSize()).toBe(value);
+    }
+    expect(MAX_THREAD_VIEW_CACHE_SIZE).toBe(10);
+  });
+
+  test("falls back for malformed or out-of-range persisted values", () => {
+    for (const value of ["0", "11", "3.5", "bad", ""]) {
+      window.localStorage.setItem(
+        LOCAL_STORAGE_KEYS.threadViewCacheSize,
+        value
+      );
+      expect(getThreadViewCacheSize()).toBe(DEFAULT_THREAD_VIEW_CACHE_SIZE);
+    }
+  });
+
+  test("persists changes and notifies same-window subscribers", () => {
+    const snapshots: number[] = [];
+    const unsubscribe = subscribeThreadViewCacheSize(() => {
+      snapshots.push(getThreadViewCacheSize());
+    });
+
+    setThreadViewCacheSize(6);
+    setThreadViewCacheSize(6);
+    setThreadViewCacheSize(9);
+    unsubscribe();
+    setThreadViewCacheSize(4);
+
+    expect(window.localStorage.getItem(LOCAL_STORAGE_KEYS.threadViewCacheSize)).toBe(
+      "4"
+    );
+    expect(snapshots).toEqual([6, 9]);
+  });
+
+  test("normalizes invalid values passed by callers", () => {
+    setThreadViewCacheSize(0);
+    expect(getThreadViewCacheSize()).toBe(1);
+
+    setThreadViewCacheSize(99);
+    expect(getThreadViewCacheSize()).toBe(10);
+
+    setThreadViewCacheSize(4.8);
+    expect(getThreadViewCacheSize()).toBe(5);
+  });
+});
diff --git a/apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts b/apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts
new file mode 100644
index 00000000..c73819fa
--- /dev/null
+++ b/apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts
@@ -0,0 +1,89 @@
+import {
+  LOCAL_STORAGE_KEYS,
+  readLocalStorage,
+  writeLocalStorage,
+} from "@llm-space/ui/lib/local-storage";
+import { useSyncExternalStore } from "react";
+
+export const DEFAULT_THREAD_VIEW_CACHE_SIZE = 3;
+export const MIN_THREAD_VIEW_CACHE_SIZE = 1;
+export const MAX_THREAD_VIEW_CACHE_SIZE = 10;
+
+const listeners = new Set<() => void>();
+let listeningForStorage = false;
+
+export function parseThreadViewCacheSize(raw: string | null): number {
+  if (!raw || !/^\d+$/.test(raw)) {
+    return DEFAULT_THREAD_VIEW_CACHE_SIZE;
+  }
+  const value = Number(raw);
+  return value >= MIN_THREAD_VIEW_CACHE_SIZE &&
+    value <= MAX_THREAD_VIEW_CACHE_SIZE
+    ? value
+    : DEFAULT_THREAD_VIEW_CACHE_SIZE;
+}
+
+function _normalizeThreadViewCacheSize(value: number): number {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_THREAD_VIEW_CACHE_SIZE;
+  }
+  return Math.min(
+    MAX_THREAD_VIEW_CACHE_SIZE,
+    Math.max(MIN_THREAD_VIEW_CACHE_SIZE, Math.round(value))
+  );
+}
+
+function _notifyListeners() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function _handleStorage(event: StorageEvent) {
+  if (event.key === LOCAL_STORAGE_KEYS.threadViewCacheSize) {
+    _notifyListeners();
+  }
+}
+
+export function getThreadViewCacheSize(): number {
+  return parseThreadViewCacheSize(
+    readLocalStorage(LOCAL_STORAGE_KEYS.threadViewCacheSize)
+  );
+}
+
+export function setThreadViewCacheSize(value: number): void {
+  const previous = getThreadViewCacheSize();
+  const next = _normalizeThreadViewCacheSize(value);
+  writeLocalStorage(LOCAL_STORAGE_KEYS.threadViewCacheSize, String(next));
+  if (previous !== next) {
+    _notifyListeners();
+  }
+}
+
+export function subscribeThreadViewCacheSize(listener: () => void): () => void {
+  listeners.add(listener);
+  if (!listeningForStorage && typeof window !== "undefined") {
+    window.addEventListener("storage", _handleStorage);
+    listeningForStorage = true;
+  }
+  return () => {
+    listeners.delete(listener);
+    if (
+      listeners.size === 0 &&
+      listeningForStorage &&
+      typeof window !== "undefined"
+    ) {
+      window.removeEventListener("storage", _handleStorage);
+      listeningForStorage = false;
+    }
+  };
+}
+
+export function useThreadViewCacheSize(): [number, (next: number) => void] {
+  const size = useSyncExternalStore(
+    subscribeThreadViewCacheSize,
+    getThreadViewCacheSize,
+    () => DEFAULT_THREAD_VIEW_CACHE_SIZE
+  );
+  return [size, setThreadViewCacheSize];
+}
diff --git a/apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts b/apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
new file mode 100644
index 00000000..6b79e3dc
--- /dev/null
+++ b/apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, test } from "bun:test";
+
+import { reconcileThreadViewLru } from "./thread-view-lru";
+import type { AppTab, ThreadTab, TraceTab } from "./use-thread-tabs";
+
+function thread(name: string, path = `/${name}.json`): ThreadTab {
+  return {
+    id: `thread:${name}`,
+    type: "thread",
+    path,
+    runtimeId: "local",
+    paneId: `pane:${name}`,
+  };
+}
+
+function trace(name: string): TraceTab {
+  return {
+    id: `trace:${name}`,
+    type: "trace",
+    projectId: "project",
+    traceKey: name,
+    title: name,
+    runtimeId: "local",
+  };
+}
+
+describe("thread view LRU", () => {
+  const tabs: AppTab[] = [
+    thread("a"),
+    trace("one"),
+    thread("b"),
+    thread("c"),
+    thread("d"),
+  ];
+
+  test("starts with only the active thread view", () => {
+    expect(reconcileThreadViewLru([], tabs, "thread:a", 3)).toEqual({
+      retained: ["pane:a"],
+      evicted: [],
+    });
+  });
+
+  test("promotes the active thread and evicts the least recent view", () => {
+    expect(
+      reconcileThreadViewLru(["pane:a"], tabs, "thread:b", 3).retained
+    ).toEqual(["pane:b", "pane:a"]);
+
+    expect(
+      reconcileThreadViewLru(
+        ["pane:c", "pane:b", "pane:a"],
+        tabs,
+        "thread:d",
+        3
+      )
+    ).toEqual({
+      retained: ["pane:d", "pane:c", "pane:b"],
+      evicted: ["pane:a"],
+    });
+  });
+
+  test("shrinking capacity retains the active and most recent views", () => {
+    expect(
+      reconcileThreadViewLru(
+        ["pane:c", "pane:b", "pane:a"],
+        tabs,
+        "thread:b",
+        2
+      )
+    ).toEqual({
+      retained: ["pane:b", "pane:c"],
+      evicted: ["pane:a"],
+    });
+
+    expect(
+      reconcileThreadViewLru(
+        ["pane:c", "pane:b", "pane:a"],
+        tabs,
+        "thread:a",
+        1
+      ).retained
+    ).toEqual(["pane:a"]);
+  });
+
+  test("removes closed thread identities", () => {
+    const withoutB = tabs.filter((tab) => tab.id !== "thread:b");
+    expect(
+      reconcileThreadViewLru(
+        ["pane:c", "pane:b", "pane:a"],
+        withoutB,
+        "thread:c",
+        3
+      )
+    ).toEqual({
+      retained: ["pane:c", "pane:a"],
+      evicted: ["pane:b"],
+    });
+  });
+
+  test("uses pane identity across a path rename", () => {
+    const a = thread("a");
+    const renamed = { ...a, id: "thread:renamed", path: "/renamed.json" };
+    expect(
+      reconcileThreadViewLru([a.paneId], [renamed], renamed.id, 3)
+    ).toEqual({ retained: [a.paneId], evicted: [] });
+  });
+
+  test("trace activation neither consumes capacity nor changes recency", () => {
+    expect(
+      reconcileThreadViewLru(
+        ["pane:c", "pane:b", "pane:a"],
+        tabs,
+        "trace:one",
+        3
+      )
+    ).toEqual({
+      retained: ["pane:c", "pane:b", "pane:a"],
+      evicted: [],
+    });
+  });
+});
diff --git a/apps/desktop/src/components/thread-tabs/thread-view-lru.ts b/apps/desktop/src/components/thread-tabs/thread-view-lru.ts
new file mode 100644
index 00000000..62c45bf8
--- /dev/null
+++ b/apps/desktop/src/components/thread-tabs/thread-view-lru.ts
@@ -0,0 +1,46 @@
+import type { AppTab } from "./use-thread-tabs";
+
+export interface ThreadViewLruTransition {
+  /** Thread pane IDs in most-recently-used order. */
+  retained: string[];
+  /** Pane IDs removed from the previous retained set, in prior MRU order. */
+  evicted: string[];
+}
+
+/**
+ * Reconcile the mounted Thread Views without touching their persistent Sessions.
+ * Trace tabs are deliberately invisible to this policy.
+ */
+export function reconcileThreadViewLru(
+  previous: readonly string[],
+  tabs: readonly AppTab[],
+  activeId: string | null,
+  capacity: number
+): ThreadViewLruTransition {
+  const threadTabs = tabs.filter((tab) => tab.type === "thread");
+  const openPaneIds = new Set(threadTabs.map((tab) => tab.paneId));
+  const activePaneId = threadTabs.find((tab) => tab.id === activeId)?.paneId;
+  const retained: string[] = [];
+
+  if (activePaneId) {
+    retained.push(activePaneId);
+  }
+  for (const paneId of previous) {
+    if (
+      openPaneIds.has(paneId) &&
+      paneId !== activePaneId &&
+      !retained.includes(paneId)
+    ) {
+      retained.push(paneId);
+    }
+  }
+
+  const bounded = retained.slice(0, Math.max(1, Math.trunc(capacity)));
+  const retainedSet = new Set(bounded);
+  const evicted = previous.filter(
+    (paneId, index) =>
+      previous.indexOf(paneId) === index && !retainedSet.has(paneId)
+  );
+
+  return { retained: bounded, evicted };
+}
diff --git a/apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts b/apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts
new file mode 100644
index 00000000..2682d457
--- /dev/null
+++ b/apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts
@@ -0,0 +1,49 @@
+"use client";
+
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import { reconcileThreadViewLru } from "./thread-view-lru";
+import type { AppTab } from "./use-thread-tabs";
+
+function _samePaneIds(left: readonly string[], right: readonly string[]) {
+  return (
+    left.length === right.length &&
+    left.every((paneId, index) => paneId === right[index])
+  );
+}
+
+export function useThreadViewLru({
+  tabs,
+  activeId,
+  capacity,
+  commitPane,
+}: {
+  tabs: readonly AppTab[];
+  activeId: string | null;
+  capacity: number;
+  commitPane: (paneId: string) => void;
+}): ReadonlySet<string> {
+  const [retained, setRetained] = useState(() =>
+    reconcileThreadViewLru([], tabs, activeId, capacity).retained
+  );
+  const retainedRef = useRef(retained);
+
+  useLayoutEffect(() => {
+    const transition = reconcileThreadViewLru(
+      retainedRef.current,
+      tabs,
+      activeId,
+      capacity
+    );
+    if (_samePaneIds(retainedRef.current, transition.retained)) {
+      return;
+    }
+    for (const paneId of transition.evicted) {
+      commitPane(paneId);
+    }
+    retainedRef.current = transition.retained;
+    setRetained(transition.retained);
+  }, [activeId, capacity, commitPane, tabs]);
+
+  return useMemo(() => new Set(retained), [retained]);
+}
diff --git a/bun.lock b/bun.lock
index 92ba54ec..d884a724 100644
--- a/bun.lock
+++ b/bun.lock
@@ -185,6 +185,7 @@
         "@dnd-kit/utilities": "catalog:",
         "@earendil-works/pi-ai": "catalog:",
         "@formkit/auto-animate": "^0.9.0",
+        "@lezer/highlight": "1.2.3",
         "@llm-space/core": "workspace:*",
         "@lobehub/icons": "^5.10.1",
         "@radix-ui/react-slot": "^1.3.3",
diff --git a/docs/performance/thread-view-performance-2026-08.md b/docs/performance/thread-view-performance-2026-08.md
new file mode 100644
index 00000000..6f969125
--- /dev/null
+++ b/docs/performance/thread-view-performance-2026-08.md
@@ -0,0 +1,144 @@
+# Thread View Performance Benchmark
+
+## Method
+
+- Renderer: Electrobun CEF with CDP
+- Fixture: 10 generated Threads, 54 Markdown/JSON messages per Thread
+- Data isolation: a temporary `LLM_SPACE_HOME`; no real workspace or settings
+- Repetitions: five samples per overlay metric
+- Dependency state: `bun install` completed from the checked-in lockfile
+- Active-surface selection: overlay triggers are resolved inside the visible
+  Thread View, never an inactive cached View
+- First-run isolation: onboarding and other asynchronously mounted dialogs are
+  dismissed after every renderer reload
+- LRU state: the three most recent Thread Views are warmed before collecting
+  counts and timings
+
+## Baseline
+
+The production UI matches `main` at
+`437f297ffa95956c5a801a98c4cf10158062132e`. The harness ran from documentation
+commit `7a896a63bba865eb7558e3195bc1f51cbcab8f9d`; no production source had changed.
+
+| Rendering | Mounted views | DOM nodes | CodeMirror | Textareas |
+| --- | ---: | ---: | ---: | ---: |
+| Full | 10 | 49,094 | 550 | 0 |
+| Fast | 10 | 31,089 | 0 | 540 |
+
+Click-to-painted overlay timing in milliseconds:
+
+| Rendering | Surface | Median | Maximum |
+| --- | --- | ---: | ---: |
+| Full | Settings | 45.5 | 275.5 |
+| Full | Tools Add | 71.8 | 113.4 |
+| Full | Examples | 148.9 | 161.8 |
+| Full | Variables | 41.2 | 172.6 |
+| Fast | Settings | 96.0 | 253.7 |
+| Fast | Tools Add | 81.3 | 83.9 |
+| Fast | Examples | 87.8 | 89.6 |
+| Fast | Variables | 101.5 | 107.2 |
+
+One Full/Examples sample timed out during close/reopen cycling and is excluded
+from the median. Raw five-sample arrays remain in
+`/tmp/llm-space-thread-view-baseline.json` for this development run.
+
+The original baseline harness predated the View LRU and selected the first
+matching menu trigger in the DOM. With all ten Views mounted, that trigger could
+belong to an inactive View. It also dismissed onboarding only before the first
+reload. The resource counts are directly comparable; overlay timing deltas are
+useful directional evidence, but not a controlled before/after microbenchmark.
+
+## Final comparison
+
+The corrected final run is stored at
+`/tmp/llm-space-thread-view-final-v2.json`. It measured the default View cache
+size of three.
+
+### Retained UI cost
+
+| Rendering | Mounted views | DOM nodes | CodeMirror | Textareas | Static previews |
+| --- | ---: | ---: | ---: | ---: | ---: |
+| Full, baseline | 10 | 49,094 | 550 | 0 | 0 |
+| Full, final | 3 | 15,199 | 165 | 0 | 0 |
+| Fast, baseline | 10 | 31,089 | 0 | 540 | 0 |
+| Fast, final | 3 | 9,691 | 3 | 162 | 0 |
+| On Demand, final | 3 | 11,959 | 3 | 0 | 162 |
+
+The LRU reduces retained Full DOM by about 69% and CodeMirror instances by
+70%. Fast retains about 69% fewer DOM nodes and 70% fewer message textareas.
+The three CodeMirror instances in final Fast and On Demand are the deliberately
+unchanged System Prompt editors, one per mounted View.
+
+On Demand keeps all 162 repeated message editors as Lezer-highlighted static
+previews while idle. Activating one took 25.8 ms in the recorded run and added
+exactly one CodeMirror. Moving focus away restored the original three
+CodeMirror instances and all 162 static previews.
+
+### Unified enhancement follow-up
+
+The editor-enhancement refactor was measured again at
+`c26a72aa2d17b1145a88e6354015f2fca982e5a2` with the same CEF renderer,
+10-Thread/54-message fixture, three-View cache, and five overlay samples. Its
+raw output is `/tmp/llm-space-thread-view-enhancement-final-committed.json` for
+this development run.
+
+| Rendering | DOM before | DOM after | Editor resources after |
+| --- | ---: | ---: | --- |
+| Full | 15,199 | 15,199 | 165 CodeMirror |
+| Fast | 9,691 | 9,691 | 3 CodeMirror + 162 textareas |
+| On Demand | 11,959 | 11,797 | 3 CodeMirror + 162 static previews |
+
+The shared Enhancement abstraction did not add a retained editor or DOM cost
+to Full or Fast. On Demand retained 162 fewer DOM nodes (about 1.4%) because
+the Static renderer now emits only style-bearing segments while preserving the
+exact source text. Idle On Demand still mounted no message CodeMirror.
+
+Activation took 27.9 ms in this run, temporarily increased CodeMirror from
+three to four, focused the editing surface, and returned to three CodeMirror
+plus all 162 previews after blur. The earlier single activation sample was
+25.8 ms; the 2.1 ms difference is too small and too sparsely sampled to claim a
+regression. Cached and evicted Tab-switch medians were 54.5 ms and 269.2 ms,
+respectively, with the mounted View count remaining three.
+
+### Overlay latency
+
+Median click-to-painted time in milliseconds:
+
+| Rendering | Surface | Baseline | Final | Directional change |
+| --- | --- | ---: | ---: | ---: |
+| Full | Settings | 45.5 | 42.8 | -5.9% |
+| Full | Tools Add | 71.8 | 21.9 | -69.5% |
+| Full | Examples | 148.9 | 26.8 | -82.0% |
+| Full | Variables | 41.2 | 35.5 | -13.8% |
+| Fast | Settings | 96.0 | 135.2 | +40.8% |
+| Fast | Tools Add | 81.3 | 15.0 | -81.5% |
+| Fast | Examples | 87.8 | 25.9 | -70.5% |
+| Fast | Variables | 101.5 | 95.5 | -5.9% |
+| On Demand | Settings | n/a | 33.6 | n/a |
+| On Demand | Tools Add | n/a | 13.7 | n/a |
+| On Demand | Examples | n/a | 25.9 | n/a |
+| On Demand | Variables | n/a | 25.9 | n/a |
+
+The ordinary Tools Add and Examples menus passed a real CEF behavior smoke:
+pointer and keyboard open, arrow-key navigation, Escape close with trigger
+focus restoration, outside dismissal, and menu-to-Dialog focus handoff. While
+open, neither menu hides the app root from assistive technology nor applies a
+Radix body scroll lock.
+
+Settings still has a large first-mount lazy-loading outlier (474–512 ms in the
+final run), and Fast Settings did not improve in this five-sample comparison.
+That path is separate from Dropdown non-modality and remains a candidate for
+future profiling. Maximums are intentionally not presented as steady-state
+latency because lazy chunk loading dominates several first samples.
+
+### Tab switching and session continuity
+
+With three warmed Views, cached Tab switches had a 99.7 ms median. Switching to
+an evicted View and rebuilding its 54-message UI had a 347.8 ms median. The
+mounted View count remained three after all switches.
+
+View eviction does not dispose the Thread Session. Automated lifecycle coverage
+starts a real model transport, unmounts the View while events continue, waits
+for the run to return to idle, and remounts the exact same store with the full
+assistant output. Draft editors are committed before eviction, and the existing
+rule that prevents closing a running Tab remains unchanged.
diff --git a/docs/superpowers/plans/2026-08-11-thread-view-performance.md b/docs/superpowers/plans/2026-08-11-thread-view-performance.md
new file mode 100644
index 00000000..9a617292
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-11-thread-view-performance.md
@@ -0,0 +1,925 @@
+# Thread View Performance Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Bound mounted Thread views without stopping their sessions, add an On Demand syntax-highlighted editor mode with shared prompt decorations, make two ordinary dropdowns non-modal, and quantify the performance change.
+
+**Architecture:** Keep every open Thread's data loading, Zustand store, run loop, event subscription, and persistence in a headless session component keyed by `paneId`. A pure LRU policy controls only the heavy `ThreadPlayground` view children; evicted views commit drafts before unmount and later rebind to the same store. Repeated editors gain a Lezer-rendered preview that mounts CodeMirror only while focused; declarative editor enhancements compile to viewport-bounded CodeMirror decorations or lightweight Static decorations from one prompt-syntax definition.
+
+**Tech Stack:** TypeScript, React 19, Zustand, TanStack Query, CodeMirror 6, Lezer, Radix UI, Bun test, Electrobun CEF/CDP.
+
+---
+
+## File Map
+
+### New files
+
+- `apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts` — persisted 1–10 cached-view preference and same-window subscription.
+- `apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts` — validation, fallback, and notification tests.
+- `apps/desktop/src/components/thread-tabs/thread-view-lru.ts` — pure MRU/LRU transition logic.
+- `apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts` — capacity, activation, Trace exclusion, and eviction tests.
+- `apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts` — React adapter that commits panes before eviction.
+- `packages/ui/src/components/code-editor/editor-commit-scope.tsx` — optional registry for committing editor drafts owned by one View.
+- `packages/ui/src/components/code-editor/static-highlight.ts` — Lezer parsing and highlight-segment generation.
+- `packages/ui/src/components/code-editor/static-highlight.test.ts` — Markdown/JSON segment and plain-text fallback tests.
+- `packages/ui/src/components/code-editor/on-demand-code-editor.tsx` — focusable highlighted preview and single active editor behavior.
+- `packages/ui/src/components/code-editor/editor-enhancement.ts` — CodeMirror-free enhancement contracts, regex factory, and Static decoration collection.
+- `packages/ui/src/components/code-editor/editor-enhancement-codemirror.ts` — lazily loaded adapter from visual enhancements to viewport-bounded CodeMirror extensions.
+- `packages/ui/src/components/code-editor/editor-enhancement.test.ts` — shared declaration, Static range, and CodeMirror adapter parity tests.
+- `packages/ui/src/components/thread-playground/variable/prompt-syntax-enhancements.ts` — prompt-variable and template-tag visual declarations plus CodeMirror-only editing composition.
+- `apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx` — real React pointer, keyboard, blur, readonly, and commit behavior using the repository DOM harness.
+- `scripts/thread-view-performance-benchmark.mjs` — isolated fixture, CDP measurement, and JSON result collection.
+- `docs/performance/thread-view-performance-2026-08.md` — reproducible baseline/final results and analysis.
+
+### Modified files
+
+- `packages/ui/package.json`, `bun.lock` — add direct `@lezer/highlight` dependency.
+- `packages/ui/src/lib/local-storage.ts` — register the cached-view key.
+- `packages/ui/src/components/theme-provider.tsx` — accept and persist `on-demand` fidelity.
+- `packages/ui/src/components/code-editor/editor.tsx` — register the live `commit()` callback in an optional View scope.
+- `packages/ui/src/components/code-editor/index.tsx` — select Full, On Demand, or Fast editor implementation.
+- `packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts` — retain only variable hover, inspection, and prompt autocomplete CodeMirror behavior.
+- `packages/ui/src/components/thread-playground/variable/use-prompt-variable-extension.ts` — return stable prompt-syntax enhancements instead of a raw extension array.
+- `packages/ui/src/components/thread-playground/thread-playground.tsx` — split Session ownership from disposable View rendering.
+- `packages/ui/src/components/thread-playground/message/message-list-item.tsx` — map fidelity to the repeated-editor render mode.
+- `packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx` — apply the same mode to repeated tool content.
+- `packages/ui/src/components/thread-playground/tool/tool-list-view.tsx` — make Tools Add non-modal.
+- `packages/ui/src/components/thread-playground/examples-menu.tsx` — make Examples non-modal.
+- `apps/desktop/src/components/settings/general-page.tsx` — add On Demand copy and Cached thread views setting.
+- `apps/desktop/src/components/thread-tabs/runtime-pane-host.tsx` — keep session shells mounted while passing a `viewMounted` decision.
+- `apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx` — host a persistent Session and conditional View.
+- `apps/desktop/src/components/thread-tabs/thread-tabs.tsx` — integrate LRU membership and View commit registration.
+- `apps/desktop/src/app/workspace-model-scope.test.tsx` — cover Session survival and View remount with real stores.
+- `apps/desktop/src/mainview/index.html` — document that only Fast maps to the pre-React `.lite` class.
+
+## Task 1: Establish a Clean, Repeatable Baseline
+
+**Files:**
+- Create: `scripts/thread-view-performance-benchmark.mjs`
+- Create: `docs/performance/thread-view-performance-2026-08.md`
+
+- [ ] **Step 1: Align installed dependencies with the lockfile**
+
+Run from the repository root:
+
+```bash
+bun install
+```
+
+Expected: exit 0; local `radix-ui` and CodeMirror symlinks match `bun.lock`.
+
+- [ ] **Step 2: Write the benchmark harness before feature changes**
+
+The script must implement this orchestration exactly, with each named helper
+defined in the same file:
+
+```js
+const fixture = await createIsolatedFixture({ threads: 10, messages: 54 });
+const app = await launchCef({ home: fixture.home, port: fixture.port });
+try {
+  await openThreads(10);
+  await setRendering("rich");
+  const full = await sampleScenario(5);
+  await setRendering("lite");
+  const fast = await sampleScenario(5);
+  await Bun.write(resultPath, JSON.stringify({ commit, full, fast }, null, 2));
+} finally {
+  await app.stop();
+  await fixture.remove();
+}
+```
+
+`sampleScenario(5)` records DOM nodes, `.cm-editor`, `textarea`, cached tab switch, and click-to-mounted times for Settings, Tools Add, Examples, and Variables. It reports the median and maximum of five samples. It must use generated thread JSON and a temporary `LLM_SPACE_HOME`, never `~/.llm-space`.
+
+- [ ] **Step 3: Run the baseline before production changes**
+
+The implementation branch currently contains only documentation and the
+benchmark harness, so its renderer is behaviorally identical to `main`. Record
+both `git rev-parse main` as `baseCommit` and `git rev-parse HEAD` as
+`benchmarkCommit`; do not switch branches or copy files outside the checkout.
+
+```bash
+bun run scripts/thread-view-performance-benchmark.mjs --label baseline --output /tmp/llm-space-thread-view-baseline.json
+```
+
+Expected: result JSON includes the tested commit, exact renderer, fixture counts, and five samples per metric.
+
+- [ ] **Step 4: Record the baseline without claiming an improvement**
+
+Add the environment, commits, fixture definition, and raw baseline summary to
+`docs/performance/thread-view-performance-2026-08.md`. Create a `Final
+comparison` section containing the sentence `Final measurements are added by
+Task 10 after the production changes.`; replace that sentence in Task 10.
+
+- [ ] **Step 5: Commit the benchmark foundation**
+
+```bash
+git add scripts/thread-view-performance-benchmark.mjs docs/performance/thread-view-performance-2026-08.md
+git commit -m "test(perf): add thread view benchmark baseline"
+```
+
+## Task 2: Add Validated Rendering and View-cache Preferences
+
+**Files:**
+- Create: `apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts`
+- Create: `apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts`
+- Modify: `packages/ui/src/lib/local-storage.ts`
+- Modify: `packages/ui/src/components/theme-provider.tsx`
+- Modify: `apps/desktop/src/components/settings/general-page.tsx`
+- Modify: `apps/desktop/src/mainview/index.html`
+
+- [ ] **Step 1: Write failing preference tests**
+
+Cover this API:
+
+```ts
+expect(parseThreadViewCacheSize(null)).toBe(3);
+expect(parseThreadViewCacheSize("1")).toBe(1);
+expect(parseThreadViewCacheSize("10")).toBe(10);
+expect(parseThreadViewCacheSize("0")).toBe(3);
+expect(parseThreadViewCacheSize("11")).toBe(3);
+expect(parseThreadViewCacheSize("3.5")).toBe(3);
+expect(parseThreadViewCacheSize("bad")).toBe(3);
+```
+
+Also subscribe two listeners, call `setThreadViewCacheSize(4)`, and assert both receive the same-window update while storage contains `"4"`.
+
+- [ ] **Step 2: Run the focused test and verify RED**
+
+```bash
+bun test apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts
+```
+
+Expected: FAIL because the module and key do not exist.
+
+- [ ] **Step 3: Implement the preference store**
+
+Register `threadViewCacheSize: "llm-space:thread-view-cache-size"` in `LOCAL_STORAGE_KEYS`. Export:
+
+```ts
+export const DEFAULT_THREAD_VIEW_CACHE_SIZE = 3;
+export const MIN_THREAD_VIEW_CACHE_SIZE = 1;
+export const MAX_THREAD_VIEW_CACHE_SIZE = 10;
+export function parseThreadViewCacheSize(raw: string | null): number;
+export function getThreadViewCacheSize(): number;
+export function setThreadViewCacheSize(next: number): void;
+export function subscribeThreadViewCacheSize(listener: () => void): () => void;
+export function useThreadViewCacheSize(): [number, (next: number) => void];
+```
+
+Use `useSyncExternalStore` so General settings and Thread Tabs update in the same window. Clamp only UI-provided values; invalid stored values resolve to 3.
+
+- [ ] **Step 4: Extend rendering fidelity parsing**
+
+Change:
+
+```ts
+export type RenderingFidelity = "rich" | "on-demand" | "lite";
+```
+
+Make `_readStoredFidelity()` accept all three exact stored values and fall back to `rich`. Keep `_applyFidelity()` toggling `.lite` only for `lite`.
+
+- [ ] **Step 5: Add the settings controls and approved copy**
+
+Add `On Demand` between Full and Fast. Replace the Rendering hint with:
+
+```text
+Full keeps every message editor mounted. On Demand shows lightweight syntax highlighting and activates an editor after focus; editing at a specific position may require a second click. Fast uses plain text for the lowest overhead.
+```
+
+Add a `Cached thread views` select directly below it with values 1–10 and hint:
+
+```text
+Maximum recently used thread views kept mounted. Background sessions keep running after a view is released.
+```
+
+- [ ] **Step 6: Verify GREEN and commit**
+
+```bash
+bun test apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts packages/ui/src/lib/local-storage.test.ts
+git add packages/ui/src/lib/local-storage.ts packages/ui/src/components/theme-provider.tsx apps/desktop/src/components/settings/general-page.tsx apps/desktop/src/mainview/index.html apps/desktop/src/components/thread-tabs/thread-view-cache-size.ts apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts
+git commit -m "feat(settings): configure thread view rendering cache"
+```
+
+## Task 3: Implement the Pure Thread-view LRU
+
+**Files:**
+- Create: `apps/desktop/src/components/thread-tabs/thread-view-lru.ts`
+- Create: `apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts`
+
+- [ ] **Step 1: Write failing LRU tests**
+
+Define the wished-for API:
+
+```ts
+const tabs = [thread("a"), trace("trace-1"), thread("b"), thread("c"), thread("d")];
+
+expect(reconcileThreadViewLru([], tabs, "a", 3)).toEqual({
+  retained: ["a"],
+  evicted: [],
+});
+expect(reconcileThreadViewLru(["a"], tabs, "b", 3).retained).toEqual(["b", "a"]);
+expect(reconcileThreadViewLru(["c", "b", "a"], tabs, "d", 3)).toEqual({
+  retained: ["d", "c", "b"],
+  evicted: ["a"],
+});
+```
+
+Add cases for capacity shrink, closed-tab removal, active retention at capacity 1, stable `paneId` after path rename, and a Trace activation leaving Thread recency unchanged.
+
+- [ ] **Step 2: Run and verify RED**
+
+```bash
+bun test apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
+```
+
+Expected: FAIL because `reconcileThreadViewLru` does not exist.
+
+- [ ] **Step 3: Implement the pure transition**
+
+Use `paneId` for Thread identity, return MRU-first IDs, remove IDs no longer present, do not add Trace IDs, and return the exact IDs removed from the previous retained set. Do not read storage, React state, run status, or files.
+
+- [ ] **Step 4: Verify GREEN and commit**
+
+```bash
+bun test apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
+git add apps/desktop/src/components/thread-tabs/thread-view-lru.ts apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
+git commit -m "feat(tabs): add thread view LRU policy"
+```
+
+## Task 4: Split ThreadPlayground Session from View
+
+**Files:**
+- Modify: `packages/ui/src/components/thread-playground/thread-playground.tsx`
+- Modify: `packages/ui/src/components/thread-playground/index.tsx`
+- Modify: `apps/desktop/src/app/workspace-model-scope.test.tsx`
+
+- [ ] **Step 1: Write a failing Session/View lifecycle test**
+
+Extend the existing real-store React harness to mount a Session with its View, capture the store, remove only the View, mutate the store, and remount:
+
+```ts
+expect(sessionStoreBefore).toBe(sessionStoreAfter);
+expect(viewUnmounts).toBe(1);
+expect(sessionUnmounts).toBe(0);
+sessionStoreBefore.getState().appendMessage();
+expect(remountedMessageCount).toBe(initialMessageCount + 1);
+```
+
+Add a transport that yields events while the View is absent and assert status returns to `idle` and the remounted View reads the completed assistant content.
+
+- [ ] **Step 2: Run and verify RED**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx
+```
+
+Expected: FAIL because `ThreadPlaygroundSession` and `ThreadPlaygroundView` are not exported.
+
+- [ ] **Step 3: Extract the Session component**
+
+Export two composable components while retaining the existing facade:
+
+```tsx
+<ThreadPlaygroundSession
+  initialValue={thread}
+  transport={transport}
+  runtimeId={runtimeId}
+  onChange={onChange}
+  onStreamingStart={onStreamingStart}
+  onStreamingEnd={onStreamingEnd}
+>
+  {viewMounted ? <ThreadPlaygroundView {...viewProps} /> : null}
+</ThreadPlaygroundSession>
+```
+
+`ThreadPlaygroundSession` owns `ProviderProfileSelectionProvider`, the stable store, live provider/default-model refs, runtime tool dependencies, and `useThreadPlaygroundEvents`. `ThreadPlaygroundView` only consumes the existing Store and renders `ThreadPlaygroundContent`. The public `ThreadPlayground` continues to compose both for desktop-independent callers and the web viewer.
+
+- [ ] **Step 4: Preserve intentional store recreation**
+
+Keep `storeKey` semantics by placing the key on `ThreadPlaygroundSession`, not on the disposable View. A refresh recreates the store; an LRU remount does not.
+
+- [ ] **Step 5: Verify GREEN and commit**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx packages/ui/src/components/thread-playground/stores/thread-store-runtime.test.ts
+git add packages/ui/src/components/thread-playground/thread-playground.tsx packages/ui/src/components/thread-playground/index.tsx apps/desktop/src/app/workspace-model-scope.test.tsx
+git commit -m "refactor(ui): separate thread sessions from views"
+```
+
+## Task 5: Commit Drafts Before LRU Eviction
+
+**Files:**
+- Create: `packages/ui/src/components/code-editor/editor-commit-scope.tsx`
+- Modify: `packages/ui/src/components/code-editor/editor.tsx`
+- Modify: `packages/ui/src/components/code-editor/index.tsx`
+- Modify: `packages/ui/src/components/thread-playground/thread-playground.tsx`
+- Create: `apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts`
+- Modify: `apps/desktop/src/app/workspace-model-scope.test.tsx`
+
+- [ ] **Step 1: Write a failing draft-commit test**
+
+Mount a View commit scope with two registered fake editors, mark one draft dirty, request an LRU transition that evicts the pane, and assert commit happens before unmount:
+
+```ts
+expect(events).toEqual(["commit:message-1", "commit:tool-result", "unmount"]);
+```
+
+Add a case where no pane is evicted and no commit is requested.
+
+- [ ] **Step 2: Run and verify RED**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx
+```
+
+Expected: FAIL because no commit registry or React LRU adapter exists.
+
+- [ ] **Step 3: Implement the optional editor commit scope**
+
+Provide:
+
+```ts
+export interface EditorCommitScopeHandle { commitAll(): void }
+export function EditorCommitScope({ children, onReady }: Props): JSX.Element;
+export function useRegisterEditorCommit(commit: () => void): void;
+```
+
+Each Full and Fast editor registers its stable `commit` callback when a scope is present. Editors elsewhere continue to work with no provider.
+
+- [ ] **Step 4: Implement the React LRU adapter**
+
+`useThreadViewLru({ tabs, activeId, capacity, commitPane })` maintains the MRU list. In a layout effect, compute the next pure transition, synchronously call `commitPane(paneId)` for every eviction, and only then publish the reduced retained set. Avoid side effects inside a React state updater.
+
+- [ ] **Step 5: Expose View commit registration**
+
+Wrap `ThreadPlaygroundView` in `EditorCommitScope` and let `ThreadTabPane` register/unregister `commitAll` by `paneId`. The tab host supplies that callback to `useThreadViewLru`.
+
+- [ ] **Step 6: Verify GREEN and commit**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx
+git add packages/ui/src/components/code-editor/editor-commit-scope.tsx packages/ui/src/components/code-editor/editor.tsx packages/ui/src/components/code-editor/index.tsx packages/ui/src/components/thread-playground/thread-playground.tsx apps/desktop/src/components/thread-tabs/use-thread-view-lru.ts apps/desktop/src/app/workspace-model-scope.test.tsx
+git commit -m "feat(tabs): commit drafts before view eviction"
+```
+
+## Task 6: Integrate Persistent Sessions with the Desktop LRU
+
+**Files:**
+- Modify: `apps/desktop/src/components/thread-tabs/runtime-pane-host.tsx`
+- Modify: `apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx`
+- Modify: `apps/desktop/src/components/thread-tabs/thread-tabs.tsx`
+- Modify: `apps/desktop/src/app/workspace-model-scope.test.tsx`
+- Modify: `apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts`
+
+- [ ] **Step 1: Write failing integration tests**
+
+Cover these observable behaviors:
+
+```ts
+// capacity 3, four visited Thread tabs
+expect(mountedThreadViews()).toEqual(["pane-b", "pane-c", "pane-d"]);
+expect(mountedThreadSessions()).toEqual(["pane-a", "pane-b", "pane-c", "pane-d"]);
+
+// Trace remains mounted and does not consume capacity
+expect(tracePaneMounted("trace-1")).toBe(true);
+
+// running evicted session completes and remounts
+expect(session("pane-a").store.getState().status).toBe("idle");
+expect(remountedAssistantText("pane-a")).toContain("completed while hidden");
+```
+
+Retain the existing assertion that `closeTabIfAllowed` refuses a running pane.
+
+- [ ] **Step 2: Run and verify RED**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts
+```
+
+Expected: FAIL because every pane still renders a View.
+
+- [ ] **Step 3: Pass `viewMounted` through the pane host**
+
+Keep every `ThreadTabPane` component mounted as the headless Session shell. Pass `viewMounted={retainedPaneIds.has(tab.paneId)}` only for Thread tabs. Keep Trace rendering unchanged.
+
+- [ ] **Step 4: Make `ThreadTabPane` render Session plus conditional View**
+
+Replace the current single `ThreadPlayground` with the split composition from Task 4. Loading/session hooks, persistence, rename, refresh, compaction, and run leases stay outside the conditional child. Remove the inactive CSS-hidden View path; an unretained Thread renders no playground DOM.
+
+- [ ] **Step 5: Wire the setting and commit registry**
+
+Read `useThreadViewCacheSize()` in `ThreadTabs`, feed it to `useThreadViewLru`, and pass stable commit registration callbacks to each Thread Session. Activation must update recency; rename/move must not because `paneId` is stable.
+
+- [ ] **Step 6: Verify GREEN and commit**
+
+```bash
+bun test apps/desktop/src/app/workspace-model-scope.test.tsx apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts
+git add apps/desktop/src/components/thread-tabs/runtime-pane-host.tsx apps/desktop/src/components/thread-tabs/thread-tab-pane.tsx apps/desktop/src/components/thread-tabs/thread-tabs.tsx apps/desktop/src/app/workspace-model-scope.test.tsx apps/desktop/src/components/thread-tabs/pane-mutation-actions.test.ts
+git commit -m "feat(tabs): retain thread sessions with LRU views"
+```
+
+## Task 7: Add Lezer Static Highlighting and On Demand Editing
+
+**Files:**
+- Modify: `packages/ui/package.json`
+- Modify: `bun.lock`
+- Create: `packages/ui/src/components/code-editor/static-highlight.ts`
+- Create: `packages/ui/src/components/code-editor/static-highlight.test.ts`
+- Create: `packages/ui/src/components/code-editor/on-demand-code-editor.tsx`
+- Create: `apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx`
+- Modify: `packages/ui/src/components/code-editor/index.tsx`
+- Modify: `packages/ui/src/components/thread-playground/message/message-list-item.tsx`
+- Modify: `packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx`
+
+- [ ] **Step 1: Add the direct Lezer dependency**
+
+Run inside the UI package:
+
+```bash
+bun add @lezer/highlight@1.2.3 --exact
+```
+
+Expected: `packages/ui/package.json` and root `bun.lock` change; no duplicate React or CodeMirror versions are introduced.
+
+- [ ] **Step 2: Write failing static-highlight tests**
+
+Define:
+
+```ts
+const markdown = createHighlightSegments(
+  "**bold** and `code`",
+  "markdown",
+  "dark"
+);
+expect(markdown.some((segment) => segment.style != null)).toBe(true);
+expect(markdown.map((segment) => segment.text).join("")).toBe("**bold** and `code`");
+
+const json = createHighlightSegments(
+  '{"unsafe":"<script>"}',
+  "json",
+  "dark"
+);
+expect(json.map((segment) => segment.text).join("")).toBe('{"unsafe":"<script>"}');
+```
+
+Add empty text, malformed JSON, multiline Markdown, and classless-gap cases. The helper returns text segments; React performs escaping, and no `dangerouslySetInnerHTML` is permitted.
+
+Using `installReactTestDom()`, also write failing component tests that assert:
+
+```ts
+expect(preview.getAttribute("role")).toBe("textbox");
+preview.dispatchEvent(new TestEvent("keydown", { key: "Enter" }));
+expect(findCodeMirrorEditor()).not.toBeNull();
+expect(document.activeElement).toBe(findCodeMirrorEditor());
+
+outside.dispatchEvent(new TestEvent("pointerdown"));
+expect(onChangeCalls).toEqual([editedText]);
+expect(findHighlightedPreview()).not.toBeNull();
+```
+
+Add Space activation, pointer activation, readonly non-activation, activating a
+second editor commits the first, and View-scope `commitAll()` cases.
+
+- [ ] **Step 3: Run and verify RED**
+
+```bash
+bun test packages/ui/src/components/code-editor/static-highlight.test.ts apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx
+```
+
+Expected: FAIL because `createHighlightSegments` does not exist.
+
+- [ ] **Step 4: Implement Lezer segment generation**
+
+Use `markdownLanguage.parser` and `jsonLanguage.parser` with `highlightTree` and
+the same GitHub light/dark `TagStyle` declarations as Full CodeMirror. Resolve
+Lezer tags to React-safe inline style objects, fill gaps between highlighted
+ranges, and merge adjacent segments with equal styles. Preserve the exact
+original text.
+
+- [ ] **Step 5: Implement `OnDemandCodeEditor`**
+
+Preview state renders a focusable, selectable highlighted `<pre>` with the same border, padding, wrapping, max-height, placeholder, readonly opacity, and scroll-on-focus behavior as the existing editor shell. Pointer click, Enter, or Space activates editing. Editing reuses the existing lazy Full editor path, auto-focuses it, and returns to Preview after blur/commit.
+
+Use a View-level active-editor context keyed by editor instance ID so activating one repeated editor commits and deactivates the previous one. View deactivation and LRU eviction call the same commit scope.
+
+- [ ] **Step 6: Route all three fidelity modes**
+
+Replace boolean-only selection with an explicit repeated-editor mode:
+
+```ts
+type CodeEditorRenderMode = "full" | "on-demand" | "plain";
+```
+
+Map `rich -> full`, `on-demand -> on-demand`, and `lite -> plain` in message and tool-call repeated editors. Do not pass On Demand to System Prompt or other fixed-count editors.
+
+- [ ] **Step 7: Verify GREEN and commit**
+
+```bash
+bun test packages/ui/src/components/code-editor/static-highlight.test.ts apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx apps/desktop/src/app/workspace-model-scope.test.tsx
+git add packages/ui/package.json bun.lock packages/ui/src/components/code-editor/static-highlight.ts packages/ui/src/components/code-editor/static-highlight.test.ts packages/ui/src/components/code-editor/on-demand-code-editor.tsx apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx packages/ui/src/components/code-editor/index.tsx packages/ui/src/components/thread-playground/message/message-list-item.tsx packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
+git commit -m "feat(ui): add on-demand highlighted editors"
+```
+
+## Task 8: Unify Prompt Highlighting Through Editor Enhancements
+
+**Files:**
+- Create: `packages/ui/src/components/code-editor/editor-enhancement.ts`
+- Create: `packages/ui/src/components/code-editor/editor-enhancement-codemirror.ts`
+- Create: `packages/ui/src/components/code-editor/editor-enhancement.test.ts`
+- Create: `packages/ui/src/components/thread-playground/variable/prompt-syntax-enhancements.ts`
+- Modify: `packages/ui/src/components/code-editor/editor.tsx`
+- Modify: `packages/ui/src/components/code-editor/index.tsx`
+- Modify: `packages/ui/src/components/code-editor/on-demand-code-editor.tsx`
+- Modify: `packages/ui/src/components/code-editor/static-highlight.ts`
+- Modify: `packages/ui/src/components/code-editor/static-highlight.test.ts`
+- Modify: `packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts`
+- Modify: `packages/ui/src/components/thread-playground/variable/use-prompt-variable-extension.ts`
+- Modify: `packages/ui/src/components/thread-playground/message/message-list-item.tsx`
+- Modify: `packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx`
+- Modify: `packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx`
+- Modify: `apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx`
+- Delete: `packages/ui/src/components/code-editor/prompt-template-highlights.ts`
+
+- [ ] **Step 1: Write failing pure enhancement and parity tests**
+
+Define the expected public contract in `editor-enhancement.test.ts` before the
+module exists:
+
+```ts
+const variable = createRegexHighlightEnhancement({
+  id: "prompt-variable-highlight",
+  pattern: String.raw`\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}`,
+  className: "cm-prompt-variable",
+  style: { color: "var(--cm-variable)", fontWeight: "500" },
+  priority: 10,
+});
+const tag = createRegexHighlightEnhancement({
+  id: "prompt-template-tag-highlight",
+  pattern: String.raw`\{%[-+]?[\s\S]*?[-+]?%\}`,
+  className: "cm-template-tag",
+  style: { color: "var(--cm-template-tag)", fontWeight: "500" },
+  priority: 20,
+});
+
+expect(collectStaticDecorations("{{ name }} {% if ok %}", [variable, tag]))
+  .toEqual([
+    { from: 0, to: 10, style: variable.style, priority: 10 },
+    { from: 11, to: 22, style: tag.style, priority: 20 },
+  ]);
+expect(compileCodeMirrorEnhancements([variable, tag])).toHaveLength(4);
+```
+
+Add cases for multiline tags, repeated variables, no matches, deterministic
+ordering, stable compilation for the same enhancement identity, duplicate IDs,
+an immutable `range-highlight` declaration, and a `code-mirror-only`
+enhancement contributing extensions but no Static decorations. Mount a Full
+editor in the existing DOM harness and assert its DOM contains both
+`.cm-prompt-variable` and `.cm-template-tag` marks.
+
+Extend `static-highlight.test.ts` and the On Demand component test with
+`{{current_date}}\n{% if enabled %}`. Assert Preview reconstructs the exact
+source, applies the declared variable/tag colors, mounts no `.cm-editor`, and
+after activation mounts CodeMirror with both mark classes.
+
+- [ ] **Step 2: Run the focused tests and verify RED**
+
+```bash
+bun test packages/ui/src/components/code-editor/editor-enhancement.test.ts packages/ui/src/components/code-editor/static-highlight.test.ts apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx
+```
+
+Expected: FAIL because `editor-enhancement.ts`, its CodeMirror adapter, and the
+`enhancements` CodeEditor prop do not exist.
+
+- [ ] **Step 3: Implement the CodeMirror-free enhancement contract**
+
+Create `editor-enhancement.ts` without a runtime import from any
+`@codemirror/*` package:
+
+```ts
+import type { Extension } from "@codemirror/state";
+import type { CSSProperties } from "react";
+
+export interface RegexHighlightEnhancement {
+  kind: "regex-highlight";
+  id: string;
+  pattern: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+}
+
+export interface CodeMirrorOnlyEnhancement {
+  kind: "code-mirror-only";
+  id: string;
+  extensions: readonly Extension[];
+}
+
+export interface RangeHighlightEnhancement {
+  kind: "range-highlight";
+  id: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+  getRanges(source: string): readonly { from: number; to: number }[];
+}
+
+export type EditorEnhancement =
+  | RegexHighlightEnhancement
+  | RangeHighlightEnhancement
+  | CodeMirrorOnlyEnhancement;
+
+export interface StaticDecorationRange {
+  from: number;
+  to: number;
+  style: Readonly<CSSProperties>;
+  priority: number;
+}
+```
+
+Export `createRegexHighlightEnhancement()`,
+`createRangeHighlightEnhancement()`, and
+`collectStaticDecorations(source, enhancements)`. The regex factory rejects an
+empty ID, a pattern that does not compile, and patterns that match an empty
+string. The range factory rejects an empty ID and evaluates its provider against
+the current source in each backend. The collector creates a fresh global RegExp
+per regex scan, obtains explicit ranges from range providers, ignores
+CodeMirror-only enhancements, clamps ranges to the source, drops empty ranges,
+and sorts by `from`, then `priority`, then `to`. Duplicate enhancement IDs
+always throw so composition failures are visible.
+
+- [ ] **Step 4: Implement the lazy CodeMirror adapter**
+
+Create `editor-enhancement-codemirror.ts` and keep all runtime CodeMirror
+imports in this module. Export:
+
+```ts
+export function compileCodeMirrorEnhancements(
+  enhancements: readonly EditorEnhancement[]
+): Extension[];
+```
+
+Compile every regex highlight into one viewport-bounded `MatchDecorator` /
+`ViewPlugin` extension plus one `EditorView.theme` extension using its declared
+class and style. Compile a range highlight into a `ViewPlugin` that obtains
+ranges from the current document on creation and `docChanged`, plus the same
+theme adapter; clamp and sort its `DecorationSet`. Flatten CodeMirror-only
+extension arrays unchanged. Cache each compiled pair in a
+`WeakMap<RegexHighlightEnhancement | RangeHighlightEnhancement, Extension[]>`
+so a stable enhancement object produces stable extension identity and does not
+reconfigure an active editor.
+
+Do not make Full CodeMirror consume `collectStaticDecorations()`; that would
+replace its viewport-bounded work with a whole-document scan.
+
+- [ ] **Step 5: Make Static Highlighting consume generic decorations**
+
+Remove `StaticHighlightOptions.highlightPromptTemplates` and all prompt-specific
+imports from `static-highlight.ts`. Change the API to:
+
+```ts
+export function createHighlightSegments(
+  source: string,
+  language: HighlightLanguage,
+  theme: ResolvedTheme,
+  enhancements: readonly EditorEnhancement[] = []
+): HighlightSegment[];
+```
+
+Call `collectStaticDecorations(source, enhancements)` and merge those ranges
+with Lezer ranges using the existing boundary algorithm. Higher numeric
+priority wins when visual ranges overlap; syntax color remains the fallback for
+properties that an overlay does not define. Memoization in
+`OnDemandCodeEditor` depends on value, language, resolved theme, streaming, and
+the stable enhancement-array identity.
+
+- [ ] **Step 6: Route enhancements through the CodeEditor facade**
+
+Replace `highlightPromptTemplates` in `CodeEditorProps` with:
+
+```ts
+enhancements?: readonly EditorEnhancement[];
+```
+
+Keep `extraExtensions?: Extension[]` as a documented CodeMirror-only escape
+hatch for existing internal callers such as citations. In `editor.tsx`, append
+`compileCodeMirrorEnhancements(enhancements ?? [])` before `extraExtensions`.
+Plain mode ignores enhancements. On Demand preview passes enhancements to
+`createHighlightSegments`; when activated, it passes the same enhancements to
+the injected Full editor. Streaming preview continues returning unhighlighted
+text segments.
+
+- [ ] **Step 7: Declare prompt syntax once and separate editor interactions**
+
+Create `prompt-syntax-enhancements.ts` with two module-stable visual values:
+
+```ts
+export const PROMPT_VARIABLE_HIGHLIGHT =
+  createRegexHighlightEnhancement({
+    id: "prompt-variable-highlight",
+    pattern: PROMPT_VARIABLE_PATTERN,
+    className: "cm-prompt-variable",
+    style: PROMPT_VARIABLE_STYLE,
+    priority: 10,
+  });
+
+export const PROMPT_TEMPLATE_TAG_HIGHLIGHT =
+  createRegexHighlightEnhancement({
+    id: "prompt-template-tag-highlight",
+    pattern: PROMPT_TEMPLATE_TAG_PATTERN,
+    className: "cm-template-tag",
+    style: PROMPT_TEMPLATE_TAG_STYLE,
+    priority: 20,
+  });
+```
+
+Move the patterns and styles out of the generic code-editor directory into this
+prompt feature module. Delete the intermediate
+`code-editor/prompt-template-highlights.ts` file.
+
+Remove `placeholderHighlighter`, `templateTagHighlighter`, and their two visual
+theme rules from `prompt-variable-extension.ts`. Keep variable hover and
+inspection, variable selection, `@include` completion, template-tag completion,
+tooltip placement, and interactive tooltip/completion styles. Wrap its result:
+
+```ts
+export function createPromptSyntaxEditingEnhancement(options): EditorEnhancement {
+  return {
+    kind: "code-mirror-only",
+    id: "prompt-syntax-editing",
+    extensions: createPromptVariableEditingExtensions(options),
+  };
+}
+```
+
+- [ ] **Step 8: Return stable enhancements from the prompt hook and migrate callers**
+
+Change the prompt hook to return:
+
+```ts
+[
+  PROMPT_VARIABLE_HIGHLIGHT,
+  PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+  editingEnhancement,
+]
+```
+
+Retain the existing `WeakMap<ThreadStore, Map<string, ...>>` keyed by Store and
+prompt place, but cache the complete stable enhancement array. Snapshot context
+continues using its frozen resolver and has no inspect action. Outside a Thread
+context, return the same stable empty array so prompt syntax is not enabled
+accidentally.
+
+Migrate message text, tool response, and System Prompt call sites from
+`extraExtensions={variableExtension}` plus `highlightPromptTemplates` to
+`enhancements={promptSyntaxEnhancements}`. Message citations remain in
+`extraExtensions` in this change; exposing clickable Static decorations is a
+separate interaction design.
+
+- [ ] **Step 9: Verify prompt editing features did not regress**
+
+Run the focused tests and add DOM assertions after On Demand activation for:
+
+```text
+{{              -> variable list plus @include
+{{@             -> @include completion
+{%              -> if/elif/else/endif/for/endfor/set/raw/endraw completion
+hover {{name}}  -> current value tooltip and inspect action in live threads
+```
+
+Static Preview must have no CodeMirror tooltip, completion list, variable
+resolver call, skill load, or inspect action. Full and activated On Demand must
+retain all existing behavior.
+
+```bash
+bun test packages/ui/src/components/code-editor/editor-enhancement.test.ts packages/ui/src/components/code-editor/static-highlight.test.ts apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx packages/ui/src/components/thread-playground/variable
+```
+
+Expected: PASS.
+
+- [ ] **Step 10: Commit the enhancement refactor**
+
+```bash
+git add packages/ui/src/components/code-editor packages/ui/src/components/thread-playground/variable packages/ui/src/components/thread-playground/message/message-list-item.tsx packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx
+git commit -m "refactor(ui): unify editor highlight enhancements"
+```
+
+## Task 9: Make Ordinary Dropdowns Non-modal Without Interaction Regressions
+
+**Files:**
+- Modify: `packages/ui/src/components/thread-playground/tool/tool-list-view.tsx`
+- Modify: `packages/ui/src/components/thread-playground/examples-menu.tsx`
+- Modify: `scripts/thread-view-performance-benchmark.mjs`
+
+- [ ] **Step 1: Add failing policy assertions to the benchmark smoke phase**
+
+Before changing components, have the CDP smoke phase open each target menu by pointer and keyboard and record:
+
+```json
+{
+  "toolsAdd": { "opens": true, "escapeRestoresTrigger": true, "dialogOwnsFocus": true },
+  "examples": { "opens": true, "arrowSelects": true, "outsideDismisses": true }
+}
+```
+
+Also assert the open menu does not set `aria-hidden="true"` on the application root and does not leave `body` scroll-locked. Against current modal menus, the non-modal policy assertion must fail for the expected reason.
+
+- [ ] **Step 2: Run and verify RED**
+
+```bash
+bun run scripts/thread-view-performance-benchmark.mjs --smoke dropdowns
+```
+
+Expected: FAIL on the non-modal background-isolation assertion.
+
+- [ ] **Step 3: Set only the approved menus non-modal**
+
+Change exactly these roots:
+
+```tsx
+<DropdownMenu modal={false}>
+```
+
+Do not change More Actions, Run Settings, ContextMenu, Settings, Variables, New Thread, or confirmation dialogs.
+
+- [ ] **Step 4: Handle menu-to-Dialog focus only if the smoke test exposes a race**
+
+If Radix restores focus to the trigger after a selected Tools item opens a Dialog, prevent that menu close's auto-focus and allow the Dialog to own focus. Keep outside-click and Escape focus restoration unchanged.
+
+- [ ] **Step 5: Verify GREEN and commit**
+
+```bash
+bun run scripts/thread-view-performance-benchmark.mjs --smoke dropdowns
+git add packages/ui/src/components/thread-playground/tool/tool-list-view.tsx packages/ui/src/components/thread-playground/examples-menu.tsx scripts/thread-view-performance-benchmark.mjs
+git commit -m "perf(ui): make ordinary dropdown menus non-modal"
+```
+
+## Task 10: Full Verification and Before/After Benchmark
+
+**Files:**
+- Modify: `docs/performance/thread-view-performance-2026-08.md`
+
+- [ ] **Step 1: Run focused lifecycle and rendering tests**
+
+```bash
+bun test apps/desktop/src/components/thread-tabs/thread-view-cache-size.test.ts apps/desktop/src/components/thread-tabs/thread-view-lru.test.ts apps/desktop/src/app/workspace-model-scope.test.tsx apps/desktop/src/components/code-editor/on-demand-code-editor.test.tsx packages/ui/src/components/code-editor/editor-enhancement.test.ts packages/ui/src/components/code-editor/static-highlight.test.ts packages/ui/src/components/thread-playground/variable packages/ui/src/lib/local-storage.test.ts
+```
+
+Expected: all focused tests pass with zero failures.
+
+- [ ] **Step 2: Run the complete repository verification**
+
+```bash
+mise run test
+mise run lint
+mise run typecheck
+mise run build:canary
+```
+
+Expected: every command exits 0; lint reports zero warnings and errors.
+
+- [ ] **Step 3: Run the final benchmark**
+
+```bash
+bun run scripts/thread-view-performance-benchmark.mjs --label final --output /tmp/llm-space-thread-view-final.json
+```
+
+Expected: JSON includes Full, On Demand, and Fast; one active long Thread and ten-open-Thread/LRU-3 scenarios; cached and evicted switch timings; overlay timings; DOM/editor counts; and the background-session continuation check.
+
+- [ ] **Step 4: Write the comparison analysis**
+
+Replace the Task 1 final-measurements sentence with:
+
+- exact baseline and final commits;
+- machine, renderer, dependency, fixture, and sample-count details;
+- median and maximum tables;
+- percentage change for DOM, CodeMirror, overlay latency, and scrolling;
+- cached switch versus evicted remount trade-off;
+- proof that an evicted Session completed and remounted with full output;
+- remaining active-long-thread bottlenecks and whether message virtualization is still warranted.
+
+Do not claim improvement for noisy or regressed metrics; report them as measured.
+
+- [ ] **Step 5: Re-run diff and repository checks after documentation**
+
+```bash
+git diff --check
+git status --short
+```
+
+Expected: no whitespace errors; only intended files are modified.
+
+- [ ] **Step 6: Commit the benchmark report**
+
+```bash
+git add docs/performance/thread-view-performance-2026-08.md
+git commit -m "docs(perf): compare thread view rendering performance"
+```
+
+## Plan Self-review Checklist
+
+- Every design requirement maps to a task: Session/View split (Tasks 4–6), LRU setting and policy (Tasks 2–3), draft safety (Task 5), On Demand and approved copy (Task 7), unified prompt highlight enhancements and CodeMirror-only interactions (Task 8), non-modal menus (Task 9), benchmark and analysis (Tasks 1 and 10).
+- Trace exclusion is explicit in Tasks 3 and 6.
+- Running-tab close protection is explicitly retained and retested in Task 6.
+- Baseline is measured before production changes and final results use the same harness.
+- No task depends on a worktree; all commands run in the current checkout and current branch.
diff --git a/docs/superpowers/specs/2026-08-11-thread-view-performance-design.md b/docs/superpowers/specs/2026-08-11-thread-view-performance-design.md
new file mode 100644
index 00000000..4cfb9fb6
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-11-thread-view-performance-design.md
@@ -0,0 +1,435 @@
+# Thread View Performance Design
+
+## Summary
+
+Long threads and multiple open thread tabs currently keep every
+`ThreadPlayground` React tree mounted. Each tree owns both the running thread
+state and its visible editors, so hiding an inactive pane preserves a run but
+also preserves thousands of DOM nodes, CodeMirror instances, observers, drag
+sensors, and focusable controls. Global overlay work then scales with all of
+that retained UI.
+
+This change separates a thread's durable in-process session from its disposable
+view, retains only the most recently used thread views, adds an on-demand
+syntax-highlighted message renderer, and makes two ordinary dropdown menus
+non-modal. It preserves background runs, pending persistence, undo history, and
+the existing rule that a running tab cannot be closed.
+
+## Goals
+
+- Keep a thread run alive and receiving events when its React view is evicted.
+- Remount an evicted view from the same in-memory store with complete current
+  messages, run status, and undo/redo history.
+- Bound mounted thread views with an LRU capacity that defaults to three and is
+  configurable under General settings.
+- Add an `On Demand` rendering mode that keeps static syntax highlighting while
+  mounting CodeMirror only for the active editor.
+- Keep prompt-variable and template-tag highlighting visually consistent
+  between the static preview and CodeMirror without teaching the generic
+  editor about prompt syntax.
+- Reduce global dropdown work for Tools Add and System Prompt Examples without
+  regressing pointer, keyboard, or focus behavior.
+- Measure the result against a repeatable baseline using isolated desktop data.
+
+## Non-goals
+
+- Trace tabs do not participate in the thread-view LRU and retain their current
+  lifecycle.
+- The LRU does not limit open tabs or background sessions.
+- LRU recency is not persisted across application restarts.
+- This change does not virtualize the active message list.
+- Dialogs such as Settings, Variables, New Thread, and confirmations remain
+  modal.
+- On Demand does not map a click in static highlighted DOM to the equivalent
+  CodeMirror character offset.
+- Static preview does not implement CodeMirror-only interactions such as
+  variable hover, variable inspection, or autocomplete. Those become available
+  after the editor is activated.
+- This change does not add an editor or renderer extension point to the Plugin
+  manifest.
+
+## Terminology
+
+- **Tab:** the persistent open-tab record and chrome entry.
+- **Session:** the headless in-process owner of a thread store, run, persistence,
+  and thread data. It exists from tab open until tab close or application exit.
+- **View:** the mounted `ThreadPlayground` React UI bound to a Session.
+- **Cached view:** an inactive View retained by the LRU for fast switching.
+- **Evicted view:** an open Tab whose Session exists but whose View is unmounted.
+
+## Current Constraints
+
+`ThreadTabPane` currently owns file loading, debounced persistence, transport,
+run lifecycle callbacks, and the `ThreadPlayground`. `ThreadPlayground` creates
+its Zustand store inside the view. Consequently, unmounting the pane also
+destroys the store and the React subscription that forwards streaming changes
+to persistence.
+
+Inactive panes are currently rendered and hidden with CSS. This preserves their
+stores but also preserves their full DOM. The implementation cannot simply
+filter `RuntimePaneHost` without first moving store ownership and event handling
+out of the disposable view.
+
+## Architecture
+
+### Thread Session Registry
+
+The desktop thread-tab layer will own a registry keyed by stable `paneId`. Each
+open thread tab has exactly one Session entry. A Session contains:
+
+- the `ThreadStore` created for that thread;
+- load state and the latest loaded thread;
+- runtime-aware transport and tool execution dependencies;
+- current path and runtime metadata;
+- serialized persistence and pending-write state;
+- refresh and file-mutation coordination;
+- lifecycle hooks for run start, run settlement, and host integrations;
+- a synchronous view-commit callback while a View is mounted.
+
+A lightweight headless session host remains mounted for every open thread tab.
+It performs the work currently tied to `ThreadTabPane`: loading, store creation,
+thread-store event subscription, persistence, refresh, rename/compaction wiring,
+and cleanup. It publishes the Session through a registry/context that a View can
+consume without recreating the store.
+
+Provider/model/runtime callbacks used by `createThreadStore` remain live through
+refs owned by the session host. Provider-profile state needed to resolve a run
+also stays on the Session side rather than disappearing with an evicted View.
+
+### Thread View Host
+
+The visible pane host is split into:
+
+- the existing Trace pane path, which is unchanged and always follows the
+  current behavior; and
+- a Thread View host that renders only pane IDs selected by the LRU.
+
+`ThreadTabView` receives a Session, provides its existing `ThreadStore` through
+`ThreadStoreContext`, and renders `ThreadPlaygroundContent`. Mounting a View does
+not reread the file and does not create a store. Unmounting a View does not
+abort the store or remove its subscriptions.
+
+Loading and fatal-load errors are Session state. An active loading Session shows
+the existing skeleton. A fatal load error retains the current toast-and-close
+behavior.
+
+### LRU Rules
+
+The cache capacity is an integer from 1 through 10 and defaults to 3.
+
+- Only `type: "thread"` tabs count toward the capacity.
+- The active Thread View is always included.
+- Activating a Thread marks it most recently used.
+- A newly opened active Thread is most recently used.
+- When capacity is exceeded, the least recently active inactive Thread View is
+  evicted.
+- Changing capacity applies immediately. Reducing it evicts excess inactive
+  Views after committing their drafts.
+- Closing a Tab removes its View and Session from the LRU/registry.
+- Renaming or moving a Thread preserves `paneId`, so the same Session and LRU
+  identity survive the path rewrite.
+- Trace tabs neither consume capacity nor alter Thread recency.
+- On restart, only the active Thread View is initially mounted. The cache fills
+  as the user activates other Thread tabs during that process lifetime.
+
+The LRU is implemented as pure selection/update functions with deterministic
+unit tests. React components receive the selected pane-ID set rather than
+embedding recency policy in render branches.
+
+### Safe View Eviction
+
+An editor can hold a draft that has not yet reached the Thread Store. Eviction
+must not rely on a browser blur event because React may remove the focused DOM
+before blur is delivered.
+
+Each mounted View registers a synchronous `commitView()` with its Session. The
+callback commits every active CodeEditor/textarea draft to the existing Store.
+The LRU host calls it before removing a pane ID from the mounted-view set. Normal
+Tab close and application cleanup retain the existing serialized persistence
+flush behavior after Store-level drafts have been committed.
+
+Eviction never invokes `abort()`. A running Session may have no mounted View;
+its async loop, event reduction, status changes, tool results, and persistence
+continue normally. Re-activation binds the View to that same Store snapshot.
+
+The existing close guard remains authoritative: a running Tab cannot be closed.
+The user can stop the run, then close the Tab. Application exit remains the only
+process-wide terminal lifecycle.
+
+## Settings
+
+### Cached Thread Views
+
+Add a persisted UI preference using the shared local-storage registry.
+
+- Label: `Cached thread views`
+- Location: General, immediately below `Rendering`
+- Control: numeric select with values 1 through 10
+- Default: 3
+- Hint: `Maximum recently used thread views kept mounted. Background sessions keep running after a view is released.`
+
+Invalid, missing, or out-of-range stored values resolve to 3. Changing the value
+updates the active LRU immediately.
+
+### Rendering
+
+Extend `RenderingFidelity` with a third persisted value for On Demand. Existing
+`rich` and `lite` values remain valid, and missing/unknown values continue to
+resolve to Full so existing users see no silent behavior change.
+
+The three labels and semantics are:
+
+- `Full`: every repeated message editor mounts CodeMirror.
+- `On Demand`: repeated editors render static Lezer syntax highlighting and
+  mount one CodeMirror only after activation.
+- `Fast`: repeated editors use the existing plain textarea renderer with no
+  syntax highlighting.
+
+The Rendering row hint will say:
+
+> Full keeps every message editor mounted. On Demand shows lightweight syntax
+> highlighting and activates an editor after focus; editing at a specific
+> position may require a second click. Fast uses plain text for the lowest
+> overhead.
+
+The anti-FOUC `.lite` class continues to apply only to Fast. On Demand retains
+normal motion and is not treated as Lite in CSS.
+
+## On Demand Static Highlighting
+
+### Scope
+
+On Demand applies to repeated editor surfaces in messages and tool-call
+input/output. Fixed-count editing surfaces such as System Prompt remain regular
+CodeMirror instances.
+
+### Rendering
+
+A reusable on-demand editor component has two states:
+
+1. **Preview:** parse the value with the applicable Lezer parser, traverse it
+   with `highlightTree`, and render escaped text plus themed highlight spans in
+   a `<pre>`-style surface. Text remains selectable and copyable.
+2. **Editing:** mount the existing CodeEditor with the same value, extensions,
+   readonly state, callbacks, and keyboard behavior.
+
+The preview is memoized by value, language, and theme. Message text uses the
+current Markdown parser; structured tool content uses its applicable parser.
+No raw HTML from message content is inserted.
+
+### Activation and Focus
+
+An editable preview is keyboard focusable and exposes textbox semantics.
+
+- Pointer click, Enter, or Space activates editing.
+- The mounted CodeMirror receives focus.
+- The activation click is not translated into an exact document offset. The
+  first click activates/focuses; placing the caret at a specific location may
+  require a second click.
+- Blur commits the draft and returns to Preview.
+- Activating a second repeated editor commits and deactivates the first.
+- Deactivating or evicting a Thread View commits and returns all on-demand
+  editors to Preview.
+- Readonly/running previews do not activate editing.
+
+CodeMirror-only affordances such as cursor placement, autocomplete, and prompt
+variable editing extensions become available after activation. Static preview
+must preserve text selection, copying, wrapping, height caps, placeholder
+display, and visual syntax colors.
+
+### Editor Enhancement Boundary
+
+`CodeEditor` remains the single public facade used by repeated editor surfaces.
+Callers pass semantic `EditorEnhancement` values rather than pairing raw
+CodeMirror extensions with renderer-specific booleans. The facade selects the
+applicable backend:
+
+- Full compiles visual enhancements to CodeMirror extensions and installs
+  CodeMirror-only enhancements;
+- On Demand preview compiles only visual enhancements to static decorations;
+- On Demand editing installs the same CodeMirror extensions as Full;
+- Fast ignores visual and CodeMirror-only enhancements and retains the plain
+  textarea behavior.
+
+The enhancement model is a discriminated union:
+
+```ts
+type EditorEnhancement =
+  | RegexHighlightEnhancement
+  | RangeHighlightEnhancement
+  | CodeMirrorOnlyEnhancement;
+```
+
+A regex highlight declares one pattern, style, and priority. The editor layer
+adapts that single declaration in two ways: CodeMirror uses a viewport-bounded
+`MatchDecorator`, while Static View scans the settled value and returns generic
+decoration ranges. A range highlight follows the same backend split for
+features whose locations are already known. A CodeMirror-only enhancement owns
+editing or view behavior that has no static equivalent.
+
+This keeps the generic editor independent of prompt semantics. Prompt-specific
+patterns and styles live with the prompt-variable feature; the editor package
+owns only enhancement types, backend adapters, range composition, and rendering.
+Raw `Extension[]` may remain as an explicitly CodeMirror-only escape hatch for
+internal editing behavior, but Static View never attempts to introspect it.
+
+### Prompt Syntax Enhancements
+
+The existing prompt-variable CodeMirror bundle is separated by capability:
+
+1. `prompt-variable-highlight` is a visual regex enhancement for simple
+   `{{variable}}` placeholders;
+2. `prompt-template-tag-highlight` is a visual regex enhancement for
+   `{% ... %}` template tags;
+3. `prompt-syntax-editing` is CodeMirror-only and contains variable hover and
+   inspection, variable selection, `@include` completion, template-tag
+   completion, tooltip placement, and the associated interactive theme.
+
+The first two declarations are the only source of their matching pattern,
+style, and overlap priority. Both rendering backends are generated from those
+declarations, so Full and On Demand preview cannot silently diverge. The third
+enhancement is mounted only with CodeMirror. Static preview intentionally does
+not resolve variable values, load skills, subscribe to a Thread Store, create
+tooltips, or offer completion.
+
+The prompt-variable hook returns a stable `EditorEnhancement[]` for the relevant
+Thread context and prompt place. Existing per-Store and per-place caching is
+retained for resolver-dependent CodeMirror behavior so React renders do not
+reconfigure an active editor or discard its focus and undo state.
+
+CodeMirror must retain its current viewport-bounded matching behavior. Shared
+semantics do not mean sharing the Static View's whole-document scan. Static
+decoration results are memoized by settled value, language, theme, and stable
+enhancement identity.
+
+The model deliberately remains an internal UI contract. A future Plugin
+renderer capability may reuse its declarative pattern/style/priority shape, but
+plugins must not receive raw CodeMirror `Extension[]`, React callbacks, DOM
+handlers, or executable static-decoration providers. Such a Plugin extension
+would require a separate manifest, validation, permission, and compatibility
+design.
+
+## Non-modal Dropdowns
+
+Set `modal={false}` only on:
+
+- Tools `Add`;
+- System Prompt `Examples`.
+
+Radix retains menu roles, roving keyboard focus, item selection, Escape, and
+outside dismissal. The non-modal setting avoids the modal path's global
+`aria-hidden`, focus trap, pointer lock, and scroll lock. Popper positioning and
+the portal remain.
+
+Regression coverage must verify:
+
+- pointer and Enter/Space opening;
+- ArrowUp/ArrowDown navigation and item selection;
+- Escape closes and restores focus to the trigger;
+- outside interaction closes without double-activating a background control;
+- a menu item that opens a Dialog transfers focus to that Dialog instead of
+  restoring it to the menu trigger.
+
+If focus restoration conflicts with a newly opened Dialog, prevent only that
+menu close's automatic focus restoration and let the Dialog own focus. Do not
+turn actual Dialogs non-modal.
+
+## Failure Handling and Cleanup
+
+- Invalid cached-view settings fall back to 3.
+- A missing Session for an active Thread is treated as a lifecycle bug and
+  renders a bounded error state rather than constructing a second store.
+- Store/run errors continue through the current UI and persistence paths even
+  when no View is mounted.
+- A Session removed by Tab close commits its mounted View, discards its registry
+  entry, and runs existing persistence cleanup.
+- Refresh recreates the Session store intentionally while preserving stable Tab
+  identity and provider-profile selections as current behavior requires.
+- LRU policy never performs file I/O and never controls abort/disconnect.
+
+## Testing Strategy
+
+### Unit and Component Tests
+
+- Pure LRU behavior: activation order, capacity, shrink, active retention,
+  removal, rename identity, and Trace exclusion.
+- Setting parsing/persistence: default 3, accepted 1-10, invalid fallback, and
+  immediate update.
+- Session/View lifecycle: eviction unmounts View but retains the exact Store;
+  remount observes messages and history added while absent.
+- Background run: a transport continues emitting into an evicted Session and
+  completes without a View.
+- Draft safety: Full, On Demand, and Fast drafts commit before eviction.
+- Rendering compatibility: Full, On Demand, and Fast select the intended
+  renderer and old stored values remain valid.
+- On Demand: highlighted preview, safe escaping, pointer/keyboard activation,
+  one active repeated editor, blur commit, readonly behavior, and tab
+  deactivation.
+- Enhancement parity: prompt variables and template tags use the same declared
+  ranges, styles, and priorities in Full and Static preview; overlapping syntax
+  ranges resolve deterministically.
+- Prompt editing behavior: variable hover, inspection, variable and `@include`
+  completion, and template-tag completion remain available after On Demand
+  activation and remain absent from Static preview.
+- Dropdown accessibility: pointer, keyboard, Escape/focus restoration, outside
+  dismissal, and menu-to-Dialog focus transfer.
+- Existing running-tab close tests remain unchanged and passing.
+
+### Repository Verification
+
+Run the focused tests during each red/green cycle, then run:
+
+- `mise run test`
+- `mise run lint`
+- `mise run typecheck`
+- `mise run build:canary`
+
+## Performance Benchmark
+
+Before implementation, run the benchmark at the current base commit. After
+implementation, run the same benchmark on the feature branch.
+
+The benchmark uses `mise run dev:cef` with an isolated temporary
+`LLM_SPACE_HOME` and generated non-sensitive fixtures. The standard long Thread
+contains 54 messages; the multi-tab scenario opens 10 equivalent Threads and
+sets cached views to 3.
+
+For Full, On Demand, and Fast where available, collect multiple samples and
+report the median plus slower-tail sample for:
+
+- mounted DOM node count;
+- CodeMirror and textarea instance count;
+- cached-view tab-switch time;
+- evicted-view remount time;
+- click-to-mounted time for Settings, Tools Add, Examples, and Variables;
+- scrolling frame duration for the long active Thread.
+
+Separately verify that a Session whose View is evicted can receive a complete
+stream, persist its resulting Thread, and show the full result when remounted.
+
+The comparison report will distinguish:
+
+- benefit from bounding mounted Views;
+- benefit from On Demand versus Full and Fast;
+- benefit from non-modal ordinary menus;
+- remount cost introduced by LRU eviction;
+- any remaining active-long-thread cost that requires later virtualization.
+
+The benchmark must not read real workspace files or settings. Temporary runtime
+data and processes are removed after the run.
+
+## Acceptance Criteria
+
+- At most the configured number of ordinary Thread Views are mounted.
+- Open Thread Sessions are not bounded by the View cache.
+- An evicted running Thread completes and remounts with complete messages and
+  the same undo/redo history.
+- No typed draft is lost when a View is evicted.
+- Running Tabs remain non-closable.
+- On Demand displays static syntax highlighting and clearly communicates its
+  focus-before-edit tradeoff in Settings.
+- Tools Add and Examples retain pointer and keyboard behavior with
+  `modal={false}`.
+- Invalid cache settings safely use 3.
+- Focused tests and full repository verification pass.
+- A reproducible before/after benchmark and analysis are delivered.
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 470782a8..603fc960 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,6 +29,7 @@
     "@dnd-kit/utilities": "catalog:",
     "@earendil-works/pi-ai": "catalog:",
     "@formkit/auto-animate": "^0.9.0",
+    "@lezer/highlight": "1.2.3",
     "@llm-space/core": "workspace:*",
     "@lobehub/icons": "^5.10.1",
     "@radix-ui/react-slot": "^1.3.3",
diff --git a/packages/ui/src/components/code-editor/editor-commit-scope.tsx b/packages/ui/src/components/code-editor/editor-commit-scope.tsx
new file mode 100644
index 00000000..7b19c32e
--- /dev/null
+++ b/packages/ui/src/components/code-editor/editor-commit-scope.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+
+export interface EditorCommitScopeHandle {
+  /** Commit every mounted editor draft owned by this View. */
+  commitAll(): void;
+}
+
+interface EditorCommitRegistry {
+  register(commit: () => void): () => void;
+}
+
+const EditorCommitContext = createContext<EditorCommitRegistry | null>(null);
+
+export function EditorCommitScope({
+  children,
+  onReady,
+}: {
+  children: ReactNode;
+  onReady?: (handle: EditorCommitScopeHandle | null) => void;
+}) {
+  const commitsRef = useRef(new Set<() => void>());
+  const register = useCallback((commit: () => void) => {
+    commitsRef.current.add(commit);
+    return () => commitsRef.current.delete(commit);
+  }, []);
+  const registry = useMemo<EditorCommitRegistry>(() => ({ register }), [register]);
+  const handle = useMemo<EditorCommitScopeHandle>(
+    () => ({
+      commitAll() {
+        for (const commit of [...commitsRef.current]) {
+          commit();
+        }
+      },
+    }),
+    []
+  );
+
+  useLayoutEffect(() => {
+    onReady?.(handle);
+    return () => onReady?.(null);
+  }, [handle, onReady]);
+
+  return (
+    <EditorCommitContext.Provider value={registry}>
+      {children}
+    </EditorCommitContext.Provider>
+  );
+}
+
+/** Register an editor's stable imperative commit with the nearest View scope. */
+export function useRegisterEditorCommit(commit: () => void): void {
+  const registry = useContext(EditorCommitContext);
+  useLayoutEffect(() => registry?.register(commit), [commit, registry]);
+}
diff --git a/packages/ui/src/components/code-editor/editor-enhancement-codemirror.ts b/packages/ui/src/components/code-editor/editor-enhancement-codemirror.ts
new file mode 100644
index 00000000..5d0d2d7b
--- /dev/null
+++ b/packages/ui/src/components/code-editor/editor-enhancement-codemirror.ts
@@ -0,0 +1,119 @@
+import type { Extension } from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type DecorationSet,
+  type ViewUpdate,
+} from "@codemirror/view";
+
+import {
+  assertUniqueEditorEnhancementIds,
+  type EditorEnhancement,
+  type RangeHighlightEnhancement,
+  type RegexHighlightEnhancement,
+  type VisualEditorEnhancement,
+} from "./editor-enhancement";
+
+const COMPILED_VISUAL_EXTENSIONS = new WeakMap<
+  VisualEditorEnhancement,
+  Extension[]
+>();
+
+function _theme(enhancement: VisualEditorEnhancement): Extension {
+  return EditorView.theme({
+    [`.${enhancement.className}`]: { ...enhancement.style },
+  });
+}
+
+function _compileRegex(
+  enhancement: RegexHighlightEnhancement
+): Extension[] {
+  const decorator = new MatchDecorator({
+    regexp: new RegExp(enhancement.pattern, "g"),
+    decoration: Decoration.mark({ class: enhancement.className }),
+  });
+  const highlighter = ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+      constructor(view: EditorView) {
+        this.decorations = decorator.createDeco(view);
+      }
+      update(update: ViewUpdate) {
+        this.decorations = decorator.updateDeco(update, this.decorations);
+      }
+    },
+    { decorations: (plugin) => plugin.decorations }
+  );
+  return [highlighter, _theme(enhancement)];
+}
+
+function _rangeDecorations(
+  view: EditorView,
+  enhancement: RangeHighlightEnhancement
+): DecorationSet {
+  const source = view.state.doc.toString();
+  return Decoration.set(
+    enhancement
+      .getRanges(source)
+      .map(({ from, to }) => ({
+        from: Math.max(0, Math.min(source.length, from)),
+        to: Math.max(0, Math.min(source.length, to)),
+      }))
+      .filter(({ from, to }) => to > from)
+      .sort((left, right) => left.from - right.from || left.to - right.to)
+      .map(({ from, to }) =>
+        Decoration.mark({ class: enhancement.className }).range(from, to)
+      ),
+    true
+  );
+}
+
+function _compileRange(
+  enhancement: RangeHighlightEnhancement
+): Extension[] {
+  const highlighter = ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+      constructor(view: EditorView) {
+        this.decorations = _rangeDecorations(view, enhancement);
+      }
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          this.decorations = _rangeDecorations(update.view, enhancement);
+        }
+      }
+    },
+    { decorations: (plugin) => plugin.decorations }
+  );
+  return [highlighter, _theme(enhancement)];
+}
+
+function _compileVisual(enhancement: VisualEditorEnhancement): Extension[] {
+  const cached = COMPILED_VISUAL_EXTENSIONS.get(enhancement);
+  if (cached) return cached;
+  const compiled =
+    enhancement.kind === "regex-highlight"
+      ? _compileRegex(enhancement)
+      : _compileRange(enhancement);
+  COMPILED_VISUAL_EXTENSIONS.set(enhancement, compiled);
+  return compiled;
+}
+
+export function compileCodeMirrorEnhancements(
+  enhancements: readonly EditorEnhancement[]
+): Extension[] {
+  assertUniqueEditorEnhancementIds(enhancements);
+  const visual = enhancements
+    .filter(
+      (enhancement): enhancement is VisualEditorEnhancement =>
+        enhancement.kind !== "code-mirror-only"
+    )
+    .sort((left, right) => left.priority - right.priority)
+    .flatMap(_compileVisual);
+  const codeMirrorOnly = enhancements
+    .filter((enhancement) => enhancement.kind === "code-mirror-only")
+    .flatMap((enhancement) => enhancement.extensions);
+  return [...visual, ...codeMirrorOnly];
+}
diff --git a/packages/ui/src/components/code-editor/editor-enhancement.ts b/packages/ui/src/components/code-editor/editor-enhancement.ts
new file mode 100644
index 00000000..cb8055c3
--- /dev/null
+++ b/packages/ui/src/components/code-editor/editor-enhancement.ts
@@ -0,0 +1,156 @@
+import type { Extension } from "@codemirror/state";
+import type { CSSProperties } from "react";
+
+export interface RegexHighlightEnhancement {
+  kind: "regex-highlight";
+  id: string;
+  pattern: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+}
+
+export interface RangeHighlightEnhancement {
+  kind: "range-highlight";
+  id: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+  getRanges(source: string): readonly { from: number; to: number }[];
+}
+
+export interface CodeMirrorOnlyEnhancement {
+  kind: "code-mirror-only";
+  id: string;
+  extensions: readonly Extension[];
+}
+
+export type VisualEditorEnhancement =
+  | RegexHighlightEnhancement
+  | RangeHighlightEnhancement;
+
+export type EditorEnhancement =
+  | VisualEditorEnhancement
+  | CodeMirrorOnlyEnhancement;
+
+export interface StaticDecorationRange {
+  from: number;
+  to: number;
+  style: Readonly<CSSProperties>;
+  priority: number;
+}
+
+export interface RegexHighlightEnhancementOptions {
+  id: string;
+  pattern: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+}
+
+export interface RangeHighlightEnhancementOptions {
+  id: string;
+  className: string;
+  style: Readonly<CSSProperties>;
+  priority: number;
+  getRanges(source: string): readonly { from: number; to: number }[];
+}
+
+function _assertCommonOptions(id: string, className: string) {
+  if (!id.trim()) throw new Error("Editor enhancement id must not be empty");
+  if (!className.trim()) {
+    throw new Error("Editor enhancement className must not be empty");
+  }
+}
+
+export function createRegexHighlightEnhancement(
+  options: RegexHighlightEnhancementOptions
+): RegexHighlightEnhancement {
+  _assertCommonOptions(options.id, options.className);
+  let regexp: RegExp;
+  try {
+    regexp = new RegExp(options.pattern);
+  } catch (error) {
+    throw new Error(`Invalid editor enhancement pattern: ${String(error)}`, {
+      cause: error,
+    });
+  }
+  if (regexp.test("")) {
+    throw new Error("Editor enhancement pattern must not match empty text");
+  }
+  return Object.freeze({ kind: "regex-highlight" as const, ...options });
+}
+
+export function createRangeHighlightEnhancement(
+  options: RangeHighlightEnhancementOptions
+): RangeHighlightEnhancement {
+  _assertCommonOptions(options.id, options.className);
+  return Object.freeze({ kind: "range-highlight" as const, ...options });
+}
+
+export function assertUniqueEditorEnhancementIds(
+  enhancements: readonly EditorEnhancement[]
+) {
+  const ids = new Set<string>();
+  for (const enhancement of enhancements) {
+    if (ids.has(enhancement.id)) {
+      throw new Error(`Duplicate editor enhancement id "${enhancement.id}"`);
+    }
+    ids.add(enhancement.id);
+  }
+}
+
+function _toStaticRange(
+  sourceLength: number,
+  from: number,
+  to: number,
+  enhancement: VisualEditorEnhancement
+): StaticDecorationRange | null {
+  const clampedFrom = Math.max(0, Math.min(sourceLength, from));
+  const clampedTo = Math.max(0, Math.min(sourceLength, to));
+  if (clampedTo <= clampedFrom) return null;
+  return {
+    from: clampedFrom,
+    to: clampedTo,
+    style: enhancement.style,
+    priority: enhancement.priority,
+  };
+}
+
+export function collectStaticDecorations(
+  source: string,
+  enhancements: readonly EditorEnhancement[]
+): StaticDecorationRange[] {
+  assertUniqueEditorEnhancementIds(enhancements);
+  const ranges: StaticDecorationRange[] = [];
+  for (const enhancement of enhancements) {
+    if (enhancement.kind === "code-mirror-only") continue;
+    if (enhancement.kind === "regex-highlight") {
+      for (const match of source.matchAll(new RegExp(enhancement.pattern, "g"))) {
+        const range = _toStaticRange(
+          source.length,
+          match.index,
+          match.index + match[0].length,
+          enhancement
+        );
+        if (range) ranges.push(range);
+      }
+      continue;
+    }
+    for (const candidate of enhancement.getRanges(source)) {
+      const range = _toStaticRange(
+        source.length,
+        candidate.from,
+        candidate.to,
+        enhancement
+      );
+      if (range) ranges.push(range);
+    }
+  }
+  return ranges.sort(
+    (left, right) =>
+      left.from - right.from ||
+      left.priority - right.priority ||
+      left.to - right.to
+  );
+}
diff --git a/packages/ui/src/components/code-editor/editor.tsx b/packages/ui/src/components/code-editor/editor.tsx
index 117bfc23..16fe1d58 100644
--- a/packages/ui/src/components/code-editor/editor.tsx
+++ b/packages/ui/src/components/code-editor/editor.tsx
@@ -10,6 +10,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -21,6 +22,9 @@ import {
 import { cn } from "../../lib/utils";
 import { useTheme } from "../theme-provider";
 
+import { useRegisterEditorCommit } from "./editor-commit-scope";
+import type { EditorEnhancement } from "./editor-enhancement";
+import { compileCodeMirrorEnhancements } from "./editor-enhancement-codemirror";
 import { createExtensions } from "./extensions";
 import * as themes from "./themes";
 
@@ -56,6 +60,8 @@ export interface CodeEditorProps {
    * no longer scales with message count.
    */
   plain?: boolean;
+  /** Explicit rendering strategy for repeated editors. */
+  renderMode?: "full" | "on-demand" | "plain";
   language?: "markdown" | "json";
   /**
    * The value is a live streaming preview: syntax highlighting is skipped
@@ -73,7 +79,16 @@ export interface CodeEditorProps {
    * (Lite) fallback. Pass a stable reference to avoid reconfiguring the editor.
    */
   extraExtensions?: Extension[];
+  /**
+   * Semantic editor features shared by Full and On Demand renderers. Visual
+   * enhancements compile to both backends; CodeMirror-only enhancements are
+   * installed only while the full editor is mounted. Keep this array stable.
+   */
+  enhancements?: readonly EditorEnhancement[];
   onChange?: (value: string) => void;
+  /** Called once the requested autofocus has reached the real editing surface. */
+  onAutoFocusComplete?: () => void;
+  onBlur?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
   onPaste?: (e: ClipboardEvent) => void;
 }
@@ -90,8 +105,11 @@ function _CodeEditor(
     value,
     streaming,
     readonly,
+    enhancements,
     extraExtensions,
     onChange,
+    onAutoFocusComplete,
+    onBlur,
     onKeyDown,
     onPaste,
   }: CodeEditorProps,
@@ -99,9 +117,21 @@ function _CodeEditor(
 ) {
   const { resolvedTheme } = useTheme();
   const cmRef = useRef<ReactCodeMirrorRef>(null);
+  const autoFocusCompletedRef = useRef(false);
   const draftRef = useRef(value);
   const committedRef = useRef(value);
   const isFocusedRef = useRef(false);
+  useLayoutEffect(() => {
+    if (!autoFocus) {
+      autoFocusCompletedRef.current = false;
+      return;
+    }
+    const view = cmRef.current?.view;
+    if (!view || autoFocusCompletedRef.current) return;
+    view.focus();
+    autoFocusCompletedRef.current = true;
+    onAutoFocusComplete?.();
+  }, [autoFocus, onAutoFocusComplete]);
   // CodeMirror owns the document while the user types; `syncedValue` only
   // changes when we push an *external* update in (the effect below), so a
   // keystroke never re-renders React or trips react-codemirror's value diff.
@@ -183,6 +213,7 @@ function _CodeEditor(
       committedRef.current = draftRef.current;
     }
   }, [onChange]);
+  useRegisterEditorCommit(commit);
 
   const insertText = useCallback(
     (text: string) => {
@@ -231,7 +262,8 @@ function _CodeEditor(
   const handleBlur = useCallback(() => {
     isFocusedRef.current = false;
     commit();
-  }, [commit]);
+    onBlur?.();
+  }, [commit, onBlur]);
 
   const handleFocus = useCallback(() => {
     isFocusedRef.current = true;
@@ -270,9 +302,10 @@ function _CodeEditor(
   const extensions = useMemo(
     () => [
       ...createExtensions(streaming ? "none" : detectedLanguage),
+      ...compileCodeMirrorEnhancements(enhancements ?? []),
       ...(extraExtensions ?? []),
     ],
-    [detectedLanguage, extraExtensions, streaming]
+    [detectedLanguage, enhancements, extraExtensions, streaming]
   );
   return (
     <div
diff --git a/packages/ui/src/components/code-editor/index.tsx b/packages/ui/src/components/code-editor/index.tsx
index 9a968317..db055090 100644
--- a/packages/ui/src/components/code-editor/index.tsx
+++ b/packages/ui/src/components/code-editor/index.tsx
@@ -7,6 +7,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
   type ChangeEvent,
@@ -18,8 +19,23 @@ import { Textarea } from "../../ui/textarea";
 import { Tooltip } from "../tooltip";
 
 import type { CodeEditorHandle, CodeEditorProps } from "./editor";
+import { useRegisterEditorCommit } from "./editor-commit-scope";
+import { OnDemandCodeEditor } from "./on-demand-code-editor";
 
+export type CodeEditorRenderMode = "full" | "on-demand" | "plain";
 export type { CodeEditorHandle, CodeEditorProps } from "./editor";
+export {
+  collectStaticDecorations,
+  createRangeHighlightEnhancement,
+  createRegexHighlightEnhancement,
+} from "./editor-enhancement";
+export type {
+  CodeMirrorOnlyEnhancement,
+  EditorEnhancement,
+  RangeHighlightEnhancement,
+  RegexHighlightEnhancement,
+  StaticDecorationRange,
+} from "./editor-enhancement";
 
 // CodeMirror is the single heaviest first-paint dependency (~200 kB gzipped) and
 // only mounts inside editors, so load it on demand. The surrounding UI and the
@@ -113,6 +129,8 @@ const PlainTextCodeEditor = forwardRef<
     scrollOnFocus,
     value,
     onChange,
+    onAutoFocusComplete,
+    onBlur,
     onKeyDown,
     onPaste,
     onRetry,
@@ -122,11 +140,24 @@ const PlainTextCodeEditor = forwardRef<
   const draftRef = useRef(value);
   const committedRef = useRef(value);
   const focusedRef = useRef(false);
+  const autoFocusCompletedRef = useRef(false);
   // Uncontrolled: the DOM textarea owns its value while the user types, so a
   // keystroke writes only to `draftRef` and never re-renders React. External
   // updates and imperative insertions are pushed in by `setDraftValue`.
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  useLayoutEffect(() => {
+    if (!autoFocus) {
+      autoFocusCompletedRef.current = false;
+      return;
+    }
+    const textarea = textareaRef.current;
+    if (!textarea || autoFocusCompletedRef.current) return;
+    textarea.focus();
+    autoFocusCompletedRef.current = true;
+    onAutoFocusComplete?.();
+  }, [autoFocus, onAutoFocusComplete]);
+
   const setDraftValue = useCallback((next: string) => {
     draftRef.current = next;
     if (textareaRef.current && textareaRef.current.value !== next) {
@@ -147,6 +178,7 @@ const PlainTextCodeEditor = forwardRef<
       committedRef.current = draftRef.current;
     }
   }, [onChange]);
+  useRegisterEditorCommit(commit);
 
   const insertText = useCallback(
     (text: string) => {
@@ -210,6 +242,7 @@ const PlainTextCodeEditor = forwardRef<
         onBlur={() => {
           focusedRef.current = false;
           commit();
+          onBlur?.();
         }}
         onChange={handleChange}
         onFocus={() => {
@@ -239,14 +272,9 @@ const PlainTextCodeEditor = forwardRef<
   );
 });
 
-export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
-  function CodeEditor(props, ref) {
+const FullCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
+  function FullCodeEditor(props, ref) {
     const [retryKey, setRetryKey] = useState(0);
-    // "Lite" rendering fidelity: skip CodeMirror and use the lightweight
-    // plain-text editor (a <textarea>) — still editable, just no highlighting.
-    if (props.plain) {
-      return <PlainTextCodeEditor {...props} ref={ref} />;
-    }
     return (
       <CodeEditorErrorBoundary
         resetKey={retryKey}
@@ -265,3 +293,23 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     );
   }
 );
+
+export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
+  function CodeEditor({ plain, renderMode, ...props }, ref) {
+    const mode: CodeEditorRenderMode =
+      renderMode ?? (plain ? "plain" : "full");
+    if (mode === "plain") {
+      return <PlainTextCodeEditor {...props} ref={ref} />;
+    }
+    if (mode === "on-demand") {
+      return (
+        <OnDemandCodeEditor
+          {...props}
+          ref={ref}
+          FullEditor={FullCodeEditor}
+        />
+      );
+    }
+    return <FullCodeEditor {...props} ref={ref} />;
+  }
+);
diff --git a/packages/ui/src/components/code-editor/on-demand-code-editor.tsx b/packages/ui/src/components/code-editor/on-demand-code-editor.tsx
new file mode 100644
index 00000000..c0c32d63
--- /dev/null
+++ b/packages/ui/src/components/code-editor/on-demand-code-editor.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardRefExoticComponent,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefAttributes,
+} from "react";
+
+import { cn } from "../../lib/utils";
+import { useTheme } from "../theme-provider";
+
+import type { CodeEditorHandle, CodeEditorProps } from "./editor";
+import { useRegisterEditorCommit } from "./editor-commit-scope";
+import {
+  createHighlightSegments,
+  getGithubThemeForeground,
+} from "./static-highlight";
+
+interface ActiveEditor {
+  id: string;
+  commitAndDeactivate(): void;
+}
+
+interface OnDemandEditorCoordinator {
+  activate(editor: ActiveEditor): void;
+  release(id: string): void;
+}
+
+const OnDemandEditorContext = createContext<OnDemandEditorCoordinator | null>(
+  null
+);
+
+/** Coordinates the single active repeated editor within one Thread View. */
+export function OnDemandEditorScope({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  const activeEditorRef = useRef<ActiveEditor | null>(null);
+  const coordinator = useMemo<OnDemandEditorCoordinator>(
+    () => ({
+      activate(next) {
+        const current = activeEditorRef.current;
+        if (current && current.id !== next.id) {
+          current.commitAndDeactivate();
+        }
+        activeEditorRef.current = next;
+      },
+      release(id) {
+        if (activeEditorRef.current?.id === id) {
+          activeEditorRef.current = null;
+        }
+      },
+    }),
+    []
+  );
+
+  useEffect(() => {
+    if (!active) {
+      activeEditorRef.current?.commitAndDeactivate();
+    }
+  }, [active]);
+
+  return (
+    <OnDemandEditorContext.Provider value={coordinator}>
+      {children}
+    </OnDemandEditorContext.Provider>
+  );
+}
+
+export type OnDemandFullEditor = ForwardRefExoticComponent<
+  CodeEditorProps & RefAttributes<CodeEditorHandle>
+>;
+
+export interface OnDemandCodeEditorProps
+  extends Omit<CodeEditorProps, "plain" | "renderMode"> {
+  /** Injected lazy Full editor; keeps this preview module CodeMirror-free. */
+  FullEditor: OnDemandFullEditor;
+}
+
+export const OnDemandCodeEditor = forwardRef<
+  CodeEditorHandle,
+  OnDemandCodeEditorProps
+>(function OnDemandCodeEditor(
+  {
+    FullEditor,
+    autoFocus,
+    className,
+    enhancements,
+    hideBorder,
+    hideFocusRing,
+    language,
+    readonly = false,
+    scrollOnFocus,
+    streaming,
+    value,
+    placeholder,
+    onBlur,
+    onChange,
+    onKeyDown,
+    ...editorProps
+  },
+  forwardedRef
+) {
+  const id = useId();
+  const { resolvedTheme } = useTheme();
+  const coordinator = useContext(OnDemandEditorContext);
+  const editorRef = useRef<CodeEditorHandle>(null);
+  const previewRef = useRef<HTMLPreElement>(null);
+  const previewValueRef = useRef(value);
+  const [previewValue, setPreviewValue] = useState(value);
+  const [editing, setEditing] = useState(false);
+  const editingRef = useRef(editing);
+  editingRef.current = editing;
+
+  useEffect(() => {
+    if (!editingRef.current) {
+      previewValueRef.current = value;
+      setPreviewValue(value);
+    }
+  }, [value]);
+
+  const commitAndDeactivate = useCallback(() => {
+    editorRef.current?.commit();
+    const latest = editorRef.current?.getValue() ?? previewValueRef.current;
+    previewValueRef.current = latest;
+    setPreviewValue(latest);
+    setEditing(false);
+    coordinator?.release(id);
+  }, [coordinator, id]);
+  const deactivateAfterEditorBlur = useCallback(() => {
+    const latest = editorRef.current?.getValue() ?? previewValueRef.current;
+    previewValueRef.current = latest;
+    setPreviewValue(latest);
+    setEditing(false);
+    coordinator?.release(id);
+    onBlur?.();
+  }, [coordinator, id, onBlur]);
+  useRegisterEditorCommit(commitAndDeactivate);
+
+  useEffect(
+    () => () => {
+      coordinator?.release(id);
+    },
+    [coordinator, id]
+  );
+
+  const activate = useCallback(() => {
+    if (readonly || editing) return;
+    coordinator?.activate({ id, commitAndDeactivate });
+    setEditing(true);
+  }, [commitAndDeactivate, coordinator, editing, id, readonly]);
+
+  useLayoutEffect(() => {
+    if (autoFocus && !readonly) {
+      activate();
+    }
+  }, [activate, autoFocus, readonly]);
+
+  const handleChange = useCallback(
+    (next: string) => {
+      previewValueRef.current = next;
+      setPreviewValue(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      commit: commitAndDeactivate,
+      getValue: () =>
+        editorRef.current?.getValue() ?? previewValueRef.current,
+      insertText(text: string) {
+        if (editorRef.current) {
+          editorRef.current.insertText(text);
+          return;
+        }
+        const next = `${previewValueRef.current}${text}`;
+        previewValueRef.current = next;
+        setPreviewValue(next);
+        onChange?.(next);
+      },
+    }),
+    [commitAndDeactivate, onChange]
+  );
+
+  const detectedLanguage =
+    language ??
+    (previewValue.startsWith("{") || previewValue.startsWith("[")
+      ? "json"
+      : "markdown");
+  const segments = useMemo(
+    () =>
+      streaming
+        ? [{ text: previewValue }]
+        : createHighlightSegments(
+            previewValue,
+            detectedLanguage,
+            resolvedTheme,
+            enhancements
+          ),
+    [
+      detectedLanguage,
+      enhancements,
+      previewValue,
+      resolvedTheme,
+      streaming,
+    ]
+  );
+
+  if (editing) {
+    return (
+      <FullEditor
+        {...editorProps}
+        ref={editorRef}
+        className={className}
+        autoFocus
+        hideBorder={hideBorder}
+        hideFocusRing={hideFocusRing}
+        enhancements={enhancements}
+        language={language}
+        placeholder={placeholder}
+        readonly={readonly}
+        scrollOnFocus={scrollOnFocus}
+        streaming={streaming}
+        value={previewValue}
+        onBlur={deactivateAfterEditorBlur}
+        onChange={handleChange}
+        onKeyDown={onKeyDown}
+      />
+    );
+  }
+
+  const handlePreviewKeyDown = (event: KeyboardEvent<HTMLPreElement>) => {
+    if (!readonly && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      activate();
+      return;
+    }
+    onKeyDown?.(event);
+  };
+  return (
+    <pre
+      ref={previewRef}
+      role="textbox"
+      aria-multiline="true"
+      aria-readonly={readonly}
+      tabIndex={0}
+      data-code-editor-mode="on-demand"
+      data-on-demand-preview
+      style={{ color: getGithubThemeForeground(resolvedTheme) }}
+      className={cn(
+        "on-demand-highlight cursor-text select-text overflow-auto rounded-lg border bg-(--textarea) px-3 py-2 font-mono text-sm leading-[1.4] break-words whitespace-pre-wrap transition-opacity outline-none",
+        !hideFocusRing && "focus-visible:border-ring!",
+        hideBorder && "border-transparent",
+        readonly && "cursor-text opacity-67",
+        scrollOnFocus && "overflow-hidden focus:overflow-auto",
+        className
+      )}
+      onKeyDown={handlePreviewKeyDown}
+      onPointerDown={(event) => {
+        if (readonly) return;
+        event.preventDefault();
+        activate();
+      }}
+    >
+      {previewValue ? (
+        segments.map((segment, index) => (
+          <span
+            // Segments are deterministic for one source; offset-free keys are
+            // sufficient because the preview is replaced wholesale on edits.
+            key={index}
+            style={segment.style}
+          >
+            {segment.text}
+          </span>
+        ))
+      ) : (
+        <span className="text-muted-foreground">{placeholder}</span>
+      )}
+    </pre>
+  );
+});
diff --git a/packages/ui/src/components/code-editor/static-highlight.ts b/packages/ui/src/components/code-editor/static-highlight.ts
new file mode 100644
index 00000000..728ff7f8
--- /dev/null
+++ b/packages/ui/src/components/code-editor/static-highlight.ts
@@ -0,0 +1,237 @@
+import { jsonLanguage } from "@codemirror/lang-json";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import {
+  highlightTree,
+  tagHighlighter,
+  type Highlighter,
+  type Tag,
+} from "@lezer/highlight";
+import {
+  defaultSettingsGithubDark,
+  defaultSettingsGithubLight,
+  githubDarkStyle,
+  githubLightStyle,
+} from "@uiw/codemirror-theme-github";
+import type { CSSProperties } from "react";
+
+import type { ResolvedTheme } from "../theme-provider";
+
+import {
+  collectStaticDecorations,
+  type EditorEnhancement,
+  type StaticDecorationRange,
+} from "./editor-enhancement";
+
+export interface HighlightSegment {
+  text: string;
+  style?: CSSProperties;
+}
+
+export type HighlightLanguage = "markdown" | "json";
+
+interface HighlightRange {
+  from: number;
+  to: number;
+  style?: CSSProperties;
+}
+
+interface GithubTagStyle {
+  tag: Tag | readonly Tag[];
+  class?: string;
+  [styleProperty: string]: unknown;
+}
+
+interface StaticGithubTheme {
+  highlighter: Highlighter;
+  resolve(classes: string): CSSProperties | undefined;
+}
+
+// `markdownLanguage.parser` only recognizes an HTML/XML-shaped span as one
+// opaque Markdown node. The configured support installs Markdown's HTML
+// sub-parser, matching the tags users see highlighted after activating the
+// full CodeMirror editor. Editor-only support is disabled for this static path.
+const STATIC_MARKDOWN_PARSER = markdown({
+  addKeymap: false,
+  base: markdownLanguage,
+  completeHTMLTags: false,
+  pasteURLAsLink: false,
+}).language.parser;
+
+/**
+ * Adapt the package's original TagStyle list for non-CodeMirror rendering.
+ *
+ * HighlightStyle normally turns each entry into an anonymous CSS class. Static
+ * React content cannot mount that private StyleModule, so this creates stable
+ * internal class ids solely to let Lezer perform the same tag matching, then
+ * resolves those ids back to the original declarations. Sorting by source
+ * order preserves HighlightStyle's CSS-cascade behavior when a token has more
+ * than one semantic tag.
+ */
+function _createStaticGithubTheme(
+  specs: readonly GithubTagStyle[]
+): StaticGithubTheme {
+  const stylesByClass = new Map<
+    string,
+    { order: number; style: CSSProperties }
+  >();
+  const tagStyles = specs.map((spec, order) => {
+    const declarations = Object.fromEntries(
+      Object.entries(spec).filter(
+        ([property]) => property !== "tag" && property !== "class"
+      )
+    );
+    const className = `github-theme-rule-${order}`;
+    stylesByClass.set(className, {
+      order,
+      style: declarations,
+    });
+    return { tag: spec.tag, class: className };
+  });
+  const resolvedStyles = new Map<string, CSSProperties>();
+
+  return {
+    highlighter: tagHighlighter(tagStyles),
+    resolve(classes) {
+      const cached = resolvedStyles.get(classes);
+      if (cached) return cached;
+
+      const matched = classes
+        .split(/\s+/)
+        .map((className) => stylesByClass.get(className))
+        .filter(
+          (
+            entry
+          ): entry is { order: number; style: CSSProperties } => entry != null
+        )
+        .sort((left, right) => left.order - right.order);
+      if (matched.length === 0) return undefined;
+
+      const style = Object.assign(
+        {},
+        ...matched.map((entry) => entry.style)
+      ) as CSSProperties;
+      resolvedStyles.set(classes, style);
+      return style;
+    },
+  };
+}
+
+const STATIC_GITHUB_THEMES: Record<ResolvedTheme, StaticGithubTheme> = {
+  dark: _createStaticGithubTheme(githubDarkStyle),
+  light: _createStaticGithubTheme(githubLightStyle),
+};
+
+export function getGithubThemeForeground(
+  theme: ResolvedTheme
+): string | undefined {
+  return theme === "dark"
+    ? defaultSettingsGithubDark.foreground
+    : defaultSettingsGithubLight.foreground;
+}
+
+function _sameStyle(left?: CSSProperties, right?: CSSProperties) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  const leftEntries = Object.entries(left);
+  const rightEntries = Object.entries(right);
+  return (
+    leftEntries.length === rightEntries.length &&
+    leftEntries.every(([property, value]) =>
+      rightEntries.some(
+        ([rightProperty, rightValue]) =>
+          rightProperty === property && rightValue === value
+      )
+    )
+  );
+}
+
+function _createSegments(
+  source: string,
+  syntaxRanges: readonly HighlightRange[],
+  overlayRanges: readonly StaticDecorationRange[]
+): HighlightSegment[] {
+  const boundaries = new Set<number>([0, source.length]);
+  for (const range of [...syntaxRanges, ...overlayRanges]) {
+    boundaries.add(Math.max(0, Math.min(source.length, range.from)));
+    boundaries.add(Math.max(0, Math.min(source.length, range.to)));
+  }
+  const offsets = [...boundaries].sort((left, right) => left - right);
+  const segments: HighlightSegment[] = [];
+  let syntaxIndex = 0;
+  let overlayIndex = 0;
+  let activeOverlays: StaticDecorationRange[] = [];
+
+  const append = (text: string, style?: CSSProperties) => {
+    if (!text) return;
+    const previous = segments.at(-1);
+    if (previous && _sameStyle(previous.style, style)) {
+      previous.text += text;
+    } else {
+      segments.push({ text, style });
+    }
+  };
+
+  for (let index = 0; index < offsets.length - 1; index += 1) {
+    const from = offsets[index] ?? 0;
+    const to = offsets[index + 1] ?? from;
+    if (to <= from) continue;
+
+    while (syntaxRanges[syntaxIndex]?.to <= from) syntaxIndex += 1;
+    const syntaxRange = syntaxRanges[syntaxIndex];
+    const syntaxStyle =
+      syntaxRange && syntaxRange.from <= from && syntaxRange.to >= to
+        ? syntaxRange.style
+        : undefined;
+
+    activeOverlays = activeOverlays.filter((range) => range.to > from);
+    while (overlayRanges[overlayIndex]?.from <= from) {
+      activeOverlays.push(overlayRanges[overlayIndex]);
+      overlayIndex += 1;
+    }
+    const overlays = [...activeOverlays].sort(
+      (left, right) => left.priority - right.priority
+    );
+    const style =
+      overlays.length === 0
+        ? syntaxStyle
+        : (Object.assign(
+            {},
+            syntaxStyle ?? {},
+            ...overlays.map((range) => range.style)
+          ) as CSSProperties);
+    append(source.slice(from, to), style);
+  }
+  return segments;
+}
+
+/** Parse text with Lezer and return React-safe text segments, including gaps. */
+export function createHighlightSegments(
+  source: string,
+  language: HighlightLanguage,
+  theme: ResolvedTheme,
+  enhancements: readonly EditorEnhancement[] = []
+): HighlightSegment[] {
+  if (!source) return [];
+
+  const parser =
+    language === "json" ? jsonLanguage.parser : STATIC_MARKDOWN_PARSER;
+  const staticTheme = STATIC_GITHUB_THEMES[theme];
+  const ranges: HighlightRange[] = [];
+  highlightTree(
+    parser.parse(source),
+    staticTheme.highlighter,
+    (from, to, classes) => {
+      if (to > from) {
+        ranges.push({
+          from,
+          to,
+          style: staticTheme.resolve(classes),
+        });
+      }
+    }
+  );
+  ranges.sort((left, right) => left.from - right.from || left.to - right.to);
+
+  const overlays = collectStaticDecorations(source, enhancements);
+  return _createSegments(source, ranges, overlays);
+}
diff --git a/packages/ui/src/components/theme-provider.tsx b/packages/ui/src/components/theme-provider.tsx
index e95e5414..b42a43bf 100644
--- a/packages/ui/src/components/theme-provider.tsx
+++ b/packages/ui/src/components/theme-provider.tsx
@@ -27,11 +27,10 @@ export const DEFAULT_PRIMARY = "#5e80ee";
 
 /**
  * How richly the message list renders. `"rich"` (default) uses full CodeMirror
- * editors; `"lite"` downgrades the right-side message list to plain `<pre>` text
- * to keep large threads scrollable on the native WebKit renderer, where mounting
- * one CodeMirror per message makes scroll cost scale with message count.
+ * editors; `"on-demand"` starts with static highlighted text and mounts an
+ * editor only after interaction; `"lite"` uses plain text for the lowest cost.
  */
-export type RenderingFidelity = "rich" | "lite";
+export type RenderingFidelity = "rich" | "on-demand" | "lite";
 
 interface ThemeContextValue {
   theme: Theme;
@@ -78,9 +77,8 @@ function _readStoredPrimary(): string {
 }
 
 function _readStoredFidelity(): RenderingFidelity {
-  return readLocalStorage(LOCAL_STORAGE_KEYS.renderingFidelity) === "lite"
-    ? "lite"
-    : "rich";
+  const stored = readLocalStorage(LOCAL_STORAGE_KEYS.renderingFidelity);
+  return stored === "lite" || stored === "on-demand" ? stored : "rich";
 }
 
 /** Pick a readable foreground for an arbitrary accent (WCAG relative luminance). */
diff --git a/packages/ui/src/components/thread-playground/examples-menu.tsx b/packages/ui/src/components/thread-playground/examples-menu.tsx
index e1cbca3a..58f1ab96 100644
--- a/packages/ui/src/components/thread-playground/examples-menu.tsx
+++ b/packages/ui/src/components/thread-playground/examples-menu.tsx
@@ -32,7 +32,7 @@ export function ExamplesMenu<T extends ExampleItem>({
   align?: "start" | "end";
 }) {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm">
           Examples
diff --git a/packages/ui/src/components/thread-playground/message/message-list-item.tsx b/packages/ui/src/components/thread-playground/message/message-list-item.tsx
index c512104e..9b037840 100644
--- a/packages/ui/src/components/thread-playground/message/message-list-item.tsx
+++ b/packages/ui/src/components/thread-playground/message/message-list-item.tsx
@@ -14,7 +14,10 @@ import { CircleAlertIcon, PlusIcon, TriangleAlertIcon } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { CodeEditor } from "@llm-space/ui/components/code-editor";
+import {
+  CodeEditor,
+  type CodeEditorRenderMode,
+} from "@llm-space/ui/components/code-editor";
 import { openFirecrawlLimitDialog } from "@llm-space/ui/components/firecrawl-limit-dialog";
 import { useRenderingFidelity } from "@llm-space/ui/components/theme-provider";
 import { Tooltip } from "@llm-space/ui/components/tooltip";
@@ -31,7 +34,7 @@ import {
   useThreadStore,
   useThreadStoreActions,
 } from "../stores";
-import { usePromptVariableExtensionForContext } from "../variable/use-prompt-variable-extension";
+import { usePromptSyntaxEnhancementsForContext } from "../variable/use-prompt-syntax-enhancements";
 
 import { CitationList } from "./citation-list";
 import { ImageContentList } from "./image-content-view";
@@ -69,7 +72,13 @@ function _MessageListItem({
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const { fidelity } = useRenderingFidelity();
-  const variableExtension = usePromptVariableExtensionForContext(
+  const editorRenderMode: CodeEditorRenderMode =
+    fidelity === "rich"
+      ? "full"
+      : fidelity === "on-demand"
+        ? "on-demand"
+        : "plain";
+  const promptSyntaxEnhancements = usePromptSyntaxEnhancementsForContext(
     createMessagePromptVariablePlaceKey(message.id),
     context
   );
@@ -81,10 +90,6 @@ function _MessageListItem({
     [message]
   );
   const citationExtension = useTextCitationExtension(assistantTextContents);
-  const editorExtensions = useMemo(
-    () => [...(variableExtension ?? []), ...citationExtension],
-    [citationExtension, variableExtension]
-  );
   const text = useMemo(() => getMessageText(message), [message]);
   const imageContents = useMemo(() => {
     const result: { content: ImageContent; contentIndex: number }[] = [];
@@ -117,6 +122,7 @@ function _MessageListItem({
   );
   const {
     addMessageImageContent,
+    consumePendingAutoFocusMessage,
     insertMessageBefore,
     run,
     updateMessageTextContent,
@@ -136,6 +142,9 @@ function _MessageListItem({
     },
     [updateMessageTextContent, message.id]
   );
+  const handleAutoFocusComplete = useCallback(() => {
+    consumePendingAutoFocusMessage(message.id);
+  }, [consumePendingAutoFocusMessage, message.id]);
   const handlePaste = useCallback(
     (e: React.ClipboardEvent) => {
       if (message.role !== "user") {
@@ -279,10 +288,13 @@ function _MessageListItem({
               <CodeEditor
                 className="max-h-[40vh] min-h-9.5 w-full bg-transparent"
                 autoFocus={autoFocus}
+                onAutoFocusComplete={
+                  autoFocus ? handleAutoFocusComplete : undefined
+                }
                 hideFocusRing
                 hideBorder
                 scrollOnFocus
-                plain={fidelity === "lite"}
+                renderMode={editorRenderMode}
                 placeholder={
                   placeholder ??
                   `Enter ${message.role === "user" ? "user" : "assistant"} message here`
@@ -290,7 +302,8 @@ function _MessageListItem({
                 streaming={streaming}
                 readonly={readonly}
                 value={text}
-                extraExtensions={editorExtensions}
+                enhancements={promptSyntaxEnhancements}
+                extraExtensions={citationExtension}
                 onChange={handleTextContentChange}
                 onKeyDown={handleKeyDown}
                 onPaste={handlePaste}
diff --git a/packages/ui/src/components/thread-playground/message/message-list-view.tsx b/packages/ui/src/components/thread-playground/message/message-list-view.tsx
index eef72e94..a6ebe21e 100644
--- a/packages/ui/src/components/thread-playground/message/message-list-view.tsx
+++ b/packages/ui/src/components/thread-playground/message/message-list-view.tsx
@@ -20,7 +20,15 @@ import { CSS } from "@dnd-kit/utilities";
 import type { AssistantMessage, Message, ThreadContext } from "@llm-space/core";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { PlusIcon } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { cn } from "@llm-space/ui/lib/utils";
 import { Button } from "@llm-space/ui/ui/button";
@@ -46,6 +54,87 @@ const MESSAGE_ESTIMATED_HEIGHT = 240;
 const MESSAGE_OVERSCAN = 3;
 const DND_MODIFIERS = [restrictToVerticalAxis];
 
+export interface ThreadScrollSnapshot {
+  messageId: string | null;
+  offset: number;
+  scrollTop: number;
+}
+
+export interface ScrollAnchorMeasurement {
+  id: string;
+  top: number;
+  bottom: number;
+}
+
+export function captureThreadScrollSnapshotFromMeasurements(
+  scrollTop: number,
+  viewportTop: number,
+  anchors: readonly ScrollAnchorMeasurement[]
+): ThreadScrollSnapshot {
+  const anchor = anchors.find(({ bottom }) => bottom > viewportTop);
+  return {
+    messageId: anchor?.id ?? null,
+    offset: anchor ? anchor.top - viewportTop : 0,
+    scrollTop,
+  };
+}
+
+export function resolveThreadScrollTop(
+  snapshot: ThreadScrollSnapshot,
+  currentScrollTop: number,
+  viewportTop: number,
+  anchors: readonly ScrollAnchorMeasurement[]
+): number {
+  const anchor = anchors.find(({ id }) => id === snapshot.messageId);
+  return anchor
+    ? currentScrollTop + anchor.top - viewportTop - snapshot.offset
+    : snapshot.scrollTop;
+}
+
+function _getScrollViewport(content: HTMLElement | null): HTMLElement | null {
+  return (
+    content?.closest<HTMLElement>('[data-slot="scroll-area-viewport"]') ??
+    null
+  );
+}
+
+function _measureMessageAnchors(content: HTMLElement): ScrollAnchorMeasurement[] {
+  return Array.from(
+    content.querySelectorAll<HTMLElement>("[data-message-id]")
+  ).map((element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+      id: element.dataset.messageId ?? "",
+      top: rect.top,
+      bottom: rect.bottom,
+    };
+  });
+}
+
+function _captureThreadScrollSnapshot(
+  viewport: HTMLElement,
+  content: HTMLElement
+): ThreadScrollSnapshot {
+  return captureThreadScrollSnapshotFromMeasurements(
+    viewport.scrollTop,
+    viewport.getBoundingClientRect().top,
+    _measureMessageAnchors(content)
+  );
+}
+
+function _restoreThreadScrollSnapshot(
+  snapshot: ThreadScrollSnapshot,
+  viewport: HTMLElement,
+  content: HTMLElement
+): void {
+  viewport.scrollTop = resolveThreadScrollTop(
+    snapshot,
+    viewport.scrollTop,
+    viewport.getBoundingClientRect().top,
+    _measureMessageAnchors(content)
+  );
+}
+
 export function MessageListView({
   className,
   context: contextFromProps,
@@ -53,6 +142,9 @@ export function MessageListView({
   readonly: readonlyFromProps = false,
   compactImages = false,
   measurementsFrozen = false,
+  active = false,
+  initialScrollSnapshot = null,
+  onScrollSnapshotChange,
 }: {
   className?: string;
   context?: ThreadContext;
@@ -62,21 +154,21 @@ export function MessageListView({
   compactImages?: boolean;
   /** Keep measured heights while an ancestor is hidden. */
   measurementsFrozen?: boolean;
+  /** Whether this live Thread View is currently visible. */
+  active?: boolean;
+  /** One-shot View-local position restored after an LRU remount. */
+  initialScrollSnapshot?: ThreadScrollSnapshot | null;
+  /** Captures position when the View leaves the active state. */
+  onScrollSnapshotChange?: (snapshot: ThreadScrollSnapshot) => void;
 }) {
   const isSnapshotView = messagesFromProps !== undefined;
-  const status = useThreadStore((state) => state.status);
-  const collapsedMessageIds = useThreadStore(
-    (state) => state.collapsedMessageIds
-  );
-  const autoFocusMessageId = useThreadStore(
-    (state) => state.autoFocusMessageId
-  );
-  const runValidationIssue = useThreadStore(
-    (state) => state.runValidationIssue
-  );
-  const storeMessages = useThreadStore(
-    (state) => state.thread.context?.messages
+  const status = useThreadStore((s) => s.status);
+  const collapsedMessageIds = useThreadStore((s) => s.collapsedMessageIds);
+  const pendingAutoFocusMessageId = useThreadStore(
+    (s) => s.pendingAutoFocusMessageId
   );
+  const runValidationIssue = useThreadStore((s) => s.runValidationIssue);
+  const storeMessages = useThreadStore((s) => s.thread.context?.messages);
   const { appendMessage, moveMessage, resolveRunValidationIssue } =
     useThreadStoreActions();
   const [dragging, setDragging] = useState(false);
@@ -186,6 +278,7 @@ export function MessageListView({
     },
     [messageIds, moveMessage]
   );
+  const restoredScrollRef = useRef(false);
   const scrollToBottom = useCallback(() => {
     const viewport = getScrollElement();
     if (viewport) {
@@ -216,16 +309,16 @@ export function MessageListView({
     }
   }, [status, scrollToBottom]);
   useEffect(() => {
-    if (!autoFocusMessageId) {
+    if (!pendingAutoFocusMessageId) {
       return;
     }
     const index = messages.findIndex(
-      (message) => message.id === autoFocusMessageId
+      (message) => message.id === pendingAutoFocusMessageId
     );
     if (index >= 0) {
       virtualizer.scrollToIndex(index, { align: "auto" });
     }
-  }, [autoFocusMessageId, messages, virtualizer]);
+  }, [messages, pendingAutoFocusMessageId, virtualizer]);
   useEffect(() => {
     if (!runValidationIssue?.messageId) {
       return;
@@ -238,6 +331,44 @@ export function MessageListView({
     }
   }, [messages, runValidationIssue, virtualizer]);
 
+  // The active View is always retained. Capture once as it transitions to
+  // inactive, before its ancestor becomes `display: none`; no scroll listener
+  // or Store update is needed while the user scrolls.
+  useLayoutEffect(() => {
+    if (!active || isSnapshotView || !onScrollSnapshotChange) return;
+    const content = contentRef.current;
+    return () => {
+      const viewport = _getScrollViewport(content);
+      if (content && viewport) {
+        onScrollSnapshotChange(
+          _captureThreadScrollSnapshot(viewport, content)
+        );
+      }
+    };
+  }, [active, isSnapshotView, onScrollSnapshotChange]);
+
+  // A retained hidden View keeps its DOM scrollTop. This only does work for a
+  // View recreated after LRU eviction. A newly appended/inserted message owns
+  // focus and scrolling, so its one-shot autofocus takes precedence.
+  useLayoutEffect(() => {
+    if (restoredScrollRef.current || !active || isSnapshotView) return;
+    if (pendingAutoFocusMessageId) {
+      restoredScrollRef.current = true;
+      return;
+    }
+    const content = contentRef.current;
+    const viewport = _getScrollViewport(content);
+    if (initialScrollSnapshot && content && viewport) {
+      _restoreThreadScrollSnapshot(initialScrollSnapshot, viewport, content);
+    }
+    restoredScrollRef.current = true;
+  }, [
+    active,
+    initialScrollSnapshot,
+    isSnapshotView,
+    pendingAutoFocusMessageId,
+  ]);
+
   const virtualItems = virtualizer.getVirtualItems();
   const firstVirtualItem = virtualItems[0];
   const showNavigator = messages.length > 1;
@@ -285,7 +416,9 @@ export function MessageListView({
                             context={contextFromProps}
                             message={message}
                             readonly={readonly}
-                            autoFocus={message.id === autoFocusMessageId}
+                            autoFocus={
+                              message.id === pendingAutoFocusMessageId
+                            }
                             collapsed={collapsedMessageIdSet.has(message.id)}
                             runValidationIssue={
                               message.id === runValidationIssue?.messageId
diff --git a/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx b/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
index 6d6bbf95..c0e1ff19 100644
--- a/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
+++ b/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
@@ -22,6 +22,7 @@ import { toast } from "sonner";
 
 import {
   CodeEditor,
+  type CodeEditorRenderMode,
   type CodeEditorProps,
 } from "@llm-space/ui/components/code-editor";
 import { openFirecrawlLimitDialog } from "@llm-space/ui/components/firecrawl-limit-dialog";
@@ -34,7 +35,7 @@ import { Button } from "@llm-space/ui/ui/button";
 import { Input } from "@llm-space/ui/ui/input";
 
 import { useThreadStore, useThreadStoreActions } from "../stores";
-import { usePromptVariableExtensionForContext } from "../variable/use-prompt-variable-extension";
+import { usePromptSyntaxEnhancementsForContext } from "../variable/use-prompt-syntax-enhancements";
 
 import { ImageContentView } from "./image-content-view";
 import { ToolCallInputView } from "./tool-call-input-view";
@@ -62,10 +63,16 @@ function _ToolCallListItem({
   streaming: boolean;
 }) {
   const { fidelity } = useRenderingFidelity();
+  const editorRenderMode: CodeEditorRenderMode =
+    fidelity === "rich"
+      ? "full"
+      : fidelity === "on-demand"
+        ? "on-demand"
+        : "plain";
   const { presentational } = useHostServices();
   const { updateToolCallOutputText } = useThreadStoreActions();
   const { resolveTool, runToolCall } = useToolCallRunner(messageId);
-  const variableExtension = usePromptVariableExtensionForContext(
+  const promptSyntaxEnhancements = usePromptSyntaxEnhancementsForContext(
     createToolResultPromptVariablePlaceKey(messageId, toolCall.id),
     context
   );
@@ -246,10 +253,10 @@ function _ToolCallListItem({
         />
         <ToolCallResponseEditor
           input={toolCall.input}
-          plain={fidelity === "lite"}
+          renderMode={editorRenderMode}
           readonly={readonly || isCalling}
           value={outputText}
-          extraExtensions={variableExtension}
+          enhancements={promptSyntaxEnhancements}
           onChange={handleOutputChange}
           onKeyDown={handleKeyDown}
         />
@@ -284,18 +291,18 @@ function formatJson(value: unknown): string {
  */
 function _ToolCallResponseEditor({
   input,
-  plain,
+  renderMode,
   value,
   readonly,
-  extraExtensions,
+  enhancements,
   onChange,
   onKeyDown,
 }: {
   input: ToolCallInput;
-  plain: boolean;
+  renderMode: CodeEditorRenderMode;
   value: string;
   readonly: boolean;
-  extraExtensions: CodeEditorProps["extraExtensions"];
+  enhancements: CodeEditorProps["enhancements"];
   onChange: (value: string) => void;
   onKeyDown: (event: React.KeyboardEvent) => void;
 }) {
@@ -330,11 +337,11 @@ function _ToolCallResponseEditor({
       hideBorder
       hideFocusRing
       scrollOnFocus
-      plain={plain}
+      renderMode={renderMode}
       placeholder={`Enter the response of ${input.name}()`}
       readonly={readonly}
       value={value}
-      extraExtensions={extraExtensions}
+      enhancements={enhancements}
       onChange={onChange}
       onKeyDown={onKeyDown}
     />
diff --git a/packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx b/packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx
index 3f451fae..20462e7d 100644
--- a/packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx
+++ b/packages/ui/src/components/thread-playground/prompt/system-prompt-editor.tsx
@@ -6,15 +6,13 @@ import { CodeEditor } from "@llm-space/ui/components/code-editor";
 import { useHostServices } from "@llm-space/ui/host";
 import { cn } from "@llm-space/ui/lib/utils";
 
-
-
 import metaPrompt from "../examples/meta-prompt.md?raw";
 import { PROMPT_EXAMPLES, resolveSeed } from "../examples/prompts";
 import { ExamplesMenu } from "../examples-menu";
 import { GeneratePopoverButton } from "../generate-popover-button";
 import { useThreadStore, useThreadStoreActions } from "../stores";
 import { useStreamText } from "../use-stream-text";
-import { usePromptVariableExtension } from "../variable/use-prompt-variable-extension";
+import { usePromptSyntaxEnhancements } from "../variable/use-prompt-syntax-enhancements";
 
 interface SystemPromptEditorProps {
   className?: string;
@@ -35,7 +33,9 @@ function _SystemPromptEditor({
   const seedHost = useHostServices();
   const { presentational } = seedHost;
   const { updateSystemPrompt } = useThreadStoreActions();
-  const variableExtension = usePromptVariableExtension(SYSTEM_PROMPT_PLACE_KEY);
+  const promptSyntaxEnhancements = usePromptSyntaxEnhancements(
+    SYSTEM_PROMPT_PLACE_KEY
+  );
   const handleChange = useCallback(
     (value: string) => {
       updateSystemPrompt(value);
@@ -139,7 +139,7 @@ function _SystemPromptEditor({
         language="markdown"
         readonly={readonly || streaming}
         placeholder="Enter system prompt here"
-        extraExtensions={variableExtension}
+        enhancements={promptSyntaxEnhancements}
         onChange={handleChange}
       />
     </div>
diff --git a/packages/ui/src/components/thread-playground/stores/thread-store.ts b/packages/ui/src/components/thread-playground/stores/thread-store.ts
index eac475ce..ba456645 100644
--- a/packages/ui/src/components/thread-playground/stores/thread-store.ts
+++ b/packages/ui/src/components/thread-playground/stores/thread-store.ts
@@ -118,12 +118,12 @@ export interface ThreadState {
   collapsedMessageIds: string[];
   runValidationIssue: RunValidationIssue | null;
   /**
-   * Id of the message whose editor should grab focus on mount — set only by
-   * append/insert. Every other editor mounts with autoFocus off so opening a
-   * thread doesn't thrash focus/scroll across N editors. Store-only; never
-   * serialized into the thread.
+   * One-shot id of the message whose editor should grab focus — set only by
+   * append/insert and consumed after the real editing surface reports focus.
+   * This prevents a recreated View from replaying stale focus/scroll effects.
+   * Store-only; never serialized into the thread.
    */
-  autoFocusMessageId: string | null;
+  pendingAutoFocusMessageId: string | null;
   changeHistory: ChangeHistory;
   /** Thread snapshot + completion time after each run; most recent last. */
   runHistory: RunHistoryEntry[];
@@ -154,6 +154,7 @@ export interface ThreadState {
   removeEvaluationRubric(id: string): boolean;
   appendMessage(): void;
   insertMessageBefore(beforeMessageId: string): void;
+  consumePendingAutoFocusMessage(messageId: string): void;
   moveMessage(fromIndex: number, toIndex: number): void;
   removeMessage(id: string): void;
   updateSystemPrompt(systemPrompt: string): void;
@@ -670,7 +671,7 @@ export function createThreadStore(
         executingToolCallIds: [],
         collapsedMessageIds: [],
         runValidationIssue: null,
-        autoFocusMessageId: null,
+        pendingAutoFocusMessageId: null,
         changeHistory: createInitialHistory(normalizedInitialThread),
         runHistory: initialRunHistory,
         evaluations: initialEvaluations,
@@ -679,7 +680,7 @@ export function createThreadStore(
         appendMessage() {
           const message = createUserMessage();
           updateMessages((messages) => [...messages, message]);
-          set({ autoFocusMessageId: message.id });
+          set({ pendingAutoFocusMessageId: message.id });
           return message.id;
         },
         resolveRunValidationIssue() {
@@ -700,7 +701,12 @@ export function createThreadStore(
             message,
             ...messages.slice(index),
           ]);
-          set({ autoFocusMessageId: message.id });
+          set({ pendingAutoFocusMessageId: message.id });
+        },
+        consumePendingAutoFocusMessage(messageId: string) {
+          if (get().pendingAutoFocusMessageId === messageId) {
+            set({ pendingAutoFocusMessageId: null });
+          }
         },
         moveMessage(fromIndex: number, toIndex: number) {
           updateMessages((messages) => {
@@ -1761,6 +1767,7 @@ const selectActions = (s: ThreadState) => ({
 
   appendMessage: s.appendMessage,
   insertMessageBefore: s.insertMessageBefore,
+  consumePendingAutoFocusMessage: s.consumePendingAutoFocusMessage,
   moveMessage: s.moveMessage,
   removeMessage: s.removeMessage,
   updateSystemPrompt: s.updateSystemPrompt,
diff --git a/packages/ui/src/components/thread-playground/thread-playground.tsx b/packages/ui/src/components/thread-playground/thread-playground.tsx
index ce0aa173..9c07e0fb 100644
--- a/packages/ui/src/components/thread-playground/thread-playground.tsx
+++ b/packages/ui/src/components/thread-playground/thread-playground.tsx
@@ -30,6 +30,11 @@ import {
 } from "react";
 import { usePanelRef } from "react-resizable-panels";
 
+import {
+  EditorCommitScope,
+  type EditorCommitScopeHandle,
+} from "@llm-space/ui/components/code-editor/editor-commit-scope";
+import { OnDemandEditorScope } from "@llm-space/ui/components/code-editor/on-demand-code-editor";
 import {
   resolveModelConfig,
   useDefaultModel,
@@ -62,7 +67,10 @@ import { Spinner } from "@llm-space/ui/ui/spinner";
 import { Switch } from "@llm-space/ui/ui/switch";
 
 import { GenerateProjectButton } from "./codegen/generate-project-button";
-import { MessageListView } from "./message/message-list-view";
+import {
+  MessageListView,
+  type ThreadScrollSnapshot,
+} from "./message/message-list-view";
 import { ThreadPlaygroundSkeleton } from "./misc/skeleton";
 import { TitleEditor, type TitleValidator } from "./misc/title-editor";
 import { ModelConfigEditor } from "./model/model-config-editor";
@@ -93,6 +101,8 @@ import { useThreadPlaygroundEvents } from "./use-thread-playground-events";
 import { listEnabledPromptVariableSkills } from "./variable/prompt-variable-skills";
 import { PromptVariablesListView } from "./variable/prompt-variables-list-view";
 
+export type { ThreadScrollSnapshot } from "./message/message-list-view";
+
 export interface ThreadPlaygroundProps {
   className?: string;
   path: string;
@@ -112,10 +122,14 @@ export interface ThreadPlaygroundProps {
    * Whether this playground belongs to the active tab. Only the active one
    * registers the `runThread` command handler (the command registry keeps a
    * single handler per type), so a global run always targets the active tab.
-   */
+  */
   active?: boolean;
   /** Mount the visual workbench while keeping its owner and store alive. */
   viewMounted?: boolean;
+  /** View-local scroll position restored after an LRU remount. */
+  initialScrollSnapshot?: ThreadScrollSnapshot | null;
+  /** Records the latest active-to-inactive scroll snapshot. */
+  onScrollSnapshotChange?: (snapshot: ThreadScrollSnapshot) => void;
   /** The streaming transport used by runs (e.g. HTTP or Electrobun RPC). */
   transport?: AgentTransport;
   /** Runtime that owns this playground. Used to route tool calls. */
@@ -136,6 +150,40 @@ export interface ThreadPlaygroundProps {
   readRunSnapshot?: (snapshotRef: string) => Promise<ThreadSnapshot>;
 }
 
+export interface ThreadPlaygroundSessionProps {
+  initialValue: Thread;
+  /** The streaming transport used by runs (e.g. HTTP or Electrobun RPC). */
+  transport?: AgentTransport;
+  /** Runtime that owns this session and every run it starts. */
+  runtimeId?: string;
+  /** Recreate the store without tying its lifetime to the disposable View. */
+  storeKey?: string | number;
+  children?: ReactNode;
+  onChange?: (thread: Thread) => void;
+  onStreamingStart?: (runId: string) => boolean | void;
+  onStreamingEnd?: (runId: string) => void;
+  archiveRunSnapshot?: (
+    run: ThreadRunSnapshot & { id: string }
+  ) => Promise<ThreadRunReference>;
+  readRunSnapshot?: (snapshotRef: string) => Promise<ThreadSnapshot>;
+}
+
+export type ThreadPlaygroundViewProps = Omit<
+  ThreadPlaygroundProps,
+  | "initialValue"
+  | "transport"
+  | "storeKey"
+  | "onChange"
+  | "onStreamingStart"
+  | "onStreamingEnd"
+  | "archiveRunSnapshot"
+  | "readRunSnapshot"
+  | "viewMounted"
+> & {
+  /** Registers the imperative draft-commit boundary for this disposable View. */
+  onEditorCommitScopeReady?: (handle: EditorCommitScopeHandle | null) => void;
+};
+
 export function ThreadPlayground({
   loading,
   initialValue,
@@ -156,38 +204,52 @@ export function ThreadPlayground({
     throw new Error("initialValue is required when not loading");
   }
   return (
-    <_ThreadPlayground
-      className={className}
+    <ThreadPlaygroundSession
       initialValue={initialValue}
-      viewMounted={viewMounted}
-      {...props}
-    />
+      transport={props.transport}
+      runtimeId={props.runtimeId}
+      storeKey={props.storeKey}
+      onChange={props.onChange}
+      onStreamingStart={props.onStreamingStart}
+      onStreamingEnd={props.onStreamingEnd}
+      archiveRunSnapshot={props.archiveRunSnapshot}
+      readRunSnapshot={props.readRunSnapshot}
+    >
+      {viewMounted ? (
+        <ThreadPlaygroundView
+          {...props}
+          className={className}
+          runtimeId={props.runtimeId ?? "local"}
+        />
+      ) : null}
+    </ThreadPlaygroundSession>
   );
 }
 
-function _ThreadPlayground({ storeKey, ...props }: ThreadPlaygroundProps) {
+export function ThreadPlaygroundSession({
+  storeKey,
+  ...props
+}: ThreadPlaygroundSessionProps) {
   const providers = useModels();
   const profileSelections = useProviderProfileSelections(providers);
   return (
     <ProviderProfileSelectionProvider value={profileSelections}>
-      <_ThreadPlaygroundStore key={storeKey} {...props} />
+      <_ThreadPlaygroundSessionStore key={storeKey} {...props} />
     </ProviderProfileSelectionProvider>
   );
 }
 
-function _ThreadPlaygroundStore({
+function _ThreadPlaygroundSessionStore({
   initialValue,
   transport,
   runtimeId,
-  onApplyCompaction,
-  viewMounted = true,
+  children,
   onChange,
   onStreamingStart,
   onStreamingEnd,
   archiveRunSnapshot,
   readRunSnapshot,
-  ...props
-}: ThreadPlaygroundProps) {
+}: ThreadPlaygroundSessionProps) {
   const [ownerRuntimeId] = useState(() => runtimeId ?? "local");
   // Keep live refs to the provider list and default model so the store can
   // resolve a thread's model (its own, else the default/first available) at
@@ -233,17 +295,24 @@ function _ThreadPlaygroundStore({
   });
   return (
     <ThreadStoreContext.Provider value={store}>
-      {viewMounted ? (
-        <ThreadPlaygroundContent
-          runtimeId={ownerRuntimeId}
-          onApplyCompaction={onApplyCompaction}
-          {...props}
-        />
-      ) : null}
+      {children}
     </ThreadStoreContext.Provider>
   );
 }
 
+export function ThreadPlaygroundView({
+  onEditorCommitScopeReady,
+  ...props
+}: ThreadPlaygroundViewProps) {
+  return (
+    <EditorCommitScope onReady={onEditorCommitScopeReady}>
+      <OnDemandEditorScope active={props.active ?? false}>
+        <ThreadPlaygroundContent {...props} />
+      </OnDemandEditorScope>
+    </EditorCommitScope>
+  );
+}
+
 /** Size the Run history panel expands to when toggled open. */
 const RUN_HISTORY_PANEL_SIZE = "16rem";
 
@@ -260,6 +329,8 @@ function ThreadPlaygroundContent({
   readonly: readonlyFromProps = false,
   active = false,
   compactImages = false,
+  initialScrollSnapshot,
+  onScrollSnapshotChange,
 }: Omit<
   ThreadPlaygroundProps,
   "initialValue" | "onChange" | "onStreamingStart" | "onStreamingEnd"
@@ -612,6 +683,9 @@ function ThreadPlaygroundContent({
                 readonly={readonly}
                 compactImages={compactImages}
                 measurementsFrozen={!active && !presentational}
+                active={active}
+                initialScrollSnapshot={initialScrollSnapshot}
+                onScrollSnapshotChange={onScrollSnapshotChange}
               />
             </ResizablePanel>
           </ResizablePanelGroup>
diff --git a/packages/ui/src/components/thread-playground/tool/tool-list-view.tsx b/packages/ui/src/components/thread-playground/tool/tool-list-view.tsx
index 859556b2..cf5fe050 100644
--- a/packages/ui/src/components/thread-playground/tool/tool-list-view.tsx
+++ b/packages/ui/src/components/thread-playground/tool/tool-list-view.tsx
@@ -151,7 +151,7 @@ export function ToolListView({
           />
         ))}
         {!presentational && (
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <Button
                 className={cn(
diff --git a/packages/ui/src/components/thread-playground/variable/prompt-syntax-enhancements.ts b/packages/ui/src/components/thread-playground/variable/prompt-syntax-enhancements.ts
new file mode 100644
index 00000000..f29e4842
--- /dev/null
+++ b/packages/ui/src/components/thread-playground/variable/prompt-syntax-enhancements.ts
@@ -0,0 +1,41 @@
+import {
+  createRegexHighlightEnhancement,
+  type CodeMirrorOnlyEnhancement,
+} from "../../code-editor/editor-enhancement";
+
+import {
+  createPromptSyntaxEditingExtensions,
+  PROMPT_TEMPLATE_TAG_PATTERN,
+  PROMPT_TEMPLATE_TAG_STYLE,
+  PROMPT_VARIABLE_PATTERN,
+  PROMPT_VARIABLE_STYLE,
+  type PromptSyntaxEditingOptions,
+} from "./prompt-variable-extension";
+
+export const PROMPT_VARIABLE_HIGHLIGHT =
+  createRegexHighlightEnhancement({
+    id: "prompt-variable-highlight",
+    pattern: PROMPT_VARIABLE_PATTERN,
+    className: "cm-prompt-variable",
+    style: PROMPT_VARIABLE_STYLE,
+    priority: 10,
+  });
+
+export const PROMPT_TEMPLATE_TAG_HIGHLIGHT =
+  createRegexHighlightEnhancement({
+    id: "prompt-template-tag-highlight",
+    pattern: PROMPT_TEMPLATE_TAG_PATTERN,
+    className: "cm-template-tag",
+    style: PROMPT_TEMPLATE_TAG_STYLE,
+    priority: 20,
+  });
+
+export function createPromptSyntaxEditingEnhancement(
+  options: PromptSyntaxEditingOptions
+): CodeMirrorOnlyEnhancement {
+  return {
+    kind: "code-mirror-only",
+    id: "prompt-syntax-editing",
+    extensions: createPromptSyntaxEditingExtensions(options),
+  };
+}
diff --git a/packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts b/packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts
index e36e5ae7..ea63fa75 100644
--- a/packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts
+++ b/packages/ui/src/components/thread-playground/variable/prompt-variable-extension.ts
@@ -3,24 +3,34 @@ import {
   type Completion,
   type CompletionContext,
   type CompletionResult,
+  type CompletionSource,
 } from "@codemirror/autocomplete";
 import { type Extension } from "@codemirror/state";
 import {
-  Decoration,
   EditorView,
   hoverTooltip,
-  MatchDecorator,
   tooltips,
-  ViewPlugin,
-  type DecorationSet,
   type Tooltip,
-  type ViewUpdate,
 } from "@codemirror/view";
 import type {
   PromptVariableCompletion,
   VariableResolution,
 } from "@llm-space/core/thread";
 
+export const PROMPT_VARIABLE_PATTERN =
+  String.raw`\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}`;
+export const PROMPT_TEMPLATE_TAG_PATTERN = String.raw`\{%[-+]?[\s\S]*?[-+]?%\}`;
+
+export const PROMPT_VARIABLE_STYLE = {
+  color: "var(--cm-variable)",
+  fontWeight: "500",
+} as const;
+
+export const PROMPT_TEMPLATE_TAG_STYLE = {
+  color: "var(--cm-template-tag)",
+  fontWeight: "500",
+} as const;
+
 /**
  * Resolves a `{{name}}` to its display value. May return synchronously (date /
  * custom variables) or a Promise (skills, which need an async load). Called
@@ -33,7 +43,7 @@ export type PromptVariableResolver = (
 /** Lists the variables offered by `{{`-triggered autocompletion. */
 export type PromptVariableLister = () => PromptVariableCompletion[];
 
-export interface PromptVariableExtensionOptions {
+export interface PromptSyntaxEditingOptions {
   resolve: PromptVariableResolver;
   listVariables: PromptVariableLister;
   /**
@@ -50,57 +60,11 @@ function truncate(value: string, max: number): string {
   return value.length > max ? `${value.slice(0, max)}…` : value;
 }
 
-// Syntactic only — a well-formed `{{name}}` with optional inner whitespace. The
-// `g` flag is required by MatchDecorator. Highlighting never consults the
-// variable table, so this stays a pure, viewport-bounded scan.
-const PLACEHOLDER_RE = /\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}/g;
-// A Jinja/Nunjucks tag `{% … %}` (with optional whitespace-control `-`/`+`),
-// highlighted as one unit — purely syntactic, viewport-bounded like above.
-const TEMPLATE_TAG_RE = /\{%[-+]?[\s\S]*?[-+]?%\}/g;
-const placeholderMark = Decoration.mark({ class: "cm-prompt-variable" });
-const templateTagMark = Decoration.mark({ class: "cm-template-tag" });
-
-const matcher = new MatchDecorator({
-  regexp: PLACEHOLDER_RE,
-  decoration: placeholderMark,
-});
-const templateTagMatcher = new MatchDecorator({
-  regexp: TEMPLATE_TAG_RE,
-  decoration: templateTagMark,
-});
-
-// Build a viewport-bounded highlighter from a MatchDecorator. Only visible
-// ranges are scanned and existing decorations map through edits, so cost never
-// scales with document length.
-function _createHighlighter(decorator: MatchDecorator): ViewPlugin<{
-  decorations: DecorationSet;
-}> {
-  return ViewPlugin.fromClass(
-    class {
-      decorations: DecorationSet;
-      constructor(view: EditorView) {
-        this.decorations = decorator.createDeco(view);
-      }
-      update(update: ViewUpdate) {
-        this.decorations = decorator.updateDeco(update, this.decorations);
-      }
-    },
-    { decorations: (plugin) => plugin.decorations }
-  );
-}
-
-const placeholderHighlighter = _createHighlighter(matcher);
-const templateTagHighlighter = _createHighlighter(templateTagMatcher);
+// Hover recognition is syntactic only — a well-formed `{{name}}` with optional
+// inner whitespace. Visual matching is owned by the declarative enhancement.
+const PLACEHOLDER_RE = new RegExp(PROMPT_VARIABLE_PATTERN, "g");
 
 const theme = EditorView.theme({
-  ".cm-prompt-variable": {
-    color: "var(--cm-variable)",
-    fontWeight: "500",
-  },
-  ".cm-template-tag": {
-    color: "var(--cm-template-tag)",
-    fontWeight: "500",
-  },
   ".cm-prompt-variable-tooltip": {
     minWidth: "260px",
     maxWidth: "360px",
@@ -414,8 +378,10 @@ const TEMPLATE_TAGS: {
   { label: "endraw", detail: "Close raw", insert: "{% endraw %}", caret: 12 },
 ];
 
-function createVariableCompletion(list: PromptVariableLister): Extension {
-  const source = (context: CompletionContext): CompletionResult | null => {
+export function createPromptCompletionSource(
+  list: PromptVariableLister
+): CompletionSource {
+  return (context: CompletionContext): CompletionResult | null => {
     // Macro completion: only `@include(path)` is offered, per design. The `@`
     // form can't match the variable trigger below, so the two never overlap.
     const macroBefore = context.matchBefore(MACRO_TRIGGER_RE);
@@ -486,6 +452,10 @@ function createVariableCompletion(list: PromptVariableLister): Extension {
     options.push(includeCompletion);
     return { from, options, filter: true };
   };
+}
+
+function createVariableCompletion(list: PromptVariableLister): Extension {
+  const source = createPromptCompletionSource(list);
   return autocompletion({
     override: [source],
     // Replace the default icon column with our own variable (braces) icon.
@@ -494,14 +464,12 @@ function createVariableCompletion(list: PromptVariableLister): Extension {
   });
 }
 
-export function createPromptVariableExtension({
+export function createPromptSyntaxEditingExtensions({
   resolve,
   listVariables,
   onInspect,
-}: PromptVariableExtensionOptions): Extension[] {
+}: PromptSyntaxEditingOptions): Extension[] {
   return [
-    placeholderHighlighter,
-    templateTagHighlighter,
     createHoverTooltip(resolve, onInspect),
     createVariableCompletion(listVariables),
     // Render tooltips (hover + the completion dropdown) under document.body so
diff --git a/packages/ui/src/components/thread-playground/variable/use-prompt-syntax-enhancements.ts b/packages/ui/src/components/thread-playground/variable/use-prompt-syntax-enhancements.ts
new file mode 100644
index 00000000..a64abffb
--- /dev/null
+++ b/packages/ui/src/components/thread-playground/variable/use-prompt-syntax-enhancements.ts
@@ -0,0 +1,124 @@
+import type { ThreadContext } from "@llm-space/core";
+import type { SkillInfo } from "@llm-space/core";
+import {
+  listPromptVariableCompletions,
+  resolvePromptVariableValue,
+  resolvePromptVariableValueForPlace,
+} from "@llm-space/core/thread";
+import { useCallback, useContext, useMemo } from "react";
+
+import type { EditorEnhancement } from "@llm-space/ui/components/code-editor";
+import { useHostServices } from "@llm-space/ui/host";
+
+import { ThreadStoreContext, type ThreadStore } from "../stores";
+
+import {
+  createPromptSyntaxEditingEnhancement,
+  PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+  PROMPT_VARIABLE_HIGHLIGHT,
+} from "./prompt-syntax-enhancements";
+import { listEnabledPromptVariableSkills } from "./prompt-variable-skills";
+
+type PromptSyntaxEnhancements = readonly EditorEnhancement[];
+
+// One identity-stable enhancement list per thread store and prompt place.
+// Stable identity keeps both Static memoization and CodeMirror configuration
+// intact across unrelated React renders.
+const enhancementsByStore = new WeakMap<
+  ThreadStore,
+  Map<string, PromptSyntaxEnhancements>
+>();
+
+function _composePromptSyntaxEnhancements(
+  editing: EditorEnhancement
+): PromptSyntaxEnhancements {
+  return [
+    PROMPT_VARIABLE_HIGHLIGHT,
+    PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+    editing,
+  ];
+}
+
+function _getEnhancementsForStore(
+  store: ThreadStore,
+  placeKey: string | undefined,
+  onInspect: (name: string) => void,
+  loadSkills: () => Promise<SkillInfo[]>
+): PromptSyntaxEnhancements {
+  let byPlace = enhancementsByStore.get(store);
+  if (!byPlace) {
+    byPlace = new Map();
+    enhancementsByStore.set(store, byPlace);
+  }
+
+  const key = placeKey ?? "";
+  let enhancements = byPlace.get(key);
+  if (!enhancements) {
+    enhancements = _composePromptSyntaxEnhancements(
+      createPromptSyntaxEditingEnhancement({
+        // Lazy, non-reactive reads — run only on hover / while completing, so
+        // edits to variables are reflected without a React subscription.
+        resolve: (name) =>
+          resolvePromptVariableValue(
+            name,
+            store.getState().thread.context,
+            loadSkills
+          ),
+        listVariables: () =>
+          listPromptVariableCompletions(store.getState().thread.context),
+        onInspect,
+      })
+    );
+    byPlace.set(key, enhancements);
+  }
+  return enhancements;
+}
+
+const EMPTY: PromptSyntaxEnhancements = [];
+
+export function usePromptSyntaxEnhancements(
+  placeKey?: string
+): PromptSyntaxEnhancements {
+  return usePromptSyntaxEnhancementsForContext(placeKey, undefined);
+}
+
+/**
+ * Build prompt syntax enhancements against an explicit context. Readonly run
+ * snapshots resolve their frozen variable values from that saved context.
+ */
+export function usePromptSyntaxEnhancementsForContext(
+  placeKey: string | undefined,
+  context: ThreadContext | undefined,
+  store?: ThreadStore | null
+): PromptSyntaxEnhancements {
+  const fallbackStore = useContext(ThreadStoreContext);
+  const resolvedStore = store ?? fallbackStore;
+  const { skills, actions } = useHostServices();
+  const loadSkills = useCallback(
+    () => listEnabledPromptVariableSkills(skills),
+    [skills]
+  );
+  return useMemo(() => {
+    if (context) {
+      return _composePromptSyntaxEnhancements(
+        createPromptSyntaxEditingEnhancement({
+          resolve: (name) =>
+            resolvePromptVariableValueForPlace(
+              name,
+              context,
+              placeKey,
+              loadSkills
+            ),
+          listVariables: () => listPromptVariableCompletions(context),
+        })
+      );
+    }
+    if (!resolvedStore) return EMPTY;
+    return _getEnhancementsForStore(
+      resolvedStore,
+      placeKey,
+      (name) => actions.openVariables(name),
+      loadSkills
+    );
+  }, [context, placeKey, resolvedStore, actions, loadSkills]);
+}
diff --git a/packages/ui/src/components/thread-playground/variable/use-prompt-variable-extension.ts b/packages/ui/src/components/thread-playground/variable/use-prompt-variable-extension.ts
deleted file mode 100644
index 3596e7a0..00000000
--- a/packages/ui/src/components/thread-playground/variable/use-prompt-variable-extension.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { type Extension } from "@codemirror/state";
-import type { ThreadContext } from "@llm-space/core";
-import type { SkillInfo } from "@llm-space/core";
-import {
-  listPromptVariableCompletions,
-  resolvePromptVariableValue,
-  resolvePromptVariableValueForPlace,
-} from "@llm-space/core/thread";
-import { useCallback, useContext, useMemo } from "react";
-
-import { useHostServices } from "@llm-space/ui/host";
-
-import { ThreadStoreContext, type ThreadStore } from "../stores";
-
-import { createPromptVariableExtension } from "./prompt-variable-extension";
-import { listEnabledPromptVariableSkills } from "./prompt-variable-skills";
-
-// One identity-stable extension per thread store and prompt place. Stable
-// identity keeps @uiw/react-codemirror from reconfiguring the editor on each
-// render (which would drop focus / undo).
-const extensionByStore = new WeakMap<ThreadStore, Map<string, Extension[]>>();
-
-function getExtensionForStore(
-  store: ThreadStore,
-  placeKey: string | undefined,
-  onInspect: (name: string) => void,
-  loadSkills: () => Promise<SkillInfo[]>
-): Extension[] {
-  let byPlace = extensionByStore.get(store);
-  if (!byPlace) {
-    byPlace = new Map();
-    extensionByStore.set(store, byPlace);
-  }
-
-  const key = placeKey ?? "";
-  let extension = byPlace.get(key);
-  if (!extension) {
-    extension = createPromptVariableExtension({
-      // Lazy, non-reactive reads — run only on hover / while completing, so edits
-      // to variables are always reflected without any subscription.
-      resolve: (name) =>
-        resolvePromptVariableValue(
-          name,
-          store.getState().thread.context,
-          loadSkills
-        ),
-      listVariables: () =>
-        listPromptVariableCompletions(store.getState().thread.context),
-      onInspect,
-    });
-    byPlace.set(key, extension);
-  }
-  return extension;
-}
-
-const EMPTY: Extension[] = [];
-
-/**
- * The `{{variable}}` highlight + hover-resolve CodeMirror extension for the
- * current thread (empty outside a thread store). Pass it to
- * `<CodeEditor extraExtensions={...} />` from the system-prompt and message
- * editors — the only editors that know the thread's variables.
- */
-export function usePromptVariableExtension(placeKey?: string): Extension[] {
-  return usePromptVariableExtensionForContext(placeKey, undefined);
-}
-
-/**
- * Build a variable extension against an explicit context. Used by readonly run
- * snapshots, whose frozen variable values must come from that saved context
- * instead of the currently open thread store.
- */
-export function usePromptVariableExtensionForContext(
-  placeKey: string | undefined,
-  context: ThreadContext | undefined,
-  store?: ThreadStore | null
-): Extension[] {
-  const fallbackStore = useContext(ThreadStoreContext);
-  const resolvedStore = store ?? fallbackStore;
-  const { skills, actions } = useHostServices();
-  const loadSkills = useCallback(
-    () => listEnabledPromptVariableSkills(skills),
-    [skills]
-  );
-  return useMemo(() => {
-    // Readonly snapshot: frozen values from the saved context, and no inspect
-    // button (its variables are historical, not the live thread's).
-    if (context) {
-      return createPromptVariableExtension({
-        resolve: (name) =>
-          resolvePromptVariableValueForPlace(
-            name,
-            context,
-            placeKey,
-            loadSkills
-          ),
-        listVariables: () => listPromptVariableCompletions(context),
-      });
-    }
-    if (!resolvedStore) return EMPTY;
-    // The tooltip's "view details" button routes through the host's
-    // `openVariables` action, handled by the active thread.
-    return getExtensionForStore(
-      resolvedStore,
-      placeKey,
-      (name) => actions.openVariables(name),
-      loadSkills
-    );
-  }, [context, placeKey, resolvedStore, actions, loadSkills]);
-}
diff --git a/packages/ui/src/lib/local-storage.ts b/packages/ui/src/lib/local-storage.ts
index efe2fa41..66498083 100644
--- a/packages/ui/src/lib/local-storage.ts
+++ b/packages/ui/src/lib/local-storage.ts
@@ -10,6 +10,7 @@ export const LOCAL_STORAGE_KEYS = {
   theme: "llm-space-theme",
   primaryColor: "llm-space-primary",
   renderingFidelity: "llm-space-rendering-fidelity",
+  threadViewCacheSize: "llm-space:thread-view-cache-size",
   autoRunTools: "llm-space-auto-run-tools",
   reactLoop: "llm-space-react-loop",
   messageStatsSummaryMode: "llm-space-message-stats-summary-mode",
diff --git a/packages/ui/tests/components/code-editor/editor-enhancement.test.ts b/packages/ui/tests/components/code-editor/editor-enhancement.test.ts
new file mode 100644
index 00000000..2216fe54
--- /dev/null
+++ b/packages/ui/tests/components/code-editor/editor-enhancement.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, test } from "bun:test";
+
+import { EditorState } from "@codemirror/state";
+
+import {
+  collectStaticDecorations,
+  createRangeHighlightEnhancement,
+  createRegexHighlightEnhancement,
+  type CodeMirrorOnlyEnhancement,
+} from "../../../src/components/code-editor/editor-enhancement";
+import { compileCodeMirrorEnhancements } from "../../../src/components/code-editor/editor-enhancement-codemirror";
+
+const VARIABLE = createRegexHighlightEnhancement({
+  id: "prompt-variable-highlight",
+  pattern: String.raw`\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}`,
+  className: "cm-prompt-variable",
+  style: { color: "var(--cm-variable)", fontWeight: "500" },
+  priority: 10,
+});
+
+const TEMPLATE_TAG = createRegexHighlightEnhancement({
+  id: "prompt-template-tag-highlight",
+  pattern: String.raw`\{%[-+]?[\s\S]*?[-+]?%\}`,
+  className: "cm-template-tag",
+  style: { color: "var(--cm-template-tag)", fontWeight: "500" },
+  priority: 20,
+});
+
+describe("editor enhancements", () => {
+  test("collects prompt variables and multiline template tags from one declaration", () => {
+    const source = "{{ name }}\n{% if enabled\n  and ready %}";
+
+    expect(collectStaticDecorations(source, [VARIABLE, TEMPLATE_TAG])).toEqual([
+      { from: 0, to: 10, style: VARIABLE.style, priority: 10 },
+      {
+        from: 11,
+        to: source.length,
+        style: TEMPLATE_TAG.style,
+        priority: 20,
+      },
+    ]);
+  });
+
+  test("collects, clamps, drops, and orders explicit ranges", () => {
+    const ranges = createRangeHighlightEnhancement({
+      id: "known-ranges",
+      className: "cm-known-range",
+      style: { textDecoration: "underline" },
+      priority: 30,
+      getRanges: () => [
+        { from: 5, to: 20 },
+        { from: -4, to: 2 },
+        { from: 4, to: 4 },
+      ],
+    });
+
+    expect(collectStaticDecorations("abcdef", [ranges])).toEqual([
+      { from: 0, to: 2, style: ranges.style, priority: 30 },
+      { from: 5, to: 6, style: ranges.style, priority: 30 },
+    ]);
+  });
+
+  test("rejects invalid declarations and duplicate ids", () => {
+    expect(() =>
+      createRegexHighlightEnhancement({
+        id: "empty-match",
+        pattern: ".*",
+        className: "cm-empty",
+        style: {},
+        priority: 0,
+      })
+    ).toThrow("must not match empty text");
+    expect(() =>
+      collectStaticDecorations("{{name}}", [VARIABLE, VARIABLE])
+    ).toThrow('Duplicate editor enhancement id "prompt-variable-highlight"');
+  });
+
+  test("compiles visual declarations once and flattens CodeMirror-only extensions", () => {
+    const editorOnlyExtension = EditorState.readOnly.of(true);
+    const editorOnly: CodeMirrorOnlyEnhancement = {
+      kind: "code-mirror-only",
+      id: "editor-only",
+      extensions: [editorOnlyExtension],
+    };
+
+    const first = compileCodeMirrorEnhancements([
+      VARIABLE,
+      TEMPLATE_TAG,
+      editorOnly,
+    ]);
+    const second = compileCodeMirrorEnhancements([
+      VARIABLE,
+      TEMPLATE_TAG,
+      editorOnly,
+    ]);
+
+    expect(first).toHaveLength(5);
+    expect(first[0]).toBe(second[0]);
+    expect(first[1]).toBe(second[1]);
+    expect(first.at(-1)).toBe(editorOnlyExtension);
+    expect(collectStaticDecorations("{{name}}", [editorOnly])).toEqual([]);
+  });
+
+  test("orders CodeMirror visual rules by the same priority used by Static View", () => {
+    const low = createRegexHighlightEnhancement({
+      id: "low-priority",
+      pattern: "value",
+      className: "cm-low-priority",
+      style: { color: "blue" },
+      priority: 1,
+    });
+    const high = createRegexHighlightEnhancement({
+      id: "high-priority",
+      pattern: "value",
+      className: "cm-high-priority",
+      style: { color: "red" },
+      priority: 100,
+    });
+    const lowCompiled = compileCodeMirrorEnhancements([low]);
+    const highCompiled = compileCodeMirrorEnhancements([high]);
+    const reversedInput = compileCodeMirrorEnhancements([high, low]);
+
+    expect(reversedInput[0]).toBe(lowCompiled[0]);
+    expect(reversedInput[1]).toBe(lowCompiled[1]);
+    expect(reversedInput[2]).toBe(highCompiled[0]);
+    expect(reversedInput[3]).toBe(highCompiled[1]);
+  });
+});
diff --git a/packages/ui/tests/components/code-editor/static-highlight.test.ts b/packages/ui/tests/components/code-editor/static-highlight.test.ts
new file mode 100644
index 00000000..c5d89ec8
--- /dev/null
+++ b/packages/ui/tests/components/code-editor/static-highlight.test.ts
@@ -0,0 +1,117 @@
+import { describe, expect, test } from "bun:test";
+
+import { createRegexHighlightEnhancement } from "../../../src/components/code-editor/editor-enhancement";
+import { createHighlightSegments } from "../../../src/components/code-editor/static-highlight";
+
+const PROMPT_VARIABLE_HIGHLIGHT = createRegexHighlightEnhancement({
+  id: "prompt-variable-highlight",
+  pattern: String.raw`\{\{\s*[A-Za-z_][A-Za-z0-9_]*\s*\}\}`,
+  className: "cm-prompt-variable",
+  style: { color: "var(--cm-variable)", fontWeight: "500" },
+  priority: 10,
+});
+const PROMPT_TEMPLATE_TAG_HIGHLIGHT = createRegexHighlightEnhancement({
+  id: "prompt-template-tag-highlight",
+  pattern: String.raw`\{%[-+]?[\s\S]*?[-+]?%\}`,
+  className: "cm-template-tag",
+  style: { color: "var(--cm-template-tag)", fontWeight: "500" },
+  priority: 20,
+});
+const PROMPT_HIGHLIGHTS = [
+  PROMPT_VARIABLE_HIGHLIGHT,
+  PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+] as const;
+
+describe("static syntax highlighting", () => {
+  test("preserves Markdown exactly while producing highlighted ranges", () => {
+    const source = "**bold** and `code`";
+    const segments = createHighlightSegments(source, "markdown", "dark");
+
+    expect(segments.some((segment) => segment.style)).toBe(true);
+    expect(segments.map((segment) => segment.text).join("")).toBe(source);
+  });
+
+  test("uses CodeMirror's exported GitHub styles for XML and Markdown", () => {
+    const source =
+      '# Heading\n\n**bold**\n\n<system-reminder format="iso">text</system-reminder>';
+    const segments = createHighlightSegments(source, "markdown", "dark");
+
+    expect(segments.map((segment) => segment.text).join("")).toBe(source);
+    expect(
+      segments.find((segment) => segment.text === "system-reminder")?.style
+    ).toEqual({ color: "#7ee787" });
+    expect(
+      segments.find((segment) => segment.text.startsWith("format"))?.style
+    ).toEqual({ color: "#79c0ff" });
+    expect(
+      segments.find((segment) => segment.text.includes("Heading"))?.style
+    ).toEqual({ color: "#d2a8ff", fontWeight: "bold" });
+    expect(
+      segments.find((segment) => segment.text.includes("bold"))?.style
+    ).toEqual({ color: "#d2a8ff", fontWeight: "bold" });
+
+    const lightSegments = createHighlightSegments(source, "markdown", "light");
+    expect(
+      lightSegments.find((segment) => segment.text === "system-reminder")?.style
+    ).toEqual({ color: "#116329" });
+    expect(
+      lightSegments.find((segment) => segment.text.includes("Heading"))?.style
+    ).toEqual({ color: "#24292e", fontWeight: "bold" });
+  });
+
+  test("layers prompt variable and template-tag styles over GitHub syntax", () => {
+    const source =
+      '<workspace path="{{current_working_directory}}">\n{% if enabled %}{{current_date}}{% endif %}\n</workspace>';
+    const segments = createHighlightSegments(
+      source,
+      "markdown",
+      "dark",
+      PROMPT_HIGHLIGHTS
+    );
+
+    expect(segments.map((segment) => segment.text).join("")).toBe(source);
+    expect(
+      segments.find(
+        (segment) => segment.text === "{{current_working_directory}}"
+      )?.style
+    ).toEqual({ color: "var(--cm-variable)", fontWeight: "500" });
+    expect(
+      segments.find((segment) => segment.text === "{{current_date}}")?.style
+    ).toEqual({ color: "var(--cm-variable)", fontWeight: "500" });
+    for (const text of ["{% if enabled %}", "{% endif %}"]) {
+      expect(segments.find((segment) => segment.text === text)?.style).toEqual({
+        color: "var(--cm-template-tag)",
+        fontWeight: "500",
+      });
+    }
+  });
+
+  test("preserves JSON as text so React remains responsible for escaping", () => {
+    const source = '{"unsafe":"<script>"}';
+    const segments = createHighlightSegments(source, "json", "dark");
+
+    expect(segments.some((segment) => segment.style)).toBe(true);
+    expect(segments.map((segment) => segment.text).join("")).toBe(source);
+  });
+
+  test("handles empty and malformed inputs", () => {
+    expect(createHighlightSegments("", "markdown", "dark")).toEqual([]);
+    const malformed = '{"still": [1, 2}';
+    expect(
+      createHighlightSegments(malformed, "json", "dark")
+        .map((segment) => segment.text)
+        .join("")
+    ).toBe(malformed);
+  });
+
+  test("fills unstyled gaps in multiline Markdown", () => {
+    const source = "# Heading\n\nplain words\n\n- **bold**";
+    const segments = createHighlightSegments(source, "markdown", "dark");
+
+    expect(segments.map((segment) => segment.text).join("")).toBe(source);
+    expect(segments.some((segment) => !segment.style)).toBe(true);
+    for (let index = 1; index < segments.length; index += 1) {
+      expect(segments[index - 1]?.style).not.toEqual(segments[index]?.style);
+    }
+  });
+});
diff --git a/packages/ui/tests/components/thread-playground/message/message-list-view-scroll.test.ts b/packages/ui/tests/components/thread-playground/message/message-list-view-scroll.test.ts
new file mode 100644
index 00000000..f87ef9aa
--- /dev/null
+++ b/packages/ui/tests/components/thread-playground/message/message-list-view-scroll.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, test } from "bun:test";
+
+import * as messageListViewModule from "../../../../src/components/thread-playground/message/message-list-view";
+
+interface ScrollAnchorMeasurement {
+  id: string;
+  top: number;
+  bottom: number;
+}
+
+interface ThreadScrollSnapshot {
+  messageId: string | null;
+  offset: number;
+  scrollTop: number;
+}
+
+const scrollHelpers = messageListViewModule as unknown as {
+  captureThreadScrollSnapshotFromMeasurements?: (
+    scrollTop: number,
+    viewportTop: number,
+    anchors: ScrollAnchorMeasurement[]
+  ) => ThreadScrollSnapshot;
+  resolveThreadScrollTop?: (
+    snapshot: ThreadScrollSnapshot,
+    currentScrollTop: number,
+    viewportTop: number,
+    anchors: ScrollAnchorMeasurement[]
+  ) => number;
+};
+
+describe("thread message scroll snapshots", () => {
+  test("restores the first visible message anchor and falls back to scrollTop", () => {
+    expect(
+      typeof scrollHelpers.captureThreadScrollSnapshotFromMeasurements
+    ).toBe("function");
+    expect(typeof scrollHelpers.resolveThreadScrollTop).toBe("function");
+    const capture = scrollHelpers.captureThreadScrollSnapshotFromMeasurements;
+    const resolve = scrollHelpers.resolveThreadScrollTop;
+    if (!capture || !resolve) return;
+
+    const snapshot = capture(640, 100, [
+      { id: "above", top: 50, bottom: 90 },
+      { id: "visible", top: 96, bottom: 140 },
+      { id: "below", top: 160, bottom: 200 },
+    ]);
+
+    expect(snapshot).toEqual({
+      messageId: "visible",
+      offset: -4,
+      scrollTop: 640,
+    });
+    expect(
+      resolve(snapshot, 700, 100, [
+        { id: "visible", top: 120, bottom: 164 },
+      ])
+    ).toBe(724);
+    expect(resolve(snapshot, 700, 100, [])).toBe(640);
+  });
+});
diff --git a/packages/ui/tests/components/thread-playground/stores/thread-store.test.ts b/packages/ui/tests/components/thread-playground/stores/thread-store.test.ts
index 2b3a768b..cb1de7ca 100644
--- a/packages/ui/tests/components/thread-playground/stores/thread-store.test.ts
+++ b/packages/ui/tests/components/thread-playground/stores/thread-store.test.ts
@@ -64,9 +64,16 @@ describe("inline run validation", () => {
     const messages = store.getState().thread.context?.messages ?? [];
     expect(store.getState().runValidationIssue).toBeNull();
     expect(messages.at(-1)?.role).toBe("user");
-    expect(store.getState().autoFocusMessageId).toBe(
+    expect(store.getState().pendingAutoFocusMessageId).toBe(
       messages.at(-1)?.id ?? null
     );
+
+    store.getState().consumePendingAutoFocusMessage("another-message");
+    expect(store.getState().pendingAutoFocusMessageId).toBe(
+      messages.at(-1)?.id ?? null
+    );
+    store.getState().consumePendingAutoFocusMessage(messages.at(-1)?.id ?? "");
+    expect(store.getState().pendingAutoFocusMessageId).toBeNull();
   });
 
   test("clears feedback when the blocking role becomes runnable", async () => {
diff --git a/packages/ui/tests/components/thread-playground/variable/prompt-syntax-enhancements.test.ts b/packages/ui/tests/components/thread-playground/variable/prompt-syntax-enhancements.test.ts
new file mode 100644
index 00000000..b458494c
--- /dev/null
+++ b/packages/ui/tests/components/thread-playground/variable/prompt-syntax-enhancements.test.ts
@@ -0,0 +1,127 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+
+import { CompletionContext } from "@codemirror/autocomplete";
+import { EditorState } from "@codemirror/state";
+
+import {
+  collectStaticDecorations,
+  type EditorEnhancement,
+} from "../../../../src/components/code-editor/editor-enhancement";
+import {
+  createPromptSyntaxEditingEnhancement,
+  PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+  PROMPT_VARIABLE_HIGHLIGHT,
+} from "../../../../src/components/thread-playground/variable/prompt-syntax-enhancements";
+import { createPromptCompletionSource } from "../../../../src/components/thread-playground/variable/prompt-variable-extension";
+
+const originalDocument = globalThis.document;
+
+beforeEach(() => {
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: { body: {} },
+  });
+});
+
+afterEach(() => {
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: originalDocument,
+  });
+});
+
+describe("prompt syntax enhancements", () => {
+  test("declares variables and template tags as independent visual rules", () => {
+    expect(PROMPT_VARIABLE_HIGHLIGHT).toMatchObject({
+      kind: "regex-highlight",
+      id: "prompt-variable-highlight",
+      className: "cm-prompt-variable",
+      priority: 10,
+    });
+    expect(PROMPT_TEMPLATE_TAG_HIGHLIGHT).toMatchObject({
+      kind: "regex-highlight",
+      id: "prompt-template-tag-highlight",
+      className: "cm-template-tag",
+      priority: 20,
+    });
+
+    const source = "{{current_date}} {% if enabled %}";
+    expect(
+      collectStaticDecorations(source, [
+        PROMPT_VARIABLE_HIGHLIGHT,
+        PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+      ])
+    ).toEqual([
+      {
+        from: 0,
+        to: 16,
+        priority: 10,
+        style: { color: "var(--cm-variable)", fontWeight: "500" },
+      },
+      {
+        from: 17,
+        to: source.length,
+        priority: 20,
+        style: { color: "var(--cm-template-tag)", fontWeight: "500" },
+      },
+    ]);
+  });
+
+  test("keeps hover and completion extensions out of Static decorations", () => {
+    let resolverCalls = 0;
+    let listerCalls = 0;
+    const editing = createPromptSyntaxEditingEnhancement({
+      resolve: () => {
+        resolverCalls += 1;
+        return { status: "ok", value: "2026-08-11" };
+      },
+      listVariables: () => {
+        listerCalls += 1;
+        return [];
+      },
+    });
+    const enhancements: EditorEnhancement[] = [
+      PROMPT_VARIABLE_HIGHLIGHT,
+      PROMPT_TEMPLATE_TAG_HIGHLIGHT,
+      editing,
+    ];
+
+    expect(editing.kind).toBe("code-mirror-only");
+    if (editing.kind !== "code-mirror-only") {
+      throw new Error("Expected a CodeMirror-only enhancement");
+    }
+    expect(editing.extensions).toHaveLength(4);
+    expect(collectStaticDecorations("{{current_date}}", enhancements)).toEqual([
+      {
+        from: 0,
+        to: 16,
+        priority: 10,
+        style: { color: "var(--cm-variable)", fontWeight: "500" },
+      },
+    ]);
+    expect(resolverCalls).toBe(0);
+    expect(listerCalls).toBe(0);
+  });
+
+  test.each([
+    ["{{", ["current_date", "@include"]],
+    ["{{@", ["@include"]],
+    [
+      "{%",
+      ["if", "elif", "else", "endif", "for", "endfor", "set", "raw", "endraw"],
+    ],
+  ])("offers the expected completions after %s", async (doc, labels) => {
+    const source = createPromptCompletionSource(() => [
+      { name: "current_date", hint: "Current date" },
+    ]);
+    const state = EditorState.create({
+      doc,
+      selection: { anchor: doc.length },
+    });
+    const result = await source(
+      new CompletionContext(state, state.selection.main.head, true)
+    );
+
+    expect(result?.options.map((option) => option.label)).toEqual(labels);
+  });
+});
diff --git a/scripts/thread-view-performance-benchmark.mjs b/scripts/thread-view-performance-benchmark.mjs
new file mode 100644
index 00000000..905987e0
--- /dev/null
+++ b/scripts/thread-view-performance-benchmark.mjs
@@ -0,0 +1,676 @@
+#!/usr/bin/env bun
+/* global Bun */
+
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+const args = Bun.argv.slice(2);
+const label = readFlag("--label", "benchmark");
+const outputPath = readFlag(
+  "--output",
+  join(tmpdir(), `llm-space-thread-view-${label}.json`)
+);
+const smoke = readFlag("--smoke", null);
+const samples = Number(readFlag("--samples", smoke ? "1" : "5"));
+const port = 9400 + (process.pid % 200);
+const root = await mkdtemp(join(tmpdir(), "llm-space-thread-view-"));
+const workspace = join(root, "workspace");
+let child;
+
+try {
+  await mkdir(workspace, { recursive: true });
+  for (let index = 1; index <= 10; index += 1) {
+    await writeFile(
+      join(workspace, `benchmark-${String(index).padStart(2, "0")}.json`),
+      JSON.stringify(createThread(index), null, 2)
+    );
+  }
+
+  child = Bun.spawn(["mise", "run", "dev:cef"], {
+    cwd: process.cwd(),
+    detached: true,
+    env: {
+      ...process.env,
+      LLM_SPACE_HOME: root,
+      LLM_SPACE_DESKTOP_CDP_PORT: String(port),
+    },
+    stdin: "ignore",
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  const logs = collectLogs(child);
+  await waitForCdp(port, child, logs);
+  const cdp = await CdpClient.connect(port);
+  try {
+    await prepareApp(cdp);
+    await openFixtureThreads(cdp);
+
+    if (smoke === "dropdowns") {
+      const dropdowns = await smokeDropdowns(cdp);
+      const result = { label, smoke, dropdowns };
+      await Bun.write(outputPath, JSON.stringify(result, null, 2));
+      if (!dropdownPasses(dropdowns.toolsAdd) || !dropdownPasses(dropdowns.examples)) {
+        throw new Error(
+          `Dropdown smoke expected non-modal menus: ${JSON.stringify(result)}`
+        );
+      }
+      console.info(JSON.stringify({ outputPath, ...result }, null, 2));
+      process.exitCode = 0;
+    } else if (smoke === "on-demand") {
+      const onDemand = await measureMode(cdp, "on-demand", 0);
+      const result = { label, smoke, onDemand };
+      await Bun.write(outputPath, JSON.stringify(result, null, 2));
+      if (!onDemand.activation?.restoresStaticPreview) {
+        throw new Error(`On Demand lifecycle smoke failed: ${JSON.stringify(result)}`);
+      }
+      console.info(JSON.stringify({ outputPath, ...result }, null, 2));
+    } else {
+      const full = await measureMode(cdp, "rich", samples);
+      const fast = await measureMode(cdp, "lite", samples);
+      const onDemand = await measureMode(cdp, "on-demand", samples);
+      const tabSwitches = await measureTabSwitches(cdp, samples);
+      const result = {
+        label,
+        baseCommit: await git("rev-parse", "main"),
+        benchmarkCommit: await git("rev-parse", "HEAD"),
+        renderer: "cef",
+        fixture: { threads: 10, messagesPerThread: 54 },
+        samples,
+        full,
+        fast,
+        onDemand,
+        tabSwitches,
+      };
+      await Bun.write(outputPath, JSON.stringify(result, null, 2));
+      console.info(JSON.stringify({ outputPath, ...result }, null, 2));
+    }
+  } finally {
+    cdp.close();
+  }
+} finally {
+  if (child) await stopChild(child);
+  await rm(root, { recursive: true, force: true });
+}
+
+function createThread(threadIndex) {
+  const messages = Array.from({ length: 54 }, (_, index) => ({
+    id: `benchmark-${threadIndex}-message-${index + 1}`,
+    role: index % 2 === 0 ? "user" : "assistant",
+    content: [
+      {
+        type: "text",
+        text: [
+          `## Benchmark message ${index + 1}`,
+          "",
+          "A deterministic paragraph with **Markdown**, `inline code`, and a template variable {{current_date}}.",
+          "",
+          "```json",
+          JSON.stringify({ thread: threadIndex, message: index + 1 }),
+          "```",
+        ].join("\n"),
+      },
+    ],
+  }));
+  return {
+    title: `benchmark-${String(threadIndex).padStart(2, "0")}`,
+    context: {
+      systemPrompt: "You are a deterministic performance fixture.",
+      messages,
+    },
+  };
+}
+
+async function prepareApp(cdp) {
+  await cdp.evaluate(`(() => {
+    localStorage.setItem("llm-space-rendering-fidelity", "lite");
+    localStorage.setItem("llm-space:thread-view-cache-size", "3");
+    localStorage.removeItem("llm-space:open-app-tabs");
+    localStorage.removeItem("llm-space:active-tab");
+    location.reload();
+    return true;
+  })()`);
+  await waitFor(cdp, `document.readyState === "complete"`, 10_000);
+  await sleep(500);
+  await dismissDialogs(cdp);
+}
+
+async function dismissDialogs(cdp) {
+  await cdp.evaluate(`(async () => {
+    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    for (let attempt = 0; attempt < 10; attempt += 1) {
+      const dialog = document.querySelector('[role="dialog"]');
+      if (dialog) {
+        const close = dialog.querySelector('[data-slot="dialog-close"]') ??
+          dialog.querySelector('[aria-label="Close onboarding"]') ??
+          [...dialog.querySelectorAll("button")]
+            .find((button) => button.textContent?.trim() === "Close");
+        close?.click();
+      }
+      await sleep(200);
+    }
+    return !document.querySelector('[role="dialog"]');
+  })()`);
+}
+
+async function openFixtureThreads(cdp) {
+  for (let index = 1; index <= 10; index += 1) {
+    const title = `benchmark-${String(index).padStart(2, "0")}`;
+    await waitFor(
+      cdp,
+      `document.querySelector('[aria-label="${title}"]') !== null`,
+      15_000
+    );
+    await cdp.evaluate(
+      `document.querySelector('[aria-label="${title}"]')?.click()`
+    );
+    await waitFor(
+      cdp,
+      `document.querySelector('[aria-label="Close ${title}"]') !== null`,
+      15_000
+    );
+  }
+  await waitFor(
+    cdp,
+    `document.querySelector('[data-thread-view-pane-id]:not(.hidden)')?.querySelectorAll('[data-message-id]').length >= 54`,
+    20_000
+  );
+}
+
+async function measureMode(cdp, mode, sampleCount) {
+  await cdp.evaluate(`(() => {
+    localStorage.setItem("llm-space-rendering-fidelity", ${JSON.stringify(mode)});
+    location.reload();
+    return true;
+  })()`);
+  await waitFor(cdp, `document.readyState === "complete"`, 10_000);
+  await dismissDialogs(cdp);
+  await waitFor(
+    cdp,
+    `document.querySelector('[data-thread-view-pane-id]:not(.hidden)')?.querySelectorAll('[data-message-id]').length >= 54`,
+    30_000
+  );
+  if (mode === "rich") {
+    await waitFor(cdp, `document.querySelectorAll('.cm-editor').length > 0`, 30_000);
+  } else if (mode === "on-demand") {
+    await waitFor(cdp, `document.querySelectorAll('[data-on-demand-preview]').length > 0`, 30_000);
+  } else {
+    await waitFor(cdp, `document.querySelectorAll('textarea').length > 0`, 30_000);
+  }
+  await warmThreadViewCache(cdp);
+  await sleep(500);
+  const counts = await cdp.evaluate(`(() => ({
+    dom: document.querySelectorAll("*").length,
+    codeMirror: document.querySelectorAll(".cm-editor").length,
+    textareas: document.querySelectorAll("textarea").length,
+    onDemandPreviews: document.querySelectorAll("[data-on-demand-preview]").length,
+    messages: document.querySelectorAll("[data-message-id]").length,
+    mountedThreadViews: document.querySelectorAll("[data-thread-view-pane-id]").length,
+  }))()`);
+  const metrics = {};
+  for (const target of ["settings", "toolsAdd", "examples", "variables"]) {
+    const values = [];
+    for (let index = 0; index < sampleCount; index += 1) {
+      values.push(await measureOverlay(cdp, target));
+      await sleep(120);
+    }
+    metrics[target] = summarize(values);
+  }
+  await dismissDialogs(cdp);
+  const activation =
+    mode === "on-demand" ? await measureOnDemandActivation(cdp) : null;
+  return { counts, metrics, activation };
+}
+
+async function measureOnDemandActivation(cdp) {
+  return cdp.evaluate(`(async () => {
+    const activeView = document.querySelector('[data-thread-view-pane-id]:not(.hidden)');
+    const preview = activeView?.querySelector('[data-on-demand-preview]');
+    if (!preview) return null;
+    const editorsBefore = new Set(activeView.querySelectorAll('.cm-editor'));
+    const previewCountBefore = document.querySelectorAll(
+      '[data-on-demand-preview]'
+    ).length;
+    const started = performance.now();
+    preview.dispatchEvent(new PointerEvent("pointerdown", {
+      bubbles: true,
+      button: 0,
+      pointerType: "mouse",
+    }));
+    let activatedEditor;
+    while (!(activatedEditor = [...activeView.querySelectorAll('.cm-editor')]
+      .find((editor) => !editorsBefore.has(editor)))) {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    const result = {
+      clickToEditor: performance.now() - started,
+      codeMirrorWhileEditing: document.querySelectorAll('.cm-editor').length,
+    };
+    const editorContent = activatedEditor.querySelector('.cm-content');
+    editorContent?.focus();
+    result.focused = document.activeElement === editorContent;
+    editorContent?.blur();
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    result.codeMirrorAfterBlur = document.querySelectorAll('.cm-editor').length;
+    result.previewsAfterBlur = document.querySelectorAll('[data-on-demand-preview]').length;
+    result.restoresStaticPreview =
+      result.focused &&
+      result.codeMirrorAfterBlur === result.codeMirrorWhileEditing - 1 &&
+      result.previewsAfterBlur === previewCountBefore;
+    return result;
+  })()`);
+}
+
+async function warmThreadViewCache(cdp) {
+  for (const threadIndex of [8, 9, 10]) {
+    await measureTabSwitch(cdp, threadIndex);
+  }
+}
+
+async function measureTabSwitches(cdp, sampleCount) {
+  const cached = [];
+  for (let index = 0; index < sampleCount; index += 1) {
+    cached.push(await measureTabSwitch(cdp, index % 2 === 0 ? 9 : 10));
+  }
+  const evicted = [];
+  for (let index = 0; index < sampleCount; index += 1) {
+    evicted.push(await measureTabSwitch(cdp, index + 1));
+  }
+  return {
+    cached: summarize(cached),
+    evicted: summarize(evicted),
+    mountedViewsAfter: await cdp.evaluate(
+      `document.querySelectorAll('[data-thread-view-pane-id]').length`
+    ),
+  };
+}
+
+async function measureTabSwitch(cdp, threadIndex) {
+  return cdp.evaluate(`(async () => {
+    const threadIndex = ${JSON.stringify(threadIndex)};
+    const title = "benchmark-" + String(threadIndex).padStart(2, "0");
+    const trigger = document.querySelector('[aria-label="' + title + '"]');
+    if (!trigger) return -1;
+    const started = performance.now();
+    trigger.click();
+    while (!document
+      .querySelector('[data-thread-view-pane-id]:not(.hidden)')
+      ?.querySelector('[data-message-id^="benchmark-' + threadIndex + '-message-"]')) {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    return performance.now() - started;
+  })()`);
+}
+
+async function measureOverlay(cdp, target) {
+  return cdp.evaluate(`(async () => {
+    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    const fire = (element) => {
+      for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click"]) {
+        const EventType = type.startsWith("pointer") ? PointerEvent : MouseEvent;
+        element.dispatchEvent(new EventType(type, {
+          bubbles: true,
+          button: 0,
+          buttons: type.endsWith("down") ? 1 : 0,
+          pointerType: "mouse",
+        }));
+      }
+    };
+    const closeOpen = () => {
+      const dialog = document.querySelector('[role="dialog"]');
+      const close = dialog && [...dialog.querySelectorAll("button")]
+        .find((button) => button.textContent?.trim() === "Close");
+      const closeSlot = dialog?.querySelector('[data-slot="dialog-close"]');
+      (closeSlot ?? close)?.click();
+      const openMenu = document.querySelector('[data-slot="dropdown-menu-content"]');
+      if (openMenu) {
+        const target = document.activeElement ?? document;
+        target.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+        target.dispatchEvent(new KeyboardEvent("keyup", { key: "Escape", bubbles: true }));
+      }
+    };
+    closeOpen();
+    await sleep(100);
+    const target = ${JSON.stringify(target)};
+    const activeView = document.querySelector('[data-thread-view-pane-id]:not(.hidden)');
+    let trigger;
+    let selector;
+    if (target === "settings") {
+      trigger = document.querySelector('[aria-label="Settings"]');
+      selector = '[role="dialog"]';
+    } else if (target === "toolsAdd") {
+      trigger = [...activeView.querySelectorAll('button[data-slot="dropdown-menu-trigger"]')]
+        .find((button) => button.textContent?.trim() === "Add");
+      selector = '[data-slot="dropdown-menu-content"]';
+    } else if (target === "examples") {
+      trigger = [...activeView.querySelectorAll('button[data-slot="dropdown-menu-trigger"]')]
+        .find((button) => button.textContent?.trim() === "Examples");
+      selector = '[data-slot="dropdown-menu-content"]';
+    } else {
+      trigger = [...activeView.querySelectorAll("button")]
+        .find((button) => button.textContent?.trim() === "Add" && button.dataset.slot === "button");
+      selector = '[role="dialog"]';
+    }
+    if (!trigger) return -1;
+    const started = performance.now();
+    const mounted = new Promise((resolve) => {
+      let settled = false;
+      const finish = () => {
+        if (settled || !document.querySelector(selector)) return;
+        settled = true;
+        observer.disconnect();
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+          resolve(performance.now() - started);
+        }));
+      };
+      const observer = new MutationObserver(finish);
+      observer.observe(document.body, { subtree: true, childList: true, attributes: true });
+      setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        observer.disconnect();
+        resolve(-1);
+      }, 3000);
+    });
+    if (target === "settings" || target === "variables") trigger.click();
+    else fire(trigger);
+    return mounted;
+  })()`);
+}
+
+async function smokeDropdowns(cdp) {
+  return cdp.evaluate(`(async () => {
+    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    const fire = (element) => {
+      for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click"]) {
+        const EventType = type.startsWith("pointer") ? PointerEvent : MouseEvent;
+        element.dispatchEvent(new EventType(type, { bubbles: true, button: 0, pointerType: "mouse" }));
+      }
+    };
+    const inspect = async (label) => {
+      const activeView = document.querySelector('[data-thread-view-pane-id]:not(.hidden)');
+      const trigger = [...activeView.querySelectorAll('button[data-slot="dropdown-menu-trigger"]')]
+        .find((button) => button.textContent?.trim() === label);
+      const appRoot = document.querySelector("#root") ?? document.body.firstElementChild;
+      const before = {
+        rootAriaHidden: appRoot?.getAttribute("aria-hidden"),
+        bodyOverflow: getComputedStyle(document.body).overflow,
+        bodyInlineOverflow: document.body.style.overflow,
+        bodyScrollLocked: document.body.hasAttribute("data-scroll-locked"),
+      };
+      trigger.focus();
+      const triggerFocusedBeforeOpen = document.activeElement === trigger;
+      fire(trigger);
+      await sleep(100);
+      const menu = document.querySelector('[data-slot="dropdown-menu-content"]');
+      const activeAfterOpen = document.activeElement?.textContent?.trim() ?? null;
+      const after = {
+        rootAriaHidden: appRoot?.getAttribute("aria-hidden"),
+        bodyOverflow: getComputedStyle(document.body).overflow,
+        bodyInlineOverflow: document.body.style.overflow,
+        bodyScrollLocked: document.body.hasAttribute("data-scroll-locked"),
+      };
+      const result = {
+        opens: Boolean(menu),
+        nonModal:
+          after.rootAriaHidden !== "true" &&
+          !after.bodyScrollLocked &&
+          after.bodyInlineOverflow === before.bodyInlineOverflow,
+        before,
+        after,
+        documentFocused: document.hasFocus(),
+        triggerFocusedBeforeOpen,
+        activeAfterOpen,
+      };
+      const escapeTarget = document.activeElement ?? menu ?? document;
+      escapeTarget.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      escapeTarget.dispatchEvent(new KeyboardEvent("keyup", { key: "Escape", bubbles: true }));
+      await sleep(150);
+      result.escapeRestoresTrigger = document.activeElement === trigger;
+      result.activeAfterEscape = document.activeElement?.textContent?.trim() ?? null;
+      result.escapeCloses = !document.querySelector('[data-slot="dropdown-menu-content"]');
+
+      trigger.focus();
+      trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+      await sleep(100);
+      const keyboardMenu = document.querySelector('[data-slot="dropdown-menu-content"]');
+      const initialKeyboardFocus = document.activeElement;
+      initialKeyboardFocus?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true })
+      );
+      await sleep(50);
+      const firstItemFocus = document.activeElement;
+      firstItemFocus?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true })
+      );
+      await sleep(50);
+      const secondItemFocus = document.activeElement;
+      result.keyboardOpens = Boolean(keyboardMenu);
+      result.keyboardFocusesMenu = Boolean(
+        keyboardMenu?.contains(firstItemFocus)
+      );
+      result.arrowNavigation =
+        firstItemFocus !== secondItemFocus &&
+        Boolean(keyboardMenu?.contains(secondItemFocus));
+      secondItemFocus?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      );
+      await sleep(150);
+      result.keyboardEscapeRestoresTrigger = document.activeElement === trigger;
+
+      trigger.focus();
+      fire(trigger);
+      await sleep(100);
+      activeView.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0, pointerType: "mouse" })
+      );
+      await sleep(100);
+      result.outsideDismisses = !document.querySelector(
+        '[data-slot="dropdown-menu-content"]'
+      );
+
+      trigger.focus();
+      fire(trigger);
+      await sleep(100);
+      const selectionMenu = document.querySelector('[data-slot="dropdown-menu-content"]');
+      const selection = label === "Add"
+        ? [...selectionMenu.querySelectorAll('[data-slot="dropdown-menu-item"]')]
+            .find((item) => item.textContent?.trim() === "Add Custom Function Tool")
+        : selectionMenu.querySelector('[data-slot="dropdown-menu-item"]');
+      selection?.click();
+      await sleep(150);
+      if (label === "Add") {
+        const dialog = document.querySelector('[role="dialog"]');
+        result.selectionWorks = Boolean(dialog);
+        result.dialogOwnsFocus = Boolean(dialog?.contains(document.activeElement));
+        dialog?.querySelector('[data-slot="dialog-close"]')?.click();
+        await sleep(100);
+      } else {
+        result.selectionWorks = !document.querySelector(
+          '[data-slot="dropdown-menu-content"]'
+        );
+        result.dialogOwnsFocus = true;
+      }
+      return result;
+    };
+    return { toolsAdd: await inspect("Add"), examples: await inspect("Examples") };
+  })()`);
+}
+
+function dropdownPasses(result) {
+  return (
+    result.opens &&
+    result.nonModal &&
+    result.escapeCloses &&
+    result.escapeRestoresTrigger &&
+    result.keyboardOpens &&
+    result.keyboardFocusesMenu &&
+    result.arrowNavigation &&
+    result.keyboardEscapeRestoresTrigger &&
+    result.outsideDismisses &&
+    result.selectionWorks &&
+    result.dialogOwnsFocus
+  );
+}
+
+function summarize(values) {
+  const valid = values.filter((value) => Number.isFinite(value) && value >= 0);
+  valid.sort((left, right) => left - right);
+  if (valid.length === 0) return { samples: values, median: null, max: null };
+  return {
+    samples: values,
+    median: valid[Math.floor(valid.length / 2)],
+    max: valid.at(-1),
+  };
+}
+
+async function waitFor(cdp, expression, timeout) {
+  const started = Date.now();
+  while (Date.now() - started < timeout) {
+    if (await cdp.evaluate(`Boolean(${expression})`)) return;
+    await sleep(100);
+  }
+  throw new Error(`Timed out waiting for: ${expression}`);
+}
+
+async function waitForCdp(cdpPort, processHandle, logs) {
+  const started = Date.now();
+  while (Date.now() - started < 90_000) {
+    if (processHandle.exitCode !== null) {
+      throw new Error(`Desktop exited before CDP was ready:\n${logs.join("")}`);
+    }
+    try {
+      const response = await fetch(`http://127.0.0.1:${cdpPort}/json/list`);
+      if (response.ok) {
+        const targets = await response.json();
+        if (targets.some(isAppTarget)) return;
+      }
+    } catch {
+      // App is still starting.
+    }
+    await sleep(250);
+  }
+  throw new Error(`Timed out waiting for CDP on ${cdpPort}:\n${logs.join("")}`);
+}
+
+function collectLogs(processHandle) {
+  const chunks = [];
+  for (const stream of [processHandle.stdout, processHandle.stderr]) {
+    void (async () => {
+      for await (const chunk of stream) {
+        chunks.push(new TextDecoder().decode(chunk));
+        if (chunks.length > 200) chunks.shift();
+      }
+    })();
+  }
+  return chunks;
+}
+
+async function stopChild(processHandle) {
+  try {
+    process.kill(-processHandle.pid, "SIGINT");
+  } catch {
+    if (processHandle.exitCode === null) processHandle.kill("SIGINT");
+  }
+  await Promise.race([processHandle.exited, sleep(5_000)]);
+  try {
+    process.kill(-processHandle.pid, "SIGTERM");
+  } catch {
+    if (processHandle.exitCode === null) processHandle.kill("SIGTERM");
+  }
+  await Promise.race([processHandle.exited, sleep(2_000)]);
+}
+
+async function git(...gitArgs) {
+  const processHandle = Bun.spawn(["git", ...gitArgs], {
+    cwd: process.cwd(),
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  const output = await new Response(processHandle.stdout).text();
+  const error = await new Response(processHandle.stderr).text();
+  if ((await processHandle.exited) !== 0) throw new Error(error);
+  return output.trim();
+}
+
+function readFlag(name, fallback) {
+  const index = args.indexOf(name);
+  return index === -1 ? fallback : (args[index + 1] ?? fallback);
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+class CdpClient {
+  static async connect(cdpPort) {
+    const targets = await fetch(`http://127.0.0.1:${cdpPort}/json/list`).then(
+      (response) => response.json()
+    );
+    const candidates = targets.filter(isAppTarget).reverse();
+    for (const target of candidates) {
+      if (!target.webSocketDebuggerUrl) continue;
+      const client = new CdpClient(target.webSocketDebuggerUrl);
+      await client.ready;
+      await client.send("Runtime.enable");
+      await client.send("Page.enable");
+      await client.send("Page.bringToFront");
+      const accessible = await client.evaluate(`(() => {
+        try { void localStorage.length; return location.href; }
+        catch { return null; }
+      })()`);
+      if (accessible) return client;
+      client.close();
+    }
+    throw new Error(`No accessible CDP app target: ${JSON.stringify(candidates)}`);
+  }
+
+  constructor(url) {
+    this.socket = new WebSocket(url);
+    this.pending = new Map();
+    this.nextId = 1;
+    this.ready = new Promise((resolve, reject) => {
+      this.socket.onopen = resolve;
+      this.socket.onerror = reject;
+    });
+    this.socket.onmessage = (event) => {
+      const message = JSON.parse(String(event.data));
+      const resolve = this.pending.get(message.id);
+      if (!resolve) return;
+      this.pending.delete(message.id);
+      resolve(message);
+    };
+  }
+
+  send(method, params = {}) {
+    const id = this.nextId++;
+    this.socket.send(JSON.stringify({ id, method, params }));
+    return new Promise((resolve) => this.pending.set(id, resolve));
+  }
+
+  async evaluate(expression) {
+    const message = await this.send("Runtime.evaluate", {
+      expression,
+      awaitPromise: true,
+      returnByValue: true,
+    });
+    if (message.error || message.result?.exceptionDetails) {
+      throw new Error(JSON.stringify(message.error ?? message.result.exceptionDetails));
+    }
+    return message.result.result.value;
+  }
+
+  close() {
+    this.socket.close();
+  }
+}
+
+function isAppTarget(target) {
+  return (
+    target.type === "page" &&
+    target.url?.startsWith("http://localhost:5173") &&
+    target.title?.includes("LLM Space")
+  );
+}