@tangle-network/sandbox-ui 0.97.0 → 0.99.1

package/dist/index.js

@@ -73,7 +73,6 @@ import {
 import {
   AgentComposer,
   AgentProfilePicker,
-  AgentSessionControls,
   AgentTimeline,
   ArtifactAgentDock,
   ChatContainer,
@@ -86,12 +85,10 @@ import {
   UserMessage,
   createFetchTransport,
   isAcceptedType,
-  isModelCompatibleWithHarness,
   modelProvider,
   snapHarnessToModel,
-  snapModelToHarness,
   validateComposerFiles
-} from "./chunk-A4AABEX4.js";
+} from "./chunk-G7CFCZQ7.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -152,7 +149,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-22JEBRUV.js";
+} from "./chunk-JIZCCGD2.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -164,10 +161,15 @@ import {
 import {
   ActivityFeed,
   BackendConfig,
+  BackendSelector,
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
   GitPanel,
+  HARNESS_BRAND,
+  HARNESS_OPTIONS,
+  HarnessLogo,
+  HarnessPicker,
   INSUFFICIENT_BALANCE_CODE,
   InvoiceTable,
   MetricAreaChart,
@@ -215,9 +217,10 @@ import {
   UsageSummary,
   VariantList,
   canAdminSandbox,
+  chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-VQZ6XDRR.js";
+} from "./chunk-Y4OTBMZS.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -317,27 +320,11 @@ import {
   useTheme,
   useToast
 } from "./chunk-4ZZUMXPX.js";
-import {
-  BackendSelector,
-  HARNESS_BRAND,
-  HARNESS_OPTIONS,
-  HarnessLogo,
-  HarnessPicker,
-  chatCapableHarnesses
-} from "./chunk-WSN2RZC6.js";
-import {
-  DEFAULT_FEATURED_MODEL_IDS,
-  ModelPicker,
-  dedupeModels,
-  formatContext,
-  formatPricing,
-  modelDedupKey
-} from "./chunk-WMVUJ5SA.js";
 import {
   ModelBrandStack,
   canonicalModelId,
   modelBrandFor
-} from "./chunk-5XRAKVIV.js";
+} from "./chunk-RQZRXKMR.js";
 import "./chunk-EI44GEQ5.js";
 import {
   OpenUIArtifactRenderer
@@ -365,7 +352,6 @@ export {
   ActivityFeed,
   AgentComposer,
   AgentProfilePicker,
-  AgentSessionControls,
   AgentTimeline,
   AgentWorkbench,
   ApprovalQueue,
@@ -399,7 +385,6 @@ export {
   CommandPreview,
   CopyButton,
   CreditBalance,
-  DEFAULT_FEATURED_MODEL_IDS,
   DEFAULT_REASONING_LEVEL_OPTIONS,
   DashboardLayout,
   Dialog,
@@ -464,7 +449,6 @@ export {
   MessageList,
   MetricAreaChart,
   ModelBrandStack,
-  ModelPicker,
   NetworkConfig,
   NewSandboxCard,
   OpenUIArtifactRenderer,
@@ -597,15 +581,12 @@ export {
   createAuthFetcher,
   createFetchTransport,
   createShellShouldRevalidate,
-  dedupeModels,
   disconnectSession,
   dispatchSessionCreated,
   filterFileTree,
   formatBytes,
-  formatContext,
   formatDuration,
   formatPrice,
-  formatPricing,
   formatUptime,
   getActiveSession,
   getAllActiveSessions,
@@ -619,11 +600,9 @@ export {
   getTotalRunningSessionCount,
   hasBackgroundRunningSessions,
   isAcceptedType,
-  isModelCompatibleWithHarness,
   isStreamingAtom,
   messagesAtom,
   modelBrandFor,
-  modelDedupKey,
   modelProvider,
   parseInsufficientBalance,
   partMapAtom,
@@ -638,7 +617,6 @@ export {
   setForegroundActiveSession,
   shellShouldRevalidate,
   snapHarnessToModel,
-  snapModelToHarness,
   timeAgo,
   truncateText,
   unregisterActiveSession,

package/dist/{model-brand-CuXKfTMh.d.ts → model-brand-BNnaUKKZ.d.ts}

@@ -42,10 +42,8 @@ interface ModelInfo {
         labUrl?: string;
     };
     /**
-     * Marks a model as recommended. When any catalog row carries this flag the
-     * picker surfaces those rows in a "Recommended" section at the top. When no
-     * row is flagged the picker falls back to {@link DEFAULT_FEATURED_MODEL_IDS}
-     * (matched by dedup key) so the section is never empty for a router catalog.
+     * Marks a model as recommended. When any catalog row carries this flag a
+     * picker can surface those rows in a "Recommended" section at the top.
      */
     featured?: boolean;
     /**

package/dist/pages.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CSSProperties, ReactNode } from 'react';
 import { c as BillingSubscription, B as BillingBalance, d as BillingUsage, j as UsageDataPoint, f as PricingTier, g as TemplateCardData } from './template-card-Bn-Bw5xC.js';
-export { b as ModelInfo } from './model-brand-CuXKfTMh.js';
+export { b as ModelInfo } from './model-brand-BNnaUKKZ.js';
 import '@tangle-network/agent-interface';
 
 /**

package/dist/pages.js

@@ -24,8 +24,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-WMVUJ5SA.js";
-import "./chunk-5XRAKVIV.js";
+import "./chunk-RQZRXKMR.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

package/dist/styles.css

@@ -685,9 +685,6 @@
   .table {
     display: table;
   }
-  .table-row {
-    display: table-row;
-  }
   .aspect-\[9\/16\] {
     aspect-ratio: 9/16;
   }
@@ -916,9 +913,6 @@
   .max-h-\[min\(60vh\,420px\)\] {
     max-height: min(60vh, 420px);
   }
-  .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
-    max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
-  }
   .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
@@ -976,9 +970,6 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
-  .min-h-\[560px\] {
-    min-height: 560px;
-  }
   .min-h-\[640px\] {
     min-height: 640px;
   }
@@ -1171,9 +1162,6 @@
   .w-\[680px\] {
     width: 680px;
   }
-  .w-\[720px\] {
-    width: 720px;
-  }
   .w-\[760px\] {
     width: 760px;
   }
@@ -1201,9 +1189,6 @@
   .w-\[var\(--indicator-dot-size\)\] {
     width: var(--indicator-dot-size);
   }
-  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
-    width: var(--radix-dropdown-menu-trigger-width);
-  }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
@@ -1273,9 +1258,6 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
-  .max-w-\[180px\] {
-    max-width: 180px;
-  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
@@ -1288,9 +1270,6 @@
   .max-w-\[420px\] {
     max-width: 420px;
   }
-  .max-w-\[460px\] {
-    max-width: 460px;
-  }
   .max-w-\[480px\] {
     max-width: 480px;
   }
@@ -1354,9 +1333,6 @@
   .min-w-\[240px\] {
     min-width: 240px;
   }
-  .min-w-\[320px\] {
-    min-width: 320px;
-  }
   .min-w-\[360px\] {
     min-width: 360px;
   }
@@ -2046,12 +2022,6 @@
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-primary\/10 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-    }
-  }
   .border-primary\/20 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2418,12 +2388,6 @@
       background-color: color-mix(in oklab, var(--color-muted) 10%, transparent);
     }
   }
-  .bg-muted\/20 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
-    }
-  }
   .bg-muted\/30 {
     background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2484,12 +2448,6 @@
       background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
     }
   }
-  .bg-primary\/\[0\.04\] {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 4%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 4%, transparent);
-    }
-  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -2508,9 +2466,6 @@
       background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
     }
   }
-  .bg-ring {
-    background-color: var(--color-ring);
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -2834,9 +2789,6 @@
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
-  .pt-14 {
-    padding-top: calc(var(--spacing) * 14);
-  }
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
@@ -2858,9 +2810,6 @@
   .pb-0 {
     padding-bottom: 0px;
   }
-  .pb-0\.5 {
-    padding-bottom: calc(var(--spacing) * 0.5);
-  }
   .pb-1 {
     padding-bottom: var(--spacing);
   }
@@ -2876,9 +2825,6 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
-  .pb-12 {
-    padding-bottom: calc(var(--spacing) * 12);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -3084,10 +3030,6 @@
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
   }
-  .font-\[var\(--font-display\)\] {
-    --tw-font-weight: var(--font-display);
-    font-weight: var(--font-display);
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -3297,6 +3239,9 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
+  .text-\[var\(--text-dim\)\] {
+    color: var(--text-dim);
+  }
   .text-\[var\(--text-muted\)\] {
     color: var(--text-muted);
   }
@@ -3309,6 +3254,9 @@
   .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
     color: var(--text-primary,hsl(var(--foreground)));
   }
+  .text-\[var\(--text-secondary\)\] {
+    color: var(--text-secondary);
+  }
   .text-accent-foreground {
     color: var(--color-accent-foreground);
   }
@@ -3467,9 +3415,6 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  .accent-foreground {
-    accent-color: var(--color-foreground);
-  }
   .accent-primary {
     accent-color: var(--color-primary);
   }
@@ -3638,10 +3583,6 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3797,10 +3738,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .placeholder\:font-normal::placeholder {
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
-  }
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--color-muted-foreground);
   }
@@ -3954,9 +3891,6 @@
         border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
       }
     }
-    .hover\:border-transparent:hover {
-      border-color: transparent;
-    }
     .hover\:\!bg-primary:hover {
       background-color: var(--color-primary) !important;
     }
@@ -4110,14 +4044,6 @@
         background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
       }
     }
-    .hover\:bg-muted\/60:hover {
-      background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-muted\/60:hover {
-        background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
-      }
-    }
     .hover\:bg-muted\/80:hover {
       background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
     }
@@ -4286,12 +4212,6 @@
       background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
     }
   }
-  .focus\:bg-primary\/15:focus {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
-    }
-  }
   .focus\:text-\[var\(--surface-danger-text\)\]:focus {
     color: var(--surface-danger-text);
   }
@@ -4541,9 +4461,6 @@
   .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\][data-state="open"] {
     border-color: var(--md3-outline-variant);
   }
-  .data-\[state\=open\]\:border-transparent[data-state="open"] {
-    border-color: transparent;
-  }
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
@@ -4556,18 +4473,9 @@
       background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
     }
   }
-  .data-\[state\=open\]\:bg-muted\/60[data-state="open"] {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
-    }
-  }
   .data-\[state\=open\]\:bg-surface-container-high[data-state="open"] {
     background-color: var(--color-surface-container-high);
   }
-  .data-\[state\=open\]\:text-foreground[data-state="open"] {
-    color: var(--color-foreground);
-  }
   .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
     color: var(--color-muted-foreground);
   }
@@ -5555,6 +5463,17 @@
   --border-default: rgba(120, 108, 158, 0.18);
   --border-hover: rgba(120, 108, 158, 0.28);
 }
+:root:not([data-theme]),
+[data-sandbox-ui]:not([data-theme]),
+[data-theme="dark"],
+.dark:not([data-theme]) {
+  --text-dim: #92929a;
+}
+[data-sandbox-theme="vault"]:not([data-theme]),
+[data-theme="light"],
+.light:not([data-theme]) {
+  --text-dim: #6b6b75;
+}
 .sandbox-tree-surface {
   --trees-bg-override: var(--md3-surface-container-lowest);
   --trees-bg-muted-override: var(--md3-surface-container-low);

package/dist/workbench.js

@@ -12,16 +12,14 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-22JEBRUV.js";
+} from "./chunk-JIZCCGD2.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-VQZ6XDRR.js";
+import "./chunk-Y4OTBMZS.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-WYMAC3T3.js";
 import "./chunk-KEYPUGS3.js";
 import "./chunk-4ZZUMXPX.js";
-import "./chunk-WSN2RZC6.js";
-import "./chunk-WMVUJ5SA.js";
-import "./chunk-5XRAKVIV.js";
+import "./chunk-RQZRXKMR.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {

package/dist/workflows.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export { M as ModelBrandIdentity, a as ModelBrandStack, m as modelBrandFor } from './model-brand-CuXKfTMh.js';
+export { M as ModelBrandIdentity, a as ModelBrandStack, m as modelBrandFor } from './model-brand-BNnaUKKZ.js';
 import '@tangle-network/agent-interface';
 
 /**

package/dist/workflows.js

@@ -9,7 +9,7 @@ import {
 import {
   ModelBrandStack,
   modelBrandFor
-} from "./chunk-5XRAKVIV.js";
+} from "./chunk-RQZRXKMR.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 
@@ -36,7 +36,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-OPLQFAJK.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-DB5F6ZSF.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/dist/workspace.d.ts

@@ -439,7 +439,7 @@ interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "classNa
     /**
      * Controls rendered as a strip attached beneath the chat composer —
      * harness/model/effort pickers, token meters, etc. Use
-     * `AgentSessionControls` from `@tangle-network/sandbox-ui/chat` for the
+     * `AgentSessionControls` from `@tangle-network/agent-app/web-react` for the
      * standard set.
      */
     composerControls?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.97.0",
+  "version": "0.99.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -118,7 +118,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
-    "@tangle-network/agent-interface": ">=0.36.0 <0.44.0",
+    "@tangle-network/agent-interface": ">=0.36.0 <0.47.0",
     "@tangle-network/brand": "^1.1.0",
     "@tangle-network/ui": "^11.0.0",
     "@tanstack/react-query": "^5.0.0",
@@ -190,7 +190,7 @@
     "@storybook/react": "^10.5.4",
     "@storybook/react-vite": "^10.5.4",
     "@tailwindcss/postcss": "^4.3.3",
-    "@tangle-network/agent-interface": "0.43.0",
+    "@tangle-network/agent-interface": "0.46.1",
     "@tangle-network/brand": "^1.1.0",
     "@tangle-network/ui": "^11.2.0",
     "@tanstack/react-query": "^5.101.4",
@@ -209,6 +209,7 @@
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.11.2",
     "jsdom": "^29.1.1",
+    "playwright": "^1.62.1",
     "postcss": "^8.5.21",
     "postcss-import": "^16.1.1",
     "react": "^19.2.8",