@ai-matrx/agents 0.41.0 → 0.42.0

package/dist/context/react/index.cjs

@@ -494,10 +494,43 @@ function summarizeContextRows(rows) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CONTEXT_RULES_GRID = {
   compact: "grid grid-cols-[minmax(0,1fr)_2.75rem_4rem_6.5rem] items-center gap-x-2 px-2",
-  // Phone widths (375px): the fixed columns stay compact so Item always keeps
-  // the remaining width — ~125px at 375 — and truncates with an ellipsis.
   comfortable: "grid grid-cols-[minmax(0,1fr)_2.75rem_3.5rem_6.75rem] items-center gap-x-1.5 px-3"
 };
+var NARROW_GRID = {
+  compact: "grid grid-cols-[minmax(0,1fr)_auto_auto_auto] items-center gap-x-1.5 px-2",
+  comfortable: "grid grid-cols-[minmax(0,1fr)_auto_auto_auto] items-center gap-x-1.5 px-3"
+};
+var CONTEXT_RULES_NARROW_BELOW = 400;
+var useIsoLayoutEffect = typeof window === "undefined" ? React2.useEffect : React2.useLayoutEffect;
+function useNarrow(ref) {
+  const [narrow, setNarrow] = React2.useState(false);
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const fit = () => {
+      const width = el.clientWidth;
+      if (width > 0) setNarrow(width < CONTEXT_RULES_NARROW_BELOW);
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return narrow;
+}
+var INDENT = ["", "pl-2", "pl-4", "pl-6"];
+var indent = (depth) => INDENT[Math.min(depth, INDENT.length - 1)];
+function sectionsOf(levels) {
+  const out = [];
+  for (const level of levels) {
+    const label = level.ref.path.length > 1 ? level.ref.path[0] : null;
+    const last = out[out.length - 1];
+    if (label !== null && last && last.label === label) last.levels.push(level);
+    else out.push({ id: label === null ? `level:${level.ref.id}` : `section:${label}`, label, levels: [level] });
+  }
+  return out;
+}
 function ContextRulesTable({
   rows,
   cap,
@@ -514,14 +547,23 @@ function ContextRulesTable({
   className
 }) {
   const comfortable = density === "comfortable";
+  const rootRef = React2.useRef(null);
+  const narrow = useNarrow(rootRef);
+  const grid = narrow ? NARROW_GRID[density] : CONTEXT_RULES_GRID[density];
   const levels = buildContextLevels(rows, hierarchy);
   const headed = Boolean(hierarchy) || levels.length > 1;
+  const bulkChanges = (list, next) => includeChanges(list, next, cap);
+  const bulk = (list) => onSetInclude && !readOnly ? (next) => {
+    const changes = bulkChanges(list, next);
+    if (changes.length > 0) onSetInclude(changes);
+  } : void 0;
   const renderRow = (row, depth) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     ContextRuleRow,
     {
       row,
       cap,
-      density,
+      grid,
+      narrow,
       depth: headed ? depth : 0,
       readOnly,
       selected: selectedKey === row.key,
@@ -534,112 +576,131 @@ function ContextRulesTable({
     },
     rowId(row)
   );
-  const bulk = (list) => onSetInclude && !readOnly ? (next) => {
-    const changes = includeChanges(list, next, cap);
-    if (changes.length > 0) onSetInclude(changes);
-  } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "table", "aria-label": "Values", "data-density": density, className: (0, import_design_system2.cn)("text-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        role: "row",
-        className: (0, import_design_system2.cn)(
-          CONTEXT_RULES_GRID[density],
-          "sticky top-0 z-10 h-7 border-b border-border bg-card font-medium text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", children: "Item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "text-center", children: "Include" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "text-right", children: "Chars" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "pr-6 text-right", children: "Inline max" })
-        ]
-      }
-    ),
-    levels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-2 py-3 text-center text-muted-foreground", children: "None" }) : levels.map((level) => {
-      const all = levelRows(level);
-      const name = level.ref.path.join(" \u203A ");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "rowgroup", "aria-label": headed ? name : void 0, "data-level": level.ref.id, children: [
-        headed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          LevelHeading,
+  const heading = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, { ...props, grid, comfortable, readOnly }, props.id);
+  const renderLevel = (level, depth) => {
+    const all = levelRows(level);
+    const name = level.ref.path[level.ref.path.length - 1] ?? "";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "rowgroup", "aria-label": headed ? level.ref.path.join(" \u203A ") : void 0, "data-level": level.ref.id, children: [
+      headed ? heading({
+        id: `h:${level.ref.id}`,
+        kind: "level",
+        label: name,
+        switchName: level.ref.path.join(" \u203A "),
+        depth,
+        rows: all,
+        ...levelSwitch(level, bulk(all))
+      }) : null,
+      level.rows.map((row) => renderRow(row, depth + 1)),
+      level.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "rowgroup", "aria-label": group.ref.label, "data-group": group.ref.id, children: [
+        heading({
+          id: `h:${group.ref.id}`,
+          kind: "group",
+          label: group.ref.label,
+          switchName: group.ref.label,
+          depth: depth + 1,
+          rows: group.rows,
+          checked: group.rows.some((r) => r.include),
+          onToggle: bulk(group.rows)
+        }),
+        group.rows.map((row) => renderRow(row, depth + 2))
+      ] }, group.ref.id))
+    ] }, level.ref.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      role: "table",
+      "aria-label": "Values",
+      "data-density": density,
+      "data-layout": narrow ? "narrow" : "wide",
+      className: (0, import_design_system2.cn)("text-xs", className),
+      children: [
+        narrow ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
           {
-            kind: "level",
-            path: level.ref.path,
-            rows: all,
-            density,
-            readOnly,
-            ...levelSwitch(level, bulk(all))
+            role: "row",
+            className: (0, import_design_system2.cn)(grid, "sticky top-0 z-10 h-7 border-b border-border bg-card font-medium text-muted-foreground"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", children: "Item" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "text-center", children: "Include" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "text-right", children: "Chars" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "columnheader", className: "pr-6 text-right", children: "Inline max" })
+            ]
           }
-        ) : null,
-        level.rows.map((row) => renderRow(row, 1)),
-        level.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "rowgroup", "aria-label": group.ref.label, "data-group": group.ref.id, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            LevelHeading,
-            {
-              kind: "group",
-              path: [group.ref.label],
-              rows: group.rows,
-              density,
-              readOnly,
-              onToggle: bulk(group.rows),
-              checked: group.rows.some((r) => r.include)
+        ),
+        levels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-2 py-3 text-center text-muted-foreground", children: "None" }) : sectionsOf(levels).map((section) => {
+          if (section.label === null || !headed) return renderLevel(section.levels[0], 0);
+          const all = section.levels.flatMap(levelRows);
+          const several = section.levels.length > 1;
+          const toggleSection = several && !readOnly ? (next) => {
+            const changes = [];
+            for (const level of section.levels) {
+              if (level.master) level.master.onToggle?.(next);
+              else changes.push(...bulkChanges(levelRows(level), next));
             }
-          ),
-          group.rows.map((row) => renderRow(row, 2))
-        ] }, group.ref.id))
-      ] }, level.ref.id);
-    })
-  ] }) });
+            if (changes.length > 0) onSetInclude?.(changes);
+          } : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "rowgroup", "aria-label": section.label, "data-section": section.label, children: [
+            heading({
+              id: `h:${section.id}`,
+              kind: "section",
+              label: section.label,
+              switchName: section.label,
+              depth: 0,
+              rows: all,
+              checked: section.levels.some((l) => l.master ? l.master.on : levelRows(l).some((r) => r.include)),
+              onToggle: toggleSection,
+              noSwitch: !several
+            }),
+            section.levels.map((level) => renderLevel(level, 1))
+          ] }, section.id);
+        })
+      ]
+    }
+  ) });
 }
 function levelSwitch(level, bulk) {
   if (level.master) return { checked: level.master.on, onToggle: level.master.onToggle };
   return { checked: levelRows(level).some((r) => r.include), onToggle: bulk };
 }
-function LevelHeading({
+function Heading({
   kind,
-  path,
+  label,
+  switchName,
+  depth,
   rows,
-  density,
-  readOnly,
   checked,
-  onToggle
+  onToggle,
+  noSwitch,
+  grid,
+  comfortable,
+  readOnly
 }) {
-  const name = path.join(" \u203A ");
   const { count, charsLabel } = summarizeContextRows(rows);
   const total = rows.length;
-  const showSwitch = Boolean(onToggle) || readOnly && total > 0;
+  const showSwitch = !noSwitch && (Boolean(onToggle) || readOnly && total > 0);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       role: "row",
       "data-heading": kind,
       className: (0, import_design_system2.cn)(
-        CONTEXT_RULES_GRID[density],
+        grid,
         "border-b border-border/50 font-medium",
-        density === "comfortable" ? "min-h-11" : "h-7",
-        kind === "level" ? "bg-muted/60 text-foreground" : "bg-muted/25 text-muted-foreground"
+        comfortable ? "min-h-11" : "h-7",
+        kind === "group" ? "bg-muted/25 text-muted-foreground" : "bg-muted/60 text-foreground"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "cell", className: (0, import_design_system2.cn)("flex min-w-0 items-center gap-1", kind === "group" && "pl-2"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex min-w-0 items-center gap-1 overflow-hidden", title: name, children: path.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React2.Fragment, { children: [
-            i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "\u203A" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "span",
-              {
-                className: (0, import_design_system2.cn)(
-                  "truncate",
-                  i < path.length - 1 ? "max-w-[45%] shrink-0 text-muted-foreground" : "min-w-0"
-                ),
-                children: part
-              }
-            )
-          ] }, `${i}:${part}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "cell", className: (0, import_design_system2.cn)("flex min-w-0 items-center gap-1", indent(depth)), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 truncate", title: label, children: label }),
           total > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 font-normal tabular-nums text-muted-foreground", children: count === total ? total : `${count}/${total}` }) : null
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", className: "flex justify-center", children: showSwitch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_design_system2.Switch,
           {
             size: "sm",
-            "aria-label": `Include ${name}`,
+            "aria-label": `Include ${switchName}`,
             checked,
             disabled: readOnly || !onToggle,
             onCheckedChange: (next) => onToggle?.(next)
@@ -654,7 +715,8 @@ function LevelHeading({
 function ContextRuleRow({
   row,
   cap,
-  density,
+  grid,
+  narrow,
   depth,
   comfortable,
   readOnly,
@@ -687,7 +749,7 @@ function ContextRuleRow({
       "data-mismatch": mismatches.length > 0 ? "true" : void 0,
       "aria-selected": selected || void 0,
       className: (0, import_design_system2.cn)(
-        CONTEXT_RULES_GRID[density],
+        grid,
         "border-b border-border/50",
         comfortable ? "min-h-11" : "h-7",
         selected && "bg-accent"
@@ -699,8 +761,7 @@ function ContextRuleRow({
             role: "cell",
             className: (0, import_design_system2.cn)(
               "flex min-w-0 items-center gap-1.5",
-              depth === 1 && "pl-2",
-              depth === 2 && "pl-4",
+              indent(depth),
               !row.include && "opacity-50"
             ),
             children: [
@@ -752,7 +813,7 @@ function ContextRuleRow({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", children: narrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineMaxButton, { row, cap, readOnly, comfortable, onChange }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           InlineMaxInput,
           {
             label: row.label,
@@ -769,6 +830,52 @@ function ContextRuleRow({
     }
   );
 }
+function InlineMaxButton({
+  row,
+  cap,
+  readOnly,
+  comfortable,
+  onChange
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const own = row.userRule?.max_inline_chars ?? null;
+  const text = own !== null ? formatLimit(own) : limitPlaceholder(row, cap);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Inline max ${row.label}: ${text}`,
+        disabled: readOnly,
+        className: (0, import_design_system2.cn)(
+          "relative inline-flex min-w-[2.25rem] items-center justify-end gap-1 rounded px-1 tabular-nums hover:bg-accent disabled:opacity-60",
+          comfortable ? "h-8 after:absolute after:-inset-y-1.5 after:inset-x-0 after:content-['']" : "h-6",
+          own === null ? "text-muted-foreground" : "text-foreground"
+        ),
+        children: [
+          own !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "h-1 w-1 rounded-full bg-primary" }) : null,
+          text
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.PopoverContent, { align: "end", className: "w-auto p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-muted-foreground", children: "Inline max" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        InlineMaxInput,
+        {
+          label: row.label,
+          value: own,
+          inherited: inheritedLimit(row, cap),
+          placeholder: limitPlaceholder(row, cap),
+          cap,
+          disabled: readOnly,
+          comfortable,
+          onCommit: (next) => onChange(row.key, row.surfaceKey, withLimit(row, next))
+        }
+      )
+    ] }) })
+  ] });
+}
 
 // context/react/ContextRulesChip.tsx
 var React3 = __toESM(require("react"), 1);