@tangle-network/sandbox-ui 0.58.0 → 0.59.0

package/dist/chat.d.ts

@@ -48,6 +48,69 @@ interface ReasoningLevelPickerProps {
 declare const DEFAULT_REASONING_LEVEL_OPTIONS: ReadonlyArray<ReasoningLevelOption>;
 declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, available, side, avoidCollisions, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * An agent profile: a named bundle of toolset + persona layered over the same
+ * model and session. `builtin` profiles are the product's shipped modes (e.g.
+ * Studio / Assistant); the rest are user-saved custom agents. The concept is
+ * backend-agnostic — it applies to a router-backed agent and a sandbox-backed
+ * one alike, which is why it lives beside the model control rather than under
+ * the harness.
+ */
+interface AgentProfileOption {
+    id: string;
+    name: string;
+    /** Builtin: a one-line description. Custom: derived "N tools" if omitted. */
+    description?: string;
+    /** Capability/tool-group ids this profile enables. */
+    capabilities?: ReadonlyArray<string>;
+    /** Persona / extra system instructions. */
+    instructions?: string;
+    /** A shipped mode vs a user-saved custom agent. */
+    builtin?: boolean;
+}
+/** A selectable tool group offered by the create/edit form. */
+interface AgentProfileCapability {
+    id: string;
+    label: string;
+    description?: string;
+}
+/** The editable shape the create/edit form emits. */
+interface AgentProfileDraft {
+    id?: string;
+    name: string;
+    capabilities: string[];
+    instructions: string;
+}
+interface AgentProfilePickerProps {
+    /** Selected profile id. */
+    value: string;
+    onChange: (id: string) => void;
+    profiles: ReadonlyArray<AgentProfileOption>;
+    /**
+     * Tool catalog for the create/edit form. Provide together with at least one
+     * write callback to enable authoring custom agents; omit for a
+     * selection-only picker (the New / edit / delete affordances stay hidden).
+     */
+    capabilities?: ReadonlyArray<AgentProfileCapability>;
+    onCreate?: (draft: AgentProfileDraft) => void | Promise<void>;
+    onUpdate?: (id: string, draft: AgentProfileDraft) => void | Promise<void>;
+    onDelete?: (id: string) => void | Promise<void>;
+    disabled?: boolean;
+    className?: string;
+    /** Side the menu opens toward. Defaults to up (composer-anchored). */
+    side?: "top" | "bottom";
+}
+/**
+ * Agent / mode switcher styled to match the chat control strip's pills
+ * (harness, model, effort). The pill shows the active profile; the menu lists
+ * builtin modes and saved custom agents. When a capability catalog and a write
+ * callback are supplied it also authors agents inline (name + tool toggles +
+ * persona) — a self-contained click-outside popover rather than a Radix menu,
+ * because the inline form needs its own focus and typing without the menu
+ * stealing keystrokes.
+ */
+declare function AgentProfilePicker({ value, onChange, profiles, capabilities, onCreate, onUpdate, onDelete, disabled, className, side, }: AgentProfilePickerProps): react_jsx_runtime.JSX.Element;
+
 interface AgentSessionHarnessControl {
     value: HarnessType;
     onChange: (next: HarnessType) => void;
@@ -86,12 +149,33 @@ interface AgentSessionReasoningControl {
      */
     available?: ReadonlyArray<ReasoningEffort>;
 }
+/**
+ * Agent-profile (mode / toolset / persona) selection. Backend-agnostic — it
+ * sits beside the model in both router-backed and sandbox-backed modes, so the
+ * same session can switch the agent's identity without touching the harness.
+ */
+interface AgentSessionProfileControl {
+    value: string;
+    onChange: (id: string) => void;
+    profiles: ReadonlyArray<AgentProfileOption>;
+    /** Tool catalog for inline authoring; pair with a write callback to enable it. */
+    capabilities?: ReadonlyArray<AgentProfileCapability>;
+    onCreate?: (draft: AgentProfileDraft) => void | Promise<void>;
+    onUpdate?: (id: string, draft: AgentProfileDraft) => void | Promise<void>;
+    onDelete?: (id: string) => void | Promise<void>;
+    disabled?: boolean;
+}
 interface AgentSessionControlsProps {
     /**
      * Harness (agent backend) selection. Switching harness usually means
      * re-creating the agent session — the consumer owns that lifecycle.
      */
     harness?: AgentSessionHarnessControl;
+    /**
+     * Agent profile (mode / toolset / persona). Universal — present in both
+     * router-backed and sandbox-backed composers, independent of the harness.
+     */
+    profile?: AgentSessionProfileControl;
     /** Per-turn model override, fed by the router's model catalog. */
     model?: AgentSessionModelControl;
     /** Thinking-effort level applied to subsequent turns. */
@@ -139,7 +223,49 @@ interface AgentSessionControlsProps {
  *
  * Designed to slot into `SandboxWorkbench`'s `session.composerControls`.
  */
-declare function AgentSessionControls({ harness, model, reasoning, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentSessionControls({ harness, profile, model, reasoning, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
+
+interface AgentComposerProps {
+    /** Composer text (controlled). */
+    value: string;
+    onChange: (value: string) => void;
+    /** Fired on Enter (without Shift) or the send button. */
+    onSubmit: () => void;
+    placeholder?: string;
+    /** Disables typing and sending — e.g. while a turn is streaming. */
+    disabled?: boolean;
+    /** Spins the send button and blocks submit, without disabling the textarea. */
+    busy?: boolean;
+    /**
+     * Agent backend. Present → sandbox-backed (the harness pill shows and snaps
+     * with the model); omitted → router-backed (no harness, just model/effort).
+     */
+    harness?: AgentSessionHarnessControl;
+    /** Agent profile (mode / toolset / persona) — universal across both modes. */
+    profile?: AgentSessionProfileControl;
+    model?: AgentSessionModelControl;
+    reasoning?: AgentSessionReasoningControl;
+    /** Forwarded to the control strip (chat hides shell-only harnesses). */
+    context?: "chat" | "all";
+    /** Extra content left of the send button (token meter, cost, status). */
+    trailing?: React.ReactNode;
+    /** Minimum textarea rows before it grows. Default 2. */
+    minRows?: number;
+    /** Max pixel height before the textarea scrolls. Default 200. */
+    maxHeight?: number;
+    className?: string;
+    sendLabel?: string;
+    autoFocus?: boolean;
+}
+/**
+ * The canonical agent chat input: one rounded surface holding an auto-growing
+ * textarea, the embedded control strip (profile · harness · model · effort) at
+ * the bottom-left, and the send button at the bottom-right. The strip's pickers
+ * snap the harness↔model pair automatically; which controls appear is driven
+ * purely by which control objects are passed, so the same component is the
+ * router-backed composer (no harness) and the sandbox-backed one (with harness).
+ */
+declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, harness, profile, model, reasoning, context, trailing, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Whether `harness` can run `modelId`. Router-backed harnesses, and provider-less
@@ -253,4 +379,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness };
+export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness };

package/dist/chat.js

@@ -1,4 +1,6 @@
 import {
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   ArtifactAgentDock,
@@ -15,12 +17,14 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-WLMLD2CZ.js";
+} from "./chunk-4XOZGMJC.js";
 import "./chunk-HU4B2M4K.js";
 import "./chunk-SF6LPMMN.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 export {
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   ArtifactAgentDock,

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

@@ -146,7 +146,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";
+import { ChevronDown as ChevronDown3, Lock, SlidersHorizontal } from "lucide-react";
 
 // src/chat/harness-model-compat.ts
 import {
@@ -161,8 +161,293 @@ function snapModelToHarness(harness, modelId, models) {
   return snapModelIdToHarness(harness, modelId, models.map(canonicalModelId));
 }
 
-// src/chat/agent-session-controls.tsx
+// 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);
+  }
+  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" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+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 jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function HarnessDropdown({
   value,
   onChange,
@@ -179,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",
@@ -195,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,
@@ -219,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) => {
@@ -232,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 })
               ] })
             ]
           },
@@ -247,6 +532,7 @@ function HarnessDropdown({
 }
 function AgentSessionControls({
   harness,
+  profile,
   model,
   reasoning,
   trailing,
@@ -255,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) {
@@ -281,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,
@@ -292,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",
@@ -315,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,
@@ -328,10 +628,11 @@ function AgentSessionControls({
     }
   );
   if (layout === "gear") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       GearControls,
       {
         className,
+        profileNode,
         harnessNode,
         modelNode,
         reasoningNode,
@@ -339,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",
@@ -379,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",
@@ -404,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 })
               ]
             }
           ) })
@@ -419,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) {
@@ -475,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();
@@ -527,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;
@@ -581,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(() => {
@@ -595,7 +1005,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "aside",
     {
       className: cn(
@@ -604,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",
@@ -643,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,
@@ -661,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" })
                 }
               )
             ] })
@@ -770,7 +1180,9 @@ export {
   snapModelToHarness,
   modelProvider,
   snapHarnessToModel,
+  AgentProfilePicker,
   AgentSessionControls,
+  AgentComposer,
   ArtifactAgentDock,
   createFetchTransport,
   AgentTimeline,

package/dist/globals.css

@@ -404,6 +404,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -660,6 +663,14 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -825,6 +836,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[min\(60vh\,420px\)\] {
+    max-height: min(60vh, 420px);
+  }
   .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
     max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
   }
@@ -885,6 +899,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[640px\] {
+    min-height: 640px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1050,6 +1067,9 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -3375,6 +3395,9 @@
   .accent-primary {
     accent-color: var(--color-primary);
   }
+  .\[color-scheme\:dark\] {
+    color-scheme: dark;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -3839,6 +3862,14 @@
       border-color: var(--color-border);
     }
   }
+  .focus-within\:border-primary\/60 {
+    &:focus-within {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+      }
+    }
+  }
   .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
       --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
@@ -4355,6 +4386,13 @@
       }
     }
   }
+  .hover\:text-\[var\(--status-error\,\#ff4d6d\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--status-error,#ff4d6d);
+      }
+    }
+  }
   .hover\:text-\[var\(--surface-danger-text\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4475,6 +4513,11 @@
       border-color: var(--border-accent-hover);
     }
   }
+  .focus\:border-primary {
+    &:focus {
+      border-color: var(--color-primary);
+    }
+  }
   .focus\:bg-accent {
     &:focus {
       background-color: var(--color-accent);

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 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';
-export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
+export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';

package/dist/index.js

@@ -74,6 +74,8 @@ import {
   UserMenu
 } from "./chunk-IOB2PW5Z.js";
 import {
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   ArtifactAgentDock,
@@ -90,7 +92,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-WLMLD2CZ.js";
+} from "./chunk-4XOZGMJC.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -351,6 +353,8 @@ import {
 import { Markdown } from "@tangle-network/ui/markdown";
 export {
   ActivityFeed,
+  AgentComposer,
+  AgentProfilePicker,
   AgentSessionControls,
   AgentTimeline,
   AgentWorkbench,

package/dist/styles.css

@@ -404,6 +404,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -660,6 +663,14 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -825,6 +836,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[min\(60vh\,420px\)\] {
+    max-height: min(60vh, 420px);
+  }
   .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
     max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
   }
@@ -885,6 +899,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[640px\] {
+    min-height: 640px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1050,6 +1067,9 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -3375,6 +3395,9 @@
   .accent-primary {
     accent-color: var(--color-primary);
   }
+  .\[color-scheme\:dark\] {
+    color-scheme: dark;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -3839,6 +3862,14 @@
       border-color: var(--color-border);
     }
   }
+  .focus-within\:border-primary\/60 {
+    &:focus-within {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+      }
+    }
+  }
   .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
       --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
@@ -4355,6 +4386,13 @@
       }
     }
   }
+  .hover\:text-\[var\(--status-error\,\#ff4d6d\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--status-error,#ff4d6d);
+      }
+    }
+  }
   .hover\:text-\[var\(--surface-danger-text\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4475,6 +4513,11 @@
       border-color: var(--border-accent-hover);
     }
   }
+  .focus\:border-primary {
+    &:focus {
+      border-color: var(--color-primary);
+    }
+  }
   .focus\:bg-accent {
     &:focus {
       background-color: var(--color-accent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",