@ai-matrx/agents 0.20.6 → 0.21.2

package/dist/context/react/index.js

@@ -0,0 +1,891 @@
+"use client";
+
+// context/react/ContextRulesTable.tsx
+import {
+  Switch,
+  Tooltip as Tooltip2,
+  TooltipContent as TooltipContent2,
+  TooltipProvider,
+  TooltipTrigger as TooltipTrigger2,
+  cn as cn2
+} from "@ai-matrx/design-system";
+
+// context/index.ts
+var DEFAULT_INLINE_MAX_CHARS = 200;
+var DEFAULT_INLINE_CAP = 5e4;
+var isNum = (v) => typeof v === "number" && Number.isFinite(v);
+var isValidLimit = (v) => typeof v === "number" && Number.isInteger(v) && v >= 0;
+function resolveContextRule(input) {
+  const agent = input.agent ?? null;
+  const surface = input.surface ?? null;
+  const user = input.user ?? null;
+  const cap = isNum(input.cap) ? input.cap : DEFAULT_INLINE_CAP;
+  const agentDeclared = agent?.declared === true;
+  let include = true;
+  let includeBy = "default";
+  if (surface?.declared === true && surface.auto_context === false) {
+    if (agentDeclared) {
+      include = true;
+      includeBy = "agent";
+    } else {
+      include = false;
+      includeBy = "page";
+    }
+  }
+  if (agent?.kill_switch === true && !agentDeclared) {
+    include = false;
+    includeBy = "agent";
+  }
+  if (user && typeof user.include === "boolean") {
+    include = user.include;
+    includeBy = "you";
+  }
+  let limit = isNum(input.default_max) ? input.default_max : DEFAULT_INLINE_MAX_CHARS;
+  let limitBy = "default";
+  const a = agentDeclared && isNum(agent?.max_inline_chars) ? agent.max_inline_chars : null;
+  const s = isNum(surface?.max_inline_chars) ? surface.max_inline_chars : null;
+  if (a !== null && s !== null) {
+    if (s < a) {
+      limit = s;
+      limitBy = "page";
+    } else {
+      limit = a;
+      limitBy = "agent";
+    }
+  } else if (a !== null) {
+    limit = a;
+    limitBy = "agent";
+  } else if (s !== null) {
+    limit = s;
+    limitBy = "page";
+  }
+  if (user && isValidLimit(user.max_inline_chars)) {
+    limit = user.max_inline_chars;
+    limitBy = "you";
+  }
+  const clamped = limit > cap;
+  limit = Math.min(limit, cap);
+  const chars = input.chars;
+  const delivery = !include ? "off" : chars === null || chars === void 0 || limit === 0 || chars > limit ? "on_request" : "inline";
+  return {
+    include,
+    max_inline_chars: limit,
+    delivery,
+    decided_by: { include: includeBy, max_inline_chars: limitBy },
+    clamped
+  };
+}
+function formatChars(n) {
+  if (n === null || n === void 0 || !Number.isFinite(n)) return "\u2014";
+  const abs = Math.abs(n);
+  const trim = (s) => s.replace(/\.0$/, "");
+  if (abs < 1e3) return String(Math.round(n));
+  if (abs < 1e5) return `${trim((n / 1e3).toFixed(1))}k`;
+  if (abs < 1e6) return `${Math.round(n / 1e3)}k`;
+  return `${trim((n / 1e6).toFixed(1))}M`;
+}
+
+// context/react/icons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function icon(children) {
+  return function Icon(props) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        ...props,
+        children
+      }
+    );
+  };
+}
+var EyeIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+);
+var EyeOffIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+  ] })
+);
+var RotateCcwIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+  ] })
+);
+var PanelRightIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
+  ] })
+);
+var ChevronLeftIcon = icon(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }));
+var TriangleAlertIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] })
+);
+var SearchIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+  ] })
+);
+var ArrowDownToLineIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 17V3" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 11 6 6 6-6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 21H5" })
+  ] })
+);
+
+// context/react/InlineMaxInput.tsx
+import * as React from "react";
+import {
+  Input,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn
+} from "@ai-matrx/design-system";
+
+// context/react/shared.ts
+var LAYER_LABEL = {
+  default: "Default",
+  page: "Page",
+  agent: "Agent",
+  you: "You"
+};
+var DELIVERY_LABEL = {
+  inline: "Inline",
+  on_request: "On request",
+  off: "Off"
+};
+function formatLimit(n) {
+  return n === 0 ? "Never" : String(n);
+}
+function inheritedLimit(row, cap) {
+  return resolveContextRule({ ...row.layers ?? {}, chars: row.chars, cap, user: null }).max_inline_chars;
+}
+function hasOverride(row) {
+  return row.userRule !== null && Object.keys(row.userRule).length > 0;
+}
+function withInclude(row, include) {
+  return { ...row.userRule ?? {}, include };
+}
+function withLimit(row, limit) {
+  const next = { ...row.userRule ?? {} };
+  if (limit === null) delete next.max_inline_chars;
+  else next.max_inline_chars = limit;
+  return Object.keys(next).length === 0 ? null : next;
+}
+function rowId(row) {
+  return `${row.surfaceKey}::${row.key}`;
+}
+function show(field, v) {
+  if (v === null || v === void 0) return "none";
+  if (typeof v === "boolean") return v ? "On" : "Off";
+  if (typeof v === "number") return formatLimit(v);
+  if (field === "delivery" || field === "missing") {
+    return DELIVERY_LABEL[v] ?? String(v);
+  }
+  if (typeof v === "object") {
+    const r = v;
+    const parts = [];
+    if (r.include !== void 0) parts.push(r.include ? "On" : "Off");
+    if (r.max_inline_chars !== void 0) parts.push(formatLimit(r.max_inline_chars));
+    return parts.join(", ") || "none";
+  }
+  return String(v);
+}
+var FIELD_LABEL = {
+  include: "Include",
+  max_inline_chars: "Inline max",
+  delivery: "Delivery",
+  user_rule: "Your rule",
+  missing: "Not sent"
+};
+function describeMismatches(list) {
+  const text = list.map(
+    (m) => m.field === "missing" ? "Missing from the server's receipt" : `${FIELD_LABEL[m.field]}: expected ${show(m.field, m.expected)}, got ${show(m.field, m.actual)}`
+  ).join(" \xB7 ");
+  return text.length > 140 ? `${text.slice(0, 139)}\u2026` : text;
+}
+function onRequestReason(row) {
+  if (row.chars === null) return "Size unknown \u2014 the agent reads it on request";
+  if (row.max_inline_chars === 0) return "Never inline \u2014 the agent reads it on request";
+  return "Over the limit \u2014 the agent reads it on request";
+}
+
+// context/react/InlineMaxInput.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function InlineMaxInput({
+  value,
+  inherited,
+  cap,
+  onCommit,
+  disabled,
+  label,
+  comfortable
+}) {
+  const [focused, setFocused] = React.useState(false);
+  const [draft, setDraft] = React.useState("");
+  const [notice, setNotice] = React.useState(false);
+  const skip = React.useRef(false);
+  React.useEffect(() => {
+    if (!notice) return;
+    const t = setTimeout(() => setNotice(false), 2e3);
+    return () => clearTimeout(t);
+  }, [notice]);
+  const commit = () => {
+    const text = draft.trim();
+    let next;
+    if (text === "") next = null;
+    else if (/^never$/i.test(text)) next = 0;
+    else if (/^\d+$/.test(text)) next = Number(text);
+    else return;
+    if (next !== null && next > cap) {
+      next = cap;
+      setNotice(true);
+    }
+    if (next !== value) onCommit(next);
+  };
+  const overridden = value !== null;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-end gap-1", children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1.5 w-1.5 shrink-0 rounded-full", overridden ? "bg-primary" : "bg-transparent")
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Tooltip, { open: notice, children: [
+      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+        Input,
+        {
+          type: "text",
+          inputMode: "numeric",
+          "aria-label": `Inline max for ${label}`,
+          disabled,
+          value: focused ? draft : overridden ? formatLimit(value) : "",
+          placeholder: overridden ? void 0 : formatLimit(inherited),
+          onFocus: () => {
+            setDraft(overridden ? String(value) : "");
+            setFocused(true);
+          },
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: () => {
+            setFocused(false);
+            if (skip.current) {
+              skip.current = false;
+              return;
+            }
+            commit();
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.currentTarget.blur();
+            else if (e.key === "Escape") {
+              e.stopPropagation();
+              skip.current = true;
+              e.currentTarget.blur();
+            }
+          },
+          className: cn(
+            "w-[6.5ch] min-w-0 rounded px-1 py-0 text-right tabular-nums shadow-none",
+            comfortable ? "h-8 text-base" : "h-6 text-xs"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(TooltipContent, { children: `Limit is ${cap}` })
+    ] }),
+    overridden && !disabled ? /* @__PURE__ */ jsxs2(Tooltip, { children: [
+      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Reset inline max for ${label}`,
+          onClick: () => onCommit(null),
+          className: cn(
+            "inline-flex shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+            comfortable ? "h-8 w-8" : "h-5 w-5"
+          ),
+          children: /* @__PURE__ */ jsx2(RotateCcwIcon, { className: "h-3 w-3" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(TooltipContent, { children: `Reset to ${formatLimit(inherited)}` })
+    ] }) : /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: cn("shrink-0", comfortable ? "w-8" : "w-5") })
+  ] });
+}
+
+// context/react/ContextRulesTable.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GROUPS = [
+  { origin: "page", label: "Page" },
+  { origin: "attached", label: "Attached" },
+  { origin: "system", label: "System" }
+];
+var GRID = {
+  compact: "grid grid-cols-[minmax(0,1fr)_2.75rem_4rem_6.5rem] items-center gap-x-2 px-2",
+  comfortable: "grid grid-cols-[minmax(0,1fr)_3rem_4.5rem_9rem] items-center gap-x-2 px-3"
+};
+function ContextRulesTable({
+  rows,
+  cap,
+  readOnly,
+  mismatches,
+  onChange,
+  onOpenRow,
+  density = "compact",
+  selectedKey,
+  className
+}) {
+  const comfortable = density === "comfortable";
+  const present = GROUPS.filter((g) => rows.some((r) => r.origin === g.origin));
+  const grouped = present.length > 1;
+  return /* @__PURE__ */ jsx3(TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs3("div", { role: "table", "aria-label": "Context", "data-density": density, className: cn2("text-xs", className), children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        role: "row",
+        className: cn2(
+          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" })
+        ]
+      }
+    ),
+    rows.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-2 py-3 text-center text-muted-foreground", children: "Nothing in context" }) : present.map((g) => /* @__PURE__ */ jsxs3("div", { role: "rowgroup", "aria-label": grouped ? g.label : void 0, children: [
+      grouped ? /* @__PURE__ */ jsx3(
+        "div",
+        {
+          role: "row",
+          className: "flex h-6 items-center bg-muted/40 px-2 font-medium text-muted-foreground",
+          children: /* @__PURE__ */ jsx3("span", { role: "cell", children: g.label })
+        }
+      ) : null,
+      rows.filter((r) => r.origin === g.origin).map((row) => /* @__PURE__ */ jsx3(
+        ContextRuleRow,
+        {
+          row,
+          cap,
+          density,
+          readOnly,
+          selected: selectedKey === row.key,
+          mismatches: mismatches?.filter((m) => m.key === row.key) ?? [],
+          onChange,
+          onOpenRow,
+          comfortable
+        },
+        rowId(row)
+      ))
+    ] }, g.origin))
+  ] }) });
+}
+function ContextRuleRow({
+  row,
+  cap,
+  density,
+  comfortable,
+  readOnly,
+  selected,
+  mismatches,
+  onChange,
+  onOpenRow
+}) {
+  const decided = `Include: ${LAYER_LABEL[row.decided_by.include]} \xB7 Limit: ${LAYER_LABEL[row.decided_by.max_inline_chars]}`;
+  const labelNode = onOpenRow ? /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: () => onOpenRow(row.key),
+      className: "min-w-0 truncate text-left hover:underline focus-visible:underline focus-visible:outline-none",
+      children: row.label
+    }
+  ) : /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate", children: row.label });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: "row",
+      "data-key": row.key,
+      "data-included": row.include ? "true" : "false",
+      "data-mismatch": mismatches.length > 0 ? "true" : void 0,
+      "aria-selected": selected || void 0,
+      className: cn2(
+        GRID[density],
+        "border-b border-border/50",
+        comfortable ? "min-h-11" : "h-7",
+        selected && "bg-accent"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { role: "cell", className: cn2("flex min-w-0 items-center gap-1.5", !row.include && "opacity-50"), children: [
+          mismatches.length > 0 ? /* @__PURE__ */ jsxs3(Tooltip2, { children: [
+            /* @__PURE__ */ jsx3(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3(
+              "span",
+              {
+                role: "img",
+                "aria-label": "Mismatch",
+                className: "inline-flex shrink-0 text-warning",
+                children: /* @__PURE__ */ jsx3(TriangleAlertIcon, { className: "h-3.5 w-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx3(TooltipContent2, { children: describeMismatches(mismatches) })
+          ] }) : null,
+          /* @__PURE__ */ jsxs3(Tooltip2, { children: [
+            /* @__PURE__ */ jsx3(TooltipTrigger2, { asChild: true, children: labelNode }),
+            /* @__PURE__ */ jsxs3(TooltipContent2, { children: [
+              /* @__PURE__ */ jsx3("div", { children: row.label }),
+              /* @__PURE__ */ jsx3("div", { className: "font-normal text-muted-foreground", children: decided })
+            ] })
+          ] }),
+          comfortable ? /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0 rounded bg-muted px-1 text-[0.6875rem] leading-4 text-muted-foreground", children: LAYER_LABEL[row.decided_by.max_inline_chars] }) : null
+        ] }),
+        /* @__PURE__ */ jsx3("div", { role: "cell", className: "flex justify-center", children: /* @__PURE__ */ jsx3(
+          Switch,
+          {
+            size: "sm",
+            "aria-label": `Include ${row.label}`,
+            checked: row.include,
+            disabled: readOnly,
+            onCheckedChange: (next) => onChange(row.key, row.surfaceKey, withInclude(row, next))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            role: "cell",
+            className: cn2("flex items-center justify-end gap-1 tabular-nums", !row.include && "opacity-50"),
+            children: [
+              row.include && row.delivery === "on_request" ? /* @__PURE__ */ jsxs3(Tooltip2, { children: [
+                /* @__PURE__ */ jsx3(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3("span", { role: "img", "aria-label": "On request", className: "inline-flex text-muted-foreground", children: /* @__PURE__ */ jsx3(ArrowDownToLineIcon, { className: "h-3 w-3" }) }) }),
+                /* @__PURE__ */ jsx3(TooltipContent2, { children: onRequestReason(row) })
+              ] }) : null,
+              /* @__PURE__ */ jsx3("span", { children: formatChars(row.chars) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { role: "cell", children: /* @__PURE__ */ jsx3(
+          InlineMaxInput,
+          {
+            label: row.label,
+            value: row.userRule?.max_inline_chars ?? null,
+            inherited: inheritedLimit(row, cap),
+            cap,
+            disabled: readOnly,
+            comfortable,
+            onCommit: (next) => onChange(row.key, row.surfaceKey, withLimit(row, next))
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// context/react/ContextRulesChip.tsx
+import * as React2 from "react";
+import {
+  BottomSheet,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Switch as Switch2,
+  Tooltip as Tooltip3,
+  TooltipContent as TooltipContent3,
+  TooltipProvider as TooltipProvider2,
+  TooltipTrigger as TooltipTrigger3,
+  cn as cn3
+} from "@ai-matrx/design-system";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function summarize(rows) {
+  let count = 0;
+  let chars = 0;
+  for (const r of rows) {
+    if (!r.include) continue;
+    count += 1;
+    chars += r.chars ?? 0;
+  }
+  return { count, chars };
+}
+function IconButton({
+  label,
+  onClick,
+  comfortable,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4(Tooltip3, { children: [
+    /* @__PURE__ */ jsx4(TooltipTrigger3, { asChild: true, children: /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        onClick,
+        className: cn3(
+          "inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+          comfortable ? "h-11 w-11" : "h-7 w-7"
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(TooltipContent3, { children: label })
+  ] });
+}
+function ContextRulesChip({
+  label,
+  rows,
+  cap,
+  on,
+  onToggleAll,
+  onChange,
+  onResetAll,
+  onOpenFullView,
+  mismatchCount = 0,
+  mismatches,
+  onOpenRow,
+  isMobile,
+  readOnly,
+  open: openProp,
+  onOpenChange,
+  className
+}) {
+  const [openState, setOpenState] = React2.useState(false);
+  const open = openProp ?? openState;
+  const setOpen = (next) => {
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  const { count, chars } = summarize(rows);
+  const anyOverride = rows.some(hasOverride);
+  const warn = mismatchCount > 0;
+  const comfortable = !!isMobile;
+  const face = /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Context: ${label}`,
+      "data-mismatch": warn ? "true" : void 0,
+      onClick: isMobile ? () => setOpen(true) : void 0,
+      className: cn3(
+        "inline-flex h-7 max-w-[14rem] items-center gap-1.5 rounded-full border border-border bg-card px-2 text-xs text-foreground hover:bg-accent",
+        !on && "text-muted-foreground",
+        warn && "border-warning/60 ring-1 ring-warning",
+        className
+      ),
+      children: [
+        on ? /* @__PURE__ */ jsx4(EyeIcon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx4(EyeOffIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate", children: label }),
+        /* @__PURE__ */ jsx4("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: count }),
+        warn ? /* @__PURE__ */ jsxs4("span", { className: "inline-flex shrink-0 items-center gap-0.5 tabular-nums text-warning", children: [
+          /* @__PURE__ */ jsx4(TriangleAlertIcon, { className: "h-3 w-3" }),
+          mismatchCount
+        ] }) : null
+      ]
+    }
+  );
+  const body = /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn3(
+          "flex shrink-0 items-center gap-2 border-b border-border px-3",
+          comfortable ? "h-12" : "h-10"
+        ),
+        children: [
+          on ? /* @__PURE__ */ jsx4(EyeIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx4(EyeOffIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${count} \xB7 ${formatChars(chars)} chars` }),
+          /* @__PURE__ */ jsxs4("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx4(
+              Switch2,
+              {
+                size: "sm",
+                "aria-label": "Page context",
+                checked: on,
+                disabled: readOnly,
+                onCheckedChange: onToggleAll,
+                className: "mr-1"
+              }
+            ),
+            anyOverride && !readOnly ? /* @__PURE__ */ jsx4(IconButton, { label: "Reset all", onClick: onResetAll, comfortable, children: /* @__PURE__ */ jsx4(RotateCcwIcon, { className: "h-3.5 w-3.5" }) }) : null,
+            /* @__PURE__ */ jsx4(
+              IconButton,
+              {
+                label: "Open full view",
+                comfortable,
+                onClick: () => {
+                  setOpen(false);
+                  onOpenFullView();
+                },
+                children: /* @__PURE__ */ jsx4(PanelRightIcon, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { className: cn3("min-h-0 overflow-y-auto", comfortable ? "max-h-[70dvh]" : "max-h-[min(24rem,60vh)]"), children: /* @__PURE__ */ jsx4(
+      ContextRulesTable,
+      {
+        rows,
+        cap,
+        readOnly,
+        density: comfortable ? "comfortable" : "compact",
+        onChange,
+        ...mismatches ? { mismatches } : {},
+        ...onOpenRow ? { onOpenRow } : {}
+      }
+    ) })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs4(TooltipProvider2, { delayDuration: 300, titleTooltips: false, children: [
+      face,
+      /* @__PURE__ */ jsx4(BottomSheet, { open, onOpenChange: setOpen, title: label, surface: "solid", children: body })
+    ] });
+  }
+  return /* @__PURE__ */ jsx4(TooltipProvider2, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: face }),
+    /* @__PURE__ */ jsx4(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-[26rem] max-w-[calc(100vw-1rem)] overflow-hidden p-0",
+        children: body
+      }
+    )
+  ] }) });
+}
+
+// context/react/ContextRulesPanelBody.tsx
+import * as React3 from "react";
+import {
+  Input as Input2,
+  Switch as Switch3,
+  TooltipProvider as TooltipProvider3,
+  cn as cn4
+} from "@ai-matrx/design-system";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function layerCells(row) {
+  const { surface, agent, default_max } = row.layers ?? {};
+  const declared = agent?.declared === true;
+  const pageOff = surface?.declared === true && surface.auto_context === false;
+  const num = (n) => typeof n === "number" ? formatLimit(n) : "\u2014";
+  const rule = row.userRule;
+  return {
+    default: { include: "On", limit: formatLimit(default_max ?? DEFAULT_INLINE_MAX_CHARS) },
+    page: { include: pageOff ? "Off" : "\u2014", limit: num(surface?.max_inline_chars) },
+    agent: {
+      include: agent?.kill_switch && !declared ? "Off" : declared && pageOff ? "On" : "\u2014",
+      limit: declared ? num(agent?.max_inline_chars) : "\u2014"
+    },
+    you: {
+      include: rule?.include === void 0 ? "\u2014" : rule.include ? "On" : "Off",
+      limit: num(rule?.max_inline_chars)
+    }
+  };
+}
+var LAYERS = ["default", "page", "agent", "you"];
+function LayerTable({ row }) {
+  const cells = layerCells(row);
+  const cell = (text, winning) => /* @__PURE__ */ jsx5(
+    "span",
+    {
+      role: "cell",
+      "data-winning": winning ? "true" : void 0,
+      className: cn4(
+        "rounded px-1.5 py-0.5 text-right tabular-nums",
+        winning ? "bg-primary/10 font-medium text-foreground" : "text-muted-foreground"
+      ),
+      children: text
+    }
+  );
+  return /* @__PURE__ */ jsxs5("div", { role: "table", "aria-label": "Layers", className: "text-xs", children: [
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        role: "row",
+        className: "grid h-7 grid-cols-[1fr_5rem_5rem] items-center gap-x-2 border-b border-border font-medium text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx5("span", { role: "columnheader", children: "Layer" }),
+          /* @__PURE__ */ jsx5("span", { role: "columnheader", className: "text-right", children: "Include" }),
+          /* @__PURE__ */ jsx5("span", { role: "columnheader", className: "text-right", children: "Inline max" })
+        ]
+      }
+    ),
+    LAYERS.map((layer) => /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        role: "row",
+        className: "grid h-7 grid-cols-[1fr_5rem_5rem] items-center gap-x-2 border-b border-border/50",
+        children: [
+          /* @__PURE__ */ jsx5("span", { role: "cell", children: LAYER_LABEL[layer] }),
+          cell(cells[layer].include, row.decided_by.include === layer),
+          cell(cells[layer].limit, row.decided_by.max_inline_chars === layer)
+        ]
+      },
+      layer
+    ))
+  ] });
+}
+function RowDetail({
+  row,
+  cap,
+  readOnly,
+  mismatches,
+  onChange,
+  renderDetail,
+  comfortable
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 p-3", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx5("h3", { className: "min-w-0 truncate text-sm font-medium", children: row.label }),
+      /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${formatChars(row.chars)} chars \xB7 ${DELIVERY_LABEL[row.delivery]}` })
+    ] }),
+    mismatches.length > 0 ? /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-1.5 rounded-md border border-warning/40 bg-warning/10 px-2 py-1.5 text-xs text-warning", children: [
+      /* @__PURE__ */ jsx5(TriangleAlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx5("span", { children: describeMismatches(mismatches) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2 text-xs", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: "Include" }),
+      /* @__PURE__ */ jsx5("div", { className: cn4("flex items-center", comfortable ? "h-11" : "h-7"), children: /* @__PURE__ */ jsx5(
+        Switch3,
+        {
+          size: "sm",
+          "aria-label": `Include ${row.label}`,
+          checked: row.include,
+          disabled: readOnly,
+          onCheckedChange: (next) => onChange(row.key, row.surfaceKey, withInclude(row, next))
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: "Inline max" }),
+      /* @__PURE__ */ jsx5("div", { className: "flex", children: /* @__PURE__ */ jsx5(
+        InlineMaxInput,
+        {
+          label: row.label,
+          value: row.userRule?.max_inline_chars ?? null,
+          inherited: inheritedLimit(row, cap),
+          cap,
+          disabled: readOnly,
+          comfortable,
+          onCommit: (next) => onChange(row.key, row.surfaceKey, withLimit(row, next))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx5(LayerTable, { row }),
+    renderDetail ? renderDetail(row) : null
+  ] });
+}
+function ContextRulesPanelBody({
+  rows,
+  cap,
+  mismatches,
+  readOnly,
+  onChange,
+  renderDetail,
+  isMobile,
+  selectedKey: selectedProp,
+  onSelectedKeyChange,
+  className
+}) {
+  const [selectedState, setSelectedState] = React3.useState(null);
+  const [query, setQuery] = React3.useState("");
+  const selectedKey = selectedProp !== void 0 ? selectedProp : selectedState;
+  const select = (key) => {
+    if (selectedProp === void 0) setSelectedState(key);
+    onSelectedKeyChange?.(key);
+  };
+  const q = query.trim().toLowerCase();
+  const visible = q ? rows.filter((r) => r.label.toLowerCase().includes(q) || r.key.toLowerCase().includes(q)) : rows;
+  const selected = selectedKey ? rows.find((r) => r.key === selectedKey) ?? null : null;
+  const comfortable = !!isMobile;
+  const search = /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0 border-b border-border p-2", children: [
+    /* @__PURE__ */ jsx5(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ jsx5(
+      Input2,
+      {
+        type: "search",
+        "aria-label": "Search context",
+        placeholder: "Search",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        className: cn4("pl-7 shadow-none", comfortable ? "h-11 text-base" : "h-8 text-xs")
+      }
+    )
+  ] });
+  const table = /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx5(
+    ContextRulesTable,
+    {
+      rows: visible,
+      cap,
+      readOnly,
+      density: comfortable ? "comfortable" : "compact",
+      selectedKey,
+      onChange,
+      onOpenRow: (key) => select(key),
+      ...mismatches ? { mismatches } : {}
+    }
+  ) });
+  const detail = selected ? /* @__PURE__ */ jsx5(
+    RowDetail,
+    {
+      row: selected,
+      cap,
+      readOnly,
+      mismatches: mismatches?.filter((m) => m.key === selected.key) ?? [],
+      onChange,
+      renderDetail,
+      comfortable
+    }
+  ) : null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsx5(TooltipProvider3, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsx5("div", { className: cn4("flex h-full min-h-0 flex-col", className), children: selected ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex h-12 shrink-0 items-center border-b border-border px-1", children: /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: () => select(null),
+          className: "inline-flex h-11 items-center gap-1 rounded-md px-2 text-sm text-muted-foreground hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsx5(ChevronLeftIcon, { className: "h-4 w-4" }),
+            "Back"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-y-auto", children: detail })
+    ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      search,
+      table
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx5(TooltipProvider3, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ jsxs5("div", { className: cn4("flex h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsxs5("aside", { className: "flex w-[22rem] shrink-0 flex-col border-r border-border", children: [
+      search,
+      table
+    ] }),
+    /* @__PURE__ */ jsx5("section", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: detail ?? /* @__PURE__ */ jsx5("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: "Select an item" }) })
+  ] }) });
+}
+export {
+  ContextRulesChip,
+  ContextRulesPanelBody,
+  ContextRulesTable,
+  InlineMaxInput
+};
+//# sourceMappingURL=index.js.map