@tangle-network/sandbox-ui 0.4.0 → 0.5.1

package/dist/auth.js

@@ -3,9 +3,9 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-OHMO7NUX.js";
-import "./chunk-IW2JZCOC.js";
-import "./chunk-HWLX5NME.js";
+} from "./chunk-XTPAWK7L.js";
+import "./chunk-WBQ7VULC.js";
+import "./chunk-TSE423UF.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AuthHeader,

package/dist/chat.d.ts

@@ -6,7 +6,7 @@ import { G as GroupedMessage } from './run-CtFZ6s-D.js';
 import { a as SessionPart, S as SessionMessage, b as ToolPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
-import { T as ToolCallData } from './tool-call-feed-D5Ume-Pt.js';
+import { T as ToolCallData } from './tool-call-feed-Bs3MyQMT.js';
 import './openui.js';
 
 type MessageRole = "user" | "assistant" | "system";

package/dist/chat.js

@@ -1,22 +1,24 @@
+import {
+  ChatMessage
+} from "./chunk-5CEMHKBP.js";
 import {
   AgentTimeline,
   ChatContainer,
   ChatInput,
-  ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-GVUW4VDD.js";
+} from "./chunk-R3IU37AW.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-72UEKFZ2.js";
+import "./chunk-WC7QTWPN.js";
 import "./chunk-HRMUF35V.js";
-import "./chunk-CJ2RYVZH.js";
+import "./chunk-NTSRY4GW.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-YDBXQQLC.js";
-import "./chunk-TQN3VR4F.js";
-import "./chunk-LTFK464G.js";
-import "./chunk-MXCSSOGH.js";
-import "./chunk-HWLX5NME.js";
+import "./chunk-VBWY44UU.js";
+import "./chunk-JP725R4W.js";
+import "./chunk-H5XYSFYE.js";
+import "./chunk-TDYQBLL5.js";
+import "./chunk-TSE423UF.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-ZP6GSX4D.js → chunk-565V6JTN.js}

@@ -1,6 +1,6 @@
 import {
   Progress
-} from "./chunk-FRGMMANX.js";
+} from "./chunk-YYGECNZZ.js";
 import {
   Badge,
   Card,
@@ -9,10 +9,10 @@ import {
   CardFooter,
   CardHeader,
   CardTitle
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -130,7 +130,7 @@ function BillingDashboard({
   className,
   cardClassName
 }) {
-  const colors = variantColors[variant];
+  const colors2 = variantColors[variant];
   const totalCredits = balance.available + balance.used;
   const usagePercent = totalCredits > 0 ? balance.used / totalCredits * 100 : 0;
   const sortedModels = Object.entries(usage.byModel).sort(
@@ -140,14 +140,14 @@ function BillingDashboard({
     /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(CreditCardIcon, { className: colors.accent }),
+          /* @__PURE__ */ jsx(CreditCardIcon, { className: colors2.accent }),
           "Current Plan"
         ] }),
         subscription && /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
       ] }) }),
       /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-2xl", colors.accent), children: subscription.tierName }),
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-2xl", colors2.accent), children: subscription.tierName }),
           /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
             "Renews ",
             formatDate(subscription.renewsAt)
@@ -181,7 +181,7 @@ function BillingDashboard({
     /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(CoinsIcon, { className: colors.accent }),
+          /* @__PURE__ */ jsx(CoinsIcon, { className: colors2.accent }),
           "Credit Balance"
         ] }),
         /* @__PURE__ */ jsxs(CardDescription, { children: [
@@ -198,7 +198,7 @@ function BillingDashboard({
           /* @__PURE__ */ jsx(Progress, { value: usagePercent, variant, className: "h-3" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Available" }),
-            /* @__PURE__ */ jsx("span", { className: cn("font-medium", colors.accent), children: formatCredits(balance.available) })
+            /* @__PURE__ */ jsx("span", { className: cn("font-medium", colors2.accent), children: formatCredits(balance.available) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
@@ -207,7 +207,7 @@ function BillingDashboard({
     /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(ChartIcon, { className: colors.accent }),
+          /* @__PURE__ */ jsx(ChartIcon, { className: colors2.accent }),
           "Usage Breakdown"
         ] }),
         /* @__PURE__ */ jsx(CardDescription, { children: usage.period })
@@ -215,7 +215,7 @@ function BillingDashboard({
       /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
-          /* @__PURE__ */ jsx("span", { className: cn("font-bold text-2xl", colors.accent), children: formatCredits(usage.total) })
+          /* @__PURE__ */ jsx("span", { className: cn("font-bold text-2xl", colors2.accent), children: formatCredits(usage.total) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
@@ -232,7 +232,7 @@ function BillingDashboard({
                   {
                     className: cn(
                       "h-full rounded-full transition-all",
-                      variant === "sandbox" && colors.progress
+                      variant === "sandbox" && colors2.progress
                     ),
                     style: { width: `${modelPercent}%` }
                   }
@@ -303,7 +303,7 @@ function PricingPage({
   className,
   cardClassName
 }) {
-  const colors = variantColors2[variant];
+  const colors2 = variantColors2[variant];
   return /* @__PURE__ */ jsxs2("div", { className: cn("w-full space-y-8", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-center gap-4", children: [
       /* @__PURE__ */ jsx2(
@@ -313,7 +313,7 @@ function PricingPage({
           onClick: () => onBillingPeriodChange("monthly"),
           className: cn(
             "rounded-lg px-4 py-2 font-medium text-sm transition-all",
-            billingPeriod === "monthly" ? cn("bg-muted text-foreground", colors.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+            billingPeriod === "monthly" ? cn("bg-muted text-foreground", colors2.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
           ),
           children: "Monthly"
         }
@@ -325,11 +325,11 @@ function PricingPage({
           onClick: () => onBillingPeriodChange("yearly"),
           className: cn(
             "rounded-lg px-4 py-2 font-medium text-sm transition-all",
-            billingPeriod === "yearly" ? cn("bg-muted text-foreground", colors.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+            billingPeriod === "yearly" ? cn("bg-muted text-foreground", colors2.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
           ),
           children: [
             "Yearly",
-            /* @__PURE__ */ jsx2("span", { className: cn("ml-2 text-xs", colors.accent), children: "Save 20%" })
+            /* @__PURE__ */ jsx2("span", { className: cn("ml-2 text-xs", colors2.accent), children: "Save 20%" })
           ]
         }
       )
@@ -345,9 +345,9 @@ function PricingPage({
           className: cn(
             "relative flex flex-col",
             cardClassName,
-            tier.recommended && cn(colors.border, "border-2 ring-2", colors.ring),
+            tier.recommended && cn(colors2.border, "border-2 ring-2", colors2.ring),
             isCurrentTier && "ring-2 ring-offset-2 ring-offset-background",
-            isCurrentTier && colors.ring
+            isCurrentTier && colors2.ring
           ),
           children: [
             tier.recommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2(Badge, { variant, children: "Recommended" }) }),
@@ -359,7 +359,7 @@ function PricingPage({
             /* @__PURE__ */ jsxs2(CardContent, { className: "flex-1 space-y-6", children: [
               /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
                 /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-center gap-1", children: [
-                  /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-4xl", colors.accent), children: formatPrice(displayPrice) }),
+                  /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-4xl", colors2.accent), children: formatPrice(displayPrice) }),
                   /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "/mo" })
                 ] }),
                 billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-muted-foreground text-sm", children: [
@@ -367,8 +367,8 @@ function PricingPage({
                   " billed annually"
                 ] })
               ] }),
-              tier.creditsPerMonth !== void 0 && /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg p-3 text-center", colors.bg), children: [
-                /* @__PURE__ */ jsx2("span", { className: cn("font-semibold", colors.accent), children: tier.creditsPerMonth.toLocaleString() }),
+              tier.creditsPerMonth !== void 0 && /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg p-3 text-center", colors2.bg), children: [
+                /* @__PURE__ */ jsx2("span", { className: cn("font-semibold", colors2.accent), children: tier.creditsPerMonth.toLocaleString() }),
                 /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground text-sm", children: [
                   " ",
                   "credits/month"
@@ -378,7 +378,7 @@ function PricingPage({
                 /* @__PURE__ */ jsx2(
                   CheckIcon,
                   {
-                    className: cn("mt-0.5 shrink-0", colors.accent)
+                    className: cn("mt-0.5 shrink-0", colors2.accent)
                   }
                 ),
                 /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: feature })
@@ -406,27 +406,10 @@ function PricingPage({
 // src/dashboard/usage-chart.tsx
 import * as React from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var variantColors3 = {
-  agentrun: {
-    bar: "bg-gradient-to-t from-blue-600 to-blue-400",
-    barHover: "hover:from-blue-500 hover:to-blue-300",
-    text: "text-blue-400"
-  },
-  automateai: {
-    bar: "bg-[image:linear-gradient(to_top,var(--brand-purple),var(--brand-cool))]",
-    barHover: "hover:brightness-110",
-    text: "text-[var(--brand-purple)]"
-  },
-  tradingbots: {
-    bar: "bg-gradient-to-t from-green-600 to-green-400",
-    barHover: "hover:from-green-500 hover:to-green-300",
-    text: "text-green-400"
-  },
-  sandbox: {
-    bar: "bg-[image:var(--accent-gradient-strong)]",
-    barHover: "hover:brightness-110",
-    text: "text-[var(--accent-text)]"
-  }
+var colors = {
+  bar: "bg-[image:var(--accent-gradient-strong)]",
+  barHover: "hover:brightness-110",
+  text: "text-[var(--accent-text)]"
 };
 function formatDate2(dateStr) {
   const date = new Date(dateStr);
@@ -441,14 +424,7 @@ function formatValue(value) {
   }
   return value.toLocaleString();
 }
-function UsageChart({
-  data,
-  title,
-  unit,
-  variant = "agentrun",
-  className
-}) {
-  const colors = variantColors3[variant];
+function UsageChart({ data, title, unit, className }) {
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const total = data.reduce((sum, d) => sum + d.value, 0);
   const [hoveredIndex, setHoveredIndex] = React.useState(null);

package/dist/chunk-5CEMHKBP.js

@@ -0,0 +1,72 @@
+import {
+  Markdown
+} from "./chunk-H5XYSFYE.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/chat/chat-message.tsx
+import { User, Bot } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChatMessage({
+  role,
+  content,
+  toolCalls,
+  isStreaming,
+  timestamp,
+  className
+}) {
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-3",
+        isUser ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
+              isUser ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--brand-cool)]"
+            ),
+            children: isUser ? /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "min-w-0 max-w-[85%] space-y-1.5 rounded-[var(--radius-xl)] border px-4 py-3",
+              isUser ? "border-[var(--border-accent)] bg-[var(--depth-3)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", isUser && "flex-row-reverse"), children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-secondary)]", children: isUser ? "You" : "Agent" }),
+                timestamp && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--text-muted)]", children: formatTime(timestamp) })
+              ] }),
+              isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-7 text-[var(--text-primary)]", children: content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                content && /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose text-[15px] leading-7", children: content }),
+                isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })
+              ] }),
+              toolCalls
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+
+export {
+  ChatMessage
+};

package/dist/{chunk-FOQTE67I.js → chunk-5F4NX5R2.js}

@@ -1,6 +1,6 @@
 import {
   parseToolEvent
-} from "./chunk-CCKNIAS7.js";
+} from "./chunk-XBR3IP7B.js";
 import {
   bumpActiveSessionActivity,
   registerActiveSession,
@@ -1040,7 +1040,7 @@ function mapApiMessage(msg) {
 async function fetchJson(url, token, init) {
   const headers = { Authorization: `Bearer ${token}` };
   if (init?.body) headers["Content-Type"] = "application/json";
-  const res = await fetch(url, { ...init, headers: { ...headers, ...init?.headers } });
+  const res = await fetch(url, { ...init, headers: { ...headers, ...init?.headers }, credentials: "include" });
   if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
   return res.json();
 }
@@ -1057,6 +1057,7 @@ function useSessionStream({
   const [connected, setConnected] = useState5(false);
   const abortRef = useRef5(null);
   const streamingMsgIdRef = useRef5(null);
+  const handleSSEEventRef = useRef5(null);
   const refetch = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -1087,7 +1088,8 @@ function useSessionStream({
       const url = `${apiUrl}/session/events?sessionId=${encodeURIComponent(sessionId)}`;
       const res = await fetch(url, {
         headers: { Authorization: `Bearer ${token}` },
-        signal: controller.signal
+        signal: controller.signal,
+        credentials: "include"
       });
       if (!res.ok) throw new Error(`SSE connection failed: ${res.status}`);
       setConnected(true);
@@ -1120,7 +1122,7 @@ function useSessionStream({
           } catch {
             continue;
           }
-          handleSSEEvent(eventType, parsed);
+          handleSSEEventRef.current?.(eventType, parsed);
         }
       }
     } catch (err) {
@@ -1133,7 +1135,9 @@ function useSessionStream({
       }
     }
   }, [apiUrl, token, sessionId, enabled]);
-  const handleSSEEvent = useCallback4((type, props) => {
+  const handleSSEEvent = useCallback4((type, raw) => {
+    const envelope = raw?.properties;
+    const props = envelope?.info ?? envelope?.part ?? envelope ?? raw;
     if (type === "message.updated") {
       const id = props.id ?? props.messageId ?? "";
       const role = props.role ?? "assistant";
@@ -1219,6 +1223,7 @@ function useSessionStream({
       refetch();
     }
   }, [refetch]);
+  handleSSEEventRef.current = handleSSEEvent;
   const send = useCallback4(async (text) => {
     if (!token || !sessionId || !apiUrl) return;
     try {