dsh-vscode-workbench 0.2.1 → 0.2.3

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

@@ -12,7 +12,11 @@ export declare function normalizeActivityOrder(value: unknown, known: readonly s
 /** Move `id` before `before` (or to the end when absent), leaving unknown ids untouched. */
 export declare function moveActivity(order: readonly string[], id: string, before: string | undefined): string[];
 export declare function toggleActivityHidden(hidden: readonly string[], id: string): string[];
-/** VS Code-style activity bar: pointer drag with a floating ghost and live reordering, right-click hide. */
+/**
+ * VS Code-style activity bar: every view can be dragged into a new slot while `fixed` actions stay pinned on
+ * top and `bottom` actions stay pinned at the foot. Reordering is computed from pointer position so it keeps
+ * working when the DOM shifts under a fast drag.
+ */
 export declare function ActivityBar({ views, fixed, bottom, order, hidden, onOrderChange, onHiddenChange }: {
     views: ActivityView[];
     fixed: ActivityView[];

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

@@ -9,6 +9,6 @@ export declare function DshConversationPanel({ visible, width, statusHeight }: {
 /** Temporarily align the official DSH panel palette with a fixed workbench palette. */
 export declare function DshConversationTheme({ visible, colorScheme, followDsh }: {
     visible: boolean;
-    colorScheme: 'dark' | 'light';
+    colorScheme: 'dark' | 'light' | 'white' | 'eyecare';
     followDsh: boolean;
 }): null;

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

@@ -56,6 +56,10 @@ export declare function isMacDefinitionClick(event: {
 }): boolean;
 /** Monaco theme aligned with the workbench dark palette. */
 export declare const DARK_THEME = "dvw-dark";
+/** Eye-care palette: the editor shares the workbench's warm yellow surface. */
+export declare const EYE_THEME = "dvw-eyecare";
+export type MonacoColorScheme = 'dark' | 'light' | 'white' | 'eyecare';
+export declare function monacoThemeFor(theme: MonacoColorScheme): string;
 /**
  * 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.
@@ -67,7 +71,7 @@ export declare function MonacoDiffEditor(props: {
     original: string;
     modified: string;
     mode: 'inline' | 'split';
-    theme: 'dark' | 'light';
+    theme: MonacoColorScheme;
     fontSize?: number;
 }): import("react").JSX.Element;
 /** Start downloading Monaco in the background so the first opened file does not wait for it. */
@@ -77,7 +81,7 @@ export declare function retainEditorModels(uris: string[]): void;
 export declare function MonacoEditor(props: {
     uri: string;
     value: string;
-    theme: 'dark' | 'light';
+    theme: MonacoColorScheme;
     line?: number;
     column?: number;
     fontSize?: number;

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

@@ -20,6 +20,8 @@ interface Tab extends FileDocument {
     documentPreview?: DocumentPreviewKind;
     documentUrl?: string;
 }
+export type MarkdownDefaultView = 'preview' | 'source';
+export declare const MARKDOWN_DEFAULT_VIEW_KEY = "dvw:markdown-default-view";
 type ResizeDirection = 1 | -1;
 export declare const DSH_CHAT_MIN_WIDTH = 440;
 export declare const DSH_CHAT_MAX_WIDTH = 720;
@@ -28,6 +30,8 @@ export declare const DSH_CHAT_DEFAULT_WIDTH = 440;
 export declare function clampChatWidth(width: number): number;
 /** 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;
+/** Read the saved Markdown default without depending on browser storage during unit tests. */
+export declare function markdownDefaultView(): MarkdownDefaultView;
 /** 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/WorkspaceSwitcher.d.ts

@@ -1,13 +1,14 @@
 import type { WorkspaceChoice } from './dshNavigation.ts';
 /** Centered switcher: existing workspaces, their sessions, and a new-workspace action. */
-export declare function WorkspaceSwitcher({ choices, activeSessionId, unavailable, busy, error, onCreate, onSwitch, onOpenWorkspace, onClose }: {
+export declare function WorkspaceSwitcher({ choices, activeSessionId, unavailable, busy, error, theme, onCreate, onSwitch, onOpenWorkspace, onClose }: {
     choices: WorkspaceChoice[];
     activeSessionId?: string;
     unavailable: boolean;
     busy: boolean;
     error?: string;
+    theme?: 'dark' | 'light' | 'white' | 'eyecare';
     onCreate(): void;
     onSwitch(sessionId: string): void;
     onOpenWorkspace(workspaceId: string): void;
     onClose(): void;
-}): import("react").JSX.Element;
+}): import("react").ReactPortal;

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

@@ -7,6 +7,12 @@ export interface LspServerStatus {
     installable: boolean;
     installed: boolean;
     hint?: string;
+    command?: string;
+    /** Manual servers report the language toolchain next to the server so the two are not confused. */
+    language?: {
+        name: string;
+        installed: boolean;
+    };
 }
 /** Normalize definition/reference payloads (Location, LocationLink or arrays) into Monaco locations. */
 export declare function lspLocations(monaco: Monaco, result: unknown): import('monaco-editor').languages.Location[];

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

@@ -4,7 +4,7 @@ export interface BottomPanelProps {
     sessionId: string;
     cwd: string;
     visible: boolean;
-    colorScheme: 'dark' | 'light';
+    colorScheme: 'dark' | 'light' | 'white' | 'eyecare';
 }
 export interface BottomPanelContribution {
     id: string;

package/lib/types/commit-message.d.ts

@@ -0,0 +1,43 @@
+import type { ConfigureCall, GenerateOptions, LlmCallConfig, PreparedLlmCall, StreamChunk } from '@deepseek-ai/dsh-llm';
+export interface CommitContext {
+    repository: string;
+    branch: string;
+    files: string[];
+    recent: string[];
+    patch: string;
+    truncated: boolean;
+}
+/** The part of DSH's LLM runtime this feature needs; a fake implements it in tests. */
+export interface CommitMessageRuntime {
+    prepareCall?(config: LlmCallConfig, signal?: AbortSignal, configure?: ConfigureCall): Promise<PreparedLlmCall>;
+    stream(options: GenerateOptions): AsyncIterable<StreamChunk>;
+}
+export type CommitDetail = 'concise' | 'standard' | 'detailed';
+export type CommitLanguage = 'auto' | 'zh' | 'en';
+export interface CommitMessagePreferences {
+    detail: CommitDetail;
+    language: CommitLanguage;
+}
+export declare const DEFAULT_COMMIT_PREFERENCES: CommitMessagePreferences;
+export declare function normalizeCommitPreferences(detail: unknown, language: unknown): CommitMessagePreferences;
+export declare const configureCommitCall: ConfigureCall;
+export declare function commitMessageSystemPrompt(preferences?: CommitMessagePreferences): string;
+export declare function buildCommitMessagePrompt(context: CommitContext, preferences?: CommitMessagePreferences): string;
+/**
+ * Keep file headers, hunk headers and changed lines, but drop unchanged context and clip very long minified or JSX
+ * lines. This lets every source file reach the model within a bounded token budget instead of a few early files
+ * consuming the entire patch.
+ */
+export declare function compactCommitPatch(patch: string): string;
+/**
+ * Git prints diffs in path order, so a big README and a lockfile can swallow the whole budget before any source
+ * file is seen. Keep generated lockfiles out, put production source ahead of tests and documentation, and cut the
+ * last section that does not fit instead of bisecting the blob.
+ */
+export declare function prioritizeCommitPatch(patch: string, limit: number): {
+    patch: string;
+    truncated: boolean;
+};
+/** Strip common model wrappers so the result can go straight into the commit box. */
+export declare function cleanCommitMessage(raw: string, detail?: CommitDetail): string;
+export declare function generateCommitMessage(runtime: CommitMessageRuntime, config: LlmCallConfig, context: CommitContext, signal?: AbortSignal, preferences?: CommitMessagePreferences): Promise<string>;

package/lib/types/host.d.ts

@@ -1,4 +1,5 @@
 import type { HostContext } from './context.ts';
+import { type CommitContext } from './commit-message.ts';
 import type { FileDocument, FileEntry, GitStatus, SearchMatch, SearchRequest } from './types.ts';
 export declare function cwdFor(ctx: HostContext, sessionId: string): string;
 /** Resolve a caller-relative path and reject traversal and symlink escape. */
@@ -67,6 +68,8 @@ export declare function searchWorkspace(cwd: string, request: SearchRequest, sig
     limited: boolean;
 }>;
 export declare function gitStatus(cwd: string): Promise<GitStatus>;
+/** Collect the staged (or working-tree) changes and recent subjects used to draft a commit message. */
+export declare function gitCommitContext(cwd: string, limit?: number): Promise<CommitContext>;
 export declare function gitAction(cwd: string, action: string, path?: string, value?: string): Promise<unknown>;
 /** Resolve the official VS Code Codicon font shipped by @vscode/codicons. */
 export declare function codiconAsset(): {

package/lib/types/lsp.d.ts

@@ -1,5 +1,10 @@
 /** Host-side registry and process bridge for language servers exposed to the workbench editor. */
 import { type ChildProcess } from 'node:child_process';
+/** The toolchain a manual language server belongs to, detected separately from the server itself. */
+export type LspLanguage = {
+    name: string;
+    commands: readonly string[];
+};
 export type LspInstall = {
     kind: 'npm';
     package: string;
@@ -16,6 +21,8 @@ export interface LspDefinition {
     languages: string[];
     install: LspInstall;
     args: string[];
+    /** Toolchain checked before the server; servers for pure data formats have nothing to check. */
+    language?: LspLanguage;
 }
 /** The strongest maintained server for each language, installable where the ecosystem allows it. */
 export declare const LSP_SERVERS: readonly LspDefinition[];
@@ -26,9 +33,23 @@ export interface LspStatus {
     installable: boolean;
     installed: boolean;
     hint?: string;
+    /** Executable name for manual servers, so the UI can name what it looked for. */
+    command?: string;
+    /** Present for manual servers: whether the language toolchain itself is on this machine. */
+    language?: {
+        name: string;
+        installed: boolean;
+    };
 }
 /** Private install root so language servers never touch the user's global npm state. */
 export declare function lspRoot(): string;
+/**
+ * GUI-launched apps inherit a trimmed PATH: Homebrew, `go install` and `cargo install` targets routinely sit
+ * outside it, so detection has to look in the usual per-user bin directories too.
+ */
+export declare function lspSearchDirs(env?: NodeJS.ProcessEnv, home?: string): string[];
+/** First executable named `command` found in `dirs`; exposed for tests and for toolchain probing. */
+export declare function findExecutable(command: string, dirs: readonly string[]): Promise<string | undefined>;
 export declare function lspStatuses(): Promise<LspStatus[]>;
 /** Install an npm-distributed server into the plugin's private directory. */
 export declare function installLsp(id: string): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-workbench",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Explorer, Monaco editor, search and local Git overlay for DSH",
   "type": "module",
   "license": "MIT",
@@ -82,6 +82,7 @@
     "@deepseek-ai/dsh-client-ui-sidebar": "^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",
     "@deepseek-ai/dsh-session": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "@deepseek-ai/dsh-working-directory": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "react": "^18.2.0",
@@ -102,6 +103,7 @@
     "@deepseek-ai/dsh-client-ui-sidebar": "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",
     "@deepseek-ai/dsh-session": "0.2.2-rc.1",
     "@deepseek-ai/dsh-working-directory": "0.2.2-rc.1",
     "@types/jsdom": "^28.0.3",

package/src/client/ActivityBar.tsx

@@ -29,7 +29,11 @@ export function toggleActivityHidden(hidden: readonly string[], id: string): str
   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. */
+/**
+ * VS Code-style activity bar: every view can be dragged into a new slot while `fixed` actions stay pinned on
+ * top and `bottom` actions stay pinned at the foot. Reordering is computed from pointer position so it keeps
+ * working when the DOM shifts under a fast drag.
+ */
 export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderChange, onHiddenChange }: {
   views: ActivityView[]
   fixed: ActivityView[]
@@ -41,12 +45,18 @@ export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderC
 }) {
   const [menu, setMenu] = useState<{ x: number; y: number; target?: string }>()
   const drag = useRef<{ id: string; x: number; y: number; active: boolean }>()
+  const draggingRef = useRef(false)
   const nodes = useRef(new Map<string, HTMLButtonElement>())
   const flip = useRef<Map<string, number>>()
-  const suppressClick = useRef(false)
+  const didDrag = useRef(false)
   const [draggingId, setDraggingId] = useState<string>()
   const [ghost, setGhost] = useState<{ x: number; y: number }>()
   const [preview, setPreview] = useState<string[]>()
+  const previewRef = useRef<string[]>()
+  const orderRef = useRef(order)
+  const visibleRef = useRef<ActivityView[]>([])
+  previewRef.current = preview
+  orderRef.current = order
 
   useEffect(() => {
     if (menu === undefined) return
@@ -62,6 +72,8 @@ export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderC
     const before = flip.current
     flip.current = undefined
     if (before === undefined) return
+    // Reordering mid-drag must not animate: transformed rects would feed back into the next hit test.
+    if (draggingRef.current) return
     for (const [id, element] of nodes.current) {
       const previous = before.get(id)
       if (previous === undefined) continue
@@ -72,49 +84,77 @@ export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderC
   })
 
   const visible = views.filter(view => !hidden.includes(view.id))
+  visibleRef.current = visible
   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 moveDrag = (clientX: number, clientY: number) => {
     const state = drag.current
-    if (state === undefined || state.id !== id) return
+    if (state === undefined) return
     if (!state.active) {
-      if (Math.abs(event.clientX - state.x) + Math.abs(event.clientY - state.y) < 5) return
-      state.active = true; setDraggingId(id)
+      if (Math.abs(clientX - state.x) + Math.abs(clientY - state.y) < 5) return
+      state.active = true
+      draggingRef.current = true
+      setDraggingId(state.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
+    setGhost({ x: clientX, y: clientY })
+    const base = previewRef.current ?? orderRef.current
+    const visibleIds = new Set(visibleRef.current.map(view => view.id))
+    const slots = base.filter(id => visibleIds.has(id) && id !== state.id)
+    let index = 0
+    for (const id of slots) {
+      const element = nodes.current.get(id)
+      if (element === undefined) continue
+      const rect = element.getBoundingClientRect()
+      if (clientY > rect.top + rect.height / 2) index += 1
+    }
+    const next = moveActivity(base, state.id, slots[index])
+    if (next.join('|') === base.join('|')) return
     capturePositions()
+    previewRef.current = next
     setPreview(next)
   }
-  const endDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
-    const state = drag.current; drag.current = undefined
+  const endDrag = () => {
+    const state = drag.current
+    drag.current = undefined
     if (state?.active) {
-      suppressClick.current = true
-      window.setTimeout(() => { suppressClick.current = false }, 0)
-      if (preview !== undefined) onOrderChange(preview)
+      didDrag.current = true
+      const next = previewRef.current
+      if (next !== undefined) onOrderChange(next)
     }
-    event.currentTarget.releasePointerCapture?.(event.pointerId)
+    draggingRef.current = false
+    previewRef.current = undefined
+    setDraggingId(undefined); setGhost(undefined); setPreview(undefined)
+  }
+  const cancelDrag = () => {
+    drag.current = undefined
+    draggingRef.current = false
+    previewRef.current = undefined
     setDraggingId(undefined); setGhost(undefined); setPreview(undefined)
   }
-  const cancelDrag = () => { drag.current = undefined; setDraggingId(undefined); setGhost(undefined); setPreview(undefined) }
+  const handlers = useRef({ moveDrag, endDrag, cancelDrag })
+  handlers.current = { moveDrag, endDrag, cancelDrag }
+  useEffect(() => {
+    const move = (event: PointerEvent) => handlers.current.moveDrag(event.clientX, event.clientY)
+    const up = () => handlers.current.endDrag()
+    const cancel = () => handlers.current.cancelDrag()
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    window.addEventListener('pointercancel', cancel)
+    return () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      window.removeEventListener('pointercancel', cancel)
+    }
+  }, [])
+  const beginDrag = (event: ReactPointerEvent<HTMLButtonElement>, id: string) => {
+    if (event.button !== 0) return
+    didDrag.current = false
+    drag.current = { id, x: event.clientX, y: event.clientY, active: false }
+  }
   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) }}
@@ -125,17 +165,14 @@ export function ActivityBar({ views, fixed, bottom = [], order, hidden, onOrderC
     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() }}
+    onClick={() => { if (didDrag.current) { didDrag.current = false; return } 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>)}
+      {ordered.length === 0 ? <span className="dvw-activity-empty" aria-hidden="true"/> : ordered.map(renderView)}
       <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>}

package/src/client/DshConversationPanel.tsx

@@ -46,7 +46,7 @@ export function DshConversationPanel({ visible, width, statusHeight }: { visible
 }
 
 /** 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 }) {
+export function DshConversationTheme({ visible, colorScheme, followDsh }: { visible: boolean; colorScheme: 'dark' | 'light' | 'white' | 'eyecare'; followDsh: boolean }) {
   useLayoutEffect(() => {
     if (!visible) return
     const body = document.body

package/src/client/MonacoEditor.tsx

@@ -85,8 +85,43 @@ const DARK_COLORS = {
   'scrollbarSlider.hoverBackground': '#646464b3',
   'scrollbarSlider.activeBackground': '#bfbfbf66',
 }
+/** Eye-care palette: the editor shares the workbench's warm yellow surface. */
+export const EYE_THEME = 'dvw-eyecare'
+const EYE_COLORS = {
+  'editor.background': '#f7ebc8',
+  'editor.foreground': '#3b3324',
+  'editorLineNumber.foreground': '#92856a',
+  'editorLineNumber.activeForeground': '#5c4a2a',
+  'editor.selectionBackground': '#e6d294',
+  'editor.inactiveSelectionBackground': '#ecdcae',
+  'editor.lineHighlightBackground': '#efe1b4',
+  'editorCursor.foreground': '#6b5320',
+  'editorWidget.background': '#f7ebc8',
+  'editorWidget.border': '#e0cf9f',
+  'editorSuggestWidget.background': '#f7ebc8',
+  'editorSuggestWidget.border': '#e0cf9f',
+  'editorSuggestWidget.selectedBackground': '#f0e0ae',
+  'editorHoverWidget.background': '#f7ebc8',
+  'editorHoverWidget.border': '#e0cf9f',
+  'editorGutter.background': '#f7ebc8',
+  'diffEditor.insertedTextBackground': '#b7d7a8aa',
+  'diffEditor.removedTextBackground': '#e8b4ad88',
+  'diffEditor.border': '#e0cf9f',
+  'diffEditor.diagonalFill': '#eadcb6',
+  'scrollbarSlider.background': '#92856a55',
+  'scrollbarSlider.hoverBackground': '#92856a88',
+  'scrollbarSlider.activeBackground': '#5c4a2a66',
+}
+
+export type MonacoColorScheme = 'dark' | 'light' | 'white' | 'eyecare'
+
+export function monacoThemeFor(theme: MonacoColorScheme): string {
+  return theme === 'dark' ? DARK_THEME : theme === 'eyecare' ? EYE_THEME : 'vs'
+}
+
 function defineWorkbenchThemes(monaco: Monaco): void {
   monaco.editor.defineTheme(DARK_THEME, { base: 'vs-dark', inherit: true, rules: DARK_RULES, colors: DARK_COLORS })
+  monaco.editor.defineTheme(EYE_THEME, { base: 'vs', inherit: true, rules: [], colors: EYE_COLORS })
 }
 
 /**
@@ -119,13 +154,13 @@ export function loadMonaco(): Promise<Monaco> {
   return loading
 }
 
-export function MonacoDiffEditor(props: { uri: string; original: string; modified: string; mode: 'inline' | 'split'; theme: 'dark' | 'light'; fontSize?: number }) {
+export function MonacoDiffEditor(props: { uri: string; original: string; modified: string; mode: 'inline' | 'split'; theme: MonacoColorScheme; 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'?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(()=>{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',useInlineViewWhenSpaceIsLimited:false,theme:monacoThemeFor(props.theme),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(()=>{const value=editor.current;if(value===undefined)return;value.updateOptions({renderSideBySide:props.mode==='split'});const frame=requestAnimationFrame(()=>value.layout());return()=>cancelAnimationFrame(frame)},[props.mode])
   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])
+  useEffect(()=>{if(window.monaco!==undefined)window.monaco.editor.setTheme(monacoThemeFor(props.theme))},[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>
 }
 
@@ -166,7 +201,7 @@ function editorSelection(instance: import('monaco-editor').editor.IStandaloneCod
   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 }) {
+export function MonacoEditor(props: { uri: string; value: string; theme: MonacoColorScheme; 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 decorations = useRef<import('monaco-editor').editor.IEditorDecorationsCollection>()
@@ -215,7 +250,7 @@ export function MonacoEditor(props: { uri: string; value: string; theme: 'dark'
     void loadMonaco().then((monaco) => {
       if (disposed || root.current === null) return
       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' })
+      const instance = monaco.editor.create(root.current, { model: null, automaticLayout: true, theme: monacoThemeFor(props.theme), fontSize: props.fontSize ?? 14, ...WORKBENCH_EDITOR_CHROME, wordWrap: 'off' })
       editor.current = instance
       instance.onDidChangeModelContent(() => latest.current.onChange(instance.getValue()))
       instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => latest.current.onSave())
@@ -268,7 +303,7 @@ export function MonacoEditor(props: { uri: string; value: string; theme: 'dark'
   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' ? DARK_THEME : 'vs') }, [props.theme])
+  useEffect(() => { if (window.monaco !== undefined) window.monaco.editor.setTheme(monacoThemeFor(props.theme)) }, [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()

package/src/client/TerminalPanel.tsx

@@ -7,9 +7,9 @@ import { isTerminalProtocolReply, TerminalWorkspaceController } from './terminal
 
 // 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 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' }) {
+function XtermView({ workspace, id, colorScheme }: { workspace: TerminalWorkspaceController; id: string; colorScheme: 'dark' | 'light' | 'white' | 'eyecare' }) {
   const root = useRef<HTMLDivElement>(null)
   const terminalRef = useRef<Terminal>()
   const replaying = useRef(false)