@frontera-sdk/chat-ui 1.50.40

package/dist/chunk-IQRPGFLI.js

@@ -0,0 +1,234 @@
+'use client';
+import { cn } from './chunk-DGDHKMDB.js';
+import { CrossMediumIcon } from './chunk-AFVU5VT6.js';
+import * as React from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+var PortalRootContext = createContext(null);
+function usePortalContainer() {
+  return useContext(PortalRootContext);
+}
+function PortalRootProvider({
+  dark,
+  style,
+  children
+}) {
+  const [root, setRoot] = useState(null);
+  useEffect(() => {
+    const element = document.createElement("div");
+    element.setAttribute("data-frontera-portal-root", "");
+    document.body.appendChild(element);
+    setRoot(element);
+    return () => {
+      element.remove();
+    };
+  }, []);
+  useEffect(() => {
+    if (!root) return;
+    root.className = `fr-shell${dark ? " dark" : ""}`;
+    root.removeAttribute("style");
+    for (const [key, value] of Object.entries(style ?? {})) {
+      if (typeof value !== "string") continue;
+      if (key.startsWith("--")) root.style.setProperty(key, value);
+      else root.style.setProperty(key, value);
+    }
+  }, [root, dark, style]);
+  return /* @__PURE__ */ jsx(PortalRootContext.Provider, { value: root, children });
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  const container = usePortalContainer();
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Portal,
+    {
+      "data-slot": "dialog-portal",
+      ...container ? { container } : {},
+      ...props
+    }
+  );
+}
+function DialogClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      "data-slot": "dialog-close",
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function DialogOverlay({
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-100 bg-scrim",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+      },
+      ...props
+    }
+  );
+}
+function isPopperOpen() {
+  if (typeof document === "undefined") return false;
+  return !!document.querySelector(
+    '[data-radix-popper-content-wrapper], [data-slot="select-content"][data-state="open"]'
+  );
+}
+function hasDialogAbove(content) {
+  if (typeof document === "undefined" || !content) return false;
+  const open = document.querySelectorAll(
+    '[data-slot="dialog-content"][data-state="open"]'
+  );
+  if (open.length < 2) return false;
+  return open[open.length - 1] !== content;
+}
+function DialogContent({
+  className,
+  children,
+  overlayClassName,
+  showCloseButton = true,
+  onPointerDownOutside,
+  onInteractOutside,
+  onEscapeKeyDown,
+  ref,
+  ...props
+}) {
+  const contentRef = React.useRef(null);
+  const setRefs = React.useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref: setRefs,
+        "data-slot": "dialog-content",
+        className: cn(
+          // Width (not just max-width) carries the side gutter so a consumer's
+          // `max-w-*` override can't collapse it to the screen edges on phones:
+          // `max-width` overrides drop the calc, `width` survives them.
+          "bg-surface-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-100 w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-lg duration-200",
+          className
+        ),
+        onPointerDownOutside: (e) => {
+          if (isPopperOpen() || hasDialogAbove(contentRef.current)) {
+            e.preventDefault();
+            return;
+          }
+          onPointerDownOutside?.(e);
+        },
+        onInteractOutside: (e) => {
+          if (isPopperOpen() || hasDialogAbove(contentRef.current)) {
+            e.preventDefault();
+            return;
+          }
+          onInteractOutside?.(e);
+        },
+        onEscapeKeyDown: (e) => {
+          if (hasDialogAbove(contentRef.current)) {
+            e.preventDefault();
+            return;
+          }
+          onEscapeKeyDown?.(e);
+        },
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 flex size-7 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 cursor-pointer",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx(CrossMediumIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn(
+        "flex flex-col gap-2 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, PortalRootProvider, usePortalContainer };

package/dist/chunk-IXDM5R55.js

@@ -0,0 +1,23 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+
+// src/vendor/ui/hooks/use-is-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+var QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+var query = null;
+function mediaQuery() {
+  if (!query) query = window.matchMedia(QUERY);
+  return query;
+}
+function subscribe(onChange) {
+  const mql = mediaQuery();
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+var getSnapshot = () => mediaQuery().matches;
+var getServerSnapshot = () => false;
+function useIsMobile() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { MOBILE_BREAKPOINT, useIsMobile };

package/dist/chunk-JD6ETTXC.js

@@ -0,0 +1,178 @@
+'use client';
+import { getToolMeta } from './chunk-XJFTVKLW.js';
+import { Button } from './chunk-GTQH7MPF.js';
+import { ChevronDownMediumIcon, CrossMediumIcon } from './chunk-AFVU5VT6.js';
+import { useChatClientOptional } from './chunk-7ADM3CKD.js';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_POLL_MS = 5e3;
+function PendingCards({
+  conversationId,
+  onSettled,
+  pollMs = DEFAULT_POLL_MS
+}) {
+  const client = useChatClientOptional();
+  const [pending, setPending] = useState([]);
+  const [busyId, setBusyId] = useState(null);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    if (!client || !conversationId) return;
+    try {
+      const rows = await client.listPendingApprovals(conversationId);
+      setPending(Array.isArray(rows) ? rows : []);
+    } catch {
+    }
+  }, [client, conversationId]);
+  useEffect(() => {
+    void refresh();
+    if (!pollMs) return;
+    const timer = setInterval(() => void refresh(), pollMs);
+    return () => clearInterval(timer);
+  }, [refresh, pollMs]);
+  const open = useMemo(
+    () => pending.filter(
+      (row) => row.status === "pending" && row.pauseReason !== "needs_connect"
+    ),
+    [pending]
+  );
+  if (!client || !conversationId || open.length === 0) return null;
+  const settle = async (id, run) => {
+    setBusyId(id);
+    setError(null);
+    try {
+      await run();
+      await refresh();
+      onSettled?.(id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+  return (
+    /*
+          The rail, in the platform's own classes.
+    
+          `-mb-3` with `pb-4` tucks the lower edge behind the composer so the two
+          read as one control; `bg-surface-inset` sets it back from the raised card
+          rows inside it. Copied rather than approximated — this sits directly
+          above the copied composer, and a near-miss reads as a bug in the product
+          rather than a difference in ours.
+        */
+    /* @__PURE__ */ jsxs("div", { className: "relative z-0 -mb-3 flex flex-col gap-1.5 rounded-2xl border border-border bg-surface-inset p-1.5 pb-4", children: [
+      open.map((row) => /* @__PURE__ */ jsx(
+        ApprovalCard,
+        {
+          row,
+          busy: busyId === row.id,
+          onDecide: (decision) => (
+            /*
+                          No continuation, deliberately.
+            
+                          An approval blocks the run MID-TURN: the tool call is waiting on
+                          the server, and deciding it releases that same run, which carries
+                          on streaming into the message already on screen. Sending a
+                          follow-up here would start a SECOND turn — and since the agent
+                          would call the same tool again, that call parks again, gets
+                          nudged again, and the conversation loops.
+                        */
+            settle(row.id, () => client.respondToApproval(row.id, decision))
+          )
+        },
+        row.id
+      )),
+      error && /* @__PURE__ */ jsx("div", { className: "fr-error", role: "alert", children: error })
+    ] })
+  );
+}
+function ApprovalCard({
+  row,
+  busy,
+  onDecide
+}) {
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const summary = row.actionSummary;
+  const toolName = row.toolName ?? "tool";
+  const meta = getToolMeta(toolName, "size-4");
+  const title = summary?.title ?? `${toolName} needs your approval`;
+  const preview = summary?.preview ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-surface-raised px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-inset text-foreground", children: meta.icon }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": detailsOpen,
+          "aria-label": `${detailsOpen ? "Hide" : "Show"} details for ${title}`,
+          className: "group flex min-w-0 flex-1 items-center gap-2.5 text-left",
+          onClick: () => setDetailsOpen((open) => !open),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-sm font-medium text-foreground", children: title }),
+              /* @__PURE__ */ jsxs("span", { className: "mt-px block truncate text-xs text-muted-foreground", children: [
+                meta.label,
+                row.risk ? ` \xB7 ${row.risk}` : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors group-hover:bg-surface-inset group-hover:text-foreground", children: /* @__PURE__ */ jsx(
+              ChevronDownMediumIcon,
+              {
+                className: `size-3.5 transition-transform ${detailsOpen ? "rotate-180" : ""}`,
+                "aria-hidden": true
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            className: "size-8 rounded-full p-0",
+            disabled: busy,
+            "aria-label": `Deny ${title}`,
+            title: `Deny ${title}`,
+            onClick: () => onDecide("deny"),
+            children: /* @__PURE__ */ jsx(CrossMediumIcon, { className: "size-3.5", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "default-neutral",
+            className: "h-8 rounded-full px-3.5",
+            disabled: busy,
+            "aria-label": `Approve ${title}`,
+            onClick: () => onDecide("approve"),
+            children: busy ? "Working\u2026" : "Approve"
+          }
+        )
+      ] })
+    ] }),
+    detailsOpen && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1 border-t border-border pt-2 pl-[2.875rem] text-xs", children: [
+      summary?.description && /* @__PURE__ */ jsx("p", { className: "leading-5 text-muted-foreground", children: summary.description }),
+      /* @__PURE__ */ jsx(DetailRow, { label: "Tool", value: toolName }),
+      row.toolSource && /* @__PURE__ */ jsx(DetailRow, { label: "Integration", value: String(row.toolSource) }),
+      summary?.resource?.label && /* @__PURE__ */ jsx(DetailRow, { label: "Target", value: summary.resource.label }),
+      row.risk && /* @__PURE__ */ jsx(DetailRow, { label: "Risk", value: String(row.risk) }),
+      row.policyReason && /* @__PURE__ */ jsx(DetailRow, { label: "Why unsafe", value: String(row.policyReason) }),
+      preview.length > 0 && /* @__PURE__ */ jsx("p", { className: "pt-1 font-medium text-foreground", children: "Data / input preview" }),
+      preview.map((item) => /* @__PURE__ */ jsx(DetailRow, { label: item.label, value: item.value }, item.label))
+    ] })
+  ] });
+}
+function DetailRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(5.5rem,8.5rem)_1fr] gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "break-all text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "break-words text-foreground", children: value })
+  ] });
+}
+
+export { PendingCards };

package/dist/chunk-OP4MLJDA.js

@@ -0,0 +1,215 @@
+'use client';
+import { describeToolRow, getToolMeta, Shimmer, Collapse } from './chunk-XJFTVKLW.js';
+import { cn } from './chunk-DGDHKMDB.js';
+import { Code2Icon, ChevronDownMediumIcon, ProcessorIcon } from './chunk-AFVU5VT6.js';
+import { memo, useState, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RUNNING_STATES = /* @__PURE__ */ new Set([
+  "input-streaming",
+  "partial-call",
+  "input-available",
+  "call"
+]);
+function memoryRelPath(path) {
+  const m = path.match(/(?:^|\/)memory\/(.+)$/);
+  if (m) return m[1];
+  return path.split("/").pop() || path;
+}
+function parseContent(content) {
+  const fm = content.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (!fm) return { type: null, body: content };
+  const typeLine = fm[1].match(/^type:\s*["']?([^"'\n]+)["']?\s*$/m);
+  return { type: typeLine ? typeLine[1].trim() : null, body: content.slice(fm[0].length) };
+}
+function getWrite(input) {
+  if (!input || typeof input !== "object") return null;
+  const o = input;
+  const path = o.path ?? o.filePath ?? o.file;
+  if (typeof path !== "string" || typeof o.content !== "string") return null;
+  return { path, content: o.content };
+}
+function isMemoryWrite(input) {
+  const w = getWrite(input);
+  return !!w && /(?:^|\/)memory\//.test(w.path);
+}
+function MemoryWriteToolItem({ state, input }) {
+  const [open, setOpen] = useState(false);
+  const write = getWrite(input);
+  const isRunning = RUNNING_STATES.has(state);
+  const isError = state === "output-error" || state === "error";
+  const rel = write ? memoryRelPath(write.path) : "";
+  const { type, body } = write ? parseContent(write.content) : { type: null, body: "" };
+  const hasBody = !isRunning && !isError && body.trim().length > 0;
+  const verb = isError ? "Memory save failed" : isRunning ? "Saving to memory" : "Saved to memory";
+  return /* @__PURE__ */ jsx("div", { className: "relative z-10 py-0.5", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => hasBody && setOpen((v) => !v),
+      "aria-expanded": hasBody ? open : void 0,
+      className: cn(
+        "flex w-full min-w-0 items-center gap-2 text-left text-sm",
+        hasBody ? "text-muted-foreground transition-colors hover:text-foreground" : "cursor-default text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-7 w-4 shrink-0 items-center justify-center rounded-full bg-surface-chat", children: /* @__PURE__ */ jsx(ProcessorIcon, { className: "size-4 opacity-90" }) }),
+        isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", className: "min-w-0 flex-1 truncate text-sm", children: [verb, rel].filter(Boolean).join(" ") || "Saving to memory\u2026" }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 truncate", children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-sm", children: verb }),
+          rel && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: rel })
+        ] })
+      ]
+    }
+  ) });
+}
+var RUNNING_STATES2 = /* @__PURE__ */ new Set([
+  "input-streaming",
+  "partial-call",
+  "input-available",
+  "call"
+]);
+var TOOL_DETAIL_DISPLAY_LIMIT = 2e4;
+function capToolDetailText(text) {
+  return text.length > TOOL_DETAIL_DISPLAY_LIMIT ? `${text.slice(0, TOOL_DETAIL_DISPLAY_LIMIT)}
+\u2026 (truncated)` : text;
+}
+function formatToolInput(input) {
+  if (input == null) return "";
+  if (typeof input === "string") return capToolDetailText(input);
+  if (typeof input !== "object") return String(input);
+  const o = input;
+  const keys = Object.keys(o);
+  if (keys.length === 1 && typeof o[keys[0]] === "string") {
+    return capToolDetailText(o[keys[0]]);
+  }
+  for (const k of ["code", "command", "cmd", "script", "query", "sql"]) {
+    if (typeof o[k] === "string") return capToolDetailText(o[k]);
+  }
+  return formatToolOutput(o);
+}
+function hasToolDetail(value) {
+  return value != null && (typeof value !== "string" || value.length > 0);
+}
+function formatToolOutput(output) {
+  if (output == null) return "";
+  if (typeof output === "string") {
+    return capToolDetailText(output);
+  }
+  let budget = TOOL_DETAIL_DISPLAY_LIMIT * 2;
+  let elided = false;
+  try {
+    const s = JSON.stringify(
+      output,
+      (_key, value) => {
+        if (budget <= 0) {
+          elided = true;
+          return void 0;
+        }
+        if (typeof value === "string") {
+          budget -= value.length;
+          return value.length > 2e3 ? `${value.slice(0, 2e3)}\u2026` : value;
+        }
+        budget -= 8;
+        return value;
+      },
+      2
+    );
+    if (s === void 0) return "\u2026 (output too large to display)";
+    const capped = s.length > TOOL_DETAIL_DISPLAY_LIMIT ? `${s.slice(0, TOOL_DETAIL_DISPLAY_LIMIT)}
+\u2026 (truncated)` : s;
+    return elided && !capped.endsWith("(truncated)") ? `${capped}
+\u2026 (truncated)` : capped;
+  } catch {
+    return capToolDetailText(String(output));
+  }
+}
+var ToolCallItem = memo(function ToolCallItem2({
+  toolName,
+  state,
+  input,
+  output,
+  errorText,
+  isMcp = false,
+  className,
+  preview
+}) {
+  const [open, setOpen] = useState(false);
+  const cmd = useMemo(() => open ? formatToolInput(input) : "", [input, open]);
+  const out = useMemo(() => open ? formatToolOutput(output) : "", [open, output]);
+  if (isMemoryWrite(input)) {
+    return /* @__PURE__ */ jsx(MemoryWriteToolItem, { state, input });
+  }
+  const { verb, target, targetMono, hint, hintTone } = describeToolRow(
+    toolName,
+    state,
+    input,
+    output,
+    errorText
+  );
+  const isRunning = RUNNING_STATES2.has(state);
+  const hasPreview = !isRunning && !!preview;
+  const hasBody = !hasPreview && (hasToolDetail(input) || hasToolDetail(output) || !!errorText);
+  const plainLine = [verb, target].filter(Boolean).join(" ");
+  const icon = isMcp ? /* @__PURE__ */ jsx(Code2Icon, { className: "size-3.5 shrink-0" }) : getToolMeta(toolName).icon;
+  const hintToneClass = hintTone === "danger" ? "text-destructive" : hintTone === "success" ? "text-success" : "text-muted-foreground/70";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative z-10", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => hasBody && setOpen((v) => !v),
+        "aria-expanded": hasBody ? open : void 0,
+        className: cn(
+          "group/row flex w-full min-w-0 items-center gap-2 py-0.5 text-left text-sm",
+          hasBody ? "text-muted-foreground transition-colors hover:text-foreground" : "cursor-default text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-7 w-4 shrink-0 items-center justify-center rounded-full bg-surface-chat [&_svg]:size-3.5 [&_svg]:opacity-90", children: icon }),
+          isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", className: "!inline-flex min-w-0 truncate text-sm", children: plainLine || "Working\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: verb }),
+            target && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "min-w-0 truncate",
+                  targetMono && "font-mono text-[0.8125rem]"
+                ),
+                children: target
+              }
+            )
+          ] }),
+          hasBody && /* @__PURE__ */ jsx(
+            ChevronDownMediumIcon,
+            {
+              className: cn(
+                "size-3.5 shrink-0 text-muted-foreground/60 transition-transform",
+                !open && "-rotate-90"
+              )
+            }
+          ),
+          !isRunning && hint && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "ml-auto shrink-0 pl-2 text-xs tabular-nums",
+                hintToneClass
+              ),
+              children: hint
+            }
+          )
+        ]
+      }
+    ),
+    hasPreview && /* @__PURE__ */ jsx("div", { className: "mt-1.5 ml-6", children: preview }),
+    hasBody && open && /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsx("div", { className: "mt-1.5 ml-6 rounded-lg border border-muted-foreground/10 bg-surface-raised shadow-xs", children: /* @__PURE__ */ jsxs("div", { className: "scrollbar max-h-36 space-y-2 overflow-auto p-3", children: [
+      cmd && /* @__PURE__ */ jsxs("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground/80", children: [
+        /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: "> " }),
+        cmd
+      ] }),
+      errorText && /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground", children: errorText }),
+      out && /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground", children: out })
+    ] }) }) })
+  ] });
+});
+
+export { ToolCallItem };