dsh-vscode-workbench 0.1.6 → 0.1.8

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 DocumentPreviewKind } from './documentPreview.tsx';
 interface Tab extends FileDocument {
     dirty: boolean;
     draft: string;
@@ -13,7 +14,12 @@ interface Tab extends FileDocument {
     diffMode?: 'inline' | 'split';
     diffSourcePath?: string;
     imageUrl?: string;
+    documentPreview?: DocumentPreviewKind;
+    documentUrl?: string;
 }
+type ResizeDirection = 1 | -1;
+/** Calculate a panel width from a horizontal pointer movement. */
+export declare function resizedPanelWidth(startWidth: number, startX: number, nextX: number, direction: ResizeDirection, min: number, max: number): number;
 /** Restore tab headers without reading their file contents. */
 export declare function restoreTabPaths(paths: string[]): Tab[];
 /** Return whether file changes require reloading one visible directory. */

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

@@ -0,0 +1,11 @@
+export type DocumentPreviewKind = 'pdf' | 'docx' | 'download';
+/** Bound PDF zoom to values that remain usable in the workbench viewport. */
+export declare function clampPdfScale(scale: number): number;
+/** Return the in-workbench preview supported for a document path. */
+export declare function documentPreviewKind(path: string): DocumentPreviewKind | undefined;
+/** Render an in-workbench preview for PDF and Word documents. */
+export declare function DocumentPreview({ kind, src, path }: {
+    kind: DocumentPreviewKind;
+    src: string;
+    path: string;
+}): import("react").JSX.Element;

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

@@ -1,3 +1,7 @@
 import type { VscodeWorkbench } from './service.ts';
+/** Reveal the terminal panel supplied by a terminal adapter without toggling it closed. */
+export declare function openTerminal(workbench: VscodeWorkbench): boolean;
+/** Toggle the terminal panel from the activity bar. */
+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;

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

@@ -0,0 +1,43 @@
+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;
+}
+export interface TerminalWorkspaceSnapshot {
+    terminals: readonly TerminalInfo[];
+    loading: boolean;
+    error?: string;
+}
+/** Browser client for the workbench's local terminal transport. */
+export interface TerminalWorkspace {
+    refresh(): Promise<void>;
+    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;
+}
+/** 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;
+    private snapshot;
+    private readonly listeners;
+    constructor(sessionId: string);
+    refresh(): Promise<void>;
+    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;
+    private set;
+}

package/lib/types/host.d.ts

@@ -19,6 +19,16 @@ export declare function workspaceImage(cwd: string, path: string): Promise<{
     path: string;
     type: string;
 }>;
+/** Resolve a supported preview file inside the workspace. */
+export declare function workspacePreviewFile(cwd: string, path: string): Promise<{
+    path: string;
+    type: string;
+}>;
+/** Resolve the PDF.js worker shipped with this plugin's runtime dependency. */
+export declare function pdfWorkerAsset(): {
+    path: string;
+    type: string;
+};
 interface ProcessResult {
     stdout: string;
     stderr: string;

package/lib/types/terminal.d.ts

@@ -0,0 +1,41 @@
+import type { IPty } from 'node-pty';
+import type { HostContext } from './context.ts';
+export interface TerminalInfo {
+    id: string;
+    title: string;
+    cwd: string;
+    running: boolean;
+    exitCode?: number;
+    sequence: number;
+}
+export interface TerminalOutput {
+    sequence: number;
+    data: string;
+}
+interface TerminalHandle {
+    info: TerminalInfo;
+    process: IPty;
+    replay: string;
+    listeners: Set<(output: TerminalOutput) => void>;
+}
+/** Remove credentials while retaining ordinary interactive-shell variables. */
+export declare function sanitizedTerminalEnv(env: NodeJS.ProcessEnv): Record<string, string>;
+/** Select the user's interactive shell with platform-specific fallbacks. */
+export declare function defaultTerminalShell(platform?: NodeJS.Platform, env?: NodeJS.ProcessEnv): {
+    shell: string;
+    args: string[];
+};
+/** Own interactive terminals by their canonical workspace directory. */
+export declare class TerminalManager {
+    private readonly workspaces;
+    private workspace;
+    list(cwd: string): TerminalInfo[];
+    create(cwd: string, title?: string): TerminalInfo;
+    get(cwd: string, id: string): TerminalHandle | undefined;
+    close(cwd: string, id: string): void;
+    rename(cwd: string, id: string, title: string): TerminalInfo;
+    dispose(): void;
+}
+/** Register the private local terminal API and WebSocket transport. */
+export declare function installTerminal(ctx: HostContext): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-workbench",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Explorer, Monaco editor, search and local Git overlay for DSH",
   "type": "module",
   "license": "MIT",
@@ -56,10 +56,15 @@
   "dependencies": {
     "@vscode/codicons": "^0.0.36",
     "@vscode/ripgrep": "^1.15.14",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
     "chokidar": "^4.0.3",
+    "docx-preview": "^0.4.0",
     "dompurify": "^3.2.6",
     "marked": "^16.3.0",
     "monaco-editor": "^0.52.2",
+    "node-pty": "^1.1.0",
+    "pdfjs-dist": "4.10.38",
     "ws": "^8.18.0"
   },
   "peerDependencies": {

package/src/client/Icon.tsx

@@ -2,7 +2,7 @@ export type CodiconName =
   | 'add' | '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' | 'trash'
+  | '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 function Icon({ name, className = '' }: { name: CodiconName; className?: string }) {

package/src/client/TerminalPanel.tsx

@@ -0,0 +1,90 @@
+import { useEffect, 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'
+
+function terminalTheme(colorScheme: 'dark' | 'light') { return colorScheme === 'dark' ? { background: '#131417', foreground: '#f1f3f5', cursor: '#c2c6cc', selectionBackground: '#355d94' } : { background: '#ffffff', foreground: '#1d2025', cursor: '#4b515b', selectionBackground: '#add6ff' } }
+
+function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspaceController; id: string; colorScheme: 'dark' | 'light' }) {
+  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(() => {
+    if (root.current === null) return
+    const terminal = new Terminal({ convertEol: false, cursorBlink: true, fontFamily: 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace', fontSize: 13, theme: terminalTheme(colorScheme) })
+    terminalRef.current = terminal
+    const fit = new FitAddon()
+    terminal.loadAddon(fit)
+    terminal.open(root.current)
+    const connection = workspace.connect(id)
+    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 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. */ } })
+    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(); input.dispose(); resize.dispose(); output(); connection.close(); terminal.dispose() }
+  }, [workspace, id])
+  useEffect(() => { if (terminalRef.current !== undefined) terminalRef.current.options.theme = terminalTheme(colorScheme) }, [colorScheme])
+  return error === undefined ? <div ref={root} className="dvw-terminal-host" /> : <div className="dvw-terminal-error">{error}</div>
+}
+
+/** 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))
+  const [active, setActive] = useState<string>()
+  const [context, setContext] = useState<{ id: string; x: number; y: number }>()
+  const [renaming, setRenaming] = useState<{ id: string; value: string }>()
+  const [split, setSplit] = useState<readonly string[]>()
+  const [sideWidth, setSideWidth] = useState(220)
+  useEffect(() => {
+    let cancelled = false
+    void workspace.refresh().then(() => { if (!cancelled && workspace.getSnapshot().terminals.length === 0) void workspace.create().then(value => { if (!cancelled) setActive(value.id) }) })
+    return () => { cancelled = true }
+  }, [workspace])
+  useEffect(() => { if (snapshot.terminals.length > 0 && (!active || !snapshot.terminals.some(value => value.id === active))) setActive(snapshot.terminals[0]?.id) }, [snapshot.terminals, active])
+  useEffect(() => { const create = () => { void workspace.create().then(value => setActive(value.id)) }; window.addEventListener('dvw-terminal-new', create); return () => window.removeEventListener('dvw-terminal-new', create) }, [workspace])
+  useEffect(() => {
+    if (context === undefined) return
+    const close = () => setContext(undefined)
+    const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') close() }
+    window.addEventListener('pointerdown', close)
+    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 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) }) }
+  const shown = (split ?? (active === undefined ? [] : [active])).filter(id => snapshot.terminals.some(value => value.id === id))
+  const selectTerminal = (id: string) => { setActive(id); setSplit(current => current?.includes(id) ? current : [id]) }
+  return <div className="dvw-terminal-root">
+    <div className="dvw-terminal-main">
+      {snapshot.error !== undefined && <div className="dvw-terminal-error">{snapshot.error}</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 => {
+      if (event.button !== 0) return
+      event.preventDefault()
+      const startX = event.clientX
+      const startWidth = sideWidth
+      const move = (next: PointerEvent) => setSideWidth(Math.max(160, Math.min(420, Math.round(startWidth + startX - next.clientX))))
+      const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
+      window.addEventListener('pointermove', move)
+      window.addEventListener('pointerup', up)
+    }}/>
+    <aside className="dvw-terminal-tabs" style={{ width: sideWidth }} aria-label="终端会话">
+      <div className="dvw-terminal-list">{snapshot.terminals.map(value => renaming?.id === value.id ? <div key={value.id} className="dvw-terminal-entry" data-active><div className="dvw-terminal-tab"><Icon name="terminal"/><input className="dvw-terminal-rename" value={renaming.value} autoFocus aria-label="终端名称" onChange={event => setRenaming({ id: value.id, value: event.target.value })} onKeyDown={event => { if (event.key === 'Enter') saveRename(value.id); if (event.key === 'Escape') setRenaming(undefined) }} onBlur={() => saveRename(value.id)}/></div></div> : <div key={value.id} className="dvw-terminal-entry" data-active={active === value.id} data-split-member={shown.includes(value.id) || undefined}><button className="dvw-terminal-tab" onClick={() => selectTerminal(value.id)} onContextMenu={event => { event.preventDefault(); selectTerminal(value.id); setContext({ id: value.id, x: event.clientX, y: event.clientY }) }}><Icon name="terminal"/>{value.title}</button><div className="dvw-terminal-entry-actions"><button title="拆分终端" onClick={() => splitTerminal(value.id)}><Icon name="split-horizontal"/></button><button title="终止终端" onClick={() => closeTerminal(value.id)}><Icon name="trash"/></button></div></div>)}</div>
+      {context !== undefined && <div className="dvw-terminal-menu" role="menu" style={{ left: context.x, top: context.y }} onPointerDown={event => event.stopPropagation()}><button role="menuitem" onClick={() => { const terminal = snapshot.terminals.find(value => value.id === context.id); setContext(undefined); if (terminal !== undefined) setRenaming({ id: terminal.id, value: terminal.title }) }}>重命名</button><button className="dvw-terminal-menu-danger" role="menuitem" onClick={() => closeTerminal(context.id)}>终止终端</button></div>}
+    </aside>
+  </div>
+}

package/src/client/Workbench.tsx

@@ -9,13 +9,69 @@ import type { MarkdownHeading } from './MarkdownPreview.tsx'
 import { MonacoDiffEditor, MonacoEditor } from './MonacoEditor.tsx'
 import { DshConversationPanel, DshConversationTheme } from './DshConversationPanel.tsx'
 import { DshMark } from './DshMark.tsx'
+import { DocumentPreview, documentPreviewKind, type DocumentPreviewKind } from './documentPreview.tsx'
+import { toggleTerminal } from './shortcuts.ts'
 import { resetWorkspaceDocuments, WorkspaceRequestScope } from './workspaceState.ts'
 
-interface Tab extends FileDocument { dirty: boolean; draft: string; loaded?: boolean; line?: number; column?: number; external?: boolean; preview?: boolean; title?: string; diff?: GitDiff; diffMode?: 'inline' | 'split'; diffSourcePath?:string; imageUrl?:string }
+interface Tab extends FileDocument { dirty: boolean; draft: string; loaded?: boolean; line?: number; column?: number; external?: boolean; preview?: boolean; title?: string; diff?: GitDiff; diffMode?: 'inline' | 'split'; diffSourcePath?:string; imageUrl?:string; documentPreview?:DocumentPreviewKind; documentUrl?:string }
 type WorkbenchTheme = 'dsh' | 'dark' | 'light'
 interface TreeProps { sessionId: string; path: string; depth: number; expanded: Set<string>; selected?: string; selectedDirectory: string; statuses: Map<string, string>; onToggle(path: string): void; onSelectDirectory(path: string): void; onOpen(path: string): void; onChange(): void; onUpload(directory: string, files: FileList): void }
 interface CreatingEntry { kind: 'file' | 'directory'; directory: string; value: string; error?: string }
 
+type ResizeDirection = 1 | -1
+
+/** Calculate a panel width from a horizontal pointer movement. */
+export function resizedPanelWidth(startWidth: number, startX: number, nextX: number, direction: ResizeDirection, min: number, max: number): number {
+  return Math.max(min, Math.min(max, Math.round(startWidth + (nextX - startX) * direction)))
+}
+
+function PanelResizer({ className, label, width, min, max, defaultWidth, direction, onWidth }: { className: string; label: string; width: number; min: number; max: number; defaultWidth: number; direction: ResizeDirection; onWidth(width: number): void }) {
+  const [dragging, setDragging] = useState(false)
+  const stopDragging = useRef<() => void>(() => {})
+  useEffect(() => () => stopDragging.current(), [])
+  const stop = () => stopDragging.current()
+  return <div className={className} data-dragging={dragging || undefined} role="separator" aria-label={label} aria-orientation="vertical" aria-valuemin={min} aria-valuemax={max} aria-valuenow={Math.round(width)} tabIndex={0} title={`${label}，双击恢复默认`} onDoubleClick={() => onWidth(defaultWidth)} onKeyDown={event => {
+    if (event.key === 'Home') { event.preventDefault(); onWidth(defaultWidth); return }
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    event.preventDefault()
+    const pointerDelta = event.key === 'ArrowRight' ? 10 : -10
+    onWidth(Math.max(min, Math.min(max, Math.round(width + pointerDelta * direction))))
+  }} onPointerDown={event => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    stop()
+    const startX = event.clientX
+    const startWidth = width
+    const handle = event.currentTarget
+    handle.setPointerCapture?.(event.pointerId)
+    const previousCursor = document.body.style.cursor
+    const previousUserSelect = document.body.style.userSelect
+    document.body.style.cursor = 'ew-resize'
+    document.body.style.userSelect = 'none'
+    setDragging(true)
+    const move = (next: PointerEvent) => onWidth(resizedPanelWidth(startWidth, startX, next.clientX, direction, min, max))
+    const cleanup = (commit = false, nextX = startX) => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      window.removeEventListener('pointercancel', cancel)
+      window.removeEventListener('blur', cancel)
+      document.body.style.cursor = previousCursor
+      document.body.style.userSelect = previousUserSelect
+      setDragging(false)
+      stopDragging.current = () => {}
+      if (!commit) return
+      onWidth(Math.max(min, Math.min(max, Math.round(startWidth + (nextX - startX) * direction))))
+    }
+    const up = (next: PointerEvent) => cleanup(true, next.clientX)
+    const cancel = () => cleanup()
+    stopDragging.current = cancel
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    window.addEventListener('pointercancel', cancel)
+    window.addEventListener('blur', cancel)
+  }}/>
+}
+
 function unloadedTab(path:string):Tab{return {path,content:'',draft:'',revision:'',size:0,binary:false,tooLarge:false,dirty:false,loaded:false,preview:/\.md$/i.test(path)}}
 
 /** Restore tab headers without reading their file contents. */
@@ -244,13 +300,13 @@ export function Workbench({ service, useSessions }: { service: VscodeWorkbench;
   useEffect(()=>{if(!snapshot.visible||sessionId===undefined)return;const epoch=workspaceRequests.current.begin();const cleared=resetWorkspaceDocuments<Tab>();loadingTabs.current.clear();setWorkspace(undefined);setTabs(cleared.tabs);tabsRef.current=cleared.tabs;setActive(cleared.active);setError(cleared.error);const controller=new AbortController();void api<{cwd:string;name:string}>('workspace',{sessionId},controller.signal).then(value=>{if(!workspaceRequests.current.isCurrent(epoch))return;setWorkspace(value);const saved=localStorage.getItem(`dvw:${value.cwd}`);if(saved){try{const parsed=JSON.parse(saved) as {view?:WorkbenchView;paths?:string[];active?:string;panelHeight?:number;sideWidth?:number};if(parsed.view)service.show(parsed.view);if(typeof parsed.panelHeight==='number')setPanelHeight(parsed.panelHeight);if(typeof parsed.sideWidth==='number')setSideWidth(Math.max(210,Math.min(640,Math.round(parsed.sideWidth))));const restored=restoreTabPaths(parsed.paths??[]);setTabs(restored);setActive(restored.some(tab=>tab.path===parsed.active)?parsed.active:restored.at(-1)?.path)}catch{}}}).catch(error=>{if(!controller.signal.aborted&&workspaceRequests.current.isCurrent(epoch))setError(String(error))});return()=>{controller.abort();loadingTabs.current.clear();workspaceRequests.current.invalidate(epoch)}},[snapshot.visible,sessionId])
   useEffect(()=>{if(workspace) localStorage.setItem(`dvw:${workspace.cwd}`,JSON.stringify({view:snapshot.view,paths:tabs.filter(t=>!t.path.startsWith('diff:')).map(t=>t.path),active,panelHeight,sideWidth}))},[workspace,snapshot.view,tabs,active,panelHeight,sideWidth])
   useEffect(()=>{if(!snapshot.visible||sessionId===undefined)return;const protocol=location.protocol==='https:'?'wss':'ws';const ws=new WebSocket(`${protocol}://${location.host}/dsh-vscode/ws/files?sessionId=${encodeURIComponent(sessionId)}`);ws.onmessage=event=>{let paths:string[]=[];try{paths=(JSON.parse(String(event.data)) as {paths?:string[]}).paths??[]}catch{}window.dispatchEvent(new CustomEvent('dvw-files-changed',{detail:paths}));setTabs(current=>current.map(tab=>tab.dirty?{...tab,external:true}:tab))};return()=>ws.close()},[snapshot.visible,sessionId])
-  useEffect(()=>{if(sessionId===undefined||active===undefined)return;const tab=tabsRef.current.find(row=>row.path===active);if(tab===undefined||tab.loaded!==false||loadingTabs.current.has(active))return;const epoch=workspaceRequests.current.current();loadingTabs.current.add(active);if(/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(active)){const imageUrl=`/dsh-vscode/file?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(active)}`;setTabs(rows=>rows.map(row=>row.path===active?{...row,loaded:true,imageUrl}:row));loadingTabs.current.delete(active);return}void api<FileDocument>('fs.read',{sessionId,path:active}).then(doc=>{if(!workspaceRequests.current.isCurrent(epoch))return;if(doc.binary||doc.tooLarge){setTabs(rows=>rows.filter(row=>row.path!==active));setActive(current=>current===active?undefined:current);setError(doc.binary?'二进制文件不能在文本编辑器中打开':`文件超过 5 MiB：${active}`);return}setTabs(rows=>rows.map(row=>row.path===active?{...row,...doc,draft:doc.content,loaded:true}:row))}).catch(error=>{if(workspaceRequests.current.isCurrent(epoch))setError(String(error))}).finally(()=>loadingTabs.current.delete(active))},[active,sessionId,tabs])
+  useEffect(()=>{if(sessionId===undefined||active===undefined)return;const tab=tabsRef.current.find(row=>row.path===active);if(tab===undefined||tab.loaded!==false||loadingTabs.current.has(active))return;const epoch=workspaceRequests.current.current();loadingTabs.current.add(active);const documentPreview=documentPreviewKind(active);if(documentPreview!==undefined){const documentUrl=`/dsh-vscode/file?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(active)}`;setTabs(rows=>rows.map(row=>row.path===active?{...row,loaded:true,documentPreview,documentUrl}:row));loadingTabs.current.delete(active);return}if(/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(active)){const imageUrl=`/dsh-vscode/file?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(active)}`;setTabs(rows=>rows.map(row=>row.path===active?{...row,loaded:true,imageUrl}:row));loadingTabs.current.delete(active);return}void api<FileDocument>('fs.read',{sessionId,path:active}).then(doc=>{if(!workspaceRequests.current.isCurrent(epoch))return;if(doc.binary||doc.tooLarge){setTabs(rows=>rows.filter(row=>row.path!==active));setActive(current=>current===active?undefined:current);setError(doc.binary?'二进制文件不能在文本编辑器中打开':`文件超过 5 MiB：${active}`);return}setTabs(rows=>rows.map(row=>row.path===active?{...row,...doc,draft:doc.content,loaded:true}:row))}).catch(error=>{if(workspaceRequests.current.isCurrent(epoch))setError(String(error))}).finally(()=>loadingTabs.current.delete(active))},[active,sessionId,tabs])
   const open=(path:string,line?:number,column?:number)=>{if(sessionId!==undefined)openForWorkspace(path,line,column)}
   useEffect(()=>{const listener=(event:Event)=>void open((event as CustomEvent<string>).detail);window.addEventListener('dvw-open-workspace-path',listener);return()=>window.removeEventListener('dvw-open-workspace-path',listener)},[sessionId,tabs])
   const save=async(tab:Tab)=>{if(sessionId===undefined||!tab.dirty)return;try{const doc=await api<FileDocument>('fs.save',{sessionId,path:tab.path,content:tab.draft,revision:tab.revision});setTabs(rows=>rows.map(row=>row.path===tab.path?{...row,...doc,draft:doc.content,dirty:false,external:false}:row))}catch(error){setError(String(error))}}
   const close=(tab:Tab)=>{if(tab.dirty&&!confirm(`${tab.path} 有未保存更改，确定关闭？`))return;setTabs(rows=>rows.filter(row=>row.path!==tab.path));if(active===tab.path)setActive(tabs.filter(row=>row.path!==tab.path).at(-1)?.path)}
   const closeAll=()=>{const dirty=tabs.filter(tab=>tab.dirty);if(dirty.length>0&&!confirm(`有 ${dirty.length} 个文件包含未保存更改，确定全部关闭？`))return;setTabs([]);setActive(undefined)}
-  const activeTab=tabs.find(tab=>tab.path===active); const Panel=panels.find(panel=>panel.id===snapshot.bottomPanel)?.component
+  const activeTab=tabs.find(tab=>tab.path===active); const Panel=panels.find(panel=>panel.id===snapshot.bottomPanel)?.component; const terminalAvailable=panels.some(panel=>panel.id==='terminal')
   const selectView=(view:WorkbenchView)=>{if(snapshot.view===view&&primarySideVisible){setPrimarySideVisible(false);return}setPrimarySideVisible(true);service.show(view)}
   const selectHeading=(index:number)=>{if(activeTab===undefined)return;setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:true}:tab));window.setTimeout(()=>window.dispatchEvent(new CustomEvent('dvw-markdown-heading',{detail:index})),50)}
   const suppressAttachmentDrop=(event:DragEvent)=>{if(!event.dataTransfer.types.includes('Files'))return;const target=event.target;const insideTree=target instanceof Element&&target.closest('.dvw-tree')!==null;if(!insideTree){event.preventDefault();event.stopPropagation()}}
@@ -264,13 +320,13 @@ export function Workbench({ service, useSessions }: { service: VscodeWorkbench;
     <DshConversationPanel visible={chatVisible&&!settingsOpen} width={chatWidth} statusHeight={statusVisible?24:0}/>
     <DshConversationTheme visible={chatVisible} colorScheme={colorScheme} followDsh={theme==='dsh'}/>
     {!chatVisible&&<button className="dvw-chat-toggle dvw-icon" title="显示 DSH 对话栏 (Ctrl+Alt+B)" onClick={()=>setChatVisible(true)}><DshMark/></button>}
-    {chatVisible&&<aside className="dvw-chat"><div className="dvw-chat-resizer" title="拖动调整 DSH 对话栏宽度，双击恢复默认" onDoubleClick={()=>setChatWidth(420)} onPointerDown={event=>{event.preventDefault();const startX=event.clientX,startWidth=chatWidth;const move=(next:PointerEvent)=>setChatWidth(Math.max(400,Math.min(720,Math.round(startWidth+startX-next.clientX))));const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up)}}/><header className="dvw-chat-head"><span><DshMark/> DSH</span><button className="dvw-icon" title="关闭 DSH 对话栏" onClick={()=>setChatVisible(false)}><Icon name="close"/></button></header><div className="dvw-chat-body"/></aside>}
+    {chatVisible&&<aside className="dvw-chat"><PanelResizer className="dvw-chat-resizer" label="拖动调整 DSH 对话栏宽度" width={chatWidth} min={400} max={720} defaultWidth={420} direction={-1} onWidth={setChatWidth}/><header className="dvw-chat-head"><span><DshMark/> DSH</span><button className="dvw-icon" title="关闭 DSH 对话栏" onClick={()=>setChatVisible(false)}><Icon name="close"/></button></header><div className="dvw-chat-body"/></aside>}
     {settingsOpen&&<div className="dvw-settings-backdrop" role="presentation" onMouseDown={()=>setSettingsOpen(false)}><section className="dvw-settings" role="dialog" aria-modal="true" aria-label="工作台设置" onMouseDown={event=>event.stopPropagation()}><header><span><Icon name="settings"/> 工作台设置</span><button className="dvw-icon" title="关闭设置" onClick={()=>setSettingsOpen(false)}><Icon name="close"/></button></header><div className="dvw-settings-body"><section><h3>外观</h3><label>颜色主题</label><div className="dvw-settings-themes">{([['dsh','跟随 DSH'],['dark','深色'],['light','浅色']] as const).map(([value,label])=><button key={value} data-active={theme===value} onClick={()=>setTheme(value)}><span className={`dvw-theme-swatch ${value}`}/><span>{label}</span>{theme===value&&<Icon name="check"/>}</button>)}</div></section><section><h3>布局</h3><label className="dvw-setting-check"><input type="checkbox" checked={primarySideVisible} onChange={event=>setPrimarySideVisible(event.target.checked)}/><span>显示左侧视图</span></label><label className="dvw-setting-check"><input type="checkbox" checked={chatVisible} onChange={event=>setChatVisible(event.target.checked)}/><span>显示 DSH 对话栏</span></label><label className="dvw-setting-check"><input type="checkbox" checked={statusVisible} onChange={event=>setStatusVisible(event.target.checked)}/><span>显示底部状态栏</span></label><label className="dvw-setting-range"><span>左侧视图宽度</span><input type="range" min="210" max="640" step="1" value={Math.round(sideWidth)} onChange={event=>setSideWidth(Math.round(Number(event.target.value)))}/><output>{sideWidth}px</output></label><label className="dvw-setting-range"><span>DSH 对话栏宽度</span><input type="range" min="400" max="720" step="1" value={Math.round(chatWidth)} onChange={event=>setChatWidth(Math.max(400,Math.round(Number(event.target.value))))}/><output>{chatWidth}px</output></label></section></div></section></div>}
-    <nav className="dvw-activity"><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='explorer'} title="资源管理器" onClick={()=>selectView('explorer')}><Icon name="files"/></button><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='search'} title="搜索" onClick={()=>selectView('search')}><Icon name="search"/></button><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='git'} title="源代码管理" onClick={()=>selectView('git')}><Icon name="source-control"/></button><button className="dvw-act dsh" title="返回 DSH" onClick={()=>service.hide()}><Icon name="home"/></button><button className="dvw-act dvw-settings-button" data-active={settingsOpen} title="管理工作台设置" onClick={()=>setSettingsOpen(true)}><Icon name="settings"/></button></nav>
+    <nav className="dvw-activity"><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='explorer'} title="资源管理器" onClick={()=>selectView('explorer')}><Icon name="files"/></button><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='search'} title="搜索" onClick={()=>selectView('search')}><Icon name="search"/></button><button className="dvw-act" data-active={primarySideVisible&&snapshot.view==='git'} title="源代码管理" onClick={()=>selectView('git')}><Icon name="source-control"/></button><button className="dvw-act" data-active={snapshot.bottomPanel==='terminal'} disabled={!terminalAvailable} title={terminalAvailable?(snapshot.bottomPanel==='terminal'?'隐藏终端':'显示终端'):'终端适配器未安装'} onClick={()=>toggleTerminal(service)}><Icon name="terminal"/></button><button className="dvw-act dsh" title="返回 DSH" onClick={()=>service.hide()}><Icon name="home"/></button><button className="dvw-act dvw-settings-button" data-active={settingsOpen} title="管理工作台设置" onClick={()=>setSettingsOpen(true)}><Icon name="settings"/></button></nav>
     <aside className="dvw-side" data-side-width={sideWidth}>{snapshot.view==='explorer'&&<Explorer sessionId={sessionId} cwd={workspace?.cwd} selected={active} onOpen={path=>void open(path)}/>} {snapshot.view==='search'&&<Search sessionId={sessionId} onOpen={(path,line,column)=>void open(path,line,column)}/>} {snapshot.view==='git'&&<Git sessionId={sessionId} onDiff={(path,diff,title,diffSourcePath)=>{const key=`diff:${path}`;setTabs(rows=>[...rows.filter(row=>row.path!==key),{path:key,title,content:diff.diff,draft:diff.diff,revision:'',size:diff.diff.length,binary:false,tooLarge:false,dirty:false,diff,diffMode:'inline',diffSourcePath}]);setActive(key)}}/>}</aside>
-    <div className="dvw-side-resizer" title="拖动调整侧边栏宽度，双击恢复默认" onDoubleClick={()=>setSideWidth(210)} onPointerDown={event=>{event.preventDefault();const startX=event.clientX,startWidth=sideWidth;const move=(next:PointerEvent)=>setSideWidth(Math.max(210,Math.min(640,Math.round(startWidth+next.clientX-startX))));const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up)}}/>
-    <main className="dvw-main"><div className="dvw-tabs"><div className="dvw-tab-list">{tabs.map(tab=><button className="dvw-tab" data-active={tab.path===active} key={tab.path} title={tab.diffSourcePath??tab.path} onClick={()=>setActive(tab.path)}><span className="dvw-tab-name">{tab.dirty?'● ':''}{tabLabel(tab)}</span><span onClick={event=>{event.stopPropagation();close(tab)}}><Icon name="close"/></span></button>)}</div>{tabs.length>0&&<div className="dvw-tab-actions"><button className="dvw-icon dvw-close-all" title="全部关闭" onClick={closeAll}><Icon name="close-all"/></button></div>}</div><div className="dvw-editor" data-outline={markdownPreview&&outlineVisible&&headings.length>0}>{error&&<div className="dvw-error"><button className="dvw-icon" onClick={()=>setError(undefined)}><Icon name="close"/></button>{error}</div>}{markdownPreview&&outlineVisible&&headings.length>0&&<MarkdownOutline headings={headings} onClose={()=>setOutlineVisible(false)} onHeading={selectHeading}/>} {markdown&&activeTab&&<div className="dvw-editor-toolbar"><button className="dvw-icon dvw-outline-toggle" data-active={outlineVisible} title={outlineVisible?'关闭 Markdown 大纲':'显示 Markdown 大纲'} onClick={()=>setOutlineVisible(value=>!value)}><Icon name="list-tree"/></button><button className="dvw-mode-button" data-active={!activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:false}:tab))}><Icon name="code"/> 源码</button><button className="dvw-mode-button" data-active={activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:true}:tab))}><Icon name="preview"/> 预览</button></div>}{activeTab?.diff&&<div className="dvw-editor-toolbar dvw-diff-toolbar">{diffMarkdown&&<div className="dvw-diff-preview-switch"><button className="dvw-mode-button" data-diff-view="diff" data-active={!activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:false}:tab))}><Icon name="diff"/> 差异</button><button className="dvw-mode-button" data-diff-view="preview" data-active={activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:true}:tab))}><Icon name="preview"/> 预览</button></div>}{!activeTab.preview&&<><button className="dvw-mode-button dvw-diff-mode-button" data-mode="inline" data-active={activeTab.diffMode!=='split'} title="内联视图" onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,diffMode:'inline'}:tab))}><Icon name="diff-single"/> 内联</button><button className="dvw-mode-button dvw-diff-mode-button" data-mode="split" data-active={activeTab.diffMode==='split'} title="并排视图" onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,diffMode:'split'}:tab))}><Icon name="diff-sidebyside"/> 并排</button></>}</div>}<div className="dvw-editor-body" data-toolbar={markdown||activeTab?.diff!==undefined}>{activeTab===undefined?<div className="dvw-empty"><div><strong>DSH Workbench</strong><br/>从资源管理器或搜索结果打开文件</div></div>:activeTab.diff?diffMarkdown&&activeTab.preview?<MarkdownPreview source={activeTab.diff.modified} sessionId={sessionId} path={activeTab.diffSourcePath??''}/>:<MonacoDiffEditor uri={`${workspace?.cwd??''}/${activeTab.path}`} original={activeTab.diff.original} modified={activeTab.diff.modified} mode={activeTab.diffMode??'inline'} theme={colorScheme}/>:activeTab.imageUrl?<div className="dvw-image-preview"><img src={activeTab.imageUrl} alt={activeTab.path}/><span>{activeTab.path}</span></div>:markdown&&activeTab.preview?<MarkdownPreview source={activeTab.draft} sessionId={sessionId} path={activeTab.path}/>:<MonacoEditor uri={`${workspace?.cwd??''}/${activeTab.path}`} value={activeTab.draft} theme={colorScheme} line={activeTab.line} column={activeTab.column} onChange={draft=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,draft,dirty:draft!==tab.content}:tab))} onSave={()=>void save(activeTab)}/>}</div></div></main>
-    {snapshot.bottomPanel&&<section className="dvw-bottom" style={{height:panelHeight}}><div style={{height:4,cursor:'ns-resize'}} onPointerDown={event=>{const startY=event.clientY,startHeight=panelHeight;const move=(e:PointerEvent)=>setPanelHeight(Math.max(120,Math.min(window.innerHeight-160,startHeight+startY-e.clientY)));const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up)}}/><div className="dvw-bottom-head"><button className="dvw-bottom-title">{panels.find(p=>p.id===snapshot.bottomPanel)?.title??snapshot.bottomPanel}</button><button className="dvw-icon" style={{marginLeft:'auto'}} onClick={()=>service.toggleBottomPanel(snapshot.bottomPanel!)}><Icon name="close"/></button></div><div className="dvw-bottom-body">{Panel&&cwd&&<Panel sessionId={sessionId} cwd={cwd} visible colorScheme={colorScheme}/>}</div></section>}
+    <PanelResizer className="dvw-side-resizer" label="拖动调整源码管理侧边栏宽度" width={sideWidth} min={210} max={640} defaultWidth={210} direction={1} onWidth={setSideWidth}/>
+    <main className="dvw-main"><div className="dvw-tabs"><div className="dvw-tab-list">{tabs.map(tab=><button className="dvw-tab" data-active={tab.path===active} key={tab.path} title={tab.diffSourcePath??tab.path} onClick={()=>setActive(tab.path)}><span className="dvw-tab-name">{tab.dirty?'● ':''}{tabLabel(tab)}</span><span onClick={event=>{event.stopPropagation();close(tab)}}><Icon name="close"/></span></button>)}</div>{tabs.length>0&&<div className="dvw-tab-actions"><button className="dvw-icon dvw-close-all" title="全部关闭" onClick={closeAll}><Icon name="close-all"/></button></div>}</div><div className="dvw-editor" data-outline={markdownPreview&&outlineVisible&&headings.length>0}>{error&&<div className="dvw-error"><button className="dvw-icon" onClick={()=>setError(undefined)}><Icon name="close"/></button>{error}</div>}{markdownPreview&&outlineVisible&&headings.length>0&&<MarkdownOutline headings={headings} onClose={()=>setOutlineVisible(false)} onHeading={selectHeading}/>} {markdown&&activeTab&&<div className="dvw-editor-toolbar"><button className="dvw-icon dvw-outline-toggle" data-active={outlineVisible} title={outlineVisible?'关闭 Markdown 大纲':'显示 Markdown 大纲'} onClick={()=>setOutlineVisible(value=>!value)}><Icon name="list-tree"/></button><button className="dvw-mode-button" data-active={!activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:false}:tab))}><Icon name="code"/> 源码</button><button className="dvw-mode-button" data-active={activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:true}:tab))}><Icon name="preview"/> 预览</button></div>}{activeTab?.diff&&<div className="dvw-editor-toolbar dvw-diff-toolbar">{diffMarkdown&&<div className="dvw-diff-preview-switch"><button className="dvw-mode-button" data-diff-view="diff" data-active={!activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:false}:tab))}><Icon name="diff"/> 差异</button><button className="dvw-mode-button" data-diff-view="preview" data-active={activeTab.preview} onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,preview:true}:tab))}><Icon name="preview"/> 预览</button></div>}{!activeTab.preview&&<><button className="dvw-mode-button dvw-diff-mode-button" data-mode="inline" data-active={activeTab.diffMode!=='split'} title="内联视图" onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,diffMode:'inline'}:tab))}><Icon name="diff-single"/> 内联</button><button className="dvw-mode-button dvw-diff-mode-button" data-mode="split" data-active={activeTab.diffMode==='split'} title="并排视图" onClick={()=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,diffMode:'split'}:tab))}><Icon name="diff-sidebyside"/> 并排</button></>}</div>}<div className="dvw-editor-body" data-toolbar={markdown||activeTab?.diff!==undefined}>{activeTab===undefined?<div className="dvw-empty"><div><strong>DSH Workbench</strong><br/>从资源管理器或搜索结果打开文件</div></div>:activeTab.diff?diffMarkdown&&activeTab.preview?<MarkdownPreview source={activeTab.diff.modified} sessionId={sessionId} path={activeTab.diffSourcePath??''}/>:<MonacoDiffEditor uri={`${workspace?.cwd??''}/${activeTab.path}`} original={activeTab.diff.original} modified={activeTab.diff.modified} mode={activeTab.diffMode??'inline'} theme={colorScheme}/>:activeTab.imageUrl?<div className="dvw-image-preview"><img src={activeTab.imageUrl} alt={activeTab.path}/><span>{activeTab.path}</span></div>:activeTab.documentPreview&&activeTab.documentUrl?<DocumentPreview kind={activeTab.documentPreview} src={activeTab.documentUrl} path={activeTab.path}/>:markdown&&activeTab.preview?<MarkdownPreview source={activeTab.draft} sessionId={sessionId} path={activeTab.path}/>:<MonacoEditor uri={`${workspace?.cwd??''}/${activeTab.path}`} value={activeTab.draft} theme={colorScheme} line={activeTab.line} column={activeTab.column} onChange={draft=>setTabs(rows=>rows.map(tab=>tab.path===activeTab.path?{...tab,draft,dirty:draft!==tab.content}:tab))} onSave={()=>void save(activeTab)}/>}</div></div></main>
+    {snapshot.bottomPanel&&<section className="dvw-bottom" style={{height:panelHeight}}><div style={{height:4,cursor:'ns-resize'}} onPointerDown={event=>{const startY=event.clientY,startHeight=panelHeight;const move=(e:PointerEvent)=>setPanelHeight(Math.max(120,Math.min(window.innerHeight-160,startHeight+startY-e.clientY)));const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up)}}/><div className="dvw-bottom-head"><button className="dvw-bottom-title">{panels.find(p=>p.id===snapshot.bottomPanel)?.title??snapshot.bottomPanel}</button>{snapshot.bottomPanel==='terminal'&&<button className="dvw-icon" title="新建终端" onClick={()=>window.dispatchEvent(new Event('dvw-terminal-new'))}><Icon name="add"/></button>}<button className="dvw-icon" style={{marginLeft:'auto'}} onClick={()=>service.toggleBottomPanel(snapshot.bottomPanel!)}><Icon name="close"/></button></div><div className="dvw-bottom-body">{Panel&&cwd&&<Panel sessionId={sessionId} cwd={cwd} visible colorScheme={colorScheme}/>}</div></section>}
     <footer className="dvw-status"><span><Icon name="git-branch"/> 工作区</span><span>{workspace?.cwd??cwd??''}</span>{activeTab?.external&&<span>磁盘文件已变化</span>}<button className="dvw-icon" style={{color:'white',marginLeft:'auto'}} onClick={()=>service.hide()}>返回 DSH</button></footer>
   </div>
 }

package/src/client/documentPreview.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react'
+
+export type DocumentPreviewKind = 'pdf' | 'docx' | 'download'
+
+const MIN_PDF_SCALE = 0.5
+const MAX_PDF_SCALE = 3
+
+/** Bound PDF zoom to values that remain usable in the workbench viewport. */
+export function clampPdfScale(scale: number): number {
+  return Math.max(MIN_PDF_SCALE, Math.min(MAX_PDF_SCALE, Math.round(scale * 100) / 100))
+}
+
+/** Return the in-workbench preview supported for a document path. */
+export function documentPreviewKind(path: string): DocumentPreviewKind | undefined {
+  const extension = path.split('.').at(-1)?.toLowerCase()
+  if (extension === 'pdf') return 'pdf'
+  if (extension === 'docx') return 'docx'
+  if (extension === 'doc' || extension === 'odt') return 'download'
+  return undefined
+}
+
+function DocxPreview({ src }: { src: string }) {
+  const root = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string>()
+  useEffect(() => {
+    const controller = new AbortController()
+    const target = root.current
+    if (target === null) return
+    setError(undefined)
+    void (async () => {
+      try {
+        const response = await fetch(src, { signal: controller.signal })
+        if (!response.ok) throw new Error(`无法读取文档 (${response.status})`)
+        const { renderAsync } = await import('docx-preview')
+        if (controller.signal.aborted) return
+        target.replaceChildren()
+        await renderAsync(await response.blob(), target, undefined, { inWrapper: false, ignoreWidth: false, ignoreHeight: false })
+      } catch (cause) {
+        if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause))
+      }
+    })()
+    return () => controller.abort()
+  }, [src])
+  return error === undefined ? <div ref={root} className="dvw-docx-preview"/> : <div className="dvw-document-error">无法预览 Word 文档：{error}</div>
+}
+
+type PdfDocument = {
+  numPages: number
+  getPage(page: number): Promise<{ getViewport(options: { scale: number }): { width: number; height: number }; render(options: { canvasContext: CanvasRenderingContext2D; viewport: { width: number; height: number } }): { promise: Promise<void>; cancel(): void } }>
+  destroy(): void
+}
+
+function PdfPreview({ src, path }: { src: string; path: string }) {
+  const canvas = useRef<HTMLCanvasElement>(null)
+  const documentRef = useRef<PdfDocument>()
+  const [page, setPage] = useState(1)
+  const [pages, setPages] = useState(0)
+  const [scale, setScale] = useState(1)
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    let cancelled = false
+    let document: PdfDocument | undefined
+    setPage(1); setPages(0); setError(undefined)
+    void (async () => {
+      try {
+        const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs')
+        pdfjs.GlobalWorkerOptions.workerSrc = '/dsh-vscode/pdfjs/worker.mjs'
+        document = await pdfjs.getDocument(src).promise as PdfDocument
+        if (cancelled) { document.destroy(); return }
+        documentRef.current = document
+        setPages(document.numPages)
+      } catch (cause) {
+        if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause))
+      }
+    })()
+    return () => { cancelled = true; documentRef.current = undefined; document?.destroy() }
+  }, [src])
+
+  useEffect(() => {
+    const document = documentRef.current
+    const target = canvas.current
+    if (document === undefined || target === null) return
+    let cancelled = false
+    let task: { promise: Promise<void>; cancel(): void } | undefined
+    void document.getPage(page).then(value => {
+      if (cancelled) return
+      const viewport = value.getViewport({ scale })
+      const ratio = window.devicePixelRatio || 1
+      target.width = Math.ceil(viewport.width * ratio)
+      target.height = Math.ceil(viewport.height * ratio)
+      target.style.width = `${viewport.width}px`
+      target.style.height = `${viewport.height}px`
+      const context = target.getContext('2d')
+      if (context === null) throw new Error('无法创建 PDF 画布')
+      context.setTransform(ratio, 0, 0, ratio, 0, 0)
+      task = value.render({ canvasContext: context, viewport })
+      return task.promise
+    }).catch(cause => { if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause)) })
+    return () => { cancelled = true; task?.cancel() }
+  }, [page, scale, pages])
+
+  return <section className="dvw-pdf-preview" aria-label={`${path} PDF 预览`}>
+    <header className="dvw-pdf-toolbar">
+      <button className="dvw-icon" title="上一页" disabled={page <= 1} onClick={() => setPage(value => Math.max(1, value - 1))}><span aria-hidden="true">‹</span></button>
+      <span>{pages === 0 ? '正在加载' : `${page} / ${pages}`}</span>
+      <button className="dvw-icon" title="下一页" disabled={pages === 0 || page >= pages} onClick={() => setPage(value => Math.min(pages, value + 1))}><span aria-hidden="true">›</span></button>
+      <span className="dvw-pdf-separator"/>
+      <button className="dvw-icon" title="缩小" disabled={scale <= MIN_PDF_SCALE} onClick={() => setScale(value => clampPdfScale(value - 0.1))}>−</button>
+      <button className="dvw-pdf-zoom" title="重置缩放" onClick={() => setScale(1)}>{Math.round(scale * 100)}%</button>
+      <button className="dvw-icon" title="放大" disabled={scale >= MAX_PDF_SCALE} onClick={() => setScale(value => clampPdfScale(value + 0.1))}>+</button>
+    </header>
+    {error === undefined ? <div className="dvw-pdf-page"><canvas ref={canvas}/></div> : <div className="dvw-document-error">无法预览 PDF：{error}</div>}
+  </section>
+}
+
+/** Render an in-workbench preview for PDF and Word documents. */
+export function DocumentPreview({ kind, src, path }: { kind: DocumentPreviewKind; src: string; path: string }) {
+  if (kind === 'pdf') return <PdfPreview src={src} path={path}/>
+  if (kind === 'docx') return <DocxPreview src={src}/>
+  return <div className="dvw-document-download"><strong>此格式无法在浏览器中可靠渲染</strong><a href={src} target="_blank" rel="noreferrer">打开 {path}</a></div>
+}

package/src/client/index.tsx

@@ -6,6 +6,7 @@ import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type { VscodeWorkbench } from './service.ts'
 import { WorkbenchController } from './service.ts'
+import { TerminalPanel } from './TerminalPanel.tsx'
 import { Launcher, Workbench } from './Workbench.tsx'
 import { installStyles } from './styles.ts'
 import { handleTerminalShortcut } from './shortcuts.ts'
@@ -32,6 +33,8 @@ export function apply(ctx: ClientContext): void {
   const service = new WorkbenchController()
   ctx.effect(() => installStyles(), 'dsh-vscode-workbench: styles')
   ctx.effect(() => { const dispose = ctx.reflect.provide('vscodeWorkbench', service); return () => { void dispose() } }, 'dsh-vscode-workbench: service')
+  ctx.effect(() => service.registerBottomPanel({ id: 'terminal', title: '终端', component: TerminalPanel }), 'dsh-vscode-workbench: terminal panel')
+  ctx.effect(() => service.registerCommand({ id: 'terminal.new', run() { window.dispatchEvent(new Event('dvw-terminal-new')) } }), 'dsh-vscode-workbench: terminal command')
   ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({ name: 'sidebar.footer.action', id: 'dsh-vscode-workbench-launcher', inject: () => ({ service }) }, Footer))
   ctx.slots.inject('shell.overlay', () => ctx.slots.register({ name: 'shell.overlay', id: 'dsh-vscode-workbench-overlay', inject: () => ({ service }) }, Overlay))
   ctx.effect(() => {

package/src/client/shortcuts.ts

@@ -1,5 +1,21 @@
 import type { VscodeWorkbench } from './service.ts'
 
+/** Reveal the terminal panel supplied by a terminal adapter without toggling it closed. */
+export function openTerminal(workbench: VscodeWorkbench): boolean {
+  if (!workbench.getPanels().some(panel => panel.id === 'terminal')) return false
+  workbench.show()
+  if (workbench.getSnapshot().bottomPanel !== 'terminal') workbench.toggleBottomPanel('terminal')
+  return true
+}
+
+/** Toggle the terminal panel from the activity bar. */
+export function toggleTerminal(workbench: VscodeWorkbench): boolean {
+  if (!workbench.getPanels().some(panel => panel.id === 'terminal')) return false
+  workbench.show()
+  workbench.toggleBottomPanel('terminal')
+  return true
+}
+
 /** Handle terminal shortcuts through contributions registered by a terminal adapter. */
 export function handleTerminalShortcut(event: KeyboardEvent, workbench: VscodeWorkbench): boolean {
   if (event.isComposing || !event.ctrlKey || event.altKey || event.code !== 'Backquote') return false
@@ -8,7 +24,7 @@ export function handleTerminalShortcut(event: KeyboardEvent, workbench: VscodeWo
   event.stopImmediatePropagation()
   workbench.show()
   if (event.shiftKey) {
-    if (workbench.getSnapshot().bottomPanel !== 'terminal') workbench.toggleBottomPanel('terminal')
+    openTerminal(workbench)
     queueMicrotask(() => workbench.runCommand('terminal.new'))
   } else {
     workbench.toggleBottomPanel('terminal')