feat(maestro): port the structured pane to React
Closes #246. The transcript, composer and approval controls move from structured.ts/structuredRender.ts into components under web/src/components/structured/, against docs/STRUCTURED-VIEW.md: eight row kinds, both projections, the single-active approval nonce, and diff rendering with its own line counts. The pure layers stay shared — structuredDiff.ts computes the diff, structuredRender.ts still sanitizes markdown — and model.ts holds the client-side decisions (activity grouping, notice classification, offered decisions, `/` completion) so they are testable without a DOM. Like TerminalPane, the pane draws the body only; pane chrome reads the connection through onStatusChange. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Miguel Palhas
co-authored by
Claude Opus 5
Claude Opus 5
parent
f0a1774e4d
commit
9ba1078386
@@ -0,0 +1,387 @@
|
||||
// One transcript row, by kind. docs/STRUCTURED-VIEW.md fixes the eight kinds
|
||||
// and leaves every rendering decision here: markdown for AgentText, an inline
|
||||
// italic stream for AgentThought, a tool card for ToolCall/ToolDiff, a diff
|
||||
// view for ToolDiff's content, an approval card for Approval, and an opaque
|
||||
// collapsed line for a Notice nobody has taught the client about. `Plan` is
|
||||
// deliberately not drawn — the web client has no plan rail.
|
||||
|
||||
import { useEffect, useRef, type ReactNode } from "react";
|
||||
|
||||
import { renderInlineMarkdown, renderMarkdown, formatElapsed } from "../../structuredRender.js";
|
||||
import type {
|
||||
AcpContentBlock,
|
||||
AcpPermissionOption,
|
||||
AcpToolCallContent,
|
||||
AcpToolCallLike,
|
||||
StructuredApprovalDecision,
|
||||
TranscriptRow as Row,
|
||||
TurnMeta,
|
||||
} from "../../types.js";
|
||||
import { ApprovalView } from "./ApprovalView.js";
|
||||
import { Copyable } from "./Copyable.js";
|
||||
import { DiffView } from "./DiffView.js";
|
||||
import {
|
||||
contentBlockText,
|
||||
isStateOnlyNotice,
|
||||
splitToolTitle,
|
||||
statusMeta,
|
||||
toolDiffMeta,
|
||||
turnMeta,
|
||||
} from "./model.js";
|
||||
import { safeMediaSource, toolPayload } from "./toolPayload.js";
|
||||
import { ToolIcon } from "./ToolIcon.js";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// content rows: user / agent / thought
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Model-authored markdown, sanitized by structuredRender.ts before it enters
|
||||
* the DOM. Tables get their own scroller and links open out of the app. */
|
||||
function Prose({ html }: { html: string }) {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
useEffect(() => {
|
||||
const container = ref.current;
|
||||
if (!container) return;
|
||||
for (const table of Array.from(container.querySelectorAll("table"))) {
|
||||
if (table.parentElement?.classList.contains("st-markdown-table-wrap")) continue;
|
||||
const scroller = document.createElement("div");
|
||||
scroller.className = "st-markdown-table-wrap";
|
||||
table.replaceWith(scroller);
|
||||
scroller.appendChild(table);
|
||||
}
|
||||
for (const link of container.querySelectorAll("a")) {
|
||||
link.target = "_blank";
|
||||
link.rel = "noopener noreferrer";
|
||||
}
|
||||
}, [html]);
|
||||
return <div ref={ref} className="st-body" dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
|
||||
export interface ContentRowProps {
|
||||
row: Row;
|
||||
variant: "user" | "agent" | "thought";
|
||||
/** Object URLs for images this prompt uploaded, keyed by the server path the
|
||||
* row's text names. */
|
||||
imageUrls?: Map<string, string>;
|
||||
}
|
||||
|
||||
/** `Attached file "name": "path"` references the composer appends on send. */
|
||||
const ATTACHED_FILE_RE = /Attached file "(?:[^"\\]|\\.)*": "((?:[^"\\]|\\.)*)"/g;
|
||||
|
||||
function attachedImages(text: string, imageUrls: Map<string, string>): string[] {
|
||||
const urls: string[] = [];
|
||||
ATTACHED_FILE_RE.lastIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = ATTACHED_FILE_RE.exec(text)) !== null) {
|
||||
let serverPath: string;
|
||||
try {
|
||||
serverPath = JSON.parse(`"${match[1]}"`) as string;
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
const url = imageUrls.get(serverPath);
|
||||
if (url) urls.push(url);
|
||||
}
|
||||
return urls;
|
||||
}
|
||||
|
||||
export function ContentRow({ row, variant, imageUrls }: ContentRowProps) {
|
||||
const data = row.data as { content?: AcpContentBlock } | undefined;
|
||||
const text = contentBlockText(data?.content);
|
||||
const displayText = variant === "thought" ? text.trim() : text;
|
||||
const label = variant === "user" ? "message" : variant === "agent" ? "response" : "thought";
|
||||
|
||||
let body: ReactNode;
|
||||
if (variant === "user") {
|
||||
const images = imageUrls && imageUrls.size > 0 ? attachedImages(displayText, imageUrls) : [];
|
||||
// With previews in hand the path references are noise — the image is the
|
||||
// attachment. Without them the text is all the operator has, so it stays.
|
||||
const shown =
|
||||
images.length > 0
|
||||
? displayText.replace(/\n\nAttached file "[^"]*": "[^"]*"/g, "").trim()
|
||||
: displayText;
|
||||
body = (
|
||||
<div className="st-body">
|
||||
{shown && <div className="st-user-text">{shown}</div>}
|
||||
{images.map((src) => (
|
||||
<img key={src} className="st-user-image" src={src} alt="Uploaded image" loading="lazy" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else if (variant === "agent") {
|
||||
body = <Prose html={renderMarkdown(displayText)} />;
|
||||
} else {
|
||||
body = <div className="st-body" dangerouslySetInnerHTML={{ __html: renderInlineMarkdown(displayText) }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Copyable className={`st-row st-row-${variant}`} text={displayText} label={label} data-row-id={row.id}>
|
||||
{body}
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// tool rows
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ToolDetailBlock({ label, text }: { label: string; text: string }) {
|
||||
return (
|
||||
<div className="st-tool-detail">
|
||||
<div className="st-tool-detail-label">{label}</div>
|
||||
<Copyable as="pre" text={text} label={label.toLowerCase()}>
|
||||
{text}
|
||||
</Copyable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContentBlockView({ block }: { block: AcpContentBlock }) {
|
||||
if (block.type === "text") {
|
||||
if (!block.text) return null;
|
||||
return (
|
||||
<Copyable className="st-tool-text" text={block.text} label="output">
|
||||
{block.text}
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
if (block.type === "image") {
|
||||
const source = safeMediaSource(block.mimeType, block.data, "image");
|
||||
if (source) return <img className="st-tool-image" src={source} alt="Tool output" loading="lazy" />;
|
||||
return <ToolDetailBlock label="Image" text={block.uri ?? block.mimeType ?? "Unavailable"} />;
|
||||
}
|
||||
if (block.type === "audio") {
|
||||
const source = safeMediaSource(block.mimeType, block.data, "audio");
|
||||
if (source) return <audio className="st-tool-audio" controls src={source} />;
|
||||
return <ToolDetailBlock label="Audio" text={block.mimeType ?? "Unavailable"} />;
|
||||
}
|
||||
if (block.type === "resource_link") {
|
||||
return (
|
||||
<div className="st-tool-resource">
|
||||
<span className="st-tool-resource-name">{block.title ?? block.name ?? "Resource"}</span>
|
||||
{block.uri && (
|
||||
<Copyable as="code" className="st-tool-resource-uri" text={block.uri} label="resource URI">
|
||||
{block.uri}
|
||||
</Copyable>
|
||||
)}
|
||||
{block.description && <span className="st-tool-resource-description">{block.description}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const resource = block.resource;
|
||||
if (typeof resource?.text === "string") {
|
||||
return (
|
||||
<ToolDetailBlock label={resource.uri ? `Resource · ${resource.uri}` : "Resource"} text={resource.text} />
|
||||
);
|
||||
}
|
||||
const printed = resource === undefined ? "" : JSON.stringify(resource, null, 2);
|
||||
return printed ? <ToolDetailBlock label="Resource" text={printed} /> : null;
|
||||
}
|
||||
|
||||
function ToolBody({ tool, content }: { tool: AcpToolCallLike; content: AcpToolCallContent[] }) {
|
||||
const payload = toolPayload(tool, content);
|
||||
const hasRaw = payload.raw.input !== null || payload.raw.output !== null;
|
||||
return (
|
||||
<>
|
||||
{content.map((block, index) => {
|
||||
if (block.type === "content") return <ContentBlockView key={index} block={block.content} />;
|
||||
if (block.type === "diff") return <DiffView key={index} diff={block} />;
|
||||
return (
|
||||
<div key={index} className="st-tool-terminal">
|
||||
{block.terminalId ? `Terminal · ${block.terminalId}` : "Embedded terminal"}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{payload.details.map((detail, index) => (
|
||||
<ToolDetailBlock key={`${detail.label}-${index}`} label={detail.label} text={detail.text} />
|
||||
))}
|
||||
{payload.exitCode !== null && (
|
||||
<div className="st-tool-fact">
|
||||
<span className="st-tool-fact-label">Exit code</span>
|
||||
<code className={payload.exitCode === 0 ? "st-tool-exit-ok" : "st-tool-exit-failed"}>
|
||||
{payload.exitCode}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
{hasRaw && (
|
||||
<details className="st-tool-raw">
|
||||
<summary>Raw JSON</summary>
|
||||
<div className="st-tool-raw-body">
|
||||
{payload.raw.input !== null && <ToolDetailBlock label="Input" text={payload.raw.input} />}
|
||||
{payload.raw.output !== null && <ToolDetailBlock label="Output" text={payload.raw.output} />}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** True when a tool call has anything at all to disclose — a head with nothing
|
||||
* behind it stays a plain line rather than an empty disclosure. */
|
||||
function hasToolBody(tool: AcpToolCallLike, content: AcpToolCallContent[]): boolean {
|
||||
if (content.length > 0) return true;
|
||||
const payload = toolPayload(tool, content);
|
||||
return payload.details.length > 0 || payload.exitCode !== null || payload.raw.input !== null || payload.raw.output !== null;
|
||||
}
|
||||
|
||||
export interface ToolRowProps {
|
||||
row: Row;
|
||||
expanded: boolean;
|
||||
onExpandedChange(expanded: boolean): void;
|
||||
}
|
||||
|
||||
export function ToolRow({ row, expanded, onExpandedChange }: ToolRowProps) {
|
||||
const tool = (row.data ?? {}) as AcpToolCallLike;
|
||||
const content = tool.content ?? [];
|
||||
const hasDiff = content.some((c) => c.type === "diff");
|
||||
const { label, arg } = splitToolTitle(tool.title, tool.name, tool.kind);
|
||||
const meta = statusMeta(tool.status, hasDiff);
|
||||
const metaParts: string[] = [];
|
||||
if (hasDiff) metaParts.push(toolDiffMeta(content));
|
||||
if (meta) metaParts.push(meta.text);
|
||||
const disclosable = hasToolBody(tool, content);
|
||||
const open = expanded && disclosable;
|
||||
|
||||
return (
|
||||
<div className="st-row st-row-tool" data-row-id={row.id}>
|
||||
<div className="st-tool">
|
||||
<button
|
||||
type="button"
|
||||
className="st-tool-head"
|
||||
aria-expanded={open}
|
||||
onClick={() => disclosable && onExpandedChange(!open)}
|
||||
>
|
||||
<ToolIcon kind={tool.kind} />
|
||||
<span className="st-tool-name">{label}</span>
|
||||
<span className="st-tool-arg" title={arg}>
|
||||
{arg}
|
||||
</span>
|
||||
{metaParts.length > 0 && (
|
||||
<span className={meta ? `st-tool-meta st-tool-meta-${meta.kind}` : "st-tool-meta"}>
|
||||
{metaParts.join(" · ")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{disclosable && (
|
||||
<div
|
||||
className={open ? "st-tool-out st-disclosure is-expanded" : "st-tool-out st-disclosure"}
|
||||
aria-hidden={!open}
|
||||
inert={!open}
|
||||
>
|
||||
<div className="st-disclosure-clip">
|
||||
<div className="st-disclosure-inner">
|
||||
{/* Built only once opened: a long transcript would otherwise
|
||||
render every tool's whole output up front. */}
|
||||
{open && <ToolBody tool={tool} content={content} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// notices and turn footers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function compactNumber(value: number): string {
|
||||
if (Math.abs(value) < 1_000) return String(value);
|
||||
if (Math.abs(value) < 1_000_000) return `${(value / 1_000).toFixed(value % 1_000 === 0 ? 0 : 1)}k`;
|
||||
return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}m`;
|
||||
}
|
||||
|
||||
export function TurnMetaRow({ meta }: { meta: TurnMeta }) {
|
||||
const parts = [formatElapsed(meta.elapsedMs)];
|
||||
if (typeof meta.contextDelta === "number") {
|
||||
const sign = meta.contextDelta > 0 ? "+" : "";
|
||||
parts.push(`${sign}${compactNumber(meta.contextDelta)} context tokens`);
|
||||
} else if (typeof meta.contextTokens === "number") {
|
||||
parts.push(`${compactNumber(meta.contextTokens)} context`);
|
||||
}
|
||||
if (meta.model) parts.push(meta.model);
|
||||
if (meta.outcome !== "completed") parts.push(meta.outcome);
|
||||
const text = parts.join(" · ");
|
||||
return (
|
||||
<Copyable
|
||||
className={`st-turn-meta st-turn-meta-${meta.outcome}`}
|
||||
text={text}
|
||||
label="turn details"
|
||||
aria-label={`Turn ${meta.outcome}`}
|
||||
>
|
||||
<span className="st-turn-meta-dot" aria-hidden="true" />
|
||||
<span>{text}</span>
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
/** The floor presentation docs/STRUCTURED-VIEW.md allows for a `Notice` the
|
||||
* client has nothing better to do with: an opaque, collapsed line. */
|
||||
export function NoticeRow({ row }: { row: Row }) {
|
||||
const text = `[${row.kind}]`;
|
||||
return (
|
||||
<Copyable className="st-row st-row-notice" text={text} label="notice" data-row-id={row.id}>
|
||||
<div className="st-body">{text}</div>
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// dispatch
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface TranscriptRowProps {
|
||||
row: Row;
|
||||
/** This row is the one live approval (docs/STRUCTURED-VIEW.md's nonce
|
||||
* rules). Every other approval row is history. */
|
||||
pendingApproval?: boolean;
|
||||
onDecide?: (decision: StructuredApprovalDecision) => Promise<void>;
|
||||
expanded?: boolean;
|
||||
onExpandedChange?: (expanded: boolean) => void;
|
||||
imageUrls?: Map<string, string>;
|
||||
}
|
||||
|
||||
/** One transcript row, or `null` for the rows the web client omits (`plan`,
|
||||
* and the state-only notices it consumes for `/` autocomplete). */
|
||||
export function TranscriptRow({
|
||||
row,
|
||||
pendingApproval = false,
|
||||
onDecide,
|
||||
expanded = false,
|
||||
onExpandedChange,
|
||||
imageUrls,
|
||||
}: TranscriptRowProps) {
|
||||
switch (row.kind) {
|
||||
case "user":
|
||||
return <ContentRow row={row} variant="user" imageUrls={imageUrls} />;
|
||||
case "agent_text":
|
||||
return <ContentRow row={row} variant="agent" />;
|
||||
case "agent_thought":
|
||||
return <ContentRow row={row} variant="thought" />;
|
||||
case "tool_call":
|
||||
case "tool_diff":
|
||||
return (
|
||||
<ToolRow row={row} expanded={expanded} onExpandedChange={(next) => onExpandedChange?.(next)} />
|
||||
);
|
||||
case "approval": {
|
||||
const request = (row.data ?? {}) as { toolCall?: AcpToolCallLike; options?: AcpPermissionOption[] };
|
||||
return (
|
||||
<ApprovalView
|
||||
request={request}
|
||||
pending={pendingApproval}
|
||||
onDecide={onDecide ?? (() => Promise.resolve())}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "plan":
|
||||
return null;
|
||||
case "notice": {
|
||||
if (isStateOnlyNotice(row)) return null;
|
||||
const meta = turnMeta(row);
|
||||
return meta ? <TurnMetaRow meta={meta} /> : <NoticeRow row={row} />;
|
||||
}
|
||||
default:
|
||||
return <NoticeRow row={row} />;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user