@adoptai/genui-components 0.1.60 → 0.1.62

package/dist/index.js

@@ -5641,6 +5641,167 @@ var decisionCardTool = {
     required: ["type", "title", "question", "options"]
   }
 };
+var decisionQueueItemSchema = z.object({
+  id: z.string().optional(),
+  decision_type: z.string().optional(),
+  title: z.string(),
+  question: z.string(),
+  amount: z.number().optional(),
+  currency: z.string().optional(),
+  amount_label: z.string().optional(),
+  severity: z.enum(["low", "medium", "high"]).optional(),
+  flags: z.array(
+    z.object({
+      field: z.string().optional(),
+      issue: z.string(),
+      severity: z.enum(["low", "medium", "high"]).optional()
+    })
+  ).max(6).optional(),
+  options: z.array(
+    z.object({
+      id: z.string().optional(),
+      label: z.string(),
+      recommended: z.boolean().optional(),
+      value: z.number().optional(),
+      adjust: z.object({
+        min: z.number(),
+        max: z.number(),
+        step: z.number().optional(),
+        unit: z.string().optional()
+      }).optional()
+    })
+  ).min(1).max(5),
+  source: z.object({
+    label: z.string().optional(),
+    url: z.string().optional()
+  }).optional()
+});
+var decisionQueueSchema = z.object({
+  type: z.literal("decision-queue"),
+  id: z.string().optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  submit_label: z.string().optional(),
+  items: z.array(decisionQueueItemSchema).min(2).max(12),
+  resolved: z.object({
+    decisions: z.array(
+      z.object({
+        id: z.string().optional(),
+        title: z.string(),
+        option: z.string(),
+        value: z.number().optional()
+      })
+    )
+  }).optional()
+});
+var OPTION_ITEM_JSON = {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+    label: { type: "string" },
+    recommended: { type: "boolean" },
+    value: {
+      type: "number",
+      description: "Suggested numeric figure for this option (starting point of the adjuster)"
+    },
+    adjust: {
+      type: "object",
+      description: "Allow the user to tune `value` within this inclusive range before deciding",
+      properties: {
+        min: { type: "number" },
+        max: { type: "number" },
+        step: { type: "number" },
+        unit: { type: "string", description: "Short unit suffix, e.g. 'units', '%', 'hrs'" }
+      },
+      required: ["min", "max"]
+    }
+  },
+  required: ["label"]
+};
+var decisionQueueTool = {
+  name: "render_decision_queue",
+  description: "Render a SEQUENTIAL QUEUE of 2-12 related human-in-the-loop judgments, decided one at a time at full decision-card richness (amount at stake, data-quality flags, adjustable figures, source links) and submitted TOGETHER as one reply. Use whenever MORE THAN ONE decision is pending in the same turn \u2014 never emit multiple loose decision-cards. Give deferrable items an explicit 'leave open'-style option so the user can always complete the queue. For a single judgment use decision-card; for typed field input (names, dates, uploads) use render_builder.",
+  input_schema: {
+    type: "object",
+    properties: {
+      type: { type: "string", enum: ["decision-queue"] },
+      id: { type: "string", description: "Stable id for update-in-place rendering" },
+      title: {
+        type: "string",
+        description: "Batch headline shown in the header, e.g. 'Reconciliation exceptions'"
+      },
+      description: { type: "string", description: "One-line context above the queue" },
+      submit_label: { type: "string", description: "CTA label; defaults to 'Submit N decisions'" },
+      items: {
+        type: "array",
+        minItems: 2,
+        maxItems: 12,
+        description: "The pending judgments, in the order the user should take them. Each is a full decision-card body (no `type`).",
+        items: {
+          type: "object",
+          properties: {
+            id: { type: "string" },
+            decision_type: {
+              type: "string",
+              description: "Short category eyebrow, e.g. 'Duplicate', 'Capitalization'"
+            },
+            title: { type: "string" },
+            question: { type: "string" },
+            amount: { type: "number" },
+            currency: { type: "string" },
+            amount_label: { type: "string" },
+            severity: { type: "string", enum: ["low", "medium", "high"] },
+            flags: {
+              type: "array",
+              maxItems: 6,
+              items: {
+                type: "object",
+                properties: {
+                  field: { type: "string" },
+                  issue: { type: "string" },
+                  severity: { type: "string", enum: ["low", "medium", "high"] }
+                },
+                required: ["issue"]
+              }
+            },
+            options: {
+              type: "array",
+              minItems: 1,
+              maxItems: 5,
+              items: OPTION_ITEM_JSON
+            },
+            source: {
+              type: "object",
+              properties: { label: { type: "string" }, url: { type: "string" } }
+            }
+          },
+          required: ["title", "question", "options"]
+        }
+      },
+      resolved: {
+        type: "object",
+        description: "Pre-resolved state for transcript replay",
+        properties: {
+          decisions: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                id: { type: "string" },
+                title: { type: "string" },
+                option: { type: "string" },
+                value: { type: "number" }
+              },
+              required: ["title", "option"]
+            }
+          }
+        },
+        required: ["decisions"]
+      }
+    },
+    required: ["type", "items"]
+  }
+};
 var tabbyAuthSchema = z.object({
   type: z.literal("tabby-auth"),
   app: z.string(),
@@ -5792,6 +5953,7 @@ var schemaRegistry = {
   "workflow-stepper": { schema: workflowStepperSchema, tool: workflowStepperTool },
   "document-field-extraction": { schema: documentFieldExtractionSchema, tool: documentFieldExtractionTool },
   "decision-card": { schema: decisionCardSchema, tool: decisionCardTool },
+  "decision-queue": { schema: decisionQueueSchema, tool: decisionQueueTool },
   "tabby-auth": { schema: tabbyAuthSchema, tool: tabbyAuthTool }
 };
 
@@ -6505,17 +6667,17 @@ function SparklineTableResolver(p) {
 // src/composites/heatmap-table/resolver.tsx
 init_theme();
 init_ThemeContext();
-function heatColor(z62) {
-  const clamped = Math.max(-3, Math.min(3, z62));
+function heatColor(z63) {
+  const clamped = Math.max(-3, Math.min(3, z63));
   const abs = Math.abs(clamped);
   const lightness = 95 - abs * 8;
   const hue = clamped >= 0 ? 142 : 0;
   return `hsl(${hue} 60% ${lightness}%)`;
 }
-function heatTextColor(z62) {
-  const abs = Math.abs(z62);
-  if (abs > 2) return z62 >= 0 ? "#14532d" : "#7f1d1d";
-  if (abs > 1) return z62 >= 0 ? "#166534" : "#991b1b";
+function heatTextColor(z63) {
+  const abs = Math.abs(z63);
+  if (abs > 2) return z63 >= 0 ? "#14532d" : "#7f1d1d";
+  if (abs > 1) return z63 >= 0 ? "#166534" : "#991b1b";
   return "var(--foreground)";
 }
 var th2 = {
@@ -17566,7 +17728,8 @@ var DEFAULT_INTERACTION = {
   onStepSelect: void 0,
   resolvedDecisions: void 0,
   onDecisionResolve: void 0,
-  onDecisionSource: void 0
+  onDecisionSource: void 0,
+  onDecisionQueueSubmit: void 0
 };
 var GenUIInteractionContext = createContext(DEFAULT_INTERACTION);
 function GenUIInteractionProvider({ value, children }) {
@@ -20354,7 +20517,8 @@ function DecisionCardRenderer({
   data,
   resolved = null,
   onResolve,
-  onOpenSource
+  onOpenSource,
+  eyebrow
 }) {
   var _a2, _b, _c;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
@@ -20460,7 +20624,7 @@ function DecisionCardRenderer({
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }, children: [
-                /* @__PURE__ */ jsx(
+                eyebrow === null ? null : /* @__PURE__ */ jsx(
                   "span",
                   {
                     style: {
@@ -20470,7 +20634,7 @@ function DecisionCardRenderer({
                       fontWeight: 700,
                       color: ACCENT2
                     },
-                    children: data.decision_type ? `Decision needs you \xB7 ${data.decision_type}` : "Decision needs you"
+                    children: eyebrow !== void 0 ? eyebrow : data.decision_type ? `Decision needs you \xB7 ${data.decision_type}` : "Decision needs you"
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -20690,6 +20854,325 @@ function DecisionCardResolver(p) {
   ) });
 }
 init_ThemeContext();
+var GREEN4 = "#15803d";
+var KEYFRAMES3 = `
+@keyframes dqSettle{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
+.dq-settle{animation:dqSettle 0.24s cubic-bezier(0.22,1,0.36,1) both}
+@keyframes dqFocus{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
+.dq-focus{animation:dqFocus 0.28s cubic-bezier(0.22,1,0.36,1) both}
+@media (prefers-reduced-motion: reduce){
+  .dq-settle,.dq-focus{animation:none !important;opacity:1 !important;transform:none !important}
+}`;
+function figureOf(item, decision) {
+  var _a2, _b, _c;
+  if (decision.value == null) return decision.option;
+  const unit = (_c = (_b = ((_a2 = item.options) != null ? _a2 : []).find((o) => o.label === decision.option)) == null ? void 0 : _b.adjust) == null ? void 0 : _c.unit;
+  return `${decision.option} \xB7 ${formatFigure(decision.value, unit)}`;
+}
+function composeQueueMessage(items, decisions) {
+  const lines = items.map((item, i) => {
+    const d = decisions[i];
+    return `${i + 1}. ${item.title} \u2192 ${d ? figureOf(item, d) : "(undecided)"}`;
+  });
+  const done = decisions.filter(Boolean).length;
+  return `Decisions (${done}/${items.length}):
+${lines.join("\n")}`;
+}
+function Check({ size, color }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7", stroke: color, strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function amountChip(item) {
+  if (typeof item.amount !== "number") return null;
+  const abs = Math.abs(item.amount);
+  const sign = item.amount < 0 ? "-" : "";
+  if (abs >= 1e6) return `${sign}$${(abs / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+  if (abs >= 1e3) return `${sign}$${(abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}K`;
+  return `${sign}$${abs}`;
+}
+function DecisionQueueRenderer({
+  data,
+  submitted = null,
+  onSubmit,
+  hideSubmit,
+  submitRef,
+  onReady
+}) {
+  var _a2;
+  const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
+  const items = (_a2 = data.items) != null ? _a2 : [];
+  const [decisions, setDecisions] = React45.useState(
+    () => items.map(() => void 0)
+  );
+  const firstUndecided = decisions.findIndex((d) => !d);
+  const [focusIdx, setFocusIdx] = React45.useState(firstUndecided >= 0 ? firstUndecided : null);
+  const isSubmitted = submitted != null;
+  const shown = isSubmitted ? items.map(
+    (item, i) => {
+      var _a3;
+      return (_a3 = submitted.find((d) => d.id && d.id === item.id || d.title === item.title)) != null ? _a3 : submitted[i];
+    }
+  ) : decisions;
+  const decidedCount = shown.filter(Boolean).length;
+  const allDecided = decidedCount === items.length;
+  const decide = (idx, option, value) => {
+    const item = items[idx];
+    const next = decisions.slice();
+    next[idx] = { id: item.id, title: item.title, option, value };
+    setDecisions(next);
+    const order = [...Array(items.length).keys()];
+    const after = order.slice(idx + 1).concat(order.slice(0, idx + 1));
+    const target = after.find((j) => j !== idx && !next[j]);
+    setFocusIdx(target != null ? target : null);
+  };
+  const handleSubmit = () => {
+    if (!allDecided || isSubmitted) return;
+    const final = decisions;
+    onSubmit == null ? void 0 : onSubmit(final, composeQueueMessage(items, final));
+  };
+  const onReadyRef = React45.useRef(onReady);
+  React45.useEffect(() => {
+    onReadyRef.current = onReady;
+  });
+  React45.useEffect(() => {
+    if (!onReadyRef.current) return;
+    const msg = allDecided ? composeQueueMessage(items, decisions) : null;
+    onReadyRef.current(allDecided && !isSubmitted, msg, decisions.filter(Boolean));
+  }, [decisions, allDecided, isSubmitted]);
+  React45.useEffect(() => {
+    if (!submitRef) return;
+    submitRef.current = handleSubmit;
+    return () => {
+      submitRef.current = null;
+    };
+  }, [submitRef, allDecided, isSubmitted, decisions]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "decision-queue",
+      "data-submitted": isSubmitted || void 0,
+      style: {
+        position: "relative",
+        width: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+        borderRadius: "0.75rem",
+        border: `1px solid ${BORDER4}`,
+        background: "white",
+        boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)",
+        padding: "16px 18px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES3 }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 10.5,
+                textTransform: "uppercase",
+                letterSpacing: "0.07em",
+                fontWeight: 700,
+                color: isSubmitted ? GREEN4 : ACCENT2
+              },
+              children: isSubmitted ? "Decisions submitted" : "Decisions need you"
+            }
+          ),
+          data.title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontFamily: "var(--font-serif)",
+                fontSize: 16,
+                fontWeight: 400,
+                color: "var(--foreground)",
+                letterSpacing: "-0.01em",
+                margin: 0,
+                lineHeight: 1.25
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ jsx("p", { style: { fontSize: 12.5, color: MUTED2, margin: 0, lineHeight: 1.45 }, children: data.description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: items.map((item, idx) => {
+          var _a3, _b, _c;
+          const decision = shown[idx];
+          const focused = !isSubmitted && focusIdx === idx;
+          if (focused) {
+            return /* @__PURE__ */ jsx("div", { className: "dq-focus", "data-testid": `decision-queue-focus-${idx}`, children: /* @__PURE__ */ jsx(
+              DecisionCardRenderer,
+              {
+                data: __spreadValues({ type: "decision-card" }, item),
+                resolved: null,
+                onResolve: (option, value) => decide(idx, option, value),
+                eyebrow: `${idx + 1} of ${items.length}${item.decision_type ? ` \xB7 ${item.decision_type}` : ""}`
+              }
+            ) }, (_a3 = item.id) != null ? _a3 : `q-${idx}`);
+          }
+          if (decision) {
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "dq-settle",
+                onClick: isSubmitted ? void 0 : () => setFocusIdx(idx),
+                disabled: isSubmitted,
+                title: isSubmitted ? void 0 : "Change this decision",
+                "data-testid": `decision-queue-receipt-${idx}`,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  width: "100%",
+                  textAlign: "left",
+                  border: "1px solid #dcfce7",
+                  background: "#f6fef9",
+                  borderRadius: 8,
+                  padding: "7px 11px",
+                  cursor: isSubmitted ? "default" : "pointer",
+                  font: "inherit"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Check, { size: 13, color: GREEN4 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: 12.5, fontWeight: 600, color: "var(--foreground)", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: item.title }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: MUTED2, fontSize: 12 }, children: "\u2192" }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: 12.5, fontWeight: 600, color: GREEN4, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }, children: figureOf(item, decision) }),
+                  /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                  !isSubmitted && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 600, color: MUTED2 }, children: "Change" })
+                ]
+              },
+              (_b = item.id) != null ? _b : `q-${idx}`
+            );
+          }
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: isSubmitted ? void 0 : () => setFocusIdx(idx),
+              disabled: isSubmitted,
+              "data-testid": `decision-queue-upcoming-${idx}`,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                textAlign: "left",
+                border: `1px dashed ${BORDER4}`,
+                background: "white",
+                borderRadius: 8,
+                padding: "7px 11px",
+                cursor: isSubmitted ? "default" : "pointer",
+                font: "inherit",
+                opacity: 0.75
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: { width: 13, height: 13, borderRadius: "50%", border: `1.5px solid ${MUTED2}`, flexShrink: 0, boxSizing: "border-box" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 12.5, fontWeight: 600, color: MUTED2, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                  item.decision_type ? `${item.decision_type} \xB7 ` : "",
+                  item.title
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                amountChip(item) && /* @__PURE__ */ jsx("span", { style: { fontSize: 11.5, fontWeight: 700, color: MUTED2, fontVariantNumeric: "tabular-nums" }, children: amountChip(item) })
+              ]
+            },
+            (_c = item.id) != null ? _c : `q-${idx}`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              paddingTop: 10,
+              borderTop: `1px solid #f0f0f0`
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", gap: 4 }, "aria-hidden": "true", children: items.map((_, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 7,
+                    height: 7,
+                    borderRadius: "50%",
+                    background: shown[i] ? isSubmitted ? GREEN4 : ACCENT2 : "#e8e8e8",
+                    transition: "background 0.2s"
+                  }
+                },
+                `dot-${i}`
+              )) }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: { fontSize: 11.5, fontWeight: 600, color: MUTED2, fontVariantNumeric: "tabular-nums" },
+                  "data-testid": "decision-queue-progress",
+                  children: [
+                    decidedCount,
+                    "/",
+                    items.length,
+                    " decided"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+              isSubmitted ? /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: GREEN4 }, children: [
+                /* @__PURE__ */ jsx(Check, { size: 14, color: GREEN4 }),
+                "Submitted"
+              ] }) : hideSubmit ? null : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSubmit,
+                  disabled: !allDecided,
+                  "data-testid": "decision-queue-submit",
+                  style: {
+                    border: `1px solid ${allDecided ? ACCENT2 : BORDER4}`,
+                    background: allDecided ? ACCENT2 : "#f6f6f6",
+                    color: allDecided ? "white" : MUTED2,
+                    borderRadius: 8,
+                    fontSize: 13,
+                    fontWeight: 600,
+                    padding: "8px 16px",
+                    cursor: allDecided ? "pointer" : "default",
+                    fontVariantNumeric: "tabular-nums",
+                    transition: "background 0.15s, border-color 0.15s, color 0.15s"
+                  },
+                  children: data.submit_label || `Submit ${items.length} decision${items.length === 1 ? "" : "s"}`
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DecisionQueueResolver(p) {
+  var _a2, _b, _c, _d, _e, _f;
+  const { resolvedDecisions, onDecisionQueueSubmit } = useGenUIInteraction();
+  const queueId = (_b = (_a2 = p.id) != null ? _a2 : p.title) != null ? _b : "decision-queue";
+  const replayed = (_d = (_c = p.resolved) == null ? void 0 : _c.decisions) != null ? _d : null;
+  const [localSubmitted, setLocalSubmitted] = React45.useState(null);
+  const hostLocked = (resolvedDecisions == null ? void 0 : resolvedDecisions[queueId]) != null;
+  const submitted = (_e = replayed != null ? replayed : localSubmitted) != null ? _e : hostLocked ? [] : null;
+  const handleSubmit = (decisions, message) => {
+    setLocalSubmitted(decisions);
+    onDecisionQueueSubmit == null ? void 0 : onDecisionQueueSubmit(queueId, decisions, message);
+  };
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_f = p.title) != null ? _f : "decision-queue", children: /* @__PURE__ */ jsx(DecisionQueueRenderer, { data: p, submitted, onSubmit: handleSubmit }) });
+}
+init_ThemeContext();
 var CONNECTED_GREEN3 = "#15803d";
 var CONNECTED_GREEN_BG = "#dcfce7";
 var PENDING_AMBER = "#92400e";
@@ -21121,6 +21604,8 @@ function resolveUI(rawPayload) {
       return /* @__PURE__ */ jsx(DocumentFieldExtractionResolver, __spreadValues({}, payload));
     case "decision-card":
       return /* @__PURE__ */ jsx(DecisionCardResolver, __spreadValues({}, payload));
+    case "decision-queue":
+      return /* @__PURE__ */ jsx(DecisionQueueResolver, __spreadValues({}, payload));
     case "tabby-auth":
       return /* @__PURE__ */ jsx(TabbyAuthResolver, __spreadValues({}, payload));
     default: {