@deepseek-harness-tui/dsh-tui 0.6.0 → 0.7.0

package/lib/types/components/WorkingSpinner.js

@@ -7,7 +7,7 @@ import { SPINNER_VERBS } from '../cc/spinnerVerbs.js';
 import { sample } from 'lodash-es';
 /**
  * The working spinner block shown between the transcript and the prompt
- * input while a turn is in flight. Ported from the leak's `Spinner.tsx`
+ * input while a turn is in flight. Mirrors Claude Code's `Spinner.tsx`
  * (SpinnerWithVerb path) with the swarm/teammate/effort/tips branches
  * removed; the channel feeds the mode, token count and thinking status.
  *
@@ -23,7 +23,7 @@ export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, loadin
 /**
  * Tracks thinking status: 'thinking' while the model is streaming reasoning,
  * then the duration in ms for a minimum 2s display (avoids UI jank). Ported
- * from the leak's SpinnerWithVerb effect.
+ * from Claude Code's SpinnerWithVerb effect.
  */
 export function useThinkingStatus(isThinking) {
     const [thinkingStatus, setThinkingStatus] = useState(null);

package/lib/types/components/WorkspaceFlowPicker.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TuiWorkspaceChoice } from '../workspaces.js';
+/** Generic nested choice surface returned by a workspace provider command. */
+export declare function WorkspaceFlowPicker({ title, choices, focusIndex, busy, input, }: {
+    title: string;
+    choices: readonly TuiWorkspaceChoice[];
+    focusIndex: number;
+    busy?: boolean;
+    input?: {
+        value: string;
+        cursor: number;
+        placeholder?: string;
+    } | null;
+}): React.ReactNode;
+//# sourceMappingURL=WorkspaceFlowPicker.d.ts.map

package/lib/types/components/WorkspaceFlowPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceFlowPicker.d.ts","sourceRoot":"","sources":["../../../src/components/WorkspaceFlowPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAO1D,8EAA8E;AAC9E,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,IAAY,EACZ,KAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACtC,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACvE,GAAG,KAAK,CAAC,SAAS,CAoDlB"}

package/lib/types/components/WorkspaceFlowPicker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { t } from '../i18n.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+const WINDOW = 8;
+/** Generic nested choice surface returned by a workspace provider command. */
+export function WorkspaceFlowPicker({ title, choices, focusIndex, busy = false, input = null, }) {
+    const start = Math.max(0, Math.min(focusIndex - Math.floor(WINDOW / 2), choices.length - WINDOW));
+    const visible = choices.slice(start, start + WINDOW);
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: title }) }), visible.map((choice, index) => (_jsxs(ListItem, { isFocused: start + index === focusIndex, isSelected: false, description: choice.description, showScrollUp: index === 0 && start > 0, showScrollDown: index === visible.length - 1 && start + visible.length < choices.length, children: [choice.badge ? `${choice.badge} · ` : '', choice.label] }, choice.id))), input !== null && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "remember", children: "\u276F " }), input.value.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: input.placeholder ?? '' })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: input.value.slice(0, input.cursor) }), _jsx(Text, { inverse: true, children: input.value[input.cursor] ?? ' ' }), _jsx(Text, { children: input.value.slice(input.cursor + 1) })] }))] }))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: busy
+                        ? t('workspace-flow-loading')
+                        : input !== null
+                            ? t('workspace-flow-input-hint')
+                            : choices[focusIndex]?.input !== undefined
+                                ? t('workspace-flow-edit-hint')
+                                : t('workspace-flow-hint') }) })] }));
+}

package/lib/types/components/WorkspacePicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TuiWorkspaceTarget } from '../workspaces.js';
+/** `/workspace` target picker contributed by local and optional providers. */
+export declare function WorkspacePicker({ targets, focusIndex, currentCwd, }: {
+    targets: readonly TuiWorkspaceTarget[];
+    focusIndex: number;
+    currentCwd: string;
+}): React.ReactNode;
+//# sourceMappingURL=WorkspacePicker.d.ts.map

package/lib/types/components/WorkspacePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspacePicker.d.ts","sourceRoot":"","sources":["../../../src/components/WorkspacePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAO1D,8EAA8E;AAC9E,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACtC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAyBlB"}

package/lib/types/components/WorkspacePicker.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { t } from '../i18n.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+const WINDOW = 8;
+/** `/workspace` target picker contributed by local and optional providers. */
+export function WorkspacePicker({ targets, focusIndex, currentCwd, }) {
+    const start = Math.max(0, Math.min(focusIndex - Math.floor(WINDOW / 2), targets.length - WINDOW));
+    const visible = targets.slice(start, start + WINDOW);
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('workspace-picker-title') }) }), visible.map((target, index) => (_jsxs(ListItem, { isFocused: start + index === focusIndex, isSelected: target.cwd === currentCwd, description: target.description ?? target.uri, showScrollUp: index === 0 && start > 0, showScrollDown: index === visible.length - 1 && start + visible.length < targets.length, children: [target.badge, " \u00B7 ", target.label] }, target.uri)))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('workspace-picker-hint') }) })] }));
+}

package/lib/types/components/approvals/ApprovalPanel.d.ts

@@ -11,7 +11,7 @@
  * (fail closed, CC's "Esc to cancel" semantics).
  */
 import React from 'react';
-import type { ApprovalSnapshot } from '../../approvals.js';
+import type { ApprovalSnapshot } from '../../dsh-adapter/approvals.js';
 export type ApprovalPanelProps = {
     /** The approval to render (from the ApprovalStore snapshot). */
     readonly approval: ApprovalSnapshot;

package/lib/types/components/approvals/ApprovalPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,UAAU,KAAK,IAAI,CAAA;CAClE,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CAmEzF"}
+{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,UAAU,KAAK,IAAI,CAAA;CAClE,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CAmEzF"}

package/lib/types/components/approvals/ApprovalPanel.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { t } from '../../i18n.js';
 import { Box, Text, useInput } from '../../ui.js';
+import { isPlainReturnInput } from '../../utils/modifiers.js';
 import { Divider } from '../design-system/Divider.js';
 import { POINTER } from '../../cc/figures.js';
 const OUTCOMES = ['allowed-once', 'rejected'];
@@ -36,7 +37,7 @@ export function ApprovalPanel({ approval, onDecide }) {
             onDecide(OUTCOMES[Number(input) - 1]);
             return;
         }
-        if (key.return) {
+        if (isPlainReturnInput(input, key)) {
             onDecide(OUTCOMES[focusIndex]);
         }
     }, { isActive: true });

package/lib/types/components/design-system/Byline.d.ts

@@ -5,7 +5,7 @@ type Props = {
 };
 /**
  * Joins children with a middot separator (" · ") for inline metadata display
- * (ported from the leak's design-system). Automatically filters out
+ * (in the Claude Code visual language). Automatically filters out
  * null/undefined/false children and only renders separators between valid
  * elements.
  */

package/lib/types/components/design-system/Byline.js

@@ -3,7 +3,7 @@ import React, { Children, isValidElement } from 'react';
 import Text from '../../ink/components/Text.js';
 /**
  * Joins children with a middot separator (" · ") for inline metadata display
- * (ported from the leak's design-system). Automatically filters out
+ * (in the Claude Code visual language). Automatically filters out
  * null/undefined/false children and only renders separators between valid
  * elements.
  */

package/lib/types/components/design-system/Divider.d.ts

@@ -29,7 +29,7 @@ type DividerProps = {
 };
 /**
  * A horizontal divider line, optionally with a title in the middle
- * (ported from the leak's design-system).
+ * (in the Claude Code visual language).
  *
  * @example
  * // ─────────── Title ───────────

package/lib/types/components/design-system/Divider.js

@@ -4,7 +4,7 @@ import { stringWidth } from '../../ink/stringWidth.js';
 import { useTerminalSize } from '../../ink/hooks/use-terminal-size.js';
 /**
  * A horizontal divider line, optionally with a title in the middle
- * (ported from the leak's design-system).
+ * (in the Claude Code visual language).
  *
  * @example
  * // ─────────── Title ───────────

package/lib/types/components/design-system/HintLine.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Localized shortcut-hint line: renders a `t('hint-*')` string, with the
+ * `**primary shortcut**` segment (the main action's key, wrapped in `**` in
+ * the dict) in bold — the visual hierarchy KeyboardShortcutHint's `bold`
+ * prop used to give. Wrap in `<Text dimColor italic>` for the common dim
+ * styling, like the Byline it replaces.
+ */
+export declare function HintLine({ text }: {
+    text: string;
+}): React.ReactNode;
+//# sourceMappingURL=HintLine.d.ts.map

package/lib/types/components/design-system/HintLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintLine.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/HintLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAUpE"}

package/lib/types/components/design-system/HintLine.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Text from '../../ink/components/Text.js';
+/**
+ * Localized shortcut-hint line: renders a `t('hint-*')` string, with the
+ * `**primary shortcut**` segment (the main action's key, wrapped in `**` in
+ * the dict) in bold — the visual hierarchy KeyboardShortcutHint's `bold`
+ * prop used to give. Wrap in `<Text dimColor italic>` for the common dim
+ * styling, like the Byline it replaces.
+ */
+export function HintLine({ text }) {
+    const parts = text.split('**');
+    if (parts.length < 3)
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: parts.map((part, index) => index % 2 === 1 ? _jsx(Text, { bold: true, children: part }, index) : part) }));
+}

package/lib/types/components/design-system/KeyboardShortcutHint.d.ts

@@ -11,7 +11,7 @@ type Props = {
 };
 /**
  * Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
- * (ported from the leak's design-system). Wrap in `<Text dimColor>` for the
+ * (in the Claude Code visual language). Wrap in `<Text dimColor>` for the
  * common dim styling.
  */
 export declare function KeyboardShortcutHint({ shortcut, action, parens, bold, }: Props): React.ReactNode;

package/lib/types/components/design-system/KeyboardShortcutHint.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Text from '../../ink/components/Text.js';
 /**
  * Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
- * (ported from the leak's design-system). Wrap in `<Text dimColor>` for the
+ * (in the Claude Code visual language). Wrap in `<Text dimColor>` for the
  * common dim styling.
  */
 export function KeyboardShortcutHint({ shortcut, action, parens = false, bold = false, }) {

package/lib/types/components/design-system/ListItem.d.ts

@@ -26,8 +26,8 @@ export type ListItemProps = {
     declareCursor?: boolean;
 };
 /**
- * A list item for selection UIs (ported from the leak's
- * design-system/ListItem.tsx): `❯` pointer for the focused row, `✓`
+ * A list item for selection UIs, mirroring Claude Code's
+ * design-system/ListItem.tsx: `❯` pointer for the focused row, `✓`
  * checkmark for the selected row, description on an indented second line,
  * and CC's color states (focused = suggestion blue, selected = success
  * green).

package/lib/types/components/design-system/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7C,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,GACd,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAsDjC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7C,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,GACd,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAkEjC"}

package/lib/types/components/design-system/ListItem.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, Text } from '../../ui.js';
 import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
 import { POINTER, DOWN_ARROW, UP_ARROW, TICK } from '../../cc/figures.js';
 /**
- * A list item for selection UIs (ported from the leak's
- * design-system/ListItem.tsx): `❯` pointer for the focused row, `✓`
+ * A list item for selection UIs, mirroring Claude Code's
+ * design-system/ListItem.tsx: `❯` pointer for the focused row, `✓`
  * checkmark for the selected row, description on an indented second line,
  * and CC's color states (focused = suggestion blue, selected = success
  * green).
@@ -44,5 +45,36 @@ export function ListItem({ isFocused, isSelected = false, children, description,
             return 'suggestion';
         return undefined;
     }
-    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, children: children })) : (children), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", children: description }) }))] }));
+    // 窗口化列表（ModelPicker/History/Rewind/Select）按固定行高切片：字符串
+    // 内容必须恒占一行——压平内嵌换行（历史命令可能带 \n），超宽 truncate
+    // 而非换行，否则一项实际占多行会把焦点行裁出浮层（二次审查实证）。
+    // 压平必须递归穿透 Fragment/数组：ThemePicker 的 label 就是包着用户
+    // displayName 的 Fragment，而 customTheme 允许 displayName 保留内部
+    // 换行（三轮审查实证：不递归则 Fragment 里的 'Foo\nBar' 仍渲染两行）。
+    // 非 Fragment 的 element（如调用方自己的 <Text>）保留原样——其子树高度
+    // 由调用方负责。
+    const flatChildren = flattenDeep(children);
+    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, wrap: "truncate", children: flatChildren })) : (flatChildren), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: flattenLine(description) }) }))] }));
+}
+/** 单行化：内嵌换行折叠为空格（行尾/行首换行随之消除）。 */
+function flattenLine(s) {
+    return s.replace(/[\r\n]+/g, ' ');
+}
+/**
+ * 递归单行化：字符串直接压平；数组逐元素递归；Fragment 是透明结构包装，
+ * 递归进其 children（保留 key/props）。其他 element 原样保留。
+ * 数组必须走 React.Children.map 而非原生 map：后者把静态 JSX children
+ * 变成无 key 的动态数组，/theme（label 含 Fragment）会稳定触发 React
+ * key warning（四次审查实证）。
+ */
+function flattenDeep(node) {
+    if (typeof node === 'string')
+        return flattenLine(node);
+    if (Array.isArray(node))
+        return React.Children.map(node, flattenDeep);
+    if (React.isValidElement(node) && node.type === React.Fragment) {
+        const frag = node;
+        return React.cloneElement(frag, undefined, flattenDeep(frag.props.children));
+    }
+    return node;
 }

package/lib/types/components/design-system/LoadingState.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 /**
- * A spinner with a loading message for async operations, ported from the
- * leak's design-system/LoadingState.tsx (using the small animated glyph).
+ * A spinner with a loading message for async operations, mirroring Claude Code's design-system/LoadingState.tsx (using the small animated glyph).
  *
  * @example
  * <LoadingState message="Loading models" bold subtitle="Querying the provider…" />

package/lib/types/components/design-system/LoadingState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/LoadingState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,SAAS,CAelB"}
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/LoadingState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,SAAS,CAelB"}

package/lib/types/components/design-system/LoadingState.js

@@ -9,8 +9,7 @@ const SPINNER_FRAMES = [
     ...[...getDefaultCharacters()].reverse(),
 ];
 /**
- * A spinner with a loading message for async operations, ported from the
- * leak's design-system/LoadingState.tsx (using the small animated glyph).
+ * A spinner with a loading message for async operations, mirroring Claude Code's design-system/LoadingState.tsx (using the small animated glyph).
  *
  * @example
  * <LoadingState message="Loading models" bold subtitle="Querying the provider…" />

package/lib/types/components/design-system/Pane.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { Theme } from '../../theme.js';
 /**
  * A pane — a region below the prompt bounded by a colored top line with a
- * one-row gap above and horizontal padding (ported from the leak's
- * design-system/Pane.tsx). Used by the slash-command dialogs (/thinking,
+ * one-row gap above and horizontal padding, mirroring Claude Code's
+ * design-system/Pane.tsx. Used by the slash-command dialogs (/thinking,
  * /model, /resume).
  *
  * @example

package/lib/types/components/design-system/Pane.js

@@ -3,8 +3,8 @@ import Box from '../../ink/components/Box.js';
 import { Divider } from './Divider.js';
 /**
  * A pane — a region below the prompt bounded by a colored top line with a
- * one-row gap above and horizontal padding (ported from the leak's
- * design-system/Pane.tsx). Used by the slash-command dialogs (/thinking,
+ * one-row gap above and horizontal padding, mirroring Claude Code's
+ * design-system/Pane.tsx. Used by the slash-command dialogs (/thinking,
  * /model, /resume).
  *
  * @example

package/lib/types/components/design-system/ProgressBar.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Theme } from '../../theme.js';
 /**
- * A proportional progress bar drawn with block glyphs, ported from the
- * leak's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
+ * A proportional progress bar drawn with block glyphs, mirroring Claude Code's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
  * cell uses the `▏▎▍▌▋▊▉` ladder for sub-cell precision, and the empty
  * remainder is spaces with the empty color as background.
  *

package/lib/types/components/design-system/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,UAAU,EACjB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE;IACD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,KAAK,CAAA;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,KAAK,CAAA;CACzB,GAAG,KAAK,CAAC,SAAS,CAkBlB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,UAAU,EACjB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE;IACD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,KAAK,CAAA;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,KAAK,CAAA;CACzB,GAAG,KAAK,CAAC,SAAS,CAkBlB"}

package/lib/types/components/design-system/ProgressBar.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Text from '../../ink/components/Text.js';
 /**
- * A proportional progress bar drawn with block glyphs, ported from the
- * leak's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
+ * A proportional progress bar drawn with block glyphs, mirroring Claude Code's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
  * cell uses the `▏▎▍▌▋▊▉` ladder for sub-cell precision, and the empty
  * remainder is spaces with the empty color as background.
  *

package/lib/types/components/design-system/StatusIcon.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 type Status = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'loading';
 /**
- * A status indicator icon with the CC color mapping (ported from the leak's
- * design-system/StatusIcon.tsx): ✓ green / ✗ red / ⚠ amber / ℹ blue /
+ * A status indicator icon with the CC color mapping, mirroring Claude Code's
+ * design-system/StatusIcon.tsx: ✓ green / ✗ red / ⚠ amber / ℹ blue /
  * ○ dim / … dim.
  */
 export declare function StatusIcon({ status, withSpace, }: {

package/lib/types/components/design-system/StatusIcon.js

@@ -10,8 +10,8 @@ const STATUS_CONFIG = {
     loading: { icon: '…', color: undefined },
 };
 /**
- * A status indicator icon with the CC color mapping (ported from the leak's
- * design-system/StatusIcon.tsx): ✓ green / ✗ red / ⚠ amber / ℹ blue /
+ * A status indicator icon with the CC color mapping, mirroring Claude Code's
+ * design-system/StatusIcon.tsx: ✓ green / ✗ red / ⚠ amber / ℹ blue /
  * ○ dim / … dim.
  */
 export function StatusIcon({ status, withSpace = false, }) {

package/lib/types/components/design-system/ThemeProvider.d.ts

@@ -5,7 +5,7 @@ export declare function ThemeProvider({ children, theme, }: {
 }): React.ReactNode;
 /**
  * Resolves the active theme name and the runtime setter. Returns
- * `[themeName, setTheme]` — the first element matches the leak's shape.
+ * `[themeName, setTheme]` — the first element matches Claude Code's shape.
  */
 export declare function useTheme(): [string, (name: string) => boolean];
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/lib/types/components/design-system/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAsE7E,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAgFlB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAG9D"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AA4F7E,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAuIlB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAG9D"}

package/lib/types/components/design-system/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { registerCustomThemeResolver, setActiveThemeName } from '../../theme.js';
+import { registerCustomThemeResolver, setActiveThemeName, setAutoThemeBase, getAutoThemeBase, AUTO_THEME_NAME, } from '../../theme.js';
 import { isThemeAvailable, resolveCustomTheme } from '../../customTheme.js';
 import { readThemePref, writeThemePref } from '../../themePrefs.js';
 import useStdin from '../../ink/hooks/use-stdin.js';
@@ -9,11 +9,11 @@ import { parseOscColor } from '../../ink/termio/osc.js';
 import { logForDebugging } from '../../utils/debug.js';
 /**
  * Theme provider with terminal-background auto-detection. With no explicit
- * `theme` prop, no CC_TUI_THEME override and no persisted choice
- * (~/.dsh-cc/theme.json), it queries the terminal's background color
+ * `theme` prop, no DSH_TUI_THEME override and no persisted choice
+ * (~/.dsh-tui/theme.json), it queries the terminal's background color
  * (OSC 11) before first paint and picks the Gentle Mist Blue `light` palette
  * on light backgrounds, `dark` otherwise. Priority: explicit `theme` prop >
- * CC_TUI_THEME (built-in or user theme name) > persisted `/theme` choice >
+ * DSH_TUI_THEME (built-in or user theme name) > persisted `/theme` choice >
  * OSC 11 detection. An invalid forced name is warned and skipped, so
  * detection still runs. Children render only after the theme settles, so
  * the first frame already carries the final palette — no dark→light flash.
@@ -21,25 +21,35 @@ import { logForDebugging } from '../../utils/debug.js';
  * stall) falls back to `dark`. The resolved name is mirrored via
  * setActiveThemeName() for non-React rendering (markdown inline code).
  *
+ * The `auto` pseudo-theme turns that one-shot startup detection into a
+ * standing choice: `auto` is valid everywhere a theme name is (DSH_TUI_THEME,
+ * theme.json, /theme), defers first paint until detection settles like the
+ * unforced path, and re-queries OSC 11 on every runtime switch to `auto` —
+ * the detected base (light/dark) is mirrored via setAutoThemeBase() so
+ * getTheme('auto') resolves it for every consumer. OSC 11 tracks the system
+ * theme in terminals that follow it, so `auto` effectively follows the
+ * system light/dark mode.
+ *
  * The context also exposes setTheme() for the runtime `/theme` picker: it
- * validates the name, persists the choice to ~/.dsh-cc/theme.json and hot
+ * validates the name, persists the choice to ~/.dsh-tui/theme.json and hot
  * swaps the palette (and the module-level mirror) immediately.
  */
-// User themes (~/.dsh-cc/themes/<name>.json) resolve through this registry,
+// User themes (~/.dsh-tui/themes/<name>.json) resolve through this registry,
 // so getTheme() serves them to every themed component and to non-React
 // rendering (markdown inline code) without a context.
 registerCustomThemeResolver(resolveCustomTheme);
 const ThemeContext = createContext({
     theme: 'dark',
+    autoBase: 'dark',
     setTheme: () => false,
 });
 /**
- * CC_TUI_THEME skips terminal detection (tests, debugging). Accepts a
- * built-in name (light|dark|dark-ansi) or a user theme name; invalid values
- * are warned and ignored by the caller, falling back to detection.
+ * DSH_TUI_THEME skips terminal detection (tests, debugging). Accepts a
+ * built-in name (auto|light|dark|dark-ansi) or a user theme name; invalid
+ * values are warned and ignored by the caller, falling back to detection.
  */
 function envThemeOverride() {
-    const v = process.env.CC_TUI_THEME;
+    const v = process.env.DSH_TUI_THEME;
     return v === undefined || v === '' ? undefined : v;
 }
 /** Detection round-trip is normally ~10ms locally; this only bounds pathological stalls. */
@@ -61,20 +71,43 @@ export function ThemeProvider({ children, theme, }) {
             return false;
         if (isThemeAvailable(forced))
             return true;
-        console.warn(`[dsh-tui] theme "${forced}" not found (built-ins: light, dark, dark-ansi; user themes: ~/.dsh-cc/themes/*.json); falling back to auto-detection`);
+        console.warn(`[dsh-tui] theme "${forced}" not found (built-ins: auto, light, dark, dark-ansi; user themes: ~/.dsh-tui/themes/*.json); falling back to auto-detection`);
         return false;
     });
-    const [active, setActive] = useState(forcedValid ? forced ?? null : null);
-    const { internal_querier, setRawMode, isRawModeSupported } = useStdin();
+    // `auto` (like the unforced path) stays null until detection settles, so
+    // the first frame already carries the detected palette.
+    const [active, setActive] = useState(forcedValid && forced !== AUTO_THEME_NAME ? forced ?? null : null);
+    const { internal_querier, isRawModeSupported } = useStdin();
+    /**
+     * The palette `auto` resolves to, as React state so a flip re-renders
+     * consumers through the context value. Kept in sync with the module-level
+     * mirror in theme.ts (non-React rendering reads that one).
+     */
+    const [autoBase, setAutoBase] = useState(() => getAutoThemeBase());
+    const applyAutoBase = React.useCallback((base) => {
+        setAutoThemeBase(base);
+        setAutoBase(base);
+    }, []);
     useEffect(() => {
-        if (forcedValid)
+        if (forcedValid && forced !== AUTO_THEME_NAME)
             return;
         const querier = internal_querier;
+        // Settle on the detected base: a concrete forced/unforced name activates
+        // directly; `auto` records the base and activates as `auto`.
+        const settle = (name, why) => {
+            logForDebugging(`theme: ${name} (${why})`);
+            if (forced === AUTO_THEME_NAME) {
+                applyAutoBase(name);
+                setActive(AUTO_THEME_NAME);
+            }
+            else {
+                setActive(name);
+            }
+        };
         // Stdin responses only flow while raw mode holds the readable listener;
         // without a querier (or raw-mode support) detection is impossible.
         if (querier === null || !isRawModeSupported) {
-            logForDebugging('theme: detection unavailable (no querier/raw mode), using dark');
-            setActive('dark');
+            settle('dark', 'detection unavailable (no querier/raw mode)');
             return;
         }
         let settled = false;
@@ -83,12 +116,11 @@ export function ThemeProvider({ children, theme, }) {
                 return;
             settled = true;
             clearTimeout(timer);
-            setRawMode(false);
-            logForDebugging(`theme: ${name} (${why})`);
-            setActive(name);
+            settle(name, why);
         };
-        const timer = setTimeout(() => { finish('dark', 'detection timeout'); }, DETECT_TIMEOUT_MS);
-        setRawMode(true);
+        const timer = setTimeout(() => {
+            finish('dark', 'detection timeout');
+        }, DETECT_TIMEOUT_MS);
         void Promise.all([querier.send(oscColor(11)), querier.flush()]).then(([r]) => {
             const color = r ? parseOscColor(r.data) : null;
             if (color === null || color.type !== 'rgb') {
@@ -98,11 +130,38 @@ export function ThemeProvider({ children, theme, }) {
                 finish(isLightBackground(color.r, color.g, color.b) ? 'light' : 'dark', `OSC 11 bg rgb(${color.r},${color.g},${color.b})`);
             }
         });
+        return () => {
+            settled = true;
+            clearTimeout(timer);
+        };
     }, []);
+    /**
+     * Re-query the terminal background while the app is running (runtime
+     * switch to `auto`). Stdin is already in raw mode here — unlike the
+     * startup path above — so no raw-mode toggling. Best effort: a terminal
+     * that doesn't answer just keeps the current base.
+     */
+    const redetectAutoBase = React.useCallback(() => {
+        const querier = internal_querier;
+        if (querier === null || !isRawModeSupported) {
+            logForDebugging('theme: auto re-detection unavailable, keeping current base');
+            return;
+        }
+        void Promise.all([querier.send(oscColor(11)), querier.flush()]).then(([r]) => {
+            const color = r ? parseOscColor(r.data) : null;
+            if (color === null || color.type !== 'rgb')
+                return;
+            const base = isLightBackground(color.r, color.g, color.b) ? 'light' : 'dark';
+            logForDebugging(`theme: auto base ${base} (OSC 11 bg rgb(${color.r},${color.g},${color.b}))`);
+            applyAutoBase(base);
+        });
+    }, [internal_querier, isRawModeSupported, applyAutoBase]);
     /**
      * Runtime theme switch (/theme picker or direct command). Validates the
      * name, persists first (a choice that cannot be saved never silently
-     * disappears), then hot swaps the palette.
+     * disappears), then hot swaps the palette. Switching to `auto` applies
+     * the last detected base immediately and re-queries OSC 11 in the
+     * background, so a theme change since launch is picked up.
      */
     const setTheme = React.useCallback((name) => {
         if (!isThemeAvailable(name)) {
@@ -110,13 +169,15 @@ export function ThemeProvider({ children, theme, }) {
             return false;
         }
         if (!writeThemePref(name)) {
-            console.warn('[dsh-tui] failed to write ~/.dsh-cc/theme.json');
+            console.warn('[dsh-tui] failed to write ~/.dsh-tui/theme.json');
             return false;
         }
         setActive(name);
+        if (name === AUTO_THEME_NAME)
+            redetectAutoBase();
         return true;
-    }, []);
-    const value = React.useMemo(() => ({ theme: active ?? 'dark', setTheme }), [active, setTheme]);
+    }, [redetectAutoBase]);
+    const value = React.useMemo(() => ({ theme: active ?? 'dark', autoBase, setTheme }), [active, autoBase, setTheme]);
     useEffect(() => {
         if (active !== null)
             setActiveThemeName(active);
@@ -127,7 +188,7 @@ export function ThemeProvider({ children, theme, }) {
 }
 /**
  * Resolves the active theme name and the runtime setter. Returns
- * `[themeName, setTheme]` — the first element matches the leak's shape.
+ * `[themeName, setTheme]` — the first element matches Claude Code's shape.
  */
 export function useTheme() {
     const { theme, setTheme } = useContext(ThemeContext);