@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-6MQIDUPA.js

@@ -0,0 +1,502 @@
+import {
+  CodeBlock,
+  CopyButton,
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-HRMUF35V.js";
+import {
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-QSQBDR3N.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/tool-previews/command-preview.tsx
+import { memo, useState } from "react";
+import {
+  Terminal,
+  ChevronDown,
+  ChevronRight,
+  Loader2
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function extractCommandOutput(output) {
+  if (!output) return { stdout: "", stderr: "", exitCode: 0 };
+  if (typeof output === "string") return { stdout: output, stderr: "", exitCode: 0 };
+  if (typeof output === "object" && output !== null) {
+    const obj = output;
+    return {
+      stdout: String(obj.stdout ?? obj.output ?? ""),
+      stderr: String(obj.stderr ?? ""),
+      exitCode: Number(obj.exitCode ?? obj.exit_code ?? obj.code ?? 0)
+    };
+  }
+  return { stdout: String(output), stderr: "", exitCode: 0 };
+}
+var CommandPreview = memo(({ part }) => {
+  const [expanded, setExpanded] = useState(true);
+  const input = part.state.input;
+  const command = typeof input?.command === "string" ? input.command : String(input ?? "");
+  const output = part.state.status === "completed" ? extractCommandOutput(part.state.output) : null;
+  const isError = output ? output.exitCode !== 0 : part.state.status === "error";
+  const errorText = part.state.error;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg overflow-hidden border border-neutral-200/50 dark:border-neutral-700/50", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded((e) => !e),
+        className: "w-full flex items-center gap-2 px-3 py-2 bg-neutral-100/80 dark:bg-neutral-800/80 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors text-left",
+        children: [
+          /* @__PURE__ */ jsx(Terminal, { className: "w-3.5 h-3.5 text-neutral-400 shrink-0" }),
+          /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-neutral-800 dark:text-neutral-200 truncate flex-1", children: command }),
+          output && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs font-mono px-1.5 py-0.5 rounded",
+                isError ? "bg-red-100/50 dark:bg-red-900/50 text-red-500 dark:text-red-400" : "bg-green-100/50 dark:bg-green-900/50 text-green-600 dark:text-green-400"
+              ),
+              children: output.exitCode
+            }
+          ),
+          expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "max-h-80 overflow-y-auto bg-neutral-50/60 dark:bg-neutral-900/60", children: [
+      output?.stdout && /* @__PURE__ */ jsx("pre", { className: "p-3 text-xs font-mono text-neutral-600 dark:text-neutral-300 whitespace-pre-wrap break-all", children: output.stdout }),
+      output?.stderr && /* @__PURE__ */ jsx("pre", { className: "p-3 text-xs font-mono text-red-500/80 dark:text-red-400/80 whitespace-pre-wrap break-all border-t border-neutral-200/30 dark:border-neutral-700/30", children: output.stderr }),
+      errorText && /* @__PURE__ */ jsx("pre", { className: "p-3 text-xs font-mono text-red-500 dark:text-red-400 whitespace-pre-wrap break-all", children: errorText }),
+      part.state.status === "running" && /* @__PURE__ */ jsxs("div", { className: "p-3 flex items-center gap-2 text-xs text-neutral-400 dark:text-neutral-500", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }),
+        "Running..."
+      ] })
+    ] })
+  ] });
+});
+CommandPreview.displayName = "CommandPreview";
+
+// src/tool-previews/write-file-preview.tsx
+import { memo as memo2 } from "react";
+import { FileEdit } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function extractWriteContent(input) {
+  if (!input || typeof input !== "object") return null;
+  const obj = input;
+  const path = String(obj.file_path ?? obj.path ?? obj.filePath ?? "unknown");
+  const content = String(obj.content ?? obj.contents ?? obj.data ?? "");
+  return { path, content };
+}
+function getLanguageFromPath(path) {
+  const ext = path.split(".").pop()?.toLowerCase();
+  const map = {
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    rs: "rust",
+    py: "python",
+    go: "go",
+    rb: "ruby",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    md: "markdown",
+    css: "css",
+    scss: "scss",
+    html: "html",
+    sh: "bash",
+    bash: "bash",
+    zsh: "bash",
+    sql: "sql",
+    sol: "solidity",
+    proto: "protobuf"
+  };
+  return ext ? map[ext] : void 0;
+}
+var WriteFilePreview = memo2(({ part }) => {
+  const write = extractWriteContent(part.state.input);
+  if (!write) return null;
+  const lineCount = write.content.split("\n").length;
+  const language = getLanguageFromPath(write.path);
+  return /* @__PURE__ */ jsxs2("div", { className: "rounded-lg overflow-hidden border border-neutral-200/50 dark:border-neutral-700/50", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 bg-neutral-100/80 dark:bg-neutral-800/80", children: [
+      /* @__PURE__ */ jsx2(FileEdit, { className: "w-3.5 h-3.5 text-neutral-400 shrink-0" }),
+      /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-neutral-600 dark:text-neutral-300 truncate flex-1", children: write.path }),
+      /* @__PURE__ */ jsxs2("span", { className: "text-xs text-neutral-400 dark:text-neutral-500", children: [
+        "+",
+        lineCount,
+        " line",
+        lineCount !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(CodeBlock, { code: write.content, language, className: "rounded-none", children: /* @__PURE__ */ jsx2(CopyButton, { text: write.content }) })
+  ] });
+});
+WriteFilePreview.displayName = "WriteFilePreview";
+
+// src/run/expanded-tool-detail.tsx
+import { memo as memo3 } from "react";
+import {
+  ArrowRight,
+  ArrowLeft,
+  AlertCircle,
+  Loader2 as Loader22
+} from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatOutput(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+var ExpandedToolDetail = memo3(({ part }) => {
+  const meta = getToolDisplayMetadata(part);
+  const { status, input, output, error } = part.state;
+  if (meta.displayVariant === "command") {
+    return /* @__PURE__ */ jsx3(CommandPreview, { part });
+  }
+  if (meta.displayVariant === "write-file") {
+    return /* @__PURE__ */ jsx3(WriteFilePreview, { part });
+  }
+  const inputStr = formatOutput(input);
+  const outputStr = formatOutput(output);
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    inputStr && /* @__PURE__ */ jsxs3("div", { className: "rounded-lg overflow-hidden border border-neutral-200/50 dark:border-neutral-700/50", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-neutral-100/80 dark:bg-neutral-800/80", children: [
+        /* @__PURE__ */ jsx3(ArrowRight, { className: "w-3 h-3 text-neutral-400" }),
+        /* @__PURE__ */ jsx3("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Input" })
+      ] }),
+      /* @__PURE__ */ jsx3(CodeBlock, { code: inputStr, language: "json", className: "rounded-none" })
+    ] }),
+    status === "completed" && outputStr && /* @__PURE__ */ jsxs3("div", { className: "rounded-lg overflow-hidden border border-neutral-200/50 dark:border-neutral-700/50", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-neutral-100/80 dark:bg-neutral-800/80", children: [
+        /* @__PURE__ */ jsx3(ArrowLeft, { className: "w-3 h-3 text-neutral-400" }),
+        /* @__PURE__ */ jsx3("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Output" })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        CodeBlock,
+        {
+          code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
+          language: "json",
+          className: "rounded-none"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs3("div", { className: "rounded-lg overflow-hidden border border-red-300/50 dark:border-red-900/50", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-red-100/30 dark:bg-red-900/30", children: [
+        /* @__PURE__ */ jsx3(AlertCircle, { className: "w-3 h-3 text-red-500 dark:text-red-400" }),
+        /* @__PURE__ */ jsx3("span", { className: "text-xs text-red-500 dark:text-red-400", children: "Error" })
+      ] }),
+      /* @__PURE__ */ jsx3("pre", { className: "p-3 text-xs font-mono text-red-600 dark:text-red-300 whitespace-pre-wrap break-all bg-neutral-50/60 dark:bg-neutral-900/60", children: error })
+    ] }),
+    (status === "pending" || status === "running") && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-2 text-xs text-neutral-400 dark:text-neutral-500", children: [
+      /* @__PURE__ */ jsx3(Loader22, { className: "w-3 h-3 animate-spin" }),
+      "Running..."
+    ] })
+  ] });
+});
+ExpandedToolDetail.displayName = "ExpandedToolDetail";
+
+// src/run/run-item-primitives.tsx
+import { useEffect, useState as useState2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function LiveDuration({ startTime }) {
+  const [elapsed, setElapsed] = useState2(Date.now() - startTime);
+  useEffect(() => {
+    const id = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(id);
+  }, [startTime]);
+  return /* @__PURE__ */ jsx4("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
+}
+
+// src/run/inline-tool-item.tsx
+import { memo as memo4, useState as useState3 } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import {
+  Loader2 as Loader23,
+  CheckCircle2,
+  AlertCircle as AlertCircle2,
+  ChevronDown as ChevronDown2,
+  ChevronRight as ChevronRight2,
+  Terminal as Terminal2,
+  FileEdit as FileEdit2,
+  FileSearch,
+  Search,
+  PencilLine,
+  Bot,
+  Globe,
+  ClipboardList,
+  Settings
+} from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOOL_CATEGORY_ICON_MAP = {
+  command: Terminal2,
+  write: FileEdit2,
+  read: FileSearch,
+  search: Search,
+  edit: PencilLine,
+  task: Bot,
+  web: Globe,
+  todo: ClipboardList,
+  other: Settings
+};
+var InlineToolItem = memo4(
+  ({ part, renderToolDetail }) => {
+    const [open, setOpen] = useState3(false);
+    const meta = getToolDisplayMetadata(part);
+    const { status } = part.state;
+    const errorText = getToolErrorText(part);
+    const isRunning = status === "pending" || status === "running";
+    const isError = status === "error";
+    const isComplete = status === "completed";
+    const startTime = part.state.time?.start;
+    const endTime = part.state.time?.end;
+    const durationMs = startTime && endTime ? endTime - startTime : void 0;
+    const category = getToolCategory(part.tool);
+    const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+    return /* @__PURE__ */ jsxs4(Collapsible.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx5(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          className: cn(
+            "w-full flex items-center gap-2 px-3 py-1.5 text-left",
+            "rounded-md transition-colors text-xs",
+            "hover:bg-neutral-100/60 dark:hover:bg-neutral-800/60",
+            open && "bg-neutral-100/40 dark:bg-neutral-800/40"
+          ),
+          children: [
+            isRunning ? /* @__PURE__ */ jsx5(Loader23, { className: "w-4 h-4 shrink-0 animate-spin text-blue-500 dark:text-blue-400" }) : isComplete ? /* @__PURE__ */ jsx5(CheckCircle2, { className: "w-4 h-4 shrink-0 text-green-500 dark:text-green-400" }) : isError ? /* @__PURE__ */ jsx5(AlertCircle2, { className: "w-4 h-4 shrink-0 text-red-500 dark:text-red-400" }) : /* @__PURE__ */ jsx5(DefaultIcon, { className: "w-4 h-4 shrink-0 text-neutral-400 dark:text-neutral-400" }),
+            /* @__PURE__ */ jsx5("span", { className: "font-medium text-neutral-800 dark:text-neutral-200 shrink-0", children: meta.title }),
+            meta.description && /* @__PURE__ */ jsx5("span", { className: "text-neutral-400 dark:text-neutral-500 truncate flex-1 font-mono", children: meta.description }),
+            !meta.description && /* @__PURE__ */ jsx5("span", { className: "flex-1" }),
+            isRunning && startTime && /* @__PURE__ */ jsx5(LiveDuration, { startTime }),
+            !isRunning && durationMs != null && /* @__PURE__ */ jsx5("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(durationMs) }),
+            errorText && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 dark:text-red-400 truncate max-w-32", children: errorText }),
+            open ? /* @__PURE__ */ jsx5(ChevronDown2, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500 shrink-0" }) : /* @__PURE__ */ jsx5(ChevronRight2, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500 shrink-0" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx5(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx5("div", { className: "ml-6 mt-1 mb-2", children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx5(ExpandedToolDetail, { part }) }) })
+    ] });
+  }
+);
+InlineToolItem.displayName = "InlineToolItem";
+
+// src/run/inline-thinking-item.tsx
+import { memo as memo5, useState as useState4 } from "react";
+import * as Collapsible2 from "@radix-ui/react-collapsible";
+import { Brain, ChevronDown as ChevronDown3, ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var InlineThinkingItem = memo5(({ part }) => {
+  const [open, setOpen] = useState4(false);
+  const startTime = part.time?.start;
+  const endTime = part.time?.end;
+  const durationMs = startTime && endTime ? endTime - startTime : void 0;
+  const isActive = startTime != null && endTime == null;
+  const preview = part.text ? truncateText(part.text, 100) : void 0;
+  return /* @__PURE__ */ jsxs5(Collapsible2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx6(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        className: cn(
+          "w-full flex items-center gap-2 px-3 py-1.5 text-left",
+          "rounded-md transition-colors text-xs",
+          "hover:bg-neutral-100/60 dark:hover:bg-neutral-800/60",
+          open && "bg-neutral-100/40 dark:bg-neutral-800/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsx6(
+            Brain,
+            {
+              className: cn(
+                "w-4 h-4 shrink-0",
+                isActive ? "text-purple-500 dark:text-purple-400 animate-pulse" : "text-neutral-400 dark:text-neutral-400"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx6("span", { className: "font-medium text-neutral-800 dark:text-neutral-200 shrink-0", children: isActive ? "Thinking..." : "Thought" }),
+          preview && !open && /* @__PURE__ */ jsx6("span", { className: "text-neutral-400 dark:text-neutral-500 truncate flex-1", children: preview }),
+          !preview && /* @__PURE__ */ jsx6("span", { className: "flex-1" }),
+          isActive && startTime && /* @__PURE__ */ jsx6(LiveDuration, { startTime }),
+          !isActive && durationMs != null && /* @__PURE__ */ jsx6("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(durationMs) }),
+          open ? /* @__PURE__ */ jsx6(ChevronDown3, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500 shrink-0" }) : /* @__PURE__ */ jsx6(ChevronRight3, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500 shrink-0" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx6(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: part.text && /* @__PURE__ */ jsx6("div", { className: "ml-6 mt-1 mb-2 p-3 rounded-md bg-neutral-100/40 dark:bg-neutral-800/40 text-xs text-neutral-600 dark:text-neutral-300", children: /* @__PURE__ */ jsx6(Markdown, { children: part.text }) }) })
+  ] });
+});
+InlineThinkingItem.displayName = "InlineThinkingItem";
+
+// src/run/run-group.tsx
+import { memo as memo6, useMemo } from "react";
+import * as Collapsible3 from "@radix-ui/react-collapsible";
+import {
+  Bot as Bot2,
+  Loader2 as Loader24,
+  ChevronDown as ChevronDown4,
+  ChevronRight as ChevronRight4,
+  Terminal as Terminal3,
+  FileEdit as FileEdit3,
+  FileSearch as FileSearch2,
+  Search as Search2,
+  PencilLine as PencilLine2,
+  Globe as Globe2,
+  ClipboardList as ClipboardList2,
+  Settings as Settings2
+} from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_BRANDING = {
+  label: "Agent",
+  accentClass: "text-blue-500 dark:text-blue-400",
+  bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
+  containerBgClass: "bg-neutral-50/40 dark:bg-neutral-900/40",
+  borderClass: "border-blue-500/15 dark:border-blue-500/20",
+  iconClass: "",
+  textClass: "text-blue-500 dark:text-blue-400"
+};
+var CATEGORY_ICON_MAP = {
+  command: Terminal3,
+  write: FileEdit3,
+  read: FileSearch2,
+  search: Search2,
+  edit: PencilLine2,
+  task: Bot2,
+  web: Globe2,
+  todo: ClipboardList2,
+  other: Settings2
+};
+function CategoryBadges({ categories }) {
+  const sorted = useMemo(() => Array.from(categories).sort(), [categories]);
+  if (sorted.length === 0) return null;
+  return /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
+    const Icon = CATEGORY_ICON_MAP[cat] ?? Settings2;
+    return /* @__PURE__ */ jsx7("span", { title: cat, children: /* @__PURE__ */ jsx7(Icon, { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500" }) }, cat);
+  }) });
+}
+var RunGroup = memo6(
+  ({
+    run,
+    partMap,
+    collapsed,
+    onToggle,
+    branding = DEFAULT_BRANDING,
+    renderToolDetail
+  }) => {
+    const allParts = useMemo(() => {
+      const parts = [];
+      for (const msg of run.messages) {
+        const msgParts = partMap[msg.id] ?? [];
+        msgParts.forEach((part, index) => {
+          parts.push({ part, msgId: msg.id, index });
+        });
+      }
+      return parts;
+    }, [run.messages, partMap]);
+    const { stats, isStreaming } = run;
+    return /* @__PURE__ */ jsxs6(Collapsible3.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: [
+      /* @__PURE__ */ jsx7(Collapsible3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          className: cn(
+            "w-full flex items-center gap-2 px-3 py-2 text-left",
+            "rounded-lg transition-colors",
+            "hover:bg-neutral-100/60 dark:hover:bg-neutral-800/60",
+            branding.bgClass,
+            collapsed && branding.borderClass && `border ${branding.borderClass}`,
+            !collapsed && "border border-transparent"
+          ),
+          children: [
+            /* @__PURE__ */ jsx7(
+              Bot2,
+              {
+                className: cn("w-4 h-4 shrink-0", branding.accentClass)
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "span",
+              {
+                className: cn("text-xs font-medium shrink-0", branding.textClass),
+                children: branding.label
+              }
+            ),
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+              stats.toolCount > 0 && /* @__PURE__ */ jsxs6("span", { className: "text-xs text-neutral-400 dark:text-neutral-500", children: [
+                stats.toolCount,
+                " tool",
+                stats.toolCount !== 1 ? "s" : ""
+              ] }),
+              stats.thinkingDurationMs > 0 && /* @__PURE__ */ jsxs6("span", { className: "text-xs text-neutral-400 dark:text-neutral-500", children: [
+                formatDuration(stats.thinkingDurationMs),
+                " thinking"
+              ] }),
+              /* @__PURE__ */ jsx7(CategoryBadges, { categories: stats.toolCategories })
+            ] }),
+            isStreaming && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx7(Loader24, { className: "w-3 h-3 text-blue-500 dark:text-blue-400 animate-spin" }),
+              /* @__PURE__ */ jsx7("span", { className: "text-xs text-blue-500 dark:text-blue-400", children: "Running" })
+            ] }),
+            !collapsed ? /* @__PURE__ */ jsx7(ChevronDown4, { className: "w-3.5 h-3.5 text-neutral-400 dark:text-neutral-500 shrink-0" }) : /* @__PURE__ */ jsx7(ChevronRight4, { className: "w-3.5 h-3.5 text-neutral-400 dark:text-neutral-500 shrink-0" })
+          ]
+        }
+      ) }),
+      collapsed && run.summaryText && /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 text-xs text-neutral-500 dark:text-neutral-400 line-clamp-2", children: run.summaryText }),
+      /* @__PURE__ */ jsx7(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: cn(
+            "mt-1 space-y-0.5 rounded-lg p-2",
+            branding.containerBgClass
+          ),
+          children: allParts.map(({ part, msgId, index }) => {
+            const key = `${msgId}-${index}`;
+            if (part.type === "tool") {
+              return /* @__PURE__ */ jsx7(
+                InlineToolItem,
+                {
+                  part,
+                  renderToolDetail
+                },
+                key
+              );
+            }
+            if (part.type === "reasoning") {
+              return /* @__PURE__ */ jsx7(
+                InlineThinkingItem,
+                {
+                  part
+                },
+                key
+              );
+            }
+            if (part.type === "text" && !part.synthetic && part.text.trim()) {
+              return /* @__PURE__ */ jsx7("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx7(Markdown, { children: part.text }) }, key);
+            }
+            return null;
+          })
+        }
+      ) })
+    ] });
+  }
+);
+RunGroup.displayName = "RunGroup";
+
+export {
+  CommandPreview,
+  WriteFilePreview,
+  ExpandedToolDetail,
+  LiveDuration,
+  InlineToolItem,
+  InlineThinkingItem,
+  RunGroup
+};

package/dist/chunk-B26TQ7SA.js

@@ -0,0 +1,47 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-sm",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback
+};

package/dist/chunk-E6FS7R4X.js

@@ -0,0 +1,109 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.98]",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:scale-[0.98]",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:scale-[0.98]",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        sandbox: "bg-gradient-to-r from-purple-600 to-violet-500 text-white shadow-lg shadow-purple-500/25 hover:from-purple-700 hover:to-violet-600 hover:shadow-purple-500/40 active:scale-[0.98]"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-12 rounded-lg px-8 text-base",
+        xl: "h-14 rounded-xl px-10 text-lg",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          className: cn(buttonVariants({ variant, size, className })),
+          ref,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "mr-2 -ml-1 h-4 w-4 animate-spin",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};