magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/renderers/markdownRenderer.tsx

@@ -0,0 +1,302 @@
+import type React from "react";
+import { theme } from "../theme.js";
+
+/**
+ * Markdown → OpenTUI elements, for the detail pane.
+ *
+ * Why not a library. `glow` is a Go binary: it cannot ship inside
+ * `bun build --compile`, and shelling out to something the user may not have
+ * installed turns a display detail into a runtime dependency. The JS options
+ * (`marked-terminal` and friends) emit ANSI escape sequences, which is the
+ * wrong output format — OpenTUI composes `<text>`/`<span>` elements with theme
+ * colours, and feeding it raw escapes bypasses the theme and breaks on a
+ * re-render. This module is ~200 lines and emits elements directly.
+ *
+ * Deliberately partial. It covers what SKILL.md files actually contain:
+ * headings, fenced code, tables, rules, lists, blockquotes, and inline
+ * bold/code. Anything unrecognised falls through as plain text, which is what
+ * the pane showed for everything before.
+ */
+
+export interface MarkdownRenderResult {
+	nodes: React.ReactNode[];
+	/** Lines beyond `maxLines` that were not rendered. */
+	withheld: number;
+}
+
+interface RenderOptions {
+	/** Columns available to the pane, used to size table columns. */
+	width: number;
+	/** Render-cost guard; the pane itself scrolls. */
+	maxLines: number;
+}
+
+// ─── Inline spans ────────────────────────────────────────────────────────────
+
+/**
+ * Split a line into `code`, **bold** and plain runs.
+ *
+ * One pass over both markers rather than nested passes: a nested pass would
+ * re-scan text already claimed by a code span and turn `` `a**b` `` into a bold
+ * run inside code.
+ */
+function inlineSpans(text: string, keyPrefix: string): React.ReactNode[] {
+	const nodes: React.ReactNode[] = [];
+	const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)/g;
+	let last = 0;
+	let match: RegExpExecArray | null = pattern.exec(text);
+	let i = 0;
+
+	while (match) {
+		if (match.index > last) {
+			nodes.push(
+				<span key={`${keyPrefix}-t${i}`}>{text.slice(last, match.index)}</span>,
+			);
+		}
+		if (match[1]) {
+			nodes.push(
+				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.link}>
+					{match[1].slice(1, -1)}
+				</span>,
+			);
+		} else {
+			nodes.push(
+				<strong key={`${keyPrefix}-b${i}`}>{match[2].slice(2, -2)}</strong>,
+			);
+		}
+		last = match.index + match[0].length;
+		i += 1;
+		match = pattern.exec(text);
+	}
+
+	if (last < text.length) {
+		nodes.push(<span key={`${keyPrefix}-t${i}`}>{text.slice(last)}</span>);
+	}
+	return nodes;
+}
+
+// ─── Tables ──────────────────────────────────────────────────────────────────
+
+/**
+ * Strip inline markers from a table cell.
+ *
+ * Cells are padded to a column width, so they cannot carry `<span>` children
+ * the way body text does without the padding and the spans disagreeing about
+ * length. Removing the markers is the honest trade: a cell reading
+ * `` `context`, `callers` `` printed its backticks verbatim, which is the raw
+ * source leaking into a rendered view.
+ */
+function plainCell(cell: string): string {
+	return cell
+		.trim()
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/\*\*([^*]+)\*\*/g, "$1")
+		.replace(/<br\s*\/?>/gi, " ");
+}
+
+function splitRow(line: string): string[] {
+	return line
+		.replace(/^\s*\|/, "")
+		.replace(/\|\s*$/, "")
+		.split("|")
+		.map(plainCell);
+}
+
+const isSeparatorRow = (line: string): boolean =>
+	/^\s*\|?[\s:|-]+\|[\s:|-]*$/.test(line) && line.includes("-");
+
+/**
+ * Render a table as aligned columns with a rule under the header.
+ *
+ * Pipes are dropped rather than drawn. In a pane this narrow the vertical bars
+ * cost a column each and, once a cell wraps, line up with nothing — which is
+ * exactly how the raw source read before.
+ */
+function renderTable(
+	rows: string[][],
+	width: number,
+	key: string,
+): React.ReactNode[] {
+	const columns = Math.max(...rows.map((r) => r.length));
+	const natural: number[] = [];
+	for (let c = 0; c < columns; c++) {
+		natural.push(Math.max(1, ...rows.map((r) => (r[c] ?? "").length)));
+	}
+
+	// Shrink the widest column until the row fits. Shrinking the widest keeps a
+	// narrow key column (Mode, Level) intact and takes the space out of the prose
+	// column, which is the one that can afford it.
+	const gap = 2;
+	const budget = Math.max(20, width - 1);
+	const widths = [...natural];
+	const total = () => widths.reduce((a, b) => a + b, 0) + gap * (columns - 1);
+	while (total() > budget) {
+		const widest = widths.indexOf(Math.max(...widths));
+		if (widths[widest] <= 6) break;
+		widths[widest] -= 1;
+	}
+
+	const fit = (cell: string, w: number) =>
+		cell.length <= w ? cell.padEnd(w) : `${cell.slice(0, Math.max(1, w - 1))}…`;
+
+	const nodes: React.ReactNode[] = [];
+	rows.forEach((row, r) => {
+		const line = widths
+			.map((w, c) => fit(row[c] ?? "", w))
+			.join(" ".repeat(gap))
+			.trimEnd();
+
+		nodes.push(
+			// biome-ignore lint/suspicious/noArrayIndexKey: table rows never reorder
+			<text key={`${key}-r${r}`} fg={theme.colors.muted}>
+				{" "}
+				{r === 0 ? <strong>{line}</strong> : line}
+			</text>,
+		);
+
+		if (r === 0) {
+			nodes.push(
+				<text key={`${key}-rule`} fg={theme.colors.dim}>
+					{" "}
+					{widths.map((w) => "─".repeat(w)).join(" ".repeat(gap))}
+				</text>,
+			);
+		}
+	});
+	return nodes;
+}
+
+// ─── Document ────────────────────────────────────────────────────────────────
+
+const HEADING_COLORS = [
+	theme.colors.accent,
+	theme.colors.accent,
+	theme.colors.info,
+	theme.colors.info,
+	theme.colors.muted,
+	theme.colors.muted,
+];
+
+export function renderMarkdown(
+	source: string,
+	{ width, maxLines }: RenderOptions,
+): MarkdownRenderResult {
+	const lines = source.split("\n");
+	const nodes: React.ReactNode[] = [];
+	let i = 0;
+	let emitted = 0;
+
+	const push = (node: React.ReactNode) => {
+		nodes.push(node);
+		emitted += 1;
+	};
+
+	while (i < lines.length && emitted < maxLines) {
+		const line = lines[i];
+
+		// Fenced code. The fence markers are dropped and the block is tinted, so
+		// the reader sees a code block rather than three backticks they have to
+		// mentally strip.
+		const fence = line.match(/^\s*```\s*(\S*)/);
+		if (fence) {
+			const lang = fence[1];
+			i += 1;
+			if (lang) {
+				push(
+					<text key={`f${i}`} fg={theme.colors.dim}>
+						{"  "}
+						{lang}
+					</text>,
+				);
+			}
+			while (i < lines.length && !/^\s*```/.test(lines[i])) {
+				const code = lines[i];
+				push(
+					<text key={`fc${i}`} fg={theme.colors.link}>
+						{`  ${code}` || " "}
+					</text>,
+				);
+				i += 1;
+				if (emitted >= maxLines) break;
+			}
+			i += 1; // closing fence
+			continue;
+		}
+
+		// Table: a pipe row whose successor is a separator row.
+		if (
+			line.trim().startsWith("|") &&
+			i + 1 < lines.length &&
+			isSeparatorRow(lines[i + 1])
+		) {
+			const rows: string[][] = [splitRow(line)];
+			i += 2;
+			while (i < lines.length && lines[i].trim().startsWith("|")) {
+				rows.push(splitRow(lines[i]));
+				i += 1;
+			}
+			for (const node of renderTable(rows, width, `tb${i}`)) push(node);
+			continue;
+		}
+
+		// Horizontal rule. Drawn, rather than left as three hyphens that read as
+		// a stray line of text.
+		if (/^\s*(---+|\*\*\*+|___+)\s*$/.test(line)) {
+			push(
+				<text key={`hr${i}`} fg={theme.colors.dim}>
+					{"─".repeat(Math.max(4, Math.min(width - 1, 60)))}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const heading = line.match(/^(#{1,6})\s+(.*)$/);
+		if (heading) {
+			const level = heading[1].length;
+			push(
+				<text key={`h${i}`} fg={HEADING_COLORS[level - 1]}>
+					<strong>{heading[2]}</strong>
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const quote = line.match(/^\s*>\s?(.*)$/);
+		if (quote) {
+			push(
+				<text key={`q${i}`} fg={theme.colors.muted}>
+					<span fg={theme.colors.dim}>{" │ "}</span>
+					{inlineSpans(quote[1], `q${i}`)}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		const list = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
+		if (list) {
+			const indent = " ".repeat(Math.min(list[1].length, 8));
+			const bullet = /\d/.test(list[2]) ? list[2] : "•";
+			push(
+				<text key={`li${i}`} fg={theme.colors.muted}>
+					{` ${indent}`}
+					<span fg={theme.colors.dim}>{bullet} </span>
+					{inlineSpans(list[3], `li${i}`)}
+				</text>,
+			);
+			i += 1;
+			continue;
+		}
+
+		push(
+			<text key={`p${i}`} fg={theme.colors.muted}>
+				{line ? inlineSpans(line, `p${i}`) : " "}
+			</text>,
+		);
+		i += 1;
+	}
+
+	return { nodes, withheld: Math.max(0, lines.length - i) };
+}

package/src/ui/renderers/mcpRenderers.tsx

@@ -0,0 +1,149 @@
+import type React from "react";
+import type { McpServer } from "../../types/index.js";
+import { theme } from "../theme.js";
+
+// ─── List item types ───────────────────────────────────────────────────────────
+
+export type McpListItem =
+	| { kind: "category"; label: string }
+	| { kind: "server"; server: McpServer; isInstalled: boolean };
+
+// ─── Row renderers ─────────────────────────────────────────────────────────────
+
+export function renderMcpRow(
+	item: McpListItem,
+	_index: number,
+	isSelected: boolean,
+): React.ReactNode {
+	if (item.kind === "category") {
+		return (
+			<text fg={theme.selection.bg}>
+				<strong>
+					{"▸ "}
+					{item.label}
+				</strong>
+			</text>
+		);
+	}
+
+	const { server, isInstalled } = item;
+	const icon = isInstalled ? "●" : "○";
+	const iconColor = isInstalled ? theme.colors.success : theme.colors.muted;
+
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{" "}
+				{icon} {server.name}{" "}
+			</text>
+		);
+	}
+
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={iconColor}>{icon}</span>
+			<span fg={theme.colors.text}> {server.name}</span>
+			{server.requiresConfig ? <span fg={theme.colors.warning}> ⚙</span> : null}
+		</text>
+	);
+}
+
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+
+export function renderMcpDetail(
+	item: McpListItem | undefined,
+	loading: boolean,
+): React.ReactNode {
+	if (loading) {
+		return <text fg={theme.colors.muted}>Loading MCP servers...</text>;
+	}
+
+	if (!item || item.kind === "category") {
+		return (
+			<box
+				flexDirection="column"
+				alignItems="center"
+				justifyContent="center"
+				flexGrow={1}
+			>
+				<text fg={theme.colors.muted}>Select a server to see details</text>
+			</box>
+		);
+	}
+
+	const { server, isInstalled } = item;
+
+	return (
+		<box flexDirection="column">
+			<box marginBottom={1}>
+				<text fg={theme.colors.info}>
+					<strong>
+						{"⚡ "}
+						{server.name}
+					</strong>
+				</text>
+				{server.requiresConfig ? (
+					<text fg={theme.colors.warning}> ⚙</text>
+				) : null}
+			</box>
+
+			<text fg={theme.colors.muted}>{server.description}</text>
+
+			<box marginTop={1} flexDirection="column">
+				<box>
+					<text fg={theme.colors.muted}>{"Status "}</text>
+					{isInstalled ? (
+						<text fg={theme.colors.success}>{"● Installed"}</text>
+					) : (
+						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
+					)}
+				</box>
+				<box>
+					<text fg={theme.colors.muted}>{"Type "}</text>
+					<text fg={theme.colors.text}>
+						{server.type === "http" ? "HTTP" : "Command"}
+					</text>
+				</box>
+				{server.type === "http" ? (
+					<box>
+						<text fg={theme.colors.muted}>{"URL "}</text>
+						<text fg={theme.colors.link}>{server.url}</text>
+					</box>
+				) : (
+					<box>
+						<text fg={theme.colors.muted}>{"Command "}</text>
+						<text fg={theme.colors.info}>{server.command}</text>
+					</box>
+				)}
+				{server.requiresConfig ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Config "}</text>
+						<text fg={theme.colors.warning}>
+							{server.configFields?.length ?? 0} fields required
+						</text>
+					</box>
+				) : null}
+			</box>
+
+			<box marginTop={2}>
+				{isInstalled ? (
+					<box>
+						<text bg={theme.colors.danger} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Remove server</text>
+					</box>
+				) : (
+					<box>
+						<text bg={theme.colors.success} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Install server</text>
+					</box>
+				)}
+			</box>
+		</box>
+	);
+}