sideagent 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,759 @@
+// src/client/AgentChat.tsx
+import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useLocalRuntime
+} from "@assistant-ui/react";
+import {
+  CheckCircledIcon,
+  ChatBubbleIcon,
+  ChevronRightIcon,
+  ArrowLeftIcon,
+  ArrowUpIcon,
+  CounterClockwiseClockIcon,
+  Cross2Icon,
+  CrossCircledIcon,
+  ExternalLinkIcon,
+  FileTextIcon,
+  ExclamationTriangleIcon,
+  OpenInNewWindowIcon,
+  PlusIcon,
+  ReloadIcon,
+  TrashIcon,
+  ViewVerticalIcon
+} from "@radix-ui/react-icons";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/client/hooks.ts
+function safely(fn) {
+  try {
+    fn?.();
+  } catch (err) {
+    console.error("[sideagent] hook threw:", err);
+  }
+}
+
+// src/client/results.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MAX_ROWS = 50;
+var MAX_COLS = 8;
+var MAX_CELL = 80;
+function humanize(key) {
+  const s = key.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().toLowerCase();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+var ISO = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/;
+function formatCell(v) {
+  if (v === null || v === void 0) return "\u2014";
+  if (typeof v === "boolean") return v ? "Yes" : "No";
+  if (typeof v === "number") return Number.isFinite(v) ? v.toLocaleString() : String(v);
+  if (typeof v === "string") {
+    if (ISO.test(v)) {
+      const d = new Date(v);
+      if (!Number.isNaN(d.getTime())) return v.length <= 10 ? d.toLocaleDateString() : d.toLocaleString();
+    }
+    return v.length > MAX_CELL ? `${v.slice(0, MAX_CELL)}\u2026` : v;
+  }
+  const j = JSON.stringify(v);
+  return j.length > MAX_CELL ? `${j.slice(0, MAX_CELL)}\u2026` : j;
+}
+var isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isPrimitive = (v) => v === null || typeof v !== "object";
+function Table({ rows }) {
+  const keys = [];
+  for (const r of rows) for (const k of Object.keys(r)) if (!keys.includes(k)) keys.push(k);
+  const cols = keys.slice(0, MAX_COLS);
+  const shown = rows.slice(0, MAX_ROWS);
+  const numeric = new Set(cols.filter((c) => shown.every((r) => r[c] == null || typeof r[c] === "number")));
+  return /* @__PURE__ */ jsxs("div", { className: "sa-result", children: [
+    /* @__PURE__ */ jsx("div", { className: "sa-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "sa-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((c) => /* @__PURE__ */ jsx("th", { className: numeric.has(c) ? "sa-num" : void 0, scope: "col", children: humanize(c) }, c)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: shown.map((r, i) => /* @__PURE__ */ jsx("tr", { children: cols.map((c) => /* @__PURE__ */ jsx("td", { className: numeric.has(c) ? "sa-num" : void 0, children: formatCell(r[c]) }, c)) }, i)) })
+    ] }) }),
+    (rows.length > shown.length || keys.length > cols.length) && /* @__PURE__ */ jsxs("div", { className: "sa-more", children: [
+      rows.length > shown.length && `+${rows.length - shown.length} more rows. `,
+      keys.length > cols.length && `+${keys.length - cols.length} more columns.`
+    ] })
+  ] });
+}
+function Fields({ obj }) {
+  const entries = Object.entries(obj).slice(0, 30);
+  return /* @__PURE__ */ jsx("dl", { className: "sa-fields", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "sa-field", children: [
+    /* @__PURE__ */ jsx("dt", { children: humanize(k) }),
+    /* @__PURE__ */ jsx("dd", { children: formatCell(v) })
+  ] }, k)) });
+}
+function ResultView({ result }) {
+  if (result === null || result === void 0 || Array.isArray(result) && result.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "sa-more", children: "No results." });
+  }
+  if (isRecord(result) && result.rejected === true) return /* @__PURE__ */ jsx("div", { className: "sa-more", children: "You rejected this action." });
+  if (isRecord(result) && typeof result.error === "string") return /* @__PURE__ */ jsx("div", { className: "sa-error", children: result.error });
+  if (Array.isArray(result)) {
+    if (result.every(isRecord)) return /* @__PURE__ */ jsx(Table, { rows: result });
+    if (result.every(isPrimitive)) {
+      return /* @__PURE__ */ jsx("ul", { className: "sa-list", children: result.slice(0, MAX_ROWS).map((v, i) => /* @__PURE__ */ jsx("li", { children: formatCell(v) }, i)) });
+    }
+  }
+  if (isRecord(result)) {
+    const arrays = Object.entries(result).filter(([, v]) => Array.isArray(v) && v.length > 0 && v.every(isRecord));
+    if (arrays.length === 1) {
+      const rest = Object.fromEntries(Object.entries(result).filter(([k]) => k !== arrays[0][0]));
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        Object.keys(rest).length > 0 && /* @__PURE__ */ jsx(Fields, { obj: rest }),
+        /* @__PURE__ */ jsx(Table, { rows: arrays[0][1] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Fields, { obj: result });
+  }
+  return /* @__PURE__ */ jsx("div", { children: formatCell(result) });
+}
+
+// src/client/styles.ts
+var CSS = `
+.sa-root{
+  --sa-bg:var(--sideagent-bg,#ffffff);
+  --sa-fg:var(--sideagent-fg,#171717);
+  --sa-muted:var(--sideagent-muted,#6b6b6b);
+  --sa-border:var(--sideagent-border,#e5e5e5);
+  --sa-surface:var(--sideagent-surface,#f5f5f5);
+  --sa-accent:var(--sideagent-accent,#171717);
+  --sa-accent-fg:var(--sideagent-accent-fg,#ffffff);
+  --sa-danger:var(--sideagent-danger,#b42318);
+  --sa-radius:var(--sideagent-radius,10px);
+  --sa-font:var(--sideagent-font,inherit);
+  color-scheme:light;
+}
+@media (prefers-color-scheme:dark){
+  .sa-root[data-theme=auto]{
+    --sa-bg:var(--sideagent-bg,#171717);--sa-fg:var(--sideagent-fg,#f5f5f5);--sa-muted:var(--sideagent-muted,#a3a3a3);
+    --sa-border:var(--sideagent-border,#2e2e2e);--sa-surface:var(--sideagent-surface,#262626);
+    --sa-accent:var(--sideagent-accent,#f5f5f5);--sa-accent-fg:var(--sideagent-accent-fg,#171717);color-scheme:dark}
+}
+:is(.dark,[data-theme=dark],[data-bs-theme=dark]) .sa-root[data-theme=auto],
+.sa-root[data-theme=dark]{
+  --sa-bg:var(--sideagent-bg,#171717);--sa-fg:var(--sideagent-fg,#f5f5f5);--sa-muted:var(--sideagent-muted,#a3a3a3);
+  --sa-border:var(--sideagent-border,#2e2e2e);--sa-surface:var(--sideagent-surface,#262626);
+  --sa-accent:var(--sideagent-accent,#f5f5f5);--sa-accent-fg:var(--sideagent-accent-fg,#171717);color-scheme:dark}
+.sa-root{font-family:var(--sa-font);font-size:14px;line-height:1.5;color:var(--sa-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}
+.sa-root *{box-sizing:border-box}
+.sa-panel{display:flex;flex-direction:column;background:var(--sa-bg);border:1px solid var(--sa-border);overflow:hidden}
+.sa-floating .sa-panel{position:fixed;right:16px;bottom:80px;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 104px));border-radius:calc(var(--sa-radius) + 4px);box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:2147483000}
+.sa-sidebar .sa-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);border-width:0 0 0 1px;z-index:2147483000}
+.sa-shell{display:flex;height:100dvh;width:100%;min-width:0}
+.sa-shell-main{flex:1;min-width:0;overflow:auto}
+.sa-docked{display:contents}
+.sa-docked .sa-panel{position:relative;flex:none;max-width:70vw;height:100%;border-width:0 0 0 1px;z-index:auto}
+.sa-resizer{position:absolute;top:0;bottom:0;left:-3px;width:7px;cursor:col-resize;touch-action:none;z-index:1}
+.sa-resizer::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .15s}
+.sa-resizer:hover::after,.sa-resizer:focus-visible::after,.sa-resizing .sa-resizer::after{background:var(--sa-muted)}
+.sa-resizer:focus-visible{outline:none}
+.sa-resizing{user-select:none;cursor:col-resize}
+.sa-fab{position:fixed;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;border:0;background:var(--sa-accent);color:var(--sa-accent-fg);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:2147483000}
+.sa-header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--sa-border)}
+.sa-title{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sa-btn{border:1px solid var(--sa-border);background:transparent;color:var(--sa-fg);border-radius:calc(var(--sa-radius) - 2px);padding:4px 9px;min-height:28px;font:inherit;font-size:12px;cursor:pointer}
+.sa-btn:hover{background:var(--sa-surface)}
+.sa-btn[aria-pressed=true]{background:var(--sa-surface);border-color:var(--sa-muted)}
+.sa-btn-primary{background:var(--sa-accent);color:var(--sa-accent-fg);border-color:var(--sa-accent)}
+.sa-btn-primary:hover{background:var(--sa-accent);opacity:.88}
+.sa-btn:disabled{opacity:.5;cursor:not-allowed}
+.sa-root :is(button,textarea):focus-visible{outline:2px solid var(--sa-fg);outline-offset:2px}
+.sa-viewport{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
+.sa-empty{color:var(--sa-muted);text-align:center;margin:auto;padding:24px}
+.sa-msg{max-width:90%;white-space:pre-wrap;word-break:break-word}
+.sa-user{align-self:flex-end;background:var(--sa-surface);padding:7px 12px;border-radius:calc(var(--sa-radius) + 4px)}
+.sa-assistant{align-self:flex-start}
+.sa-md{white-space:normal;min-width:0}
+.sa-md>:first-child{margin-top:0}.sa-md>:last-child{margin-bottom:0}
+.sa-md :is(p,ul,ol,pre,table,blockquote){margin:0 0 .6em}
+.sa-md :is(ul,ol){padding-left:1.4em}
+.sa-md :is(h1,h2,h3,h4){font-size:1em;font-weight:600;margin:.8em 0 .3em}
+.sa-md a{color:inherit;text-decoration:underline}
+.sa-md code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--sa-surface);padding:1px 4px;border-radius:4px}
+.sa-md pre{background:var(--sa-surface);padding:8px 10px;border-radius:calc(var(--sa-radius) - 2px);overflow-x:auto}
+.sa-md pre code{background:none;padding:0}
+.sa-md blockquote{border-left:3px solid var(--sa-border);padding-left:10px;color:var(--sa-muted);margin-left:0}
+.sa-md table{border-collapse:collapse;display:block;overflow-x:auto}
+.sa-md :is(th,td){border:1px solid var(--sa-border);padding:3px 8px;text-align:left}
+.sa-icon-btn{display:inline-grid;place-items:center;min-width:28px;padding:4px}
+.sa-icon-btn svg{width:15px;height:15px}
+.sa-tool{align-self:stretch;border:1px solid var(--sa-border);border-radius:var(--sa-radius);padding:8px 10px;font-size:13px;min-width:0}
+.sa-tool-head{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;margin-bottom:6px}
+.sa-tool[data-state=done] .sa-tool-head svg{color:var(--sa-muted)}
+.sa-tool[data-state=error] .sa-tool-head,.sa-tool[data-state=rejected] .sa-tool-head{color:var(--sa-danger)}
+.sa-spin{animation:sa-rot 1s linear infinite}
+@keyframes sa-rot{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){.sa-spin{animation:none}}
+.sa-table-wrap{overflow:auto;max-height:240px;border:1px solid var(--sa-border);border-radius:calc(var(--sa-radius) - 2px)}
+.sa-table{border-collapse:collapse;width:100%;font-size:12.5px}
+.sa-table th,.sa-table td{padding:5px 9px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--sa-border)}
+.sa-table th{position:sticky;top:0;background:var(--sa-surface);font-weight:600;color:var(--sa-muted)}
+.sa-table tr:last-child td{border-bottom:0}
+.sa-table .sa-num{text-align:right;font-variant-numeric:tabular-nums}
+.sa-more{color:var(--sa-muted);font-size:12px;margin-top:4px}
+.sa-fields{margin:0;display:grid;gap:4px}
+.sa-field{display:grid;grid-template-columns:minmax(80px,35%) 1fr;gap:8px}
+.sa-field dt{color:var(--sa-muted)}
+.sa-field dd{margin:0;word-break:break-word}
+.sa-list{margin:0;padding-left:18px}
+.sa-sources{margin:0;padding:0;list-style:none;display:grid;gap:4px}
+.sa-sources li{display:flex;align-items:center;gap:6px}
+.sa-sources svg{flex:none;color:var(--sa-muted)}
+.sa-sources a{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;gap:4px}
+.sa-details{margin-top:6px}
+.sa-details summary{cursor:pointer;color:var(--sa-muted);font-size:12px;list-style:none;display:flex;align-items:center;gap:2px}
+.sa-details summary::-webkit-details-marker{display:none}
+.sa-details[open] summary svg{transform:rotate(90deg)}
+.sa-details pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;font-size:11.5px}
+.sa-approval-title{display:flex;align-items:center;gap:6px}
+.sa-approval{margin:0 12px 8px;border:1px solid var(--sa-fg);border-radius:var(--sa-radius);padding:10px;background:var(--sa-surface)}
+.sa-approval pre{margin:6px 0;white-space:pre-wrap;word-break:break-word;max-height:120px;overflow:auto;font-size:12px}
+.sa-approval-text{margin:6px 0}
+.sa-approval .sa-fields{margin:0 0 6px}
+.sa-approval .sa-row{margin-top:8px}
+.sa-row{display:flex;gap:8px}
+.sa-composer{display:flex;flex-direction:column;gap:4px;margin:0 12px 12px;padding:10px 10px 8px 14px;border:1px solid var(--sa-border);border-radius:18px;background:var(--sa-surface)}
+.sa-input{width:100%;resize:none;border:0;background:transparent;padding:2px 0;font:inherit;color:inherit;max-height:160px}
+.sa-root .sa-input:focus-visible{outline:none}
+.sa-input::placeholder{color:var(--sa-muted)}
+.sa-composer-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.sa-hint{color:var(--sa-muted);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sa-send{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:var(--sa-accent);color:var(--sa-accent-fg);cursor:pointer}
+.sa-send:hover{opacity:.88}
+.sa-send:disabled{opacity:.35;cursor:not-allowed}
+.sa-send svg{width:16px;height:16px}
+.sa-chatwrap{display:flex;flex-direction:column;flex:1;min-height:0}
+.sa-chatwrap[hidden]{display:none}
+.sa-history{gap:6px}
+.sa-back{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-bottom:4px}
+.sa-thread{display:flex;gap:6px;align-items:stretch}
+.sa-thread-open{flex:1;min-width:0;text-align:left;border:1px solid var(--sa-border);background:transparent;color:inherit;border-radius:var(--sa-radius);padding:8px 10px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:2px}
+.sa-thread-open:hover{background:var(--sa-surface)}
+.sa-thread-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sa-error{color:var(--sa-danger)}
+`;
+
+// src/client/transport.ts
+async function* streamChat(body, opts) {
+  const res = await fetch(opts.endpoint, {
+    method: "POST",
+    credentials: opts.credentials ?? "same-origin",
+    headers: { "content-type": "application/json", ...opts.headers },
+    body: JSON.stringify(body),
+    signal: opts.signal
+  });
+  if (!res.ok || !res.body) {
+    let message = `Request failed (${res.status})`;
+    try {
+      const j = await res.json();
+      if (j?.error) message = String(j.error);
+    } catch {
+    }
+    yield { type: "error", code: `http_${res.status}`, message };
+    return;
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = "";
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    let i;
+    while ((i = buf.indexOf("\n\n")) >= 0) {
+      const block = buf.slice(0, i);
+      buf = buf.slice(i + 2);
+      if (block.startsWith("data: ")) yield JSON.parse(block.slice(6));
+    }
+  }
+}
+async function callJson(body, opts) {
+  const res = await fetch(opts.endpoint, {
+    method: "POST",
+    credentials: opts.credentials ?? "same-origin",
+    headers: { "content-type": "application/json", ...opts.headers },
+    body: JSON.stringify(body)
+  });
+  let data = null;
+  try {
+    data = await res.json();
+  } catch {
+  }
+  return { status: res.status, data };
+}
+
+// src/client/AgentChat.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MODE_KEY = "sideagent:mode";
+var WIDTH_KEY = "sideagent:width";
+var threadKey = (endpoint) => `sideagent:thread:${endpoint}`;
+function storeGet(k) {
+  try {
+    return localStorage.getItem(k);
+  } catch {
+    return null;
+  }
+}
+function storeSet(k, v) {
+  try {
+    if (v === null) localStorage.removeItem(k);
+    else localStorage.setItem(k, v);
+  } catch {
+  }
+}
+function toInitialMessages(messages) {
+  return (messages ?? []).map(
+    (m) => m.role === "user" ? { role: "user", content: m.parts.map((p) => ({ type: "text", text: p.type === "text" ? p.text : "" })) } : {
+      role: "assistant",
+      content: m.parts.map(
+        (p) => p.type === "text" ? { type: "text", text: p.text } : { type: "tool-call", toolCallId: p.callId, toolName: p.operationId, args: p.args ?? {}, argsText: pretty(p.args), result: p.result }
+      ),
+      status: { type: "complete", reason: "stop" }
+    }
+  );
+}
+function fireComplete(hooks, ev) {
+  const oe = { operationId: ev.operationId, status: ev.status, args: ev.args, result: ev.result };
+  safely(() => hooks?.onAnyOperation?.(oe));
+  safely(() => hooks?.onOperationComplete?.[ev.operationId]?.(oe));
+  for (const tag of ev.invalidates) safely(() => hooks?.onInvalidate?.(tag, oe));
+}
+var ago = (t) => {
+  const s = Math.round((t - Date.now()) / 1e3);
+  const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  const a = Math.abs(s);
+  if (a < 60) return rtf.format(s, "second");
+  if (a < 3600) return rtf.format(Math.round(s / 60), "minute");
+  if (a < 86400) return rtf.format(Math.round(s / 3600), "hour");
+  return rtf.format(Math.round(s / 86400), "day");
+};
+var MODES = ["floating", "sidebar"];
+var MIN_WIDTH = 300;
+var DEFAULT_WIDTH = 400;
+var maxWidth = () => Math.max(MIN_WIDTH, Math.min(760, Math.round(window.innerWidth * 0.7)));
+var clampWidth = (w) => Math.min(maxWidth(), Math.max(MIN_WIDTH, Math.round(w)));
+var DockContext = createContext(false);
+var AgentContext = createContext(null);
+function useAgent() {
+  const ctx = useContext(AgentContext);
+  if (!ctx) throw new Error("useAgent must be used inside <AgentProvider>");
+  return ctx;
+}
+function AgentProvider({ children, className, style, ...chat }) {
+  const [open, setOpen] = useState(chat.defaultOpen ?? false);
+  const controls = useMemo(() => ({ open, setOpen }), [open]);
+  return /* @__PURE__ */ jsx2(AgentContext.Provider, { value: controls, children: /* @__PURE__ */ jsx2(DockContext.Provider, { value: true, children: /* @__PURE__ */ jsxs2("div", { className: `sa-shell${className ? ` ${className}` : ""}`, style, children: [
+    /* @__PURE__ */ jsx2("div", { className: "sa-shell-main", children }),
+    /* @__PURE__ */ jsx2(AgentChat, { ...chat })
+  ] }) }) });
+}
+function readMode(fallback) {
+  try {
+    const v = localStorage.getItem(MODE_KEY);
+    return v && MODES.includes(v) ? v : fallback;
+  } catch {
+    return fallback;
+  }
+}
+var pretty = (v) => {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+};
+var Text = ({ text }) => /* @__PURE__ */ jsx2("span", { children: text });
+var RenderersContext = createContext(void 0);
+var httpUrl = (u) => {
+  try {
+    const url = new URL(String(u));
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : null;
+  } catch {
+    return null;
+  }
+};
+function Sources({ result }) {
+  const sources = result?.sources ?? [];
+  if (typeof result?.error === "string") return /* @__PURE__ */ jsx2("div", { className: "sa-error", children: result.error });
+  if (!sources.length) return /* @__PURE__ */ jsx2("div", { className: "sa-more", children: "No relevant sources found." });
+  return /* @__PURE__ */ jsx2("ul", { className: "sa-sources", children: sources.map((s) => {
+    const href = s.url ? httpUrl(s.url) : null;
+    return /* @__PURE__ */ jsxs2("li", { children: [
+      /* @__PURE__ */ jsx2(FileTextIcon, {}),
+      href ? /* @__PURE__ */ jsxs2("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
+        s.title,
+        " ",
+        /* @__PURE__ */ jsx2(ExternalLinkIcon, {})
+      ] }) : /* @__PURE__ */ jsx2("span", { children: s.title })
+    ] }, s.id);
+  }) });
+}
+function ToolCard(props) {
+  const renderers = useContext(RenderersContext);
+  const { toolName, args, result } = props;
+  const rejected = result?.rejected === true;
+  const failed = !rejected && typeof result?.error === "string";
+  const running = result === void 0;
+  const custom = renderers?.[toolName];
+  return /* @__PURE__ */ jsxs2("div", { className: "sa-tool", "data-state": running ? "running" : rejected ? "rejected" : failed ? "error" : "done", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "sa-tool-head", children: [
+      running ? /* @__PURE__ */ jsx2(ReloadIcon, { className: "sa-spin" }) : rejected || failed ? /* @__PURE__ */ jsx2(CrossCircledIcon, {}) : /* @__PURE__ */ jsx2(CheckCircledIcon, {}),
+      /* @__PURE__ */ jsx2("span", { children: toolName === "search_knowledge" ? "Sources" : humanize(toolName) })
+    ] }),
+    !running && (custom ? custom({ operationId: toolName, args, result }) : toolName === "search_knowledge" ? /* @__PURE__ */ jsx2(Sources, { result }) : /* @__PURE__ */ jsx2(ResultView, { result })),
+    /* @__PURE__ */ jsxs2("details", { className: "sa-details", children: [
+      /* @__PURE__ */ jsxs2("summary", { children: [
+        /* @__PURE__ */ jsx2(ChevronRightIcon, {}),
+        " Details"
+      ] }),
+      /* @__PURE__ */ jsx2("pre", { children: pretty(args) }),
+      !running && /* @__PURE__ */ jsx2("pre", { children: pretty(result) })
+    ] })
+  ] });
+}
+var mdComponents = {
+  a: ({ node: _n, ...p }) => /* @__PURE__ */ jsx2("a", { ...p, target: "_blank", rel: "noopener noreferrer nofollow" })
+};
+var UserMessage = () => /* @__PURE__ */ jsx2(MessagePrimitive.Root, { className: "sa-msg sa-user", children: /* @__PURE__ */ jsx2(MessagePrimitive.Parts, { components: { Text } }) });
+var AssistantMessage = () => /* @__PURE__ */ jsx2(MessagePrimitive.Root, { style: { display: "contents" }, children: /* @__PURE__ */ jsx2(
+  MessagePrimitive.Parts,
+  {
+    components: {
+      Text: ({ text }) => text ? /* @__PURE__ */ jsx2("div", { className: "sa-msg sa-assistant sa-md", children: /* @__PURE__ */ jsx2(Markdown, { remarkPlugins: [remarkGfm], components: mdComponents, children: text }) }) : null,
+      tools: { Fallback: ToolCard }
+    }
+  }
+) });
+function summaryFields(args) {
+  const a = args && typeof args === "object" ? args : {};
+  const body = a.body && typeof a.body === "object" && !Array.isArray(a.body) ? a.body : {};
+  const { body: _body, ...rest } = a;
+  return Object.entries({ ...rest, ...body }).filter(([, v]) => ["string", "number", "boolean"].includes(typeof v)).map(([k, v]) => [humanize(k), String(v)]);
+}
+function ApprovalCard({ event, onDecide }) {
+  const action = humanize(event.operationId).toLowerCase();
+  const fields = summaryFields(event.args);
+  return /* @__PURE__ */ jsxs2("div", { className: "sa-approval", role: "alertdialog", "aria-label": "Approval needed", children: [
+    /* @__PURE__ */ jsxs2("strong", { className: "sa-approval-title", children: [
+      /* @__PURE__ */ jsx2(ExclamationTriangleIcon, {}),
+      " Confirm before I continue"
+    ] }),
+    /* @__PURE__ */ jsxs2("p", { className: "sa-approval-text", children: [
+      "I'd like to ",
+      /* @__PURE__ */ jsx2("strong", { children: action }),
+      ". Nothing changes until you approve."
+    ] }),
+    fields.length > 0 && /* @__PURE__ */ jsx2("dl", { className: "sa-fields", children: fields.map(([k, v]) => /* @__PURE__ */ jsxs2("div", { className: "sa-field", children: [
+      /* @__PURE__ */ jsx2("dt", { children: k }),
+      /* @__PURE__ */ jsx2("dd", { children: v })
+    ] }, k)) }),
+    /* @__PURE__ */ jsxs2("details", { className: "sa-details", children: [
+      /* @__PURE__ */ jsxs2("summary", { children: [
+        /* @__PURE__ */ jsx2(ChevronRightIcon, {}),
+        " Details"
+      ] }),
+      /* @__PURE__ */ jsxs2("pre", { children: [
+        event.method,
+        " ",
+        event.path,
+        "\n",
+        pretty(event.args)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "sa-row", children: [
+      /* @__PURE__ */ jsx2("button", { className: "sa-btn sa-btn-primary", onClick: () => onDecide("approve"), children: "Approve" }),
+      /* @__PURE__ */ jsx2("button", { className: "sa-btn", onClick: () => onDecide("reject"), children: "Reject" })
+    ] })
+  ] });
+}
+function Chat(props) {
+  const { endpoint, hooks, credentials, headers } = props;
+  const latest = useRef(props);
+  latest.current = props;
+  const threadId = useRef(props.session.threadId);
+  const [loadedPending, setLoadedPending] = useState(props.session.pending ?? null);
+  const [approval, setApproval] = useState(null);
+  const adapter = useMemo(
+    () => ({
+      async *run({ messages, abortSignal }) {
+        const p = latest.current;
+        const last = [...messages].reverse().find((m) => m.role === "user");
+        const text = (last?.content ?? []).map((c) => c.type === "text" ? c.text : "").join("\n").trim();
+        const ctx = typeof p.context === "function" ? p.context() : p.context;
+        const parts = [];
+        const upsertTool = (callId, patch) => {
+          let part = parts.find((x) => x.type === "tool-call" && x.toolCallId === callId);
+          if (!part) {
+            part = { type: "tool-call", toolCallId: callId, toolName: "", args: {}, argsText: "{}" };
+            parts.push(part);
+          }
+          Object.assign(part, patch);
+        };
+        safely(p.hooks?.onTurnStart);
+        let body = { threadId: threadId.current, message: text, context: ctx };
+        try {
+          for (; ; ) {
+            let pending;
+            for await (const ev of streamChat(body, { endpoint: p.endpoint, credentials: p.credentials, headers: p.headers, signal: abortSignal })) {
+              switch (ev.type) {
+                case "turn.start":
+                  threadId.current = ev.threadId;
+                  p.onThread(ev.threadId);
+                  break;
+                case "text.delta": {
+                  const tail = parts[parts.length - 1];
+                  if (tail?.type === "text") tail.text += ev.text;
+                  else parts.push({ type: "text", text: ev.text });
+                  break;
+                }
+                case "approval.request":
+                  pending = ev;
+                  upsertTool(ev.callId, { toolName: ev.operationId, args: ev.args, argsText: pretty(ev.args) });
+                  break;
+                case "tool.start":
+                  upsertTool(ev.callId, { toolName: ev.operationId });
+                  break;
+                case "tool.rejected":
+                  upsertTool(ev.callId, { toolName: ev.operationId, result: { rejected: true } });
+                  break;
+                case "tool.complete": {
+                  upsertTool(ev.callId, { toolName: ev.operationId, args: ev.args ?? {}, argsText: pretty(ev.args), result: ev.result ?? null });
+                  fireComplete(p.hooks, ev);
+                  break;
+                }
+                case "error":
+                  parts.push({ type: "text", text: `\u26A0 ${ev.message}` });
+                  safely(() => p.hooks?.onError?.({ code: ev.code, message: ev.message }));
+                  break;
+              }
+              yield { content: parts.map((x) => ({ ...x })) };
+            }
+            if (!pending) break;
+            const req = pending;
+            safely(() => p.hooks?.onApprovalRequested?.(req));
+            const decision = await new Promise((resolve) => {
+              abortSignal.addEventListener("abort", () => resolve("reject"), { once: true });
+              setApproval({ event: req, decide: resolve });
+            });
+            setApproval(null);
+            body = { threadId: threadId.current, approval: { token: req.token, decision } };
+          }
+        } finally {
+          setApproval(null);
+          safely(p.hooks?.onTurnEnd);
+        }
+        yield { content: parts.map((x) => ({ ...x })) };
+      }
+    }),
+    // endpoint/hooks/etc. are read through `latest`, so the adapter stays stable.
+    [endpoint, hooks, credentials, headers]
+  );
+  const runtime = useLocalRuntime(adapter, { initialMessages: toInitialMessages(props.session.messages) });
+  const decideLoaded = async (decision) => {
+    const req = loadedPending;
+    if (!req || !threadId.current) return;
+    setLoadedPending(null);
+    for await (const ev of streamChat({ threadId: threadId.current, approval: { token: req.token, decision } }, { endpoint, credentials, headers })) {
+      if (ev.type === "tool.complete") fireComplete(hooks, ev);
+      if (ev.type === "error") safely(() => hooks?.onError?.({ code: ev.code, message: ev.message }));
+    }
+    props.onReload();
+  };
+  const shownApproval = approval?.event ?? loadedPending;
+  const decide = (d) => approval ? approval.decide(d) : void decideLoaded(d);
+  return /* @__PURE__ */ jsx2(RenderersContext.Provider, { value: props.resultRenderers, children: /* @__PURE__ */ jsx2(AssistantRuntimeProvider, { runtime, children: /* @__PURE__ */ jsxs2(ThreadPrimitive.Root, { style: { display: "contents" }, children: [
+    /* @__PURE__ */ jsxs2(ThreadPrimitive.Viewport, { className: "sa-viewport", children: [
+      /* @__PURE__ */ jsx2(ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsx2("div", { className: "sa-empty", children: "Ask me to look things up or make changes. I will ask before changing anything." }) }),
+      /* @__PURE__ */ jsx2(ThreadPrimitive.Messages, { components: { UserMessage, AssistantMessage } })
+    ] }),
+    shownApproval && /* @__PURE__ */ jsx2(ApprovalCard, { event: shownApproval, onDecide: decide }),
+    /* @__PURE__ */ jsxs2(ComposerPrimitive.Root, { className: "sa-composer", children: [
+      /* @__PURE__ */ jsx2(ComposerPrimitive.Input, { className: "sa-input", rows: 2, placeholder: props.placeholder ?? "Message\u2026", disabled: !!shownApproval }),
+      /* @__PURE__ */ jsxs2("div", { className: "sa-composer-bar", children: [
+        /* @__PURE__ */ jsx2("span", { className: "sa-hint", children: "Enter to send \xB7 Shift+Enter for a new line" }),
+        /* @__PURE__ */ jsx2(ComposerPrimitive.Send, { className: "sa-send", "aria-label": "Send", title: "Send", children: /* @__PURE__ */ jsx2(ArrowUpIcon, {}) })
+      ] })
+    ] })
+  ] }) }) });
+}
+function HistoryList(props) {
+  const [threads, setThreads] = useState(null);
+  const [error, setError] = useState(false);
+  const opts = { endpoint: props.endpoint, credentials: props.credentials, headers: props.headers };
+  useEffect(() => {
+    callJson({ action: "threads.list" }, opts).then((r) => r.data?.threads ? setThreads(r.data.threads) : setError(true)).catch(() => setError(true));
+  }, []);
+  const remove = async (id) => {
+    await callJson({ action: "threads.delete", threadId: id }, opts);
+    setThreads((t) => t?.filter((x) => x.id !== id) ?? null);
+    props.onDeleted(id);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "sa-viewport sa-history", children: [
+    /* @__PURE__ */ jsxs2("button", { className: "sa-btn sa-back", onClick: props.onClose, children: [
+      /* @__PURE__ */ jsx2(ArrowLeftIcon, {}),
+      " Back to chat"
+    ] }),
+    error && /* @__PURE__ */ jsx2("div", { className: "sa-error", children: "Could not load history." }),
+    threads === null && !error && /* @__PURE__ */ jsx2("div", { className: "sa-more", children: "Loading\u2026" }),
+    threads?.length === 0 && /* @__PURE__ */ jsx2("div", { className: "sa-empty", children: "No conversations yet." }),
+    threads?.map((t) => /* @__PURE__ */ jsxs2("div", { className: "sa-thread", children: [
+      /* @__PURE__ */ jsxs2("button", { className: "sa-thread-open", onClick: () => props.onOpen(t.id), children: [
+        /* @__PURE__ */ jsx2("span", { className: "sa-thread-title", children: t.title }),
+        /* @__PURE__ */ jsx2("span", { className: "sa-more", children: ago(t.updatedAt) })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { className: "sa-btn sa-icon-btn", "aria-label": "Delete conversation", title: "Delete", onClick: () => void remove(t.id), children: /* @__PURE__ */ jsx2(TrashIcon, {}) })
+    ] }, t.id))
+  ] });
+}
+function AgentChat(props) {
+  const [mode, setModeState] = useState(() => readMode(props.mode ?? "floating"));
+  const [localOpen, setLocalOpen] = useState(props.defaultOpen ?? false);
+  const shared = useContext(AgentContext);
+  const open = shared ? shared.open : localOpen;
+  const setOpen = shared ? shared.setOpen : setLocalOpen;
+  const [view, setView] = useState("chat");
+  const [session, setSession] = useState({ key: 0 });
+  const [loading, setLoading] = useState(false);
+  const docked = useContext(DockContext) && mode === "sidebar";
+  const [width, setWidth] = useState(() => clampWidth(Number(storeGet(WIDTH_KEY)) || DEFAULT_WIDTH));
+  const [resizing, setResizing] = useState(false);
+  const booted = useRef(false);
+  const key = threadKey(props.endpoint);
+  const opts = { endpoint: props.endpoint, credentials: props.credentials, headers: props.headers };
+  const setMode = useCallback((m) => {
+    setModeState(m);
+    storeSet(MODE_KEY, m);
+  }, []);
+  const openThread = useCallback(
+    async (id) => {
+      setLoading(true);
+      try {
+        const r = await callJson({ action: "threads.get", threadId: id }, opts);
+        if (r.status === 200 && r.data) {
+          setSession((s) => ({ key: s.key + 1, threadId: id, messages: r.data.messages, pending: r.data.pending }));
+          storeSet(key, id);
+        } else {
+          if (r.status === 404) storeSet(key, null);
+          setSession((s) => ({ key: s.key + 1 }));
+        }
+      } catch {
+        setSession((s) => ({ key: s.key + 1 }));
+      } finally {
+        setLoading(false);
+        setView("chat");
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.endpoint, props.credentials, props.headers]
+  );
+  const resizeTo = useCallback((w) => {
+    const next = clampWidth(w);
+    setWidth(next);
+    return next;
+  }, []);
+  const onHandleDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setResizing(true);
+  };
+  const onHandleMove = (e) => {
+    if (resizing) resizeTo(e.currentTarget.parentElement.getBoundingClientRect().right - e.clientX);
+  };
+  const onHandleUp = () => {
+    setResizing(false);
+    storeSet(WIDTH_KEY, String(width));
+  };
+  const onHandleKey = (e) => {
+    const d = e.key === "ArrowLeft" ? 16 : e.key === "ArrowRight" ? -16 : 0;
+    if (d) {
+      e.preventDefault();
+      storeSet(WIDTH_KEY, String(resizeTo(width + d)));
+    }
+  };
+  const newChat = () => {
+    storeSet(key, null);
+    setSession((s) => ({ key: s.key + 1 }));
+    setView("chat");
+  };
+  const visible = open;
+  useEffect(() => {
+    if (!visible || booted.current) return;
+    booted.current = true;
+    const last = storeGet(key);
+    if (last) void openThread(last);
+  }, [visible, key, openThread]);
+  return /* @__PURE__ */ jsxs2("div", { className: `sa-root sa-${mode}${docked ? " sa-docked" : ""}${resizing ? " sa-resizing" : ""}`, "data-theme": props.theme ?? "auto", children: [
+    /* @__PURE__ */ jsx2("style", { children: CSS }),
+    !open && /* @__PURE__ */ jsx2("button", { className: "sa-fab", "aria-label": "Open assistant", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx2(ChatBubbleIcon, { width: 22, height: 22 }) }),
+    visible && /* @__PURE__ */ jsxs2("section", { className: "sa-panel", "aria-label": props.title ?? "Assistant", style: docked ? { width } : void 0, children: [
+      docked && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "sa-resizer",
+          role: "separator",
+          "aria-orientation": "vertical",
+          "aria-label": "Resize assistant",
+          "aria-valuemin": MIN_WIDTH,
+          "aria-valuemax": maxWidth(),
+          "aria-valuenow": width,
+          tabIndex: 0,
+          onPointerDown: onHandleDown,
+          onPointerMove: onHandleMove,
+          onPointerUp: onHandleUp,
+          onPointerCancel: onHandleUp,
+          onKeyDown: onHandleKey
+        }
+      ),
+      /* @__PURE__ */ jsxs2("header", { className: "sa-header", children: [
+        /* @__PURE__ */ jsx2("span", { className: "sa-title", children: props.title ?? "Assistant" }),
+        props.allowModeSwitch !== false && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: "sa-btn sa-icon-btn",
+            onClick: () => setMode(mode === "floating" ? "sidebar" : "floating"),
+            title: mode === "floating" ? "Dock to sidebar" : "Float",
+            "aria-label": mode === "floating" ? "Dock to sidebar" : "Float",
+            children: mode === "floating" ? /* @__PURE__ */ jsx2(ViewVerticalIcon, {}) : /* @__PURE__ */ jsx2(OpenInNewWindowIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2("button", { className: "sa-btn sa-icon-btn", "aria-pressed": view === "history", onClick: () => setView((v) => v === "history" ? "chat" : "history"), title: "History", "aria-label": "History", children: /* @__PURE__ */ jsx2(CounterClockwiseClockIcon, {}) }),
+        /* @__PURE__ */ jsx2("button", { className: "sa-btn sa-icon-btn", onClick: newChat, title: "New chat", "aria-label": "New chat", children: /* @__PURE__ */ jsx2(PlusIcon, {}) }),
+        /* @__PURE__ */ jsx2("button", { className: "sa-btn sa-icon-btn", onClick: () => setOpen(false), "aria-label": "Close", title: "Close", children: /* @__PURE__ */ jsx2(Cross2Icon, {}) })
+      ] }),
+      view === "history" && /* @__PURE__ */ jsx2(
+        HistoryList,
+        {
+          ...opts,
+          onOpen: (id) => void openThread(id),
+          onClose: () => setView("chat"),
+          onDeleted: (id) => {
+            if (id === session.threadId) newChat();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "sa-chatwrap", hidden: view === "history", children: loading ? /* @__PURE__ */ jsx2("div", { className: "sa-viewport", children: /* @__PURE__ */ jsx2("div", { className: "sa-more", children: "Loading\u2026" }) }) : /* @__PURE__ */ jsx2(
+        Chat,
+        {
+          ...props,
+          session,
+          onThread: (id) => storeSet(key, id),
+          onReload: () => session.threadId && void openThread(session.threadId)
+        },
+        session.key
+      ) })
+    ] })
+  ] });
+}
+export {
+  AgentChat,
+  AgentProvider,
+  ResultView,
+  callJson,
+  humanize,
+  streamChat,
+  useAgent
+};