@spexcode/transcript-ui 0.7.0-next.4 → 0.7.0-next.6

package/dist/ToolLine.js

@@ -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,8 +39,9 @@ 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 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] }), 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(WithheldOutput, { tool: tool })
@@ -58,5 +60,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.js

@@ -17,9 +17,11 @@ export function WorkSegmentView({ segment, openIds, onToggle, live }) {
     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')

package/dist/context.d.ts

@@ -11,6 +11,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;

package/dist/context.js

@@ -4,6 +4,9 @@ import { defaultVocabulary } from './vocabulary.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'}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spexcode/transcript-ui",
-  "version": "0.7.0-next.4",
+  "version": "0.7.0-next.6",
   "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.4"
+    "@spexcode/transcript": "0.7.0-next.6"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0"

package/styles.css

@@ -104,6 +104,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; }