Polyglot

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { animate, motion, useReducedMotion, type AnimationPlaybackControls } from "motion/react";

import { cn } from "@/lib/utils";

/* ─────────────────────────────────────────────────────────
 * POLYGLOT STORYBOARD
 *
 *  rest     a code block with language tabs. The values every
 *           language shares (model, prompt, key) carry a faint
 *           tint: they're the parts you can change
 *  switch   ~0.5s, interruptible
 *    0ms    the tab pill slides over (spring, no bounce) and the
 *           old code fades out over 120ms with a slight blur
 *   30ms    each shared value glides from its old place to its new
 *           one, in reading order, 25ms apart. Its tint brightens
 *           while it moves and settles once it lands
 *   80ms    the new code fades in line by line behind the values,
 *           and the block's height follows the new line count
 *           A switch mid-flight starts every value from wherever
 *           it is on screen
 *  edit     click an editable value and type: every language
 *           changes at once, escaped for its own quotes. A value
 *           with options opens a small menu. A secret shows its
 *           prefix and dots until hovered
 *  run      Run turns into Stop. The echoed value pulses and a copy
 *           of it flies down into the response panel as its first
 *           line while the panel opens. The status counts the wait
 *           up to the first token, tokens fade in one at a time
 *           behind a cursor, and it ends on "200 OK · 1.2 s · 64
 *           tokens" with Run again. Switching tabs doesn't touch the
 *           stream; editing a value cancels it
 *  sync     blocks with the same syncKey switch together, and the
 *           choice is remembered on this device
 *  reduced  a 150ms crossfade between languages; nothing moves or
 *           flies, and the panel opens at once
 * ───────────────────────────────────────────────────────── */

const POLY = {
  fadeOut: 0.12, // s the old code takes to fade out
  blur: 2, // px of blur on the old code as it goes
  glide: { type: "spring", visualDuration: 0.42, bounce: 0 }, // a value's move
  glideDelay: 0.03, // s after the switch before the first value moves
  glideStagger: 0.025, // s between values, in reading order
  lineDelay: 0.08, // s after the switch before the first new line fades in
  lineStagger: 0.018, // s between new lines
  lineFade: 0.24, // s each new line takes to fade in
  height: { type: "spring", visualDuration: 0.4, bounce: 0 },
  pill: { type: "spring", visualDuration: 0.3, bounce: 0 },
  crossfade: 0.15, // s; the whole switch with reduced motion
  pulse: 0.36, // s the echoed value pulses for on Run
  flight: { type: "spring", visualDuration: 0.55, bounce: 0 },
  flightDelay: 0.1, // s after the pulse starts before the copy leaves
  panel: { type: "spring", visualDuration: 0.35, bounce: 0 },
  copied: 1600, // ms the copy button shows its check
} as const;

/* ── Public types ───────────────────────────────────────── */

export interface PolyglotSlot {
  /** The starting value, written into every snippet wherever `{{name}}` appears. */
  value: string;
  /** Click the value in the code to type a new one. */
  editable?: boolean;
  /** Turns the value into a small dropdown with these choices. */
  options?: string[];
  /** Shows the prefix and dots until hovered or focused. Copy still uses the real value. */
  secret?: boolean;
  /** Accessible name for the value, e.g. "Prompt". Defaults to the slot's key. */
  label?: string;
}

export interface PolyglotSnippet {
  /** The tab's label, e.g. "cURL". Blocks with the same `syncKey` match tabs by label. */
  label: string;
  /** Highlighting: `bash`, `python`, `js`, `ts`, `go`, `ruby` or `json`. Anything else is plain. */
  lang: string;
  /** The code, with `{{name}}` wherever a slot's value goes. */
  code: string;
}

export type PolyglotValues = Record<string, string>;

export interface PolyglotProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
  slots: Record<string, PolyglotSlot>;
  snippets: PolyglotSnippet[];
  /** The reply Run streams, as a string or built from the current values. Adds the Run footer. */
  response?: string | ((values: PolyglotValues) => string);
  /** Call a real API instead: yield the reply in chunks. Stop and edits abort `signal`. */
  onRun?: (values: PolyglotValues, signal: AbortSignal) => AsyncIterable<string>;
  /** Tokens per second for `response`. */
  speed?: number | ((values: PolyglotValues) => number);
  /** Milliseconds before the first token of `response`. */
  latency?: number | ((values: PolyglotValues) => number);
  /** Blocks with the same key switch language together and remember the choice. */
  syncKey?: string;
  /** The tab shown first, by label. */
  defaultLabel?: string;
  lineNumbers?: boolean;
  /** `split` puts the response beside the code when the block is wide. */
  layout?: "stack" | "split";
  /** The slot whose value flies into the response as its first line. Defaults to the first editable one. */
  echo?: string | false;
  /** Highlighting for the response. */
  responseLang?: string;
  /** Shown when a run finishes, before the time and token count. */
  statusText?: string;
}

/* ── Highlighting ───────────────────────────────────────── */

type TokenType =
  | "plain"
  | "keyword"
  | "string"
  | "number"
  | "comment"
  | "function"
  | "property"
  | "type"
  | "variable"
  | "punctuation";

type Token = { type: TokenType; text: string };

// One map to retheme the highlighter. Neutrals come from the theme's tokens.
const TOKEN_CLASS: Record<TokenType, string> = {
  plain: "",
  keyword: "text-rose-600 dark:text-rose-400",
  string: "text-emerald-700 dark:text-emerald-300",
  number: "text-blue-600 dark:text-sky-300",
  comment: "text-muted-foreground italic",
  function: "text-violet-600 dark:text-violet-300",
  property: "text-amber-700 dark:text-amber-200",
  type: "text-cyan-700 dark:text-cyan-300",
  variable: "text-sky-700 dark:text-sky-300",
  punctuation: "text-muted-foreground",
};

type Lang = "bash" | "python" | "js" | "go" | "ruby" | "json" | "text";

const LANG_ALIASES: Record<string, Lang> = {
  bash: "bash",
  sh: "bash",
  shell: "bash",
  zsh: "bash",
  curl: "bash",
  python: "python",
  py: "python",
  js: "js",
  jsx: "js",
  ts: "js",
  tsx: "js",
  javascript: "js",
  typescript: "js",
  node: "js",
  go: "go",
  golang: "go",
  ruby: "ruby",
  rb: "ruby",
  json: "json",
};

const toLang = (lang: string): Lang => LANG_ALIASES[lang.toLowerCase()] ?? "text";

type Grammar = {
  comment: string;
  block?: [string, string];
  quotes: string[];
  raw?: string;
  prefix?: RegExp;
  keywords: Set<string>;
  constants: Set<string>;
  types?: Set<string>;
  kwarg?: boolean; // name= → property (Python keyword arguments)
  colonKey?: boolean; // name: → property (object keys, struct fields, Ruby hashes)
  symbols?: boolean; // :name → number color (Ruby)
  decorators?: boolean;
};

const words = (list: string) => new Set(list.split(" "));

const GRAMMARS: Record<"python" | "js" | "go" | "ruby", Grammar> = {
  python: {
    comment: "#",
    quotes: ['"""', "'''", '"', "'"],
    prefix: /[rRbBuUfF]{1,2}(?=["'])/y,
    keywords: words(
      "and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield",
    ),
    constants: words("True False None self"),
    kwarg: true,
    decorators: true,
  },
  js: {
    comment: "//",
    block: ["/*", "*/"],
    quotes: ['"', "'", "`"],
    keywords: words(
      "as async await break case catch class const continue default delete do else enum export extends finally for from function if import in instanceof interface let new of return satisfies static switch throw try type typeof var void while yield",
    ),
    constants: words("true false null undefined this"),
    types: words("string number boolean any unknown never void"),
    colonKey: true,
  },
  go: {
    comment: "//",
    block: ["/*", "*/"],
    quotes: ['"', "`", "'"],
    raw: "`",
    keywords: words(
      "break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var",
    ),
    constants: words("true false nil iota"),
    types: words("string int int64 error bool byte rune float64 any"),
    colonKey: true,
  },
  ruby: {
    comment: "#",
    quotes: ['"', "'"],
    keywords: words(
      "alias and begin break case class def do else elsif end ensure for if in module next not or puts require require_relative rescue return then unless until when while yield",
    ),
    constants: words("true false nil self"),
    colonKey: true,
    symbols: true,
  },
};

const BASH_KEYWORDS = words("if then else elif fi for in do done while case esac export function return local");

function createTokens() {
  const out: Token[] = [];
  const push = (type: TokenType, text: string) => {
    if (!text) return;
    const last = out[out.length - 1];
    if (last && last.type === type) last.text += text;
    else out.push({ type, text });
  };
  return { out, push };
}

type Push = (type: TokenType, text: string) => void;

const isSpace = (c: string | undefined) => c === " " || c === "\t" || c === "\n" || c === "\r";
const isWordStart = (c: string | undefined) => !!c && /[A-Za-z_$]/.test(c);

function nextNonSpace(code: string, from: number) {
  let i = from;
  while (i < code.length && (code[i] === " " || code[i] === "\t")) i++;
  return i;
}

/** Reads a quoted string from `i`, honoring backslash escapes unless `raw`. Unclosed strings run to the line's end (or the input's). */
function readString(code: string, i: number, quote: string, raw: boolean) {
  let j = i + quote.length;
  while (j < code.length) {
    if (!raw && code[j] === "\\") {
      j += 2;
      continue;
    }
    if (code.startsWith(quote, j)) return j + quote.length;
    if (code[j] === "\n" && quote.length === 1 && quote !== "`") return j;
    j++;
  }
  return code.length;
}

function lexJson(code: string, push: Push) {
  let i = 0;
  while (i < code.length) {
    const c = code[i];
    if (isSpace(c)) {
      let j = i;
      while (isSpace(code[j])) j++;
      push("plain", code.slice(i, j));
      i = j;
    } else if (c === '"') {
      const j = readString(code, i, '"', false);
      push(code[nextNonSpace(code, j)] === ":" ? "property" : "string", code.slice(i, j));
      i = j;
    } else if (/[-\d]/.test(c)) {
      const m = /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y;
      m.lastIndex = i;
      const hit = m.exec(code);
      const text = hit ? hit[0] : c;
      push(hit ? "number" : "punctuation", text);
      i += text.length;
    } else if (/[a-z]/i.test(c)) {
      let j = i;
      while (j < code.length && /[a-z]/i.test(code[j])) j++;
      const word = code.slice(i, j);
      push(word === "true" || word === "false" || word === "null" ? "number" : "plain", word);
      i = j;
    } else {
      push("punctuation", c);
      i++;
    }
  }
}

function lexBash(code: string, push: Push) {
  let i = 0;
  let command = true; // the next word is a command
  while (i < code.length) {
    const c = code[i];
    if (c === "\n") {
      push("plain", c);
      i++;
      command = true;
    } else if (c === " " || c === "\t") {
      let j = i;
      while (code[j] === " " || code[j] === "\t") j++;
      push("plain", code.slice(i, j));
      i = j;
    } else if (c === "\\" && code[i + 1] === "\n") {
      push("punctuation", "\\");
      push("plain", "\n");
      i += 2; // a continued line keeps its command
    } else if (c === "#" && (i === 0 || isSpace(code[i - 1]))) {
      const end = code.indexOf("\n", i);
      const j = end < 0 ? code.length : end;
      push("comment", code.slice(i, j));
      i = j;
    } else if (c === "'") {
      const close = code.indexOf("'", i + 1);
      const j = close < 0 ? code.length : close + 1;
      const inner = code.slice(i + 1, close < 0 ? code.length : close);
      if (/^\s*[{[]/.test(inner)) {
        // A JSON body (curl -d '{…}') gets JSON highlighting inside its quotes.
        push("string", "'");
        lexJson(inner, push);
        if (close >= 0) push("string", "'");
      } else {
        push("string", code.slice(i, j));
      }
      i = j;
      command = false;
    } else if (c === '"') {
      const j = readString(code, i, '"', false);
      push("string", code.slice(i, j));
      i = j;
      command = false;
    } else if (c === "$") {
      const m = /\$(?:\{[^}]*\}|\w+|\(|)/y;
      m.lastIndex = i;
      const text = m.exec(code)?.[0] || "$";
      push("variable", text);
      i += text.length;
      if (text === "$(") command = true;
    } else if ("|&;".includes(c)) {
      push("punctuation", c);
      i++;
      command = true;
    } else if ("<>=()".includes(c)) {
      push("punctuation", c);
      i++;
    } else {
      let j = i;
      while (j < code.length && !isSpace(code[j]) && !"'\"$|&;<>=()\\".includes(code[j])) j++;
      if (j === i) j++;
      const word = code.slice(i, j);
      if (code[j] === "=") push("variable", word);
      else if (command && BASH_KEYWORDS.has(word)) push("keyword", word);
      else if (command) push("function", word);
      else if (word.startsWith("-")) push("type", word);
      else push("plain", word);
      if (!(command && (word === "sudo" || word === "then" || word === "do" || word === "else"))) {
        command = command && BASH_KEYWORDS.has(word) && word !== "export" ? command : false;
      }
      i = j;
    }
  }
}

function lexCode(code: string, g: Grammar, push: Push) {
  let i = 0;
  let last = ""; // the last character that wasn't whitespace
  const emit = (type: TokenType, text: string) => {
    push(type, text);
    const trimmed = text.trimEnd();
    if (trimmed) last = trimmed[trimmed.length - 1];
  };
  while (i < code.length) {
    const c = code[i];
    if (isSpace(c)) {
      let j = i;
      while (isSpace(code[j])) j++;
      push("plain", code.slice(i, j));
      i = j;
      continue;
    }
    if (code.startsWith(g.comment, i)) {
      const end = code.indexOf("\n", i);
      const j = end < 0 ? code.length : end;
      emit("comment", code.slice(i, j));
      i = j;
      continue;
    }
    if (g.block && code.startsWith(g.block[0], i)) {
      const end = code.indexOf(g.block[1], i + g.block[0].length);
      const j = end < 0 ? code.length : end + g.block[1].length;
      emit("comment", code.slice(i, j));
      i = j;
      continue;
    }
    let start = i;
    if (g.prefix) {
      g.prefix.lastIndex = i;
      const m = g.prefix.exec(code);
      if (m) start = i + m[0].length;
    }
    const quote = g.quotes.find((q) => code.startsWith(q, start));
    if (quote) {
      const j = readString(code, start, quote, quote === g.raw);
      const after = nextNonSpace(code, j);
      const key = code[after] === ":" && code[after + 1] !== ":" && code[after + 1] !== "=";
      emit(key ? "property" : "string", code.slice(i, j));
      i = j;
      continue;
    }
    if (/\d/.test(c) || (c === "." && /\d/.test(code[i + 1] ?? ""))) {
      const m = /(?:0[xob][\da-f_]+|\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?|\.\d+)n?/iy;
      m.lastIndex = i;
      const text = m.exec(code)?.[0] || c;
      emit("number", text);
      i += text.length;
      continue;
    }
    if (g.decorators && c === "@" && isWordStart(code[i + 1])) {
      let j = i + 1;
      while (j < code.length && /[\w.]/.test(code[j])) j++;
      emit("function", code.slice(i, j));
      i = j;
      continue;
    }
    if (g.symbols && c === ":" && isWordStart(code[i + 1]) && code[i - 1] !== ":") {
      let j = i + 1;
      while (j < code.length && /\w/.test(code[j])) j++;
      emit("number", code.slice(i, j));
      i = j;
      continue;
    }
    if (isWordStart(c)) {
      let j = i;
      while (j < code.length && /[\w$]/.test(code[j])) j++;
      const word = code.slice(i, j);
      const after = nextNonSpace(code, j);
      let type: TokenType = "plain";
      if (g.keywords.has(word) && last !== ".") type = "keyword";
      else if (g.constants.has(word)) type = "number";
      else if (code[j] === "(" || (code[after] === "(" && last !== ".")) type = "function";
      else if (g.kwarg && code[j] === "=" && code[j + 1] !== "=") type = "property";
      else if (g.colonKey && code[after] === ":" && code[after + 1] !== ":" && code[after + 1] !== "=")
        type = "property";
      else if (last === ".") type = "property";
      else if (/^[A-Z]/.test(word) || g.types?.has(word)) type = "type";
      emit(type, word);
      i = j;
      continue;
    }
    emit("punctuation", c);
    i++;
  }
}

function tokenize(code: string, lang: Lang): Token[] {
  const { out, push } = createTokens();
  if (lang === "bash") lexBash(code, push);
  else if (lang === "json") lexJson(code, push);
  else if (lang === "text") push("plain", code);
  else lexCode(code, GRAMMARS[lang], push);
  return out;
}

/* ── Escaping ───────────────────────────────────────────── */

// Where a placeholder sits: inside which quotes, and for shell, inside a
// single-quoted body (with JSON strings of its own).
type Context = { quote: string | null; shell: boolean; json: boolean };

function contextAt(code: string, end: number, lang: Lang): Context {
  let quote: string | null = null;
  let shell = false;
  let json = false;
  const line = lang === "bash" || lang === "python" || lang === "ruby" ? "#" : lang === "js" || lang === "go" ? "//" : null;
  const skipLine = (i: number) => {
    const n = code.indexOf("\n", i);
    return n < 0 || n > end ? end : n;
  };
  for (let i = 0; i < end; i++) {
    const c = code[i];
    if (lang === "bash") {
      if (shell) {
        if (c === "'") shell = json = false;
        else if (c === "\\" && json) i++;
        else if (c === '"') json = !json;
      } else if (quote) {
        if (c === "\\") i++;
        else if (c === '"') quote = null;
      } else if (c === "#" && (i === 0 || isSpace(code[i - 1]))) i = skipLine(i);
      else if (c === "'") shell = true;
      else if (c === '"') quote = '"';
      continue;
    }
    if (quote) {
      if (c === "\\" && !(lang === "go" && quote === "`")) i++;
      else if (code.startsWith(quote, i)) {
        i += quote.length - 1;
        quote = null;
      }
      continue;
    }
    if (line && code.startsWith(line, i)) i = skipLine(i);
    else if ((lang === "js" || lang === "go") && code.startsWith("/*", i)) {
      const close = code.indexOf("*/", i + 2);
      i = close < 0 ? end : close + 1;
    } else if (lang === "python" && (code.startsWith('"""', i) || code.startsWith("'''", i))) {
      quote = code.slice(i, i + 3);
      i += 2;
    } else if (c === '"' || c === "'" || (c === "`" && lang !== "python" && lang !== "ruby")) quote = c;
  }
  return { quote, shell, json };
}

// The escaped text, plus which raw character each escaped character came from,
// so an edit made to the escaped text can be mapped back to the raw value.
type Escaped = { text: string; map: number[] };

function escapeValue(raw: string, ctx: Context, lang: Lang): Escaped {
  let text = "";
  const map: number[] = [];
  for (let k = 0; k < raw.length; k++) {
    const ch = raw[k];
    let s = ch;
    if (ch === "\n" || ch === "\r") s = ctx.quote || ctx.json ? (ch === "\n" ? "\\n" : "\\r") : " ";
    else if (lang === "bash") {
      if (ctx.shell) {
        if (ctx.json && (ch === '"' || ch === "\\")) s = "\\" + ch;
        else if (ch === "'") s = "'\\''";
      } else if (ctx.quote === '"' && '"\\$`'.includes(ch)) s = "\\" + ch;
    } else if (ctx.quote && !(lang === "go" && ctx.quote === "`")) {
      if (ch === "\\" || ch === ctx.quote[0]) s = "\\" + ch;
      else if (ctx.quote === "`" && ch === "$" && raw[k + 1] === "{") s = "\\$";
      else if (lang === "ruby" && ctx.quote === '"' && ch === "#" && raw[k + 1] === "{") s = "\\#";
    }
    text += s;
    for (let n = 0; n < s.length; n++) map.push(k);
  }
  return { text, map };
}

/** Applies an edit made to the escaped text back onto the raw value. */
function applyEdit(raw: string, esc: Escaped, next: string, caret: number) {
  const old = esc.text;
  const max = Math.min(old.length, next.length);
  let pre = 0;
  while (pre < max && pre < caret && old[pre] === next[pre]) pre++;
  let suf = 0;
  const sufMax = Math.min(old.length - pre, next.length - Math.max(pre, caret));
  while (suf < sufMax && old[old.length - 1 - suf] === next[next.length - 1 - suf]) suf++;
  const inserted = next.slice(pre, next.length - suf);
  const delEnd = old.length - suf;
  const start = pre < old.length ? esc.map[pre] : raw.length;
  const end = delEnd > pre ? esc.map[delEnd - 1] + 1 : start;
  return { raw: raw.slice(0, start) + inserted + raw.slice(end), caret: start + inserted.length };
}

/* ── Building a snippet ─────────────────────────────────── */

type TextSeg = { kind: "text"; tokens: Token[] };
type SlotSeg = { kind: "slot"; name: string; occ: number; tokens: Token[]; esc: Escaped; ctx: Context; lang: Lang };
type Seg = TextSeg | SlotSeg;
type Built = { code: string; lines: Seg[][] };

const PLACEHOLDER = /\{\{\s*([A-Za-z_][\w-]*)\s*\}\}/g;

const cleanCode = (code: string) => code.replace(/^\s*\n/, "").trimEnd();

function buildSnippet(snippet: PolyglotSnippet, slots: Record<string, PolyglotSlot>, values: PolyglotValues): Built {
  const lang = toLang(snippet.lang);
  const template = cleanCode(snippet.code);
  let code = "";
  let cursor = 0;
  const ranges: { name: string; occ: number; start: number; end: number; esc: Escaped; ctx: Context }[] = [];
  const seen: Record<string, number> = {};
  for (const m of template.matchAll(PLACEHOLDER)) {
    const name = m[1];
    if (!(name in slots)) continue;
    code += template.slice(cursor, m.index);
    const ctx = contextAt(template, m.index, lang);
    const esc = escapeValue(values[name] ?? "", ctx, lang);
    const occ = (seen[name] = (seen[name] ?? -1) + 1);
    ranges.push({ name, occ, start: code.length, end: code.length + esc.text.length, esc, ctx });
    code += esc.text;
    cursor = m.index + m[0].length;
  }
  code += template.slice(cursor);

  // Every character's token type, so slots and lines can cut tokens anywhere.
  const types: TokenType[] = [];
  for (const token of tokenize(code, lang)) for (let k = 0; k < token.text.length; k++) types.push(token.type);
  const runs = (from: number, to: number) => {
    const out: Token[] = [];
    for (let k = from; k < to; k++) {
      const last = out[out.length - 1];
      if (last && last.type === types[k]) last.text += code[k];
      else out.push({ type: types[k] ?? "plain", text: code[k] });
    }
    return out;
  };

  const lines: Seg[][] = [[]];
  const text = (from: number, to: number) => {
    let k = from;
    while (k < to) {
      const nl = code.indexOf("\n", k);
      const stop = nl < 0 || nl >= to ? to : nl;
      if (stop > k) lines[lines.length - 1].push({ kind: "text", tokens: runs(k, stop) });
      if (stop < to) lines.push([]);
      k = stop + 1;
    }
  };
  let p = 0;
  for (const r of ranges) {
    text(p, r.start);
    lines[lines.length - 1].push({ kind: "slot", name: r.name, occ: r.occ, tokens: runs(r.start, r.end), esc: r.esc, ctx: r.ctx, lang });
    p = r.end;
  }
  text(p, code.length);
  return { code, lines };
}

/* ── Remembered language (syncKey) ──────────────────────── */

const syncValues = new Map<string, string | null>();
const syncListeners = new Map<string, Set<() => void>>();
const STORAGE_PREFIX = "polyglot:";

function readSync(key: string) {
  if (!syncValues.has(key)) {
    let stored: string | null = null;
    try {
      stored = window.localStorage.getItem(STORAGE_PREFIX + key);
    } catch {}
    syncValues.set(key, stored);
  }
  return syncValues.get(key) ?? null;
}

function writeSync(key: string, label: string) {
  syncValues.set(key, label);
  try {
    window.localStorage.setItem(STORAGE_PREFIX + key, label);
  } catch {}
  syncListeners.get(key)?.forEach((listener) => listener());
}

function subscribeSync(key: string, listener: () => void) {
  const set = syncListeners.get(key) ?? new Set();
  syncListeners.set(key, set);
  set.add(listener);
  return () => {
    set.delete(listener);
  };
}

const noopSubscribe = () => () => {};

/* ── Run state ──────────────────────────────────────────── */

type Phase = "idle" | "waiting" | "streaming" | "done" | "stopped" | "cancelled" | "error";

type Flight = { runId: number; text: string; from: { x: number; y: number }; to: { x: number; y: number } };

type RunState = {
  runId: number;
  phase: Phase;
  chunks: string[];
  echo: string | null;
  landed: boolean;
  flight: Flight | null;
  startedAt: number;
  firstAt: number;
  endedAt: number;
  error: string | null;
};

function createRunStore() {
  let state: RunState = {
    runId: 0,
    phase: "idle",
    chunks: [],
    echo: null,
    landed: false,
    flight: null,
    startedAt: 0,
    firstAt: 0,
    endedAt: 0,
    error: null,
  };
  const listeners = new Set<() => void>();
  return {
    get: () => state,
    set(patch: Partial<RunState>) {
      state = { ...state, ...patch };
      listeners.forEach((listener) => listener());
    },
    subscribe(listener: () => void) {
      listeners.add(listener);
      return () => {
        listeners.delete(listener);
      };
    },
  };
}

type RunStore = ReturnType<typeof createRunStore>;

const isActive = (phase: Phase) => phase === "waiting" || phase === "streaming";

function useRun<T>(store: RunStore, select: (state: RunState) => T) {
  return React.useSyncExternalStore(
    store.subscribe,
    () => select(store.get()),
    () => select(store.get()),
  );
}

/** Splits a reply into token-sized pieces: words, with long ones cut into chunks. */
function toTokens(text: string) {
  const out: string[] = [];
  for (const [piece] of text.matchAll(/\s*\S+|\s+/g)) {
    const lead = /^\s*/.exec(piece)?.[0] ?? "";
    const word = piece.slice(lead.length);
    if (word.length <= 7) {
      out.push(piece);
      continue;
    }
    const parts = word.match(/.{1,4}/g) ?? [word];
    parts[0] = lead + parts[0];
    out.push(...parts);
  }
  return out;
}

function sleep(ms: number, signal: AbortSignal) {
  return new Promise<void>((resolve, reject) => {
    if (signal.aborted) return reject(signal.reason);
    const timer = window.setTimeout(resolve, ms);
    signal.addEventListener(
      "abort",
      () => {
        window.clearTimeout(timer);
        reject(signal.reason);
      },
      { once: true },
    );
  });
}

async function* simulate(text: string, speed: number, latency: number, signal: AbortSignal) {
  await sleep(latency, signal);
  const each = 1000 / Math.max(1, speed);
  for (const token of toTokens(text)) {
    yield token;
    // Real streams are bursty, and pause a little at the end of a line or clause.
    const pause = /[.,;:!?\n]\s*$/.test(token) ? 1.8 : 1;
    await sleep(each * pause * (0.45 + Math.random() * 1.1), signal);
  }
}

/* ── Polyglot ───────────────────────────────────────────── */

type Layer = { id: number; index: number };
type Editing = { name: string; occ: number } | null;
type Menu = { name: string; occ: number; x: number; y: number } | null;

type SlotApi = {
  slots: Record<string, PolyglotSlot>;
  values: PolyglotValues;
  editing: Editing;
  menu: Menu;
  setValue: (name: string, value: string) => void;
  startEdit: (name: string, occ: number) => void;
  endEdit: () => void;
  openMenu: (name: string, occ: number, anchor: HTMLElement) => void;
  closeMenu: () => void;
};

const SlotContext = React.createContext<SlotApi | null>(null);

export function Polyglot({
  slots,
  snippets,
  response,
  onRun,
  speed = 60,
  latency = 350,
  syncKey,
  defaultLabel,
  lineNumbers = false,
  layout = "stack",
  echo,
  responseLang = "text",
  statusText = "200 OK",
  className,
  onKeyDown,
  ...props
}: PolyglotProps) {
  const uid = React.useId();
  const hydrated = React.useSyncExternalStore(noopSubscribe, () => true, () => false);
  const prefersReduced = useReducedMotion() ?? false;
  const reduced = prefersReduced && hydrated;

  /* language */
  const subscribe = React.useCallback(
    (listener: () => void) => (syncKey ? subscribeSync(syncKey, listener) : () => {}),
    [syncKey],
  );
  const synced = React.useSyncExternalStore(
    subscribe,
    () => (syncKey ? readSync(syncKey) : null),
    () => null,
  );
  const [picked, setPicked] = React.useState<string | null>(null);
  const indexOf = (label: string | null | undefined) =>
    label == null ? -1 : snippets.findIndex((s) => s.label === label);
  const wanted = syncKey ? synced : picked;
  const active = Math.max(0, [wanted, defaultLabel].map(indexOf).find((i) => i >= 0) ?? 0);

  const select = (index: number) => {
    const label = snippets[index]?.label;
    if (label == null) return;
    if (syncKey) writeSync(syncKey, label);
    else setPicked(label);
  };

  /* values */
  const [values, setValues] = React.useState<PolyglotValues>(() =>
    Object.fromEntries(Object.entries(slots).map(([name, slot]) => [name, slot.value])),
  );
  const built = React.useMemo(
    () => snippets.map((snippet) => buildSnippet(snippet, slots, values)),
    [snippets, slots, values],
  );

  /* layers: the live code plus any still fading out */
  const [layers, setLayers] = React.useState<Layer[]>([{ id: 0, index: active }]);
  const [editing, setEditing] = React.useState<Editing>(null);
  const [menu, setMenu] = React.useState<Menu>(null);
  const live = layers[layers.length - 1];
  if (live.index !== active) {
    setLayers([...layers.slice(-2), { id: live.id + 1, index: active }]);
    setEditing(null);
    setMenu(null);
  }

  const rootRef = React.useRef<HTMLDivElement>(null);
  const boxRef = React.useRef<HTMLDivElement>(null);
  const scrollerRef = React.useRef<HTMLDivElement>(null);
  const contentRef = React.useRef<HTMLDivElement>(null);
  const shownId = React.useRef(live.id);
  const wasHydrated = React.useRef(hydrated);
  const lastHeight = React.useRef(0);
  const heightAnim = React.useRef<AnimationPlaybackControls | null>(null);
  const moving = React.useRef<AnimationPlaybackControls[]>([]);

  const drop = React.useCallback((id: number) => {
    setLayers((current) => (current.some((l) => l.id === id) ? current.filter((l) => l.id !== id) : current));
  }, []);

  // The box's resting height, kept for the next switch to animate from.
  React.useEffect(() => {
    const box = boxRef.current;
    if (!box) return;
    const observer = new ResizeObserver(() => {
      if (!heightAnim.current) lastHeight.current = box.offsetHeight;
    });
    observer.observe(box);
    return () => observer.disconnect();
  }, []);

  React.useLayoutEffect(() => {
    const prevId = shownId.current;
    shownId.current = live.id;
    if (prevId === live.id) return;
    const content = contentRef.current;
    const box = boxRef.current;
    const prev = content?.querySelector<HTMLElement>(`[data-layer="${prevId}"]`);
    const next = content?.querySelector<HTMLElement>(`[data-layer="${live.id}"]`);
    if (!content || !box || !next) return;

    // The language the visitor picked on an earlier visit arrives right after
    // hydration; show it as if it had been there all along.
    if (!wasHydrated.current) {
      if (prev) prev.style.visibility = "hidden";
      requestAnimationFrame(() => drop(prevId));
      return;
    }

    if (reduced) {
      animate(next, { opacity: [0, 1] }, { duration: POLY.crossfade, ease: "easeOut" });
      if (prev) animate(prev, { opacity: 0 }, { duration: POLY.crossfade, ease: "easeOut" }).then(() => drop(prevId));
      return;
    }

    // Pin the box at its old height before measuring anything: the new code
    // has already changed it, and a block centered in its parent moves with it.
    const fromHeight = heightAnim.current ? box.getBoundingClientRect().height : lastHeight.current;
    heightAnim.current?.stop();
    heightAnim.current = null;
    box.style.height = "";
    const toHeight = box.offsetHeight;
    lastHeight.current = toHeight;
    if (fromHeight) box.style.height = `${fromHeight}px`;

    // Where every value is on screen right now, mid-flight or not.
    const from = new Map<string, { el: HTMLElement; rect: DOMRect }>();
    prev?.querySelectorAll<HTMLElement>("[data-slot]").forEach((el) => {
      from.set(`${el.dataset.slot}:${el.dataset.occ}`, { el, rect: el.getBoundingClientRect() });
    });
    moving.current.forEach((controls) => controls.stop());
    moving.current = [];

    // Height: from wherever it was to the new line count.
    if (fromHeight && Math.abs(fromHeight - toHeight) > 0.5) {
      const controls = animate(box, { height: [fromHeight, toHeight] }, POLY.height);
      heightAnim.current = controls;
      controls.then(() => {
        if (heightAnim.current !== controls) return;
        heightAnim.current = null;
        box.style.height = "";
      });
    } else {
      box.style.height = "";
    }

    // The old code fades out with a slight blur.
    if (prev) {
      animate(prev, { opacity: 0, filter: `blur(${POLY.blur}px)` }, { duration: POLY.fadeOut, ease: "easeOut" }).then(
        () => drop(prevId),
      );
    }

    // Values glide from their old places, in reading order.
    const lineOf = (el: HTMLElement) => Number(el.closest<HTMLElement>("[data-line]")?.dataset.line ?? 0);
    const late = new Map<number, HTMLElement[]>();
    let order = 0;
    next.querySelectorAll<HTMLElement>("[data-slot]").forEach((el) => {
      const key = `${el.dataset.slot}:${el.dataset.occ}`;
      const old = from.get(key);
      if (!old) {
        const line = lineOf(el);
        late.set(line, [...(late.get(line) ?? []), el]);
        return;
      }
      old.el.style.visibility = "hidden";
      const to = el.getBoundingClientRect();
      const dx = old.rect.left - to.left;
      const dy = old.rect.top - to.top;
      if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
      const delay = POLY.glideDelay + order++ * POLY.glideStagger;
      // A plain 0 → 1 spring writes the transform, so nothing resets it to
      // the destination while the stagger delay runs.
      const place = (p: number) => {
        el.style.transform = p >= 1 ? "" : `translate(${dx * (1 - p)}px, ${dy * (1 - p)}px)`;
      };
      place(0);
      moving.current.push(animate(0, 1, { ...POLY.glide, delay, onUpdate: place, onComplete: () => place(1) }));
      // The tint brightens while it moves, picking up from the old glow if it was mid-flight.
      const glow = el.querySelector<HTMLElement>("[data-glow]");
      const oldGlow = old.el.querySelector<HTMLElement>("[data-glow]");
      const lit = oldGlow ? Number(getComputedStyle(oldGlow).opacity) || 0 : 0;
      if (glow) {
        glow.style.opacity = String(lit);
        moving.current.push(
          animate(glow, { opacity: [lit, 1, 1, 0] }, { duration: 0.7, times: [0, 0.15, 0.6, 1], delay, ease: "easeOut" }),
        );
      }
    });

    // The new code fades in line by line, just behind the values.
    next.querySelectorAll<HTMLElement>("[data-line]").forEach((line, i) => {
      const parts = [...line.querySelectorAll<HTMLElement>(":scope > [data-seg]"), ...(late.get(i) ?? [])];
      if (!parts.length) return;
      parts.forEach((part) => (part.style.opacity = "0"));
      animate(parts, { opacity: [0, 1] }, { duration: POLY.lineFade, ease: "easeOut", delay: POLY.lineDelay + i * POLY.lineStagger });
    });
  }, [live.id, reduced, drop]);

  React.useLayoutEffect(() => {
    wasHydrated.current = hydrated;
  });

  /* run */
  const [run] = React.useState(createRunStore);
  const runnable = response !== undefined || onRun !== undefined;
  const echoSlot = echo === false ? null : (echo ?? Object.keys(slots).find((name) => slots[name].editable) ?? null);
  const abortRef = React.useRef<AbortController | null>(null);
  const valuesRef = React.useRef(values);
  const latest = React.useRef({ response, onRun, speed, latency, echoSlot });
  React.useLayoutEffect(() => {
    valuesRef.current = values;
    latest.current = { response, onRun, speed, latency, echoSlot };
  });

  const stop = React.useCallback(
    (phase: "stopped" | "cancelled") => {
      if (!isActive(run.get().phase)) return;
      abortRef.current?.abort();
      run.set({ phase, endedAt: performance.now(), flight: null, landed: true });
    },
    [run],
  );

  const start = React.useCallback(() => {
    abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;
    const { signal } = controller;
    const vals = valuesRef.current;
    const opts = latest.current;
    run.set({
      runId: run.get().runId + 1,
      phase: "waiting",
      chunks: [],
      echo: opts.echoSlot ? (vals[opts.echoSlot] ?? null) : null,
      landed: false,
      flight: null,
      startedAt: performance.now(),
      firstAt: 0,
      endedAt: 0,
      error: null,
    });
    const resolve = <T,>(v: T | ((values: PolyglotValues) => T)) =>
      typeof v === "function" ? (v as (values: PolyglotValues) => T)(vals) : v;
    (async () => {
      try {
        const source = opts.onRun
          ? opts.onRun(vals, signal)
          : simulate(resolve(opts.response ?? ""), resolve(opts.speed), resolve(opts.latency), signal);
        for await (const chunk of source) {
          if (signal.aborted) return;
          const s = run.get();
          run.set({ phase: "streaming", chunks: [...s.chunks, chunk], firstAt: s.firstAt || performance.now() });
        }
        if (!signal.aborted) run.set({ phase: "done", endedAt: performance.now() });
      } catch (error) {
        if (signal.aborted) return;
        run.set({
          phase: "error",
          endedAt: performance.now(),
          error: error instanceof Error ? error.message : String(error),
        });
      }
    })();
  }, [run]);

  React.useEffect(() => () => abortRef.current?.abort(), []);

  const toggleRun = () => {
    if (isActive(run.get().phase)) stop("stopped");
    else start();
  };

  // Run: the echoed value pulses and a copy of it flies into the panel.
  const runId = useRun(run, (s) => s.runId);
  React.useLayoutEffect(() => {
    if (!runId) return;
    const state = run.get();
    if (state.landed || state.flight) return;
    const root = rootRef.current;
    const target = root?.querySelector<HTMLElement>("[data-echo-target]");
    const source = echoSlot
      ? contentRef.current?.querySelector<HTMLElement>(`[data-layer="${shownId.current}"] [data-slot="${echoSlot}"]`)
      : null;
    if (!root || !target || !source || reduced || state.echo == null) {
      run.set({ landed: true });
      return;
    }
    const glow = source.querySelector<HTMLElement>("[data-glow]");
    if (glow) animate(glow, { opacity: [0, 1, 0] }, { duration: POLY.pulse * 2, ease: "easeOut" });
    const box = root.getBoundingClientRect();
    const view = scrollerRef.current?.getBoundingClientRect();
    const s = source.querySelector<HTMLElement>("[data-text]")?.getBoundingClientRect() ?? source.getBoundingClientRect();
    const t = target.getBoundingClientRect();
    const left = view ? Math.min(Math.max(s.left, view.left), view.right - 24) : s.left;
    run.set({
      flight: {
        runId,
        text: state.echo,
        from: { x: left - box.left, y: s.top - box.top },
        to: { x: t.left - box.left, y: t.top - box.top },
      },
    });
  }, [runId, run, echoSlot, reduced]);

  /* slot actions */
  const setValue = React.useCallback(
    (name: string, value: string) => {
      if (valuesRef.current[name] === value) return;
      valuesRef.current = { ...valuesRef.current, [name]: value };
      setValues((current) => ({ ...current, [name]: value }));
      stop("cancelled");
    },
    [stop],
  );
  const slotApi = React.useMemo<SlotApi>(
    () => ({
      slots,
      values,
      editing,
      menu,
      setValue,
      startEdit: (name, occ) => setEditing({ name, occ }),
      endEdit: () => setEditing(null),
      openMenu: (name, occ, anchor) => {
        const root = rootRef.current;
        if (!root) return;
        const r = anchor.getBoundingClientRect();
        const b = root.getBoundingClientRect();
        setMenu({ name, occ, x: r.left - b.left, y: r.bottom - b.top + 6 });
      },
      closeMenu: () => setMenu(null),
    }),
    [slots, values, editing, menu, setValue],
  );

  // Close the menu when the code scrolls sideways under it.
  React.useEffect(() => {
    const scroller = scrollerRef.current;
    if (!menu || !scroller) return;
    const close = () => setMenu(null);
    scroller.addEventListener("scroll", close, { once: true });
    return () => scroller.removeEventListener("scroll", close);
  }, [menu]);

  const gutter = Math.max(...layers.map((layer) => built[layer.index]?.lines.length ?? 0));
  const split = layout === "split";
  const tabId = (i: number) => `${uid}-tab-${i}`;
  const panelId = `${uid}-panel`;

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(event);
    if (event.defaultPrevented || !runnable) return;
    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      toggleRun();
    }
  };

  const panel = runnable ? (
    split ? (
      <SplitPanel run={run} lang={toLang(responseLang)} />
    ) : (
      <StackPanel run={run} lang={toLang(responseLang)} reduced={reduced} />
    )
  ) : null;

  return (
    <div
      ref={rootRef}
      onKeyDown={handleKeyDown}
      className={cn(
        "@container relative w-full rounded-xl border border-border bg-background text-foreground shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.14)]",
        className,
      )}
      {...props}
    >
      <div className={cn(split && runnable && "grid @3xl:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]")}>
        <div className="flex min-w-0 flex-col">
          {/* header */}
          <div
            className={cn(
              "flex h-11 items-center gap-2 rounded-t-xl border-b border-border bg-muted/40 pr-1.5 pl-1.5",
              split && runnable && "@3xl:rounded-tr-none",
            )}
          >
            <div
              role="tablist"
              aria-label="Language"
              className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none]"
            >
              {snippets.map((snippet, i) => (
                <button
                  key={snippet.label}
                  type="button"
                  role="tab"
                  id={tabId(i)}
                  aria-selected={i === active}
                  aria-controls={panelId}
                  tabIndex={i === active ? 0 : -1}
                  onClick={() => select(i)}
                  onKeyDown={(event) => {
                    const last = snippets.length - 1;
                    const to =
                      event.key === "ArrowRight"
                        ? i === last ? 0 : i + 1
                        : event.key === "ArrowLeft"
                          ? i === 0 ? last : i - 1
                          : event.key === "Home"
                            ? 0
                            : event.key === "End"
                              ? last
                              : null;
                    if (to === null) return;
                    event.preventDefault();
                    select(to);
                    document.getElementById(tabId(to))?.focus();
                  }}
                  className={cn(
                    "relative h-7 shrink-0 cursor-pointer rounded-md px-2.5 text-[13px] font-medium whitespace-nowrap outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-foreground/30",
                    i === active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {i === active ? (
                    <motion.span
                      layoutId={`${uid}-pill`}
                      transition={reduced ? { duration: 0 } : POLY.pill}
                      className="absolute inset-0 rounded-md bg-background shadow-[0_1px_2px_rgb(0_0_0/0.08)] ring-1 ring-border"
                    />
                  ) : null}
                  <span className="relative z-10">{snippet.label}</span>
                </button>
              ))}
            </div>
            <CopyButton text={built[active]?.code ?? ""} />
          </div>

          {/* code */}
          <div ref={boxRef} className="relative flex overflow-hidden">
            {lineNumbers ? (
              // Zero height so only the code sets the box's height: the gutter
              // keeps the outgoing code's extra numbers while it fades, and they
              // must not hold the box open. Numbers past the new code fade out.
              <div
                aria-hidden
                className="h-0 shrink-0 py-3.5 pr-1 pl-4 text-right font-mono text-[13px] leading-6 text-muted-foreground/45 tabular-nums select-none"
              >
                {Array.from({ length: gutter }, (_, i) => (
                  <span
                    key={i}
                    className={cn(
                      "block min-w-[2ch] transition-opacity duration-150",
                      i >= (built[live.index]?.lines.length ?? 0) && "opacity-0",
                    )}
                  >
                    {i + 1}
                  </span>
                ))}
              </div>
            ) : null}
            <div
              ref={scrollerRef}
              id={panelId}
              role="tabpanel"
              aria-labelledby={tabId(active)}
              tabIndex={0}
              className="min-w-0 flex-1 overflow-x-auto overflow-y-hidden outline-none [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-foreground/20 focus-visible:ring-inset"
            >
              <div ref={contentRef} className="relative w-max min-w-full">
                <SlotContext.Provider value={slotApi}>
                  {layers.map((layer) => (
                    <CodeLayer
                      key={layer.id}
                      id={layer.id}
                      model={built[layer.index] ?? built[0]}
                      live={layer.id === live.id}
                      padded={lineNumbers}
                    />
                  ))}
                </SlotContext.Provider>
              </div>
            </div>
          </div>

          {runnable ? (
            <Footer
              run={run}
              onToggle={toggleRun}
              statusText={statusText}
              hint={Object.values(slots).some((slot) => slot.editable || slot.options)}
              hydrated={hydrated}
              className={cn(!split && "rounded-b-xl", split && "mt-auto")}
            />
          ) : null}
        </div>
        {panel}
      </div>

      {menu ? (
        <OptionMenu
          key={`${menu.name}:${menu.occ}`}
          menu={menu}
          options={slots[menu.name]?.options ?? []}
          value={values[menu.name] ?? ""}
          label={slots[menu.name]?.label ?? menu.name}
          reduced={reduced}
          onPick={(value) => setValue(menu.name, value)}
          onClose={(refocus) => {
            setMenu(null);
            if (refocus) {
              contentRef.current
                ?.querySelector<HTMLElement>(`[data-layer="${live.id}"] [data-slot="${menu.name}"][data-occ="${menu.occ}"] button`)
                ?.focus();
            }
          }}
        />
      ) : null}
      <Flyer run={run} />
      <Announcer run={run} />
    </div>
  );
}

/* ── Code ───────────────────────────────────────────────── */

const CodeLayer = React.memo(function CodeLayer({
  id,
  model,
  live,
  padded,
}: {
  id: number;
  model: Built;
  live: boolean;
  padded: boolean;
}) {
  return (
    <pre
      data-layer={id}
      aria-hidden={live ? undefined : true}
      inert={!live}
      className={cn(
        "m-0 w-max min-w-full bg-transparent py-3.5 pr-5 font-mono text-[13px] leading-6 [tab-size:4]",
        padded ? "pl-3" : "pl-4",
        !live && "pointer-events-none absolute top-0 left-0 select-none",
      )}
    >
      <code className="font-[inherit]">
        {model.lines.map((line, i) => {
          let t = 0;
          return (
            <React.Fragment key={i}>
              <span data-line={i}>
                {line.map((seg) =>
                  seg.kind === "text" ? (
                    <span key={`t${t++}`} data-seg="">
                      <Tokens tokens={seg.tokens} />
                    </span>
                  ) : (
                    <Slot key={`s:${seg.name}:${seg.occ}`} seg={seg} live={live} />
                  ),
                )}
              </span>
              {i < model.lines.length - 1 ? "\n" : null}
            </React.Fragment>
          );
        })}
      </code>
    </pre>
  );
});

function Tokens({ tokens }: { tokens: Token[] }) {
  return tokens.map((token, i) =>
    TOKEN_CLASS[token.type] ? (
      <span key={i} className={TOKEN_CLASS[token.type]}>
        {token.text}
      </span>
    ) : (
      <React.Fragment key={i}>{token.text}</React.Fragment>
    ),
  );
}

const TINT =
  "pointer-events-none absolute -inset-x-[3px] inset-y-[2px] rounded-[4px] ring-1 ring-inset";

function Slot({ seg, live }: { seg: SlotSeg; live: boolean }) {
  const api = React.useContext(SlotContext);
  const def = api?.slots[seg.name];
  const label = def?.label ?? seg.name;
  const interactive = live && !!api && !!def;
  const editing = interactive && api.editing?.name === seg.name && api.editing.occ === seg.occ;
  const open = interactive && api.menu?.name === seg.name && api.menu.occ === seg.occ;

  let body: React.ReactNode;
  if (editing) {
    body = <SlotInput seg={seg} label={label} />;
  } else if (interactive && def.options?.length) {
    body = (
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label={`${label}: ${api.values[seg.name] ?? ""}`}
        onClick={(event) => (open ? api.closeMenu() : api.openMenu(seg.name, seg.occ, event.currentTarget))}
        className="relative inline-flex cursor-pointer items-baseline rounded-[3px] outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
      >
        <span data-text="">
          <Tokens tokens={seg.tokens} />
        </span>
        <svg
          aria-hidden
          viewBox="0 0 10 10"
          className={cn(
            "ml-[3px] size-2.5 self-center text-muted-foreground transition-transform duration-200",
            open && "rotate-180",
          )}
        >
          <path d="M2 3.75 5 6.75l3-3" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>
    );
  } else if (interactive && def.editable) {
    body = (
      <span
        role="button"
        tabIndex={0}
        aria-label={`Edit ${label}: ${api.values[seg.name] ?? ""}`}
        data-text=""
        onClick={(event) => {
          if (!window.getSelection()?.isCollapsed) return;
          const caret = caretFromPoint(event.currentTarget, event.clientX, event.clientY);
          pendingCaret.set(`${seg.name}:${seg.occ}`, caret ?? seg.esc.text.length);
          api.startEdit(seg.name, seg.occ);
        }}
        onKeyDown={(event) => {
          if (event.key !== "Enter" && event.key !== " " && event.key !== "F2") return;
          if (event.metaKey || event.ctrlKey) return;
          event.preventDefault();
          pendingCaret.set(`${seg.name}:${seg.occ}`, seg.esc.text.length);
          api.startEdit(seg.name, seg.occ);
        }}
        className="inline-block min-w-[1ch] cursor-text rounded-[3px] underline decoration-sky-500/40 decoration-dotted underline-offset-[5px] outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
      >
        <Tokens tokens={seg.tokens} />
      </span>
    );
  } else if (def?.secret) {
    body = <Secret seg={seg} label={label} interactive={interactive} />;
  } else {
    body = (
      <span data-text="">
        <Tokens tokens={seg.tokens} />
      </span>
    );
  }

  return (
    <span data-slot={seg.name} data-occ={seg.occ} className="group/slot relative inline-block">
      <span
        aria-hidden
        className={cn(
          TINT,
          "bg-sky-500/[0.07] ring-sky-500/15 transition-opacity duration-200 dark:bg-sky-400/[0.08] dark:ring-sky-400/15",
          interactive && (def?.editable || def?.options) && "group-hover/slot:bg-sky-500/[0.12] dark:group-hover/slot:bg-sky-400/[0.14]",
          (editing || open) && "bg-sky-500/[0.12] ring-sky-500/40 dark:bg-sky-400/[0.14] dark:ring-sky-400/40",
        )}
      />
      <span
        aria-hidden
        data-glow=""
        className={cn(TINT, "bg-sky-500/20 opacity-0 ring-sky-500/55 dark:bg-sky-400/20 dark:ring-sky-400/55")}
      />
      <span className="relative">{body}</span>
    </span>
  );
}

function caretFromPoint(container: HTMLElement, x: number, y: number) {
  let node: Node | null = null;
  let offset = 0;
  if (typeof document.caretPositionFromPoint === "function") {
    const position = document.caretPositionFromPoint(x, y);
    if (position) {
      node = position.offsetNode;
      offset = position.offset;
    }
  } else if (typeof document.caretRangeFromPoint === "function") {
    const range = document.caretRangeFromPoint(x, y);
    if (range) {
      node = range.startContainer;
      offset = range.startOffset;
    }
  }
  if (!node || !container.contains(node)) return null;
  const range = document.createRange();
  range.selectNodeContents(container);
  range.setEnd(node, offset);
  return range.toString().length;
}

// Where the caret goes when a value turns into an input, keyed by slot.
const pendingCaret = new Map<string, number>();

function SlotInput({ seg, label }: { seg: SlotSeg; label: string }) {
  const api = React.useContext(SlotContext)!;
  const ref = React.useRef<HTMLInputElement>(null);
  const raw = api.values[seg.name] ?? "";
  const original = React.useRef(raw);
  const caret = React.useRef<number | null>(null);
  const key = `${seg.name}:${seg.occ}`;
  // Read once: Strict Mode runs the mount effect twice.
  const [startAt] = React.useState(() => pendingCaret.get(key) ?? seg.esc.text.length);

  React.useLayoutEffect(() => {
    const input = ref.current;
    if (!input) return;
    pendingCaret.delete(key);
    input.focus({ preventScroll: true });
    input.setSelectionRange(startAt, startAt);
  }, [key, startAt]);

  React.useLayoutEffect(() => {
    if (caret.current === null || !ref.current) return;
    ref.current.setSelectionRange(caret.current, caret.current);
    caret.current = null;
  }, [seg.esc.text]);

  const tone = TOKEN_CLASS[seg.tokens[0]?.type ?? "plain"];

  return (
    <span className="inline-grid align-baseline">
      <span aria-hidden className="invisible col-start-1 row-start-1 pr-[2px] whitespace-pre">
        {seg.esc.text || " "}
      </span>
      <input
        ref={ref}
        value={seg.esc.text}
        size={1}
        spellCheck={false}
        autoComplete="off"
        aria-label={label}
        onChange={(event) => {
          const input = event.currentTarget;
          const edit = applyEdit(raw, seg.esc, input.value, input.selectionStart ?? input.value.length);
          caret.current = escapeValue(edit.raw.slice(0, edit.caret), seg.ctx, seg.lang).text.length;
          api.setValue(seg.name, edit.raw);
        }}
        onKeyDown={(event) => {
          if (event.metaKey || event.ctrlKey) return;
          if (event.key === "Enter") {
            event.preventDefault();
            event.currentTarget.blur();
          } else if (event.key === "Escape") {
            event.preventDefault();
            api.setValue(seg.name, original.current);
            event.currentTarget.blur();
          }
        }}
        onBlur={() => api.endEdit()}
        className={cn(
          "col-start-1 row-start-1 m-0 w-full min-w-0 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] outline-none",
          tone,
        )}
      />
    </span>
  );
}

function maskOf(text: string) {
  const prefix = /^(?:[a-z]+_(?:live|test)_|[a-z]{2,8}[-_])/i.exec(text)?.[0] ?? text.slice(0, 3);
  return prefix + "•".repeat(Math.max(4, text.length - prefix.length));
}

function Secret({ seg, label, interactive }: { seg: SlotSeg; label: string; interactive: boolean }) {
  const [hover, setHover] = React.useState(false);
  const [focus, setFocus] = React.useState(false);
  const [pinned, setPinned] = React.useState(false);
  const pointer = React.useRef("mouse");
  const shown = interactive && (hover || focus || pinned);
  const tone = TOKEN_CLASS[seg.tokens[0]?.type ?? "plain"];
  return (
    <span
      data-text=""
      tabIndex={interactive ? 0 : undefined}
      aria-label={interactive ? `${label}, hidden. Focus to show it.` : undefined}
      onPointerDown={(event) => (pointer.current = event.pointerType)}
      onPointerEnter={(event) => event.pointerType === "mouse" && setHover(true)}
      onPointerLeave={() => setHover(false)}
      onFocus={() => setFocus(true)}
      onBlur={() => {
        setFocus(false);
        setPinned(false);
      }}
      onClick={() => pointer.current !== "mouse" && setPinned((p) => !p)}
      className="inline-grid cursor-default rounded-[3px] align-baseline outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
    >
      <span
        aria-hidden={!shown}
        className={cn("col-start-1 row-start-1 transition-opacity duration-200", shown ? "opacity-100" : "opacity-0")}
      >
        <Tokens tokens={seg.tokens} />
      </span>
      <span
        aria-hidden
        className={cn(
          "col-start-1 row-start-1 transition-opacity duration-200 select-none",
          tone,
          shown ? "opacity-0" : "opacity-100",
        )}
      >
        {maskOf(seg.esc.text)}
      </span>
    </span>
  );
}

function OptionMenu({
  menu,
  options,
  value,
  label,
  reduced,
  onPick,
  onClose,
}: {
  menu: NonNullable<Menu>;
  options: string[];
  value: string;
  label: string;
  reduced: boolean;
  onPick: (value: string) => void;
  onClose: (refocus: boolean) => void;
}) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [focused, setFocused] = React.useState(() => Math.max(0, options.indexOf(value)));

  React.useLayoutEffect(() => {
    ref.current?.querySelectorAll<HTMLElement>("[role=option]")[focused]?.focus({ preventScroll: true });
  }, [focused]);

  React.useEffect(() => {
    // The anchor toggles the menu itself, so a press on it is left alone.
    const away = (event: PointerEvent) => {
      const target = event.target as Element | null;
      if (ref.current?.contains(target) || target?.closest?.(`[data-slot="${menu.name}"]`)) return;
      onClose(false);
    };
    document.addEventListener("pointerdown", away, true);
    return () => document.removeEventListener("pointerdown", away, true);
  }, [menu.name, onClose]);

  return (
    <motion.div
      ref={ref}
      role="listbox"
      aria-label={label}
      initial={reduced ? { opacity: 0 } : { opacity: 0, y: -4, scale: 0.97 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
      style={{ left: menu.x, top: menu.y, transformOrigin: "top left" }}
      onKeyDown={(event) => {
        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
          event.preventDefault();
          const step = event.key === "ArrowDown" ? 1 : -1;
          setFocused((i) => (i + step + options.length) % options.length);
        } else if (event.key === "Home" || event.key === "End") {
          event.preventDefault();
          setFocused(event.key === "Home" ? 0 : options.length - 1);
        } else if (event.key === "Escape") {
          event.preventDefault();
          onClose(true);
        } else if (event.key === "Tab") {
          onClose(false);
        }
      }}
      className="absolute z-20 min-w-40 rounded-lg border border-border bg-background p-1 shadow-[0_12px_32px_-12px_rgb(0_0_0/0.25)]"
    >
      {options.map((option, i) => (
        <button
          key={option}
          type="button"
          role="option"
          aria-selected={option === value}
          tabIndex={i === focused ? 0 : -1}
          onClick={() => {
            onPick(option);
            onClose(true);
          }}
          onPointerMove={() => setFocused(i)}
          className="flex w-full cursor-pointer items-center justify-between gap-4 rounded-md px-2 py-1.5 text-left font-mono text-[12.5px] outline-none focus:bg-muted"
        >
          {option}
          <svg aria-hidden viewBox="0 0 12 12" className={cn("size-3", option === value ? "opacity-100" : "opacity-0")}>
            <path d="m2.5 6.25 2.25 2.25 4.75-5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      ))}
    </motion.div>
  );
}

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = React.useState(false);
  const timer = React.useRef(0);
  React.useEffect(() => () => window.clearTimeout(timer.current), []);
  return (
    <button
      type="button"
      onClick={() => {
        navigator.clipboard?.writeText(text).catch(() => {});
        setCopied(true);
        window.clearTimeout(timer.current);
        timer.current = window.setTimeout(() => setCopied(false), POLY.copied);
      }}
      aria-label={copied ? "Copied" : "Copy code"}
      className="inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-[12px] font-medium text-muted-foreground outline-none transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/30"
    >
      <span className="relative size-3.5">
        <svg
          aria-hidden
          viewBox="0 0 16 16"
          className={cn("absolute inset-0 transition-all duration-200", copied ? "scale-50 opacity-0" : "scale-100 opacity-100")}
        >
          <rect x="5.25" y="5.25" width="8" height="8" rx="1.75" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <path d="M10.75 3.25v-.5c0-.83-.67-1.5-1.5-1.5h-5.5c-.83 0-1.5.67-1.5 1.5v5.5c0 .83.67 1.5 1.5 1.5h.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
        <svg
          aria-hidden
          viewBox="0 0 16 16"
          className={cn(
            "absolute inset-0 text-emerald-600 transition-all duration-200 dark:text-emerald-400",
            copied ? "scale-100 opacity-100" : "scale-50 opacity-0",
          )}
        >
          <path d="m3.5 8.5 3 3 6-7" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="hidden @sm:inline">{copied ? "Copied" : "Copy"}</span>
    </button>
  );
}

/* ── Run footer ─────────────────────────────────────────── */

const isMac = () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);

function Footer({
  run,
  onToggle,
  statusText,
  hint,
  hydrated,
  className,
}: {
  run: RunStore;
  onToggle: () => void;
  statusText: string;
  hint: boolean;
  hydrated: boolean;
  className?: string;
}) {
  const phase = useRun(run, (s) => s.phase);
  const runId = useRun(run, (s) => s.runId);
  const mac = React.useSyncExternalStore(noopSubscribe, isMac, () => true);
  const active = isActive(phase);
  const label = active ? "Stop" : runId ? "Run again" : "Run";

  return (
    <div className={cn("flex min-h-12 items-center gap-3 border-t border-border px-2 py-2", className)}>
      <button
        type="button"
        onClick={onToggle}
        aria-keyshortcuts="Meta+Enter Control+Enter"
        className={cn(
          "inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-md pr-1.5 pl-2.5 text-[13px] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-foreground/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          active ? "bg-foreground/10 text-foreground hover:bg-foreground/15" : "bg-foreground text-background hover:bg-foreground/90",
        )}
      >
        <span className="relative size-3">
          <svg aria-hidden viewBox="0 0 12 12" className={cn("absolute inset-0 transition-all duration-200", active ? "scale-50 opacity-0" : "opacity-100")}>
            {runId && !active ? (
              <path d="M10 6a4 4 0 1 1-1.17-2.83M10 1.75v2.5H7.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            ) : (
              <path d="M3.5 2.2v7.6a.5.5 0 0 0 .76.43l6.1-3.8a.5.5 0 0 0 0-.86l-6.1-3.8a.5.5 0 0 0-.76.43Z" fill="currentColor" />
            )}
          </svg>
          <svg aria-hidden viewBox="0 0 12 12" className={cn("absolute inset-0 transition-all duration-200", active ? "opacity-100" : "scale-50 opacity-0")}>
            <rect x="2.5" y="2.5" width="7" height="7" rx="1.25" fill="currentColor" />
          </svg>
        </span>
        <span className="inline-grid">
          {["Run", "Stop", "Run again"].map((text) => (
            <span
              key={text}
              aria-hidden={text !== label}
              className={cn(
                "col-start-1 row-start-1 text-left transition-all duration-200",
                text === label ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0",
              )}
            >
              {text}
            </span>
          ))}
        </span>
        <kbd
          className={cn(
            "rounded px-1 font-sans text-[11px] leading-5 font-medium [@media(pointer:coarse)]:hidden",
            active ? "bg-foreground/10 text-muted-foreground" : "bg-background/15 text-background/70",
          )}
        >
          {hydrated && !mac ? "Ctrl ↵" : "⌘↵"}
        </kbd>
      </button>
      <Status run={run} statusText={statusText} hint={hint} />
    </div>
  );
}

function Status({ run, statusText, hint }: { run: RunStore; statusText: string; hint: boolean }) {
  const phase = useRun(run, (s) => s.phase);
  const count = useRun(run, (s) => s.chunks.length);
  const startedAt = useRun(run, (s) => s.startedAt);
  const firstAt = useRun(run, (s) => s.firstAt);
  const endedAt = useRun(run, (s) => s.endedAt);
  const error = useRun(run, (s) => s.error);
  const seconds = `${((endedAt - startedAt) / 1000).toFixed(1)} s`;
  const tokens = `${count} ${count === 1 ? "token" : "tokens"}`;

  let dot = "bg-muted-foreground/40";
  let text: React.ReactNode = hint ? "Highlighted values are editable" : "";
  if (phase === "waiting") {
    dot = "bg-amber-500 animate-pulse";
    text = (
      <>
        waiting <Ticker since={startedAt} />
      </>
    );
  } else if (phase === "streaming") {
    dot = "bg-emerald-500 animate-pulse";
    text = `streaming · ${tokens}`;
  } else if (phase === "done") {
    dot = "bg-emerald-500";
    text = `${statusText} · ${seconds} · ${tokens}`;
  } else if (phase === "stopped") {
    text = `Stopped · ${seconds} · ${tokens}`;
  } else if (phase === "cancelled") {
    text = "Cancelled · a value changed";
  } else if (phase === "error") {
    dot = "bg-rose-500";
    text = `Error · ${error}`;
  }

  return (
    <span className="flex min-w-0 items-center gap-2 font-mono text-[12px] text-muted-foreground tabular-nums">
      {text ? <span aria-hidden className={cn("size-1.5 shrink-0 rounded-full", dot)} /> : null}
      <motion.span
        key={phase}
        initial={phase === "idle" ? false : { opacity: 0, y: 3 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.18, ease: "easeOut" }}
        className="truncate"
        title={phase === "streaming" && firstAt ? `first token after ${Math.round(firstAt - startedAt)} ms` : undefined}
      >
        {text}
      </motion.span>
    </span>
  );
}

/** Counts milliseconds up from `since` without re-rendering. */
function Ticker({ since }: { since: number }) {
  const ref = React.useRef<HTMLSpanElement>(null);
  React.useEffect(() => {
    let frame = 0;
    const tick = () => {
      if (ref.current) ref.current.textContent = `${Math.max(0, Math.round(performance.now() - since))} ms`;
      frame = requestAnimationFrame(tick);
    };
    tick();
    return () => cancelAnimationFrame(frame);
  }, [since]);
  return <span ref={ref}>0 ms</span>;
}

/* ── Response ───────────────────────────────────────────── */

function Output({ run, lang }: { run: RunStore; lang: Lang }) {
  const chunks = useRun(run, (s) => s.chunks);
  const phase = useRun(run, (s) => s.phase);
  const echo = useRun(run, (s) => s.echo);
  const landed = useRun(run, (s) => s.landed);
  const runId = useRun(run, (s) => s.runId);

  // Highlight what has arrived, cut at chunk edges so each chunk keeps its own
  // span and fades in once, even when its color changes as more arrives.
  const pieces = React.useMemo(() => {
    const text = chunks.join("");
    const tokens = tokenize(text, lang);
    const out: { key: string; type: TokenType; text: string }[] = [];
    let chunk = 0;
    let chunkEnd = chunks[0]?.length ?? 0;
    let pos = 0;
    let part = 0;
    for (const token of tokens) {
      let k = 0;
      while (k < token.text.length) {
        while (pos >= chunkEnd && chunk < chunks.length - 1) {
          chunk++;
          chunkEnd += chunks[chunk].length;
          part = 0;
        }
        const take = Math.min(token.text.length - k, chunkEnd - pos);
        if (take <= 0) break;
        out.push({ key: `${chunk}:${part++}`, type: token.type, text: token.text.slice(k, k + take) });
        k += take;
        pos += take;
      }
    }
    return out;
  }, [chunks, lang]);

  const active = isActive(phase);
  return (
    <div key={runId} className="font-mono text-[13px] leading-6 break-words whitespace-pre-wrap">
      {echo != null ? (
        <div className="mb-2 flex gap-2 text-muted-foreground">
          <span aria-hidden className="select-none">
            ›
          </span>
          <span
            data-echo-target=""
            className={cn("min-w-0 transition-opacity duration-150", landed ? "opacity-100" : "opacity-0")}
          >
            {echo}
          </span>
        </div>
      ) : null}
      <div aria-live="off">
        {(landed ? pieces : []).map((piece) => (
          <span
            key={piece.key}
            className={cn("transition-opacity duration-300 ease-out starting:opacity-0", TOKEN_CLASS[piece.type])}
          >
            {piece.text}
          </span>
        ))}
        {active ? (
          <span
            aria-hidden
            className={cn(
              "ml-px inline-block h-[1.05em] w-[0.5ch] translate-y-[0.18em] rounded-[1px] bg-foreground/70",
              phase === "waiting" && "animate-pulse",
            )}
          />
        ) : null}
      </div>
      {phase === "stopped" || phase === "cancelled" ? (
        <div className="mt-2 text-[12px] text-muted-foreground">{phase === "stopped" ? "— stopped" : "— cancelled"}</div>
      ) : null}
      {phase === "error" ? <div className="mt-2 text-[12px] text-rose-600 dark:text-rose-400">— request failed</div> : null}
    </div>
  );
}

/** Keeps a scroll box pinned to its bottom while the reply grows, unless the reader scrolled up. */
function useStickToBottom(run: RunStore, ref: React.RefObject<HTMLDivElement | null>, mounted: boolean) {
  const count = useRun(run, (s) => s.chunks.length);
  const runId = useRun(run, (s) => s.runId);
  const pinned = React.useRef(true);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 32;
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, [ref, mounted]);
  React.useLayoutEffect(() => {
    pinned.current = true;
  }, [runId]);
  React.useLayoutEffect(() => {
    const el = ref.current;
    if (el && pinned.current) el.scrollTop = el.scrollHeight;
  }, [count, ref]);
}

function StackPanel({ run, lang, reduced }: { run: RunStore; lang: Lang; reduced: boolean }) {
  const runId = useRun(run, (s) => s.runId);
  const phase = useRun(run, (s) => s.phase);
  const outerRef = React.useRef<HTMLDivElement>(null);
  const scrollRef = React.useRef<HTMLDivElement>(null);
  const innerRef = React.useRef<HTMLDivElement>(null);
  const held = React.useRef(0);
  const open = runId > 0;
  useStickToBottom(run, scrollRef, open);

  // A new run keeps the panel at its last height until the reply outgrows it,
  // so Run again doesn't collapse and regrow it.
  React.useLayoutEffect(() => {
    const inner = innerRef.current;
    if (!inner) return;
    if (isActive(phase)) {
      if (!held.current) held.current = inner.offsetHeight;
      inner.style.minHeight = `${held.current}px`;
    } else {
      held.current = 0;
      inner.style.minHeight = "";
    }
  }, [phase, runId]);

  // The panel's height follows its content on a spring: opening, growing, settling.
  React.useEffect(() => {
    const outer = outerRef.current;
    const scroll = scrollRef.current;
    if (!outer || !scroll) return;
    let controls: AnimationPlaybackControls | null = null;
    const observer = new ResizeObserver(() => {
      const to = scroll.offsetHeight;
      controls?.stop();
      if (reduced) outer.style.height = `${to}px`;
      else controls = animate(outer, { height: to }, POLY.panel);
    });
    observer.observe(scroll);
    return () => {
      observer.disconnect();
      controls?.stop();
    };
  }, [reduced, open]);

  if (!open) return null;
  return (
    <div ref={outerRef} style={{ height: 0 }} className="overflow-hidden rounded-b-xl">
      <div ref={scrollRef} className="max-h-80 overflow-y-auto border-t border-border bg-muted/30 [scrollbar-width:thin]">
        <div ref={innerRef} aria-busy={isActive(phase)} className="px-4 py-3.5">
          <Output run={run} lang={lang} />
        </div>
      </div>
    </div>
  );
}

function SplitPanel({ run, lang }: { run: RunStore; lang: Lang }) {
  const runId = useRun(run, (s) => s.runId);
  const phase = useRun(run, (s) => s.phase);
  const scrollRef = React.useRef<HTMLDivElement>(null);
  useStickToBottom(run, scrollRef, true);
  return (
    <div className="flex min-h-40 min-w-0 flex-col rounded-b-xl border-t border-border bg-muted/30 @3xl:rounded-tr-xl @3xl:rounded-bl-none @3xl:border-t-0 @3xl:border-l">
      <div className="flex h-11 shrink-0 items-center border-b border-border px-4 text-[12px] font-medium text-muted-foreground">
        Response
      </div>
      <div className="relative min-h-0 flex-1">
        <div
          ref={scrollRef}
          aria-busy={isActive(phase)}
          className="max-h-80 overflow-y-auto px-4 py-3.5 [scrollbar-width:thin] @3xl:absolute @3xl:inset-0 @3xl:max-h-none"
        >
          {runId ? (
            <Output run={run} lang={lang} />
          ) : (
            <p className="flex h-full min-h-20 items-center justify-center text-center text-[13px] text-muted-foreground/70">
              Press Run to send the request
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

/** The copy of the echoed value that flies from the code into the panel. */
function Flyer({ run }: { run: RunStore }) {
  const flight = useRun(run, (s) => s.flight);
  const ref = React.useRef<HTMLSpanElement>(null);

  React.useLayoutEffect(() => {
    const el = ref.current;
    if (!el || !flight) return;
    const dx = flight.to.x - flight.from.x;
    const dy = flight.to.y - flight.from.y;
    const current = () => run.get().runId === flight.runId;
    let landed = false;
    let fade: AnimationPlaybackControls | null = null;
    // It counts as landed on arrival, not when the spring's long tail settles,
    // so the echo line takes over right as the copy gets there.
    const controls = animate(0, 1, {
      ...POLY.flight,
      delay: POLY.flightDelay,
      onUpdate: (p) => {
        el.style.transform = `translate(${dx * p}px, ${dy * p}px)`;
        el.style.scale = String(1 + 0.05 * Math.sin(Math.PI * Math.min(p, 1))); // lifts off, settles on landing
        if (landed || p < 0.97 || !current()) return;
        landed = true;
        run.set({ landed: true });
        const out = animate(el, { opacity: [1, 0] }, { duration: 0.2, ease: "easeOut" });
        out.then(() => current() && run.set({ flight: null }));
        fade = out;
      },
    });
    return () => {
      controls.stop();
      fade?.stop();
    };
  }, [flight, run]);

  if (!flight) return null;
  return (
    <span
      ref={ref}
      aria-hidden
      style={{ left: flight.from.x, top: flight.from.y }}
      className="pointer-events-none absolute z-10 -mx-[3px] max-w-[min(32rem,80%)] truncate rounded-[4px] bg-sky-500/15 px-[3px] font-mono text-[13px] leading-6 whitespace-pre text-foreground shadow-[0_6px_16px_-8px_rgb(14_165_233/0.5)] ring-1 ring-sky-500/45 ring-inset dark:bg-sky-400/15 dark:ring-sky-400/45"
    >
      {flight.text}
    </span>
  );
}

/** Reads the reply out once, when it's complete, instead of token by token. */
function Announcer({ run }: { run: RunStore }) {
  const phase = useRun(run, (s) => s.phase);
  const chunks = useRun(run, (s) => s.chunks);
  const error = useRun(run, (s) => s.error);
  let message = "";
  if (phase === "done") message = `Response: ${chunks.join("")}`;
  else if (phase === "error") message = `Request failed: ${error}`;
  return (
    <div role="status" className="sr-only">
      {message}
    </div>
  );
}