@tangle-network/ui 1.0.0

package/dist/chunk-2VH6PUXD.js

@@ -0,0 +1,186 @@
+import {
+  CodeBlock
+} from "./chunk-66BNMOVT.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/run/tool-call-step.tsx
+import { useState } from "react";
+import {
+  Terminal,
+  FileText,
+  FileCode,
+  Search,
+  CheckCircle,
+  ChevronRight,
+  Loader2,
+  FolderOpen,
+  Download,
+  Pencil,
+  Eye
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXT_LANGUAGE = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  css: "css",
+  scss: "scss",
+  json: "json",
+  jsonc: "json",
+  md: "markdown",
+  mdx: "markdown",
+  py: "python",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  html: "html",
+  htm: "html",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  rs: "rust",
+  go: "go",
+  sql: "sql",
+  xml: "xml"
+};
+function inferLanguage(detail, language) {
+  if (language) return language;
+  if (!detail) return void 0;
+  const ext = detail.split(".").pop()?.toLowerCase();
+  return ext ? EXT_LANGUAGE[ext] : void 0;
+}
+function isFilePath(detail) {
+  return /[/\\]/.test(detail) || /\.\w{1,6}$/.test(detail);
+}
+function FilePathChip({ path }) {
+  const parts = path.replace(/\\/g, "/").split("/");
+  const filename = parts.pop() ?? path;
+  const dir = parts.length > 0 ? parts.join("/") + "/" : "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-border bg-background px-2.5 py-1.5 font-mono text-xs min-w-0", children: [
+    /* @__PURE__ */ jsx(FileCode, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+    dir && /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: dir }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-foreground", children: filename })
+  ] });
+}
+var ICONS = {
+  bash: Terminal,
+  read: Eye,
+  write: FileText,
+  edit: Pencil,
+  glob: FolderOpen,
+  grep: Search,
+  list: FolderOpen,
+  download: Download,
+  inspect: Search,
+  audit: CheckCircle,
+  unknown: FileCode
+};
+var STATUS_COLORS = {
+  running: "text-primary",
+  success: "text-[var(--code-success)]",
+  error: "text-[var(--code-error)]"
+};
+function ToolCallStep({
+  type,
+  label,
+  status,
+  detail,
+  output,
+  language,
+  duration,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const Icon = ICONS[type] || ICONS.unknown;
+  const hasExpandable = !!(detail || output);
+  const lang = inferLanguage(detail, language);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card transition-colors",
+        status === "running" && "border-border",
+        status === "success" && "border-border hover:border-primary/20",
+        status === "error" && "border-[var(--surface-danger-border)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => hasExpandable && setExpanded(!expanded),
+            disabled: !hasExpandable,
+            className: cn(
+              "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+              hasExpandable && "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+                    status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary",
+                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+                  ),
+                  children: status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-3 w-3 shrink-0", STATUS_COLORS[status]) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 font-sans text-foreground", children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]",
+                    status === "running" && "border-border bg-[var(--accent-surface-soft)] text-primary",
+                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+                  ),
+                  children: status
+                }
+              ),
+              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
+              hasExpandable && /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: cn(
+                    "h-3 w-3 text-muted-foreground transition-transform shrink-0",
+                    expanded && "rotate-90"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-border bg-muted px-3 py-2.5", children: [
+          detail && (isFilePath(detail) ? /* @__PURE__ */ jsx(FilePathChip, { path: detail }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-muted-foreground", children: detail })),
+          output && /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              code: output,
+              language: lang,
+              className: "max-h-72 overflow-auto text-xs"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ToolCallGroup({ title, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-2 space-y-2", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }),
+    children
+  ] });
+}
+
+export {
+  ToolCallStep,
+  ToolCallGroup
+};

package/dist/chunk-34A66VBG.js

@@ -0,0 +1,214 @@
+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;
+
+// src/primitives/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent data-[state=open]:bg-muted/50",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx2(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx2(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
+      "focus:bg-muted/50 focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx2(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 font-semibold text-sm",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut
+};

package/dist/chunk-4CLN43XT.js

@@ -0,0 +1,45 @@
+// src/utils/format.ts
+function formatDuration(ms) {
+  if (ms < 1e3) return "<1s";
+  const seconds = Math.floor(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
+}
+function truncateText(text, max) {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= max) return cleaned;
+  return cleaned.slice(0, max).trim() + "...";
+}
+function formatUptime(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const totalSeconds = Math.floor(ms / 1e3);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return `${minutes}m ${seconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  if (hours < 24) return `${hours}h ${remMinutes}m`;
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  return `${days}d ${remHours}h`;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
+  const gb = mb / 1024;
+  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
+}
+
+export {
+  formatDuration,
+  truncateText,
+  formatUptime,
+  formatBytes
+};

package/dist/chunk-54SQQMMM.js

@@ -0,0 +1,156 @@
+import {
+  getToolCategory
+} from "./chunk-BX6AQMUS.js";
+
+// src/hooks/use-run-groups.ts
+import { useMemo } from "react";
+function computeRunStats(messages, partMap) {
+  const stats = {
+    toolCount: 0,
+    messageCount: messages.length,
+    thinkingDurationMs: 0,
+    textPartCount: 0,
+    toolCategories: /* @__PURE__ */ new Set()
+  };
+  for (const msg of messages) {
+    const parts = partMap[msg.id] ?? [];
+    for (const part of parts) {
+      switch (part.type) {
+        case "tool":
+          stats.toolCount++;
+          stats.toolCategories.add(getToolCategory(part.tool));
+          break;
+        case "text":
+          if (!part.synthetic) stats.textPartCount++;
+          break;
+        case "reasoning": {
+          const start = part.time?.start;
+          const end = part.time?.end;
+          if (start && end) stats.thinkingDurationMs += end - start;
+          break;
+        }
+      }
+    }
+  }
+  return stats;
+}
+function getLastTextContent(messages, partMap) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const parts = partMap[messages[i].id] ?? [];
+    for (let j = parts.length - 1; j >= 0; j--) {
+      const part = parts[j];
+      if (part.type === "text" && !part.synthetic && part.text.trim()) {
+        return part.text.trim();
+      }
+    }
+  }
+  return null;
+}
+function useRunGroups({
+  messages,
+  partMap,
+  isStreaming
+}) {
+  return useMemo(() => {
+    const groups = [];
+    let currentRunMessages = [];
+    function flushRun(streaming) {
+      if (currentRunMessages.length === 0) return;
+      const msgs = [...currentRunMessages];
+      const stats = computeRunStats(msgs, partMap);
+      const summaryText = getLastTextContent(msgs, partMap);
+      const isComplete = !streaming;
+      groups.push({
+        type: "run",
+        run: {
+          id: msgs[0].id,
+          messages: msgs,
+          isComplete,
+          isStreaming: streaming,
+          stats,
+          summaryText,
+          finalTextPart: null
+        }
+      });
+      currentRunMessages = [];
+    }
+    for (let i = 0; i < messages.length; i++) {
+      const msg = messages[i];
+      if (msg.role === "user") {
+        flushRun(false);
+        groups.push({ type: "user", message: msg });
+      } else {
+        currentRunMessages.push(msg);
+      }
+    }
+    if (currentRunMessages.length > 0) {
+      flushRun(isStreaming);
+    }
+    return groups;
+  }, [messages, partMap, isStreaming]);
+}
+
+// src/hooks/use-run-collapse-state.ts
+import { useCallback, useState } from "react";
+function useRunCollapseState(runs) {
+  const [collapsedMap, setCollapsedMap] = useState({});
+  const isCollapsed = useCallback(
+    (runId) => {
+      return collapsedMap[runId] ?? false;
+    },
+    [collapsedMap]
+  );
+  const toggleCollapse = useCallback((runId) => {
+    setCollapsedMap((prev) => ({ ...prev, [runId]: !prev[runId] }));
+  }, []);
+  return { isCollapsed, toggleCollapse };
+}
+
+// src/hooks/use-auto-scroll.ts
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useRef,
+  useState as useState2
+} from "react";
+var BOTTOM_THRESHOLD = 40;
+function useAutoScroll(containerRef, deps = []) {
+  const [isAtBottom, setIsAtBottom] = useState2(true);
+  const userScrolledUp = useRef(false);
+  const checkBottom = useCallback2(() => {
+    const el = containerRef.current;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
+  }, [containerRef]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const atBottom = checkBottom();
+      setIsAtBottom(atBottom);
+      userScrolledUp.current = !atBottom;
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [containerRef, checkBottom]);
+  useEffect(() => {
+    if (userScrolledUp.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, deps);
+  const scrollToBottom = useCallback2(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    userScrolledUp.current = false;
+    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    setIsAtBottom(true);
+  }, [containerRef]);
+  return { isAtBottom, scrollToBottom };
+}
+
+export {
+  useRunGroups,
+  useRunCollapseState,
+  useAutoScroll
+};