@bismawy/pi-arnative 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.3.4] - 2026-10-04
+
+### Added
+- `scripts/release-check.mjs`, a read-only release preflight with one stage per step of the release (`pre-tag`, `pre-publish`, `post-publish`): it verifies a clean tree on `main` in sync with `origin/main`, no open pull requests, the `CHANGELOG.md` entry, whether the tag exists **and is pushed**, and whether the registry already serves the version. It never writes, tags, pushes or publishes.
+- `npm run release:check` (the `pre-tag` stage) and a `prepublishOnly` hook wired to the `pre-publish` stage. A missing or unpushed tag now aborts `npm publish` with `npm error code 1`, so a forgotten `git tag` can no longer ship a release.
+
+### Changed
+- README documents the release stages and their exit codes (`0` pass, `1` check failed, `2` bad usage).
+
+## [0.3.3] - 2026-10-04
+
+### Changed
+- `codemode` now renders in the arnative box like every other tool call: side borders, green background (`toolSuccessBg`), and the script's first line prefixed with the `󱞩` summary glyph. While the tool runs the box shows the shared spinner; the `\uf489` glyph appears with the result (`extensions/tools.ts`).
+- Collapsed `codemode` is now two rows, the same footprint as `bash`/`grep`/`read`: title + the script's first line. Nested calls and output wait behind the standard `[ctrl+o to expand]` hint. A failing run still shows its output.
+- pi's `Script completed / Wall time / Output:` header no longer shows in the box.
+- Shared duration wording (`2ms` under a second, `1.4s` above) and one error glyph (`x`) across every tool; a failing `codemode` run shows its whole output and never a `[ctrl+o to expand]` hint.
+- The file tools (`bash`, `read`, `write`, `grep`, `find`, `edit`) now show `[ctrl+o to expand]` when their collapsed summary hides more than it shows — a two-line `extra +1 / -1` box no longer looks complete while its diff sits behind it. Expanded and genuinely single-line results get no hint (`extensions/tools.ts`).
+- The `chrome_devtools_*` tools (from `@narumitw/pi-chrome-devtools`) now render in the same box instead of their bare "Chrome DevTools: …" lines. Their own `renderCall`/`renderResult` are bypassed: the call box uses the Chrome glyph and the result box the usual summary + `[ctrl+o to expand]` (`extensions/tools.ts`).
+
 ## [0.3.2] - 2026-10-04
 
 ### Changed

package/README.md

@@ -14,7 +14,7 @@ pi-arnative replaces pi’s default terminal chrome with a unified, cohesive vis
 
 - Warm Themes: Cohesive, contrast-checked color palettes generated without drift.
 - Tabbed Header: Greeting, version line, and a compact box menu over Directory, Model, Context, Skills, Extensions, and Shortcut.
-- Rounded Tool Boxes: Clear status, spinner, and duration for every tool call.
+- Rounded Tool Boxes: Clear status, spinner, and duration for every tool call. Built-in `codemode` is boxed and collapsed to two rows (title + first script line) like `bash`/`grep`/`read`; nested calls and output sit behind `[ctrl+o to expand]` (shown whenever the collapsed summary hides more, including `edit` diffs); a failed run always shows its full output. The `chrome_devtools_*` tools box too, replacing their bare "Chrome DevTools: …" lines.
 - Enhanced Footer: fixed 3-row grid — directory/git line, then extension status paired with token metrics.
 - Transcript Clock: Timestamps for messages with clean bubble backgrounds.
 - Usage Dashboard: /usage command to track tokens and session costs.
@@ -96,6 +96,15 @@ npm test        # Run self-checks & theme generator check
 npm run themes  # Rebuild all theme variants
 ```
 
+**Releasing:** `scripts/release-check.mjs` is a read-only preflight (never writes, tags, pushes or publishes) with one stage per step of the release:
+
+| Stage | Run before | Checks |
+| :--- | :--- | :--- |
+| `pre-tag` | `git tag` | clean tree on `main`, in sync, no open PRs, `CHANGELOG.md` entry, tag free, version unpublished |
+| `pre-publish` | `npm publish` | the above, plus the tag exists **and is pushed** |
+| `post-publish` | done | the above, plus the version is live on the registry |
+
+`pre-publish` runs automatically through npm's `prepublishOnly`, so a missing or unpushed tag aborts the publish (`npm error code 1`) instead of shipping a version whose tag was forgotten. `npm run release:check` is the `pre-tag` shorthand. Exit codes: `0` pass, `1` a check failed, `2` bad usage.
 </details>
 
 ## License

package/extensions/tools.ts

@@ -27,6 +27,8 @@ import {
 	createReadTool,
 	createWriteTool,
 	getMarkdownTheme,
+	highlightCode,
+	initTheme,
 	ToolExecutionComponent,
 } from "@earendil-works/pi-coding-agent";
 import { Markdown, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
@@ -64,6 +66,12 @@ export function spinIcon(): string {
 	return FRAMES[Math.floor(Date.now() / 500) % FRAMES.length];
 }
 
+/** Tool duration: `2ms` under a second, `1.4s` above — the wording pi itself uses. */
+function fmtMs(ms: number | undefined): string {
+	if (ms === undefined || !Number.isFinite(ms)) return "";
+	return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
 export class Lines {
 	private get: (width: number) => string[];
 	constructor(get: (width: number) => string[]) {
@@ -258,7 +266,26 @@ const BOXED_TOOLS = new Map([
 	["get_search_content", "get_content"],
 	["todo", "todo"],
 ]);
-const displayName = (name: string): string => BOXED_TOOLS.get(name) ?? name;
+
+// @narumitw/pi-chrome-devtools ships bare-text renderers ("Chrome DevTools: navigate",
+// collapsed output is empty) so they are ignored and these tools take our default box
+// path. CDP_ICON marks them in the call box (no hook for the generic tool icon).
+const CDP_ICON = "\uf268";
+const CDP_TOOLS: [string, string][] = [
+	["chrome_devtools_load", "load"],
+	["chrome_devtools_list_pages", "list pages"],
+	["chrome_devtools_select_page", "select page"],
+	["chrome_devtools_navigate", "navigate"],
+	["chrome_devtools_evaluate", "evaluate"],
+	["chrome_devtools_screenshot", "screenshot"],
+	["chrome_devtools_webmcp_list_tools", "list WebMCP tools"],
+	["chrome_devtools_webmcp_call_tool", "call WebMCP tool"],
+];
+const CDP_NAME = new Map(CDP_TOOLS);
+for (const [n] of CDP_TOOLS) BOXED_TOOLS.set(n, n);
+
+const displayName = (name: string): string =>
+	CDP_NAME.has(name) ? `Chrome DevTools: ${CDP_NAME.get(name)}` : (BOXED_TOOLS.get(name) ?? name);
 for (const n of BOXED_TOOLS.keys()) OWN_BOX.add(n);
 
 const MCP_TOOL = (name: string): boolean => name === "mcp" || name === "mcpScript" || name.startsWith("mcp__");
@@ -347,11 +374,12 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 		const name: string = this.toolName;
 		const mine = usesTheirCallRenderer(this);
 		const own = origCall.call(this);
-		if (own && !mine) return own;
+		// Chrome DevTools' own renderCall is a bare line; ours replaces it (icon + name).
+		if (own && !mine && !CDP_NAME.has(name)) return own;
 		return (args: any, th: Theme, ctx: TCtx) =>
 			new Lines((width) => {
 				if ((ctx.state as Record<string, unknown> | undefined)?.hasResult) return [];
-				const icon = th.fg("warning", spinIcon());
+				const icon = CDP_NAME.has(name) ? th.fg("accent", CDP_ICON) : th.fg("warning", spinIcon());
 				const theirs = own ? componentLines(safeCall(() => own.call(this, args, th, ctx)), width - 6) : [];
 				if (name === "todo" && theirs.length)
 					return box(th, width, formatTodoRows(theirs, th), "toolPendingBg");
@@ -370,6 +398,9 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 		// MCP: their result renderer is deliberately skipped (unbounded error dump).
 		if (own && !usesTheirCallRenderer(this)) return own;
 		const boxed = BOXED_TOOLS.has(name);
+		// Chrome DevTools are in BOXED_TOOLS for the title/icon only: their renderResult
+		// (raw text, empty when collapsed) would drop our title row, so it is ignored.
+		const cdp = CDP_NAME.has(name);
 		return (result: TResult, opts: { expanded: boolean; isPartial?: boolean }, th: Theme, ctx: TCtx) => {
 			if (opts.isPartial) return EMPTY;
 			((ctx.state ??= {}) as Record<string, unknown>).hasResult = true;
@@ -380,7 +411,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 			// Errors use our own path: pi-web-access' own error box is a box inside a
 			// box. Their renderer content is only used on success.
 			const theirs =
-				(boxed || fff) && !isErr
+				(boxed || fff) && !isErr && !cdp
 					? safeCall(() => own.call(this, { content: result.content, details: result.details }, opts, th, ctx))
 					: null;
 			return new Lines((width) => {
@@ -399,7 +430,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 					const bgType = isErr ? "toolErrorBg" : "toolSuccessBg";
 					return box(th, width, formatTodoRows(combined, th), bgType);
 				}
-				if (boxed2.length) return box(th, width, boxedRows(icon, boxed2));
+				if (boxed2.length && !cdp) return box(th, width, boxedRows(icon, boxed2));
 				const rows = titleRow(
 					th,
 					icon,
@@ -441,6 +472,78 @@ const formatTodoRows = (lines: string[], th: Theme): string[] => {
 	return out;
 };
 
+// codemode: the script is highlighted, the calls and output come from pi's own details.
+function codeLines(code: string): string[] {
+	const js = code.replace(/\r/g, "").trimEnd().replace(/\t/g, "   ");
+	if (!js) return [];
+	try {
+		return highlightCode(js, "javascript");
+	} catch {
+		return js.split("\n");
+	}
+}
+
+/** `✓ todo {"action":"list"} 2ms` — status icon, tool name, muted args, dim duration. */
+function formatCodemodeCall(call: any, th: Theme): string {
+	const [color, glyph] = STATUS_ICON[String(call?.status ?? "ok")] ?? ["error", "x"];
+	const dur = fmtMs(Number(call?.durationMs));
+	let line = ` ${th.fg(color, glyph)} ${th.fg("accent", String(call?.name ?? ""))}`;
+	if (call?.args) line += ` ${th.fg("muted", String(call.args))}`;
+	if (dur) line += ` ${th.fg("dim", dur)}`;
+	return line;
+}
+
+// codemode call status -> [theme colour, glyph], same mapping pi's own renderer uses.
+const STATUS_ICON: Record<string, [string, string]> = {
+	running: ["warning", "…"],
+	ok: ["success", "✓"],
+	cancelled: ["muted", "⊘"],
+	error: ["error", "x"],
+};
+
+/** Drop pi's "Script completed\nWall time …\nOutput:" header (a rejected input has none). */
+function codemodeOutput(content: unknown): string {
+	const blocks = (Array.isArray(content) ? content : []).filter((c: any) => c?.type === "text") as Array<{ text?: string }>;
+	const header = /^Script (completed|failed)\nWall time [\d.]+ seconds\nOutput:\n/;
+	return blocks
+		.map((c, i) => (i === 0 ? String(c.text ?? "").replace(header, "") : String(c.text ?? "")))
+		.join("\n")
+		.trim();
+}
+
+/** Script lines; collapsed keeps only the first, like the other tools' one-line call. */
+function codemodeScript(code: string, expanded: boolean): { lines: string[]; hidden: number } {
+	const lines = codeLines(code);
+	if (expanded || lines.length <= 1) return { lines, hidden: 0 };
+	return { lines: lines.slice(0, 1), hidden: lines.length - 1 };
+}
+
+/** Every box row: title, script, nested calls, output. Collapsed is the title plus the
+ *  script's first line, with the rest behind the expand hint. Expanding — or failing —
+ *  shows everything: a truncated error would read as a short, successful run. */
+function codemodeBoxRows(
+	args: any,
+	result: { content?: unknown; details?: any } | undefined,
+	th: Theme,
+	expanded: boolean,
+	isErr: boolean,
+	icon: string,
+): string[] {
+	const rows = [`${icon} ${th.fg("accent", "codemode")}`];
+	const script = codemodeScript(typeof args?.code === "string" ? args.code : "", expanded);
+	script.lines.forEach((line, i) => rows.push(i === 0 ? `${resHead(th)} ${line}` : ` ${line}`));
+	const calls = (result?.details?.calls as any[] | undefined) ?? [];
+	const output = codemodeOutput(result?.content);
+	const outLines = output ? output.split("\n") : [];
+	const shown = expanded || isErr;
+	if (shown) {
+		if (calls.length || outLines.length) rows.push("");
+		rows.push(...calls.map((c) => formatCodemodeCall(c, th)), ...outLines.map((l) => th.fg("toolOutput", ` ${l}`)));
+	}
+	const hidden = script.hidden + (shown ? 0 : calls.length + outLines.length);
+	if (!expanded && hidden > 0) rows[rows.length - 1] += ` ${expandHint(th)}`;
+	return rows;
+}
 
 // One render path for all tools (no per-tool duplication).
 // renderCall = running box (󰔟); renderResult = final box (✓/x + right-aligned
@@ -499,8 +602,7 @@ function minimal(
 			((context.state ??= {}) as Record<string, unknown>).hasResult = true;
 			const text = textOf(result);
 			const isErr = Boolean(context.isError || result.isError || text.startsWith("Error"));
-			const ms = context.toolCallId ? TIMINGS.get(context.toolCallId) : undefined;
-			const dur = ms !== undefined ? `${(ms / 1000).toFixed(1)}s` : "";
+			const dur = fmtMs(context.toolCallId ? TIMINGS.get(context.toolCallId) : undefined);
 			const icon = isErr ? theme.fg("error", "x") : theme.fg("success", "✓");
 			return new Lines((width) => {
 				const soft = accentSoftOf(theme);
@@ -514,9 +616,15 @@ function minimal(
 					dur,
 					expanded,
 				);
+				// Anything the collapsed summary hides gets the standard hint; without it a
+				// two-line box (edit: `+1 / -1`) looks complete while the diff sits behind it.
+				const hasDetail = countLines(text) > 1 || Boolean((result.details as { diff?: string } | undefined)?.diff);
 				const resLine = res(result, theme, soft, isErr, expanded);
-				if (resLine) rows.push(resLine);
 				if (expanded) rows.push(...full(result, theme));
+				else if (resLine) {
+					const hint = hasDetail ? ` ${expandHint(theme)}` : "";
+					rows.push(hint ? `${truncateToWidth(resLine, Math.max(8, inner - visibleWidth(hint)), "…")}${hint}` : resLine);
+				}
 				return box(theme, width, rows);
 			});
 		},
@@ -524,6 +632,12 @@ function minimal(
 }
 
 function arnativeTools(pi: ExtensionAPI) {
+	// codemode keeps pi's own data (script + nested calls + output) wrapped in the arnative
+	// box, bg like every other tool. A resolver runs first and returns our renderers for
+	// that name; `next()` would give pi's unboxed ones.
+	OWN_BOX.add("codemode");
+	pi.registerToolRenderer((toolName, next) => (toolName === "codemode" ? codemodeRenderers : next()));
+
 	// Re-render source for the spinner + ticker cleanup when the session closes
 	pi.on("session_start", async (_event, ctx) => {
 		requestRenderFn = () => {
@@ -626,6 +740,33 @@ function arnativeTools(pi: ExtensionAPI) {
 	);
 }
 
+// codemode: pi's renderer wrapped in our box. renderShell "self" keeps the
+// execution defaults; renderCall/renderResult draw the box. state.hasResult
+// guarantees one box per call, also after reload/restore.
+const codemodeRenderers = {
+	renderShell: "self" as const,
+	renderCall(args: any, th: Theme, ctx: TCtx) {
+		return new Lines((width) => {
+			if (ctx.state?.hasResult) return [];
+			const isErr = Boolean(ctx.isError);
+			const bg = isErr ? "toolErrorBg" : "toolPendingBg";
+			// Same spinner as every other box while the tool runs; the codemode glyph
+			// only appears once the result is in (renderResult).
+			const icon = th.fg("warning", spinIcon());
+			return box(th, width, codemodeBoxRows(args, undefined, th, Boolean(ctx.expanded), isErr, icon), bg);
+		});
+	},
+	renderResult(result: TResult & { details?: any }, opts: { expanded: boolean; isPartial?: boolean }, th: Theme, ctx: TCtx) {
+		if (opts.isPartial) return EMPTY;
+		((ctx.state ??= {}) as Record<string, unknown>).hasResult = true;
+		const isErr = Boolean(ctx.isError || result.isError);
+		const icon = isErr ? th.fg("error", "x") : th.fg("success", "\uf489");
+		return new Lines((width) =>
+			box(th, width, codemodeBoxRows(ctx.args, result, th, Boolean(opts.expanded), isErr, icon), isErr ? "toolErrorBg" : "toolSuccessBg"),
+		);
+	},
+};
+
 export default arnativeTools;
 
 // Self-check: `node extensions/tools.ts`.
@@ -914,6 +1055,7 @@ if (isMain(import.meta.url)) {
 	// The default export registers the tools (filling OWN_BOX); a pi stub suffices.
 	arnativeTools({
 		registerTool: () => {},
+		registerToolRenderer: () => {},
 		on: () => {},
 		registerShortcut: () => {},
 		registerMessageRenderer: () => {},
@@ -1011,5 +1153,105 @@ if (isMain(import.meta.url)) {
 		fullText({ content: [{ type: "text", text: "a\nb" }] }, th, 0).join("|") === th.fg("dim", "a") + "|" + th.fg("dim", "b"),
 		"no width (self-check) still dumps dim",
 	);
+
+	// codemode: one box per call, driven through the real component (what pi uses).
+	const cmArgs = { code: 'const l = await tools.todo({ action: "list" });\nconsole.log(l);' };
+	const cmRes = {
+		content: [
+			{ type: "text", text: "Script completed\nWall time 0.01 seconds\nOutput:\n" },
+			{ type: "text", text: "alpha: ok" },
+		],
+		details: { calls: [{ status: "ok", name: "todo", args: '{"action":"list"}', durationMs: 2 }] },
+	};
+	initTheme(); // ToolExecutionComponent resolves a real theme, not the fg-passthrough stub
+	const cmRender = (args: any, result: any, expanded = false) => {
+		const c: any = new ToolExecutionComponent("codemode", "1", args, {}, codemodeRenderers as any, { requestRender() {} }, cwd);
+		if (result) c.updateResult(result, false);
+		c.setExpanded(expanded);
+		// pi prefixes the box with a spacer blank line; drop blanks so the rows are predictable.
+		return (c.render(100) as string[]).map(stripAnsi).filter((l) => l !== "");
+	};
+	const cmCollapsed = cmRender(cmArgs, cmRes);
+	assert(cmCollapsed.length === 4 && cmCollapsed[0]!.startsWith("╭") && cmCollapsed[3]!.startsWith("╰"), "codemode: collapsed box is title + one script line inside the border");
+	assert(cmCollapsed[2]!.includes("const l = await tools.todo") && cmCollapsed[2]!.includes("[ctrl+o to expand]"), "codemode: collapsed shows the first script line + hint");
+	const cmExpanded = cmRender(cmArgs, cmRes, true);
+	assert(cmExpanded.some((l) => l.includes("✓ todo") && l.includes("2ms")) && cmExpanded.some((l) => l.includes("alpha: ok")), "codemode: expanded shows the nested calls and the output");
+	// A failing run is never truncated: the whole output is shown without a hint.
+	const longErr = { content: [{ type: "text", text: "Script failed\nWall time 0.1 seconds\nOutput:\n" + Array.from({ length: 12 }, (_, i) => `line ${i + 1}`).join("\n") }], isError: true };
+	const cmErr = cmRender({ code: "boom()" }, longErr);
+	assert(cmErr.some((l) => l.includes("line 12")) && !cmErr.some((l) => l.includes("to expand")), "codemode: a failed run shows all its output, no hint");
+	// Running: the shared spinner, not the codemode glyph, and no hint while nothing is hidden.
+	const cmRunning = cmRender({ code: "console.log(1);" }, undefined);
+	assert(FRAMES.some((f) => cmRunning.join("\n").includes(f)) && !cmRunning.join("\n").includes("\uf489"), "codemode: running box uses the shared spinner, not the codemode glyph");
+	assert(!cmRunning.some((l) => l.includes("to expand")), "codemode: nothing hidden on a single-line script");
+	assert([...cmCollapsed, ...cmExpanded, ...cmErr].every((l) => visibleWidth(l) === 100), "codemode: box fills the given width");
+	assert(fmtMs(2) === "2ms" && fmtMs(1400) === "1.4s" && fmtMs(undefined) === "", "duration wording: ms under a second, s above");
+	assert(codemodeOutput(cmRes.content) === "alpha: ok", "codemode: Script completed header dropped (own block)");
+	assert(codemodeOutput([{ type: "text", text: "Script completed\nWall time 0.01 seconds\nOutput:\n2" }]) === "2", "codemode: header dropped when joined with the output");
+	// minimal(): a collapsed summary hides more than it shows -> hint; expanded shows all.
+	{
+		const reg2: Record<string, any> = {};
+		const fakePi: any = { registerTool: (t: any) => { reg2[t.name] = t; }, registerToolRenderer: () => {}, on: () => {} };
+		arnativeTools(fakePi);
+		const minRender = (name: string, args: any, result: any, expanded = false) => {
+			const c: any = new ToolExecutionComponent(name, "1", args, {}, reg2[name], { requestRender() {} }, cwd);
+			c.updateResult(result, false);
+			c.setExpanded(expanded);
+			return (c.render(74) as string[]).map(stripAnsi).filter((l) => l !== "");
+		};
+		const diffRes = { content: [{ type: "text", text: "ok" }], details: { diff: "@@\n-old\n+new" } };
+		const ed = minRender("edit", { path: "README.md" }, diffRes);
+		assert(ed.some((l) => l.includes("+1 / -1") && l.includes("to expand")), "minimal(): collapsed edit summary carries the expand hint");
+		assert(!minRender("edit", { path: "README.md" }, diffRes, true).some((l) => l.includes("to expand")), "minimal(): expanded edit drops the hint");
+		assert(
+			minRender("bash", { command: "true" }, { content: [{ type: "text", text: "done" }], details: {} }).every((l) => !l.includes("to expand")),
+			"minimal(): a single-line output has nothing hidden, so no hint",
+		);
+		assert(
+			minRender("edit", { path: "README.md" }, diffRes).every((l) => visibleWidth(l) === 74),
+			"minimal(): hint row still fills the box width",
+		);
+	}
+
+	// Chrome DevTools: their bare renderers are replaced by our box (title + summary).
+	const textComp = (text: string, color?: string) => ({
+		render: (w: number) => (text ? text.split("\n").map((l) => (color ? th.fg(color, l) : l).slice(0, Math.max(0, w))) : []),
+		invalidate() {},
+	});
+	const cdpRes = {
+		toolName: "chrome_devtools_navigate",
+		toolDefinition: {
+			renderCall: () => textComp("Chrome DevTools: navigate"),
+			renderResult: () => textComp(""),
+		},
+	};
+	// The call renderer is not theirs (their bare line would swallow our icon/title).
+	assert(
+		ToolExecutionComponent.prototype.getCallRenderer.call(cdpRes) !== (cdpRes.toolDefinition.renderCall as any)(),
+		"chrome-devtools: their bare call renderer is replaced by our box",
+	);
+	const cdpResult = { content: [{ type: "text", text: 'navigated\n{\n  "pageId": "p1",\n  "url": "https://example.com"\n}' }], details: {} };
+	const cdpComp = (result: any, expanded = false) => {
+		const c: any = new ToolExecutionComponent("chrome_devtools_navigate", "1", { url: "https://example.com" }, {}, cdpRes.toolDefinition as any, { requestRender() {} }, cwd);
+		if (result) c.updateResult(result, false);
+		c.setExpanded(expanded);
+		return (c.render(74) as string[]).map(stripAnsi).filter((l) => l !== "");
+	};
+	const cdpCollapsed = cdpComp(cdpResult);
+	assert(
+		cdpCollapsed[0]!.startsWith("╭") && cdpCollapsed[cdpCollapsed.length - 1]!.startsWith("╰") && cdpCollapsed.some((l) => l.includes("navigate")),
+		"chrome-devtools: result renders in our box with the tool name",
+	);
+	const cdpCall = ToolExecutionComponent.prototype.getCallRenderer.call(cdpRes) as any;
+	const cdpCallOut: string[] = cdpCall({ url: "https://example.com" }, th, { args: {}, state: {} }).render(74);
+	assert(
+		cdpCallOut[0]!.startsWith("╭") && cdpCallOut.some((l) => stripAnsi(l).includes("Chrome DevTools: navigate")),
+		"chrome-devtools: call box keeps the tool title and the CDP glyph",
+	);
+	assert(stripAnsi(cdpCallOut[1]!).includes(CDP_ICON), "chrome-devtools: call box uses the Chrome glyph, not the spinner");
+	const cdpExpanded = cdpComp(cdpResult, true);
+	assert(cdpExpanded.some((l) => l.includes('"pageId": "p1"')), "chrome-devtools: expanded shows the full tool output");
+	assert(cdpCollapsed.some((l) => l.includes("navigated") && l.includes("to expand")), "chrome-devtools: collapsed shows the first line + hint");
+	assert([...cdpCollapsed, ...cdpExpanded].every((l) => visibleWidth(l) === 74), "chrome-devtools: box fills the given width");
 	console.log("OK");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Refined aesthetics. Cohesive tools. Built for Pi. Warm themes, rounded tool boxes, tabbed header, compact footer and a /usage dashboard.",
   "keywords": [
     "pi-package",
@@ -42,6 +42,8 @@
   "scripts": {
     "dev": "pi --extension ./extensions/tools.ts --extension ./extensions/section-headers.ts --extension ./extensions/footer.ts --extension ./extensions/timestamps.ts --extension ./extensions/ui-render-tweaks.ts --extension ./extensions/usage.ts --extension ./extensions/arnative.ts",
     "test": "node lib/box.ts && node lib/ansi.ts && node lib/shortcuts.ts && node themes/gen-themes.mjs --check && node extensions/tools.ts && node extensions/footer.ts && node extensions/timestamps.ts && node extensions/section-headers.ts && node extensions/ui-render-tweaks.ts && node extensions/usage.ts && node extensions/arnative.ts",
-    "themes": "node themes/gen-themes.mjs"
+    "themes": "node themes/gen-themes.mjs",
+    "release:check": "node scripts/release-check.mjs pre-tag",
+    "prepublishOnly": "node scripts/release-check.mjs pre-publish"
   }
 }