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

package/dist/ToolLine.js

@@ -1,9 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useTranscriptUi } from './context.js';
 import { Caret, Spinner } from './icons.js';
 import { isRunning } from './segments.js';
-import { prettyInput, runKinds, splitTarget, toolName, toolTarget, toolVerb } from './vocabulary.js';
+import { prettyInput, runKinds, splitTarget, stripAnsi, toolName, toolTarget, toolVerb } from './vocabulary.js';
+const utf8 = new TextEncoder();
+// THE CAP IS SAID WHERE IT BIT. The reader keeps `outputBytes` at the result's true size while the body it
+// carries stops at the per-tool cap ([[transcript-reader]]), so the difference is exactly what this call is
+// missing. The read as a whole already reports its omitted bytes, but that line cannot say WHICH result was
+// cut, and a prefix drawn with no mark reads as the whole output.
+function OutputCut({ tool, body }) {
+    const { labels } = useTranscriptUi();
+    const omitted = (tool.outputBytes || 0) - utf8.encode(body).length;
+    return omitted > 0 ? _jsx("div", { className: "tx-tool-cut", children: labels.outputCut(omitted) }) : null;
+}
 // 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 }) {
@@ -24,7 +34,8 @@ function WithheldOutput({ tool }) {
         return _jsx("div", { className: "tx-tool-out tx-tool-out-state", children: labels.loading });
     if (!fetched.ok)
         return _jsx("div", { className: "tx-tool-out tx-tool-out-state is-error", children: fetched.error });
-    return _jsx("pre", { className: "tx-tool-out", children: fetched.output ?? '' });
+    const body = fetched.output ?? '';
+    return _jsxs(_Fragment, { children: [_jsx("pre", { className: "tx-tool-out", children: stripAnsi(body) }), _jsx(OutputCut, { tool: tool, body: body })] });
 }
 // 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
@@ -44,9 +55,9 @@ export function ToolLine({ tool, open, onToggle, live = false }) {
     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: prettyInput(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: stripAnsi(prettyInput(tool.input)) }), withheld
                         ? _jsx(WithheldOutput, { tool: tool })
-                        : tool.output !== undefined && _jsx("pre", { className: "tx-tool-out", children: tool.output })] })] }));
+                        : tool.output !== undefined && _jsxs(_Fragment, { children: [_jsx("pre", { className: "tx-tool-out", children: stripAnsi(tool.output) }), _jsx(OutputCut, { tool: tool, body: tool.output })] })] })] }));
 }
 // A turn's tool calls are consecutive by construction, so "a run" is just "this turn's calls". `runMin` or
 // more fold to one row; fewer stay sentences, where the verb and target are worth reading on sight. `fold`

package/dist/context.d.ts

@@ -19,6 +19,7 @@ export type Labels = Readonly<{
     toolUses: (n: number) => string;
     lines: (n: number) => string;
     empty: string;
+    outputCut: (omittedBytes: number) => string;
     truncated: (info: {
         omittedTurns: number;
         omittedBytes: number;

package/dist/context.js

@@ -12,6 +12,7 @@ export const defaultLabels = {
     toolUses: (n) => `${n} tool use${n === 1 ? '' : 's'}`,
     lines: (n) => `${n} line${n === 1 ? '' : 's'}`,
     empty: 'nothing in this interval',
+    outputCut: (n) => `${n.toLocaleString()} more bytes not shown`,
     truncated: ({ omittedTurns, omittedBytes, outOfOrderEvents }) => `truncated: ${omittedTurns} turns and ${omittedBytes} bytes omitted${outOfOrderEvents ? `, ${outOfOrderEvents} records out of order` : ''}`,
 };
 // the default prose renderer: paragraphs on blank lines, line breaks kept — a message was typed, not laid out

package/dist/segments.js

@@ -37,7 +37,12 @@ export function segments(turns, options = {}) {
         const answer = run[lead]?.text ? run[lead] : null;
         const work = answer ? run.slice(0, lead) : run;
         const after = answer ? run.slice(lead + 1) : [];
-        out.push({ kind: 'work', work, answer, after, calls, folded: fold === 'segments' && calls >= runMin && work.length > 0, now: false });
+        // THE FOLD DECIDES ON WHAT IT WILL HIDE, which is the WORK's calls — not the segment's. `calls` counts the
+        // whole run, answer included, and a run whose calls all sit on its answer turn hides none of them: deciding
+        // on that total drew a fold row reading "0 tool uses" over prose, a row naming something it did not stand
+        // for. The row counts the hidden calls, so the decision must count the same ones.
+        const hidden = work.reduce((n, turn) => n + (turn.tools?.length || 0), 0);
+        out.push({ kind: 'work', work, answer, after, calls, folded: fold === 'segments' && hidden >= runMin && work.length > 0, now: false });
         run = [];
     };
     for (const turn of turns) {

package/dist/vocabulary.d.ts

@@ -21,6 +21,7 @@ export declare const toolVerb: (name: string | undefined, vocabulary?: Readonly<
     targetKeys: readonly string[];
 }>) => string;
 export declare function prettyInput(input: string | undefined): string;
+export declare const stripAnsi: (text: string) => string;
 export declare const isQuietTool: (name: string, vocabulary?: Readonly<{
     verbs: Readonly<Record<string, string>>;
     quiet: ReadonlySet<string>;

package/dist/vocabulary.js

@@ -47,11 +47,21 @@ export function prettyInput(input) {
         return input;
     }
 }
+// TOOL OUTPUT IS A RECORD OF WHAT A PROGRAM PRINTED, AND PROGRAMS PRINT COLOUR. Real transcripts are full of
+// it — tens of thousands of escape sequences across a few hundred Claude and Codex files — and a `<pre>` draws
+// them as literal `[0m[91m` debris in the middle of the sentence a person is trying to read. The reader keeps
+// those bytes faithfully; this view is prose rather than a terminal (a terminal is [[terminal-ui]]'s job), so
+// the sequences are dropped at the moment of drawing and never from the record. Because the page then holds no
+// escapes, text copied off it is already clean — no separate copy path is needed. Covers the CSI forms colour
+// uses, OSC strings with either terminator, and the two-byte escapes; a lone ESC in prose is left alone.
+const ANSI = /\u001b\[[0-9;?]*[ -/]*[@-~]|\u001b\][^\u0007\u001b]*(?:\u0007|\u001b\\)|\u001b[@-Z\\-_]/g;
+export const stripAnsi = (text) => text.replace(ANSI, '');
 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);
+    // escapes go before the 160-char cut, or the cut lands inside a sequence and leaves half of one on the row
+    const line = stripAnsi(text).split(/\r?\n/).map((l) => l.trim()).find(Boolean);
     if (!line)
         return null;
     return line.length <= 160 ? line : line.slice(0, 160);
@@ -76,8 +86,11 @@ export function toolTarget(input, vocabulary = defaultVocabulary) {
         return typeof parsed === 'string' ? firstLine(parsed) : null;
     for (const key of vocabulary.targetKeys) {
         const value = parsed[key];
-        if (typeof value === 'string' && value.trim())
-            return value.trim();
+        if (typeof value !== 'string')
+            continue;
+        const named = stripAnsi(value).trim();
+        if (named)
+            return named;
     }
     return null;
 }

package/package.json

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

package/styles.css

@@ -106,6 +106,7 @@
 .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-cut { color: var(--tx-muted); font-size: var(--tx-type-caption); padding: var(--tx-space-1) 0 0; }
 .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); } }