@tangle-network/sandbox-ui 0.57.0 → 0.59.0

package/dist/{chunk-NHHYPID3.js → chunk-4XOZGMJC.js}

@@ -146,78 +146,308 @@ 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";
+import { ChevronDown as ChevronDown3, Lock, SlidersHorizontal } 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: [] },
-  "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",
-  moonshot: "kimi-code"
-};
-function modelProvider(modelId) {
-  const slash = modelId.indexOf("/");
-  return slash > 0 ? modelId.slice(0, slash) : null;
-}
+import {
+  harnessSupportsModel,
+  snapModelToHarness as snapModelIdToHarness
+} from "@tangle-network/agent-interface";
+import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
 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);
+  return harnessSupportsModel(harness, modelId);
 }
-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];
-  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];
+  return snapModelIdToHarness(harness, modelId, models.map(canonicalModelId));
+}
+
+// src/chat/agent-profile-picker.tsx
+import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useClickOutside(onOutside) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    function handler(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onOutside();
+      }
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onOutside]);
+  return ref;
+}
+function profileSubtitle(profile) {
+  if (profile.description) return profile.description;
+  const count = profile.capabilities?.length ?? 0;
+  return `${count} ${count === 1 ? "tool group" : "tool groups"}`;
+}
+function AgentProfilePicker({
+  value,
+  onChange,
+  profiles,
+  capabilities,
+  onCreate,
+  onUpdate,
+  onDelete,
+  disabled,
+  className,
+  side = "top"
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [composing, setComposing] = React.useState(
+    null
+  );
+  const ref = useClickOutside(() => {
+    setOpen(false);
+    setComposing(null);
+  });
+  const canAuthor = Boolean(capabilities && (onCreate || onUpdate));
+  const builtins = profiles.filter((profile) => profile.builtin);
+  const custom = profiles.filter((profile) => !profile.builtin);
+  const selected = profiles.find((profile) => profile.id === value);
+  function select(id) {
+    onChange(id);
+    setOpen(false);
+  }
+  async function save(draft) {
+    if (draft.id) await onUpdate?.(draft.id, draft);
+    else await onCreate?.(draft);
+    setComposing(null);
   }
-  const fallback = ids.find(
-    (id) => isModelCompatibleWithHarness(harness, id)
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative inline-flex", className), children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
+          "text-xs font-medium text-foreground shadow-sm transition-colors",
+          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ),
+        "data-state": open ? "open" : "closed",
+        "aria-label": "Agent profile",
+        children: [
+          /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { className: "max-w-[140px] truncate", children: selected?.name ?? value }),
+          /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "absolute left-0 z-50 w-[320px] overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
+          "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+          side === "top" ? "bottom-full mb-2" : "top-full mt-2"
+        ),
+        children: composing ? /* @__PURE__ */ jsx2(
+          ProfileForm,
+          {
+            capabilities: capabilities ?? [],
+            initial: composing === "new" ? void 0 : composing,
+            onCancel: () => setComposing(null),
+            onSave: save
+          }
+        ) : /* @__PURE__ */ jsxs2("div", { className: "max-h-[min(60vh,420px)] overflow-y-auto", children: [
+          /* @__PURE__ */ jsx2(SectionHeader, { children: "Modes" }),
+          builtins.map((profile) => /* @__PURE__ */ jsx2(
+            ProfileRow,
+            {
+              active: profile.id === value,
+              title: profile.name,
+              subtitle: profileSubtitle(profile),
+              onSelect: () => select(profile.id)
+            },
+            profile.id
+          )),
+          custom.length > 0 && /* @__PURE__ */ jsx2(SectionHeader, { children: "Your agents" }),
+          custom.map((profile) => /* @__PURE__ */ jsx2(
+            ProfileRow,
+            {
+              active: profile.id === value,
+              title: profile.name,
+              subtitle: profileSubtitle(profile),
+              onSelect: () => select(profile.id),
+              onEdit: canAuthor ? () => setComposing(profile) : void 0,
+              onDelete: onDelete ? () => void onDelete(profile.id) : void 0
+            },
+            profile.id
+          )),
+          canAuthor && /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setComposing("new"),
+              className: "mt-1 flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-[var(--accent-text)] transition-colors hover:bg-accent/40",
+              children: [
+                /* @__PURE__ */ jsx2(Plus, { className: "h-4 w-4" }),
+                " New agent\u2026"
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children });
+}
+function ProfileRow({
+  active,
+  title,
+  subtitle,
+  onSelect,
+  onEdit,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors",
+        active ? "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-accent/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            onClick: onSelect,
+            className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: active && /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx2("span", { className: "block truncate font-medium", children: title }),
+                /* @__PURE__ */ jsx2("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })
+              ] })
+            ]
+          }
+        ),
+        (onEdit || onDelete) && /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
+          onEdit && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onEdit,
+              title: "Edit",
+              className: "rounded p-1 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx2(Pencil, { className: "h-3 w-3" })
+            }
+          ),
+          onDelete && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onDelete,
+              title: "Delete",
+              className: "rounded p-1 text-muted-foreground hover:text-[var(--status-error,#ff4d6d)]",
+              children: /* @__PURE__ */ jsx2(Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] })
+      ]
+    }
   );
-  return fallback ?? modelId;
 }
-function snapHarnessToModel(harness, modelId) {
-  if (isModelCompatibleWithHarness(harness, modelId)) return harness;
-  const provider = modelProvider(modelId);
-  return provider && PROVIDER_PREFERRED_HARNESS[provider] || "opencode";
+function ProfileForm({
+  capabilities,
+  initial,
+  onCancel,
+  onSave
+}) {
+  const [name, setName] = React.useState(initial?.name ?? "");
+  const [caps, setCaps] = React.useState(
+    initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
+  );
+  const [instructions, setInstructions] = React.useState(initial?.instructions ?? "");
+  const toggle = (id) => setCaps(
+    (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3 p-2.5", children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        autoFocus: true,
+        value: name,
+        onChange: (event) => setName(event.target.value),
+        placeholder: "Agent name (e.g. Tax Reviewer)",
+        className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
+      }
+    ),
+    capabilities.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: "Tools" }),
+      /* @__PURE__ */ jsx2("div", { className: "space-y-0.5", children: capabilities.map((cap) => /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          className: "flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 hover:bg-accent/40",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "checkbox",
+                checked: caps.includes(cap.id),
+                onChange: () => toggle(cap.id),
+                className: "mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx2("span", { className: "block text-sm font-medium", children: cap.label }),
+              cap.description && /* @__PURE__ */ jsx2("span", { className: "block text-xs text-muted-foreground", children: cap.description })
+            ] })
+          ]
+        },
+        cap.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        value: instructions,
+        onChange: (event) => setInstructions(event.target.value),
+        rows: 2,
+        placeholder: "Instructions (optional) \u2014 how this agent should behave",
+        className: "w-full resize-none rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent/40",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          disabled: !name.trim(),
+          onClick: () => onSave({
+            id: initial?.id,
+            name: name.trim(),
+            capabilities: caps,
+            instructions: instructions.trim()
+          }),
+          className: "rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+          children: "Save agent"
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/chat/agent-session-controls.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function HarnessDropdown({
   value,
   onChange,
@@ -234,8 +464,8 @@ function HarnessDropdown({
   );
   const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
   const selected = options.find((option) => option.type === value);
-  return /* @__PURE__ */ jsxs2(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx2(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -250,13 +480,13 @@ function HarnessDropdown({
         ),
         "aria-label": "Agent harness",
         children: [
-          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" })
+          locked ? /* @__PURE__ */ jsx3(Lock, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16 }),
+          /* @__PURE__ */ jsx3("span", { children: selected?.label ?? value }),
+          !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx3(
       DropdownMenu2.Content,
       {
         side,
@@ -274,7 +504,7 @@ function HarnessDropdown({
           "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__ */ jsxs2(
+        children: options.map((option) => /* @__PURE__ */ jsxs3(
           DropdownMenu2.Item,
           {
             onSelect: (event) => {
@@ -287,10 +517,10 @@ function HarnessDropdown({
               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" }),
-              /* @__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 })
+              /* @__PURE__ */ jsx3(HarnessLogo, { type: option.type, size: 20, className: "mt-0.5" }),
+              /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: option.label }),
+                option.description && /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground", children: option.description })
               ] })
             ]
           },
@@ -302,6 +532,7 @@ function HarnessDropdown({
 }
 function AgentSessionControls({
   harness,
+  profile,
   model,
   reasoning,
   trailing,
@@ -310,7 +541,7 @@ function AgentSessionControls({
   layout = "inline",
   menuPlacement = "auto"
 }) {
-  if (!harness && !model && !reasoning && !trailing) return null;
+  if (!harness && !profile && !model && !reasoning && !trailing) return null;
   const handleHarnessChange = (next) => {
     harness?.onChange(next);
     if (model) {
@@ -336,7 +567,7 @@ function AgentSessionControls({
   const menuAlign = layout === "gear" ? "end" : "start";
   const inlineForceDown = menuPlacement === "down" && layout !== "gear";
   const avoidCollisions = inlineForceDown ? false : void 0;
-  const harnessNode = harness && /* @__PURE__ */ jsx2(
+  const harnessNode = harness && /* @__PURE__ */ jsx3(
     HarnessDropdown,
     {
       ...harness,
@@ -347,7 +578,21 @@ function AgentSessionControls({
       avoidCollisions
     }
   );
-  const modelNode = model && /* @__PURE__ */ jsx2(
+  const profileNode = profile && /* @__PURE__ */ jsx3(
+    AgentProfilePicker,
+    {
+      value: profile.value,
+      onChange: profile.onChange,
+      profiles: profile.profiles,
+      capabilities: profile.capabilities,
+      onCreate: profile.onCreate,
+      onUpdate: profile.onUpdate,
+      onDelete: profile.onDelete,
+      disabled: profile.disabled,
+      side: inlineForceDown || layout === "gear" ? "bottom" : "top"
+    }
+  );
+  const modelNode = model && /* @__PURE__ */ jsx3(
     ModelPicker,
     {
       variant: "pill",
@@ -370,7 +615,7 @@ function AgentSessionControls({
     supportsReasoning: selectedModel.supportsReasoning,
     maxEffort: selectedModel.maxReasoningEffort
   } : null;
-  const reasoningNode = reasoning && /* @__PURE__ */ jsx2(
+  const reasoningNode = reasoning && /* @__PURE__ */ jsx3(
     ReasoningLevelPicker,
     {
       value: reasoning.value,
@@ -383,10 +628,11 @@ function AgentSessionControls({
     }
   );
   if (layout === "gear") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       GearControls,
       {
         className,
+        profileNode,
         harnessNode,
         modelNode,
         reasoningNode,
@@ -394,36 +640,38 @@ function AgentSessionControls({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn("flex flex-wrap items-center gap-2", className),
       "data-testid": "agent-session-controls",
       children: [
+        profileNode,
         harnessNode,
         modelNode,
         reasoningNode,
-        trailing && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+        trailing && /* @__PURE__ */ jsx3("div", { className: "ml-auto flex items-center gap-2", children: trailing })
       ]
     }
   );
 }
 function GearControls({
   className,
+  profileNode,
   harnessNode,
   modelNode,
   reasoningNode,
   trailing
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "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(
+        trailing && /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: trailing }),
+        /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
+          /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -434,10 +682,10 @@ function GearControls({
                 "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                 "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high"
               ),
-              children: /* @__PURE__ */ jsx2(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
+              children: /* @__PURE__ */ jsx3(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
             }
           ) }),
-          /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
             DropdownMenu2.Content,
             {
               side: "top",
@@ -459,9 +707,10 @@ function GearControls({
                 "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 })
+                profileNode && /* @__PURE__ */ jsx3(GearSection, { label: "Agent", children: profileNode }),
+                harnessNode && /* @__PURE__ */ jsx3(GearSection, { label: "Harness", children: harnessNode }),
+                modelNode && /* @__PURE__ */ jsx3(GearSection, { label: "Model", children: modelNode }),
+                reasoningNode && /* @__PURE__ */ jsx3(GearSection, { label: "Effort", children: reasoningNode })
               ]
             }
           ) })
@@ -474,17 +723,123 @@ 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 }),
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
     children
   ] });
 }
 
+// src/chat/agent-composer.tsx
+import { ArrowUp, Loader2 } from "lucide-react";
+import * as React2 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AgentComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Send a message\u2026",
+  disabled,
+  busy,
+  harness,
+  profile,
+  model,
+  reasoning,
+  context = "chat",
+  trailing,
+  minRows = 2,
+  maxHeight = 200,
+  className,
+  sendLabel = "Send",
+  autoFocus
+}) {
+  const textareaRef = React2.useRef(null);
+  const resize = React2.useCallback(
+    (el) => {
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    },
+    [maxHeight]
+  );
+  React2.useEffect(() => {
+    if (textareaRef.current) resize(textareaRef.current);
+  }, [value, resize]);
+  const canSend = !disabled && !busy && value.trim().length > 0;
+  const submit = () => {
+    if (!canSend) return;
+    onSubmit();
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-testid": "agent-composer",
+      className: cn(
+        "flex flex-col gap-2 rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container-high p-2.5 shadow-sm transition-colors",
+        "focus-within:border-primary/60",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            ref: textareaRef,
+            rows: minRows,
+            value,
+            disabled,
+            autoFocus,
+            onChange: (event) => onChange(event.target.value),
+            onInput: (event) => resize(event.currentTarget),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
+                event.preventDefault();
+                submit();
+              }
+            },
+            placeholder,
+            className: cn(
+              "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
+              "placeholder:text-muted-foreground"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            AgentSessionControls,
+            {
+              className: "min-w-0 flex-1",
+              context,
+              harness,
+              profile,
+              model,
+              reasoning
+            }
+          ),
+          trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: submit,
+              disabled: !canSend,
+              "aria-label": sendLabel,
+              className: cn(
+                "ml-auto flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
+                "transition-opacity hover:opacity-90 disabled:opacity-40"
+              ),
+              children: busy ? /* @__PURE__ */ jsx4(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/chat/artifact-agent-dock.tsx
-import * as React from "react";
+import * as React3 from "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";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
   switch (scope.kind) {
@@ -530,23 +885,23 @@ function ArtifactAgentDock({
   onError,
   className
 }) {
-  const [threadId, setThreadId] = React.useState(null);
-  const [messages, setMessages] = React.useState([]);
-  const [composer, setComposer] = React.useState(defaultPrompt ?? "");
-  const [streamContent, setStreamContent] = React.useState("");
-  const [sending, setSending] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
-  const abortRef = React.useRef(null);
-  const scrollRef = React.useRef(null);
-  const scopeTokenRef = React.useRef(0);
-  const reportError = React.useCallback(
+  const [threadId, setThreadId] = React3.useState(null);
+  const [messages, setMessages] = React3.useState([]);
+  const [composer, setComposer] = React3.useState(defaultPrompt ?? "");
+  const [streamContent, setStreamContent] = React3.useState("");
+  const [sending, setSending] = React3.useState(false);
+  const [loading, setLoading] = React3.useState(false);
+  const abortRef = React3.useRef(null);
+  const scrollRef = React3.useRef(null);
+  const scopeTokenRef = React3.useRef(0);
+  const reportError = React3.useCallback(
     (message) => {
       if (onError) onError(message);
       else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
     },
     [onError]
   );
-  React.useEffect(() => {
+  React3.useEffect(() => {
     if (!open) return;
     scopeTokenRef.current += 1;
     abortRef.current?.abort();
@@ -582,11 +937,11 @@ function ArtifactAgentDock({
       cancelled = true;
     };
   }, [open, scope.kind, scope.key, transport, reportError]);
-  React.useEffect(() => {
+  React3.useEffect(() => {
     if (!scrollRef.current) return;
     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
   }, [messages.length, streamContent]);
-  const send = React.useCallback(async () => {
+  const send = React3.useCallback(async () => {
     const text = composer.trim();
     if (!text || !threadId || sending) return;
     const token = scopeTokenRef.current;
@@ -636,7 +991,7 @@ function ArtifactAgentDock({
       if (abortRef.current === controller) abortRef.current = null;
     }
   }, [composer, threadId, sending, transport, reportError]);
-  const cancel = React.useCallback(() => {
+  const cancel = React3.useCallback(() => {
     if (threadId && transport.cancel) {
       try {
         void Promise.resolve(transport.cancel({ threadId })).catch(() => {
@@ -650,7 +1005,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "aside",
     {
       className: cn(
@@ -659,38 +1014,38 @@ function ArtifactAgentDock({
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
-        /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low 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-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 })
+        /* @__PURE__ */ jsxs5("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx5(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx5("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
             ] })
           ] }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
               className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-              children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx5(X, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__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(Sparkles2, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
-          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx5("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs5("div", { className: "px-3 py-12 text-center", children: [
+          /* @__PURE__ */ jsx5(Sparkles2, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs5("p", { className: "text-sm text-foreground", children: [
             "Ask the agent about this ",
             scope.kind === "vault-file" ? "document" : scope.kind,
             "."
           ] }),
-          /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
-        ] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
-          messages.map((m) => /* @__PURE__ */ jsx3(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
-          streamContent && /* @__PURE__ */ jsx3(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
+          /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
+        ] }) : /* @__PURE__ */ jsxs5("div", { className: "space-y-3", children: [
+          messages.map((m) => /* @__PURE__ */ jsx5(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx5(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
         ] }) }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           "form",
           {
             className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
@@ -698,8 +1053,8 @@ function ArtifactAgentDock({
               e.preventDefault();
               void send();
             },
-            children: /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx3(
+            children: /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx5(
                 "textarea",
                 {
                   value: composer,
@@ -716,23 +1071,23 @@ function ArtifactAgentDock({
                   className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-[var(--md3-outline-variant)] bg-surface-dim 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(
+              sending ? /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
                   onClick: cancel,
                   "aria-label": "Cancel",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-                  children: /* @__PURE__ */ jsx3(Square, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx5(Square, { className: "h-4 w-4" })
                 }
-              ) : /* @__PURE__ */ jsx3(
+              ) : /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "submit",
                   disabled: !composer.trim() || !threadId,
                   "aria-label": "Send",
                   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" })
+                  children: /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" })
                 }
               )
             ] })
@@ -821,12 +1176,13 @@ function createFetchTransport(opts) {
 export {
   DEFAULT_REASONING_LEVEL_OPTIONS,
   ReasoningLevelPicker,
-  HARNESS_MODEL_POLICIES,
-  modelProvider,
   isModelCompatibleWithHarness,
   snapModelToHarness,
+  modelProvider,
   snapHarnessToModel,
+  AgentProfilePicker,
   AgentSessionControls,
+  AgentComposer,
   ArtifactAgentDock,
   createFetchTransport,
   AgentTimeline,