@tangle-network/sandbox-ui 0.10.7 → 0.10.8

package/dist/chat.js

@@ -8,10 +8,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-WKSGQVLI.js";
+} from "./chunk-XLG757B6.js";
 import "./chunk-54SQQMMM.js";
-import "./chunk-QOL4ZB24.js";
-import "./chunk-HRMUF35V.js";
+import "./chunk-MQXABZTB.js";
+import "./chunk-4CLN43XT.js";
 import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-ZNCEM5CD.js";

package/dist/chunk-4CLN43XT.js

@@ -0,0 +1,45 @@
+// src/utils/format.ts
+function formatDuration(ms) {
+  if (ms < 1e3) return "<1s";
+  const seconds = Math.floor(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
+}
+function truncateText(text, max) {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= max) return cleaned;
+  return cleaned.slice(0, max).trim() + "...";
+}
+function formatUptime(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const totalSeconds = Math.floor(ms / 1e3);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return `${minutes}m ${seconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  if (hours < 24) return `${hours}h ${remMinutes}m`;
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  return `${days}d ${remHours}h`;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
+  const gb = mb / 1024;
+  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
+}
+
+export {
+  formatDuration,
+  truncateText,
+  formatUptime,
+  formatBytes
+};

package/dist/{chunk-HEXQVHXJ.js → chunk-5OQ27N57.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-MA7YKRUP.js";
 import {
   ChatContainer
-} from "./chunk-WKSGQVLI.js";
+} from "./chunk-XLG757B6.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-ZNCEM5CD.js";

package/dist/chunk-DPGIXDAI.js

@@ -0,0 +1,220 @@
+// 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 retryTimerRef = React.useRef(null);
+  const abortRef = React.useRef(null);
+  const fetchSession = React.useCallback(async () => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${apiBaseUrl}/auth/session`, {
+        credentials: "include",
+        signal: controller.signal
+      });
+      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) {
+      if (err.name === "AbortError") return;
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+      setUser(null);
+      if (shouldRetryOnError) {
+        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+        retryTimerRef.current = setTimeout(fetchSession, 5e3);
+      }
+    } finally {
+      if (!controller.signal.aborted) {
+        setIsLoading(false);
+      }
+    }
+  }, [apiBaseUrl, shouldRetryOnError]);
+  React.useEffect(() => {
+    fetchSession();
+    return () => {
+      abortRef.current?.abort();
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, [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;
+}
+
+// src/hooks/use-live-time.ts
+import * as React2 from "react";
+function useLiveTime(intervalMs = 1e3) {
+  const [now, setNow] = React2.useState(() => Date.now());
+  React2.useEffect(() => {
+    const requested = Number.isFinite(intervalMs) && intervalMs > 0 ? intervalMs : 1e3;
+    const delay = Math.max(requested, 100);
+    const id = window.setInterval(() => {
+      setNow(Date.now());
+    }, delay);
+    return () => {
+      window.clearInterval(id);
+    };
+  }, [intervalMs]);
+  return now;
+}
+
+// src/hooks/use-sandbox-metrics.ts
+import * as React3 from "react";
+function useSandboxMetrics({
+  apiBaseUrl,
+  sandboxId,
+  token,
+  enabled = true,
+  intervalMs = 3e3
+}) {
+  const [metrics, setMetrics] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [lastUpdatedAt, setLastUpdatedAt] = React3.useState(null);
+  const sampleRef = React3.useRef(null);
+  const hasLoadedRef = React3.useRef(false);
+  const prevSandboxIdRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const sandboxCleared = !sandboxId || !apiBaseUrl;
+    const sandboxChanged = prevSandboxIdRef.current !== null && prevSandboxIdRef.current !== sandboxId;
+    if (sandboxCleared && prevSandboxIdRef.current !== null || sandboxChanged) {
+      sampleRef.current = null;
+      hasLoadedRef.current = false;
+      setMetrics(null);
+      setLastUpdatedAt(null);
+      setError(null);
+      if (sandboxCleared) setLoading(false);
+    }
+    prevSandboxIdRef.current = sandboxId ?? null;
+    if (!enabled || sandboxCleared) {
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    let timeoutId = null;
+    const delay = Math.max(intervalMs, 500);
+    const fetchOnce = async () => {
+      if (!hasLoadedRef.current) setLoading(true);
+      try {
+        const headers = {};
+        if (token) headers.Authorization = `Bearer ${token}`;
+        const res = await fetch(
+          `${apiBaseUrl}/v1/sidecar-proxy/${encodeURIComponent(sandboxId)}/metrics/json`,
+          {
+            method: "GET",
+            credentials: "include",
+            headers,
+            signal: controller.signal
+          }
+        );
+        if (!res.ok) {
+          throw new Error(`Metrics request failed (HTTP ${res.status})`);
+        }
+        const data = await res.json();
+        const user = data?.process?.cpuSeconds?.user ?? 0;
+        const system = data?.process?.cpuSeconds?.system ?? 0;
+        const cpuSeconds = user + system;
+        const wallMs = Date.now();
+        if (cancelled) return;
+        let cpuPercent = null;
+        const prev = sampleRef.current;
+        if (prev && prev.sandboxId === sandboxId) {
+          const dCpu = cpuSeconds - prev.cpuSeconds;
+          const dWallSec = (wallMs - prev.wallMs) / 1e3;
+          if (dWallSec > 0 && dCpu >= 0) {
+            cpuPercent = dCpu / dWallSec * 100;
+          }
+        }
+        sampleRef.current = { cpuSeconds, wallMs, sandboxId };
+        setMetrics({
+          cpuPercent,
+          rssBytes: data?.process?.memoryBytes?.rss ?? 0,
+          heapUsedBytes: data?.process?.memoryBytes?.heapUsed ?? 0,
+          heapTotalBytes: data?.process?.memoryBytes?.heapTotal ?? 0
+        });
+        setLastUpdatedAt(wallMs);
+        setError(null);
+        hasLoadedRef.current = true;
+        setLoading(false);
+      } catch (err) {
+        if (cancelled || err instanceof DOMException && err.name === "AbortError") {
+          return;
+        }
+        setError(err instanceof Error ? err : new Error(String(err)));
+        if (!hasLoadedRef.current) setLoading(false);
+      }
+    };
+    const runLoop = async () => {
+      if (cancelled) return;
+      await fetchOnce();
+      if (cancelled) return;
+      timeoutId = window.setTimeout(runLoop, delay);
+    };
+    runLoop();
+    return () => {
+      cancelled = true;
+      controller.abort();
+      if (timeoutId !== null) window.clearTimeout(timeoutId);
+    };
+  }, [apiBaseUrl, sandboxId, token, enabled, intervalMs]);
+  return { metrics, loading, error, lastUpdatedAt };
+}
+
+export {
+  useAuth,
+  createAuthFetcher,
+  useApiKey,
+  useLiveTime,
+  useSandboxMetrics
+};

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

@@ -1,5 +1,8 @@
 // src/hooks/use-pty-session.ts
 import { useState, useEffect, useRef, useCallback } from "react";
+function createEmptyBatch() {
+  return { data: "", waiters: [] };
+}
 function usePtySession({ apiUrl, token, onData }) {
   const [isConnected, setIsConnected] = useState(false);
   const [error, setError] = useState(null);
@@ -10,6 +13,20 @@ function usePtySession({ apiUrl, token, onData }) {
   const mountedRef = useRef(true);
   const onDataRef = useRef(onData);
   const connectStreamRef = useRef(null);
+  const pendingBatchRef = useRef(createEmptyBatch());
+  const drainPromiseRef = useRef(null);
+  const inputAbortRef = useRef(null);
+  const ensureDrainRunningRef = useRef(null);
+  const rejectPendingInput = useCallback((reason) => {
+    const batch = pendingBatchRef.current;
+    if (batch.waiters.length === 0) {
+      pendingBatchRef.current = createEmptyBatch();
+      return;
+    }
+    pendingBatchRef.current = createEmptyBatch();
+    const err = new Error(reason);
+    for (const w of batch.waiters) w.reject(err);
+  }, []);
   const abortStream = useCallback(() => {
     if (retryTimerRef.current) {
       clearTimeout(retryTimerRef.current);
@@ -22,6 +39,10 @@ function usePtySession({ apiUrl, token, onData }) {
   }, []);
   const cleanup = useCallback(() => {
     abortStream();
+    if (inputAbortRef.current) {
+      inputAbortRef.current.abort();
+      inputAbortRef.current = null;
+    }
     if (sessionIdRef.current) {
       const sid = sessionIdRef.current;
       sessionIdRef.current = null;
@@ -32,8 +53,9 @@ function usePtySession({ apiUrl, token, onData }) {
       }).catch(() => {
       });
     }
+    rejectPendingInput("Terminal session is not connected");
     setIsConnected(false);
-  }, [apiUrl, token, abortStream]);
+  }, [apiUrl, token, abortStream, rejectPendingInput]);
   const connectStream = useCallback(async (sessionId) => {
     abortStream();
     setError(null);
@@ -139,6 +161,8 @@ function usePtySession({ apiUrl, token, onData }) {
       if (!sessionId) throw new Error("No sessionId in response");
       if (!mountedRef.current) return;
       sessionIdRef.current = sessionId;
+      inputAbortRef.current = new AbortController();
+      ensureDrainRunningRef.current?.();
       await connectStream(sessionId);
     } catch (err) {
       if (err.name === "AbortError") return;
@@ -169,28 +193,61 @@ function usePtySession({ apiUrl, token, onData }) {
       console.error("Failed to resize terminal", err);
     }
   }, [apiUrl, token]);
-  const sendCommand = useCallback(async (command) => {
-    const sid = sessionIdRef.current;
-    if (!sid) return;
-    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}`);
+  const drainInputQueue = useCallback(async () => {
+    while (pendingBatchRef.current.data.length > 0) {
+      const sid = sessionIdRef.current;
+      if (!sid) {
+        return;
+      }
+      const batch = pendingBatchRef.current;
+      pendingBatchRef.current = createEmptyBatch();
+      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: batch.data }),
+          signal: inputAbortRef.current?.signal
+        });
+        if (!res.ok) {
+          const text = await res.text().catch(() => "");
+          throw new Error(text || `Input failed: ${res.status}`);
+        }
+        for (const w of batch.waiters) w.resolve();
+      } catch (err) {
+        const isAbort = err?.name === "AbortError";
+        const rejection = isAbort ? new Error("Terminal session is not connected") : err;
+        if (!isAbort) console.error("Failed to send command", err);
+        for (const w of batch.waiters) w.reject(rejection);
       }
-    } catch (err) {
-      console.error("Failed to send command", err);
-      throw err;
     }
   }, [apiUrl, token]);
+  const ensureDrainRunning = useCallback(() => {
+    if (drainPromiseRef.current) return;
+    const run = () => drainInputQueue().finally(() => {
+      if (pendingBatchRef.current.data.length > 0 && sessionIdRef.current) {
+        drainPromiseRef.current = run();
+      } else {
+        drainPromiseRef.current = null;
+      }
+    });
+    drainPromiseRef.current = run();
+  }, [drainInputQueue]);
+  ensureDrainRunningRef.current = ensureDrainRunning;
+  const sendCommand = useCallback((command) => {
+    return new Promise((resolve, reject) => {
+      if (command.length === 0) {
+        resolve();
+        return;
+      }
+      pendingBatchRef.current.data += command;
+      pendingBatchRef.current.waiters.push({ resolve, reject });
+      ensureDrainRunning();
+    });
+  }, [ensureDrainRunning]);
   useEffect(() => {
     mountedRef.current = true;
     connect();

package/dist/{chunk-QOL4ZB24.js → chunk-MQXABZTB.js}

@@ -1,7 +1,7 @@
 import {
   formatDuration,
   truncateText
-} from "./chunk-HRMUF35V.js";
+} from "./chunk-4CLN43XT.js";
 import {
   getToolCategory,
   getToolDisplayMetadata,

package/dist/{chunk-WKSGQVLI.js → chunk-XLG757B6.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QOL4ZB24.js";
+} from "./chunk-MQXABZTB.js";
 import {
   ToolCallGroup,
   ToolCallStep

package/dist/globals.css

@@ -661,6 +661,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -1464,6 +1467,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .caption-bottom {
     caption-side: bottom;
   }

package/dist/hooks.d.ts

@@ -1,4 +1,4 @@
-export { A as AuthUser, U as UseAuthOptions, a as UseAuthResult, b as UsePtySessionOptions, c as UsePtySessionReturn, d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-0AOuwXgq.js';
+export { A as AuthUser, S as SandboxMetrics, a as SidecarMetricsPayload, U as UseAuthOptions, b as UseAuthResult, c as UsePtySessionOptions, d as UsePtySessionReturn, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-B64diPqN.js';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SessionInfo, SidecarAuth, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { S as Session } from './sidecar-CFU2W9j1.js';

package/dist/hooks.js

@@ -1,11 +1,13 @@
 import {
   createAuthFetcher,
   useApiKey,
-  useAuth
-} from "./chunk-S7OXQTST.js";
+  useAuth,
+  useLiveTime,
+  useSandboxMetrics
+} from "./chunk-DPGIXDAI.js";
 import {
   usePtySession
-} from "./chunk-5UM2XMEJ.js";
+} from "./chunk-ESVYBDGA.js";
 import {
   RealtimeSessionRegistry,
   useDropdownMenu,
@@ -103,12 +105,14 @@ export {
   useCreateSession,
   useDeleteSession,
   useDropdownMenu,
+  useLiveTime,
   usePtySession,
   useRealtimeSession,
   useRenameSession,
   useRunCollapseState,
   useRunGroups,
   useSSEStream,
+  useSandboxMetrics,
   useSdkSession,
   useSessionStream,
   useSessions,

package/dist/index.d.ts

@@ -20,13 +20,13 @@ export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';
 export { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
-export { d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-0AOuwXgq.js';
+export { S as SandboxMetrics, a as SidecarMetricsPayload, e as UseSandboxMetricsOptions, f as UseSandboxMetricsResult, g as createAuthFetcher, u as useApiKey, h as useAuth, i as useLiveTime, j as usePtySession, k as useSandboxMetrics } from './use-sandbox-metrics-B64diPqN.js';
 export { G as GroupedMessage, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
 export { S as Session } from './sidecar-CFU2W9j1.js';
 export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
 export { A as AgentBranding } from './branding-DCi5VEik.js';
 export { A as ActiveProjectActivity, a as ActiveSessionActivityOptions, b as ActiveSessionConnectionOptions, c as ActiveSessionConnectionState, d as ActiveSessionReconnectState, e as ActiveSessionRecord, f as ActiveSessionStatus, g as ActiveSessionTransportMode, h as ActiveSessionsState, R as RegisterActiveSessionOptions, S as SessionProjectKey } from './active-sessions-store-CeOmXgv5.js';
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatDuration, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
+export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
 import 'class-variance-authority/types';
 import '@radix-ui/react-dialog';
 import 'class-variance-authority';

package/dist/index.js

@@ -25,11 +25,13 @@ import {
 import {
   createAuthFetcher,
   useApiKey,
-  useAuth
-} from "./chunk-S7OXQTST.js";
+  useAuth,
+  useLiveTime,
+  useSandboxMetrics
+} from "./chunk-DPGIXDAI.js";
 import {
   usePtySession
-} from "./chunk-5UM2XMEJ.js";
+} from "./chunk-ESVYBDGA.js";
 import {
   RealtimeSessionRegistry,
   useDropdownMenu,
@@ -104,7 +106,7 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-HEXQVHXJ.js";
+} from "./chunk-5OQ27N57.js";
 import "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
@@ -118,7 +120,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-WKSGQVLI.js";
+} from "./chunk-XLG757B6.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -136,11 +138,13 @@ import {
   RunGroup,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-QOL4ZB24.js";
+} from "./chunk-MQXABZTB.js";
 import {
+  formatBytes,
   formatDuration,
+  formatUptime,
   truncateText
-} from "./chunk-HRMUF35V.js";
+} from "./chunk-4CLN43XT.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -530,7 +534,9 @@ export {
   copyText,
   createAuthFetcher,
   filterFileTree,
+  formatBytes,
   formatDuration,
+  formatUptime,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText,
@@ -547,11 +553,13 @@ export {
   useDropdownMenu,
   useEditorConnection,
   useEditorContext,
+  useLiveTime,
   usePtySession,
   useRealtimeSession,
   useRunCollapseState,
   useRunGroups,
   useSSEStream,
+  useSandboxMetrics,
   useSdkSession,
   useSessionStream,
   useSidebar,

package/dist/pages.js

@@ -502,21 +502,32 @@ function ProvisioningWizard({
   const ramStep = alignSliderStep(RAM_MIN, ramMax, RAM_STEP);
   const storageStep = alignSliderStep(STORAGE_MIN, storageMax, STORAGE_STEP);
   const dc = defaultConfig;
-  const [envList, setEnvList] = React2.useState(
-    environmentsProp ?? defaultEnvironments
+  const [envList, setEnvList] = React2.useState(() => {
+    if (environmentsProp) return environmentsProp;
+    if (onLoadEnvironments) return [];
+    return defaultEnvironments;
+  });
+  const [isLoadingEnvironments, setIsLoadingEnvironments] = React2.useState(
+    () => !environmentsProp && !!onLoadEnvironments
   );
   const onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
   onLoadEnvironmentsRef.current = onLoadEnvironments;
   React2.useEffect(() => {
     let cancelled = false;
     if (onLoadEnvironmentsRef.current) {
+      setIsLoadingEnvironments(true);
       onLoadEnvironmentsRef.current().then((entries) => {
-        if (!cancelled) setEnvList(entries.map(resolveEnvironment));
+        if (!cancelled) {
+          setEnvList(entries.map(resolveEnvironment));
+          setIsLoadingEnvironments(false);
+        }
       }).catch((err) => {
-        if (!cancelled)
+        if (!cancelled) {
           setLoadError(
             err instanceof Error ? err.message : "Failed to load environments"
           );
+          setIsLoadingEnvironments(false);
+        }
       });
     } else if (environmentsProp) {
       setEnvList(environmentsProp);
@@ -531,9 +542,15 @@ function ProvisioningWizard({
     effectiveDefault ?? environments[0]?.id ?? ""
   );
   React2.useEffect(() => {
+    if (envList.length === 0) return;
     if (effectiveDefault && envList.some((e) => e.id === effectiveDefault)) {
       setSelectedEnv(effectiveDefault);
+      return;
     }
+    setSelectedEnv((prev) => {
+      if (prev && envList.some((e) => e.id === prev)) return prev;
+      return envList[0]?.id ?? "";
+    });
   }, [envList, effectiveDefault]);
   const [cpuCores, setCpuCores] = React2.useState(
     snapSliderValue(dc?.cpuCores ?? 4, CPU_MIN, cpuMax, cpuStep)
@@ -797,7 +814,23 @@ function ProvisioningWizard({
               /* @__PURE__ */ jsx2("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 border border-primary/20 text-primary", children: /* @__PURE__ */ jsx2(Layers, { className: "h-5 w-5" }) }),
               /* @__PURE__ */ jsx2("h2", { className: "text-lg font-bold text-foreground tracking-tight", children: "Environment Selection" })
             ] }),
-            /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: environments.map((env) => /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: isLoadingEnvironments && environments.length === 0 ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "p-4 rounded-[16px] border border-border bg-card/50 animate-pulse",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-3", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full bg-muted/60 border border-border" }),
+                    /* @__PURE__ */ jsx2("div", { className: "w-5 h-5 rounded-full border-2 border-border" })
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "h-3 w-1/3 rounded bg-muted/60 mb-2" }),
+                  /* @__PURE__ */ jsx2("div", { className: "h-2.5 w-5/6 rounded bg-muted/50 mb-1.5" }),
+                  /* @__PURE__ */ jsx2("div", { className: "h-2.5 w-2/3 rounded bg-muted/50" })
+                ]
+              },
+              `env-skeleton-${i}`
+            )) : environments.map((env) => /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",

package/dist/run.js

@@ -8,8 +8,8 @@ import {
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-QOL4ZB24.js";
-import "./chunk-HRMUF35V.js";
+} from "./chunk-MQXABZTB.js";
+import "./chunk-4CLN43XT.js";
 import {
   ToolCallGroup,
   ToolCallStep

package/dist/styles.css

@@ -661,6 +661,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -1464,6 +1467,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .caption-bottom {
     caption-side: bottom;
   }

package/dist/terminal.js

@@ -1,6 +1,6 @@
 import {
   usePtySession
-} from "./chunk-5UM2XMEJ.js";
+} from "./chunk-ESVYBDGA.js";
 
 // src/terminal/terminal-view.tsx
 import "@xterm/xterm/css/xterm.css";

package/dist/use-sandbox-metrics-B64diPqN.d.ts

@@ -0,0 +1,141 @@
+interface AuthUser {
+    customer_id: string;
+    email: string;
+    name?: string;
+    tier: string;
+    github?: {
+        login: string;
+        connected: boolean;
+    } | null;
+    session_expires_at?: string;
+}
+interface UseAuthOptions {
+    apiBaseUrl: string;
+    revalidateOnFocus?: boolean;
+    shouldRetryOnError?: boolean;
+}
+interface UseAuthResult {
+    user: AuthUser | null;
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+    mutate: () => Promise<void>;
+}
+/**
+ * Hook for managing authentication state.
+ * Fetches user session from the API and provides loading/error states.
+ */
+declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
+/**
+ * Creates a fetcher function that includes auth credentials.
+ * Uses both cookie-based session and localStorage API key for backwards compatibility.
+ */
+declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
+/**
+ * Hook to get the API key from localStorage.
+ * For backwards compatibility with API key-based auth.
+ */
+declare function useApiKey(): string | null;
+
+interface UsePtySessionOptions {
+    /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
+    apiUrl: string;
+    /** Bearer token for authentication. */
+    token: string;
+    /** Called with raw PTY output (may contain ANSI escape codes). */
+    onData: (data: string) => void;
+}
+interface UsePtySessionReturn {
+    /** Whether the SSE stream is connected and receiving data. */
+    isConnected: boolean;
+    /** Connection or API error, if any. */
+    error: string | null;
+    /** Send a command to the PTY session. */
+    sendCommand: (command: string) => Promise<void>;
+    /** Safely resize the remote PTY. */
+    resizeTerminal: (cols: number, rows: number) => Promise<void>;
+    /** Tear down and reconnect. */
+    reconnect: () => void;
+}
+/**
+ * Manages a PTY session against the sidecar terminal API.
+ *
+ * Protocol:
+ * - POST /terminals              → create session → { data: { sessionId } }
+ * - GET  /terminals/{id}/stream  → SSE output (raw PTY with ANSI codes)
+ * - POST /terminals/{id}/input   → send input     { data: "..." }
+ * - DELETE /terminals/{id}       → close session
+ */
+declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
+
+/**
+ * Returns `Date.now()` and re-renders every `intervalMs` so derived
+ * values like "uptime" tick forward without polling upstream data.
+ */
+declare function useLiveTime(intervalMs?: number): number;
+
+/**
+ * Shape returned by the sidecar `/metrics/json` endpoint. Only the
+ * fields read by this hook are modeled; the sidecar may add more.
+ */
+interface SidecarMetricsPayload {
+    process?: {
+        memoryBytes?: {
+            rss?: number;
+            heapTotal?: number;
+            heapUsed?: number;
+            external?: number;
+            arrayBuffers?: number;
+        };
+        cpuSeconds?: {
+            user?: number;
+            system?: number;
+        };
+    };
+}
+interface SandboxMetrics {
+    /**
+     * CPU% derived from consecutive samples. `null` on the first sample
+     * because a delta is required. Can exceed 100 on multi-core hosts.
+     */
+    cpuPercent: number | null;
+    rssBytes: number;
+    heapUsedBytes: number;
+    heapTotalBytes: number;
+}
+interface UseSandboxMetricsOptions {
+    /** Sandbox API base URL, e.g. `https://api.tangle.tools`. */
+    apiBaseUrl: string;
+    /** Sandbox id; when falsy the hook stays idle. */
+    sandboxId?: string | null;
+    /**
+     * Optional bearer token. When omitted the fetch still sends
+     * credentials so a cookie session can authenticate the proxy.
+     */
+    token?: string | null;
+    /** Pause polling when false. Defaults to true. */
+    enabled?: boolean;
+    /** Poll cadence; clamped to a 500ms floor. Defaults to 3000. */
+    intervalMs?: number;
+}
+interface UseSandboxMetricsResult {
+    metrics: SandboxMetrics | null;
+    /**
+     * True only until the first successful sample has arrived (or the
+     * first one after the target `sandboxId` changes). Subsequent polls
+     * do not flip this back to true, so consumers can gate a spinner
+     * on it without it flashing on every cycle.
+     */
+    loading: boolean;
+    error: Error | null;
+    /** Wall-clock ms of the last successful sample, or null. */
+    lastUpdatedAt: number | null;
+}
+/**
+ * Polls the sandbox's sidecar metrics through the API proxy and
+ * derives a CPU% value from consecutive cumulative-CPU samples. Used
+ * by the sandbox overview dashboard to drive live CPU/memory panels.
+ */
+declare function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled, intervalMs, }: UseSandboxMetricsOptions): UseSandboxMetricsResult;
+
+export { type AuthUser as A, type SandboxMetrics as S, type UseAuthOptions as U, type SidecarMetricsPayload as a, type UseAuthResult as b, type UsePtySessionOptions as c, type UsePtySessionReturn as d, type UseSandboxMetricsOptions as e, type UseSandboxMetricsResult as f, createAuthFetcher as g, useAuth as h, useLiveTime as i, usePtySession as j, useSandboxMetrics as k, useApiKey as u };

package/dist/utils.d.ts

@@ -16,6 +16,22 @@ declare function copyText(text: string): Promise<boolean>;
 declare function formatDuration(ms: number): string;
 /** Truncate text to `max` characters, appending "..." if truncated. */
 declare function truncateText(text: string, max: number): string;
+/**
+ * Format an uptime duration in milliseconds with progressive
+ * granularity, so short-lived sandboxes don't render as "0d 0h".
+ *  - < 60s        → "Ns"
+ *  - < 60m        → "Nm Ss"
+ *  - < 24h        → "Nh Mm"
+ *  - otherwise    → "Nd Hh"
+ */
+declare function formatUptime(ms: number): string;
+/**
+ * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
+ * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
+ * round above; GB keeps two decimals below 10 so half-GB changes stay
+ * visible on memory dashboards, and drops to one decimal above.
+ */
+declare function formatBytes(bytes: number): string;
 
 declare function timeAgo(ts: number): string;
 
@@ -25,4 +41,4 @@ declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
 /** Extract error text from a tool part, if any. */
 declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;
 
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatDuration, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/dist/utils.js

@@ -3,9 +3,11 @@ import {
   timeAgo
 } from "./chunk-QD4QE5P5.js";
 import {
+  formatBytes,
   formatDuration,
+  formatUptime,
   truncateText
-} from "./chunk-HRMUF35V.js";
+} from "./chunk-4CLN43XT.js";
 import {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
@@ -19,7 +21,9 @@ export {
   TOOL_CATEGORY_ICONS,
   cn,
   copyText,
+  formatBytes,
   formatDuration,
+  formatUptime,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText,

package/dist/workspace.js

@@ -13,13 +13,13 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-HEXQVHXJ.js";
+} from "./chunk-5OQ27N57.js";
 import "./chunk-OEX7NZE3.js";
 import "./chunk-MA7YKRUP.js";
-import "./chunk-WKSGQVLI.js";
+import "./chunk-XLG757B6.js";
 import "./chunk-54SQQMMM.js";
-import "./chunk-QOL4ZB24.js";
-import "./chunk-HRMUF35V.js";
+import "./chunk-MQXABZTB.js";
+import "./chunk-4CLN43XT.js";
 import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-ZNCEM5CD.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",

package/dist/chunk-HRMUF35V.js

@@ -1,19 +0,0 @@
-// src/utils/format.ts
-function formatDuration(ms) {
-  if (ms < 1e3) return "<1s";
-  const seconds = Math.floor(ms / 1e3);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remaining = seconds % 60;
-  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
-}
-function truncateText(text, max) {
-  const cleaned = text.replace(/\s+/g, " ").trim();
-  if (cleaned.length <= max) return cleaned;
-  return cleaned.slice(0, max).trim() + "...";
-}
-
-export {
-  formatDuration,
-  truncateText
-};

package/dist/chunk-S7OXQTST.js

@@ -1,99 +0,0 @@
-// 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 retryTimerRef = React.useRef(null);
-  const abortRef = React.useRef(null);
-  const fetchSession = React.useCallback(async () => {
-    abortRef.current?.abort();
-    const controller = new AbortController();
-    abortRef.current = controller;
-    setIsLoading(true);
-    setError(null);
-    try {
-      const res = await fetch(`${apiBaseUrl}/auth/session`, {
-        credentials: "include",
-        signal: controller.signal
-      });
-      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) {
-      if (err.name === "AbortError") return;
-      setError(err instanceof Error ? err : new Error("Unknown error"));
-      setUser(null);
-      if (shouldRetryOnError) {
-        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = setTimeout(fetchSession, 5e3);
-      }
-    } finally {
-      if (!controller.signal.aborted) {
-        setIsLoading(false);
-      }
-    }
-  }, [apiBaseUrl, shouldRetryOnError]);
-  React.useEffect(() => {
-    fetchSession();
-    return () => {
-      abortRef.current?.abort();
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-    };
-  }, [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/use-pty-session-0AOuwXgq.d.ts

@@ -1,71 +0,0 @@
-interface AuthUser {
-    customer_id: string;
-    email: string;
-    name?: string;
-    tier: string;
-    github?: {
-        login: string;
-        connected: boolean;
-    } | null;
-    session_expires_at?: string;
-}
-interface UseAuthOptions {
-    apiBaseUrl: string;
-    revalidateOnFocus?: boolean;
-    shouldRetryOnError?: boolean;
-}
-interface UseAuthResult {
-    user: AuthUser | null;
-    isLoading: boolean;
-    isError: boolean;
-    error: Error | null;
-    mutate: () => Promise<void>;
-}
-/**
- * Hook for managing authentication state.
- * Fetches user session from the API and provides loading/error states.
- */
-declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
-/**
- * Creates a fetcher function that includes auth credentials.
- * Uses both cookie-based session and localStorage API key for backwards compatibility.
- */
-declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
-/**
- * Hook to get the API key from localStorage.
- * For backwards compatibility with API key-based auth.
- */
-declare function useApiKey(): string | null;
-
-interface UsePtySessionOptions {
-    /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
-    apiUrl: string;
-    /** Bearer token for authentication. */
-    token: string;
-    /** Called with raw PTY output (may contain ANSI escape codes). */
-    onData: (data: string) => void;
-}
-interface UsePtySessionReturn {
-    /** Whether the SSE stream is connected and receiving data. */
-    isConnected: boolean;
-    /** Connection or API error, if any. */
-    error: string | null;
-    /** Send a command to the PTY session. */
-    sendCommand: (command: string) => Promise<void>;
-    /** Safely resize the remote PTY. */
-    resizeTerminal: (cols: number, rows: number) => Promise<void>;
-    /** Tear down and reconnect. */
-    reconnect: () => void;
-}
-/**
- * Manages a PTY session against the sidecar terminal API.
- *
- * Protocol:
- * - POST /terminals              → create session → { data: { sessionId } }
- * - GET  /terminals/{id}/stream  → SSE output (raw PTY with ANSI codes)
- * - POST /terminals/{id}/input   → send input     { data: "..." }
- * - DELETE /terminals/{id}       → close session
- */
-declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
-
-export { type AuthUser as A, type UseAuthOptions as U, type UseAuthResult as a, type UsePtySessionOptions as b, type UsePtySessionReturn as c, createAuthFetcher as d, useAuth as e, usePtySession as f, useApiKey as u };