@tangle-network/sandbox-ui 0.21.0 → 0.21.2

package/dist/auth.js

@@ -4,7 +4,9 @@ import {
   LoginLayout,
   TangleLoginButton,
   UserMenu
-} from "./chunk-IOB2PW5Z.js";
+} from "./chunk-R3ZMMCT3.js";
+import "./chunk-UHFJXO24.js";
+import "./chunk-EI44GEQ5.js";
 export {
   AuthHeader,
   GitHubLoginButton,

package/dist/chat.d.ts

@@ -28,6 +28,15 @@ interface AgentSessionHarnessControl {
     /** Filter the selectable harnesses (e.g. by plan tier). Defaults to all. */
     available?: ReadonlyArray<HarnessType>;
     disabled?: boolean;
+    /**
+     * A harness is bound to its chat session once the conversation has
+     * started. While locked the dropdown is inert and the model catalog
+     * is filtered to what this harness can run — fork the session to
+     * switch harness.
+     */
+    locked?: boolean;
+    /** Tooltip shown on the locked trigger. */
+    lockReason?: string;
 }
 interface AgentSessionModelControl {
     /** Canonical model id (provider-prefixed, e.g. "anthropic/claude-opus-4-8"). */
@@ -65,10 +74,61 @@ interface AgentSessionControlsProps {
  * thinking-effort pickers in one row. Every section is optional and only
  * renders when its control object is provided — never show a dead control.
  *
+ * When BOTH harness and model controls are present the pair is kept
+ * coherent automatically (see harness-model-compat): picking a harness
+ * snaps an incompatible model to that harness's best catalog option;
+ * picking a model the current harness can't run switches to the model's
+ * native harness — unless the harness is `locked`, in which case the
+ * catalog itself is filtered to compatible models.
+ *
  * Designed to slot into `SandboxWorkbench`'s `session.composerControls`.
  */
 declare function AgentSessionControls({ harness, model, reasoning, trailing, className, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Harness ↔ model compatibility policy.
+ *
+ * Native CLI harnesses are vendor-locked: claude-code only drives
+ * Anthropic models, codex only OpenAI models. Router-backed harnesses
+ * (opencode) accept any catalog model. The pickers use this policy to
+ * keep the pair coherent: changing one side snaps the other to its
+ * nearest compatible choice instead of letting the user assemble a
+ * combination that fails at inference time.
+ */
+interface HarnessModelPolicy {
+    /** Canonical-id provider prefixes the harness can run; null = any. */
+    providers: ReadonlyArray<string> | null;
+    /**
+     * Patterns ranking snap targets, best first. Within one pattern's
+     * matches the highest version (numeric-aware descending sort) wins,
+     * so "latest standard frontier" stays correct as catalogs rotate.
+     */
+    preferred: ReadonlyArray<RegExp>;
+}
+declare const HARNESS_MODEL_POLICIES: Record<HarnessType, HarnessModelPolicy>;
+/** Provider prefix of a canonical id ("anthropic/claude-…" → "anthropic"). */
+declare function modelProvider(modelId: string): string | null;
+/**
+ * Ids without a provider prefix (consumer sentinels like "default",
+ * or an empty selection) are treated as compatible everywhere — they
+ * mean "the session's own configuration", which every harness honors.
+ */
+declare function isModelCompatibleWithHarness(harness: HarnessType, modelId: string): boolean;
+/**
+ * Keeps `modelId` when the harness can run it; otherwise returns the
+ * harness's best compatible catalog model (preferred patterns in order,
+ * highest version within a pattern). When the catalog holds nothing
+ * compatible the original id is returned unchanged — the caller sees
+ * the incompatibility instead of a silent wrong substitution.
+ */
+declare function snapModelToHarness(harness: HarnessType, modelId: string, models: ReadonlyArray<ModelInfo>): string;
+/**
+ * Keeps the harness when it can run `modelId`; otherwise returns the
+ * model's native harness (anthropic → claude-code, openai → codex),
+ * falling back to the router-backed opencode for everything else.
+ */
+declare function snapHarnessToModel(harness: HarnessType, modelId: string): HarnessType;
+
 type ArtifactKind = string;
 interface ArtifactScope {
     kind: ArtifactKind;
@@ -166,4 +226,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport };
+export { AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_MODEL_POLICIES, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, modelProvider, snapHarnessToModel, snapModelToHarness };

package/dist/chat.js

@@ -6,12 +6,17 @@ import {
   ChatInput,
   ChatMessage,
   DEFAULT_REASONING_LEVEL_OPTIONS,
+  HARNESS_MODEL_POLICIES,
   MessageList,
   ReasoningLevelPicker,
   ThinkingIndicator,
   UserMessage,
-  createFetchTransport
-} from "./chunk-666PYT5K.js";
+  createFetchTransport,
+  isModelCompatibleWithHarness,
+  modelProvider,
+  snapHarnessToModel,
+  snapModelToHarness
+} from "./chunk-TAAYDQGM.js";
 import "./chunk-ESRYVGHF.js";
 import "./chunk-4KAPMTPU.js";
 import "./chunk-EI44GEQ5.js";
@@ -23,9 +28,14 @@ export {
   ChatInput,
   ChatMessage,
   DEFAULT_REASONING_LEVEL_OPTIONS,
+  HARNESS_MODEL_POLICIES,
   MessageList,
   ReasoningLevelPicker,
   ThinkingIndicator,
   UserMessage,
-  createFetchTransport
+  createFetchTransport,
+  isModelCompatibleWithHarness,
+  modelProvider,
+  snapHarnessToModel,
+  snapModelToHarness
 };

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

@@ -1928,9 +1928,9 @@ function CalendarView({
                   children: date.getDate()
                 }
               ),
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap gap-0.5 w-full", children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5 w-full min-w-0", children: [
                 dayEvents.slice(0, 3).map(
-                  (evt) => renderEventChip ? /* @__PURE__ */ jsx12("span", { children: renderEventChip(evt) }, evt.id) : /* @__PURE__ */ jsx12(
+                  (evt) => renderEventChip ? /* @__PURE__ */ jsx12("div", { className: "w-full min-w-0", children: renderEventChip(evt) }, evt.id) : /* @__PURE__ */ jsx12(
                     "div",
                     {
                       className: "w-full truncate text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary",

package/dist/{chunk-IOB2PW5Z.js → chunk-R3ZMMCT3.js}

@@ -1,3 +1,7 @@
+import {
+  TangleKnot
+} from "./chunk-UHFJXO24.js";
+
 // src/auth/index.ts
 import {
   AuthHeader,
@@ -10,18 +14,6 @@ import {
 import { Button } from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-function TangleMark({ className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className,
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M4 5h16v3.2h-6.4V19h-3.2V8.2H4V5z" })
-    }
-  );
-}
 function TangleLoginButton({
   authUrl = "/auth/tangle",
   variant = "default",
@@ -39,7 +31,7 @@ function TangleLoginButton({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(TangleMark, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx(TangleKnot, { size: 20 }),
         children ?? "Sign in with Tangle"
       ]
     }

package/dist/chunk-SM7IJY4I.js

@@ -0,0 +1,178 @@
+// src/primitives/index.ts
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  badgeVariants,
+  Button,
+  buttonVariants,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CopyButton,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropZone,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  InlineCode,
+  Input,
+  Label,
+  Progress,
+  SegmentedControl,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SidebarDropZone,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable,
+  StatCard,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TerminalCursor,
+  TerminalDisplay,
+  TerminalInput,
+  TerminalLine,
+  Textarea,
+  ThemeToggle,
+  ToastContainer,
+  ToastProvider,
+  UploadProgress,
+  useTheme,
+  useToast
+} from "@tangle-network/ui/primitives";
+
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  badgeVariants,
+  Button,
+  buttonVariants,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CopyButton,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropZone,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  InlineCode,
+  Input,
+  Label,
+  Progress,
+  SegmentedControl,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SidebarDropZone,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable,
+  StatCard,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TerminalCursor,
+  TerminalDisplay,
+  TerminalInput,
+  TerminalLine,
+  Textarea,
+  ThemeToggle,
+  ToastContainer,
+  ToastProvider,
+  UploadProgress,
+  useTheme,
+  useToast
+};

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,