@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/AgentVariablesInline.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { readStructuredList } from "../../utils/variable-customcomponent.js";
 import { ChevronRight, ChevronUp } from "lucide-react";
@@ -191,191 +192,213 @@ function AgentVariablesInline({
   if (!shouldShowVariables || !showVariablePanel || definitions.length === 0)
     return null;
   const firstSettingIndex = visibleDefs.findIndex(isControlVariable);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "w-full shrink-0",
       ref: rootRef,
-      "data-surface-value": surfaceValueName
-    },
-    /* @__PURE__ */ React.createElement(BoundVariableChips, { conversationId }),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "max-h-72 overflow-y-auto w-full divide-y divide-border/40",
-        "data-variable-inputs": true
-      },
-      visibleDefs.map((variable, index) => {
-        const isExpanded = expandedVariableId === variable.name;
-        const rawValue = userValues[variable.name] ?? variable.defaultValue ?? "";
-        const displayValue = toggleRowWord(variable, variableValueToDisplay(rawValue));
-        const inputText = variableValueToInputText(rawValue);
-        const isPicklistBound = !!readStructuredList(variable.customComponent)?.listId;
-        const tableType = tableVariableTypeOf(variable.customComponent);
-        const mediaFileId = isMediaVariableType(
-          variable.customComponent?.type ?? "textarea"
-        ) ? readMediaVariableFileId(rawValue) : null;
-        if (isControlVariable(variable)) {
-          return /* @__PURE__ */ React.createElement("div", { key: variable.name, "data-control-variable": variable.name }, index === firstSettingIndex && /* @__PURE__ */ React.createElement("p", { "data-variable-heading": "", className: "px-2.5 pt-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" }, "Settings"), /* @__PURE__ */ React.createElement("div", { "data-variable-row": "", className: "flex items-center gap-2 pl-2.5 pr-1.5 py-1 min-h-8" }, /* @__PURE__ */ React.createElement(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0" }, variableRunLabel(variable), ":"), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
-            VariableInputComponent,
-            {
-              conversationId,
-              value: rawValue,
-              onChange: (v) => handleValueChange(variable.name, v),
-              variableName: variable.name,
-              label: variableRunLabel(variable),
-              customComponent: variable.customComponent,
-              helpText: variable.helpText,
-              compact: true,
-              hideLabel: true,
-              autoFocus: false
-            }
-          ))));
-        }
-        const rowKind = collapsedRowKind(variable.customComponent, {
-          picklistBound: isPicklistBound
-        });
-        const rowChoices = rowKind === "text-line" ? collapsedRowChoices(variable.customComponent) : null;
-        if (isExpanded) {
-          return /* @__PURE__ */ React.createElement(
-            Popover,
-            {
-              key: variable.name,
-              open: true,
-              modal: false,
-              onOpenChange: (open) => {
-                if (!open) handleExpand(null);
-              }
-            },
-            /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                "data-variable-row": "",
-                className: "flex items-center gap-2 pl-2.5 pr-1.5 h-8 bg-transparent hover:bg-accent/40 transition-colors focus-within:bg-accent/30 group w-full cursor-pointer",
-                onClick: () => handleExpand(variable.name),
-                tabIndex: index + 1
-              },
-              /* @__PURE__ */ React.createElement(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer" }, variableRunLabel(variable), ":"),
-              /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, mediaFileId ? /* @__PURE__ */ React.createElement(FileResourceChip, { fileId: mediaFileId, size: "xs" }) : tableType && !isEmptyTableReference(rawValue) ? /* @__PURE__ */ React.createElement("span", { className: "text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis block" }, /* @__PURE__ */ React.createElement(TableReferenceNames, { value: rawValue })) : displayValue && !tableType ? /* @__PURE__ */ React.createElement("span", { className: "text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis block" }, displayValue.replace(/\n/g, " \u21B5 ")) : /* @__PURE__ */ React.createElement("span", { className: "text-sm text-muted-foreground/60" }, variable.helpText ?? "Enter value...")),
-              /* @__PURE__ */ React.createElement("span", { className: "shrink-0 h-6 w-6 inline-flex items-center justify-center rounded-full text-primary" }, /* @__PURE__ */ React.createElement(ChevronUp, { className: "w-3.5 h-3.5" }))
-            )),
-            /* @__PURE__ */ React.createElement(
-              PopoverContent,
-              {
-                ref: expandedEditorRef,
-                className: "relative p-2 border-border overflow-y-auto rounded-2xl shadow-[0_8px_32px_-8px_rgba(0,0,0,0.18)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.04)_inset,0_8px_24px_-8px_rgba(0,0,0,0.6)]",
-                style: {
-                  width: "var(--radix-popover-trigger-width)",
-                  maxHeight: "min(500px, calc(var(--visual-viewport-height, 100dvh) - 1.5rem))",
-                  top: expandedEditorLift > 0 ? -expandedEditorLift : void 0
-                },
-                align: "start",
-                side: "top",
-                sideOffset: 6,
-                onInteractOutside: (event) => {
-                  const target = event.target;
-                  if (target instanceof Element && target.closest("[data-radix-popper-content-wrapper]")) {
-                    event.preventDefault();
-                  }
-                }
-              },
-              /* @__PURE__ */ React.createElement(
-                VariableInputComponent,
-                {
-                  conversationId,
-                  value: rawValue,
-                  onChange: (v) => handleValueChange(variable.name, v),
-                  variableName: variable.name,
-                  label: variableRunLabel(variable),
-                  customComponent: variable.customComponent,
-                  onRequestClose: () => handleExpand(null),
-                  onEnterAdvance: () => advanceFromExpanded(index),
-                  helpText: variable.helpText,
-                  compact
-                }
-              )
-            )
-          );
-        }
-        return /* @__PURE__ */ React.createElement(
+      "data-surface-value": surfaceValueName,
+      children: [
+        /* @__PURE__ */ jsx(BoundVariableChips, { conversationId }),
+        /* @__PURE__ */ jsx(
           "div",
           {
-            key: variable.name,
-            "data-variable-row": "",
-            className: "flex items-center gap-2 pl-2.5 pr-1.5 h-8 bg-transparent hover:bg-accent/40 transition-colors focus-within:bg-accent/30 group"
-          },
-          /* @__PURE__ */ React.createElement(
-            Label,
-            {
-              className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer",
-              onClick: () => handleExpand(variable.name)
-            },
-            variableRunLabel(variable),
-            ":"
-          ),
-          rowKind === "open-editor" && mediaFileId ? /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: "flex-1 min-w-0",
-              "data-variable-index": index,
-              tabIndex: index + 1,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleExpand(variable.name);
-                }
+            className: "max-h-72 overflow-y-auto w-full divide-y divide-border/40",
+            "data-variable-inputs": true,
+            children: visibleDefs.map((variable, index) => {
+              const isExpanded = expandedVariableId === variable.name;
+              const rawValue = userValues[variable.name] ?? variable.defaultValue ?? "";
+              const displayValue = toggleRowWord(variable, variableValueToDisplay(rawValue));
+              const inputText = variableValueToInputText(rawValue);
+              const isPicklistBound = !!readStructuredList(variable.customComponent)?.listId;
+              const tableType = tableVariableTypeOf(variable.customComponent);
+              const mediaFileId = isMediaVariableType(
+                variable.customComponent?.type ?? "textarea"
+              ) ? readMediaVariableFileId(rawValue) : null;
+              if (isControlVariable(variable)) {
+                return /* @__PURE__ */ jsxs("div", { "data-control-variable": variable.name, children: [
+                  index === firstSettingIndex && /* @__PURE__ */ jsx("p", { "data-variable-heading": "", className: "px-2.5 pt-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Settings" }),
+                  /* @__PURE__ */ jsxs("div", { "data-variable-row": "", className: "flex items-center gap-2 pl-2.5 pr-1.5 py-1 min-h-8", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0", children: [
+                      variableRunLabel(variable),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+                      VariableInputComponent,
+                      {
+                        conversationId,
+                        value: rawValue,
+                        onChange: (v) => handleValueChange(variable.name, v),
+                        variableName: variable.name,
+                        label: variableRunLabel(variable),
+                        customComponent: variable.customComponent,
+                        helpText: variable.helpText,
+                        compact: true,
+                        hideLabel: true,
+                        autoFocus: false
+                      }
+                    ) })
+                  ] })
+                ] }, variable.name);
               }
-            },
-            /* @__PURE__ */ React.createElement(
-              FileResourceChip,
-              {
-                fileId: mediaFileId,
-                size: "xs",
-                onOpen: () => handleExpand(variable.name)
+              const rowKind = collapsedRowKind(variable.customComponent, {
+                picklistBound: isPicklistBound
+              });
+              const rowChoices = rowKind === "text-line" ? collapsedRowChoices(variable.customComponent) : null;
+              if (isExpanded) {
+                return /* @__PURE__ */ jsxs(
+                  Popover,
+                  {
+                    open: true,
+                    modal: false,
+                    onOpenChange: (open) => {
+                      if (!open) handleExpand(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          "data-variable-row": "",
+                          className: "flex items-center gap-2 pl-2.5 pr-1.5 h-8 bg-transparent hover:bg-accent/40 transition-colors focus-within:bg-accent/30 group w-full cursor-pointer",
+                          onClick: () => handleExpand(variable.name),
+                          tabIndex: index + 1,
+                          children: [
+                            /* @__PURE__ */ jsxs(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer", children: [
+                              variableRunLabel(variable),
+                              ":"
+                            ] }),
+                            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: mediaFileId ? /* @__PURE__ */ jsx(FileResourceChip, { fileId: mediaFileId, size: "xs" }) : tableType && !isEmptyTableReference(rawValue) ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis block", children: /* @__PURE__ */ jsx(TableReferenceNames, { value: rawValue }) }) : displayValue && !tableType ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis block", children: displayValue.replace(/\n/g, " \u21B5 ") }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground/60", children: variable.helpText ?? "Enter value..." }) }),
+                            /* @__PURE__ */ jsx("span", { className: "shrink-0 h-6 w-6 inline-flex items-center justify-center rounded-full text-primary", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5" }) })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        PopoverContent,
+                        {
+                          ref: expandedEditorRef,
+                          className: "relative p-2 border-border overflow-y-auto rounded-2xl shadow-[0_8px_32px_-8px_rgba(0,0,0,0.18)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.04)_inset,0_8px_24px_-8px_rgba(0,0,0,0.6)]",
+                          style: {
+                            width: "var(--radix-popover-trigger-width)",
+                            maxHeight: "min(500px, calc(var(--visual-viewport-height, 100dvh) - 1.5rem))",
+                            top: expandedEditorLift > 0 ? -expandedEditorLift : void 0
+                          },
+                          align: "start",
+                          side: "top",
+                          sideOffset: 6,
+                          onInteractOutside: (event) => {
+                            const target = event.target;
+                            if (target instanceof Element && target.closest("[data-radix-popper-content-wrapper]")) {
+                              event.preventDefault();
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            VariableInputComponent,
+                            {
+                              conversationId,
+                              value: rawValue,
+                              onChange: (v) => handleValueChange(variable.name, v),
+                              variableName: variable.name,
+                              label: variableRunLabel(variable),
+                              customComponent: variable.customComponent,
+                              onRequestClose: () => handleExpand(null),
+                              onEnterAdvance: () => advanceFromExpanded(index),
+                              helpText: variable.helpText,
+                              compact
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  variable.name
+                );
               }
-            )
-          ) : rowKind === "open-editor" ? /* @__PURE__ */ React.createElement(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleExpand(variable.name),
-              className: "flex-1 text-left text-sm bg-transparent text-foreground min-w-0 truncate cursor-pointer",
-              "data-variable-index": index,
-              tabIndex: index + 1
-            },
-            tableType && !isEmptyTableReference(rawValue) ? /* @__PURE__ */ React.createElement(TableReferenceNames, { value: rawValue }) : !tableType && displayValue || /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, variableRunHint(variable) ?? "Choose\u2026")
-          ) : /* @__PURE__ */ React.createElement(
-            "input",
-            {
-              type: "text",
-              value: inputText.includes("\n") ? inputText.replace(/\n/g, " \u21B5 ") : inputText,
-              onChange: (e) => handleValueChange(
-                variable.name,
-                // The box shows line breaks as " ↵ "; store them back as
-                // real line breaks so the full editor reads the same value.
-                e.target.value.replace(/ ↵ /g, "\n")
-              ),
-              onKeyDown: (e) => handleVariableKeyDown(e, index),
-              placeholder: variable.helpText ?? (rowChoices ? "Type or choose\u2026" : "Enter value..."),
-              className: "flex-1 text-sm bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground/60 min-w-0",
-              "data-variable-index": index,
-              tabIndex: index + 1
-            }
-          ),
-          rowChoices && /* @__PURE__ */ React.createElement(
-            RowChoicesButton,
-            {
-              options: rowChoices.options,
-              multiple: rowChoices.multiple,
-              value: inputText,
-              onChange: (v) => handleValueChange(variable.name, v),
-              label: variableRunLabel(variable)
-            }
-          ),
-          /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: () => handleExpand(variable.name), title: "Expand to full editor", "aria-label": "Expand to full editor", className: "shrink-0" })
-        );
-      })
-    )
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-variable-row": "",
+                  className: "flex items-center gap-2 pl-2.5 pr-1.5 h-8 bg-transparent hover:bg-accent/40 transition-colors focus-within:bg-accent/30 group",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Label,
+                      {
+                        className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer",
+                        onClick: () => handleExpand(variable.name),
+                        children: [
+                          variableRunLabel(variable),
+                          ":"
+                        ]
+                      }
+                    ),
+                    rowKind === "open-editor" && mediaFileId ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex-1 min-w-0",
+                        "data-variable-index": index,
+                        tabIndex: index + 1,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleExpand(variable.name);
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          FileResourceChip,
+                          {
+                            fileId: mediaFileId,
+                            size: "xs",
+                            onOpen: () => handleExpand(variable.name)
+                          }
+                        )
+                      }
+                    ) : rowKind === "open-editor" ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleExpand(variable.name),
+                        className: "flex-1 text-left text-sm bg-transparent text-foreground min-w-0 truncate cursor-pointer",
+                        "data-variable-index": index,
+                        tabIndex: index + 1,
+                        children: tableType && !isEmptyTableReference(rawValue) ? /* @__PURE__ */ jsx(TableReferenceNames, { value: rawValue }) : !tableType && displayValue || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: variableRunHint(variable) ?? "Choose\u2026" })
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: inputText.includes("\n") ? inputText.replace(/\n/g, " \u21B5 ") : inputText,
+                        onChange: (e) => handleValueChange(
+                          variable.name,
+                          // The box shows line breaks as " ↵ "; store them back as
+                          // real line breaks so the full editor reads the same value.
+                          e.target.value.replace(/ ↵ /g, "\n")
+                        ),
+                        onKeyDown: (e) => handleVariableKeyDown(e, index),
+                        placeholder: variable.helpText ?? (rowChoices ? "Type or choose\u2026" : "Enter value..."),
+                        className: "flex-1 text-sm bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground/60 min-w-0",
+                        "data-variable-index": index,
+                        tabIndex: index + 1
+                      }
+                    ),
+                    rowChoices && /* @__PURE__ */ jsx(
+                      RowChoicesButton,
+                      {
+                        options: rowChoices.options,
+                        multiple: rowChoices.multiple,
+                        value: inputText,
+                        onChange: (v) => handleValueChange(variable.name, v),
+                        label: variableRunLabel(variable)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => handleExpand(variable.name), title: "Expand to full editor", "aria-label": "Expand to full editor", className: "shrink-0" })
+                  ]
+                },
+                variable.name
+              );
+            })
+          }
+        )
+      ]
+    }
   );
 }
 function toggleRowWord(variable, display) {

package/dist/agents/components/inputs/BoundVariableChips.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Link2, ChevronDown, Save, X, RotateCcw } from "lucide-react";
 import {
@@ -70,21 +71,25 @@ function BoundVariableChips({
   if (resolved.length === 0 && promptTypes.length === 0 && !hasDataBound) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1.5 px-2.5 py-1.5" }, /* @__PURE__ */ React.createElement(DataBoundVariableChips, { conversationId }), promptTypes.map((p) => /* @__PURE__ */ React.createElement(
-    BoundScopePrompt,
-    {
-      key: p.scopeTypeId,
-      scopeTypeId: p.scopeTypeId,
-      label: p.label
-    }
-  )), resolved.map((info) => /* @__PURE__ */ React.createElement(
-    BoundChip,
-    {
-      key: info.name,
-      conversationId,
-      info
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 px-2.5 py-1.5", children: [
+    /* @__PURE__ */ jsx(DataBoundVariableChips, { conversationId }),
+    promptTypes.map((p) => /* @__PURE__ */ jsx(
+      BoundScopePrompt,
+      {
+        scopeTypeId: p.scopeTypeId,
+        label: p.label
+      },
+      p.scopeTypeId
+    )),
+    resolved.map((info) => /* @__PURE__ */ jsx(
+      BoundChip,
+      {
+        conversationId,
+        info
+      },
+      info.name
+    ))
+  ] });
 }
 function BoundScopePrompt({
   scopeTypeId,
@@ -101,17 +106,23 @@ function BoundScopePrompt({
       dispatch(ensureScopeTree());
     }
   }, [orgId, loaded, scopeTypeId, dispatch]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Select,
     {
       value: "",
       onValueChange: (scopeId) => (
         // Additive — active context is multi-scope; keyed by scope id.
         dispatch(addActiveScope(scopeId))
-      )
-    },
-    /* @__PURE__ */ React.createElement(SelectTrigger, { asChild: true, hideArrow: true }, /* @__PURE__ */ React.createElement(Chip, { asChild: true, tone: "primary", label: `Select ${label}` }, /* @__PURE__ */ React.createElement("button", { type: "button" }))),
-    /* @__PURE__ */ React.createElement(SelectContent, null, scopes.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5 text-xs text-muted-foreground" }, "No ", label, " yet") : scopes.map((sc) => /* @__PURE__ */ React.createElement(SelectItem, { key: sc.id, value: sc.id }, sc.name)))
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { asChild: true, hideArrow: true, children: /* @__PURE__ */ jsx(Chip, { asChild: true, tone: "primary", label: `Select ${label}`, children: /* @__PURE__ */ jsx("button", { type: "button" }) }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: scopes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: [
+          "No ",
+          label,
+          " yet"
+        ] }) : scopes.map((sc) => /* @__PURE__ */ jsx(SelectItem, { value: sc.id, children: sc.name }, sc.id)) })
+      ]
+    }
   );
 }
 function BoundChip({
@@ -179,64 +190,94 @@ function BoundChip({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement("span", { className: "inline-flex max-w-[280px] items-center rounded-full border border-border bg-muted/60 text-xs text-foreground" }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Link2, null), iconEnd: /* @__PURE__ */ React.createElement(ChevronDown, null), title: `${humanizeIdentifier(info.name)} \u2014 auto-filled from ${scopeLabel}. Click to override.`, className: "min-w-0" }, humanizeIdentifier(info.name), " ", displayValue || "\u2014")), activeScopeId && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), onClick: handleRemoveScope, "aria-label": `Stop using ${scopeLabel}`, title: `Stop using ${scopeLabel} \u2014 ${humanizeIdentifier(info.name)} goes back to a normal input`, className: "shrink-0" })), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      sizing: "content",
-      className: "p-3 rounded-2xl",
-      align: "start",
-      side: "top",
-      sideOffset: 6
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Link2, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ React.createElement("span", null, "Auto-filled from", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, info.scopeTypeLabel), ". Editing overrides it for this run.")), /* @__PURE__ */ React.createElement(
-      ContextValueInput,
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-[280px] items-center rounded-full border border-border bg-muted/60 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Link2, {}), iconEnd: /* @__PURE__ */ jsx(ChevronDown, {}), title: `${humanizeIdentifier(info.name)} \u2014 auto-filled from ${scopeLabel}. Click to override.`, className: "min-w-0", children: [
+        humanizeIdentifier(info.name),
+        " ",
+        displayValue || "\u2014"
+      ] }) }),
+      activeScopeId && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: handleRemoveScope, "aria-label": `Stop using ${scopeLabel}`, title: `Stop using ${scopeLabel} \u2014 ${humanizeIdentifier(info.name)} goes back to a normal input`, className: "shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
       {
-        valueType: info.valueType ?? "string",
-        customComponent: info.customComponent,
-        value: effectiveValue,
-        onChange: handleChange,
-        referenceConfig: info.referenceConfig,
-        scopeId: writeScopeId ?? void 0,
-        displayName: info.name,
-        minHeight: 56,
-        maxHeight: 300
+        sizing: "content",
+        className: "p-3 rounded-2xl",
+        align: "start",
+        side: "top",
+        sideOffset: 6,
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Auto-filled from",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: info.scopeTypeLabel }),
+              ". Editing overrides it for this run."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ContextValueInput,
+            {
+              valueType: info.valueType ?? "string",
+              customComponent: info.customComponent,
+              value: effectiveValue,
+              onChange: handleChange,
+              referenceConfig: info.referenceConfig,
+              scopeId: writeScopeId ?? void 0,
+              displayName: info.name,
+              minHeight: 56,
+              maxHeight: 300
+            }
+          ),
+          hasUserOverride && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "quiet",
+              className: "w-full",
+              onClick: handleRevert,
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "h-3.5 w-3.5 mr-1.5" }),
+                "Revert to the ",
+                scopeLabel,
+                " value"
+              ]
+            }
+          ),
+          canWriteBack && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "w-full",
+              onClick: handleWriteBack,
+              disabled: saving,
+              children: [
+                /* @__PURE__ */ jsx(Save, { className: "h-3.5 w-3.5 mr-1.5" }),
+                saving ? "Saving\u2026" : `Save to ${info.scopeTypeLabel}`
+              ]
+            }
+          ),
+          activeScopeId && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "quiet",
+              className: "w-full",
+              onClick: handleRemoveScope,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 mr-1.5" }),
+                "Stop using ",
+                scopeLabel
+              ]
+            }
+          )
+        ] })
       }
-    ), hasUserOverride && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        variant: "quiet",
-        className: "w-full",
-        onClick: handleRevert
-      },
-      /* @__PURE__ */ React.createElement(RotateCcw, { className: "h-3.5 w-3.5 mr-1.5" }),
-      "Revert to the ",
-      scopeLabel,
-      " value"
-    ), canWriteBack && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        className: "w-full",
-        onClick: handleWriteBack,
-        disabled: saving
-      },
-      /* @__PURE__ */ React.createElement(Save, { className: "h-3.5 w-3.5 mr-1.5" }),
-      saving ? "Saving\u2026" : `Save to ${info.scopeTypeLabel}`
-    ), activeScopeId && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        variant: "quiet",
-        className: "w-full",
-        onClick: handleRemoveScope
-      },
-      /* @__PURE__ */ React.createElement(X, { className: "h-3.5 w-3.5 mr-1.5" }),
-      "Stop using ",
-      scopeLabel
-    ))
-  ));
+    )
+  ] });
 }
 export {
   BoundVariableChips