@f5xc-salesdemos/xcsh 19.43.0 → 19.43.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@f5xc-salesdemos/xcsh",
-	"version": "19.43.0",
+	"version": "19.43.2",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"homepage": "https://github.com/f5xc-salesdemos/xcsh",
 	"author": "Can Boluk",
@@ -52,13 +52,13 @@
 	"dependencies": {
 		"@agentclientprotocol/sdk": "0.16.1",
 		"@mozilla/readability": "^0.6",
-		"@f5xc-salesdemos/xcsh-stats": "19.43.0",
-		"@f5xc-salesdemos/pi-agent-core": "19.43.0",
-		"@f5xc-salesdemos/pi-ai": "19.43.0",
-		"@f5xc-salesdemos/pi-natives": "19.43.0",
-		"@f5xc-salesdemos/pi-resource-management": "19.43.0",
-		"@f5xc-salesdemos/pi-tui": "19.43.0",
-		"@f5xc-salesdemos/pi-utils": "19.43.0",
+		"@f5xc-salesdemos/xcsh-stats": "19.43.2",
+		"@f5xc-salesdemos/pi-agent-core": "19.43.2",
+		"@f5xc-salesdemos/pi-ai": "19.43.2",
+		"@f5xc-salesdemos/pi-natives": "19.43.2",
+		"@f5xc-salesdemos/pi-resource-management": "19.43.2",
+		"@f5xc-salesdemos/pi-tui": "19.43.2",
+		"@f5xc-salesdemos/pi-utils": "19.43.2",
 		"@sinclair/typebox": "^0.34",
 		"@xterm/headless": "^6.0",
 		"ajv": "^8.20",

package/src/internal-urls/build-info.generated.ts

@@ -17,17 +17,17 @@ export interface BuildInfo {
 }
 
 export const BUILD_INFO: BuildInfo = {
-	"version": "19.43.0",
-	"commit": "d8fefbb60bd96f414bb9c21da7df270bd10876eb",
-	"shortCommit": "d8fefbb",
+	"version": "19.43.2",
+	"commit": "09742430243eddeb0ed597e94079c21ceca02d7f",
+	"shortCommit": "0974243",
 	"branch": "main",
-	"tag": "v19.43.0",
-	"commitDate": "2026-06-24T04:38:55Z",
-	"buildDate": "2026-06-24T05:01:00.600Z",
+	"tag": "v19.43.2",
+	"commitDate": "2026-06-24T16:28:28Z",
+	"buildDate": "2026-06-24T16:56:22.826Z",
 	"dirty": true,
 	"prNumber": "",
 	"repoUrl": "https://github.com/f5xc-salesdemos/xcsh",
 	"repoSlug": "f5xc-salesdemos/xcsh",
-	"commitUrl": "https://github.com/f5xc-salesdemos/xcsh/commit/d8fefbb60bd96f414bb9c21da7df270bd10876eb",
-	"releaseUrl": "https://github.com/f5xc-salesdemos/xcsh/releases/tag/v19.43.0"
+	"commitUrl": "https://github.com/f5xc-salesdemos/xcsh/commit/09742430243eddeb0ed597e94079c21ceca02d7f",
+	"releaseUrl": "https://github.com/f5xc-salesdemos/xcsh/releases/tag/v19.43.2"
 };

package/src/modes/theme/mermaid-cache.ts

@@ -41,6 +41,33 @@ export interface RenderMermaidThemedOptions {
 	colorMode?: MermaidColorMode;
 	/** Extra layout options (padding, useAscii, …). */
 	render?: MermaidAsciiRenderOptions;
+	/**
+	 * Available content width. When set (and paddingX isn't overridden), node spacing
+	 * is expanded toward this width so the diagram uses the available space instead of
+	 * rendering tiny — capped so small diagrams don't sprawl.
+	 */
+	targetWidth?: number;
+}
+
+const DEFAULT_PADDING_X = 2;
+const DEFAULT_PADDING_Y = 1;
+// Candidate horizontal spacings (ascending). Widening paddingX grows width WITHOUT
+// growing height, so we can use much of the terminal; capped so a tiny diagram
+// doesn't sprawl into absurdly long edges on a very wide terminal.
+const PADDING_X_CANDIDATES = [1, 2, 4, 6, 8, 10, 12, 16, 20, 24];
+
+/** Largest candidate paddingX whose rendered width still fits targetWidth (>= smallest). */
+function pickPaddingXForWidth(source: string, targetWidth: number): number {
+	let best = PADDING_X_CANDIDATES[0]!;
+	for (const px of PADDING_X_CANDIDATES) {
+		const out = renderMermaidAsciiSafe(source, { colorMode: "none", paddingX: px, paddingY: DEFAULT_PADDING_Y });
+		if (out == null) break;
+		let w = 0;
+		for (const line of out.split("\n")) w = Math.max(w, Bun.stringWidth(line));
+		if (w <= targetWidth) best = px;
+		else break; // wider candidates only grow; stop early (also avoids costly large-padding renders)
+	}
+	return best;
 }
 
 /**
@@ -54,25 +81,27 @@ export function renderMermaidThemed(source: string, theme: Theme, opts?: RenderM
 	if (mermaidSourceExceedsLimit(source)) return null;
 
 	const mode = colorModeFor(theme, opts?.colorMode);
-	// Layout options (useAscii, padding, …) change the output, so they must be part
-	// of the key. Omitted when absent so the key matches mermaidThemeSignature() —
-	// the no-options form used by the inline-markdown prerender/lookup path.
-	const optsSig = opts?.render && Object.keys(opts.render).length > 0 ? `|${JSON.stringify(opts.render)}` : "";
+	const baseRender = opts?.render ?? {};
+	// Resolve horizontal spacing: explicit override wins; else expand toward the target
+	// width (capped) so the diagram uses the space; else the compact default.
+	const paddingX =
+		baseRender.paddingX ??
+		(opts?.targetWidth !== undefined ? pickPaddingXForWidth(source, opts.targetWidth) : DEFAULT_PADDING_X);
+	const renderOpts: MermaidAsciiRenderOptions = { paddingY: DEFAULT_PADDING_Y, ...baseRender, paddingX };
+
+	// Layout options change the output, so they must be part of the key — but the
+	// compact DEFAULT is treated as "no options" so the key still matches
+	// mermaidThemeSignature()/getMermaidAscii() (the inline prerender/lookup path).
+	const sigObj: Record<string, unknown> = { ...renderOpts };
+	if (sigObj.paddingX === DEFAULT_PADDING_X) delete sigObj.paddingX;
+	if (sigObj.paddingY === DEFAULT_PADDING_Y) delete sigObj.paddingY;
+	const optsSig = Object.keys(sigObj).length > 0 ? `|${JSON.stringify(sigObj)}` : "";
 	const key = `${Bun.hash(source.trim())}|${mode}:${paletteSignature(theme)}${optsSig}`;
 	const cached = cache.get(key);
 	if (cached !== undefined) return cached;
 
 	const asciiTheme = buildMermaidAsciiTheme(theme);
-	// Compact defaults: beautiful-mermaid's paddingX/paddingY of 5 spreads nodes far
-	// apart and bloats the diagram. Tighter spacing reads more elegantly and helps it
-	// fit the transcript width. Callers can still override via opts.render.
-	const colored = renderMermaidAsciiSafe(source, {
-		paddingX: 2,
-		paddingY: 1,
-		...opts?.render,
-		colorMode: mode,
-		theme: asciiTheme,
-	});
+	const colored = renderMermaidAsciiSafe(source, { ...renderOpts, colorMode: mode, theme: asciiTheme });
 	if (colored == null) {
 		cache.set(key, null);
 		return null;

package/src/modes/theme/mermaid-palette.ts

@@ -1,7 +1,8 @@
 /**
- * Map the active xcsh UI theme onto a mermaid `AsciiTheme` (per-role hues) and a
- * cycling list of node-accent ANSI escapes for the per-node tint pass. Reading the
- * theme keeps diagrams on-brand and dark/light adaptive.
+ * Map the active xcsh UI theme onto a mermaid `AsciiTheme`. The palette is
+ * deliberately restrained and professional: neutral gray structure with a single
+ * F5-brand accent on the arrowheads — no rainbow of per-node colors. Reading the
+ * theme keeps it dark/light adaptive and on-brand.
  */
 import type { MermaidAsciiRenderOptions } from "@f5xc-salesdemos/pi-utils";
 import type { Theme } from "./theme";
@@ -9,35 +10,30 @@ import type { Theme } from "./theme";
 type AsciiTheme = NonNullable<MermaidAsciiRenderOptions["theme"]>;
 
 /**
- * Per-role color palette: red node borders, gold labels, blue edges, green
- * arrowheads. These show through wherever the per-node tint pass doesn't apply
- * (edges, arrows, subgraph frames, and as the fallback when tinting is skipped).
+ * Restrained per-role palette — neutral grays for the diagram structure, with one
+ * brand accent on the arrowheads:
+ *   labels  → neutral text gray
+ *   borders → soft gray
+ *   edges   → dim gray (recede behind the boxes)
+ *   arrows  → F5 brand accent (the single pop of color)
+ * Nodes render uniformly (see buildNodeAccents — no per-node tint).
  */
 export function buildMermaidAsciiTheme(theme: Theme): AsciiTheme {
 	return {
-		fg: theme.getFgHex("mdHeading", "#febc38"), // node/edge labels
-		border: theme.getFgHex("accent", "#ca260a"), // node + subgraph borders
-		line: theme.getFgHex("mdLink", "#0088fa"), // edge lines
-		arrow: theme.getFgHex("success", "#00ff88"), // arrowheads
-		corner: theme.getFgHex("mdLink", "#0088fa"),
-		junction: theme.getFgHex("accent", "#ca260a"),
+		fg: theme.getFgHex("toolOutput", "#9ca3b0"), // node + edge labels
+		border: theme.getFgHex("muted", "#9ca3b0"), // node + subgraph borders
+		line: theme.getFgHex("dim", "#6b7280"), // edge lines — subtle
+		arrow: theme.getFgHex("accent", "#ca260a"), // arrowheads — single brand accent
+		corner: theme.getFgHex("dim", "#6b7280"),
+		junction: theme.getFgHex("muted", "#9ca3b0"),
 	};
 }
 
 /**
- * ANSI foreground escapes cycled across detected node boxes so each node reads as
- * a distinct hue. Drawn from vivid, well-separated theme roles.
+ * Per-node accent colors for the tint pass. Intentionally EMPTY: a professional
+ * diagram reads as one consistent palette, not a different bright hue per box.
+ * With no accents, the tint pass is a no-op and nodes use the role colors above.
  */
-export function buildNodeAccents(theme: Theme): string[] {
-	const roles = ["chromeAccent", "success", "warning", "mdLink", "accent"] as const;
-	const seen = new Set<string>();
-	const accents: string[] = [];
-	for (const role of roles) {
-		const ansi = theme.getFgAnsi(role);
-		if (!seen.has(ansi)) {
-			seen.add(ansi);
-			accents.push(ansi);
-		}
-	}
-	return accents;
+export function buildNodeAccents(_theme: Theme): string[] {
+	return [];
 }

package/src/modes/theme/theme.ts

@@ -10,13 +10,15 @@ import {
 	supportsLanguage as nativeSupportsLanguage,
 } from "@f5xc-salesdemos/pi-natives";
 import type { EditorTheme, MarkdownTheme, SelectListTheme, SymbolTheme } from "@f5xc-salesdemos/pi-tui";
-import { adjustHsv, getCustomThemesDir, isEnoent, logger } from "@f5xc-salesdemos/pi-utils";
+import { adjustHsv, detectDiagramType, getCustomThemesDir, isEnoent, logger } from "@f5xc-salesdemos/pi-utils";
 import { type Static, Type } from "@sinclair/typebox";
 import { TypeCompiler } from "@sinclair/typebox/compiler";
 import chalk from "chalk";
+import { buildMermaidBlockOptions, diagramTypeLabel } from "../../tools/mermaid-renderer";
+import { renderOutputBlock } from "../../tui";
 // Embed theme JSON files at build time
 import { defaultThemes } from "./defaults";
-import { getMermaidAscii, mermaidThemeSignature } from "./mermaid-cache";
+import { getMermaidAscii, mermaidThemeSignature, renderMermaidThemed } from "./mermaid-cache";
 
 export { getLanguageFromPath } from "../../utils/lang-from-path";
 
@@ -2510,6 +2512,14 @@ export function getMarkdownTheme(): MarkdownTheme {
 		strikethrough: (text: string) => chalk.strikethrough(text),
 		symbols: getSymbolTheme(),
 		getMermaidAscii: (hash: bigint | number) => getMermaidAscii(hash, mermaidThemeSignature(theme)),
+		renderMermaidBlock: (source: string, width: number): string[] | null => {
+			const diagram = renderMermaidThemed(source, theme, { targetWidth: Math.max(20, width - 4) });
+			if (!diagram) return null;
+			return renderOutputBlock(
+				buildMermaidBlockOptions(diagram, { width, theme, typeLabel: diagramTypeLabel(detectDiagramType(source)) }),
+				theme,
+			);
+		},
 		highlightCode: (code: string, lang?: string): string[] => {
 			const validLang = lang && nativeSupportsLanguage(lang) ? lang : undefined;
 			try {

package/src/tools/mermaid-renderer.ts

@@ -1,18 +1,18 @@
-/** TUI renderer for the render_mermaid tool — bordered, themed, colorized diagram output. */
+/** TUI renderer for the render_mermaid tool — single F5-framed, themed, colorized diagram. */
 import type { Component } from "@f5xc-salesdemos/pi-tui";
-import { Text } from "@f5xc-salesdemos/pi-tui";
+import { Text, visibleWidth } from "@f5xc-salesdemos/pi-tui";
 import { detectDiagramType, type MermaidDiagramType } from "@f5xc-salesdemos/pi-utils";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import { renderMermaidThemed } from "../modes/theme/mermaid-cache";
 import type { Theme } from "../modes/theme/theme";
-import { CachedOutputBlock, F5_TOOL_BORDER_COLOR, renderStatusLine } from "../tui";
+import { CachedOutputBlock, F5_TOOL_BORDER_COLOR, type OutputBlockOptions, renderStatusLine } from "../tui";
 import type { RenderMermaidToolDetails } from "./render-mermaid";
-import { addSection, formatErrorMessage, replaceTabs } from "./render-utils";
+import { formatErrorMessage, replaceTabs } from "./render-utils";
 
 const TOOL_TITLE = "Mermaid";
 
-/** Human-friendly caption for the diagram-type badge in the block header. */
-function diagramTypeLabel(type: MermaidDiagramType): string {
+/** Human-friendly caption for the diagram type, shown in the F5 frame header. */
+export function diagramTypeLabel(type: MermaidDiagramType): string {
 	switch (type) {
 		case "flowchart":
 			return "flowchart";
@@ -31,6 +31,41 @@ function diagramTypeLabel(type: MermaidDiagramType): string {
 	}
 }
 
+/**
+ * Build the F5 output-block options that frame a themed/colored mermaid diagram.
+ * Shared by the render_mermaid tool result AND inline ```mermaid markdown blocks, so
+ * every mermaid render gets the SAME single F5 frame — and the diagram is clipped
+ * (wrapContent: false), never wrapped, so a wide diagram can't reflow or overflow.
+ */
+export function buildMermaidBlockOptions(
+	diagramText: string,
+	opts: { width: number; theme: Theme; typeLabel: string; artifactId?: string },
+): OutputBlockOptions {
+	// Unlabeled section: the header already reads "Mermaid · <type>", so a "Diagram"
+	// bar would be redundant. The diagram keeps its own colors; we only normalize tabs.
+	const lines = diagramText.split("\n").map(line => replaceTabs(line));
+	const meta = opts.artifactId ? [opts.theme.fg("dim", `artifact:${opts.artifactId.slice(0, 8)}`)] : undefined;
+	const header = renderStatusLine(
+		{ title: TOOL_TITLE, titleColor: "dim", description: opts.theme.fg("muted", opts.typeLabel), meta },
+		opts.theme,
+	);
+	// Size the frame SNUGLY to the diagram (+ one space of padding each side), capped at
+	// the available width and kept wide enough for the header caption — so the diagram
+	// feels enclosed in a small padded frame instead of spanning the whole terminal
+	// (tiny diagram) or clipping against the right border (wide diagram).
+	const maxDiagramWidth = lines.reduce((max, line) => Math.max(max, visibleWidth(line)), 0);
+	const desired = Math.max(maxDiagramWidth + 4, visibleWidth(header) + 8);
+	const width = Math.min(opts.width, Math.max(1, desired));
+	return {
+		header,
+		state: "success",
+		sections: [{ lines }],
+		width,
+		borderColor: F5_TOOL_BORDER_COLOR,
+		wrapContent: false,
+	};
+}
+
 type MermaidRenderArgs = {
 	mermaid?: string;
 };
@@ -50,63 +85,39 @@ export const mermaidRenderer = {
 			details?: RenderMermaidToolDetails;
 			isError?: boolean;
 		},
-		options: RenderResultOptions,
+		_options: RenderResultOptions,
 		uiTheme: Theme,
 		args?: MermaidRenderArgs,
 	): Component {
-		const isError = result.isError === true;
-
-		if (isError) {
+		if (result.isError === true) {
 			const errorText = result.content?.find(c => c.type === "text")?.text;
 			return new Text(formatErrorMessage(errorText, uiTheme), 0, 0);
 		}
 
-		const sections: Array<{ label?: string; lines: string[] }> = [];
-		const meta: string[] = [];
 		const rawText = result.content?.find(c => c.type === "text")?.text ?? "";
-
 		// Strip artifact reference from the plain result text (fallback path).
 		const artifactIdx = rawText.indexOf("\n\nSaved artifact:");
 		const plainText = artifactIdx >= 0 ? rawText.slice(0, artifactIdx) : rawText;
 
-		// Prefer re-rendering from the original source: this yields the themed,
-		// per-role-colored, node-tinted diagram. Fall back to the plain result text.
+		// Prefer re-rendering from the original source: themed, per-node-tinted, colored.
 		const source = args?.mermaid?.trim();
-		const diagramText = (source ? renderMermaidThemed(source, uiTheme) : null) ?? plainText;
-		const caption = source ? diagramTypeLabel(detectDiagramType(source)) : "diagram";
-
-		// Keep the diagram's own colors — do NOT recolor each line a flat tool color.
-		// Show the FULL diagram: truncating a diagram with "… N more lines" defeats the purpose.
-		const diagramLines = diagramText.split("\n").map(line => replaceTabs(line));
-		addSection(sections, "Diagram", diagramLines, uiTheme);
-
-		if (result.details?.artifactId) {
-			meta.push(uiTheme.fg("dim", `artifact:${result.details.artifactId.slice(0, 8)}`));
-		}
-
-		const header = renderStatusLine(
-			{
-				title: TOOL_TITLE,
-				titleColor: "dim",
-				description: uiTheme.fg("muted", caption),
-				meta: meta.length > 0 ? meta : undefined,
-			},
-			uiTheme,
-		);
+		const typeLabel = source ? diagramTypeLabel(detectDiagramType(source)) : "diagram";
+		const artifactId = result.details?.artifactId;
 
-		const outputBlock = new CachedOutputBlock();
+		const block = new CachedOutputBlock();
 		return {
 			render(width: number): string[] {
-				const state = options.isPartial ? "pending" : "success";
-				return outputBlock.render(
-					// Clip, don't wrap: a diagram is a fixed grid — word-wrapping reflows it
-					// and breaks alignment. Wide diagrams are truncated to the block width.
-					{ header, state, sections, width, borderColor: F5_TOOL_BORDER_COLOR, wrapContent: false },
+				// Expand the diagram toward the available width (inside the frame), then
+				// size the frame snugly around the result.
+				const targetWidth = Math.max(20, width - 4);
+				const diagramText = (source ? renderMermaidThemed(source, uiTheme, { targetWidth }) : null) ?? plainText;
+				return block.render(
+					buildMermaidBlockOptions(diagramText, { width, theme: uiTheme, typeLabel, artifactId }),
 					uiTheme,
 				);
 			},
 			invalidate() {
-				outputBlock.invalidate();
+				block.invalidate();
 			},
 		};
 	},