@tangle-network/sandbox-ui 0.58.0 → 0.60.0

package/dist/chunk-V5JZOO3W.js

@@ -0,0 +1,1383 @@
+import {
+  HARNESS_OPTIONS,
+  HarnessLogo,
+  chatCapableHarnesses
+} from "./chunk-HU4B2M4K.js";
+import {
+  ModelPicker,
+  canonicalModelId
+} from "./chunk-SF6LPMMN.js";
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/chat/index.ts
+import {
+  AgentTimeline,
+  ChatContainer,
+  ChatInput,
+  ChatMessage as ChatMessage2,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+} from "@tangle-network/ui/chat";
+
+// src/chat/reasoning-level-picker.tsx
+import { reasoningLadder } from "@tangle-network/agent-interface";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Brain, ChevronDown, Sparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var REASONING_LADDER = reasoningLadder;
+function ReasoningGlyph({ level }) {
+  if (level === "auto") {
+    return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
+  }
+  const BARS = 4;
+  const rank = REASONING_LADDER.indexOf(level) + 1;
+  const filled = Math.max(1, Math.ceil(rank / REASONING_LADDER.length * BARS));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "inline-flex h-3.5 items-end gap-px",
+      style: { width: 16 },
+      children: Array.from({ length: BARS }).map((_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "w-1 rounded-[1px]",
+            i < filled ? "bg-foreground" : "bg-border"
+          ),
+          style: { height: `${35 + i * 22}%` }
+        },
+        i
+      ))
+    }
+  );
+}
+var DEFAULT_REASONING_LEVEL_OPTIONS = [
+  { value: "auto", label: "Auto", description: "Let the agent pick the right depth." },
+  { value: "none", label: "None", description: "No extended thinking \u2014 fastest, cheapest." },
+  { value: "minimal", label: "Minimal", description: "Thinking on, lowest budget." },
+  { value: "low", label: "Low", description: "Fast, direct answers." },
+  { value: "medium", label: "Medium", description: "Inspect context before acting." },
+  { value: "high", label: "High", description: "Deeper planning and edge-case checks." },
+  { value: "xhigh", label: "Extra High", description: "Extended reasoning for hard problems (Codex/OpenAI)." },
+  { value: "ultracode", label: "Ultracode", description: "Maximum extended thinking (Claude Code's ultracode)." }
+];
+function ReasoningLevelPicker({
+  value,
+  onChange,
+  disabled,
+  className,
+  triggerClassName,
+  options = DEFAULT_REASONING_LEVEL_OPTIONS,
+  available,
+  side,
+  avoidCollisions
+}) {
+  const shown = available ? options.filter((o) => o.value === "auto" || available.includes(o.value)) : options;
+  const selected = shown.find((option) => option.value === value);
+  const label = selected?.label ?? "Auto";
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        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-50",
+          className,
+          triggerClassName
+        ),
+        "aria-label": "Reasoning level",
+        children: [
+          /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      {
+        side,
+        align: "start",
+        avoidCollisions,
+        collisionPadding: 24,
+        sideOffset: 6,
+        className: cn(
+          // Cap to the viewport space on the open side and scroll, so the menu
+          // pinned downward (floating composer) never runs off the bottom edge.
+          "z-50 w-64 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto 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]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        ),
+        children: shown.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            onSelect: () => onChange(option.value),
+            className: cn(
+              "flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none",
+              "transition-colors hover:bg-accent/40 focus:bg-accent/40",
+              option.value === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex w-3.5 shrink-0 justify-center", children: /* @__PURE__ */ jsx(ReasoningGlyph, { level: option.value }) }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        ))
+      }
+    ) })
+  ] });
+}
+
+// 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 ChevronDown3, Lock, SlidersHorizontal } from "lucide-react";
+
+// src/chat/harness-model-compat.ts
+import {
+  harnessSupportsModel,
+  snapModelToHarness as snapModelIdToHarness
+} from "@tangle-network/agent-interface";
+import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
+function isModelCompatibleWithHarness(harness, modelId) {
+  return harnessSupportsModel(harness, modelId);
+}
+function snapModelToHarness(harness, modelId, models) {
+  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);
+  }
+  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,
+  available,
+  disabled,
+  locked,
+  lockReason,
+  side = "bottom",
+  align = "start",
+  avoidCollisions
+}) {
+  const allowed = new Set(
+    available ?? HARNESS_OPTIONS.map((h) => h.type)
+  );
+  const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
+  const selected = options.find((option) => option.type === value);
+  return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        disabled: disabled || locked,
+        title: locked ? lockReason : void 0,
+        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"
+        ),
+        "aria-label": "Agent harness",
+        children: [
+          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__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx3(
+      DropdownMenu2.Content,
+      {
+        side,
+        align,
+        avoidCollisions,
+        collisionPadding: 24,
+        sideOffset: 6,
+        className: cn(
+          // Cap to the viewport space on the open side and scroll, so a tall
+          // backend list pinned downward (floating composer) never runs off
+          // the bottom edge.
+          "z-50 w-72 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto 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]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxs3(
+          DropdownMenu2.Item,
+          {
+            onSelect: (event) => {
+              event.preventDefault();
+              onChange(option.type);
+            },
+            className: cn(
+              "flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none",
+              "transition-colors hover:bg-accent/50 focus:bg-accent/50",
+              option.type === value && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
+            ),
+            children: [
+              /* @__PURE__ */ 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 })
+              ] })
+            ]
+          },
+          option.type
+        ))
+      }
+    ) })
+  ] });
+}
+function AgentSessionControls({
+  harness,
+  profile,
+  model,
+  reasoning,
+  trailing,
+  className,
+  context = "chat",
+  layout = "inline",
+  menuPlacement = "auto"
+}) {
+  if (!harness && !profile && !model && !reasoning && !trailing) return null;
+  const handleHarnessChange = (next) => {
+    harness?.onChange(next);
+    if (model) {
+      const snapped = snapModelToHarness(next, model.value, model.models);
+      if (snapped !== model.value) model.onChange(snapped);
+    }
+  };
+  const handleModelChange = (nextModelId) => {
+    model?.onChange(nextModelId);
+    if (harness && !harness.locked) {
+      const snapped = snapHarnessToModel(harness.value, nextModelId);
+      if (snapped !== harness.value) harness.onChange(snapped);
+    }
+  };
+  const visibleModels = model && harness?.locked ? model.models.filter(
+    (entry) => isModelCompatibleWithHarness(
+      harness.value,
+      canonicalModelId(entry)
+    )
+  ) : model?.models;
+  const harnessAvailable = harness?.available ?? (context === "chat" ? chatCapableHarnesses : void 0);
+  const menuSide = layout === "gear" ? "left" : "bottom";
+  const menuAlign = layout === "gear" ? "end" : "start";
+  const inlineForceDown = menuPlacement === "down" && layout !== "gear";
+  const avoidCollisions = inlineForceDown ? false : void 0;
+  const harnessNode = harness && /* @__PURE__ */ jsx3(
+    HarnessDropdown,
+    {
+      ...harness,
+      available: harnessAvailable,
+      onChange: handleHarnessChange,
+      side: menuSide,
+      align: menuAlign,
+      avoidCollisions
+    }
+  );
+  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",
+      label: "",
+      value: model.value,
+      onChange: handleModelChange,
+      models: visibleModels ?? [],
+      loading: model.loading,
+      popular: model.popular,
+      recents: model.recents,
+      disabled: model.disabled || (visibleModels ?? []).length === 0,
+      side: layout === "gear" ? void 0 : "bottom",
+      avoidCollisions
+    }
+  );
+  const selectedModel = model?.models.find(
+    (entry) => canonicalModelId(entry) === model.value
+  );
+  const modelReasoning = selectedModel ? {
+    supportsReasoning: selectedModel.supportsReasoning,
+    maxEffort: selectedModel.maxReasoningEffort
+  } : null;
+  const reasoningNode = reasoning && /* @__PURE__ */ jsx3(
+    ReasoningLevelPicker,
+    {
+      value: reasoning.value,
+      onChange: reasoning.onChange,
+      options: reasoning.options,
+      disabled: reasoning.disabled,
+      available: harness ? reasoningEffortsFor(harness.value, modelReasoning) : reasoning.available,
+      side: layout === "gear" ? void 0 : "bottom",
+      avoidCollisions
+    }
+  );
+  if (layout === "gear") {
+    return /* @__PURE__ */ jsx3(
+      GearControls,
+      {
+        className,
+        profileNode,
+        harnessNode,
+        modelNode,
+        reasoningNode,
+        trailing
+      }
+    );
+  }
+  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__ */ jsx3("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+      ]
+    }
+  );
+}
+function GearControls({
+  className,
+  profileNode,
+  harnessNode,
+  modelNode,
+  reasoningNode,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-testid": "agent-session-controls",
+      children: [
+        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",
+              "aria-label": "Session controls",
+              className: cn(
+                "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
+                "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"
+              ),
+              children: /* @__PURE__ */ jsx3(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+            DropdownMenu2.Content,
+            {
+              side: "top",
+              align: "end",
+              sideOffset: 8,
+              onInteractOutside: (event) => {
+                const target = event.target;
+                if (target?.closest(
+                  "[data-radix-popper-content-wrapper],[data-radix-menu-content],[role=menu],[role=listbox]"
+                )) {
+                  event.preventDefault();
+                }
+              },
+              className: cn(
+                "z-50 flex w-56 flex-col gap-2 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-2",
+                "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out",
+                "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+              ),
+              children: [
+                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 })
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function GearSection({
+  label,
+  children
+}) {
+  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,
+  Folder,
+  Loader2,
+  Paperclip,
+  Square,
+  Upload,
+  X
+} from "lucide-react";
+import * as React2 from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AgentComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Send a message\u2026",
+  disabled,
+  busy,
+  onCancel,
+  harness,
+  profile,
+  model,
+  reasoning,
+  context = "chat",
+  controls,
+  trailing,
+  onAttach,
+  onAttachFolder,
+  attachments = [],
+  onRemoveFile,
+  accept,
+  dropTitle = "Drop files to add context",
+  dropDescription = "They attach to your next message.",
+  focusShortcut = false,
+  minRows = 2,
+  maxHeight = 200,
+  className,
+  sendLabel = "Send",
+  autoFocus
+}) {
+  const textareaRef = React2.useRef(null);
+  const fileInputRef = React2.useRef(null);
+  const folderInputRef = React2.useRef(null);
+  const [dragOver, setDragOver] = React2.useState(false);
+  const dragDepth = React2.useRef(0);
+  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]);
+  React2.useEffect(() => {
+    if (!focusShortcut || disabled) return;
+    function onKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
+        event.preventDefault();
+        textareaRef.current?.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [focusShortcut, disabled]);
+  const canSend = !disabled && !busy && value.trim().length > 0;
+  const submit = () => {
+    if (!canSend) return;
+    onSubmit();
+  };
+  const dropEnabled = Boolean(onAttach);
+  const handleDragEnter = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current++;
+    if (event.dataTransfer?.types.includes("Files")) setDragOver(true);
+  };
+  const handleDragLeave = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current--;
+    if (dragDepth.current <= 0) {
+      dragDepth.current = 0;
+      setDragOver(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  };
+  const handleDrop = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current = 0;
+    setDragOver(false);
+    const files = event.dataTransfer?.files;
+    if (files?.length) onAttach?.(files);
+  };
+  const folderChips = attachments.filter((file) => file.kind === "folder");
+  const fileChips = attachments.filter((file) => file.kind !== "folder");
+  const attachButtonClass = cn(
+    "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+    "hover:bg-surface-container-highest hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: cn("relative", className), children: [
+    dragOver && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-surface-container-high/95", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx4("span", { className: "mx-auto mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx4(Upload, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx4("p", { className: "font-semibold text-foreground text-sm", children: dropTitle }),
+      /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-muted-foreground text-xs", children: dropDescription })
+    ] }) }),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-testid": "agent-composer",
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        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"
+        ),
+        children: [
+          attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => /* @__PURE__ */ jsxs4(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
+                file.status === "error" ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground"
+              ),
+              children: [
+                file.kind === "folder" ? /* @__PURE__ */ jsx4(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx4(Paperclip, { className: "size-3 shrink-0" }),
+                /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate", children: file.name }),
+                file.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+                  "(",
+                  file.fileCount,
+                  ")"
+                ] }),
+                file.status === "uploading" && /* @__PURE__ */ jsx4(Loader2, { className: "size-3 animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${file.name}`,
+                    onClick: () => onRemoveFile(file.id),
+                    className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx4(X, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            file.id
+          )) }),
+          /* @__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,
+              "aria-label": "Message input",
+              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("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: controls ?? /* @__PURE__ */ jsx4(
+              AgentSessionControls,
+              {
+                context,
+                harness,
+                profile,
+                model,
+                reasoning
+              }
+            ) }),
+            onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach files",
+                  title: "Attach files",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx4(Paperclip, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  accept,
+                  onChange: (event) => {
+                    if (event.target.files?.length) onAttach(event.target.files);
+                    event.target.value = "";
+                  }
+                }
+              )
+            ] }),
+            onAttachFolder && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => folderInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach folder",
+                  title: "Attach folder",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx4(Folder, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: folderInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: (event) => {
+                    if (event.target.files?.length)
+                      (onAttachFolder ?? onAttach)?.(event.target.files);
+                    event.target.value = "";
+                  },
+                  ...{ webkitdirectory: "" }
+                }
+              )
+            ] }),
+            trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+            busy && onCancel ? /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                "aria-label": "Stop response",
+                className: cn(
+                  "flex size-9 shrink-0 items-center justify-center rounded-full",
+                  "bg-[var(--status-error,#ff4d6d)]/15 text-[var(--status-error,#ff4d6d)] transition-colors",
+                  "hover:bg-[var(--status-error,#ff4d6d)]/25"
+                ),
+                children: /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" })
+              }
+            ) : /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: submit,
+                disabled: !canSend,
+                "aria-label": sendLabel,
+                className: cn(
+                  "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" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    focusShortcut && /* @__PURE__ */ jsx4("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx4("kbd", { className: "rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "Cmd" }),
+      /* @__PURE__ */ jsx4("kbd", { className: "ml-0.5 rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "L" }),
+      /* @__PURE__ */ jsx4("span", { className: "ml-1", children: "to focus" })
+    ] }) })
+  ] });
+}
+
+// src/chat/artifact-agent-dock.tsx
+import * as React3 from "react";
+import { Sparkles as Sparkles2, Send, Square as Square2, X as X2 } from "lucide-react";
+import { ChatMessage } from "@tangle-network/ui/chat";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function defaultScopeLabel(scope) {
+  if (scope.label) return scope.label;
+  switch (scope.kind) {
+    case "vault-file":
+      return scope.key.split("/").pop() ?? scope.key;
+    case "sequence":
+      return `Sequence ${scope.key.slice(0, 8)}`;
+    case "content":
+      return `Content ${scope.key.slice(0, 8)}`;
+    case "image":
+      return `Image ${scope.key.slice(0, 8)}`;
+    case "video":
+      return `Video ${scope.key.slice(0, 8)}`;
+    case "project":
+      return "Project chat";
+    case "workspace":
+      return "Workspace chat";
+    default:
+      return scope.key;
+  }
+}
+function normalizeRole(role) {
+  return role === "assistant" || role === "system" ? role : "user";
+}
+function createDockMessageId() {
+  const c = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  if (c && typeof c.getRandomValues === "function") {
+    const b = c.getRandomValues(new Uint8Array(16));
+    b[6] = b[6] & 15 | 64;
+    b[8] = b[8] & 63 | 128;
+    const h = Array.from(b, (x) => x.toString(16).padStart(2, "0")).join("");
+    return `${h.slice(0, 8)}-${h.slice(8, 12)}-${h.slice(12, 16)}-${h.slice(16, 20)}-${h.slice(20)}`;
+  }
+  throw new Error("crypto.getRandomValues is required for message ids");
+}
+function ArtifactAgentDock({
+  scope,
+  open,
+  onOpenChange,
+  transport,
+  defaultPrompt,
+  onError,
+  className
+}) {
+  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]
+  );
+  React3.useEffect(() => {
+    if (!open) return;
+    scopeTokenRef.current += 1;
+    abortRef.current?.abort();
+    abortRef.current = null;
+    let cancelled = false;
+    async function bootstrap() {
+      setLoading(true);
+      try {
+        const { id } = await transport.ensureThread(scope);
+        if (cancelled) return;
+        setThreadId(id);
+        if (transport.loadMessages) {
+          const prior = await transport.loadMessages(id);
+          if (cancelled) return;
+          setMessages(
+            prior.map((m) => ({
+              ...m,
+              role: normalizeRole(m.role),
+              createdAt: m.createdAt instanceof Date ? m.createdAt : m.createdAt ? new Date(m.createdAt) : void 0
+            }))
+          );
+        } else {
+          setMessages([]);
+        }
+      } catch (err) {
+        reportError(err instanceof Error ? err.message : "Failed to open artifact chat");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    void bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, scope.kind, scope.key, transport, reportError]);
+  React3.useEffect(() => {
+    if (!scrollRef.current) return;
+    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages.length, streamContent]);
+  const send = React3.useCallback(async () => {
+    const text = composer.trim();
+    if (!text || !threadId || sending) return;
+    const token = scopeTokenRef.current;
+    const userMsg = {
+      id: createDockMessageId(),
+      role: "user",
+      content: text,
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setComposer("");
+    setSending(true);
+    setStreamContent("");
+    const controller = new AbortController();
+    abortRef.current = controller;
+    let assistantContent = "";
+    let streamFailed = false;
+    try {
+      for await (const event of transport.sendStream({ threadId, content: text, signal: controller.signal })) {
+        if (scopeTokenRef.current !== token) return;
+        if (event.type === "delta") {
+          assistantContent += event.text;
+          setStreamContent(assistantContent);
+        } else if (event.type === "error") {
+          streamFailed = true;
+          reportError(event.message);
+        }
+      }
+      if (scopeTokenRef.current !== token) return;
+      if (assistantContent && !streamFailed) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: createDockMessageId(),
+            role: "assistant",
+            content: assistantContent,
+            createdAt: /* @__PURE__ */ new Date()
+          }
+        ]);
+      }
+      setStreamContent("");
+    } catch (err) {
+      if (err?.name === "AbortError") return;
+      if (scopeTokenRef.current === token) reportError(err instanceof Error ? err.message : "Send failed");
+    } finally {
+      if (scopeTokenRef.current === token) setSending(false);
+      if (abortRef.current === controller) abortRef.current = null;
+    }
+  }, [composer, threadId, sending, transport, reportError]);
+  const cancel = React3.useCallback(() => {
+    if (threadId && transport.cancel) {
+      try {
+        void Promise.resolve(transport.cancel({ threadId })).catch(() => {
+        });
+      } catch {
+      }
+    }
+    abortRef.current?.abort();
+    setSending(false);
+    setStreamContent("");
+  }, [threadId, transport]);
+  if (!open) return null;
+  const heading = defaultScopeLabel(scope);
+  return /* @__PURE__ */ jsxs5(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-dropdown)]",
+        className
+      ),
+      "aria-label": `Agent chat about ${heading}`,
+      children: [
+        /* @__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__ */ 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__ */ jsx5(X2, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__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__ */ 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__ */ jsx5(
+          "form",
+          {
+            className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
+            onSubmit: (e) => {
+              e.preventDefault();
+              void send();
+            },
+            children: /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx5(
+                "textarea",
+                {
+                  value: composer,
+                  onChange: (e) => setComposer(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey && !sending) {
+                      e.preventDefault();
+                      void send();
+                    }
+                  },
+                  placeholder: `Ask about ${heading}\u2026`,
+                  rows: 2,
+                  disabled: !threadId,
+                  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__ */ 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__ */ jsx5(Square2, { className: "h-4 w-4" })
+                }
+              ) : /* @__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__ */ jsx5(Send, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function createFetchTransport(opts) {
+  const threadsUrl = opts.threadsUrl ?? "/api/threads";
+  const chatUrl = opts.chatUrl ?? "/api/chat";
+  const f = opts.fetchImpl ?? ((...args) => fetch(...args));
+  const workspaceId = opts.workspaceId;
+  return {
+    async ensureThread(scope) {
+      const url = threadsUrl.includes("?") ? `${threadsUrl}&workspaceId=${encodeURIComponent(workspaceId)}` : `${threadsUrl}?workspaceId=${encodeURIComponent(workspaceId)}`;
+      const res = await f(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ workspaceId, scope, ensureScoped: true })
+      });
+      if (!res.ok) throw new Error(`Thread ensure failed (${res.status})`);
+      const data = await res.json();
+      const id = data.thread?.id ?? data.id;
+      if (!id) throw new Error("Malformed ensure response");
+      return { id };
+    },
+    async loadMessages(threadId) {
+      const res = await f(`${threadsUrl}/${encodeURIComponent(threadId)}/messages`);
+      if (!res.ok) return [];
+      const data = await res.json();
+      return (data.messages ?? []).map((m) => ({
+        id: m.id,
+        role: normalizeRole(m.role),
+        content: m.content,
+        createdAt: new Date(m.createdAt)
+      }));
+    },
+    sendStream({ threadId, content, signal }) {
+      return (async function* () {
+        const res = await f(chatUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ workspaceId, threadId, content }),
+          signal
+        });
+        if (!res.ok || !res.body) {
+          const text = await res.text().catch(() => "");
+          yield { type: "error", message: text || `Send failed (${res.status})` };
+          return;
+        }
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (!line.trim()) continue;
+            try {
+              const event = JSON.parse(line);
+              if (event.type === "message.part.updated" && event.data) {
+                const delta = event.data.delta;
+                const part = event.data.part;
+                const isText = !part || typeof part !== "object" || part.type === void 0 || part.type === "text";
+                if (isText && typeof delta === "string" && delta.length > 0) {
+                  yield { type: "delta", text: delta };
+                }
+              } else if (event.type === "error" && event.data) {
+                const message = typeof event.data.message === "string" ? event.data.message : "Stream error";
+                yield { type: "error", message };
+              }
+            } catch {
+            }
+          }
+        }
+      })();
+    }
+  };
+}
+
+export {
+  DEFAULT_REASONING_LEVEL_OPTIONS,
+  ReasoningLevelPicker,
+  isModelCompatibleWithHarness,
+  snapModelToHarness,
+  modelProvider,
+  snapHarnessToModel,
+  AgentProfilePicker,
+  AgentSessionControls,
+  AgentComposer,
+  ArtifactAgentDock,
+  createFetchTransport,
+  AgentTimeline,
+  ChatContainer,
+  ChatInput,
+  ChatMessage2 as ChatMessage,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+};