omegon 0.6.0

package/extensions/render/native-diagrams/spec.ts

@@ -0,0 +1,204 @@
+import type { SemanticPurpose } from "../excalidraw/types.ts";
+
+export const NATIVE_DIAGRAM_MOTIFS = ["pipeline", "fanout", "panel-split"] as const;
+export type NativeDiagramMotif = (typeof NATIVE_DIAGRAM_MOTIFS)[number];
+
+export const NATIVE_DIAGRAM_DIRECTIONS = ["horizontal", "vertical"] as const;
+export type NativeDiagramDirection = (typeof NATIVE_DIAGRAM_DIRECTIONS)[number];
+
+export const NATIVE_NODE_KINDS = ["process", "decision", "start", "end", "data"] as const;
+export type NativeNodeKind = (typeof NATIVE_NODE_KINDS)[number];
+
+export interface NativeDiagramPanelSpec {
+	id: string;
+	label: string;
+}
+
+export interface NativeDiagramNodeSpec {
+	id: string;
+	label: string;
+	kind?: NativeNodeKind;
+	semantic?: SemanticPurpose;
+	order?: number;
+	panel?: string;
+}
+
+export interface NativeDiagramEdgeSpec {
+	from: string;
+	to: string;
+	label?: string;
+	semantic?: SemanticPurpose;
+	dashed?: boolean;
+}
+
+export interface NativeDiagramCanvasSpec {
+	padding?: number;
+	background?: string;
+}
+
+export interface NativeDiagramSpec {
+	title?: string;
+	motif: NativeDiagramMotif;
+	direction?: NativeDiagramDirection;
+	canvas?: NativeDiagramCanvasSpec;
+	panels?: NativeDiagramPanelSpec[];
+	nodes: NativeDiagramNodeSpec[];
+	edges?: NativeDiagramEdgeSpec[];
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function asString(value: unknown): string | undefined {
+	return typeof value === "string" ? value : undefined;
+}
+
+function asNumber(value: unknown): number | undefined {
+	return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+function asBoolean(value: unknown): boolean | undefined {
+	return typeof value === "boolean" ? value : undefined;
+}
+
+function asMotif(value: unknown): NativeDiagramMotif | undefined {
+	return typeof value === "string" && NATIVE_DIAGRAM_MOTIFS.includes(value as NativeDiagramMotif)
+		? value as NativeDiagramMotif
+		: undefined;
+}
+
+function asDirection(value: unknown): NativeDiagramDirection | undefined {
+	return typeof value === "string" && NATIVE_DIAGRAM_DIRECTIONS.includes(value as NativeDiagramDirection)
+		? value as NativeDiagramDirection
+		: undefined;
+}
+
+function asNodeKind(value: unknown): NativeNodeKind | undefined {
+	return typeof value === "string" && NATIVE_NODE_KINDS.includes(value as NativeNodeKind)
+		? value as NativeNodeKind
+		: undefined;
+}
+
+function asSemantic(value: unknown): SemanticPurpose | undefined {
+	return typeof value === "string" ? value as SemanticPurpose : undefined;
+}
+
+export function parseNativeDiagramSpec(input: unknown): NativeDiagramSpec {
+	if (!isRecord(input)) throw new Error("Native diagram spec must be a JSON object");
+	const motif = asMotif(input.motif);
+	if (!motif) throw new Error(`Native diagram spec requires motif ∈ ${NATIVE_DIAGRAM_MOTIFS.join(", ")}`);
+
+	const nodesValue = input.nodes;
+	if (!Array.isArray(nodesValue) || nodesValue.length === 0) {
+		throw new Error("Native diagram spec requires a non-empty nodes array");
+	}
+
+	const nodes: NativeDiagramNodeSpec[] = nodesValue.map((value, index) => {
+		if (!isRecord(value)) throw new Error(`Node ${index} must be an object`);
+		const id = asString(value.id);
+		const label = asString(value.label);
+		if (!id) throw new Error(`Node ${index} requires string id`);
+		if (!label) throw new Error(`Node '${id}' requires string label`);
+		return {
+			id,
+			label,
+			kind: asNodeKind(value.kind),
+			semantic: asSemantic(value.semantic),
+			order: asNumber(value.order),
+			panel: asString(value.panel),
+		};
+	});
+
+	const edges: NativeDiagramEdgeSpec[] | undefined = Array.isArray(input.edges)
+		? input.edges.map((value, index) => {
+			if (!isRecord(value)) throw new Error(`Edge ${index} must be an object`);
+			const from = asString(value.from);
+			const to = asString(value.to);
+			if (!from || !to) throw new Error(`Edge ${index} requires string from/to`);
+			return {
+				from,
+				to,
+				label: asString(value.label),
+				semantic: asSemantic(value.semantic),
+				dashed: asBoolean(value.dashed),
+			};
+		})
+		: undefined;
+
+	const panels: NativeDiagramPanelSpec[] | undefined = Array.isArray(input.panels)
+		? input.panels.map((value, index) => {
+			if (!isRecord(value)) throw new Error(`Panel ${index} must be an object`);
+			const id = asString(value.id);
+			const label = asString(value.label);
+			if (!id) throw new Error(`Panel ${index} requires string id`);
+			if (!label) throw new Error(`Panel '${id}' requires string label`);
+			return { id, label };
+		})
+		: undefined;
+
+	const canvas = isRecord(input.canvas)
+		? {
+			padding: asNumber(input.canvas.padding),
+			background: asString(input.canvas.background),
+		}
+		: undefined;
+
+	const spec: NativeDiagramSpec = {
+		title: asString(input.title),
+		motif,
+		direction: asDirection(input.direction),
+		canvas,
+		panels,
+		nodes,
+		edges,
+	};
+
+	const errors = validateNativeDiagramSpec(spec);
+	if (errors.length > 0) throw new Error(errors.join("\n"));
+	return spec;
+}
+
+export function validateNativeDiagramSpec(spec: NativeDiagramSpec): string[] {
+	const errors: string[] = [];
+	const nodeIds = new Set<string>();
+	const panelIds = new Set<string>();
+
+	for (const node of spec.nodes) {
+		if (nodeIds.has(node.id)) errors.push(`Duplicate node id '${node.id}'`);
+		nodeIds.add(node.id);
+		if (!node.label.trim()) errors.push(`Node '${node.id}' requires a non-empty label`);
+	}
+
+	for (const panel of spec.panels ?? []) {
+		if (panelIds.has(panel.id)) errors.push(`Duplicate panel id '${panel.id}'`);
+		panelIds.add(panel.id);
+	}
+
+	if (spec.motif === "fanout" && spec.nodes.length < 2) {
+		errors.push("Motif 'fanout' requires at least two nodes");
+	}
+
+	if (spec.motif === "panel-split" && (!spec.panels || spec.panels.length < 2)) {
+		errors.push("Motif 'panel-split' requires at least two panels");
+	}
+
+	for (const node of spec.nodes) {
+		if (node.panel && !panelIds.has(node.panel)) {
+			errors.push(`Node '${node.id}' references missing panel '${node.panel}'`);
+		}
+		if (spec.motif !== "panel-split" && node.panel) {
+			errors.push(`Node '${node.id}' uses panel assignment but motif '${spec.motif}' does not support panels`);
+		}
+		if (spec.motif === "panel-split" && !node.panel) {
+			errors.push(`Node '${node.id}' must declare a panel for motif 'panel-split'`);
+		}
+	}
+
+	for (const edge of spec.edges ?? []) {
+		if (!nodeIds.has(edge.from)) errors.push(`Edge references missing source '${edge.from}'`);
+		if (!nodeIds.has(edge.to)) errors.push(`Edge references missing target '${edge.to}'`);
+	}
+
+	return errors;
+}

package/extensions/render/native-diagrams/svg.ts

@@ -0,0 +1,116 @@
+import type {
+	Scene,
+	SceneDiamond,
+	SceneEllipse,
+	SceneElement,
+	SceneLine,
+	ScenePath,
+	SceneRect,
+	SceneText,
+} from "./scene.ts";
+
+const DEFAULT_FONT_FAMILY = "Cascadia Code, Cascadia Mono, Menlo, monospace";
+const DEFAULT_STROKE = "#111827";
+const DEFAULT_FILL = "none";
+const DEFAULT_STROKE_WIDTH = 1;
+const ARROW_MARKER_ID = "pi-native-arrow";
+
+function escapeXml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&apos;");
+}
+
+function fmt(value: number): string {
+	const rounded = Math.round(value * 100) / 100;
+	if (Number.isInteger(rounded)) return String(rounded);
+	return rounded.toFixed(2).replace(/\.00$/, "").replace(/(\.\d)0$/, "$1");
+}
+
+function attr(name: string, value: string | number | undefined): string {
+	if (value === undefined) return "";
+	const serialized = typeof value === "number" ? fmt(value) : escapeXml(value);
+	return ` ${name}="${serialized}"`;
+}
+
+function commonAttrs(element: Pick<SceneElement, "fill" | "stroke" | "strokeWidth" | "strokeDasharray" | "opacity">): string {
+	return [
+		attr("fill", element.fill ?? DEFAULT_FILL),
+		attr("stroke", element.stroke ?? DEFAULT_STROKE),
+		attr("stroke-width", element.strokeWidth ?? DEFAULT_STROKE_WIDTH),
+		element.strokeDasharray ? attr("stroke-dasharray", element.strokeDasharray) : "",
+		element.opacity !== undefined ? attr("opacity", element.opacity) : "",
+	].join("");
+}
+
+function renderRect(element: SceneRect): string {
+	return `<rect${attr("x", element.x)}${attr("y", element.y)}${attr("width", element.width)}${attr("height", element.height)}${attr("rx", element.rx)}${attr("ry", element.ry)}${commonAttrs(element)} />`;
+}
+
+function renderEllipse(element: SceneEllipse): string {
+	return `<ellipse${attr("cx", element.cx)}${attr("cy", element.cy)}${attr("rx", element.rx)}${attr("ry", element.ry)}${commonAttrs(element)} />`;
+}
+
+function renderDiamond(element: SceneDiamond): string {
+	const midX = element.x + element.width / 2;
+	const midY = element.y + element.height / 2;
+	const d = [
+		`M ${fmt(midX)} ${fmt(element.y)}`,
+		`L ${fmt(element.x + element.width)} ${fmt(midY)}`,
+		`L ${fmt(midX)} ${fmt(element.y + element.height)}`,
+		`L ${fmt(element.x)} ${fmt(midY)}`,
+		"Z",
+	].join(" ");
+	return `<path${attr("d", d)}${commonAttrs(element)} />`;
+}
+
+function renderPath(element: ScenePath): string {
+	const markerStart = element.markerStart === "arrow" ? attr("marker-start", `url(#${ARROW_MARKER_ID})`) : "";
+	const markerEnd = element.markerEnd === "arrow" ? attr("marker-end", `url(#${ARROW_MARKER_ID})`) : "";
+	return `<path${attr("d", element.d)}${commonAttrs(element)}${markerStart}${markerEnd} />`;
+}
+
+function renderText(element: SceneText): string {
+	return `<text${attr("x", element.x)}${attr("y", element.y)}${attr("font-size", element.fontSize)}${attr("font-family", element.fontFamily ?? DEFAULT_FONT_FAMILY)}${attr("text-anchor", element.textAnchor ?? "start")}${attr("font-weight", element.fontWeight ?? "400")}${attr("fill", element.fill ?? DEFAULT_STROKE)}>${escapeXml(element.text)}</text>`;
+}
+
+function renderLine(element: SceneLine): string {
+	return `<line${attr("x1", element.x1)}${attr("y1", element.y1)}${attr("x2", element.x2)}${attr("y2", element.y2)}${commonAttrs(element)} />`;
+}
+
+function renderElement(element: SceneElement): string {
+	switch (element.kind) {
+		case "rect":
+			return renderRect(element);
+		case "ellipse":
+			return renderEllipse(element);
+		case "diamond":
+			return renderDiamond(element);
+		case "path":
+			return renderPath(element);
+		case "text":
+			return renderText(element);
+		case "line":
+			return renderLine(element);
+	}
+}
+
+export function serializeSceneToSvg(scene: Scene): string {
+	const width = fmt(scene.width);
+	const height = fmt(scene.height);
+	const body = scene.elements.map(renderElement).join("\n  ");
+	return [
+		`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img">`,
+		"  <defs>",
+		`    <marker id="${ARROW_MARKER_ID}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse" markerUnits="strokeWidth">`,
+		"      <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#111827\" />",
+		"    </marker>",
+		"  </defs>",
+		`  <rect x="0" y="0" width="${width}" height="${height}" fill="${escapeXml(scene.background)}" />`,
+		body ? `  ${body}` : "",
+		"</svg>",
+	].filter(Boolean).join("\n");
+}

package/extensions/sci-ui.ts

@@ -0,0 +1,304 @@
+/**
+ * Sci-UI — shared visual primitives for Alpharius-styled tool call rendering.
+ *
+ * Design language:
+ *   Call line:   ◈──{ tool_name }── summary text ──────────────────────────
+ *   Loading:     ▶░░░░░▓▒{ tool_name }░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ *   Result:        ╰── ✓ compact summary
+ *   Expanded:      │ line 1
+ *                  │ line 2
+ *                  ╰── N lines
+ *   Banner:      ── ◈ label ──────────────────────────────────────────────
+ *                  content line
+ *
+ * NOTE: All classes use explicit field declarations (not constructor parameter
+ * properties) to remain compatible with Node.js strip-only TypeScript mode.
+ */
+import { truncateToWidth, visibleWidth } from "@cwilson613/pi-tui";
+import type { Theme } from "@cwilson613/pi-coding-agent";
+
+export interface SciComponent {
+	render(width: number): string[];
+	invalidate(): void;
+}
+
+// ─── Tool glyphs by name ───────────────────────────────────────────────────
+
+export const TOOL_GLYPHS: Record<string, string> = {
+	// Core tools
+	read: "▸",
+	edit: "▸",
+	write: "▸",
+	bash: "▸",
+	grep: "▸",
+	find: "▸",
+	ls: "▸",
+	// Extension tools
+	design_tree: "◈",
+	design_tree_update: "◈",
+	openspec_manage: "◎",
+	memory_store: "⌗",
+	memory_recall: "⌗",
+	memory_query: "⌗",
+	memory_focus: "⌗",
+	memory_release: "⌗",
+	memory_supersede: "⌗",
+	memory_archive: "⌗",
+	memory_compact: "⌗",
+	memory_connect: "⌗",
+	memory_search_archive: "⌗",
+	memory_episodes: "⌗",
+	memory_ingest_lifecycle: "⌗",
+	cleave_run: "⚡",
+	cleave_assess: "⚡",
+	whoami: "⊙",
+	chronos: "◷",
+	web_search: "⌖",
+	render_diagram: "⬡",
+	render_native_diagram: "⬡",
+	render_excalidraw: "⬡",
+	render_composition_still: "⬡",
+	render_composition_video: "⬡",
+	generate_image_local: "⬡",
+	view: "⬡",
+	// Inference / model tools
+	set_model_tier: "◆",
+	set_thinking_level: "◆",
+	ask_local_model: "◆",
+	list_local_models: "◆",
+	manage_ollama: "◆",
+	switch_to_offline_driver: "◆",
+	// Profile / misc
+	manage_tools: "⊞",
+};
+
+export function glyphFor(toolName: string): string {
+	return TOOL_GLYPHS[toolName] ?? "▸";
+}
+
+// ─── SciCallLine ──────────────────────────────────────────────────────────
+//
+//   ◈──{ design_tree }── action:node_id ─────────────────────────────────
+
+export class SciCallLine implements SciComponent {
+	glyph: string;
+	toolName: string;
+	summary: string;
+	theme: Theme;
+
+	constructor(glyph: string, toolName: string, summary: string, theme: Theme) {
+		this.glyph = glyph;
+		this.toolName = toolName;
+		this.summary = summary;
+		this.theme = theme;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const g = th.fg("accent", this.glyph);
+		const dashes = th.fg("dim", "──");
+		const openBracket = th.fg("border", "{");
+		const closeBracket = th.fg("border", "}");
+		const name = th.fg("accent", this.toolName);
+		const sep = th.fg("dim", "──");
+		const sumText = this.summary
+			? " " + th.fg("muted", this.summary) + " "
+			: " ";
+
+		const core = `${g}${dashes}${openBracket}${name}${closeBracket}${sep}${sumText}`;
+		const coreVw = visibleWidth(core);
+		const fillLen = Math.max(0, width - coreVw);
+		const fill = th.fg("dim", "─".repeat(fillLen));
+
+		return [truncateToWidth(core + fill, width)];
+	}
+
+	invalidate(): void {}
+}
+
+// ─── SciLoadingLine ───────────────────────────────────────────────────────
+//
+//   ▶░░░░░▓▒{ tool_name }░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+//
+// A bright block scans left→right while a tool is pending.
+
+export class SciLoadingLine implements SciComponent {
+	toolName: string;
+	theme: Theme;
+
+	constructor(toolName: string, theme: Theme) {
+		this.toolName = toolName;
+		this.theme = theme;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const label = `{ ${this.toolName} }`;
+		const labelVw = visibleWidth(label);
+		const barWidth = Math.max(4, width - labelVw - 2);
+		const frame = Math.floor(Date.now() / 120) % barWidth;
+
+		const bar = Array.from({ length: barWidth }, (_, i) => {
+			if (i === frame) return th.fg("accent", "▓");
+			if (i === (frame + 1) % barWidth) return th.fg("muted", "▒");
+			return th.fg("dim", "░");
+		}).join("");
+
+		const line =
+			th.fg("accent", "▶") +
+			bar +
+			th.fg("muted", "{") +
+			th.fg("accent", ` ${this.toolName} `) +
+			th.fg("muted", "}");
+
+		return [truncateToWidth(line, width)];
+	}
+
+	invalidate(): void {}
+}
+
+// ─── SciResult (compact / collapsed) ─────────────────────────────────────
+//
+//   ╰── ✓ compact summary
+//   ╰── ✕ error text
+//   ╰── · pending
+
+export class SciResult implements SciComponent {
+	summary: string;
+	status: "success" | "error" | "pending";
+	theme: Theme;
+
+	constructor(summary: string, status: "success" | "error" | "pending", theme: Theme) {
+		this.summary = summary;
+		this.status = status;
+		this.theme = theme;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const cap = th.fg("dim", "  ╰──");
+		const dot =
+			this.status === "success"
+				? th.fg("success", " ✓")
+				: this.status === "error"
+					? th.fg("error", " ✕")
+					: th.fg("dim", " ·");
+		const capVw = visibleWidth(cap + dot);
+		const textLen = Math.max(1, width - capVw - 1);
+		const text = " " + th.fg("muted", truncateToWidth(this.summary, textLen));
+		return [truncateToWidth(cap + dot + text, width)];
+	}
+
+	invalidate(): void {}
+}
+
+// ─── SciExpandedResult ───────────────────────────────────────────────────
+//
+//   │ line 1
+//   │ line 2
+//   ╰── footer summary
+
+export class SciExpandedResult implements SciComponent {
+	lines: string[];
+	footerSummary: string;
+	theme: Theme;
+
+	constructor(lines: string[], footerSummary: string, theme: Theme) {
+		this.lines = lines;
+		this.footerSummary = footerSummary;
+		this.theme = theme;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerWidth = Math.max(1, width - 4);
+		const result: string[] = [];
+		for (const line of this.lines) {
+			result.push(th.fg("dim", "  │") + " " + truncateToWidth(line, innerWidth));
+		}
+		result.push(
+			th.fg("dim", "  ╰──") +
+			" " +
+			th.fg("muted", truncateToWidth(this.footerSummary, Math.max(1, width - 8))),
+		);
+		return result;
+	}
+
+	invalidate(): void {}
+}
+
+// ─── SciBanner (custom message renderer) ─────────────────────────────────
+//
+//   ── ◈ label ──────────────────────────────────────────────────────────
+//     content line 1
+
+export class SciBanner implements SciComponent {
+	glyph: string;
+	label: string;
+	contentLines: string[];
+	theme: Theme;
+
+	constructor(glyph: string, label: string, contentLines: string[], theme: Theme) {
+		this.glyph = glyph;
+		this.label = label;
+		this.contentLines = contentLines;
+		this.theme = theme;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const midText = ` ${th.fg("accent", this.glyph)} ${th.fg("muted", this.label)} `;
+		const midVw = visibleWidth(midText);
+		const leftLen = 2;
+		const rightLen = Math.max(0, width - midVw - leftLen);
+		const header =
+			th.fg("dim", "──") +
+			midText +
+			th.fg("dim", "─".repeat(rightLen));
+
+		const result = [truncateToWidth(header, width)];
+		for (const line of this.contentLines) {
+			result.push(truncateToWidth("  " + line, width));
+		}
+		return result;
+	}
+
+	invalidate(): void {}
+}
+
+// ─── Convenience builders ─────────────────────────────────────────────────
+
+/** Build a SciCallLine from a tool name + summary string. */
+export function sciCall(toolName: string, summary: string, theme: Theme): SciCallLine {
+	return new SciCallLine(glyphFor(toolName), toolName, summary, theme);
+}
+
+/** Build a SciLoadingLine for use during isPartial. */
+export function sciLoading(toolName: string, theme: Theme): SciLoadingLine {
+	return new SciLoadingLine(toolName, theme);
+}
+
+/** Compact success result line. */
+export function sciOk(summary: string, theme: Theme): SciResult {
+	return new SciResult(summary, "success", theme);
+}
+
+/** Compact error result line. */
+export function sciErr(summary: string, theme: Theme): SciResult {
+	return new SciResult(summary, "error", theme);
+}
+
+/** Compact pending result line. */
+export function sciPending(summary: string, theme: Theme): SciResult {
+	return new SciResult(summary, "pending", theme);
+}
+
+/** Expanded result with bordered body. */
+export function sciExpanded(lines: string[], footer: string, theme: Theme): SciExpandedResult {
+	return new SciExpandedResult(lines, footer, theme);
+}
+
+/** Banner for message renderers. */
+export function sciBanner(glyph: string, label: string, lines: string[], theme: Theme): SciBanner {
+	return new SciBanner(glyph, label, lines, theme);
+}