dsh-code 1.0.6 → 1.2.0

package/src/theme-panel.ts

@@ -11,14 +11,9 @@ import { createElement, useState, type ReactElement } from 'react'
 import { Box, Text, useInput, useStdout } from 'ink'
 import { clampScroll, 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' },
-]
+import { panelAccent } from './panel-accent.ts'
+import { getPalette, inkColor, THEMES, type ThemeName } from './theme.ts'
+import { t } from './i18n.ts'
 
 /**
  * The /theme list: one row per theme, the current one marked with ●, the
@@ -30,37 +25,38 @@ 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
+  select: (name: ThemeName) => void
   /** Close without changing the theme. */
-  close(): void
+  close: () => void
 }): ReactElement {
   const [cursor, setCursor] = useState(() => {
-    const index = THEME_ROWS.findIndex(theme => theme.id === current)
+    const index = THEMES.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 (key.upArrow) return setCursor(value => (value + THEMES.length - 1) % THEMES.length)
+    if (key.downArrow) return setCursor(value => (value + 1) % THEMES.length)
+    if (key.return) return select(THEMES[cursor].id)
   })
   if (viewport.maxHeight === 0 || viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/theme · esc close', viewport.contentColumns))
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('theme.compact'), viewport.contentColumns))
   }
   // The theme rows share the panel's body budget like every other panel: an
   // unsliced three-row list reached terminal-height equality on short
   // terminals, where Ink rewrites the whole Static region every frame.
   // Reveal-cursor slicing keeps the focused row visible instead.
   const rowBudget = Math.max(1, viewport.bodyRows)
-  const first = clampScroll(cursor, THEME_ROWS.length, rowBudget)
-  const visibleThemes = THEME_ROWS.slice(first, first + rowBudget)
-  const hiddenThemes = THEME_ROWS.length - visibleThemes.length
+  const first = clampScroll(cursor, THEMES.length, rowBudget)
+  const visibleThemes = THEMES.slice(first, first + rowBudget)
+  const hiddenThemes = THEMES.length - visibleThemes.length
+  const accent = panelAccent('theme', getPalette().dim, getPalette().brandBright)
   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)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(t('theme.title'), viewport.contentColumns)),
     ...visibleThemes.map((theme, index) => {
       const selected = first + index === cursor
       const active = theme.id === current
@@ -71,7 +67,7 @@ export function ThemePanel({ current, select, close }: {
           color: selected ? inkColor(getPalette().brandBright) : undefined,
           wrap: 'truncate-end',
         },
-        truncateColumns(`${selected ? '› ' : '  '}${active ? '● ' : '○ '}${theme.label}${active ? ' · current' : ''} · ${theme.description}`, viewport.contentColumns),
+        truncateColumns(`${selected ? '› ' : '  '}${active ? '● ' : '○ '}${t(`theme.${theme.id}.label`)}${active ? ` · ${t('theme.current')}` : ''} · ${t(`theme.${theme.id}.description`)}`, viewport.contentColumns),
       )
     }),
     createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`↑↓ choose · enter apply · esc/q close${hiddenThemes > 0 ? ` · +${hiddenThemes} more` : ''}`, viewport.contentColumns)),

package/src/theme.ts

@@ -4,19 +4,20 @@
  * (`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
+ * Three palettes — `dark` (the default), `light`, and `prismatic` (the
+ * neon synthwave skin) — 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)`.
+ * painted surface on the next render without touching call sites; consumers
+ * read colors through {@link getPalette} or the painters below only.
  *
  * @module @deepseek-ai/dsh-tui/theme
  */
 
 import chalk from 'chalk'
 
+import { rainbowRoll } from './rainbow.ts'
+
 /** One RGB triple for a palette token. */
 export type RgbTriple = readonly [number, number, number]
 
@@ -33,15 +34,46 @@ export type ThemeToken =
   | 'text'
   | 'code'
   | 'composerBand'
+  | 'diffAdd'
+  | 'diffDel'
+  | 'diffAddFg'
+  | 'diffDelFg'
+  | 'surface'
+  | 'prompt'
+  | 'queued'
+  | 'steered'
 
 /** 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'
+/** Selectable theme names: dark, light, prismatic, rainbow, or auto (terminal-sensed). */
+export type ThemeName = 'dark' | 'light' | 'prismatic' | 'rainbow' | 'auto'
 
 /** Valid theme names in canonical picker order. */
-export const THEME_NAMES: readonly ThemeName[] = ['dark', 'light', 'auto']
+export const THEME_NAMES: readonly ThemeName[] = ['dark', 'light', 'prismatic', 'rainbow', 'auto']
+
+/** One /theme picker row: the theme id plus its display copy. */
+export interface ThemeDescriptor {
+  /** The selectable theme name. */
+  readonly id: ThemeName
+  /** Short row label shown in the picker. */
+  readonly label: string
+  /** One-line description shown after the label. */
+  readonly description: string
+}
+
+/**
+ * Every theme's picker metadata in canonical order — the single source the
+ * /theme panel rows derive from; {@link THEME_NAMES} stays the validation
+ * list. Adding a theme means adding its palette plus one row here.
+ */
+export const THEMES: readonly ThemeDescriptor[] = [
+  { id: 'dark', label: 'dark', description: 'DeepSeek dark palette (default)' },
+  { id: 'light', label: 'light', description: 'light palette for bright terminals' },
+  { id: 'prismatic', label: 'prismatic', description: 'neon synthwave palette (violet/magenta/cyan)' },
+  { id: 'rainbow', label: 'rainbow', description: 'randomized carnival palette (/rainbow to reroll)' },
+  { id: 'auto', label: 'auto', description: 'follow the terminal; dark until detection lands' },
+]
 
 /**
  * DeepSeek dark palette: the original TUI colors, one entry per
@@ -71,16 +103,35 @@ export const DARK_PALETTE = {
   code: [125, 211, 252],
   /** Composer three-row band base — neutral light gray, hue-free so wave tints read on it. */
   composerBand: [46, 48, 52],
+  /** Diff added-line background — Codex's muted dark green tint (#213A2B). */
+  diffAdd: [33, 58, 43],
+  /** Diff removed-line background — Codex's muted dark red tint (#4A221D). */
+  diffDel: [74, 34, 29],
+  /** Diff added-line foreground — green-500, 5.4:1 on the diffAdd tint. */
+  diffAddFg: [34, 197, 94],
+  /** Diff removed-line foreground — red-400, 4.9:1 on the diffDel tint (error's red-500 sinks to 3.6:1 on it). */
+  diffDelFg: [248, 113, 113],
+  /** Terminal background this palette is designed against; row tints blend toward it. */
+  surface: [0, 0, 0],
+  /**
+   * The three prompt-row colors, one per delivery kind. They are the palette's
+   * own accents (bright brand, warning amber, violet) rather than fixed RGBs,
+   * and every row's bar is these colors laid over {@link surface}.
+   */
+  prompt: [103, 158, 254],
+  queued: [245, 158, 11],
+  steered: [167, 139, 250],
 } 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.
+ * value (≈4.2:1 on white — reserved for bold/accent spans; body-size brand
+ * text uses brandBright at ≈5.4: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. */
+  /** Primary brand blue — unchanged design-platform value; ≈4.2:1 on white, so bold/accent spans only (body-size brand text uses brandBright). */
   brand: [65, 118, 230],
   /** Brighter brand blue deepened for white backgrounds (was 2.7:1). */
   brandBright: [72, 104, 178],
@@ -102,24 +153,84 @@ export const LIGHT_PALETTE = {
   code: [14, 116, 144],
   /** Composer three-row band base — neutral light gray, hue-free so wave tints read on it. */
   composerBand: [229, 231, 235],
+  /** Diff added-line background — GitHub's pastel green (#dafbe1), Codex's light pick. */
+  diffAdd: [218, 251, 225],
+  /** Diff removed-line background — GitHub's pastel red (#ffebe9), Codex's light pick. */
+  diffDel: [255, 235, 233],
+  /** Diff added-line foreground — green-800, 6.4:1 on the pastel tint (green-700 clears 4.5:1 by a hair). */
+  diffAddFg: [22, 101, 52],
+  /** Diff removed-line foreground — red-700, 5.6:1 on the pastel tint (error's red-600 is 3.9:1). */
+  diffDelFg: [185, 28, 28],
+  /** Terminal background this palette is designed against; row tints blend toward it. */
+  surface: [255, 255, 255],
+  /**
+   * Prompt-row colors deepened for white: the amber and violet the dark theme
+   * uses sit at the AA edge on their own pastel bars, so each kind carries a
+   * value that clears 4.5:1 both on the bar and on plain white.
+   */
+  prompt: [47, 76, 143],
+  queued: [124, 53, 10],
+  steered: [109, 40, 217],
 } 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>
+/**
+ * Prismatic palette — the neon synthwave skin (docs/prismatic-theme-design.md):
+ * electric violet replaces the brand blues, neon fuchsia carries live
+ * emphasis, neon cyan paints code, and a lavender gray dims captions. Paints
+ * on a black terminal; every value meets the same WCAG thresholds as the
+ * other palettes (body tokens ≥4.5:1, accents ≥3:1 on pure black). Semantic
+ * colors — success/error/warn and the four diff tokens — reuse the dark
+ * values verbatim so green still means added and red still means removed.
+ */
+export const PRISMATIC_PALETTE = {
+  /** Primary electric purple — violet-500 (#8B5CF6), 5.0:1 on black. */
+  brand: [139, 92, 246],
+  /** Live/streaming emphasis — neon fuchsia-300 (#F0ABFC), 11.9:1 on black. */
+  brandBright: [240, 171, 252],
+  /** Intermediate violet — violet-400 (#A78BFA), 7.7:1 on black. */
+  brandMid: [167, 139, 250],
+  /** Deep secondary chrome — violet-600 (#7C3AED), 3.7:1 on black (violet-700 misses 3:1). */
+  brandDeep: [124, 58, 237],
+  /** Muted captions — lavender gray (#A6A3B8), 8.6:1 on black. */
+  dim: [166, 163, 184],
+  /** Success green — unchanged from dark. */
+  success: [34, 197, 94],
+  /** Error red — unchanged from dark. */
+  error: [239, 68, 68],
+  /** Warning amber — unchanged from dark. */
+  warn: [245, 158, 11],
+  /** Default foreground text — white with a lavender cast (#F0EEF9). */
+  text: [240, 238, 249],
+  /** Inline/fenced code — neon cyan-300 (#67E8F9), 14.5:1 on black. */
+  code: [103, 232, 249],
+  /** Composer three-row band base — neutral dark gray, hue-free so wave tints read on it. */
+  composerBand: [46, 46, 52],
+  /** Diff added-line background — unchanged from dark. */
+  diffAdd: [33, 58, 43],
+  /** Diff removed-line background — unchanged from dark. */
+  diffDel: [74, 34, 29],
+  /** Diff added-line foreground — unchanged from dark. */
+  diffAddFg: [34, 197, 94],
+  /** Diff removed-line foreground — unchanged from dark. */
+  diffDelFg: [248, 113, 113],
+  /** Terminal background this palette is designed against; row tints blend toward it. */
+  surface: [0, 0, 0],
+  /** Prompt rows in the skin's own neon: fuchsia, amber, cyan. */
+  prompt: [240, 171, 252],
+  queued: [245, 158, 11],
+  steered: [103, 232, 249],
+} as const satisfies 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.
- *
- * @deprecated Read the active palette through {@link getPalette}; this
- * compatibility alias is removed in the next minor release.
+ * Every STATIC palette by theme name; auto resolves through {@link resolveTheme}
+ * and rainbow is rolled per launch ({@link rainbowRoll}), so neither lives
+ * here — {@link setTheme} resolves both through the same key space.
  */
-export const TUI_RGB = DARK_PALETTE
+export const PALETTES = {
+  dark: DARK_PALETTE,
+  light: LIGHT_PALETTE,
+  prismatic: PRISMATIC_PALETTE,
+} as const satisfies Record<Exclude<ThemeName, 'auto' | 'rainbow'>, ThemePalette>
 
 /** The theme name in force (the requested name; 'auto' included). */
 let activeName: ThemeName = 'dark'
@@ -130,12 +241,13 @@ 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.
+ * auto falls back to the dark palette (prismatic and rainbow are always
+ * explicit choices, never auto-resolved).
  * @param name - the requested theme name.
- * @returns 'dark' or 'light' — the palette key to paint with.
+ * @returns 'dark', 'light', 'prismatic', or 'rainbow' — the palette key.
  */
-export function resolveTheme(name: ThemeName): 'dark' | 'light' {
-  return name === 'light' ? 'light' : 'dark'
+export function resolveTheme(name: ThemeName): 'dark' | 'light' | 'prismatic' | 'rainbow' {
+  return name === 'light' ? 'light' : name === 'prismatic' ? 'prismatic' : name === 'rainbow' ? 'rainbow' : 'dark'
 }
 
 /**
@@ -146,7 +258,8 @@ export function resolveTheme(name: ThemeName): 'dark' | 'light' {
  */
 export function setTheme(name: ThemeName): void {
   activeName = name
-  activePalette = PALETTES[resolveTheme(name)]
+  const resolved = resolveTheme(name)
+  activePalette = resolved === 'rainbow' ? rainbowRoll().palette : PALETTES[resolved]
 }
 
 /**
@@ -164,13 +277,15 @@ export function getPalette(): ThemePalette {
 }
 
 /**
- * Parse a persisted theme name: only 'light' and 'auto' survive; anything
- * else (missing, corrupt, or unknown) falls back to the dark default.
+ * Parse a persisted theme name: only names in {@link THEME_NAMES} 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'
+  return typeof value === 'string' && (THEME_NAMES as readonly string[]).includes(value)
+    ? (value as ThemeName)
+    : 'dark'
 }
 
 /** Ink `color` string for one RGB triple. */
@@ -178,6 +293,139 @@ export function inkColor(triple: RgbTriple): string {
   return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`
 }
 
+/**
+ * Diff-line background as an Ink `backgroundColor` string, theme-aware and
+ * depth-gated (the Codex diff renderer's rule): 16-color terminals paint
+ * backgrounds from the saturated system palette, which drowns the text, so
+ * they keep the foreground-only look; 256-color and truecolor terminals get
+ * the palette's tint (chalk quantizes the RGB form down automatically).
+ * @param token - which diff background, added or removed lines.
+ * @returns the Ink background color, or undefined to paint foreground-only.
+ */
+export function diffBackground(token: 'diffAdd' | 'diffDel'): string | undefined {
+  if (chalk.level < 2) return undefined
+  return inkColor(activePalette[token])
+}
+
+/** One prompt-row color: the palette token whose color paints the row. */
+export interface PromptRowTokens {
+  readonly fg: 'prompt' | 'queued' | 'steered'
+}
+
+/** How far one prompt-row tint leans toward its color, over the surface. */
+const PROMPT_ROW_TINT = 0.22
+
+/**
+ * The color family one prompt row wears, chosen by how it was delivered: the
+ * ordinary brand accent, the warning amber for a queued prompt, and the
+ * palette's own third accent for a steered one. The bar behind it is derived
+ * from that same color, so every theme — including a freshly rolled rainbow —
+ * carries its own look instead of a fixed triple.
+ * @param delivery - how the prompt was delivered; undefined is an ordinary one.
+ * @returns the palette token whose color paints the row.
+ */
+export function promptRowTokens(delivery: 'queued' | 'steered' | undefined): PromptRowTokens {
+  if (delivery === 'queued') return { fg: 'queued' }
+  if (delivery === 'steered') return { fg: 'steered' }
+  return { fg: 'prompt' }
+}
+
+/**
+ * Blended prompt-row background for one row color: the palette color laid
+ * over the surface the palette is designed for (dark themes over black, light
+ * over white), depth-gated exactly like {@link diffBackground} — a 16-color
+ * terminal keeps the foreground-only look rather than painting a saturated
+ * system background behind the text.
+ * @param color - the row's palette token.
+ * @returns the Ink background color, or undefined to paint foreground-only.
+ */
+export function rowBackground(color: PromptRowTokens['fg']): string | undefined {
+  if (chalk.level < 2) return undefined
+  const surface = activePalette.surface
+  const tint = activePalette[color]
+  const blend = (index: number): number =>
+    Math.round(surface[index] + (tint[index] - surface[index]) * PROMPT_ROW_TINT)
+  return inkColor([blend(0), blend(1), blend(2)] as RgbTriple)
+}
+
+/**
+ * The prismatic surface ring: four neon accents panels cycle through by
+ * mount order (cyan → fuchsia → violet → lime), all ≥3:1 on black. Dark and
+ * light ignore the ring — {@link surfaceAccent} falls back to the passed-in
+ * base color so those themes stay pixel-identical.
+ */
+export const ACCENT_RING: readonly RgbTriple[] = [
+  [34, 211, 238],
+  [232, 121, 249],
+  [167, 139, 250],
+  [163, 230, 53],
+]
+
+/**
+ * The prismatic flow anchors: brand violet → neon fuchsia → neon cyan. All
+ * three clear 4.5:1 on black, so a flowing foreground stays AA throughout
+ * the oscillation (render/animations.ts walks the triangle).
+ */
+export const FLOW_ANCHORS: readonly RgbTriple[] = [
+  [139, 92, 246],
+  [232, 121, 249],
+  [34, 211, 238],
+]
+
+/**
+ * Whether the active theme is prismatic (the neon skin with surface rings
+ * and flowing accents).
+ */
+export function isPrismatic(): boolean {
+  return activeName === 'prismatic'
+}
+
+/** Whether the active theme is rainbow (the per-launch carnival roll). */
+export function isRainbow(): boolean {
+  return activeName === 'rainbow'
+}
+
+/** The active theme's flow walk, if it has one (anchors plus phase offset). */
+export interface ThemeFlow {
+  /** Anchor colors walked in order over one 2.4s lap. */
+  readonly anchors: readonly RgbTriple[]
+  /** Phase offset into the lap, milliseconds (0 for prismatic). */
+  readonly phaseMs: number
+}
+
+/**
+ * The flowing theme's anchor walk: prismatic rides the fixed violet→fuchsia→
+ * cyan triangle; rainbow rides its rolled full-spectrum anchors with a random
+ * phase; dark and light have no flow (undefined) and keep static accents.
+ */
+export function themeFlow(): ThemeFlow | undefined {
+  if (isPrismatic()) return { anchors: FLOW_ANCHORS, phaseMs: 0 }
+  if (isRainbow()) {
+    const roll = rainbowRoll()
+    return { anchors: roll.flowAnchors, phaseMs: roll.flowPhaseMs }
+  }
+  return undefined
+}
+
+/**
+ * The accent for one surface slot: prismatic rotates the {@link ACCENT_RING}
+ * by slot index; every other theme gets the caller's base color back.
+ * @param index - the slot's position in the mount-order sequence.
+ * @param base - the color to use outside prismatic (the surface's usual one).
+ * @returns the accent to paint the surface's border/title with.
+ */
+export function surfaceAccent(index: number, base: RgbTriple): RgbTriple {
+  if (isPrismatic()) {
+    const ring = ACCENT_RING
+    return ring[((index % ring.length) + ring.length) % ring.length]
+  }
+  if (isRainbow()) {
+    const ring = rainbowRoll().ring
+    return ring[((index % ring.length) + ring.length) % ring.length]
+  }
+  return base
+}
+
 /** Paint with the primary brand blue: whale, wordmark, tool names, accents. */
 export function brand(text: string): string {
   return chalk.rgb(...activePalette.brand)(text)