@tangle-network/sandbox-ui 0.20.3 → 0.21.0

package/dist/{chunk-MQ52AYJX.js → chunk-666PYT5K.js}

@@ -1,3 +1,9 @@
+import {
+  HARNESS_OPTIONS
+} from "./chunk-ESRYVGHF.js";
+import {
+  ModelPicker
+} from "./chunk-4KAPMTPU.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -92,11 +98,126 @@ function ReasoningLevelPicker({
   ] });
 }
 
+// src/chat/agent-session-controls.tsx
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import { Bot, ChevronDown as ChevronDown2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function HarnessDropdown({
+  value,
+  onChange,
+  available,
+  disabled
+}) {
+  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__ */ jsxs2(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: cn(
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-2.5",
+          "text-xs font-medium text-foreground shadow-sm transition-colors",
+          "hover:border-primary/30 hover:bg-accent/30 focus:outline-none focus:border-primary/40",
+          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        "aria-label": "Agent harness",
+        children: [
+          /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { children: selected?.label ?? value }),
+          /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx2(
+      DropdownMenu2.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: cn(
+          "z-50 w-72 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
+          "shadow-[var(--shadow-dropdown)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxs2(
+          DropdownMenu2.Item,
+          {
+            onSelect: (event) => {
+              event.preventDefault();
+              onChange(option.type);
+            },
+            className: cn(
+              "flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 outline-none",
+              "transition-colors hover:bg-accent/40 focus:bg-accent/40",
+              option.type === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: option.label }),
+              option.description && /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground", children: option.description })
+            ]
+          },
+          option.type
+        ))
+      }
+    ) })
+  ] });
+}
+function AgentSessionControls({
+  harness,
+  model,
+  reasoning,
+  trailing,
+  className
+}) {
+  if (!harness && !model && !reasoning && !trailing) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2", className),
+      "data-testid": "agent-session-controls",
+      children: [
+        harness && /* @__PURE__ */ jsx2(HarnessDropdown, { ...harness }),
+        model && /* @__PURE__ */ jsx2(
+          ModelPicker,
+          {
+            variant: "pill",
+            label: "",
+            value: model.value,
+            onChange: model.onChange,
+            models: model.models,
+            loading: model.loading,
+            popular: model.popular,
+            recents: model.recents,
+            disabled: model.disabled || model.models.length === 0
+          }
+        ),
+        reasoning && /* @__PURE__ */ jsx2(
+          ReasoningLevelPicker,
+          {
+            value: reasoning.value,
+            onChange: reasoning.onChange,
+            options: reasoning.options,
+            disabled: reasoning.disabled
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+      ]
+    }
+  );
+}
+
 // src/chat/artifact-agent-dock.tsx
 import * as React from "react";
 import { Sparkles, Send, Square, X } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
   switch (scope.kind) {
@@ -262,7 +383,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "aside",
     {
       className: cn(
@@ -271,38 +392,38 @@ function ArtifactAgentDock({
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
-        /* @__PURE__ */ jsxs2("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx2(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
-            /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
-              /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
+        /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx3(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx3("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
             ] })
           ] }),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
               className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx2("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs2("div", { className: "px-3 py-12 text-center", children: [
-          /* @__PURE__ */ jsx2(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
-          /* @__PURE__ */ jsxs2("p", { className: "text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx3("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs3("div", { className: "px-3 py-12 text-center", children: [
+          /* @__PURE__ */ jsx3(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-foreground", children: [
             "Ask the agent about this ",
             scope.kind === "vault-file" ? "document" : scope.kind,
             "."
           ] }),
-          /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
-        ] }) : /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-          messages.map((m) => /* @__PURE__ */ jsx2(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
-          streamContent && /* @__PURE__ */ jsx2(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
+          /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
+        ] }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+          messages.map((m) => /* @__PURE__ */ jsx3(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx3(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
         ] }) }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "form",
           {
             className: "border-t border-border bg-background/60 p-3",
@@ -310,8 +431,8 @@ function ArtifactAgentDock({
               e.preventDefault();
               void send();
             },
-            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx3(
                 "textarea",
                 {
                   value: composer,
@@ -328,23 +449,23 @@ function ArtifactAgentDock({
                   className: "min-h-[44px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
                 }
               ),
-              sending ? /* @__PURE__ */ jsx2(
+              sending ? /* @__PURE__ */ jsx3(
                 "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-muted hover:text-foreground",
-                  children: /* @__PURE__ */ jsx2(Square, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx3(Square, { className: "h-4 w-4" })
                 }
-              ) : /* @__PURE__ */ jsx2(
+              ) : /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "submit",
                   disabled: !composer.trim() || !threadId,
                   "aria-label": "Send",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
-                  children: /* @__PURE__ */ jsx2(Send, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
                 }
               )
             ] })
@@ -433,6 +554,7 @@ function createFetchTransport(opts) {
 export {
   DEFAULT_REASONING_LEVEL_OPTIONS,
   ReasoningLevelPicker,
+  AgentSessionControls,
   ArtifactAgentDock,
   createFetchTransport,
   AgentTimeline,