@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/README.md

@@ -133,16 +133,15 @@ There is a built-in Tangle default theme, but consumers can restyle the library
 
 `WorkspaceLayout` and `SandboxWorkbench` support:
 
-- `theme="operator"`
-- `theme="builder"`
-- `theme="consumer"`
+- `theme="vault"` — light theme with solid surfaces
+- No theme prop — default dark theme
 
 They also support `density="comfortable"` and `density="compact"`.
 
 ```tsx
 <SandboxWorkbench
   layout={{
-    theme: "consumer",
+    theme: "vault",
     density: "comfortable",
   }}
   session={{ ... }}
@@ -152,7 +151,7 @@ They also support `density="comfortable"` and `density="compact"`.
 If you are not using `SandboxWorkbench`, you can set the same attributes yourself:
 
 ```tsx
-<div data-sandbox-ui data-sandbox-theme="consumer" data-density="compact">
+<div data-sandbox-ui data-sandbox-theme="vault" data-density="compact">
   <YourSandboxApp />
 </div>
 ```
@@ -257,7 +256,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 - [Tailwind CSS](https://tailwindcss.com/) v4
 - [Lucide](https://lucide.dev/) icons
 - [CVA](https://cva.style/) for variant management
-- Shared semantic tokens for `operator`, `builder`, and `consumer` sandbox themes
+- Shared semantic tokens for default dark and `vault` light sandbox themes
 - ESM-only, tree-shakeable, fully typed
 
 ## License

package/dist/auth.d.ts

@@ -54,17 +54,21 @@ interface AuthHeaderProps {
 declare function AuthHeader({ user, loading, variant, apiBaseUrl, menuLinks, className, }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface LoginLayoutProps {
-    brandName?: string;
-    tagline?: React.ReactNode;
-    subtitle?: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    brandIcon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    /** (Deprecated) terminal lines from legacy layout, kept for backwards compatibility */
     terminalLines?: string[];
+    /** (Deprecated) tagline, kept for backwards compatibility */
+    tagline?: React.ReactNode;
+    /** (Deprecated) footerLinks, kept for backwards compatibility */
     footerLinks?: {
         label: string;
         href: string;
     }[];
-    children: React.ReactNode;
-    className?: string;
 }
-declare function LoginLayout({ brandName, tagline, subtitle, terminalLines, footerLinks, children, className, }: LoginLayoutProps): react_jsx_runtime.JSX.Element;
+declare function LoginLayout({ title, subtitle, brandIcon, children, className, }: LoginLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { AuthHeader, type AuthHeaderProps, GitHubLoginButton, type GitHubLoginButtonProps, LoginLayout, type LoginLayoutProps, type SessionUser, UserMenu, type UserMenuProps };

package/dist/auth.js

@@ -3,9 +3,9 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-XTPAWK7L.js";
-import "./chunk-WBQ7VULC.js";
-import "./chunk-TSE423UF.js";
+} from "./chunk-DI3NZ5ZX.js";
+import "./chunk-34A66VBG.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AuthHeader,

package/dist/{chat-container-Cg-GwyiK.d.ts → chat-container-f4yEs6KN.d.ts}

@@ -50,8 +50,16 @@ interface ChatInputProps {
     /** Drop zone overlay description */
     dropDescription?: string;
     className?: string;
+    /** Label above the input. Set to null to hide. Default: "Agent Command Deck" */
+    inputLabel?: string | null;
+    /** Status text shown when idle. Set to null to hide. Default: "Ready for next instruction" */
+    idleStatus?: string | null;
+    /** Status text shown when streaming. Set to null to hide. Default: "Streaming response" */
+    streamingStatus?: string | null;
+    /** Hide the Cmd+L focus shortcut hint */
+    hideShortcutHint?: boolean;
 }
-declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, inputLabel, idleStatus, streamingStatus, hideShortcutHint, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 
 interface ChatContainerProps {
     messages: SessionMessage[];

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-Cg-GwyiK.js';
+export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-f4yEs6KN.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -20,8 +20,18 @@ interface ChatMessageProps {
     /** Timestamp */
     timestamp?: Date;
     className?: string;
+    /** Custom user label. Default: "You" */
+    userLabel?: string;
+    /** Custom assistant label. Default: "Agent" */
+    assistantLabel?: string;
+    /** Hide the role label row entirely */
+    hideRoleLabel?: boolean;
+    /** Hide the avatar icon */
+    hideAvatar?: boolean;
+    /** Custom avatar element (replaces default User/Bot icon) */
+    avatar?: ReactNode;
 }
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, hideAvatar, avatar, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
 interface MessageListProps {
     groups: GroupedMessage[];

package/dist/chat.js

@@ -1,6 +1,6 @@
 import {
   ChatMessage
-} from "./chunk-GW4GRAWJ.js";
+} from "./chunk-GSZA3TSY.js";
 import {
   AgentTimeline,
   ChatContainer,
@@ -8,17 +8,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKXIRRKQ.js";
-import "./chunk-CNWVHQFY.js";
-import "./chunk-ZMWWE5RF.js";
+} from "./chunk-JLKYXLFN.js";
+import "./chunk-54SQQMMM.js";
+import "./chunk-EXSOPXIY.js";
 import "./chunk-HRMUF35V.js";
-import "./chunk-MJUDMVRU.js";
+import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-OVNLOE3Y.js";
-import "./chunk-JP725R4W.js";
-import "./chunk-3HW53XTH.js";
-import "./chunk-TDYQBLL5.js";
-import "./chunk-TSE423UF.js";
+import "./chunk-PLTZB5BC.js";
+import "./chunk-34I7UFSX.js";
+import "./chunk-T7HMZEVO.js";
+import "./chunk-ZMNSRDMH.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-WBQ7VULC.js → chunk-34A66VBG.js}

@@ -57,7 +57,7 @@ var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ..
     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-[var(--depth-3)]",
+      "focus:bg-accent data-[state=open]:bg-muted/50",
       inset && "pl-8",
       className
     ),
@@ -74,7 +74,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
+      "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",
@@ -92,7 +92,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
+      "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",
@@ -110,7 +110,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) =
     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-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -125,7 +125,7 @@ var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked
     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-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -144,7 +144,7 @@ var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }
     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-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -173,7 +173,7 @@ var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
+    className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));

package/dist/{chunk-JP725R4W.js → chunk-34I7UFSX.js}

@@ -30,7 +30,7 @@ var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "border-t bg-[var(--depth-2)] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-card font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -42,7 +42,7 @@ var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   {
     ref,
     className: cn(
-      "border-border border-b transition-colors hover:bg-[var(--depth-3)] data-[state=selected]:bg-[var(--depth-3)]",
+      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50",
       className
     ),
     ...props

package/dist/{chunk-CNWVHQFY.js → chunk-54SQQMMM.js}

@@ -91,26 +91,9 @@ function useRunGroups({
 }
 
 // src/hooks/use-run-collapse-state.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-var AUTO_COLLAPSE_DELAY = 1e3;
+import { useCallback, useState } from "react";
 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;
@@ -118,7 +101,6 @@ function useRunCollapseState(runs) {
     [collapsedMap]
   );
   const toggleCollapse = useCallback((runId) => {
-    userOverrides.current.add(runId);
     setCollapsedMap((prev) => ({ ...prev, [runId]: !prev[runId] }));
   }, []);
   return { isCollapsed, toggleCollapse };
@@ -127,20 +109,20 @@ function useRunCollapseState(runs) {
 // src/hooks/use-auto-scroll.ts
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
-  useRef as useRef2,
+  useEffect,
+  useRef,
   useState as useState2
 } from "react";
 var BOTTOM_THRESHOLD = 40;
 function useAutoScroll(containerRef, deps = []) {
   const [isAtBottom, setIsAtBottom] = useState2(true);
-  const userScrolledUp = useRef2(false);
+  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]);
-  useEffect2(() => {
+  useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const onScroll = () => {
@@ -151,7 +133,7 @@ function useAutoScroll(containerRef, deps = []) {
     el.addEventListener("scroll", onScroll, { passive: true });
     return () => el.removeEventListener("scroll", onScroll);
   }, [containerRef, checkBottom]);
-  useEffect2(() => {
+  useEffect(() => {
     if (userScrolledUp.current) return;
     const el = containerRef.current;
     if (!el) return;

package/dist/{chunk-DLCFZDGX.js → chunk-5UM2XMEJ.js}

@@ -9,7 +9,6 @@ function usePtySession({ apiUrl, token, onData }) {
   const retryCountRef = useRef(0);
   const mountedRef = useRef(true);
   const onDataRef = useRef(onData);
-  onDataRef.current = onData;
   const connectStreamRef = useRef(null);
   const abortStream = useCallback(() => {
     if (retryTimerRef.current) {
@@ -117,6 +116,7 @@ function usePtySession({ apiUrl, token, onData }) {
       }
     }
   }, [apiUrl, token, abortStream]);
+  onDataRef.current = onData;
   connectStreamRef.current = connectStream;
   const connect = useCallback(async () => {
     cleanup();
@@ -149,21 +149,46 @@ function usePtySession({ apiUrl, token, onData }) {
       }
     }
   }, [apiUrl, token, cleanup, connectStream]);
+  const resizeTerminal = useCallback(async (cols, rows) => {
+    const sid = sessionIdRef.current;
+    if (!sid || cols <= 0 || rows <= 0) return;
+    try {
+      const res = await fetch(`${apiUrl}/terminals/${sid}`, {
+        method: "PATCH",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({ cols, rows })
+      });
+      if (!res.ok) {
+        console.error("Failed to resize terminal:", res.status);
+      }
+    } catch (err) {
+      console.error("Failed to resize terminal", err);
+    }
+  }, [apiUrl, token]);
   const sendCommand = useCallback(async (command) => {
     const sid = sessionIdRef.current;
     if (!sid) return;
-    const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json"
-      },
-      credentials: "include",
-      body: JSON.stringify({ data: command })
-    });
-    if (!res.ok) {
-      const text = await res.text();
-      throw new Error(text || `Input failed: ${res.status}`);
+    try {
+      const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({ data: command })
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `Input failed: ${res.status}`);
+      }
+    } catch (err) {
+      console.error("Failed to send command", err);
+      throw err;
     }
   }, [apiUrl, token]);
   useEffect(() => {
@@ -174,7 +199,7 @@ function usePtySession({ apiUrl, token, onData }) {
       cleanup();
     };
   }, [connect, cleanup]);
-  return { isConnected, error, sendCommand, reconnect: connect };
+  return { isConnected, error, sendCommand, resizeTerminal, reconnect: connect };
 }
 
 export {

package/dist/{chunk-YYGECNZZ.js → chunk-66EZOYZR.js}

@@ -52,7 +52,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: cn("animate-pulse rounded-lg bg-[var(--depth-3)]", className),
+      className: cn("animate-pulse rounded-lg bg-muted/50", className),
       ...props
     }
   );
@@ -62,7 +62,7 @@ function SkeletonCard({ className }) {
     "div",
     {
       className: cn(
-        "space-y-4 rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-card)] p-6",
+        "space-y-4 rounded-xl border border-border bg-card p-6",
         className
       ),
       children: [
@@ -79,7 +79,7 @@ function SkeletonCard({ className }) {
 }
 function SkeletonTable({ rows = 5 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-[var(--border-subtle)] border-b pb-2", 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" }),