@tangle-network/sandbox-ui 0.26.0 → 0.27.0

package/dist/chat.d.ts

@@ -2,8 +2,8 @@ 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 * as React from 'react';
-import { M as ModelInfo } from './model-picker-DUfMTQo5.js';
-import { e as HarnessType } from './harness-picker-ppDe7ap-.js';
+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
@@ -77,6 +77,22 @@ interface AgentSessionControlsProps {
     /** Right-aligned extra content (token meter, cost, status). */
     trailing?: React.ReactNode;
     className?: string;
+    /**
+     * Which surface these controls live on. `"chat"` (default) restricts the
+     * harness list to chat-capable backends — shell-only `cli-base` is hidden
+     * because it has no conversational agent. `"all"` keeps every harness for
+     * scheduled / non-chat surfaces. An explicit `harness.available` list still
+     * wins; this only trims the default-everything set.
+     */
+    context?: "chat" | "all";
+    /**
+     * Trigger layout. `"inline"` (default) lays the pickers out in a row — the
+     * existing behavior. `"gear"` collapses them behind a single compact gear
+     * button whose menu opens up-and-left, for right-anchored copilots where
+     * the composer is tight. Nested model/harness/effort menus render adjacent
+     * on the left of the gear menu.
+     */
+    layout?: "inline" | "gear";
 }
 /**
  * Compact control strip for an agent chat composer: harness, model, and
@@ -92,7 +108,7 @@ interface AgentSessionControlsProps {
  *
  * Designed to slot into `SandboxWorkbench`'s `session.composerControls`.
  */
-declare function AgentSessionControls({ harness, model, reasoning, trailing, className, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentSessionControls({ harness, model, reasoning, trailing, className, context, layout, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Harness ↔ model compatibility policy.

package/dist/chat.js

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

package/dist/{chunk-JDMX4HHN.js → chunk-6NQBODYV.js}

@@ -145,6 +145,38 @@ function canonicalModelId(model) {
   const provider = model._provider ?? model.provider;
   return provider ? `${provider}/${id}` : id;
 }
+function modelDedupKey(model) {
+  const canonical = canonicalModelId(model).toLowerCase();
+  const segments = canonical.split("/").filter(Boolean);
+  const modelId = segments[segments.length - 1] ?? canonical;
+  const lab = resolveModelBrandIdentity(model).lab.key;
+  return lab === "unknown" ? canonical : `${lab}/${modelId}`;
+}
+function dedupeModels(models) {
+  const byKey = /* @__PURE__ */ new Map();
+  const result = [];
+  for (const model of models) {
+    const key = modelDedupKey(model);
+    const existingIndex = byKey.get(key);
+    if (existingIndex === void 0) {
+      byKey.set(key, result.length);
+      result.push(model);
+      continue;
+    }
+    const existing = result[existingIndex];
+    if (!existing.featured && model.featured) {
+      result[existingIndex] = model;
+    }
+  }
+  return result;
+}
+var DEFAULT_FEATURED_MODEL_IDS = [
+  "anthropic/claude-opus-4-8",
+  "anthropic/claude-sonnet-4-6",
+  "openai/gpt-5.4",
+  "google/gemini-2.5-pro",
+  "deepseek/deepseek-v3"
+];
 function formatPricing(pricing) {
   const prompt = Number(pricing?.prompt ?? 0);
   const completion = Number(pricing?.completion ?? 0);
@@ -229,11 +261,12 @@ function ModelPicker({
     });
     return () => cancelAnimationFrame(frame);
   }, [open]);
+  const deduped = React.useMemo(() => dedupeModels(models), [models]);
   const filtered = React.useMemo(() => {
     const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
     const allowedModalities = modalities ? new Set(modalities) : null;
     const q = query.trim().toLowerCase();
-    return models.filter((m) => {
+    return deduped.filter((m) => {
       const provider = (m._provider ?? m.provider ?? "").toLowerCase();
       if (excluded.has(provider)) return false;
       if (allowedModalities && m.architecture?.modality && !allowedModalities.has(m.architecture.modality)) return false;
@@ -243,7 +276,7 @@ function ModelPicker({
       const identity = resolveModelBrandIdentity(m);
       return id.includes(q) || name.includes(q) || provider.includes(q) || identity.host.label.toLowerCase().includes(q) || identity.lab.label.toLowerCase().includes(q);
     });
-  }, [models, query, modalities, excludeProviders]);
+  }, [deduped, query, modalities, excludeProviders]);
   const grouped = React.useMemo(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const m of filtered) {
@@ -270,6 +303,18 @@ function ModelPicker({
     const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
     return popular.map((id) => lookup.get(id)).filter((m) => Boolean(m));
   }, [popular, models]);
+  const featuredModels = React.useMemo(() => {
+    const flagged = deduped.filter((m) => m.featured);
+    if (flagged.length > 0) return flagged;
+    const seedKeys = new Set(
+      DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }))
+    );
+    const seeded = deduped.filter((m) => seedKeys.has(modelDedupKey(m)));
+    const order = DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }));
+    return seeded.sort(
+      (a, b) => order.indexOf(modelDedupKey(a)) - order.indexOf(modelDedupKey(b))
+    );
+  }, [deduped]);
   const handleSelect = (id) => {
     onChange(id);
     setOpen(false);
@@ -363,6 +408,16 @@ function ModelPicker({
               loading && /* @__PURE__ */ jsx2(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto", children: [
+              !query && featuredModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Recommended", tone: "featured", children: featuredModels.map((m) => /* @__PURE__ */ jsx2(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect,
+                  featured: true
+                },
+                `featured-${canonicalModelId(m)}`
+              )) }),
               !query && popularModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Top models", tone: "featured", children: popularModels.map((m) => /* @__PURE__ */ jsx2(
                 ModelRow,
                 {
@@ -395,9 +450,9 @@ function ModelPicker({
             /* @__PURE__ */ jsxs2("div", { className: "border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground", children: [
               filtered.length,
               " of ",
-              models.length,
+              deduped.length,
               " model",
-              models.length === 1 ? "" : "s"
+              deduped.length === 1 ? "" : "s"
             ] })
           ]
         }
@@ -438,11 +493,11 @@ function PickerItem({
         onSelect();
       },
       className: cn(
-        "flex cursor-pointer items-start gap-2 px-3 py-2 outline-none",
+        "flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 outline-none",
         "transition-colors duration-[var(--transition-fast)]",
-        "hover:bg-accent/40 focus:bg-accent/40",
-        featured && "mx-1 rounded-lg border border-primary/10 bg-primary/[0.035] px-2.5",
-        active && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+        "hover:bg-accent/50 focus:bg-accent/50",
+        featured && "mx-1 border border-primary/10 bg-primary/[0.04] px-2.5",
+        active && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
       ),
       children
     }
@@ -715,6 +770,9 @@ var BRAND_INFO = {
 export {
   moonshot_default,
   canonicalModelId,
+  modelDedupKey,
+  dedupeModels,
+  DEFAULT_FEATURED_MODEL_IDS,
   formatPricing,
   formatContext,
   ModelPicker

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

@@ -1,11 +1,12 @@
 import {
   HARNESS_OPTIONS,
-  HarnessLogo
-} from "./chunk-HXIYUQN2.js";
+  HarnessLogo,
+  chatCapableHarnesses
+} from "./chunk-ELGN7DPS.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-JDMX4HHN.js";
+} from "./chunk-6NQBODYV.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -145,7 +146,7 @@ function ReasoningLevelPicker({
 
 // src/chat/agent-session-controls.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { ChevronDown as ChevronDown2, Lock } from "lucide-react";
+import { ChevronDown as ChevronDown2, Lock, SlidersHorizontal } from "lucide-react";
 
 // src/chat/harness-model-compat.ts
 var HARNESS_MODEL_POLICIES = {
@@ -222,7 +223,9 @@ function HarnessDropdown({
   available,
   disabled,
   locked,
-  lockReason
+  lockReason,
+  side = "bottom",
+  align = "start"
 }) {
   const allowed = new Set(
     available ?? HARNESS_OPTIONS.map((h) => h.type)
@@ -239,8 +242,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/30 focus:outline-none focus:border-primary/40",
-          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+          "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",
           "disabled:cursor-not-allowed disabled:opacity-60"
         ),
         "aria-label": "Agent harness",
@@ -254,7 +257,8 @@ function HarnessDropdown({
     /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx2(
       DropdownMenu2.Content,
       {
-        align: "start",
+        side,
+        align,
         sideOffset: 6,
         className: cn(
           "z-50 w-72 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
@@ -272,8 +276,8 @@ function HarnessDropdown({
             },
             className: cn(
               "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)]"
+              "transition-colors hover:bg-accent/50 focus:bg-accent/50",
+              option.type === value && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
             ),
             children: [
               /* @__PURE__ */ jsx2(HarnessLogo, { type: option.type, size: 20, className: "mt-0.5" }),
@@ -294,7 +298,9 @@ function AgentSessionControls({
   model,
   reasoning,
   trailing,
-  className
+  className,
+  context = "chat",
+  layout = "inline"
 }) {
   if (!harness && !model && !reasoning && !trailing) return null;
   const handleHarnessChange = (next) => {
@@ -317,41 +323,139 @@ function AgentSessionControls({
       canonicalModelId(entry)
     )
   ) : model?.models;
+  const harnessAvailable = harness?.available ?? (context === "chat" ? chatCapableHarnesses : void 0);
+  const menuSide = layout === "gear" ? "left" : "bottom";
+  const menuAlign = layout === "gear" ? "end" : "start";
+  const harnessNode = harness && /* @__PURE__ */ jsx2(
+    HarnessDropdown,
+    {
+      ...harness,
+      available: harnessAvailable,
+      onChange: handleHarnessChange,
+      side: menuSide,
+      align: menuAlign
+    }
+  );
+  const modelNode = model && /* @__PURE__ */ jsx2(
+    ModelPicker,
+    {
+      variant: "pill",
+      label: "",
+      value: model.value,
+      onChange: handleModelChange,
+      models: visibleModels ?? [],
+      loading: model.loading,
+      popular: model.popular,
+      recents: model.recents,
+      disabled: model.disabled || (visibleModels ?? []).length === 0
+    }
+  );
+  const reasoningNode = reasoning && /* @__PURE__ */ jsx2(
+    ReasoningLevelPicker,
+    {
+      value: reasoning.value,
+      onChange: reasoning.onChange,
+      options: reasoning.options,
+      disabled: reasoning.disabled
+    }
+  );
+  if (layout === "gear") {
+    return /* @__PURE__ */ jsx2(
+      GearControls,
+      {
+        className,
+        harnessNode,
+        modelNode,
+        reasoningNode,
+        trailing
+      }
+    );
+  }
   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, onChange: handleHarnessChange }),
-        model && /* @__PURE__ */ jsx2(
-          ModelPicker,
-          {
-            variant: "pill",
-            label: "",
-            value: model.value,
-            onChange: handleModelChange,
-            models: visibleModels ?? [],
-            loading: model.loading,
-            popular: model.popular,
-            recents: model.recents,
-            disabled: model.disabled || (visibleModels ?? []).length === 0
-          }
-        ),
-        reasoning && /* @__PURE__ */ jsx2(
-          ReasoningLevelPicker,
-          {
-            value: reasoning.value,
-            onChange: reasoning.onChange,
-            options: reasoning.options,
-            disabled: reasoning.disabled
-          }
-        ),
+        harnessNode,
+        modelNode,
+        reasoningNode,
         trailing && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex items-center gap-2", children: trailing })
       ]
     }
   );
 }
+function GearControls({
+  className,
+  harnessNode,
+  modelNode,
+  reasoningNode,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-testid": "agent-session-controls",
+      children: [
+        trailing && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: trailing }),
+        /* @__PURE__ */ jsxs2(DropdownMenu2.Root, { children: [
+          /* @__PURE__ */ jsx2(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Session controls",
+              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"
+              ),
+              children: /* @__PURE__ */ jsx2(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs2(
+            DropdownMenu2.Content,
+            {
+              side: "top",
+              align: "end",
+              sideOffset: 8,
+              onInteractOutside: (event) => {
+                const target = event.target;
+                if (target?.closest(
+                  "[data-radix-popper-content-wrapper],[data-radix-menu-content],[role=menu],[role=listbox]"
+                )) {
+                  event.preventDefault();
+                }
+              },
+              className: cn(
+                "z-50 flex w-56 flex-col gap-2 rounded-[var(--radius-md)] border border-border bg-card p-2",
+                "shadow-[var(--shadow-dropdown)]",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out",
+                "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: [
+                harnessNode && /* @__PURE__ */ jsx2(GearSection, { label: "Harness", children: harnessNode }),
+                modelNode && /* @__PURE__ */ jsx2(GearSection, { label: "Model", children: modelNode }),
+                reasoningNode && /* @__PURE__ */ jsx2(GearSection, { label: "Effort", children: reasoningNode })
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function GearSection({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx2("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
+    children
+  ] });
+}
 
 // src/chat/artifact-agent-dock.tsx
 import * as React from "react";

package/dist/{chunk-HXIYUQN2.js → chunk-ELGN7DPS.js}

@@ -1,6 +1,6 @@
 import {
   moonshot_default
-} from "./chunk-JDMX4HHN.js";
+} from "./chunk-6NQBODYV.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -166,54 +166,65 @@ var HARNESS_OPTIONS = [
   {
     type: "opencode",
     label: "OpenCode",
-    description: "Default agent \u2014 broad model support, deterministic streaming"
+    description: "Default agent \u2014 broad model support, deterministic streaming",
+    chatCapable: true
   },
   {
     type: "claude-code",
     label: "Claude Code",
-    description: "Native Claude skills and tools (requires ANTHROPIC_API_KEY)"
+    description: "Native Claude skills and tools (requires ANTHROPIC_API_KEY)",
+    chatCapable: true
   },
   {
     type: "codex",
     label: "Codex",
-    description: "OpenAI Codex CLI (requires OPENAI_API_KEY)"
+    description: "OpenAI Codex CLI (requires OPENAI_API_KEY)",
+    chatCapable: true
   },
   {
     type: "amp",
     label: "AMP",
-    description: "Sourcegraph AMP agent"
+    description: "Sourcegraph AMP agent",
+    chatCapable: true
   },
   {
     type: "factory-droids",
     label: "Factory Droids",
-    description: "Factory Droid agent"
+    description: "Factory Droid agent",
+    chatCapable: true
   },
   {
     type: "kimi-code",
     label: "Kimi Code",
-    description: "Moonshot Kimi Code CLI (Kimi subscription OAuth or MOONSHOT_API_KEY)"
+    description: "Moonshot Kimi Code CLI (Kimi subscription OAuth or MOONSHOT_API_KEY)",
+    chatCapable: true
   },
   {
     type: "openclaw",
     label: "OpenClaw",
-    description: "Dispatcher routing to Claude / Codex / Gemini CLIs"
+    description: "Dispatcher routing to Claude / Codex / Gemini CLIs",
+    chatCapable: true
   },
   {
     type: "nanoclaw",
     label: "NanoClaw",
-    description: "Local socket-bridge agent backend"
+    description: "Local socket-bridge agent backend",
+    chatCapable: true
   },
   {
     type: "hermes",
     label: "Hermes",
-    description: "Hermes inference-router agent"
+    description: "Hermes inference-router agent",
+    chatCapable: true
   },
   {
     type: "cli-base",
     label: "CLI base (no agent)",
-    description: "Shell tools only \u2014 for non-AI scheduled tasks"
+    description: "Shell tools only \u2014 for non-AI scheduled tasks",
+    chatCapable: false
   }
 ];
+var chatCapableHarnesses = HARNESS_OPTIONS.filter((h) => h.chatCapable).map((h) => h.type);
 function HarnessPicker({
   value,
   onChange,
@@ -249,5 +260,6 @@ export {
   HARNESS_BRAND,
   HarnessLogo,
   HARNESS_OPTIONS,
+  chatCapableHarnesses,
   HarnessPicker
 };

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

@@ -975,31 +975,31 @@ 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__ */ jsxs7("div", { className: "border-b border-border px-3 py-2.5", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx7("div", { className: "flex h-6 w-6 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 w-3" }) }),
-              /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx7("div", { className: "truncate text-xs font-semibold text-foreground", children: title }),
-                subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] text-muted-foreground", children: subtitle })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-              runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-px text-[10px] font-medium text-primary", children: runningCount }),
-              onCreate && /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  onClick: onCreate,
-                  title: createLabel,
-                  className: "flex h-6 w-6 items-center justify-center rounded-[var(--radius-sm)] border border-border text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-                  children: /* @__PURE__ */ jsx7(Plus, { className: "h-3 w-3" })
-                }
-              )
+        /* @__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__ */ 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: [
+              /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-semibold text-foreground", children: title }),
+              subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-xs text-muted-foreground", children: subtitle })
             ] })
           ] }),
-          enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-2", children: [
-            /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+            runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-px text-xs font-medium text-primary", children: runningCount }),
+            onCreate && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: onCreate,
+                title: createLabel,
+                className: "flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-border text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                children: /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] })
+        ] }) }),
+        (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "shrink-0 border-b border-border px-3 py-2.5", children: [
+          enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
             /* @__PURE__ */ jsx7(
               "input",
               {
@@ -1007,11 +1007,11 @@ function SessionSidebar({
                 onChange: (event) => setQuery(event.target.value),
                 placeholder: searchPlaceholder,
                 "aria-label": searchPlaceholder,
-                className: "h-7 w-full rounded-[var(--radius-sm)] border border-border bg-muted pl-7 pr-2 text-xs 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-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)]"
               }
             )
           ] }),
-          filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex flex-wrap gap-1", children: filters.map((filter) => {
+          filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: cn("flex flex-wrap gap-1", enableSearch && items.length > 0 && "mt-2"), children: filters.map((filter) => {
             const isSelected = activeFilterId === filter.id;
             return /* @__PURE__ */ jsxs7(
               "button",
@@ -1019,19 +1019,19 @@ function SessionSidebar({
                 type: "button",
                 onClick: () => setActiveFilterId(filter.id),
                 className: cn(
-                  "inline-flex items-center gap-1 rounded-full border px-2 py-px text-[10px] font-medium transition-colors",
+                  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
                   isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-border text-muted-foreground hover:text-foreground"
                 ),
                 children: [
                   /* @__PURE__ */ jsx7("span", { children: filter.label }),
-                  /* @__PURE__ */ jsx7("span", { className: "text-[9px] opacity-60", children: filterCounts[filter.id] ?? 0 })
+                  /* @__PURE__ */ jsx7("span", { className: "text-[11px] opacity-60", children: filterCounts[filter.id] ?? 0 })
                 ]
               },
               filter.id
             );
           }) })
         ] }),
-        /* @__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-xs 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__ */ 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) => {
           const session = sessionsById.get(item.id) ?? null;
           const isActive = currentItemId === item.id;
           const status = session?.status ?? item.status;
@@ -1043,8 +1043,8 @@ function SessionSidebar({
             "div",
             {
               className: cn(
-                "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 transition-colors",
-                isActive ? "bg-[var(--accent-surface-soft)] text-foreground shadow-[inset_2px_0_0_hsl(var(--primary))]" : "text-muted-foreground hover:bg-muted"
+                "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"
               ),
               children: [
                 /* @__PURE__ */ jsxs7(
@@ -1064,10 +1064,10 @@ function SessionSidebar({
                       /* @__PURE__ */ jsx7("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", statusDot(status)) }),
                       /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
                         /* @__PURE__ */ jsx7("div", { className: cn(
-                          "truncate text-xs",
-                          isActive ? "font-semibold text-foreground" : "font-medium"
+                          "truncate text-sm font-medium",
+                          isActive && "text-foreground"
                         ), children: item.title }),
-                        item.subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] leading-tight text-muted-foreground", children: item.subtitle })
+                        item.subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: item.subtitle })
                       ] })
                     ]
                   }
@@ -1112,9 +1112,9 @@ function SessionSidebar({
                 }
                 navigateToHref(link.href);
               },
-              className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/30 hover:text-foreground",
               children: [
-                /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                /* @__PURE__ */ jsx7(Icon, { className: "h-4 w-4 shrink-0" }),
                 /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
               ]
             },