@tangle-network/sandbox-ui 0.4.0 → 0.5.0

package/dist/primitives.js

@@ -22,7 +22,7 @@ import {
   ToastProvider,
   UploadProgress,
   useToast
-} from "./chunk-SSKVYXCR.js";
+} from "./chunk-DCPYTL4W.js";
 import {
   Dialog,
   DialogClose,
@@ -34,7 +34,7 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger
-} from "./chunk-SULQQJPB.js";
+} from "./chunk-YS66Q3RC.js";
 import {
   Tabs,
   TabsContent,
@@ -45,7 +45,7 @@ import {
   EmptyState,
   Input,
   Textarea
-} from "./chunk-MUOL44AE.js";
+} from "./chunk-BRBTD7RH.js";
 import {
   Table,
   TableBody,
@@ -55,7 +55,7 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "./chunk-TQN3VR4F.js";
+} from "./chunk-JP725R4W.js";
 import {
   Logo,
   TangleKnot
@@ -79,13 +79,13 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
-} from "./chunk-IW2JZCOC.js";
+} from "./chunk-WBQ7VULC.js";
 import {
   Progress,
   Skeleton,
   SkeletonCard,
   SkeletonTable
-} from "./chunk-FRGMMANX.js";
+} from "./chunk-YYGECNZZ.js";
 import {
   Badge,
   Card,
@@ -95,11 +95,11 @@ import {
   CardHeader,
   CardTitle,
   badgeVariants
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   Button,
   buttonVariants
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.js";
 import "./chunk-RQHJBTEU.js";
 export {
   Avatar,

package/dist/run.d.ts

@@ -1,6 +1,6 @@
 export { E as ExpandedToolDetail, a as ExpandedToolDetailProps, I as InlineThinkingItem, b as InlineThinkingItemProps, c as InlineToolItem, d as InlineToolItemProps, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-DM5M_T9h.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-D5Ume-Pt.js';
+export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
 import 'react';
 import './run-CtFZ6s-D.js';
 import './parts-CyGkM6Fp.js';

package/dist/run.js

@@ -1,21 +1,21 @@
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-CCKNIAS7.js";
+} from "./chunk-XBR3IP7B.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-72UEKFZ2.js";
+} from "./chunk-WC7QTWPN.js";
 import "./chunk-HRMUF35V.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-CJ2RYVZH.js";
+} from "./chunk-NTSRY4GW.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-LTFK464G.js";
+import "./chunk-H5XYSFYE.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ExpandedToolDetail,

package/dist/sdk-hooks.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from 'react';
 import { G as GroupedMessage, R as Run } from './run-CtFZ6s-D.js';
 import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
 import { R as RegisterActiveSessionOptions, g as ActiveSessionTransportMode, c as ActiveSessionConnectionState } from './active-sessions-store-CeOmXgv5.js';
-import { F as FeedSegment } from './tool-call-feed-D5Ume-Pt.js';
+import { F as FeedSegment } from './tool-call-feed-Bs3MyQMT.js';
 import 'nanostores';
 import 'react/jsx-runtime';
 

package/dist/sdk-hooks.js

@@ -7,17 +7,17 @@ import {
   useSessionStream,
   useSidecarAuth,
   useToolCallStream
-} from "./chunk-FOQTE67I.js";
-import "./chunk-CCKNIAS7.js";
+} from "./chunk-5F4NX5R2.js";
+import "./chunk-XBR3IP7B.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-CNWVHQFY.js";
-import "./chunk-CJ2RYVZH.js";
+import "./chunk-NTSRY4GW.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-LTFK464G.js";
+import "./chunk-H5XYSFYE.js";
 import "./chunk-RQHJBTEU.js";
 export {
   RealtimeSessionRegistry,

package/dist/styles.css

@@ -1,8 +1,9 @@
 @import "./tokens.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Geist (UI) + Geist Mono (code) + Outfit (display) — via Google Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap");
+
+@import "tailwindcss";
 
 @layer base {
   :root {
@@ -15,31 +16,39 @@
   }
 
   body {
-    @apply antialiased;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: var(--font-sans);
     font-feature-settings:
       "rlig" 1,
-      "calt" 1;
+      "calt" 1,
+      "ss01" 1;
+  }
+
+  ::selection {
+    background: rgba(56, 178, 172, 0.22);
+    color: hsl(var(--hsl-foreground));
   }
 
   /* Custom scrollbar */
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    background: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-border rounded-full;
+    background: hsl(var(--border) / 0.7);
+    border-radius: 3px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-muted-foreground/50;
+    background: hsl(var(--muted-foreground) / 0.4);
   }
 }
 
@@ -47,30 +56,109 @@
   /* Gradient text -- Tangle default accent */
   .text-gradient-sandbox {
     background-image: var(--tangle-gradient);
-    @apply bg-clip-text text-transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
   }
 
   /* Glow effects */
   .glow-sandbox {
-    box-shadow: 0 0 40px -10px hsl(var(--sandbox) / 0.4);
+    box-shadow: 0 0 48px -10px hsl(var(--sandbox) / 0.45);
+  }
+
+  /* Solid depth cards */
+  .glass-card {
+    background: var(--depth-2);
+    border: 1px solid var(--border-subtle);
+    transition: border-color var(--transition-default), box-shadow var(--transition-default);
   }
 
-  /* Glass effect */
+  .glass-card:hover {
+    border-color: var(--border-default);
+  }
+
+  .glass-card-strong {
+    background: var(--depth-3);
+    border: 1px solid var(--border-subtle);
+  }
+
+  /* Legacy alias */
   .glass {
-    backdrop-filter: blur(24px);
-    background-color: hsl(var(--card) / 0.8);
-    border: 1px solid hsl(var(--border) / 0.5);
+    background-color: var(--depth-2);
+    border: 1px solid var(--border-subtle);
+  }
+
+  /* Atmospheric mesh gradient background */
+  .bg-mesh {
+    position: relative;
+  }
+
+  .bg-mesh::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 80% 50% at 20% 40%, var(--mesh-teal), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 20%, var(--mesh-violet), transparent),
+      radial-gradient(ellipse 50% 60% at 50% 80%, var(--mesh-blue), transparent);
+    pointer-events: none;
+    z-index: 0;
   }
 
   /* Subtle noise texture */
   .noise {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-    opacity: 0.02;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
+    pointer-events: none;
+  }
+
+  /* Status dots — operational state indicators */
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .status-dot-running {
+    background: var(--status-running);
+    box-shadow: var(--shadow-status-running);
+  }
+
+  .status-dot-creating {
+    background: var(--status-creating);
+    animation: status-pulse 2s ease-in-out infinite;
+  }
+
+  .status-dot-stopped {
+    background: var(--status-stopped);
+  }
+
+  .status-dot-warm {
+    background: var(--status-warm);
+  }
+
+  .status-dot-cold {
+    background: var(--status-cold);
+  }
+
+  .status-dot-error {
+    background: var(--status-error);
+    box-shadow: var(--shadow-status-error);
+  }
+
+  .status-dot-deleted {
+    background: var(--status-deleted);
+    opacity: 0.6;
   }
 
-  /* Terminal styling */
+  /* Terminal cursor */
   .terminal-cursor {
-    @apply inline-block w-2 h-5 bg-foreground animate-pulse;
+    display: inline-block;
+    width: 0.5rem;
+    height: 1.25rem;
+    background-color: hsl(var(--foreground));
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   /* Shimmer animation */
@@ -85,95 +173,41 @@
     animation: shimmer 2s infinite;
   }
 
-  @keyframes shimmer {
-    0% {
-      background-position: -200% 0;
-    }
-    100% {
-      background-position: 200% 0;
-    }
-  }
-
   /* Fade in animation */
   .animate-in {
-    animation: fade-in 0.3s ease-out;
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    animation: fade-in 0.25s ease-out;
   }
 
   /* Pulse ring animation */
   .pulse-ring {
-    @apply relative;
+    position: relative;
   }
 
   .pulse-ring::before {
     content: "";
-    @apply absolute inset-0 rounded-full;
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
     animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
   @keyframes pulse-ring {
-    0%,
-    100% {
-      box-shadow: 0 0 0 0 currentColor;
-      opacity: 0.4;
-    }
-    50% {
-      box-shadow: 0 0 0 8px currentColor;
-      opacity: 0;
-    }
+    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 0.4; }
+    50% { box-shadow: 0 0 0 8px currentColor; opacity: 0; }
   }
-}
 
-/* Fonts -- Inter (UI) + JetBrains Mono (code). */
-@font-face {
-  font-family: "Inter";
-  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI2fAZ9hiA.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter";
-  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hiA.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOV.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+  @keyframes status-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
 }

package/dist/terminal.d.ts

@@ -35,10 +35,10 @@ interface TerminalViewProps {
     title?: string;
     /** Subtitle shown in the welcome box. Default: "Connected to PTY session". */
     subtitle?: string;
-    /** ANSI-escaped prompt string. Default: green "$ ". */
+    /** @deprecated No longer used — the PTY provides its own prompt. */
     prompt?: string;
 }
 declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
-declare function TerminalView({ apiUrl, token, theme, title, subtitle, prompt, }: TerminalViewProps): react_jsx_runtime.JSX.Element;
+declare function TerminalView({ apiUrl, token, theme, title, subtitle, }: TerminalViewProps): react_jsx_runtime.JSX.Element;
 
 export { DEFAULT_TERMINAL_THEME, type TerminalTheme, TerminalView, type TerminalViewProps };

package/dist/terminal.js

@@ -1,6 +1,6 @@
 import {
   usePtySession
-} from "./chunk-GRYHFH5O.js";
+} from "./chunk-DLCFZDGX.js";
 
 // src/terminal/terminal-view.tsx
 import "@xterm/xterm/css/xterm.css";
@@ -33,23 +33,17 @@ var DEFAULT_TERMINAL_THEME = {
   brightCyan: "#67e8f9",
   brightWhite: "#fafafa"
 };
-var DEFAULT_PROMPT = "\x1B[38;5;48m$\x1B[0m ";
 function TerminalView({
   apiUrl,
   token,
   theme,
   title = "Terminal",
-  subtitle = "Connected to PTY session",
-  prompt = DEFAULT_PROMPT
+  subtitle = "Connected to PTY session"
 }) {
   const resolvedTheme = { ...DEFAULT_TERMINAL_THEME, ...theme };
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitAddonRef = useRef(null);
-  const lineBufferRef = useRef("");
-  const writePrompt = useCallback(() => {
-    termRef.current?.write("\r\n" + prompt);
-  }, [prompt]);
   const onData = useCallback((data) => {
     termRef.current?.write(data);
   }, []);
@@ -87,37 +81,13 @@ function TerminalView({
     term.writeln(`\x1B[38;5;48m\u2502\x1B[0m  \x1B[1m${padTitle}\x1B[0m\x1B[38;5;48m\u2502\x1B[0m`);
     term.writeln(`\x1B[38;5;48m\u2502\x1B[0m  ${padSubtitle}\x1B[38;5;48m\u2502\x1B[0m`);
     term.writeln(`\x1B[38;5;48m\u2570${"\u2500".repeat(41)}\u256F\x1B[0m`);
-    term.write(prompt);
     term.onData((data) => {
-      const code = data.charCodeAt(0);
-      if (data === "\r") {
-        const cmd = lineBufferRef.current;
-        lineBufferRef.current = "";
-        term.write("\r\n");
-        if (cmd.trim()) {
-          sendCommand(cmd).catch((err) => {
-            term.writeln(`\x1B[31mError: ${err instanceof Error ? err.message : String(err)}\x1B[0m`);
-            writePrompt();
-          });
-        } else {
-          term.write(prompt);
-        }
-      } else if (data === "\x7F" || data === "\b") {
-        if (lineBufferRef.current.length > 0) {
-          lineBufferRef.current = lineBufferRef.current.slice(0, -1);
-          term.write("\b \b");
-        }
-      } else if (data === "") {
-        lineBufferRef.current = "";
-        term.write("^C");
-        writePrompt();
-      } else if (data === "\f") {
-        term.clear();
-        term.write(prompt);
-      } else if (code >= 32) {
-        lineBufferRef.current += data;
-        term.write(data);
-      }
+      sendCommand(data).catch((err) => {
+        termRef.current?.writeln(
+          `\r
+\x1B[31m${err instanceof Error ? err.message : "Send failed"}\x1B[0m`
+        );
+      });
     });
     const ro = new ResizeObserver(() => {
       requestAnimationFrame(() => {
@@ -131,7 +101,7 @@ function TerminalView({
       termRef.current = null;
       fitAddonRef.current = null;
     };
-  }, [sendCommand, writePrompt, prompt, resolvedTheme, title, subtitle]);
+  }, [sendCommand, resolvedTheme, title, subtitle]);
   return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -141,17 +111,17 @@ function TerminalView({
         style: { backgroundColor: resolvedTheme.background }
       }
     ),
-    (!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-400 mb-3", children: error }),
+    (!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[var(--depth-1)] rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--surface-danger-text)] mb-3", children: error }),
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: reconnect,
-          className: "text-sm text-emerald-400 hover:text-emerald-300 underline cursor-pointer",
+          className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
           children: "Retry connection"
         }
       )
-    ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-400", children: "Connecting to terminal..." }) }) })
+    ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: "Connecting to terminal..." }) }) })
   ] });
 }
 export {