@spexcode/transcript-ui 0.7.0-next.7 → 0.7.0-next.8

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 }) {
@@ -40,10 +40,11 @@ export function ToolLine({ tool, open, onToggle, live = false }) {
     const canOpen = !!tool.input || tool.output !== undefined || withheld;
     const running = isRunning(tool, live);
     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" })] }));
+    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 })] })] }));
 }

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

@@ -19,7 +19,33 @@ 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);
 // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spexcode/transcript-ui",
-  "version": "0.7.0-next.7",
+  "version": "0.7.0-next.8",
   "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.7"
+    "@spexcode/transcript": "0.7.0-next.8"
   },
   "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 {