@askdkc/dsh-cli 0.11.3

package/lib/types/components/trajectory/HotspotView.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useTheme } from '../../ui.js';
+import { getTheme } from '../../theme.js';
+import { formatDuration, formatTokens, truncateWidth } from '../../trajectory/format.js';
+import { mix, reproject } from '../../trajectory/motion.js';
+import { t } from '../../i18n.js';
+/**
+ * The hotspot view — the session ranked by cost instead of ordered by time.
+ *
+ * Chronology is the wrong order for "where did my half hour go": the answer is
+ * a ranking, and a ranking is what this shows — cost per tool, per model phase
+ * (decode vs. waiting for the first token vs. retry backoff), per turn.
+ *
+ * The three sections are flattened into ONE windowed row list rather than laid
+ * out as three independent columns. A long session easily produces more rows
+ * than the viewport has lines, and three self-sizing sections in a fixed-height
+ * box overlap each other when they overflow — a flat window scrolls instead,
+ * and the cursor can reach every row.
+ *
+ * The reveal is a staggered brightening rather than a growing bar. A bar that
+ * grew would change its glyph count every frame, which is a layout change, and
+ * layout changes are the one thing the motion rules forbid. Sweeping colour
+ * across already-final bars reads the same and costs style bytes.
+ */
+/** Bar cells; a half block gives one extra step of resolution for free. */
+const FULL = '█';
+const HALF = '▌';
+function bar(value, max, width) {
+    if (max <= 0 || width <= 0)
+        return '';
+    const exact = (value / max) * width;
+    const full = Math.max(0, Math.min(width, Math.floor(exact)));
+    return FULL.repeat(full) + (exact - full >= 0.5 && full < width ? HALF : '');
+}
+/** Flatten the three sections into the single list the cursor walks. */
+export function hotspotRows(agg) {
+    return [...agg.tools, ...agg.model, ...agg.turns];
+}
+/** Value a row is ranked by under the active sort. */
+function valueOf(row, sort) {
+    return sort === 'count' ? row.count : sort === 'tokens' ? row.tokens : row.totalMs;
+}
+export function HotspotView({ agg, sort, width, height, cursor, tick, switchTick, onRowClick, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const [hoverIndex, setHoverIndex] = React.useState(-1);
+    const labelWidth = Math.min(18, Math.max(10, Math.floor(width * 0.16)));
+    const barWidth = Math.max(6, Math.min(30, width - labelWidth - 34));
+    // Build the flat list once, tagging each row with its section's scale.
+    const entries = [];
+    let cursorIndex = 0;
+    for (const [title, rows, colorKey] of [
+        [t('traj-hot-tools'), agg.tools, 'chromeYellow'],
+        [t('traj-hot-model'), agg.model, 'autoAccept'],
+        [t('traj-hot-turns'), agg.turns, 'professionalBlue'],
+    ]) {
+        if (rows.length === 0)
+            continue;
+        entries.push({ kind: 'title', text: title });
+        const max = Math.max(...rows.map(row => valueOf(row, sort)), 1);
+        for (const row of rows) {
+            entries.push({ kind: 'row', row, cursorIndex, max, colorKey });
+            cursorIndex += 1;
+        }
+    }
+    // Window around the cursor's entry so ↑/↓ can reach every section.
+    const focusEntry = entries.findIndex(entry => entry.kind === 'row' && entry.cursorIndex === cursor);
+    const start = Math.max(0, Math.min(focusEntry - Math.floor(height / 2), entries.length - height));
+    const visible = entries.slice(Math.max(0, start), Math.max(0, start) + height);
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", children: visible.map((entry, offset) => {
+            if (entry.kind === 'title') {
+                return (_jsx(Box, { width: "100%", height: 1, flexShrink: 0, children: _jsx(Text, { color: "subtle", children: entry.text }) }, `t${offset}`));
+            }
+            const { row, max, colorKey } = entry;
+            const focused = entry.cursorIndex === cursor;
+            // 鼠标：行点击跳回 timeline 定位；悬停轻指示（dim ▸，不刷背景）
+            const hovered = onRowClick !== undefined && hoverIndex === entry.cursorIndex;
+            // Stagger the settle by row so a section reads top-down on switch.
+            const dim = reproject(tick - offset, switchTick);
+            const base = row.error === true ? theme.error : theme[colorKey];
+            const stats = `${row.count}×` +
+                (row.tokens > 0 ? ` · ${formatTokens(row.tokens)}` : '') +
+                (row.count > 0 && row.totalMs > 0 ? ` · ⌀${formatDuration(row.totalMs / row.count)}` : '');
+            return (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, gap: 1, onClick: onRowClick === undefined ? undefined : () => onRowClick(entry.cursorIndex), onMouseEnter: onRowClick === undefined ? undefined : () => setHoverIndex(entry.cursorIndex), onMouseLeave: onRowClick === undefined
+                    ? undefined
+                    : () => setHoverIndex(previous => (previous === entry.cursorIndex ? -1 : previous)), children: [_jsx(Box, { flexShrink: 0, width: 2, children: _jsx(Text, { color: focused ? 'suggestion' : 'inactive', children: focused || hovered ? '▸' : ' ' }) }), _jsx(Box, { flexShrink: 0, width: labelWidth, children: _jsx(Text, { color: focused ? 'suggestion' : row.error === true ? 'error' : undefined, children: truncateWidth(row.label, labelWidth) }) }), _jsx(Box, { flexShrink: 0, width: barWidth, children: _jsx(Text, { color: mix(base, theme.background, dim), children: bar(valueOf(row, sort), max, barWidth) }) }), _jsx(Box, { flexShrink: 0, width: 8, justifyContent: "flex-end", children: _jsx(Text, { bold: true, color: row.error === true ? 'error' : undefined, children: formatDuration(row.totalMs) }) }), _jsx(Box, { flexShrink: 1, overflow: "hidden", children: _jsx(Text, { color: "subtle", children: truncateWidth(stats, Math.max(4, width - labelWidth - barWidth - 16)) }) })] }, `r${entry.cursorIndex}`));
+        }) }));
+}

package/lib/types/components/trajectory/Inspector.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { InspectDetail } from '../../dsh-adapter/trajectory/index.js';
+import type { TrajNode } from '../../dsh-adapter/types.js';
+/**
+ * The inspector — full detail for the focused row, in a fixed-height slot.
+ *
+ * Two properties matter more than what it shows:
+ *
+ * **It follows the cursor with no keystroke.** Moving down updates it; there
+ * is no "open" step. That is one decision removed from the most common action
+ * in the view, and it is the reason a run of rows can be triaged by holding
+ * ↓ rather than by opening and closing each one.
+ *
+ * **Its height never changes.** A pane that grew with its content would resize
+ * the frame on every cursor move — the exact motion that takes inline
+ * rendering down the shrink-frame path. Fixed geometry means moving the cursor
+ * emits style bytes and nothing else. `Enter` opens the same content as a
+ * full-height page, which is a deliberate, once-per-inspection resize.
+ */
+export declare function Inspector({ node, detail, height, width, expanded, scroll, }: {
+    node: TrajNode | undefined;
+    detail: InspectDetail | undefined;
+    /** Rows this pane occupies, borders included. Never varies with content. */
+    height: number;
+    width: number;
+    /** True when `Enter` has promoted the pane to a full-height reading page. */
+    expanded: boolean;
+    /** First body line to show, for paging an expanded pane. */
+    scroll: number;
+}): React.ReactNode;
+//# sourceMappingURL=Inspector.d.ts.map

package/lib/types/components/trajectory/Inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/trajectory/Inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAE1D;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC1B,MAAM,EAAE,aAAa,GAAG,SAAS,CAAA;IACjC,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,QAAQ,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAiGlB"}

package/lib/types/components/trajectory/Inspector.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { formatDuration } from '../../trajectory/format.js';
+/**
+ * The inspector — full detail for the focused row, in a fixed-height slot.
+ *
+ * Two properties matter more than what it shows:
+ *
+ * **It follows the cursor with no keystroke.** Moving down updates it; there
+ * is no "open" step. That is one decision removed from the most common action
+ * in the view, and it is the reason a run of rows can be triaged by holding
+ * ↓ rather than by opening and closing each one.
+ *
+ * **Its height never changes.** A pane that grew with its content would resize
+ * the frame on every cursor move — the exact motion that takes inline
+ * rendering down the shrink-frame path. Fixed geometry means moving the cursor
+ * emits style bytes and nothing else. `Enter` opens the same content as a
+ * full-height page, which is a deliberate, once-per-inspection resize.
+ */
+export function Inspector({ node, detail, height, width, expanded, scroll, }) {
+    const bodyHeight = Math.max(1, height - 1);
+    if (node === undefined || detail === undefined) {
+        return (_jsx(Box, { flexDirection: "column", height: height, flexShrink: 0, children: _jsx(Text, { color: "subtle", children: "\u2014" }) }));
+    }
+    // Flatten every section into display lines up front, so paging and
+    // clipping operate on one uniform list.
+    const lines = [];
+    for (const section of detail.sections) {
+        // A lone section whose heading repeats the pane title (a message row's
+        // `assistant` under `assistant`) spends a line saying nothing.
+        const redundant = detail.sections.length === 1 && section.title.toLowerCase() === detail.title.toLowerCase();
+        if (!redundant)
+            lines.push({ text: section.title, tone: section.tone, head: true });
+        for (const raw of section.body.split('\n')) {
+            // Tabs would break column alignment inside the pane.
+            lines.push({ text: raw.replace(/\t/g, '  '), tone: section.tone });
+        }
+    }
+    // The pane always paints exactly `height` rows: one header plus bodyHeight
+    // body rows, the last of which becomes the overflow marker when content
+    // runs past the slot, and blank padding when it does not. Anything that
+    // varied the row count here would resize the frame on every cursor move.
+    const overflow = lines.length - scroll > bodyHeight;
+    const visibleCount = overflow ? bodyHeight - 1 : bodyHeight;
+    const clipped = lines.slice(scroll, scroll + visibleCount);
+    const hidden = lines.length - scroll - visibleCount;
+    const body = Array.from({ length: bodyHeight }, (_, index) => clipped[index] ?? null);
+    const status = node.status === 'error' ? 'error' : node.status === 'running' ? 'success' : 'inactive';
+    return (_jsxs(Box, { flexDirection: "column", height: height, flexShrink: 0, children: [_jsxs(Box, { flexDirection: "row", gap: 1, width: "100%", children: [_jsxs(Text, { color: status, bold: true, children: ['▎', detail.title] }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", color: "subtle", children: detail.facts.join(' · ') }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: status, children: node.durationMs === undefined ? '' : formatDuration(node.durationMs) }) })] }), body.map((line, index) => {
+                const isMarker = overflow && index === bodyHeight - 1;
+                if (isMarker) {
+                    return (_jsx(Box, { width: "100%", overflow: "hidden", children: _jsx(Text, { color: "subtle", wrap: "truncate", children: `    …${hidden} more · ${expanded ? 'j/k' : 'enter'}` }) }, "more"));
+                }
+                if (line === null) {
+                    return (_jsx(Box, { width: "100%", children: _jsx(Text, { children: " " }) }, index));
+                }
+                return (_jsx(Box, { width: "100%", overflow: "hidden", children: _jsx(Text, { wrap: "truncate", bold: line.head, color: line.head
+                            ? line.tone === 'error'
+                                ? 'error'
+                                : 'permission'
+                            : line.tone === 'error'
+                                ? 'error'
+                                : line.tone === 'dim'
+                                    ? 'subtle'
+                                    : 'inactiveShimmer', children: line.head ? `  ${line.text}` : `    ${line.text.slice(0, Math.max(0, width - 6))}` }) }, index));
+            })] }));
+}

package/lib/types/components/trajectory/Ledger.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
+import type { TrajNode } from '../../dsh-adapter/types.js';
+export declare function Ledger({ rows, start, height, cursor, width, tick, arrivalTick, arrivalFrom, onRowClick, }: {
+    /** The (possibly filtered) ledger. */
+    rows: readonly TrajNode[];
+    /** Index of the first visible row. */
+    start: number;
+    /** Visible row count. */
+    height: number;
+    /** Focused row index into `rows`. */
+    cursor: number;
+    /** Terminal width in cells. */
+    width: number;
+    tick: number;
+    /** Tick at which the most recent rows arrived. */
+    arrivalTick: number;
+    /** Rows at or after this index are the ones that just arrived. */
+    arrivalFrom: number;
+    /**
+     * Mouse pick (fullscreen): reports the clicked row's absolute index — the
+     * scene jumps the cursor to it (same semantics as the keyboard jumps).
+     * Hover on a non-focused row shows a dim `▸` pointer — light indication,
+     * no background wash (the ledger is content, not a menu).
+     */
+    onRowClick?: (index: number, event: ClickEvent) => void;
+}): React.ReactNode;
+//# sourceMappingURL=Ledger.d.ts.map

package/lib/types/components/trajectory/Ledger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ledger.d.ts","sourceRoot":"","sources":["../../../../src/components/trajectory/Ledger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAgBjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AA6C1D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,UAAU,GACX,EAAE;IACD,sCAAsC;IACtC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAA;IACzB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACxD,GAAG,KAAK,CAAC,SAAS,CAsKlB"}

package/lib/types/components/trajectory/Ledger.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useTheme } from '../../ui.js';
+import { burstDurationMs, burstErrors, previewText } from '../../dsh-adapter/trajectory/index.js';
+import { costGlyph, formatDuration, formatClock, heatColor, KIND_BADGE, KIND_BADGE_BG, KIND_FG, KIND_GLYPH, ledgerLayout, } from '../../trajectory/format.js';
+import { arrive, mix } from '../../trajectory/motion.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { getTheme } from '../../theme.js';
+/**
+ * The ledger — one line per event, columns aligned across every row.
+ *
+ * Four decisions carry most of the readability:
+ *
+ * **Flat rows, spined turns.** Indenting by turn would break the column
+ * alignment that makes forty rows scannable at a glance, so rows stay flush
+ * and a two-cell spine on the left (`╭ │ ╰`, the git-graph idiom) carries the
+ * grouping instead. The spine is itself information: it turns red for a turn
+ * that failed and green for the turn still running.
+ *
+ * **Turn boundaries are rules, not rows.** A turn is a chapter heading, and a
+ * heading that looks like a body row makes the ledger read as one undifferentiated
+ * list. Rendering it as a full-width rule chunks a five-hundred-row session
+ * into things the eye can count.
+ *
+ * **Cost before number.** Every row carries a one-cell bar on an absolute
+ * scale, so "which of these was slow" is answered by silhouette rather than by
+ * reading a column of durations.
+ *
+ * **Call and result on one line.** `name {args} → result` — the same shape the
+ * official web ledger uses, and the reason a screenful answers "what did it do
+ * and what came back" without a single expansion.
+ *
+ * Rows are windowed by the caller; this component paints only what it is
+ * given, and calls {@link previewText} exactly once per visible cell.
+ */
+/** Idle shorter than this is noise, not a pause worth naming. */
+const IDLE_FLOOR_MS = 20_000;
+/** Spine glyphs by position within a turn. */
+const SPINE = { open: '╭', mid: '│', close: '╰', none: ' ' };
+/** Which spine glyph a row gets, given its neighbours' turns. */
+function spineGlyph(rows, index) {
+    const node = rows[index];
+    if (node.kind === 'turn')
+        return SPINE.open;
+    const next = rows[index + 1];
+    if (next === undefined || next.turn !== node.turn || next.kind === 'turn')
+        return SPINE.close;
+    return SPINE.mid;
+}
+export function Ledger({ rows, start, height, cursor, width, tick, arrivalTick, arrivalFrom, onRowClick, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    const [hoverIndex, setHoverIndex] = React.useState(-1);
+    const layout = ledgerLayout(width);
+    const visible = rows.slice(start, start + height);
+    const arriving = arrive(tick, arrivalTick);
+    // The ledger is the scene's only elastic region: the chrome above and the
+    // inspector below have fixed heights, so `flexGrow` here absorbs whatever
+    // the viewport actually offers.
+    if (visible.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { color: "subtle", children: "\u2014" }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", children: visible.map((node, offset) => {
+            const index = start + offset;
+            const focused = index === cursor;
+            const failed = node.status === 'error' || (node.burst !== undefined && burstErrors(node.burst) > 0);
+            const running = node.status === 'running';
+            const isNew = index >= arrivalFrom && arriving > 0;
+            const duration = node.burst === undefined ? node.durationMs : burstDurationMs(node.burst);
+            // 鼠标：行点击跳光标；悬停在非焦点行亮出 dim ▸（轻指示，不刷背景）
+            const hovered = onRowClick !== undefined && hoverIndex === index;
+            const pointer = focused || hovered ? '▸' : ' ';
+            const rowEvents = onRowClick === undefined
+                ? undefined
+                : {
+                    onClick: (event) => {
+                        onRowClick(index, event);
+                    },
+                    onMouseEnter: () => {
+                        setHoverIndex(index);
+                    },
+                    onMouseLeave: () => {
+                        setHoverIndex(previous => (previous === index ? -1 : previous));
+                    },
+                };
+            // ── structural rows are RULES, not rows ────────────────────────────
+            //
+            // A ledger with five hundred entries needs chapters. Turn and step
+            // are the session's own headings, and a heading that looks like a body
+            // row makes the whole list read as one undifferentiated stream. Two
+            // rule weights give the hierarchy the eye needs: heavy for a turn,
+            // hairline for a step, everything else a normal row. It also removes a
+            // redundancy — a `STEP` badge next to the label `step 2` said the same
+            // thing twice.
+            if (node.kind === 'turn' || node.kind === 'step') {
+                const isTurn = node.kind === 'turn';
+                const right = `${duration === undefined ? '' : formatDuration(duration)}${failed ? ' ✗' : ''}`;
+                // A step is a quiet row, not a rule. Steps are frequent — three or
+                // four per screen — and a full-width dashed line each drew more
+                // attention than the work between them. Only the turn, which is the
+                // session's actual chapter break, gets a rule.
+                if (!isTurn) {
+                    return (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, gap: 1, ...rowEvents, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "subtle", children: `${pointer}╵` }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { color: focused ? 'suggestion' : 'subtle', wrap: "truncate", children: node.label }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: heatColor(duration), children: costGlyph(duration) }) }), _jsx(Box, { flexShrink: 0, justifyContent: "flex-end", width: 7, children: _jsx(Text, { color: heatColor(duration), children: right }) })] }, `${node.seq}:step`));
+                }
+                const tone = failed ? 'error' : running ? 'success' : 'inactiveShimmer';
+                // Idle before a turn is wall-clock the session spent waiting on the
+                // human, and it is invisible everywhere else — every duration only
+                // ever accounts for work. Surfacing it here is what makes the clock
+                // column add up.
+                const previous = rows[index - 1];
+                const idle = previous === undefined ? 0 : node.time - (previous.time + (previous.durationMs ?? 0));
+                const idleText = idle >= IDLE_FLOOR_MS ? `  ⋯ ${formatDuration(idle)}` : '';
+                const head = `${pointer}━━ ${node.label}${idleText} `;
+                const fill = Math.max(2, width - stringWidth(head) - stringWidth(right) - 2);
+                return (_jsx(Box, { width: "100%", height: 1, flexShrink: 0, ...rowEvents, children: _jsxs(Text, { color: tone, bold: true, children: [`${pointer}━━ ${node.label}`, _jsx(Text, { color: "subtle", children: idleText }), _jsx(Text, { color: "inactive", children: ` ${'━'.repeat(fill)} ` }), _jsx(Text, { color: failed ? 'error' : heatColor(duration), children: right })] }) }, `${node.seq}:turn`));
+            }
+            const spineColor = failed ? 'error' : running ? 'success' : node.seed === true ? 'subtle' : 'inactive';
+            const badgeBg = KIND_BADGE_BG[node.kind];
+            const badge = layout.badge === 6 ? KIND_BADGE[node.kind] : KIND_GLYPH[node.kind];
+            // Label and detail share one budget so a long tool name never pushes
+            // the duration column off the row.
+            const label = node.burst !== undefined ? `${node.label} ×${node.burst.members.length}` : node.label;
+            const detailBudget = Math.max(0, layout.detail - label.length - 1);
+            const detail = node.detail === undefined ? '' : previewText(node.detail, detailBudget);
+            const outcome = layout.outcome && node.outcome !== undefined && node.outcome !== ''
+                ? previewText(node.outcome, Math.max(8, Math.floor(layout.detail * 0.3)))
+                : '';
+            return (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, gap: 1, ...rowEvents, children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { color: spineColor, children: [pointer, spineGlyph(rows, index)] }) }), layout.index && (_jsx(Box, { flexShrink: 0, width: 8, children: _jsx(Text, { color: "subtle", children: formatClock(node.time) }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: isNew ? mix(theme[KIND_FG[node.kind]], theme.text, arriving) : KIND_FG[node.kind], backgroundColor: badgeBg, bold: true, children: badge }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", color: focused ? 'suggestion' : node.seed === true ? 'subtle' : undefined, children: [label, detail === '' ? '' : ' ', _jsx(Text, { color: focused ? 'suggestion' : 'inactive', children: detail }), outcome === '' ? '' : _jsx(Text, { color: "subtle", children: `  → ${outcome}` })] }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: running ? 'success' : heatColor(duration), children: costGlyph(duration) }) }), _jsx(Box, { flexShrink: 0, justifyContent: "flex-end", width: 7, children: _jsx(Text, { color: running ? 'success' : heatColor(duration), children: running ? '…' : duration === undefined ? '' : formatDuration(duration) }) })] }, `${node.seq}:${node.kind}`));
+        }) }));
+}

package/lib/types/components/trajectory/MiniWake.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { WaveBand } from '../../dsh-adapter/types.js';
+/**
+ * Column budget for the mini wake at a given terminal width.
+ *
+ * It is the first thing to go on a narrow terminal: the status line's own
+ * fields (model, tps, branch, cwd) are what a user reads constantly, and a
+ * decoration that squeezes them is a decoration that has overstayed.
+ *
+ * @param columns - Terminal width in cells.
+ * @returns Glyph count, or 0 when the strip should not render at all.
+ */
+export declare function miniWakeWidth(columns: number): number;
+export declare function MiniWake({ band, hint, tick, }: {
+    /** The session projected onto {@link miniWakeWidth} columns. */
+    band: WaveBand;
+    /**
+     * Key hint shown once beside the strip, until the trajectory has been
+     * opened for the first time. Absent afterwards.
+     */
+    hint?: string;
+    tick: number;
+}): React.ReactNode;
+//# sourceMappingURL=MiniWake.d.ts.map

package/lib/types/components/trajectory/MiniWake.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniWake.d.ts","sourceRoot":"","sources":["../../../../src/components/trajectory/MiniWake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,4BAA4B,CAAA;AAwCvE;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAKrD;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,IAAI,GACL,EAAE;IACD,gEAAgE;IAChE,IAAI,EAAE,QAAQ,CAAA;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,KAAK,CAAC,SAAS,CAqClB"}

package/lib/types/components/trajectory/MiniWake.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chalk from 'chalk';
+import { Box, Text, useTheme } from '../../ui.js';
+import { getTheme } from '../../theme.js';
+import { alive, mix } from '../../trajectory/motion.js';
+import { parseRGB } from '../Spinner/spinnerUtils.js';
+import { dominantChannel } from '../../dsh-adapter/trajectory/index.js';
+/**
+ * The mini wake — the whole session as a dozen glyphs in the status line.
+ *
+ * This is the conversation's only permanent mention that a second view of the
+ * session exists, and it is deliberately not a label. A chip that says
+ * `trajectory · ctrl+t` is read once and then becomes furniture; a strip that
+ * *shows the session's shape* keeps earning its columns, because the shape
+ * changes. Density says how hard the session is working, colour says at what,
+ * a red column says something broke, and the breathing edge says it is still
+ * going. Wanting to zoom in on that is a more reliable motivation than being
+ * told a key exists.
+ *
+ * It also subsumes the unread-failure badge it replaces: a failure is already
+ * a red column here, in the position where it happened, which is strictly more
+ * information than a count in the corner.
+ *
+ * Cost is one row of nothing (it shares the hint row) and, at the default
+ * width, sixteen columns. The band itself is memoized by the caller against
+ * the row count, so a frame that only ticks the animation clock re-colours
+ * these cells and computes nothing.
+ */
+/** Eight fill levels, same ramp as the full-scene wake. */
+const BLOCKS = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+const FULL = '█';
+const IDLE = '·';
+const RUNNING = '▶';
+/** Lane colour per channel. */
+function channelColor(channel, theme) {
+    switch (channel) {
+        case 'input': return theme.professionalBlue;
+        case 'tool': return theme.chromeYellow;
+        case 'model': return theme.autoAccept;
+        default: return theme.subtle;
+    }
+}
+/**
+ * Column budget for the mini wake at a given terminal width.
+ *
+ * It is the first thing to go on a narrow terminal: the status line's own
+ * fields (model, tps, branch, cwd) are what a user reads constantly, and a
+ * decoration that squeezes them is a decoration that has overstayed.
+ *
+ * @param columns - Terminal width in cells.
+ * @returns Glyph count, or 0 when the strip should not render at all.
+ */
+export function miniWakeWidth(columns) {
+    if (columns >= 120)
+        return 16;
+    if (columns >= 100)
+        return 12;
+    if (columns >= 84)
+        return 8;
+    return 0;
+}
+export function MiniWake({ band, hint, tick, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    if (band.buckets.length === 0)
+        return null;
+    const logFloor = Math.log1p(Math.max(0, band.floor));
+    const logSpan = Math.max(1e-6, Math.log1p(Math.max(1, band.peak)) - logFloor);
+    const breath = alive(tick);
+    let strip = '';
+    for (const bucket of band.buckets) {
+        if (bucket.count === 0) {
+            strip += chalk.hex(toHex(theme.subtle))(IDLE);
+            continue;
+        }
+        if (bucket.running) {
+            strip += chalk.hex(toHex(mix(theme.success, theme.planMode, breath)))(RUNNING);
+            continue;
+        }
+        const level = Math.min(BLOCKS.length, Math.max(1, Math.round(((Math.log1p(bucket.weight) - logFloor) / logSpan) * (BLOCKS.length - 1)) + 1));
+        const failed = bucket.error || bucket.retry;
+        // A failure is raised to at least half height: at this size a one-level
+        // red cell is easy to miss, and missing it defeats the point.
+        const shown = failed ? Math.max(level, 4) : level;
+        const colour = failed ? theme.error : channelColor(dominantChannel(bucket), theme);
+        strip += chalk.hex(toHex(colour))(shown >= BLOCKS.length ? FULL : BLOCKS[shown - 1]);
+    }
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "row", gap: 1, children: [_jsx(Text, { children: strip }), hint !== undefined ? _jsx(Text, { color: "subtle", children: hint }) : null] }));
+}
+/** Theme colour → `#rrggbb`, the form chalk needs. */
+function toHex(colour) {
+    if (colour.startsWith('#'))
+        return colour;
+    const parsed = parseRGB(colour);
+    if (parsed === null)
+        return '#8D95A6';
+    const hex = (value) => value.toString(16).padStart(2, '0');
+    return `#${hex(parsed.r)}${hex(parsed.g)}${hex(parsed.b)}`;
+}

package/lib/types/components/trajectory/WaveBand.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ClickEvent } from '../../ink/events/click-event.js';
+import type { WaveBand as Band } from '../../dsh-adapter/types.js';
+export declare function WaveBand({ band, width, cursorColumn, viewportStart, viewportEnd, matches, tick, alertTick, onColumnClick, }: {
+    band: Band;
+    /** Rendered width in cells; equals `band.buckets.length`. */
+    width: number;
+    /** Column the ledger cursor currently sits in. */
+    cursorColumn: number;
+    /** First and last column covered by the visible ledger window. */
+    viewportStart: number;
+    viewportEnd: number;
+    /**
+     * Columns containing a query match, or `undefined` when no query is active.
+     * Non-matching columns drop to grey so the match distribution across the
+     * whole session is visible at a glance; the silhouette never changes.
+     */
+    matches?: ReadonlySet<number>;
+    /** Scene clock tick. */
+    tick: number;
+    /** Tick the most recent alert was triggered on. */
+    alertTick: number;
+    /**
+     * Mouse pick (fullscreen): reports the clicked column (0-based within the
+     * band; the ruler row counts too — its ▐▌ bracket is the seek affordance).
+     * The scene jumps to that column's nearest event via bucket.firstIndex,
+     * which empty columns inherit from their predecessor for exactly this
+     * purpose. No hover: column density makes per-cell indication noise.
+     */
+    onColumnClick?: (column: number, event: ClickEvent) => void;
+}): React.ReactNode;
+/**
+ * Convert a theme colour to the `#rrggbb` form chalk needs.
+ *
+ * Theme values are `rgb(r,g,b)` strings; a custom theme may instead carry an
+ * ANSI name, which cannot be blended — those fall back to a neutral grey
+ * rather than crashing chalk's hex parser.
+ */
+declare function toHex(colour: string): string;
+/** Shared by the scene so every chalk colour goes through one conversion. */
+export { toHex as waveHex };
+//# sourceMappingURL=WaveBand.d.ts.map

package/lib/types/components/trajectory/WaveBand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaveBand.d.ts","sourceRoot":"","sources":["../../../../src/components/trajectory/WaveBand.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAIjE,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,EAAe,MAAM,4BAA4B,CAAA;AAmD/E,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAI,EACJ,SAAS,EACT,aAAa,GACd,EAAE;IACD,IAAI,EAAE,IAAI,CAAA;IACV,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7B,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5D,GAAG,KAAK,CAAC,SAAS,CA2GlB;AAED;;;;;;GAMG;AACH,iBAAS,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAMrC;AAED,6EAA6E;AAC7E,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,CAAA"}