Files
oh-my-pi/packages/coding-agent/test/tools/bash-sixel-render.test.ts
T
can1357 5c60772f38 ux(coding-agent/tools): folded raw output artifact notices into the bash status footer
- Added a `showHeader` option to shell rendering and suppressed the bash frame title bar by default.
- Parsed trailing raw-output artifact notices and folded their IDs into status footer metadata instead of command output.
2026-06-07 09:12:12 +02:00

293 lines
11 KiB
TypeScript

import { afterEach, describe, expect, it, vi } from "bun:test";
import * as os from "node:os";
import * as path from "node:path";
import type { RenderResultOptions } from "@oh-my-pi/pi-agent-core";
import { getThemeByName, setThemeInstance } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
import { bashToolRenderer } from "@oh-my-pi/pi-coding-agent/tools/bash";
import { ImageProtocol, TERMINAL } from "@oh-my-pi/pi-tui";
import { sanitizeText } from "@oh-my-pi/pi-utils";
type MutableTerminalInfo = {
imageProtocol: ImageProtocol | null;
};
const terminal = TERMINAL as unknown as MutableTerminalInfo;
describe("bashToolRenderer", () => {
const originalProtocol = TERMINAL.imageProtocol;
afterEach(() => {
terminal.imageProtocol = originalProtocol;
});
it("shows rendered env assignments in the command preview", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderCall(
{ command: "printf '%s' \"$MERMAID\"", env: { MERMAID: 'line "one"\ntwo' } },
{ expanded: false, isPartial: false },
uiTheme,
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain('MERMAID="line \\"one\\"\\ntwo"');
expect(rendered).toContain("printf '%s' \"$MERMAID\"");
});
it("shows partial env assignments while tool args are still streaming", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderCall(
{
command: "printf '%s' \"$MERMAID\"",
__partialJson: '{"command":"printf \'%s\' "$MERMAID"","env":{"MERMAID":"line 1\\nline 2',
},
{ expanded: false, isPartial: true },
uiTheme,
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain('MERMAID="line 1\\nline 2"');
expect(rendered).toContain("printf '%s' \"$MERMAID\"");
});
it("sanitizes command tabs and shortens home cwd in previews", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderCall(
{
command: "printf\t'%s'",
cwd: path.join(os.homedir(), "projects", "demo"),
},
{ expanded: false, isPartial: false },
uiTheme,
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain("~/projects/demo");
expect(rendered).not.toContain(os.homedir());
expect(rendered).not.toContain("\t");
});
it("renders the pending call as a bordered block with the command in the body", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderCall(
{ command: "sleep 30" },
{ expanded: false, isPartial: true },
uiTheme,
);
const lines = Bun.stripANSI(component.render(60).join("\n")).split("\n");
// A block frames the command: a header bar, the command row, and a bottom border.
expect(lines.length).toBeGreaterThanOrEqual(3);
const header = lines[0]!;
const body = lines.slice(1, -1).join("\n");
// Bash commands already carry a `$` prompt in the body, so the frame header
// stays a plain rule instead of repeating "Bash" in the title bar.
expect(header).not.toContain("Bash");
expect(header).not.toContain("sleep 30");
expect(body).toContain("$ sleep 30");
});
it("shows the effective timeout from result details when it differs from call args", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderResult(
{ content: [{ type: "text", text: "" }], details: { timeoutSeconds: 120 }, isError: false },
{ expanded: false, isPartial: false, renderContext: { timeout: 1200 } },
uiTheme,
{ command: "python3 scripts/edit-benchmark.py", timeout: 1200 },
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain("Timeout: 120s");
expect(rendered).not.toContain("Timeout: 1200s");
});
it("renders wall time alongside the timeout label and strips the textual notice", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderResult(
{
content: [{ type: "text", text: "hello\n\nWall time: 1.23 seconds" }],
details: { timeoutSeconds: 5, wallTimeMs: 1230 },
isError: false,
},
{ expanded: false, isPartial: false },
uiTheme,
{ command: "echo hi" },
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain("Wall: 1.23s");
expect(rendered).toContain("Timeout: 5s");
// Notice text must not appear in the output region — the styled label is the
// only place wall time is shown so users don't read it twice.
expect(rendered).not.toContain("Wall time: 1.23 seconds");
});
it("folds raw output artifact notices into the status footer", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderResult(
{
content: [{ type: "text", text: "filtered\n[raw output: artifact://13]\n\nWall time: 0.08 seconds" }],
details: { timeoutSeconds: 300, wallTimeMs: 80 },
isError: false,
},
{ expanded: false, isPartial: false },
uiTheme,
{ command: "bun run check:types" },
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain("filtered");
expect(rendered).toContain("Wall: 0.08s");
expect(rendered).toContain("Timeout: 300s");
expect(rendered).toContain("Artifact: 13");
expect(rendered).not.toContain("[raw output: artifact://13]");
expect(rendered).not.toContain("artifact://13");
});
it("renders the exit status in the footer and strips the textual exit notice for failed commands", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderResult(
{
content: [{ type: "text", text: "boom\n\nWall time: 0.02 seconds\n\nCommand exited with code 1" }],
details: { timeoutSeconds: 300, wallTimeMs: 20, exitCode: 1 },
isError: true,
},
{ expanded: false, isPartial: false },
uiTheme,
{ command: "false" },
);
const rendered = sanitizeText(component.render(120).join("\n"));
// The footer carries the styled stats including the non-zero exit status.
expect(rendered).toContain("Wall: 0.02s");
expect(rendered).toContain("Timeout: 300s");
expect(rendered).toContain("Exit: 1");
// Both the exit-code and wall-time notices are folded into the footer, not
// echoed verbatim in the output region.
expect(rendered).not.toContain("Command exited with code 1");
expect(rendered).not.toContain("Wall time: 0.02 seconds");
// The command's own output still shows.
expect(rendered).toContain("boom");
});
it("omits the status footer for a successful command", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const component = bashToolRenderer.renderResult(
{
content: [{ type: "text", text: "ok\n\nWall time: 0.02 seconds" }],
details: { timeoutSeconds: 300, wallTimeMs: 20 },
isError: false,
},
{ expanded: false, isPartial: false },
uiTheme,
{ command: "true" },
);
const rendered = sanitizeText(component.render(120).join("\n"));
expect(rendered).toContain("Wall: 0.02s");
expect(rendered).toContain("Timeout: 300s");
expect(rendered).not.toContain("Exit:");
});
it("bypasses truncation/styling for SIXEL lines", async () => {
terminal.imageProtocol = ImageProtocol.Sixel;
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
const sixel = "\x1bPqabc\x1b\\";
const renderOptions: RenderResultOptions & {
renderContext: {
output: string;
expanded: boolean;
previewLines: number;
};
} = {
expanded: false,
isPartial: false,
renderContext: {
output: `line one\n${sixel}\nline two`,
expanded: false,
previewLines: 1,
},
};
const component = bashToolRenderer.renderResult(
{ content: [{ type: "text", text: "" }], details: {}, isError: false },
renderOptions,
uiTheme,
{ command: "echo sixel" },
);
const lines = component.render(80);
expect(lines.filter(line => line === sixel)).toHaveLength(1);
expect(lines.some(line => line.includes("ctrl+o to expand"))).toBe(false);
});
it("highlights every line of a multi-line bash command in renderResult", async () => {
const uiTheme = await getThemeByName("dark");
expect(uiTheme).toBeDefined();
setThemeInstance(uiTheme!);
const command = 'for f in a b; do\n\techo "$f"\ndone';
const component = bashToolRenderer.renderResult(
{ content: [{ type: "text", text: "" }], details: {}, isError: false },
{ expanded: false, isPartial: false },
uiTheme!,
{ command },
);
const rendered = component.render(120);
const sanitized = rendered.map(line => sanitizeText(line));
// Every command line must appear in the output, untruncated.
const findLine = (needle: string) => sanitized.findIndex(line => line.includes(needle));
const forLine = findLine("for f in a b; do");
const echoLine = findLine('echo "$f"');
const doneLine = findLine("done");
expect(forLine).toBeGreaterThanOrEqual(0);
expect(echoLine).toBeGreaterThanOrEqual(0);
expect(doneLine).toBeGreaterThanOrEqual(0);
// Each command line carries its own SGR run so terminals don't drop
// styling after the first newline (the bug this fix addresses).
for (const idx of [forLine, echoLine, doneLine]) {
expect(rendered[idx]).toMatch(/\u001b\[38;(?:2|5);/);
}
});
it("keeps a backgrounded command's border static while a foreground one still shimmers", async () => {
const theme = await getThemeByName("dark");
expect(theme).toBeDefined();
const uiTheme = theme!;
// Render a still-partial bash result at two wall-clock instants a quarter of
// a shimmer cycle apart. The animated bottom-edge segment lives at the far
// left at t=0 and near center at t=750ms, so an animating border yields
// different bytes across the two frames while a static one is identical.
const renderAt = (details: Record<string, unknown>, now: number): string => {
const spy = vi.spyOn(Date, "now").mockReturnValue(now);
try {
const component = bashToolRenderer.renderResult(
{ content: [{ type: "text", text: "Background job bg_1 started: sleep 30" }], details, isError: false },
{ expanded: false, isPartial: true },
uiTheme,
{ command: "sleep 30" },
);
return component.render(60).join("\n");
} finally {
spy.mockRestore();
}
};
// Backgrounded (finalizes later via the async update path): no shimmer, so
// the committed frame can't freeze a stray dark "bar" into the border.
const backgrounded = { async: { state: "running", jobId: "bg_1", type: "bash" } };
expect(renderAt(backgrounded, 0)).toBe(renderAt(backgrounded, 750));
// Foreground pending: the border still sweeps, so frames differ over time.
expect(renderAt({}, 0)).not.toBe(renderAt({}, 750));
});
});