@ai-matrx/agents 0.28.1 → 0.29.1

package/dist/context/react/index.cjs

@@ -32,9 +32,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   ContextDeliveredValue: () => ContextDeliveredValue,
+  ContextReceiptBlockDetail: () => ContextReceiptBlockDetail,
+  ContextReceiptBlocks: () => ContextReceiptBlocks,
   ContextRulesChip: () => ContextRulesChip,
   ContextRulesPanelBody: () => ContextRulesPanelBody,
   ContextRulesTable: () => ContextRulesTable,
+  DeliveredSection: () => DeliveredSection,
   InlineMaxInput: () => InlineMaxInput,
   summarizeContextRows: () => summarizeContextRows
 });
@@ -46,6 +49,14 @@ var import_design_system2 = require("@ai-matrx/design-system");
 // context/index.ts
 var DEFAULT_INLINE_MAX_CHARS = 200;
 var DEFAULT_INLINE_CAP = 5e4;
+var CONTEXT_ROW_BLOCKS = {
+  organization: ["organization_catalog"]
+};
+function unclaimedBlocks(blocks, rowKeys) {
+  const claimed = /* @__PURE__ */ new Set();
+  for (const key of rowKeys) for (const id of CONTEXT_ROW_BLOCKS[key] ?? []) claimed.add(id);
+  return (blocks ?? []).filter((b) => !claimed.has(b.id));
+}
 var SERVER_AUTHORITATIVE_KEYS = {
   user: "manifest",
   client: "manifest",
@@ -573,7 +584,7 @@ function ContextRuleRow({
 var React2 = __toESM(require("react"), 1);
 var import_design_system3 = require("@ai-matrx/design-system");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var BLIND_TOOLTIP = "This model can't read context";
+var BLIND_TOOLTIP = "This model can't read these values";
 var BLIND_LABEL = "Not read";
 function summarizeContextRows(rows) {
   let count = 0;
@@ -638,6 +649,8 @@ function ContextRulesChip({
     onOpenChange?.(next);
   };
   const { count, charsLabel } = summarizeContextRows(rows);
+  const name = label?.trim() ?? "";
+  const faceName = name ? `${name} \xB7 ${count} included` : `${count} included`;
   const anyOverride = rows.some(hasOverride);
   const blind = !modelReadsContext;
   const warn = mismatchCount > 0 && !blind;
@@ -648,20 +661,21 @@ function ContextRulesChip({
     "button",
     {
       type: "button",
-      "aria-label": `Context: ${label}`,
+      "aria-label": faceName,
       "data-mismatch": warn ? "true" : void 0,
       "data-blind": blind ? "true" : void 0,
       onClick: isMobile ? () => setOpen(true) : void 0,
       className: (0, import_design_system3.cn)(
-        "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",
+        "relative inline-flex h-6 max-w-[12rem] shrink-0 items-center gap-1 rounded-md border border-border bg-card px-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent",
+        comfortable && "after:absolute after:-inset-x-1.5 after:-inset-y-2.5 after:content-['']",
         !eyeOpen && "text-muted-foreground",
         blind && "border-dashed",
         warn && "border-warning/60 ring-1 ring-warning",
         className
       ),
       children: [
-        eyeOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeIcon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeOffIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate", children: label }),
+        eyeOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeIcon, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeOffIcon, { className: "h-3 w-3 shrink-0" }),
+        name ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate", children: name }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: count }),
         warn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-0.5 tabular-nums text-warning", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TriangleAlertIcon, { className: "h-3 w-3" }),
@@ -670,9 +684,10 @@ function ContextRulesChip({
       ]
     }
   );
-  const withBlindTip = (trigger) => blind ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Tooltip, { children: [
+  const faceTip = blind ? BLIND_TOOLTIP : name ? null : faceName;
+  const withBlindTip = (trigger) => faceTip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipContent, { children: BLIND_TOOLTIP })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipContent, { children: faceTip })
   ] }) : trigger;
   const body = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-h-0 flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -684,7 +699,7 @@ function ContextRulesChip({
         ),
         children: [
           eyeOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeOffIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate text-sm font-medium", children: label }),
+          name ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate text-sm font-medium", children: name }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${count} \xB7 ${charsLabel} chars` }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: [
             blind ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mr-1 text-xs text-muted-foreground", children: BLIND_LABEL }) : null,
@@ -692,7 +707,7 @@ function ContextRulesChip({
               import_design_system3.Switch,
               {
                 size: "sm",
-                "aria-label": "Page context",
+                "aria-label": "Include this page",
                 checked: on,
                 disabled: readOnly || !onToggleAll,
                 onCheckedChange: (next) => onToggleAll?.(next),
@@ -732,7 +747,7 @@ function ContextRulesChip({
   if (isMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: [
       withBlindTip(faceButton),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.BottomSheet, { open, onOpenChange: setOpen, title: label, surface: "solid", children: body })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.BottomSheet, { open, onOpenChange: setOpen, title: name || faceName, surface: "solid", children: body })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Popover, { open, onOpenChange: setOpen, children: [
@@ -740,7 +755,7 @@ function ContextRulesChip({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_design_system3.PopoverContent,
       {
-        align: "start",
+        align: "end",
         className: "w-[26rem] max-w-[calc(100vw-1rem)] overflow-hidden p-0",
         children: body
       }
@@ -749,31 +764,99 @@ function ContextRulesChip({
 }
 
 // context/react/ContextRulesPanelBody.tsx
-var React3 = __toESM(require("react"), 1);
-var import_design_system5 = require("@ai-matrx/design-system");
+var React4 = __toESM(require("react"), 1);
+var import_design_system6 = require("@ai-matrx/design-system");
 
 // context/react/ContextDeliveredValue.tsx
+var React3 = __toESM(require("react"), 1);
 var import_design_system4 = require("@ai-matrx/design-system");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ContextDeliveredValue({
   row,
+  load,
   className
 }) {
-  if (!row.delivered && !row.onRequest) {
+  const blocks = row.deliveredBlocks ?? [];
+  if (!row.delivered && !row.onRequest && blocks.length === 0) {
     return isServerAuthoritativeKey(row.key) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { "data-testid": "context-server-fills", className: (0, import_design_system4.cn)("text-xs text-muted-foreground", className), children: "Filled in by the server" }) : null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_design_system4.cn)("flex flex-col gap-3", className), children: [
-    row.delivered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DeliveredBlock, { title: "Agent received", text: row.delivered }) : null,
-    row.onRequest ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DeliveredBlock, { title: "Returned on request", text: row.onRequest }) : null
+    row.delivered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DeliveredSection,
+      {
+        title: "Agent received",
+        target: { kind: "delivered", key: row.key },
+        ref_: row.delivered,
+        load
+      }
+    ) : null,
+    blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DeliveredSection,
+      {
+        title: block.label,
+        target: { kind: "block", key: block.id },
+        ref_: block.delivered,
+        load
+      },
+      block.id
+    )),
+    row.onRequest ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DeliveredSection,
+      {
+        title: "Returned on request",
+        target: { kind: "on_request", key: row.key },
+        ref_: row.onRequest,
+        load
+      }
+    ) : null
   ] });
 }
-function DeliveredBlock({ title, text }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "flex flex-col gap-1", "aria-label": title, children: [
+function DeliveredSection({
+  title,
+  target,
+  ref_,
+  load
+}) {
+  const [loaded, setLoaded] = React3.useState({ state: "loading" });
+  const [attempt, setAttempt] = React3.useState(0);
+  const { kind, key } = target;
+  React3.useEffect(() => {
+    if (!load) return;
+    let live = true;
+    setLoaded({ state: "loading" });
+    load({ kind, key }).then(
+      (viewed) => {
+        if (live) setLoaded({ state: "done", text: viewed.text });
+      },
+      (error) => {
+        if (live)
+          setLoaded({
+            state: "error",
+            message: error instanceof Error && error.message ? error.message : "Couldn't load"
+          });
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [load, kind, key, attempt]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "flex flex-col gap-1", "aria-label": title, "data-view-kind": kind, "data-view-key": key, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-baseline gap-2 text-xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium", children: title }),
-      text.truncated ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tabular-nums text-muted-foreground", children: `First ${text.text.length.toLocaleString()} of ${text.chars.toLocaleString()} chars` }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tabular-nums text-muted-foreground", children: `${formatChars(ref_.chars)} chars` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    !load ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2014" }) : loaded.state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system4.Skeleton, { "data-testid": "context-delivered-loading", className: "h-16 w-full" }) : loaded.state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-xs text-destructive", role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "min-w-0 truncate", title: loaded.message, children: loaded.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAttempt((n) => n + 1),
+          className: "shrink-0 rounded px-1.5 py-0.5 text-foreground hover:bg-accent",
+          children: "Retry"
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "pre",
       {
         "data-testid": "context-delivered-text",
@@ -782,14 +865,88 @@ function DeliveredBlock({ title, text }) {
           "whitespace-pre-wrap break-words rounded border border-border",
           "bg-muted/40 p-2 font-mono text-[11px] text-foreground"
         ),
-        children: text.text
+        children: loaded.text
       }
     )
   ] });
 }
 
-// context/react/ContextRulesPanelBody.tsx
+// context/react/ContextReceiptBlocks.tsx
+var import_design_system5 = require("@ai-matrx/design-system");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function ContextReceiptBlocks({
+  blocks,
+  selectedId,
+  onOpenBlock,
+  density = "compact",
+  className
+}) {
+  if (blocks.length === 0) return null;
+  const comfortable = density === "comfortable";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "table", "aria-label": "Also sent", className: (0, import_design_system5.cn)("text-xs", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "rowgroup", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        role: "row",
+        className: "flex h-6 items-center bg-muted/40 px-2 font-medium text-muted-foreground",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "cell", children: "Also sent" })
+      }
+    ),
+    blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        role: "row",
+        "data-block-id": block.id,
+        "aria-selected": selectedId === block.id || void 0,
+        className: (0, import_design_system5.cn)(
+          CONTEXT_RULES_GRID[density],
+          "border-b border-border/50",
+          comfortable ? "min-h-11" : "h-7",
+          selectedId === block.id && "bg-accent"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "cell", className: "col-span-2 flex min-w-0 items-center", children: onOpenBlock ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              title: block.label,
+              onClick: () => onOpenBlock(block.id),
+              className: "block min-w-0 flex-1 truncate text-left hover:underline focus-visible:underline focus-visible:outline-none",
+              children: block.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { title: block.label, className: "block min-w-0 flex-1 truncate", children: block.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "cell", className: "text-right tabular-nums", children: formatChars(block.delivered.chars) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "cell" })
+        ]
+      },
+      block.id
+    ))
+  ] }) });
+}
+function ContextReceiptBlockDetail({
+  block,
+  load,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_design_system5.cn)("flex flex-col gap-3 p-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 items-baseline gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "min-w-0 truncate text-sm font-medium", children: block.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${formatChars(block.delivered.chars)} chars \xB7 ${DELIVERY_LABEL.inline}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      DeliveredSection,
+      {
+        title: "Agent received",
+        target: { kind: "block", key: block.id },
+        ref_: block.delivered,
+        load
+      }
+    )
+  ] });
+}
+
+// context/react/ContextRulesPanelBody.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function layerCells(row) {
   const { surface, agent, default_max } = row.layers ?? {};
   const declared = agent?.declared === true;
@@ -812,38 +969,38 @@ function layerCells(row) {
 var LAYERS = ["default", "page", "agent", "you"];
 function LayerTable({ row }) {
   const cells = layerCells(row);
-  const cell = (text, winning) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const cell = (text, winning) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       role: "cell",
       "data-winning": winning ? "true" : void 0,
-      className: (0, import_design_system5.cn)(
+      className: (0, import_design_system6.cn)(
         "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__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "table", "aria-label": "Layers", className: "text-xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "table", "aria-label": "Layers", className: "text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "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__ */ (0, import_jsx_runtime6.jsx)("span", { role: "columnheader", children: "Layer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "columnheader", className: "text-right", children: "Include" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "columnheader", className: "text-right", children: "Inline max" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { role: "columnheader", children: "Layer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { role: "columnheader", className: "text-right", children: "Include" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { role: "columnheader", className: "text-right", children: "Inline max" })
         ]
       }
     ),
-    LAYERS.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    LAYERS.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         role: "row",
         className: "grid h-7 grid-cols-[1fr_5rem_5rem] items-center gap-x-2 border-b border-border/50",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { role: "cell", children: LAYER_LABEL[layer] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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)
         ]
@@ -859,21 +1016,22 @@ function RowDetail({
   mismatches,
   onChange,
   renderDetail,
-  comfortable
+  comfortable,
+  loadView
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3 p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 items-baseline gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "min-w-0 truncate text-sm font-medium", children: row.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${formatChars(row.chars)} chars \xB7 ${DELIVERY_LABEL[row.delivery]}` })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3 p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 items-baseline gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "min-w-0 truncate text-sm font-medium", children: row.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)(TriangleAlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: describeMismatches(mismatches) })
+    mismatches.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)(TriangleAlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: describeMismatches(mismatches) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground", children: "Include" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_design_system5.cn)("flex items-center", comfortable ? "h-11" : "h-7"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_design_system5.Switch,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Include" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_design_system6.cn)("flex items-center", comfortable ? "h-11" : "h-7"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_design_system6.Switch,
         {
           size: "sm",
           "aria-label": `Include ${row.label}`,
@@ -882,8 +1040,8 @@ function RowDetail({
           onCheckedChange: (next) => onChange(row.key, row.surfaceKey, withInclude(row, next))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground", children: "Inline max" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Inline max" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         InlineMaxInput,
         {
           label: row.label,
@@ -897,8 +1055,8 @@ function RowDetail({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayerTable, { row }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextDeliveredValue, { row }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LayerTable, { row }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextDeliveredValue, { row, load: loadView }),
     renderDetail ? renderDetail(row) : null
   ] });
 }
@@ -906,6 +1064,8 @@ function ContextRulesPanelBody({
   rows,
   cap,
   mismatches,
+  blocks,
+  loadView,
   readOnly,
   onChange,
   renderDetail,
@@ -914,45 +1074,68 @@ function ContextRulesPanelBody({
   onSelectedKeyChange,
   className
 }) {
-  const [selectedState, setSelectedState] = React3.useState(null);
-  const [query, setQuery] = React3.useState("");
+  const [selectedState, setSelectedState] = React4.useState(null);
+  const [query, setQuery] = React4.useState("");
+  const [openBlockId, setOpenBlockId] = React4.useState(null);
   const selectedKey = selectedProp !== void 0 ? selectedProp : selectedState;
   const select = (key) => {
+    setOpenBlockId(null);
     if (selectedProp === void 0) setSelectedState(key);
     onSelectedKeyChange?.(key);
   };
+  const openBlock = (id) => {
+    select(null);
+    setOpenBlockId(id);
+  };
   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 alsoSent = unclaimedBlocks(
+    blocks,
+    rows.filter((r) => r.delivered).map((r) => r.key)
+  );
+  const visibleBlocks = q ? alsoSent.filter((b) => b.label.toLowerCase().includes(q) || b.id.toLowerCase().includes(q)) : alsoSent;
+  const openedBlock = openBlockId ? (blocks ?? []).find((b) => b.id === openBlockId) ?? null : null;
+  const selected = !openedBlock && selectedKey ? rows.find((r) => r.key === selectedKey) ?? null : null;
   const comfortable = !!isMobile;
-  const search = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative shrink-0 border-b border-border p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime6.jsx)(
-      import_design_system5.Input,
+  const search = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative shrink-0 border-b border-border p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(
+      import_design_system6.Input,
       {
         type: "search",
         "aria-label": "Search context",
         placeholder: "Search",
         value: query,
         onChange: (e) => setQuery(e.target.value),
-        className: (0, import_design_system5.cn)("pl-7 shadow-none", comfortable ? "h-11 text-base" : "h-8 text-xs")
+        className: (0, import_design_system6.cn)("pl-7 shadow-none", comfortable ? "h-11 text-base" : "h-8 text-xs")
       }
     )
   ] });
-  const table = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    ContextRulesTable,
-    {
-      rows: visible,
-      cap,
-      readOnly,
-      density: comfortable ? "comfortable" : "compact",
-      selectedKey,
-      onChange,
-      onOpenRow: (key) => select(key),
-      ...mismatches ? { mismatches } : {}
-    }
-  ) });
-  const detail = selected ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const table = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ContextRulesTable,
+      {
+        rows: visible,
+        cap,
+        readOnly,
+        density: comfortable ? "comfortable" : "compact",
+        selectedKey,
+        onChange,
+        onOpenRow: (key) => select(key),
+        ...mismatches ? { mismatches } : {}
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ContextReceiptBlocks,
+      {
+        blocks: visibleBlocks,
+        selectedId: openedBlock?.id ?? null,
+        onOpenBlock: openBlock,
+        density: comfortable ? "comfortable" : "compact"
+      }
+    )
+  ] });
+  const detail = openedBlock ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextReceiptBlockDetail, { block: openedBlock, load: loadView }) : selected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     RowDetail,
     {
       row: selected,
@@ -961,35 +1144,36 @@ function ContextRulesPanelBody({
       mismatches: mismatches?.filter((m) => m.key === selected.key) ?? [],
       onChange,
       renderDetail,
-      comfortable
+      comfortable,
+      loadView
     }
   ) : null;
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_design_system5.cn)("flex h-full min-h-0 flex-col", className), children: selected ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-12 shrink-0 items-center border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_design_system6.cn)("flex h-full min-h-0 flex-col", className), children: detail ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-12 shrink-0 items-center border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "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__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, { className: "h-4 w-4" }),
             "Back"
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: detail })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: detail })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
       search,
       table
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system5.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_design_system5.cn)("flex h-full min-h-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("aside", { className: "flex w-[22rem] shrink-0 flex-col border-r border-border", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.TooltipProvider, { delayDuration: 300, titleTooltips: false, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_design_system6.cn)("flex h-full min-h-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("aside", { className: "flex w-[22rem] shrink-0 flex-col border-r border-border", children: [
       search,
       table
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("section", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: detail ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: "Select an item" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: detail ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: "Select an item" }) })
   ] }) });
 }
 //# sourceMappingURL=index.cjs.map