@deepseek-harness-tui/dsh-tui 0.8.7 → 0.9.0

package/lib/types/components/TimelineRail.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, NoSelect } from '../ui.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { RAIL_WIDTH, railEligible, computeRailGeometry, wrapPreviewLines, } from '../ink/timeline-rail.js';
+/** ▴ / ▾ (U+25B4 / U+25BE — the small triangles; CP437-safe on ConHost too). */
+const CHEVRON_UP = ' ▴';
+const CHEVRON_DOWN = ' ▾';
+/** Tick glyphs, right-aligned across the 2-col rail (Grok Build spec):
+ *  active = heavy stroke, hover = wide light stroke, idle = short dim
+ *  stroke in the rightmost cell. */
+const TICK_ACTIVE = '━━';
+const TICK_HOVER = '──';
+const TICK_IDLE = ' ─';
+/** Pointer rest time before the hover preview card pops (ms). Sweeps
+ *  never mount a card; only a deliberate pause does. */
+const HOVER_DWELL_MS = 120;
+/**
+ * Timeline rail: the fullscreen transcript's turn navigator — a 2-column
+ * gutter REPLACING the classic scrollbar (Grok Build's timeline sidebar,
+ * ported to the dsh Ink tree).
+ *
+ *  - one tick per user turn; tick position encodes conversation order,
+ *    not scroll proportion (a long answer must not skew the timeline);
+ *  - the tick of the turn owning the viewport top row (the turn being
+ *    read — same anchor the sticky prompt header pins) renders as `━━`;
+ *    hovering a tick widens it to `──` and pops a preview card left of
+ *    the rail; idle ticks are a short dim ` ─`;
+ *  - ▲ / ▾ step between turns by STRICT geometry (nearest prompt above /
+ *    below the viewport top — never `active ± 1`, which can name a turn
+ *    no scroll reaches), so a dim chevron is always a guaranteed no-op;
+ *  - clicking a tick (or chevron) jumps by content coordinate — the
+ *    prompt's measured top — no element seek, no force-mount race;
+ *  - more turns than rows: the window slides around the active tick, and
+ *    pins to the tail while at the bottom (never excluding active);
+ *  - hidden below 60 terminal columns, under 2 turns, under 3 viewport
+ *    rows, or when the content fits (inline mode keeps the terminal's
+ *    native scrollback).
+ *
+ * The whole 2-column width is the hit target; the rail is fenced with
+ * NoSelect so click-drag text selection never picks up its glyphs, and
+ * the wheel scrolls the transcript (the rail has no scroll of its own).
+ */
+export function TimelineRail({ handle, turns, activeId, upId, downId, terminalWidth, hoverEnabled, onRevealTurn, }) {
+    const [, setTick] = React.useState(0);
+    const [hover, setHover] = React.useState(null);
+    // Dwell-gated preview card: the card pops only after the pointer RESTS
+    // on a tick for HOVER_DWELL_MS. Sweeping the rail fires enter/leave per
+    // cell — without the gate each crossing mounts an absolute-positioned
+    // card at a new spot (flapping previews, absolute-rect churn, and the
+    // fast-sweep residue users reported). The glyph highlight stays instant
+    // (cheap, no overlay); only the card waits for intent.
+    const [cardIndex, setCardIndex] = React.useState(null);
+    const dwellTimerRef = React.useRef(null);
+    const clearDwell = React.useCallback(() => {
+        if (dwellTimerRef.current !== null) {
+            clearTimeout(dwellTimerRef.current);
+            dwellTimerRef.current = null;
+        }
+        setCardIndex(null);
+    }, []);
+    const armDwell = React.useCallback((index) => {
+        if (dwellTimerRef.current !== null)
+            clearTimeout(dwellTimerRef.current);
+        dwellTimerRef.current = setTimeout(() => {
+            dwellTimerRef.current = null;
+            setCardIndex(index);
+        }, HOVER_DWELL_MS);
+    }, []);
+    React.useEffect(() => () => {
+        if (dwellTimerRef.current !== null)
+            clearTimeout(dwellTimerRef.current);
+    }, []);
+    React.useEffect(() => {
+        if (!handle)
+            return;
+        return handle.subscribe(() => {
+            setTick(t => t + 1);
+            // A scroll (wheel over the rail, tick/chevron jump, header click)
+            // slides the tick window under a STATIONARY pointer — without this,
+            // the hover card keeps re-narrating whatever turn now sits under the
+            // pointer cell, flapping previews across turns every frame (reads as
+            // ghosting). OpenCode's modality rule: only a real mouse move may
+            // re-enter hover; Grok likewise clears the hover popup on tick click.
+            // setHover(null) on an already-null hover is a React no-op.
+            setHover(null);
+            clearDwell();
+        });
+    }, [handle, clearDwell]);
+    if (!handle)
+        return null;
+    const viewport = handle.getViewportHeight();
+    const content = handle.getScrollHeight();
+    const maxScroll = Math.max(0, content - viewport);
+    if (!railEligible({
+        turnCount: turns.length,
+        terminalWidth,
+        viewportRows: viewport,
+        scrollable: content > viewport,
+    }))
+        return null;
+    const activeIndex = turns.findIndex(t => t.id === activeId);
+    // Tail-pin the tick window while the viewport sits at the bottom
+    // (sticky flag OR positional) — newest ticks stay on screen.
+    const atBottom = handle.isSticky() || handle.getScrollTop() >= maxScroll;
+    const geo = computeRailGeometry(turns.length, viewport, activeIndex === -1 ? null : activeIndex, atBottom);
+    if (!geo)
+        return null;
+    // Jump by CONTENT COORDINATE, not by element: the target row is usually
+    // unmounted (virtualization), and the element-based seek's force-mount
+    // path races React's synchronous re-render (the renderer's deferred
+    // Yoga read can see a detached anchor and silently no-op). The turn's
+    // reported top is the measured text position — scrollTo() lands the
+    // prompt exactly at the viewport top; the renderer clamps unreachable
+    // tail tops to maxScroll (their turns stay on screen, just short of
+    // owning the top row — and ▼ never names them, see timeline-rail.ts).
+    // FOLDDED turns have no measured top (-1): their click (and ▲ naming
+    // one) routes through onRevealTurn instead — expand the fold, then the
+    // existing force-mount seek lands the row once it measures.
+    const jumpToIndex = (index) => {
+        const turn = turns[index];
+        if (!turn)
+            return;
+        if (turn.folded)
+            onRevealTurn(turn.id);
+        else
+            handle.scrollTo(turn.top);
+    };
+    const jumpToId = (id) => {
+        if (id === null)
+            return;
+        const index = turns.findIndex(t => t.id === id);
+        if (index !== -1)
+            jumpToIndex(index);
+    };
+    const shown = geo.windowEnd - geo.windowStart;
+    const chevron = (kind) => {
+        const enabled = (kind === 'up' ? upId : downId) !== null;
+        const hovered = hover?.kind === kind;
+        const glyph = kind === 'up' ? CHEVRON_UP : CHEVRON_DOWN;
+        const color = !enabled ? 'subtle' : hovered ? 'text' : 'inactive';
+        return (_jsx(Box, { height: 1, flexShrink: 0, onClick: () => jumpToId(kind === 'up' ? upId : downId), onMouseEnter: () => setHover({ kind }), onMouseLeave: () => setHover(null), children: _jsx(Text, { color: color, children: glyph }) }, kind));
+    };
+    const tickRows = [];
+    for (let k = 0; k < shown; k++) {
+        const index = geo.windowStart + k;
+        const turn = turns[index];
+        const isActive = index === activeIndex;
+        const isHovered = hover?.kind === 'tick' && hover.index === index;
+        const glyph = isActive ? TICK_ACTIVE : isHovered ? TICK_HOVER : TICK_IDLE;
+        const color = isActive || isHovered ? 'text' : 'subtle';
+        tickRows.push(_jsx(Box, { height: 1, flexShrink: 0, onClick: () => jumpToIndex(index), onMouseEnter: () => {
+                setHover({ kind: 'tick', index });
+                armDwell(index);
+            }, onMouseLeave: () => {
+                setHover(null);
+                clearDwell();
+            }, children: _jsx(Text, { color: color, children: glyph }) }, turn.id));
+    }
+    // Hover preview card, anchored left of the rail and vertically centered
+    // on the hovered tick (shrink-to-fit, rounded chrome). Dwell-gated: only
+    // cardIndex (armed after HOVER_DWELL_MS of rest) draws — a sweep keeps
+    // hover flashing on glyphs but never mounts the overlay. Suppressed
+    // while an overlay owns the screen — the rail stops narrating over
+    // dialogs.
+    let card = null;
+    if (hoverEnabled && cardIndex !== null) {
+        const turn = turns[cardIndex];
+        if (turn && turn.preview.length > 0) {
+            const tickRow = geo.tickTop + cardIndex - geo.windowStart;
+            if (tickRow >= geo.tickTop && tickRow < geo.downRow) {
+                const budget = Math.min(32, Math.max(16, Math.floor((terminalWidth - RAIL_WIDTH) / 2)));
+                const lines = wrapPreviewLines(turn.preview, budget);
+                if (lines.length > 0 && lines.some(l => l.length > 0)) {
+                    const widest = Math.max(...lines.map(l => stringWidth(l)));
+                    const cardW = widest + 4; // rounded border ×2 + padding ×2
+                    const cardH = lines.length + 2;
+                    if (cardH <= viewport) {
+                        const top = Math.max(0, Math.min(tickRow - Math.floor(cardH / 2), viewport - cardH));
+                        card = (_jsx(Box, { position: "absolute", top: top, right: RAIL_WIDTH + 1, width: cardW, height: cardH, flexDirection: "column", flexShrink: 0, borderStyle: "round", borderColor: "inactive", backgroundColor: "toolCardBackgroundDim", paddingX: 1, children: lines.map((line, i) => (_jsx(Text, { color: "text", wrap: "truncate-end", children: line }, i))) }));
+                    }
+                }
+            }
+        }
+    }
+    return (_jsx(NoSelect, { fromLeftEdge: true, children: _jsxs("ink-box", { onWheel: e => {
+                if (e.deltaY !== 0)
+                    handle.scrollBy(e.deltaY);
+            }, style: { flexDirection: 'column', flexShrink: 0, width: RAIL_WIDTH }, children: [_jsx(Box, { height: geo.upRow, flexShrink: 0 }), chevron('up'), tickRows, chevron('down'), card] }) }));
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TuiWorkspaceChoice } from '../workspaces.js';
 /** Generic nested choice surface returned by a workspace provider command. */
-export declare function WorkspaceFlowPicker({ title, choices, focusIndex, busy, input, }: {
+export declare function WorkspaceFlowPicker({ title, choices, focusIndex, busy, input, onPick, }: {
     title: string;
     choices: readonly TuiWorkspaceChoice[];
     focusIndex: number;
@@ -11,5 +11,10 @@ export declare function WorkspaceFlowPicker({ title, choices, focusIndex, busy,
         cursor: number;
         placeholder?: string;
     } | null;
+    /** Mouse pick (fullscreen): reports the clicked row's absolute index —
+     *  Chat applies it with the same code path as the keyboard Enter. Rows
+     *  are inert while busy (keyboard is swallowed too) and while the inline
+     *  text input owns the interaction. */
+    onPick?: (index: number) => void;
 }): React.ReactNode;
 //# sourceMappingURL=WorkspaceFlowPicker.d.ts.map

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

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

package/lib/types/components/WorkspaceFlowPicker.js

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Bare `/workspace` action menu: the built-in subcommands (resume / rename /
+ * open) plus any dynamically registered workspace extensions. Enter runs the
+ * focused action through the same paths a hand-typed subcommand takes;
+ * actions needing free text (rename/open) fall back to their usage notice.
+ */
+export declare function WorkspaceMenuPicker({ options, focusIndex, onPick, }: {
+    options: readonly {
+        id: string;
+        label: string;
+        description: string;
+    }[];
+    focusIndex: number;
+    /** Mouse pick (fullscreen): reports the clicked row's index — Chat
+     *  applies it with the same code path as the keyboard Enter. */
+    onPick?: (index: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=WorkspaceMenuPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceMenuPicker.d.ts","sourceRoot":"","sources":["../../../src/components/WorkspaceMenuPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,UAAU,EACV,MAAM,GACP,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB;oEACgE;IAChE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAyBlB"}

package/lib/types/components/WorkspaceMenuPicker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { Select } from './Select.js';
+import { HintLine } from './design-system/HintLine.js';
+/**
+ * Bare `/workspace` action menu: the built-in subcommands (resume / rename /
+ * open) plus any dynamically registered workspace extensions. Enter runs the
+ * focused action through the same paths a hand-typed subcommand takes;
+ * actions needing free text (rename/open) fall back to their usage notice.
+ */
+export function WorkspaceMenuPicker({ options, focusIndex, onPick, }) {
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('workspace-menu-title') }) }), _jsx(Select, { options: options.map(option => ({
+                        value: option.id,
+                        label: option.label,
+                        description: option.description,
+                    })), focusIndex: focusIndex, selectedValue: undefined, onPick: onPick === undefined ? undefined : (index) => onPick(index) }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }) }));
+}

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { TuiWorkspaceTarget } from '../workspaces.js';
 /** `/workspace` target picker contributed by local and optional providers. */
-export declare function WorkspacePicker({ targets, focusIndex, currentCwd, }: {
+export declare function WorkspacePicker({ targets, focusIndex, currentCwd, onPick, }: {
     targets: readonly TuiWorkspaceTarget[];
     focusIndex: number;
     currentCwd: string;
+    /** Mouse pick (fullscreen): reports the clicked row's absolute index —
+     *  Chat applies it with the same code path as the keyboard Enter. */
+    onPick?: (index: number) => void;
 }): React.ReactNode;
 //# sourceMappingURL=WorkspacePicker.d.ts.map

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

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

package/lib/types/components/WorkspacePicker.js

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

package/lib/types/components/approvals/ApprovalPanel.d.ts.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,CAmEzF"}
+{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,UAAU,KAAK,IAAI,CAAA;CAClE,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA+EzF"}

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

@@ -20,6 +20,9 @@ import { POINTER } from '../../cc/figures.js';
 const OUTCOMES = ['allowed-once', 'rejected'];
 export function ApprovalPanel({ approval, onDecide }) {
     const [focusIndex, setFocusIndex] = React.useState(0);
+    // Hover highlight per decision row (mouse affordance; the click handler
+    // below mirrors the keyboard Enter on the focused row).
+    const [hoverIndex, setHoverIndex] = React.useState(-1);
     useInput((input, key) => {
         if (key.escape || (key.ctrl && input === 'c')) {
             onDecide('rejected');
@@ -44,6 +47,7 @@ export function ApprovalPanel({ approval, onDecide }) {
     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) => {
                     const focused = index === focusIndex;
-                    return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, 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));
+                    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));
                 }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('approval-hint') }) })] }));
 }

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
 export type ListItemProps = {
     /** Whether this item is currently focused (keyboard selection).
      *  Shows the pointer indicator (❯) when true. */
@@ -24,6 +25,12 @@ export type ListItemProps = {
      * @default true
      */
     declareCursor?: boolean;
+    /**
+     * Mouse click handler (fullscreen mode). When provided the row becomes
+     * clickable and gains a subtle hover background so the affordance is
+     * visible; when absent the row renders exactly as before.
+     */
+    onClick?: (event: ClickEvent) => void;
 };
 /**
  * A list item for selection UIs, mirroring Claude Code's
@@ -32,5 +39,5 @@ export type ListItemProps = {
  * and CC's color states (focused = suggestion blue, selected = success
  * green).
  */
-export declare function ListItem({ isFocused, isSelected, children, description, showScrollDown, showScrollUp, styled, disabled, declareCursor, }: ListItemProps): React.ReactNode;
+export declare function ListItem({ isFocused, isSelected, children, description, showScrollDown, showScrollUp, styled, disabled, declareCursor, onClick, }: ListItemProps): React.ReactNode;
 //# sourceMappingURL=ListItem.d.ts.map

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Text } from '../../ui.js';
 import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
 import { POINTER, DOWN_ARROW, UP_ARROW, TICK } from '../../cc/figures.js';
@@ -10,7 +10,7 @@ import { POINTER, DOWN_ARROW, UP_ARROW, TICK } from '../../cc/figures.js';
  * and CC's color states (focused = suggestion blue, selected = success
  * green).
  */
-export function ListItem({ isFocused, isSelected = false, children, description, showScrollDown, showScrollUp, styled = true, disabled = false, declareCursor, }) {
+export function ListItem({ isFocused, isSelected = false, children, description, showScrollDown, showScrollUp, styled = true, disabled = false, declareCursor, onClick, }) {
     // Park the native terminal cursor on the pointer indicator so screen
     // readers / magnifiers track the focused item (CC behavior). (0,0) is the
     // top-left of this Box, where the pointer renders.
@@ -19,6 +19,11 @@ export function ListItem({ isFocused, isSelected = false, children, description,
         column: 0,
         active: isFocused && !disabled && declareCursor !== false,
     });
+    // Hover highlight only when the row is actually clickable — the extra
+    // background is the mouse affordance (there is no cursor-shape feedback
+    // in a terminal).
+    const [hovered, setHovered] = useState(false);
+    const clickable = Boolean(onClick) && !disabled;
     function renderIndicator() {
         if (disabled) {
             return _jsx(Text, { children: " " });
@@ -54,7 +59,7 @@ export function ListItem({ isFocused, isSelected = false, children, description,
     // 非 Fragment 的 element（如调用方自己的 <Text>）保留原样——其子树高度
     // 由调用方负责。
     const flatChildren = flattenDeep(children);
-    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, height: 1, flexShrink: 0, overflow: "hidden", width: "100%", children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, wrap: "truncate-end", children: flatChildren })) : (flatChildren), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: flattenLine(description) }) }))] }));
+    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", onClick: clickable ? onClick : undefined, onMouseEnter: clickable ? () => setHovered(true) : undefined, onMouseLeave: clickable ? () => setHovered(false) : undefined, backgroundColor: clickable && hovered ? 'userMessageBackgroundHover' : undefined, children: [_jsxs(Box, { flexDirection: "row", gap: 1, height: 1, flexShrink: 0, overflow: "hidden", width: "100%", children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, wrap: "truncate-end", children: flatChildren })) : (flatChildren), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: flattenLine(description) }) }))] }));
 }
 /** 单行化：内嵌换行折叠为空格（行尾/行首换行随之消除）。 */
 function flattenLine(s) {

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

@@ -7,11 +7,14 @@ type Props = {
     isSelected?: boolean;
     /** Row expanded on its own (persistent hover-grey background, CC). */
     isExpanded?: boolean;
-    onClick?(): void;
 };
 /**
  * Assistant text message:  bullet + markdown body (mirroring Claude Code's  default branch).
+ *
+ * Deliberately not clickable: the transcript is reading material and the
+ * mouse's job there is text selection (user feedback — row hover tints and
+ * fold toggling were noise, not affordance).
  */
-export declare function AssistantTextMessage({ text, addMargin, isSelected, isExpanded, onClick, }: Props): React.ReactNode;
+export declare function AssistantTextMessage({ text, addMargin, isSelected, isExpanded, }: Props): React.ReactNode;
 export {};
 //# sourceMappingURL=AssistantTextMessage.d.ts.map

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

@@ -1 +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;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA2BzB"}
+{"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;CACrB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,UAAkB,GACnB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA0BzB"}

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

@@ -4,11 +4,15 @@ import { BLACK_CIRCLE } from '../../cc/figures.js';
 import { Markdown } from '../Markdown.js';
 /**
  * Assistant text message:  bullet + markdown body (mirroring Claude Code's  default branch).
+ *
+ * Deliberately not clickable: the transcript is reading material and the
+ * mouse's job there is text selection (user feedback — row hover tints and
+ * fold toggling were noise, not affordance).
  */
-export function AssistantTextMessage({ text, addMargin, isSelected = false, isExpanded = false, onClick, }) {
+export function AssistantTextMessage({ text, addMargin, isSelected = false, isExpanded = false, }) {
     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 }) })] }) }));
+                : undefined, 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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
 type Props = {
     thinking: string;
     /** Adds the top margin between messages (CC: addMargin). */
@@ -17,7 +18,7 @@ type Props = {
     durationMs?: number;
     /** Message-selection mode highlight. */
     isSelected?: boolean;
-    onClick?(): void;
+    onClick?(event: ClickEvent): void;
 };
 /**
  * Thinking block: folded `⚓ Thinking (ctrl+o to expand)`, expanded shows the

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

@@ -1 +1 @@
-{"version":3,"file":"AssistantThinkingMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantThinkingMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,OAAO,EAAE,OAAO,CAAA;IAChB;;4CAEwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;8EAE0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAwHzB"}
+{"version":3,"file":"AssistantThinkingMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantThinkingMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAUjE,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,OAAO,EAAE,OAAO,CAAA;IAChB;;4CAEwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;8EAE0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;CAClC,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAkIzB"}

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

@@ -49,7 +49,13 @@ export function AssistantThinkingMessage({ thinking, addMargin, verbose, streami
     const pulse = (Math.sin(frame * 0.9) + 1) / 2;
     const pulseColor = interpolateColor(BRAND, ICE, pulse);
     const frameText = THINKING_SPINNER_FRAMES[frame % THINKING_SPINNER_FRAMES.length];
-    const header = streaming ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: minimal ? frameText : chalk.rgb(pulseColor.r, pulseColor.g, pulseColor.b).bold(frameText) }), _jsx(Text, { dimColor: true, italic: true, children: ` ${label}` })] })) : (_jsx(Text, { dimColor: true, italic: true, children: `${minimal ? '*' : THINKING_SETTLED_MARKER} ${label}` }));
+    // Hover 轻指示：可点击折叠时折叠头从 dim 提亮为正常色（不刷整行背景，
+    // 转录视觉保持安静）。
+    const [hovered, setHovered] = React.useState(false);
+    const hoverProps = onClick !== undefined
+        ? { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) }
+        : {};
+    const header = streaming ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: minimal ? frameText : chalk.rgb(pulseColor.r, pulseColor.g, pulseColor.b).bold(frameText) }), _jsx(Text, { dimColor: !hovered, color: hovered ? 'text' : undefined, italic: true, children: ` ${label}` })] })) : (_jsx(Text, { italic: true, dimColor: !hovered, color: hovered ? 'text' : undefined, children: `${minimal ? '*' : THINKING_SETTLED_MARKER} ${label}` }));
     if (preview) {
         // Live ticker: the model's last few reasoning lines, dimmed, one Text
         // per row so each truncates to the width independently, padded to a
@@ -64,10 +70,10 @@ export function AssistantThinkingMessage({ thinking, addMargin, verbose, streami
         // Pad with single spaces — an empty-string Text renders with zero
         // height in ink, so '' padding would not hold the row open.
         const rows = Array.from({ length: PREVIEW_ROWS }, (_, i) => visible[i] ?? ' ');
-        return (_jsxs(Box, { flexDirection: "column", marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [header, _jsx(Box, { flexDirection: "column", paddingLeft: 2, height: PREVIEW_ROWS, flexShrink: 0, overflow: "hidden", children: rows.map((line, i) => (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(Text, { dimColor: true, italic: true, children: '│ ' }), _jsx(Box, { flexDirection: "row", flexGrow: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: i === rows.length - 1 ? 'truncate-start' : 'truncate', children: i === 0 && clipped ? `…${line}` : line }) })] }, i))) })] }));
+        return (_jsxs(Box, { flexDirection: "column", marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, ...hoverProps, children: [header, _jsx(Box, { flexDirection: "column", paddingLeft: 2, height: PREVIEW_ROWS, flexShrink: 0, overflow: "hidden", children: rows.map((line, i) => (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(Text, { dimColor: true, italic: true, children: '│ ' }), _jsx(Box, { flexDirection: "row", flexGrow: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: i === rows.length - 1 ? 'truncate-start' : 'truncate', children: i === 0 && clipped ? `…${line}` : line }) })] }, i))) })] }));
     }
     if (!verbose) {
-        return (_jsx(Box, { marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: header }));
+        return (_jsx(Box, { marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, ...hoverProps, children: header }));
     }
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [header, _jsx(Box, { paddingLeft: 2, children: _jsx(StreamingMarkdown, { dimColor: true, children: thinking }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, ...hoverProps, children: [header, _jsx(Box, { paddingLeft: 2, children: _jsx(StreamingMarkdown, { dimColor: true, children: thinking }) })] }));
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ToolRow } from '../../dsh-adapter/channel.js';
 import type { ToolBackground } from '../../tuiDisplayPrefs.js';
 import type { Theme } from '../../theme.js';
+import type { ClickEvent } from '../../ink/events/click-event.js';
 type Props = {
     tool: ToolRow;
     /** Adds the top margin between messages (CC: addMargin). */
@@ -12,6 +13,12 @@ type Props = {
     isSelected?: boolean;
     /** Row expanded on its own (persistent hover-grey background, CC). */
     isExpanded?: boolean;
+    /**
+     * Mouse click (fullscreen): toggles the row's expansion — same action as
+     * clicking other transcript rows. Also makes the `(ctrl+o to expand)`
+     * hint actionable with the mouse.
+     */
+    onClick?(event: ClickEvent): void;
     /**
      * Trajectory pointer, rendered as one more `⎿` line under a failed call.
      *
@@ -33,6 +40,6 @@ export declare function toolNameColor(raw: string): keyof Theme;
  * output, read content — instead of the raw result dump (mirroring Claude Code's `AssistantToolUseMessage.tsx` + the dsh-tools presentation views the
  * channel captures per call).
  */
-export declare function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected, isExpanded, footnote, diffLayout, toolBackground, }: Props): React.ReactNode;
+export declare function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected, isExpanded, onClick, footnote, diffLayout, toolBackground, }: Props): React.ReactNode;
 export {};
 //# sourceMappingURL=AssistantToolUseMessage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AssistantToolUseMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantToolUseMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAA8C,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAKvG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,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;IACpB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;IACzC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,CAAA;AAgFD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,CAKtD;AAwKD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,UAAmB,EACnB,cAAuB,GACxB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAmKzB"}
+{"version":3,"file":"AssistantToolUseMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantToolUseMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAA8C,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAKvG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAEjE,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;IACpB;;;;OAIG;IACH,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACjC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;IACzC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,CAAA;AAgFD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,CAKtD;AAwKD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAmB,EACnB,cAAuB,GACxB,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAsKzB"}

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

@@ -221,7 +221,7 @@ function HeaderTitle({ name, title, isTerminal, displayArgs, argsLanguage, nameC
  * output, read content — instead of the raw result dump (mirroring Claude Code's `AssistantToolUseMessage.tsx` + the dsh-tools presentation views the
  * channel captures per call).
  */
-export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected = false, isExpanded = false, footnote, diffLayout = 'auto', toolBackground = 'none', }) {
+export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected = false, isExpanded = false, onClick, footnote, diffLayout = 'auto', toolBackground = 'none', }) {
     const isRunning = tool.status === 'running';
     const isError = tool.status === 'error';
     const displayArgs = verbose ? tool.argsFull ?? tool.argsText : tool.argsText;
@@ -286,9 +286,11 @@ export function AssistantToolUseMessage({ tool, addMargin, verbose, isSelected =
         : ordinaryToolBackground === 'strong'
             ? 'toolCardBackground'
             : undefined;
-    return (_jsx(Box, { ref: viewportRef, flexDirection: "row", justifyContent: "space-between", marginTop: addMargin ? 1 : 0, width: "100%", 
+    return (_jsx(Box, { ref: viewportRef, flexDirection: "row", justifyContent: "space-between", marginTop: addMargin ? 1 : 0, width: "100%", onClick: onClick, 
         // Only selection paints a highlight; the configured treatment applies
         // to an ordinary card. Diff line tints stay - they are content, not chrome.
+        // No hover tint: the card stays visually quiet until clicked (user
+        // feedback — row-hover color changes read as noise in the transcript).
         backgroundColor: isSelected ? 'messageActionsBackground' : ordinaryBackground, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", minWidth: minWidth, children: [_jsx(ToolUseLoader, { shouldAnimate: isRunning, isUnresolved: isRunning, isError: isError, toolName: tool.name }), _jsx(HeaderTitle, { name: name, title: headerTitle, isTerminal: headerIsTerminal, displayArgs: displayArgs, argsLanguage: argsLanguage, nameColor: toolNameColor(tool.name) }), !isRunning && (_jsx(Box, { flexWrap: "nowrap", children: _jsx(Text, { dimColor: true, children: elapsedText }) }))] }), useSplitDiff && view?.card === 'diff' ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: GUTTER_FIRST }) }), _jsx(SplitDiffView, { diffs: view.diffs, width: columns - 4, maxRows: DIFF_BODY_MAX_LINES, verbose: verbose, toolBackground: ordinaryToolBackground })] })) : (rendered.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { color: line.tone === 'add'
                                     ? 'diffAddedWord'
                                     : line.tone === 'del'

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
 type Props = {
     text: string;
     /** Adds the top margin between turns (CC: addMargin). */
     addMargin: boolean;
     /** Message-selection mode highlight. */
     isSelected?: boolean;
-    onClick?(): void;
+    onClick?(event: ClickEvent): void;
 };
 /**
  * User prompt bubble: `❯ text` in bold briefLabelYou gold with no background

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

@@ -1 +1 @@
-{"version":3,"file":"UserPromptMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/UserPromptMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,SAAS,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA6BzB"}
+{"version":3,"file":"UserPromptMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/UserPromptMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAEjE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,SAAS,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;CAClC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA6BzB"}