setName(e.target.value)} />

setTemplate(e.target.value)}
                  onKeyDown={onKey} spellCheck={false}
                  placeholder="Write a short joke about a _animal_." />
      </div>

<div className="token-row">
        <span className="row-label">In use</span>
        {uniq.length === 0 && <span style={{ color: "var(--muted)", fontSize: 12.5 }}>none yet — insert one below</span>}
        {uniq.map((t) => (
          <span key={t.category} className={"chip " + (t.known ? "detected" : "unknown")}>
            {t.raw}{!t.known && " ⚠"}
          </span>
        ))}
      </div>

<div className="token-row" style={{ paddingTop: 0 }}>
        <span className="row-label">Insert</span>
        {shownCats.map((c) => (
          <button key={c} className="chip" onClick={() => insert(c)}>_{c}_</button>
        ))}
        {allCats.length > 9 && (
          <button className="palette-toggle" onClick={() => setShowAll((s) => !s)}>
            {showAll ? "show less" : "+" + (allCats.length - 9) + " more"}
          </button>
        )}
      </div>

<div className="composer-foot">
        <div className="batch" title="Run the prompt this many times">
          <span className="blab">Runs</span>
          <button className="bbtn" disabled={batch <= 1} onClick={() => setBatch((b) => Math.max(1, b - 1))}>–</button>
          <span className="bval">{batch}</span>
          <button className="bbtn" disabled={batch >= 8} onClick={() => setBatch((b) => Math.min(8, b + 1))}>+</button>
        </div>
        <div className="foot-spacer" />
        <button className="run-btn" onClick={onRun} disabled={running || !template.trim()}>
          <Icon d={ICONS.bolt} size={16} fill="currentColor" />
          {batch > 1 ? `Generate ${batch}` : "Generate"}
          <kbd>⌘↵</kbd>
        </button>
      </div>
    </section>
  );
}

/* ==================================================================== */
/*  Result card                                                         */
/* ==================================================================== */
function ResultCard({ item, modelLabel, onReroll }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(item.response || "").then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 1400);
    });
  };
  const thinking = item.status === "thinking";
  const errored = item.status === "error";
  return (
    <article className="card">
      <div className="card-prompt">
        {item.segments && item.segments.length
          ? item.segments.map((s, i) =>
              s.type === "fill"
                ? <span key={i} className="fill" title={"_" + s.category + "_"}>{s.value}</span>
                : <span key={i}>{s.text}</span>)
          : <span dangerouslySetInnerHTML={{ __html: highlightTemplate(item.template) }} />}
      </div>
      <div className="card-body">
        {thinking
          ? <div className="card-resp thinking"><span className="dots"><i /><i /><i /></span></div>
          : <div className={"card-resp" + (errored ? " errored" : "")}>{item.response}</div>}
      </div>
      <div className="card-foot">
        <span className="meta"><b>{modelLabel}</b>{item.ms ? ` · ${(item.ms / 1000).toFixed(1)}s` : ""}{item.cost != null ? ` · ${fmtUsd(item.cost)}` : ""}</span>
        <span className="fspacer" />
        <button className="mini-btn" onClick={onReroll} disabled={thinking} title="New random words & regenerate">
          <Icon d={ICONS.reroll} size={14} />Re-roll
        </button>
        <button className={"mini-btn" + (copied ? " copied" : "")} onClick={copy} disabled={thinking || errored}>
          <Icon d={copied ? ICONS.check : ICONS.copy} size={14} />{copied ? "Copied" : "Copy"}
        </button>
      </div>
    </article>
  );
}

/* ==================================================================== */
/*  App                                                                 */
/* ==================================================================== */
function App() {
  const [prompts, setPrompts] = useState(() => LS.get("pg.prompts", PG.SEED_PROMPTS));
  const [model, setModel] = useState(() => LS.get("pg.model", null));
  const [activeId, setActiveId] = useState(() => LS.get("pg.activeId", null));
  const last = LS.get("pg.composer", { name: "", template: "" });
  const [name, setName] = useState(last.name);
  const [template, setTemplate] = useState(last.template);
  const [batch, setBatch] = useState(1);
  const [runs, setRuns] = useState(() => LS.get("pg.runs", []));
  const [saved, setSaved] = useState(false);
  const [running, setRunning] = useState(false);
  const [drawer, setDrawer] = useState(false);

// models
  const [models, setModels] = useState([]);
  const [modelsLoading, setModelsLoading] = useState(true);
  const [modelsErr, setModelsErr] = useState(null);

// api key + usage
  const [apiKey, setApiKey] = useState(() => LS.get("pg.orKey", ""));
  const [keyOpen, setKeyOpen] = useState(false);
  const [usage, setUsage] = useState(null);
  const [usageErr, setUsageErr] = useState(null);
  const [usageLoading, setUsageLoading] = useState(false);

useEffect(() => LS.set("pg.prompts", prompts), [prompts]);
  useEffect(() => { if (model) LS.set("pg.model", model); }, [model]);
  useEffect(() => LS.set("pg.activeId", activeId), [activeId]);
  useEffect(() => LS.set("pg.composer", { name, template }), [name, template]);
  useEffect(() => LS.set("pg.runs", runs.slice(0, 20)), [runs]);

// load the live model catalog
  useEffect(() => {
    let alive = true;
    PG.fetchModels().then((ms) => {
      if (!alive) return;
      setModels(ms); setModelsErr(null);
      setModel((cur) => {
        if (cur && ms.some((m) => m.id === cur)) return cur;
        const pref = ms.find((m) => m.id === "anthropic/claude-sonnet-4") || ms.find((m) => /claude/.test(m.id)) || ms[0];
        return pref ? pref.id : cur;
      });
    }).catch((e) => { if (alive) setModelsErr(e.message || "couldn't load models"); })
      .finally(() => { if (alive) setModelsLoading(false); });
    return () => { alive = false; };
  }, []);

useEffect(() => { refreshUsage(); }, [refreshUsage]);

const saveKey = (raw) => {
    const k = PG.cleanKey(raw);
    setApiKey(k);
    if (k) LS.set("pg.orKey", k); else LS.del("pg.orKey");
    setKeyOpen(false);
  };
  const clearKey = () => { setApiKey(""); LS.del("pg.orKey"); setUsage(null); setUsageErr(null); };

const modelLabel = (models.find((m) => m.id === model) || { label: model || "model" }).label;

// resolve + generate one item via OpenRouter
  const fillItem = useCallback((runId, itemId, template) => {
    const t0 = (performance && performance.now) ? performance.now() : Date.now();
    setRuns((rs) => rs.map((r) => r.id === runId
      ? { ...r, items: r.items.map((it) => it.id === itemId ? { ...it, status: "thinking", segments: [], response: "", ms: 0, cost: null } : it) }
      : r));
    PG.generate(template, model, apiKey).then((data) => {
      const now = (performance && performance.now) ? performance.now() : Date.now();
      const ms = Math.max(1, Math.round(now - t0));
      const cost = data.usage && data.usage.cost != null ? data.usage.cost : null;
      setRuns((rs) => rs.map((r) => r.id === runId
        ? { ...r, items: r.items.map((it) => it.id === itemId
            ? { ...it, segments: data.segments, resolved: data.resolved, fills: data.fills, response: data.response, status: "done", ms, cost } : it) }
        : r));
      refreshUsage();
    }).catch((e) => {
      setRuns((rs) => rs.map((r) => r.id === runId
        ? { ...r, items: r.items.map((it) => it.id === itemId
            ? { ...it, status: "error", response: "⚠ " + (e.message || "Generation failed."), ms: 0 } : it) }
        : r));
    });
  }, [model, apiKey, refreshUsage]);

const rerollItem = (runId, itemId) => {
    if (!apiKey) { setKeyOpen(true); return; }
    const r = runs.find((x) => x.id === runId);
    if (r) fillItem(runId, itemId, r.template);
  };

const totalResults = runs.reduce((n, r) => n + r.items.length, 0);

return (
    <div className={"app" + (drawer ? " drawer-open" : "")}>
      <header className="topbar">
        <button className="icon-btn" onClick={() => setDrawer(true)} aria-label="Open library"><Icon d={ICONS.menu} /></button>
        <div className="brand">
          <span className="mark">/</span>
          <span className="title">Prompt Generator <small>· openrouter</small></span>
        </div>
        <span className="spacer" />
        <KeyMenu apiKey={apiKey} onSave={saveKey} onClear={clearKey}
                 usage={usage} usageErr={usageErr} usageLoading={usageLoading} onRefresh={refreshUsage}
                 open={keyOpen} setOpen={setKeyOpen} />
        <ModelSelect models={models} model={model} setModel={setModel} loading={modelsLoading} error={modelsErr} />
      </header>

<Sidebar prompts={prompts} activeId={activeId} onLoad={loadPrompt} onNew={newPrompt} onDelete={deletePrompt} />
      <div className="scrim" onClick={() => setDrawer(false)} />

<main className="main">
        <div className="workspace">
          {!apiKey && (
            <div className="keybar">
              <span>Add your OpenRouter API key to start generating.</span>
              <button className="keybar-btn" onClick={() => setKeyOpen(true)}><Icon d={ICONS.key} size={14} />Set key</button>
            </div>
          )}

<section className="results">
            {totalResults > 0 && (
              <div className="results-head">
                <h3>Results</h3>
                <span className="count">{totalResults}</span>
                <button className="clear-link" onClick={() => setRuns([])}>Clear all</button>
              </div>
            )}

{runs.length === 0 ? (
              <div className="empty">
                <div className="big">Nothing generated yet</div>
                <div className="sub">Write a prompt with placeholders like <code>_animal_</code> or <code>_country_</code>,<br/>then hit Generate. Each run swaps in fresh random words.</div>
              </div>
            ) : runs.map((r) => (
              <div className="batch-group" key={r.id}>
                {r.items.length > 1 && (
                  <div className="batch-tag">
                    <Icon d={ICONS.bolt} size={12} fill="currentColor" />
                    batch of {r.items.length} · <span className="bt-model">{r.modelLabel}</span>
                  </div>
                )}
                {r.items.map((it) => (
                  <ResultCard key={it.id} item={it} modelLabel={r.modelLabel}
                              onReroll={() => rerollItem(r.id, it.id)} />
                ))}
              </div>
            ))}
          </section>
        </div>
      </main>
    </div>
  );
}

function deriveName(t) {
  const clean = t.replace(/_([a-zA-Z0-9]+)_/g, "$1").replace(/\s+/g, " ").trim();
  const words = clean.split(" ").slice(0, 5).join(" ");
  return words.charAt(0).toUpperCase() + words.slice(1, 40);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);