@tangle-network/sandbox-ui 0.23.1 → 0.23.3

package/dist/chat.d.ts

@@ -3,7 +3,7 @@ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, Agen
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { M as ModelInfo } from './model-picker-DUfMTQo5.js';
-import { e as HarnessType } from './harness-picker-C1W3rTeb.js';
+import { e as HarnessType } from './harness-picker-ppDe7ap-.js';
 
 type ReasoningLevel = "auto" | "low" | "medium" | "high";
 interface ReasoningLevelOption {

package/dist/chat.js

@@ -16,9 +16,9 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-TAAYDQGM.js";
-import "./chunk-ESRYVGHF.js";
-import "./chunk-4KAPMTPU.js";
+} from "./chunk-H5PBSY62.js";
+import "./chunk-HXIYUQN2.js";
+import "./chunk-JDMX4HHN.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentSessionControls,

package/dist/{chunk-CB3KBKYN.js → chunk-76TCOY2R.js}

@@ -17,7 +17,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
-import { Skeleton } from "@tangle-network/ui/primitives";
+import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -142,6 +142,41 @@ function LogOutIcon({ className }) {
     /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
   ] });
 }
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Light mode icon" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })
+  ] });
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Dark mode icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+  ] });
+}
+function RailThemeToggle({ className }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => setMounted(true), []);
+  const isDark = mounted && (theme === "dark" || theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      "aria-label": "Toggle theme",
+      title: isDark ? "Switch to light mode" : "Switch to dark mode",
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      children: isDark ? /* @__PURE__ */ jsx2(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(MoonIcon, { className: "h-4 w-4" })
+    }
+  );
+}
 function Sidebar({ children, className, style }) {
   const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
   return /* @__PURE__ */ jsx2(
@@ -174,20 +209,20 @@ function SidebarRail({ children, className, wide = false }) {
   );
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-border", className), children });
 }
 function SidebarRailNav({ children, className }) {
-  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
+  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1 min-h-0 overflow-y-auto", className), children });
 }
 function SidebarRailFooter({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3 shrink-0", className), children });
 }
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
 }
 function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }) {
   const classes = cn(
-    "group relative flex items-center justify-center rounded-xl transition-all duration-200",
+    "group relative flex shrink-0 items-center justify-center rounded-xl transition-all duration-200",
     showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
     "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
     "active:scale-95",
@@ -289,13 +324,7 @@ function ProfileAvatar({
             user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
             /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-[10px] bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
           ] }),
-          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2(Skeleton, { className: "mb-1 h-3.5 w-20" }),
-            /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-28" })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }),
-            user?.email && user?.name && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-          ] }) })
+          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsx2(Skeleton, { className: "h-3.5 w-24" }) : /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }) })
         ]
       }
     ) }),
@@ -1562,6 +1591,7 @@ function SidebarLayoutInner({
   onSettingsClick,
   settingsHref,
   profileMenuItems,
+  showThemeToggle = false,
   railFooter,
   LinkComponent,
   hideBelow,
@@ -1603,19 +1633,29 @@ function SidebarLayoutInner({
         ) }),
         (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", railLabels && "items-stretch px-2"), children: [
           railFooter,
-          hasProfile && /* @__PURE__ */ jsx14(
-            ProfileAvatar,
-            {
-              user: user ?? void 0,
-              isLoading,
-              onLogout,
-              onSettingsClick,
-              settingsHref,
-              showDetails: railLabels,
-              LinkComponent: Link,
-              children: profileMenuItems
-            }
-          )
+          hasProfile && (() => {
+            const profile = /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: user ?? void 0,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: railLabels,
+                LinkComponent: Link,
+                children: profileMenuItems
+              }
+            );
+            if (!showThemeToggle) return profile;
+            return railLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+              /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: profile }),
+              /* @__PURE__ */ jsx14(RailThemeToggle, {})
+            ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(RailThemeToggle, {}),
+              profile
+            ] });
+          })()
         ] })
       ] }),
       panel != null && /* @__PURE__ */ jsx14(SidebarPanel, { children: panel })
@@ -2177,14 +2217,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal3 } from "lucide-react";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
-  const [logs, setLogs] = useState4([]);
-  const [error, setError] = useState4(null);
-  const [isFollowing, setIsFollowing] = useState4(true);
+  const [logs, setLogs] = useState5([]);
+  const [error, setError] = useState5(null);
+  const [isFollowing, setIsFollowing] = useState5(true);
   const scrollRef = useRef2(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -2220,7 +2260,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }

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

@@ -1,10 +1,11 @@
 import {
-  HARNESS_OPTIONS
-} from "./chunk-ESRYVGHF.js";
+  HARNESS_OPTIONS,
+  HarnessLogo
+} from "./chunk-HXIYUQN2.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-4KAPMTPU.js";
+} from "./chunk-JDMX4HHN.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -22,8 +23,38 @@ import {
 
 // src/chat/reasoning-level-picker.tsx
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { Brain, ChevronDown } from "lucide-react";
+import { Brain, ChevronDown, Sparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var INTENSITY_BARS = {
+  low: 1,
+  medium: 2,
+  high: 3
+};
+function ReasoningGlyph({ level }) {
+  if (level === "auto") {
+    return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
+  }
+  const filled = INTENSITY_BARS[level];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "inline-flex h-3.5 items-end gap-px",
+      style: { width: 14 },
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "w-1 rounded-[1px]",
+            i < filled ? "bg-foreground" : "bg-border"
+          ),
+          style: { height: `${40 + i * 30}%` }
+        },
+        i
+      ))
+    }
+  );
+}
 var DEFAULT_REASONING_LEVEL_OPTIONS = [
   { value: "auto", label: "Auto", description: "Let the agent pick the right depth." },
   { value: "low", label: "Low", description: "Fast, direct answers." },
@@ -83,13 +114,16 @@ function ReasoningLevelPicker({
               onChange(option.value);
             },
             className: cn(
-              "flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 outline-none",
+              "flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none",
               "transition-colors hover:bg-accent/40 focus:bg-accent/40",
               option.value === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.label }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex w-3.5 shrink-0 justify-center", children: /* @__PURE__ */ jsx(ReasoningGlyph, { level: option.value }) }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+              ] })
             ]
           },
           option.value
@@ -101,7 +135,7 @@ 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";
+import { ChevronDown as ChevronDown2, Lock } from "lucide-react";
 
 // src/chat/harness-model-compat.ts
 var HARNESS_MODEL_POLICIES = {
@@ -122,11 +156,19 @@ var HARNESS_MODEL_POLICIES = {
   },
   amp: { providers: null, preferred: [] },
   "factory-droids": { providers: null, preferred: [] },
-  "cli-base": { providers: null, preferred: [] }
+  "cli-base": { providers: null, preferred: [] },
+  "kimi-code": {
+    providers: ["moonshot"],
+    preferred: [/^moonshot\//]
+  },
+  openclaw: { providers: null, preferred: [] },
+  nanoclaw: { providers: null, preferred: [] },
+  hermes: { providers: null, preferred: [] }
 };
 var PROVIDER_PREFERRED_HARNESS = {
   anthropic: "claude-code",
-  openai: "codex"
+  openai: "codex",
+  moonshot: "kimi-code"
 };
 function modelProvider(modelId) {
   const slash = modelId.indexOf("/");
@@ -193,7 +235,7 @@ function HarnessDropdown({
         ),
         "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" }),
+          locked ? /* @__PURE__ */ jsx2(Lock, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx2(HarnessLogo, { type: value, size: 16 }),
           /* @__PURE__ */ jsx2("span", { children: selected?.label ?? value }),
           !locked && /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
@@ -219,13 +261,16 @@ function HarnessDropdown({
               onChange(option.type);
             },
             className: cn(
-              "flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 outline-none",
+              "flex cursor-pointer items-start gap-2.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 })
+              /* @__PURE__ */ jsx2(HarnessLogo, { type: option.type, size: 20, className: "mt-0.5" }),
+              /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-col gap-0.5", 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
@@ -300,7 +345,7 @@ function AgentSessionControls({
 
 // src/chat/artifact-agent-dock.tsx
 import * as React from "react";
-import { Sparkles, Send, Square, X } from "lucide-react";
+import { Sparkles as Sparkles2, Send, Square, X } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
@@ -479,7 +524,7 @@ function ArtifactAgentDock({
       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(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx3(Sparkles2, { 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 })
@@ -497,7 +542,7 @@ function ArtifactAgentDock({
           )
         ] }),
         /* @__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__ */ jsx3(Sparkles2, { 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,