@cntyclub/agent-react 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { ChatMessage, ChatMessageBubble, Markdown, ChatToolChip, DataTablePaged, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Button, Spinner, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, cn, ChatInput, useMediaQuery, TooltipProvider, Fab } from '@cntyclub/ui-react';
-import { WrenchIcon, CheckIcon, ShieldAlertIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Maximize2Icon, XIcon, Trash2Icon, SparklesIcon } from 'lucide-react';
-import * as React2 from 'react';
+import { ChatMessage, ChatMessageBubble, Markdown, Collapsible, CollapsibleTrigger, ChatToolChip, cn, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Button, Group, Spinner, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, ChatInput, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
+import { ChevronDownIcon, CheckIcon, ShieldAlertIcon, CheckCheckIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Maximize2Icon, XIcon, Trash2Icon, SparklesIcon, CodeIcon } from 'lucide-react';
+import * as React3 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/api-client.ts
@@ -77,84 +77,418 @@ var AgentApiClient = class {
     });
   }
 };
-function humanizeToolName(toolName) {
-  return toolName.replace(/^[a-z]+_/, "").replaceAll("_", " ");
+
+// src/message-group.ts
+function groupMessages(messages) {
+  const items = [];
+  let group = null;
+  let groupKey = "";
+  const stepIndexByCallId = /* @__PURE__ */ new Map();
+  const flush = () => {
+    if (group && group.length > 0) {
+      items.push({ key: `tools-${groupKey}`, kind: "tool-activity", steps: group });
+    }
+    group = null;
+    groupKey = "";
+    stepIndexByCallId.clear();
+  };
+  for (const message of messages) {
+    if (message.role === "user") {
+      flush();
+      items.push({ key: message.id, kind: "user", message });
+      continue;
+    }
+    if (message.role === "assistant") {
+      const hasText = Boolean(message.content && message.content.trim());
+      if (hasText) {
+        flush();
+        items.push({ key: message.id, kind: "assistant-text", message });
+      }
+      for (const toolCall of message.tool_calls ?? []) {
+        const callId2 = toolCall.id ?? `${message.id}-${toolCall.name}`;
+        if (!group) {
+          group = [];
+          groupKey = message.id;
+        }
+        stepIndexByCallId.set(callId2, group.length);
+        group.push({
+          args: toolCall.arguments ?? {},
+          callId: callId2,
+          name: toolCall.name ?? "tool",
+          status: "running"
+        });
+      }
+      continue;
+    }
+    const callId = message.tool_call_id ?? "";
+    if (!group) {
+      group = [];
+      groupKey = message.id;
+    }
+    const existingIndex = callId ? stepIndexByCallId.get(callId) : void 0;
+    if (existingIndex !== void 0) {
+      const step = group[existingIndex];
+      step.status = "done";
+      step.result = message.result || step.result;
+      step.blocks = message.blocks ?? step.blocks;
+    } else {
+      group.push({
+        args: {},
+        blocks: message.blocks,
+        callId: callId || message.id,
+        name: message.tool_name ?? "tool",
+        result: message.result,
+        status: "done"
+      });
+    }
+  }
+  flush();
+  return items;
 }
 function MessageItem({ message }) {
   if (message.role === "user") {
     return /* @__PURE__ */ jsx(ChatMessage, { from: "user", children: /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) });
   }
   if (message.role === "assistant") {
-    const requestedTools = message.tool_calls ?? [];
-    if (!message.content && requestedTools.length === 0) return null;
-    return /* @__PURE__ */ jsxs(ChatMessage, { from: "assistant", children: [
-      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }) : null,
-      requestedTools.map((toolCall) => /* @__PURE__ */ jsxs(ChatToolChip, { icon: /* @__PURE__ */ jsx(WrenchIcon, {}), children: [
-        "Using ",
-        humanizeToolName(toolCall.name ?? "tool"),
-        "\u2026"
-      ] }, toolCall.id ?? toolCall.name))
-    ] });
+    if (!message.content || !message.content.trim()) return null;
+    return /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }) });
   }
-  const tableBlocks = (message.blocks ?? []).filter((block) => block.type === "table");
-  return /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: tableBlocks.length > 0 ? tableBlocks.map((block, index) => /* @__PURE__ */ jsx("div", { className: "w-full max-w-full", children: /* @__PURE__ */ jsx(
-    DataTablePaged,
-    {
-      columns: block.columns.map((key) => ({ key })),
-      pageSize: 8,
-      rows: block.rows,
-      totalCount: typeof block.pagination?.count === "number" ? block.pagination.count : block.row_count
+  return null;
+}
+var NOISE_KEYS = /* @__PURE__ */ new Set([
+  "id",
+  "pk",
+  "uuid",
+  "slug",
+  "object_id",
+  "external_id",
+  "client_id",
+  "content_type",
+  "provider_call_id",
+  "tool_call_id"
+]);
+var NOISE_PATTERNS = [
+  /_id$/i,
+  /_ids$/i,
+  /_key$/i,
+  /_hash$/i,
+  /embedding/i,
+  /vector/i,
+  /password/i,
+  /secret/i,
+  /(^|_)token(_|$)/i
+];
+var IMAGE_KEY = /(image|logo|avatar|photo|picture|icon|thumbnail|banner|cover|headshot)/i;
+var IMAGE_EXT = /\.(png|jpe?g|gif|webp|svg|avif)(\?|$)/i;
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(T|$)/;
+var URL_RE = /^https?:\/\//i;
+var PRIORITY_KEYS = ["name", "title", "label", "full_name", "email"];
+var LABEL_KEYS = ["name", "title", "label", "full_name", "email", "code"];
+function isUuid(value) {
+  return typeof value === "string" && UUID_RE.test(value);
+}
+function humanize(key) {
+  const text = key.replace(/_/g, " ").trim();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function isNoiseColumn(key, rows) {
+  if (NOISE_KEYS.has(key.toLowerCase())) return true;
+  if (NOISE_PATTERNS.some((pattern) => pattern.test(key))) return true;
+  const values = rows.map((row) => row[key]).filter((value) => value !== null && value !== void 0 && value !== "");
+  return values.length > 0 && values.every(isUuid);
+}
+function pickLabel(obj) {
+  for (const key of LABEL_KEYS) {
+    const value = obj[key];
+    if (typeof value === "string" && value.trim()) return value;
+    if (typeof value === "number") return String(value);
+  }
+  return null;
+}
+function formatObject(obj) {
+  const label = pickLabel(obj);
+  if (label) return label;
+  const parts = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === void 0 || value === "") continue;
+    if (typeof value === "object") continue;
+    parts.push(`${humanize(key)} ${value}`);
+    if (parts.length >= 6) break;
+  }
+  return parts.join(" \xB7 ") || "\u2014";
+}
+function formatArray(arr) {
+  const items = arr.map((item) => {
+    if (item === null || item === void 0) return "";
+    if (Array.isArray(item)) return "";
+    if (typeof item === "object") return pickLabel(item) ?? "";
+    return String(item);
+  }).filter(Boolean);
+  if (items.length === 0) return "\u2014";
+  const shown = items.slice(0, 8);
+  const extra = items.length - shown.length;
+  return shown.join(", ") + (extra > 0 ? ` +${extra} more` : "");
+}
+function renderScalar(key, value) {
+  if (typeof value !== "string") return value;
+  const text = value.trim();
+  if (URL_RE.test(text) && (IMAGE_EXT.test(text) || IMAGE_KEY.test(key))) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: humanize(key),
+        className: "h-9 w-9 rounded-md border border-border object-cover",
+        loading: "lazy",
+        src: text
+      }
+    );
+  }
+  if (URL_RE.test(text)) {
+    let label = text;
+    try {
+      label = new URL(text).hostname.replace(/^www\./, "");
+    } catch {
     }
-  ) }, `${message.id}-${index}`)) : /* @__PURE__ */ jsxs(ChatToolChip, { icon: /* @__PURE__ */ jsx(CheckIcon, {}), children: [
-    humanizeToolName(message.tool_name ?? "tool"),
-    " finished"
-  ] }) });
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "text-primary underline underline-offset-2",
+        href: text,
+        rel: "noreferrer",
+        target: "_blank",
+        children: label
+      }
+    );
+  }
+  if (ISO_DATE_RE.test(text)) {
+    const date = new Date(text);
+    if (!Number.isNaN(date.getTime())) return date.toLocaleDateString();
+  }
+  return text;
 }
-function humanizeToolName2(toolName) {
+function formatCellValue(key, value) {
+  if (value === null || value === void 0 || value === "") return value;
+  if (Array.isArray(value)) return formatArray(value);
+  if (typeof value === "object") return formatObject(value);
+  return renderScalar(key, value);
+}
+function toDisplayTable(block) {
+  const rows = block.rows ?? [];
+  const kept = (block.columns ?? []).filter((key) => !isNoiseColumn(key, rows));
+  const columnKeys = kept.length > 0 ? kept : block.columns ?? [];
+  const ordered = [...columnKeys].sort((a, b) => {
+    const ra = PRIORITY_KEYS.indexOf(a.toLowerCase());
+    const rb = PRIORITY_KEYS.indexOf(b.toLowerCase());
+    const pa = ra === -1 ? PRIORITY_KEYS.length : ra;
+    const pb = rb === -1 ? PRIORITY_KEYS.length : rb;
+    if (pa !== pb) return pa - pb;
+    return columnKeys.indexOf(a) - columnKeys.indexOf(b);
+  });
+  const columns = ordered.map((key) => ({ key, label: humanize(key) }));
+  const displayRows = rows.map((row) => {
+    const out = {};
+    for (const key of ordered) out[key] = formatCellValue(key, row[key]);
+    return out;
+  });
+  return { columns, rows: displayRows };
+}
+
+// src/tool-presentation.ts
+function humanizeToolName(toolName) {
   return toolName.replace(/^[a-z]+_/, "").replaceAll("_", " ");
 }
-function ToolApprovalCard({ approval, onResolve, resolving }) {
-  const argumentEntries = Object.entries(approval.arguments ?? {});
-  return /* @__PURE__ */ jsxs(ChatToolCard, { className: "border-warning/40", children: [
-    /* @__PURE__ */ jsxs(ChatToolCardHeader, { children: [
-      /* @__PURE__ */ jsx(ShieldAlertIcon, { className: "size-4 text-warning" }),
-      "Approval needed"
-    ] }),
-    /* @__PURE__ */ jsxs("p", { className: "mt-1 text-muted-foreground", children: [
-      "The assistant wants to run",
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: humanizeToolName2(approval.tool_name) }),
-      " ",
-      "\u2014 this will change your data."
+var UUID_RE2 = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function isTechnicalKey(key) {
+  const lower = key.toLowerCase();
+  return lower === "id" || lower === "client_id" || lower === "slug" || lower.endsWith("_id") || lower.endsWith("_ids") || lower.endsWith("_key") || lower.endsWith("_slug") || lower.endsWith("_uuid") || lower === "uuid" || lower.endsWith("_s3_key") || lower === "embedding";
+}
+function isTechnicalValue(value) {
+  return typeof value === "string" && UUID_RE2.test(value.trim());
+}
+function humanizeKey(key) {
+  const spaced = key.replaceAll("_", " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function formatValue(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) {
+    const items = value.filter((item) => !isTechnicalValue(item)).map((item) => formatValue(item));
+    return items.length ? items.join(", ") : `${value.length} item${value.length === 1 ? "" : "s"}`;
+  }
+  if (typeof value === "object") {
+    const record = value;
+    for (const key of ["name", "title", "label", "email"]) {
+      if (typeof record[key] === "string") return record[key];
+    }
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+function deriveDetails(args) {
+  const details = [];
+  for (const [key, value] of Object.entries(args ?? {})) {
+    if (isTechnicalKey(key)) continue;
+    if (isTechnicalValue(value)) continue;
+    if (value === "" || value === null || value === void 0) continue;
+    const formatted = formatValue(value);
+    if (!formatted || formatted === "\u2014") continue;
+    details.push({ label: humanizeKey(key), value: formatted.length > 140 ? `${formatted.slice(0, 140)}\u2026` : formatted });
+  }
+  return details;
+}
+function resolveToolPresentation(describe, toolName, args) {
+  let description;
+  try {
+    description = describe?.(toolName, args ?? {});
+  } catch {
+    description = null;
+  }
+  const title = description?.title?.trim() || humanizeToolName(toolName);
+  const summary = description?.summary?.trim() || null;
+  let details = description?.details ?? [];
+  const wantsDerived = description?.showDerivedDetails ?? description?.details === void 0;
+  if (details.length === 0 && wantsDerived) {
+    details = deriveDetails(args ?? {});
+  }
+  return { details, summary, title };
+}
+function StepTables({ blocks, stepKey }) {
+  const tables = (blocks ?? []).filter((block) => block.type === "table");
+  if (tables.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: tables.map((block, index) => {
+    const { columns, rows } = toDisplayTable(block);
+    return /* @__PURE__ */ jsx("div", { className: "w-full max-w-full", children: /* @__PURE__ */ jsx(
+      DataTablePaged,
+      {
+        columns,
+        pageSize: 8,
+        rows,
+        totalCount: typeof block.pagination?.count === "number" ? block.pagination.count : block.row_count
+      }
+    ) }, `${stepKey}-table-${index}`);
+  }) });
+}
+function RawJsonDisclosure({ result }) {
+  return /* @__PURE__ */ jsxs(Collapsible, { className: "mt-1.5", children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground", children: [
+      /* @__PURE__ */ jsx(CodeIcon, { className: "size-3" }),
+      /* @__PURE__ */ jsx("span", { children: "Raw JSON" }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 transition-transform group-data-[panel-open]:rotate-180" })
     ] }),
-    argumentEntries.length > 0 && /* @__PURE__ */ jsxs("dl", { className: "mt-2 space-y-0.5 rounded-lg bg-muted p-2 font-mono text-xs", children: [
-      argumentEntries.slice(0, 8).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxs("dt", { className: "shrink-0 text-muted-foreground", children: [
-          key,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx("dd", { className: "truncate", children: typeof value === "object" ? JSON.stringify(value) : String(value) })
-      ] }, key)),
-      argumentEntries.length > 8 && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
-        "\u2026and ",
-        argumentEntries.length - 8,
-        " more"
-      ] })
+    /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-64 overflow-auto rounded-lg bg-muted p-2 font-mono text-[11px] leading-snug text-muted-foreground", children: result }) })
+  ] });
+}
+function StepDetail({
+  describeToolCall,
+  step
+}) {
+  const { details, summary, title } = resolveToolPresentation(describeToolCall, step.name, step.args);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/72 bg-card p-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 font-medium text-sm", children: [
+      step.status === "running" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-warning" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-success" }),
+      title
     ] }),
-    /* @__PURE__ */ jsxs(ChatToolCardActions, { children: [
+    summary ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-muted-foreground text-xs", children: summary }) : null,
+    details.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "mt-1.5 space-y-0.5 text-xs", children: details.map((detail) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-muted-foreground", children: detail.label }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words", children: detail.value })
+    ] }, detail.label)) }) : null,
+    step.result ? /* @__PURE__ */ jsx(RawJsonDisclosure, { result: step.result }) : null
+  ] });
+}
+function ToolActivityGroup({ describeToolCall, steps }) {
+  const [open, setOpen] = React3.useState(false);
+  if (steps.length === 0) return null;
+  const last = steps[steps.length - 1];
+  const anyRunning = steps.some((step) => step.status === "running");
+  const lastTitle = resolveToolPresentation(describeToolCall, last.name, last.args).title || humanizeToolName(last.name);
+  const chipLabel = anyRunning ? `${lastTitle}\u2026` : steps.length > 1 ? lastTitle : `${lastTitle} finished`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs(Collapsible, { onOpenChange: setOpen, open, children: [
       /* @__PURE__ */ jsx(
-        Button,
+        CollapsibleTrigger,
         {
-          disabled: resolving,
-          onClick: () => onResolve(approval.id, false),
-          size: "sm",
-          variant: "outline",
-          children: "Decline"
+          render: /* @__PURE__ */ jsx(
+            ChatToolChip,
+            {
+              className: "cursor-pointer pr-2 hover:bg-muted",
+              icon: anyRunning ? /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-warning" }) : /* @__PURE__ */ jsx(CheckIcon, {}),
+              children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: chipLabel }),
+                steps.length > 1 ? /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-background px-1.5 text-[10px] text-foreground/72", children: [
+                  steps.length,
+                  " steps"
+                ] }) : null,
+                /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3 transition-transform", open && "rotate-180") })
+              ] })
+            }
+          )
         }
       ),
-      /* @__PURE__ */ jsxs(Button, { disabled: resolving, onClick: () => onResolve(approval.id, true), size: "sm", children: [
-        resolving ? /* @__PURE__ */ jsx(Spinner, {}) : null,
-        "Approve"
+      /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-1.5", children: steps.map((step) => /* @__PURE__ */ jsx(StepDetail, { describeToolCall, step }, step.callId)) }) })
+    ] }),
+    steps.map((step) => /* @__PURE__ */ jsx(StepTables, { blocks: step.blocks, stepKey: step.callId }, `${step.callId}-tables`))
+  ] });
+}
+function ToolApprovalCard({
+  approval,
+  describeToolCall,
+  onAlwaysApprove,
+  onResolve,
+  resolving
+}) {
+  const { details, summary, title } = resolveToolPresentation(
+    describeToolCall,
+    approval.tool_name,
+    approval.arguments ?? {}
+  );
+  return /* @__PURE__ */ jsxs(ChatToolCard, { className: "border-warning/40", children: [
+    /* @__PURE__ */ jsxs(ChatToolCardHeader, { children: [
+      /* @__PURE__ */ jsx(ShieldAlertIcon, { className: "size-4 text-warning" }),
+      "Approval needed"
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: summary ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "The assistant wants to ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: title.toLowerCase() }),
+      " \u2014 this will change your data."
+    ] }) }),
+    details.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-2 space-y-1 rounded-lg bg-muted p-2 text-xs", children: details.map((detail) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-muted-foreground", children: detail.label }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words font-medium text-foreground", children: detail.value })
+    ] }, detail.label)) }),
+    /* @__PURE__ */ jsxs(ChatToolCardActions, { children: [
+      /* @__PURE__ */ jsx(Button, { disabled: resolving, onClick: () => onResolve(approval.id, false), size: "sm", variant: "outline", children: "Decline" }),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsxs(Button, { disabled: resolving, onClick: () => onResolve(approval.id, true), size: "sm", children: [
+          resolving ? /* @__PURE__ */ jsx(Spinner, {}) : null,
+          "Approve"
+        ] }),
+        /* @__PURE__ */ jsxs(Menu, { children: [
+          /* @__PURE__ */ jsx(
+            MenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx(Button, { "aria-label": "More approve options", disabled: resolving, size: "icon-sm", variant: "default", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuPopup, { align: "end", children: /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              onClick: () => {
+                onAlwaysApprove(approval.tool_name);
+                onResolve(approval.id, true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(CheckCheckIcon, {}),
+                "Always approve \u201C",
+                title,
+                "\u201D"
+              ]
+            }
+          ) })
+        ] })
       ] })
     ] })
   ] });
@@ -165,24 +499,25 @@ function AgentPanel({
   chat,
   className,
   config,
+  onAlwaysApprove,
   onClose,
   onToggleAgentMode
 }) {
-  const [draft, setDraft] = React2.useState("");
-  const [view, setView] = React2.useState("chat");
+  const [draft, setDraft] = React3.useState("");
+  const [view, setView] = React3.useState("chat");
   const agentName = config.agentName ?? chat.agentInfo?.name ?? "Assistant";
   const suggestions = config.suggestions ?? [
     "What can you help me with?",
     "Give me a quick summary of my data."
   ];
-  const handleSubmit = React2.useCallback(
+  const handleSubmit = React3.useCallback(
     (text) => {
       setDraft("");
       void chat.send(text);
     },
     [chat]
   );
-  const openHistory = React2.useCallback(() => {
+  const openHistory = React3.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
@@ -320,11 +655,15 @@ function AgentPanel({
               suggestion
             )) })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            chat.messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message }, message.id)),
+            groupMessages(chat.messages).map(
+              (item) => item.kind === "tool-activity" ? /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(ToolActivityGroup, { describeToolCall: config.describeToolCall, steps: item.steps }) }, item.key) : /* @__PURE__ */ jsx(MessageItem, { message: item.message }, item.key)
+            ),
             chat.pendingApprovals.map((approval) => /* @__PURE__ */ jsx(
               ToolApprovalCard,
               {
                 approval,
+                describeToolCall: config.describeToolCall,
+                onAlwaysApprove,
                 onResolve: (callId, approve) => void chat.resolveApproval(callId, approve),
                 resolving: chat.resolvingApprovalId === approval.id
               },
@@ -353,16 +692,16 @@ function AgentPanel({
   );
 }
 function useAgentChat(config) {
-  const client = React2.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React2.useState(null);
-  const [conversationId, setConversationId] = React2.useState(null);
-  const [conversations, setConversations] = React2.useState([]);
-  const [messages, setMessages] = React2.useState([]);
-  const [pendingApprovals, setPendingApprovals] = React2.useState([]);
-  const [sending, setSending] = React2.useState(false);
-  const [resolvingApprovalId, setResolvingApprovalId] = React2.useState(null);
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
+  const client = React3.useMemo(() => new AgentApiClient(config), [config]);
+  const [agentInfo, setAgentInfo] = React3.useState(null);
+  const [conversationId, setConversationId] = React3.useState(null);
+  const [conversations, setConversations] = React3.useState([]);
+  const [messages, setMessages] = React3.useState([]);
+  const [pendingApprovals, setPendingApprovals] = React3.useState([]);
+  const [sending, setSending] = React3.useState(false);
+  const [resolvingApprovalId, setResolvingApprovalId] = React3.useState(null);
+  const [error, setError] = React3.useState(null);
+  React3.useEffect(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -372,11 +711,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React2.useCallback((err) => {
+  const handleFailure = React3.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React2.useCallback(
+  const applyResponse = React3.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -397,7 +736,7 @@ function useAgentChat(config) {
     },
     []
   );
-  const send = React2.useCallback(
+  const send = React3.useCallback(
     async (text) => {
       if (sending) return;
       setSending(true);
@@ -413,7 +752,7 @@ function useAgentChat(config) {
     },
     [applyResponse, client, conversationId, handleFailure, sending]
   );
-  const resolveApproval = React2.useCallback(
+  const resolveApproval = React3.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
@@ -429,13 +768,13 @@ function useAgentChat(config) {
     },
     [applyResponse, client, handleFailure, resolvingApprovalId]
   );
-  const newChat = React2.useCallback(() => {
+  const newChat = React3.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
   }, []);
-  const refreshConversations = React2.useCallback(async () => {
+  const refreshConversations = React3.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
@@ -443,7 +782,7 @@ function useAgentChat(config) {
       handleFailure(err);
     }
   }, [client, handleFailure]);
-  const openConversation = React2.useCallback(
+  const openConversation = React3.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -457,7 +796,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React2.useCallback(
+  const deleteConversation = React3.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -469,7 +808,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React2.useCallback(() => setError(null), []);
+  const clearError = React3.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -488,26 +827,86 @@ function useAgentChat(config) {
     sending
   };
 }
+var STORAGE_PREFIX = "cc-agent-always-approve:";
+function storageKey(clientId) {
+  return `${STORAGE_PREFIX}${clientId || "default"}`;
+}
+function readStored(clientId) {
+  if (typeof window === "undefined") return /* @__PURE__ */ new Set();
+  try {
+    const raw = window.localStorage.getItem(storageKey(clientId));
+    if (!raw) return /* @__PURE__ */ new Set();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? new Set(parsed.filter((v) => typeof v === "string")) : /* @__PURE__ */ new Set();
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function useAlwaysApprove(clientId) {
+  const [approved, setApproved] = React3.useState(() => /* @__PURE__ */ new Set());
+  React3.useEffect(() => {
+    setApproved(readStored(clientId));
+  }, [clientId]);
+  const persist = React3.useCallback(
+    (next) => {
+      setApproved(next);
+      if (typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(storageKey(clientId), JSON.stringify([...next]));
+      } catch {
+      }
+    },
+    [clientId]
+  );
+  const isAlwaysApproved = React3.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React3.useCallback(
+    (toolName) => {
+      if (approved.has(toolName)) return;
+      const next = new Set(approved);
+      next.add(toolName);
+      persist(next);
+    },
+    [approved, persist]
+  );
+  const clearAlwaysApprove = React3.useCallback(
+    (toolName) => {
+      if (!approved.has(toolName)) return;
+      const next = new Set(approved);
+      next.delete(toolName);
+      persist(next);
+    },
+    [approved, persist]
+  );
+  return { clearAlwaysApprove, isAlwaysApproved, setAlwaysApprove };
+}
 function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = React2.useCallback(
+  const setOpen = React3.useCallback(
     (next) => {
       setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const [agentMode, setAgentMode] = React2.useState(false);
+  const [agentMode, setAgentMode] = React3.useState(false);
   const isDesktop = useMediaQuery("(min-width: 640px)", {
     defaultSSRValue: true,
     ssr: true
   });
   const fullscreen = !isDesktop || agentMode;
   const chat = useAgentChat(config);
-  const lastNavigatedMessageId = React2.useRef(null);
+  const alwaysApprove = useAlwaysApprove(config.clientId);
+  const { pendingApprovals, resolveApproval, resolvingApprovalId } = chat;
+  const { isAlwaysApproved } = alwaysApprove;
+  React3.useEffect(() => {
+    if (!open || resolvingApprovalId) return;
+    const target = pendingApprovals.find((approval) => isAlwaysApproved(approval.tool_name));
+    if (target) void resolveApproval(target.id, true);
+  }, [open, pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
+  const lastNavigatedMessageId = React3.useRef(null);
   const { messages } = chat;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -519,7 +918,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     const path = mapping.buildRoute ? mapping.buildRoute(args) : mapping.route;
     if (path) config.navigate(path);
   }, [config, fullscreen, messages, open]);
-  const closePanel = React2.useCallback(() => {
+  const closePanel = React3.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
@@ -547,6 +946,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
             chat,
             className: "flex-1",
             config,
+            onAlwaysApprove: alwaysApprove.setAlwaysApprove,
             onClose: closePanel,
             onToggleAgentMode: () => setAgentMode((value) => !value)
           }
@@ -572,6 +972,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
             chat,
             className: "flex-1",
             config,
+            onAlwaysApprove: alwaysApprove.setAlwaysApprove,
             onClose: closePanel,
             onToggleAgentMode: () => setAgentMode(true)
           }
@@ -596,6 +997,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-export { AgentApiClient, AgentApiError, AgentPanel, AgentWidget, MessageItem, ToolApprovalCard, defineAgentConfig, useAgentChat };
+export { AgentApiClient, AgentApiError, AgentPanel, AgentWidget, MessageItem, ToolActivityGroup, ToolApprovalCard, defineAgentConfig, deriveDetails, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map