@athenaintel/react 0.22.4 → 0.23.1

package/dist/tools/tool-fallback.js

@@ -1,30 +1,51 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { memo, useMemo, useRef, useState, useCallback } from "react";
-import { LoaderIcon, XCircleIcon, AlertCircleIcon, PauseIcon, ShieldAlertIcon, CheckCircle2Icon, ChevronDownIcon, ExternalLinkIcon, LinkIcon } from "lucide-react";
+import { ChevronDownIcon, LoaderIcon, XCircleIcon, AlertCircleIcon, PauseIcon, ShieldAlertIcon, CheckCircle2Icon, ExternalLinkIcon, LinkIcon, CheckIcon } from "lucide-react";
 import { useScrollLock } from "@assistant-ui/react";
 import "../packages/agent-runtime/src/generated/runconfig-contract.js";
 import "@assistant-ui/tap";
 import "statewire";
 import "../packages/agent-runtime/src/statewire-suspended.js";
+import "../packages/agent-runtime/src/conversation-list.js";
 import { getToolDisplayMeta, describeToolArgs, toolStatusLabel } from "../packages/agent-runtime/src/tool-metadata.js";
 import { resultMessage, classifyToolResult } from "../packages/agent-runtime/src/tool-result.js";
 import "@tanstack/react-query";
 import "../packages/agent-runtime/src/statewire-state.js";
 import "../packages/agent-runtime/src/messages.js";
-import "@assistant-ui/react-statewire";
 import "@assistant-ui/store";
 import "../packages/agent-runtime/src/quota-safe-local-storage-session.js";
 import "../packages/agent-runtime/src/statewire-attach-observer.js";
 import "../packages/agent-runtime/src/thread-status.js";
+import "@assistant-ui/react-statewire";
 import "@assistant-ui/core";
 import "../packages/agent-runtime/src/thread-handoff.js";
 import { CollapsibleContent, Collapsible, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useAssetPanelStore } from "../assets/asset-panel-store.js";
 import { useNestedPtcComponents, NestedPtcMessages } from "./NestedPtcMessages.js";
 import { tryParseJson, CopyToolSpecButton } from "./primitives.js";
+import { ToolAppearanceContext, useToolAppearance } from "./tool-appearance.js";
 import { toolIcon } from "./tool-icons.js";
+import { elapsedSuffix, useElapsedSeconds } from "./use-elapsed-seconds.js";
 import { cn } from "cnfast";
 const ANIMATION_DURATION = 200;
+const THREAD_ROOT_CLASS = "aui-tool-fallback-root group/tool-fallback-root my-1.5 w-full rounded-lg border border-border/50 bg-background";
+function ThreadStatusGlyph({
+  classification,
+  isCancelled
+}) {
+  const state = classification.state;
+  const glyph = state === "running" ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-3.5 animate-spin text-muted-foreground motion-reduce:animate-none" }) : state === "rejected" ? /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3.5 text-amber-600" }) : state === "error" ? isCancelled ? /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-3.5 text-destructive" }) : state === "paused" ? /* @__PURE__ */ jsx(PauseIcon, { className: "size-3.5 text-amber-600" }) : state === "requires-action" ? /* @__PURE__ */ jsx(ShieldAlertIcon, { className: "size-3.5 text-amber-600" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-emerald-600" });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tool-fallback-status",
+      "data-tool-outcome": state,
+      "aria-hidden": "true",
+      className: "flex size-4 shrink-0 items-center justify-center",
+      children: glyph
+    }
+  );
+}
 function rejectedOutcome(classification) {
   return classification.state === "rejected" ? classification.rejection : null;
 }
@@ -107,9 +128,11 @@ function ToolFallbackRoot({
   open: controlledOpen,
   onOpenChange: controlledOnOpenChange,
   defaultOpen = false,
+  appearance: appearanceProp,
   children,
   ...props
 }) {
+  const appearance = useToolAppearance(appearanceProp);
   const collapsibleRef = useRef(null);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
@@ -132,10 +155,11 @@ function ToolFallbackRoot({
     {
       ref: collapsibleRef,
       "data-slot": "tool-fallback-root",
+      ...appearance === "thread" ? { "data-appearance": "thread" } : {},
       open: isOpen,
       onOpenChange: handleOpenChange,
       className: cn(
-        "aui-tool-fallback-root group/tool-fallback-root my-3 w-full rounded-xl border border-border/60 bg-background py-2.5 shadow-sm",
+        appearance === "thread" ? THREAD_ROOT_CLASS : "aui-tool-fallback-root group/tool-fallback-root my-3 w-full rounded-xl border border-border/60 bg-background py-2.5 shadow-sm",
         className
       ),
       style: {
@@ -156,29 +180,101 @@ function ToolFallbackTrigger({
   displayName,
   activeLabel,
   icon,
+  appearance: appearanceProp,
+  secondary: secondaryProp,
+  badge,
   className,
   ...props
 }) {
+  const appearance = useToolAppearance(appearanceProp);
+  const isThread = appearance === "thread";
   const classification = givenClassification ?? classifyToolResult({ status, result, isError });
   const state = classification.state;
   const isRunning = state === "running";
   const isCancelled = (status == null ? void 0 : status.type) === "incomplete" && status.reason === "cancelled";
+  const elapsed = elapsedSuffix(useElapsedSeconds(isThread && isRunning));
   const meta = getToolDisplayMeta(toolName);
   const ToolIcon = icon ?? toolIcon(meta.icon);
   const title = displayName ?? meta.displayName;
   const running = activeLabel ?? meta.activeLabel;
   const summary = useMemo(() => {
-    if (isRunning || !argsText) return null;
+    if (isRunning && !isThread || !argsText) return null;
     const parsed = tryParseJson(argsText);
     return parsed ? describeToolArgs({ toolName, args: parsed }) ?? null : null;
-  }, [toolName, argsText, isRunning]);
+  }, [toolName, argsText, isRunning, isThread]);
   const message = useMemo(
     () => state === "complete" ? resultMessage(result) : null,
     [result, state]
   );
   const rejection = rejectedOutcome(classification);
   const headline = rejection ? toolStatusLabel(toolName, "rejected", displayName) : state === "error" ? `Failed: ${title}` : state === "paused" ? `Paused: ${title}` : title;
-  const secondary = rejection ? rejection.reason : message || summary;
+  const secondary = secondaryProp ?? (rejection ? rejection.reason : message || summary);
+  if (isThread) {
+    return /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        "data-slot": "tool-fallback-trigger",
+        "data-tool-outcome": state,
+        "data-appearance": "thread",
+        className: cn(
+          "aui-tool-fallback-trigger group/trigger flex w-full min-w-0 items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-[13px] leading-snug transition-colors hover:bg-muted/40",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ThreadStatusGlyph, { classification, isCancelled }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "tool-fallback-verb",
+                className: cn(
+                  "shrink-0 font-medium",
+                  state === "error" && !isCancelled && "text-destructive",
+                  isCancelled && "text-muted-foreground line-through"
+                ),
+                children: isRunning ? running : headline
+              }
+            ),
+            isRunning && elapsed ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-slot": "tool-fallback-elapsed",
+                className: "shrink-0 tabular-nums text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "· " }),
+                  elapsed
+                ]
+              }
+            ) : null,
+            secondary ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-slot": "tool-fallback-target",
+                className: "min-w-0 truncate text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "· " }),
+                  secondary
+                ]
+              }
+            ) : null,
+            badge ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: badge }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-3.5 shrink-0 text-muted-foreground/60",
+                "transition-transform duration-(--animation-duration) ease-out",
+                "group-data-[state=closed]/trigger:-rotate-90",
+                "group-data-[state=open]/trigger:rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     CollapsibleTrigger,
     {
@@ -248,8 +344,10 @@ function ToolFallbackTrigger({
 function ToolFallbackContent({
   className,
   children,
+  appearance: appearanceProp,
   ...props
 }) {
+  const appearance = useToolAppearance(appearanceProp);
   return /* @__PURE__ */ jsx(
     CollapsibleContent,
     {
@@ -266,7 +364,13 @@ function ToolFallbackContent({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "mt-2.5 flex flex-col gap-2 border-t border-border/50 pt-2", children })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: appearance === "thread" ? "mt-1 flex flex-col gap-2 border-t border-border/40 pt-2 pb-1" : "mt-2.5 flex flex-col gap-2 border-t border-border/50 pt-2",
+          children
+        }
+      )
     }
   );
 }
@@ -357,9 +461,11 @@ function ToolFallbackError({
 }
 function ToolFallbackNotice({
   classification,
+  appearance: appearanceProp,
   className,
   ...props
 }) {
+  const isThread = useToolAppearance(appearanceProp) === "thread";
   if (classification.state === "error") {
     const { failure } = classification;
     return /* @__PURE__ */ jsxs(
@@ -367,7 +473,7 @@ function ToolFallbackNotice({
       {
         "data-slot": "tool-fallback-notice",
         className: cn(
-          "mt-2 border-t border-red-200/80 px-3 pt-1.5 text-[11px] text-red-700",
+          isThread ? "mt-1 border-t border-destructive/20 px-3 pt-1.5 pb-1 text-[11px] text-destructive" : "mt-2 border-t border-red-200/80 px-3 pt-1.5 text-[11px] text-red-700",
           className
         ),
         ...props,
@@ -384,7 +490,7 @@ function ToolFallbackNotice({
       {
         "data-slot": "tool-fallback-notice",
         className: cn(
-          "mt-2 border-t border-amber-200/80 px-3 pt-1.5 text-[11px] text-amber-800",
+          isThread ? "mt-1 border-t border-amber-200/80 px-3 pt-1.5 pb-1 text-[11px] text-amber-800" : "mt-2 border-t border-amber-200/80 px-3 pt-1.5 text-[11px] text-amber-800",
           className
         ),
         ...props,
@@ -543,8 +649,11 @@ const ToolFallbackImpl = ({
   children,
   defaultOpen,
   className,
-  rootProps
+  rootProps,
+  appearance: appearanceProp
 }) => {
+  const appearance = useToolAppearance(appearanceProp);
+  const isThread = appearance === "thread";
   const classification = classifyToolResult({ status, result, isError });
   const isCancelled = (status == null ? void 0 : status.type) === "incomplete" && status.reason === "cancelled";
   const nestedComponents = useNestedPtcComponents(ToolFallback);
@@ -561,7 +670,7 @@ const ToolFallbackImpl = ({
     assetId
   };
   const action = typeof extraAction === "function" ? extraAction(context) : extraAction;
-  if (isAssetTool(toolName, result)) {
+  if (!isThread && isAssetTool(toolName, result)) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         AssetToolCard,
@@ -590,17 +699,25 @@ const ToolFallbackImpl = ({
     ] });
   }
   const isComplete = classification.state === "complete";
+  const isFailure = classification.state === "error" && !isCancelled;
   return /* @__PURE__ */ jsxs(
     ToolFallbackRoot,
     {
       ...rootProps,
+      ...isThread ? { "data-tool-outcome": classification.state } : {},
+      appearance,
       defaultOpen,
-      className: cn(isCancelled && "border-muted-foreground/30 bg-muted/30", className),
+      className: cn(
+        isThread && isFailure && "border-destructive/30 bg-destructive/5",
+        isCancelled && "border-muted-foreground/30 bg-muted/30",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
             ToolFallbackTrigger,
             {
+              appearance,
               toolName,
               argsText,
               result,
@@ -615,8 +732,8 @@ const ToolFallbackImpl = ({
           assetId && isComplete && !action && /* @__PURE__ */ jsx("div", { className: "shrink-0 pr-2", children: /* @__PURE__ */ jsx(AssetOpenLink, { assetId, toolName, onOpenAsset }) })
         ] }),
         notice,
-        /* @__PURE__ */ jsx(ToolFallbackNotice, { classification }),
-        /* @__PURE__ */ jsxs(ToolFallbackContent, { children: [
+        /* @__PURE__ */ jsx(ToolFallbackNotice, { appearance, classification }),
+        /* @__PURE__ */ jsxs(ToolFallbackContent, { appearance, children: [
           children,
           /* @__PURE__ */ jsx(ToolFallbackError, { status }),
           /* @__PURE__ */ jsx(
@@ -643,6 +760,85 @@ const ToolFallbackImpl = ({
     }
   );
 };
+function stripTrailingEllipsis(title) {
+  return title.replace(/(\.{3}|…)\s*$/u, "");
+}
+function ThreadToolCard({
+  status,
+  title,
+  subtitle,
+  toolName,
+  badge,
+  error,
+  children,
+  args,
+  result
+}) {
+  const isRunning = status === "running";
+  const isError = status === "incomplete";
+  const partStatus = status === "running" ? { type: "running" } : status === "requires-action" ? { type: "requires-action", reason: "interrupt" } : status === "incomplete" ? { type: "incomplete", reason: "error", ...error ? { error } : {} } : { type: "complete" };
+  const classification = classifyToolResult({ status: partStatus, result: void 0, isError });
+  const argsText = useMemo(() => args ? JSON.stringify(args) : void 0, [args]);
+  const name = toolName ?? title;
+  return /* @__PURE__ */ jsxs(
+    ToolFallbackRoot,
+    {
+      appearance: "thread",
+      "data-tool-outcome": classification.state,
+      className: cn(isError && "border-destructive/30 bg-destructive/5"),
+      children: [
+        /* @__PURE__ */ jsx(
+          ToolFallbackTrigger,
+          {
+            appearance: "thread",
+            toolName: name,
+            status: partStatus,
+            classification,
+            displayName: title,
+            activeLabel: isRunning ? stripTrailingEllipsis(title) : void 0,
+            secondary: subtitle,
+            badge
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "tool-fallback-notice",
+            className: "mt-1 border-t border-destructive/20 px-3 pt-1.5 pb-1 text-[11px] text-destructive",
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(ToolFallbackContent, { appearance: "thread", children: [
+          children,
+          /* @__PURE__ */ jsx(ToolFallbackArgs, { argsText }),
+          children == null ? /* @__PURE__ */ jsx(ToolFallbackResult, { result, classification }) : null,
+          toolName && !isRunning ? /* @__PURE__ */ jsx("div", { className: "flex justify-end px-3 pt-1", children: /* @__PURE__ */ jsx(
+            CopyToolSpecButton,
+            {
+              toolName,
+              args,
+              result,
+              className: "px-0 pb-0"
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ToolFallbackAppearanceProvider({
+  appearance,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      appearance,
+      ToolCard: appearance === "thread" ? ThreadToolCard : void 0
+    }),
+    [appearance]
+  );
+  return /* @__PURE__ */ jsx(ToolAppearanceContext.Provider, { value, children });
+}
 const ToolFallback = memo(
   ToolFallbackImpl
 );
@@ -656,6 +852,7 @@ ToolFallback.Error = ToolFallbackError;
 ToolFallback.Notice = ToolFallbackNotice;
 export {
   ToolFallback,
+  ToolFallbackAppearanceProvider,
   ToolFallbackArgs,
   ToolFallbackContent,
   ToolFallbackError,
@@ -663,6 +860,7 @@ export {
   ToolFallbackResult,
   ToolFallbackRoot,
   ToolFallbackTrigger,
-  clearAutoOpenedAssets
+  clearAutoOpenedAssets,
+  useToolAppearance
 };
 //# sourceMappingURL=tool-fallback.js.map