@pgege/kaboo-react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -30,20 +30,38 @@ __export(src_exports, {
   InterruptRenderer: () => InterruptRenderer,
   KabooActivityProvider: () => KabooActivityProvider,
   KabooProvider: () => KabooProvider,
+  KabooReferenceInput: () => KabooReferenceInput,
   MarkdownContent: () => MarkdownContent,
   MiniTable: () => MiniTable,
+  REFERENCES_STATE_KEY: () => REFERENCES_STATE_KEY,
+  REFERENCE_METADATA_KEYS: () => REFERENCE_METADATA_KEYS,
+  ReferenceStateSync: () => ReferenceStateSync,
+  ReferencesProvider: () => ReferencesProvider,
   StructuredRenderersContext: () => StructuredRenderersContext,
   Timeline: () => Timeline,
   ToolRow: () => ToolRow,
+  UPLOAD_MARKER: () => UPLOAD_MARKER,
+  attachmentToInputContent: () => attachmentToInputContent,
+  buildAttachmentsConfig: () => buildAttachmentsConfig,
+  buildUserContent: () => buildUserContent,
   directChildren: () => directChildren,
   formatToolInput: () => formatToolInput,
   formatToolResult: () => formatToolResult,
+  isUploadProvider: () => isUploadProvider,
+  mintReferenceId: () => mintReferenceId,
   normalizeResult: () => normalizeResult,
+  objectToStateEntry: () => objectToStateEntry,
+  referenceMarker: () => referenceMarker,
+  serializeReferences: () => serializeReferences,
   topLevelGroups: () => topLevelGroups,
+  uploadFileToReference: () => uploadFileToReference,
+  uploadProvider: () => uploadProvider,
   useActivity: () => useActivity,
   useDrill: () => useDrill,
   useInterruptBridge: () => useInterruptBridge,
-  useInterruptFor: () => useInterruptFor
+  useInterruptFor: () => useInterruptFor,
+  useReferences: () => useReferences,
+  withReferenceState: () => withReferenceState
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -101,7 +119,7 @@ function DrillProvider({ children }) {
 }
 
 // src/context/KabooProvider.tsx
-var import_v26 = require("@copilotkit/react-core/v2");
+var import_v27 = require("@copilotkit/react-core/v2");
 
 // src/context/InterruptBridge.tsx
 var import_react3 = require("react");
@@ -1191,8 +1209,164 @@ function InlineCardRenderer({
   );
 }
 
-// src/context/KabooProvider.tsx
+// src/references/ReferencesProvider.tsx
+var import_react10 = require("react");
+var import_v26 = require("@copilotkit/react-core/v2");
+
+// src/references/types.ts
+var REFERENCE_METADATA_KEYS = {
+  /** Metadata key carrying the reference id. */
+  id: "kaboo_id",
+  /** Metadata key carrying the reference kind. */
+  kind: "kaboo_kind",
+  /** Metadata key carrying the reference display name. */
+  name: "kaboo_name"
+};
+var REFERENCES_STATE_KEY = "kaboo_references";
+
+// src/references/serialize.ts
+function mintReferenceId(kind) {
+  const rand = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+  return `${kind}_${rand}`;
+}
+function referenceMarker(ref) {
+  return `[${ref.kind}:${ref.id}]`;
+}
+function modalityFor(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.startsWith("video/")) return "video";
+  return "document";
+}
+function attachmentToInputContent(ref) {
+  const source = "url" in ref.source ? { type: "url", value: ref.source.url, mimeType: ref.mimeType } : { type: "data", value: ref.source.data, mimeType: ref.mimeType };
+  return {
+    type: modalityFor(ref.mimeType),
+    source,
+    metadata: {
+      [REFERENCE_METADATA_KEYS.id]: ref.id,
+      [REFERENCE_METADATA_KEYS.kind]: ref.kind,
+      [REFERENCE_METADATA_KEYS.name]: ref.name,
+      filename: ref.name
+    }
+  };
+}
+function objectToStateEntry(ref) {
+  return { kind: ref.kind, id: ref.id, name: ref.name, meta: ref.meta };
+}
+function serializeReferences(refs) {
+  const attachmentParts = [];
+  const objectReferences = [];
+  for (const ref of refs) {
+    if (ref.transport === "attachment") {
+      attachmentParts.push(attachmentToInputContent(ref));
+    } else {
+      objectReferences.push(objectToStateEntry(ref));
+    }
+  }
+  return { attachmentParts, objectReferences };
+}
+function withReferenceState(state, objectReferences) {
+  const next = { ...state ?? {} };
+  if (objectReferences.length > 0) {
+    next[REFERENCES_STATE_KEY] = objectReferences;
+  } else {
+    delete next[REFERENCES_STATE_KEY];
+  }
+  return next;
+}
+function buildUserContent(text, attachmentParts) {
+  const parts = [];
+  if (text.length > 0) parts.push({ type: "text", text });
+  parts.push(...attachmentParts);
+  return parts;
+}
+
+// src/references/ReferencesProvider.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var ReferencesContext = (0, import_react10.createContext)({
+  providers: [],
+  pending: [],
+  addReference: () => {
+  },
+  removeReference: () => {
+  },
+  clearReferences: () => {
+  },
+  messageReferences: {},
+  recordMessageReferences: () => {
+  }
+});
+function ReferencesProvider({
+  providers = [],
+  syncObjectStateTo = false,
+  children
+}) {
+  const [pending, setPending] = (0, import_react10.useState)([]);
+  const [messageReferences, setMessageReferences] = (0, import_react10.useState)({});
+  const addReference = (0, import_react10.useCallback)((ref) => {
+    setPending(
+      (prev) => prev.some((r) => r.id === ref.id) ? prev : [...prev, ref]
+    );
+  }, []);
+  const removeReference = (0, import_react10.useCallback)((id) => {
+    setPending((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  const clearReferences = (0, import_react10.useCallback)(() => setPending([]), []);
+  const recordMessageReferences = (0, import_react10.useCallback)(
+    (messageId, refs) => {
+      if (refs.length === 0) return;
+      setMessageReferences((prev) => ({ ...prev, [messageId]: refs }));
+    },
+    []
+  );
+  const value = (0, import_react10.useMemo)(
+    () => ({
+      providers,
+      pending,
+      addReference,
+      removeReference,
+      clearReferences,
+      messageReferences,
+      recordMessageReferences
+    }),
+    [
+      providers,
+      pending,
+      addReference,
+      removeReference,
+      clearReferences,
+      messageReferences,
+      recordMessageReferences
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ReferencesContext.Provider, { value, children: [
+    syncObjectStateTo !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReferenceStateSync, { agentId: syncObjectStateTo, pending }),
+    children
+  ] });
+}
+function ReferenceStateSync({
+  agentId,
+  pending
+}) {
+  const { agent } = (0, import_v26.useAgent)(agentId ? { agentId } : void 0);
+  const objectRefs = (0, import_react10.useMemo)(
+    () => pending.filter((r) => r.transport === "object").map(objectToStateEntry),
+    [pending]
+  );
+  const key = JSON.stringify(objectRefs);
+  (0, import_react10.useEffect)(() => {
+    if (!agent || typeof agent.setState !== "function") return;
+    agent.setState(withReferenceState(agent.state, objectRefs));
+  }, [agent, key]);
+  return null;
+}
+function useReferences() {
+  return (0, import_react10.useContext)(ReferencesContext);
+}
+
+// src/context/KabooProvider.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function KabooProvider({
   runtimeUrl,
   agent,
@@ -1201,28 +1375,911 @@ function KabooProvider({
   interruptRenderers,
   disableInterruptHandler = false,
   disableInlineCards = false,
+  references,
   copilotKitProps,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_v26.CopilotKit,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_v27.CopilotKit,
     {
       runtimeUrl,
       agent,
       threadId,
       useSingleEndpoint: false,
       ...copilotKitProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KabooActivityProvider, { agentId: agent, structuredRenderers, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrillProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(InterruptBridgeProvider, { children: [
-        !disableInterruptHandler && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KabooInterruptHandler, { agentId: agent, renderers: interruptRenderers }),
-        !disableInlineCards && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KabooInlineCards, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KabooActivityProvider, { agentId: agent, structuredRenderers, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrillProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InterruptBridgeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ReferencesProvider, { providers: references, syncObjectStateTo: agent, children: [
+        !disableInterruptHandler && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KabooInterruptHandler, { agentId: agent, renderers: interruptRenderers }),
+        !disableInlineCards && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KabooInlineCards, {}),
         children
-      ] }) }) })
+      ] }) }) }) })
+    }
+  );
+}
+
+// src/references/ReferenceInput.tsx
+var import_react11 = require("react");
+var import_react_dom = require("react-dom");
+var import_v28 = require("@copilotkit/react-core/v2");
+
+// src/references/uploadProvider.tsx
+var UPLOAD_MARKER = "__kabooUpload";
+var DEFAULT_MAX_SIZE = 20 * 1024 * 1024;
+function readAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result);
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+async function uploadFileToReference(file, config) {
+  const kind = config.kind ?? "file";
+  const id = mintReferenceId(kind);
+  const maxSize = config.maxSize ?? DEFAULT_MAX_SIZE;
+  if (file.size > maxSize) {
+    throw new Error(`File "${file.name}" exceeds the ${maxSize}-byte limit.`);
+  }
+  if (config.onUpload) {
+    const result = await config.onUpload(file);
+    const mimeType = result.mimeType ?? file.type ?? "application/octet-stream";
+    const source = result.type === "url" ? { url: result.value } : { data: result.value };
+    return { transport: "attachment", kind, id, name: file.name, mimeType, source };
+  }
+  const data = await readAsBase64(file);
+  return {
+    transport: "attachment",
+    kind,
+    id,
+    name: file.name,
+    mimeType: file.type || "application/octet-stream",
+    source: { data }
+  };
+}
+function uploadProvider(config = {}) {
+  return {
+    id: config.id ?? "upload",
+    label: config.label ?? "Upload",
+    [UPLOAD_MARKER]: {
+      kind: config.kind ?? "file",
+      maxSize: config.maxSize ?? DEFAULT_MAX_SIZE,
+      accept: config.accept,
+      onUpload: config.onUpload
+    }
+  };
+}
+function isUploadProvider(provider) {
+  return UPLOAD_MARKER in provider;
+}
+function buildAttachmentsConfig(config = {}) {
+  const kind = config.kind ?? "file";
+  return {
+    enabled: true,
+    accept: config.accept,
+    maxSize: config.maxSize,
+    onUpload: async (file) => {
+      const id = mintReferenceId(kind);
+      const kabooMeta = {
+        [REFERENCE_METADATA_KEYS.id]: id,
+        [REFERENCE_METADATA_KEYS.kind]: kind,
+        [REFERENCE_METADATA_KEYS.name]: file.name
+      };
+      if (config.onUpload) {
+        const result = await config.onUpload(file);
+        return { ...result, metadata: { ...result.metadata ?? {}, ...kabooMeta } };
+      }
+      const value = await readAsBase64(file);
+      return {
+        type: "data",
+        value,
+        mimeType: file.type || "application/octet-stream",
+        metadata: kabooMeta
+      };
+    }
+  };
+}
+
+// src/references/ReferenceInput.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CHIP_CLASS = "kaboo-chip";
+var NBSP = "\xA0";
+var AT_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>';
+var FILE_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>';
+var X_SVG = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+var AttachIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+var AtIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" })
+] });
+var PlusIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M5 12h14M12 5v14" }) });
+var SearchIcon = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m21 21-4.3-4.3" })
+] });
+var POPOVER_WIDTH = 320;
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 6;
+function computePosition(rect) {
+  if (!rect) return null;
+  const width = Math.min(POPOVER_WIDTH, window.innerWidth - VIEWPORT_MARGIN * 2);
+  const left = Math.max(
+    VIEWPORT_MARGIN,
+    Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN)
+  );
+  return { left, bottom: window.innerHeight - rect.top + ANCHOR_GAP, width };
+}
+function isImageMime(mime) {
+  return mime.startsWith("image/");
+}
+function previewSrc(ref) {
+  return "url" in ref.source ? ref.source.url : `data:${ref.mimeType};base64,${ref.source.data}`;
+}
+function serializeEditor(root) {
+  let out = "";
+  const walk = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += node.textContent ?? "";
+      return;
+    }
+    if (node instanceof HTMLElement) {
+      if (node.classList.contains(CHIP_CLASS)) {
+        const name = node.dataset.name ?? "";
+        out += node.dataset.transport === "object" ? `@${name}` : name;
+        return;
+      }
+      if (node.tagName === "BR") {
+        out += "\n";
+        return;
+      }
+      if (node.tagName === "DIV" && out.length > 0 && !out.endsWith("\n")) out += "\n";
+      node.childNodes.forEach(walk);
+    }
+  };
+  root.childNodes.forEach(walk);
+  return out.replace(new RegExp(NBSP, "g"), " ");
+}
+function KabooReferenceInput({ trigger = "@", ...inputProps }) {
+  const {
+    providers,
+    pending,
+    addReference,
+    removeReference,
+    clearReferences,
+    recordMessageReferences
+  } = useReferences();
+  const config = (0, import_v28.useCopilotChatConfiguration)();
+  const configAgentId = config?.agentId;
+  const { agent } = (0, import_v28.useAgent)(configAgentId ? { agentId: configAgentId } : void 0);
+  const placeholder = config?.labels?.chatInputPlaceholder ?? "Type a message...";
+  const wrapRef = (0, import_react11.useRef)(null);
+  const trayRef = (0, import_react11.useRef)(null);
+  const menuRef = (0, import_react11.useRef)(null);
+  const editorRef = (0, import_react11.useRef)(null);
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const addBtnRef = (0, import_react11.useRef)(null);
+  const searchRef = (0, import_react11.useRef)(null);
+  const nativeChangeRef = (0, import_react11.useRef)(void 0);
+  const anchorRef = (0, import_react11.useRef)(() => null);
+  const tokenRef = (0, import_react11.useRef)(null);
+  const replacingRef = (0, import_react11.useRef)(null);
+  const replacingTrayIdRef = (0, import_react11.useRef)(null);
+  const inlineIdsRef = (0, import_react11.useRef)(/* @__PURE__ */ new Set());
+  const commitTargetRef = (0, import_react11.useRef)("inline");
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [rows, setRows] = (0, import_react11.useState)([]);
+  const [active, setActive] = (0, import_react11.useState)(0);
+  const [query, setQuery] = (0, import_react11.useState)("");
+  const [mode, setMode] = (0, import_react11.useState)("token");
+  const [pos, setPos] = (0, import_react11.useState)(null);
+  const placeholderRef = (0, import_react11.useRef)(placeholder);
+  placeholderRef.current = placeholder;
+  const markEmpty = (0, import_react11.useCallback)(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const isEmpty = root.querySelector(`.${CHIP_CLASS}`) === null && (root.textContent ?? "").trim().length === 0;
+    root.dataset.empty = isEmpty ? "true" : "false";
+  }, []);
+  const uploadProviderDef = (0, import_react11.useMemo)(() => providers.find(isUploadProvider), [providers]);
+  const searchable = (0, import_react11.useMemo)(() => providers.filter((p) => typeof p.search === "function"), [providers]);
+  const actionProviders = (0, import_react11.useMemo)(
+    () => providers.filter((p) => typeof p.search !== "function"),
+    [providers]
+  );
+  const buildRows = (0, import_react11.useCallback)(
+    async (q) => {
+      const next = [];
+      for (const provider of actionProviders) {
+        const label = isUploadProvider(provider) ? "Attach" : provider.label;
+        if (!q || label.toLowerCase().includes(q.toLowerCase())) {
+          next.push({ kind: "action", group: label, provider });
+        }
+      }
+      for (const provider of searchable) {
+        try {
+          const items = await provider.search(q);
+          for (const item of items) next.push({ kind: "item", group: provider.label, provider, item });
+        } catch {
+        }
+      }
+      return next;
+    },
+    [actionProviders, searchable]
+  );
+  const refresh = (0, import_react11.useCallback)(
+    async (q) => {
+      const next = await buildRows(q);
+      setRows(next);
+      setActive(0);
+    },
+    [buildRows]
+  );
+  const close = (0, import_react11.useCallback)(() => {
+    setOpen(false);
+    setRows([]);
+    setQuery("");
+    tokenRef.current = null;
+    replacingRef.current = null;
+    replacingTrayIdRef.current = null;
+  }, []);
+  const emit = (0, import_react11.useCallback)(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const text = serializeEditor(root);
+    markEmpty();
+    nativeChangeRef.current?.({ target: { value: text } });
+  }, [markEmpty]);
+  const reconcile = (0, import_react11.useCallback)(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const live = new Set(
+      Array.from(root.querySelectorAll(`.${CHIP_CLASS}`)).map((c) => c.dataset.refId)
+    );
+    for (const id of Array.from(inlineIdsRef.current)) {
+      if (!live.has(id)) {
+        inlineIdsRef.current.delete(id);
+        removeReference(id);
+      }
+    }
+  }, [removeReference]);
+  const focusEditor = (0, import_react11.useCallback)(() => editorRef.current?.focus(), []);
+  const createChip = (0, import_react11.useCallback)((ref) => {
+    const chip = document.createElement("span");
+    chip.className = `${CHIP_CLASS} ${CHIP_CLASS}-${ref.transport}`;
+    chip.contentEditable = "false";
+    chip.dataset.refId = ref.id;
+    chip.dataset.kind = ref.kind;
+    chip.dataset.name = ref.name;
+    chip.dataset.transport = ref.transport;
+    chip.title = ref.name;
+    if (ref.transport === "attachment" && isImageMime(ref.mimeType)) {
+      const img = document.createElement("img");
+      img.className = "kaboo-chip-thumb";
+      img.src = previewSrc(ref);
+      img.alt = ref.name;
+      chip.appendChild(img);
+    } else {
+      const ic = document.createElement("span");
+      ic.className = "kaboo-chip-ic";
+      ic.innerHTML = ref.transport === "object" ? AT_SVG : FILE_SVG;
+      chip.appendChild(ic);
+    }
+    const label = document.createElement("span");
+    label.className = "kaboo-chip-label";
+    label.textContent = ref.name;
+    chip.appendChild(label);
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "kaboo-chip-x";
+    x.setAttribute("aria-label", `Remove ${ref.name}`);
+    x.innerHTML = X_SVG;
+    x.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handlersRef.current.removeChip(chip);
+    });
+    chip.appendChild(x);
+    chip.addEventListener("mousedown", (e) => {
+      if (e.target === x || x.contains(e.target)) return;
+      e.preventDefault();
+      handlersRef.current.replaceChip(chip);
+    });
+    return chip;
+  }, []);
+  const insertAtCaret = (0, import_react11.useCallback)((node) => {
+    const root = editorRef.current;
+    if (!root) return;
+    const sel = window.getSelection();
+    let range;
+    if (sel && sel.rangeCount > 0 && root.contains(sel.focusNode)) {
+      range = sel.getRangeAt(0);
+    } else {
+      range = document.createRange();
+      range.selectNodeContents(root);
+      range.collapse(false);
+    }
+    range.collapse(false);
+    const space = document.createTextNode(NBSP);
+    range.insertNode(space);
+    range.insertNode(node);
+    const after = document.createRange();
+    after.setStartAfter(space);
+    after.collapse(true);
+    sel?.removeAllRanges();
+    sel?.addRange(after);
+  }, []);
+  const placeChip = (0, import_react11.useCallback)(
+    (ref) => {
+      const chip = createChip(ref);
+      const replacing = replacingRef.current;
+      if (replacing) {
+        const oldId = replacing.dataset.refId;
+        if (oldId && oldId !== ref.id) removeReference(oldId);
+        replacing.replaceWith(chip);
+        replacingRef.current = null;
+      } else if (tokenRef.current) {
+        const { node, start } = tokenRef.current;
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.setStart(node, Math.min(start, node.textContent?.length ?? 0));
+        if (sel && sel.focusNode && editorRef.current?.contains(sel.focusNode)) {
+          range.setEnd(sel.focusNode, sel.focusOffset);
+        } else {
+          range.setEnd(node, node.textContent?.length ?? 0);
+        }
+        range.deleteContents();
+        const space = document.createTextNode(NBSP);
+        range.insertNode(space);
+        range.insertNode(chip);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(after);
+        tokenRef.current = null;
+      } else {
+        insertAtCaret(chip);
+      }
+      emit();
+    },
+    [createChip, insertAtCaret, removeReference, emit]
+  );
+  const commit = (0, import_react11.useCallback)(
+    (ref, target) => {
+      addReference(ref);
+      if (target === "inline") {
+        inlineIdsRef.current.add(ref.id);
+        placeChip(ref);
+      } else {
+        const oldId = replacingTrayIdRef.current;
+        if (oldId && oldId !== ref.id) removeReference(oldId);
+        replacingTrayIdRef.current = null;
+        inlineIdsRef.current.delete(ref.id);
+      }
+    },
+    [addReference, placeChip, removeReference]
+  );
+  const openFilePicker = (0, import_react11.useCallback)(
+    (provider, target) => {
+      const input = fileInputRef.current;
+      if (!input) return;
+      const cfg = isUploadProvider(provider) ? provider[UPLOAD_MARKER] : {};
+      input.accept = cfg.accept ?? "";
+      input.onchange = async () => {
+        const file = input.files?.[0];
+        input.value = "";
+        if (!file) return;
+        try {
+          const ref = await uploadFileToReference(file, cfg);
+          commit(ref, target);
+        } catch (err) {
+          console.error("[kaboo] upload failed", err);
+        }
+      };
+      input.click();
+    },
+    [commit]
+  );
+  const stripToken = (0, import_react11.useCallback)(() => {
+    const t = tokenRef.current;
+    if (!t) return;
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(t.node, Math.min(t.start, t.node.textContent?.length ?? 0));
+    if (sel?.focusNode && editorRef.current?.contains(sel.focusNode)) {
+      range.setEnd(sel.focusNode, sel.focusOffset);
+    } else {
+      range.setEnd(t.node, t.node.textContent?.length ?? 0);
     }
+    range.deleteContents();
+    emit();
+  }, [emit]);
+  const select = (0, import_react11.useCallback)(
+    async (row) => {
+      const target = commitTargetRef.current;
+      if (row.kind === "action") {
+        const provider = row.provider;
+        if (target === "inline") stripToken();
+        close();
+        if (isUploadProvider(provider)) openFilePicker(provider, target);
+        else await provider.onSelect?.({ id: provider.id, label: provider.label });
+        focusEditor();
+        return;
+      }
+      await row.provider.onSelect?.(row.item);
+      const ref = row.provider.toReference?.(row.item);
+      if (ref) commit(ref, target);
+      close();
+      focusEditor();
+    },
+    [stripToken, close, openFilePicker, focusEditor, commit]
+  );
+  const openFromToken = (0, import_react11.useCallback)(
+    (q) => {
+      commitTargetRef.current = "inline";
+      replacingRef.current = null;
+      replacingTrayIdRef.current = null;
+      anchorRef.current = () => {
+        const t = tokenRef.current;
+        return t ? caretRectFor(t.node, t.start) : null;
+      };
+      setMode("token");
+      setQuery(q);
+      setPos(computePosition(anchorRef.current()));
+      setOpen(true);
+      void refresh(q);
+    },
+    [refresh]
+  );
+  const toggleFromButton = (0, import_react11.useCallback)(() => {
+    setOpen((prev) => {
+      if (prev) {
+        close();
+        return false;
+      }
+      commitTargetRef.current = "tray";
+      tokenRef.current = null;
+      replacingRef.current = null;
+      replacingTrayIdRef.current = null;
+      anchorRef.current = () => addBtnRef.current?.getBoundingClientRect() ?? null;
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(anchorRef.current()));
+      void refresh("");
+      return true;
+    });
+  }, [refresh, close]);
+  const onSearch = (0, import_react11.useCallback)(
+    (value) => {
+      setQuery(value);
+      void refresh(value);
+    },
+    [refresh]
   );
+  const handleNavKey = (0, import_react11.useCallback)(
+    (e) => {
+      if (!open || rows.length === 0) return false;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((a) => (a + 1) % rows.length);
+        return true;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((a) => (a - 1 + rows.length) % rows.length);
+        return true;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        void select(rows[active]);
+        return true;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        focusEditor();
+        return true;
+      }
+      return false;
+    },
+    [open, rows, active, select, close, focusEditor]
+  );
+  const replaceChip = (0, import_react11.useCallback)(
+    (chip) => {
+      commitTargetRef.current = "inline";
+      replacingRef.current = chip;
+      replacingTrayIdRef.current = null;
+      tokenRef.current = null;
+      anchorRef.current = () => chip.getBoundingClientRect();
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(chip.getBoundingClientRect()));
+      setOpen(true);
+      void refresh("");
+    },
+    [refresh]
+  );
+  const replaceTrayChip = (0, import_react11.useCallback)(
+    (id, anchorEl) => {
+      commitTargetRef.current = "tray";
+      replacingTrayIdRef.current = id;
+      replacingRef.current = null;
+      tokenRef.current = null;
+      anchorRef.current = () => anchorEl.getBoundingClientRect();
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(anchorEl.getBoundingClientRect()));
+      setOpen(true);
+      void refresh("");
+    },
+    [refresh]
+  );
+  const removeChip = (0, import_react11.useCallback)(
+    (chip) => {
+      const id = chip.dataset.refId;
+      const next = chip.nextSibling;
+      chip.remove();
+      if (next && next.nodeType === Node.TEXT_NODE && next.textContent === NBSP) next.remove();
+      if (id) {
+        inlineIdsRef.current.delete(id);
+        removeReference(id);
+      }
+      emit();
+      focusEditor();
+    },
+    [removeReference, emit, focusEditor]
+  );
+  const handlersRef = (0, import_react11.useRef)({ removeChip, replaceChip });
+  handlersRef.current = { removeChip, replaceChip };
+  const ctl = { open, rows, active, trigger, openFromToken, toggleFromButton, close, handleNavKey };
+  const ctlRef = (0, import_react11.useRef)(ctl);
+  ctlRef.current = ctl;
+  const readToken = (0, import_react11.useCallback)(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+    const node = sel.focusNode;
+    if (!node || node.nodeType !== Node.TEXT_NODE) return null;
+    const text = node.textContent ?? "";
+    const before = text.slice(0, sel.focusOffset);
+    const at = before.lastIndexOf(ctlRef.current.trigger);
+    if (at < 0) return null;
+    const prev = at > 0 ? before[at - 1] : "";
+    if (prev && !/\s/.test(prev)) return null;
+    const q = before.slice(at + 1);
+    if (/\s/.test(q)) return null;
+    return { node, start: at, query: q };
+  }, []);
+  const onEditorInput = (0, import_react11.useCallback)(() => {
+    reconcile();
+    emit();
+    const token = readToken();
+    if (token) {
+      tokenRef.current = { node: token.node, start: token.start };
+      const c = ctlRef.current;
+      if (!c.open || mode === "token") openFromToken(token.query);
+      else {
+        setQuery(token.query);
+        void refresh(token.query);
+      }
+    } else if (ctlRef.current.open && mode === "token") {
+      close();
+    }
+  }, [reconcile, emit, readToken, openFromToken, refresh, mode, close]);
+  const TextAreaSlot = (0, import_react11.useMemo)(
+    () => (0, import_react11.forwardRef)(function KabooRefEditor(props, ref) {
+      const { onChange, onKeyDown, className, autoFocus } = props;
+      nativeChangeRef.current = onChange;
+      const setRefs = (node) => {
+        editorRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      };
+      const handleKeyDown = (e) => {
+        if (ctlRef.current.handleNavKey(e)) return;
+        onKeyDown?.(e);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          ref: setRefs,
+          role: "textbox",
+          "aria-multiline": "true",
+          tabIndex: 0,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          "data-placeholder": placeholderRef.current,
+          className: `kaboo-ref-editor cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:leading-relaxed cpk:text-[16px] ${className ?? ""}`,
+          "data-empty": "true",
+          autoFocus,
+          onInput: onEditorInput,
+          onKeyDown: handleKeyDown
+        }
+      );
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const AddMenuButtonSlot = (0, import_react11.useMemo)(
+    () => function KabooRefAddButton(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "button",
+        {
+          ref: addBtnRef,
+          type: "button",
+          className: "kaboo-ref-add",
+          "aria-label": "Add attachment or reference",
+          "aria-haspopup": "listbox",
+          "aria-expanded": ctlRef.current.open,
+          disabled: props.disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => ctlRef.current.toggleFromButton(),
+          children: PlusIcon
+        }
+      );
+    },
+    []
+  );
+  (0, import_react11.useEffect)(() => {
+    if (!open) return;
+    const onDocMouseDown = (e) => {
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      close();
+    };
+    const onDocKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onDocKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onDocKey);
+    };
+  }, [open, close]);
+  (0, import_react11.useEffect)(() => {
+    if (!open) return;
+    const reposition = () => setPos(computePosition(anchorRef.current()));
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [open]);
+  (0, import_react11.useLayoutEffect)(() => {
+    if (!open) return;
+    setPos(computePosition(anchorRef.current()));
+    if (mode === "menu") searchRef.current?.focus();
+  }, [open, mode, rows.length]);
+  (0, import_react11.useEffect)(() => {
+    const target = agent;
+    if (!target || typeof target.subscribe !== "function") return;
+    const sub = target.subscribe({ onRunStartedEvent: () => clearReferences() });
+    return () => sub?.unsubscribe?.();
+  }, [agent, clearReferences]);
+  (0, import_react11.useEffect)(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    if ((inputProps.value ?? "") === "" && root.childNodes.length > 0) {
+      root.textContent = "";
+      markEmpty();
+    }
+  }, [inputProps.value, markEmpty]);
+  const handleSubmit = (0, import_react11.useCallback)(
+    (message) => {
+      const text = message.trim();
+      const { attachmentParts } = serializeReferences(pending);
+      const target = agent;
+      if (text.length === 0 && attachmentParts.length === 0) return;
+      if (!target?.addMessage || !target.runAgent) {
+        inputProps.onSubmitMessage?.(message);
+        close();
+        return;
+      }
+      const content = attachmentParts.length > 0 ? buildUserContent(text, attachmentParts) : text;
+      const id = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+      recordMessageReferences(
+        id,
+        pending.filter((r) => r.transport === "object")
+      );
+      target.addMessage({ id, role: "user", content });
+      void Promise.resolve(target.runAgent()).catch(
+        (err) => console.error("[kaboo] runAgent failed", err)
+      );
+      const root = editorRef.current;
+      if (root) root.textContent = "";
+      markEmpty();
+      close();
+    },
+    [pending, agent, inputProps, close, markEmpty, recordMessageReferences]
+  );
+  const trayRefs = pending.filter((r) => !inlineIdsRef.current.has(r.id));
+  (0, import_react11.useLayoutEffect)(() => {
+    const tray = trayRef.current;
+    const wrap = wrapRef.current;
+    if (!tray || !wrap) return;
+    const align = () => {
+      const pill = wrap.querySelector(".copilotKitInput");
+      if (!pill) return;
+      const pr = pill.getBoundingClientRect();
+      const wr = wrap.getBoundingClientRect();
+      tray.style.marginLeft = `${Math.max(0, pr.left - wr.left)}px`;
+      tray.style.width = `${pr.width}px`;
+    };
+    align();
+    window.addEventListener("resize", align);
+    return () => window.removeEventListener("resize", align);
+  }, [trayRefs.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: wrapRef, className: "kaboo-ref-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { ref: fileInputRef, type: "file", className: "kaboo-ref-file", tabIndex: -1, "aria-hidden": "true" }),
+    trayRefs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: trayRef, className: "kaboo-ref-tray", children: trayRefs.map((r) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      TrayChip,
+      {
+        reference: r,
+        onRemove: () => removeReference(r.id),
+        onReplace: (el) => replaceTrayChip(r.id, el)
+      },
+      r.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_v28.CopilotChatInput,
+      {
+        ...inputProps,
+        onSubmitMessage: handleSubmit,
+        textArea: TextAreaSlot,
+        addMenuButton: AddMenuButtonSlot
+      }
+    ),
+    open && pos && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ReferencePopover,
+        {
+          ref: menuRef,
+          pos,
+          rows,
+          active,
+          query,
+          mode,
+          searchRef,
+          hasUpload: !!uploadProviderDef,
+          onSearch,
+          onSearchKeyDown: handleNavKey,
+          onHover: setActive,
+          onPick: select
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function TrayChip({
+  reference,
+  onRemove,
+  onReplace
+}) {
+  const ref = (0, import_react11.useRef)(null);
+  const isImage = reference.transport === "attachment" && isImageMime(reference.mimeType);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "span",
+    {
+      ref,
+      className: `kaboo-chip ${CHIP_CLASS}-${reference.transport} kaboo-chip-tray`,
+      title: reference.name,
+      role: "button",
+      tabIndex: 0,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        if (ref.current) onReplace(ref.current);
+      },
+      children: [
+        isImage ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "img",
+          {
+            className: "kaboo-chip-thumb",
+            src: previewSrc(reference),
+            alt: reference.name
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-chip-ic", children: reference.transport === "object" ? AtIcon : AttachIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-chip-label", children: reference.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "kaboo-chip-x",
+            "aria-label": `Remove ${reference.name}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function caretRectFor(node, offset) {
+  try {
+    const range = document.createRange();
+    range.setStart(node, Math.min(offset, node.textContent?.length ?? 0));
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    if (rect.top === 0 && rect.left === 0) {
+      const parent = node.parentElement;
+      return parent ? parent.getBoundingClientRect() : null;
+    }
+    return rect;
+  } catch {
+    return null;
+  }
 }
+var ReferencePopover = (0, import_react11.forwardRef)(function ReferencePopover2({ pos, rows, active, query, mode, searchRef, onSearch, onSearchKeyDown, onHover, onPick }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      ref,
+      className: "kaboo-refmenu",
+      role: "listbox",
+      style: { left: pos.left, bottom: pos.bottom, width: pos.width },
+      children: [
+        mode === "menu" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "kaboo-refmenu-search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-refmenu-search-icon", children: SearchIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              className: "kaboo-refmenu-search-input",
+              placeholder: "Search\u2026",
+              value: query,
+              onChange: (e) => onSearch(e.target.value),
+              onKeyDown: (e) => onSearchKeyDown(e)
+            }
+          )
+        ] }),
+        rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "kaboo-refmenu-empty", children: "No matches" }),
+        rows.map((row, i) => {
+          const key = row.kind === "action" ? `action:${row.provider.id}` : `${row.provider.id}:${row.item.id}`;
+          const showHeader = i === 0 || rows[i - 1].group !== row.group;
+          const isUpload = row.kind === "action" && isUploadProvider(row.provider);
+          const icon = isUpload ? AttachIcon : row.kind === "item" ? row.provider.icon ?? AtIcon : row.provider.icon ?? AtIcon;
+          const title = row.kind === "action" ? isUpload ? "Attach a file" : row.provider.label : row.item.label;
+          const subtitle = row.kind === "action" ? isUpload ? "Upload from your device" : void 0 : row.item.description;
+          const custom = row.kind === "item" ? row.provider.renderItem?.(row.item) : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+            showHeader && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "kaboo-refmenu-group", children: row.group }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "div",
+              {
+                role: "option",
+                "aria-selected": i === active,
+                className: `kaboo-refmenu-item${i === active ? " is-active" : ""}`,
+                onMouseEnter: () => onHover(i),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onPick(row);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-refmenu-icon", children: icon }),
+                  custom ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "kaboo-refmenu-text", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-refmenu-title", children: title }),
+                    subtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "kaboo-refmenu-sub", children: subtitle })
+                  ] })
+                ]
+              }
+            )
+          ] }, key);
+        })
+      ]
+    }
+  );
+});
 
 // src/components/ActivityPanel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ActivityPanel() {
   const { groups } = useActivity();
   const { activeDrill } = useDrill();
@@ -1231,14 +2288,14 @@ function ActivityPanel() {
   if (filtered.length === 0 && activeDrill) {
     const exact = groups[activeDrill];
     if (exact) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "kaboo-activity-panel", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AgentCard, { groupId: activeDrill, group: exact }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-activity-panel", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AgentCard, { groupId: activeDrill, group: exact }) });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "kaboo-activity-panel", children: filtered.map(([id, group]) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AgentCard, { groupId: id, group }, id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-activity-panel", children: filtered.map(([id, group]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AgentCard, { groupId: id, group }, id)) });
 }
 
 // src/components/GlassTabs.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function GlassTabs() {
   const { drillPath, drillToRoot, drillToLevel } = useDrill();
   const { groups } = useActivity();
@@ -1251,11 +2308,11 @@ function GlassTabs() {
       level: i
     }))
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("nav", { className: "kaboo-breadcrumb-bar", children: tabs.map((tab, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("nav", { className: "kaboo-breadcrumb-bar", children: tabs.map((tab, i) => {
     const isLast = i === tabs.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "kaboo-breadcrumb-item", children: [
-      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-sep", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "kaboo-breadcrumb-item", children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-sep", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "button",
         {
           className: `kaboo-breadcrumb-link ${isLast ? "kaboo-breadcrumb-current" : ""}`,
@@ -1266,7 +2323,7 @@ function GlassTabs() {
           },
           disabled: isLast,
           children: [
-            i === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-icon", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 8.5L8 4l5 4.5M4.5 7.5V12h2.5V9.5h2V12h2.5V7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            i === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-icon", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M3 8.5L8 4l5 4.5M4.5 7.5V12h2.5V9.5h2V12h2.5V7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             tab.label
           ]
         }
@@ -1276,20 +2333,20 @@ function GlassTabs() {
 }
 
 // src/components/DrillDetailView.tsx
-var import_react10 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DrillDetailView() {
   const { activeDrill } = useDrill();
   const { groups } = useActivity();
   const { active: activeInterrupts } = useInterruptBridge();
-  const bodyRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const bodyRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (activeDrill && bodyRef.current) {
       bodyRef.current.scrollTop = 0;
     }
   }, [activeDrill]);
   if (!activeDrill) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-drill-detail kaboo-hidden" });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-drill-detail kaboo-hidden" });
   }
   const group = groups[activeDrill];
   const timeline = group?.timeline ?? [];
@@ -1301,15 +2358,15 @@ function DrillDetailView() {
   const renderToolCard = (toolUseId) => {
     const entry = childByToolCall.get(toolUseId);
     if (!entry) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AgentCard, { groupId: entry[0], group: entry[1] });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AgentCard, { groupId: entry[0], group: entry[1] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: bodyRef, className: "kaboo-drill-detail", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "kaboo-drill-detail-inner", children: [
-    group?.task && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "kaboo-agent-card-task kaboo-drill-task", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: "Task:" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: bodyRef, className: "kaboo-drill-detail", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "kaboo-drill-detail-inner", children: [
+    group?.task && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "kaboo-agent-card-task kaboo-drill-task", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("strong", { children: "Task:" }),
       " ",
       group.task
     ] }),
-    group && timeline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-drill-timeline", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    group && timeline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-drill-timeline", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Timeline,
       {
         timeline,
@@ -1318,7 +2375,7 @@ function DrillDetailView() {
         renderToolCard
       }
     ) }),
-    unanchoredInterrupts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-drill-interrupt", children: unanchoredInterrupts.map((it) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    unanchoredInterrupts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-drill-interrupt", children: unanchoredInterrupts.map((it) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       InterruptRenderer,
       {
         reason: it.reason,
@@ -1328,12 +2385,12 @@ function DrillDetailView() {
       },
       it.id
     )) }),
-    leftoverChildren.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "kaboo-drill-children", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-drill-section-label", children: "Sub-agents" }),
-      leftoverChildren.map(([id, childGroup]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AgentCard, { groupId: id, group: childGroup }, id))
+    leftoverChildren.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "kaboo-drill-children", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-drill-section-label", children: "Sub-agents" }),
+      leftoverChildren.map(([id, childGroup]) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AgentCard, { groupId: id, group: childGroup }, id))
     ] }),
-    group && timeline.length === 0 && childEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-agent-card-empty", children: "Working..." }),
-    !group && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "kaboo-agent-card-empty", children: "No activity data for this group." })
+    group && timeline.length === 0 && childEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-agent-card-empty", children: "Working..." }),
+    !group && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kaboo-agent-card-empty", children: "No activity data for this group." })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -1348,19 +2405,37 @@ function DrillDetailView() {
   InterruptRenderer,
   KabooActivityProvider,
   KabooProvider,
+  KabooReferenceInput,
   MarkdownContent,
   MiniTable,
+  REFERENCES_STATE_KEY,
+  REFERENCE_METADATA_KEYS,
+  ReferenceStateSync,
+  ReferencesProvider,
   StructuredRenderersContext,
   Timeline,
   ToolRow,
+  UPLOAD_MARKER,
+  attachmentToInputContent,
+  buildAttachmentsConfig,
+  buildUserContent,
   directChildren,
   formatToolInput,
   formatToolResult,
+  isUploadProvider,
+  mintReferenceId,
   normalizeResult,
+  objectToStateEntry,
+  referenceMarker,
+  serializeReferences,
   topLevelGroups,
+  uploadFileToReference,
+  uploadProvider,
   useActivity,
   useDrill,
   useInterruptBridge,
-  useInterruptFor
+  useInterruptFor,
+  useReferences,
+  withReferenceState
 });
 //# sourceMappingURL=index.cjs.map