@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run-controls/ContextPoliciesTab.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Plus, Trash2, Pencil, Check, X, RefreshCw } from "lucide-react";
@@ -147,81 +148,106 @@ function ContextPoliciesTab({ conversationId }) {
     setClearAllOpen(false);
   }, [conversationId, agentId, dispatch]);
   const hasAnyValues = Object.keys(contextEntries).length > 0 || adHocEntries.length > 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-y-auto" }, /* @__PURE__ */ React.createElement("div", { className: "p-2 space-y-4" }, /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Declared policies",
-      count: declaredPolicies.length
-    }
-  ), declaredPolicies.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "mt-2 px-3 py-2 text-[11px] text-muted-foreground border border-dashed border-border rounded-md" }, "No context policies; test keys in Ad-hoc below") : /* @__PURE__ */ React.createElement("div", { className: "mt-2 space-y-2" }, declaredPolicies.map((policy) => /* @__PURE__ */ React.createElement(
-    DeclaredPolicyRow,
-    {
-      key: policy.key,
-      policy,
-      entry: contextEntries[policy.key],
-      onWrite: writeEntry,
-      onClear: () => removeEntry(policy.key)
-    }
-  )))), /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Ad-hoc context",
-      count: adHocEntries.length,
-      rightPolicy: hasAnyValues ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ React.createElement(RefreshCw, null), onClick: handleClearAll, title: "Remove every value for this agent" }, "Clear all") : null
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "mt-2 space-y-2" }, adHocEntries.map((entry) => /* @__PURE__ */ React.createElement(
-    AdHocEntryRow,
-    {
-      key: entry.key,
-      entry,
-      onWrite: writeEntry,
-      onDelete: () => removeEntry(entry.key)
-    }
-  )), /* @__PURE__ */ React.createElement(
-    AddAdHocRow,
-    {
-      existingKeys: new Set(Object.keys(contextEntries)),
-      onAdd: (key, type) => writeEntry(
-        key,
-        type === "json" ? {} : "",
-        type,
-        key,
-        /* slotMatched */
-        false
-      )
-    }
-  )))), /* @__PURE__ */ React.createElement(
-    ConfirmDialog,
-    {
-      open: clearAllOpen,
-      onOpenChange: (open) => {
-        if (!open) setClearAllOpen(false);
-      },
-      title: "Clear all context",
-      description: "Clear every context value for this agent? This removes them from the current instance AND from saved storage.",
-      confirmLabel: "Clear all",
-      variant: "destructive",
-      onConfirm: confirmClearAll
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-4", children: [
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Declared policies",
+            count: declaredPolicies.length
+          }
+        ),
+        declaredPolicies.length === 0 ? /* @__PURE__ */ jsx("div", { className: "mt-2 px-3 py-2 text-[11px] text-muted-foreground border border-dashed border-border rounded-md", children: "No context policies; test keys in Ad-hoc below" }) : /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: declaredPolicies.map((policy) => /* @__PURE__ */ jsx(
+          DeclaredPolicyRow,
+          {
+            policy,
+            entry: contextEntries[policy.key],
+            onWrite: writeEntry,
+            onClear: () => removeEntry(policy.key)
+          },
+          policy.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Ad-hoc context",
+            count: adHocEntries.length,
+            rightPolicy: hasAnyValues ? /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ jsx(RefreshCw, {}), onClick: handleClearAll, title: "Remove every value for this agent", children: "Clear all" }) : null
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+          adHocEntries.map((entry) => /* @__PURE__ */ jsx(
+            AdHocEntryRow,
+            {
+              entry,
+              onWrite: writeEntry,
+              onDelete: () => removeEntry(entry.key)
+            },
+            entry.key
+          )),
+          /* @__PURE__ */ jsx(
+            AddAdHocRow,
+            {
+              existingKeys: new Set(Object.keys(contextEntries)),
+              onAdd: (key, type) => writeEntry(
+                key,
+                type === "json" ? {} : "",
+                type,
+                key,
+                /* slotMatched */
+                false
+              )
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: clearAllOpen,
+        onOpenChange: (open) => {
+          if (!open) setClearAllOpen(false);
+        },
+        title: "Clear all context",
+        description: "Clear every context value for this agent? This removes them from the current instance AND from saved storage.",
+        confirmLabel: "Clear all",
+        variant: "destructive",
+        onConfirm: confirmClearAll
+      }
+    )
+  ] });
 }
 function SectionHeader({
   title,
   count,
   rightPolicy
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground" }, title), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] tabular-nums text-muted-foreground/70" }, "(", count, ")"))), rightPolicy);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums text-muted-foreground/70", children: [
+        "(",
+        count,
+        ")"
+      ] })
+    ] }) }),
+    rightPolicy
+  ] });
 }
 function TypeBadge({ type }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
         "inline-flex items-center px-1.5 py-0 text-[9px] font-mono font-medium rounded border",
         TYPE_COLORS[type]
-      )
-    },
-    type
+      ),
+      children: type
+    }
   );
 }
 function DeclaredPolicyRow({
@@ -233,7 +259,7 @@ function DeclaredPolicyRow({
   const type = policy.type;
   const label = policy.label ?? policy.key;
   const initialString = valueToEditorString(entry?.value, type);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ValueEditorCard,
     {
       keyText: policy.key,
@@ -253,7 +279,7 @@ function DeclaredPolicyRow({
           true
         );
       },
-      rightAction: entry !== void 0 ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ React.createElement(X, null), onClick: onClear, title: "Clear value", "aria-label": "Clear value" }) : null,
+      rightAction: entry !== void 0 ? /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ jsx(X, {}), onClick: onClear, title: "Clear value", "aria-label": "Clear value" }) : null,
       isEmpty: entry === void 0
     }
   );
@@ -280,7 +306,7 @@ function AdHocEntryRow({
       false
     );
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ValueEditorCard,
     {
       keyText: entry.key,
@@ -293,7 +319,7 @@ function AdHocEntryRow({
         const { value } = editorStringToValue(text, type);
         onWrite(entry.key, value, type, entry.label, false);
       },
-      rightAction: /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ React.createElement(Trash2, null), onClick: onDelete, title: "Remove key", "aria-label": "Remove key" }),
+      rightAction: /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ jsx(Trash2, {}), onClick: onDelete, title: "Remove key", "aria-label": "Remove key" }),
       isEmpty: false
     }
   );
@@ -337,45 +363,72 @@ function ValueEditorCard({
     setJsonError(null);
   }, [latestCommittedRef]);
   const isFileUrl = type === "file_url";
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-md bg-card/40 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-2 py-1.5 bg-muted/30 border-b border-border" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[11px] text-foreground truncate" }, keyText), labelText !== keyText && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground truncate" }, "\u2014 ", labelText)), typeEditable && onTypeChange ? /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      value: type,
-      onChange: (e) => onTypeChange(e.target.value),
-      className: "text-[10px] font-mono bg-background border border-border rounded px-1 py-0.5 text-foreground focus:outline-none focus:border-primary"
-    },
-    TYPE_OPTIONS.map((t) => /* @__PURE__ */ React.createElement("option", { key: t, value: t }, t))
-  ) : /* @__PURE__ */ React.createElement(TypeBadge, { type }), rightAction), description && /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 text-[10px] text-muted-foreground/80 border-b border-border/50" }, description), /* @__PURE__ */ React.createElement("div", { className: "p-1.5" }, isFileUrl ? /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "url",
-      value: draft,
-      onChange: (e) => {
-        setDraft(e.target.value);
-        setDirty(true);
-      },
-      onBlur: commit,
-      placeholder: "https://\u2026",
-      className: "w-full text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:border-primary"
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    "textarea",
-    {
-      value: draft,
-      onChange: (e) => {
-        setDraft(e.target.value);
-        setDirty(true);
-      },
-      onBlur: commit,
-      placeholder: isEmpty ? type === "json" ? '{\n  "example": true\n}' : "Enter value\u2026" : "",
-      rows: Math.min(8, Math.max(2, draft.split("\n").length)),
-      spellCheck: false,
-      className: cn(
-        "w-full text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground resize-y focus:outline-none focus:border-primary",
-        jsonError && "border-destructive focus:border-destructive"
-      )
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex items-center justify-between gap-2 min-h-[16px]" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] flex-1 min-w-0" }, jsonError ? /* @__PURE__ */ React.createElement("span", { className: "text-destructive truncate", title: jsonError }, "JSON error: ", jsonError, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: jsonError })) : isEmpty ? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "not set") : dirty ? /* @__PURE__ */ React.createElement("span", { className: "text-amber-500" }, "unsaved \u2014 blur to commit") : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "saved")), dirty && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 shrink-0" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Pencil, null), glyphTone: "primary", onClick: revert, title: "Discard changes", "aria-label": "Discard changes" }), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ React.createElement(Check, null), onClick: commit, title: "Commit now", "aria-label": "Commit now" })))));
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-md bg-card/40 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 bg-muted/30 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-foreground truncate", children: keyText }),
+        labelText !== keyText && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground truncate", children: [
+          "\u2014 ",
+          labelText
+        ] })
+      ] }),
+      typeEditable && onTypeChange ? /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: type,
+          onChange: (e) => onTypeChange(e.target.value),
+          className: "text-[10px] font-mono bg-background border border-border rounded px-1 py-0.5 text-foreground focus:outline-none focus:border-primary",
+          children: TYPE_OPTIONS.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+        }
+      ) : /* @__PURE__ */ jsx(TypeBadge, { type }),
+      rightAction
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-[10px] text-muted-foreground/80 border-b border-border/50", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "p-1.5", children: [
+      isFileUrl ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "url",
+          value: draft,
+          onChange: (e) => {
+            setDraft(e.target.value);
+            setDirty(true);
+          },
+          onBlur: commit,
+          placeholder: "https://\u2026",
+          className: "w-full text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:border-primary"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: draft,
+          onChange: (e) => {
+            setDraft(e.target.value);
+            setDirty(true);
+          },
+          onBlur: commit,
+          placeholder: isEmpty ? type === "json" ? '{\n  "example": true\n}' : "Enter value\u2026" : "",
+          rows: Math.min(8, Math.max(2, draft.split("\n").length)),
+          spellCheck: false,
+          className: cn(
+            "w-full text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground resize-y focus:outline-none focus:border-primary",
+            jsonError && "border-destructive focus:border-destructive"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 min-h-[16px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] flex-1 min-w-0", children: jsonError ? /* @__PURE__ */ jsxs("span", { className: "text-destructive truncate", title: jsonError, children: [
+          "JSON error: ",
+          jsonError,
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: jsonError })
+        ] }) : isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "not set" }) : dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500", children: "unsaved \u2014 blur to commit" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "saved" }) }),
+        dirty && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Pencil, {}), glyphTone: "primary", onClick: revert, title: "Discard changes", "aria-label": "Discard changes" }),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(Check, {}), onClick: commit, title: "Commit now", "aria-label": "Commit now" })
+        ] })
+      ] })
+    ] })
+  ] });
 }
 function AddAdHocRow({
   existingKeys,
@@ -403,31 +456,42 @@ function AddAdHocRow({
     setTypeDraft("text");
     setError(null);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-dashed border-border rounded-md px-2 py-1.5 bg-card/20" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "text",
-      value: keyDraft,
-      onChange: (e) => {
-        setKeyDraft(e.target.value);
-        setError(null);
-      },
-      onKeyDown: (e) => {
-        if (e.key === "Enter") handleAdd();
-      },
-      className: "flex-1 min-w-0 text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:border-primary",
-      "data-identifier": true,
-      placeholder: "new_context_key"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "select",
-    {
-      value: typeDraft,
-      onChange: (e) => setTypeDraft(e.target.value),
-      className: "text-[10px] font-mono bg-background border border-border rounded px-1 py-1 text-foreground focus:outline-none focus:border-primary"
-    },
-    TYPE_OPTIONS.map((t) => /* @__PURE__ */ React.createElement("option", { key: t, value: t }, t))
-  ), /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "quiet", onClick: handleAdd, icon: /* @__PURE__ */ React.createElement(Plus, null) }, "Add")), error && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-[10px] text-destructive" }, error, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error })));
+  return /* @__PURE__ */ jsxs("div", { className: "border border-dashed border-border rounded-md px-2 py-1.5 bg-card/20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: keyDraft,
+          onChange: (e) => {
+            setKeyDraft(e.target.value);
+            setError(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleAdd();
+          },
+          className: "flex-1 min-w-0 text-[11px] font-mono bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:border-primary",
+          "data-identifier": true,
+          placeholder: "new_context_key"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: typeDraft,
+          onChange: (e) => setTypeDraft(e.target.value),
+          className: "text-[10px] font-mono bg-background border border-border rounded px-1 py-1 text-foreground focus:outline-none focus:border-primary",
+          children: TYPE_OPTIONS.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "quiet", onClick: handleAdd, icon: /* @__PURE__ */ jsx(Plus, {}), children: "Add" })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-[10px] text-destructive", children: [
+      error,
+      " ",
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+    ] })
+  ] });
 }
 export {
   ContextPoliciesTab,