@campfire-interactive/ai-chat 0.0.0-stage → 0.1.0

package/dist/host/index.js

@@ -0,0 +1,1800 @@
+import {
+  createAssistantClient
+} from "../chunk-IDPIG6KY.js";
+import {
+  compareCells,
+  formatValue,
+  safeUrl,
+  statusLabel,
+  statusTone
+} from "../chunk-2MWBMQMX.js";
+
+// src/host/AiChatProvider.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/host/context.ts
+import { createContext, useContext } from "react";
+var AiChatContext = createContext(null);
+function useAiChat() {
+  return useContext(AiChatContext);
+}
+
+// src/host/thread.ts
+var HISTORY_TURNS = 8;
+function newId() {
+  const c = globalThis.crypto;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (ch) => {
+    const r = Math.random() * 16 | 0;
+    return (ch === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+function askedOnOf(ctx) {
+  return { page: ctx.page, title: ctx.title, breadcrumbs: ctx.breadcrumbs, path: ctx.path };
+}
+function pageLabel(on) {
+  const crumb = [...on.breadcrumbs].reverse().find((b) => b && b !== on.title);
+  return crumb ? `${on.title} \xB7 ${crumb}` : on.title;
+}
+function applyEvent(ex, event) {
+  switch (event.type) {
+    case "text": {
+      const last = ex.parts[ex.parts.length - 1];
+      if (last && last.kind === "markdown") {
+        return { ...ex, parts: [...ex.parts.slice(0, -1), { kind: "markdown", text: last.text + event.delta }] };
+      }
+      return { ...ex, parts: [...ex.parts, { kind: "markdown", text: event.delta }] };
+    }
+    case "step":
+      return {
+        ...ex,
+        steps: [...ex.steps, event.label],
+        sources: addSource(ex.sources ?? [], event.source, event.sourcePath, event.sourceApp)
+      };
+    case "block":
+      return { ...ex, parts: [...ex.parts, { kind: "block", block: event.block }] };
+    case "write_pending":
+      return { ...ex, parts: [...ex.parts, { kind: "write", item: { write: event.write, state: "pending" } }] };
+    case "done":
+      return { ...ex, status: "done", answeredAt: Date.now() };
+    case "error":
+      return { ...ex, status: "error", error: event.message };
+  }
+}
+function discardPending(cards) {
+  let changed = false;
+  const next = cards.map((card) => {
+    let cardChanged = false;
+    const exchanges = card.exchanges.map((ex) => {
+      if (!ex.parts.some((p) => p.kind === "write" && p.item.state === "pending")) return ex;
+      cardChanged = true;
+      return {
+        ...ex,
+        parts: ex.parts.map(
+          (p) => p.kind === "write" && p.item.state === "pending" ? { ...p, item: { ...p.item, state: "discarded" } } : p
+        )
+      };
+    });
+    if (!cardChanged) return card;
+    changed = true;
+    return { ...card, exchanges };
+  });
+  return changed ? next : cards;
+}
+function describeBlock(block) {
+  switch (block.kind) {
+    case "table":
+      return `[Showed a table${block.title ? ` "${block.title}"` : ""} with ${block.rows.length} rows]`;
+    case "chart":
+      return `[Showed a ${block.chartType} chart${block.title ? ` "${block.title}"` : ""}]`;
+    case "kpis":
+      return `[Showed ${block.items.map((k) => `${k.label}: ${k.value}`).join("; ")}]`;
+    case "entities":
+      return `[Linked ${block.items.map((e) => e.label).join(", ")}]`;
+    case "question":
+      return block.question;
+    case "understood":
+      return `[Understood as: ${block.summary}]`;
+    default:
+      return null;
+  }
+}
+function assistantText(ex) {
+  const lines = [];
+  for (const part of ex.parts) {
+    if (part.kind === "markdown") lines.push(part.text);
+    else if (part.kind === "block") {
+      const d = describeBlock(part.block);
+      if (d) lines.push(d);
+    } else if (part.item.state !== "succeeded" && part.item.state !== "failed") {
+      lines.push(`Proposed, not confirmed: ${part.item.write.summary}`);
+    }
+  }
+  if (ex.status === "error" && ex.error) lines.push(`(No answer: ${ex.error})`);
+  lines.push(...ex.confirmations);
+  return lines.join("\n").trim();
+}
+function buildHistory(cards, turns = HISTORY_TURNS) {
+  const out = [];
+  for (const card of cards) {
+    for (const ex of card.exchanges) {
+      if (ex.status === "streaming") continue;
+      out.push({ role: "user", content: ex.question });
+      const content = assistantText(ex);
+      if (content) out.push({ role: "assistant", content });
+    }
+  }
+  return out.slice(-turns);
+}
+function fillStarter(template, ctx) {
+  let ready = true;
+  const text = template.replace(/\{([A-Za-z0-9_.-]+)\}/g, (whole, name) => {
+    const entity = ctx.entities.find((e) => e.type === name) ?? (name === "item" ? ctx.entities[ctx.entities.length - 1] : void 0);
+    if (entity?.label) return entity.label;
+    const filter = ctx.filters?.[name];
+    if (filter) return filter;
+    if (name === "title" && ctx.title) return ctx.title;
+    ready = false;
+    return whole;
+  });
+  return { text, ready };
+}
+var TIME_GROUP_MS = 5 * 60 * 1e3;
+function endsTimeGroup(cards, index) {
+  const card = cards[index];
+  const last = card.exchanges[card.exchanges.length - 1];
+  if (!last || last.status === "streaming") return false;
+  const next = cards[index + 1];
+  if (!next) return true;
+  const ended = last.answeredAt ?? last.askedAt;
+  return next.exchanges[0].askedAt - ended > TIME_GROUP_MS;
+}
+function cardTime(card) {
+  const last = card.exchanges[card.exchanges.length - 1];
+  return last.answeredAt ?? last.askedAt;
+}
+function starterLabel(template, ctx) {
+  return fillStarter(template, ctx).text.replace(/\{[A-Za-z0-9_.-]+\}/g, "\u2026");
+}
+function lastAskedPage(cards) {
+  const card = cards[cards.length - 1];
+  const ex = card?.exchanges[card.exchanges.length - 1];
+  return ex ? ex.askedOn.page : null;
+}
+function openQuestionCard(cards) {
+  const card = cards[cards.length - 1];
+  const ex = card?.exchanges[card.exchanges.length - 1];
+  if (!ex || ex.status !== "done") return null;
+  return ex.parts.some((p) => p.kind === "block" && p.block.kind === "question") ? card : null;
+}
+function addSource(sources, label, path, app) {
+  if (!label) return sources;
+  const at = sources.findIndex((s) => s.label === label);
+  if (at < 0) return [...sources, path ? { label, path, ...app ? { app } : {} } : { label }];
+  if (sources[at].path === path && sources[at].app === app) return sources;
+  return sources.map((s, i) => i === at ? { label } : s);
+}
+
+// src/host/AiChatProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var MIN_WIDTH = 360;
+var MAX_WIDTH = 900;
+var DEFAULT_WIDTH = 480;
+var PANEL_WIDTH = { min: MIN_WIDTH, max: MAX_WIDTH, default: DEFAULT_WIDTH };
+var clampWidth = (w) => Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.round(w)));
+function readStored(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+var ASK_KEY = "cfi.ai-chat.ask";
+var ASK_SETTLE_MS = 400;
+var ASK_LABEL_WAIT_MS = 3e3;
+function readSession(key) {
+  try {
+    return window.sessionStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeSession(key, value) {
+  try {
+    if (value === null) window.sessionStorage.removeItem(key);
+    else window.sessionStorage.setItem(key, value);
+  } catch {
+  }
+}
+function AiChatProvider(props) {
+  return /* @__PURE__ */ jsx(ChatProvider, { ...props, enabled: Boolean(props.hubUrl || props.client) });
+}
+function ChatProvider({
+  app,
+  hubUrl,
+  getToken,
+  uploadFile,
+  pageContext,
+  starters,
+  catalog,
+  navigate,
+  onChanged,
+  client: injected,
+  children,
+  enabled
+}) {
+  const onChangedRef = useRef(onChanged);
+  onChangedRef.current = onChanged;
+  const getTokenRef = useRef(getToken);
+  getTokenRef.current = getToken;
+  const client = useMemo(
+    () => injected ?? createAssistantClient({ hubUrl: hubUrl ?? "", getToken: () => getTokenRef.current() }),
+    [injected, hubUrl]
+  );
+  const openKey = `cfi.ai-chat.${app}.open`;
+  const widthKey = `cfi.ai-chat.${app}.width`;
+  const [open, setOpenState] = useState(() => readStored(openKey) === "1");
+  const [width, setWidthState] = useState(() => {
+    const stored = Number(readStored(widthKey));
+    return Number.isFinite(stored) && stored >= MIN_WIDTH && stored <= MAX_WIDTH ? stored : DEFAULT_WIDTH;
+  });
+  useEffect(() => writeStored(openKey, open ? "1" : "0"), [openKey, open]);
+  useEffect(() => writeStored(widthKey, String(width)), [widthKey, width]);
+  const setOpen = useCallback((next) => setOpenState(next), []);
+  const toggle = useCallback(() => setOpenState((o) => !o), []);
+  const setWidth = useCallback((w) => setWidthState(clampWidth(w)), []);
+  const expandedKey = `cfi.ai-chat.${app}.expanded`;
+  const [expanded, setExpandedState] = useState(() => readStored(expandedKey) === "1");
+  useEffect(() => writeStored(expandedKey, expanded ? "1" : "0"), [expandedKey, expanded]);
+  const setExpanded = useCallback((next) => setExpandedState(next), []);
+  const [sessionId, setSessionId] = useState(newId);
+  const [cards, setCards] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [draft, setDraft] = useState("");
+  const files = useRef(/* @__PURE__ */ new Map());
+  const [sessionFiles, setSessionFiles] = useState([]);
+  const [staged, setStaged] = useState([]);
+  const [attached, setAttached] = useState([]);
+  const [changes, setChanges] = useState({ items: [], loading: false, loaded: false });
+  const [summaries, setSummaries] = useState({});
+  const cardsRef = useRef(cards);
+  cardsRef.current = cards;
+  const pageRef = useRef(pageContext);
+  pageRef.current = pageContext;
+  const navigateRef = useRef(navigate);
+  navigateRef.current = navigate;
+  const sessionRef = useRef(sessionId);
+  sessionRef.current = sessionId;
+  const busyRef = useRef(false);
+  const abortRef = useRef(null);
+  const filesMetaRef = useRef({ sessionFiles, attached });
+  filesMetaRef.current = { sessionFiles, attached };
+  const updateExchange = useCallback((id, fn) => {
+    setCards(
+      (prev) => prev.map(
+        (card) => card.exchanges.some((ex) => ex.id === id) ? { ...card, exchanges: card.exchanges.map((ex) => ex.id === id ? fn(ex) : ex) } : card
+      )
+    );
+  }, []);
+  const updateWrite = useCallback(
+    (exchangeId, token, fn) => {
+      updateExchange(exchangeId, (ex) => ({
+        ...ex,
+        parts: ex.parts.map((p) => p.kind === "write" && p.item.write.token === token ? { ...p, item: fn(p.item) } : p)
+      }));
+    },
+    [updateExchange]
+  );
+  const findWrite = (exchangeId, token) => {
+    for (const card of cardsRef.current) {
+      for (const ex of card.exchanges) {
+        if (ex.id !== exchangeId) continue;
+        for (const p of ex.parts) if (p.kind === "write" && p.item.write.token === token) return p.item;
+      }
+    }
+    return null;
+  };
+  const refreshChanges = useCallback(async () => {
+    const session = sessionRef.current;
+    setChanges((c) => ({ ...c, loading: true, error: void 0 }));
+    try {
+      const { items } = await client.listActions({ sessionId: session });
+      if (sessionRef.current !== session) return;
+      setChanges({ items, loading: false, loaded: true });
+    } catch (err) {
+      if (sessionRef.current !== session) return;
+      setChanges((c) => ({ ...c, loading: false, loaded: true, error: messageOf(err, "Could not load the changes.") }));
+    }
+  }, [client]);
+  const send = useCallback(
+    async (raw, opts) => {
+      const message = raw.trim();
+      if (!message || busyRef.current) return;
+      const ctx = pageRef.current;
+      const session = sessionRef.current;
+      const history = buildHistory(cardsRef.current);
+      const { sessionFiles: held, attached: done } = filesMetaRef.current;
+      const attachments = held.filter((f) => !done.includes(f.fileRef));
+      const ex = {
+        id: newId(),
+        question: message,
+        askedOn: { ...askedOnOf(ctx) },
+        attachments,
+        parts: [],
+        steps: [],
+        status: "streaming",
+        confirmations: [],
+        askedAt: Date.now()
+      };
+      setCards((prev) => {
+        const next = discardPending(prev);
+        if (opts?.foldInto && next.some((c) => c.id === opts.foldInto)) {
+          return next.map((c) => c.id === opts.foldInto ? { ...c, exchanges: [...c.exchanges, ex] } : c);
+        }
+        return [...next, { id: newId(), exchanges: [ex] }];
+      });
+      setStaged([]);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      busyRef.current = true;
+      setBusy(true);
+      try {
+        const stream = client.chatStream(
+          { app, session_id: session, message, history, page_context: ctx, attachments },
+          { signal: controller.signal }
+        );
+        let opened = false;
+        for await (const event of stream) {
+          if (controller.signal.aborted) break;
+          updateExchange(ex.id, (e) => applyEvent(e, event));
+          if (!opened && event.type === "block" && event.block.kind === "actions") {
+            const target = event.block.items.find((i) => i.openNow);
+            if (target) {
+              opened = true;
+              navigateRef.current(target.link);
+            }
+          }
+        }
+        if (!controller.signal.aborted) {
+          updateExchange(
+            ex.id,
+            (e) => e.status === "streaming" ? { ...e, status: "error", error: "The answer stopped before it finished." } : e
+          );
+        }
+      } catch (err) {
+        if (!controller.signal.aborted) {
+          updateExchange(ex.id, (e) => ({ ...e, status: "error", error: messageOf(err, "AI chat could not answer that.") }));
+        }
+      } finally {
+        if (controller.signal.aborted && sessionRef.current === session) {
+          updateExchange(ex.id, (e) => e.status === "streaming" ? { ...e, status: "done" } : e);
+        }
+        if (abortRef.current === controller) {
+          abortRef.current = null;
+          busyRef.current = false;
+          setBusy(false);
+        }
+      }
+    },
+    [app, client, updateExchange]
+  );
+  const stop = useCallback(() => abortRef.current?.abort(), []);
+  const startOver = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    busyRef.current = false;
+    setBusy(false);
+    setCards([]);
+    setDraft("");
+    files.current = /* @__PURE__ */ new Map();
+    setSessionFiles([]);
+    setStaged([]);
+    setAttached([]);
+    setChanges({ items: [], loading: false, loaded: false });
+    setSummaries({});
+    const next = newId();
+    sessionRef.current = next;
+    setSessionId(next);
+  }, []);
+  const addFiles = useCallback((list) => {
+    const added = [];
+    for (const file of Array.from(list)) {
+      const fileRef = newId();
+      files.current.set(fileRef, file);
+      added.push({ fileRef, name: file.name, contentType: file.type || "application/octet-stream", size: file.size });
+    }
+    if (!added.length) return;
+    setSessionFiles((prev) => [...prev, ...added]);
+    setStaged((prev) => [...prev, ...added.map((a) => a.fileRef)]);
+  }, []);
+  const removeFile = useCallback((fileRef) => {
+    files.current.delete(fileRef);
+    setSessionFiles((prev) => prev.filter((f) => f.fileRef !== fileRef));
+    setStaged((prev) => prev.filter((r) => r !== fileRef));
+  }, []);
+  const cancelWrite = useCallback(
+    (exchangeId, token) => updateWrite(exchangeId, token, (item) => item.state === "pending" ? { ...item, state: "canceled", error: void 0 } : item),
+    [updateWrite]
+  );
+  const confirmWrite = useCallback(
+    async (exchangeId, token) => {
+      const item = findWrite(exchangeId, token);
+      if (!item || item.state !== "pending") return;
+      const { write } = item;
+      if (Date.parse(write.expiresAt) <= Date.now()) {
+        updateWrite(exchangeId, token, (i) => ({ ...i, state: "expired", error: void 0 }));
+        return;
+      }
+      const session = sessionRef.current;
+      updateWrite(exchangeId, token, (i) => ({ ...i, state: "confirming", error: void 0 }));
+      let documentId;
+      if (write.file) {
+        const file = files.current.get(write.file.fileRef);
+        if (!file) {
+          updateWrite(exchangeId, token, (i) => ({
+            ...i,
+            state: "pending",
+            error: "That file is no longer in this chat. Drop it again and ask once more."
+          }));
+          return;
+        }
+        try {
+          ({ documentId } = await uploadFile(file, write));
+        } catch (err) {
+          if (sessionRef.current !== session) return;
+          updateWrite(exchangeId, token, (i) => ({
+            ...i,
+            state: "pending",
+            error: messageOf(err, "The file could not be uploaded, so nothing was changed.")
+          }));
+          return;
+        }
+      }
+      try {
+        const res = await client.confirmWrite(documentId ? { token, documentId } : { token });
+        if (sessionRef.current !== session) return;
+        updateWrite(exchangeId, token, (i) => ({ ...i, state: res.outcome, actionId: res.actionId, error: res.error }));
+        updateExchange(exchangeId, (e) => ({
+          ...e,
+          confirmations: [...e.confirmations, `Confirmed: ${write.summary} (${res.outcome})`]
+        }));
+        setSummaries((s) => ({ ...s, [res.actionId]: write.summary }));
+        if (res.outcome === "succeeded" && write.file) setAttached((a) => [...a, write.file.fileRef]);
+        void refreshChanges();
+        onChangedRef.current?.(write, res.outcome);
+      } catch (err) {
+        if (sessionRef.current !== session) return;
+        updateWrite(exchangeId, token, (i) => ({ ...i, state: "failed", error: messageOf(err, "The change could not be made.") }));
+      }
+    },
+    // findWrite reads refs only, so it is not a dependency.
+    [client, uploadFile, updateWrite, updateExchange, refreshChanges]
+  );
+  const confirmAll = useCallback(
+    async (exchangeId) => {
+      const ex = cardsRef.current.flatMap((c) => c.exchanges).find((e) => e.id === exchangeId);
+      if (!ex) return;
+      const tokens = ex.parts.flatMap((p) => p.kind === "write" && p.item.state === "pending" ? [p.item.write.token] : []);
+      for (const token of tokens) await confirmWrite(exchangeId, token);
+    },
+    [confirmWrite]
+  );
+  const pageStarters = useMemo(
+    () => starters?.[pageContext.page] ?? starters?.["*"] ?? [],
+    [starters, pageContext.page]
+  );
+  const catalogValue = useMemo(() => catalog ?? [], [catalog]);
+  const stagedFiles = useMemo(
+    () => sessionFiles.filter((f) => staged.includes(f.fileRef)),
+    [sessionFiles, staged]
+  );
+  const ask = useCallback(
+    (question, opts) => {
+      const text = question.trim();
+      if (!text) return;
+      setOpenState(true);
+      if (opts?.send === false || busy) setDraft(text);
+      else void send(text);
+    },
+    [busy, send]
+  );
+  const askWaitStarted = useRef(0);
+  const [askTick, setAskTick] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    const url = new URL(window.location.href);
+    const fromUrl = url.searchParams.get("ask");
+    if (fromUrl) {
+      writeSession(ASK_KEY, fromUrl);
+      url.searchParams.delete("ask");
+      window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}${url.hash}`);
+    }
+    if (!enabled || !readSession(ASK_KEY)) return void 0;
+    if (!askWaitStarted.current) askWaitStarted.current = Date.now();
+    const labelled = pageContext.entities.every((e) => e.label);
+    const waited = Date.now() - askWaitStarted.current;
+    if (!labelled && waited < ASK_LABEL_WAIT_MS) {
+      const retry = window.setTimeout(() => setAskTick((t) => t + 1), 250);
+      return () => window.clearTimeout(retry);
+    }
+    const timer = window.setTimeout(() => {
+      const question = readSession(ASK_KEY);
+      if (!question) return;
+      writeSession(ASK_KEY, null);
+      ask(question);
+    }, ASK_SETTLE_MS);
+    return () => window.clearTimeout(timer);
+  }, [ask, enabled, pageContext, askTick]);
+  const value = useMemo(
+    () => ({
+      app,
+      pageContext,
+      starters: pageStarters,
+      catalog: catalogValue,
+      open,
+      setOpen,
+      toggle,
+      width,
+      setWidth,
+      sessionId,
+      cards,
+      busy,
+      draft,
+      setDraft,
+      send,
+      ask,
+      stop,
+      startOver,
+      stagedFiles,
+      addFiles,
+      removeFile,
+      confirmWrite,
+      confirmAll,
+      cancelWrite,
+      navigate,
+      expanded,
+      setExpanded,
+      changes,
+      summaries,
+      refreshChanges
+    }),
+    [
+      app,
+      pageContext,
+      pageStarters,
+      catalogValue,
+      open,
+      setOpen,
+      toggle,
+      width,
+      setWidth,
+      sessionId,
+      cards,
+      busy,
+      draft,
+      send,
+      ask,
+      stop,
+      startOver,
+      stagedFiles,
+      addFiles,
+      removeFile,
+      confirmWrite,
+      confirmAll,
+      cancelWrite,
+      navigate,
+      expanded,
+      setExpanded,
+      changes,
+      summaries,
+      refreshChanges
+    ]
+  );
+  return /* @__PURE__ */ jsx(AiChatContext.Provider, { value: enabled ? value : null, children });
+}
+function messageOf(err, fallback) {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
+
+// src/host/AiChatSurface.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect, useRef as useRef3, useState as useState6 } from "react";
+import {
+  ArrowLeft,
+  Check as Check3,
+  ChevronDown as ChevronDown2,
+  ChevronRight as ChevronRight2,
+  CircleAlert as CircleAlert2,
+  Copy as Copy2,
+  History,
+  Lightbulb,
+  Loader2 as Loader22,
+  Lock,
+  MapPin,
+  Maximize2,
+  Minimize2,
+  Paperclip as Paperclip2,
+  RotateCcw,
+  Sparkles,
+  Send,
+  Square,
+  X as X2
+} from "lucide-react";
+
+// src/blocks/Blocks.tsx
+import { lazy, Suspense } from "react";
+import { ArrowRight, BookOpen, ExternalLink, FilePen, TrendingDown, TrendingUp } from "lucide-react";
+
+// src/blocks/TableBlock.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var NUMERIC = /* @__PURE__ */ new Set(["number", "money", "percent"]);
+var SHORT = 18;
+function TableBlock({ block }) {
+  const [sort, setSort] = useState2(null);
+  const rows = useMemo2(() => {
+    if (!sort) return block.rows;
+    const type = block.columns.find((c) => c.key === sort.key)?.type;
+    return [...block.rows].sort((a, b) => compareCells(a[sort.key], b[sort.key], type) * sort.dir);
+  }, [block.rows, block.columns, sort]);
+  const fit = useMemo2(() => {
+    const out = {};
+    for (const col of block.columns) {
+      const longest = block.rows.reduce((n, row) => Math.max(n, formatValue(row[col.key], col.type, block.currency).length), col.label.length);
+      out[col.key] = longest <= SHORT ? "short" : "long";
+    }
+    return out;
+  }, [block.rows, block.columns, block.currency]);
+  const toggle = (key) => setSort((s) => s?.key !== key ? { key, dir: 1 } : s.dir === 1 ? { key, dir: -1 } : null);
+  return /* @__PURE__ */ jsxs("figure", { className: "cfi-ac-block cfi-ac-table", children: [
+    block.title && /* @__PURE__ */ jsx2("figcaption", { className: "cfi-ac-block__title", children: block.title }),
+    /* @__PURE__ */ jsx2("div", { className: "cfi-ac-table__scroll", tabIndex: 0, role: "region", "aria-label": block.title ?? "Table", children: /* @__PURE__ */ jsxs("table", { children: [
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: block.columns.map((col) => {
+        const active = sort?.key === col.key;
+        return /* @__PURE__ */ jsx2(
+          "th",
+          {
+            scope: "col",
+            "data-numeric": NUMERIC.has(col.type ?? "") || void 0,
+            "aria-sort": active ? sort.dir === 1 ? "ascending" : "descending" : "none",
+            children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => toggle(col.key), children: [
+              col.label,
+              active && (sort.dir === 1 ? /* @__PURE__ */ jsx2(ArrowUp, { size: 12, "aria-hidden": true }) : /* @__PURE__ */ jsx2(ArrowDown, { size: 12, "aria-hidden": true }))
+            ] })
+          },
+          col.key
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { children: block.columns.map((col) => /* @__PURE__ */ jsx2("td", { "data-numeric": NUMERIC.has(col.type ?? "") || void 0, "data-fit": fit[col.key], children: col.type === "status" && row[col.key] != null && row[col.key] !== "" ? /* @__PURE__ */ jsx2("span", { className: "cfi-ac-status", "data-tone": statusTone(row[col.key]), children: statusLabel(row[col.key]) }) : formatValue(row[col.key], col.type, block.currency) }, col.key)) }, i)) })
+    ] }) })
+  ] });
+}
+
+// src/blocks/DraftBlock.tsx
+import { useState as useState4 } from "react";
+import { Check, Copy } from "lucide-react";
+
+// src/host/announce.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var listeners = /* @__PURE__ */ new Set();
+function announce(message) {
+  listeners.forEach((l) => l(message));
+}
+function Announcer() {
+  const [message, setMessage] = useState3("");
+  useEffect2(() => {
+    let clear;
+    const listener = (next) => {
+      setMessage("");
+      window.requestAnimationFrame(() => setMessage(next));
+      window.clearTimeout(clear);
+      clear = window.setTimeout(() => setMessage(""), 4e3);
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      window.clearTimeout(clear);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3("p", { className: "cfi-ac-sr-only", role: "status", "aria-live": "polite", children: message });
+}
+
+// src/blocks/DraftBlock.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function DraftBlock({ block }) {
+  const [copied, setCopied] = useState4(false);
+  const text = block.subject ? `Subject: ${block.subject}
+
+${block.body}` : block.body;
+  return /* @__PURE__ */ jsxs2("figure", { className: "cfi-ac-block cfi-ac-draft", children: [
+    /* @__PURE__ */ jsxs2("figcaption", { className: "cfi-ac-draft__head", children: [
+      /* @__PURE__ */ jsx4("span", { className: "cfi-ac-block__title", children: block.title }),
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ac-btn",
+          "data-variant": "secondary",
+          onClick: () => {
+            void navigator.clipboard?.writeText(text).then(() => {
+              setCopied(true);
+              announce("Draft copied");
+              window.setTimeout(() => setCopied(false), 1500);
+            });
+          },
+          children: [
+            copied ? /* @__PURE__ */ jsx4(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx4(Copy, { size: 14, "aria-hidden": true }),
+            copied ? "Copied" : "Copy"
+          ]
+        }
+      )
+    ] }),
+    (block.to || block.subject) && /* @__PURE__ */ jsxs2("dl", { className: "cfi-ac-draft__meta", children: [
+      block.to && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4("dt", { children: "To" }),
+        /* @__PURE__ */ jsx4("dd", { children: block.to })
+      ] }),
+      block.subject && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4("dt", { children: "Subject" }),
+        /* @__PURE__ */ jsx4("dd", { children: block.subject })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "cfi-ac-draft__body", tabIndex: 0, role: "region", "aria-label": block.title, children: block.body })
+  ] });
+}
+
+// src/blocks/Blocks.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChartBlock = lazy(() => import("../ChartBlock-HDE237VG.js"));
+function BlockView({ block, handlers }) {
+  switch (block.kind) {
+    case "table":
+      return /* @__PURE__ */ jsx5(TableBlock, { block });
+    case "chart":
+      return /* @__PURE__ */ jsx5(Suspense, { fallback: /* @__PURE__ */ jsx5("div", { className: "cfi-ac-block cfi-ac-chart cfi-ac-chart--loading", "aria-busy": "true" }), children: /* @__PURE__ */ jsx5(ChartBlock, { block }) });
+    case "kpis":
+      return /* @__PURE__ */ jsx5("div", { className: "cfi-ac-block cfi-ac-kpis", children: block.items.map((k, i) => /* @__PURE__ */ jsxs3("div", { className: "cfi-ac-kpi", "data-tone": k.tone ?? "neutral", children: [
+        /* @__PURE__ */ jsx5("span", { className: "cfi-ac-kpi__label", children: k.label }),
+        /* @__PURE__ */ jsx5("span", { className: "cfi-ac-kpi__value", children: typeof k.value === "number" ? formatValue(k.value, k.format ?? "number") : k.value }),
+        typeof k.change === "number" && /* @__PURE__ */ jsxs3("span", { className: "cfi-ac-kpi__change", children: [
+          k.change >= 0 ? /* @__PURE__ */ jsx5(TrendingUp, { size: 12, "aria-hidden": true }) : /* @__PURE__ */ jsx5(TrendingDown, { size: 12, "aria-hidden": true }),
+          k.change > 0 ? "+" : "",
+          k.change.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+          "%"
+        ] })
+      ] }, i)) });
+    case "entities":
+      return /* @__PURE__ */ jsx5("div", { className: "cfi-ac-block cfi-ac-entities", children: block.items.map((e) => /* @__PURE__ */ jsxs3("button", { type: "button", className: "cfi-ac-entity", onClick: () => handlers.navigate(e.link), children: [
+        /* @__PURE__ */ jsx5("span", { className: "cfi-ac-entity__type", children: e.type }),
+        /* @__PURE__ */ jsx5("span", { className: "cfi-ac-entity__label", children: e.label }),
+        e.sublabel && /* @__PURE__ */ jsx5("span", { className: "cfi-ac-entity__sub", children: e.sublabel }),
+        /* @__PURE__ */ jsx5(ArrowRight, { className: "cfi-ac-entity__go", size: 14, "aria-hidden": true })
+      ] }, `${e.type}:${e.id}`)) });
+    case "understood":
+      return /* @__PURE__ */ jsxs3("p", { className: "cfi-ac-understood", children: [
+        /* @__PURE__ */ jsx5("span", { className: "cfi-ac-understood__label", children: "Understood as:" }),
+        " ",
+        block.summary
+      ] });
+    case "actions":
+      return /* @__PURE__ */ jsx5("div", { className: "cfi-ac-block cfi-ac-actions", children: block.items.map((a, i) => /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ac-btn",
+          "data-variant": a.primary ?? (i === 0 && !block.items.some((x) => x.primary)) ? "primary" : "secondary",
+          onClick: () => handlers.navigate(a.link),
+          children: [
+            a.style === "open_form" ? /* @__PURE__ */ jsx5(FilePen, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx5(ArrowRight, { size: 14, "aria-hidden": true }),
+            a.label
+          ]
+        },
+        i
+      )) });
+    case "question":
+      return /* @__PURE__ */ jsxs3("div", { className: "cfi-ac-block cfi-ac-question", children: [
+        /* @__PURE__ */ jsx5("p", { className: "cfi-ac-question__text", children: block.question }),
+        block.options && block.options.length > 0 && /* @__PURE__ */ jsx5("div", { className: "cfi-ac-chips", children: block.options.map((o) => /* @__PURE__ */ jsx5("button", { type: "button", className: "cfi-ac-chip", disabled: handlers.busy, onClick: () => handlers.answer(o), children: o }, o)) })
+      ] });
+    case "followups":
+      return /* @__PURE__ */ jsxs3("div", { className: "cfi-ac-block cfi-ac-followups", children: [
+        block.didYouMean && /* @__PURE__ */ jsx5("span", { className: "cfi-ac-followups__label", children: "Did you mean" }),
+        /* @__PURE__ */ jsx5("div", { className: "cfi-ac-chips", children: block.items.map((t) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: "cfi-ac-chip",
+            "data-variant": block.didYouMean ? "rewrite" : void 0,
+            disabled: !block.didYouMean && handlers.busy,
+            onClick: () => block.didYouMean ? handlers.load(t) : handlers.send(t),
+            children: t
+          },
+          t
+        )) })
+      ] });
+    case "draft":
+      return /* @__PURE__ */ jsx5(DraftBlock, { block });
+    case "citation":
+      return /* @__PURE__ */ jsx5("div", { className: "cfi-ac-block cfi-ac-citations", children: block.items.map((c, i) => {
+        const href = safeUrl(c.url);
+        return /* @__PURE__ */ jsxs3(
+          "a",
+          {
+            className: "cfi-ac-citation",
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-disabled": href ? void 0 : true,
+            children: [
+              /* @__PURE__ */ jsx5(BookOpen, { size: 13, "aria-hidden": true }),
+              /* @__PURE__ */ jsxs3("span", { children: [
+                c.title,
+                c.section && /* @__PURE__ */ jsxs3("span", { className: "cfi-ac-citation__section", children: [
+                  " \xB7 ",
+                  c.section
+                ] }),
+                /* @__PURE__ */ jsx5("span", { className: "cfi-ac-sr-only", children: " (opens in a new tab)" })
+              ] }),
+              /* @__PURE__ */ jsx5(ExternalLink, { size: 12, "aria-hidden": true })
+            ]
+          },
+          i
+        );
+      }) });
+    default:
+      return null;
+  }
+}
+
+// src/blocks/Markdown.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var components = {
+  a: ({ href, children }) => /* @__PURE__ */ jsxs4("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
+    children,
+    /* @__PURE__ */ jsx6("span", { className: "cfi-ac-sr-only", children: " (opens in a new tab)" })
+  ] }),
+  // The panel's own heading is an h2 and each question an h3, so the
+  // answer's headings sit under them whatever level the model wrote.
+  h1: ({ children }) => /* @__PURE__ */ jsx6("h4", { children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx6("h4", { children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx6("h4", { children }),
+  // Scrollable regions take keyboard focus, so arrow keys can scroll them.
+  table: ({ children }) => /* @__PURE__ */ jsx6("div", { className: "cfi-ac-md-table", tabIndex: 0, role: "region", "aria-label": "Table", children: /* @__PURE__ */ jsx6("table", { children }) }),
+  pre: ({ children }) => /* @__PURE__ */ jsx6("pre", { tabIndex: 0, children })
+};
+function Markdown({ text }) {
+  return /* @__PURE__ */ jsx6("div", { className: "cfi-ac-md", children: /* @__PURE__ */ jsx6(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: text }) });
+}
+
+// src/blocks/WriteCard.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
+import { Check as Check2, ChevronDown, ChevronRight, CircleAlert, Clock, Loader2, Paperclip, X } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function humanizeKey(key) {
+  const spaced = key.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().toLowerCase();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function show(value) {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var STATUS = {
+  succeeded: { text: "Done", tone: "good" },
+  failed: { text: "Not changed", tone: "bad" },
+  canceled: { text: "Canceled. Nothing was changed.", tone: "neutral" },
+  discarded: { text: "Not confirmed. Nothing was changed.", tone: "neutral" },
+  expired: { text: "This proposal expired. Ask again to make the change.", tone: "neutral" }
+};
+function WriteCard({
+  item,
+  onConfirm,
+  onCancel
+}) {
+  const { write, state } = item;
+  const keys = Array.from(/* @__PURE__ */ new Set([...Object.keys(write.before ?? {}), ...Object.keys(write.after ?? {})]));
+  const live = state === "pending" || state === "confirming";
+  const status = STATUS[state];
+  const [unfolded, setUnfolded] = useState5(false);
+  const toggle = useRef2(null);
+  const moveFocus = useRef2(false);
+  const wasLive = useRef2(live);
+  useEffect3(() => {
+    if (wasLive.current && !live) {
+      if (status) announce(status.text);
+      if (!document.activeElement || document.activeElement === document.body) moveFocus.current = true;
+    }
+    wasLive.current = live;
+  }, [live, status]);
+  useEffect3(() => {
+    if (!moveFocus.current) return;
+    moveFocus.current = false;
+    toggle.current?.focus();
+  });
+  const setFold = (next) => {
+    moveFocus.current = true;
+    setUnfolded(next);
+  };
+  if (!live && status && state !== "failed" && !unfolded) {
+    return /* @__PURE__ */ jsx7("div", { className: "cfi-ac-write cfi-ac-write--folded", "data-state": state, role: "group", "aria-label": "Change", children: /* @__PURE__ */ jsxs5("button", { ref: toggle, type: "button", className: "cfi-ac-write__fold", "aria-expanded": false, onClick: () => setFold(true), children: [
+      /* @__PURE__ */ jsx7(ChevronRight, { size: 13, "aria-hidden": true }),
+      /* @__PURE__ */ jsx7("span", { className: "cfi-ac-write__fold-mark", "data-tone": status.tone, children: state === "succeeded" ? /* @__PURE__ */ jsx7(Check2, { size: 13, "aria-hidden": true }) : /* @__PURE__ */ jsx7(Clock, { size: 13, "aria-hidden": true }) }),
+      /* @__PURE__ */ jsx7("span", { className: "cfi-ac-write__fold-text", children: write.summary }),
+      /* @__PURE__ */ jsx7("span", { className: "cfi-ac-write__fold-status", "data-tone": status.tone, children: state === "succeeded" ? "Done" : state === "canceled" ? "Canceled" : "Not made" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "cfi-ac-write", "data-state": state, role: "group", "aria-label": "Proposed change", children: [
+    !live && status && state !== "failed" && /* @__PURE__ */ jsxs5("button", { ref: toggle, type: "button", className: "cfi-ac-write__fold cfi-ac-write__fold--close", "aria-expanded": true, onClick: () => setFold(false), children: [
+      /* @__PURE__ */ jsx7(ChevronDown, { size: 13, "aria-hidden": true }),
+      "Hide details"
+    ] }),
+    /* @__PURE__ */ jsxs5("header", { className: "cfi-ac-write__head", children: [
+      /* @__PURE__ */ jsx7("span", { className: "cfi-ac-write__kicker", children: live ? "Confirm this change" : "Proposed change" }),
+      /* @__PURE__ */ jsx7("p", { className: "cfi-ac-write__summary", children: write.summary }),
+      write.entity.label && !write.summary.includes(write.entity.label) && /* @__PURE__ */ jsx7("p", { className: "cfi-ac-write__entity", children: write.entity.label })
+    ] }),
+    keys.length > 0 && /* @__PURE__ */ jsxs5("table", { className: "cfi-ac-write__diff", children: [
+      /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx7("th", { scope: "col", children: "Field" }),
+        /* @__PURE__ */ jsx7("th", { scope: "col", children: "Now" }),
+        /* @__PURE__ */ jsx7("th", { scope: "col", children: "After" })
+      ] }) }),
+      /* @__PURE__ */ jsx7("tbody", { children: keys.map((k) => {
+        const before = write.before?.[k];
+        const after = write.after?.[k];
+        return /* @__PURE__ */ jsxs5("tr", { children: [
+          /* @__PURE__ */ jsx7("th", { scope: "row", children: humanizeKey(k) }),
+          /* @__PURE__ */ jsx7("td", { className: "cfi-ac-write__before", children: show(before) }),
+          /* @__PURE__ */ jsx7("td", { className: "cfi-ac-write__after", "data-changed": show(before) !== show(after) || void 0, children: show(after) })
+        ] }, k);
+      }) })
+    ] }),
+    write.file && /* @__PURE__ */ jsxs5("p", { className: "cfi-ac-write__file", children: [
+      /* @__PURE__ */ jsx7(Paperclip, { size: 13, "aria-hidden": true }),
+      /* @__PURE__ */ jsx7("span", { children: write.file.name }),
+      /* @__PURE__ */ jsx7("span", { className: "cfi-ac-muted", children: formatBytes(write.file.size) })
+    ] }),
+    item.error && (state === "pending" || state === "failed") && /* @__PURE__ */ jsxs5("p", { className: "cfi-ac-write__error", role: "alert", children: [
+      /* @__PURE__ */ jsx7(CircleAlert, { size: 14, "aria-hidden": true }),
+      item.error
+    ] }),
+    live ? /* @__PURE__ */ jsxs5("div", { className: "cfi-ac-write__buttons", children: [
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ac-btn",
+          "data-variant": "primary",
+          "aria-disabled": state === "confirming" || void 0,
+          onClick: () => state === "pending" && onConfirm(),
+          children: [
+            state === "confirming" ? /* @__PURE__ */ jsx7(Loader2, { className: "cfi-ac-spin", size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx7(Check2, { size: 14, "aria-hidden": true }),
+            state === "confirming" ? write.file ? "Uploading and saving\u2026" : "Saving\u2026" : "Confirm"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ac-btn",
+          "data-variant": "secondary",
+          "aria-disabled": state === "confirming" || void 0,
+          onClick: () => state === "pending" && onCancel(),
+          children: [
+            /* @__PURE__ */ jsx7(X, { size: 14, "aria-hidden": true }),
+            "Cancel"
+          ]
+        }
+      )
+    ] }) : status && /* @__PURE__ */ jsxs5("p", { className: "cfi-ac-write__status", "data-tone": status.tone, role: "status", children: [
+      state === "succeeded" ? /* @__PURE__ */ jsx7(Check2, { size: 14, "aria-hidden": true }) : state === "failed" ? /* @__PURE__ */ jsx7(CircleAlert, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx7(Clock, { size: 14, "aria-hidden": true }),
+      status.text
+    ] })
+  ] });
+}
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject('@layer components {\n  .cfi-ac-root {\n    --cfi-ac-bg: var(--cfi-surface, #ffffff);\n    --cfi-ac-bg-muted: var(--cfi-surface-muted, #f9fafb);\n    --cfi-ac-ground: var(--cfi-surface-sunken, #f9fafb);\n    --cfi-ac-bg-hover: var(--cfi-surface-hover, #f3f4f6);\n    --cfi-ac-raised: var(--cfi-surface-raised, #ffffff);\n    --cfi-ac-fg: var(--cfi-content, #111827);\n    --cfi-ac-fg-muted: var(--cfi-content-muted, #4b5563);\n    --cfi-ac-fg-subtle: var(--cfi-content-muted, #6b7280);\n    --cfi-ac-border: var(--cfi-border, #e5e7eb);\n    --cfi-ac-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n    --cfi-ac-action: var(--cfi-action, #2563eb);\n    --cfi-ac-action-fg: var(--cfi-action-fg, #ffffff);\n    --cfi-ac-action-hover: var(--cfi-action-hover, #1d4ed8);\n    --cfi-ac-action-soft: var(--cfi-action-soft, #eff6ff);\n    --cfi-ac-accent: var(--cfi-ai-accent, var(--cfi-action, #2563eb));\n    --cfi-ac-accent-soft: var(--cfi-ai-accent-soft, var(--cfi-action-soft, #eff6ff));\n    --cfi-ac-radius: var(--cfi-radius-md, 0.375rem);\n    --cfi-ac-radius-lg: var(--cfi-radius-lg, 0.5rem);\n    color: var(--cfi-ac-fg);\n    font-family: var(--cfi-font-family, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    line-height: var(--cfi-line-height-normal, 1.5);\n  }\n  .cfi-ac-root *,\n  .cfi-ac-root *::before,\n  .cfi-ac-root *::after {\n    box-sizing: border-box;\n  }\n  .cfi-ac-root :where(button) {\n    font: inherit;\n    color: inherit;\n  }\n  .cfi-ac-header-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--cfi-color-gray-600, #4b5563);\n    cursor: pointer;\n    transition: background var(--cfi-duration-fast, 150ms), color var(--cfi-duration-fast, 150ms);\n  }\n  .cfi-ac-header-btn:hover {\n    background: var(--cfi-ac-bg-hover);\n    color: var(--cfi-ac-accent);\n  }\n  .cfi-ac-header-btn[aria-pressed=true] {\n    background: var(--cfi-ac-accent-soft);\n    color: var(--cfi-ac-accent);\n  }\n  .cfi-ac-header-btn:focus-visible,\n  .cfi-ac-root :where(button, a, textarea, [tabindex]):focus-visible {\n    outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n    outline-offset: var(--cfi-focus-ring-offset, 2px);\n  }\n  .cfi-ac-panel {\n    position: relative;\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    align-self: stretch;\n    min-height: 0;\n    max-width: calc(100vw - 320px);\n    min-width: 360px;\n    border-left: 1px solid var(--cfi-ac-border);\n    background: var(--cfi-ac-bg);\n  }\n  .cfi-ac-resize {\n    position: absolute;\n    top: 0;\n    left: -4px;\n    z-index: 2;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n  }\n  .cfi-ac-resize:hover {\n    background: color-mix(in srgb, var(--cfi-ac-accent) 25%, transparent);\n  }\n  .cfi-ac-resize:focus-visible {\n    background: var(--cfi-ac-action);\n    outline: none;\n  }\n  .cfi-ac-head {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n    border-bottom: 1px solid var(--cfi-ac-border);\n  }\n  .cfi-ac-head__mark {\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-ac-accent-soft);\n    color: var(--cfi-ac-accent);\n  }\n  .cfi-ac-head__title {\n    margin: 0;\n    font-size: var(--cfi-font-size-base, 1rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-head__tools {\n    display: flex;\n    gap: 2px;\n    margin-left: auto;\n  }\n  .cfi-ac-icon-btn {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--cfi-ac-radius);\n    background: transparent;\n    color: var(--cfi-ac-fg-muted);\n    cursor: pointer;\n  }\n  .cfi-ac-icon-btn:hover:not(:disabled) {\n    background: var(--cfi-ac-bg-hover);\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-icon-btn[aria-pressed=true] {\n    background: var(--cfi-ac-action-soft);\n    color: var(--cfi-ac-action);\n  }\n  .cfi-ac-icon-btn:disabled {\n    opacity: 0.4;\n    cursor: default;\n  }\n  .cfi-ac-muted {\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-changes {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n    background: var(--cfi-ac-ground);\n  }\n  .cfi-ac-panel[data-expanded] .cfi-ac-changes {\n    padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n  }\n  .cfi-ac-changes__back {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n    padding: var(--cfi-spacing-xs, 0.25rem) 0;\n    border: none;\n    background: transparent;\n    color: var(--cfi-ac-action);\n    font: inherit;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    cursor: pointer;\n  }\n  .cfi-ac-changes__back:hover {\n    text-decoration: underline;\n  }\n  .cfi-ac-changes__title {\n    margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-changes p {\n    margin: 0;\n  }\n  .cfi-ac-changes__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ac-changes__list li {\n    display: grid;\n    gap: 2px;\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n    border: 1px solid var(--cfi-ac-border);\n    border-left: 3px solid var(--cfi-color-success, #10b981);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-raised);\n  }\n  .cfi-ac-changes__list li[data-outcome=failed] {\n    border-left-color: var(--cfi-color-error, #ef4444);\n  }\n  .cfi-ac-changes__what {\n    font-weight: var(--cfi-font-weight-medium, 500);\n  }\n  .cfi-ac-changes__meta,\n  .cfi-ac-changes__q {\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-timeline {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--cfi-spacing-md, 1rem);\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-spacing-md, 1rem);\n    background: var(--cfi-ac-ground);\n  }\n  .cfi-ac-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: auto 0;\n    padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-sm, 0.5rem);\n    text-align: center;\n  }\n  .cfi-ac-empty__mark {\n    display: grid;\n    place-items: center;\n    width: 44px;\n    height: 44px;\n    margin-bottom: var(--cfi-spacing-sm, 0.5rem);\n    border-radius: 50%;\n    background: var(--cfi-ac-accent-soft);\n    color: var(--cfi-ac-accent);\n  }\n  .cfi-ac-empty__title {\n    margin: 0;\n    font-size: var(--cfi-font-size-base, 1rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-empty__sub {\n    max-width: 32ch;\n    margin: var(--cfi-spacing-2xs, 0.125rem) 0 var(--cfi-spacing-md, 1rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-empty .cfi-ac-chips {\n    align-self: stretch;\n    justify-content: flex-start;\n  }\n  .cfi-ac-card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-raised);\n    box-shadow: var(--cfi-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));\n    animation: cfi-ac-rise 200ms var(--cfi-easing, ease-out) both;\n  }\n  .cfi-ac-exchange {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n  }\n  .cfi-ac-exchange[data-reply] {\n    padding-top: var(--cfi-spacing-sm, 0.5rem);\n  }\n  .cfi-ac-exchange:not([data-reply]) > .cfi-ac-q {\n    margin: calc(-1 * var(--cfi-spacing-sm, 0.5rem)) calc(-1 * var(--cfi-spacing-md, 1rem)) var(--cfi-spacing-xs, 0.25rem);\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n    border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) 0 0;\n    background: var(--cfi-ac-action);\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-exchange[data-reply] > .cfi-ac-q {\n    align-self: flex-end;\n    max-width: 85%;\n    padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n    border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) var(--cfi-ac-radius) var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-action);\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-q .cfi-ac-q__where,\n  .cfi-ac-q .cfi-ac-q__files li {\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-q .cfi-ac-q__files li {\n    background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n  }\n  .cfi-ac-q__text {\n    margin: 0;\n    font-size: inherit;\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  .cfi-ac-q__where,\n  .cfi-ac-composer__page {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin: 2px 0 0;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-q__files {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    margin: 4px 0 0;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ac-q__files li {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: var(--cfi-radius-full, 9999px);\n    background: var(--cfi-ac-bg-muted);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-a {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    min-width: 0;\n  }\n  .cfi-ac-thinking,\n  .cfi-ac-steps--live {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-steps__toggle {\n    display: inline-flex;\n    align-items: center;\n    min-height: 24px;\n    gap: 2px;\n    padding: 0;\n    border: none;\n    background: none;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n    cursor: pointer;\n  }\n  .cfi-ac-steps__toggle:hover {\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-steps__list {\n    margin: 4px 0 0;\n    padding-left: 1.75rem;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-error,\n  .cfi-ac-write__error {\n    display: flex;\n    align-items: flex-start;\n    gap: 6px;\n    margin: 0;\n    padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n    border: 1px solid var(--cfi-color-error-border, #fecaca);\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-color-error-soft, #fef2f2);\n    color: var(--cfi-color-error-text, #991b1b);\n  }\n  .cfi-ac-error svg,\n  .cfi-ac-write__error svg {\n    flex: 0 0 auto;\n    margin-top: 3px;\n  }\n  .cfi-ac-md {\n    overflow-wrap: anywhere;\n  }\n  .cfi-ac-md > :first-child {\n    margin-top: 0;\n  }\n  .cfi-ac-md > :last-child {\n    margin-bottom: 0;\n  }\n  .cfi-ac-md p,\n  .cfi-ac-md ul,\n  .cfi-ac-md ol {\n    margin: 0.5em 0;\n  }\n  .cfi-ac-md ul,\n  .cfi-ac-md ol {\n    padding-left: 1.25rem;\n  }\n  .cfi-ac-md h1,\n  .cfi-ac-md h2,\n  .cfi-ac-md h3,\n  .cfi-ac-md h4 {\n    margin: 0.75em 0 0.25em;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-md a,\n  .cfi-ac-citation {\n    color: var(--cfi-content-link, var(--cfi-ac-action));\n  }\n  .cfi-ac-md code {\n    padding: 0.1em 0.3em;\n    border-radius: 4px;\n    background: var(--cfi-ac-bg-muted);\n    font-family: var(--cfi-font-family-mono, ui-monospace, monospace);\n    font-size: 0.9em;\n  }\n  .cfi-ac-md pre {\n    overflow-x: auto;\n    padding: var(--cfi-spacing-sm, 0.5rem);\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-ac-bg-muted);\n  }\n  .cfi-ac-md pre code {\n    padding: 0;\n    background: none;\n  }\n  .cfi-ac-md blockquote {\n    margin: 0.5em 0;\n    padding-left: 0.75em;\n    border-left: 3px solid var(--cfi-ac-border);\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-md-table,\n  .cfi-ac-table__scroll {\n    overflow-x: auto;\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius);\n  }\n  .cfi-ac-md-table {\n    margin: 0.5em 0;\n  }\n  .cfi-ac-md table,\n  .cfi-ac-table table,\n  .cfi-ac-write__diff {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ac-md th,\n  .cfi-ac-md td,\n  .cfi-ac-table th,\n  .cfi-ac-table td {\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--cfi-ac-border-subtle);\n    text-align: left;\n    vertical-align: top;\n  }\n  .cfi-ac-md th,\n  .cfi-ac-table th {\n    background: var(--cfi-ac-bg-muted);\n    font-weight: var(--cfi-font-weight-medium, 500);\n    color: var(--cfi-ac-fg-muted);\n    white-space: nowrap;\n  }\n  .cfi-ac-md tr:last-child td,\n  .cfi-ac-table tr:last-child td {\n    border-bottom: none;\n  }\n  .cfi-ac-block {\n    margin: 0;\n    min-width: 0;\n  }\n  .cfi-ac-block__title {\n    margin-bottom: 4px;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-table [data-numeric] {\n    text-align: right;\n  }\n  .cfi-ac-table td[data-fit=short] {\n    white-space: nowrap;\n  }\n  .cfi-ac-table td[data-fit=long] {\n    min-width: 11rem;\n  }\n  .cfi-ac-table th button {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    padding: 0;\n    border: none;\n    background: none;\n    font-weight: inherit;\n    cursor: pointer;\n  }\n  .cfi-ac-table th[data-numeric] button {\n    flex-direction: row-reverse;\n  }\n  .cfi-ac-table th button:hover {\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-status {\n    display: inline-block;\n    padding: 0 6px;\n    border-radius: var(--cfi-radius-full, 9999px);\n    background: var(--cfi-color-neutral-soft, #f3f4f6);\n    color: var(--cfi-color-neutral-text, #374151);\n    white-space: nowrap;\n  }\n  .cfi-ac-status[data-tone=good] {\n    background: var(--cfi-color-success-soft, #ecfdf5);\n    color: var(--cfi-color-success-text, #065f46);\n  }\n  .cfi-ac-status[data-tone=bad] {\n    background: var(--cfi-color-error-soft, #fef2f2);\n    color: var(--cfi-color-error-text, #991b1b);\n  }\n  .cfi-ac-status[data-tone=warn] {\n    background: var(--cfi-color-warning-soft, #fffbeb);\n    color: var(--cfi-color-warning-text, #92400e);\n  }\n  .cfi-ac-chart__frame {\n    width: 100%;\n    padding: 4px 0;\n  }\n  .cfi-ac-chart--loading {\n    height: 260px;\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-ac-bg-muted);\n  }\n  .cfi-ac-kpis {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n    gap: var(--cfi-spacing-xs, 0.25rem);\n  }\n  .cfi-ac-kpi {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: var(--cfi-spacing-sm, 0.5rem);\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius);\n  }\n  .cfi-ac-kpi__label {\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-kpi__value {\n    font-size: var(--cfi-font-size-lg, 1.125rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ac-kpi__change {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-kpi[data-tone=good] .cfi-ac-kpi__change {\n    color: var(--cfi-color-success-text, #065f46);\n  }\n  .cfi-ac-kpi[data-tone=bad] .cfi-ac-kpi__change {\n    color: var(--cfi-color-error-text, #991b1b);\n  }\n  .cfi-ac-entities {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  .cfi-ac-entity {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: "type label go" "type sub go";\n    align-items: center;\n    column-gap: var(--cfi-spacing-sm, 0.5rem);\n    width: 100%;\n    padding: 6px var(--cfi-spacing-sm, 0.5rem);\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-ac-bg);\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-entity:hover {\n    border-color: var(--cfi-ac-action);\n    background: var(--cfi-ac-action-soft);\n  }\n  .cfi-ac-entity__type {\n    grid-area: type;\n    padding: 1px 6px;\n    border-radius: 4px;\n    background: var(--cfi-ac-bg-muted);\n    font-size: 11px;\n    text-transform: capitalize;\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-entity__label {\n    grid-area: label;\n    font-weight: var(--cfi-font-weight-medium, 500);\n    overflow-wrap: anywhere;\n  }\n  .cfi-ac-entity__sub {\n    grid-area: sub;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-entity__go {\n    grid-area: go;\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-actions,\n  .cfi-ac-write__buttons {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n  }\n  .cfi-ac-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 12px;\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius);\n    background: var(--cfi-ac-bg);\n    font-weight: var(--cfi-font-weight-medium, 500);\n    cursor: pointer;\n  }\n  .cfi-ac-btn:hover:not(:disabled) {\n    background: var(--cfi-ac-bg-hover);\n  }\n  .cfi-ac-btn[data-variant=primary] {\n    border-color: var(--cfi-ac-action);\n    background: var(--cfi-ac-action);\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-btn[data-variant=primary]:hover:not(:disabled) {\n    background: var(--cfi-ac-action-hover);\n  }\n  .cfi-ac-btn:disabled {\n    opacity: 0.6;\n    cursor: default;\n  }\n  .cfi-ac-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .cfi-ac-chip {\n    padding: 4px 10px;\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-radius-full, 9999px);\n    background: var(--cfi-ac-bg);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-chip:hover:not(:disabled) {\n    border-color: var(--cfi-ac-action);\n    background: var(--cfi-ac-action-soft);\n  }\n  .cfi-ac-chip[data-variant=rewrite] {\n    border-style: dashed;\n  }\n  .cfi-ac-chip:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  .cfi-ac-question {\n    padding: var(--cfi-spacing-sm, 0.5rem);\n    border-left: 3px solid var(--cfi-ac-accent);\n    border-radius: 2px;\n    background: var(--cfi-ac-accent-soft);\n  }\n  .cfi-ac-question__text {\n    margin: 0 0 6px;\n    font-weight: var(--cfi-font-weight-medium, 500);\n  }\n  .cfi-ac-followups__label {\n    display: block;\n    margin-bottom: 4px;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-citations {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n  .cfi-ac-citation {\n    display: inline-flex;\n    align-items: center;\n    min-height: 24px;\n    gap: 6px;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    text-decoration: none;\n  }\n  .cfi-ac-citation:hover {\n    text-decoration: underline;\n  }\n  .cfi-ac-citation[aria-disabled=true] {\n    color: var(--cfi-ac-fg-subtle);\n    pointer-events: none;\n  }\n  .cfi-ac-citation__section {\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-write {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n    border: 1px solid var(--cfi-ac-action);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-bg);\n  }\n  .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) {\n    border-color: var(--cfi-ac-border);\n    background: var(--cfi-ac-ground);\n  }\n  .cfi-ac-write__head p {\n    margin: 0;\n  }\n  .cfi-ac-write__kicker {\n    font-size: 11px;\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    letter-spacing: var(--cfi-letter-spacing-wide, 0.025em);\n    text-transform: uppercase;\n    color: var(--cfi-ac-action);\n  }\n  .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) .cfi-ac-write__kicker {\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-write__summary {\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-write__entity {\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-write__diff th,\n  .cfi-ac-write__diff td {\n    padding: 4px 6px;\n    border-bottom: 1px solid var(--cfi-ac-border-subtle);\n    text-align: left;\n    vertical-align: top;\n    overflow-wrap: anywhere;\n  }\n  .cfi-ac-write__diff thead th {\n    font-weight: var(--cfi-font-weight-medium, 500);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-write__diff tbody th {\n    font-weight: var(--cfi-font-weight-medium, 500);\n    color: var(--cfi-ac-fg-muted);\n    white-space: nowrap;\n  }\n  .cfi-ac-write__before {\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-write__after[data-changed] {\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-write__file {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n  }\n  .cfi-ac-write__status {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    font-weight: var(--cfi-font-weight-medium, 500);\n    color: var(--cfi-ac-fg-muted);\n  }\n  .cfi-ac-write__status[data-tone=good] {\n    color: var(--cfi-color-success-text, #065f46);\n  }\n  .cfi-ac-write__status[data-tone=bad] {\n    color: var(--cfi-color-error-text, #991b1b);\n  }\n  .cfi-ac-composer__tools {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n  }\n  .cfi-ac-understood {\n    margin: 0;\n    color: var(--cfi-ac-fg-subtle);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-understood__label {\n    color: var(--cfi-ac-fg-muted);\n    font-weight: var(--cfi-font-weight-medium, 500);\n  }\n  .cfi-ac-based {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    margin: 0;\n    color: var(--cfi-ac-fg-subtle);\n    font-size: 11px;\n  }\n  .cfi-ac-based__label {\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  .cfi-ac-based__chip {\n    display: inline-flex;\n    align-items: center;\n    min-height: 24px;\n    padding: 1px 8px;\n    border-radius: 999px;\n    background: var(--cfi-ac-bg-hover);\n    color: var(--cfi-ac-fg-muted);\n  }\n  a.cfi-ac-based__chip,\n  .cfi-ac-based__chip--link {\n    border: none;\n    color: var(--cfi-ac-action);\n    font: inherit;\n    text-decoration: none;\n    cursor: pointer;\n  }\n  a.cfi-ac-based__chip:hover,\n  .cfi-ac-based__chip--link:hover {\n    text-decoration: underline;\n  }\n  a.cfi-ac-based__chip:focus-visible {\n    outline: 2px solid var(--cfi-ac-action);\n    outline-offset: 1px;\n  }\n  .cfi-ac-elapsed {\n    margin-left: auto;\n    color: var(--cfi-ac-fg-subtle);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ac-card {\n    position: relative;\n  }\n  .cfi-ac-card__foldbtn {\n    position: absolute;\n    z-index: 1;\n    color: var(--cfi-ac-action-fg);\n    top: var(--cfi-spacing-xs, 0.25rem);\n    right: var(--cfi-spacing-xs, 0.25rem);\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n  .cfi-ac-card__foldbtn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-card:hover .cfi-ac-card__foldbtn,\n  .cfi-ac-card__foldbtn:focus-visible {\n    opacity: 1;\n  }\n  .cfi-ac-card--folded {\n    padding: 0;\n    border-color: var(--cfi-ac-action);\n    background: var(--cfi-ac-action);\n  }\n  .cfi-ac-card--folded .cfi-ac-card__fold {\n    color: var(--cfi-ac-action-fg);\n  }\n  .cfi-ac-card__fold {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    width: 100%;\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n    border: none;\n    background: transparent;\n    color: var(--cfi-ac-fg);\n    font: inherit;\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-card__fold > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ac-ready {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    padding: 2px 10px;\n    border-radius: 999px;\n    background: var(--cfi-ac-accent-soft);\n    color: var(--cfi-ac-accent);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-ready__dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 999px;\n    background: var(--cfi-color-success, #10b981);\n  }\n  .cfi-ac-catalog__heading {\n    align-self: stretch;\n    margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n    color: var(--cfi-ac-fg-subtle);\n    font-size: 11px;\n    font-weight: var(--cfi-font-weight-semibold, 600);\n    letter-spacing: 0.04em;\n    text-align: left;\n    text-transform: uppercase;\n  }\n  .cfi-ac-catalog {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n  }\n  .cfi-ac-catalog__group {\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-raised);\n    overflow: hidden;\n  }\n  .cfi-ac-catalog__toggle {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    width: 100%;\n    padding: var(--cfi-spacing-sm, 0.5rem);\n    border: none;\n    background: transparent;\n    color: var(--cfi-ac-fg);\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-catalog__name {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-catalog__blurb {\n    overflow: hidden;\n    color: var(--cfi-ac-fg-subtle);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    font-weight: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ac-catalog__count {\n    padding: 0 6px;\n    border-radius: 999px;\n    background: var(--cfi-ac-accent-soft);\n    color: var(--cfi-ac-accent);\n    font-size: 10px;\n    font-weight: var(--cfi-font-weight-semibold, 600);\n  }\n  .cfi-ac-catalog__questions {\n    display: flex;\n    flex-direction: column;\n    padding: var(--cfi-spacing-xs, 0.25rem);\n    border-top: 1px solid var(--cfi-ac-border-subtle);\n    background: var(--cfi-ac-ground);\n  }\n  .cfi-ac-catalog__q {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    padding: 6px var(--cfi-spacing-sm, 0.5rem);\n    border: none;\n    border-radius: var(--cfi-ac-radius);\n    background: transparent;\n    color: var(--cfi-ac-fg);\n    font: inherit;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-catalog__q:hover {\n    background: var(--cfi-ac-raised);\n    color: var(--cfi-ac-accent);\n  }\n  .cfi-ac-catalog__q svg {\n    flex: 0 0 auto;\n    margin-top: 4px;\n  }\n  .cfi-ac-grounded {\n    display: flex;\n    align-self: stretch;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n    padding: 0 var(--cfi-spacing-xs, 0.25rem);\n    color: var(--cfi-ac-fg-muted);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    text-align: left;\n  }\n  .cfi-ac-grounded svg {\n    flex: 0 0 auto;\n    margin-top: 2px;\n  }\n  .cfi-ac-grounded strong {\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-write--folded {\n    padding: 0;\n  }\n  .cfi-ac-write__fold {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n    width: 100%;\n    padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n    border: none;\n    background: transparent;\n    color: var(--cfi-ac-fg-muted);\n    font: inherit;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    text-align: left;\n    cursor: pointer;\n  }\n  .cfi-ac-write__fold:hover {\n    color: var(--cfi-ac-fg);\n  }\n  .cfi-ac-write__fold--close {\n    width: auto;\n    padding: 0 0 var(--cfi-spacing-xs, 0.25rem);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-write__fold-mark[data-tone=good],\n  .cfi-ac-write__fold-status[data-tone=good] {\n    color: var(--cfi-color-success-text, #065f46);\n  }\n  .cfi-ac-write__fold-text {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    color: var(--cfi-ac-fg);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ac-write__fold-status {\n    flex: 0 0 auto;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-confirm-all {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    color: var(--cfi-ac-fg-muted);\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n  }\n  .cfi-ac-cardwrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-spacing-xs, 0.25rem);\n  }\n  .cfi-ac-time {\n    align-self: flex-end;\n    padding-right: var(--cfi-spacing-xs, 0.25rem);\n    color: var(--cfi-ac-fg-subtle);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-a__foot {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n  }\n  .cfi-ac-a__foot:empty {\n    display: none;\n  }\n  .cfi-ac-copy {\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n  .cfi-ac-a:hover .cfi-ac-copy,\n  .cfi-ac-copy:focus-visible {\n    opacity: 1;\n  }\n  .cfi-ac-panel[data-expanded] {\n    position: absolute;\n    inset: 0;\n    z-index: 30;\n    max-width: none;\n    min-width: 0;\n    border-left: none;\n  }\n  .cfi-ac-panel[data-expanded] .cfi-ac-timeline {\n    scrollbar-gutter: stable both-edges;\n  }\n  .cfi-ac-panel[data-expanded] .cfi-ac-timeline > * {\n    width: 100%;\n    max-width: 52rem;\n    margin-inline: auto;\n  }\n  .cfi-ac-panel[data-expanded] .cfi-ac-page-starters,\n  .cfi-ac-panel[data-expanded] .cfi-ac-composer {\n    padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n  }\n  .cfi-ac-page-starters {\n    flex: 0 0 auto;\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) 0;\n    border-top: 1px solid var(--cfi-ac-border);\n    background: var(--cfi-ac-ground);\n  }\n  .cfi-ac-page-starters__label {\n    display: block;\n    margin-bottom: 4px;\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-composer {\n    flex: 0 0 auto;\n    background: var(--cfi-ac-ground);\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n  }\n  .cfi-ac-composer__page {\n    margin: 0 0 4px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ac-composer__files {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    margin: 0 0 6px;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ac-composer__files li {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    max-width: 100%;\n    padding: 2px 4px 2px 8px;\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-radius-full, 9999px);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-composer__file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ac-composer__files button {\n    display: grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: none;\n    cursor: pointer;\n  }\n  .cfi-ac-composer__files button:hover {\n    background: var(--cfi-ac-bg-hover);\n  }\n  .cfi-ac-composer__box {\n    border: 1px solid var(--cfi-border-strong, #d1d5db);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-raised);\n  }\n  .cfi-ac-composer__box:focus-within {\n    border-color: var(--cfi-border-focus, var(--cfi-ac-action));\n  }\n  .cfi-ac-composer textarea {\n    display: block;\n    width: 100%;\n    max-height: 140px;\n    overflow-y: auto;\n    padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    resize: none;\n  }\n  .cfi-ac-composer textarea::placeholder {\n    color: var(--cfi-ac-fg-subtle);\n    opacity: 1;\n  }\n  .cfi-ac-composer textarea:focus-visible {\n    outline: none;\n  }\n  .cfi-ac-composer__box:focus-within {\n    outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n    outline-offset: 1px;\n  }\n  .cfi-ac-composer__row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 2px 4px 4px;\n  }\n  .cfi-ac-send {\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: var(--cfi-ac-action);\n    color: var(--cfi-ac-action-fg);\n    cursor: pointer;\n  }\n  .cfi-ac-send:hover:not(:disabled) {\n    background: var(--cfi-ac-action-hover);\n  }\n  .cfi-ac-send:disabled {\n    background: var(--cfi-surface-disabled, #e5e7eb);\n    color: var(--cfi-content-disabled, #9ca3af);\n    cursor: default;\n  }\n  .cfi-ac-dropzone {\n    position: absolute;\n    inset: 8px;\n    z-index: 3;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: var(--cfi-spacing-lg, 1.5rem);\n    border: 2px dashed var(--cfi-ac-action);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: color-mix(in srgb, var(--cfi-ac-bg) 92%, transparent);\n    color: var(--cfi-ac-fg-muted);\n    text-align: center;\n    pointer-events: none;\n  }\n  @keyframes cfi-ac-rise {\n    from {\n      opacity: 0;\n      transform: translateY(4px);\n    }\n    to {\n      opacity: 1;\n      transform: none;\n    }\n  }\n  @keyframes cfi-ac-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .cfi-ac-spin {\n    animation: cfi-ac-spin 0.9s linear infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ac-card {\n      animation: none;\n    }\n    .cfi-ac-spin {\n      animation: none;\n    }\n    .cfi-ac-copy,\n    .cfi-ac-card__foldbtn {\n      transition: none;\n    }\n  }\n  @media (hover: none) {\n    .cfi-ac-copy,\n    .cfi-ac-card__foldbtn {\n      opacity: 1;\n    }\n  }\n  .cfi-ac-draft {\n    border: 1px solid var(--cfi-ac-border);\n    border-radius: var(--cfi-ac-radius-lg);\n    background: var(--cfi-ac-raised);\n    overflow: hidden;\n  }\n  .cfi-ac-draft__head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-spacing-sm, 0.5rem);\n    padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n    border-bottom: 1px solid var(--cfi-ac-border-subtle);\n  }\n  .cfi-ac-draft__head .cfi-ac-block__title {\n    margin: 0;\n  }\n  .cfi-ac-draft__meta {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    gap: 2px var(--cfi-spacing-sm, 0.5rem);\n    margin: 0;\n    padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n    border-bottom: 1px solid var(--cfi-ac-border-subtle);\n    font-size: var(--cfi-font-size-xs, 0.75rem);\n  }\n  .cfi-ac-draft__meta dt {\n    color: var(--cfi-ac-fg-subtle);\n  }\n  .cfi-ac-draft__meta dd {\n    margin: 0;\n  }\n  .cfi-ac-draft__body {\n    max-height: 320px;\n    padding: var(--cfi-spacing-sm, 0.5rem);\n    overflow-y: auto;\n    font-size: var(--cfi-font-size-sm, 0.875rem);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  .cfi-ac-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  }\n  .cfi-ac-btn[aria-disabled=true] {\n    cursor: progress;\n    opacity: 0.7;\n  }\n}\n');
+
+// src/host/AiChatSurface.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function AiChatSurface() {
+  const chat = useAiChat();
+  if (!chat || !chat.open) return null;
+  return /* @__PURE__ */ jsx8(Panel, { chat });
+}
+function Panel({ chat }) {
+  const { cards, busy, width, setWidth, setOpen, startOver, pageContext, starters, expanded, setExpanded, catalog } = chat;
+  const [showChanges, setShowChanges] = useState6(false);
+  const [showIdeas, setShowIdeas] = useState6(false);
+  const showCatalog = cards.length === 0 || showIdeas;
+  const [dragging, setDragging] = useState6(false);
+  const input = useRef3(null);
+  const timeline = useRef3(null);
+  const panel = useRef3(null);
+  useEffect4(() => {
+    input.current?.focus();
+    return () => {
+      if (document.activeElement === document.body || !document.activeElement) {
+        document.querySelector("[data-cfi-ai-chat-button]")?.focus();
+      }
+    };
+  }, []);
+  useEffect4(() => {
+    const root = panel.current;
+    if (!root) return void 0;
+    let last = null;
+    const onIn = (e) => {
+      last = e.target;
+    };
+    const rescue = () => {
+      if (!last) return;
+      if (last.isConnected && !last.disabled) return;
+      if (document.activeElement && document.activeElement !== document.body) return;
+      last = null;
+      const target = input.current ?? root.querySelector("button:not(:disabled), a[href]");
+      target?.focus();
+    };
+    const observer = new MutationObserver(() => window.setTimeout(rescue, 0));
+    observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled"] });
+    root.addEventListener("focusin", onIn);
+    return () => {
+      observer.disconnect();
+      root.removeEventListener("focusin", onIn);
+    };
+  }, []);
+  useEffect4(() => {
+    const root = panel.current;
+    if (!expanded || !root?.parentElement) return void 0;
+    const covered = Array.from(root.parentElement.children).filter((el) => el !== root && !el.hasAttribute("inert"));
+    covered.forEach((el) => el.setAttribute("inert", ""));
+    return () => covered.forEach((el) => el.removeAttribute("inert"));
+  }, [expanded]);
+  const streamingId = useRef3(null);
+  useEffect4(() => {
+    const exchanges = cards.flatMap((c) => c.exchanges);
+    const live = exchanges.find((e) => e.status === "streaming");
+    if (live && streamingId.current !== live.id) {
+      streamingId.current = live.id;
+      announce("Looking that up");
+    } else if (!live && streamingId.current) {
+      const done = exchanges.find((e) => e.id === streamingId.current);
+      streamingId.current = null;
+      if (done?.status === "done") announce("Answer ready");
+    }
+  }, [cards]);
+  const pinned = useRef3(true);
+  useEffect4(() => {
+    const el = timeline.current;
+    if (el && pinned.current) el.scrollTop = el.scrollHeight;
+  }, [cards]);
+  const loadDraft = useCallback2(
+    (text) => {
+      chat.setDraft(text);
+      requestAnimationFrame(() => {
+        const el = input.current;
+        if (!el) return;
+        el.focus();
+        el.setSelectionRange(text.length, text.length);
+      });
+    },
+    [chat]
+  );
+  const pickStarter = (template) => {
+    const { text, ready } = fillStarter(template, pageContext);
+    setShowIdeas(false);
+    if (ready && !busy) {
+      pinned.current = true;
+      void chat.send(text);
+    } else loadDraft(starterLabel(template, pageContext));
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (e.dataTransfer.files.length) chat.addFiles(e.dataTransfer.files);
+  };
+  const pageChanged = cards.length > 0 && lastAskedPage(cards) !== pageContext.page;
+  return /* @__PURE__ */ jsxs6(
+    "aside",
+    {
+      ref: panel,
+      className: "cfi-ac-root cfi-ac-panel",
+      style: expanded ? void 0 : { width },
+      "aria-label": "AI chat",
+      "data-dragging": dragging || void 0,
+      "data-expanded": expanded || void 0,
+      onKeyDown: (e) => {
+        if (e.key !== "Escape" || e.defaultPrevented) return;
+        e.preventDefault();
+        if (expanded) setExpanded(false);
+        else setOpen(false);
+      },
+      onDragOver: (e) => {
+        if (Array.from(e.dataTransfer.types).includes("Files")) {
+          e.preventDefault();
+          setDragging(true);
+        }
+      },
+      onDragLeave: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+      },
+      onDrop,
+      children: [
+        /* @__PURE__ */ jsx8(Announcer, {}),
+        !expanded && /* @__PURE__ */ jsx8(ResizeHandle, { width, setWidth }),
+        /* @__PURE__ */ jsxs6("header", { className: "cfi-ac-head", children: [
+          /* @__PURE__ */ jsx8("span", { className: "cfi-ac-head__mark", "aria-hidden": true, children: /* @__PURE__ */ jsx8(Sparkles, { size: 16 }) }),
+          /* @__PURE__ */ jsx8("h2", { className: "cfi-ac-head__title", children: "AI chat" }),
+          /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-head__tools", children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "cfi-ac-icon-btn",
+                "aria-pressed": showChanges,
+                "aria-label": "Changes made this session",
+                title: "Changes made this session",
+                onClick: () => {
+                  const next = !showChanges;
+                  setShowChanges(next);
+                  if (next) void chat.refreshChanges();
+                },
+                children: /* @__PURE__ */ jsx8(History, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "cfi-ac-icon-btn",
+                "aria-label": "Start over",
+                title: "Start over",
+                disabled: cards.length === 0 && chat.stagedFiles.length === 0,
+                onClick: () => {
+                  setShowChanges(false);
+                  startOver();
+                },
+                children: /* @__PURE__ */ jsx8(RotateCcw, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "cfi-ac-icon-btn",
+                "aria-pressed": expanded,
+                "aria-label": "Expanded view",
+                title: expanded ? "Dock beside the page (Esc)" : "Expand over the page",
+                onClick: () => setExpanded(!expanded),
+                children: expanded ? /* @__PURE__ */ jsx8(Minimize2, { size: 16 }) : /* @__PURE__ */ jsx8(Maximize2, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "cfi-ac-icon-btn", "aria-label": "Close AI chat", title: "Close (Ctrl+J)", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx8(X2, { size: 16 }) })
+          ] })
+        ] }),
+        showChanges ? /* @__PURE__ */ jsx8(ChangesList, { chat, onBack: () => setShowChanges(false) }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "cfi-ac-timeline",
+              ref: timeline,
+              onScroll: (e) => {
+                const el = e.currentTarget;
+                pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+              },
+              children: showCatalog ? /* @__PURE__ */ jsx8(
+                Catalog,
+                {
+                  starters,
+                  catalog,
+                  page: pageContext,
+                  busy,
+                  onPick: pickStarter,
+                  onBack: cards.length > 0 ? () => setShowIdeas(false) : void 0
+                }
+              ) : cards.map((card, i) => /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-cardwrap", children: [
+                /* @__PURE__ */ jsx8(CardView, { card, chat, loadDraft }),
+                endsTimeGroup(cards, i) && /* @__PURE__ */ jsx8(CardTime, { at: cardTime(card) })
+              ] }, card.id))
+            }
+          ),
+          !showCatalog && pageChanged && starters.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-page-starters", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-page-starters__label", children: [
+              "On ",
+              pageContext.title
+            ] }),
+            /* @__PURE__ */ jsx8(Starters, { starters, page: pageContext, onPick: pickStarter, busy })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            Composer,
+            {
+              chat,
+              input,
+              onSent: () => {
+                pinned.current = true;
+                setShowIdeas(false);
+              },
+              ideas: cards.length > 0 ? { open: showIdeas, toggle: () => setShowIdeas((v) => !v) } : void 0
+            }
+          )
+        ] }),
+        dragging && /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-dropzone", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx8(Paperclip2, { size: 20 }),
+          "Drop to add to your message. Nothing is uploaded until you confirm an attach."
+        ] })
+      ]
+    }
+  );
+}
+function ResizeHandle({ width, setWidth }) {
+  const dragging = useRef3(false);
+  useEffect4(() => {
+    const onMove = (e) => {
+      if (!dragging.current) return;
+      setWidth(Math.min(window.innerWidth - 320, window.innerWidth - e.clientX));
+    };
+    const onUp = () => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [setWidth]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "cfi-ac-resize",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize AI chat",
+      "aria-valuemin": PANEL_WIDTH.min,
+      "aria-valuemax": PANEL_WIDTH.max,
+      "aria-valuenow": width,
+      "aria-valuetext": `${width} pixels wide`,
+      title: "Drag to resize. Double-click for the default width.",
+      tabIndex: 0,
+      onDoubleClick: () => setWidth(PANEL_WIDTH.default),
+      onPointerDown: (e) => {
+        e.preventDefault();
+        dragging.current = true;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+      },
+      onKeyDown: (e) => {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          setWidth(width + 32);
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          setWidth(width - 32);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          setWidth(PANEL_WIDTH.min);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          setWidth(PANEL_WIDTH.max);
+        }
+      }
+    }
+  );
+}
+function Starters({
+  starters,
+  page,
+  onPick,
+  busy
+}) {
+  if (!starters.length) return null;
+  return /* @__PURE__ */ jsx8("div", { className: "cfi-ac-chips cfi-ac-starters", children: starters.map((s) => /* @__PURE__ */ jsx8("button", { type: "button", className: "cfi-ac-chip", disabled: busy, onClick: () => onPick(s), children: starterLabel(s, page) }, s)) });
+}
+function Catalog({
+  starters,
+  catalog,
+  page,
+  busy,
+  onPick,
+  onBack
+}) {
+  const [openGroup, setOpenGroup] = useState6(catalog[0]?.label ?? null);
+  const focus = page.entities[page.entities.length - 1];
+  return /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-empty", children: [
+    onBack && /* @__PURE__ */ jsxs6("button", { type: "button", className: "cfi-ac-changes__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx8(ArrowLeft, { size: 14, "aria-hidden": true }),
+      "Back to the conversation"
+    ] }),
+    /* @__PURE__ */ jsx8("span", { className: "cfi-ac-empty__mark", "aria-hidden": true, children: /* @__PURE__ */ jsx8(Sparkles, { size: 22 }) }),
+    /* @__PURE__ */ jsx8("p", { className: "cfi-ac-empty__title", children: "Ask about what you are looking at" }),
+    /* @__PURE__ */ jsx8("p", { className: "cfi-ac-empty__sub", children: "Questions about your data, how-to questions, and small changes you confirm before anything is saved." }),
+    focus?.label && /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-ready", children: [
+      /* @__PURE__ */ jsx8("span", { className: "cfi-ac-ready__dot", "aria-hidden": true }),
+      "Ready on ",
+      focus.label
+    ] }),
+    starters.length > 0 && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("h3", { className: "cfi-ac-catalog__heading", children: "Ask now" }),
+      /* @__PURE__ */ jsx8(Starters, { starters, page, onPick, busy })
+    ] }),
+    catalog.length > 0 && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("h3", { className: "cfi-ac-catalog__heading", children: "Browse by topic" }),
+      /* @__PURE__ */ jsx8("div", { className: "cfi-ac-catalog", children: catalog.map((group) => {
+        const open = openGroup === group.label;
+        return /* @__PURE__ */ jsxs6("section", { className: "cfi-ac-catalog__group", children: [
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              className: "cfi-ac-catalog__toggle",
+              "aria-expanded": open,
+              onClick: () => setOpenGroup(open ? null : group.label),
+              children: [
+                /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-catalog__name", children: [
+                  group.label,
+                  group.blurb && /* @__PURE__ */ jsx8("span", { className: "cfi-ac-catalog__blurb", children: group.blurb })
+                ] }),
+                /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-catalog__count", children: [
+                  group.questions.length,
+                  /* @__PURE__ */ jsx8("span", { className: "cfi-ac-sr-only", children: " questions" })
+                ] }),
+                open ? /* @__PURE__ */ jsx8(ChevronDown2, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx8(ChevronRight2, { size: 14, "aria-hidden": true })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx8("div", { className: "cfi-ac-catalog__questions", children: group.questions.map((q) => {
+            const { ready } = fillStarter(q, page);
+            return /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                className: "cfi-ac-catalog__q",
+                disabled: busy && ready,
+                title: ready ? void 0 : "Name it, then send",
+                onClick: () => onPick(q),
+                children: [
+                  /* @__PURE__ */ jsx8(ChevronRight2, { size: 12, "aria-hidden": true }),
+                  /* @__PURE__ */ jsxs6("span", { children: [
+                    starterLabel(q, page),
+                    !ready && /* @__PURE__ */ jsx8("span", { className: "cfi-ac-muted", children: " (name it)" })
+                  ] })
+                ]
+              },
+              q
+            );
+          }) })
+        ] }, group.label);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-grounded", children: [
+      /* @__PURE__ */ jsx8(Lock, { size: 12, "aria-hidden": true }),
+      /* @__PURE__ */ jsxs6("span", { children: [
+        /* @__PURE__ */ jsx8("strong", { children: "Grounded in your own data." }),
+        " Every answer is read with your permissions, so you see what you would see on the screens. Nothing changes until you confirm it."
+      ] })
+    ] })
+  ] });
+}
+function CardTime({ at }) {
+  const d = new Date(at);
+  const today = (/* @__PURE__ */ new Date()).toDateString() === d.toDateString();
+  const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+  const label = today ? time : `${d.toLocaleDateString(void 0, { month: "short", day: "numeric" })}, ${time}`;
+  return /* @__PURE__ */ jsx8("time", { className: "cfi-ac-time", dateTime: d.toISOString(), children: label });
+}
+function CopyAnswer({ ex }) {
+  const [copied, setCopied] = useState6(false);
+  const text = ex.parts.flatMap((p) => p.kind === "markdown" ? [p.text] : []).join("\n").trim();
+  if (!text) return null;
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      className: "cfi-ac-icon-btn cfi-ac-copy",
+      "aria-label": copied ? "Copied" : "Copy answer",
+      title: copied ? "Copied" : "Copy answer",
+      onClick: () => {
+        void navigator.clipboard?.writeText(text).then(() => {
+          setCopied(true);
+          announce("Answer copied");
+          window.setTimeout(() => setCopied(false), 1500);
+        });
+      },
+      children: copied ? /* @__PURE__ */ jsx8(Check3, { size: 13 }) : /* @__PURE__ */ jsx8(Copy2, { size: 13 })
+    }
+  );
+}
+function CardView({ card, chat, loadDraft }) {
+  const [folded, setFolded] = useState6(false);
+  const toggled = useRef3(false);
+  const foldRef = useRef3(null);
+  useEffect4(() => {
+    if (!toggled.current) return;
+    toggled.current = false;
+    foldRef.current?.focus();
+  }, [folded]);
+  const fold = (next) => {
+    toggled.current = true;
+    setFolded(next);
+  };
+  const streaming = card.exchanges.some((e) => e.status === "streaming");
+  const handlers = {
+    navigate: chat.navigate,
+    send: (t) => void chat.send(t),
+    load: loadDraft,
+    answer: (t) => void chat.send(t, { foldInto: card.id }),
+    busy: chat.busy
+  };
+  if (folded) {
+    return /* @__PURE__ */ jsx8("article", { className: "cfi-ac-card cfi-ac-card--folded", children: /* @__PURE__ */ jsxs6("button", { ref: foldRef, type: "button", className: "cfi-ac-card__fold", "aria-expanded": false, onClick: () => fold(false), children: [
+      /* @__PURE__ */ jsx8(ChevronRight2, { size: 13, "aria-hidden": true }),
+      /* @__PURE__ */ jsx8("span", { children: card.exchanges[0].question })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs6("article", { className: "cfi-ac-card", children: [
+    !streaming && /* @__PURE__ */ jsx8(
+      "button",
+      {
+        ref: foldRef,
+        type: "button",
+        className: "cfi-ac-icon-btn cfi-ac-card__foldbtn",
+        "aria-label": "Fold this answer",
+        "aria-expanded": true,
+        title: "Fold this answer",
+        onClick: () => fold(true),
+        children: /* @__PURE__ */ jsx8(ChevronDown2, { size: 13 })
+      }
+    ),
+    card.exchanges.map((ex, i) => /* @__PURE__ */ jsx8(ExchangeView, { ex, reply: i > 0, chat, handlers }, ex.id))
+  ] });
+}
+function ExchangeView({
+  ex,
+  reply,
+  chat,
+  handlers
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-exchange", "data-reply": reply || void 0, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-q", children: [
+      /* @__PURE__ */ jsx8("h3", { className: "cfi-ac-q__text", children: ex.question }),
+      !reply && /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-q__where", children: [
+        /* @__PURE__ */ jsx8(MapPin, { size: 11, "aria-hidden": true }),
+        "asked on ",
+        pageLabel(ex.askedOn)
+      ] }),
+      ex.attachments.length > 0 && !reply && /* @__PURE__ */ jsx8("ul", { className: "cfi-ac-q__files", children: ex.attachments.map((f) => /* @__PURE__ */ jsxs6("li", { children: [
+        /* @__PURE__ */ jsx8(Paperclip2, { size: 11, "aria-hidden": true }),
+        f.name
+      ] }, f.fileRef)) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-a", children: [
+      ex.parts.map(
+        (part, i) => part.kind === "block" && part.block.kind === "understood" ? /* @__PURE__ */ jsx8(BlockView, { block: part.block, handlers }, `u${i}`) : null
+      ),
+      /* @__PURE__ */ jsx8(Steps, { steps: ex.steps, streaming: ex.status === "streaming", since: ex.askedAt }),
+      [
+        ...ex.parts.map((part, i) => ({ part, i })).filter(({ part }) => !(part.kind === "block" && part.block.kind === "followups")),
+        ...ex.parts.map((part, i) => ({ part, i })).filter(({ part }) => part.kind === "block" && part.block.kind === "followups")
+      ].map(
+        ({ part, i }) => part.kind === "markdown" ? /* @__PURE__ */ jsx8(Markdown, { text: part.text }, i) : part.kind === "block" && part.block.kind === "understood" ? null : part.kind === "block" ? /* @__PURE__ */ jsx8(BlockView, { block: part.block, handlers }, i) : /* @__PURE__ */ jsx8(
+          WriteCard,
+          {
+            item: part.item,
+            onConfirm: () => void chat.confirmWrite(ex.id, part.item.write.token),
+            onCancel: () => chat.cancelWrite(ex.id, part.item.write.token)
+          },
+          part.item.write.token
+        )
+      ),
+      ex.status === "done" && /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-a__foot", children: [
+        ex.sources && ex.sources.length > 0 && /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-based", children: [
+          /* @__PURE__ */ jsx8("span", { className: "cfi-ac-based__label", children: "Based on" }),
+          ex.sources.map(
+            (s) => s.path && s.app ? (
+              // Another app's page: the host opens it there (its own address, often a new tab).
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  className: "cfi-ac-based__chip cfi-ac-based__chip--link",
+                  onClick: () => chat.navigate({ app: s.app, path: s.path }),
+                  children: s.label
+                },
+                s.label
+              )
+            ) : s.path ? /* @__PURE__ */ jsx8(
+              "a",
+              {
+                className: "cfi-ac-based__chip",
+                href: s.path,
+                onClick: (e) => {
+                  if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                  e.preventDefault();
+                  chat.navigate({ app: chat.app, path: s.path });
+                },
+                children: s.label
+              },
+              s.label
+            ) : /* @__PURE__ */ jsx8("span", { className: "cfi-ac-based__chip", children: s.label }, s.label)
+          )
+        ] }),
+        /* @__PURE__ */ jsx8(CopyAnswer, { ex })
+      ] }),
+      pendingCount(ex) > 1 && /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-confirm-all", children: [
+        /* @__PURE__ */ jsxs6("span", { children: [
+          pendingCount(ex),
+          " changes waiting"
+        ] }),
+        /* @__PURE__ */ jsxs6("button", { type: "button", className: "cfi-ac-btn", "data-variant": "primary", onClick: () => void chat.confirmAll(ex.id), children: [
+          /* @__PURE__ */ jsx8(Check3, { size: 14, "aria-hidden": true }),
+          "Confirm all"
+        ] })
+      ] }),
+      ex.status === "streaming" && ex.parts.length === 0 && ex.steps.length === 0 && /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-thinking", children: [
+        /* @__PURE__ */ jsx8(Loader22, { className: "cfi-ac-spin", size: 14, "aria-hidden": true }),
+        "Thinking\u2026",
+        /* @__PURE__ */ jsx8(Elapsed, { since: ex.askedAt })
+      ] }),
+      ex.status === "error" && /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-error", role: "alert", children: [
+        /* @__PURE__ */ jsx8(CircleAlert2, { size: 14, "aria-hidden": true }),
+        ex.error
+      ] })
+    ] })
+  ] });
+}
+function pendingCount(ex) {
+  return ex.parts.filter((p) => p.kind === "write" && p.item.state === "pending").length;
+}
+function Elapsed({ since }) {
+  const [now, setNow] = useState6(() => Date.now());
+  useEffect4(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 500);
+    return () => window.clearInterval(id);
+  }, []);
+  const seconds = Math.max(0, Math.round((now - since) / 1e3));
+  return /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-elapsed", "aria-hidden": true, children: [
+    seconds,
+    "s"
+  ] });
+}
+function Steps({ steps, streaming, since }) {
+  const [open, setOpen] = useState6(false);
+  if (!steps.length) return null;
+  if (streaming) {
+    return /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-steps cfi-ac-steps--live", children: [
+      /* @__PURE__ */ jsx8(Loader22, { className: "cfi-ac-spin", size: 13, "aria-hidden": true }),
+      steps[steps.length - 1],
+      /* @__PURE__ */ jsx8(Elapsed, { since })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-steps", children: [
+    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cfi-ac-steps__toggle", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [
+      open ? /* @__PURE__ */ jsx8(ChevronDown2, { size: 13, "aria-hidden": true }) : /* @__PURE__ */ jsx8(ChevronRight2, { size: 13, "aria-hidden": true }),
+      "Checked ",
+      steps.length,
+      " ",
+      steps.length === 1 ? "thing" : "things"
+    ] }),
+    open && /* @__PURE__ */ jsx8("ol", { className: "cfi-ac-steps__list", children: steps.map((s, i) => /* @__PURE__ */ jsx8("li", { children: s }, i)) })
+  ] });
+}
+function ChangesList({ chat, onBack }) {
+  const { changes, summaries } = chat;
+  return /* @__PURE__ */ jsxs6("section", { className: "cfi-ac-changes", "aria-label": "Changes made this session", children: [
+    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cfi-ac-changes__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx8(ArrowLeft, { size: 14, "aria-hidden": true }),
+      "Back to chat"
+    ] }),
+    /* @__PURE__ */ jsx8("h3", { className: "cfi-ac-changes__title", children: "Changes made this session" }),
+    changes.loading && !changes.loaded ? /* @__PURE__ */ jsx8("p", { className: "cfi-ac-muted", role: "status", children: "Loading\u2026" }) : changes.error ? /* @__PURE__ */ jsx8("p", { className: "cfi-ac-error", role: "alert", children: changes.error }) : changes.items.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "cfi-ac-muted", children: "No changes yet. Anything you confirm here is listed, with the question that led to it." }) : /* @__PURE__ */ jsx8("ul", { className: "cfi-ac-changes__list", children: changes.items.map((a) => /* @__PURE__ */ jsxs6("li", { "data-outcome": a.outcome, children: [
+      /* @__PURE__ */ jsx8("span", { className: "cfi-ac-changes__what", children: a.summary ?? summaries[a.id] ?? (a.entityType ? `Changed a ${a.entityType}` : "Change") }),
+      /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-changes__meta", children: [
+        a.outcome === "succeeded" ? "Done" : "Not changed",
+        " \xB7",
+        " ",
+        new Date(a.confirmedAt).toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" })
+      ] }),
+      /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-changes__q", children: [
+        "\u201C",
+        a.question,
+        "\u201D"
+      ] })
+    ] }, a.id)) })
+  ] });
+}
+var COMPOSER_MAX_HEIGHT = 140;
+function Composer({
+  chat,
+  input,
+  onSent,
+  ideas
+}) {
+  const { draft, setDraft, busy, stagedFiles, pageContext, cards } = chat;
+  const picker = useRef3(null);
+  useLayoutEffect(() => {
+    const el = input.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, COMPOSER_MAX_HEIGHT)}px`;
+  }, [draft, input]);
+  const submit = () => {
+    const text = draft.trim();
+    if (!text || busy) return;
+    const fold = openQuestionCard(cards);
+    setDraft("");
+    onSent();
+    void chat.send(text, fold ? { foldInto: fold.id } : void 0);
+  };
+  const onKey = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+    const panelKey = e.key === "Escape" || (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "j";
+    if (!panelKey) e.nativeEvent.stopImmediatePropagation();
+  };
+  return /* @__PURE__ */ jsxs6(
+    "form",
+    {
+      className: "cfi-ac-composer",
+      onSubmit: (e) => {
+        e.preventDefault();
+        submit();
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("p", { className: "cfi-ac-composer__page", title: pageContext.breadcrumbs.join(" / "), children: [
+          /* @__PURE__ */ jsx8(MapPin, { size: 11, "aria-hidden": true }),
+          "On ",
+          pageLabel(pageContext)
+        ] }),
+        stagedFiles.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "cfi-ac-composer__files", "aria-label": "Files for this message", children: stagedFiles.map((f) => /* @__PURE__ */ jsxs6("li", { children: [
+          /* @__PURE__ */ jsx8(Paperclip2, { size: 12, "aria-hidden": true }),
+          /* @__PURE__ */ jsx8("span", { className: "cfi-ac-composer__file-name", children: f.name }),
+          /* @__PURE__ */ jsx8("span", { className: "cfi-ac-muted", children: formatBytes(f.size) }),
+          /* @__PURE__ */ jsx8("button", { type: "button", "aria-label": `Remove ${f.name}`, onClick: () => chat.removeFile(f.fileRef), children: /* @__PURE__ */ jsx8(X2, { size: 12 }) })
+        ] }, f.fileRef)) }),
+        /* @__PURE__ */ jsx8("p", { id: "cfi-ac-composer-hint", className: "cfi-ac-sr-only", children: "Enter sends. Shift and Enter adds a line." }),
+        /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-composer__box", children: [
+          /* @__PURE__ */ jsx8(
+            "textarea",
+            {
+              ref: input,
+              value: draft,
+              rows: 1,
+              maxLength: 4e3,
+              "aria-label": "Ask a question",
+              "aria-describedby": "cfi-ac-composer-hint",
+              placeholder: "Ask about this page, your data, or how to do something\u2026",
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: onKey
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "cfi-ac-composer__row", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "cfi-ac-composer__tools", children: [
+              ideas && /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  className: "cfi-ac-icon-btn",
+                  "aria-pressed": ideas.open,
+                  "aria-label": "Question ideas",
+                  title: ideas.open ? "Back to the conversation" : "What can I ask?",
+                  onClick: ideas.toggle,
+                  children: /* @__PURE__ */ jsx8(Lightbulb, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  className: "cfi-ac-icon-btn",
+                  "aria-label": "Add a file",
+                  title: "Add a file. It is uploaded only if you confirm attaching it.",
+                  onClick: () => picker.current?.click(),
+                  children: /* @__PURE__ */ jsx8(Paperclip2, { size: 16 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                ref: picker,
+                type: "file",
+                multiple: true,
+                hidden: true,
+                "data-testid": "ai-chat-file-input",
+                onChange: (e) => {
+                  if (e.target.files) chat.addFiles(e.target.files);
+                  e.target.value = "";
+                }
+              }
+            ),
+            busy ? /* @__PURE__ */ jsx8("button", { type: "button", className: "cfi-ac-send", "aria-label": "Stop", title: "Stop", onClick: chat.stop, children: /* @__PURE__ */ jsx8(Square, { size: 14 }) }) : /* @__PURE__ */ jsx8("button", { type: "submit", className: "cfi-ac-send", "aria-label": "Send", title: "Send (Enter)", disabled: !draft.trim(), children: /* @__PURE__ */ jsx8(Send, { size: 16 }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/host/AiChatButton.tsx
+import { useEffect as useEffect5 } from "react";
+import { Sparkles as Sparkles2 } from "lucide-react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function AiChatButton({ className }) {
+  const chat = useAiChat();
+  const toggle = chat?.toggle;
+  useEffect5(() => {
+    if (!toggle) return void 0;
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "j") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [toggle]);
+  if (!chat) return null;
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: `cfi-ac-root cfi-ac-header-btn${className ? ` ${className}` : ""}`,
+      "aria-pressed": chat.open,
+      "aria-label": "AI chat",
+      "data-cfi-ai-chat-button": "",
+      title: "AI chat (Ctrl+J)",
+      onClick: chat.toggle,
+      children: /* @__PURE__ */ jsx9(Sparkles2, { size: 18, "aria-hidden": true })
+    }
+  );
+}
+export {
+  AiChatButton,
+  AiChatProvider,
+  AiChatSurface,
+  createAssistantClient,
+  fillStarter,
+  useAiChat
+};