@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-KMXV7DDX.js

@@ -0,0 +1,174 @@
+import {
+  getToolCategory
+} from "./chunk-QSQBDR3N.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, useEffect, useRef, useState } from "react";
+var AUTO_COLLAPSE_DELAY = 1e3;
+function useRunCollapseState(runs) {
+  const [collapsedMap, setCollapsedMap] = useState({});
+  const userOverrides = useRef(/* @__PURE__ */ new Set());
+  const completedRuns = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const timers = [];
+    for (const run of runs) {
+      if (run.isComplete && !completedRuns.current.has(run.id)) {
+        completedRuns.current.add(run.id);
+        if (userOverrides.current.has(run.id)) continue;
+        const timer = setTimeout(() => {
+          setCollapsedMap((prev) => ({ ...prev, [run.id]: true }));
+        }, AUTO_COLLAPSE_DELAY);
+        timers.push(timer);
+      }
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [runs]);
+  const isCollapsed = useCallback(
+    (runId) => {
+      return collapsedMap[runId] ?? false;
+    },
+    [collapsedMap]
+  );
+  const toggleCollapse = useCallback((runId) => {
+    userOverrides.current.add(runId);
+    setCollapsedMap((prev) => ({ ...prev, [runId]: !prev[runId] }));
+  }, []);
+  return { isCollapsed, toggleCollapse };
+}
+
+// src/hooks/use-auto-scroll.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+var BOTTOM_THRESHOLD = 40;
+function useAutoScroll(containerRef, deps = []) {
+  const [isAtBottom, setIsAtBottom] = useState2(true);
+  const userScrolledUp = useRef2(false);
+  const checkBottom = useCallback2(() => {
+    const el = containerRef.current;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
+  }, [containerRef]);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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
+};

package/dist/chunk-KYY2X6LY.js

@@ -0,0 +1,318 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/workspace/workspace-layout.tsx
+import { useState } from "react";
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function WorkspaceLayout({
+  left,
+  leftHeader,
+  center,
+  centerHeader,
+  centerFooter,
+  right,
+  rightHeader,
+  bottom,
+  defaultLeftOpen = true,
+  defaultRightOpen = false,
+  defaultBottomOpen = false,
+  className
+}) {
+  const [leftOpen, setLeftOpen] = useState(defaultLeftOpen);
+  const [rightOpen, setRightOpen] = useState(defaultRightOpen);
+  const [bottomOpen, setBottomOpen] = useState(defaultBottomOpen);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col h-screen bg-[var(--bg-root)] text-[var(--text-primary)] font-[var(--font-sans)]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
+    left && leftOpen && /* @__PURE__ */ jsxs("aside", { className: "w-64 shrink-0 border-r border-[var(--border-subtle)] flex flex-col bg-[var(--bg-dark)]", children: [
+      leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: [
+        leftHeader,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setLeftOpen(false),
+            className: "p-1 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)]",
+            children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto py-1", children: left })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex-1 flex flex-col min-w-0", children: [
+      (centerHeader || left) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border-subtle)] shrink-0 bg-[var(--bg-dark)]", children: [
+        left && !leftOpen && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setLeftOpen(true),
+            className: "p-1 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)]",
+            children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: centerHeader }),
+        right && !rightOpen && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setRightOpen(true),
+            className: "p-1 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)]",
+            children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: center }),
+      bottom && bottomOpen && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] bg-[var(--bg-card)] max-h-48 overflow-auto", children: bottom }),
+      centerFooter && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] shrink-0 bg-[var(--bg-dark)]", children: centerFooter })
+    ] }),
+    right && rightOpen && /* @__PURE__ */ jsxs("aside", { className: "w-[480px] shrink-0 border-l border-[var(--border-subtle)] flex flex-col bg-[var(--bg-dark)]", children: [
+      rightHeader !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: [
+        rightHeader,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setRightOpen(false),
+            className: "p-1 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)]",
+            children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex justify-end px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setRightOpen(false),
+          className: "p-1 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)]",
+          children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: right })
+    ] })
+  ] }) });
+}
+
+// src/workspace/status-bar.tsx
+import { Zap, FileText, X } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  connected: { label: "", color: "bg-[var(--code-success)]" },
+  connecting: { label: "Connecting...", color: "bg-[var(--code-number)]" },
+  disconnected: { label: "Disconnected", color: "bg-[var(--code-error)]" },
+  provisioning: { label: "Provisioning...", color: "bg-[var(--code-number)]" }
+};
+function StatusBar({
+  modelLabel,
+  onModelClick,
+  credits,
+  contextBadges = [],
+  onRemoveBadge,
+  status = "connected",
+  className
+}) {
+  const statusInfo = STATUS_LABELS[status];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 px-4 py-1.5 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)] text-xs",
+        className
+      ),
+      children: [
+        modelLabel && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onModelClick,
+            className: "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] transition-colors",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: cn("w-1.5 h-1.5 rounded-full", statusInfo.color) }),
+              modelLabel
+            ]
+          }
+        ),
+        statusInfo.label && /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: statusInfo.label }),
+        contextBadges.map((badge) => /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-accent)] text-[var(--text-secondary)] bg-[var(--border-accent)]/5",
+            children: [
+              /* @__PURE__ */ jsx2(FileText, { className: "h-3 w-3" }),
+              badge.label,
+              badge.count !== void 0 && /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: badge.count }),
+              onRemoveBadge && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: () => onRemoveBadge(badge.id),
+                  className: "hover:text-[var(--text-primary)] transition-colors",
+                  children: /* @__PURE__ */ jsx2(X, { className: "h-2.5 w-2.5" })
+                }
+              )
+            ]
+          },
+          badge.id
+        )),
+        /* @__PURE__ */ jsx2("div", { className: "flex-1" }),
+        credits !== void 0 && /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx2(Zap, { className: "h-3 w-3" }),
+          credits.toLocaleString(),
+          " credits"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workspace/status-banner.tsx
+import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var BANNER_STYLES = {
+  provisioning: { bg: "bg-[var(--brand-cool)]/5", border: "border-[var(--brand-cool)]/20", icon: Loader2 },
+  connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", icon: Wifi },
+  error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", icon: AlertCircle },
+  success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", icon: CheckCircle },
+  info: { bg: "bg-[var(--bg-elevated)]", border: "border-[var(--border-default)]", icon: AlertCircle }
+};
+function StatusBanner({ type, message, detail, onDismiss, className }) {
+  const style = BANNER_STYLES[type];
+  const Icon = style.icon;
+  const isAnimated = type === "provisioning" || type === "connecting";
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 px-4 py-2 border-b text-sm", style.bg, style.border, className), children: [
+    /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", isAnimated && "animate-spin") }),
+    /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-secondary)]", children: message }),
+    detail && /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-muted)] text-xs", children: detail }),
+    onDismiss && /* @__PURE__ */ jsx3("button", { onClick: onDismiss, className: "ml-auto text-[var(--text-muted)] hover:text-[var(--text-secondary)] text-xs", children: "Dismiss" })
+  ] });
+}
+
+// src/workspace/audit-results.tsx
+import { useState as useState2 } from "react";
+import { CheckCircle as CheckCircle2, XCircle, ChevronRight, Shield } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AuditResults({ forms, crossFormChecks = [], overallScore, className }) {
+  const totalPassed = forms.reduce((s, f) => s + f.passed, 0);
+  const totalChecks = forms.reduce((s, f) => s + f.passed + f.failed, 0);
+  return /* @__PURE__ */ jsxs4("div", { className: cn("space-y-3 p-3", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--bg-input)] border border-[var(--border-subtle)]", children: [
+      /* @__PURE__ */ jsx4(Shield, { className: cn("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: [
+          totalPassed,
+          "/",
+          totalChecks,
+          " checks passed"
+        ] }),
+        overallScore !== void 0 && /* @__PURE__ */ jsxs4("div", { className: "text-xs text-[var(--text-muted)]", children: [
+          "Score: ",
+          overallScore,
+          "/100"
+        ] })
+      ] })
+    ] }),
+    forms.map((form) => /* @__PURE__ */ jsx4(FormAuditCard, { form }, form.formId)),
+    crossFormChecks.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-1", children: "Cross-Form Checks" }),
+      crossFormChecks.map((check, i) => /* @__PURE__ */ jsx4(CheckRow, { check }, i))
+    ] })
+  ] });
+}
+function FormAuditCard({ form }) {
+  const [expanded, setExpanded] = useState2(form.failed > 0);
+  const allPassed = form.failed === 0 && form.found;
+  return /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--bg-hover)] transition-colors",
+        children: [
+          allPassed ? /* @__PURE__ */ jsx4(CheckCircle2, { className: "h-4 w-4 text-[var(--code-success)] shrink-0" }) : !form.found ? /* @__PURE__ */ jsx4(XCircle, { className: "h-4 w-4 text-[var(--code-error)] shrink-0" }) : /* @__PURE__ */ jsx4(XCircle, { className: "h-4 w-4 text-[var(--code-number)] shrink-0" }),
+          /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-[var(--text-primary)] flex-1", children: form.formName || form.formId }),
+          /* @__PURE__ */ jsxs4("span", { className: cn("text-xs tabular-nums", allPassed ? "text-[var(--code-success)]" : "text-[var(--text-muted)]"), children: [
+            form.passed,
+            "/",
+            form.passed + form.failed
+          ] }),
+          /* @__PURE__ */ jsx4(ChevronRight, { className: cn("h-3 w-3 text-[var(--text-muted)] transition-transform", expanded && "rotate-90") })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx4("div", { className: "border-t border-[var(--border-subtle)] px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx4(CheckRow, { check }, i)) })
+  ] });
+}
+function CheckRow({ check }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    check.passed ? /* @__PURE__ */ jsx4(CheckCircle2, { className: "h-3 w-3 text-[var(--code-success)] shrink-0" }) : /* @__PURE__ */ jsx4(XCircle, { className: "h-3 w-3 text-[var(--code-error)] shrink-0" }),
+    /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-secondary)] flex-1 truncate", children: check.label }),
+    /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-muted)] tabular-nums shrink-0", children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} \u2260 ${check.expected}` })
+  ] });
+}
+
+// src/workspace/terminal-panel.tsx
+import { useRef, useEffect } from "react";
+import { Terminal as TerminalIcon, ChevronDown, ChevronUp, X as X2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var LINE_COLORS = {
+  command: "text-[var(--code-function)]",
+  stdout: "text-[var(--text-secondary)]",
+  stderr: "text-[var(--code-error)]",
+  system: "text-[var(--text-muted)]"
+};
+var LINE_PREFIXES = {
+  command: "$ ",
+  stdout: "",
+  stderr: "",
+  system: "# "
+};
+function TerminalPanel({
+  lines,
+  title = "Terminal",
+  isCollapsed = false,
+  onToggle,
+  onClose,
+  maxHeight = 200,
+  className
+}) {
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (!isCollapsed && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [lines, isCollapsed]);
+  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-[var(--border-subtle)] bg-[var(--bg-card)]", className), children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: onToggle,
+        className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+        children: [
+          /* @__PURE__ */ jsx5(TerminalIcon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx5("span", { className: "font-medium", children: title }),
+          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-[var(--radius-full)] bg-[var(--bg-input)] text-[10px] tabular-nums", children: lines.length }),
+          /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
+          onClose && /* @__PURE__ */ jsx5(X2, { className: "h-3 w-3 hover:text-[var(--text-primary)]", onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+          } }),
+          isCollapsed ? /* @__PURE__ */ jsx5(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx5(ChevronDown, { className: "h-3 w-3" })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: scrollRef,
+        className: "overflow-auto px-3 pb-2 font-[var(--font-mono)] text-xs leading-[1.6]",
+        style: { maxHeight },
+        children: [
+          lines.map((line) => /* @__PURE__ */ jsxs5("div", { className: cn("whitespace-pre-wrap", LINE_COLORS[line.type]), children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)] select-none", children: LINE_PREFIXES[line.type] }),
+            line.text
+          ] }, line.id)),
+          lines.length === 0 && /* @__PURE__ */ jsx5("div", { className: "text-[var(--text-muted)] py-2", children: "No output yet" })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  WorkspaceLayout,
+  StatusBar,
+  StatusBanner,
+  AuditResults,
+  TerminalPanel
+};