web: tool cards show what ran — summary line (bash command / file path) + edit/write line diffs (LCS, +/- coloring); 286 tests green
This commit is contained in:
+184
-21
@@ -108,20 +108,20 @@ export function renderMarkdown(text: string, query = ""): React.ReactNode[] {
|
||||
n += 1;
|
||||
code = null;
|
||||
}
|
||||
} else if (code !== null) {
|
||||
code.push(line);
|
||||
} else {
|
||||
} else if (code === null) {
|
||||
plain.push(line);
|
||||
} else {
|
||||
code.push(line);
|
||||
}
|
||||
}
|
||||
if (code !== null) {
|
||||
if (code === null) {
|
||||
flushPlain();
|
||||
} else {
|
||||
out.push(
|
||||
<pre className="md-code" key={`c-${n}`}>
|
||||
{code.join("\n")}
|
||||
</pre>,
|
||||
);
|
||||
} else {
|
||||
flushPlain();
|
||||
}
|
||||
return out;
|
||||
}
|
||||
@@ -162,16 +162,27 @@ function CopyButton({ text }: { text: string }): React.ReactNode {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ---------- pretty tool args ----------
|
||||
|
||||
// Keys shown first when present (most readable "what is this tool doing"
|
||||
// signal); the rest follow in their original order.
|
||||
const ARG_PRIORITY: string[] = [
|
||||
"command", "path", "file_path", "pattern", "url", "query", "content",
|
||||
"prompt", "task", "description",
|
||||
"command",
|
||||
"path",
|
||||
"file_path",
|
||||
"pattern",
|
||||
"url",
|
||||
"query",
|
||||
"content",
|
||||
"prompt",
|
||||
"task",
|
||||
"description",
|
||||
];
|
||||
|
||||
// Above this many lines per side, LCS is skipped and the whole old block is
|
||||
// rendered removed + the whole new block added.
|
||||
const DIFF_MAX_LINES: number = 400;
|
||||
|
||||
export interface ArgEntry {
|
||||
k: string | null;
|
||||
v: string;
|
||||
@@ -186,8 +197,7 @@ export function toolArgsEntries(argsText: string): ArgEntry[] {
|
||||
} catch {
|
||||
return [{ k: null, v: argsText }];
|
||||
}
|
||||
if (typeof parsed === "string")
|
||||
return [{ k: null, v: parsed }];
|
||||
if (typeof parsed === "string") return [{ k: null, v: parsed }];
|
||||
if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed))
|
||||
return [{ k: null, v: argsText }];
|
||||
const obj = parsed as Record<string, unknown>;
|
||||
@@ -202,7 +212,7 @@ export function toolArgsEntries(argsText: string): ArgEntry[] {
|
||||
const v =
|
||||
typeof raw === "string"
|
||||
? raw
|
||||
: JSON.stringify(raw, null, 2) ?? String(raw);
|
||||
: (JSON.stringify(raw, null, 2) ?? String(raw));
|
||||
entries.push({ k, v });
|
||||
}
|
||||
if (entries.length === 1 && entries[0] !== undefined)
|
||||
@@ -210,6 +220,148 @@ export function toolArgsEntries(argsText: string): ArgEntry[] {
|
||||
return entries;
|
||||
}
|
||||
|
||||
/** One-line "what is this tool doing" for the collapsed summary line:
|
||||
* the highest-priority arg's value (bash → command, read/write/edit → path). */
|
||||
export function toolSummaryText(argsText: string): string {
|
||||
const first = toolArgsEntries(argsText)[0];
|
||||
return first === undefined ? "" : first.v;
|
||||
}
|
||||
|
||||
// ---------- edit/write diff view ----------
|
||||
|
||||
export interface DiffLine {
|
||||
kind: "ctx" | "add" | "del";
|
||||
text: string;
|
||||
}
|
||||
|
||||
/** Line-level LCS diff between two text blocks. */
|
||||
export function lineDiff(a: string, b: string): DiffLine[] {
|
||||
const left: string[] = a.split("\n");
|
||||
const right: string[] = b.split("\n");
|
||||
if (left.length > DIFF_MAX_LINES || right.length > DIFF_MAX_LINES)
|
||||
return [
|
||||
...left.map((text): DiffLine => ({ kind: "del", text })),
|
||||
...right.map((text): DiffLine => ({ kind: "add", text })),
|
||||
];
|
||||
const n: number = left.length;
|
||||
const m: number = right.length;
|
||||
const dp: number[][] = Array.from({ length: n + 1 }, () =>
|
||||
Array.from({ length: m + 1 }, (): number => 0),
|
||||
);
|
||||
for (let i = n - 1; i >= 0; i--) {
|
||||
const row: number[] | undefined = dp[i];
|
||||
if (row === undefined) continue;
|
||||
for (let j = m - 1; j >= 0; j--) {
|
||||
const a: string | undefined = left[i];
|
||||
const b: string | undefined = right[j];
|
||||
row[j] =
|
||||
a !== undefined && a === b
|
||||
? (dp[i + 1]?.[j + 1] ?? 0) + 1
|
||||
: Math.max(dp[i + 1]?.[j] ?? 0, dp[i]?.[j + 1] ?? 0);
|
||||
}
|
||||
}
|
||||
const out: DiffLine[] = [];
|
||||
let i: number = 0;
|
||||
let j: number = 0;
|
||||
while (i < n && j < m) {
|
||||
const a: string | undefined = left[i];
|
||||
const b: string | undefined = right[j];
|
||||
if (a !== undefined && a === b) {
|
||||
out.push({ kind: "ctx", text: a });
|
||||
i += 1;
|
||||
j += 1;
|
||||
} else if ((dp[i + 1]?.[j] ?? 0) >= (dp[i]?.[j + 1] ?? 0)) {
|
||||
if (a !== undefined) out.push({ kind: "del", text: a });
|
||||
i += 1;
|
||||
} else {
|
||||
if (b !== undefined) out.push({ kind: "add", text: b });
|
||||
j += 1;
|
||||
}
|
||||
}
|
||||
for (; i < n; i++) {
|
||||
const a: string | undefined = left[i];
|
||||
if (a !== undefined) out.push({ kind: "del", text: a });
|
||||
}
|
||||
for (; j < m; j++) {
|
||||
const b: string | undefined = right[j];
|
||||
if (b !== undefined) out.push({ kind: "add", text: b });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
interface TextEdit {
|
||||
oldText: string;
|
||||
newText: string;
|
||||
}
|
||||
|
||||
function parseArgsObj(argsText: string): Record<string, unknown> | null {
|
||||
try {
|
||||
const p: unknown = JSON.parse(argsText);
|
||||
return typeof p === "object" && p !== null && !Array.isArray(p)
|
||||
? (p as Record<string, unknown>)
|
||||
: null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Diff blocks for edit/write tool args; null when the tool is neither or
|
||||
* the args do not carry the expected fields. */
|
||||
export function toolDiffBlocks(
|
||||
name: string,
|
||||
argsText: string,
|
||||
): DiffLine[][] | null {
|
||||
const obj: Record<string, unknown> | null = parseArgsObj(argsText);
|
||||
if (obj === null) return null;
|
||||
if (name === "write" && typeof obj.content === "string")
|
||||
return [
|
||||
obj.content
|
||||
.split("\n")
|
||||
.slice(0, DIFF_MAX_LINES)
|
||||
.map((text): DiffLine => ({ kind: "add", text })),
|
||||
];
|
||||
if (name !== "edit") return null;
|
||||
const edits: TextEdit[] = [];
|
||||
if (Array.isArray(obj.edits)) {
|
||||
for (const e of obj.edits) {
|
||||
if (
|
||||
typeof e === "object" &&
|
||||
e !== null &&
|
||||
typeof (e as Record<string, unknown>).oldText === "string" &&
|
||||
typeof (e as Record<string, unknown>).newText === "string"
|
||||
)
|
||||
edits.push(e as TextEdit);
|
||||
}
|
||||
} else if (
|
||||
typeof obj.oldText === "string" &&
|
||||
typeof obj.newText === "string"
|
||||
) {
|
||||
edits.push({ oldText: obj.oldText, newText: obj.newText });
|
||||
}
|
||||
return edits.length === 0
|
||||
? null
|
||||
: edits.map((e): DiffLine[] => lineDiff(e.oldText, e.newText));
|
||||
}
|
||||
|
||||
const DIFF_MARK: Record<DiffLine["kind"], string> = {
|
||||
add: "+",
|
||||
del: "-",
|
||||
ctx: " ",
|
||||
};
|
||||
|
||||
function DiffBlock({ lines }: { lines: DiffLine[] }): React.ReactNode {
|
||||
return (
|
||||
<pre className="diff">
|
||||
{lines.map((l, i) => (
|
||||
<span key={i} className={`diff-line diff-${l.kind}`}>
|
||||
{DIFF_MARK[l.kind] + l.text}
|
||||
{"\n"}
|
||||
</span>
|
||||
))}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolCard({ tool }: { tool: ToolState }) {
|
||||
const status: string = tool.running
|
||||
? "running…"
|
||||
@@ -219,23 +371,34 @@ function ToolCard({ tool }: { tool: ToolState }) {
|
||||
const statusClass: string = tool.isError
|
||||
? "tool-status-err"
|
||||
: "tool-status-ok";
|
||||
const summary: string = oneLine(toolSummaryText(tool.args));
|
||||
const diffBlocks: DiffLine[][] | null = toolDiffBlocks(tool.name, tool.args);
|
||||
return (
|
||||
<details className="tool-card">
|
||||
<summary>
|
||||
<span className="tool-name">🛠 {tool.name}</span>
|
||||
<span className={tool.running ? "" : statusClass}>
|
||||
{summary.length > 0 && <span className="tool-summary">{summary}</span>}
|
||||
<span className={`tool-status ${tool.running ? "" : statusClass}`}>
|
||||
{tool.running ? "working…" : status}
|
||||
</span>
|
||||
</summary>
|
||||
<div className="tool-body">
|
||||
<div className="tool-args">
|
||||
{toolArgsEntries(tool.args).map((e, i) => (
|
||||
<div key={e.k ?? i} className="tool-arg">
|
||||
{e.k !== null && <span className="arg-k">{e.k}</span>}
|
||||
<pre className="arg-v">{e.v}</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{diffBlocks === null ? (
|
||||
<div className="tool-args">
|
||||
{toolArgsEntries(tool.args).map((e, i) => (
|
||||
<div key={e.k ?? i} className="tool-arg">
|
||||
{e.k !== null && <span className="arg-k">{e.k}</span>}
|
||||
<pre className="arg-v">{e.v}</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="tool-diffs">
|
||||
{diffBlocks.map((b, i) => (
|
||||
<DiffBlock key={i} lines={b} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="arg-k">output</span>
|
||||
<pre style={{ margin: "4px 0 0", whiteSpace: "pre-wrap" }}>
|
||||
|
||||
Reference in New Issue
Block a user