Add mermaid.live preview link

index.ts

@@ -1,8 +1,9 @@
 import type { ExtensionAPI, ExtensionContext, MessageRenderer, SessionEntry } from "@mariozechner/pi-coding-agent";
-import { getMarkdownTheme, keyHint } from "@mariozechner/pi-coding-agent";
-import { Box, Spacer, Text, type Component, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import { keyHint } from "@mariozechner/pi-coding-agent";
+import { Box, Spacer, type Component, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { createHash } from "node:crypto";
 import { renderMermaidAscii } from "beautiful-mermaid";
+import pako from "pako";
 
 const MESSAGE_TYPE = "pi-mermaid";
 const MERMAID_BLOCK_RE = /```mermaid\s*([\s\S]*?)```/gi;
@@ -172,6 +173,13 @@ function hashMermaid(block: string): string {
 	return createHash("sha256").update(block).digest("hex").slice(0, 8);
 }
 
+function mermaidLiveUrl(source: string): string {
+	const state = JSON.stringify({ code: source, mermaid: { theme: "default" }, autoSync: true });
+	const compressed = pako.deflate(new TextEncoder().encode(state));
+	const base64 = Buffer.from(compressed).toString("base64url");
+	return `https://mermaid.live/edit#pako:${base64}`;
+}
+
 function getAsciiCacheKey(diagramHash: string, presetKey: string): string {
 	return `${diagramHash}:${presetKey}`;
 }
@@ -453,19 +461,20 @@ export default function (pi: ExtensionAPI) {
 		const box = new Box(1, 1, (t: string) => theme.bg("customMessageBg", t));
 		box.addChild(asciiComponent);
 
-		if (expanded && details?.source) {
+		if (details?.source) {
+			const linkComponent: Component = {
+				render: (width) => {
+					const url = mermaidLiveUrl(details.source);
+					const prefix = "Preview: ";
+					const maxUrlLen = Math.max(10, Math.floor(width / 2) - prefix.length);
+					const displayUrl = url.length > maxUrlLen ? url.slice(0, maxUrlLen - 1) + "\u2026" : url;
+					const hyperlink = `\x1b]8;;${url}\x07\x1b[4m${prefix}${displayUrl}\x1b[24m\x1b]8;;\x07`;
+					return [theme.fg("muted", hyperlink)];
+				},
+				invalidate: () => {},
+			};
 			box.addChild(new Spacer(1));
-			const markdownTheme = getMarkdownTheme();
-			const indent = markdownTheme.codeBlockIndent ?? "  ";
-			const normalizedSource = normalizeMermaidSource(details.source);
-			const highlighted = markdownTheme.highlightCode?.(normalizedSource, "mermaid");
-			const codeLines = highlighted ?? normalizedSource.split("\n").map((line) => markdownTheme.codeBlock(line));
-			const renderedLines = [
-				markdownTheme.codeBlockBorder("```mermaid"),
-				...codeLines.map((line) => `${indent}${line}`),
-				markdownTheme.codeBlockBorder("```"),
-			].join("\n");
-			box.addChild(new Text(renderedLines, 0, 0));
+			box.addChild(linkComponent);
 		}
 
 		return box;

package.json

@@ -34,7 +34,8 @@
   ],
   "dependencies": {
     "beautiful-mermaid": "^1.0.0",
-    "mermaid": "^11.0.0"
+    "mermaid": "^11.0.0",
+    "pako": "^2.1.0"
   },
   "peerDependencies": {
     "@mariozechner/pi-coding-agent": "*",