dsh-vscode-workbench 0.1.14 → 0.2.0

package/src/client/ActivityBar.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent, ReactNode } from 'react'
+
+export interface ActivityView {
+  id: string
+  label: string
+  icon: ReactNode
+  active: boolean
+  disabled?: boolean
+  onActivate(): void
+}
+
+/** Keep known ids in saved order, appending newly added views at the end. */
+export function normalizeActivityOrder(value: unknown, known: readonly string[]): string[] {
+  const saved = Array.isArray(value) ? value.filter((id): id is string => typeof id === 'string' && known.includes(id)) : []
+  return [...new Set(saved), ...known.filter(id => !saved.includes(id))]
+}
+
+/** Move `id` before `before` (or to the end when absent), leaving unknown ids untouched. */
+export function moveActivity(order: readonly string[], id: string, before: string | undefined): string[] {
+  if (!order.includes(id) || (before !== undefined && !order.includes(before))) return [...order]
+  const next = order.filter(value => value !== id)
+  const index = before === undefined ? next.length : next.indexOf(before)
+  next.splice(index, 0, id)
+  return next
+}
+
+export function toggleActivityHidden(hidden: readonly string[], id: string): string[] {
+  return hidden.includes(id) ? hidden.filter(value => value !== id) : [...hidden, id]
+}
+
+/** VS Code-style activity bar: pointer drag with a floating ghost and live reordering, right-click hide. */
+export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderChange, onHiddenChange }: {
+  views: ActivityView[]
+  fixed: ActivityView[]
+  bottom?: ActivityView[]
+  order: string[]
+  hidden: string[]
+  onOrderChange(order: string[]): void
+  onHiddenChange(hidden: string[]): void
+}) {
+  const [menu, setMenu] = useState<{ x: number; y: number; target?: string }>()
+  const drag = useRef<{ id: string; x: number; y: number; active: boolean }>()
+  const nodes = useRef(new Map<string, HTMLButtonElement>())
+  const flip = useRef<Map<string, number>>()
+  const suppressClick = useRef(false)
+  const [draggingId, setDraggingId] = useState<string>()
+  const [ghost, setGhost] = useState<{ x: number; y: number }>()
+  const [preview, setPreview] = useState<string[]>()
+
+  useEffect(() => {
+    if (menu === undefined) return
+    const close = () => setMenu(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) }
+  }, [menu])
+
+  // Animate the neighbours into their new slots after a live reorder, like VS Code's activity bar.
+  useLayoutEffect(() => {
+    const before = flip.current
+    flip.current = undefined
+    if (before === undefined) return
+    for (const [id, element] of nodes.current) {
+      const previous = before.get(id)
+      if (previous === undefined) continue
+      const delta = previous - element.getBoundingClientRect().top
+      if (Math.abs(delta) < 1) continue
+      element.animate?.([{ transform: `translateY(${delta}px)` }, { transform: 'translateY(0)' }], { duration: 160, easing: 'ease' })
+    }
+  })
+
+  const visible = views.filter(view => !hidden.includes(view.id))
+  const currentOrder = preview ?? order
+  const ordered = currentOrder.flatMap(id => visible.filter(view => view.id === id))
+  const toggled = (id: string) => onHiddenChange(toggleActivityHidden(hidden, id))
+  const target = menu?.target === undefined ? undefined : views.find(view => view.id === menu.target)
+
+  const capturePositions = () => { flip.current = new Map([...nodes.current].map(([id, element]) => [id, element.getBoundingClientRect().top])) }
+  const beginDrag = (event: ReactPointerEvent<HTMLButtonElement>, id: string) => {
+    if (event.button !== 0) return
+    drag.current = { id, x: event.clientX, y: event.clientY, active: false }
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+  }
+  const moveDrag = (event: ReactPointerEvent<HTMLButtonElement>, id: string) => {
+    const state = drag.current
+    if (state === undefined || state.id !== id) return
+    if (!state.active) {
+      if (Math.abs(event.clientX - state.x) + Math.abs(event.clientY - state.y) < 5) return
+      state.active = true; setDraggingId(id)
+    }
+    setGhost({ x: event.clientX, y: event.clientY })
+    const element = (document.elementFromPoint(event.clientX, event.clientY) as HTMLElement | null)?.closest<HTMLElement>('[data-act-id]')
+    if (element === null || element === undefined) return
+    const targetId = element.dataset.actId
+    if (targetId === undefined || targetId === id || !visible.some(view => view.id === targetId)) return
+    const rect = element.getBoundingClientRect()
+    const ids = currentOrder.filter(value => visible.some(view => view.id === value))
+    const index = ids.indexOf(targetId)
+    if (index < 0) return
+    const next = moveActivity(currentOrder, id, event.clientY > rect.top + rect.height / 2 ? ids[index + 1] : targetId)
+    if (next.join('|') === currentOrder.join('|')) return
+    capturePositions()
+    setPreview(next)
+  }
+  const endDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    const state = drag.current; drag.current = undefined
+    if (state?.active) {
+      suppressClick.current = true
+      window.setTimeout(() => { suppressClick.current = false }, 0)
+      if (preview !== undefined) onOrderChange(preview)
+    }
+    event.currentTarget.releasePointerCapture?.(event.pointerId)
+    setDraggingId(undefined); setGhost(undefined); setPreview(undefined)
+  }
+  const cancelDrag = () => { drag.current = undefined; setDraggingId(undefined); setGhost(undefined); setPreview(undefined) }
+  const renderView = (view: ActivityView) => <button
+    key={view.id}
+    ref={element => { if (element === null) nodes.current.delete(view.id); else nodes.current.set(view.id, element) }}
+    className="dvw-act"
+    data-act-id={view.id}
+    data-active={view.active}
+    data-dragging={draggingId === view.id || undefined}
+    disabled={view.disabled}
+    title={view.label}
+    onPointerDown={event => beginDrag(event, view.id)}
+    onPointerMove={event => moveDrag(event, view.id)}
+    onPointerUp={event => endDrag(event)}
+    onPointerCancel={cancelDrag}
+    onClick={() => { if (!suppressClick.current) view.onActivate() }}
+    onContextMenu={event => { event.preventDefault(); event.stopPropagation(); setMenu({ x: event.clientX, y: event.clientY, target: view.id }) }}
+  >{view.icon}</button>
+
+  return <>
+    <nav className="dvw-activity" onContextMenu={event => { event.preventDefault(); setMenu({ x: event.clientX, y: event.clientY }) }}>
+      {ordered.length === 0 ? <span className="dvw-activity-empty" aria-hidden="true"/> : ordered.map(renderView)}
+      {fixed.map(view => <button key={view.id} className="dvw-act" data-act-id={view.id} data-active={view.active} disabled={view.disabled} title={view.label} onClick={view.onActivate}>{view.icon}</button>)}
+      <div className="dvw-activity-bottom">{bottom.map(view => <button key={view.id} className="dvw-act" data-act-id={view.id} data-active={view.active} disabled={view.disabled} title={view.label} onClick={view.onActivate}>{view.icon}</button>)}</div>
+    </nav>
+    {draggingId !== undefined && ghost !== undefined && <div className="dvw-activity-ghost" style={{ left: ghost.x, top: ghost.y }} aria-hidden="true">{views.find(view => view.id === draggingId)?.icon}</div>}
+    {menu !== undefined && <div className="dvw-context-menu dvw-activity-menu" role="menu" style={{ left: menu.x, top: menu.y }} onPointerDown={event => event.stopPropagation()}>
+      {target !== undefined && <button role="menuitem" onClick={() => { toggled(target.id); setMenu(undefined) }}>隐藏“{target.label}”</button>}
+      {target !== undefined && <div className="dvw-menu-separator"/>}
+      {views.map(view => <button role="menuitem" key={view.id} data-checked={!hidden.includes(view.id)} onClick={() => { toggled(view.id); setMenu(undefined) }}>
+        <span className="dvw-menu-check">{hidden.includes(view.id) ? '' : '✓'}</span>{view.label}
+      </button>)}
+      <div className="dvw-menu-separator"/>
+      <button role="menuitem" disabled={hidden.length === 0} onClick={() => { onHiddenChange([]); setMenu(undefined) }}>恢复所有视图</button>
+    </div>}
+  </>
+}

package/src/client/DshConversationPanel.tsx

@@ -25,10 +25,17 @@ export function DshConversationPanel({ visible, width, statusHeight }: { visible
     }
     attach()
     document.body.setAttribute('data-dvw-conversation-active', '')
-    const observer = new MutationObserver(attach)
+    // Monaco rebuilds its line DOM on every scroll frame; skip workbench-only
+    // mutations and coalesce the rest so the document-wide query runs at most once a frame.
+    let frame = 0
+    const observer = new MutationObserver(records => {
+      if (frame !== 0 || records.every(record => record.target instanceof Element && record.target.closest('.dvw-overlay') !== null)) return
+      frame = requestAnimationFrame(() => { frame = 0; attach() })
+    })
     observer.observe(document.body, { childList: true, subtree: true })
     return () => {
       observer.disconnect()
+      cancelAnimationFrame(frame)
       document.body.removeAttribute('data-dvw-conversation-active')
       attached?.removeAttribute('data-dvw-conversation-panel')
       attached?.style.removeProperty('--dvw-chat-width')
@@ -38,21 +45,17 @@ export function DshConversationPanel({ visible, width, statusHeight }: { visible
   return null
 }
 
-/** Temporarily align the official DSH palette with a fixed workbench palette. */
+/** Temporarily align the official DSH panel palette with a fixed workbench palette. */
 export function DshConversationTheme({ visible, colorScheme, followDsh }: { visible: boolean; colorScheme: 'dark' | 'light'; followDsh: boolean }) {
   useLayoutEffect(() => {
-    if (!visible || followDsh) return
+    if (!visible) return
     const body = document.body
-    const root = document.documentElement
-    const wasDark = body.hasAttribute('data-ds-dark-theme')
-    const previousColorScheme = root.style.colorScheme
-    body.toggleAttribute('data-ds-dark-theme', colorScheme === 'dark')
-    root.style.colorScheme = colorScheme
-    return () => {
-      body.toggleAttribute('data-ds-dark-theme', wasDark)
-      if (previousColorScheme === '') root.style.removeProperty('color-scheme')
-      else root.style.colorScheme = previousColorScheme
+    if (followDsh) {
+      body.removeAttribute('data-dvw-palette')
+      return
     }
+    body.setAttribute('data-dvw-palette', colorScheme)
+    return () => body.removeAttribute('data-dvw-palette')
   }, [visible, colorScheme, followDsh])
   return null
 }

package/src/client/FileIcon.tsx

@@ -0,0 +1,6 @@
+import { fileIconName } from './fileIconMap.ts'
+
+/** Colorful vscode-icons glyph for an explorer entry or editor tab. */
+export function FileIcon({ name, directory = false, expanded = false, size = 16, className = 'dvw-file-icon' }: { name: string; directory?: boolean; expanded?: boolean; size?: number; className?: string }) {
+  return <img className={className} src={`/dsh-vscode/file-icons/${fileIconName(name, directory, expanded)}`} width={size} height={size} alt="" draggable={false}/>
+}

package/src/client/Icon.tsx

@@ -1,5 +1,5 @@
 export type CodiconName =
-  | 'add' | 'check' | 'check-all' | 'chevron-down' | 'chevron-right' | 'close' | 'close-all' | 'cloud-upload' | 'code' | 'color-mode' | 'edit'
+  | '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'
@@ -8,16 +8,3 @@ export type CodiconName =
 export function Icon({ name, className = '' }: { name: CodiconName; className?: string }) {
   return <span aria-hidden="true" className={`codicon codicon-${name} ${className}`.trim()} />
 }
-
-const CODE_EXTENSIONS = new Set(['c','cc','cpp','cs','css','go','h','hpp','html','java','js','jsx','json','kt','lua','mjs','py','rb','rs','scss','sh','sql','swift','ts','tsx','vue','xml','yaml','yml'])
-const MEDIA_EXTENSIONS = new Set(['avif','bmp','gif','ico','jpeg','jpg','mp3','mp4','ogg','png','svg','webm','webp','wav'])
-
-/** Select a Codicon for a file name without depending on a file-icon theme. */
-export function fileIcon(name: string): CodiconName {
-  const extension = name.includes('.') ? name.split('.').at(-1)?.toLowerCase() ?? '' : ''
-  if (CODE_EXTENSIONS.has(extension)) return 'file-code'
-  if (MEDIA_EXTENSIONS.has(extension)) return 'file-media'
-  if (extension === 'pdf') return 'file-pdf'
-  if (['zip','gz','tgz','tar','7z'].includes(extension)) return 'file-zip'
-  return 'file'
-}

package/src/client/MonacoEditor.tsx

@@ -1,24 +1,103 @@
 import { useEffect, useRef, useState } from 'react'
+import { searchHighlightRange } from './searchHighlight.ts'
+import type { EditorSelection } from './dshComposer.ts'
+import { isIndexedModel } from './typescriptProject.ts'
 
 type Monaco = typeof import('monaco-editor')
 declare global { interface Window { require?: { (ids: string[], done: () => void): void; config(value: unknown): void }; monaco?: Monaco } }
 let loading: Promise<Monaco> | undefined
 /** Monaco chrome used by both editors so only the narrow native scrollbar remains. */
 export const WORKBENCH_EDITOR_CHROME = {
+  // VS Code navigation: Ctrl+hover underlines definitions, multiple results open Peek, a single one jumps.
+  definitionLinkOpensInPeek: false,
+  gotoLocation: { multipleDefinitions: 'gotoAndPeek', multipleReferences: 'peek', multipleImplementations: 'peek', multipleTypeDefinitions: 'gotoAndPeek', multipleDeclarations: 'peek', alternativeDefinitionCommand: 'editor.action.goToReferences' },
+  parameterHints: { enabled: true, cycle: true },
+  quickSuggestions: { other: true, comments: false, strings: false },
+  suggestOnTriggerCharacters: true,
   minimap: { enabled: false },
   renderOverviewRuler: false,
   overviewRulerLanes: 0,
   hideCursorInOverviewRuler: true,
+  renderLineHighlightOnlyWhenFocus: true,
   scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
 } as const
 
+/** Monaco theme aligned with the workbench dark palette. */
+export const DARK_THEME = 'dvw-dark'
+const DARK_RULES = [
+  { token: '', foreground: 'bfbfbf' },
+  { token: 'comment', foreground: '6a9955' },
+  { token: 'string', foreground: 'ce9178' },
+  { token: 'keyword', foreground: '569cd6' },
+  { token: 'number', foreground: 'b5cea8' },
+  { token: 'regexp', foreground: 'd16969' },
+  { token: 'type', foreground: '4ec9b0' },
+  { token: 'function', foreground: 'dcdcaa' },
+  { token: 'variable', foreground: '9cdcfe' },
+  { token: 'constant', foreground: '4fc1ff' },
+  { token: 'tag', foreground: '569cd6' },
+  { token: 'attribute.name', foreground: '9cdcfe' },
+  { token: 'attribute.value', foreground: 'ce9178' },
+  { token: 'delimiter', foreground: 'cccccc' },
+]
+const DARK_COLORS = {
+  'editor.background': '#121314',
+  'editor.foreground': '#bfbfbf',
+  'editorLineNumber.foreground': '#6e6e6e',
+  'editorLineNumber.activeForeground': '#bfbfbf',
+  'editorCursor.foreground': '#bfbfbf',
+  'editor.selectionBackground': '#264f78',
+  'editor.inactiveSelectionBackground': '#3a3d41',
+  'editor.lineHighlightBackground': '#191a1b',
+  'editorIndentGuide.background1': '#303132',
+  'editorIndentGuide.activeBackground1': '#4a4b4c',
+  'editorWhitespace.foreground': '#3b3b3b',
+  'editorGutter.background': '#121314',
+  'editorWidget.background': '#202122',
+  'editorWidget.border': '#2a2b2c',
+  'editorSuggestWidget.background': '#202122',
+  'editorSuggestWidget.selectedBackground': '#2a2b2c',
+  'editorHoverWidget.background': '#202122',
+  'editorHoverWidget.border': '#2a2b2c',
+  'editorBracketMatch.background': '#0d3a4d',
+  'editorBracketMatch.border': '#307e9f',
+  'diffEditor.insertedLineBackground': '#172319',
+  'diffEditor.removedLineBackground': '#2d1919',
+  'diffEditor.insertedTextBackground': '#2a4c2c',
+  'diffEditor.removedTextBackground': '#5a2626',
+  'diffEditor.border': '#2a2b2c',
+  'diffEditor.diagonalFill': '#252526',
+  'scrollbarSlider.background': '#79797966',
+  'scrollbarSlider.hoverBackground': '#646464b3',
+  'scrollbarSlider.activeBackground': '#bfbfbf66',
+}
+function defineWorkbenchThemes(monaco: Monaco): void {
+  monaco.editor.defineTheme(DARK_THEME, { base: 'vs-dark', inherit: true, rules: DARK_RULES, colors: DARK_COLORS })
+}
+
+/**
+ * Bootstrap source for Monaco's AMD web workers. Workers resolve module paths against their own
+ * blob URL, so they need an absolute `baseUrl`; without it the TypeScript language worker fails to load.
+ */
+export function monacoWorkerBootstrap(base: string): string {
+  return `self.MonacoEnvironment={baseUrl:${JSON.stringify(base)}};importScripts(${JSON.stringify(`${base}vs/base/worker/workerMain.js`)});`
+}
+
 export function loadMonaco(): Promise<Monaco> {
   loading ??= new Promise((resolve, reject) => {
     const start = () => {
       const loader = window.require
       if (loader === undefined) return reject(new Error('Monaco AMD loader unavailable'))
-      loader.config({ paths: { vs: '/dsh-vscode/monaco/vs' } })
-      loader(['vs/editor/editor.main'], () => window.monaco === undefined ? reject(new Error('Monaco failed to initialize')) : resolve(window.monaco))
+      const base = new URL('/dsh-vscode/monaco/', location.href).href
+      window.MonacoEnvironment = { getWorkerUrl: () => URL.createObjectURL(new Blob([monacoWorkerBootstrap(base)], { type: 'text/javascript' })) }
+      loader.config({ paths: { vs: `${base}vs` }, 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } })
+      loader(['vs/nls.messages.zh-cn'], () => {
+        loader(['vs/editor/editor.main'], () => {
+          if (window.monaco === undefined) return reject(new Error('Monaco failed to initialize'))
+          defineWorkbenchThemes(window.monaco)
+          resolve(window.monaco)
+        })
+      })
     }
     if (window.require !== undefined) { start(); return }
     const script = document.createElement('script'); script.src = '/dsh-vscode/monaco/vs/loader.js'; script.onload = start; script.onerror = () => reject(new Error('failed to load Monaco')); document.head.append(script)
@@ -26,40 +105,129 @@ export function loadMonaco(): Promise<Monaco> {
   return loading
 }
 
-export function MonacoDiffEditor(props: { uri: string; original: string; modified: string; mode: 'inline' | 'split'; theme: 'dark' | 'light' }) {
+export function MonacoDiffEditor(props: { uri: string; original: string; modified: string; mode: 'inline' | 'split'; theme: 'dark' | 'light'; fontSize?: number }) {
   const root=useRef<HTMLDivElement>(null);const editor=useRef<import('monaco-editor').editor.IStandaloneDiffEditor>();const models=useRef<{original:import('monaco-editor').editor.ITextModel;modified:import('monaco-editor').editor.ITextModel}>();const [error,setError]=useState<string>()
-  useEffect(()=>{let disposed=false;void loadMonaco().then(monaco=>{if(disposed||root.current===null)return;const safe=props.uri.replace(/^\/+/, '');const original=monaco.editor.createModel(props.original,undefined,monaco.Uri.parse(`dvw-diff-original:///${safe}`));const modified=monaco.editor.createModel(props.modified,undefined,monaco.Uri.parse(`dvw-diff-modified:///${safe}`));models.current={original,modified};const instance=monaco.editor.createDiffEditor(root.current,{automaticLayout:true,readOnly:true,renderSideBySide:props.mode==='split',theme:props.theme==='dark'?'vs-dark':'vs',fontSize:14,...WORKBENCH_EDITOR_CHROME,originalEditable:false,ignoreTrimWhitespace:false});instance.setModel({original,modified});editor.current=instance}).catch(error=>setError(error instanceof Error?error.message:String(error)));return()=>{disposed=true;editor.current?.dispose();editor.current=undefined;models.current?.original.dispose();models.current?.modified.dispose();models.current=undefined}},[props.uri])
+  useEffect(()=>{let disposed=false;void loadMonaco().then(monaco=>{if(disposed||root.current===null)return;const safe=props.uri.replace(/^\/+/, '');const original=monaco.editor.createModel(props.original,undefined,monaco.Uri.parse(`dvw-diff-original:///${safe}`));const modified=monaco.editor.createModel(props.modified,undefined,monaco.Uri.parse(`dvw-diff-modified:///${safe}`));models.current={original,modified};const instance=monaco.editor.createDiffEditor(root.current,{automaticLayout:true,readOnly:true,renderSideBySide:props.mode==='split',theme:props.theme==='dark'?DARK_THEME:'vs',fontSize:props.fontSize??14,...WORKBENCH_EDITOR_CHROME,originalEditable:false,ignoreTrimWhitespace:false});instance.setModel({original,modified});editor.current=instance}).catch(error=>setError(error instanceof Error?error.message:String(error)));return()=>{disposed=true;editor.current?.dispose();editor.current=undefined;models.current?.original.dispose();models.current?.modified.dispose();models.current=undefined}},[props.uri])
   useEffect(()=>{const value=models.current;if(value===undefined)return;if(value.original.getValue()!==props.original)value.original.setValue(props.original);if(value.modified.getValue()!==props.modified)value.modified.setValue(props.modified)},[props.original,props.modified])
   useEffect(()=>{editor.current?.updateOptions({renderSideBySide:props.mode==='split'})},[props.mode])
-  useEffect(()=>{if(window.monaco!==undefined)window.monaco.editor.setTheme(props.theme==='dark'?'vs-dark':'vs')},[props.theme])
+  useEffect(()=>{editor.current?.updateOptions({fontSize:props.fontSize??14})},[props.fontSize])
+  useEffect(()=>{if(window.monaco!==undefined)window.monaco.editor.setTheme(props.theme==='dark'?DARK_THEME:'vs')},[props.theme])
   return error===undefined?<div className="dvw-diff dvw-monaco-diff" data-mode={props.mode} data-render-side-by-side={props.mode==='split'} ref={root}/>:<div className="dvw-error">{error}</div>
 }
 
-export function MonacoEditor(props: { uri: string; value: string; theme: 'dark' | 'light'; line?: number; column?: number; onChange(value: string): void; onSave(): void }) {
+/** Start downloading Monaco in the background so the first opened file does not wait for it. */
+export function preloadMonaco(): void {
+  void loadMonaco().catch(() => { /* The editor reports the failure when it mounts. */ })
+}
+
+function modelUri(monaco: Monaco, uri: string): import('monaco-editor').Uri {
+  return monaco.Uri.parse(`file:///${uri.replace(/^\/+/, '')}`)
+}
+
+/** Scroll and cursor positions per document, kept while its tab stays open. */
+const viewStates = new Map<string, import('monaco-editor').editor.ICodeEditorViewState>()
+/** The search hit last revealed per document, so only a new hit overrides the saved position. */
+const revealedHits = new Map<string, string>()
+const hitKey = (props: { line?: number; column?: number; highlight?: string }) => props.line === undefined ? '' : `${props.line}:${props.column ?? 1}:${props.highlight ?? ''}`
+
+/** Dispose the models of closed tabs so Monaco stops tracking their text. */
+export function retainEditorModels(uris: string[]): void {
+  const monaco = window.monaco
+  if (monaco === undefined) return
+  const keep = new Set(uris.map(uri => modelUri(monaco, uri).toString()))
+  for (const model of monaco.editor.getModels()) {
+    const key = model.uri.toString()
+    if (model.uri.scheme !== 'file' || keep.has(key) || model.isAttachedToEditor()) continue
+    // Closing a tab returns its file to the language-service index instead of dropping it.
+    if (isIndexedModel(key)) { viewStates.delete(key); revealedHits.delete(key); continue }
+    viewStates.delete(key); revealedHits.delete(key); model.dispose()
+  }
+}
+
+/** The primary selection as text plus inclusive lines; a selection ending at column 1 does not claim that line. */
+function editorSelection(instance: import('monaco-editor').editor.IStandaloneCodeEditor): EditorSelection | undefined {
+  const model = instance.getModel(); const range = instance.getSelection()
+  if (model === null || range === null || range.isEmpty()) return undefined
+  const endLine = range.endColumn === 1 && range.endLineNumber > range.startLineNumber ? range.endLineNumber - 1 : range.endLineNumber
+  return { text: model.getValueInRange(range), startLine: range.startLineNumber, endLine }
+}
+
+export function MonacoEditor(props: { uri: string; value: string; theme: 'dark' | 'light'; line?: number; column?: number; fontSize?: number; highlight?: string; onChange(value: string): void; onSave(): void; onAddToDsh?(selection?: EditorSelection): void }) {
   const root = useRef<HTMLDivElement>(null)
   const editor = useRef<import('monaco-editor').editor.IStandaloneCodeEditor>()
-  const callbacks = useRef({ onChange: props.onChange, onSave: props.onSave })
-  callbacks.current = { onChange: props.onChange, onSave: props.onSave }
+  const decorations = useRef<import('monaco-editor').editor.IEditorDecorationsCollection>()
+  const latest = useRef(props)
+  latest.current = props
   const [error, setError] = useState<string>()
+  /** Select the requested search hit in the current model. */
+  const reveal = (monaco: Monaco, instance: import('monaco-editor').editor.IStandaloneCodeEditor) => {
+    const { line: target, column, highlight } = latest.current
+    const model = instance.getModel()
+    decorations.current?.clear(); decorations.current = undefined
+    if (model === null) return
+    revealedHits.set(model.uri.toString(), hitKey(latest.current))
+    if (target === undefined) return
+    const line = Math.max(1, Math.min(Math.round(target), model.getLineCount()))
+    const text = model.getLineContent(line)
+    const needle = highlight ?? ''
+    const { startColumn, endColumn } = searchHighlightRange(text, needle, column ?? 1)
+    const range = new monaco.Range(line, startColumn, line, endColumn)
+    instance.setSelection(range)
+    instance.revealLineInCenter(line)
+    instance.focus()
+    decorations.current = needle === '' ? undefined : instance.createDecorationsCollection([{ range, options: { inlineClassName: 'dvw-search-hit' } }])
+  }
+  /** Show the current tab's model in the shared editor, restoring where the user left it. */
+  const attach = (monaco: Monaco, instance: import('monaco-editor').editor.IStandaloneCodeEditor) => {
+    const { uri, value } = latest.current
+    const next = modelUri(monaco, uri)
+    const previous = instance.getModel()
+    if (previous?.uri.toString() === next.toString()) return
+    const state = instance.saveViewState()
+    if (previous !== null && state !== null) viewStates.set(previous.uri.toString(), state)
+    const model = monaco.editor.getModel(next) ?? monaco.editor.createModel(value, undefined, next)
+    if (model.getValue() !== value) model.setValue(value)
+    instance.setModel(model)
+    const saved = viewStates.get(next.toString())
+    if (saved !== undefined) instance.restoreViewState(saved)
+    if (saved === undefined || revealedHits.get(next.toString()) !== hitKey(latest.current)) reveal(monaco, instance)
+    else { decorations.current?.clear(); decorations.current = undefined }
+  }
+  // One editor instance serves every text tab: switching tabs swaps its model
+  // instead of rebuilding Monaco's DOM, workers and services.
   useEffect(() => {
-    let disposed = false; let model: import('monaco-editor').editor.ITextModel | undefined
+    let disposed = false
     void loadMonaco().then((monaco) => {
       if (disposed || root.current === null) return
-      const uri = monaco.Uri.parse(`file:///${props.uri.replace(/^\/+/, '')}`)
-      model = monaco.editor.getModel(uri) ?? monaco.editor.createModel(props.value, undefined, uri)
-      if (model.getValue() !== props.value) model.setValue(props.value)
-      const instance = monaco.editor.create(root.current, { model, automaticLayout: true, theme: props.theme === 'dark' ? 'vs-dark' : 'vs', fontSize: 14, ...WORKBENCH_EDITOR_CHROME, wordWrap: 'off' })
+      const props = latest.current
+      const instance = monaco.editor.create(root.current, { model: null, automaticLayout: true, theme: props.theme === 'dark' ? DARK_THEME : 'vs', fontSize: props.fontSize ?? 14, ...WORKBENCH_EDITOR_CHROME, wordWrap: 'off' })
       editor.current = instance
-      const change = instance.onDidChangeModelContent(() => callbacks.current.onChange(instance.getValue()))
-      instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => callbacks.current.onSave())
-      if (props.line !== undefined) { instance.setPosition({ lineNumber: props.line, column: props.column ?? 1 }); instance.revealLineInCenter(props.line); instance.focus() }
-      return () => { change.dispose() }
+      instance.onDidChangeModelContent(() => latest.current.onChange(instance.getValue()))
+      instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => latest.current.onSave())
+      instance.addAction({ id: 'dvw.addToDsh', label: '添加到 DSH 对话', contextMenuGroupId: 'navigation', contextMenuOrder: 0, keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyK], run: () => latest.current.onAddToDsh?.(editorSelection(instance)) })
+      attach(monaco, instance)
     }).catch(error => setError(error instanceof Error ? error.message : String(error)))
-    return () => { disposed = true; editor.current?.dispose(); editor.current = undefined }
+    return () => {
+      disposed = true
+      const instance = editor.current
+      const model = instance?.getModel(); const state = instance?.saveViewState()
+      if (model && state) viewStates.set(model.uri.toString(), state)
+      instance?.dispose(); editor.current = undefined
+    }
+  }, [])
+  useEffect(() => {
+    const instance = editor.current; const monaco = window.monaco
+    if (instance !== undefined && monaco !== undefined) attach(monaco, instance)
   }, [props.uri])
   useEffect(() => {
     const model = editor.current?.getModel(); if (model !== null && model !== undefined && model.getValue() !== props.value) model.setValue(props.value)
   }, [props.value])
-  useEffect(() => { if (window.monaco !== undefined) window.monaco.editor.setTheme(props.theme === 'dark' ? 'vs-dark' : 'vs') }, [props.theme])
+  useEffect(() => { if (window.monaco !== undefined) window.monaco.editor.setTheme(props.theme === 'dark' ? DARK_THEME : 'vs') }, [props.theme])
+  useEffect(() => { editor.current?.updateOptions({ fontSize: props.fontSize ?? 14 }) }, [props.fontSize])
+  useEffect(() => {
+    const instance = editor.current; const monaco = window.monaco; const model = instance?.getModel()
+    if (instance === undefined || monaco === undefined || model === null || model === undefined) return
+    if (revealedHits.get(model.uri.toString()) !== hitKey(props)) reveal(monaco, instance)
+  }, [props.uri, props.line, props.column, props.highlight])
   return error === undefined ? <div ref={root} style={{ position: 'absolute', inset: 0 }} /> : <div className="dvw-error">{error}</div>
 }

package/src/client/TerminalPanel.tsx

@@ -5,7 +5,9 @@ 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' } }
+// 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') { 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' }) {
   const root = useRef<HTMLDivElement>(null)
@@ -15,7 +17,8 @@ function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspac
   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) })
+    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)
@@ -39,7 +42,7 @@ function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspac
     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) terminalRef.current.options.theme = terminalTheme(colorScheme) }, [colorScheme])
+  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>
 }