@deepseek-harness-tui/dsh-tui 0.5.0

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

@@ -0,0 +1,15 @@
+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 /
+ * ○ dim / … dim.
+ */
+export declare function StatusIcon({ status, withSpace, }: {
+    /** The status to display; determines both the icon and color. */
+    status: Status;
+    /** Include a trailing space after the icon. Useful when followed by text. */
+    withSpace?: boolean;
+}): React.ReactNode;
+export {};
+//# sourceMappingURL=StatusIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/StatusIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAc9E;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,SAAiB,GAClB,EAAE;IACD,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CAQlB"}

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

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import figures from 'figures';
+import Text from '../../ink/components/Text.js';
+const STATUS_CONFIG = {
+    success: { icon: figures.tick, color: 'success' },
+    error: { icon: figures.cross, color: 'error' },
+    warning: { icon: figures.warning, color: 'warning' },
+    info: { icon: figures.info, color: 'suggestion' },
+    pending: { icon: figures.circle, color: undefined },
+    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 /
+ * ○ dim / … dim.
+ */
+export function StatusIcon({ status, withSpace = false, }) {
+    const config = STATUS_CONFIG[status];
+    return (_jsxs(Text, { color: config.color, children: [config.icon, withSpace ? ' ' : ''] }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare function ThemeProvider({ children, theme, }: {
+    children: React.ReactNode;
+    theme?: string;
+}): React.ReactNode;
+/**
+ * Resolves the active theme name and the runtime setter. Returns
+ * `[themeName, setTheme]` — the first element matches the leak'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

@@ -0,0 +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"}

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { registerCustomThemeResolver, setActiveThemeName } from '../../theme.js';
+import { isThemeAvailable, resolveCustomTheme } from '../../customTheme.js';
+import { readThemePref, writeThemePref } from '../../themePrefs.js';
+import useStdin from '../../ink/hooks/use-stdin.js';
+import { oscColor } from '../../ink/terminal-querier.js';
+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
+ * (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 >
+ * 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.
+ * Detection never blocks boot: a terminal that ignores OSC 11 (or a 400ms
+ * stall) falls back to `dark`. The resolved name is mirrored via
+ * setActiveThemeName() for non-React rendering (markdown inline code).
+ *
+ * The context also exposes setTheme() for the runtime `/theme` picker: it
+ * validates the name, persists the choice to ~/.dsh-cc/theme.json and hot
+ * swaps the palette (and the module-level mirror) immediately.
+ */
+// User themes (~/.dsh-cc/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',
+    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.
+ */
+function envThemeOverride() {
+    const v = process.env.CC_TUI_THEME;
+    return v === undefined || v === '' ? undefined : v;
+}
+/** Detection round-trip is normally ~10ms locally; this only bounds pathological stalls. */
+const DETECT_TIMEOUT_MS = 400;
+/**
+ * sRGB luma (Rec. 601). The threshold biases dark: a light palette on a
+ * dark terminal is far less readable than the reverse, and the dark
+ * palette is the pre-detection status quo.
+ */
+function isLightBackground(r, g, b) {
+    return 0.299 * r + 0.587 * g + 0.114 * b > 140;
+}
+export function ThemeProvider({ children, theme, }) {
+    // Resolution happens once on mount: the forced chain (prop > env >
+    // persisted) or null, which arms OSC 11 detection.
+    const [forced] = useState(() => theme ?? envThemeOverride() ?? readThemePref());
+    const [forcedValid] = useState(() => {
+        if (forced === undefined)
+            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`);
+        return false;
+    });
+    const [active, setActive] = useState(forcedValid ? forced ?? null : null);
+    const { internal_querier, setRawMode, isRawModeSupported } = useStdin();
+    useEffect(() => {
+        if (forcedValid)
+            return;
+        const querier = internal_querier;
+        // 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');
+            return;
+        }
+        let settled = false;
+        const finish = (name, why) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            setRawMode(false);
+            logForDebugging(`theme: ${name} (${why})`);
+            setActive(name);
+        };
+        const timer = setTimeout(() => { finish('dark', 'detection timeout'); }, DETECT_TIMEOUT_MS);
+        setRawMode(true);
+        void Promise.all([querier.send(oscColor(11)), querier.flush()]).then(([r]) => {
+            const color = r ? parseOscColor(r.data) : null;
+            if (color === null || color.type !== 'rgb') {
+                finish('dark', 'no OSC 11 reply');
+            }
+            else {
+                finish(isLightBackground(color.r, color.g, color.b) ? 'light' : 'dark', `OSC 11 bg rgb(${color.r},${color.g},${color.b})`);
+            }
+        });
+    }, []);
+    /**
+     * 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.
+     */
+    const setTheme = React.useCallback((name) => {
+        if (!isThemeAvailable(name)) {
+            console.warn(`[dsh-tui] theme "${name}" not found`);
+            return false;
+        }
+        if (!writeThemePref(name)) {
+            console.warn('[dsh-tui] failed to write ~/.dsh-cc/theme.json');
+            return false;
+        }
+        setActive(name);
+        return true;
+    }, []);
+    const value = React.useMemo(() => ({ theme: active ?? 'dark', setTheme }), [active, setTheme]);
+    useEffect(() => {
+        if (active !== null)
+            setActiveThemeName(active);
+    }, [active]);
+    if (active === null)
+        return null;
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+/**
+ * Resolves the active theme name and the runtime setter. Returns
+ * `[themeName, setTheme]` — the first element matches the leak's shape.
+ */
+export function useTheme() {
+    const { theme, setTheme } = useContext(ThemeContext);
+    return [theme, setTheme];
+}

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

@@ -0,0 +1,37 @@
+import React, { type PropsWithChildren, type Ref } from 'react';
+import type { DOMElement } from '../../ink/dom.js';
+import type { ClickEvent } from '../../ink/events/click-event.js';
+import type { FocusEvent } from '../../ink/events/focus-event.js';
+import type { KeyboardEvent } from '../../ink/events/keyboard-event.js';
+import type { Color, Styles } from '../../ink/styles.js';
+import { type Theme } from '../../theme.js';
+type ThemedColorProps = {
+    readonly borderColor?: keyof Theme | Color;
+    readonly borderTopColor?: keyof Theme | Color;
+    readonly borderBottomColor?: keyof Theme | Color;
+    readonly borderLeftColor?: keyof Theme | Color;
+    readonly borderRightColor?: keyof Theme | Color;
+    readonly backgroundColor?: keyof Theme | Color;
+};
+type BaseStylesWithoutColors = Omit<Styles, 'textWrap' | 'borderColor' | 'borderTopColor' | 'borderBottomColor' | 'borderLeftColor' | 'borderRightColor' | 'backgroundColor'>;
+export type Props = BaseStylesWithoutColors & ThemedColorProps & {
+    ref?: Ref<DOMElement>;
+    tabIndex?: number;
+    autoFocus?: boolean;
+    onClick?: (event: ClickEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onFocusCapture?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onBlurCapture?: (event: FocusEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyDownCapture?: (event: KeyboardEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+/**
+ * Theme-aware Box component that resolves theme color keys to raw colors
+ * (ported from the leak's design-system).
+ */
+declare function ThemedBox({ borderColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, backgroundColor, ...rest }: PropsWithChildren<Props>): React.ReactNode;
+export default ThemedBox;
+//# sourceMappingURL=ThemedBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedBox.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAIrD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAC7C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAChD,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAC9C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAC/C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;CAC/C,CAAA;AAGD,KAAK,uBAAuB,GAAG,IAAI,CACjC,MAAM,EACJ,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,uBAAuB,GACzC,gBAAgB,GAAG;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC1C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACjD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAmBH;;;GAGG;AACH,iBAAS,SAAS,CAAC,EACjB,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CAc5C;AACD,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../../ink/components/Box.js';
+import { getTheme } from '../../theme.js';
+import { useTheme } from './ThemeProvider.js';
+/** Resolves a color value that may be a theme key to a raw Color. */
+function resolveColor(color, theme) {
+    if (!color)
+        return undefined;
+    if (color.startsWith('rgb(') ||
+        color.startsWith('#') ||
+        color.startsWith('ansi256(') ||
+        color.startsWith('ansi:')) {
+        return color;
+    }
+    return theme[color];
+}
+/**
+ * Theme-aware Box component that resolves theme color keys to raw colors
+ * (ported from the leak's design-system).
+ */
+function ThemedBox({ borderColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, backgroundColor, ...rest }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    return (_jsx(Box, { ...rest, borderColor: resolveColor(borderColor, theme), borderTopColor: resolveColor(borderTopColor, theme), borderBottomColor: resolveColor(borderBottomColor, theme), borderLeftColor: resolveColor(borderLeftColor, theme), borderRightColor: resolveColor(borderRightColor, theme), backgroundColor: resolveColor(backgroundColor, theme) }));
+}
+export default ThemedBox;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { Color, Styles } from '../../ink/styles.js';
+import { type Theme } from '../../theme.js';
+/**
+ * Colors uncolored ThemedText in the subtree. Precedence: explicit `color` >
+ * this > dimColor (ported from the leak's design-system, where message rows
+ * set it to `text` on hover).
+ */
+export declare const TextHoverColorContext: React.Context<keyof Theme | undefined>;
+export type Props = {
+    /**
+     * Change text color. Accepts a theme key or raw color value.
+     */
+    readonly color?: keyof Theme | Color;
+    /**
+     * Same as `color`, but for background. Must be a theme key.
+     */
+    readonly backgroundColor?: keyof Theme;
+    /**
+     * Dim the color using the theme's inactive color.
+     * This is compatible with bold (unlike ANSI dim).
+     */
+    readonly dimColor?: boolean;
+    /**
+     * Make the text bold.
+     */
+    readonly bold?: boolean;
+    /**
+     * Make the text italic.
+     */
+    readonly italic?: boolean;
+    /**
+     * Make the text underlined.
+     */
+    readonly underline?: boolean;
+    /**
+     * Make the text crossed with a line.
+     */
+    readonly strikethrough?: boolean;
+    /**
+     * Inverse background and foreground colors.
+     */
+    readonly inverse?: boolean;
+    /**
+     * This property tells Ink to wrap or truncate text if its width is larger than container.
+     */
+    readonly wrap?: Styles['textWrap'];
+    readonly children?: React.ReactNode;
+};
+/**
+ * Theme-aware Text component that resolves theme color keys to raw colors
+ * (ported from the leak's design-system). This is what lets every ported CC
+ * component use `color="subtle"`-style theme keys unchanged.
+ */
+export default function ThemedText({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.ReactNode;
+//# sourceMappingURL=ThemedText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGrD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wCAEtB,CAAA;AAqBZ,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAEpC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAA;IAEtC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;IAElC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,IAAY,EACZ,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,OAAe,EACf,IAAa,EACb,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA8BzB"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import Text from '../../ink/components/Text.js';
+import { getTheme } from '../../theme.js';
+import { useTheme } from './ThemeProvider.js';
+/**
+ * Colors uncolored ThemedText in the subtree. Precedence: explicit `color` >
+ * this > dimColor (ported from the leak's design-system, where message rows
+ * set it to `text` on hover).
+ */
+export const TextHoverColorContext = React.createContext(undefined);
+/** Resolves a color value that may be a theme key to a raw Color. */
+function resolveColor(color, theme) {
+    if (!color)
+        return undefined;
+    // Check if it's a raw color (starts with rgb(, #, ansi256(, or ansi:)
+    if (color.startsWith('rgb(') ||
+        color.startsWith('#') ||
+        color.startsWith('ansi256(') ||
+        color.startsWith('ansi:')) {
+        return color;
+    }
+    // It's a theme key - resolve it
+    return theme[color];
+}
+/**
+ * Theme-aware Text component that resolves theme color keys to raw colors
+ * (ported from the leak's design-system). This is what lets every ported CC
+ * component use `color="subtle"`-style theme keys unchanged.
+ */
+export default function ThemedText({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', children, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const hoverColor = React.useContext(TextHoverColorContext);
+    // Resolve theme keys to raw colors
+    const resolvedColor = !color && hoverColor
+        ? theme[hoverColor]
+        : dimColor
+            ? theme.inactive
+            : resolveColor(color, theme);
+    const resolvedBackgroundColor = backgroundColor
+        ? theme[backgroundColor]
+        : undefined;
+    return (_jsx(Text, { color: resolvedColor, backgroundColor: resolvedBackgroundColor, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, inverse: inverse, wrap: wrap, children: children }));
+}

package/lib/types/components/messages/AssistantTextMessage.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type Props = {
+    text: string;
+    /** Adds the top margin between messages (CC: addMargin). */
+    addMargin: boolean;
+    /** Message-selection mode highlight. */
+    isSelected?: boolean;
+    /** Row expanded on its own (persistent hover-grey background, CC). */
+    isExpanded?: boolean;
+    onClick?(): void;
+};
+/**
+ * Assistant text message:  bullet + markdown body (ported from the
+ * leak's  default branch).
+ */
+export declare function AssistantTextMessage({ text, addMargin, isSelected, isExpanded, onClick, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=AssistantTextMessage.d.ts.map

package/lib/types/components/messages/AssistantTextMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantTextMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA2BzB"}

package/lib/types/components/messages/AssistantTextMessage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, NoSelect, Text } from '../../ui.js';
+import { BLACK_CIRCLE } from '../../cc/figures.js';
+import { Markdown } from '../Markdown.js';
+/**
+ * Assistant text message:  bullet + markdown body (ported from the
+ * leak's  default branch).
+ */
+export function AssistantTextMessage({ text, addMargin, isSelected = false, isExpanded = false, onClick, }) {
+    return (_jsx(Box, { alignItems: "flex-start", flexDirection: "row", justifyContent: "space-between", marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected
+            ? 'messageActionsBackground'
+            : isExpanded
+                ? 'userMessageBackgroundHover'
+                : undefined, onClick: onClick, children: _jsxs(Box, { flexDirection: "row", children: [_jsx(NoSelect, { fromLeftEdge: true, minWidth: 2, children: _jsx(Text, { color: isSelected ? 'suggestion' : 'text', children: BLACK_CIRCLE }) }), _jsx(Box, { flexDirection: "column", children: _jsx(Markdown, { children: text }) })] }) }));
+}

package/lib/types/components/messages/AssistantThinkingMessage.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type Props = {
+    thinking: string;
+    /** Adds the top margin between messages (CC: addMargin). */
+    addMargin: boolean;
+    /** True when Ctrl+O transcript/verbose mode is on — show the full text. */
+    verbose: boolean;
+    /** Thinking wall-clock duration once the reasoning block settled (ms). */
+    durationMs?: number;
+    /** Message-selection mode highlight. */
+    isSelected?: boolean;
+    onClick?(): void;
+};
+/**
+ * Thinking block: folded `∴ Thinking (ctrl+o to expand)`, expanded shows the
+ * full reasoning text indented under `∴ Thinking…` (ported from the leak's
+ * `messages/AssistantThinkingMessage.tsx`). When the channel records the
+ * reasoning duration, the label carries it (`∴ Thinking · 12s …`) — dsh-tui's
+ * take on making thinking time visible in the transcript.
+ */
+export declare function AssistantThinkingMessage({ thinking, addMargin, verbose, durationMs, isSelected, onClick, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=AssistantThinkingMessage.d.ts.map

package/lib/types/components/messages/AssistantThinkingMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantThinkingMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantThinkingMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,OAAO,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAU,EACV,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA0CzB"}

package/lib/types/components/messages/AssistantThinkingMessage.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
+import { Markdown } from '../Markdown.js';
+import { formatDuration } from '../../cc/format.js';
+/**
+ * Thinking block: folded `∴ Thinking (ctrl+o to expand)`, expanded shows the
+ * full reasoning text indented under `∴ Thinking…` (ported from the leak's
+ * `messages/AssistantThinkingMessage.tsx`). When the channel records the
+ * reasoning duration, the label carries it (`∴ Thinking · 12s …`) — dsh-tui's
+ * take on making thinking time visible in the transcript.
+ */
+export function AssistantThinkingMessage({ thinking, addMargin, verbose, durationMs, isSelected = false, onClick, }) {
+    if (!thinking)
+        return null;
+    const duration = durationMs !== undefined && durationMs >= 1000
+        ? ` · ${formatDuration(durationMs)}`
+        : '';
+    if (!verbose) {
+        return (_jsx(Box, { marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: _jsxs(Text, { dimColor: true, italic: true, children: ["\u2234 Thinking", duration, ' ', _jsx(Text, { dimColor: true, children: _jsx(KeyboardShortcutHint, { shortcut: "ctrl+o", action: "expand", parens: true }) })] }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [_jsxs(Text, { dimColor: true, italic: true, children: ["\u2234 Thinking", duration, "\u2026"] }), _jsx(Box, { paddingLeft: 2, children: _jsx(Markdown, { dimColor: true, children: thinking }) })] }));
+}

package/lib/types/components/messages/AssistantToolUseMessage.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ToolRow } from '../../channel.js';
+type Props = {
+    tool: ToolRow;
+    /** Adds the top margin between messages (CC: addMargin). */
+    addMargin: boolean;
+    /** Ctrl+O verbose: show full args/result instead of previews. */
+    verbose: boolean;
+    /** Message-selection mode highlight. */
+    isSelected?: boolean;
+    /** Row expanded on its own (persistent hover-grey background, CC). */
+    isExpanded?: boolean;
+};
+/**
+ * Tool-call card: `● Edit /path` header with a blinking status dot, then the
+ * structured body under a `  ⎿  ` gutter — diff hunks in red/green, terminal
+ * output, read content — instead of the raw result dump (ported from the
+ * leak's `AssistantToolUseMessage.tsx` + the dsh-tools presentation views the
+ * channel captures per call).
+ */
+export declare function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected, isExpanded, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=AssistantToolUseMessage.d.ts.map

package/lib/types/components/messages/AssistantToolUseMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantToolUseMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantToolUseMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAA8C,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAI3F,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAqMD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAkB,GACnB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAkGzB"}