@spexcode/transcript-ui 0.7.0-next.1 → 0.7.0-next.10

package/dist/ToolLine.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useTranscriptUi } from './context.js';
 import { Caret, Spinner } from './icons.js';
 import { isRunning } from './segments.js';
-import { runKinds, splitTarget, toolTarget, toolVerb } from './vocabulary.js';
+import { prettyInput, runKinds, splitTarget, toolName, toolTarget, toolVerb } from './vocabulary.js';
 // A LIVE FRAME WITHHOLDS OUTPUT BODIES: a recorded result is `null` on the wire, its size told, and the body
 // is fetched once when a person opens the call, through the host's loader.
 function WithheldOutput({ tool }) {
@@ -28,8 +28,9 @@ function WithheldOutput({ tool }) {
 }
 // One tool call as a SENTENCE, not a card: verb, target, and the size of what came back. It is
 // `inline-flex` so a dozen of them read as a list of things that happened rather than a dozen boxes. There
-// is no success mark, because the transcript carries no per-tool status — the past-tense verb is the whole
-// claim. A running call wears a small spinner and the word.
+// is no success mark — the past-tense verb is the whole claim. A running call wears a small spinner and the
+// word; a call whose harness recorded a structured failure wears `failed`, and one the person refused wears
+// `rejected` — the outcome is the transcript's own field ([[transcript-reader]]), never read off the output prose.
 export function ToolLine({ tool, open, onToggle, live = false }) {
     const { labels, vocabulary } = useTranscriptUi();
     const target = toolTarget(tool.input, vocabulary);
@@ -38,10 +39,12 @@ export function ToolLine({ tool, open, onToggle, live = false }) {
     const withheld = tool.output === null;
     const canOpen = !!tool.input || tool.output !== undefined || withheld;
     const running = isRunning(tool, live);
-    const row = (_jsxs(_Fragment, { children: [_jsx("span", { className: "tx-tool-verb", children: toolVerb(tool.name, vocabulary) }), lead && _jsx("span", { className: "tx-tool-target", children: lead }), trail && _jsx("span", { className: "tx-tool-trail", children: trail }), lines > 0 && _jsx("span", { className: "tx-tool-size", children: labels.lines(lines) }), running && _jsxs("span", { className: "tx-tool-running", children: [_jsx(Spinner, {}), labels.running] }), canOpen && _jsx(Caret, { open: open, className: "tx-tool-caret" })] }));
-    return (_jsxs("div", { className: `tx-tool${running ? ' is-running' : ''}`, children: [canOpen
+    const outcome = tool.outcome;
+    const { server } = toolName(tool.name);
+    const row = (_jsxs(_Fragment, { children: [_jsx("span", { className: "tx-tool-verb", children: toolVerb(tool.name, vocabulary) }), server && _jsx("span", { className: "tx-tool-server", children: server }), lead && _jsx("span", { className: "tx-tool-target", children: lead }), trail && _jsx("span", { className: "tx-tool-trail", children: trail }), lines > 0 && _jsx("span", { className: "tx-tool-size", children: labels.lines(lines) }), running && _jsxs("span", { className: "tx-tool-running", children: [_jsx(Spinner, {}), labels.running] }), outcome && _jsx("span", { className: `tx-tool-outcome is-${outcome}`, children: outcome === 'failed' ? labels.failed : labels.rejected }), canOpen && _jsx(Caret, { open: open, className: "tx-tool-caret" })] }));
+    return (_jsxs("div", { className: `tx-tool${running ? ' is-running' : ''}${outcome ? ` is-${outcome}` : ''}`, children: [canOpen
                 ? _jsx("button", { type: "button", onClick: onToggle, "aria-expanded": open, className: "tx-tool-row is-openable", children: row })
-                : _jsx("div", { className: "tx-tool-row", children: row }), open && canOpen && _jsxs(_Fragment, { children: [tool.input && _jsx("pre", { className: "tx-tool-in", children: tool.input }), withheld
+                : _jsx("div", { className: "tx-tool-row", children: row }), open && canOpen && _jsxs(_Fragment, { children: [tool.input && _jsx("pre", { className: "tx-tool-in", children: prettyInput(tool.input) }), withheld
                         ? _jsx(WithheldOutput, { tool: tool })
                         : tool.output !== undefined && _jsx("pre", { className: "tx-tool-out", children: tool.output })] })] }));
 }
@@ -58,5 +61,7 @@ export function ToolRun({ tools, openIds, onToggle, live = false, fold = true })
     const id = `run:${tools[0].id}`;
     const open = openIds.has(id);
     const running = tools.some((tool) => isRunning(tool, live));
-    return _jsx("div", { className: "tx-tools", children: _jsxs("div", { className: `tx-tool${running ? ' is-running' : ''}`, children: [_jsxs("button", { type: "button", className: "tx-tool-row is-openable is-run", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-tool-verb", children: labels.toolUses(tools.length) }), _jsx("span", { className: "tx-tool-trail", children: runKinds(tools, vocabulary) }), _jsx(Caret, { open: open, className: "tx-tool-caret" })] }), open && _jsx("div", { className: "tx-tool-kids", children: tools.map(line) })] }) });
+    // a fold must not hide a failure: the row counts the calls that did not succeed
+    const failed = tools.filter((tool) => tool.outcome).length;
+    return _jsx("div", { className: "tx-tools", children: _jsxs("div", { className: `tx-tool${running ? ' is-running' : ''}${failed ? ' is-failed' : ''}`, children: [_jsxs("button", { type: "button", className: "tx-tool-row is-openable is-run", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-tool-verb", children: labels.toolUses(tools.length) }), _jsx("span", { className: "tx-tool-trail", children: runKinds(tools, vocabulary) }), failed > 0 && _jsx("span", { className: "tx-tool-outcome is-failed", children: labels.failedCount(failed) }), _jsx(Caret, { open: open, className: "tx-tool-caret" })] }), open && _jsx("div", { className: "tx-tool-kids", children: tools.map(line) })] }) });
 }

package/dist/TranscriptView.d.ts

@@ -8,6 +8,9 @@ export declare function TurnBody({ turn, openIds, onToggle, live, fold }: {
     live: boolean;
     fold?: boolean;
 } & Disclosure): import("react").JSX.Element;
+export declare function QuotedTurn({ turn }: {
+    turn: AnyTurn;
+}): import("react").JSX.Element;
 export declare function WorkSegmentView({ segment, openIds, onToggle, live }: {
     segment: Work;
     live: boolean;

package/dist/TranscriptView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useTranscriptUi } from './context.js';
 import { Caret } from './icons.js';
 import { Quote } from './Quote.js';
+import { parseEnvelope } from './envelope.js';
 import { segments } from './segments.js';
 import { ToolRun } from './ToolLine.js';
 import { useDisclosure } from './useDisclosure.js';
@@ -11,19 +12,27 @@ export function TurnBody({ turn, openIds, onToggle, live, fold = true }) {
     const { renderText } = useTranscriptUi();
     return _jsxs("div", { className: "tx-say", children: [turn.text && _jsx("div", { className: "tx-say-text", children: renderText(turn.text) }), _jsx(ToolRun, { tools: turn.tools, openIds: openIds, onToggle: onToggle, live: live, fold: fold })] });
 }
+// a quoted turn is read through the envelope rows: the sender it names, the body it carried
+export function QuotedTurn({ turn }) {
+    const { envelopes } = useTranscriptUi();
+    const envelope = parseEnvelope(turn.text || '', envelopes);
+    return _jsx(Quote, { who: envelope.who, ts: envelope.at ?? turn.at, text: envelope.body, className: "tx-quote-nested" });
+}
 export function WorkSegmentView({ segment, openIds, onToggle, live }) {
     const { labels, vocabulary } = useTranscriptUi();
     const id = `seg:${segment.work[0]?.id || segment.answer?.id}`;
     const open = openIds.has(id);
     const kinds = runKinds(segment.work.flatMap((turn) => turn.tools ?? []), vocabulary);
     const foldedCalls = segment.work.reduce((n, turn) => n + (turn.tools?.length || 0), 0);
+    // a fold must not hide a failure: the row counts the calls whose harness recorded one
+    const failedCalls = segment.work.reduce((n, turn) => n + (turn.tools?.filter((tool) => tool.outcome).length || 0), 0);
     // history folds its runs; the work in progress (a live segment's calls after its newest prose) does not
     const history = !segment.now || !!segment.answer;
-    return _jsxs(_Fragment, { children: [segment.folded ? (_jsxs("div", { className: "tx-work", children: [_jsxs("button", { type: "button", className: "tx-work-row", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-work-lead", children: labels.toolUses(foldedCalls) }), kinds && _jsx("span", { className: "tx-work-detail", children: kinds }), _jsx(Caret, { open: open, className: "tx-work-caret" })] }), open && _jsx("div", { className: "tx-work-body", children: segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live }, turn.id)) })] })) : segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: history }, turn.id)), segment.answer && _jsx(TurnBody, { turn: segment.answer, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }), segment.after.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }, turn.id))] });
+    return _jsxs(_Fragment, { children: [segment.folded ? (_jsxs("div", { className: `tx-work${failedCalls ? ' is-failed' : ''}`, children: [_jsxs("button", { type: "button", className: "tx-work-row", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-work-lead", children: labels.toolUses(foldedCalls) }), kinds && _jsx("span", { className: "tx-work-detail", children: kinds }), failedCalls > 0 && _jsx("span", { className: "tx-tool-outcome is-failed", children: labels.failedCount(failedCalls) }), _jsx(Caret, { open: open, className: "tx-work-caret" })] }), open && _jsx("div", { className: "tx-work-body", children: segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live }, turn.id)) })] })) : segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: history }, turn.id)), segment.answer && _jsx(TurnBody, { turn: segment.answer, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }), segment.after.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }, turn.id))] });
 }
 export function SegmentView({ segment, ...rest }) {
     if (segment.kind === 'quote')
-        return _jsx(Quote, { ts: segment.turn.at, text: segment.turn.text || '', className: "tx-quote-nested" });
+        return _jsx(QuotedTurn, { turn: segment.turn });
     return _jsx(WorkSegmentView, { segment: segment, ...rest });
 }
 // THE TURNS, in the grammar: quotes where the host wants them, work segments folded behind their answers

package/dist/context.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { type Vocabulary } from './vocabulary.js';
 import type { FoldPolicy, UserTurnPolicy } from './segments.js';
+import { type EnvelopeParser } from './envelope.js';
 export type ToolOutputResult = {
     ok: true;
     output: string | null;
@@ -11,6 +12,9 @@ export type ToolOutputResult = {
 export type Labels = Readonly<{
     loading: string;
     running: string;
+    failed: string;
+    rejected: string;
+    failedCount: (n: number) => string;
     more: string;
     toolUses: (n: number) => string;
     lines: (n: number) => string;
@@ -27,6 +31,7 @@ export type TranscriptUiOptions = Readonly<{
     loadToolOutput: ((toolId: string) => Promise<ToolOutputResult>) | null;
     labels: Labels;
     vocabulary: Vocabulary;
+    envelopes: readonly EnvelopeParser[];
     fold: FoldPolicy;
     runMin: number;
     userTurns: UserTurnPolicy;

package/dist/context.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import { defaultVocabulary } from './vocabulary.js';
+import { defaultEnvelopes } from './envelope.js';
 export const defaultLabels = {
     loading: 'loading…',
     running: 'running',
+    failed: 'failed',
+    rejected: 'rejected',
+    failedCount: (n) => `${n} failed`,
     more: 'more',
     toolUses: (n) => `${n} tool use${n === 1 ? '' : 's'}`,
     lines: (n) => `${n} line${n === 1 ? '' : 's'}`,
@@ -20,6 +24,7 @@ export const defaultOptions = {
     loadToolOutput: null,
     labels: defaultLabels,
     vocabulary: defaultVocabulary,
+    envelopes: defaultEnvelopes,
     fold: 'segments',
     runMin: 3,
     userTurns: 'boundary',

package/dist/envelope.d.ts

@@ -0,0 +1,10 @@
+export type Envelope = Readonly<{
+    who: string | null;
+    id?: string | null;
+    at?: number | null;
+    body: string;
+}>;
+export type EnvelopeParser = (text: string) => Envelope | null;
+export declare const spexEnvelope: EnvelopeParser;
+export declare const defaultEnvelopes: readonly EnvelopeParser[];
+export declare function parseEnvelope(text: string, parsers?: readonly EnvelopeParser[]): Envelope;

package/dist/envelope.js

@@ -0,0 +1,18 @@
+// `— from session "label" (id) on machine m. To reply: spex session send [--ssh addr] id "<your reply>"`
+const SPEX_FOOTER = /\n*— from session (?:"(.*?)" \(([^\s)]+)\)|(\S+))(?: on machine \S+)?\. To reply: spex session send (?:--ssh \S+ )?\S+ "<your reply>"\s*$/;
+export const spexEnvelope = (text) => {
+    const m = SPEX_FOOTER.exec(text || '');
+    if (!m)
+        return null;
+    const id = m[2] || m[3] || null;
+    return { who: m[1] || id, id, body: text.slice(0, m.index) };
+};
+export const defaultEnvelopes = [spexEnvelope];
+export function parseEnvelope(text, parsers = defaultEnvelopes) {
+    for (const parse of parsers) {
+        const envelope = parse(text);
+        if (envelope)
+            return envelope;
+    }
+    return { who: null, body: text };
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './vocabulary.js';
+export * from './envelope.js';
 export * from './segments.js';
 export * from './context.js';
 export * from './icons.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './vocabulary.js';
+export * from './envelope.js';
 export * from './segments.js';
 export * from './context.js';
 export * from './icons.js';

package/dist/vocabulary.d.ts

@@ -11,11 +11,16 @@ export declare function extendVocabulary(base: Vocabulary, extra: Partial<{
     quiet: Iterable<string>;
     targetKeys: readonly string[];
 }>): Vocabulary;
+export declare function toolName(name: string | undefined): {
+    tool: string;
+    server: string | null;
+};
 export declare const toolVerb: (name: string | undefined, vocabulary?: Readonly<{
     verbs: Readonly<Record<string, string>>;
     quiet: ReadonlySet<string>;
     targetKeys: readonly string[];
 }>) => string;
+export declare function prettyInput(input: string | undefined): string;
 export declare const isQuietTool: (name: string, vocabulary?: Readonly<{
     verbs: Readonly<Record<string, string>>;
     quiet: ReadonlySet<string>;

package/dist/vocabulary.js

@@ -3,6 +3,7 @@ export const defaultVocabulary = {
         Read: 'Read', NotebookRead: 'Read',
         Grep: 'Searched', Glob: 'Searched', WebSearch: 'Searched the web',
         Bash: 'Ran', BashOutput: 'Read output',
+        exec: 'Ran', shell: 'Ran', wait: 'Waited',
         Edit: 'Edited', MultiEdit: 'Edited', NotebookEdit: 'Edited',
         Write: 'Wrote',
         WebFetch: 'Fetched',
@@ -10,7 +11,7 @@ export const defaultVocabulary = {
         TodoWrite: 'Updated the plan',
     },
     quiet: new Set(['Read', 'NotebookRead', 'Grep', 'Glob', 'WebFetch', 'WebSearch']),
-    targetKeys: ['file_path', 'filePath', 'path', 'notebook_path', 'pattern', 'query', 'command', 'cmd', 'url', 'description'],
+    targetKeys: ['file_path', 'filePath', 'path', 'notebook_path', 'pattern', 'query', 'command', 'cmd', 'url', 'cell_id', 'description'],
 };
 export function extendVocabulary(base, extra) {
     return {
@@ -19,8 +20,42 @@ export function extendVocabulary(base, extra) {
         targetKeys: extra.targetKeys ? [...extra.targetKeys, ...base.targetKeys.filter((key) => !extra.targetKeys.includes(key))] : base.targetKeys,
     };
 }
-export const toolVerb = (name, vocabulary = defaultVocabulary) => (name && vocabulary.verbs[name]) || name || 'tool';
+// AN MCP TOOL IS NAMED BY ITS SERVER AND ITS TOOL. Every harness that speaks MCP writes the call as
+// `mcp__<server>__<tool>`; the reader wants both halves, apart — measured across four transcript renderers,
+// three knew the server in their data and lost it on the screen. The vocabulary may name the full id or the
+// bare tool; an unnamed MCP tool reads as its tool half, never the whole mangled id.
+export function toolName(name) {
+    const m = name ? /^mcp__(.+?)__(.+)$/.exec(name) : null;
+    return m ? { tool: m[2], server: m[1] } : { tool: name || 'tool', server: null };
+}
+export const toolVerb = (name, vocabulary = defaultVocabulary) => {
+    if (name && vocabulary.verbs[name])
+        return vocabulary.verbs[name];
+    const { tool } = toolName(name);
+    return vocabulary.verbs[tool] || tool;
+};
+// THE ARGUMENTS, WHEN OPENED, READ AS THE ARGUMENTS: a JSON object pretty-printed one field per line, a bare
+// string (a script, a command) as itself. The wire form is one line; nobody reads one line of JSON.
+export function prettyInput(input) {
+    if (typeof input !== 'string' || !input)
+        return '';
+    try {
+        const parsed = JSON.parse(input);
+        return parsed && typeof parsed === 'object' ? JSON.stringify(parsed, null, 2) : input;
+    }
+    catch {
+        return input;
+    }
+}
 export const isQuietTool = (name, vocabulary = defaultVocabulary) => vocabulary.quiet.has(name);
+// A command's or a script's head: its first non-empty line, clamped. A one-liner is itself; a multi-line
+// script shows the line that names it, and the CSS ellipsis takes the rest.
+function firstLine(text) {
+    const line = text.split(/\r?\n/).map((l) => l.trim()).find(Boolean);
+    if (!line)
+        return null;
+    return line.length <= 160 ? line : line.slice(0, 160);
+}
 // The target, from the call's own arguments. `input` is the raw JSON of the arguments (or a bare string), so
 // this reads the field the tool actually names and shows NOTHING when it cannot — a wrong target is worse
 // than no target, and a truncated blob of JSON is not a target at all.
@@ -28,14 +63,17 @@ export function toolTarget(input, vocabulary = defaultVocabulary) {
     if (typeof input !== 'string' || !input)
         return null;
     let parsed = null;
+    // A tool whose input is a bare string is a command or a script (a codex `exec` cell, a shell one-liner). Its
+    // FIRST non-empty line names it — a wall of script has a head worth reading, and nothing is worse than a row
+    // that says only "exec". JSON is parsed for its named target below; a bare string is its own head.
     try {
         parsed = JSON.parse(input);
     }
     catch {
-        return input.length <= 80 ? input : null;
+        return firstLine(input);
     }
     if (!parsed || typeof parsed !== 'object')
-        return typeof parsed === 'string' ? parsed : null;
+        return typeof parsed === 'string' ? firstLine(parsed) : null;
     for (const key of vocabulary.targetKeys) {
         const value = parsed[key];
         if (typeof value === 'string' && value.trim())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spexcode/transcript-ui",
-  "version": "0.7.0-next.1",
+  "version": "0.7.0-next.10",
   "type": "module",
   "description": "React components that draw a normalized agent transcript — the person quoted, the agent as the page, a tool call as a sentence, the work folded behind its answer — with the fold, the prose renderer, the tool vocabulary, the labels and the design tokens all tunable.",
   "files": [
@@ -24,7 +24,7 @@
     "test": "npm run build && tsx --test src/*.test.tsx"
   },
   "dependencies": {
-    "@spexcode/transcript": "0.7.0-next.1"
+    "@spexcode/transcript": "0.7.0-next.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0"

package/styles.css

@@ -85,6 +85,7 @@
 .tx-tool-target { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-ink); }
 .tx-tool-trail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-muted); }
 .tx-tool-size { flex: none; color: var(--tx-muted); font-variant-numeric: tabular-nums; }
+.tx-tool-server { flex: none; color: var(--tx-muted); font-size: var(--tx-type-caption); padding: 0 5px; border: 1px solid var(--tx-edge); border-radius: 999px; }
 .tx-tool-row.is-run .tx-tool-verb { color: var(--tx-muted); font-weight: inherit; }
 .tx-tool-kids { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--tx-edge); }
 .tx-tool-in, .tx-tool-out {
@@ -104,6 +105,8 @@
    of words still being said. Reduced motion keeps the marks and drops the movement. */
 .tx-tool.is-running .tx-tool-verb { color: var(--tx-ink2); }
 .tx-tool-running { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--tx-orange); font-size: var(--tx-type-caption); }
+.tx-tool-outcome { flex: none; color: var(--tx-red); font-size: var(--tx-type-caption); }
+.tx-tool.is-failed > .tx-tool-row .tx-tool-verb, .tx-tool.is-rejected > .tx-tool-row .tx-tool-verb { color: var(--tx-red); }
 .tx-spin { animation: tx-spin 1s linear infinite; }
 @keyframes tx-spin { to { transform: rotate(360deg); } }
 .tx-live { margin-top: var(--tx-space-2); min-width: 0; }