mockpit 0.0.0-stage → 1.0.0

package/dist/server/push.js

@@ -0,0 +1,234 @@
+// Web Push (VAPID + aes128gcm) and outbound webhooks, runtime-agnostic: Web
+// Crypto and fetch only, no `node:` imports, so the same code runs on Node and
+// on the Durable Object. Keys and subscriptions live in workspace settings.
+//
+// Nothing here may block or fail a write: every send is fire-and-forget and
+// every failure is logged. The operator's phone missing a notification is a
+// nuisance; a publish failing because a push endpoint is down is data loss.
+const VAPID_KEY = "push:vapid";
+const SUBS_KEY = "push:subs";
+const HOOKS_KEY = "hooks";
+// Contact for the push service, per the VAPID spec. A mailto is required; this
+// deployment has no operator address, so use the project's.
+const VAPID_SUBJECT = "mailto:mockpit@mockpit.sh";
+// --- base64url ---
+const b64uEncode = (bytes) => {
+    let s = "";
+    for (const b of bytes)
+        s += String.fromCharCode(b);
+    return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+};
+const b64uDecode = (input) => {
+    const padded = input.replace(/-/g, "+").replace(/_/g, "/");
+    const raw = atob(padded + "=".repeat((4 - (padded.length % 4)) % 4));
+    const out = new Uint8Array(raw.length);
+    for (let i = 0; i < raw.length; i++)
+        out[i] = raw.charCodeAt(i);
+    return out;
+};
+const utf8 = (s) => new TextEncoder().encode(s);
+const concat = (...parts) => {
+    const total = parts.reduce((n, p) => n + p.length, 0);
+    const out = new Uint8Array(total);
+    let at = 0;
+    for (const p of parts) {
+        out.set(p, at);
+        at += p.length;
+    }
+    return out;
+};
+// Web Crypto wants a definite ArrayBuffer, not a possibly-shared view.
+const buf = (bytes) => bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+const subtle = crypto.subtle;
+// Generated once per workspace and persisted: the public key is baked into the
+// browser's subscription, so regenerating it would silently orphan every
+// existing subscriber.
+export async function vapidKeys(store) {
+    const stored = await store.getSetting(VAPID_KEY);
+    if (stored) {
+        try {
+            return JSON.parse(stored);
+        }
+        catch {
+            // unreadable — fall through and mint a fresh pair
+        }
+    }
+    const pair = await subtle.generateKey({ name: "ECDSA", namedCurve: "P-256" }, true, [
+        "sign",
+        "verify",
+    ]);
+    const publicJwk = await subtle.exportKey("jwk", pair.publicKey);
+    const privateJwk = await subtle.exportKey("jwk", pair.privateKey);
+    const publicKey = b64uEncode(concat(new Uint8Array([4]), b64uDecode(publicJwk.x), b64uDecode(publicJwk.y)));
+    const keys = { publicKey, privateJwk };
+    await store.setSetting(VAPID_KEY, JSON.stringify(keys));
+    return keys;
+}
+async function vapidHeader(endpoint, keys) {
+    const audience = new URL(endpoint).origin;
+    const header = b64uEncode(utf8(JSON.stringify({ typ: "JWT", alg: "ES256" })));
+    const payload = b64uEncode(utf8(JSON.stringify({
+        aud: audience,
+        exp: Math.floor(Date.now() / 1000) + 12 * 60 * 60,
+        sub: VAPID_SUBJECT,
+    })));
+    const key = await subtle.importKey("jwk", keys.privateJwk, { name: "ECDSA", namedCurve: "P-256" }, false, ["sign"]);
+    const signature = new Uint8Array(await subtle.sign({ name: "ECDSA", hash: "SHA-256" }, key, buf(utf8(`${header}.${payload}`))));
+    return `vapid t=${header}.${payload}.${b64uEncode(signature)}, k=${keys.publicKey}`;
+}
+// --- aes128gcm payload encryption (RFC 8291) ---
+async function hkdf(salt, ikm, info, length) {
+    const key = await subtle.importKey("raw", buf(ikm), "HKDF", false, ["deriveBits"]);
+    const bits = await subtle.deriveBits({ name: "HKDF", hash: "SHA-256", salt: buf(salt), info: buf(info) }, key, length * 8);
+    return new Uint8Array(bits);
+}
+async function encryptPayload(subscription, plaintext) {
+    const uaPublic = b64uDecode(subscription.keys.p256dh);
+    const authSecret = b64uDecode(subscription.keys.auth);
+    const ephemeral = await subtle.generateKey({ name: "ECDH", namedCurve: "P-256" }, true, [
+        "deriveBits",
+    ]);
+    const asPublic = new Uint8Array(await subtle.exportKey("raw", ephemeral.publicKey));
+    const uaKey = await subtle.importKey("raw", buf(uaPublic), { name: "ECDH", namedCurve: "P-256" }, false, []);
+    const shared = new Uint8Array(await subtle.deriveBits({ name: "ECDH", public: uaKey }, ephemeral.privateKey, 256));
+    const prk = await hkdf(authSecret, shared, concat(utf8("WebPush: info\0"), uaPublic, asPublic), 32);
+    const salt = crypto.getRandomValues(new Uint8Array(16));
+    const cek = await hkdf(salt, prk, utf8("Content-Encoding: aes128gcm\0"), 16);
+    const nonce = await hkdf(salt, prk, utf8("Content-Encoding: nonce\0"), 12);
+    const key = await subtle.importKey("raw", buf(cek), "AES-GCM", false, ["encrypt"]);
+    // 0x02 is the last-record padding delimiter; a single record carries the
+    // whole payload.
+    const body = concat(plaintext, new Uint8Array([2]));
+    const sealed = new Uint8Array(await subtle.encrypt({ name: "AES-GCM", iv: buf(nonce) }, key, buf(body)));
+    const recordSize = new Uint8Array(4);
+    new DataView(recordSize.buffer).setUint32(0, 4096);
+    return concat(salt, recordSize, new Uint8Array([asPublic.length]), asPublic, sealed);
+}
+// --- subscriptions ---
+export async function listSubscriptions(store) {
+    const raw = await store.getSetting(SUBS_KEY);
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+}
+export function isPushSubscription(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const s = value;
+    const keys = s.keys;
+    return (typeof s.endpoint === "string" &&
+        s.endpoint.startsWith("https://") &&
+        !!keys &&
+        typeof keys.p256dh === "string" &&
+        typeof keys.auth === "string");
+}
+export async function addSubscription(store, sub) {
+    const subs = await listSubscriptions(store);
+    if (subs.some((s) => s.endpoint === sub.endpoint))
+        return;
+    subs.push({ endpoint: sub.endpoint, keys: { p256dh: sub.keys.p256dh, auth: sub.keys.auth } });
+    await store.setSetting(SUBS_KEY, JSON.stringify(subs));
+}
+async function dropSubscription(store, endpoint) {
+    const subs = await listSubscriptions(store);
+    const left = subs.filter((s) => s.endpoint !== endpoint);
+    if (left.length !== subs.length)
+        await store.setSetting(SUBS_KEY, JSON.stringify(left));
+}
+// --- hooks ---
+export async function listHooks(store) {
+    const raw = await store.getSetting(HOOKS_KEY);
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+}
+export async function addHook(store, hook) {
+    const hooks = await listHooks(store);
+    hooks.push(hook);
+    await store.setSetting(HOOKS_KEY, JSON.stringify(hooks));
+    return hook;
+}
+export async function removeHook(store, id) {
+    const hooks = await listHooks(store);
+    const left = hooks.filter((h) => h.id !== id);
+    if (left.length === hooks.length)
+        return false;
+    await store.setSetting(HOOKS_KEY, JSON.stringify(left));
+    return true;
+}
+// --- delivery ---
+// Push + webhooks for one event. Never throws: the caller awaits it only to
+// keep the Worker alive long enough to flush, and a dead endpoint must not
+// surface as a failed publish.
+export async function notify(store, payload) {
+    await Promise.all([sendPush(store, payload), postHooks(store, payload)]);
+}
+async function sendPush(store, payload) {
+    const subs = await listSubscriptions(store);
+    if (subs.length === 0)
+        return;
+    let keys;
+    try {
+        keys = await vapidKeys(store);
+    }
+    catch (err) {
+        console.warn("[mockpit] push: vapid key unavailable", err);
+        return;
+    }
+    const body = utf8(JSON.stringify({
+        title: payload.event === "ask" ? `${payload.slug} needs you` : `${payload.slug} updated`,
+        body: payload.text.slice(0, 300),
+        url: payload.url,
+        event: payload.event,
+    }));
+    await Promise.all(subs.map(async (sub) => {
+        try {
+            const encrypted = await encryptPayload(sub, body);
+            const res = await fetch(sub.endpoint, {
+                method: "POST",
+                headers: {
+                    Authorization: await vapidHeader(sub.endpoint, keys),
+                    "Content-Encoding": "aes128gcm",
+                    "Content-Type": "application/octet-stream",
+                    TTL: "86400",
+                },
+                body: buf(encrypted),
+            });
+            // 404/410 mean the browser dropped the subscription — stop retrying it.
+            if (res.status === 404 || res.status === 410)
+                await dropSubscription(store, sub.endpoint);
+            else if (!res.ok)
+                console.warn(`[mockpit] push rejected (${res.status})`);
+        }
+        catch (err) {
+            console.warn("[mockpit] push failed", err);
+        }
+    }));
+}
+async function postHooks(store, payload) {
+    const hooks = (await listHooks(store)).filter((h) => h.events.includes(payload.event));
+    await Promise.all(hooks.map(async (hook) => {
+        try {
+            await fetch(hook.url, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+            });
+        }
+        catch (err) {
+            console.warn("[mockpit] hook failed", err);
+        }
+    }));
+}

package/dist/server/richRender.d.ts

@@ -0,0 +1,15 @@
+import { type Mode } from "./themes.ts";
+import type { CodeSurface, DiffSurface, MarkdownSurface, TerminalSurface } from "./types.ts";
+export type RenderedSurface = {
+    body: string;
+    css: string;
+};
+export type RenderOpts = {
+    theme?: string;
+    mode?: Mode;
+};
+export declare const MAX_HIGHLIGHT_BYTES = 200000;
+export declare function renderMarkdown(part: MarkdownSurface, opts?: RenderOpts): Promise<RenderedSurface>;
+export declare function renderTerminal(part: TerminalSurface): RenderedSurface;
+export declare function renderCode(part: CodeSurface, opts?: RenderOpts): Promise<RenderedSurface>;
+export declare function renderDiff(part: DiffSurface, opts?: RenderOpts): Promise<RenderedSurface>;

package/dist/server/richRender.js

@@ -0,0 +1,392 @@
+// Server-side rich-surface rendering, runtime-agnostic. Renders markdown/terminal/
+// code/diff surfaces to an HTML body + CSS so they can be served from /s/:id (real
+// URL + sandbox CSP header) exactly like html surfaces — no POST round-trip, no
+// in-memory frame store. No `node:` imports, no DOM globals: passes
+// tsconfig.workers.json and runs on the Worker DO (verified on workerd; shiki
+// uses the JS regex engine and @pierre/diffs the shiki-js SSR path, so neither
+// needs WASM or a DOM).
+//
+// Each renderer returns { body, css }; renderSandboxedPart (surfacePage.ts)
+// wraps body+css in the themed opaque-origin document, injecting the chrome
+// theme vars (viewerThemeCss) — so this file only owns the surface-specific markup
+// and stylesheet, never the surrounding doc/CSP/bridge. (mermaid can't render
+// without a DOM, so it stays a self-rendering CDN doc — see renderMermaidPage in
+// surfacePage.ts — not a function here.)
+import MarkdownIt from "markdown-it";
+import { AnsiUp } from "ansi_up";
+import { createHighlighter } from "shiki";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { getFiletypeFromFileName, parseDiffFromFile, parsePatchFiles, processFile, } from "@pierre/diffs";
+import { preloadFileDiff } from "@pierre/diffs/ssr";
+import { preloadHighlighter } from "@pierre/diffs";
+import { THEMES, themeById } from "./themes.js";
+// Above this many bytes of source, syntax highlighting is skipped and the
+// surface renders as plain escaped text. Tokenizing a multi-megabyte paste
+// costs seconds of CPU in a single-threaded Durable Object — which stalls SSE
+// and every long-poll for the whole workspace, not just this one render — and
+// the resulting document is unreadable anyway. 200 KB is far above any real
+// code excerpt (the bench's "large" code fixture is ~45 KB).
+export const MAX_HIGHLIGHT_BYTES = 200_000;
+const overBudget = (text) => text.length > MAX_HIGHLIGHT_BYTES;
+// ---------------------------------------------------------------------------
+// shiki: one shared highlighter on the JS regex engine (no oniguruma WASM —
+// the Workers-safe path, same engine the viewer's highlight.ts uses). Themes
+// preload once; languages load on demand. Mirrors highlight.ts but server-side.
+// ---------------------------------------------------------------------------
+const SHIKI_DARK_RULE = ".shiki, .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; }";
+// shiki emits the light theme inline + a --shiki-dark prop on every span; this
+// flips to the dark theme. PINNED to the chrome-resolved scheme when mode is
+// given (no media query), else follows the OS — identical to shikiSchemeCss in
+// the viewer's highlight.ts (kept in lockstep so a refactor can delete that).
+function shikiSchemeCss(mode) {
+    // A resolved mode highlights against ONE theme (see shikiThemeOptions), so the
+    // colors are already the right ones inline and there is nothing to flip.
+    if (mode)
+        return "";
+    return `@media (prefers-color-scheme: dark){${SHIKI_DARK_RULE}}`;
+}
+// Every shiki theme any registry theme might select — preloaded once when the
+// shared highlighter is created, so switching the workspace theme is just a
+// re-highlight against an already-loaded theme (the highlighter is a singleton,
+// so loading only the first-requested pair would leave every other theme
+// unloaded and codeToHtml would throw on it). Mirrors the viewer's highlight.ts.
+const ALL_THEMES = [...new Set(THEMES.flatMap((t) => [t.shiki.light, t.shiki.dark]))];
+let highlighterPromise = null;
+async function getHighlighter() {
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter({
+            themes: ALL_THEMES,
+            langs: [],
+            engine: createJavaScriptRegexEngine({ forgiving: true }),
+        });
+    }
+    return highlighterPromise;
+}
+// Load languages, settling silently on unknown ids (shiki throws synchronously
+// on an unknown id, so each load is wrapped to turn the throw into a settled
+// rejection we ignore — same as the viewer's loadLangs).
+async function loadLangs(hl, langs) {
+    await Promise.allSettled(langs.map(async (l) => hl.loadLanguage(l)));
+}
+function highlight(hl, code, lang, themeOpts) {
+    if (!lang)
+        return null;
+    try {
+        return hl.codeToHtml(code, { lang, ...themeOpts });
+    }
+    catch {
+        return null;
+    }
+}
+function escapeHtml(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+// shiki tokenizes once PER THEME, so asking for a light/dark pair costs exactly
+// twice as much as asking for one. When the caller already resolved the scheme —
+// which the viewer always does, it appends &mode= to every surface iframe src —
+// the second tokenization is pure waste: shikiSchemeCss then discards one half
+// with CSS. Only an unpinned load (a bare /s/:id opened outside the viewer) needs
+// both, and that one follows the OS through a media query.
+function shikiThemeOptions(theme, mode) {
+    const t = themeById(theme);
+    if (mode === "dark")
+        return { theme: t.shiki.dark };
+    if (mode === "light")
+        return { theme: t.shiki.light };
+    return { themes: { light: t.shiki.light, dark: t.shiki.dark } };
+}
+// ---------------------------------------------------------------------------
+// Markdown
+// ---------------------------------------------------------------------------
+const MD_CSS = `
+body {
+  margin: 0;
+  padding: 4px 16px 14px;
+  background: transparent;
+  color: var(--text);
+  font:
+    14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  overflow-wrap: anywhere;
+}
+h1, h2, h3, h4 { line-height: 1.3; margin: 1.2em 0 0.5em; font-weight: 600; }
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.25em; }
+h3 { font-size: 1.1em; }
+body > :first-child { margin-top: 0.4em; }
+p, ul, ol, blockquote, table { margin: 0.5em 0; }
+ul, ol { padding-left: 1.5em; }
+li { margin: 0.2em 0; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+code {
+  font: 0.875em ui-monospace, monospace;
+  background: var(--hover);
+  padding: 0.12em 0.35em;
+  border-radius: 4px;
+}
+pre {
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  overflow: auto;
+}
+pre code { background: none; padding: 0; font-size: 12.5px; }
+blockquote {
+  margin-left: 0;
+  padding-left: 12px;
+  border-left: 2px solid var(--border-2);
+  color: var(--muted);
+}
+table { border-collapse: collapse; font-size: 13px; }
+th, td { border: 0.5px solid var(--border); padding: 4px 8px; text-align: left; }
+th { background: var(--hover); }
+img { max-width: 100%; height: auto; border-radius: 6px; }
+hr { border: none; border-top: 0.5px solid var(--border); margin: 1em 0; }
+`;
+// The languages named on fenced code blocks (```ts, ~~~python).
+function fenceLangs(src) {
+    const langs = new Set();
+    const re = /^[ \t]*(?:```|~~~)[ \t]*([\w+#.-]+)/gm;
+    let m;
+    while ((m = re.exec(src)))
+        langs.add(m[1].toLowerCase());
+    return [...langs];
+}
+export async function renderMarkdown(part, opts = {}) {
+    const src = part.markdown ?? "";
+    const themeOpts = shikiThemeOptions(opts.theme, opts.mode);
+    // Oversized prose renders without highlighting rather than tokenizing every
+    // fenced block (see MAX_HIGHLIGHT_BYTES); markdown-it's own escaping still
+    // produces a correct, readable document.
+    const hl = overBudget(src) ? null : await getHighlighter();
+    if (hl)
+        await loadLangs(hl, fenceLangs(src));
+    const md = new MarkdownIt({
+        html: false,
+        linkify: true,
+        highlight: (code, lang) => (hl ? (highlight(hl, code, lang, themeOpts) ?? "") : ""),
+    });
+    const renderLinkOpen = md.renderer.rules.link_open ??
+        ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+        tokens[idx].attrSet("target", "_blank");
+        tokens[idx].attrSet("rel", "noopener noreferrer");
+        return renderLinkOpen(tokens, idx, options, env, self);
+    };
+    return { body: md.render(src), css: MD_CSS + shikiSchemeCss(opts.mode) };
+}
+// ---------------------------------------------------------------------------
+// Terminal
+// ---------------------------------------------------------------------------
+const TERM_CSS = `
+body { margin: 0; background: var(--term-bg); }
+.term-bar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 12px; background: var(--term-bar);
+  border-bottom: 0.5px solid #000;
+}
+.term-dots { display: inline-flex; gap: 6px; }
+.term-dots span { width: 11px; height: 11px; border-radius: 50%; background: #555; }
+.term-dots span:nth-child(1) { background: #ff5f56; }
+.term-dots span:nth-child(2) { background: #ffbd2e; }
+.term-dots span:nth-child(3) { background: #27c93f; }
+.term-title { font-size: 11.5px; color: var(--term-title); font-family: ui-monospace, monospace; }
+.term-body {
+  margin: 0; padding: 12px 14px; overflow-x: auto; white-space: pre;
+  color: var(--term-fg);
+  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  tab-size: 8;
+}
+`;
+function resolveCarriageReturns(text) {
+    return text
+        .replace(/\r\n/g, "\n")
+        .split("\n")
+        .map((line) => {
+        const lastCr = line.lastIndexOf("\r");
+        return lastCr === -1 ? line : line.slice(lastCr + 1);
+    })
+        .join("\n");
+}
+export function renderTerminal(part) {
+    const au = new AnsiUp();
+    au.use_classes = false;
+    const ansi = au.ansi_to_html(resolveCarriageReturns(part.text ?? ""));
+    const title = escapeHtml(part.title ?? "terminal");
+    const width = part.cols ? ` style="width:${Number(part.cols)}ch"` : "";
+    const body = `<div class="term-bar"><span class="term-dots" aria-hidden="true">` +
+        `<span></span><span></span><span></span></span>` +
+        `<span class="term-title">${title}</span></div>` +
+        `<pre class="term-body"${width}>${ansi}</pre>`;
+    return { body, css: TERM_CSS };
+}
+// ---------------------------------------------------------------------------
+// Code
+// ---------------------------------------------------------------------------
+const CODE_CSS = `
+body { margin: 0; padding: 0; background: transparent; }
+.code-wrap { position: relative; }
+.code-head {
+  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
+  background: var(--panel); border: 0.5px solid var(--border);
+  border-bottom: 0; border-radius: 8px 8px 0 0;
+}
+.code-filename {
+  flex: 1; font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.code-lang {
+  font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--faint); background: var(--hover); padding: 1px 6px;
+  border-radius: 4px; text-transform: lowercase;
+}
+.copy-btn {
+  font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--muted); background: var(--hover); border: 0.5px solid var(--border);
+  border-radius: 5px; padding: 2px 9px; cursor: pointer; white-space: nowrap;
+  transition: color 0.12s;
+}
+.copy-btn:hover { color: var(--text); }
+.copy-btn.copied { color: var(--accent); }
+.code-wrap:not(.code-wrap-head) .copy-btn {
+  position: absolute; top: 6px; right: 8px; opacity: 0; transition: opacity 0.15s; z-index: 1;
+}
+.code-wrap:not(.code-wrap-head):hover .copy-btn,
+.code-wrap:not(.code-wrap-head):focus-within .copy-btn { opacity: 1; }
+pre.shiki, pre.plain {
+  margin: 0; padding: 12px 14px; background: var(--panel);
+  border: 0.5px solid var(--border); border-radius: 8px; overflow: auto;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  counter-reset: line;
+}
+.code-wrap.code-wrap-head pre.shiki,
+.code-wrap.code-wrap-head pre.plain { border-radius: 0 0 8px 8px; }
+pre.shiki code, pre.plain code { background: none; padding: 0; }
+.line { counter-increment: line; display: block; min-height: 1.5em; }
+.line::before {
+  content: counter(line); display: inline-block; width: 2.5em; margin-right: 12px;
+  color: var(--faint); text-align: right; user-select: none; -webkit-user-select: none;
+}
+pre.plain { color: var(--text); }
+`;
+function plainHtml(code) {
+    const lines = code.split("\n");
+    return `<pre class="plain"><code>${lines
+        .map((l) => `<span class="line">${escapeHtml(l)}</span>`)
+        .join("")}</code></pre>`;
+}
+export async function renderCode(part, opts = {}) {
+    const code = part.code ?? "";
+    const lang = part.language ?? "text";
+    const lineStart = part.lineStart ?? 1;
+    const themeOpts = shikiThemeOptions(opts.theme, opts.mode);
+    const plain = overBudget(code);
+    const hl = plain ? null : await getHighlighter();
+    if (hl && lang && lang !== "text")
+        await loadLangs(hl, [lang]);
+    const highlighted = hl ? highlight(hl, code, lang, themeOpts) : null;
+    const pre = highlighted
+        ? highlighted.replace(/\n*(<\/span>)\n*(<span class="line")/g, "$1$2")
+        : plainHtml(code);
+    const preWithStart = lineStart > 1
+        ? pre.replace(/<pre\b[^>]*>/, (open) => {
+            const decl = `counter-reset:line ${lineStart - 1};`;
+            return /\sstyle="/.test(open)
+                ? open.replace(/\sstyle="/, ` style="${decl}`)
+                : open.replace(/<pre\b/, `<pre style="${decl}"`);
+        })
+        : pre;
+    const hasHead = !!(part.title || (lang && lang !== "text"));
+    const wrapClass = hasHead ? "code-wrap code-wrap-head" : "code-wrap";
+    const lineEnd = lineStart + code.split("\n").length - 1;
+    const range = lineStart > 1 ? `:${lineStart}-${lineEnd}` : "";
+    const filename = part.title
+        ? `<span class="code-filename">${escapeHtml(part.title)}${escapeHtml(range)}</span>`
+        : hasHead
+            ? `<span class="code-filename"></span>`
+            : "";
+    const langBadge = lang && lang !== "text" ? `<span class="code-lang">${escapeHtml(lang)}</span>` : "";
+    const copyBtn = `<button class="copy-btn" onclick="__codeCopy(this)">Copy</button>`;
+    const head = hasHead ? `<div class="code-head">${filename}${langBadge}${copyBtn}</div>` : copyBtn;
+    const codeJs = JSON.stringify(code).replace(/</g, "\\u003c");
+    const body = `<div class="${wrapClass}">${head}${preWithStart}<script>(function(){var c=${codeJs};window.__codeCopy=function(b){copyToClipboard(c);b.textContent="Copied!";b.classList.add("copied");setTimeout(function(){b.textContent="Copy";b.classList.remove("copied")},1500)}})();</script></div>`;
+    return { body, css: CODE_CSS + shikiSchemeCss(opts.mode) };
+}
+// ---------------------------------------------------------------------------
+// Diff (@pierre/diffs SSR)
+// ---------------------------------------------------------------------------
+const DIFF_CSS = `
+body { margin: 0; padding: 0; background: transparent; font-size: 12.5px; }
+diffs-container { display: block; }
+diffs-container + diffs-container { border-top: 0.5px solid var(--border); }
+`;
+// Fallback styling for a patch too large to render as a real diff.
+const DIFF_PLAIN_CSS = `
+.diff-plain {
+  margin: 0; padding: 12px 14px; color: var(--text); background: var(--panel);
+  border: 0.5px solid var(--border); border-radius: 8px; overflow: auto;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+`;
+const BASE_LANGS = ["text", "json", "javascript", "typescript", "tsx", "jsx"];
+function buildFileDiffs(part) {
+    const langs = new Set(BASE_LANGS);
+    const diffs = [];
+    if (part.patch) {
+        for (const parsed of parsePatchFiles(part.patch)) {
+            for (const fd of parsed.files) {
+                diffs.push(fd);
+                if (fd.name)
+                    langs.add(getFiletypeFromFileName(fd.name));
+            }
+        }
+        if (diffs.length === 0) {
+            const fd = processFile(part.patch);
+            if (fd)
+                diffs.push(fd);
+        }
+    }
+    else if (part.files) {
+        for (const f of part.files) {
+            const lang = f.language ?? getFiletypeFromFileName(f.filename);
+            langs.add(lang);
+            diffs.push(parseDiffFromFile({ name: f.filename, contents: f.before, lang: lang }, { name: f.filename, contents: f.after, lang: lang }));
+        }
+    }
+    return { diffs, langs: [...langs] };
+}
+export async function renderDiff(part, opts = {}) {
+    const t = themeById(opts.theme);
+    const shiki = { dark: t.shiki.dark, light: t.shiki.light };
+    const source = part.patch ??
+        (part.files ?? []).map((f) => `${f.filename}\n${f.before}\n${f.after}`).join("\n");
+    // A giant patch is the most expensive render there is (parse + per-file SSR +
+    // highlighting). Past the budget, show it as a plain escaped patch instead of
+    // pinning the single-threaded runtime for seconds.
+    if (overBudget(source)) {
+        return {
+            body: `<pre class="diff-plain">${escapeHtml(source)}</pre>`,
+            css: `${DIFF_CSS}${DIFF_PLAIN_CSS}`,
+        };
+    }
+    const { diffs, langs } = buildFileDiffs(part);
+    if (diffs.length === 0)
+        throw new Error("No diff content.");
+    await preloadHighlighter({
+        themes: [shiki.dark, shiki.light],
+        langs: langs,
+        preferredHighlighter: "shiki-js",
+    });
+    const options = {
+        diffStyle: part.layout ?? "unified",
+        theme: { dark: shiki.dark, light: shiki.light },
+        themeType: opts.mode ?? "system",
+        preferredHighlighter: "shiki-js",
+    };
+    const rendered = await Promise.all(diffs.map((fileDiff) => preloadFileDiff({ fileDiff, options })));
+    const body = rendered
+        .map((r) => `<diffs-container><template shadowrootmode="open">${r.prerenderedHTML}</template></diffs-container>`)
+        .join("");
+    return { body, css: DIFF_CSS };
+}