@athenaintel/react 0.22.4 → 0.23.1

package/dist/tools/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","sources":["../../src/tools/primitives.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The shared building blocks every SDK tool card is made of — the card shell\n * (`ToolCard`), the collapsible details section, and the result/text helpers.\n * Kept apart from the tool UI registry so a tool UI module can use them\n * without importing the registry that imports it back.\n */\nimport { useCallback, useState, type ElementType, type ReactNode } from \"react\";\nimport { formatToolName } from \"@athenaintel/agent-runtime\";\nimport {\n  AlertCircleIcon,\n  CheckCircle2Icon,\n  ChevronDownIcon,\n  ClipboardCopyIcon,\n  LoaderIcon,\n} from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\n\nexport { formatToolName };\n\n/** Parse JSON text into a record, or `null` when it is not one. */\nexport function tryParseJson(text: string): Record<string, unknown> | null {\n  try {\n    const parsed: unknown = JSON.parse(text);\n    return typeof parsed === \"object\" && parsed !== null\n      ? (parsed as Record<string, unknown>)\n      : null;\n  } catch {\n    return null;\n  }\n}\n\n/** Parse a tool result (handles nested `.result`, string-encoded JSON) into a record. */\nexport function normalizeResult(result: unknown): Record<string, unknown> | null {\n  if (!result) return null;\n  if (typeof result === \"string\") return tryParseJson(result);\n  if (typeof result === \"object\") {\n    const obj = result as Record<string, unknown>;\n    if (typeof obj.result === \"string\") return tryParseJson(obj.result) ?? obj;\n    return obj;\n  }\n  return null;\n}\n\n/** Truncate a string with an ellipsis. */\nexport function truncate(text: string, max: number): string {\n  return text.length > max ? `${text.slice(0, max)}...` : text;\n}\n\nexport type ToolStatus = \"running\" | \"complete\" | \"incomplete\" | \"requires-action\";\n\nexport function ToolCard({\n  icon: Icon,\n  status,\n  title,\n  subtitle,\n  toolName,\n  badge,\n  error,\n  children,\n  args,\n  result,\n}: {\n  icon: ElementType;\n  status: ToolStatus;\n  title: string;\n  subtitle?: string;\n  toolName?: string;\n  badge?: string;\n  error?: string | null;\n  children?: ReactNode;\n  args?: Record<string, unknown>;\n  result?: unknown;\n}) {\n  const isRunning = status === \"running\";\n  const isComplete = status === \"complete\";\n  const isError = status === \"incomplete\";\n\n  return (\n    <div className=\"my-3 w-full overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm\">\n      <div className=\"flex items-center gap-3 px-4 py-3\">\n        <div\n          className={cn(\n            \"flex size-8 shrink-0 items-center justify-center rounded-lg\",\n            isRunning && \"bg-blue-50 text-blue-600\",\n            isComplete && \"bg-emerald-50 text-emerald-600\",\n            isError && \"bg-destructive/10 text-destructive\",\n          )}\n        >\n          {isRunning ? (\n            <LoaderIcon className=\"size-4 animate-spin\" />\n          ) : isError ? (\n            <AlertCircleIcon className=\"size-4\" />\n          ) : (\n            <Icon className=\"size-4\" />\n          )}\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-[13px] font-medium text-foreground\">\n              {title}\n            </span>\n            {isComplete && !error && (\n              <CheckCircle2Icon className=\"size-3.5 text-emerald-500\" />\n            )}\n          </div>\n          {subtitle && (\n            <p className=\"truncate text-[12px] text-muted-foreground\">\n              {subtitle}\n            </p>\n          )}\n        </div>\n        {toolName && (\n          <span className=\"shrink-0 rounded-md bg-muted/60 px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground\">\n            {formatToolName(toolName)}\n          </span>\n        )}\n        {badge && (\n          <span className=\"shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n            {badge}\n          </span>\n        )}\n        {isRunning && (\n          <div className=\"flex items-center gap-1.5\">\n            <div className=\"h-1.5 w-10 animate-pulse rounded-full bg-blue-100\" />\n            <div className=\"h-1.5 w-6 animate-pulse rounded-full bg-blue-100\" />\n          </div>\n        )}\n      </div>\n\n      {error && (\n        <div className=\"border-t border-border/40 bg-destructive/10 px-4 py-2.5\">\n          <p className=\"text-[12px] leading-relaxed text-destructive\">\n            {error}\n          </p>\n        </div>\n      )}\n\n      {children}\n\n      {/* Copy tool spec — subtle button at the bottom of every tool card */}\n      {toolName && isComplete && (\n        <CopyToolSpecButton toolName={toolName} args={args} result={result} />\n      )}\n    </div>\n  );\n}\n\n/** Copies `{ tool_name, arguments, result }` as JSON — the tool spec a support ticket needs. */\nexport function CopyToolSpecButton({\n  toolName,\n  args,\n  argsText,\n  result,\n  className,\n}: {\n  toolName: string;\n  args?: Record<string, unknown>;\n  argsText?: string;\n  result?: unknown;\n  className?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const spec: Record<string, unknown> = { tool_name: toolName };\n    if (args) spec.arguments = args;\n    else if (argsText) spec.arguments = tryParseJson(argsText) ?? argsText;\n    if (result !== undefined) {\n      if (typeof result === \"string\") {\n        const parsed = tryParseJson(result);\n        spec.result = parsed ?? result;\n      } else {\n        spec.result = result;\n      }\n    }\n    navigator.clipboard.writeText(JSON.stringify(spec, null, 2)).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    });\n  }, [toolName, args, argsText, result]);\n\n  return (\n    <div className={cn(\"flex justify-end px-3 pb-1.5\", className)}>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-muted-foreground/40 transition-colors hover:bg-muted/50 hover:text-muted-foreground\"\n        title=\"Copy tool name, arguments, and result as JSON\"\n      >\n        <ClipboardCopyIcon className=\"size-2.5\" />\n        {copied ? \"Copied!\" : toolName}\n      </button>\n    </div>\n  );\n}\n\nexport function ExpandableSection({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label?: string;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  const [expanded, setExpanded] = useState(defaultOpen);\n\n  return (\n    <div className=\"border-t border-border/40\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/30\"\n      >\n        <ChevronDownIcon\n          className={cn(\n            \"size-3.5 shrink-0 transition-transform duration-200\",\n            !expanded && \"-rotate-90\",\n          )}\n        />\n        <span>{expanded ? \"Hide details\" : (label ?? \"Show details\")}</span>\n      </button>\n      {expanded && (\n        <div className=\"max-h-72 overflow-y-auto border-t border-border/40 bg-muted/10 px-4 py-3\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitives.js","sources":["../../src/tools/primitives.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The shared building blocks every SDK tool card is made of — the card shell\n * (`ToolCard`), the collapsible details section, and the result/text helpers.\n * Kept apart from the tool UI registry so a tool UI module can use them\n * without importing the registry that imports it back.\n */\nimport {\n  useCallback,\n  useContext,\n  useState,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { formatToolName } from \"@athenaintel/agent-runtime\";\nimport {\n  AlertCircleIcon,\n  CheckCircle2Icon,\n  ChevronDownIcon,\n  ClipboardCopyIcon,\n  LoaderIcon,\n} from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { ToolAppearanceContext } from \"./tool-appearance\";\n\nexport { formatToolName };\n\n/** Parse JSON text into a record, or `null` when it is not one. */\nexport function tryParseJson(text: string): Record<string, unknown> | null {\n  try {\n    const parsed: unknown = JSON.parse(text);\n    return typeof parsed === \"object\" && parsed !== null\n      ? (parsed as Record<string, unknown>)\n      : null;\n  } catch {\n    return null;\n  }\n}\n\n/** Parse a tool result (handles nested `.result`, string-encoded JSON) into a record. */\nexport function normalizeResult(result: unknown): Record<string, unknown> | null {\n  if (!result) return null;\n  if (typeof result === \"string\") return tryParseJson(result);\n  if (typeof result === \"object\") {\n    const obj = result as Record<string, unknown>;\n    if (typeof obj.result === \"string\") return tryParseJson(obj.result) ?? obj;\n    return obj;\n  }\n  return null;\n}\n\n/** Truncate a string with an ellipsis. */\nexport function truncate(text: string, max: number): string {\n  return text.length > max ? `${text.slice(0, max)}...` : text;\n}\n\nexport type ToolStatus = \"running\" | \"complete\" | \"incomplete\" | \"requires-action\";\n\nexport interface ToolCardProps {\n  icon: ElementType;\n  status: ToolStatus;\n  title: string;\n  subtitle?: string;\n  toolName?: string;\n  badge?: string;\n  error?: string | null;\n  children?: ReactNode;\n  args?: Record<string, unknown>;\n  result?: unknown;\n}\n\n/**\n * The card shell every dedicated tool UI is built on. Under a thread\n * appearance provider it renders through the provider's row renderer (the\n * `ToolFallback` shell), so a dedicated UI and a generic fallback share one\n * anatomy there; with no provider it is the boxed card below, unchanged.\n */\nexport function ToolCard(props: ToolCardProps) {\n  const ThreadToolCard = useContext(ToolAppearanceContext)?.ToolCard;\n  if (ThreadToolCard) return <ThreadToolCard {...props} />;\n  return <ToolCardBox {...props} />;\n}\n\nfunction ToolCardBox({\n  icon: Icon,\n  status,\n  title,\n  subtitle,\n  toolName,\n  badge,\n  error,\n  children,\n  args,\n  result,\n}: ToolCardProps) {\n  const isRunning = status === \"running\";\n  const isComplete = status === \"complete\";\n  const isError = status === \"incomplete\";\n\n  return (\n    <div className=\"my-3 w-full overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm\">\n      <div className=\"flex items-center gap-3 px-4 py-3\">\n        <div\n          className={cn(\n            \"flex size-8 shrink-0 items-center justify-center rounded-lg\",\n            isRunning && \"bg-blue-50 text-blue-600\",\n            isComplete && \"bg-emerald-50 text-emerald-600\",\n            isError && \"bg-destructive/10 text-destructive\",\n          )}\n        >\n          {isRunning ? (\n            <LoaderIcon className=\"size-4 animate-spin\" />\n          ) : isError ? (\n            <AlertCircleIcon className=\"size-4\" />\n          ) : (\n            <Icon className=\"size-4\" />\n          )}\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-[13px] font-medium text-foreground\">\n              {title}\n            </span>\n            {isComplete && !error && (\n              <CheckCircle2Icon className=\"size-3.5 text-emerald-500\" />\n            )}\n          </div>\n          {subtitle && (\n            <p className=\"truncate text-[12px] text-muted-foreground\">\n              {subtitle}\n            </p>\n          )}\n        </div>\n        {toolName && (\n          <span className=\"shrink-0 rounded-md bg-muted/60 px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground\">\n            {formatToolName(toolName)}\n          </span>\n        )}\n        {badge && (\n          <span className=\"shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n            {badge}\n          </span>\n        )}\n        {isRunning && (\n          <div className=\"flex items-center gap-1.5\">\n            <div className=\"h-1.5 w-10 animate-pulse rounded-full bg-blue-100\" />\n            <div className=\"h-1.5 w-6 animate-pulse rounded-full bg-blue-100\" />\n          </div>\n        )}\n      </div>\n\n      {error && (\n        <div className=\"border-t border-border/40 bg-destructive/10 px-4 py-2.5\">\n          <p className=\"text-[12px] leading-relaxed text-destructive\">\n            {error}\n          </p>\n        </div>\n      )}\n\n      {children}\n\n      {/* Copy tool spec — subtle button at the bottom of every tool card */}\n      {toolName && isComplete && (\n        <CopyToolSpecButton toolName={toolName} args={args} result={result} />\n      )}\n    </div>\n  );\n}\n\n/** Copies `{ tool_name, arguments, result }` as JSON — the tool spec a support ticket needs. */\nexport function CopyToolSpecButton({\n  toolName,\n  args,\n  argsText,\n  result,\n  className,\n}: {\n  toolName: string;\n  args?: Record<string, unknown>;\n  argsText?: string;\n  result?: unknown;\n  className?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const spec: Record<string, unknown> = { tool_name: toolName };\n    if (args) spec.arguments = args;\n    else if (argsText) spec.arguments = tryParseJson(argsText) ?? argsText;\n    if (result !== undefined) {\n      if (typeof result === \"string\") {\n        const parsed = tryParseJson(result);\n        spec.result = parsed ?? result;\n      } else {\n        spec.result = result;\n      }\n    }\n    navigator.clipboard.writeText(JSON.stringify(spec, null, 2)).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    });\n  }, [toolName, args, argsText, result]);\n\n  return (\n    <div className={cn(\"flex justify-end px-3 pb-1.5\", className)}>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-muted-foreground/40 transition-colors hover:bg-muted/50 hover:text-muted-foreground\"\n        title=\"Copy tool name, arguments, and result as JSON\"\n      >\n        <ClipboardCopyIcon className=\"size-2.5\" />\n        {copied ? \"Copied!\" : toolName}\n      </button>\n    </div>\n  );\n}\n\n/** \"Show search results\" → \"Search results\": the static heading a section gets once the row's disclosure is the only toggle. */\nfunction sectionHeading(label: string | undefined): string | null {\n  if (!label) return null;\n  const heading = label.replace(/^show\\s+/i, \"\").trim();\n  if (!heading) return null;\n  return heading.charAt(0).toUpperCase() + heading.slice(1);\n}\n\nexport function ExpandableSection({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label?: string;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  const [expanded, setExpanded] = useState(defaultOpen);\n  const appearance = useContext(ToolAppearanceContext)?.appearance ?? \"card\";\n\n  // Inside the thread row the card's own disclosure is the one toggle; a\n  // second nested \"Show details\" would make a reader click twice.\n  if (appearance === \"thread\") {\n    const heading = sectionHeading(label);\n    return (\n      <div data-slot=\"tool-section\" className=\"flex flex-col gap-1.5 px-3\">\n        {heading ? (\n          <p className=\"text-xs font-medium text-muted-foreground\">{heading}</p>\n        ) : null}\n        <div className=\"max-h-72 overflow-y-auto\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"border-t border-border/40\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/30\"\n      >\n        <ChevronDownIcon\n          className={cn(\n            \"size-3.5 shrink-0 transition-transform duration-200\",\n            !expanded && \"-rotate-90\",\n          )}\n        />\n        <span>{expanded ? \"Hide details\" : (label ?? \"Show details\")}</span>\n      </button>\n      {expanded && (\n        <div className=\"max-h-72 overflow-y-auto border-t border-border/40 bg-muted/10 px-4 py-3\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/tools/tool-appearance.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const ToolAppearanceContext = react.createContext(null);
+function useToolAppearance(explicit) {
+  const fromContext = react.useContext(ToolAppearanceContext);
+  return explicit ?? (fromContext == null ? void 0 : fromContext.appearance) ?? "card";
+}
+exports.ToolAppearanceContext = ToolAppearanceContext;
+exports.useToolAppearance = useToolAppearance;
+//# sourceMappingURL=tool-appearance.cjs.map

package/dist/tools/tool-appearance.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-appearance.cjs","sources":["../../src/tools/tool-appearance.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Which anatomy a tool call renders with.\n *\n * - `card` — the boxed host card Olympus, the Chrome side panel and the Office\n *   task pane render today (the default; its markup is snapshot-pinned).\n * - `thread` — the SDK thread's one-line row: status glyph, verb + target on\n *   one line, a disclosure for arguments and result. Every tool call in the\n *   thread uses it, dedicated tool UIs included, so a transcript reads as one\n *   anatomy.\n *\n * The appearance is read from the nearest provider when a card is not given\n * one explicitly; with no provider the default stays `card`, so a host that\n * never mounts the provider renders exactly what it rendered before.\n */\nimport { createContext, useContext, type ComponentType } from \"react\";\nimport type { ToolCardProps } from \"./primitives\";\n\nexport type ToolAppearance = \"card\" | \"thread\";\n\nexport interface ToolAppearanceContextValue {\n  appearance: ToolAppearance;\n  /**\n   * Renders a dedicated tool UI's `ToolCard` in this appearance. Set by the\n   * thread provider (the renderer lives with `ToolFallback`, which this module\n   * cannot import without a cycle); `undefined` keeps `ToolCard`'s own markup.\n   */\n  ToolCard?: ComponentType<ToolCardProps>;\n}\n\nexport const ToolAppearanceContext =\n  createContext<ToolAppearanceContextValue | null>(null);\n\n/** The appearance in force: the explicit prop, else the provider's, else `card`. */\nexport function useToolAppearance(explicit?: ToolAppearance): ToolAppearance {\n  const fromContext = useContext(ToolAppearanceContext);\n  return explicit ?? fromContext?.appearance ?? \"card\";\n}\n"],"names":["createContext","useContext"],"mappings":";;;AA+BO,MAAM,wBACXA,MAAAA,cAAiD,IAAI;AAGhD,SAAS,kBAAkB,UAA2C;AAC3E,QAAM,cAAcC,MAAAA,WAAW,qBAAqB;AACpD,SAAO,aAAY,2CAAa,eAAc;AAChD;;;"}

package/dist/tools/tool-appearance.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Which anatomy a tool call renders with.
+ *
+ * - `card` — the boxed host card Olympus, the Chrome side panel and the Office
+ *   task pane render today (the default; its markup is snapshot-pinned).
+ * - `thread` — the SDK thread's one-line row: status glyph, verb + target on
+ *   one line, a disclosure for arguments and result. Every tool call in the
+ *   thread uses it, dedicated tool UIs included, so a transcript reads as one
+ *   anatomy.
+ *
+ * The appearance is read from the nearest provider when a card is not given
+ * one explicitly; with no provider the default stays `card`, so a host that
+ * never mounts the provider renders exactly what it rendered before.
+ */
+import { type ComponentType } from "react";
+import type { ToolCardProps } from "./primitives";
+export type ToolAppearance = "card" | "thread";
+export interface ToolAppearanceContextValue {
+    appearance: ToolAppearance;
+    /**
+     * Renders a dedicated tool UI's `ToolCard` in this appearance. Set by the
+     * thread provider (the renderer lives with `ToolFallback`, which this module
+     * cannot import without a cycle); `undefined` keeps `ToolCard`'s own markup.
+     */
+    ToolCard?: ComponentType<ToolCardProps>;
+}
+export declare const ToolAppearanceContext: import("react").Context<ToolAppearanceContextValue | null>;
+/** The appearance in force: the explicit prop, else the provider's, else `card`. */
+export declare function useToolAppearance(explicit?: ToolAppearance): ToolAppearance;

package/dist/tools/tool-appearance.js

@@ -0,0 +1,11 @@
+import { useContext, createContext } from "react";
+const ToolAppearanceContext = createContext(null);
+function useToolAppearance(explicit) {
+  const fromContext = useContext(ToolAppearanceContext);
+  return explicit ?? (fromContext == null ? void 0 : fromContext.appearance) ?? "card";
+}
+export {
+  ToolAppearanceContext,
+  useToolAppearance
+};
+//# sourceMappingURL=tool-appearance.js.map

package/dist/tools/tool-appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-appearance.js","sources":["../../src/tools/tool-appearance.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Which anatomy a tool call renders with.\n *\n * - `card` — the boxed host card Olympus, the Chrome side panel and the Office\n *   task pane render today (the default; its markup is snapshot-pinned).\n * - `thread` — the SDK thread's one-line row: status glyph, verb + target on\n *   one line, a disclosure for arguments and result. Every tool call in the\n *   thread uses it, dedicated tool UIs included, so a transcript reads as one\n *   anatomy.\n *\n * The appearance is read from the nearest provider when a card is not given\n * one explicitly; with no provider the default stays `card`, so a host that\n * never mounts the provider renders exactly what it rendered before.\n */\nimport { createContext, useContext, type ComponentType } from \"react\";\nimport type { ToolCardProps } from \"./primitives\";\n\nexport type ToolAppearance = \"card\" | \"thread\";\n\nexport interface ToolAppearanceContextValue {\n  appearance: ToolAppearance;\n  /**\n   * Renders a dedicated tool UI's `ToolCard` in this appearance. Set by the\n   * thread provider (the renderer lives with `ToolFallback`, which this module\n   * cannot import without a cycle); `undefined` keeps `ToolCard`'s own markup.\n   */\n  ToolCard?: ComponentType<ToolCardProps>;\n}\n\nexport const ToolAppearanceContext =\n  createContext<ToolAppearanceContextValue | null>(null);\n\n/** The appearance in force: the explicit prop, else the provider's, else `card`. */\nexport function useToolAppearance(explicit?: ToolAppearance): ToolAppearance {\n  const fromContext = useContext(ToolAppearanceContext);\n  return explicit ?? fromContext?.appearance ?? \"card\";\n}\n"],"names":[],"mappings":";AA+BO,MAAM,wBACX,cAAiD,IAAI;AAGhD,SAAS,kBAAkB,UAA2C;AAC3E,QAAM,cAAc,WAAW,qBAAqB;AACpD,SAAO,aAAY,2CAAa,eAAc;AAChD;"}

package/dist/tools/tool-fallback.cjs

@@ -8,25 +8,46 @@ require("../packages/agent-runtime/src/generated/runconfig-contract.cjs");
 require("@assistant-ui/tap");
 require("statewire");
 require("../packages/agent-runtime/src/statewire-suspended.cjs");
+require("../packages/agent-runtime/src/conversation-list.cjs");
 const toolMetadata = require("../packages/agent-runtime/src/tool-metadata.cjs");
 const toolResult = require("../packages/agent-runtime/src/tool-result.cjs");
 require("@tanstack/react-query");
 require("../packages/agent-runtime/src/statewire-state.cjs");
 require("../packages/agent-runtime/src/messages.cjs");
-require("@assistant-ui/react-statewire");
 require("@assistant-ui/store");
 require("../packages/agent-runtime/src/quota-safe-local-storage-session.cjs");
 require("../packages/agent-runtime/src/statewire-attach-observer.cjs");
 require("../packages/agent-runtime/src/thread-status.cjs");
+require("@assistant-ui/react-statewire");
 require("@assistant-ui/core");
 require("../packages/agent-runtime/src/thread-handoff.cjs");
 const collapsible = require("../ui/collapsible.cjs");
 const assetPanelStore = require("../assets/asset-panel-store.cjs");
 const NestedPtcMessages = require("./NestedPtcMessages.cjs");
 const primitives = require("./primitives.cjs");
+const toolAppearance = require("./tool-appearance.cjs");
 const toolIcons = require("./tool-icons.cjs");
+const useElapsedSeconds = require("./use-elapsed-seconds.cjs");
 const cnfast = require("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__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-3.5 animate-spin text-muted-foreground motion-reduce:animate-none" }) : state === "rejected" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "size-3.5 text-amber-600" }) : state === "error" ? isCancelled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "size-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "size-3.5 text-destructive" }) : state === "paused" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "size-3.5 text-amber-600" }) : state === "requires-action" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldAlertIcon, { className: "size-3.5 text-amber-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5 text-emerald-600" });
+  return /* @__PURE__ */ jsxRuntime.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;
 }
@@ -109,9 +130,11 @@ function ToolFallbackRoot({
   open: controlledOpen,
   onOpenChange: controlledOnOpenChange,
   defaultOpen = false,
+  appearance: appearanceProp,
   children,
   ...props
 }) {
+  const appearance = toolAppearance.useToolAppearance(appearanceProp);
   const collapsibleRef = react.useRef(null);
   const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
   const lockScroll = react$1.useScrollLock(collapsibleRef, ANIMATION_DURATION);
@@ -134,10 +157,11 @@ function ToolFallbackRoot({
     {
       ref: collapsibleRef,
       "data-slot": "tool-fallback-root",
+      ...appearance === "thread" ? { "data-appearance": "thread" } : {},
       open: isOpen,
       onOpenChange: handleOpenChange,
       className: cnfast.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: {
@@ -158,29 +182,101 @@ function ToolFallbackTrigger({
   displayName,
   activeLabel,
   icon,
+  appearance: appearanceProp,
+  secondary: secondaryProp,
+  badge,
   className,
   ...props
 }) {
+  const appearance = toolAppearance.useToolAppearance(appearanceProp);
+  const isThread = appearance === "thread";
   const classification = givenClassification ?? toolResult.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 = useElapsedSeconds.elapsedSuffix(useElapsedSeconds.useElapsedSeconds(isThread && isRunning));
   const meta = toolMetadata.getToolDisplayMeta(toolName);
   const ToolIcon = icon ?? toolIcons.toolIcon(meta.icon);
   const title = displayName ?? meta.displayName;
   const running = activeLabel ?? meta.activeLabel;
   const summary = react.useMemo(() => {
-    if (isRunning || !argsText) return null;
+    if (isRunning && !isThread || !argsText) return null;
     const parsed = primitives.tryParseJson(argsText);
     return parsed ? toolMetadata.describeToolArgs({ toolName, args: parsed }) ?? null : null;
-  }, [toolName, argsText, isRunning]);
+  }, [toolName, argsText, isRunning, isThread]);
   const message = react.useMemo(
     () => state === "complete" ? toolResult.resultMessage(result) : null,
     [result, state]
   );
   const rejection = rejectedOutcome(classification);
   const headline = rejection ? toolMetadata.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__ */ jsxRuntime.jsxs(
+      collapsible.CollapsibleTrigger,
+      {
+        "data-slot": "tool-fallback-trigger",
+        "data-tool-outcome": state,
+        "data-appearance": "thread",
+        className: cnfast.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__ */ jsxRuntime.jsx(ThreadStatusGlyph, { classification, isCancelled }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-slot": "tool-fallback-verb",
+                className: cnfast.cn(
+                  "shrink-0 font-medium",
+                  state === "error" && !isCancelled && "text-destructive",
+                  isCancelled && "text-muted-foreground line-through"
+                ),
+                children: isRunning ? running : headline
+              }
+            ),
+            isRunning && elapsed ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                "data-slot": "tool-fallback-elapsed",
+                className: "shrink-0 tabular-nums text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "· " }),
+                  elapsed
+                ]
+              }
+            ) : null,
+            secondary ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                "data-slot": "tool-fallback-target",
+                className: "min-w-0 truncate text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "· " }),
+                  secondary
+                ]
+              }
+            ) : null,
+            badge ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cnfast.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__ */ jsxRuntime.jsxs(
     collapsible.CollapsibleTrigger,
     {
@@ -250,8 +346,10 @@ function ToolFallbackTrigger({
 function ToolFallbackContent({
   className,
   children,
+  appearance: appearanceProp,
   ...props
 }) {
+  const appearance = toolAppearance.useToolAppearance(appearanceProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     collapsible.CollapsibleContent,
     {
@@ -268,7 +366,13 @@ function ToolFallbackContent({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2.5 flex flex-col gap-2 border-t border-border/50 pt-2", children })
+      children: /* @__PURE__ */ jsxRuntime.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
+        }
+      )
     }
   );
 }
@@ -359,9 +463,11 @@ function ToolFallbackError({
 }
 function ToolFallbackNotice({
   classification,
+  appearance: appearanceProp,
   className,
   ...props
 }) {
+  const isThread = toolAppearance.useToolAppearance(appearanceProp) === "thread";
   if (classification.state === "error") {
     const { failure } = classification;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -369,7 +475,7 @@ function ToolFallbackNotice({
       {
         "data-slot": "tool-fallback-notice",
         className: cnfast.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,
@@ -386,7 +492,7 @@ function ToolFallbackNotice({
       {
         "data-slot": "tool-fallback-notice",
         className: cnfast.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,
@@ -545,8 +651,11 @@ const ToolFallbackImpl = ({
   children,
   defaultOpen,
   className,
-  rootProps
+  rootProps,
+  appearance: appearanceProp
 }) => {
+  const appearance = toolAppearance.useToolAppearance(appearanceProp);
+  const isThread = appearance === "thread";
   const classification = toolResult.classifyToolResult({ status, result, isError });
   const isCancelled = (status == null ? void 0 : status.type) === "incomplete" && status.reason === "cancelled";
   const nestedComponents = NestedPtcMessages.useNestedPtcComponents(ToolFallback);
@@ -563,7 +672,7 @@ const ToolFallbackImpl = ({
     assetId
   };
   const action = typeof extraAction === "function" ? extraAction(context) : extraAction;
-  if (isAssetTool(toolName, result)) {
+  if (!isThread && isAssetTool(toolName, result)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         AssetToolCard,
@@ -592,17 +701,25 @@ const ToolFallbackImpl = ({
     ] });
   }
   const isComplete = classification.state === "complete";
+  const isFailure = classification.state === "error" && !isCancelled;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToolFallbackRoot,
     {
       ...rootProps,
+      ...isThread ? { "data-tool-outcome": classification.state } : {},
+      appearance,
       defaultOpen,
-      className: cnfast.cn(isCancelled && "border-muted-foreground/30 bg-muted/30", className),
+      className: cnfast.cn(
+        isThread && isFailure && "border-destructive/30 bg-destructive/5",
+        isCancelled && "border-muted-foreground/30 bg-muted/30",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
             ToolFallbackTrigger,
             {
+              appearance,
               toolName,
               argsText,
               result,
@@ -617,8 +734,8 @@ const ToolFallbackImpl = ({
           assetId && isComplete && !action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(AssetOpenLink, { assetId, toolName, onOpenAsset }) })
         ] }),
         notice,
-        /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackNotice, { classification }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ToolFallbackContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackNotice, { appearance, classification }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ToolFallbackContent, { appearance, children: [
           children,
           /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackError, { status }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -645,6 +762,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 = toolResult.classifyToolResult({ status: partStatus, result: void 0, isError });
+  const argsText = react.useMemo(() => args ? JSON.stringify(args) : void 0, [args]);
+  const name = toolName ?? title;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ToolFallbackRoot,
+    {
+      appearance: "thread",
+      "data-tool-outcome": classification.state,
+      className: cnfast.cn(isError && "border-destructive/30 bg-destructive/5"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolFallbackTrigger,
+          {
+            appearance: "thread",
+            toolName: name,
+            status: partStatus,
+            classification,
+            displayName: title,
+            activeLabel: isRunning ? stripTrailingEllipsis(title) : void 0,
+            secondary: subtitle,
+            badge
+          }
+        ),
+        error ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ToolFallbackContent, { appearance: "thread", children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackArgs, { argsText }),
+          children == null ? /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackResult, { result, classification }) : null,
+          toolName && !isRunning ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end px-3 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            primitives.CopyToolSpecButton,
+            {
+              toolName,
+              args,
+              result,
+              className: "px-0 pb-0"
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ToolFallbackAppearanceProvider({
+  appearance,
+  children
+}) {
+  const value = react.useMemo(
+    () => ({
+      appearance,
+      ToolCard: appearance === "thread" ? ThreadToolCard : void 0
+    }),
+    [appearance]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(toolAppearance.ToolAppearanceContext.Provider, { value, children });
+}
 const ToolFallback = react.memo(
   ToolFallbackImpl
 );
@@ -656,7 +852,9 @@ ToolFallback.Args = ToolFallbackArgs;
 ToolFallback.Result = ToolFallbackResult;
 ToolFallback.Error = ToolFallbackError;
 ToolFallback.Notice = ToolFallbackNotice;
+exports.useToolAppearance = toolAppearance.useToolAppearance;
 exports.ToolFallback = ToolFallback;
+exports.ToolFallbackAppearanceProvider = ToolFallbackAppearanceProvider;
 exports.ToolFallbackArgs = ToolFallbackArgs;
 exports.ToolFallbackContent = ToolFallbackContent;
 exports.ToolFallbackError = ToolFallbackError;