@tangle-network/sandbox-ui 0.113.6 → 0.114.0

package/dist/chunk-TADGS4Q7.js

@@ -1,1010 +0,0 @@
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-
-// src/chat/index.ts
-import {
-  AgentTimeline,
-  ChatContainer,
-  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 { focusRing } from "@tangle-network/ui/utils";
-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 the hardest problems." },
-  { value: "ultracode", label: "Ultracode", description: "Maximum extended thinking." }
-];
-var HARNESS_REASONING_OPTIONS = {
-  "kimi-code": [
-    { value: "auto", label: "Auto", description: "Use Kimi's default." },
-    { value: "none", label: "No thinking", description: "Kimi answers directly \u2014 thinking off." },
-    { value: "high", label: "Thinking", description: "Kimi reasons before answering." }
-  ]
-};
-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",
-          focusRing,
-          "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 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 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-profile-picker.tsx
-import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus as Plus2, Trash2 } from "lucide-react";
-import * as React4 from "react";
-
-// src/lib/use-click-outside.ts
-import * as React from "react";
-function useClickOutside(onOutside, extras) {
-  const ref = React.useRef(null);
-  const extrasRef = React.useRef(extras);
-  extrasRef.current = extras;
-  React.useEffect(() => {
-    function handler(event) {
-      const target = event.target;
-      if (!ref.current || ref.current.contains(target)) return;
-      if (extrasRef.current?.some((extra) => extra.current?.contains(target))) return;
-      onOutside();
-    }
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onOutside]);
-  return ref;
-}
-
-// src/chat/anchored-popover.tsx
-import * as React2 from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var AnchoredPopover = React2.forwardRef(
-  function AnchoredPopover2({ anchorRef, side, children, className, style, ...rest }, forwardedRef) {
-    const innerRef = React2.useRef(null);
-    const setRefs = (node) => {
-      innerRef.current = node;
-      if (typeof forwardedRef === "function") forwardedRef(node);
-      else if (forwardedRef) forwardedRef.current = node;
-    };
-    const [position, setPosition] = React2.useState(null);
-    const place = React2.useCallback(() => {
-      const anchor = anchorRef.current;
-      if (!anchor) return;
-      const rect = anchor.getBoundingClientRect();
-      const width = innerRef.current?.offsetWidth ?? 0;
-      const margin = 8;
-      const left = Math.max(
-        margin,
-        Math.min(rect.left, window.innerWidth - width - margin)
-      );
-      setPosition(
-        side === "top" ? { left, bottom: window.innerHeight - rect.top + margin } : { left, top: rect.bottom + margin }
-      );
-    }, [anchorRef, side]);
-    React2.useLayoutEffect(() => {
-      place();
-      window.addEventListener("resize", place);
-      window.addEventListener("scroll", place, true);
-      return () => {
-        window.removeEventListener("resize", place);
-        window.removeEventListener("scroll", place, true);
-      };
-    }, [place]);
-    return createPortal(
-      /* @__PURE__ */ jsx2(
-        "div",
-        {
-          ...rest,
-          ref: setRefs,
-          className: cn("fixed z-50", className),
-          style: {
-            ...style,
-            pointerEvents: "auto",
-            ...position ?? { visibility: "hidden", left: 0, top: 0 }
-          },
-          children
-        }
-      ),
-      document.body
-    );
-  }
-);
-
-// src/chat/informative-lock.tsx
-import { Lock, Plus } from "lucide-react";
-import * as React3 from "react";
-import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function InformativeLock({
-  children,
-  ariaLabel,
-  lockTitle,
-  lockBody,
-  newChatLabel,
-  onNewChat,
-  className,
-  triggerClassName,
-  popoverClassName,
-  side = "top"
-}) {
-  const [open, setOpen] = React3.useState(false);
-  const closeTimer = React3.useRef(null);
-  const popoverRef = React3.useRef(null);
-  const ref = useClickOutside(() => setOpen(false), [popoverRef]);
-  const cancelClose = React3.useCallback(() => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  }, []);
-  const scheduleClose = React3.useCallback(() => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), 150);
-  }, [cancelClose]);
-  React3.useEffect(() => cancelClose, [cancelClose]);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref,
-      className: cn("relative inline-flex", className),
-      onMouseEnter: () => {
-        cancelClose();
-        setOpen(true);
-      },
-      onMouseLeave: scheduleClose,
-      onKeyDown: (event) => {
-        if (event.key === "Escape") setOpen(false);
-      },
-      children: [
-        /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen(true),
-            "data-state": open ? "open" : "closed",
-            "aria-label": ariaLabel,
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            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 opacity-60",
-              "text-xs font-medium text-foreground shadow-sm transition-colors",
-              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-              focusRing2,
-              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-              triggerClassName
-            ),
-            children
-          }
-        ),
-        open && /* @__PURE__ */ jsxs2(
-          AnchoredPopover,
-          {
-            ref: popoverRef,
-            anchorRef: ref,
-            side,
-            role: "dialog",
-            onMouseEnter: () => {
-              cancelClose();
-              setOpen(true);
-            },
-            onMouseLeave: scheduleClose,
-            className: cn(
-              "w-72 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-3",
-              "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-              popoverClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxs2("p", { className: "flex items-start gap-2 text-sm font-medium text-foreground", children: [
-                /* @__PURE__ */ jsx3(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsx3("span", { children: lockTitle })
-              ] }),
-              /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-xs text-muted-foreground", children: lockBody }),
-              /* @__PURE__ */ jsxs2(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    setOpen(false);
-                    onNewChat();
-                  },
-                  className: cn(
-                    "mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground",
-                    "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors",
-                    "hover:bg-primary/15",
-                    focusRing2
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx3(Plus, { className: "h-4 w-4" }),
-                    newChatLabel
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/chat/agent-profile-picker.tsx
-import { focusField, focusRing as focusRing3 } from "@tangle-network/ui/utils";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-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,
-  locked,
-  lockReason,
-  onNewChat,
-  className,
-  triggerClassName,
-  popoverClassName,
-  side = "top"
-}) {
-  const [open, setOpen] = React4.useState(false);
-  const [composing, setComposing] = React4.useState(
-    null
-  );
-  const popoverRef = React4.useRef(null);
-  const ref = useClickOutside(() => {
-    setOpen(false);
-    setComposing(null);
-  }, [popoverRef]);
-  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);
-  const selectedName = selected?.name ?? value;
-  React4.useEffect(() => {
-    if (!locked) return;
-    setOpen(false);
-    setComposing(null);
-  }, [locked]);
-  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);
-  }
-  if (locked && onNewChat) {
-    return /* @__PURE__ */ jsxs3(
-      InformativeLock,
-      {
-        ariaLabel: "Agent profile (locked)",
-        lockTitle: `Profile fixed to ${selectedName} for this conversation.`,
-        lockBody: "Conversations stay on one profile.",
-        newChatLabel: "New chat to switch profile",
-        onNewChat,
-        className,
-        triggerClassName,
-        popoverClassName,
-        side,
-        children: [
-          /* @__PURE__ */ jsx4(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx4("span", { className: "max-w-[140px] truncate", children: selectedName })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs3("div", { ref, className: cn("relative inline-flex", className), children: [
-    /* @__PURE__ */ jsxs3(
-      "button",
-      {
-        type: "button",
-        disabled: disabled || locked,
-        title: locked ? lockReason : void 0,
-        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",
-          focusRing3,
-          "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-          triggerClassName
-        ),
-        "data-state": open ? "open" : "closed",
-        "aria-label": "Agent profile",
-        children: [
-          /* @__PURE__ */ jsx4(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx4("span", { className: "max-w-[140px] truncate", children: selectedName }),
-          !locked && /* @__PURE__ */ jsx4(ChevronDown2, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
-        ]
-      }
-    ),
-    open && !locked && /* @__PURE__ */ jsx4(
-      AnchoredPopover,
-      {
-        ref: popoverRef,
-        anchorRef: ref,
-        side,
-        className: cn(
-          "w-[min(320px,calc(100vw-2rem))] 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]",
-          popoverClassName
-        ),
-        "data-testid": "agent-profile-popover",
-        children: composing ? /* @__PURE__ */ jsx4(
-          ProfileForm,
-          {
-            capabilities: capabilities ?? [],
-            initial: composing === "new" ? void 0 : composing,
-            onCancel: () => setComposing(null),
-            onSave: save
-          }
-        ) : /* @__PURE__ */ jsxs3("div", { className: "max-h-[min(60vh,420px)] overflow-y-auto", children: [
-          /* @__PURE__ */ jsx4(SectionHeader, { children: "Modes" }),
-          builtins.map((profile) => /* @__PURE__ */ jsx4(
-            ProfileRow,
-            {
-              active: profile.id === value,
-              title: profile.name,
-              subtitle: profileSubtitle(profile),
-              onSelect: () => select(profile.id)
-            },
-            profile.id
-          )),
-          custom.length > 0 && /* @__PURE__ */ jsx4(SectionHeader, { children: "Your agents" }),
-          custom.map((profile) => /* @__PURE__ */ jsx4(
-            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__ */ jsxs3(
-            "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__ */ jsx4(Plus2, { className: "h-4 w-4" }),
-                " New agent\u2026"
-              ]
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsx4("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__ */ jsxs3(
-    "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__ */ jsxs3(
-          "button",
-          {
-            type: "button",
-            onClick: onSelect,
-            className: "flex min-w-0 flex-1 items-center gap-2 text-left",
-            children: [
-              /* @__PURE__ */ jsx4("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: active && /* @__PURE__ */ jsx4(Check, { className: "h-3.5 w-3.5" }) }),
-              /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx4("span", { className: "block truncate font-medium", children: title }),
-                /* @__PURE__ */ jsx4("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })
-              ] })
-            ]
-          }
-        ),
-        (onEdit || onDelete) && /* @__PURE__ */ jsxs3("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
-          onEdit && /* @__PURE__ */ jsx4(
-            "button",
-            {
-              type: "button",
-              onClick: onEdit,
-              title: "Edit",
-              className: "rounded p-1 text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx4(Pencil, { className: "h-3 w-3" })
-            }
-          ),
-          onDelete && /* @__PURE__ */ jsx4(
-            "button",
-            {
-              type: "button",
-              onClick: onDelete,
-              title: "Delete",
-              className: "rounded p-1 text-muted-foreground hover:text-[var(--status-error,#ff4d6d)]",
-              children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3 w-3" })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function ProfileForm({
-  capabilities,
-  initial,
-  onCancel,
-  onSave
-}) {
-  const [name, setName] = React4.useState(initial?.name ?? "");
-  const [caps, setCaps] = React4.useState(
-    initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
-  );
-  const [instructions, setInstructions] = React4.useState(initial?.instructions ?? "");
-  const toggle = (id) => setCaps(
-    (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
-  );
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3 p-2.5", children: [
-    /* @__PURE__ */ jsx4(
-      "input",
-      {
-        autoFocus: true,
-        value: name,
-        onChange: (event) => setName(event.target.value),
-        placeholder: "Agent name (e.g. Tax Reviewer)",
-        className: `w-full rounded-lg border bg-surface-container px-3 py-2 text-sm ${focusField}`
-      }
-    ),
-    capabilities.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: "Tools" }),
-      /* @__PURE__ */ jsx4("div", { className: "space-y-0.5", children: capabilities.map((cap) => /* @__PURE__ */ jsxs3(
-        "label",
-        {
-          className: "flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 hover:bg-accent/40",
-          children: [
-            /* @__PURE__ */ jsx4(
-              "input",
-              {
-                type: "checkbox",
-                checked: caps.includes(cap.id),
-                onChange: () => toggle(cap.id),
-                className: "mt-0.5"
-              }
-            ),
-            /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx4("span", { className: "block text-sm font-medium", children: cap.label }),
-              cap.description && /* @__PURE__ */ jsx4("span", { className: "block text-xs text-muted-foreground", children: cap.description })
-            ] })
-          ]
-        },
-        cap.id
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      "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 bg-surface-container px-3 py-2 text-sm ${focusField}`
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(
-        "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__ */ jsx4(
-        "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/harness-model-compat.ts
-import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
-
-// src/chat/artifact-agent-dock.tsx
-import * as React5 from "react";
-import { Sparkles as Sparkles2, Send, Square, X } from "lucide-react";
-import { ChatMessage } from "@tangle-network/ui/chat";
-import { focusField as focusField2 } from "@tangle-network/ui/utils";
-import { jsx as jsx5, jsxs as jsxs4 } 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] = React5.useState(null);
-  const [messages, setMessages] = React5.useState([]);
-  const [composer, setComposer] = React5.useState(defaultPrompt ?? "");
-  const [streamContent, setStreamContent] = React5.useState("");
-  const [sending, setSending] = React5.useState(false);
-  const [loading, setLoading] = React5.useState(false);
-  const abortRef = React5.useRef(null);
-  const scrollRef = React5.useRef(null);
-  const scopeTokenRef = React5.useRef(0);
-  const reportError = React5.useCallback(
-    (message) => {
-      if (onError) onError(message);
-      else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
-    },
-    [onError]
-  );
-  React5.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]);
-  React5.useEffect(() => {
-    if (!scrollRef.current) return;
-    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  }, [messages.length, streamContent]);
-  const send = React5.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 = React5.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__ */ jsxs4(
-    "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__ */ jsxs4("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3", children: [
-          /* @__PURE__ */ jsxs4("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__ */ jsxs4("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(X, { 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__ */ jsxs4("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__ */ jsxs4("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__ */ jsxs4("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__ */ jsxs4("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 bg-surface-dim px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 ${focusField2}`
-                }
-              ),
-              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(Square, { 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,
-  HARNESS_REASONING_OPTIONS,
-  ReasoningLevelPicker,
-  AgentProfilePicker,
-  modelProvider,
-  snapHarnessToModel,
-  ArtifactAgentDock,
-  createFetchTransport,
-  AgentTimeline,
-  ChatContainer,
-  ChatMessage2 as ChatMessage,
-  MessageList,
-  ThinkingIndicator,
-  UserMessage
-};