@deepseek-harness-tui/dsh-tui 0.5.0

package/lib/types/components/GoalTodoPanel.js

@@ -0,0 +1,57 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+/** Maximum todo rows shown before the overflow line. */
+const MAX_TODOS = 8;
+const PHASE_LABEL = {
+    active: '● active',
+    paused: '⏸ paused',
+    blocked: '⛔ blocked',
+    complete: '✓ complete',
+};
+function PhaseBadge({ phase, roundsStarted, maxGoalRounds, }) {
+    const color = phase === 'active'
+        ? 'success'
+        : phase === 'paused'
+            ? 'warning'
+            : phase === 'blocked'
+                ? 'error'
+                : undefined;
+    return (_jsxs(Text, { color: color, dimColor: phase === 'complete', children: [PHASE_LABEL[phase], " \u00B7 ", roundsStarted, "/", maxGoalRounds] }));
+}
+function TodoGlyph({ status }) {
+    switch (status) {
+        case 'in_progress':
+            return _jsx(Text, { color: "suggestion", children: "\u25CF " });
+        case 'completed':
+            return _jsx(Text, { dimColor: true, children: "\u2713 " });
+        default:
+            return _jsx(Text, { dimColor: true, children: "\u25CB " });
+    }
+}
+/**
+ * Mind-map style branch prefix: `├─` for every row but the last, which
+ * closes with `└─`. The whole panel reads as one tree — the goal is the
+ * root and each todo hangs off it.
+ */
+function BranchPrefix({ last }) {
+    return _jsx(Text, { dimColor: true, children: last ? '└─ ' : '├─ ' });
+}
+/**
+ * Live goal + todo panel above the prompt input. Data rides on the channel:
+ * `channel.goal` is folded from `goal/change` context events and
+ * `channel.todos` from `todo/write` whole-list snapshots, so every model
+ * update re-renders this panel in real time (no polling). Renders nothing
+ * while both slots are empty.
+ */
+export function GoalTodoPanel({ channel }) {
+    const goal = channel.goal;
+    const todos = channel.todos ?? [];
+    if (goal === undefined && todos.length === 0)
+        return null;
+    const visible = todos.slice(0, MAX_TODOS);
+    const hidden = todos.length - visible.length;
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: [goal !== undefined && (_jsxs(Box, { flexDirection: "column", marginBottom: todos.length > 0 ? 1 : 0, children: [_jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsx(Text, { color: "suggestion", children: "\uD83C\uDFAF " }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { bold: true, wrap: "truncate", children: goal.objective }) }), _jsx(Box, { flexShrink: 0, marginLeft: 1, children: _jsx(PhaseBadge, { phase: goal.phase, roundsStarted: goal.roundsStarted, maxGoalRounds: goal.maxGoalRounds }) })] }), goal.phase === 'blocked' && goal.blockedReason !== undefined && (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), _jsx(Text, { color: "error", wrap: "truncate", children: goal.blockedReason.message })] }))] })), todos.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [visible.map((todo, index) => {
+                        const last = index === visible.length - 1 && hidden === 0;
+                        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(BranchPrefix, { last: last }), _jsx(TodoGlyph, { status: todo.status }), _jsx(Text, { wrap: "truncate", dimColor: todo.status === 'completed', children: todo.content })] }, index));
+                    }), hidden > 0 && (_jsxs(Box, { flexDirection: "row", children: [_jsx(BranchPrefix, { last: true }), _jsxs(Text, { dimColor: true, children: ["\u2026 ", hidden, " more"] })] }))] }))] }));
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { LocalCommand } from '../commands.js';
+/**
+ * The `?` help menu, ported from the leak's `PromptInputHelpMenu.tsx`
+ * (three-column shortcut layout, trimmed to the keys dsh-tui actually binds).
+ * The command column lists the merged slash-command surface: built-in
+ * commands plus plugin-registered ones from the DSH registry (plan/goal/…).
+ */
+export declare function HelpMenu({ commands, }: {
+    commands: readonly LocalCommand[];
+}): React.ReactNode;
+//# sourceMappingURL=HelpMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../src/components/HelpMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAA;CAClC,GAAG,KAAK,CAAC,SAAS,CA6DlB"}

package/lib/types/components/HelpMenu.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '../ink/components/Box.js';
+import Text from '../ink/components/Text.js';
+/**
+ * The `?` help menu, ported from the leak's `PromptInputHelpMenu.tsx`
+ * (three-column shortcut layout, trimmed to the keys dsh-tui actually binds).
+ * The command column lists the merged slash-command surface: built-in
+ * commands plus plugin-registered ones from the DSH registry (plan/goal/…).
+ */
+export function HelpMenu({ commands, }) {
+    return (_jsxs(Box, { paddingX: 2, flexDirection: "row", gap: 4, children: [_jsxs(Box, { flexDirection: "column", width: 26, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "/ for commands" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "? for this help" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+o for verbose output" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+t to toggle context" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+r to search history" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+c to interrupt" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+d to exit" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+l to redraw" }) })] }), _jsxs(Box, { flexDirection: "column", width: 24, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "esc to clear input" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193 for history" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "\u2190/\u2192 to move cursor" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "ctrl+\u2190/\u2192 for word jumps" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "tab to complete command" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "shift+tab to cycle effort" }) })] }), _jsxs(Box, { flexDirection: "column", flexShrink: 1, children: [_jsx(Text, { dimColor: true, children: "commands:" }), commands.map(command => (_jsx(Box, { children: _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["/", command.name, " \u2014 ", command.description] }) }, command.name)))] })] }));
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type HistoryEntry } from '../history.js';
+/**
+ * The ctrl+r history search dialog, in the shape of the leak's
+ * HistorySearchDialog/FuzzyPicker: a permission-colored Pane with a bold
+ * title, the ⌕ SearchBox, the filtered history as ListItem rows (newest
+ * first), and the ↑/↓ · Enter · Esc hint line. Keyboard handling lives in
+ * the caller (Chat).
+ */
+export declare function HistorySearchDialog({ query, cursorOffset, matches, focusIndex, }: {
+    query: string;
+    cursorOffset: number;
+    matches: readonly HistoryEntry[];
+    focusIndex: number;
+}): React.ReactNode;
+//# sourceMappingURL=HistorySearchDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistorySearchDialog.d.ts","sourceRoot":"","sources":["../../../src/components/HistorySearchDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjE;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,UAAU,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAsClB"}

package/lib/types/components/HistorySearchDialog.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { Byline } from './design-system/Byline.js';
+import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
+import { SearchBox } from './SearchBox.js';
+import { historyEntryId } from '../history.js';
+/**
+ * The ctrl+r history search dialog, in the shape of the leak's
+ * HistorySearchDialog/FuzzyPicker: a permission-colored Pane with a bold
+ * title, the ⌕ SearchBox, the filtered history as ListItem rows (newest
+ * first), and the ↑/↓ · Enter · Esc hint line. Keyboard handling lives in
+ * the caller (Chat).
+ */
+export function HistorySearchDialog({ query, cursorOffset, matches, focusIndex, }) {
+    const isTerminalFocused = useTerminalFocus();
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: "permission", children: "Search history" }), _jsx(SearchBox, { query: query, cursorOffset: cursorOffset, isFocused: true, isTerminalFocused: isTerminalFocused, placeholder: "Type to search\u2026" }), matches.length === 0 ? (_jsx(Text, { dimColor: true, children: "No matching commands" })) : (matches.map((entry, index) => (_jsx(ListItem, { isFocused: index === focusIndex, description: formatRelativeAge(entry.ts), children: entry.text }, historyEntryId(entry))))), _jsx(Text, { dimColor: true, italic: true, children: _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "\u2191/\u2193", action: "navigate" }), _jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "select", bold: true }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" })] }) })] }) }));
+}
+/** "now", "5m ago", "2h ago", "3d ago" — like CC's formatRelativeTimeAgo. */
+function formatRelativeAge(ts) {
+    const elapsed = Date.now() - ts;
+    if (elapsed < 60_000)
+        return 'now';
+    if (elapsed < 3_600_000)
+        return `${Math.floor(elapsed / 60_000)}m ago`;
+    if (elapsed < 86_400_000)
+        return `${Math.floor(elapsed / 3_600_000)}h ago`;
+    return `${Math.floor(elapsed / 86_400_000)}d ago`;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * The dim "interrupted" row shown when the user stops a turn, ported from
+ * the leak's `InterruptedByUser.tsx`.
+ */
+export declare function InterruptedByUser(): React.ReactNode;
+//# sourceMappingURL=InterruptedByUser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InterruptedByUser.d.ts","sourceRoot":"","sources":["../../../src/components/InterruptedByUser.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,KAAK,CAAC,SAAS,CAOnD"}

package/lib/types/components/InterruptedByUser.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../ui.js';
+/**
+ * The dim "interrupted" row shown when the user stops a turn, ported from
+ * the leak's `InterruptedByUser.tsx`.
+ */
+export function InterruptedByUser() {
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Interrupted " }), _jsx(Text, { dimColor: true, children: "\u00B7 What should DeepSeek do instead?" })] }));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { LoadedContext } from '../channel.js';
+/**
+ * The startup context panel: a collapsed one-line summary of what a
+ * fresh conversation will load for the current agent (system prompt
+ * sections, workspace instruction files, dynamic context, skill catalog,
+ * tools). Toggle with Ctrl+T (see HelpMenu; the ported ink core has no
+ * mouse-click handling, so the header is not clickable); the panel renders
+ * only while the transcript is still empty — the first message's rows take
+ * over. Renders nothing for an empty snapshot.
+ * @param context - the channel's loaded-context snapshot.
+ * @param open - whether the grouped details are shown.
+ * @param onToggle - flips `open`; fired by the Ctrl+T keybinding.
+ */
+export declare function LoadedContextPanel({ context, open, onToggle, }: {
+    context: LoadedContext;
+    open: boolean;
+    onToggle: () => void;
+}): React.ReactNode;
+//# sourceMappingURL=LoadedContextPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadedContextPanel.d.ts","sourceRoot":"","sources":["../../../src/components/LoadedContextPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,eAAe,CAAA;AA+BtE;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,KAAK,CAAC,SAAS,CAkElB"}

package/lib/types/components/LoadedContextPanel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { summarizeLoadedContext, truncateContextText } from '../utils/loaded-context.js';
+/** One named entry (section or dynamic context) with its full text. */
+function Entry({ entry }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: entry.name }), _jsx(Text, { dimColor: true, wrap: "wrap", children: truncateContextText(entry.text) })] }));
+}
+/** A titled group of rows inside the expanded panel. */
+function Group({ title, children }) {
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: "subtle", children: title }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: children })] }));
+}
+/**
+ * The startup context panel: a collapsed one-line summary of what a
+ * fresh conversation will load for the current agent (system prompt
+ * sections, workspace instruction files, dynamic context, skill catalog,
+ * tools). Toggle with Ctrl+T (see HelpMenu; the ported ink core has no
+ * mouse-click handling, so the header is not clickable); the panel renders
+ * only while the transcript is still empty — the first message's rows take
+ * over. Renders nothing for an empty snapshot.
+ * @param context - the channel's loaded-context snapshot.
+ * @param open - whether the grouped details are shown.
+ * @param onToggle - flips `open`; fired by the Ctrl+T keybinding.
+ */
+export function LoadedContextPanel({ context, open, onToggle, }) {
+    const summary = summarizeLoadedContext(context);
+    if (summary === '')
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [_jsxs(Box, { paddingX: 1, backgroundColor: open ? 'userMessageBackground' : undefined, children: [_jsxs(Text, { bold: open, children: [open ? '▼' : '▶', " ", t('context-loaded'), " \u00B7 ", summary] }), _jsxs(Text, { dimColor: true, children: [" \uFF08Ctrl+T", open ? t('context-panel-collapse') : t('context-panel-expand'), "\uFF09"] })] }), open && (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, children: [context.sections.length > 0 && (_jsx(Group, { title: t('context-panel-sections', { n: context.sections.length }), children: context.sections.map(section => (_jsx(Entry, { entry: section }, section.name))) })), context.files.length > 0 && (_jsx(Group, { title: t('context-panel-files', { n: context.files.length }), children: context.files.map(file => (_jsx(Text, { dimColor: true, children: file.displayPath }, file.displayPath))) })), context.contexts.length > 0 && (_jsx(Group, { title: t('context-panel-runtime', { n: context.contexts.length }), children: context.contexts.map(entry => (_jsx(Entry, { entry: entry }, entry.name))) })), context.skills.length > 0 && (_jsx(Group, { title: t('context-panel-skills', { n: context.skills.length }), children: context.skills.map(skill => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: skill.name }), _jsx(Text, { dimColor: true, wrap: "wrap", children: skill.description })] }, skill.name))) })), context.tools.length > 0 && (_jsx(Group, { title: t('context-panel-tools', { n: context.tools.length }), children: context.tools.map(tool => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: tool.name }), _jsx(Text, { dimColor: true, wrap: "wrap", children: truncateContextText(tool.description, 160) })] }, tool.name))) }))] }))] }));
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * The header splash: one layout, two phases. The **opening** (~3.4s, once)
+ * plays the hand-drawn whale animation (blink → water-spout bloom → tail
+ * wag) and runs the shimmer sweeps; the **settled** header is the same
+ * tree frozen at t=0 — whale on the standard pose, sweep highlights parked
+ * off-screen, clock unsubscribed, zero timers.
+ *
+ * Layout: the 13-row pixel whale beside a text column of matching height —
+ * the `✦ dsh-TUI` wordmark with version, the `DEEPSEEK`/`HARNESS` tagline in
+ * the 5-row block font (brand-blue → ice gradient), the model/effort and
+ * cwd in plain text (no brand-color highlight), the startup tip, and below
+ * the whale the welcome tagline, centered under the art, in ice
+ * blue. Narrow terminals drop the whale and keep the text column.
+ */
+export declare function LogoV2({ model, effort, cwd, skipIntro, }: {
+    model: string;
+    effort?: string | undefined;
+    cwd: string;
+    /** Test seam: mount straight into the settled header (probes skip the intro). */
+    skipIntro?: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=LogoV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoV2.d.ts","sourceRoot":"","sources":["../../../src/components/LogoV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoDzB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,GAAG,EACH,SAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CA+ElB"}

package/lib/types/components/LogoV2.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { t as tr } from '../i18n.js';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { Box, Text, useAnimationFrame, useTerminalSize } from '../ui.js';
+import { getTheme } from '../theme.js';
+import { useTheme } from './design-system/ThemeProvider.js';
+import { parseRGB } from './Spinner/spinnerUtils.js';
+import { renderBigText } from './bigfont.js';
+import { BRAND, FLASH, ICE, PALE, sweep } from './shimmer.js';
+import { STANDARD_FRAME_INDEX, WhaleArt } from './Whale.js';
+import { OPENING_SEQUENCE } from './whaleFrames.js';
+/**
+ * Header badge version, read from the installed package.json so the display
+ * never drifts from the published version. Falls back to a literal when the
+ * package metadata is unreadable (unusual layouts).
+ */
+const VERSION = (() => {
+    try {
+        const pkgPath = join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..', 'package.json');
+        return JSON.parse(readFileSync(pkgPath, 'utf8')).version ?? '0.1.0';
+    }
+    catch {
+        return '0.1.0';
+    }
+})();
+/** Below this width the whale hides and the header goes text-only. */
+const WHALE_MIN_COLUMNS = 64;
+/**
+ * Fixed whale box width: the tail-wag frames reach 4 columns further right
+ * than the standard pose, and a pinned width keeps the text column from
+ * shifting sideways during the opening animation.
+ */
+const FULL_WHALE_WIDTH = 40;
+/**
+ * Leading spaces that center the welcome line under the drawn whale: the
+ * art's bounding box spans sprite columns 3..34 (center 18.5) of the
+ * 40-wide box, and the tagline measure 14
+ * columns — 18.5 − 7 = 11.5 → 12. Centered on the full 40-column box
+ * instead would need 13, which reads one column right of the whale body.
+ */
+const WELCOME_PAD = 12;
+/** `max` → `Max` (effort levels arrive lower-case from the adapter). */
+function capitalize(text) {
+    return text.length === 0 ? text : text[0].toUpperCase() + text.slice(1);
+}
+/**
+ * The header splash: one layout, two phases. The **opening** (~3.4s, once)
+ * plays the hand-drawn whale animation (blink → water-spout bloom → tail
+ * wag) and runs the shimmer sweeps; the **settled** header is the same
+ * tree frozen at t=0 — whale on the standard pose, sweep highlights parked
+ * off-screen, clock unsubscribed, zero timers.
+ *
+ * Layout: the 13-row pixel whale beside a text column of matching height —
+ * the `✦ dsh-TUI` wordmark with version, the `DEEPSEEK`/`HARNESS` tagline in
+ * the 5-row block font (brand-blue → ice gradient), the model/effort and
+ * cwd in plain text (no brand-color highlight), the startup tip, and below
+ * the whale the welcome tagline, centered under the art, in ice
+ * blue. Narrow terminals drop the whale and keep the text column.
+ */
+export function LogoV2({ model, effort, cwd, skipIntro = false, }) {
+    const [step, setStep] = React.useState(skipIntro ? OPENING_SEQUENCE.length : 0);
+    const settled = step >= OPENING_SEQUENCE.length;
+    // Opening clock: drives the shimmer sweep and big-text highlight only
+    // while the intro plays; `null` afterwards unsubscribes so the settled
+    // header never repaints. 60ms frames keep the sweep lively.
+    const [ref, time] = useAnimationFrame(settled ? null : 60);
+    // Frame chain: dwell per OPENING_SEQUENCE entry, then settle for good.
+    React.useEffect(() => {
+        if (settled)
+            return;
+        const timer = setTimeout(() => {
+            setStep(s => s + 1);
+        }, OPENING_SEQUENCE[step].ms);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [step, settled]);
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const { columns } = useTerminalSize();
+    const wordmarkRGB = parseRGB(theme.claude) ?? BRAND;
+    const wordmarkShimmerRGB = parseRGB(theme.claudeShimmer) ?? ICE;
+    const taglineRGB = parseRGB(theme.claudeBlue_FOR_SYSTEM_SPINNER) ?? ICE;
+    const showWhale = columns >= WHALE_MIN_COLUMNS;
+    const frameIndex = settled ? STANDARD_FRAME_INDEX : OPENING_SEQUENCE[step].frame;
+    // Frozen clock for the settled header: t=0 parks every sweep highlight
+    // off-screen, leaving the static gradient behind.
+    const t = settled ? 0 : time;
+    const bigDeepSeek = renderBigText('DEEPSEEK', t, wordmarkRGB, taglineRGB, FLASH, 60);
+    const bigHarness = renderBigText('HARNESS', t, taglineRGB, PALE, FLASH, 60);
+    return (_jsxs(Box, { ref: ref, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "row", gap: 2, width: "100%", alignItems: "center", children: [showWhale && _jsx(WhaleArt, { frameIndex: frameIndex, width: FULL_WHALE_WIDTH }), _jsxs(Box, { flexDirection: "column", flexShrink: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [sweep('✦ dsh-TUI', t, wordmarkRGB, wordmarkShimmerRGB, 60), _jsx(Text, { dimColor: true, children: '  v' + VERSION })] }), bigDeepSeek.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row }, `ds-${index}`))), bigHarness.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row }, `h-${index}`))), _jsxs(Text, { wrap: "truncate-end", children: [model, effort !== undefined && _jsx(Text, { dimColor: true, children: ' · ' + capitalize(effort) + ' effort' })] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: cwd }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: "Tip: " }), "/model", _jsxs(Text, { dimColor: true, children: [" ", tr('logo-tip-model'), " \u00B7 "] }), "/help", _jsxs(Text, { dimColor: true, children: [" ", tr('logo-tip-help'), " \u00B7 "] }), "Tab", _jsxs(Text, { dimColor: true, children: [" ", tr('logo-tip-tab')] })] })] })] }), _jsx(Box, { marginTop: 1, paddingLeft: showWhale ? WELCOME_PAD : 2, children: _jsx(Text, { children: sweep(tr('logo-tagline'), t, taglineRGB, FLASH, 60) }) })] }));
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Markdown renderer ported from Claude Code (the leak's `Markdown.tsx`):
+ * marked lexer + ANSI formatter, tables rendered as flexbox-style bordered
+ * components, async syntax highlighting via cli-highlight. The ANSI strings
+ * render inside raw `Text` (the ported Ink core preserves ANSI in children;
+ * the fork's `Ansi` span parser drops SGR 1 bold).
+ */
+type Props = {
+    children: string;
+    /** When true, render all text content as dim */
+    dimColor?: boolean;
+    /** False for the streaming tail (its content changes every chunk, so a
+     *  cache entry would never hit and would only pollute the token cache). */
+    cacheTokens?: boolean;
+};
+/**
+ * Renders markdown content using a hybrid approach:
+ * - Tables are rendered as bordered flexbox components
+ * - Other content is rendered as ANSI strings via formatToken
+ */
+export declare function Markdown({ children, dimColor, cacheTokens }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=Markdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB;;;;;;GAMG;AAEH,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;+EAC2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AA8DD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAgB,EAAE,WAAkB,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAuDnG"}

package/lib/types/components/Markdown.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { marked } from 'marked';
+import { Box, Text } from '../ui.js';
+import { configureMarked, formatToken, stripPromptXMLTags } from '../cc/markdown.js';
+import { getCliHighlightPromise } from '../cc/cliHighlight.js';
+import { MarkdownTable } from './MarkdownTable.js';
+// Module-level token cache — marked.lexer is the hot cost on remounts.
+// Messages are immutable; same content → same tokens.
+//
+// Bounds: entry count alone was not enough. Token.raw/text values are
+// slices of the lexed input, so each entry pins its entire input string;
+// during streaming the input grows every frame, and the LRU kept 500
+// near-final snapshots ≈ 500 × message size resident (~500MB for a 1MB
+// message). A character budget caps retained bytes; oversized contents
+// skip the cache entirely (they are re-lexed on remount — rare, and
+// cheaper than the retention).
+const TOKEN_CACHE_MAX = 200;
+const TOKEN_CACHE_MAX_CHARS = 200_000;
+const TOKEN_CACHE_MAX_CONTENT = 20_000;
+const tokenCache = new Map();
+let tokenCacheChars = 0;
+// Characters that indicate markdown syntax. If none are present, skip the
+// ~3ms marked.lexer call entirely — render as a single paragraph.
+const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
+function hasMarkdownSyntax(s) {
+    return MD_SYNTAX_RE.test(s.length > 500 ? s.slice(0, 500) : s);
+}
+function cachedLexer(content, cache) {
+    // Fast path: plain text with no markdown syntax → single paragraph token.
+    if (!hasMarkdownSyntax(content)) {
+        return [
+            {
+                type: 'paragraph',
+                raw: content,
+                text: content,
+                tokens: [{ type: 'text', raw: content, text: content }],
+            },
+        ];
+    }
+    if (!cache)
+        return marked.lexer(content);
+    // The content string itself is the key: V8 caches the string hash in the
+    // string header, so Map lookup is hash-free after the first insert, and
+    // unlike sha256 there is no per-call digest allocation or collision risk.
+    const hit = tokenCache.get(content);
+    if (hit) {
+        // Promote to MRU
+        tokenCache.delete(content);
+        tokenCache.set(content, hit);
+        return hit;
+    }
+    const tokens = marked.lexer(content);
+    if (content.length > TOKEN_CACHE_MAX_CONTENT)
+        return tokens;
+    if (tokenCache.size >= TOKEN_CACHE_MAX ||
+        tokenCacheChars + content.length > TOKEN_CACHE_MAX_CHARS) {
+        tokenCache.clear();
+        tokenCacheChars = 0;
+    }
+    tokenCache.set(content, tokens);
+    tokenCacheChars += content.length;
+    return tokens;
+}
+/**
+ * Renders markdown content using a hybrid approach:
+ * - Tables are rendered as bordered flexbox components
+ * - Other content is rendered as ANSI strings via formatToken
+ */
+export function Markdown({ children, dimColor = false, cacheTokens = true }) {
+    const [highlight, setHighlight] = React.useState(null);
+    React.useEffect(() => {
+        let alive = true;
+        void getCliHighlightPromise().then((loaded) => {
+            if (alive)
+                setHighlight(loaded);
+        });
+        return () => {
+            alive = false;
+        };
+    }, []);
+    configureMarked();
+    const elements = React.useMemo(() => {
+        const tokens = cachedLexer(stripPromptXMLTags(children), cacheTokens);
+        const elements = [];
+        let nonTableContent = '';
+        function flushNonTableContent() {
+            if (nonTableContent) {
+                elements.push(_jsx(Text, { dimColor: dimColor, children: nonTableContent.trim() }, elements.length));
+                nonTableContent = '';
+            }
+        }
+        for (const token of tokens) {
+            if (token.type === 'table') {
+                flushNonTableContent();
+                elements.push(_jsx(MarkdownTable, { token: token, highlight: highlight }, elements.length));
+            }
+            else {
+                nonTableContent += formatToken(token, 0, null, null, highlight);
+            }
+        }
+        flushNonTableContent();
+        return elements;
+    }, [children, dimColor, highlight, cacheTokens]);
+    return (_jsx(Box, { flexDirection: "column", gap: 1, children: elements }));
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Tokens } from 'marked';
+import type { CliHighlight } from '../cc/cliHighlight.js';
+type Props = {
+    token: Tokens.Table;
+    highlight: CliHighlight | null;
+    /** Override terminal width (useful for testing) */
+    forceWidth?: number;
+};
+/**
+ * Renders a markdown table with proper column sizing, cell wrapping and box
+ * borders (ported from the leak's `MarkdownTable.tsx`). Falls back to a
+ * vertical key-value format on narrow terminals.
+ */
+export declare function MarkdownTable({ token, highlight, forceWidth, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=MarkdownTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownTable.d.ts","sourceRoot":"","sources":["../../../src/components/MarkdownTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAA;AAO3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAiBzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC,KAAK,CAAA;IACnB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAA;IAC9B,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AA2BD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAmRzB"}