@adoptai/genui-components 0.1.32 → 0.1.45

package/dist/renderer.js

@@ -1,5 +1,5 @@
 "use client";
-import React33, { lazy, createContext, useState, useCallback, useEffect, useRef, Suspense, useMemo, useContext } from 'react';
+import React41, { lazy, createContext, useState, useCallback, useEffect, useRef, Suspense, useMemo, useContext, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import dagre from '@dagrejs/dagre';
 import { createPortal } from 'react-dom';
@@ -200,6 +200,24 @@ function renderInline(text) {
   }
   return parts;
 }
+function parseTableRow(line) {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|") && !s.endsWith("\\|")) s = s.slice(0, -1);
+  return s.split(new RegExp("(?<!\\\\)\\|")).map((c) => c.trim().replace(/\\\|/g, "|"));
+}
+function isTableSeparator(line) {
+  if (!line.includes("-")) return false;
+  const cells = parseTableRow(line);
+  return cells.length > 0 && cells.every((c) => /^:?-{1,}:?$/.test(c));
+}
+function alignFromSeparator(cell) {
+  const left = cell.startsWith(":");
+  const right = cell.endsWith(":");
+  if (left && right) return "center";
+  if (right) return "right";
+  return "left";
+}
 function MarkdownBlock({ content }) {
   var _a;
   const lines = content.split("\n");
@@ -330,6 +348,74 @@ function MarkdownBlock({ content }) {
       );
       continue;
     }
+    if (trimmed.includes("|") && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+      const headers = parseTableRow(trimmed);
+      const aligns = parseTableRow(lines[i + 1]).map(alignFromSeparator);
+      i += 2;
+      const rows = [];
+      while (i < lines.length) {
+        const li = lines[i].trim();
+        if (!li || !li.includes("|")) break;
+        rows.push(parseTableRow(li));
+        i++;
+      }
+      const colAlign = (idx) => {
+        var _a2;
+        return (_a2 = aligns[idx]) != null ? _a2 : "left";
+      };
+      elements.push(
+        /* @__PURE__ */ jsx("div", { style: { margin: "6px 0 10px 0", overflowX: "auto" }, children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            style: {
+              borderCollapse: "collapse",
+              width: "100%",
+              fontSize: "12px",
+              lineHeight: 1.4
+            },
+            children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: headers.map((h, idx) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  style: {
+                    textAlign: colAlign(idx),
+                    padding: "6px 10px",
+                    borderBottom: `1px solid ${BORDER}`,
+                    background: PAPER,
+                    fontWeight: 600,
+                    color: MUTED,
+                    fontSize: "10px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em",
+                    whiteSpace: "nowrap"
+                  },
+                  children: renderInline(h)
+                },
+                idx
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: rows.map((cells, rIdx) => /* @__PURE__ */ jsx("tr", { children: headers.map((_, cIdx) => {
+                var _a2;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      textAlign: colAlign(cIdx),
+                      padding: "6px 10px",
+                      borderBottom: `1px solid ${BORDER}`,
+                      color: "var(--foreground)",
+                      verticalAlign: "top"
+                    },
+                    children: renderInline((_a2 = cells[cIdx]) != null ? _a2 : "")
+                  },
+                  cIdx
+                );
+              }) }, rIdx)) })
+            ]
+          }
+        ) }, key++)
+      );
+      continue;
+    }
     elements.push(
       /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px 0", lineHeight: 1.65 }, children: renderInline(trimmed) }, key++)
     );
@@ -5118,6 +5204,79 @@ var pipelinePreviewTool = {
     required: ["type", "name", "steps"]
   }
 };
+var workflowStepperSchema = z.object({
+  type: z.literal("workflow-stepper"),
+  id: z.string().optional(),
+  title: z.string(),
+  period: z.string().optional(),
+  badge: z.string().optional(),
+  active_step: z.string().optional(),
+  steps: z.array(
+    z.object({
+      id: z.string(),
+      n: z.number().int().positive().optional(),
+      title: z.string(),
+      sub: z.string().optional(),
+      status: z.enum(["done", "active", "review", "pending", "failed"]),
+      assignees: z.array(
+        z.object({
+          name: z.string(),
+          kind: z.enum(["agent", "human"]),
+          initials: z.string().max(3).optional(),
+          color: z.string().optional(),
+          role: z.string().optional()
+        })
+      ).max(6).optional()
+    })
+  ).min(2).max(12)
+});
+var workflowStepperTool = {
+  name: "render_workflow_stepper",
+  description: "Render a recurring-process workflow stepper \u2014 a horizontal strip of sequential step cards (e.g. a monthly close pipeline) with per-step status (done/active/review/pending/failed) and human + agent assignee avatars. Use for org processes with named steps and owners, NOT for generic progress bars or project phase summaries.",
+  input_schema: {
+    type: "object",
+    properties: {
+      type: { type: "string", enum: ["workflow-stepper"] },
+      id: { type: "string", description: "Stable id for update-in-place rendering" },
+      title: { type: "string", description: "Process name, e.g. 'Monthly Close'" },
+      period: { type: "string", description: "Period label, e.g. 'Period 04 \xB7 FY2026'" },
+      badge: { type: "string", description: "Framework/compliance badge, e.g. 'SOX controlled'" },
+      active_step: { type: "string", description: "Id of the currently active step" },
+      steps: {
+        type: "array",
+        minItems: 2,
+        maxItems: 12,
+        items: {
+          type: "object",
+          properties: {
+            id: { type: "string" },
+            n: { type: "number", description: "Step number; defaults to index + 1" },
+            title: { type: "string" },
+            sub: { type: "string", description: "Short status caption, e.g. '7 accounts \xB7 2 exceptions'" },
+            status: { type: "string", enum: ["done", "active", "review", "pending", "failed"] },
+            assignees: {
+              type: "array",
+              maxItems: 6,
+              items: {
+                type: "object",
+                properties: {
+                  name: { type: "string" },
+                  kind: { type: "string", enum: ["agent", "human"] },
+                  initials: { type: "string" },
+                  color: { type: "string" },
+                  role: { type: "string" }
+                },
+                required: ["name", "kind"]
+              }
+            }
+          },
+          required: ["id", "title", "status"]
+        }
+      }
+    },
+    required: ["type", "title", "steps"]
+  }
+};
 
 // src/schemas/index.ts
 var schemaRegistry = {
@@ -5176,7 +5335,8 @@ var schemaRegistry = {
   "scatter-chart": { schema: scatterChartSchema, tool: scatterChartTool },
   "connect-integration": { schema: connectIntegrationSchema, tool: connectIntegrationTool },
   "integrations-list": { schema: integrationsListSchema, tool: integrationsListTool },
-  "pipeline-preview": { schema: pipelinePreviewSchema, tool: pipelinePreviewTool }
+  "pipeline-preview": { schema: pipelinePreviewSchema, tool: pipelinePreviewTool },
+  "workflow-stepper": { schema: workflowStepperSchema, tool: workflowStepperTool }
 };
 
 // src/schemas/coercePayload.ts
@@ -5666,6 +5826,56 @@ function AlertResolver(p) {
 
 // src/composites/stat-grid/resolver.tsx
 init_Markdown();
+function FitText({ children, max = 22, min = 13, title, className, style }) {
+  const ref = useRef(null);
+  const [size, setSize] = useState(max);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const fit = () => {
+      let s = max;
+      el.style.fontSize = `${s}px`;
+      while (s > min && el.scrollWidth > el.clientWidth + 1) {
+        s -= 1;
+        el.style.fontSize = `${s}px`;
+      }
+      setSize(s);
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [children, max, min]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      title,
+      className,
+      style: __spreadValues({
+        display: "block",
+        minWidth: 0,
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: `${size}px`
+      }, style),
+      children
+    }
+  );
+}
+
+// src/shared/styles.ts
+var TRUNCATE = {
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+
+// src/composites/stat-grid/resolver.tsx
 init_ThemeContext();
 var changeColor = (type) => {
   if (type === "positive") return "#15803d";
@@ -5676,15 +5886,28 @@ var cardStyle = {
   border: "1px solid #dedede",
   borderRadius: "0.75rem",
   background: "white",
-  padding: "14px"
+  padding: "14px",
+  // Let the card shrink inside the grid track so big values can't push it
+  // wider than its column.
+  minWidth: 0,
+  overflow: "hidden"
 };
 function StatGridResolver(p) {
   var _a;
   const { MUTED: MUTED2 } = useTheme();
-  return /* @__PURE__ */ jsx(ComponentActions, { filename: "stat-grid", children: /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "grid", gap: "10px", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))" }, children: ((_a = p.stats) != null ? _a : []).map((stat, i) => /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", padding: "4px 0" }, children: [
-    /* @__PURE__ */ jsx("p", { style: { fontSize: "11.5px", color: MUTED2, letterSpacing: "0.02em", textTransform: "uppercase", margin: 0 }, children: stat.label }),
-    /* @__PURE__ */ jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "22px", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.01em", lineHeight: 1.1, fontVariantNumeric: "tabular-nums", margin: 0 }, children: stat.value }),
-    stat.change && /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", fontWeight: 500, color: changeColor(stat.changeType), fontVariantNumeric: "tabular-nums", margin: 0 }, children: stat.change }),
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: "stat-grid", children: /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "grid", gap: "10px", gridTemplateColumns: "repeat(auto-fill, minmax(min(140px, 100%), 1fr))" }, children: ((_a = p.stats) != null ? _a : []).map((stat, i) => /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", padding: "4px 0", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx("p", { style: __spreadValues({ fontSize: "11.5px", color: MUTED2, letterSpacing: "0.02em", textTransform: "uppercase", margin: 0 }, TRUNCATE), children: stat.label }),
+    /* @__PURE__ */ jsx(
+      FitText,
+      {
+        max: 22,
+        min: 13,
+        title: typeof stat.value === "string" ? stat.value : void 0,
+        style: { fontFamily: "var(--font-serif)", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.01em", lineHeight: 1.1, fontVariantNumeric: "tabular-nums" },
+        children: stat.value
+      }
+    ),
+    stat.change && /* @__PURE__ */ jsx("p", { style: __spreadValues({ fontSize: "12px", fontWeight: 500, color: changeColor(stat.changeType), fontVariantNumeric: "tabular-nums", margin: 0 }, TRUNCATE), children: stat.change }),
     stat.description && /* @__PURE__ */ jsx("p", { style: { fontSize: "11.5px", color: "#888888", lineHeight: 1.4, margin: 0 }, children: /* @__PURE__ */ jsx(Markdown, { inline: true, content: stat.description }) })
   ] }) }, i)) }) });
 }
@@ -5851,17 +6074,17 @@ function SparklineTableResolver(p) {
 // src/composites/heatmap-table/resolver.tsx
 init_theme();
 init_ThemeContext();
-function heatColor(z57) {
-  const clamped = Math.max(-3, Math.min(3, z57));
+function heatColor(z58) {
+  const clamped = Math.max(-3, Math.min(3, z58));
   const abs = Math.abs(clamped);
   const lightness = 95 - abs * 8;
   const hue = clamped >= 0 ? 142 : 0;
   return `hsl(${hue} 60% ${lightness}%)`;
 }
-function heatTextColor(z57) {
-  const abs = Math.abs(z57);
-  if (abs > 2) return z57 >= 0 ? "#14532d" : "#7f1d1d";
-  if (abs > 1) return z57 >= 0 ? "#166534" : "#991b1b";
+function heatTextColor(z58) {
+  const abs = Math.abs(z58);
+  if (abs > 2) return z58 >= 0 ? "#14532d" : "#7f1d1d";
+  if (abs > 1) return z58 >= 0 ? "#166534" : "#991b1b";
   return "var(--foreground)";
 }
 var th2 = {
@@ -6481,7 +6704,7 @@ function WaterfallChartResolver(p) {
   ] }) });
 }
 init_ThemeContext();
-var FlowGraph2 = React33.lazy(
+var FlowGraph2 = React41.lazy(
   () => Promise.resolve().then(() => (init_FlowGraph(), FlowGraph_exports)).then((m) => ({ default: m.FlowGraph }))
 );
 function FlowCanvasRenderer({
@@ -6734,7 +6957,7 @@ function TrialBalanceResolver(p) {
         color: balanced ? "#15803d" : "#dc2626"
       }, children: balanced ? "\u2713 Balanced" : "\u2717 Unbalanced" })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["Code", "Account", "Debit", "Credit"].map((h, i) => /* @__PURE__ */ jsx("th", { style: {
         fontSize: "11px",
         fontWeight: 500,
@@ -6755,7 +6978,7 @@ function TrialBalanceResolver(p) {
             gDebit += a.debit;
             gCredit += a.credit;
           });
-          return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -6912,7 +7135,7 @@ function AgingReportResolver(p) {
         p.asOfDate
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: { fontSize: "11px", fontWeight: 500, color: MUTED2, padding: "8px 12px", textAlign: "left", borderBottom: `1px solid ${BORDER4}`, background: PAPER2, textTransform: "uppercase", letterSpacing: "0.02em" }, children: "Entity" }),
         buckets.map((b, i) => /* @__PURE__ */ jsx("th", { style: { fontSize: "11px", fontWeight: 500, color: MUTED2, padding: "8px 12px", textAlign: "right", borderBottom: `1px solid ${BORDER4}`, background: PAPER2, textTransform: "uppercase", letterSpacing: "0.02em", whiteSpace: "nowrap" }, children: b }, i)),
@@ -6969,7 +7192,7 @@ function VarianceAnalysisResolver(p) {
       p.title && /* @__PURE__ */ jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "15px", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.005em" }, children: p.title }),
       p.period && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: MUTED2 }, children: p.period })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "480px" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "480px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["Line Item", "Budget", "Actual", "Variance $", "Variance %", ""].map((h, i) => /* @__PURE__ */ jsx("th", { style: {
         fontSize: "11px",
         fontWeight: 500,
@@ -7087,6 +7310,8 @@ function StackedBreakdownResolver(p) {
                 alignItems: "center",
                 gap: "6px",
                 fontSize: "12px",
+                maxWidth: "100%",
+                minWidth: 0,
                 color: isVisible(cat.name) ? MUTED2 : "#b3b3b3",
                 cursor: "pointer",
                 userSelect: "none",
@@ -7098,12 +7323,13 @@ function StackedBreakdownResolver(p) {
                   width: "10px",
                   height: "10px",
                   borderRadius: "2px",
+                  flexShrink: 0,
                   background: (_a2 = cat.color) != null ? _a2 : PALETTE2[ci % PALETTE2.length],
                   display: "inline-block",
                   opacity: isVisible(cat.name) ? 1 : 0.3,
                   transition: "opacity 0.15s"
                 } }),
-                cat.name
+                /* @__PURE__ */ jsx("span", { style: TRUNCATE, title: cat.name, children: cat.name })
               ]
             },
             cat.name
@@ -7125,7 +7351,7 @@ function StackedBreakdownResolver(p) {
                 ((_b2 = p.periods) != null ? _b2 : []).map((_, pi) => {
                   var _a3, _b3;
                   const v = pi < ((_a3 = cat.values) != null ? _a3 : []).length ? ((_b3 = cat.values) != null ? _b3 : [])[pi] : 0;
-                  return /* @__PURE__ */ jsx("td", { style: { padding: "6px 12px", fontSize: "13px", textAlign: "right", fontVariantNumeric: "tabular-nums", borderBottom: `1px solid #f2f2f2`, color: v < 0 ? "#dc2626" : void 0 }, children: v < 0 ? `(${fmt5(Math.abs(v), p.currency)})` : fmt5(v, p.currency) }, pi);
+                  return /* @__PURE__ */ jsx("td", { style: { padding: "6px 12px", fontSize: "13px", textAlign: "right", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap", borderBottom: `1px solid #f2f2f2`, color: v < 0 ? "#dc2626" : void 0 }, children: v < 0 ? `(${fmt5(Math.abs(v), p.currency)})` : fmt5(v, p.currency) }, pi);
                 })
               ] }, cat.name);
             }),
@@ -7498,7 +7724,7 @@ function ReconciliationViewResolver(p) {
           {
             style: {
               display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))",
+              gridTemplateColumns: "repeat(auto-fit, minmax(min(120px, 100%), 1fr))",
               gap: "0",
               marginBottom: "14px",
               borderRadius: "10px",
@@ -7506,31 +7732,28 @@ function ReconciliationViewResolver(p) {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", background: PAPER2 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", background: PAPER2, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    style: {
+                    style: __spreadValues({
                       fontSize: "10px",
                       fontWeight: 500,
                       color: MUTED2,
                       textTransform: "uppercase",
                       letterSpacing: "0.04em",
                       marginBottom: "4px"
-                    },
+                    }, TRUNCATE),
                     children: sourceA.label
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "div",
+                  FitText,
                   {
-                    style: {
-                      fontSize: "15px",
-                      fontWeight: 600,
-                      color: "var(--foreground)",
-                      fontVariantNumeric: "tabular-nums",
-                      letterSpacing: "-0.01em"
-                    },
+                    max: 15,
+                    min: 11,
+                    title: fmt6(balanceA, p.currency),
+                    style: { fontWeight: 600, color: "var(--foreground)", fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                     children: fmt6(balanceA, p.currency)
                   }
                 )
@@ -7542,33 +7765,31 @@ function ReconciliationViewResolver(p) {
                     padding: "10px 12px",
                     background: PAPER2,
                     borderLeft: `1px solid ${BORDER4}`,
-                    borderRight: `1px solid ${BORDER4}`
+                    borderRight: `1px solid ${BORDER4}`,
+                    minWidth: 0
                   },
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",
                       {
-                        style: {
+                        style: __spreadValues({
                           fontSize: "10px",
                           fontWeight: 500,
                           color: MUTED2,
                           textTransform: "uppercase",
                           letterSpacing: "0.04em",
                           marginBottom: "4px"
-                        },
+                        }, TRUNCATE),
                         children: sourceB.label
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      "div",
+                      FitText,
                       {
-                        style: {
-                          fontSize: "15px",
-                          fontWeight: 600,
-                          color: "var(--foreground)",
-                          fontVariantNumeric: "tabular-nums",
-                          letterSpacing: "-0.01em"
-                        },
+                        max: 15,
+                        min: 11,
+                        title: fmt6(balanceB, p.currency),
+                        style: { fontWeight: 600, color: "var(--foreground)", fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                         children: fmt6(balanceB, p.currency)
                       }
                     )
@@ -7580,7 +7801,8 @@ function ReconciliationViewResolver(p) {
                 {
                   style: {
                     padding: "10px 12px",
-                    background: difference === 0 ? "#f0fdf4" : "#fef2f2"
+                    background: difference === 0 ? "#f0fdf4" : "#fef2f2",
+                    minWidth: 0
                   },
                   children: [
                     /* @__PURE__ */ jsxs(
@@ -7620,15 +7842,12 @@ function ReconciliationViewResolver(p) {
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      "div",
+                      FitText,
                       {
-                        style: {
-                          fontSize: "15px",
-                          fontWeight: 700,
-                          color: difference === 0 ? MATCH_GREEN : DIFF_RED,
-                          fontVariantNumeric: "tabular-nums",
-                          letterSpacing: "-0.01em"
-                        },
+                        max: 15,
+                        min: 11,
+                        title: fmt6(difference, p.currency),
+                        style: { fontWeight: 700, color: difference === 0 ? MATCH_GREEN : DIFF_RED, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                         children: fmt6(difference, p.currency)
                       }
                     )
@@ -8145,10 +8364,10 @@ function useFullscreen(ref) {
 // src/composites/document-preview/resolver.tsx
 init_theme();
 init_ThemeContext();
-var PdfViewer2 = React33.lazy(
+var PdfViewer2 = React41.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer2 = React33.lazy(
+var ExcelViewer2 = React41.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
 var highlightColors = {
@@ -9104,7 +9323,7 @@ function EngagementPipelineResolver(p) {
             const color = (_a2 = statusColor2[phase.status]) != null ? _a2 : "#d6d3d1";
             const isCurrent = i === activeIdx;
             const size = isCurrent ? 28 : 20;
-            return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -9432,7 +9651,7 @@ function EntityCardGridResolver(p) {
       {
         style: {
           display: "grid",
-          gridTemplateColumns: `repeat(auto-fit, minmax(220px, 1fr))`,
+          gridTemplateColumns: `repeat(auto-fit, minmax(min(220px, 100%), 1fr))`,
           gap: "12px",
           width: "100%"
         },
@@ -9523,7 +9742,7 @@ function EntityCardGridResolver(p) {
                   {
                     style: {
                       display: "grid",
-                      gridTemplateColumns: item.fields.length > 2 ? "repeat(auto-fit, minmax(90px, 1fr))" : "1fr",
+                      gridTemplateColumns: item.fields.length > 2 ? "repeat(auto-fit, minmax(min(90px, 100%), 1fr))" : "1fr",
                       gap: "6px 12px",
                       borderTop: `1px solid ${BORDER4}`,
                       paddingTop: "8px"
@@ -11267,7 +11486,7 @@ function FileCard({
                       whiteSpace: "nowrap"
                     },
                     children: [
-                      metaTokens.map((t, i) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+                      metaTokens.map((t, i) => /* @__PURE__ */ jsxs(React41.Fragment, { children: [
                         i > 0 && /* @__PURE__ */ jsx("span", { style: { color: "#c4c4c4" }, children: "\xB7" }),
                         /* @__PURE__ */ jsx("span", { children: t })
                       ] }, i)),
@@ -11751,9 +11970,9 @@ function ValueCell({ item }) {
         )
       ] });
     case "currency":
-      return /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, fontVariantNumeric: "tabular-nums", marginLeft: "auto" }, children: item.value });
+      return /* @__PURE__ */ jsx("span", { title: item.value, style: __spreadValues({ fontSize: "13px", fontWeight: 600, fontVariantNumeric: "tabular-nums", marginLeft: "auto" }, TRUNCATE), children: item.value });
     default:
-      return /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--foreground)" }, children: /* @__PURE__ */ jsx(Markdown, { inline: true, content: item.value }) });
+      return /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--foreground)", minWidth: 0, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx(Markdown, { inline: true, content: item.value }) });
   }
 }
 function KVRow({ item, isLast, index }) {
@@ -11786,7 +12005,7 @@ function KVRow({ item, isLast, index }) {
             children: item.key
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: { flex: 1, display: "flex", alignItems: "center", gap: "6px" }, children: /* @__PURE__ */ jsx(ValueCell, { item }) }),
+        /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "6px" }, children: /* @__PURE__ */ jsx(ValueCell, { item }) }),
         item.copyable && /* @__PURE__ */ jsx(CopyButton, { value: item.value, rowHovered: hovered })
       ]
     }
@@ -11842,7 +12061,7 @@ function KeyValueListResolver(p) {
               var _a3;
               return sum + ((_a3 = g.items) != null ? _a3 : []).length;
             }, 0);
-            return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -11978,7 +12197,7 @@ function BalanceSheetResolver(p) {
         color: balanced ? "#15803d" : "#dc2626"
       }, children: balanced ? "\u2713 A = L + E" : "\u2717 Out of Balance" })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: {
           fontSize: "11px",
@@ -12020,7 +12239,7 @@ function BalanceSheetResolver(p) {
       /* @__PURE__ */ jsxs("tbody", { children: [
         ((_p = p.sections) != null ? _p : []).map((section) => {
           var _a2;
-          return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12033,7 +12252,7 @@ function BalanceSheetResolver(p) {
             }, children: (_a2 = categoryLabels2[section.category]) != null ? _a2 : section.category }) }),
             section.subsections.map((sub, si) => {
               var _a3;
-              return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
                 /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, style: {
                   padding: "6px 10px 6px 24px",
                   fontSize: "12px",
@@ -12195,7 +12414,7 @@ function IncomeStatementResolver(p) {
       ].filter(Boolean).join(" \xB7 ") })
     ] }),
     p.title && /* @__PURE__ */ jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "15px", fontWeight: 400, color: "var(--foreground)", letterSpacing: "-0.01em", margin: 0 }, children: p.title }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: {
           fontSize: "11px",
@@ -12209,7 +12428,7 @@ function IncomeStatementResolver(p) {
           textAlign: "left",
           whiteSpace: "nowrap"
         }, children: "\xA0" }),
-        periods.map((period) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+        periods.map((period) => /* @__PURE__ */ jsxs(React41.Fragment, { children: [
           /* @__PURE__ */ jsx("th", { style: {
             fontSize: "11px",
             fontWeight: 500,
@@ -12240,7 +12459,7 @@ function IncomeStatementResolver(p) {
         sections.map((section, si) => {
           var _a2;
           const isSubtotal = section.sectionType === "subtotal";
-          return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12271,7 +12490,7 @@ function IncomeStatementResolver(p) {
                   var _a4;
                   const val = (_a4 = amounts[pi]) != null ? _a4 : 0;
                   const isNeg = val < 0;
-                  return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
                     /* @__PURE__ */ jsx("td", { style: {
                       padding: "6px 10px",
                       fontSize: "13px",
@@ -12306,7 +12525,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = grossProfit[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12341,7 +12560,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = operatingIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12375,7 +12594,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = netIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "10px 10px",
                 fontSize: "13px",
@@ -12595,7 +12814,7 @@ function CashFlowStatementResolver(p) {
                       /* @__PURE__ */ jsxs("tbody", { children: [
                         activities.map((activity, ai) => {
                           var _a2, _b2, _c2;
-                          return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+                          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
                             ai > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                               "td",
                               {
@@ -12978,6 +13197,7 @@ function GeneralLedgerResolver(p) {
           {
             style: {
               overflowX: "auto",
+              minWidth: 0,
               borderRadius: "0.75rem",
               border: `1px solid ${BORDER4}`,
               boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)"
@@ -16892,6 +17112,726 @@ function PipelinePreviewResolver(p) {
     )
   ] }) });
 }
+init_ThemeContext();
+var DEFAULT_INTERACTION = {
+  selectedStepId: null,
+  onStepSelect: void 0
+};
+var GenUIInteractionContext = createContext(DEFAULT_INTERACTION);
+function useGenUIInteraction() {
+  return useContext(GenUIInteractionContext);
+}
+var STATUS_COLORS3 = {
+  done: "#15803d",
+  active: "",
+  // filled from theme ACCENT at render time
+  review: "#f59e0b",
+  pending: "#9ca3af",
+  failed: "#dc2626"
+};
+var STATUS_LABELS = {
+  done: "Complete",
+  active: "In progress",
+  review: "In review",
+  pending: "Pending",
+  failed: "Failed"
+};
+var HUMAN_PALETTE = ["#2563eb", "#0f766e", "#7c3aed", "#b45309", "#be185d", "#4d7c0f"];
+function hashColor(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) | 0;
+  return HUMAN_PALETTE[Math.abs(h) % HUMAN_PALETTE.length];
+}
+function initialsOf(a) {
+  var _a, _b, _c, _d;
+  if (a.initials) return a.initials.slice(0, 2).toUpperCase();
+  const parts = a.name.trim().split(/\s+/);
+  return (((_b = (_a = parts[0]) == null ? void 0 : _a[0]) != null ? _b : "") + ((_d = (_c = parts[1]) == null ? void 0 : _c[0]) != null ? _d : "")).toUpperCase() || "?";
+}
+function SparkMark({ 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: "M12 2C12 2 12.8 6.5 14.5 9.5C16.2 12.5 20 13 20 13C20 13 16.2 13.5 14.5 16.5C12.8 19.5 12 24 12 24C12 24 11.2 19.5 9.5 16.5C7.8 13.5 4 13 4 13C4 13 7.8 12.5 9.5 9.5C11.2 6.5 12 2 12 2Z",
+      fill: color
+    }
+  ) });
+}
+function AvatarStack({ assignees, accent }) {
+  const shown = assignees.slice(0, 4);
+  const overflow = assignees.length - shown.length;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+    shown.map((a, i) => {
+      const isAgent = a.kind === "agent";
+      const bg = isAgent ? `${accent}1f` : a.color || hashColor(a.name);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          title: `${a.name}${a.role ? ` \xB7 ${a.role}` : isAgent ? " \xB7 agent" : ""}`,
+          style: {
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            flexShrink: 0,
+            marginLeft: i === 0 ? 0 : -7,
+            zIndex: shown.length - i,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: bg,
+            border: "1.5px solid white",
+            boxShadow: isAgent ? `inset 0 0 0 1px ${accent}59` : "none"
+          },
+          children: isAgent ? /* @__PURE__ */ jsx(SparkMark, { size: 11, color: accent }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 8, fontWeight: 700, color: "white", letterSpacing: "0.02em" }, children: initialsOf(a) })
+        },
+        `${a.name}-${i}`
+      );
+    }),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: {
+          marginLeft: -7,
+          zIndex: 0,
+          width: 20,
+          height: 20,
+          borderRadius: "50%",
+          background: "#f2f2f2",
+          border: "1.5px solid white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 8,
+          fontWeight: 700,
+          color: "#777777"
+        },
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+function IndexDot({ step, index, accent }) {
+  var _a;
+  const n = (_a = step.n) != null ? _a : index + 1;
+  const base = {
+    width: 18,
+    height: 18,
+    borderRadius: "50%",
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 10,
+    fontWeight: 700,
+    lineHeight: 1
+  };
+  if (step.status === "done") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#15803d", color: "white" }), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10 }, children: "\u2713" }) });
+  }
+  if (step.status === "failed") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#dc2626", color: "white" }), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10 }, children: "!" }) });
+  }
+  if (step.status === "active") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: accent, color: "white" }), children: n });
+  }
+  if (step.status === "review") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "white", border: "1.5px solid #f59e0b", color: "#b45309" }), children: n });
+  }
+  return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#f2f2f2", color: "#9ca3af" }), children: n });
+}
+var CARD_MIN = 132;
+var CARD_GAP = 16;
+var AUTO_COMPACT_BELOW = 360;
+function useContainerWidth(ref) {
+  const [w, setW] = React41.useState(0);
+  React41.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      var _a;
+      const cr = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+      if (cr) setW(cr.width);
+    });
+    ro.observe(el);
+    setW(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, [ref]);
+  return w;
+}
+var KEYFRAMES = `
+@keyframes wfsPulse{0%,100%{opacity:1}50%{opacity:.35}}
+@keyframes wfsLampPulse{0%,100%{box-shadow:0 0 0 0 var(--wfs-accent,#6366f1)73}50%{box-shadow:0 0 0 4px transparent}}
+@keyframes wfsRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes wfsShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
+.wfs-rise{animation:wfsRise 0.32s cubic-bezier(0.22,1,0.36,1) both}
+@media (prefers-reduced-motion: reduce){
+  .wfs-anim,.wfs-rise,.wfs-shim{animation:none !important}
+  .wfs-rise{opacity:1 !important;transform:none !important}
+}`;
+function ProgressMeter({
+  done,
+  total,
+  accent,
+  muted,
+  loading
+}) {
+  const pct = total > 0 ? Math.round(done / total * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "workflow-stepper-progress",
+      style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px 6px" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 10.5,
+              fontWeight: 600,
+              color: muted,
+              fontVariantNumeric: "tabular-nums",
+              letterSpacing: "0.01em",
+              whiteSpace: "nowrap"
+            },
+            children: loading ? "\u2014" : `${done} / ${total} \xB7 ${pct}%`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              height: 3,
+              borderRadius: 3,
+              background: "#eceff4",
+              overflow: "hidden",
+              minWidth: 40
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: loading ? "wfs-shim" : void 0,
+                style: {
+                  display: "block",
+                  height: "100%",
+                  width: loading ? "100%" : `${pct}%`,
+                  borderRadius: 3,
+                  background: loading ? `linear-gradient(90deg, #eceff4, ${accent}55, #eceff4)` : accent,
+                  backgroundSize: loading ? "200px 100%" : void 0,
+                  animation: loading ? "wfsShimmer 1.1s linear infinite" : void 0,
+                  transition: "width 0.45s cubic-bezier(0.22,1,0.36,1)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkflowStepperRenderer({
+  data,
+  selectedStep = null,
+  onSelectStep,
+  density = "auto",
+  loading = false,
+  loadingSteps = 6,
+  showProgress = true
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
+  const steps = (_a = data.steps) != null ? _a : [];
+  const activeStepId = (_d = (_c = data.active_step) != null ? _c : (_b = steps.find((s) => s.status === "active")) == null ? void 0 : _b.id) != null ? _d : null;
+  const interactive = typeof onSelectStep === "function";
+  const statusColor3 = (s) => s === "active" ? ACCENT2 : STATUS_COLORS3[s];
+  const doneCount = steps.filter((s) => s.status === "done").length;
+  const rootRef = React41.useRef(null);
+  const containerW = useContainerWidth(rootRef);
+  let resolved = density === "auto" ? "full" : density;
+  if (density === "auto" && containerW > 0) {
+    const needed = steps.length * CARD_MIN + Math.max(0, steps.length - 1) * CARD_GAP;
+    resolved = containerW < AUTO_COMPACT_BELOW || needed > containerW * 1.6 ? "compact" : "full";
+  }
+  const scrollerRef = React41.useRef(null);
+  React41.useEffect(() => {
+    if (resolved !== "full" || loading) return;
+    const sc = scrollerRef.current;
+    if (!sc) return;
+    const el = sc.querySelector(
+      `[data-testid="workflow-stepper-step-${selectedStep != null ? selectedStep : activeStepId}"]`
+    );
+    if (el && sc.scrollWidth > sc.clientWidth) {
+      el.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+    }
+  }, [resolved, loading, selectedStep, activeStepId]);
+  const [edges, setEdges] = React41.useState({
+    left: false,
+    right: false
+  });
+  const updateEdges = React41.useCallback(() => {
+    const sc = scrollerRef.current;
+    if (!sc) return;
+    const max = sc.scrollWidth - sc.clientWidth;
+    const sl = sc.scrollLeft;
+    const left = sl > 1;
+    const right = sl < max - 1;
+    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+  }, []);
+  React41.useLayoutEffect(() => {
+    if (resolved !== "full" || loading) return;
+    updateEdges();
+    const sc = scrollerRef.current;
+    if (!sc || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(updateEdges);
+    ro.observe(sc);
+    return () => ro.disconnect();
+  }, [resolved, loading, steps.length, updateEdges]);
+  const edgeMask = edges.left || edges.right ? `linear-gradient(90deg, ${edges.left ? "transparent 0, #000 14px" : "#000 0"}, ${edges.right ? "#000 calc(100% - 14px), transparent 100%" : "#000 100%"})` : void 0;
+  const themeStyle = { ["--wfs-accent"]: ACCENT2 };
+  if (loading) {
+    const ghosts = Array.from({ length: Math.max(2, loadingSteps) });
+    return /* @__PURE__ */ jsxs("div", { "data-testid": "workflow-stepper-loading", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+      /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+      showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: 0, total: 0, accent: ACCENT2, muted: MUTED2, loading: true }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "stretch", gap: CARD_GAP, padding: "2px 2px 6px", overflow: "hidden" }, children: ghosts.map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "wfs-shim",
+          "aria-hidden": "true",
+          style: {
+            flex: "0 1 168px",
+            minWidth: CARD_MIN,
+            height: 84,
+            borderRadius: 10,
+            border: `1px solid ${BORDER4}`,
+            background: `linear-gradient(90deg, #f4f6f9, #eceff4 40%, #f4f6f9 80%)`,
+            backgroundSize: "200px 100%",
+            animation: "wfsShimmer 1.1s linear infinite",
+            animationDelay: `${i * 0.08}s`
+          }
+        },
+        i
+      )) })
+    ] });
+  }
+  if (resolved === "compact") {
+    const activeStep = (_e = steps.find((s) => s.id === activeStepId)) != null ? _e : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        "data-testid": "workflow-stepper-compact",
+        style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle),
+        children: [
+          /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+          showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: steps.map((s, i) => {
+              const sel = selectedStep === s.id;
+              const act = s.status === "active";
+              const done = s.status === "done";
+              const reached = s.status !== "pending";
+              const clickable = interactive && reached;
+              const size = act ? 11 : done ? 9 : 8;
+              return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+                i > 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 14,
+                      height: 1.5,
+                      borderRadius: 1,
+                      background: steps[i - 1].status === "done" ? "#15803d" : "#e5e7eb",
+                      transition: "background 0.36s ease-out"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: interactive && !reached,
+                    "aria-disabled": interactive && !reached ? true : void 0,
+                    title: `${s.title} \xB7 ${STATUS_LABELS[s.status]}`,
+                    onClick: clickable ? () => onSelectStep == null ? void 0 : onSelectStep(sel ? null : s.id) : void 0,
+                    "data-testid": `workflow-stepper-step-${s.id}`,
+                    "data-status": s.status,
+                    "data-reached": reached || void 0,
+                    className: act ? "wfs-anim" : void 0,
+                    style: {
+                      position: "relative",
+                      width: size,
+                      height: size,
+                      padding: 0,
+                      borderRadius: "50%",
+                      background: statusColor3(s.status),
+                      flexShrink: 0,
+                      // border-box so the selected 2px border can't grow the dot
+                      // and reflow the rail.
+                      boxSizing: "border-box",
+                      opacity: reached ? 1 : 0.55,
+                      border: sel ? `2px solid ${ACCENT2}` : done ? "none" : "1px solid rgba(255,255,255,0.6)",
+                      boxShadow: sel ? "0 0 0 2px #fff" : "none",
+                      cursor: clickable ? "pointer" : "default",
+                      transition: "width 0.15s, height 0.15s",
+                      animation: act ? "wfsLampPulse 1.8s ease-in-out infinite" : "none"
+                    }
+                  }
+                )
+              ] }, s.id);
+            }) }),
+            activeStep && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 1, height: 16, background: "#e6eaf1", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 7, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 17,
+                      height: 17,
+                      borderRadius: "50%",
+                      flexShrink: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 9.5,
+                      fontWeight: 700,
+                      lineHeight: 1,
+                      background: activeStep.status === "done" ? "#15803d" : activeStep.status === "review" ? "#fff" : activeStep.status === "failed" ? "#dc2626" : ACCENT2,
+                      color: activeStep.status === "review" ? "#b45309" : "#fff",
+                      border: activeStep.status === "review" ? "1.5px solid #f59e0b" : "none"
+                    },
+                    children: activeStep.status === "done" ? "\u2713" : activeStep.status === "failed" ? "!" : (_f = activeStep.n) != null ? _f : steps.findIndex((x) => x.id === activeStep.id) + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12.5,
+                      fontWeight: 650,
+                      color: "var(--foreground)",
+                      letterSpacing: "-0.01em",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      minWidth: 0
+                    },
+                    children: [
+                      activeStep.title,
+                      activeStep.sub ? /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: MUTED2 }, children: [
+                        " \xB7 ",
+                        activeStep.sub
+                      ] }) : null
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-testid": "workflow-stepper", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+    /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+    showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollerRef,
+        className: "wfs-scroller",
+        onScroll: updateEdges,
+        style: {
+          display: "flex",
+          alignItems: "stretch",
+          overflowX: "auto",
+          scrollSnapType: "x proximity",
+          padding: "2px 2px 4px",
+          // Thin, always-styled scrollbar (Firefox + Windows/desktop WebKit
+          // where overlay scrollbars aren't available). macOS/mobile show
+          // overlay scrollbars on scroll; harmless either way.
+          scrollbarWidth: "thin",
+          scrollbarColor: "#c2c9d6 transparent",
+          // Edge fade ONLY on the side(s) with hidden content — never when the
+          // row isn't scrollable, so the last card's right edge stays crisp.
+          maskImage: edgeMask,
+          WebkitMaskImage: edgeMask
+        },
+        children: [
+          /* @__PURE__ */ jsx("style", { children: `
+          .wfs-scroller::-webkit-scrollbar{height:8px}
+          .wfs-scroller::-webkit-scrollbar-track{background:transparent}
+          .wfs-scroller::-webkit-scrollbar-thumb{background:#c2c9d6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
+          .wfs-scroller:hover::-webkit-scrollbar-thumb{background:#aab2c2;background-clip:padding-box}
+        ` }),
+          steps.map((step, i) => {
+            var _a2;
+            const isSelected = selectedStep === step.id;
+            const isActive = step.status === "active";
+            const reached = step.status !== "pending";
+            const clickable = interactive && reached;
+            const color = statusColor3(step.status);
+            const humans = ((_a2 = step.assignees) != null ? _a2 : []).filter((a) => a.kind === "human");
+            const roleCaption = humans.map((h) => h.role).filter(Boolean).slice(0, 2).join(" \xB7 ");
+            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: CARD_GAP,
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        height: 1.5,
+                        borderRadius: 1,
+                        // Fill sweep: completed rails wash green left→right.
+                        background: steps[i - 1].status === "done" ? "linear-gradient(90deg, #15803d, #15803d)" : "#e5e7eb",
+                        backgroundSize: "100% 100%",
+                        transition: "background 0.36s ease-out"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: clickable ? "button" : void 0,
+                  tabIndex: clickable ? 0 : void 0,
+                  "aria-disabled": interactive && !reached ? true : void 0,
+                  className: "wfs-rise",
+                  "data-testid": `workflow-stepper-step-${step.id}`,
+                  "data-status": step.status,
+                  "data-selected": isSelected || void 0,
+                  "data-reached": reached || void 0,
+                  onClick: clickable ? () => onSelectStep == null ? void 0 : onSelectStep(isSelected ? null : step.id) : void 0,
+                  onKeyDown: clickable ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      onSelectStep == null ? void 0 : onSelectStep(isSelected ? null : step.id);
+                    }
+                  } : void 0,
+                  onMouseEnter: clickable ? (e) => {
+                    e.currentTarget.style.transform = "translateY(-1px)";
+                    e.currentTarget.style.boxShadow = "0 3px 10px rgba(15,23,42,0.08)";
+                  } : void 0,
+                  onMouseLeave: clickable ? (e) => {
+                    e.currentTarget.style.transform = "none";
+                    e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.04)";
+                  } : void 0,
+                  style: {
+                    position: "relative",
+                    flex: "0 1 168px",
+                    minWidth: CARD_MIN,
+                    maxWidth: 208,
+                    scrollSnapAlign: "center",
+                    borderRadius: 10,
+                    boxSizing: "border-box",
+                    // Selection changes border COLOR only (constant 1px width) so
+                    // the card never reflows the row on click.
+                    border: `1px solid ${isSelected ? ACCENT2 : BORDER4}`,
+                    background: isSelected ? `${ACCENT2}0d` : "white",
+                    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+                    padding: "10px 11px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 7,
+                    cursor: clickable ? "pointer" : "default",
+                    opacity: reached ? 1 : 0.62,
+                    transition: "border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.12s",
+                    animationDelay: `${Math.min(i, 10) * 0.04}s`,
+                    overflow: "hidden"
+                  },
+                  children: [
+                    isActive && !isSelected && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          position: "absolute",
+                          left: 0,
+                          top: 6,
+                          bottom: 6,
+                          width: 2,
+                          borderRadius: 2,
+                          background: ACCENT2
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ jsx(IndexDot, { step, index: i, accent: ACCENT2 }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: isActive ? "wfs-anim" : void 0,
+                            style: {
+                              width: 6,
+                              height: 6,
+                              borderRadius: "50%",
+                              background: color,
+                              animation: isActive ? "wfsLampPulse 1.8s ease-in-out infinite" : "none"
+                            }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 9,
+                            fontWeight: 600,
+                            letterSpacing: "0.05em",
+                            textTransform: "uppercase",
+                            color
+                          },
+                          children: STATUS_LABELS[step.status]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 12.5,
+                            fontWeight: 600,
+                            color: "var(--foreground)",
+                            lineHeight: 1.25,
+                            letterSpacing: "-0.01em",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: step.title
+                        }
+                      ),
+                      step.sub && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 10.5,
+                            color: MUTED2,
+                            marginTop: 2,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: step.sub
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginTop: "auto",
+                          minHeight: 20
+                        },
+                        children: [
+                          step.assignees && step.assignees.length > 0 ? /* @__PURE__ */ jsx(AvatarStack, { assignees: step.assignees, accent: ACCENT2 }) : /* @__PURE__ */ jsx("span", {}),
+                          roleCaption && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 9,
+                                color: "#9ca3af",
+                                fontWeight: 500,
+                                textAlign: "right",
+                                maxWidth: 76,
+                                lineHeight: 1.2,
+                                overflow: "hidden"
+                              },
+                              children: roleCaption
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, step.id);
+          })
+        ]
+      }
+    )
+  ] });
+}
+function WorkflowStepperResolver(p) {
+  var _a;
+  const { selectedStepId, onStepSelect } = useGenUIInteraction();
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "workflow-stepper", children: /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontFamily: "var(--font-serif)",
+            fontSize: "15px",
+            fontWeight: 400,
+            color: "var(--foreground)",
+            letterSpacing: "-0.01em",
+            margin: 0
+          },
+          children: p.title
+        }
+      ),
+      p.period && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 9999,
+            background: "#f2f2f2",
+            color: "#777777",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: p.period
+        }
+      ),
+      p.badge && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 9999,
+            border: "1px solid #dedede",
+            color: "#777777"
+          },
+          children: p.badge
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      WorkflowStepperRenderer,
+      {
+        data: p,
+        selectedStep: selectedStepId,
+        onSelectStep: onStepSelect
+      }
+    )
+  ] }) });
+}
 function resolveUI(rawPayload) {
   const payload = coercePayload(rawPayload);
   switch (payload.type) {
@@ -17007,6 +17947,8 @@ function resolveUI(rawPayload) {
       return /* @__PURE__ */ jsx(IntegrationsListResolver, __spreadValues({}, payload));
     case "pipeline-preview":
       return /* @__PURE__ */ jsx(PipelinePreviewResolver, __spreadValues({}, payload));
+    case "workflow-stepper":
+      return /* @__PURE__ */ jsx(WorkflowStepperResolver, __spreadValues({}, payload));
     default: {
       return /* @__PURE__ */ jsx(
         "div",