@tangle-network/sandbox-ui 0.21.0 → 0.21.1

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-666PYT5K.js → chunk-TAAYDQGM.js}

@@ -2,7 +2,8 @@ import {
   HARNESS_OPTIONS
 } from "./chunk-ESRYVGHF.js";
 import {
-  ModelPicker
+  ModelPicker,
+  canonicalModelId
 } from "./chunk-4KAPMTPU.js";
 import {
   cn
@@ -100,13 +101,76 @@ function ReasoningLevelPicker({
 
 // src/chat/agent-session-controls.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { Bot, ChevronDown as ChevronDown2 } from "lucide-react";
+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
+  disabled,
+  locked,
+  lockReason
 }) {
   const allowed = new Set(
     available ?? HARNESS_OPTIONS.map((h) => h.type)
@@ -118,19 +182,20 @@ function HarnessDropdown({
       "button",
       {
         type: "button",
-        disabled,
+        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-50"
+          "disabled:cursor-not-allowed disabled:opacity-60"
         ),
         "aria-label": "Agent harness",
         children: [
-          /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          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 }),
-          /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          !locked && /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ) }),
@@ -177,25 +242,45 @@ function AgentSessionControls({
   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 }),
+        harness && /* @__PURE__ */ jsx2(HarnessDropdown, { ...harness, onChange: handleHarnessChange }),
         model && /* @__PURE__ */ jsx2(
           ModelPicker,
           {
             variant: "pill",
             label: "",
             value: model.value,
-            onChange: model.onChange,
-            models: model.models,
+            onChange: handleModelChange,
+            models: visibleModels ?? [],
             loading: model.loading,
             popular: model.popular,
             recents: model.recents,
-            disabled: model.disabled || model.models.length === 0
+            disabled: model.disabled || (visibleModels ?? []).length === 0
           }
         ),
         reasoning && /* @__PURE__ */ jsx2(
@@ -554,6 +639,11 @@ function createFetchTransport(opts) {
 export {
   DEFAULT_REASONING_LEVEL_OPTIONS,
   ReasoningLevelPicker,
+  HARNESS_MODEL_POLICIES,
+  modelProvider,
+  isModelCompatibleWithHarness,
+  snapModelToHarness,
+  snapHarnessToModel,
   AgentSessionControls,
   ArtifactAgentDock,
   createFetchTransport,

package/dist/dashboard.d.ts

@@ -451,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 {
@@ -626,4 +659,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-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, 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

@@ -6,6 +6,7 @@ import {
   GitPanel,
   INSUFFICIENT_BALANCE_CODE,
   InvoiceTable,
+  MetricAreaChart,
   NetworkConfig,
   NewSandboxCard,
   OutOfCreditsModal,
@@ -43,7 +44,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-FLWMBK77.js";
+} from "./chunk-LA5GHELP.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -78,6 +79,7 @@ export {
   INSUFFICIENT_BALANCE_CODE,
   InfoPanel,
   InvoiceTable,
+  MetricAreaChart,
   ModelPicker,
   NetworkConfig,
   NewSandboxCard,