@tangle-network/sandbox-ui 0.2.1 → 0.3.3

package/dist/{chunk-QSQBDR3N.js → chunk-BX6AQMUS.js}

@@ -16,7 +16,7 @@ function extractCommand(input) {
   return extractString(input, "command") ?? extractString(input, "cmd");
 }
 function extractFilePath(input) {
-  return extractString(input, "file_path") ?? extractString(input, "path") ?? extractString(input, "filePath");
+  return extractString(input, "file_path") ?? extractString(input, "path") ?? extractString(input, "filePath") ?? extractString(input, "file");
 }
 function cleanPath(path) {
   const parts = path.split("/");
@@ -108,6 +108,7 @@ function getToolDisplayMetadata(part) {
         description: filePath,
         hasDiffOutput: true,
         diffFilePath: filePath,
+        displayVariant: "diff",
         targetPath: filePath
       };
     case "read":
@@ -116,6 +117,7 @@ function getToolDisplayMetadata(part) {
       return {
         title: filePath ? `Read ${cleanPath(filePath)}` : "Read file",
         description: filePath,
+        displayVariant: "read-file",
         targetPath: filePath
       };
     case "grep":
@@ -159,7 +161,8 @@ function getToolDisplayMetadata(part) {
     }
     default:
       return {
-        title: part.tool || "Tool"
+        title: part.tool || "Tool",
+        description: command ?? filePath ?? extractString(input, "pattern") ?? extractString(input, "query")
       };
   }
 }

package/dist/chunk-CCKNIAS7.js

@@ -0,0 +1,124 @@
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-CJ2RYVZH.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/run/tool-call-feed.tsx
+import { jsx } from "react/jsx-runtime";
+function ToolCallFeed({ segments, className }) {
+  if (segments.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), children: segments.map((segment, i) => {
+    if (segment.kind === "text") {
+      return segment.content.trim() ? /* @__PURE__ */ jsx(Markdown, { children: segment.content }, i) : null;
+    }
+    if (segment.kind === "tool_call") {
+      return /* @__PURE__ */ jsx(
+        ToolCallStep,
+        {
+          type: segment.call.type,
+          label: segment.call.label,
+          status: segment.call.status,
+          detail: segment.call.detail,
+          output: segment.call.output,
+          duration: segment.call.duration
+        },
+        segment.call.id || i
+      );
+    }
+    if (segment.kind === "tool_group") {
+      return /* @__PURE__ */ jsx(ToolCallGroup, { title: segment.title, children: segment.calls.map((call) => /* @__PURE__ */ jsx(
+        ToolCallStep,
+        {
+          type: call.type,
+          label: call.label,
+          status: call.status,
+          detail: call.detail,
+          output: call.output,
+          duration: call.duration
+        },
+        call.id
+      )) }, i);
+    }
+    return null;
+  }) });
+}
+function parseToolEvent(event) {
+  const { type, data } = event;
+  if (type === "tool.invocation" || type === "tool_use") {
+    const toolName = data.name || data.tool || "unknown";
+    const input = data.input;
+    return {
+      id: data.id || data.toolUseId || crypto.randomUUID(),
+      type: mapToolName(toolName),
+      label: formatToolLabel(toolName, input),
+      status: "running",
+      detail: input ? formatToolInput(toolName, input) : void 0
+    };
+  }
+  if (type === "tool.result" || type === "tool_result") {
+    return {
+      id: data.id || data.toolUseId || "",
+      type: mapToolName(data.name || data.tool || "unknown"),
+      label: formatToolLabel(data.name || data.tool || "unknown"),
+      status: data.error ? "error" : "success",
+      output: truncate(data.output || data.result || "", 500),
+      duration: data.duration
+    };
+  }
+  return null;
+}
+function mapToolName(name) {
+  const lower = name.toLowerCase();
+  if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";
+  if (lower.includes("read") || lower.includes("cat")) return "read";
+  if (lower.includes("write") || lower.includes("create")) return "write";
+  if (lower.includes("edit") || lower.includes("replace")) return "edit";
+  if (lower.includes("glob") || lower.includes("find")) return "glob";
+  if (lower.includes("grep") || lower.includes("search")) return "grep";
+  if (lower.includes("list") || lower.includes("ls")) return "list";
+  if (lower.includes("inspect")) return "inspect";
+  if (lower.includes("audit")) return "audit";
+  return "unknown";
+}
+function formatToolLabel(toolName, input) {
+  const lower = toolName.toLowerCase();
+  if (lower.includes("bash") && input?.command) {
+    const cmd = String(input.command);
+    return cmd.length > 80 ? `${cmd.slice(0, 77)}...` : cmd;
+  }
+  if ((lower.includes("read") || lower.includes("cat")) && input?.path) {
+    return `Read ${input.path}`;
+  }
+  if (lower.includes("write") && input?.path) {
+    return `Write ${input.path}`;
+  }
+  if (lower.includes("edit") && input?.path) {
+    return `Edit ${input.path}`;
+  }
+  if (lower.includes("glob") && input?.pattern) {
+    return `Find ${input.pattern}`;
+  }
+  if (lower.includes("grep") && input?.pattern) {
+    return `Search for ${input.pattern}`;
+  }
+  return toolName;
+}
+function formatToolInput(toolName, input) {
+  if (input.command) return String(input.command);
+  if (input.path) return String(input.path);
+  return JSON.stringify(input, null, 2).slice(0, 300);
+}
+function truncate(text, max) {
+  return text.length > max ? text.slice(0, max - 3) + "..." : text;
+}
+
+export {
+  ToolCallFeed,
+  parseToolEvent
+};

package/dist/chunk-CJ2RYVZH.js

@@ -0,0 +1,128 @@
+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 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-[var(--brand-cool)]",
+  success: "text-[var(--code-success)]",
+  error: "text-[var(--code-error)]"
+};
+function ToolCallStep({
+  type,
+  label,
+  status,
+  detail,
+  output,
+  duration,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const Icon = ICONS[type] || ICONS.unknown;
+  const hasExpandable = !!(detail || output);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group overflow-hidden rounded-[var(--radius-lg)] border bg-[var(--bg-card)] transition-colors",
+        status === "running" && "border-[var(--border-accent)]",
+        status === "success" && "border-[var(--border-subtle)] hover:border-[var(--border-accent)]",
+        status === "error" && "border-red-500/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => hasExpandable && setExpanded(!expanded),
+            disabled: !hasExpandable,
+            className: cn(
+              "flex w-full items-center gap-3 px-3 py-3 text-left text-sm",
+              hasExpandable && "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
+                    status === "running" && "border-[var(--border-accent)] bg-[var(--brand-cool)]/12 text-[var(--brand-cool)]",
+                    status === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
+                    status === "error" && "border-red-500/30 bg-red-500/10 text-red-200"
+                  ),
+                  children: status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", STATUS_COLORS[status]) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 font-[var(--font-sans)] text-[var(--text-secondary)]", 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-[var(--border-accent)] bg-[var(--brand-cool)]/10 text-[var(--brand-cool)]",
+                    status === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
+                    status === "error" && "border-red-500/30 bg-red-500/10 text-red-200"
+                  ),
+                  children: status
+                }
+              ),
+              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-[var(--text-muted)]", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
+              hasExpandable && /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: cn(
+                    "h-3 w-3 text-[var(--text-muted)] transition-transform shrink-0",
+                    expanded && "rotate-90"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] bg-[var(--bg-section)]/50 px-4 py-4", children: [
+          detail && /* @__PURE__ */ jsx("div", { className: "text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: detail }),
+          output && /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-x-auto rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-3 text-xs font-[var(--font-mono)] text-[var(--text-secondary)]", children: output })
+        ] })
+      ]
+    }
+  );
+}
+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-[var(--text-muted)]", children: title }),
+    children
+  ] });
+}
+
+export {
+  ToolCallStep,
+  ToolCallGroup
+};

package/dist/{chunk-KMXV7DDX.js → chunk-CNWVHQFY.js}

@@ -1,6 +1,6 @@
 import {
   getToolCategory
-} from "./chunk-QSQBDR3N.js";
+} from "./chunk-BX6AQMUS.js";
 
 // src/hooks/use-run-groups.ts
 import { useMemo } from "react";

package/dist/{chunk-OU4TRNQZ.js → chunk-COCSO7FG.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-MCGKDCOR.js";
 import {
   Button
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -71,7 +71,7 @@ function UserMenu({
 }) {
   const initials = user.name ? user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : user.email.slice(0, 2).toUpperCase();
   const avatarGradient = {
-    sandbox: "from-purple-500 to-violet-500"
+    sandbox: "bg-[image:var(--accent-gradient-strong)]"
   }[variant];
   const handleLogout = () => {
     if (onLogout) {
@@ -92,7 +92,7 @@ function UserMenu({
               AvatarFallback,
               {
                 className: cn(
-                  "bg-gradient-to-r text-white text-xs",
+                  "text-white text-xs",
                   avatarGradient
                 ),
                 children: initials

package/dist/chunk-FJSVPBKY.js

@@ -0,0 +1,85 @@
+// src/hooks/use-auth.ts
+import * as React from "react";
+function useAuth({
+  apiBaseUrl,
+  revalidateOnFocus = false,
+  shouldRetryOnError = false
+}) {
+  const [user, setUser] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const fetchSession = React.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBaseUrl}/auth/session`, {
+        credentials: "include"
+      });
+      if (!res.ok) {
+        throw new Error("Not authenticated");
+      }
+      const data = await res.json();
+      if (data.success && data.data) {
+        setUser(data.data);
+      } else {
+        setUser(null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+      setUser(null);
+      if (shouldRetryOnError) {
+        setTimeout(fetchSession, 5e3);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiBaseUrl, shouldRetryOnError]);
+  React.useEffect(() => {
+    fetchSession();
+  }, [fetchSession]);
+  React.useEffect(() => {
+    if (!revalidateOnFocus) return;
+    const handleFocus = () => {
+      fetchSession();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => window.removeEventListener("focus", handleFocus);
+  }, [revalidateOnFocus, fetchSession]);
+  return {
+    user,
+    isLoading,
+    isError: !!error,
+    error,
+    mutate: fetchSession
+  };
+}
+function createAuthFetcher(_apiBaseUrl) {
+  return async function authFetcher(url, options) {
+    const res = await fetch(url, {
+      ...options,
+      credentials: "include",
+      headers: {
+        ...options?.headers
+      }
+    });
+    if (!res.ok) {
+      throw new Error(`Request failed with status ${res.status}`);
+    }
+    return res.json();
+  };
+}
+function useApiKey() {
+  const [apiKey, setApiKey] = React.useState(null);
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setApiKey(localStorage.getItem("apiKey"));
+    }
+  }, []);
+  return apiKey;
+}
+
+export {
+  useAuth,
+  createAuthFetcher,
+  useApiKey
+};

package/dist/chunk-FRGMMANX.js

@@ -0,0 +1,102 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Progress = React.forwardRef(
+  ({ className, value, variant = "default", showValue = false, ...props }, ref) => {
+    const indicatorVariants = {
+      default: "bg-primary",
+      sandbox: "bg-[image:var(--accent-gradient-strong)]"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        ProgressPrimitive.Root,
+        {
+          ref,
+          className: cn(
+            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            ProgressPrimitive.Indicator,
+            {
+              className: cn(
+                "h-full w-full flex-1 transition-all duration-300 ease-out",
+                indicatorVariants[variant]
+              ),
+              style: { transform: `translateX(-${100 - (value || 0)}%)` }
+            }
+          )
+        }
+      ),
+      showValue && /* @__PURE__ */ jsxs("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
+        value,
+        "%"
+      ] })
+    ] });
+  }
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/primitives/skeleton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("animate-pulse rounded-lg bg-muted", className),
+      ...props
+    }
+  );
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "space-y-4 rounded-xl border border-border bg-card p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/2" }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2 pt-4", children: [
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-5/6" }),
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-4/6" })
+        ] })
+      ]
+    }
+  );
+}
+function SkeletonTable({ rows = 5 }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" })
+    ] }),
+    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" })
+    ] }, i))
+  ] });
+}
+
+export {
+  Progress,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable
+};

package/dist/{chunk-E6FS7R4X.js → chunk-HWLX5NME.js}

@@ -18,7 +18,7 @@ var buttonVariants = cva(
         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]"
+        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] hover:brightness-110 active:scale-[0.98]"
       },
       size: {
         default: "h-10 px-4 py-2",