@tangle-network/sandbox-ui 0.20.3 → 0.21.1

package/dist/globals.css

@@ -30,7 +30,6 @@
     --color-violet-300: oklch(81.1% 0.111 293.571);
     --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-neutral-400: oklch(70.8% 0 0);
@@ -70,7 +69,6 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
-    --font-weight-black: 900;
     --tracking-tighter: -0.05em;
     --tracking-tight: -0.025em;
     --tracking-normal: 0em;
@@ -523,6 +521,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-2\.5 {
+    margin-bottom: calc(var(--spacing) * 2.5);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -550,6 +551,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-1\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -605,9 +609,6 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
-  .h-0\.5 {
-    height: calc(var(--spacing) * 0.5);
-  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -668,9 +669,6 @@
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
-  .h-32 {
-    height: calc(var(--spacing) * 32);
-  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -1489,12 +1487,6 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
-  .rounded-\[14px\] {
-    border-radius: 14px;
-  }
-  .rounded-\[16px\] {
-    border-radius: 16px;
-  }
   .rounded-\[18px\] {
     border-radius: 18px;
   }
@@ -2056,10 +2048,6 @@
       background-color: color-mix(in oklab, var(--color-yellow-600) 20%, transparent);
     }
   }
-  .bg-gradient-to-br {
-    --tw-gradient-position: to bottom right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .bg-gradient-to-l {
     --tw-gradient-position: to left in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2111,6 +2099,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -2300,9 +2291,6 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
-  .pb-1\.5 {
-    padding-bottom: calc(var(--spacing) * 1.5);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2471,10 +2459,6 @@
     --tw-font-weight: var(--font-sans);
     font-weight: var(--font-sans);
   }
-  .font-black {
-    --tw-font-weight: var(--font-weight-black);
-    font-weight: var(--font-weight-black);
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2758,9 +2742,6 @@
   .underline {
     text-decoration-line: underline;
   }
-  .underline-offset-2 {
-    text-underline-offset: 2px;
-  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -2799,10 +2780,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-2xl {
-    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2843,18 +2820,10 @@
     --tw-shadow: var(--shadow-glow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-inner {
-    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2890,10 +2859,6 @@
   .ring-\[var\(--bg-root\)\] {
     --tw-ring-color: var(--bg-root);
   }
-  .ring-offset-2 {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -3042,12 +3007,6 @@
       }
     }
   }
-  .peer-focus\:outline-none {
-    &:is(:where(.peer):focus ~ *) {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -3099,12 +3058,6 @@
       top: calc(var(--spacing) * 0);
     }
   }
-  .after\:top-\[2px\] {
-    &::after {
-      content: var(--tw-content);
-      top: 2px;
-    }
-  }
   .after\:right-0 {
     &::after {
       content: var(--tw-content);
@@ -3117,86 +3070,12 @@
       left: calc(var(--spacing) * 0);
     }
   }
-  .after\:left-\[2px\] {
-    &::after {
-      content: var(--tw-content);
-      left: 2px;
-    }
-  }
-  .after\:h-5 {
-    &::after {
-      content: var(--tw-content);
-      height: calc(var(--spacing) * 5);
-    }
-  }
   .after\:h-\[2px\] {
     &::after {
       content: var(--tw-content);
       height: 2px;
     }
   }
-  .after\:w-5 {
-    &::after {
-      content: var(--tw-content);
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .after\:rounded-full {
-    &::after {
-      content: var(--tw-content);
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .after\:border {
-    &::after {
-      content: var(--tw-content);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-    }
-  }
-  .after\:border-gray-300 {
-    &::after {
-      content: var(--tw-content);
-      border-color: var(--color-gray-300);
-    }
-  }
-  .after\:bg-white {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--color-white);
-    }
-  }
-  .after\:transition-all {
-    &::after {
-      content: var(--tw-content);
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .after\:content-\[\'\'\] {
-    &::after {
-      --tw-content: '';
-      content: var(--tw-content);
-    }
-  }
-  .peer-checked\:after\:translate-x-full {
-    &:is(:where(.peer):checked ~ *) {
-      &::after {
-        content: var(--tw-content);
-        --tw-translate-x: 100%;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
-  .peer-checked\:after\:border-white {
-    &:is(:where(.peer):checked ~ *) {
-      &::after {
-        content: var(--tw-content);
-        border-color: var(--color-white);
-      }
-    }
-  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3266,16 +3145,6 @@
       }
     }
   }
-  .hover\:border-red-500\/30 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-\[var\(--accent-surface-soft\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3365,16 +3234,6 @@
       }
     }
   }
-  .hover\:bg-red-500\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-red-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3452,22 +3311,6 @@
       }
     }
   }
-  .hover\:shadow-sm {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .hover\:brightness-95 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-brightness: brightness(95%);
-        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-      }
-    }
-  }
   .hover\:brightness-110 {
     &:hover {
       @media (hover: hover) {
@@ -3503,11 +3346,6 @@
       color: var(--color-red-400);
     }
   }
-  .focus\:underline {
-    &:focus {
-      text-decoration-line: underline;
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3632,6 +3470,11 @@
       scale: 0.98;
     }
   }
+  .active\:scale-\[0\.99\] {
+    &:active {
+      scale: 0.99;
+    }
+  }
   .active\:bg-\[var\(--border-accent\)\] {
     &:active {
       background-color: var(--border-accent);
@@ -3657,6 +3500,11 @@
       opacity: 50%;
     }
   }
+  .disabled\:opacity-60 {
+    &:disabled {
+      opacity: 60%;
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -3729,14 +3577,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .sm\:mx-4 {
+  .sm\:mx-3 {
     @media (width >= 40rem) {
-      margin-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .sm\:ml-3 {
-    @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 3);
+      margin-inline: calc(var(--spacing) * 3);
     }
   }
   .sm\:inline {
@@ -3983,9 +3826,9 @@
       border-width: 0px;
     }
   }
-  .\[\&\:\:-moz-range-track\]\:h-2 {
+  .\[\&\:\:-moz-range-track\]\:h-1\.5 {
     &::-moz-range-track {
-      height: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 1.5);
     }
   }
   .\[\&\:\:-moz-range-track\]\:rounded-full {
@@ -3993,9 +3836,9 @@
       border-radius: calc(infinity * 1px);
     }
   }
-  .\[\&\:\:-webkit-slider-runnable-track\]\:h-2 {
+  .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5 {
     &::-webkit-slider-runnable-track {
-      height: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 1.5);
     }
   }
   .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full {
@@ -4003,19 +3846,19 @@
       border-radius: calc(infinity * 1px);
     }
   }
-  .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[6px\] {
+  .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\] {
     &::-webkit-slider-thumb {
-      margin-top: calc(6px * -1);
+      margin-top: calc(5px * -1);
     }
   }
-  .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
+  .\[\&\:\:-webkit-slider-thumb\]\:h-4 {
     &::-webkit-slider-thumb {
-      height: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 4);
     }
   }
-  .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
+  .\[\&\:\:-webkit-slider-thumb\]\:w-4 {
     &::-webkit-slider-thumb {
-      width: calc(var(--spacing) * 5);
+      width: calc(var(--spacing) * 4);
     }
   }
   .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
@@ -4034,31 +3877,12 @@
       border-width: 2px;
     }
   }
-  .\[\&\:\:-webkit-slider-thumb\]\:shadow-md {
+  .\[\&\:\:-webkit-slider-thumb\]\:shadow-sm {
     &::-webkit-slider-thumb {
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .\[\&\:\:-webkit-slider-thumb\]\:transition-transform {
-    &::-webkit-slider-thumb {
-      transition-property: transform, translate, scale, rotate;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:hover\:scale-110 {
-    &::-webkit-slider-thumb {
-      &:hover {
-        @media (hover: hover) {
-          --tw-scale-x: 110%;
-          --tw-scale-y: 110%;
-          --tw-scale-z: 110%;
-          scale: var(--tw-scale-x) var(--tw-scale-y);
-        }
-      }
-    }
-  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);

package/dist/harness-picker-C1W3rTeb.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Backend {
+    type: string;
+    label: string;
+    description?: string;
+}
+interface BackendSelectorProps {
+    backends: Backend[];
+    selected: string;
+    onChange: (selected: string) => void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+}
+declare function BackendSelector({ backends, selected, onChange, label, placeholder, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Sandbox agent harness types — mirrors `BackendType` from
+ * `@tangle-network/sandbox` SDK. Kept in lockstep with that enum:
+ * if the SDK adds a backend, add it here too.
+ */
+type HarnessType = "opencode" | "claude-code" | "codex" | "amp" | "factory-droids" | "cli-base";
+interface HarnessOption extends Backend {
+    type: HarnessType;
+}
+/**
+ * Default option list with human-readable copy. Order is curated so the
+ * recommended choice (`opencode`) appears first; `cli-base` (no agent) last.
+ */
+declare const HARNESS_OPTIONS: readonly HarnessOption[];
+interface HarnessPickerProps extends Omit<BackendSelectorProps, "backends" | "selected" | "onChange"> {
+    value: HarnessType;
+    onChange: (next: HarnessType) => void;
+    /** Filter the available harnesses (e.g. by plan tier). Defaults to all. */
+    available?: ReadonlyArray<HarnessType>;
+    /** Override or extend the option metadata. Keys are HarnessType. */
+    optionsOverride?: Partial<Record<HarnessType, Partial<Omit<HarnessOption, "type">>>>;
+}
+/**
+ * Type-safe harness/backend selector for sandbox-backed agent products.
+ *
+ * Wraps the generic {@link BackendSelector} with the canonical harness list
+ * baked in, so consumers don't have to re-declare it (or risk drifting from
+ * the SDK enum).
+ */
+declare function HarnessPicker({ value, onChange, available, optionsOverride, label, ...rest }: HarnessPickerProps): react_jsx_runtime.JSX.Element;
+
+export { type Backend as B, HARNESS_OPTIONS as H, BackendSelector as a, type BackendSelectorProps as b, HarnessPicker as c, type HarnessPickerProps as d, type HarnessType as e };

package/dist/hooks.d.ts

@@ -1,7 +1,7 @@
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/hooks';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { Session } from './types.js';
-export { SessionInfo, SidecarAuth, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, useSessionStream, useSidecarAuth } from './sdk-hooks.js';
+export { e as SendMessageOptions, S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
 import '@tangle-network/ui/types';
 import '@tangle-network/ui/stores';
 import '@tangle-network/ui/sdk-hooks';
@@ -49,6 +49,36 @@ interface UsePtySessionReturn {
  */
 declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
 
+/**
+ * Sandbox-level telemetry collected by the sidecar from cgroup v2
+ * (Docker) or /proc (Firecracker guest). `cpuPercent` is computed
+ * server-side from consecutive samples; sections are null when the
+ * source cannot provide them.
+ */
+interface SystemMetricsSnapshot {
+    cpuPercent: number | null;
+    cpuCores: number;
+    memory: {
+        usedBytes: number;
+        totalBytes: number;
+    } | null;
+    disk: {
+        usedBytes: number;
+        totalBytes: number;
+        path: string;
+    } | null;
+    source: "cgroup-v2" | "proc";
+}
+interface LatencyPercentiles {
+    p50: number | null;
+    p95: number | null;
+    sampleCount: number;
+}
+interface SandboxLatencyMetrics {
+    ttftMs: LatencyPercentiles;
+    firstResponseMs: LatencyPercentiles;
+    runDurationMs: LatencyPercentiles;
+}
 /**
  * Shape returned by the sidecar `/metrics/json` endpoint. Only the
  * fields read by this hook are modeled; the sidecar may add more.
@@ -67,6 +97,22 @@ interface SidecarMetricsPayload {
             system?: number;
         };
     };
+    system?: SystemMetricsSnapshot | null;
+    latency?: SandboxLatencyMetrics;
+}
+/**
+ * One polled time-series point, sourced from the sandbox-level
+ * `system` section. Null values mean the sidecar could not provide
+ * that reading — charts must render a gap, not a zero.
+ */
+interface SandboxMetricsSample {
+    /** Wall-clock ms when the sample was committed client-side. */
+    at: number;
+    cpuPercent: number | null;
+    memoryUsedBytes: number | null;
+    memoryTotalBytes: number | null;
+    diskUsedBytes: number | null;
+    diskTotalBytes: number | null;
 }
 interface SandboxMetrics {
     /**
@@ -92,9 +138,24 @@ interface UseSandboxMetricsOptions {
     enabled?: boolean;
     /** Poll cadence; clamped to a 500ms floor. Defaults to 3000. */
     intervalMs?: number;
+    /** Max retained history samples for charting. Defaults to 120. */
+    historyLimit?: number;
 }
 interface UseSandboxMetricsResult {
     metrics: SandboxMetrics | null;
+    /**
+     * Sandbox-level (container/VM) telemetry. Null until the sidecar
+     * reports a `system` section — older sidecars never will, and
+     * consumers must surface that as "unavailable", not zeros.
+     */
+    system: SystemMetricsSnapshot | null;
+    /** Agent latency percentiles (TTFT, first response, run duration). */
+    latency: SandboxLatencyMetrics | null;
+    /**
+     * Rolling window of system samples (oldest first), capped at
+     * `historyLimit`. Cleared when the target sandbox changes.
+     */
+    history: SandboxMetricsSample[];
     /**
      * True only until the first successful sample has arrived (or the
      * first one after the target `sandboxId` changes). Subsequent polls
@@ -111,7 +172,7 @@ interface UseSandboxMetricsResult {
  * 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;
+declare function useSandboxMetrics({ apiBaseUrl, sandboxId, token, enabled, intervalMs, historyLimit, }: UseSandboxMetricsOptions): UseSandboxMetricsResult;
 
 /** List all sessions for a sidecar. */
 declare function useSessions(apiUrl: string, token: string | null): _tanstack_react_query.UseQueryResult<Session[], Error>;
@@ -125,4 +186,4 @@ declare function useRenameSession(apiUrl: string, token: string | null): _tansta
     title: string;
 }, unknown>;
 
-export { type SandboxMetrics, type SidecarMetricsPayload, type UsePtySessionOptions, type UsePtySessionReturn, type UseSandboxMetricsOptions, type UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions };
+export { type LatencyPercentiles, type SandboxLatencyMetrics, type SandboxMetrics, type SandboxMetricsSample, type SidecarMetricsPayload, type SystemMetricsSnapshot, type UsePtySessionOptions, type UsePtySessionReturn, type UseSandboxMetricsOptions, type UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions };

package/dist/hooks.js

@@ -17,14 +17,14 @@ import {
   useSdkSession,
   useSessions,
   useToolCallStream
-} from "./chunk-76IQLPW2.js";
+} from "./chunk-SOKKTB7W.js";
 import {
   usePtySession
 } from "./chunk-AG7QDC2Q.js";
 import {
   useSessionStream,
   useSidecarAuth
-} from "./chunk-CMY7W45U.js";
+} from "./chunk-MEDE37J5.js";
 export {
   RealtimeSessionRegistry,
   createAuthFetcher,

package/dist/index.d.ts

@@ -4,17 +4,19 @@ export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
-export { ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport } from './chat.js';
+export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_MODEL_POLICIES, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, modelProvider, snapHarnessToModel, snapModelToHarness } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
-export { Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_OPTIONS, HarnessPicker, HarnessPickerProps, HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar } from './dashboard.js';
-export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, M as ModelInfo, e as ModelPicker, f as ModelPickerProps, g as ModelPickerVariant, P as PricingPage, h as PricingPageProps, i as PricingTier, T as TemplateCard, j as TemplateCardData, k as TemplateCardProps, U as UsageChart, l as UsageChartProps, m as UsageDataPoint, n as canonicalModelId, o as formatContext, p as formatPrice, q as formatPricing } from './template-card-gf-InrfN.js';
+export { BackendConfig, BackendConfigProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar } from './dashboard.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, H as HARNESS_OPTIONS, c as HarnessPicker, d as HarnessPickerProps, e as HarnessType } from './harness-picker-C1W3rTeb.js';
+export { M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, f as formatContext, e as formatPricing } from './model-picker-DUfMTQo5.js';
+export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
 export { TangleLoginButton, TangleLoginButtonProps } from './auth.js';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/hooks';
 export { SandboxMetrics, SidecarMetricsPayload, UsePtySessionOptions, UsePtySessionReturn, UseSandboxMetricsOptions, UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions } from './hooks.js';
-export { SessionInfo, SidecarAuth, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, useSessionStream, useSidecarAuth } from './sdk-hooks.js';
+export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
 export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from '@tangle-network/ui/stores';
 export { ChatSession, connectSession, disconnectSession, sessionAtom } from './stores.js';
 export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from '@tangle-network/ui/types';