@deepseek-harness-tui/dsh-tui 0.6.0 → 0.7.0

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,20 @@
+import React from 'react';
+import type { TrajNode } from '../../dsh-adapter/types.js';
+export declare function Ledger({ rows, start, height, cursor, width, tick, arrivalTick, arrivalFrom, }: {
+    /** 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;
+}): 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;AAiBzB,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,GACZ,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;CACpB,GAAG,KAAK,CAAC,SAAS,CAoJlB"}

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    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);
+            // ── 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, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "subtle", children: `${focused ? '▸' : ' '}╵` }) }), _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 = `${focused ? '▸' : ' '}━━ ${node.label}${idleText} `;
+                const fill = Math.max(2, width - stringWidth(head) - stringWidth(right) - 2);
+                return (_jsx(Box, { width: "100%", height: 1, flexShrink: 0, children: _jsxs(Text, { color: tone, bold: true, children: [`${focused ? '▸' : ' '}━━ ${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, children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { color: spineColor, children: [focused ? '▸' : ' ', 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,33 @@
+import React from 'react';
+import type { WaveBand as Band } from '../../dsh-adapter/types.js';
+export declare function WaveBand({ band, width, cursorColumn, viewportStart, viewportEnd, matches, tick, alertTick, }: {
+    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;
+}): 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;AAMzB,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,GACV,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;CAClB,GAAG,KAAK,CAAC,SAAS,CAgGlB;AAED;;;;;;GAMG;AACH,iBAAS,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAMrC;AAED,6EAA6E;AAC7E,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,CAAA"}

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

@@ -0,0 +1,145 @@
+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 { alert, alive, mix } from '../../trajectory/motion.js';
+import { parseRGB } from '../Spinner/spinnerUtils.js';
+import { dominantChannel } from '../../dsh-adapter/trajectory/index.js';
+/**
+ * The wake — the whole session drawn as one row of glyphs.
+ *
+ * A session is a shape before it is a list: dense here, idle there, one red
+ * mark where it broke. Three lanes of coloured blocks (the form the official
+ * web overview uses, where vertical space is free) collapse badly into a
+ * terminal, so they are composed into a single band whose **height** carries
+ * cost and whose **colour** carries what kind of work it was.
+ *
+ * ## One row, two rows deep in information
+ *
+ * A two-row stack was tried for the extra eight levels of resolution and read
+ * WORSE: with a log scale anchored at the smallest column, a typical column
+ * lands near 55%, which in a two-row bar means "lower row solid, upper row a
+ * sliver" — the band turns into a slab. One row of eight levels, over weights
+ * that now carry real cost, produces the varied silhouette the band is for.
+ * The rows saved go to the ledger, which always wants more.
+ *
+ * ## Failures ride in the band, not above it
+ *
+ * A dedicated marker row spends a whole line to show three glyphs. A failed
+ * column is simply drawn in the failure colour instead: red among amber and
+ * violet is unmissable, and the failure becomes *part of* the session's shape
+ * rather than an annotation over it.
+ *
+ * Every animated cell changes colour only — never a glyph count, never a row
+ * count (see `trajectory/motion.ts`).
+ */
+/** Eight fill levels. */
+const BLOCKS = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+const FULL = '█';
+/** A column with no activity at all. */
+const IDLE = '·';
+/** The live edge. */
+const RUNNING = '▶';
+const LEVELS = BLOCKS.length;
+/** Lane colour per channel, resolved from the active theme. */
+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;
+    }
+}
+export function WaveBand({ band, width, cursorColumn, viewportStart, viewportEnd, matches, tick, alertTick, }) {
+    const [themeName] = useTheme();
+    const theme = getTheme(themeName);
+    if (band.buckets.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { color: "subtle", children: IDLE.repeat(Math.max(0, width)) }), _jsx(Text, { color: "subtle", children: ' '.repeat(Math.max(0, width)) })] }));
+    }
+    // Normalize between the smallest non-empty column and the p95 column, both
+    // in log space: the smallest real activity is one level, the busiest tops
+    // out, and four orders of magnitude in between stay distinguishable.
+    const logFloor = Math.log1p(Math.max(0, band.floor));
+    const logSpan = Math.max(1e-6, Math.log1p(Math.max(1, band.peak)) - logFloor);
+    const alertPhase = alert(tick, alertTick);
+    const breath = alive(tick);
+    let wave = '';
+    for (let column = 0; column < band.buckets.length; column++) {
+        const bucket = band.buckets[column];
+        const dimmed = matches !== undefined && !matches.has(column);
+        const isCursor = column === cursorColumn;
+        if (bucket.count === 0) {
+            wave += chalk.hex(toHex(theme.subtle))(IDLE);
+            continue;
+        }
+        if (bucket.running) {
+            wave += chalk.hex(toHex(mix(theme.success, theme.planMode, breath)))(RUNNING);
+            continue;
+        }
+        // 1..LEVELS — a non-empty column is never invisible.
+        const level = Math.min(LEVELS, Math.max(1, Math.round(((Math.log1p(bucket.weight) - logFloor) / logSpan) * (LEVELS - 1)) + 1));
+        const failed = bucket.error || bucket.retry;
+        const base = failed
+            ? mix(theme.error, theme.warningShimmer, alertPhase)
+            : channelColor(dominantChannel(bucket), theme);
+        const colour = dimmed
+            ? theme.subtle
+            : isCursor
+                ? mix(base, theme.permissionShimmer, 0.55)
+                : base;
+        const hex = toHex(colour);
+        // A failed column is never allowed to be one pixel tall: it is raised to
+        // at least half height so the red is visible at a glance, which is the
+        // whole point of colouring it.
+        const shown = failed ? Math.max(level, Math.ceil(LEVELS / 2)) : level;
+        wave += chalk.hex(hex)(shown >= LEVELS ? FULL : BLOCKS[shown - 1]);
+    }
+    // ── ruler: turn numbers plus the viewport bracket ─────────────────────────
+    const ruler = Array.from({ length: band.buckets.length }, () => ' ');
+    // Turn numbers, not anonymous ticks: the ruler is how `{ }` navigation is
+    // aimed. A label that would collide with the previous one degrades to a
+    // tick rather than overwriting digits into nonsense.
+    let lastLabelEnd = -Infinity;
+    for (const [turn, column] of band.turns) {
+        if (column >= ruler.length)
+            continue;
+        const label = String(turn);
+        if (column - 1 <= lastLabelEnd) {
+            ruler[column] = '╵';
+            continue;
+        }
+        for (let offset = 0; offset < label.length && column + offset < ruler.length; offset++) {
+            ruler[column + offset] = label[offset];
+        }
+        lastLabelEnd = column + label.length;
+    }
+    const from = Math.max(0, Math.min(band.buckets.length - 1, viewportStart));
+    const to = Math.max(from, Math.min(band.buckets.length - 1, viewportEnd));
+    let rulerText = '';
+    for (let column = 0; column < ruler.length; column++) {
+        const inViewport = column >= from && column <= to;
+        const glyph = inViewport ? (column === from ? '▐' : column === to ? '▌' : '▀') : ruler[column];
+        rulerText += inViewport
+            ? chalk.hex(toHex(theme.permission))(glyph)
+            : chalk.hex(toHex(theme.subtle))(glyph);
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { children: wave }), _jsx(Text, { children: rulerText })] }));
+}
+/**
+ * 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.
+ */
+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)}`;
+}
+/** Shared by the scene so every chalk colour goes through one conversion. */
+export { toHex as waveHex };

package/lib/types/customTheme.d.ts

@@ -1,7 +1,7 @@
 /**
  * User-defined color themes for dsh-tui.
  *
- * A theme is a JSON file in `~/.dsh-cc/themes/<name>.json`:
+ * A theme is a JSON file in `~/.dsh-tui/themes/<name>.json`:
  *
  * ```json
  * { "name": "sakura", "displayName": "Sakura Pink", "base": "dark",
@@ -23,7 +23,7 @@ import { type Theme } from './theme.js';
 /** The base palettes a user theme may overlay. */
 export declare const THEME_BASE_NAMES: readonly ["light", "dark", "dark-ansi"];
 export type ThemeBase = (typeof THEME_BASE_NAMES)[number];
-/** The directory user theme files live in (~/.dsh-cc/themes). */
+/** The directory user theme files live in (~/.dsh-tui/themes). */
 export declare const CUSTOM_THEME_DIR: string;
 /** A validated user theme file. `colors` only carries accepted overrides. */
 export type CustomThemeSpec = {
@@ -40,7 +40,7 @@ export type CustomThemeSpec = {
 };
 /**
  * Whether a name is safe to use as a file name (no path separators or dot
- * traversal). Theme names are user input from CC_TUI_THEME and /theme, so
+ * traversal). Theme names are user input from DSH_TUI_THEME and /theme, so
  * they must never escape the themes directory.
  */
 export declare function isSafeThemeName(name: string): boolean;
@@ -92,9 +92,9 @@ export declare function buildTheme(spec: CustomThemeSpec): Theme;
  */
 export declare function resolveCustomTheme(name: string): Theme | undefined;
 /**
- * Whether a name selects a usable theme: a built-in palette or a valid user
- * theme file. Used for CC_TUI_THEME / persisted-preference validation and
- * the runtime /theme switch.
+ * Whether a name selects a usable theme: a built-in palette, the `auto`
+ * pseudo-theme, or a valid user theme file. Used for DSH_TUI_THEME /
+ * persisted-preference validation and the runtime /theme switch.
  * @param name - Candidate theme name.
  * @returns True when the theme resolves.
  */

package/lib/types/customTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customTheme.d.ts","sourceRoot":"","sources":["../../src/customTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAKH,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,YAAY,CAAA;AAE9D,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,yCAA0C,CAAA;AACvE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,QAAuC,CAAA;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG;IAC5B,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,IAAI,EAAE,SAAS,CAAA;IACf,oEAAoE;IACpE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACtB,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA2CD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAQrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAUjE;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GACf,eAAe,GAAG,SAAS,CAkE7B;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,GAAE,MAAyB,GAC7B,eAAe,GAAG,SAAS,CAQ7B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,GAAE,MAAyB,GAAG,eAAe,EAAE,CAclF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,KAAK,CAEvD;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAWlE;AAcD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAGtD;AAED,4FAA4F;AAC5F,wBAAgB,qBAAqB,IAAI,IAAI,CAI5C"}
+{"version":3,"file":"customTheme.d.ts","sourceRoot":"","sources":["../../src/customTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAA0C,KAAK,KAAK,EAAE,MAAM,YAAY,CAAA;AAG/E,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,yCAA0C,CAAA;AACvE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,QAA2B,CAAA;AAExD,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG;IAC5B,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAA;IACZ,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,IAAI,EAAE,SAAS,CAAA;IACf,oEAAoE;IACpE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACtB,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA2CD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAQrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAUjE;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GACf,eAAe,GAAG,SAAS,CAqE7B;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,GAAE,MAAyB,GAC7B,eAAe,GAAG,SAAS,CAQ7B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,GAAE,MAAyB,GAAG,eAAe,EAAE,CAclF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,KAAK,CAEvD;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAWlE;AAcD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAGtD;AAED,4FAA4F;AAC5F,wBAAgB,qBAAqB,IAAI,IAAI,CAI5C"}