import { preloadPatchFile } from "@pierre/diffs/ssr";import { useCallback, useEffect, useRef, useState } from "react";import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "../ComposerPromptEditor";import { terminalThemeFromApp } from "../ThreadTerminalDrawer";import { useTheme } from "../../hooks/useTheme";import { resolveDiffThemeName, type DiffThemeName } from "../../lib/diffRendering";import { GhosttyTerminalSurface } from "~/terminal/ghostty/surface"; // The font previews are the real surfaces, not lookalikes: the composer's// Lexical editor, the diff panel's file diff, and the Ghostty canvas// renderer. Each already consumes the appearance font tokens (or, for the// terminal, the settings passed down as props), so what the row shows is// exactly what the app renders. const EMPTY_TERMINAL_CONTEXTS: ReadonlyArray<never> = [];const EMPTY_SKILLS: ReadonlyArray<never> = []; // Serialized the way the composer stores inline tokens: the $skill and the// markdown-style file links render as chips, so the preview shows prompt// text and pills exactly as the real composer draws them.const PROMPT_PREVIEW_TEXT =  "Use $frontend-design to fix the flaky test in " +  "[surface.test.ts](apps/web/src/terminal/ghostty/surface.test.ts) and align the header with " +  "[SettingsPanels.tsx](apps/web/src/components/settings/SettingsPanels.tsx) before shipping."; function noop() {} /** A live composer editor: type in it to feel the family and size. */export function PromptFontPreview() {  const editorRef = useRef<ComposerPromptEditorHandle>(null);  const [prompt, setPrompt] = useState(PROMPT_PREVIEW_TEXT);  const [cursor, setCursor] = useState(PROMPT_PREVIEW_TEXT.length);  const onChange = useCallback((nextValue: string, nextCursor: number) => {    setPrompt(nextValue);    setCursor(nextCursor);  }, []);  return (    <div className="mt-1 mb-2 rounded-lg border border-border bg-background px-3 py-2">      <ComposerPromptEditor        editorRef={editorRef}        value={prompt}        cursor={cursor}        terminalContexts={EMPTY_TERMINAL_CONTEXTS}        skills={EMPTY_SKILLS}        disabled={false}        placeholder="Ask for follow-up changes or attach images"        className="max-h-40 min-h-12"        onRemoveTerminalContext={noop}        onChange={onChange}        onPaste={noop}      />    </div>  );} const DIFF_PREVIEW_PATCH = [  "diff --git a/src/formatUser.ts b/src/formatUser.ts",  "--- a/src/formatUser.ts",  "+++ b/src/formatUser.ts",  "@@ -1,3 +1,3 @@",  " export function formatUser(user: User) {",  "-  return user.name.toUpperCase();",  "+  return `${user.name} <${user.email}>`; // 0O 1lI",  " }",  "",].join("\n"); // Rendered once per theme through the SSR pipeline, which always awaits the// shared highlighter before producing HTML. The interactive FileDiff's mount// lifecycle can race that highlighter when the typography views remount it// (toggling Advanced) and lock in an unhighlighted frame; a static preview// needs none of that lifecycle, so it uses the deterministic renderer and// injects the finished HTML into a shadow root, exactly as FileDiff would.const diffPreviewHtmlByTheme = new Map<DiffThemeName, Promise<readonly string[]>>(); function loadDiffPreviewHtml(theme: DiffThemeName): Promise<readonly string[]> {  let promise = diffPreviewHtmlByTheme.get(theme);  if (promise === undefined) {    promise = preloadPatchFile({      patch: DIFF_PREVIEW_PATCH,      options: { diffStyle: "unified", theme },    }).then((results) => results.map((result) => result.prerenderedHTML));    diffPreviewHtmlByTheme.set(theme, promise);  }  return promise;} // Pierre's prerendered stylesheet bakes its own light/dark surface colors// into the shadow root's @layer rules. These unlayered rules win the cascade// without !important and re-point the surfaces at the app's code tokens// (custom properties inherit across the shadow boundary), so the preview// follows the active theme exactly like the real diff panel does.const DIFF_PREVIEW_THEME_BRIDGE = `  :host {    color: var(--code-foreground);    background-color: var(--code-background);    --diffs-fg: var(--code-foreground);    --diffs-bg: var(--code-background);    --diffs-light-bg: var(--code-background);    --diffs-dark-bg: var(--code-background);  }  [data-diffs-header] {    background-color: var(--code-background);    color: var(--code-foreground);  }`; function StaticDiffHtml({ html }: { html: string }) {  const hostRef = useRef<HTMLDivElement | null>(null);  useEffect(() => {    const host = hostRef.current;    if (host === null) return;    const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });    shadow.innerHTML = html;    const bridge = document.createElement("style");    bridge.textContent = DIFF_PREVIEW_THEME_BRIDGE;    shadow.append(bridge);  }, [html]);  return <div ref={hostRef} />;} /** The diff panel's file diff, statically rendered by its real pipeline. */export function CodeFontPreview() {  const { resolvedTheme } = useTheme();  const themeName = resolveDiffThemeName(resolvedTheme);  const [htmlByFile, setHtmlByFile] = useState<readonly string[] | null>(null);  useEffect(() => {    let cancelled = false;    void loadDiffPreviewHtml(themeName).then((html) => {      if (!cancelled) setHtmlByFile(html);    });    return () => {      cancelled = true;    };  }, [themeName]);  if (htmlByFile === null) return null;  return (    <div className="mt-1 mb-2 space-y-2">      {htmlByFile.map((html) => (        <StaticDiffHtml key={html} html={html} />      ))}    </div>  );} // A zsh-style prompt: green arrow, cyan project, blue/red git segment,// yellow dirty marker. It doubles as the echo loop's fresh-line prompt.const TERMINAL_PROMPT =  "\x1b[1;32m→\x1b[0m \x1b[1;36mt3code\x1b[0m \x1b[1;34mgit:(\x1b[1;31mmain\x1b[1;34m)\x1b[0m \x1b[1;33m✗\x1b[0m ";// A dev-server startup: brand line, addresses, a test summary, and a READY// badge. Together the lines cover bold, dim, underline, the six accent// colors, and a background cell, so a font choice shows every SGR the// terminal actually renders.const TERMINAL_PREVIEW_TRANSCRIPT =  `${TERMINAL_PROMPT}vpr dev\r\n` +  "\r\n" +  "  \x1b[1;32mVITE\x1b[0m \x1b[32mv7.1.1\x1b[0m  \x1b[2mready in\x1b[0m \x1b[1m1.24s\x1b[0m\r\n" +  "\r\n" +  "  \x1b[32m→\x1b[0m  \x1b[2mLocal:\x1b[0m    \x1b[4;36mhttp://127.0.0.1:5173/\x1b[0m\r\n" +  "  \x1b[32m→\x1b[0m  \x1b[2mNetwork:\x1b[0m  \x1b[4;36mhttp://192.168.1.24:5173/\x1b[0m\r\n" +  "\r\n" +  "  \x1b[32m✓ 85 passed\x1b[0m   \x1b[33m△ 2 warnings\x1b[0m   \x1b[31m✗ 0 failed\x1b[0m\r\n" +  "\r\n" +  "  \x1b[42;30m READY \x1b[0m \x1b[2mwatching for changes — press\x1b[0m \x1b[1mq\x1b[0m \x1b[2mto quit\x1b[0m\r\n" +  "\r\n" +  TERMINAL_PROMPT; /** The surface treats an omitted family or size as "use the built-in default". */function previewTerminalFont(family: string, size: number): { family?: string; size: number } {  const trimmed = family.trim();  return trimmed.length > 0 ? { family: trimmed, size } : { size };} /** * The real Ghostty canvas renderer against a local echo loop instead of a * PTY: keys print, Enter starts a new prompt line, Backspace erases. That * exercises the same glyph atlas, cell metrics, and monospace gate the * terminal drawer uses. */export function TerminalFontPreview({ family, size }: { family: string; size: number }) {  const mountRef = useRef<HTMLDivElement>(null);  const surfaceRef = useRef<GhosttyTerminalSurface | null>(null);  const fontRef = useRef({ family, size });  const { theme, resolvedTheme } = useTheme();   useEffect(() => {    const current = fontRef.current;    if (current.family === family && current.size === size) return;    fontRef.current = { family, size };    void surfaceRef.current?.setFont(previewTerminalFont(family, size));  }, [family, size]);   // Re-read the terminal tokens on any theme change — switching between two  // palettes can leave resolvedTheme (light/dark) untouched.  useEffect(() => {    const mount = mountRef.current;    const surface = surfaceRef.current;    if (!mount || !surface) return;    surface.setTheme(terminalThemeFromApp(mount));  }, [theme, resolvedTheme]);   useEffect(() => {    const mount = mountRef.current;    if (!mount) return;    let cancelled = false;    // Column of the caret on the current input line, so Backspace stops at    // the prompt instead of eating it.    let lineLength = 0;     const echo = (data: string) => {      const surface = surfaceRef.current;      if (!surface) return;      if (data === "\r") {        surface.write(`\r\n${TERMINAL_PROMPT}`);        lineLength = 0;        return;      }      if (data === "\x7f" || data === "\b") {        if (lineLength > 0) {          surface.write("\b \b");          lineLength -= 1;        }        return;      }      // Arrow keys and other escape reports have no cursor to move here.      if (data.startsWith("\x1b")) return;      const printable = [...data]        .filter((character) => character >= " " && character !== "\x7f")        .join("");      if (printable.length === 0) return;      surface.write(printable);      lineLength += printable.length;    };     void GhosttyTerminalSurface.create(mount, {      theme: terminalThemeFromApp(mount),      font: previewTerminalFont(fontRef.current.family, fontRef.current.size),      onData: echo,      onResize: noop,      onSelectionChange: noop,      // Tab keeps walking the settings page instead of feeding the echo loop.      beforeKey: (event) => event.key !== "Tab",      onLinkActivate: noop,    }).then((surface) => {      if (cancelled) {        surface.dispose();        return;      }      surfaceRef.current = surface;      // The theme and font may both have changed while the WASM surface loaded.      surface.setTheme(terminalThemeFromApp(mount));      const font = fontRef.current;      void surface.setFont(previewTerminalFont(font.family, font.size));      surface.write(TERMINAL_PREVIEW_TRANSCRIPT);    });     return () => {      cancelled = true;      surfaceRef.current?.dispose();      surfaceRef.current = null;    };  }, []);   return (    <div      ref={mountRef}      className="relative mt-1 mb-2 h-52 overflow-hidden rounded-lg border border-border"      aria-label="Terminal font preview"    />  );}