@ai-matrx/agents 0.41.1 → 0.42.1

package/dist/context/react/index.d.cts

@@ -297,7 +297,9 @@ interface ContextRulesTableProps {
     className?: string;
 }
 /**
- * The context rules table: Item | Include | Chars | Inline max. Presentational
+ * The context rules table: Item | Include | Chars | Inline max, under nested
+ * heading rows — section ("Marketing"), page ("Marketing Brand Cockpit"), the
+ * page's own groups — each heading full width with its switch. Presentational
  * and state-agnostic — every edit goes out through `onChange`.
  */
 declare function ContextRulesTable({ rows, cap, readOnly, mismatches, onChange, onOpenRow, density, selectedKey, hierarchy, onSetInclude, renderRowLead, renderRowTrail, className, }: ContextRulesTableProps): react.JSX.Element;

package/dist/context/react/index.d.ts

@@ -297,7 +297,9 @@ interface ContextRulesTableProps {
     className?: string;
 }
 /**
- * The context rules table: Item | Include | Chars | Inline max. Presentational
+ * The context rules table: Item | Include | Chars | Inline max, under nested
+ * heading rows — section ("Marketing"), page ("Marketing Brand Cockpit"), the
+ * page's own groups — each heading full width with its switch. Presentational
  * and state-agnostic — every edit goes out through `onChange`.
  */
 declare function ContextRulesTable({ rows, cap, readOnly, mismatches, onChange, onOpenRow, density, selectedKey, hierarchy, onSetInclude, renderRowLead, renderRowTrail, className, }: ContextRulesTableProps): react.JSX.Element;

package/dist/context/react/index.js

@@ -3,6 +3,9 @@
 // context/react/ContextRulesTable.tsx
 import * as React2 from "react";
 import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Switch,
   Tooltip as Tooltip2,
   TooltipContent as TooltipContent2,
@@ -456,10 +459,43 @@ function summarizeContextRows(rows) {
 import { jsx as jsx3, jsxs as jsxs3 } from "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,
@@ -476,14 +512,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__ */ jsx3(
     ContextRuleRow,
     {
       row,
       cap,
-      density,
+      grid,
+      narrow,
       depth: headed ? depth : 0,
       readOnly,
       selected: selectedKey === row.key,
@@ -496,161 +541,135 @@ 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__ */ jsx3(TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs3("div", { role: "table", "aria-label": "Values", "data-density": density, className: cn2("text-xs", className), children: [
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        role: "row",
-        className: cn2(
-          CONTEXT_RULES_GRID[density],
-          "sticky top-0 z-10 h-7 border-b border-border bg-card font-medium text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsx3("span", { role: "columnheader", children: "Item" }),
-          /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "text-center", children: "Include" }),
-          /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "text-right", children: "Chars" }),
-          /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "pr-6 text-right", children: "Inline max" })
-        ]
-      }
-    ),
-    levels.length === 0 ? /* @__PURE__ */ jsx3("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__ */ jsxs3("div", { role: "rowgroup", "aria-label": headed ? name : void 0, "data-level": level.ref.id, children: [
-        headed ? /* @__PURE__ */ jsx3(
-          LevelHeading,
-          {
-            kind: "level",
-            path: level.ref.path,
-            rows: all,
-            density,
-            readOnly,
-            ...levelSwitch(level, bulk(all))
-          }
-        ) : null,
-        level.rows.map((row) => renderRow(row, 1)),
-        level.groups.map((group) => /* @__PURE__ */ jsxs3("div", { role: "rowgroup", "aria-label": group.ref.label, "data-group": group.ref.id, children: [
-          /* @__PURE__ */ jsx3(
-            LevelHeading,
-            {
-              kind: "group",
-              path: [group.ref.label],
-              rows: group.rows,
-              density,
-              readOnly,
-              onToggle: bulk(group.rows),
-              checked: group.rows.some((r) => r.include)
-            }
-          ),
-          group.rows.map((row) => renderRow(row, 2))
-        ] }, group.ref.id))
-      ] }, level.ref.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 };
-}
-var useIsoLayoutEffect = typeof window === "undefined" ? React2.useEffect : React2.useLayoutEffect;
-function HeadingPath({ path, name }) {
-  const boxRef = React2.useRef(null);
-  const fullRef = React2.useRef(null);
-  const [compact, setCompact] = React2.useState(false);
-  const multi = path.length > 1;
-  useIsoLayoutEffect(() => {
-    const box = boxRef.current;
-    const full = fullRef.current;
-    if (!multi || !box || !full) return void 0;
-    const fit = () => setCompact(full.scrollWidth > box.clientWidth);
-    fit();
-    if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(fit);
-    observer.observe(box);
-    return () => observer.disconnect();
-  }, [multi, name]);
-  const shown = multi && compact ? path.slice(-1) : path;
-  return /* @__PURE__ */ jsxs3(
-    "span",
+  const heading = (props) => /* @__PURE__ */ jsx3(Heading, { ...props, comfortable, readOnly }, props.id);
+  const renderLevel = (level, depth) => {
+    const all = levelRows(level);
+    const name = level.ref.path[level.ref.path.length - 1] ?? "";
+    return /* @__PURE__ */ jsxs3("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__ */ jsxs3("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__ */ jsx3(TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs3(
+    "div",
     {
-      ref: boxRef,
-      "data-compact": multi && compact ? "true" : void 0,
-      className: "relative flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
-      title: name,
+      ref: rootRef,
+      role: "table",
+      "aria-label": "Values",
+      "data-density": density,
+      "data-layout": narrow ? "narrow" : "wide",
+      className: cn2("text-xs", className),
       children: [
-        multi ? /* @__PURE__ */ jsx3(
-          "span",
+        narrow ? null : /* @__PURE__ */ jsxs3(
+          "div",
           {
-            ref: fullRef,
-            "aria-hidden": true,
-            className: "pointer-events-none invisible absolute left-0 top-0 flex items-center gap-1 whitespace-nowrap",
-            children: path.map((part, i) => /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
-              i > 0 ? /* @__PURE__ */ jsx3("span", { children: "\u203A" }) : null,
-              /* @__PURE__ */ jsx3("span", { children: part })
-            ] }, `${i}:${part}`))
+            role: "row",
+            className: cn2(grid, "sticky top-0 z-10 h-7 border-b border-border bg-card font-medium text-muted-foreground"),
+            children: [
+              /* @__PURE__ */ jsx3("span", { role: "columnheader", children: "Item" }),
+              /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "text-center", children: "Include" }),
+              /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "text-right", children: "Chars" }),
+              /* @__PURE__ */ jsx3("span", { role: "columnheader", className: "pr-6 text-right", children: "Inline max" })
+            ]
           }
-        ) : null,
-        shown.map((part, i) => /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
-          i > 0 ? /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-muted-foreground", children: "\u203A" }) : null,
-          /* @__PURE__ */ jsx3(
-            "span",
-            {
-              className: cn2(
-                i < shown.length - 1 ? "shrink-0 whitespace-nowrap text-muted-foreground" : "min-w-0 truncate"
-              ),
-              children: part
+        ),
+        levels.length === 0 ? /* @__PURE__ */ jsx3("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));
             }
-          )
-        ] }, `${i}:${part}`))
+            if (changes.length > 0) onSetInclude?.(changes);
+          } : void 0;
+          return /* @__PURE__ */ jsxs3("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 LevelHeading({
+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 Heading({
   kind,
-  path,
+  label,
+  switchName,
+  depth,
   rows,
-  density,
-  readOnly,
   checked,
-  onToggle
+  onToggle,
+  noSwitch,
+  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__ */ jsxs3(
     "div",
     {
       role: "row",
       "data-heading": kind,
       className: cn2(
-        CONTEXT_RULES_GRID[density],
-        "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"
+        "flex items-center gap-2 border-b border-border/50 font-medium",
+        comfortable ? "min-h-11 px-3" : "h-7 px-2",
+        kind === "group" ? "bg-muted/25 text-muted-foreground" : "bg-muted/60 text-foreground"
       ),
       children: [
-        /* @__PURE__ */ jsxs3("div", { role: "cell", className: cn2("flex min-w-0 items-center gap-1", kind === "group" && "pl-2"), children: [
-          /* @__PURE__ */ jsx3(HeadingPath, { path, name }),
-          total > 0 ? /* @__PURE__ */ jsx3("span", { className: "shrink-0 font-normal tabular-nums text-muted-foreground", children: count === total ? total : `${count}/${total}` }) : null
-        ] }),
-        /* @__PURE__ */ jsx3("div", { role: "cell", className: "flex justify-center", children: showSwitch ? /* @__PURE__ */ jsx3(
-          Switch,
-          {
-            size: "sm",
-            "aria-label": `Include ${name}`,
-            checked,
-            disabled: readOnly || !onToggle,
-            onCheckedChange: (next) => onToggle?.(next)
-          }
-        ) : null }),
-        /* @__PURE__ */ jsx3("div", { role: "cell", className: "text-right font-normal tabular-nums text-muted-foreground", children: total > 0 ? charsLabel : null }),
-        /* @__PURE__ */ jsx3("div", { role: "cell" })
+        /* @__PURE__ */ jsx3("div", { role: "cell", className: cn2("flex min-w-0 flex-1 items-center", indent(depth)), children: /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate", title: label, children: label }) }),
+        /* @__PURE__ */ jsxs3("div", { role: "cell", className: "flex shrink-0 items-center gap-2 font-normal tabular-nums text-muted-foreground", children: [
+          total > 0 ? /* @__PURE__ */ jsx3("span", { children: count === total ? total : `${count}/${total}` }) : null,
+          total > 0 ? /* @__PURE__ */ jsx3("span", { children: charsLabel }) : null,
+          showSwitch ? /* @__PURE__ */ jsx3(
+            Switch,
+            {
+              size: "sm",
+              "aria-label": `Include ${switchName}`,
+              checked,
+              disabled: readOnly || !onToggle,
+              onCheckedChange: (next) => onToggle?.(next)
+            }
+          ) : null
+        ] })
       ]
     }
   );
@@ -658,7 +677,8 @@ function LevelHeading({
 function ContextRuleRow({
   row,
   cap,
-  density,
+  grid,
+  narrow,
   depth,
   comfortable,
   readOnly,
@@ -691,7 +711,7 @@ function ContextRuleRow({
       "data-mismatch": mismatches.length > 0 ? "true" : void 0,
       "aria-selected": selected || void 0,
       className: cn2(
-        CONTEXT_RULES_GRID[density],
+        grid,
         "border-b border-border/50",
         comfortable ? "min-h-11" : "h-7",
         selected && "bg-accent"
@@ -703,8 +723,7 @@ function ContextRuleRow({
             role: "cell",
             className: cn2(
               "flex min-w-0 items-center gap-1.5",
-              depth === 1 && "pl-2",
-              depth === 2 && "pl-4",
+              indent(depth),
               !row.include && "opacity-50"
             ),
             children: [
@@ -756,7 +775,7 @@ function ContextRuleRow({
             ]
           }
         ),
-        /* @__PURE__ */ jsx3("div", { role: "cell", children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx3("div", { role: "cell", children: narrow ? /* @__PURE__ */ jsx3(InlineMaxButton, { row, cap, readOnly, comfortable, onChange }) : /* @__PURE__ */ jsx3(
           InlineMaxInput,
           {
             label: row.label,
@@ -773,14 +792,60 @@ 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__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx3(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Inline max ${row.label}: ${text}`,
+        disabled: readOnly,
+        className: cn2(
+          "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__ */ jsx3("span", { "aria-hidden": true, className: "h-1 w-1 rounded-full bg-primary" }) : null,
+          text
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(PopoverContent, { align: "end", className: "w-auto p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: "Inline max" }),
+      /* @__PURE__ */ jsx3(
+        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
 import * as React3 from "react";
 import {
   BottomSheet,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+  Popover as Popover2,
+  PopoverContent as PopoverContent2,
+  PopoverTrigger as PopoverTrigger2,
   Switch as Switch2,
   Tooltip as Tooltip3,
   TooltipContent as TooltipContent3,
@@ -946,13 +1011,13 @@ function ContextRulesChip({
       /* @__PURE__ */ jsx4(BottomSheet, { open, onOpenChange: setOpen, title: name || faceName, surface: "solid", children: body })
     ] });
   }
-  return /* @__PURE__ */ jsx4(TooltipProvider2, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
-    withBlindTip(/* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: faceButton })),
+  return /* @__PURE__ */ jsx4(TooltipProvider2, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs4(Popover2, { open, onOpenChange: setOpen, children: [
+    withBlindTip(/* @__PURE__ */ jsx4(PopoverTrigger2, { asChild: true, children: faceButton })),
     /* @__PURE__ */ jsx4(
-      PopoverContent,
+      PopoverContent2,
       {
         align: "end",
-        className: "w-[26rem] max-w-[calc(100vw-1rem)] overflow-hidden p-0",
+        className: "w-[30rem] max-w-[calc(100vw-1rem)] overflow-hidden p-0",
         children: body
       }
     )
@@ -1182,7 +1247,7 @@ function ContextReceiptBlockDetail({
 }
 
 // context/react/ContextRulesPanelBody.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function layerCells(row) {
   const { surface, agent, default_max } = row.layers ?? {};
   const declared = agent?.declared === true;
@@ -1389,7 +1454,7 @@ function ContextRulesPanelBody({
     }
   ) : null;
   if (isMobile) {
-    return /* @__PURE__ */ jsx7(TooltipProvider3, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsx7("div", { className: cn6("flex h-full min-h-0 flex-col", className), children: detail ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    return /* @__PURE__ */ jsx7(TooltipProvider3, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsx7("div", { className: cn6("flex h-full min-h-0 flex-col", className), children: detail ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
       /* @__PURE__ */ jsx7("div", { className: "flex h-12 shrink-0 items-center border-b border-border px-1", children: /* @__PURE__ */ jsxs7(
         "button",
         {
@@ -1403,7 +1468,7 @@ function ContextRulesPanelBody({
         }
       ) }),
       /* @__PURE__ */ jsx7("div", { className: "min-h-0 flex-1 overflow-y-auto", children: detail })
-    ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
       search,
       table
     ] }) }) });