@tangle-network/sandbox-ui 0.20.3 → 0.21.1

package/dist/{chunk-CMY7W45U.js → chunk-MEDE37J5.js}

@@ -228,13 +228,19 @@ function useSessionStream({
     }
   }, [refetch]);
   handleSSEEventRef.current = handleSSEEvent;
-  const send = useCallback(async (text) => {
+  const send = useCallback(async (text, options) => {
     if (!token || !sessionId || !apiUrl) return;
     try {
       const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/messages`;
       await fetchJson(url, token, {
         method: "POST",
-        body: JSON.stringify({ parts: [{ type: "text", text }] })
+        body: JSON.stringify({
+          parts: [{ type: "text", text }],
+          ...options?.agent ? { agent: options.agent } : {},
+          ...options?.model ? { model: options.model } : {},
+          ...options?.system ? { system: options.system } : {},
+          ...options?.reasoningEffort ? { reasoningEffort: options.reasoningEffort } : {}
+        })
       });
       setIsStreaming(true);
     } catch (err) {

package/dist/{chunk-CP2L6B53.js → chunk-R6NONXFC.js}

@@ -1474,6 +1474,7 @@ function SandboxWorkbench({
       ] })
     ] })
   ] });
+  const { composerControls, ...chatSession } = session;
   const center = /* @__PURE__ */ jsx9(
     ArtifactPane2,
     {
@@ -1484,14 +1485,17 @@ function SandboxWorkbench({
       headerActions: session.headerActions,
       className: "h-full",
       contentClassName: "bg-background",
-      children: /* @__PURE__ */ jsx9(
-        ChatContainer,
-        {
-          ...session,
-          className: "h-full",
-          presentation: session.presentation ?? "timeline"
-        }
-      )
+      children: /* @__PURE__ */ jsxs9("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsx9(
+          ChatContainer,
+          {
+            ...chatSession,
+            className: "min-h-0 flex-1",
+            presentation: session.presentation ?? "timeline"
+          }
+        ),
+        composerControls && /* @__PURE__ */ jsx9("div", { className: "shrink-0 border-t border-border bg-muted/30 px-3 py-2", children: composerControls })
+      ] })
     }
   );
   const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-background", children: [

package/dist/{chunk-76IQLPW2.js → chunk-SOKKTB7W.js}

@@ -22,9 +22,13 @@ function useSandboxMetrics({
   sandboxId,
   token,
   enabled = true,
-  intervalMs = 3e3
+  intervalMs = 3e3,
+  historyLimit = 120
 }) {
   const [metrics, setMetrics] = React.useState(null);
+  const [system, setSystem] = React.useState(null);
+  const [latency, setLatency] = React.useState(null);
+  const [history, setHistory] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [lastUpdatedAt, setLastUpdatedAt] = React.useState(null);
@@ -38,6 +42,9 @@ function useSandboxMetrics({
       sampleRef.current = null;
       hasLoadedRef.current = false;
       setMetrics(null);
+      setSystem(null);
+      setLatency(null);
+      setHistory([]);
       setLastUpdatedAt(null);
       setError(null);
       if (sandboxCleared) setLoading(false);
@@ -69,8 +76,8 @@ function useSandboxMetrics({
         }
         const data = await res.json();
         const user = data?.process?.cpuSeconds?.user ?? 0;
-        const system = data?.process?.cpuSeconds?.system ?? 0;
-        const cpuSeconds = user + system;
+        const system2 = data?.process?.cpuSeconds?.system ?? 0;
+        const cpuSeconds = user + system2;
         const wallMs = Date.now();
         if (cancelled) return;
         let cpuPercent = null;
@@ -89,6 +96,23 @@ function useSandboxMetrics({
           heapUsedBytes: data?.process?.memoryBytes?.heapUsed ?? 0,
           heapTotalBytes: data?.process?.memoryBytes?.heapTotal ?? 0
         });
+        const sys = data?.system ?? null;
+        setSystem(sys);
+        setLatency(data?.latency ?? null);
+        if (sys) {
+          const sample = {
+            at: wallMs,
+            cpuPercent: sys.cpuPercent,
+            memoryUsedBytes: sys.memory?.usedBytes ?? null,
+            memoryTotalBytes: sys.memory?.totalBytes ?? null,
+            diskUsedBytes: sys.disk?.usedBytes ?? null,
+            diskTotalBytes: sys.disk?.totalBytes ?? null
+          };
+          setHistory((prevHistory) => {
+            const next = [...prevHistory, sample];
+            return next.length > historyLimit ? next.slice(next.length - historyLimit) : next;
+          });
+        }
         setLastUpdatedAt(wallMs);
         setError(null);
         hasLoadedRef.current = true;
@@ -113,8 +137,8 @@ function useSandboxMetrics({
       controller.abort();
       if (timeoutId !== null) window.clearTimeout(timeoutId);
     };
-  }, [apiBaseUrl, sandboxId, token, enabled, intervalMs]);
-  return { metrics, loading, error, lastUpdatedAt };
+  }, [apiBaseUrl, sandboxId, token, enabled, intervalMs, historyLimit]);
+  return { metrics, system, latency, history, loading, error, lastUpdatedAt };
 }
 
 // src/hooks/use-session-crud.ts

package/dist/{chunk-MQ52AYJX.js → chunk-TAAYDQGM.js}

@@ -1,3 +1,10 @@
+import {
+  HARNESS_OPTIONS
+} from "./chunk-ESRYVGHF.js";
+import {
+  ModelPicker,
+  canonicalModelId
+} from "./chunk-4KAPMTPU.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -92,11 +99,210 @@ function ReasoningLevelPicker({
   ] });
 }
 
+// src/chat/agent-session-controls.tsx
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import { Bot, ChevronDown as ChevronDown2, Lock } from "lucide-react";
+
+// src/chat/harness-model-compat.ts
+var HARNESS_MODEL_POLICIES = {
+  opencode: { providers: null, preferred: [] },
+  "claude-code": {
+    providers: ["anthropic"],
+    preferred: [
+      /^anthropic\/claude-opus-[\d.-]+$/,
+      /^anthropic\/claude-sonnet-[\d.-]+$/,
+      /^anthropic\//
+    ]
+  },
+  codex: {
+    providers: ["openai"],
+    // Standard frontier tier first (gpt-N / gpt-N.N), then any gpt
+    // variant (mini/nano), then anything OpenAI.
+    preferred: [/^openai\/gpt-\d+(\.\d+)?$/, /^openai\/gpt/, /^openai\//]
+  },
+  amp: { providers: null, preferred: [] },
+  "factory-droids": { providers: null, preferred: [] },
+  "cli-base": { providers: null, preferred: [] }
+};
+var PROVIDER_PREFERRED_HARNESS = {
+  anthropic: "claude-code",
+  openai: "codex"
+};
+function modelProvider(modelId) {
+  const slash = modelId.indexOf("/");
+  return slash > 0 ? modelId.slice(0, slash) : null;
+}
+function isModelCompatibleWithHarness(harness, modelId) {
+  const policy = HARNESS_MODEL_POLICIES[harness];
+  if (!policy || policy.providers === null) return true;
+  const provider = modelProvider(modelId);
+  if (!provider) return true;
+  return policy.providers.includes(provider);
+}
+var numericDesc = new Intl.Collator(void 0, {
+  numeric: true,
+  sensitivity: "base"
+});
+function snapModelToHarness(harness, modelId, models) {
+  if (isModelCompatibleWithHarness(harness, modelId)) return modelId;
+  const ids = models.map(canonicalModelId);
+  const policy = HARNESS_MODEL_POLICIES[harness];
+  for (const pattern of policy.preferred) {
+    const matches = ids.filter((id) => pattern.test(id)).sort((a, b) => numericDesc.compare(b, a));
+    if (matches.length > 0) return matches[0];
+  }
+  const fallback = ids.find(
+    (id) => isModelCompatibleWithHarness(harness, id)
+  );
+  return fallback ?? modelId;
+}
+function snapHarnessToModel(harness, modelId) {
+  if (isModelCompatibleWithHarness(harness, modelId)) return harness;
+  const provider = modelProvider(modelId);
+  return provider && PROVIDER_PREFERRED_HARNESS[provider] || "opencode";
+}
+
+// src/chat/agent-session-controls.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function HarnessDropdown({
+  value,
+  onChange,
+  available,
+  disabled,
+  locked,
+  lockReason
+}) {
+  const allowed = new Set(
+    available ?? HARNESS_OPTIONS.map((h) => h.type)
+  );
+  const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
+  const selected = options.find((option) => option.type === value);
+  return /* @__PURE__ */ jsxs2(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        disabled: disabled || locked,
+        title: locked ? lockReason : void 0,
+        className: cn(
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-2.5",
+          "text-xs font-medium text-foreground shadow-sm transition-colors",
+          "hover:border-primary/30 hover:bg-accent/30 focus:outline-none focus:border-primary/40",
+          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ),
+        "aria-label": "Agent harness",
+        children: [
+          locked ? /* @__PURE__ */ jsx2(Lock, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { children: selected?.label ?? value }),
+          !locked && /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx2(
+      DropdownMenu2.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: cn(
+          "z-50 w-72 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
+          "shadow-[var(--shadow-dropdown)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxs2(
+          DropdownMenu2.Item,
+          {
+            onSelect: (event) => {
+              event.preventDefault();
+              onChange(option.type);
+            },
+            className: cn(
+              "flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 outline-none",
+              "transition-colors hover:bg-accent/40 focus:bg-accent/40",
+              option.type === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: option.label }),
+              option.description && /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground", children: option.description })
+            ]
+          },
+          option.type
+        ))
+      }
+    ) })
+  ] });
+}
+function AgentSessionControls({
+  harness,
+  model,
+  reasoning,
+  trailing,
+  className
+}) {
+  if (!harness && !model && !reasoning && !trailing) return null;
+  const handleHarnessChange = (next) => {
+    harness?.onChange(next);
+    if (model) {
+      const snapped = snapModelToHarness(next, model.value, model.models);
+      if (snapped !== model.value) model.onChange(snapped);
+    }
+  };
+  const handleModelChange = (nextModelId) => {
+    model?.onChange(nextModelId);
+    if (harness && !harness.locked) {
+      const snapped = snapHarnessToModel(harness.value, nextModelId);
+      if (snapped !== harness.value) harness.onChange(snapped);
+    }
+  };
+  const visibleModels = model && harness?.locked ? model.models.filter(
+    (entry) => isModelCompatibleWithHarness(
+      harness.value,
+      canonicalModelId(entry)
+    )
+  ) : model?.models;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2", className),
+      "data-testid": "agent-session-controls",
+      children: [
+        harness && /* @__PURE__ */ jsx2(HarnessDropdown, { ...harness, onChange: handleHarnessChange }),
+        model && /* @__PURE__ */ jsx2(
+          ModelPicker,
+          {
+            variant: "pill",
+            label: "",
+            value: model.value,
+            onChange: handleModelChange,
+            models: visibleModels ?? [],
+            loading: model.loading,
+            popular: model.popular,
+            recents: model.recents,
+            disabled: model.disabled || (visibleModels ?? []).length === 0
+          }
+        ),
+        reasoning && /* @__PURE__ */ jsx2(
+          ReasoningLevelPicker,
+          {
+            value: reasoning.value,
+            onChange: reasoning.onChange,
+            options: reasoning.options,
+            disabled: reasoning.disabled
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+      ]
+    }
+  );
+}
+
 // src/chat/artifact-agent-dock.tsx
 import * as React from "react";
 import { Sparkles, Send, Square, X } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
   switch (scope.kind) {
@@ -262,7 +468,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "aside",
     {
       className: cn(
@@ -271,38 +477,38 @@ function ArtifactAgentDock({
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
-        /* @__PURE__ */ jsxs2("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx2(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
-            /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
-              /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
+        /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx3(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx3("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
             ] })
           ] }),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
               className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx2("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs2("div", { className: "px-3 py-12 text-center", children: [
-          /* @__PURE__ */ jsx2(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
-          /* @__PURE__ */ jsxs2("p", { className: "text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx3("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs3("div", { className: "px-3 py-12 text-center", children: [
+          /* @__PURE__ */ jsx3(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-foreground", children: [
             "Ask the agent about this ",
             scope.kind === "vault-file" ? "document" : scope.kind,
             "."
           ] }),
-          /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
-        ] }) : /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-          messages.map((m) => /* @__PURE__ */ jsx2(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
-          streamContent && /* @__PURE__ */ jsx2(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
+          /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
+        ] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+          messages.map((m) => /* @__PURE__ */ jsx3(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx3(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
         ] }) }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "form",
           {
             className: "border-t border-border bg-background/60 p-3",
@@ -310,8 +516,8 @@ function ArtifactAgentDock({
               e.preventDefault();
               void send();
             },
-            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx3(
                 "textarea",
                 {
                   value: composer,
@@ -328,23 +534,23 @@ function ArtifactAgentDock({
                   className: "min-h-[44px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
                 }
               ),
-              sending ? /* @__PURE__ */ jsx2(
+              sending ? /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
                   onClick: cancel,
                   "aria-label": "Cancel",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-                  children: /* @__PURE__ */ jsx2(Square, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx3(Square, { className: "h-4 w-4" })
                 }
-              ) : /* @__PURE__ */ jsx2(
+              ) : /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "submit",
                   disabled: !composer.trim() || !threadId,
                   "aria-label": "Send",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
-                  children: /* @__PURE__ */ jsx2(Send, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
                 }
               )
             ] })
@@ -433,6 +639,12 @@ function createFetchTransport(opts) {
 export {
   DEFAULT_REASONING_LEVEL_OPTIONS,
   ReasoningLevelPicker,
+  HARNESS_MODEL_POLICIES,
+  modelProvider,
+  isModelCompatibleWithHarness,
+  snapModelToHarness,
+  snapHarnessToModel,
+  AgentSessionControls,
   ArtifactAgentDock,
   createFetchTransport,
   AgentTimeline,

package/dist/dashboard.d.ts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-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 { 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';
 
 interface SidebarUser {
     email: string;
@@ -344,52 +346,6 @@ interface PlanCardsProps {
 }
 declare function PlanCards({ plans, className }: PlanCardsProps): react_jsx_runtime.JSX.Element;
 
-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;
-
 type ProductVariant = "sandbox";
 interface NavItem {
     id: string;
@@ -495,6 +451,39 @@ interface ProfileComparisonProps {
 }
 declare function ProfileComparison({ profiles, className, }: ProfileComparisonProps): react_jsx_runtime.JSX.Element | null;
 
+interface MetricChartPoint {
+    /** Wall-clock ms. */
+    at: number;
+    /** Null renders a gap in the series, never a zero. */
+    value: number | null;
+}
+type MetricChartTone = "primary" | "success" | "warning" | "danger";
+interface MetricAreaChartProps {
+    points: MetricChartPoint[];
+    label: string;
+    /** Formats the current value and y-axis bounds (e.g. percent, bytes). */
+    formatValue: (value: number) => string;
+    /**
+     * Fixed y-axis maximum (100 for percents, memory total for bytes).
+     * Omitted = auto-scale to the observed maximum with 10% headroom.
+     */
+    maxValue?: number;
+    /** Secondary line under the current value (e.g. "of 8 GiB"). */
+    detail?: React.ReactNode;
+    tone?: MetricChartTone;
+    /** Plot height in px. Defaults to 96. */
+    height?: number;
+    /** Shown instead of the plot while no point has a value yet. */
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Lightweight live time-series panel (Prometheus/Grafana idiom): big
+ * current value, area chart of the rolling window, dashed gridlines.
+ * Pure SVG — no chart dependency. Null samples render as gaps.
+ */
+declare function MetricAreaChart({ points, label, formatValue, maxValue, detail, tone, height, emptyState, className, }: MetricAreaChartProps): react_jsx_runtime.JSX.Element;
+
 type VariantStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
 type VariantOutcome = "pending_review" | "accepted" | "rejected" | "merged_with_conflicts" | "expired";
 interface Variant {
@@ -670,4 +659,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_OPTIONS, HarnessPicker, type HarnessPickerProps, type HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };
+export { BackendConfig, type BackendConfigProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -1,14 +1,12 @@
 import {
   BackendConfig,
-  BackendSelector,
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
   GitPanel,
-  HARNESS_OPTIONS,
-  HarnessPicker,
   INSUFFICIENT_BALANCE_CODE,
   InvoiceTable,
+  MetricAreaChart,
   NetworkConfig,
   NewSandboxCard,
   OutOfCreditsModal,
@@ -46,20 +44,27 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-R6QNJQRH.js";
+} from "./chunk-LA5GHELP.js";
 import {
   BillingDashboard,
   InfoPanel,
-  ModelPicker,
   PricingPage,
   TemplateCard,
   UsageChart,
+  formatPrice
+} from "./chunk-DNZ4DTNA.js";
+import "./chunk-7ZA5SEK3.js";
+import {
+  BackendSelector,
+  HARNESS_OPTIONS,
+  HarnessPicker
+} from "./chunk-ESRYVGHF.js";
+import {
+  ModelPicker,
   canonicalModelId,
   formatContext,
-  formatPrice,
   formatPricing
-} from "./chunk-QNVVKMEW.js";
-import "./chunk-7ZA5SEK3.js";
+} from "./chunk-4KAPMTPU.js";
 import "./chunk-EI44GEQ5.js";
 export {
   BackendConfig,
@@ -74,6 +79,7 @@ export {
   INSUFFICIENT_BALANCE_CODE,
   InfoPanel,
   InvoiceTable,
+  MetricAreaChart,
   ModelPicker,
   NetworkConfig,
   NewSandboxCard,