@deepseek-harness-tui/dsh-tui 0.9.3 → 0.10.0-beta.2

package/lib/types/components/Tooltip.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import stripAnsi from 'strip-ansi';
+import { Box, Text, useTerminalSize } from '../ui.js';
+import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { getGraphemeSegmenter } from '../utils/intl.js';
+/**
+ * Tooltip hover system — the terminal equivalent of the HTML `title`
+ * attribute. Attach {@link useTooltip} props to any Box whose visible text
+ * may be truncated (tool-call header paths, wrapped prompts, status-line
+ * fields); after a ~600ms dwell the full content pops up in a floating card
+ * anchored at the pointer, and disappears the moment the pointer leaves.
+ *
+ * Hover events only exist in fullscreen (alternate screen + mouse
+ * tracking); inline mode never fires the handlers, so the store can only
+ * be written from a live fullscreen tree.
+ */
+/** Default dwell before the tooltip appears (GUI `title` convention). */
+const DEFAULT_TOOLTIP_DELAY_MS = 600;
+// Module-level store (the `src/ink/instances.ts` single-instance pattern):
+// writers are the hover handlers, the single reader is TooltipLayer.
+let state = null;
+let invalidationGeneration = 0;
+const listeners = new Set();
+function notify() {
+    for (const listener of listeners)
+        listener();
+}
+/** Subscribe to tooltip show/hide; returns an unsubscribe function. */
+export function subscribeTooltip(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Stable snapshot for useSyncExternalStore (identity kept until changed). */
+export function getTooltipSnapshot() {
+    return state;
+}
+function showTooltip(owner, col, row, content) {
+    state = { owner, anchorCol: col, anchorRow: row, content };
+    notify();
+}
+function hideTooltip(owner) {
+    if (state !== null && state.owner === owner) {
+        state = null;
+        notify();
+    }
+}
+/** Hide shown content and invalidate every pending dwell timer. */
+export function clearTooltip() {
+    invalidationGeneration++;
+    if (state !== null) {
+        state = null;
+        notify();
+    }
+}
+/**
+ * Hover props that pop a tooltip with the full content after a dwell.
+ *
+ * The pointer position (screen col/row) is taken from the PointerEvent the
+ * renderer hands to `onMouseEnter` — the runtime always passes one even
+ * though the prop type is `() => void`, which is why the handler's parameter
+ * is optional (a `() => void` prop accepts a function with only optional
+ * parameters).
+ */
+export function useTooltip(content, opts) {
+    const ownerRef = React.useRef(null);
+    if (ownerRef.current === null)
+        ownerRef.current = { timer: null };
+    const owner = ownerRef.current;
+    // Resolve function content at show time so callers can pass getters that
+    // read live channel state without re-binding the handlers.
+    const contentRef = React.useRef(content);
+    contentRef.current = content;
+    const delayMs = opts?.delayMs ?? DEFAULT_TOOLTIP_DELAY_MS;
+    React.useEffect(() => () => {
+        // Unmount clears our pending timer and our tooltip — a screen swap must
+        // not leave a ghost anchored to geometry that no longer exists.
+        if (owner.timer !== null)
+            clearTimeout(owner.timer);
+        hideTooltip(owner);
+    }, [owner]);
+    return React.useMemo(() => ({
+        onMouseEnter: (event) => {
+            const col = event?.col ?? 0;
+            const row = event?.row ?? 0;
+            if (owner.timer !== null)
+                clearTimeout(owner.timer);
+            const generationAtEnter = invalidationGeneration;
+            owner.timer = setTimeout(() => {
+                owner.timer = null;
+                if (generationAtEnter !== invalidationGeneration)
+                    return;
+                const resolved = typeof contentRef.current === 'function'
+                    ? contentRef.current()
+                    : contentRef.current;
+                if (resolved === '')
+                    return;
+                showTooltip(owner, col, row, resolved);
+            }, delayMs);
+        },
+        onMouseLeave: () => {
+            if (owner.timer !== null) {
+                clearTimeout(owner.timer);
+                owner.timer = null;
+            }
+            hideTooltip(owner);
+        },
+    }), [owner, delayMs]);
+}
+/**
+ * Convenience wrapper for list rows built from data (a component boundary
+ * makes the hook call legal per item). Renders a plain Box carrying the
+ * hover props around `children`.
+ */
+export function TooltipTarget({ content, children, }) {
+    const hover = useTooltip(content);
+    return _jsx(Box, { ...hover, children: children });
+}
+/**
+ * The singleton floating layer: subscribes to the tooltip store and renders
+ * the rounded card above the anchor row (below it when there is no room),
+ * horizontally clamped inside the terminal. Mount once, LAST in the tree so
+ * it paints over everything else. Terminal resize hides the tooltip — its
+ * anchor is screen geometry that just went stale.
+ */
+export function TooltipLayer({ invalidationKey, subscribeInvalidation, } = {}) {
+    const { columns, rows } = useTerminalSize();
+    const terminalFocused = useTerminalFocus();
+    const tooltip = React.useSyncExternalStore(subscribeTooltip, getTooltipSnapshot);
+    // Remounts and modal/screen transitions invalidate shown AND pending tips.
+    React.useEffect(() => {
+        clearTooltip();
+    }, [invalidationKey]);
+    React.useEffect(() => {
+        if (!terminalFocused)
+            clearTooltip();
+    }, [terminalFocused]);
+    React.useEffect(() => {
+        if (subscribeInvalidation === undefined)
+            return;
+        return subscribeInvalidation(clearTooltip);
+    }, [subscribeInvalidation]);
+    const prevSize = React.useRef({ columns, rows });
+    React.useEffect(() => {
+        if (prevSize.current.columns !== columns || prevSize.current.rows !== rows) {
+            prevSize.current = { columns, rows };
+            clearTooltip();
+        }
+    }, [columns, rows]);
+    if (tooltip === null)
+        return null;
+    // A bordered card needs at least one content cell plus two border cells.
+    // Below that, hiding is safer than creating geometry wider/taller than the
+    // terminal (Yoga would clip unpredictably on 1–2 column/row resize states).
+    if (columns < 3 || rows < 3)
+        return null;
+    const maxWidth = Math.max(3, columns - 4);
+    // Grapheme-aware wrap (parity with PromptInput's wrapToWidth): code-point
+    // iteration splits ZWJ emoji and combining sequences across rows, leaving
+    // broken halves at the row edges. Newlines are honoured like wrapWidth.
+    let lines = wrapTooltipContent(tooltip.content, maxWidth - 2);
+    // A tooltip taller than the terminal is useless; keep the head.
+    const maxLines = Math.max(1, rows - 2);
+    if (lines.length > maxLines)
+        lines = lines.slice(0, maxLines);
+    const innerWidth = Math.min(maxWidth - 2, Math.max(1, ...lines.map(stringWidth)));
+    const width = innerWidth + 2;
+    const height = lines.length + 2;
+    // Prefer resting on the row ABOVE the anchor; when there is no room
+    // (anchor at the top of the screen), drop below it, clamped on-screen.
+    const topAbove = tooltip.anchorRow - height;
+    const top = topAbove >= 0
+        ? topAbove
+        : Math.max(0, Math.min(tooltip.anchorRow + 1, rows - height));
+    const left = Math.max(0, Math.min(tooltip.anchorCol, columns - width));
+    return (_jsx(Box, { position: "absolute", left: left, top: top, width: width, height: height, flexDirection: "column", flexShrink: 0, borderStyle: "round", borderColor: "permission", backgroundColor: "toolCardBackground", children: lines.map((line, index) => (_jsx(Text, { wrap: "truncate-end", children: line === '' ? ' ' : line }, index))) }));
+}
+/**
+ * Wrap tooltip content to display width, breaking only BETWEEN grapheme
+ * clusters (ZWJ emoji, combining sequences and CJK wide cells stay whole).
+ * Newlines in the input are honoured. Mirrors PromptInput.wrapToWidth's
+ * break rule so the tooltip shows exactly the text the input would wrap.
+ */
+function wrapTooltipContent(text, width) {
+    const rows = [];
+    if (width <= 0)
+        return rows;
+    // Tooltip content is display-only: remove ANSI/C0 controls before grapheme
+    // segmentation so a CSI sequence cannot be split and counted as visible
+    // columns. Newlines remain structural; tabs become deterministic spaces.
+    text = stripAnsi(text)
+        .replace(/\t/gu, '        ')
+        .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/gu, '');
+    const segmenter = getGraphemeSegmenter();
+    for (const line of text.split('\n')) {
+        if (line === '') {
+            rows.push('');
+            continue;
+        }
+        let current = '';
+        let used = 0;
+        for (const { segment } of segmenter.segment(line)) {
+            const w = stringWidth(segment);
+            if (used + w > width && current !== '') {
+                rows.push(current);
+                current = segment;
+                used = w;
+            }
+            else {
+                current += segment;
+                used += w;
+            }
+        }
+        rows.push(current);
+    }
+    return rows;
+}

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;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,CA+EzF"}
+{"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,CAkFzF"}

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

@@ -45,7 +45,7 @@ export function ApprovalPanel({ approval, onDecide }) {
         }
     }, { isActive: true });
     const optionLabels = [t('approval-yes'), t('approval-no')];
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, paddingRight: 2, width: "100%", children: [_jsx(Divider, { color: "permission", title: t('approval-waiting', { tool: approval.toolName }), padding: 4 }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [approval.command !== undefined && (_jsx(Box, { flexDirection: "column", paddingX: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: approval.command }) })), approval.reason !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: approval.reason })), _jsx(Text, { dimColor: true, children: t('approval-proceed') })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: optionLabels.map((label, index) => {
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, paddingRight: 2, width: "100%", children: [_jsx(Divider, { color: "permission", title: t('approval-waiting', { tool: approval.toolName }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [approval.external === true && (_jsxs(Text, { color: "warning", wrap: "wrap", children: ["[external] ", t('approval-external-hint')] })), approval.command !== undefined && (_jsx(Box, { flexDirection: "column", paddingX: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: approval.command }) })), approval.reason !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: approval.reason })), _jsx(Text, { dimColor: true, children: t('approval-proceed') })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: optionLabels.map((label, index) => {
                     const focused = index === focusIndex;
                     const hovered = index === hoverIndex;
                     return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, onClick: () => onDecide(OUTCOMES[index]), onMouseEnter: () => setHoverIndex(index), onMouseLeave: () => setHoverIndex(current => (current === index ? -1 : current)), backgroundColor: hovered && !focused ? 'userMessageBackgroundHover' : undefined, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: focused, children: focused ? POINTER : ' ' }) }), _jsxs(Text, { bold: focused, color: focused ? 'claude' : undefined, wrap: "wrap", children: [index + 1, ". ", label] })] }, label));

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

@@ -3,7 +3,7 @@ import type { Theme } from '../../theme.js';
 type DividerProps = {
     /**
      * Width of the divider in characters.
-     * Defaults to terminal width.
+     * Defaults to the available layout width.
      */
     width?: number;
     /**
@@ -31,6 +31,19 @@ type DividerProps = {
  * A horizontal divider line, optionally with a title in the middle
  * (in the Claude Code visual language).
  *
+ * The rule fills the width Yoga actually grants it: the Box is measured
+ * after layout (SearchBox pattern — a resize re-layouts without any prop
+ * change, so measure on every commit) and the terminal column count only
+ * seeds the first frame. A full-terminal-width rule nested in a narrower
+ * container (e.g., the transcript beside the 2-column timeline rail)
+ * would otherwise wrap onto a second row.
+ *
+ * Because the rendered rule width feeds back into the width Yoga grants
+ * the Box, the measurement negotiation is bounded per terminal-width
+ * generation (MAX_APPLIED_MEASUREMENTS below): a non-converging layout
+ * degrades to a frozen, truncated rule instead of tripping React's max
+ * update depth (error #185, a hard process crash).
+ *
  * @example
  * // ─────────── Title ───────────
  * <Divider title="Title" />

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,GACN,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAwBhC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAOhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AASD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,GACN,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAqEhC"}

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

@@ -1,24 +1,102 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import Box from '../../ink/components/Box.js';
 import Text from '../../ink/components/Text.js';
+import measureElement from '../../ink/measure-element.js';
 import { stringWidth } from '../../ink/stringWidth.js';
 import { useTerminalSize } from '../../ink/hooks/use-terminal-size.js';
+// Upper bound on distinct measurements applied per terminal-width
+// generation. Converging layouts apply one or two; a non-converging
+// context (content-sized Box, or a sibling negotiating space the same
+// way) would keep changing the measured width once per commit forever,
+// so freeze well before the reconciler's 50-nested-update limit.
+const MAX_APPLIED_MEASUREMENTS = 8;
 /**
  * A horizontal divider line, optionally with a title in the middle
  * (in the Claude Code visual language).
  *
+ * The rule fills the width Yoga actually grants it: the Box is measured
+ * after layout (SearchBox pattern — a resize re-layouts without any prop
+ * change, so measure on every commit) and the terminal column count only
+ * seeds the first frame. A full-terminal-width rule nested in a narrower
+ * container (e.g., the transcript beside the 2-column timeline rail)
+ * would otherwise wrap onto a second row.
+ *
+ * Because the rendered rule width feeds back into the width Yoga grants
+ * the Box, the measurement negotiation is bounded per terminal-width
+ * generation (MAX_APPLIED_MEASUREMENTS below): a non-converging layout
+ * degrades to a frozen, truncated rule instead of tripping React's max
+ * update depth (error #185, a hard process crash).
+ *
  * @example
  * // ─────────── Title ───────────
  * <Divider title="Title" />
  */
 export function Divider({ width, color, char = '─', padding = 0, title, }) {
     const { columns } = useTerminalSize();
-    const lineWidth = Math.max(0, (width ?? columns) - padding);
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const boxRef = useRef(null);
+    // Measurement feedback guard: the rule width rendered from
+    // `measuredWidth` feeds back into the width Yoga grants the Box, so
+    // the measured value can drift or ping-pong without ever converging —
+    // one setState per commit then trips React's max update depth (error
+    // #185) and kills the process. Apply at most MAX_APPLIED_MEASUREMENTS
+    // distinct widths per terminal-width generation and freeze once a
+    // value repeats (A→B→A). truncate-end keeps an over-wide frozen rule
+    // on one row, so freezing degrades gracefully; a resize (columns
+    // change) reopens the negotiation.
+    const negotiation = useRef({ columns, applied: [], frozen: false });
+    useLayoutEffect(() => {
+        const node = boxRef.current;
+        if (!node)
+            return;
+        const state = negotiation.current;
+        if (state.columns !== columns) {
+            state.columns = columns;
+            state.applied = [];
+            state.frozen = false;
+            // The current Yoga layout was rendered from the previous terminal
+            // width. Clear it and let the next render seed from the new columns;
+            // measuring this stale pass would keep a grown terminal permanently
+            // pinned to its old narrow width.
+            setMeasuredWidth(null);
+            return;
+        }
+        if (state.frozen)
+            return;
+        const w = measureElement(node).width;
+        if (w <= 0)
+            return;
+        const applied = state.applied;
+        if (w === applied[applied.length - 1])
+            return;
+        if (applied.includes(w) || applied.length >= MAX_APPLIED_MEASUREMENTS) {
+            state.frozen = true;
+            return;
+        }
+        applied.push(w);
+        setMeasuredWidth(w);
+    });
+    const available = measuredWidth ?? columns;
+    const lineWidth = Math.max(0, Math.min(available, width ?? columns) - padding);
     const titleWidth = title ? stringWidth(title) : 0;
-    if (title && titleWidth < lineWidth) {
-        const lineLength = lineWidth - titleWidth;
-        const leftLength = Math.floor(lineLength / 2);
-        const rightLength = Math.ceil(lineLength / 2);
-        return (_jsxs(Text, { dimColor: !color, color: color, children: [char.repeat(leftLength), title, char.repeat(rightLength)] }));
+    let text;
+    if (title) {
+        if (titleWidth < lineWidth) {
+            const lineLength = lineWidth - titleWidth;
+            const leftLength = Math.floor(lineLength / 2);
+            const rightLength = Math.ceil(lineLength / 2);
+            text = char.repeat(leftLength) + title + char.repeat(rightLength);
+        }
+        else {
+            // Title wider than the line (long turn-error notices on narrow
+            // windows): keep the message — truncate-end clips it to the
+            // available width instead of dropping it for a bare rule.
+            text = title;
+        }
+    }
+    else {
+        text = char.repeat(lineWidth);
     }
-    return (_jsx(Text, { dimColor: !color, color: color, children: char.repeat(lineWidth) }));
+    return (_jsx(Box, { ref: boxRef, children: _jsx(Text, { dimColor: !color, color: color, wrap: "truncate-end", children: text }) }));
 }

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

@@ -1,14 +1,17 @@
 import React from 'react';
+import type { TuiThemeHost } from '../../dsh-adapter/themes.js';
 /**
  * DSH_TUI_THEME skips terminal detection (tests, debugging). Accepts a
- * built-in name (auto|light|dark|dark-ansi) or a user theme name; invalid
+ * built-in, static JSON, or runtime plugin theme name; invalid
  * values are warned and ignored by the caller, falling back to detection.
  * Exported for /reload, which must respect the env override's precedence.
  */
 export declare function envThemeOverride(): string | undefined;
-export declare function ThemeProvider({ children, theme, }: {
+export declare function ThemeProvider({ children, theme, themeHost, }: {
     children: React.ReactNode;
     theme?: string;
+    /** Optional runtime theme host; absent in headless/static embeds. */
+    themeHost?: TuiThemeHost;
 }): React.ReactNode;
 /**
  * Resolves the active theme name and the runtime setter. Returns

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;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,GAAG,SAAS,CAGrD;AAcD,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"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAU7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAgE/D;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,GAAG,SAAS,CAGrD;AAcD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB,GAAG,KAAK,CAAC,SAAS,CA2KlB;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,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { registerCustomThemeResolver, setActiveThemeName, setAutoThemeBase, getAutoThemeBase, AUTO_THEME_NAME, } from '../../theme.js';
-import { isThemeAvailable, resolveCustomTheme } from '../../customTheme.js';
+import { isThemeAvailable, registerCustomThemeResolver, setActiveThemeName, setAutoThemeBase, getAutoThemeBase, AUTO_THEME_NAME, } from '../../theme.js';
+import { resolveCustomTheme } from '../../customTheme.js';
+import { useRuntimeThemeSnapshot } from '../../hooks/useRuntimeThemeSnapshot.js';
 import { readThemePref, writeThemePref } from '../../themePrefs.js';
 import useStdin from '../../ink/hooks/use-stdin.js';
 import { oscColor } from '../../ink/terminal-querier.js';
@@ -13,8 +14,8 @@ import { logForDebugging } from '../../utils/debug.js';
  * (~/.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 >
- * DSH_TUI_THEME (built-in or user theme name) > persisted `/theme` choice >
- * OSC 11 detection. An invalid forced name is warned and skipped, so
+ * DSH_TUI_THEME (built-in, static, or runtime plugin 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
@@ -31,12 +32,13 @@ import { logForDebugging } from '../../utils/debug.js';
  * system light/dark mode.
  *
  * The context also exposes setTheme() for the runtime `/theme` picker: it
- * validates the name, persists the choice to ~/.dsh-tui/theme.json and hot
- * swaps the palette (and the module-level mirror) immediately.
+ * validates static or plugin names, persists the choice to ~/.dsh-tui/theme.json
+ * and hot swaps the palette (and the module-level mirror) immediately. A
+ * disappearing plugin theme falls back safely without erasing the request.
  */
-// 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.
+// Static user themes (~/.dsh-tui/themes/<name>.json) resolve through this
+// registry; the optional runtime host resolver is installed by the Cordis
+// service. Together they serve every themed component and non-React rendering.
 registerCustomThemeResolver(resolveCustomTheme);
 const ThemeContext = createContext({
     theme: 'dark',
@@ -45,7 +47,7 @@ const ThemeContext = createContext({
 });
 /**
  * DSH_TUI_THEME skips terminal detection (tests, debugging). Accepts a
- * built-in name (auto|light|dark|dark-ansi) or a user theme name; invalid
+ * built-in, static JSON, or runtime plugin theme name; invalid
  * values are warned and ignored by the caller, falling back to detection.
  * Exported for /reload, which must respect the env override's precedence.
  */
@@ -63,7 +65,8 @@ const DETECT_TIMEOUT_MS = 400;
 function isLightBackground(r, g, b) {
     return 0.299 * r + 0.587 * g + 0.114 * b > 140;
 }
-export function ThemeProvider({ children, theme, }) {
+export function ThemeProvider({ children, theme, themeHost, }) {
+    const runtimeThemeSnapshot = useRuntimeThemeSnapshot(themeHost);
     // Resolution happens once on mount: the forced chain (prop > env >
     // persisted) or null, which arms OSC 11 detection.
     const [forced] = useState(() => theme ?? envThemeOverride() ?? readThemePref());
@@ -72,12 +75,16 @@ export function ThemeProvider({ children, theme, }) {
             return false;
         if (isThemeAvailable(forced))
             return true;
-        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`);
+        console.warn(`[dsh-tui] theme "${forced}" not found (built-ins: auto, light, dark, dark-ansi; static ~/.dsh-tui/themes/*.json; runtime plugin themes); falling back to auto-detection`);
         return false;
     });
     // `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);
+    // Keep the user's requested name independent from the rendered fallback. If
+    // a plugin theme disappears, this lets a later registration restore it while
+    // the persisted preference remains untouched.
+    const requestedThemeRef = React.useRef(forced);
     const { internal_querier, isRawModeSupported } = useStdin();
     /**
      * The palette `auto` resolves to, as React state so a flip re-renders
@@ -97,7 +104,11 @@ export function ThemeProvider({ children, theme, }) {
         // directly; `auto` records the base and activates as `auto`.
         const settle = (name, why) => {
             logForDebugging(`theme: ${name} (${why})`);
-            if (forced === AUTO_THEME_NAME) {
+            const requested = requestedThemeRef.current;
+            if (forced !== AUTO_THEME_NAME && requested !== undefined && isThemeAvailable(requested)) {
+                setActive(requested);
+            }
+            else if (forced === AUTO_THEME_NAME) {
                 applyAutoBase(name);
                 setActive(AUTO_THEME_NAME);
             }
@@ -173,16 +184,41 @@ export function ThemeProvider({ children, theme, }) {
             console.warn('[dsh-tui] failed to write ~/.dsh-tui/theme.json');
             return false;
         }
+        requestedThemeRef.current = name;
         setActive(name);
         if (name === AUTO_THEME_NAME)
             redetectAutoBase();
         return true;
     }, [redetectAutoBase]);
-    const value = React.useMemo(() => ({ theme: active ?? 'dark', autoBase, setTheme }), [active, autoBase, setTheme]);
+    useEffect(() => {
+        if (active !== null && !isThemeAvailable(active)) {
+            // A runtime plugin can disappear while its name remains persisted. Do
+            // not render getTheme(name)'s dark fallback under the stale name; keep
+            // the requested name in the ref and use a safe auto palette instead.
+            setActive(AUTO_THEME_NAME);
+            redetectAutoBase();
+            return;
+        }
+        const requested = requestedThemeRef.current;
+        if (requested !== undefined &&
+            requested !== AUTO_THEME_NAME &&
+            requested !== active &&
+            isThemeAvailable(requested)) {
+            // The plugin theme was unavailable during boot (or briefly unloaded),
+            // but has registered again. Restore the persisted/requested choice.
+            setActive(requested);
+        }
+    }, [active, redetectAutoBase, runtimeThemeSnapshot]);
+    const renderedTheme = active === null
+        ? 'dark'
+        : isThemeAvailable(active)
+            ? active
+            : AUTO_THEME_NAME;
+    const value = React.useMemo(() => ({ theme: renderedTheme, autoBase, setTheme }), [renderedTheme, autoBase, setTheme]);
     useEffect(() => {
         if (active !== null)
-            setActiveThemeName(active);
-    }, [active]);
+            setActiveThemeName(renderedTheme);
+    }, [active, renderedTheme]);
     if (active === null)
         return null;
     return _jsx(ThemeContext.Provider, { value: value, children: children });

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

@@ -1,8 +1,12 @@
 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 { ContextMenuEvent } from '../../ink/events/context-menu-event.js';
+import type { DragEvent } from '../../ink/events/drag-event.js';
 import type { FocusEvent } from '../../ink/events/focus-event.js';
 import type { KeyboardEvent } from '../../ink/events/keyboard-event.js';
+import type { PointerEvent } from '../../ink/events/pointer-event.js';
+import type { WheelEvent } from '../../ink/events/wheel-event.js';
 import type { Color, Styles } from '../../ink/styles.js';
 import { type Theme } from '../../theme.js';
 type ThemedColorProps = {
@@ -19,14 +23,31 @@ export type Props = BaseStylesWithoutColors & ThemedColorProps & {
     tabIndex?: number;
     autoFocus?: boolean;
     onClick?: (event: ClickEvent) => void;
+    onContextMenu?: (event: ContextMenuEvent) => void;
+    /**
+     * Drag protocol handlers, transparently forwarded to the inner Box.
+     * Only inside `<AlternateScreen>`, left button, no modifier at press;
+     * `dragstart` fires on FIRST movement (not press); a press+release
+     * without movement still triggers `onClick`. See Box's JSDoc.
+     */
+    onDragStart?: (event: DragEvent) => void;
+    /** Fired on each pointer motion after dragstart. See onDragStart. */
+    onDragMove?: (event: DragEvent) => void;
+    /** Fired on release after dragstart. See onDragStart. */
+    onDragEnd?: (event: DragEvent) => 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;
+    onMouseEnter?: (event: PointerEvent) => void;
+    onMouseLeave?: (event: PointerEvent) => void;
+    /**
+     * Wheel events over this Box's rendered rect (position-routed; see the
+     * ink Box's onWheel JSDoc). Transparently forwarded.
+     */
+    onWheel?: (event: WheelEvent) => void;
 };
 /**
  * Theme-aware Box component that resolves theme color keys to raw colors

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

@@ -1 +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;AAsBH;;;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"}
+{"version":3,"file":"ThemedBox.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedBox.tsx"],"names":[],"mappings":"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"}

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

@@ -2,9 +2,14 @@ import React from 'react';
 import type { ClickEvent } from '../../ink/events/click-event.js';
 type Props = {
     thinking: string;
+    /** The FULL un-revealed text (reasoning rows under smooth streaming):
+     *  `thinking` carries the revealed slice the expanded body paints, while
+     *  the live preview ticker must follow the newest ARRIVED content — never
+     *  a lagging reveal. Falls back to `thinking`. */
+    textFull?: string;
     /** Adds the top margin between messages (CC: addMargin). */
     addMargin: boolean;
-    /** True when Ctrl+O transcript/verbose mode is on — show the full text. */
+    /** Show the full text (Ctrl+O, per-row expansion, or live click toggle). */
     verbose: boolean;
     /** True while the reasoning block is still streaming — the leading anchor
      *  becomes a rotating braille spinner (Kimi Code style) and settles back
@@ -21,14 +26,14 @@ type Props = {
     onClick?(event: ClickEvent): void;
 };
 /**
- * Thinking block: folded `⚓ Thinking (ctrl+o to expand)`, expanded shows the
- * full reasoning text indented under `⚓ Thinking…`. While the reasoning
- * streams the leading mark is a rotating braille spinner (`⠋⠙⠹…`, Kimi Code
- * style), settling back to the static anchor (`⚓`) once the turn ends. When
+ * Thinking block: settled rows fold to `⚓ Thinking (ctrl+o to expand)`;
+ * streaming rows switch between a three-line preview and the full reasoning
+ * text on click. The live leading mark is a rotating braille spinner
+ * (`⠋⠙⠹…`, Kimi Code style), settling back to the static anchor (`⚓`). 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, streaming, preview, durationMs, isSelected, onClick, }: Props): React.ReactNode;
+export declare function AssistantThinkingMessage({ thinking, textFull, addMargin, verbose, streaming, preview, durationMs, isSelected, onClick, }: Props): React.ReactNode;
 export {};
 //# sourceMappingURL=AssistantThinkingMessage.d.ts.map