gsd-pi 2.77.0-dev.538325aea → 2.77.0-dev.eaa4973bc

package/packages/gsd-agent-core/src/export-html/ansi-to-html.ts

@@ -1,259 +0,0 @@
-/**
- * ANSI escape code to HTML converter.
- *
- * Converts terminal ANSI color/style codes to HTML with inline styles.
- * Supports:
- * - Standard foreground colors (30-37) and bright variants (90-97)
- * - Standard background colors (40-47) and bright variants (100-107)
- * - 256-color palette (38;5;N and 48;5;N)
- * - RGB true color (38;2;R;G;B and 48;2;R;G;B)
- * - Text styles: bold (1), dim (2), italic (3), underline (4)
- * - Reset (0)
- */
-
-// Standard ANSI color palette (0-15)
-const ANSI_COLORS = [
-	"#000000", // 0: black
-	"#800000", // 1: red
-	"#008000", // 2: green
-	"#808000", // 3: yellow
-	"#000080", // 4: blue
-	"#800080", // 5: magenta
-	"#008080", // 6: cyan
-	"#c0c0c0", // 7: white
-	"#808080", // 8: bright black
-	"#ff0000", // 9: bright red
-	"#00ff00", // 10: bright green
-	"#ffff00", // 11: bright yellow
-	"#0000ff", // 12: bright blue
-	"#ff00ff", // 13: bright magenta
-	"#00ffff", // 14: bright cyan
-	"#ffffff", // 15: bright white
-];
-
-/**
- * Convert 256-color index to hex.
- */
-function color256ToHex(index: number): string {
-	// Standard colors (0-15)
-	if (index < 16) {
-		return ANSI_COLORS[index];
-	}
-
-	// Color cube (16-231): 6x6x6 = 216 colors
-	if (index < 232) {
-		const cubeIndex = index - 16;
-		const r = Math.floor(cubeIndex / 36);
-		const g = Math.floor((cubeIndex % 36) / 6);
-		const b = cubeIndex % 6;
-		const toComponent = (n: number): number => (n === 0 ? 0 : 55 + n * 40);
-		const toHex = (n: number): string => toComponent(n).toString(16).padStart(2, "0");
-		return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-	}
-
-	// Grayscale (232-255): 24 shades
-	const gray = 8 + (index - 232) * 10;
-	const grayHex = gray.toString(16).padStart(2, "0");
-	return `#${grayHex}${grayHex}${grayHex}`;
-}
-
-/**
- * Escape HTML special characters.
- */
-function escapeHtml(text: string): string {
-	return text
-		.replace(/&/g, "&amp;")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/"/g, "&quot;")
-		.replace(/'/g, "&#039;");
-}
-
-interface TextStyle {
-	fg: string | null;
-	bg: string | null;
-	bold: boolean;
-	dim: boolean;
-	italic: boolean;
-	underline: boolean;
-}
-
-function createEmptyStyle(): TextStyle {
-	return {
-		fg: null,
-		bg: null,
-		bold: false,
-		dim: false,
-		italic: false,
-		underline: false,
-	};
-}
-
-function styleToInlineCSS(style: TextStyle): string {
-	const parts: string[] = [];
-	if (style.fg) parts.push(`color:${style.fg}`);
-	if (style.bg) parts.push(`background-color:${style.bg}`);
-	if (style.bold) parts.push("font-weight:bold");
-	if (style.dim) parts.push("opacity:0.6");
-	if (style.italic) parts.push("font-style:italic");
-	if (style.underline) parts.push("text-decoration:underline");
-	return parts.join(";");
-}
-
-function hasStyle(style: TextStyle): boolean {
-	return style.fg !== null || style.bg !== null || style.bold || style.dim || style.italic || style.underline;
-}
-
-/**
- * Parse ANSI SGR (Select Graphic Rendition) codes and update style.
- */
-function applySgrCode(params: number[], style: TextStyle): void {
-	let i = 0;
-	while (i < params.length) {
-		const code = params[i];
-
-		if (code === 0) {
-			// Reset all
-			style.fg = null;
-			style.bg = null;
-			style.bold = false;
-			style.dim = false;
-			style.italic = false;
-			style.underline = false;
-		} else if (code === 1) {
-			style.bold = true;
-		} else if (code === 2) {
-			style.dim = true;
-		} else if (code === 3) {
-			style.italic = true;
-		} else if (code === 4) {
-			style.underline = true;
-		} else if (code === 22) {
-			// Reset bold/dim
-			style.bold = false;
-			style.dim = false;
-		} else if (code === 23) {
-			style.italic = false;
-		} else if (code === 24) {
-			style.underline = false;
-		} else if (code >= 30 && code <= 37) {
-			// Standard foreground colors
-			style.fg = ANSI_COLORS[code - 30];
-		} else if (code === 38) {
-			// Extended foreground color
-			if (params[i + 1] === 5 && params.length > i + 2) {
-				// 256-color: 38;5;N
-				style.fg = color256ToHex(params[i + 2]);
-				i += 2;
-			} else if (params[i + 1] === 2 && params.length > i + 4) {
-				// RGB: 38;2;R;G;B
-				const r = params[i + 2];
-				const g = params[i + 3];
-				const b = params[i + 4];
-				style.fg = `rgb(${r},${g},${b})`;
-				i += 4;
-			}
-		} else if (code === 39) {
-			// Default foreground
-			style.fg = null;
-		} else if (code >= 40 && code <= 47) {
-			// Standard background colors
-			style.bg = ANSI_COLORS[code - 40];
-		} else if (code === 48) {
-			// Extended background color
-			if (params[i + 1] === 5 && params.length > i + 2) {
-				// 256-color: 48;5;N
-				style.bg = color256ToHex(params[i + 2]);
-				i += 2;
-			} else if (params[i + 1] === 2 && params.length > i + 4) {
-				// RGB: 48;2;R;G;B
-				const r = params[i + 2];
-				const g = params[i + 3];
-				const b = params[i + 4];
-				style.bg = `rgb(${r},${g},${b})`;
-				i += 4;
-			}
-		} else if (code === 49) {
-			// Default background
-			style.bg = null;
-		} else if (code >= 90 && code <= 97) {
-			// Bright foreground colors
-			style.fg = ANSI_COLORS[code - 90 + 8];
-		} else if (code >= 100 && code <= 107) {
-			// Bright background colors
-			style.bg = ANSI_COLORS[code - 100 + 8];
-		}
-		// Ignore unrecognized codes
-
-		i++;
-	}
-}
-
-// Match ANSI escape sequences: ESC[ followed by params and ending with 'm'
-// eslint-disable-next-line no-control-regex -- intentional: matching ANSI escape sequences
-const ANSI_REGEX = /\x1b\[([\d;]*)m/g;
-
-/**
- * Convert ANSI-escaped text to HTML with inline styles.
- */
-function ansiToHtml(text: string): string {
-	const style = createEmptyStyle();
-	let result = "";
-	let lastIndex = 0;
-	let inSpan = false;
-
-	// Reset regex state
-	ANSI_REGEX.lastIndex = 0;
-
-	let match = ANSI_REGEX.exec(text);
-	while (match !== null) {
-		// Add text before this escape sequence
-		const beforeText = text.slice(lastIndex, match.index);
-		if (beforeText) {
-			result += escapeHtml(beforeText);
-		}
-
-		// Parse SGR parameters
-		const paramStr = match[1];
-		const params = paramStr ? paramStr.split(";").map((p) => parseInt(p, 10) || 0) : [0];
-
-		// Close existing span if we have one
-		if (inSpan) {
-			result += "</span>";
-			inSpan = false;
-		}
-
-		// Apply the codes
-		applySgrCode(params, style);
-
-		// Open new span if we have any styling
-		if (hasStyle(style)) {
-			result += `<span style="${styleToInlineCSS(style)}">`;
-			inSpan = true;
-		}
-
-		lastIndex = match.index + match[0].length;
-		match = ANSI_REGEX.exec(text);
-	}
-
-	// Add remaining text
-	const remainingText = text.slice(lastIndex);
-	if (remainingText) {
-		result += escapeHtml(remainingText);
-	}
-
-	// Close any open span
-	if (inSpan) {
-		result += "</span>";
-	}
-
-	return result;
-}
-
-/**
- * Convert array of ANSI-escaped lines to HTML.
- * Each line is wrapped in a div element.
- */
-export function ansiLinesToHtml(lines: string[]): string {
-	return lines.map((line) => `<div class="ansi-line">${ansiToHtml(line) || "&nbsp;"}</div>`).join("\n");
-}

package/packages/gsd-agent-core/src/export-html/index.ts

@@ -1,345 +0,0 @@
-import type { AgentState } from "@gsd/pi-agent-core";
-import { existsSync, readFileSync, writeFileSync } from "fs";
-import { basename, dirname, join } from "path";
-import { fileURLToPath } from "url";
-import type { ToolInfo } from "@gsd/agent-types";
-import type { SessionEntry } from "@gsd/agent-types";
-import { SessionManager } from "@gsd/pi-coding-agent";
-
-const APP_NAME = "gsd";
-
-function getExportTemplateDir(): string {
-	const moduleDir = dirname(fileURLToPath(import.meta.url));
-	if (existsSync(join(moduleDir, "template.html"))) {
-		return moduleDir;
-	}
-	const srcFallback = join(moduleDir, "..", "..", "src", "export-html");
-	return existsSync(join(srcFallback, "template.html")) ? srcFallback : moduleDir;
-}
-
-const DEFAULT_THEME_COLORS: Record<string, string> = {
-	accent: "#62a0ea",
-	border: "#3b4252",
-	borderMuted: "#2e3440",
-	text: "#e5e9f0",
-	muted: "#aeb6c3",
-	userMessageBg: "#343541",
-};
-
-function getResolvedThemeColors(_themeName?: string): Record<string, string> {
-	return DEFAULT_THEME_COLORS;
-}
-
-function getThemeExportColors(_themeName?: string): { pageBg?: string; cardBg?: string; infoBg?: string } {
-	return {};
-}
-
-/**
- * Interface for rendering custom tools to HTML.
- * Used by agent-session to pre-render extension tool output.
- */
-export interface ToolHtmlRenderer {
-	/** Render a tool call to HTML. Returns undefined if tool has no custom renderer. */
-	renderCall(toolName: string, args: unknown): string | undefined;
-	/** Render a tool result to HTML. Returns collapsed/expanded or undefined if tool has no custom renderer. */
-	renderResult(
-		toolName: string,
-		result: Array<{ type: string; text?: string; data?: string; mimeType?: string }>,
-		details: unknown,
-		isError: boolean,
-	): { collapsed?: string; expanded?: string } | undefined;
-}
-
-/** Pre-rendered HTML for a custom tool call and result */
-interface RenderedToolHtml {
-	callHtml?: string;
-	resultHtmlCollapsed?: string;
-	resultHtmlExpanded?: string;
-}
-
-export interface ExportOptions {
-	outputPath?: string;
-	themeName?: string;
-	/** Optional tool renderer for custom tools */
-	toolRenderer?: ToolHtmlRenderer;
-}
-
-/** Parse a color string to RGB values. Supports hex (#RRGGBB) and rgb(r,g,b) formats. */
-function parseColor(color: string): { r: number; g: number; b: number } | undefined {
-	const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
-	if (hexMatch) {
-		return {
-			r: Number.parseInt(hexMatch[1], 16),
-			g: Number.parseInt(hexMatch[2], 16),
-			b: Number.parseInt(hexMatch[3], 16),
-		};
-	}
-	const rgbMatch = color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
-	if (rgbMatch) {
-		return {
-			r: Number.parseInt(rgbMatch[1], 10),
-			g: Number.parseInt(rgbMatch[2], 10),
-			b: Number.parseInt(rgbMatch[3], 10),
-		};
-	}
-	return undefined;
-}
-
-/** Calculate relative luminance of a color (0-1, higher = lighter). */
-function getLuminance(r: number, g: number, b: number): number {
-	const toLinear = (c: number): number => {
-		const s = c / 255;
-		return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-	};
-	return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-}
-
-/** Adjust color brightness. Factor > 1 lightens, < 1 darkens. */
-function adjustBrightness(color: string, factor: number): string {
-	const parsed = parseColor(color);
-	if (!parsed) return color;
-	const adjust = (c: number): number => Math.min(255, Math.max(0, Math.round(c * factor)));
-	return `rgb(${adjust(parsed.r)}, ${adjust(parsed.g)}, ${adjust(parsed.b)})`;
-}
-
-/** Derive export background colors from a base color (e.g., userMessageBg). */
-function deriveExportColors(baseColor: string): { pageBg: string; cardBg: string; infoBg: string } {
-	const parsed = parseColor(baseColor);
-	if (!parsed) {
-		return {
-			pageBg: "rgb(24, 24, 30)",
-			cardBg: "rgb(30, 30, 36)",
-			infoBg: "rgb(60, 55, 40)",
-		};
-	}
-
-	const luminance = getLuminance(parsed.r, parsed.g, parsed.b);
-	const isLight = luminance > 0.5;
-
-	if (isLight) {
-		return {
-			pageBg: adjustBrightness(baseColor, 0.96),
-			cardBg: baseColor,
-			infoBg: `rgb(${Math.min(255, parsed.r + 10)}, ${Math.min(255, parsed.g + 5)}, ${Math.max(0, parsed.b - 20)})`,
-		};
-	}
-	return {
-		pageBg: adjustBrightness(baseColor, 0.7),
-		cardBg: adjustBrightness(baseColor, 0.85),
-		infoBg: `rgb(${Math.min(255, parsed.r + 20)}, ${Math.min(255, parsed.g + 15)}, ${parsed.b})`,
-	};
-}
-
-/**
- * Generate CSS custom property declarations from theme colors.
- */
-function generateThemeVars(themeName?: string): string {
-	const colors = getResolvedThemeColors(themeName);
-	const lines: string[] = [];
-	for (const [key, value] of Object.entries(colors)) {
-		lines.push(`--${key}: ${value};`);
-	}
-
-	// Use explicit theme export colors if available, otherwise derive from userMessageBg
-	const themeExport = getThemeExportColors(themeName);
-	const userMessageBg = colors.userMessageBg || "#343541";
-	const derivedColors = deriveExportColors(userMessageBg);
-
-	lines.push(`--exportPageBg: ${themeExport.pageBg ?? derivedColors.pageBg};`);
-	lines.push(`--exportCardBg: ${themeExport.cardBg ?? derivedColors.cardBg};`);
-	lines.push(`--exportInfoBg: ${themeExport.infoBg ?? derivedColors.infoBg};`);
-
-	return lines.join("\n      ");
-}
-
-interface SessionData {
-	header: ReturnType<SessionManager["getHeader"]>;
-	entries: ReturnType<SessionManager["getEntries"]>;
-	leafId: string | null;
-	systemPrompt?: string;
-	tools?: ToolInfo[];
-	/** Pre-rendered HTML for custom tool calls/results, keyed by tool call ID */
-	renderedTools?: Record<string, RenderedToolHtml>;
-}
-
-/**
- * Core HTML generation logic shared by both export functions.
- */
-function generateHtml(sessionData: SessionData, themeName?: string): string {
-	const templateDir = getExportTemplateDir();
-	const template = readFileSync(join(templateDir, "template.html"), "utf-8");
-	const templateCss = readFileSync(join(templateDir, "template.css"), "utf-8");
-	const templateJs = readFileSync(join(templateDir, "template.js"), "utf-8");
-	const markedJs = readFileSync(join(templateDir, "vendor", "marked.min.js"), "utf-8");
-	const hljsJs = readFileSync(join(templateDir, "vendor", "highlight.min.js"), "utf-8");
-
-	const themeVars = generateThemeVars(themeName);
-	const colors = getResolvedThemeColors(themeName);
-	const exportColors = deriveExportColors(colors.userMessageBg || "#343541");
-	const bodyBg = exportColors.pageBg;
-	const containerBg = exportColors.cardBg;
-	const infoBg = exportColors.infoBg;
-
-	// Base64 encode session data to avoid escaping issues
-	const sessionDataBase64 = Buffer.from(JSON.stringify(sessionData)).toString("base64");
-
-	// Build the CSS with theme variables injected
-	const css = templateCss
-		.replace("{{THEME_VARS}}", themeVars)
-		.replace("{{BODY_BG}}", bodyBg)
-		.replace("{{CONTAINER_BG}}", containerBg)
-		.replace("{{INFO_BG}}", infoBg);
-
-	return template
-		.replace("{{CSS}}", css)
-		.replace("{{JS}}", templateJs)
-		.replace("{{SESSION_DATA}}", sessionDataBase64)
-		.replace("{{MARKED_JS}}", markedJs)
-		.replace("{{HIGHLIGHT_JS}}", hljsJs);
-}
-
-/** Built-in tool names that have custom rendering in template.js */
-const BUILTIN_TOOLS = new Set(["bash", "read", "write", "edit", "ls", "find", "grep"]);
-
-/**
- * Pre-render custom tools to HTML using their TUI renderers.
- */
-function preRenderCustomTools(
-	entries: SessionEntry[],
-	toolRenderer: ToolHtmlRenderer,
-): Record<string, RenderedToolHtml> {
-	const renderedTools: Record<string, RenderedToolHtml> = {};
-
-	for (const entry of entries) {
-		if (entry.type !== "message") continue;
-		const msg = entry.message;
-
-		// Find tool calls in assistant messages
-		if (msg.role === "assistant" && Array.isArray(msg.content)) {
-			for (const block of msg.content) {
-				if (block.type === "toolCall" && !BUILTIN_TOOLS.has(block.name)) {
-					const callHtml = toolRenderer.renderCall(block.name, block.arguments);
-					if (callHtml) {
-						renderedTools[block.id] = { callHtml };
-					}
-				}
-			}
-		}
-
-		// Find tool results
-		if (msg.role === "toolResult" && msg.toolCallId) {
-			const toolName = msg.toolName || "";
-			// Only render if we have a pre-rendered call OR it's not a built-in tool
-			const existing = renderedTools[msg.toolCallId];
-			if (existing || !BUILTIN_TOOLS.has(toolName)) {
-				const rendered = toolRenderer.renderResult(toolName, msg.content, msg.details, msg.isError || false);
-				if (rendered) {
-					renderedTools[msg.toolCallId] = {
-						...existing,
-						resultHtmlCollapsed: rendered.collapsed,
-						resultHtmlExpanded: rendered.expanded,
-					};
-				}
-			}
-		}
-	}
-
-	return renderedTools;
-}
-
-/**
- * Export session to HTML using SessionManager and AgentState.
- * Used by TUI's /export command.
- */
-export async function exportSessionToHtml(
-	sm: SessionManager,
-	state?: AgentState,
-	options?: ExportOptions | string,
-): Promise<string> {
-	const opts: ExportOptions = typeof options === "string" ? { outputPath: options } : options || {};
-
-	const sessionFile = sm.getSessionFile();
-	if (!sessionFile) {
-		throw new Error("Cannot export in-memory session to HTML");
-	}
-	if (!existsSync(sessionFile)) {
-		throw new Error("Nothing to export yet - start a conversation first");
-	}
-
-	const entries = sm.getEntries();
-
-	// Pre-render custom tools if a tool renderer is provided
-	let renderedTools: Record<string, RenderedToolHtml> | undefined;
-	if (opts.toolRenderer) {
-		renderedTools = preRenderCustomTools(entries, opts.toolRenderer);
-		// Only include if we actually rendered something
-		if (Object.keys(renderedTools).length === 0) {
-			renderedTools = undefined;
-		}
-	}
-
-	const sessionData: SessionData = {
-		header: sm.getHeader(),
-		entries,
-		leafId: sm.getLeafId(),
-		systemPrompt: state?.systemPrompt,
-		tools: state?.tools?.map((t) => ({
-			name: t.name,
-			description: t.description,
-			parameters: t.parameters,
-			// ToolInfo.sourceInfo required in 0.67.2; AgentTool has no sourceInfo,
-			// so synthesize a builtin-style source for export display purposes.
-			sourceInfo: {
-				path: "",
-				source: "builtin",
-				scope: "temporary" as const,
-				origin: "top-level" as const,
-			},
-		})),
-		renderedTools,
-	};
-
-	const html = generateHtml(sessionData, opts.themeName);
-
-	let outputPath = opts.outputPath;
-	if (!outputPath) {
-		const sessionBasename = basename(sessionFile, ".jsonl");
-		outputPath = `${APP_NAME}-session-${sessionBasename}.html`;
-	}
-
-	writeFileSync(outputPath, html, "utf8");
-	return outputPath;
-}
-
-/**
- * Export session file to HTML (standalone, without AgentState).
- * Used by CLI for exporting arbitrary session files.
- */
-export async function exportFromFile(inputPath: string, options?: ExportOptions | string): Promise<string> {
-	const opts: ExportOptions = typeof options === "string" ? { outputPath: options } : options || {};
-
-	if (!existsSync(inputPath)) {
-		throw new Error(`File not found: ${inputPath}`);
-	}
-
-	const sm = SessionManager.open(inputPath);
-
-	const sessionData: SessionData = {
-		header: sm.getHeader(),
-		entries: sm.getEntries(),
-		leafId: sm.getLeafId(),
-		systemPrompt: undefined,
-		tools: undefined,
-	};
-
-	const html = generateHtml(sessionData, opts.themeName);
-
-	let outputPath = opts.outputPath;
-	if (!outputPath) {
-		const inputBasename = basename(inputPath, ".jsonl");
-		outputPath = `${APP_NAME}-session-${inputBasename}.html`;
-	}
-
-	writeFileSync(outputPath, html, "utf8");
-	return outputPath;
-}