dsh-code 1.3.0 → 1.4.0

package/src/ui/panel-gap.ts

@@ -0,0 +1,9 @@
+/** Shared optional spacer row used by bounded panel layouts. */
+
+import { createElement, type ReactElement } from 'react'
+import { Text } from 'ink'
+
+/** Codex-style panel rhythm that still participates in the row budget. */
+export function PanelGap({ visible }: { visible: boolean }): ReactElement | undefined {
+  return visible ? createElement(Text, null, ' ') : undefined
+}

package/src/ui/query-editor.ts

@@ -0,0 +1,16 @@
+/** Shared one-line query editor for keyboard-owned filtering panels. */
+
+import { stripPasteMarkers } from '../keyboard.ts'
+import { deleteLastGrapheme } from '../render/editor.ts'
+
+/**
+ * Apply one keystroke to a panel search query. IME commits arrive as one
+ * multi-character chunk, so the whole printable run is appended; paste
+ * markers are stripped and control-laden chunks are ignored.
+ */
+export function editQuery(query: string, input: string, key: { backspace?: boolean; delete?: boolean }): string | undefined {
+  if (key.backspace || key.delete) return deleteLastGrapheme(query)
+  const text = stripPasteMarkers(input)
+  if (text !== '' && !/[\u0000-\u001f\u007f]/u.test(text)) return query + text
+  return undefined
+}

package/src/ui/styled-rows.ts

@@ -0,0 +1,124 @@
+/** Ink renderer for width-safe styled terminal rows. */
+
+import { createElement, type ReactElement } from 'react'
+import { Box, Text } from 'ink'
+import type { MdSegment } from '../render/markdown.ts'
+import type { LineStyle, StyledLine } from '../render/lines.ts'
+import {
+  diffBackground,
+  getPalette,
+  inkColor,
+  promptRowTokens,
+  rowBackground,
+} from '../theme.ts'
+
+function segmentProps(style: MdSegment['style']): {
+  color: string | undefined
+  bold: boolean | undefined
+  italic: boolean | undefined
+  strikethrough: boolean | undefined
+} {
+  switch (style) {
+    case 'accent':
+      return { color: inkColor(getPalette().brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'accentBold':
+      return { color: inkColor(getPalette().brandBright), bold: true, italic: undefined, strikethrough: undefined }
+    case 'code':
+      return { color: inkColor(getPalette().code), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'dim':
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'bold':
+      return { color: undefined, bold: true, italic: undefined, strikethrough: undefined }
+    case 'italic':
+      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined }
+    case 'boldItalic':
+      return { color: undefined, bold: true, italic: true, strikethrough: undefined }
+    case 'strike':
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: undefined, strikethrough: true }
+    case 'diffAdd':
+    case 'diffDel':
+      // Inline-markdown twin of lineStyleProps' diff cases: tinted rows for
+      // ```diff fences rendered through the markdown span path. The diff
+      // foreground tokens stay AA-legible both on the row tints (when the
+      // background rides along) and on the plain terminal background.
+      return {
+        color: inkColor(style === 'diffAdd' ? getPalette().diffAddFg : getPalette().diffDelFg),
+        bold: undefined,
+        italic: undefined,
+        strikethrough: undefined,
+      }
+    default:
+      return { color: undefined, bold: undefined, italic: undefined, strikethrough: undefined }
+  }
+}
+
+/** Ink props for the richer line model used by bounded scrolling panels. */
+function lineStyleProps(style: LineStyle): {
+  color: string | undefined
+  bold: boolean | undefined
+  italic: boolean | undefined
+  strikethrough: boolean | undefined
+  dimColor: boolean | undefined
+  backgroundColor: string | undefined
+} {
+  switch (style) {
+    case 'brand':
+      return { color: inkColor(getPalette().brandBright), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: undefined }
+    case 'success':
+      return { color: inkColor(getPalette().success), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: undefined }
+    case 'error':
+      return { color: inkColor(getPalette().error), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: undefined }
+    case 'warn':
+      return { color: inkColor(getPalette().warn), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: undefined }
+    case 'dimItalic':
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: true, strikethrough: undefined, dimColor: undefined, backgroundColor: undefined }
+    // Codex diff rendering: added/removed lines carry a theme tint behind
+    // the sign and text, with the AA-tuned diff foreground tokens on top; the
+    // depth gate turns this into plain foreground styling on 16-color
+    // terminals.
+    case 'diffAdd':
+      return { color: inkColor(getPalette().diffAddFg), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: diffBackground('diffAdd') }
+    case 'diffDel':
+      return { color: inkColor(getPalette().diffDelFg), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined, backgroundColor: diffBackground('diffDel') }
+    // Prompt rows: one full-width bar per delivery kind. The tint comes from
+    // the row token and the foreground from its AA-tuned twin; the depth gate
+    // inside rowBackground degrades this to foreground-only on 16-color
+    // terminals, matching the diff rows.
+    case 'promptRow':
+    case 'promptQueuedRow':
+    case 'promptSteeredRow': {
+      const tokens = promptRowTokens(style === 'promptQueuedRow' ? 'queued' : style === 'promptSteeredRow' ? 'steered' : undefined)
+      return {
+        color: inkColor(getPalette()[tokens.fg]),
+        bold: undefined,
+        italic: undefined,
+        strikethrough: undefined,
+        dimColor: undefined,
+        backgroundColor: rowBackground(tokens.fg),
+      }
+    }
+    default:
+      return { ...segmentProps(style), dimColor: undefined, backgroundColor: undefined }
+  }
+}
+
+/** Render width-safe rows; every child is exactly one terminal row. */
+export function StyledRows({ lines }: { lines: readonly StyledLine[] }): ReactElement {
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...lines.map((line, index) => createElement(
+      Text,
+      { key: index, wrap: 'truncate-end' },
+      line.segments.length === 0
+        ? ' '
+        : line.segments.map((segment, at) => createElement(
+          Text,
+          { key: at, ...lineStyleProps(segment.style) },
+          segment.text,
+        )),
+    )),
+  )
+}
+
+/** File-oriented, color-coded unified diff viewport. */

package/src/{terminal-title.ts → ui/terminal-title.ts}

@@ -10,7 +10,7 @@
  * an empty OSC payload and the terminal falls back to its own default; the
  * previously set title is not portable to read back and is never restored.
  *
- * @module @deepseek-ai/dsh-code/terminal-title
+ * @module @deepseek-ai/dsh-code/ui/terminal-title
  */
 
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'

package/src/ui/ui-contract.ts

@@ -0,0 +1,10 @@
+/** Shared terminal UI contracts used by the runner, App, and composer. */
+
+/** Visual priority for one bounded local notice. */
+export type NoticeTone = 'info' | 'warning' | 'error'
+
+/** One mutation the terminal may request for a pending next-turn inbox item. */
+export type QueueMutation =
+  | { readonly kind: 'remove' }
+  | { readonly kind: 'edit'; readonly text: string }
+  | { readonly kind: 'steer' }

package/src/ui/use-frames.ts

@@ -0,0 +1,23 @@
+/** Wall-clock animation frame hook shared by independent terminal leaves. */
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Derive ticks from elapsed wall time so a stretched interval skips ahead
+ * instead of slowing the animation under a busy event loop or remote shell.
+ */
+export function useFrames(intervalMs: number, active = true): number {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    if (!active) return
+    const startedAt = Date.now()
+    setTick(0)
+    const id = setInterval(() => {
+      setTick(Math.max(0, Math.floor((Date.now() - startedAt) / intervalMs)))
+    }, intervalMs)
+    return () => {
+      clearInterval(id)
+    }
+  }, [active, intervalMs])
+  return tick
+}

package/src/ui/use-stable-input.ts

@@ -0,0 +1,17 @@
+/** Stable Ink input subscription for stateful keyboard-owned surfaces. */
+
+import { useCallback, useRef } from 'react'
+import { useInput, type Key } from 'ink'
+
+/**
+ * Ink re-subscribes its input effect whenever the handler identity changes.
+ * Keep ownership stable while a surface updates cursor, scroll, or draft state.
+ */
+export function useStableInput(handler: (input: string, key: Key) => void, active: boolean): void {
+  const handlerRef = useRef(handler)
+  handlerRef.current = handler
+  const stableHandler = useCallback((input: string, key: Key): void => {
+    handlerRef.current(input, key)
+  }, [])
+  useInput(stableHandler, { isActive: active })
+}