@f5xc-salesdemos/xcsh 19.41.1 → 19.42.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@f5xc-salesdemos/xcsh",
-	"version": "19.41.1",
+	"version": "19.42.0",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"homepage": "https://github.com/f5xc-salesdemos/xcsh",
 	"author": "Can Boluk",
@@ -51,13 +51,13 @@
 	"dependencies": {
 		"@agentclientprotocol/sdk": "0.16.1",
 		"@mozilla/readability": "^0.6",
-		"@f5xc-salesdemos/xcsh-stats": "19.41.1",
-		"@f5xc-salesdemos/pi-agent-core": "19.41.1",
-		"@f5xc-salesdemos/pi-ai": "19.41.1",
-		"@f5xc-salesdemos/pi-natives": "19.41.1",
-		"@f5xc-salesdemos/pi-resource-management": "19.41.1",
-		"@f5xc-salesdemos/pi-tui": "19.41.1",
-		"@f5xc-salesdemos/pi-utils": "19.41.1",
+		"@f5xc-salesdemos/xcsh-stats": "19.42.0",
+		"@f5xc-salesdemos/pi-agent-core": "19.42.0",
+		"@f5xc-salesdemos/pi-ai": "19.42.0",
+		"@f5xc-salesdemos/pi-natives": "19.42.0",
+		"@f5xc-salesdemos/pi-resource-management": "19.42.0",
+		"@f5xc-salesdemos/pi-tui": "19.42.0",
+		"@f5xc-salesdemos/pi-utils": "19.42.0",
 		"@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.41.1",
-	"commit": "0744c7f8bafe717d59be1fd3bc46fac5a79ba629",
-	"shortCommit": "0744c7f",
+	"version": "19.42.0",
+	"commit": "5959e8371dc1aaa802e7a5b3bc51642328816b2a",
+	"shortCommit": "5959e83",
 	"branch": "main",
-	"tag": "v19.41.1",
-	"commitDate": "2026-06-23T18:52:47Z",
-	"buildDate": "2026-06-23T19:26:09.570Z",
+	"tag": "v19.42.0",
+	"commitDate": "2026-06-24T01:36:24Z",
+	"buildDate": "2026-06-24T02:03:24.964Z",
 	"dirty": true,
 	"prNumber": "",
 	"repoUrl": "https://github.com/f5xc-salesdemos/xcsh",
 	"repoSlug": "f5xc-salesdemos/xcsh",
-	"commitUrl": "https://github.com/f5xc-salesdemos/xcsh/commit/0744c7f8bafe717d59be1fd3bc46fac5a79ba629",
-	"releaseUrl": "https://github.com/f5xc-salesdemos/xcsh/releases/tag/v19.41.1"
+	"commitUrl": "https://github.com/f5xc-salesdemos/xcsh/commit/5959e8371dc1aaa802e7a5b3bc51642328816b2a",
+	"releaseUrl": "https://github.com/f5xc-salesdemos/xcsh/releases/tag/v19.42.0"
 };

package/src/modes/components/assistant-message.ts

@@ -2,7 +2,7 @@ import type { AssistantMessage, ImageContent, Usage } from "@f5xc-salesdemos/pi-
 import { Container, Image, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from "@f5xc-salesdemos/pi-tui";
 import { formatNumber, logger } from "@f5xc-salesdemos/pi-utils";
 import { settings } from "../../config/settings";
-import { hasPendingMermaid, prerenderMermaid } from "../../modes/theme/mermaid-cache";
+import { hasPendingMermaid, mermaidThemeSignature, prerenderMermaid } from "../../modes/theme/mermaid-cache";
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import { resolveImageOptions } from "../../tools/render-utils";
 
@@ -86,10 +86,14 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 	#triggerMermaidPrerender(message: AssistantMessage): void {
-		if (!TERMINAL.imageProtocol || this.#prerenderInFlight) return;
+		// ASCII/Unicode mermaid renders in any terminal — do NOT gate on image protocol.
+		if (this.#prerenderInFlight) return;
 
+		const sig = mermaidThemeSignature(theme);
 		// Check if any text content has pending mermaid blocks
-		const hasPending = message.content.some(c => c.type === "text" && c.text.trim() && hasPendingMermaid(c.text));
+		const hasPending = message.content.some(
+			c => c.type === "text" && c.text.trim() && hasPendingMermaid(c.text, sig),
+		);
 		if (!hasPending) return;
 
 		this.#prerenderInFlight = true;
@@ -98,8 +102,8 @@ export class AssistantMessageComponent extends Container {
 		void (async () => {
 			try {
 				for (const content of message.content) {
-					if (content.type === "text" && content.text.trim() && hasPendingMermaid(content.text)) {
-						prerenderMermaid(content.text);
+					if (content.type === "text" && content.text.trim() && hasPendingMermaid(content.text, sig)) {
+						prerenderMermaid(content.text, theme);
 					}
 				}
 			} catch (error) {

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

@@ -1,44 +1,84 @@
-import { extractMermaidBlocks, logger, renderMermaidAsciiSafe } from "@f5xc-salesdemos/pi-utils";
+import {
+	extractMermaidBlocks,
+	logger,
+	type MermaidAsciiRenderOptions,
+	type MermaidColorMode,
+	pickColorMode,
+	renderMermaidAsciiSafe,
+	tintMermaidNodes,
+} from "@f5xc-salesdemos/pi-utils";
+import { buildMermaidAsciiTheme, buildNodeAccents } from "./mermaid-palette";
+import type { Theme } from "./theme";
 
-const cache = new Map<bigint | number, string | null>();
+// Keyed by `${sourceHash}|${themeSignature}` so a theme switch re-renders rather
+// than serving a stale, differently-colored diagram.
+const cache = new Map<string, string | null>();
 
 let onRenderNeeded: (() => void) | null = null;
 
-/**
- * Set callback to trigger TUI re-render when mermaid ASCII renders become available.
- */
+/** Set callback to trigger a TUI re-render when new mermaid renders become available. */
 export function setMermaidRenderCallback(callback: (() => void) | null): void {
 	onRenderNeeded = callback;
 }
 
-/**
- * Get a pre-rendered mermaid ASCII diagram by hash.
- * Returns null if not cached or rendering failed.
- */
-export function getMermaidAscii(hash: bigint | number): string | null {
-	return cache.get(hash) ?? null;
+function colorModeFor(theme: Theme, override?: MermaidColorMode): MermaidColorMode {
+	if (override) return override;
+	return pickColorMode({ noColor: Boolean(Bun.env.NO_COLOR), trueColor: theme.getColorMode() === "truecolor" });
+}
+
+function paletteSignature(theme: Theme): string {
+	return `${JSON.stringify(buildMermaidAsciiTheme(theme))}|${buildNodeAccents(theme).join(",")}`;
+}
+
+/** Stable signature identifying a theme's mermaid appearance — used for cache keying. */
+export function mermaidThemeSignature(theme: Theme): string {
+	return `${colorModeFor(theme)}:${paletteSignature(theme)}`;
+}
+
+export interface RenderMermaidThemedOptions {
+	/** Force a color mode (otherwise derived from the theme + NO_COLOR). */
+	colorMode?: MermaidColorMode;
+	/** Extra layout options (padding, useAscii, …). */
+	render?: MermaidAsciiRenderOptions;
 }
 
 /**
- * Render all mermaid blocks in markdown text.
- * Caches results and calls render callback when new diagrams are available.
+ * Render mermaid source to a themed, per-node-tinted ASCII/Unicode string.
+ * Applies the theme's per-role palette, then the best-effort node-tint pass.
+ * Result is memoized per (source, theme, colorMode). Returns null on parse failure.
  */
-export function prerenderMermaid(markdown: string): void {
+export function renderMermaidThemed(source: string, theme: Theme, opts?: RenderMermaidThemedOptions): string | null {
+	const mode = colorModeFor(theme, opts?.colorMode);
+	const key = `${Bun.hash(source.trim())}|${mode}:${paletteSignature(theme)}`;
+	const cached = cache.get(key);
+	if (cached !== undefined) return cached;
+
+	const asciiTheme = buildMermaidAsciiTheme(theme);
+	const colored = renderMermaidAsciiSafe(source, { ...opts?.render, colorMode: mode, theme: asciiTheme });
+	if (colored == null) {
+		cache.set(key, null);
+		return null;
+	}
+	const result = mode === "none" ? colored : tintMermaidNodes(colored.split("\n"), buildNodeAccents(theme)).join("\n");
+	cache.set(key, result);
+	return result;
+}
+
+/** Get a pre-rendered mermaid diagram by source hash + theme signature, or null. */
+export function getMermaidAscii(hash: bigint | number, themeSig: string): string | null {
+	return cache.get(`${hash}|${themeSig}`) ?? null;
+}
+
+/** Render and cache every mermaid block in `markdown` for the given theme. */
+export function prerenderMermaid(markdown: string, theme: Theme): void {
 	const blocks = extractMermaidBlocks(markdown);
 	if (blocks.length === 0) return;
 
+	const sig = mermaidThemeSignature(theme);
 	let hasNew = false;
-
 	for (const { source, hash } of blocks) {
-		if (cache.has(hash)) continue;
-
-		const ascii = renderMermaidAsciiSafe(source);
-		if (ascii) {
-			cache.set(hash, ascii);
-			hasNew = true;
-		} else {
-			cache.set(hash, null);
-		}
+		if (cache.has(`${hash}|${sig}`)) continue;
+		if (renderMermaidThemed(source, theme) != null) hasNew = true;
 	}
 
 	if (hasNew && onRenderNeeded) {
@@ -52,17 +92,13 @@ export function prerenderMermaid(markdown: string): void {
 	}
 }
 
-/**
- * Check if markdown contains mermaid blocks that aren't cached yet.
- */
-export function hasPendingMermaid(markdown: string): boolean {
+/** Check whether `markdown` has mermaid blocks not yet cached for this theme. */
+export function hasPendingMermaid(markdown: string, themeSig: string): boolean {
 	const blocks = extractMermaidBlocks(markdown);
-	return blocks.some(({ hash }) => !cache.has(hash));
+	return blocks.some(({ hash }) => !cache.has(`${hash}|${themeSig}`));
 }
 
-/**
- * Clear the mermaid cache.
- */
+/** Clear the mermaid cache. */
 export function clearMermaidCache(): void {
 	cache.clear();
 }

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+import type { MermaidAsciiRenderOptions } from "@f5xc-salesdemos/pi-utils";
+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).
+ */
+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"),
+	};
+}
+
+/**
+ * ANSI foreground escapes cycled across detected node boxes so each node reads as
+ * a distinct hue. Drawn from vivid, well-separated theme roles.
+ */
+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;
+}

package/src/modes/theme/theme.ts

@@ -16,7 +16,7 @@ import { TypeCompiler } from "@sinclair/typebox/compiler";
 import chalk from "chalk";
 // Embed theme JSON files at build time
 import { defaultThemes } from "./defaults";
-import { getMermaidAscii } from "./mermaid-cache";
+import { getMermaidAscii, mermaidThemeSignature } from "./mermaid-cache";
 
 export { getLanguageFromPath } from "../../utils/lang-from-path";
 
@@ -1316,6 +1316,7 @@ const langMap: Record<string, SymbolKey> = {
 
 export class Theme {
 	#fgColors: Record<ThemeColor, string>;
+	#fgHex: Partial<Record<ThemeColor, string>>;
 	#bgColors: Record<ThemeBg, string>;
 	#symbols: SymbolMap;
 
@@ -1327,8 +1328,12 @@ export class Theme {
 		symbolOverrides: Partial<Record<SymbolKey, string>>,
 	) {
 		this.#fgColors = {} as Record<ThemeColor, string>;
+		this.#fgHex = {};
 		for (const [key, value] of Object.entries(fgColors) as [ThemeColor, string | number][]) {
 			this.#fgColors[key] = fgAnsi(value, mode);
+			// Retain the raw hex (when the role resolves to one) for consumers that need
+			// a color value rather than an ANSI escape — e.g. the mermaid AsciiTheme.
+			if (typeof value === "string" && value.startsWith("#")) this.#fgHex[key] = value;
 		}
 		// gutterError remains optional — neither shipped theme carries it
 		this.#fgColors.gutterError ??= this.#fgColors.error;
@@ -1386,6 +1391,15 @@ export class Theme {
 		return ansi;
 	}
 
+	/**
+	 * Raw hex (e.g. "#ca260a") for a color role, for consumers that need a color
+	 * value rather than an ANSI escape (e.g. the mermaid AsciiTheme). Roles that
+	 * resolve to "" (default fg) or an ansi256 index yield `fallback`.
+	 */
+	getFgHex(color: ThemeColor, fallback = "#cccccc"): string {
+		return this.#fgHex[color] ?? fallback;
+	}
+
 	/** Convert a ThemeColor's fg ANSI code to a bg ANSI code (swap \x1b[38; → \x1b[48;). */
 	fgColorAsBg(color: ThemeColor): string {
 		return this.getFgAnsi(color).replace("\x1b[38;", "\x1b[48;");
@@ -2495,7 +2509,7 @@ export function getMarkdownTheme(): MarkdownTheme {
 		underline: (text: string) => theme.underline(text),
 		strikethrough: (text: string) => chalk.strikethrough(text),
 		symbols: getSymbolTheme(),
-		getMermaidAscii,
+		getMermaidAscii: (hash: bigint | number) => getMermaidAscii(hash, mermaidThemeSignature(theme)),
 		highlightCode: (code: string, lang?: string): string[] => {
 			const validLang = lang && nativeSupportsLanguage(lang) ? lang : undefined;
 			try {

package/src/tools/mermaid-renderer.ts

@@ -1,7 +1,9 @@
-/** TUI renderer for the render_mermaid tool — bordered ASCII diagram output. */
+/** TUI renderer for the render_mermaid tool — bordered, themed, colorized diagram output. */
 import type { Component } from "@f5xc-salesdemos/pi-tui";
 import { Text } 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 type { RenderMermaidToolDetails } from "./render-mermaid";
@@ -10,6 +12,26 @@ import { addSection, formatErrorMessage, replaceTabs } from "./render-utils";
 const TOOL_TITLE = "Mermaid";
 const MAX_DIAGRAM_LINES = 40;
 
+/** Human-friendly caption for the diagram-type badge in the block header. */
+function diagramTypeLabel(type: MermaidDiagramType): string {
+	switch (type) {
+		case "flowchart":
+			return "flowchart";
+		case "sequence":
+			return "sequence diagram";
+		case "class":
+			return "class diagram";
+		case "er":
+			return "ER diagram";
+		case "state":
+			return "state diagram";
+		case "xychart":
+			return "xychart";
+		default:
+			return "diagram";
+	}
+}
+
 type MermaidRenderArgs = {
 	mermaid?: string;
 };
@@ -31,7 +53,7 @@ export const mermaidRenderer = {
 		},
 		options: RenderResultOptions,
 		uiTheme: Theme,
-		_args?: MermaidRenderArgs,
+		args?: MermaidRenderArgs,
 	): Component {
 		const isError = result.isError === true;
 
@@ -44,11 +66,18 @@ export const mermaidRenderer = {
 		const meta: string[] = [];
 		const rawText = result.content?.find(c => c.type === "text")?.text ?? "";
 
-		// Strip artifact reference from display
+		// Strip artifact reference from the plain result text (fallback path).
 		const artifactIdx = rawText.indexOf("\n\nSaved artifact:");
-		const diagramText = artifactIdx >= 0 ? rawText.slice(0, artifactIdx) : rawText;
+		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.
+		const source = args?.mermaid?.trim();
+		const diagramText = (source ? renderMermaidThemed(source, uiTheme) : null) ?? plainText;
+		const caption = source ? diagramTypeLabel(detectDiagramType(source)) : "diagram";
 
-		const diagramLines = diagramText.split("\n").map(line => replaceTabs(uiTheme.fg("toolOutput", line)));
+		// Keep the diagram's own colors — do NOT recolor each line a flat tool color.
+		const diagramLines = diagramText.split("\n").map(line => replaceTabs(line));
 		addSection(sections, "Diagram", diagramLines, uiTheme, MAX_DIAGRAM_LINES);
 
 		if (result.details?.artifactId) {
@@ -59,7 +88,7 @@ export const mermaidRenderer = {
 			{
 				title: TOOL_TITLE,
 				titleColor: "dim",
-				description: uiTheme.fg("muted", "diagram"),
+				description: uiTheme.fg("muted", caption),
 				meta: meta.length > 0 ? meta : undefined,
 			},
 			uiTheme,