dsh-vscode-workbench 0.2.4 → 0.2.5

package/lib/types/client/DshBrowserPage.d.ts

@@ -0,0 +1,6 @@
+export declare function DshBrowserPage({ sessionId, tabId, active, colorScheme }: {
+    sessionId: string;
+    tabId: string;
+    active: boolean;
+    colorScheme: 'dark' | 'light' | 'white' | 'eyecare';
+}): null;

package/lib/types/client/DshPanelPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pin a DSH global panel over the workbench editor while its tab is active.
+ * The official page keeps its own DOM and state; switching to a file only
+ * hides it, so returning to the tab does not rebuild the page.
+ */
+export declare function DshPanelPage({ panelId, active }: {
+    panelId: string;
+    active: boolean;
+}): null;

package/lib/types/client/Icon.d.ts

@@ -1,4 +1,4 @@
-export type CodiconName = 'add' | 'arrow-right' | 'comment-discussion' | 'check' | 'check-all' | 'chevron-down' | 'chevron-right' | 'close' | 'close-all' | 'cloud-upload' | 'code' | 'color-mode' | 'edit' | 'diff' | 'diff-sidebyside' | 'diff-single' | 'discard' | 'file' | 'file-code' | 'file-media' | 'file-pdf' | 'file-zip' | 'files' | 'folder' | 'folder-opened' | 'git-branch' | 'git-commit' | 'graph' | 'home' | 'list-tree' | 'new-file' | 'layout-sidebar-right' | 'layout-sidebar-right-off' | 'new-folder' | 'preview' | 'refresh' | 'remove' | 'search' | 'settings' | 'source-control' | 'sparkle' | 'split-horizontal' | 'terminal' | 'trash';
+export type CodiconName = 'add' | 'arrow-right' | 'comment-discussion' | 'check' | 'check-all' | 'chevron-down' | 'chevron-right' | 'close' | 'close-all' | 'cloud-upload' | 'code' | 'color-mode' | 'edit' | 'diff' | 'diff-sidebyside' | 'diff-single' | 'discard' | 'file' | 'file-code' | 'file-media' | 'file-pdf' | 'file-zip' | 'files' | 'folder' | 'folder-opened' | 'git-branch' | 'git-commit' | 'globe' | 'graph' | 'home' | 'list-tree' | 'new-file' | 'layout-sidebar-right' | 'layout-sidebar-right-off' | 'new-folder' | 'preview' | 'refresh' | 'remove' | 'search' | 'settings' | 'source-control' | 'sparkle' | 'split-horizontal' | 'terminal' | 'trash';
 /** Render one glyph from Microsoft's VS Code Codicon font. */
 export declare function Icon({ name, className }: {
     name: CodiconName;

package/lib/types/client/TerminalPanel.d.ts

@@ -1,3 +1,6 @@
 import type { BottomPanelProps } from './service.ts';
-/** Render interactive terminal tabs in the workbench bottom panel. */
-export declare function TerminalPanel({ sessionId, colorScheme }: BottomPanelProps): import("react").JSX.Element;
+import { type TerminalWorkspaceController } from './terminal.ts';
+/** Keep the incumbent terminal layout while using the official process and stream models. */
+export declare function TerminalPanel({ workspace, colorScheme }: BottomPanelProps & {
+    workspace: TerminalWorkspaceController;
+}): import("react").JSX.Element;

package/lib/types/client/Workbench.d.ts

@@ -1,5 +1,6 @@
 import type { FileDocument, GitCommit, GitDiff } from '../types.ts';
 import type { VscodeWorkbench } from './service.ts';
+import type { NativeBrowser } from './browser.ts';
 import type { DshNavigation } from './dshNavigation.ts';
 import { type DocumentPreviewKind } from './documentPreview.tsx';
 interface Tab extends FileDocument {
@@ -80,10 +81,15 @@ export declare function graphRows(commits: GitCommit[]): GraphRow[];
 export declare function graphTrackPath(from: number, to: number, startY: number, endY: number, bendY: number): string;
 /** Leave the node horizontally and turn down into a parent lane with a lane-width arc. */
 export declare function graphParentPath(from: number, to: number, midY: number, endY: number): string;
-export declare function Workbench({ service, sessionId, cwd, navigation }: {
+export declare function Workbench({ service, browser, sessionId, cwd, navigation, dshPanelId: hostDshPanelId, onOpenDshPanel, onRestoreConversation, onCloseDshPanel }: {
     service: VscodeWorkbench;
+    browser?: NativeBrowser;
     sessionId?: string;
     cwd?: string;
     navigation?: DshNavigation;
+    dshPanelId?: string;
+    onOpenDshPanel?(panelId: string): void;
+    onRestoreConversation?(): void;
+    onCloseDshPanel?(): void;
 }): import("react").JSX.Element | null;
 export {};

package/lib/types/client/browser.d.ts

@@ -0,0 +1,26 @@
+import type { Context } from '@deepseek-ai/cordis';
+export interface BrowserTab {
+    id: string;
+    sessionId: string;
+    title: string;
+}
+export interface BrowserSnapshot {
+    available: boolean;
+    tabs: readonly BrowserTab[];
+}
+/** Navigate official browser tabs; their controller, renderer and persistence stay with DSH. */
+export declare class NativeBrowser {
+    private readonly ctx;
+    private snapshot;
+    private readonly listeners;
+    private readonly lifetime;
+    private readonly disposers;
+    constructor(ctx: Context);
+    getSnapshot: () => BrowserSnapshot;
+    subscribe: (listener: () => void) => (() => void);
+    open(sessionId: string, request?: AbortSignal): Promise<string>;
+    focus(id: string): void;
+    close(sessionId: string, id: string): void;
+    dispose(): void;
+    private update;
+}

package/lib/types/client/dshPanels.d.ts

@@ -0,0 +1,4 @@
+/** Locate the central panel DSH renders when a global panel (Plugins, market…) is open. */
+export declare function findDshGlobalPanel(documentRoot?: Document): HTMLElement | null;
+/** Tab-style label for an embedded DSH panel; unknown ids keep their own name. */
+export declare function dshPanelLabel(id: string): string;

package/lib/types/client/shortcuts.d.ts

@@ -5,3 +5,5 @@ export declare function openTerminal(workbench: VscodeWorkbench): boolean;
 export declare function toggleTerminal(workbench: VscodeWorkbench): boolean;
 /** Handle terminal shortcuts through contributions registered by a terminal adapter. */
 export declare function handleTerminalShortcut(event: KeyboardEvent, workbench: VscodeWorkbench): boolean;
+/** Match the official desktop browser shortcut while the workbench owns focus. */
+export declare function handleBrowserShortcut(event: KeyboardEvent, workbench: VscodeWorkbench): boolean;

package/lib/types/client/terminal.d.ts

@@ -1,44 +1,49 @@
-import type { TerminalInfo } from '../terminal.ts';
-export interface TerminalConnection {
-    write(data: string): void;
-    resize(cols: number, rows: number): void;
-    close(): void;
-    subscribe(listener: (output: {
-        sequence: number;
-        data: string;
-        replay?: boolean;
-    }) => void): () => void;
-    subscribeError(listener: (message: string) => void): () => void;
+import type { ClientTerminals, TerminalView, TerminalViewState } from '@deepseek-ai/dsh-api-terminal-controller/client';
+export interface TerminalEntry {
+    id: string;
+    title: string;
 }
 export interface TerminalWorkspaceSnapshot {
-    terminals: readonly TerminalInfo[];
+    terminals: readonly TerminalEntry[];
     loading: boolean;
     error?: string;
 }
-/** Browser client for the workbench's local terminal transport. */
-export interface TerminalWorkspace {
-    refresh(): Promise<boolean>;
-    create(title?: string): Promise<TerminalInfo>;
-    close(id: string): Promise<void>;
-    rename(id: string, title: string): Promise<void>;
-    connect(id: string): TerminalConnection;
-    getSnapshot(): TerminalWorkspaceSnapshot;
-    subscribe(listener: () => void): () => void;
+/** Own workbench membership without overwriting the official sidebar's terminal inventory. */
+export declare class TerminalWorkspaces {
+    readonly models: ClientTerminals;
+    private readonly workspaces;
+    private saved;
+    constructor(models: ClientTerminals);
+    get(sessionId: string): TerminalWorkspaceController;
+    save(sessionId: string, ids: string[]): void;
+    private readSaved;
+    private sync;
+    private onStorage;
+    private retain;
+    dispose(): void;
 }
-/** Identify automatic terminal-emulator replies that must not be echoed during replay. */
-export declare function isTerminalProtocolReply(data: string): boolean;
-/** Maintain one terminal collection for a DSH session. */
-export declare class TerminalWorkspaceController implements TerminalWorkspace {
-    private readonly sessionId;
+/** Layout only; the official model owns processes, stream ordering, recovery and input control. */
+export declare class TerminalWorkspaceController {
+    private readonly owner;
+    readonly sessionId: string;
+    readonly closeFailures: ClientTerminals['closeFailures'];
     private snapshot;
     private readonly listeners;
-    constructor(sessionId: string);
+    private readonly views;
+    constructor(owner: TerminalWorkspaces, sessionId: string, ids: readonly string[]);
+    view(id: string): TerminalView;
     refresh(): Promise<boolean>;
-    create(title?: string): Promise<TerminalInfo>;
-    close(id: string): Promise<void>;
+    create(): Promise<TerminalEntry>;
+    close(id: string): void;
     rename(id: string, title: string): Promise<void>;
-    connect(id: string): TerminalConnection;
-    getSnapshot(): TerminalWorkspaceSnapshot;
-    subscribe(listener: () => void): () => void;
+    retryClose(id: Parameters<ClientTerminals['retryClose']>[0]): void;
+    reconcile(ids: readonly string[]): void;
+    getSnapshot: () => TerminalWorkspaceSnapshot;
+    subscribe: (listener: () => void) => (() => void);
+    dispose(): void;
+    private save;
+    private updateTitles;
+    private fail;
     private set;
 }
+export declare function terminalIssue(state: TerminalViewState): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-workbench",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Explorer, Monaco editor, search and local Git overlay for DSH",
   "type": "module",
   "license": "MIT",
@@ -51,7 +51,12 @@
         "@deepseek-ai/dsh-client-ui-renderer",
         "@deepseek-ai/dsh-client-ui-session",
         "@deepseek-ai/dsh-client-ui-layout",
-        "@deepseek-ai/dsh-client-ui-sidebar"
+        "@deepseek-ai/dsh-client-ui-sidebar",
+        "@deepseek-ai/dsh-api-terminal-controller",
+        "@deepseek-ai/dsh-client-ui-sidebar-right"
+      ],
+      "external": [
+        "@deepseek-ai/dsh-api-terminal-controller/client"
       ]
     }
   },
@@ -66,7 +71,6 @@
     "dompurify": "^3.2.6",
     "marked": "^16.3.0",
     "monaco-editor": "^0.52.2",
-    "node-pty": "^1.1.0",
     "pdfjs-dist": "4.10.38",
     "vscode-icons-js": "^11.6.1",
     "ws": "^8.18.0",
@@ -75,11 +79,13 @@
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.5",
     "@deepseek-ai/dsh-api-session-controller": "^0.2.1-rc.5 || ^0.2.2-rc.1",
+    "@deepseek-ai/dsh-api-terminal-controller": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-connection": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-layout": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-renderer": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-session": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-sidebar": "^0.2.1-rc.5 || ^0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-sidebar-right": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-slots": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-host-webserver": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-llm": "^0.2.1-rc.5 || ^0.2.2-rc.1",
@@ -93,7 +99,9 @@
     "@deepseek-ai/cordis-plugin-group": "1.1.0",
     "@deepseek-ai/cordis-plugin-include": "1.1.0",
     "@deepseek-ai/cordis-plugin-loader": "1.1.0",
+    "@deepseek-ai/dsh-api-gateway": "0.2.2-rc.1",
     "@deepseek-ai/dsh-api-session-controller": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-api-terminal-controller": "0.2.2-rc.1",
     "@deepseek-ai/dsh-app-boot": "0.2.2-rc.1",
     "@deepseek-ai/dsh-client-connection": "0.2.2-rc.1",
     "@deepseek-ai/dsh-client-store": "0.2.2-rc.1",
@@ -101,6 +109,7 @@
     "@deepseek-ai/dsh-client-ui-renderer": "0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-session": "0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-sidebar": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-sidebar-right": "0.2.2-rc.1",
     "@deepseek-ai/dsh-client-ui-slots": "0.2.2-rc.1",
     "@deepseek-ai/dsh-host-webserver": "0.2.2-rc.1",
     "@deepseek-ai/dsh-llm": "0.2.2-rc.1",
@@ -111,12 +120,14 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@types/ws": "^8.18.0",
+    "immer": "^10.2.0",
     "jsdom": "29.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "tsdown": "^0.22.2",
     "typescript": "^5.9.0",
-    "vitest": "^4.0.0"
+    "vitest": "^4.0.0",
+    "zustand": "~4.5.7"
   },
   "scripts": {
     "clean": "node scripts/clean.mjs lib dist",

package/src/client/DshBrowserPage.tsx

@@ -0,0 +1,61 @@
+import { useLayoutEffect } from 'react'
+
+/** Present the original browser DOM without moving React-owned nodes or rebuilding webviews. */
+const PALETTE: Record<string, string> = {
+  '--dsw-alias-bg-base': '--dvw-surface-1', '--dsw-alias-bg-layer-1': '--dvw-surface-2',
+  '--dsw-alias-bg-layer-2': '--dvw-surface-3', '--dsw-alias-label-primary': '--dvw-text',
+  '--dsw-alias-label-secondary': '--dvw-text-2', '--dsw-alias-label-tertiary': '--dvw-text-3',
+  '--dsw-alias-border-l2': '--dvw-border', '--dsw-alias-border-l3': '--dvw-border-soft',
+  '--dsw-alias-interactive-bg-hover': '--dvw-hover', '--dsw-alias-interactive-bg-active': '--dvw-active',
+}
+
+export function DshBrowserPage({ sessionId, tabId, active, colorScheme }: { sessionId: string; tabId: string; active: boolean; colorScheme: 'dark' | 'light' | 'white' | 'eyecare' }) {
+  useLayoutEffect(() => {
+    let page: HTMLElement | undefined
+    let restore: (() => void) | undefined
+    let frame = 0
+    const place = () => {
+      const next = [...document.querySelectorAll<HTMLElement>('div[data-sidebar-right-tab]')].find(node => node.dataset.sidebarRightTab === tabId && node.closest('[data-sidebar-right-session]')?.getAttribute('data-sidebar-right-session') === sessionId)
+      if (next !== page) {
+        restore?.(); page = next
+        if (page !== undefined) {
+          const node = page
+          const popover = node.getAttribute('popover')
+          const properties = ['left', 'top', 'width', 'height', 'color-scheme', ...Object.keys(PALETTE)]
+          const styles = properties.map(property => [property, node.style.getPropertyValue(property), node.style.getPropertyPriority(property)])
+          node.setAttribute('popover', 'manual')
+          node.setAttribute('data-dvw-browser-page', '')
+          restore = () => {
+            if (node.matches(':popover-open')) node.hidePopover()
+            if (popover === null) node.removeAttribute('popover'); else node.setAttribute('popover', popover)
+            node.removeAttribute('data-dvw-browser-page')
+            for (const [property, value, priority] of styles) node.style.setProperty(property!, value!, priority)
+          }
+        }
+      }
+      if (page === undefined) return
+      const rect = document.querySelector('.dvw-editor')?.getBoundingClientRect()
+      const visible = active && rect !== undefined && rect.width > 0 && rect.height > 0
+      if (!visible) { if (page.matches(':popover-open')) page.hidePopover(); return }
+      for (const [property, value] of Object.entries({ left: rect.left, top: rect.top, width: rect.width, height: rect.height })) page.style.setProperty(property, `${Math.round(value)}px`, 'important')
+      const overlay = document.querySelector('.dvw-overlay')
+      if (overlay !== null) {
+        const palette = getComputedStyle(overlay)
+        for (const [alias, token] of Object.entries(PALETTE)) page.style.setProperty(alias, palette.getPropertyValue(token))
+      }
+      page.style.setProperty('color-scheme', colorScheme === 'dark' ? 'dark' : 'light')
+      // The top layer escapes dockkit clipping while keeping the original DOM parent and lease.
+      if (!page.matches(':popover-open')) page.showPopover()
+    }
+    const schedule = () => { if (frame === 0) frame = requestAnimationFrame(() => { frame = 0; place() }) }
+    place()
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule)
+    const editor = document.querySelector('.dvw-editor')
+    if (editor !== null) resize?.observe(editor)
+    const observer = new MutationObserver(schedule)
+    observer.observe(document.body, { childList: true, subtree: true })
+    window.addEventListener('resize', schedule)
+    return () => { observer.disconnect(); resize?.disconnect(); window.removeEventListener('resize', schedule); cancelAnimationFrame(frame); restore?.() }
+  }, [sessionId, tabId, active, colorScheme])
+  return null
+}

package/src/client/DshPanelPage.tsx

@@ -0,0 +1,63 @@
+import { useLayoutEffect, useRef } from 'react'
+import { findDshGlobalPanel } from './dshPanels.ts'
+
+/**
+ * Pin a DSH global panel over the workbench editor while its tab is active.
+ * The official page keeps its own DOM and state; switching to a file only
+ * hides it, so returning to the tab does not rebuild the page.
+ */
+export function DshPanelPage({ panelId, active }: { panelId: string; active: boolean }) {
+  const activeRef = useRef(active)
+  activeRef.current = active
+  useLayoutEffect(() => {
+    let panel: HTMLElement | null = null
+    let frame = 0
+    const clear = (node: HTMLElement) => {
+      node.removeAttribute('data-dvw-dsh-page')
+      node.removeAttribute('data-dvw-dsh-hidden')
+      for (const property of ['left', 'top', 'width', 'height']) node.style.removeProperty(property)
+    }
+    const place = () => {
+      const next = findDshGlobalPanel()
+      if (next !== panel) {
+        if (panel !== null) clear(panel)
+        panel = next
+        panel?.setAttribute('data-dvw-dsh-page', '')
+      }
+      if (panel === null) return
+      panel.toggleAttribute('data-dvw-dsh-hidden', !activeRef.current)
+      if (!activeRef.current) return
+      const editor = document.querySelector<HTMLElement>('.dvw-editor')
+      if (editor === null) return
+      const rect = editor.getBoundingClientRect()
+      if (rect.width <= 0 || rect.height <= 0) return
+      panel.style.setProperty('left', `${Math.round(rect.left)}px`)
+      panel.style.setProperty('top', `${Math.round(rect.top)}px`)
+      panel.style.setProperty('width', `${Math.round(rect.width)}px`)
+      panel.style.setProperty('height', `${Math.round(rect.height)}px`)
+    }
+    const schedule = () => {
+      if (frame !== 0) return
+      frame = requestAnimationFrame(() => { frame = 0; place() })
+    }
+    place()
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule)
+    const editor = document.querySelector<HTMLElement>('.dvw-editor')
+    if (editor !== null) resize?.observe(editor)
+    window.addEventListener('resize', schedule)
+    // The page may mount after this effect, or rebuild its subtree on navigation.
+    const observer = new MutationObserver(records => {
+      if (records.every(record => record.target instanceof Element && record.target.closest('.dvw-overlay') !== null)) return
+      schedule()
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => {
+      observer.disconnect()
+      resize?.disconnect()
+      cancelAnimationFrame(frame)
+      window.removeEventListener('resize', schedule)
+      if (panel !== null) clear(panel)
+    }
+  }, [panelId, active])
+  return null
+}

package/src/client/Icon.tsx

@@ -1,7 +1,7 @@
 export type CodiconName =
   | 'add' | 'arrow-right' | 'comment-discussion' | 'check' | 'check-all' | 'chevron-down' | 'chevron-right' | 'close' | 'close-all' | 'cloud-upload' | 'code' | 'color-mode' | 'edit'
   | 'diff' | 'diff-sidebyside' | 'diff-single' | 'discard' | 'file' | 'file-code' | 'file-media' | 'file-pdf' | 'file-zip'
-  | 'files' | 'folder' | 'folder-opened' | 'git-branch' | 'git-commit' | 'graph' | 'home' | 'list-tree' | 'new-file'
+  | 'files' | 'folder' | 'folder-opened' | 'git-branch' | 'git-commit' | 'globe' | 'graph' | 'home' | 'list-tree' | 'new-file'
   | 'layout-sidebar-right' | 'layout-sidebar-right-off' | 'new-folder' | 'preview' | 'refresh' | 'remove' | 'search' | 'settings' | 'source-control' | 'sparkle' | 'split-horizontal' | 'terminal' | 'trash'
 
 /** Render one glyph from Microsoft's VS Code Codicon font. */

package/src/client/TerminalPanel.tsx

@@ -1,57 +1,79 @@
-import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
 import { Icon } from './Icon.tsx'
 import type { BottomPanelProps } from './service.ts'
-import { isTerminalProtocolReply, TerminalWorkspaceController } from './terminal.ts'
+import { terminalIssue, type TerminalWorkspaceController } from './terminal.ts'
 
 // VS Code Light+ ANSI palette: the default xterm colors (e.g. yellow #e5e510) vanish on a light background.
 const LIGHT_ANSI = { black: '#000000', red: '#cd3131', green: '#107c10', yellow: '#949800', blue: '#0451a5', magenta: '#bc05bc', cyan: '#0598bc', white: '#555555', brightBlack: '#666666', brightRed: '#cd3131', brightGreen: '#14ce14', brightYellow: '#b5ba00', brightBlue: '#0451a5', brightMagenta: '#bc05bc', brightCyan: '#0598bc', brightWhite: '#a5a5a5' }
 function terminalTheme(colorScheme: 'dark' | 'light' | 'white' | 'eyecare') { return colorScheme === 'dark' ? { background: '#191a1b', foreground: '#bfbfbf', cursor: '#bfbfbf', selectionBackground: '#264f78' } : { background: '#ffffff', foreground: '#1d2025', cursor: '#4b515b', selectionBackground: '#add6ff', ...LIGHT_ANSI } }
 
-function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspaceController; id: string; colorScheme: 'dark' | 'light' | 'white' | 'eyecare' }) {
+function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspaceController; id: string; colorScheme: BottomPanelProps['colorScheme'] }) {
+  const model = workspace.view(id)
+  const state = useSyncExternalStore(model.state.subscribe, model.state.getSnapshot)
   const root = useRef<HTMLDivElement>(null)
-  const terminalRef = useRef<Terminal>()
-  const replaying = useRef(false)
-  const replayGuard = useRef<ReturnType<typeof setTimeout>>()
-  const [error, setError] = useState<string>()
-  useEffect(() => {
+  const screen = useRef<Terminal>()
+  const fit = useRef<FitAddon>()
+  const revision = useRef(0)
+  const current = useRef(state)
+  current.current = state
+  const measure = () => {
+    const node = root.current
+    const dimensions = fit.current?.proposeDimensions()
+    if (!node?.clientWidth || !node.clientHeight || !current.current.writable || dimensions === undefined) return
+    const cols = Math.min(dimensions.cols, current.current.environment?.maxCols ?? 500)
+    const rows = Math.min(dimensions.rows, current.current.environment?.maxRows ?? 200)
+    if (cols < 2 || rows < 1) return
+    screen.current?.resize(cols, rows)
+    model.resize(cols, rows)
+  }
+  useLayoutEffect(() => {
     if (root.current === null) return
-    const background = root.current === null ? undefined : getComputedStyle(root.current).backgroundColor
-    const terminal = new Terminal({ convertEol: false, cursorBlink: true, fontFamily: 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace', fontSize: 13, minimumContrastRatio: 4.5, theme: { ...terminalTheme(colorScheme), ...(background === undefined ? {} : { background }) } })
-    terminalRef.current = terminal
-    const fit = new FitAddon()
-    terminal.loadAddon(fit)
+    const terminal = new Terminal({ cursorBlink: true, fontFamily: 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace', fontSize: 13, minimumContrastRatio: 4.5, theme: { ...terminalTheme(colorScheme), background: getComputedStyle(root.current).backgroundColor }, scrollback: 1000 })
+    const addon = new FitAddon()
+    terminal.loadAddon(addon)
     terminal.open(root.current)
-    let connection
-    try { connection = workspace.connect(id) }
-    catch (exception) {
-      setError(exception instanceof Error ? exception.message : String(exception))
-      terminal.dispose()
-      return
-    }
-    const output = connection.subscribe(value => {
-      if (value.replay) { replaying.current = true; clearTimeout(replayGuard.current) }
-      terminal.write(value.data, () => { if (value.replay) replayGuard.current = setTimeout(() => { replaying.current = false }, 250) })
-    })
-    const connectionError = connection.subscribeError(setError)
-    const input = terminal.onData(data => { if (!replaying.current || !isTerminalProtocolReply(data)) connection.write(data) })
-    const resize = terminal.onResize(({ cols, rows }) => connection.resize(cols, rows))
-    const observer = new ResizeObserver(() => { try { fit.fit() } catch { /* The panel can be hidden during layout changes. */ } })
+    terminal.textarea?.setAttribute('aria-label', '终端输入')
+    screen.current = terminal; fit.current = addon; revision.current = 0
+    const input = terminal.onData(data => model.write(data))
+    const observer = new ResizeObserver(measure)
     observer.observe(root.current)
-    try { fit.fit(); terminal.focus() } catch (exception) { setError(exception instanceof Error ? exception.message : String(exception)) }
-    return () => { terminalRef.current = undefined; clearTimeout(replayGuard.current); observer.disconnect(); connectionError(); input.dispose(); resize.dispose(); output(); connection.close(); terminal.dispose() }
-  }, [workspace, id])
-  useEffect(() => { if (terminalRef.current === undefined) return; const background = root.current === null ? undefined : getComputedStyle(root.current).backgroundColor; terminalRef.current.options.theme = { ...terminalTheme(colorScheme), ...(background === undefined ? {} : { background }) } }, [colorScheme])
-  return error === undefined ? <div ref={root} className="dvw-terminal-host" /> : <div className="dvw-terminal-error">{error}</div>
+    return () => { observer.disconnect(); input.dispose(); terminal.dispose(); screen.current = undefined; fit.current = undefined }
+  }, [model])
+  useEffect(() => model.mount(), [model])
+  useLayoutEffect(() => {
+    const terminal = screen.current
+    const render = state.render
+    if (terminal === undefined || render === undefined || render.revision <= revision.current) return
+    revision.current = render.revision
+    if (render.frame.type === 'snapshot') { terminal.reset(); terminal.resize(render.frame.info.cols, render.frame.info.rows) }
+    terminal.write(render.frame.type === 'snapshot' ? render.frame.screen : render.frame.data, () => model.acknowledge(render.revision))
+  }, [state.render, model])
+  useLayoutEffect(() => {
+    if (screen.current === undefined) return
+    screen.current.options.disableStdin = !state.writable
+    if (state.writable) { measure(); screen.current.focus() }
+    else if (state.info !== undefined) screen.current.resize(state.info.cols, state.info.rows)
+  }, [state.writable, state.info?.cols, state.info?.rows, model])
+  useEffect(() => { if (screen.current !== undefined) screen.current.options.theme = { ...terminalTheme(colorScheme), ...(root.current === null ? {} : { background: getComputedStyle(root.current).backgroundColor }) } }, [colorScheme])
+  const error = terminalIssue(state)
+  const retry = state.phase === 'failed' || state.phase === 'disconnected'
+  const readOnly = state.phase === 'connected' && state.info?.state === 'running' && !state.writable
+  const ended = state.info?.state === 'exited'
+  return <section className="dvw-terminal-pane">
+    {(error || retry || readOnly || ended || state.info === undefined) && <div className="dvw-terminal-notice" role="status">
+      <span>{error ?? (ended ? `进程已退出（${state.info?.exitCode ?? '—'}）` : readOnly ? '其他页面正在控制此终端' : retry ? '终端连接已断开' : '正在启动终端…')}</span>
+      {(retry || readOnly) && <button onClick={() => state.info === undefined ? void model.refresh() : model.connect()}>{readOnly ? '接管输入' : '重新连接'}</button>}
+    </div>}
+    <div ref={root} className="dvw-terminal-host"/>
+  </section>
 }
 
-/** Render interactive terminal tabs in the workbench bottom panel. */
-export function TerminalPanel({ sessionId, colorScheme }: BottomPanelProps) {
-  const workspaceRef = useRef<{ sessionId: string; value: TerminalWorkspaceController }>()
-  if (workspaceRef.current?.sessionId !== sessionId) workspaceRef.current = { sessionId, value: new TerminalWorkspaceController(sessionId) }
-  const workspace = workspaceRef.current.value
-  const snapshot = useSyncExternalStore(workspace.subscribe.bind(workspace), workspace.getSnapshot.bind(workspace))
+/** Keep the incumbent terminal layout while using the official process and stream models. */
+export function TerminalPanel({ workspace, colorScheme }: BottomPanelProps & { workspace: TerminalWorkspaceController }) {
+  const snapshot = useSyncExternalStore(workspace.subscribe, workspace.getSnapshot)
+  const closeFailures = useSyncExternalStore(workspace.closeFailures.subscribe, workspace.closeFailures.getSnapshot)
   const [active, setActive] = useState<string>()
   const [context, setContext] = useState<{ id: string; x: number; y: number }>()
   const [renaming, setRenaming] = useState<{ id: string; value: string }>()
@@ -72,7 +94,7 @@ export function TerminalPanel({ sessionId, colorScheme }: BottomPanelProps) {
     window.addEventListener('keydown', escape)
     return () => { window.removeEventListener('pointerdown', close); window.removeEventListener('keydown', escape) }
   }, [context])
-  const closeTerminal = (id: string) => { setContext(undefined); setSplit(current => current?.filter(value => value !== id)); void workspace.close(id) }
+  const closeTerminal = (id: string) => { setContext(undefined); setSplit(current => current?.filter(value => value !== id)); workspace.close(id) }
   const saveRename = (id: string) => { const title = renaming?.id === id ? renaming.value.trim() : ''; setRenaming(undefined); if (title) void workspace.rename(id, title) }
   const splitTerminal = (first = active) => { if (first === undefined) return; void workspace.create().then(value => { setSplit(current => [...(current?.includes(first) ? current : [first]), value.id]); setActive(value.id) }).catch(() => undefined) }
   const shown = (split ?? (active === undefined ? [] : [active])).filter(id => snapshot.terminals.some(value => value.id === id))
@@ -80,6 +102,7 @@ export function TerminalPanel({ sessionId, colorScheme }: BottomPanelProps) {
   return <div className="dvw-terminal-root">
     <div className="dvw-terminal-main">
       {snapshot.error !== undefined && <div className="dvw-terminal-error">{snapshot.error}</div>}
+      {closeFailures.map(failure => <div className="dvw-terminal-notice" role="alert" key={failure.id}><span>终端“{failure.title}”未能关闭：{failure.message}</span><button onClick={() => workspace.retryClose(failure.id)}>重试关闭</button></div>)}
       <div className="dvw-terminal-panes" data-split={shown.length > 1 || undefined}>{shown.map(id => <XtermView key={id} workspace={workspace} id={id} colorScheme={colorScheme} />)}</div>
     </div>
     <div className="dvw-terminal-resizer" role="separator" aria-label="终端列表宽度" aria-orientation="vertical" onPointerDown={event => {