dsh-code 0.6.1 → 0.8.0

package/src/store.ts

@@ -1,8 +1,19 @@
 /**
  * Observable transcript store: folds session events into the projection view
  * and notifies subscribers. The renderer subscribes through
- * `useSyncExternalStore`; the runner owns event feeding. The store owns no
- * timing — listeners fire synchronously after each applied event.
+ * `useSyncExternalStore`; the runner owns event feeding.
+ *
+ * Notification coalescing: the fold stays synchronous — `getView()` always
+ * returns the latest state the moment `apply` returns — but listener
+ * notification is scheduled on a microtask and deduplicated, so N events
+ * delivered inside one synchronous drain (the zai/GLM adapter drains its
+ * token buffer in sub-millisecond bursts) produce ONE React re-render.
+ * Synchronous per-event notification instead cascades one
+ * `useSyncExternalStore` force-update per token inside a single flush; the
+ * reconciler counts those as nested passive updates and floods React's
+ * "Maximum update depth exceeded" warning past 50 events, besides rendering
+ * the whole live tree once per token. A microtask keeps latency within the
+ * same macrotask, before Ink's throttled paint.
  *
  * @module @deepseek-ai/dsh-tui/store
  */
@@ -35,6 +46,17 @@ export interface TranscriptStore {
 export function createTranscriptStore(replay?: readonly SessionEvent[]): TranscriptStore {
   let view = replay === undefined ? createTranscriptView() : projectEvents(replay)
   const listeners = new Set<() => void>()
+  let scheduled = false
+  const notify = (): void => {
+    if (scheduled) return
+    scheduled = true
+    queueMicrotask(() => {
+      scheduled = false
+      for (const listener of listeners) {
+        listener()
+      }
+    })
+  }
   return {
     getView: () => view,
     subscribe(listener: () => void): () => void {
@@ -47,15 +69,11 @@ export function createTranscriptStore(replay?: readonly SessionEvent[]): Transcr
       const next = projectEvent(view, event)
       if (next === view) return
       view = next
-      for (const listener of listeners) {
-        listener()
-      }
+      notify()
     },
     reset(): void {
       view = createTranscriptView()
-      for (const listener of listeners) {
-        listener()
-      }
+      notify()
     },
   }
 }

package/src/theme-panel.ts

@@ -0,0 +1,72 @@
+/**
+ * The `/theme` picker (the Codex `/theme` contract): one bounded list over
+ * the three color themes — dark, light, and auto (terminal-sensed; auto
+ * falls back to dark until OSC-11 detection lands). Enter applies the row
+ * and the runner persists it; Esc closes without changing the theme.
+ *
+ * @module @deepseek-ai/dsh-tui/theme-panel
+ */
+
+import { createElement, useState, type ReactElement } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import { panelViewport } from './render/inspector.ts'
+import { truncateColumns } from './render/text.ts'
+import { getPalette, inkColor, type ThemeName } from './theme.ts'
+
+/** The three theme rows in canonical order (the /theme selection surface). */
+const THEME_ROWS: readonly { id: ThemeName; label: string; description: string }[] = [
+  { id: 'dark', label: 'dark', description: 'DeepSeek dark palette (default)' },
+  { id: 'light', label: 'light', description: 'light palette for bright terminals' },
+  { id: 'auto', label: 'auto', description: 'follow the terminal; dark until detection lands' },
+]
+
+/**
+ * The /theme list: one row per theme, the current one marked with ●, the
+ * focused one with ›. Enter applies the focused theme (the runner persists
+ * it), Esc/q closes without changing anything. Colors read the ACTIVE
+ * palette, so the panel itself adapts to a light theme once applied.
+ */
+export function ThemePanel({ current, select, close }: {
+  /** Theme name in force (the requested name; 'auto' included). */
+  current: ThemeName
+  /** Accept one theme name: applied immediately and persisted by the runner. */
+  select(name: ThemeName): void
+  /** Close without changing the theme. */
+  close(): void
+}): ReactElement {
+  const [cursor, setCursor] = useState(() => {
+    const index = THEME_ROWS.findIndex(theme => theme.id === current)
+    return index < 0 ? 0 : index
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (key.upArrow) return setCursor(value => (value + THEME_ROWS.length - 1) % THEME_ROWS.length)
+    if (key.downArrow) return setCursor(value => (value + 1) % THEME_ROWS.length)
+    if (key.return) return select(THEME_ROWS[cursor]!.id)
+  })
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/theme · esc close', viewport.contentColumns))
+  }
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns('/theme — color palette', viewport.contentColumns)),
+    ...THEME_ROWS.map((theme, index) => {
+      const selected = index === cursor
+      const active = theme.id === current
+      return createElement(
+        Text,
+        {
+          key: theme.id,
+          color: selected ? inkColor(getPalette().brandBright) : undefined,
+          wrap: 'truncate-end',
+        },
+        truncateColumns(`${selected ? '› ' : '  '}${active ? '● ' : '○ '}${theme.label}${active ? ' · current' : ''} · ${theme.description}`, viewport.contentColumns),
+      )
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ choose · enter apply · esc/q close', viewport.contentColumns)),
+  )
+}

package/src/theme.ts

@@ -1,70 +1,206 @@
-/**
- * Terminal color tokens for the dsh TUI, mapped from the product design
- * platform's DeepSeek palette
- * (`packages/client/ui-theme/src/styles/design-platform.css`). Truecolor RGB
- * rides chalk, which degrades automatically on terminals without truecolor.
- *
- * @module @deepseek-ai/dsh-tui/theme
- */
-
-import chalk from 'chalk'
-
-/**
- * RGB triples for the TUI, one entry per design-platform token in use.
- * Keep names and values in sync with the CSS custom properties cited inline.
- */
-export const TUI_RGB = {
-  /** Primary brand blue — `--dsw-static-deepseek-500`. */
-  brand: [65, 118, 230],
-  /** Brighter brand blue for live/streaming emphasis — `--dsw-static-deepseek-400`. */
-  brandBright: [103, 158, 254],
-  /** Deep brand blue for secondary chrome — `--dsw-static-deepseek-600`. */
-  brandDeep: [72, 104, 178],
-  /** Muted caption gray — `--dsw-static-neutral-bluish-600`. */
-  dim: [129, 133, 140],
-  /** Success green — `--dsw-static-green-500`. */
-  success: [34, 197, 94],
-  /** Error red — `--dsw-static-red-500`. */
-  error: [239, 68, 68],
-  /** Warning amber — `--dsw-static-amber-500`. */
-  warn: [245, 158, 11],
-  /** Default foreground text — `--dsw-static-neutral-50`. */
-  text: [236, 240, 246],
-  /** Inline/fenced code — soft sky blue, distinct from brand accents. */
-  code: [125, 211, 252],
-} as const satisfies Record<string, readonly [number, number, number]>
-
-/** Paint with the primary brand blue: whale, wordmark, tool names, accents. */
-export function brand(text: string): string {
-  return chalk.rgb(...TUI_RGB.brand)(text)
-}
-
-/** Paint with the bright brand blue: streaming output and active spinners. */
-export function brandBright(text: string): string {
-  return chalk.rgb(...TUI_RGB.brandBright)(text)
-}
-
-/** Paint with the deep brand blue: borders and secondary chrome. */
-export function brandDeep(text: string): string {
-  return chalk.rgb(...TUI_RGB.brandDeep)(text)
-}
-
-/** Paint muted captions, hints, and meta lines. */
-export function dim(text: string): string {
-  return chalk.rgb(...TUI_RGB.dim)(text)
-}
-
-/** Paint completed tool results and confirmations. */
-export function success(text: string): string {
-  return chalk.rgb(...TUI_RGB.success)(text)
-}
-
-/** Paint failures and error entries. */
-export function error(text: string): string {
-  return chalk.rgb(...TUI_RGB.error)(text)
-}
-
-/** Paint warnings. */
-export function warn(text: string): string {
-  return chalk.rgb(...TUI_RGB.warn)(text)
-}
+/**
+ * Terminal color tokens for the dsh TUI, mapped from the product design
+ * platform's DeepSeek palette
+ * (`packages/client/ui-theme/src/styles/design-platform.css`). Truecolor RGB
+ * rides chalk, which degrades automatically on terminals without truecolor.
+ *
+ * Two palettes — `dark` (the default) and `light` — share the same token keys
+ * with different values. Painters and the palette accessor read the ACTIVE
+ * palette selected through {@link setTheme}, so a theme switch recolors every
+ * painted surface on the next render without touching call sites. Raw token
+ * consumers keep reading {@link TUI_RGB} (the dark values) until the
+ * theme-aware integration replaces those call sites with
+ * `inkColor(getPalette().token)`.
+ *
+ * @module @deepseek-ai/dsh-tui/theme
+ */
+
+import chalk from 'chalk'
+
+/** One RGB triple for a palette token. */
+export type RgbTriple = readonly [number, number, number]
+
+/** Palette token keys shared by every theme. */
+export type ThemeToken =
+  | 'brand'
+  | 'brandBright'
+  | 'brandMid'
+  | 'brandDeep'
+  | 'dim'
+  | 'success'
+  | 'error'
+  | 'warn'
+  | 'text'
+  | 'code'
+
+/** One full color palette: every token key mapped to an RGB triple. */
+export type ThemePalette = Readonly<Record<ThemeToken, RgbTriple>>
+
+/** Selectable theme names: dark, light, or auto (terminal-sensed). */
+export type ThemeName = 'dark' | 'light' | 'auto'
+
+/** Valid theme names in canonical picker order. */
+export const THEME_NAMES: readonly ThemeName[] = ['dark', 'light', 'auto']
+
+/**
+ * DeepSeek dark palette: the original TUI colors, one entry per
+ * design-platform token in use. Keep names and values in sync with the CSS
+ * custom properties cited inline.
+ */
+export const DARK_PALETTE = {
+  /** Primary brand blue — `--dsw-static-deepseek-500`. */
+  brand: [65, 118, 230],
+  /** Brighter brand blue for live/streaming emphasis — `--dsw-static-deepseek-400`. */
+  brandBright: [103, 158, 254],
+  /** Intermediate brand blue between brand and brandBright — `--dsw-static-deepseek-450`. */
+  brandMid: [86, 134, 254],
+  /** Deep brand blue for secondary chrome — `--dsw-static-deepseek-600`. */
+  brandDeep: [72, 104, 178],
+  /** Muted caption gray — `--dsw-static-neutral-bluish-600`. */
+  dim: [129, 133, 140],
+  /** Success green — `--dsw-static-green-500`. */
+  success: [34, 197, 94],
+  /** Error red — `--dsw-static-red-500`. */
+  error: [239, 68, 68],
+  /** Warning amber — `--dsw-static-amber-500`. */
+  warn: [245, 158, 11],
+  /** Default foreground text — `--dsw-static-neutral-50`. */
+  text: [236, 240, 246],
+  /** Inline/fenced code — soft sky blue, distinct from brand accents. */
+  code: [125, 211, 252],
+} as const satisfies ThemePalette
+
+/**
+ * Light palette tuned for white terminals: the same token keys as dark with
+ * contrast-driven values (AA on a white background). Brand keeps its dark
+ * value (≈4.9:1); the bright/mid/deep blues, muted grays, and status colors
+ * deepen so they stay legible on bright backgrounds.
+ */
+export const LIGHT_PALETTE = {
+  /** Primary brand blue — unchanged, ≈4.9:1 AA on white. */
+  brand: [65, 118, 230],
+  /** Brighter brand blue deepened for white backgrounds (was 2.7:1). */
+  brandBright: [72, 104, 178],
+  /** Intermediate brand blue — Tailwind blue-500. */
+  brandMid: [59, 130, 246],
+  /** Deep brand blue for secondary chrome — `--dsw-static-deepseek-700`. */
+  brandDeep: [47, 76, 143],
+  /** Muted caption gray deepened for white backgrounds. */
+  dim: [101, 103, 107],
+  /** Success green — Tailwind green-700. */
+  success: [21, 128, 61],
+  /** Error red — Tailwind red-600. */
+  error: [236, 19, 19],
+  /** Warning amber — Tailwind amber-700. */
+  warn: [180, 83, 9],
+  /** Default foreground text — near-black. */
+  text: [21, 21, 23],
+  /** Inline/fenced code — Tailwind cyan-700, distinct from brand accents. */
+  code: [14, 116, 144],
+} as const satisfies ThemePalette
+
+/** Every palette by theme name; auto resolves through {@link resolveTheme}. */
+export const PALETTES = {
+  dark: DARK_PALETTE,
+  light: LIGHT_PALETTE,
+} as const satisfies Record<Exclude<ThemeName, 'auto'>, ThemePalette>
+
+/**
+ * The dark palette under its original name: call sites that predate the
+ * two-palette switch keep compiling and painting identically (the default
+ * theme IS dark). New code should read the active palette through
+ * {@link getPalette} so a theme switch reaches it.
+ */
+export const TUI_RGB = DARK_PALETTE
+
+/** The theme name in force (the requested name; 'auto' included). */
+let activeName: ThemeName = 'dark'
+
+/** The palette painters and {@link getPalette} read for the active theme. */
+let activePalette: ThemePalette = DARK_PALETTE
+
+/**
+ * Resolve a theme name to the palette actually in use. `auto` detection
+ * (OSC 11 terminal background query) is a later enhancement; until it lands,
+ * auto falls back to the dark palette.
+ * @param name - the requested theme name.
+ * @returns 'dark' or 'light' — the palette key to paint with.
+ */
+export function resolveTheme(name: ThemeName): 'dark' | 'light' {
+  return name === 'light' ? 'light' : 'dark'
+}
+
+/**
+ * Switch the active theme: painters and {@link getPalette} reflect the new
+ * palette from the next render onward. The default is dark, so a process
+ * that never calls this paints exactly as before.
+ * @param name - the theme to activate ('auto' resolves to dark for now).
+ */
+export function setTheme(name: ThemeName): void {
+  activeName = name
+  activePalette = PALETTES[resolveTheme(name)]
+}
+
+/**
+ * The theme name in force. Returns the requested name ('auto' included) so
+ * the /theme picker and persistence can round-trip the user's choice; the
+ * palette actually used is {@link getPalette}.
+ */
+export function getTheme(): ThemeName {
+  return activeName
+}
+
+/** The palette in force; theme-aware call sites read colors through it. */
+export function getPalette(): ThemePalette {
+  return activePalette
+}
+
+/**
+ * Parse a persisted theme name: only 'light' and 'auto' survive; anything
+ * else (missing, corrupt, or unknown) falls back to the dark default.
+ * @param value - the raw parsed JSON value (expected string).
+ * @returns a valid theme name.
+ */
+export function parseThemeName(value: unknown): ThemeName {
+  return value === 'light' || value === 'auto' ? value : 'dark'
+}
+
+/** Ink `color` string for one RGB triple. */
+export function inkColor(triple: RgbTriple): string {
+  return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`
+}
+
+/** Paint with the primary brand blue: whale, wordmark, tool names, accents. */
+export function brand(text: string): string {
+  return chalk.rgb(...activePalette.brand)(text)
+}
+
+/** Paint with the bright brand blue: streaming output and active spinners. */
+export function brandBright(text: string): string {
+  return chalk.rgb(...activePalette.brandBright)(text)
+}
+
+/** Paint with the deep brand blue: borders and secondary chrome. */
+export function brandDeep(text: string): string {
+  return chalk.rgb(...activePalette.brandDeep)(text)
+}
+
+/** Paint muted captions, hints, and meta lines. */
+export function dim(text: string): string {
+  return chalk.rgb(...activePalette.dim)(text)
+}
+
+/** Paint completed tool results and confirmations. */
+export function success(text: string): string {
+  return chalk.rgb(...activePalette.success)(text)
+}
+
+/** Paint failures and error entries. */
+export function error(text: string): string {
+  return chalk.rgb(...activePalette.error)(text)
+}
+
+/** Paint warnings. */
+export function warn(text: string): string {
+  return chalk.rgb(...activePalette.warn)(text)
+}

package/src/version.ts

@@ -0,0 +1,16 @@
+/** Installed dsh-code version exposed by the terminal header. */
+
+import { readFileSync } from 'node:fs'
+
+/** Read one package manifest version without making terminal startup depend on it. */
+export function readPackageVersion(manifest = new URL('../package.json', import.meta.url)): string {
+  try {
+    const parsed = JSON.parse(readFileSync(manifest, 'utf8')) as { version?: unknown }
+    return typeof parsed.version === 'string' && parsed.version.length > 0 ? parsed.version : '0.0.0'
+  } catch {
+    return '0.0.0'
+  }
+}
+
+/** Version of the installed dsh-code package. */
+export const DSH_CODE_VERSION = readPackageVersion()