@tangle-network/sandbox-ui 0.31.0 → 0.33.0

package/dist/chat.d.ts

@@ -1,20 +1,19 @@
 import { MessageRole } from '@tangle-network/ui/chat';
 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';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReasoningEffort, HarnessType } from '@tangle-network/agent-interface';
 import * as React from 'react';
 import { M as ModelInfo } from './model-picker-Cmisf9Y8.js';
-import { e as HarnessType } from './harness-picker-lyeEncN4.js';
 
 /**
- * Thinking-effort ladder — the superset of the per-harness reasoning scales so
- * one control covers every backend. Consumers map each level onto what the
- * chosen harness/model supports (and degrade unsupported ones):
- *   - OpenAI / Codex reasoning_effort: minimal · low · medium · high · xhigh
- *   - Anthropic (Claude) extended thinking: … · high · max
- *   - Claude Code: … · high · max · ultracode
- *   - generic: low · medium · high
+ * A reasoning selection: `auto` is a UI-only sentinel ("let the harness/model default decide",
+ * sends no explicit override); every other value is the canonical `ReasoningEffort` from
+ * `@tangle-network/agent-interface` (the single source of truth — `none` … `ultracode`). The picker
+ * shows only the levels the chosen harness/model supports — see `reasoningEffortsFor` + the
+ * `available` prop — so unsupported levels (codex's `xhigh`/`ultracode`, kimi's mid-range) never
+ * appear rather than being silently degraded.
  */
-type ReasoningLevel = "auto" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max" | "ultracode";
+type ReasoningLevel = "auto" | ReasoningEffort;
 interface ReasoningLevelOption {
     value: ReasoningLevel;
     label: string;
@@ -27,9 +26,16 @@ interface ReasoningLevelPickerProps {
     className?: string;
     triggerClassName?: string;
     options?: ReadonlyArray<ReasoningLevelOption>;
+    /**
+     * Capability filter — the reasoning efforts the currently-selected harness/model supports, from
+     * `reasoningEffortsFor(harness, model)`. When provided, the picker shows ONLY these (plus the
+     * `auto` sentinel), so a harness that can't do `ultracode`/`xhigh` (e.g. codex) never offers it.
+     * Omit to show every option.
+     */
+    available?: ReadonlyArray<ReasoningEffort>;
 }
 declare const DEFAULT_REASONING_LEVEL_OPTIONS: ReadonlyArray<ReasoningLevelOption>;
-declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
+declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, available, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
 
 interface AgentSessionHarnessControl {
     value: HarnessType;
@@ -63,6 +69,11 @@ interface AgentSessionReasoningControl {
     onChange: (value: ReasoningLevel) => void;
     options?: ReadonlyArray<ReasoningLevelOption>;
     disabled?: boolean;
+    /**
+     * Reasoning efforts to offer when no harness is selected (e.g. a model-derived capability set).
+     * When a harness IS present the strip derives this from `reasoningEffortsFor(harness)` instead.
+     */
+    available?: ReadonlyArray<ReasoningEffort>;
 }
 interface AgentSessionControlsProps {
     /**
@@ -130,7 +141,7 @@ interface HarnessModelPolicy {
      */
     preferred: ReadonlyArray<RegExp>;
 }
-declare const HARNESS_MODEL_POLICIES: Record<HarnessType, HarnessModelPolicy>;
+declare const HARNESS_MODEL_POLICIES: Partial<Record<HarnessType, HarnessModelPolicy>>;
 /** Provider prefix of a canonical id ("anthropic/claude-…" → "anthropic"). */
 declare function modelProvider(modelId: string): string | null;
 /**

package/dist/chat.js

@@ -16,9 +16,9 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-BJFWPP5T.js";
-import "./chunk-ELGN7DPS.js";
-import "./chunk-6NQBODYV.js";
+} from "./chunk-AWYBQTP6.js";
+import "./chunk-I64YISXS.js";
+import "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentSessionControls,

package/dist/{chunk-DNZ4DTNA.js → chunk-2XNT74ZX.js}

@@ -414,7 +414,7 @@ function UsageChart({ data, title, unit, className }) {
                 onMouseEnter: () => setHoveredIndex(index),
                 onMouseLeave: () => setHoveredIndex(null),
                 children: [
-                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg bg-popover px-3 py-1.5 text-sm shadow-lg", children: [
+                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg border border-border bg-popover px-3 py-1.5 text-sm shadow-[var(--shadow-dropdown)]", children: [
                     /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
                       formatValue(point.value),
                       " ",
@@ -490,7 +490,7 @@ function TemplateCard({ template, onUseTemplate, className }) {
     "div",
     {
       className: cn(
-        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
+        "group relative flex flex-col justify-between rounded-xl border border-border bg-card p-6 transition-colors hover:border-[var(--border-accent)]",
         className
       ),
       children: [

package/dist/{chunk-AUFV7766.js → chunk-6NDOA4SB.js}

@@ -1048,7 +1048,7 @@ function SessionSidebar({
       className: cn("relative flex shrink-0 flex-col border-r border-border bg-card", className),
       style: { width: resizable ? resize.width : defaultWidth },
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex h-14 shrink-0 items-center border-b border-border px-3", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-b border-border bg-muted/20 px-3 py-1.5", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx7("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
             /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
@@ -1080,7 +1080,7 @@ function SessionSidebar({
                 onChange: (event) => setQuery(event.target.value),
                 placeholder: searchPlaceholder,
                 "aria-label": searchPlaceholder,
-                className: "h-8 w-full rounded-[var(--radius-sm)] border border-border bg-muted pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
+                className: "h-8 w-full rounded-[var(--radius-sm)] border border-transparent bg-muted/40 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
               }
             )
           ] }),
@@ -1104,20 +1104,23 @@ function SessionSidebar({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-lg)] border border-dashed border-border px-3 py-3 text-sm text-muted-foreground", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-px", children: visibleItems.map((item) => {
+        /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-5 w-5 opacity-50", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx7("p", { children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage })
+        ] }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-px", children: visibleItems.map((item) => {
           const session = sessionsById.get(item.id) ?? null;
           const isActive = currentItemId === item.id;
           const status = session?.status ?? item.status;
           const visibleBadges = [
-            ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "accent" }] : [],
+            ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "neutral" }] : [],
             ...item.badges ?? []
           ];
-          return /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs7(
+          return /* @__PURE__ */ jsx7("li", { className: "animate-row-in", children: /* @__PURE__ */ jsxs7(
             "div",
             {
               className: cn(
-                "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 transition-colors",
-                isActive ? "bg-primary/10 font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
+                "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors",
+                isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
               ),
               children: [
                 /* @__PURE__ */ jsxs7(
@@ -1157,7 +1160,7 @@ function SessionSidebar({
                     },
                     badge.id
                   )),
-                  session?.isForeground && /* @__PURE__ */ jsx7("span", { className: "h-1.5 w-1.5 rounded-full bg-primary animate-pulse", title: "Live" }),
+                  session?.isForeground && /* @__PURE__ */ jsx7("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]", title: "Live" }),
                   renderItemActions ? /* @__PURE__ */ jsx7(
                     "div",
                     {

package/dist/{chunk-BJFWPP5T.js → chunk-AWYBQTP6.js}

@@ -2,11 +2,11 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-I64YISXS.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -23,18 +23,11 @@ import {
 } from "@tangle-network/ui/chat";
 
 // src/chat/reasoning-level-picker.tsx
+import { reasoningLadder } from "@tangle-network/agent-interface";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Brain, ChevronDown, Sparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var REASONING_LADDER = [
-  "minimal",
-  "low",
-  "medium",
-  "high",
-  "xhigh",
-  "max",
-  "ultracode"
-];
+var REASONING_LADDER = reasoningLadder;
 function ReasoningGlyph({ level }) {
   if (level === "auto") {
     return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
@@ -64,13 +57,13 @@ function ReasoningGlyph({ level }) {
 }
 var DEFAULT_REASONING_LEVEL_OPTIONS = [
   { value: "auto", label: "Auto", description: "Let the agent pick the right depth." },
-  { value: "minimal", label: "Minimal", description: "Almost no deliberation \u2014 fastest, cheapest." },
+  { value: "none", label: "None", description: "No extended thinking \u2014 fastest, cheapest." },
+  { value: "minimal", label: "Minimal", description: "Thinking on, lowest budget." },
   { value: "low", label: "Low", description: "Fast, direct answers." },
   { value: "medium", label: "Medium", description: "Inspect context before acting." },
   { value: "high", label: "High", description: "Deeper planning and edge-case checks." },
   { value: "xhigh", label: "Extra High", description: "Extended reasoning for hard problems (Codex/OpenAI)." },
-  { value: "max", label: "Max", description: "Maximum extended thinking budget (Claude)." },
-  { value: "ultracode", label: "Ultracode", description: "Exhaustive multi-pass reasoning (Claude Code)." }
+  { value: "ultracode", label: "Ultracode", description: "Maximum extended thinking (Claude Code's ultracode)." }
 ];
 function ReasoningLevelPicker({
   value,
@@ -78,9 +71,11 @@ function ReasoningLevelPicker({
   disabled,
   className,
   triggerClassName,
-  options = DEFAULT_REASONING_LEVEL_OPTIONS
+  options = DEFAULT_REASONING_LEVEL_OPTIONS,
+  available
 }) {
-  const selected = options.find((option) => option.value === value);
+  const shown = available ? options.filter((o) => o.value === "auto" || available.includes(o.value)) : options;
+  const selected = shown.find((option) => option.value === value);
   const label = selected?.label ?? "Auto";
   return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
     /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -91,8 +86,8 @@ function ReasoningLevelPicker({
         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",
+          "hover:border-border hover:bg-muted/40 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "data-[state=open]:border-border data-[state=open]:bg-muted/40",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,
           triggerClassName
@@ -117,7 +112,7 @@ function ReasoningLevelPicker({
           "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__ */ jsxs(
+        children: shown.map((option) => /* @__PURE__ */ jsxs(
           DropdownMenu.Item,
           {
             onSelect: (event) => {
@@ -145,6 +140,7 @@ function ReasoningLevelPicker({
 }
 
 // src/chat/agent-session-controls.tsx
+import { reasoningEffortsFor } from "@tangle-network/agent-interface";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { ChevronDown as ChevronDown2, Lock, SlidersHorizontal } from "lucide-react";
 
@@ -200,6 +196,7 @@ function snapModelToHarness(harness, modelId, models) {
   if (isModelCompatibleWithHarness(harness, modelId)) return modelId;
   const ids = models.map(canonicalModelId);
   const policy = HARNESS_MODEL_POLICIES[harness];
+  if (!policy) return modelId;
   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];
@@ -242,8 +239,8 @@ function HarnessDropdown({
         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/40 focus:outline-none focus:border-primary/40",
-          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/40",
+          "hover:border-border hover:bg-muted/40 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "data-[state=open]:border-border data-[state=open]:bg-muted/40",
           "disabled:cursor-not-allowed disabled:opacity-60"
         ),
         "aria-label": "Agent harness",
@@ -356,7 +353,8 @@ function AgentSessionControls({
       value: reasoning.value,
       onChange: reasoning.onChange,
       options: reasoning.options,
-      disabled: reasoning.disabled
+      disabled: reasoning.disabled,
+      available: harness ? reasoningEffortsFor(harness.value) : reasoning.available
     }
   );
   if (layout === "gear") {
@@ -408,8 +406,8 @@ function GearControls({
               className: cn(
                 "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-card",
                 "text-foreground shadow-sm transition-colors",
-                "hover:border-primary/30 hover:bg-accent/40 focus:outline-none focus:border-primary/40",
-                "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/40"
+                "hover:border-border hover:bg-muted/40 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                "data-[state=open]:border-border data-[state=open]:bg-muted/40"
               ),
               children: /* @__PURE__ */ jsx2(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
             }
@@ -631,14 +629,14 @@ function ArtifactAgentDock({
     "aside",
     {
       className: cn(
-        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-border bg-card/95 shadow-xl",
+        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-border bg-card/95 shadow-[var(--shadow-dropdown)]",
         className
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
         /* @__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(Sparkles2, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx3(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
             /* @__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 })
@@ -690,7 +688,7 @@ function ArtifactAgentDock({
                   placeholder: `Ask about ${heading}\u2026`,
                   rows: 2,
                   disabled: !threadId,
-                  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"
+                  className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:outline-none focus:border-[var(--border-accent)] disabled:opacity-50"
                 }
               ),
               sending ? /* @__PURE__ */ jsx3(
@@ -708,7 +706,7 @@ function ArtifactAgentDock({
                   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",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
                   children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
                 }
               )