dsh-code 1.0.7 → 1.2.0

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)

package/src/update-panel.ts

@@ -14,7 +14,9 @@ import { Box, Text, useInput, useStdout } from 'ink'
 import type { LauncherUpdateStatus } from './update.ts'
 import { clampScroll, panelViewport } from './render/inspector.ts'
 import { singleLineText, truncateColumns } from './render/text.ts'
+import { panelAccent } from './panel-accent.ts'
 import { getPalette, inkColor } from './theme.ts'
+import { t } from './i18n.ts'
 
 /** Retained apply-progress lines (ring tail; npm output is ephemeral). */
 export const UPDATE_OUTPUT_CAP = 800
@@ -41,9 +43,11 @@ export interface UpdatePlanView {
 export function updatePlanView(status: LauncherUpdateStatus): UpdatePlanView {
   const rows: UpdateRow[] = []
   const latest = status.code.latest ?? 'unknown'
-  rows.push(status.code.latest !== null && status.code.latest === status.code.running
-    ? { key: 'code', text: `dsh-code    ${status.code.running} (latest)` }
-    : { key: 'code', text: `dsh-code    ${status.code.running} → ${latest}` })
+  rows.push(status.aheadOfRegistry === true
+    ? { key: 'code', text: `dsh-code    ${status.code.running} (newer than npm ${latest})` }
+    : status.code.latest !== null && status.code.latest === status.code.running
+      ? { key: 'code', text: `dsh-code    ${status.code.running} (latest)` }
+      : { key: 'code', text: `dsh-code    ${status.code.running} → ${latest}` })
   if (status.host.targetLine === null) {
     rows.push({ key: 'host', text: 'harness     pinned line unreadable — update would install @deepseek-ai/dsh@latest', tone: 'warn' })
   } else if (status.host.installed === null) {
@@ -83,7 +87,9 @@ export function updatePlanView(status: LauncherUpdateStatus): UpdatePlanView {
       rows.push({ key: `blocker:checkout:${index}`, text: line, tone: 'error' })
     }
   }
-  if (status.upToDate) {
+  if (status.aheadOfRegistry === true) {
+    rows.push({ key: 'ahead', text: 'this install is newer than npm latest — refusing to downgrade', tone: 'warn' })
+  } else if (status.upToDate) {
     rows.push({ key: 'uptodate', text: 'everything is already on the pinned line — nothing to update', tone: 'ok' })
   }
   const runnable = status.upToDate !== true
@@ -97,13 +103,14 @@ export function updatePlanView(status: LauncherUpdateStatus): UpdatePlanView {
 export type UpdatePhase = 'probe' | 'error' | 'plan' | 'apply' | 'done'
 
 /** Footer hint line per phase; the plan phase names the confirm key only when runnable. */
-export function updateFooter(phase: UpdatePhase, runnable: boolean, upToDate: boolean): string {
-  if (phase === 'probe') return 'checking… · esc close'
-  if (phase === 'error') return 'r recheck · esc close'
-  if (phase === 'apply') return 'updating… · ↑↓ scroll · esc waits'
-  if (phase === 'done') return 'r recheck · esc close'
-  if (upToDate) return 'up to date · r recheck · esc close'
-  return runnable ? 'enter update · r recheck · esc close' : 'blocked · r recheck · esc close'
+export function updateFooter(phase: UpdatePhase, runnable: boolean, upToDate: boolean, aheadOfRegistry = false): string {
+  if (phase === 'probe') return t('panel.update.footer.probe')
+  if (phase === 'error') return t('panel.update.footer.error')
+  if (phase === 'apply') return t('panel.update.footer.apply')
+  if (phase === 'done') return t('panel.update.footer.error')
+  if (aheadOfRegistry) return t('panel.update.footer.ahead')
+  if (upToDate) return t('panel.update.footer.current')
+  return runnable ? t('panel.update.footer.update') : t('panel.update.footer.blocked')
 }
 
 /**
@@ -114,13 +121,13 @@ export function updateFooter(phase: UpdatePhase, runnable: boolean, upToDate: bo
  */
 export function UpdatePanel({ probe, apply, close, notify }: {
   /** Read-only probe of the launcher update status (never installs). */
-  probe(): Promise<LauncherUpdateStatus>
+  probe: () => Promise<LauncherUpdateStatus>
   /** Run the aligned update; streams sanitized progress lines. */
-  apply(onLine: (line: string) => void): Promise<number>
+  apply: (onLine: (line: string) => void, plan: LauncherUpdateStatus['plan']) => Promise<number>
   /** Close the panel (App keeps ownership of the flag). */
-  close(): void
+  close: () => void
   /** One bounded cross-surface notice (phase completions). */
-  notify(text: string, tone?: 'info' | 'warning' | 'error'): void
+  notify: (text: string, tone?: 'info' | 'warning' | 'error') => void
 }): ReactElement {
   const [phase, setPhase] = useState<UpdatePhase>('probe')
   const [status, setStatus] = useState<LauncherUpdateStatus>()
@@ -161,7 +168,7 @@ export function UpdatePanel({ probe, apply, close, notify }: {
     setAnchor('tail')
     apply(line => {
       setLines(previous => clipUpdateLines([...previous, singleLineText(line)]))
-    }).then(code => {
+    }, status.plan).then(code => {
       setExit(code)
       setPhase('done')
       notify(code === 0 ? 'update installed — restart dsh to activate' : `update failed (exit ${code})`, code === 0 ? 'info' : 'error')
@@ -212,12 +219,12 @@ export function UpdatePanel({ probe, apply, close, notify }: {
     else if (key.downArrow) setAnchor(offset + 1)
   })
   if (viewport.maxHeight === 0 || viewport.compact) {
-    const summary = phase === 'probe' ? 'checking…'
-      : phase === 'error' ? 'probe failed'
-      : phase === 'apply' ? singleLineText(lines[lines.length - 1] ?? 'updating…')
-      : phase === 'done' ? (exit === 0 ? 'installed — restart to activate' : 'failed')
-      : status?.upToDate === true ? 'up to date' : planView?.runnable === true ? 'enter updates' : 'blocked'
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(singleLineText(`/update · ${summary}`), viewport.contentColumns))
+    const summary = phase === 'probe' ? t('panel.update.checking')
+      : phase === 'error' ? t('panel.update.probeFailed')
+      : phase === 'apply' ? singleLineText(lines[lines.length - 1] ?? t('panel.update.updating'))
+      : phase === 'done' ? (exit === 0 ? t('panel.update.installed') : t('panel.update.failed'))
+      : status?.aheadOfRegistry === true ? t('panel.update.aheadOfNpm') : status?.upToDate === true ? t('panel.update.upToDate') : planView?.runnable === true ? t('panel.update.enter') : t('panel.update.blocked')
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(singleLineText(t('panel.update.compact', { summary })), viewport.contentColumns))
   }
   const visible = rows.slice(offset, offset + budget)
   const toneColor = (tone: UpdateRow['tone']): ReturnType<typeof inkColor> | undefined => tone === 'ok'
@@ -230,17 +237,20 @@ export function UpdatePanel({ probe, apply, close, notify }: {
     ? inkColor(getPalette().dim)
     : undefined
   const title = status === undefined
-    ? '/update · aligned upgrade'
-    : `/update · dsh-code ${status.code.running}${status.code.latest !== null && status.code.latest !== status.code.running ? ` → ${status.code.latest}` : ''}`
+    ? t('panel.update.title')
+    : status.aheadOfRegistry === true
+      ? `/update · dsh-code ${status.code.running}`
+      : `/update · dsh-code ${status.code.running}${status.code.latest !== null && status.code.latest !== status.code.running ? ` → ${status.code.latest}` : ''}`
+  const accent = panelAccent('update', 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(singleLineText(title), 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(singleLineText(title), viewport.contentColumns)),
     ...visible.map(row => createElement(Text, {
       key: row.key,
       color: toneColor(row.tone),
       wrap: 'truncate-end',
     }, truncateColumns(`  ${singleLineText(row.text)}`, viewport.contentColumns))),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(updateFooter(phase, planView?.runnable ?? false, status?.upToDate === true)), viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(updateFooter(phase, planView?.runnable ?? false, status?.upToDate === true, status?.aheadOfRegistry === true)), viewport.contentColumns)),
   )
 }

package/src/update.ts

@@ -20,6 +20,15 @@ export interface LauncherUpdateStatus {
   readonly plan: { readonly dshSpec: string; readonly codeSpec: string; readonly pluginSpecs: readonly string[] }
   readonly blockers: { readonly registry: string | null; readonly downgrade: boolean; readonly localCheckout: readonly string[] | null }
   readonly upToDate: boolean
+  /** True when this install is newer than npm latest (apply would downgrade). */
+  readonly aheadOfRegistry?: boolean
+}
+
+/** Exact specs the TUI confirmed; apply must install these, not re-query latest. */
+export interface LauncherUpdatePlan {
+  readonly dshSpec: string
+  readonly codeSpec: string
+  readonly pluginSpecs: readonly string[]
 }
 
 /** The launcher entrypoint that ships beside this bundle (lib/../bin). */
@@ -89,10 +98,17 @@ export async function probeLauncherUpdate(spawnProcess: SpawnLike = spawn as Spa
  * exit code (0 success); rejects only when the process could not start.
  * No timeout: an npm install may legitimately take minutes.
  */
-export function applyLauncherUpdate(onLine: (line: string) => void, spawnProcess: SpawnLike = spawn as SpawnLike): Promise<number> {
-  const command = launcherUpdateCommand(['update', '--apply'])
+export function applyPlanArgs(plan: LauncherUpdatePlan): string[] {
+  const args = ['update', '--apply', '--dsh', plan.dshSpec, '--code', plan.codeSpec]
+  for (const plugin of plan.pluginSpecs) args.push('--plugin', plugin)
+  return args
+}
+
+export function applyLauncherUpdate(onLine: (line: string) => void, spawnProcess?: SpawnLike, plan?: LauncherUpdatePlan): Promise<number> {
+  const spawnFn = spawnProcess ?? (spawn as SpawnLike)
+  const command = launcherUpdateCommand(plan === undefined ? ['update', '--apply'] : applyPlanArgs(plan))
   return new Promise((resolve, reject) => {
-    const child = spawnProcess(command.command, command.args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true })
+    const child = spawnFn(command.command, command.args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true })
     const split = createLineSplitter(onLine)
     child.stdout?.on('data', (chunk: Buffer) => { split(chunk.toString()) })
     child.stderr?.on('data', (chunk: Buffer) => { split(chunk.toString()) })