@contractspec/example.workflow-system 3.7.7 → 3.8.2

package/dist/index.js

@@ -716,9 +716,19 @@ function rowToApproval(row) {
   };
 }
 function createWorkflowHandlers(db) {
+  function normalizeSql(sql) {
+    let placeholderIndex = 0;
+    return sql.replace(/\?/g, () => `$${++placeholderIndex}`);
+  }
+  async function queryRows(sql, params = []) {
+    return (await db.query(normalizeSql(sql), params)).rows;
+  }
+  async function execute(sql, params = []) {
+    await db.execute(normalizeSql(sql), params);
+  }
   async function listDefinitions(input) {
     const { projectId, status, search, limit = 20, offset = 0 } = input;
-    let whereClause = "WHERE projectId = ?";
+    let whereClause = 'WHERE "projectId" = ?';
     const params = [projectId];
     if (status && status !== "all") {
       whereClause += " AND status = ?";
@@ -728,9 +738,9 @@ function createWorkflowHandlers(db) {
       whereClause += " AND name LIKE ?";
       params.push(`%${search}%`);
     }
-    const countResult = (await db.query(`SELECT COUNT(*) as count FROM workflow_definition ${whereClause}`, params)).rows;
+    const countResult = await queryRows(`SELECT COUNT(*) as count FROM workflow_definition ${whereClause}`, params);
     const total = countResult[0]?.count ?? 0;
-    const rows = (await db.query(`SELECT * FROM workflow_definition ${whereClause} ORDER BY updatedAt DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_definition ${whereClause} ORDER BY "updatedAt" DESC LIMIT ? OFFSET ?`, [...params, limit, offset]);
     return {
       definitions: rows.map(rowToDefinition),
       total
@@ -739,7 +749,7 @@ function createWorkflowHandlers(db) {
   async function createDefinition(input, context) {
     const id = generateId("wfdef");
     const now = new Date().toISOString();
-    await db.execute(`INSERT INTO workflow_definition (id, projectId, organizationId, name, description, type, status, createdAt, updatedAt)
+    await execute(`INSERT INTO workflow_definition (id, "projectId", "organizationId", name, description, type, status, "createdAt", "updatedAt")
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
       id,
       context.projectId,
@@ -751,15 +761,15 @@ function createWorkflowHandlers(db) {
       now,
       now
     ]);
-    const rows = (await db.query(`SELECT * FROM workflow_definition WHERE id = ?`, [id])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_definition WHERE id = ?`, [id]);
     return rowToDefinition(rows[0]);
   }
   async function addStep(input) {
     const id = generateId("wfstep");
     const now = new Date().toISOString();
-    const maxOrderResult = (await db.query(`SELECT MAX(stepOrder) as maxOrder FROM workflow_step WHERE definitionId = ?`, [input.definitionId])).rows;
+    const maxOrderResult = await queryRows(`SELECT MAX("stepOrder") as maxOrder FROM workflow_step WHERE "definitionId" = ?`, [input.definitionId]);
     const nextOrder = (maxOrderResult[0]?.maxOrder ?? 0) + 1;
-    await db.execute(`INSERT INTO workflow_step (id, definitionId, name, description, stepOrder, type, requiredRoles, autoApproveCondition, timeoutHours, createdAt)
+    await execute(`INSERT INTO workflow_step (id, "definitionId", name, description, "stepOrder", type, "requiredRoles", "autoApproveCondition", "timeoutHours", "createdAt")
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
       id,
       input.definitionId,
@@ -772,11 +782,11 @@ function createWorkflowHandlers(db) {
       input.timeoutHours ?? null,
       now
     ]);
-    const rows = (await db.query(`SELECT * FROM workflow_step WHERE id = ?`, [id])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_step WHERE id = ?`, [id]);
     return rowToStep(rows[0]);
   }
   async function getSteps(definitionId) {
-    const rows = (await db.query(`SELECT * FROM workflow_step WHERE definitionId = ? ORDER BY stepOrder`, [definitionId])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_step WHERE "definitionId" = ? ORDER BY "stepOrder"`, [definitionId]);
     return rows.map(rowToStep);
   }
   async function listInstances(input) {
@@ -788,10 +798,10 @@ function createWorkflowHandlers(db) {
       limit = 20,
       offset = 0
     } = input;
-    let whereClause = "WHERE projectId = ?";
+    let whereClause = 'WHERE "projectId" = ?';
     const params = [projectId];
     if (definitionId) {
-      whereClause += " AND definitionId = ?";
+      whereClause += ' AND "definitionId" = ?';
       params.push(definitionId);
     }
     if (status && status !== "all") {
@@ -799,12 +809,12 @@ function createWorkflowHandlers(db) {
       params.push(status);
     }
     if (requestedBy) {
-      whereClause += " AND requestedBy = ?";
+      whereClause += ' AND "requestedBy" = ?';
       params.push(requestedBy);
     }
-    const countResult = (await db.query(`SELECT COUNT(*) as count FROM workflow_instance ${whereClause}`, params)).rows;
+    const countResult = await queryRows(`SELECT COUNT(*) as count FROM workflow_instance ${whereClause}`, params);
     const total = countResult[0]?.count ?? 0;
-    const rows = (await db.query(`SELECT * FROM workflow_instance ${whereClause} ORDER BY startedAt DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_instance ${whereClause} ORDER BY "startedAt" DESC LIMIT ? OFFSET ?`, [...params, limit, offset]);
     return {
       instances: rows.map(rowToInstance),
       total
@@ -813,9 +823,9 @@ function createWorkflowHandlers(db) {
   async function startInstance(input, context) {
     const id = generateId("wfinst");
     const now = new Date().toISOString();
-    const steps = (await db.query(`SELECT * FROM workflow_step WHERE definitionId = ? ORDER BY stepOrder LIMIT 1`, [input.definitionId])).rows;
+    const steps = await queryRows(`SELECT * FROM workflow_step WHERE "definitionId" = ? ORDER BY "stepOrder" LIMIT 1`, [input.definitionId]);
     const firstStepId = steps[0]?.id ?? null;
-    await db.execute(`INSERT INTO workflow_instance (id, projectId, definitionId, status, currentStepId, data, requestedBy, startedAt)
+    await execute(`INSERT INTO workflow_instance (id, "projectId", "definitionId", status, "currentStepId", data, "requestedBy", "startedAt")
        VALUES (?, ?, ?, ?, ?, ?, ?, ?)`, [
       id,
       context.projectId,
@@ -827,36 +837,32 @@ function createWorkflowHandlers(db) {
       now
     ]);
     if (firstStepId) {
-      await db.execute(`INSERT INTO workflow_approval (id, instanceId, stepId, status, createdAt)
+      await execute(`INSERT INTO workflow_approval (id, "instanceId", "stepId", status, "createdAt")
          VALUES (?, ?, ?, ?, ?)`, [generateId("wfappr"), id, firstStepId, "PENDING", now]);
     }
-    const rows = (await db.query(`SELECT * FROM workflow_instance WHERE id = ?`, [id])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_instance WHERE id = ?`, [id]);
     return rowToInstance(rows[0]);
   }
   async function approveStep(input, context) {
     const now = new Date().toISOString();
-    const instances = (await db.query(`SELECT * FROM workflow_instance WHERE id = ?`, [
-      input.instanceId
-    ])).rows;
+    const instances = await queryRows(`SELECT * FROM workflow_instance WHERE id = ?`, [input.instanceId]);
     if (!instances[0]) {
       throw new Error("NOT_FOUND");
     }
     const instance = instances[0];
-    await db.execute(`UPDATE workflow_approval SET status = 'APPROVED', actorId = ?, comment = ?, decidedAt = ? 
-       WHERE instanceId = ? AND stepId = ? AND status = 'PENDING'`, [
+    await execute(`UPDATE workflow_approval SET status = 'APPROVED', "actorId" = ?, comment = ?, "decidedAt" = ? 
+       WHERE "instanceId" = ? AND "stepId" = ? AND status = 'PENDING'`, [
       context.actorId,
       input.comment ?? null,
       now,
       input.instanceId,
       instance.currentStepId
     ]);
-    const currentStep = (await db.query(`SELECT * FROM workflow_step WHERE id = ?`, [
-      instance.currentStepId
-    ])).rows;
-    const nextSteps = (await db.query(`SELECT * FROM workflow_step WHERE definitionId = ? AND stepOrder > ? ORDER BY stepOrder LIMIT 1`, [instance.definitionId, currentStep[0]?.stepOrder ?? 0])).rows;
+    const currentStep = await queryRows(`SELECT * FROM workflow_step WHERE id = ?`, [instance.currentStepId]);
+    const nextSteps = await queryRows(`SELECT * FROM workflow_step WHERE "definitionId" = ? AND "stepOrder" > ? ORDER BY "stepOrder" LIMIT 1`, [instance.definitionId, currentStep[0]?.stepOrder ?? 0]);
     if (nextSteps[0]) {
-      await db.execute(`UPDATE workflow_instance SET currentStepId = ? WHERE id = ?`, [nextSteps[0].id, input.instanceId]);
-      await db.execute(`INSERT INTO workflow_approval (id, instanceId, stepId, status, createdAt)
+      await execute(`UPDATE workflow_instance SET "currentStepId" = ? WHERE id = ?`, [nextSteps[0].id, input.instanceId]);
+      await execute(`INSERT INTO workflow_approval (id, "instanceId", "stepId", status, "createdAt")
          VALUES (?, ?, ?, ?, ?)`, [
         generateId("wfappr"),
         input.instanceId,
@@ -865,37 +871,31 @@ function createWorkflowHandlers(db) {
         now
       ]);
     } else {
-      await db.execute(`UPDATE workflow_instance SET status = 'COMPLETED', currentStepId = NULL, completedAt = ? WHERE id = ?`, [now, input.instanceId]);
+      await execute(`UPDATE workflow_instance SET status = 'COMPLETED', "currentStepId" = NULL, "completedAt" = ? WHERE id = ?`, [now, input.instanceId]);
     }
-    const updated = (await db.query(`SELECT * FROM workflow_instance WHERE id = ?`, [
-      input.instanceId
-    ])).rows;
+    const updated = await queryRows(`SELECT * FROM workflow_instance WHERE id = ?`, [input.instanceId]);
     return rowToInstance(updated[0]);
   }
   async function rejectStep(input, context) {
     const now = new Date().toISOString();
-    const instances = (await db.query(`SELECT * FROM workflow_instance WHERE id = ?`, [
-      input.instanceId
-    ])).rows;
+    const instances = await queryRows(`SELECT * FROM workflow_instance WHERE id = ?`, [input.instanceId]);
     if (!instances[0]) {
       throw new Error("NOT_FOUND");
     }
-    await db.execute(`UPDATE workflow_approval SET status = 'REJECTED', actorId = ?, comment = ?, decidedAt = ? 
-       WHERE instanceId = ? AND stepId = ? AND status = 'PENDING'`, [
+    await execute(`UPDATE workflow_approval SET status = 'REJECTED', "actorId" = ?, comment = ?, "decidedAt" = ? 
+       WHERE "instanceId" = ? AND "stepId" = ? AND status = 'PENDING'`, [
       context.actorId,
       input.reason,
       now,
       input.instanceId,
       instances[0].currentStepId
     ]);
-    await db.execute(`UPDATE workflow_instance SET status = 'REJECTED', completedAt = ? WHERE id = ?`, [now, input.instanceId]);
-    const updated = (await db.query(`SELECT * FROM workflow_instance WHERE id = ?`, [
-      input.instanceId
-    ])).rows;
+    await execute(`UPDATE workflow_instance SET status = 'REJECTED', "completedAt" = ? WHERE id = ?`, [now, input.instanceId]);
+    const updated = await queryRows(`SELECT * FROM workflow_instance WHERE id = ?`, [input.instanceId]);
     return rowToInstance(updated[0]);
   }
   async function getApprovals(instanceId) {
-    const rows = (await db.query(`SELECT * FROM workflow_approval WHERE instanceId = ? ORDER BY createdAt`, [instanceId])).rows;
+    const rows = await queryRows(`SELECT * FROM workflow_approval WHERE "instanceId" = ? ORDER BY "createdAt"`, [instanceId]);
     return rows.map(rowToApproval);
   }
   return {
@@ -1993,8 +1993,9 @@ var WorkflowSystemPresentations = {
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { useCallback, useEffect, useState } from "react";
 "use client";
-function useWorkflowList(projectId = "local-project") {
-  const { handlers } = useTemplateRuntime();
+function useWorkflowList(projectIdOverride) {
+  const { handlers, projectId: runtimeProjectId } = useTemplateRuntime();
+  const projectId = projectIdOverride ?? runtimeProjectId;
   const workflow = handlers.workflow;
   const [definitions, setDefinitions] = useState([]);
   const [instances, setInstances] = useState([]);
@@ -2015,7 +2016,7 @@ function useWorkflowList(projectId = "local-project") {
     } finally {
       setLoading(false);
     }
-  }, [handlers, projectId]);
+  }, [projectId, workflow]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -2024,6 +2025,7 @@ function useWorkflowList(projectId = "local-project") {
     activeDefinitions: definitions.filter((d) => d.status === "ACTIVE").length,
     totalInstances: instances.length,
     pendingInstances: instances.filter((i) => i.status === "PENDING").length,
+    inProgressInstances: instances.filter((i) => i.status === "IN_PROGRESS").length,
     completedInstances: instances.filter((i) => i.status === "COMPLETED").length,
     rejectedInstances: instances.filter((i) => i.status === "REJECTED").length
   };
@@ -2040,115 +2042,450 @@ function useWorkflowList(projectId = "local-project") {
 // src/ui/hooks/index.ts
 "use client";
 
-// src/ui/renderers/workflow.markdown.ts
-var mockWorkflowDefinitions = [
+// src/shared/demo-scenario.ts
+var WORKFLOW_SYSTEM_DEMO_PROJECT_ID = "workflow-system-demo";
+var WORKFLOW_SYSTEM_DEMO_ORGANIZATION_ID = "org_demo";
+var WORKFLOW_SYSTEM_DEMO_DEFINITIONS = [
   {
-    id: "wf-1",
-    name: "Purchase Approval",
+    id: "wf_expense",
+    name: "Expense Approval",
+    description: "Approve non-trivial spend before finance releases budget.",
     type: "APPROVAL",
+    status: "ACTIVE",
+    createdAt: "2026-03-10T09:00:00.000Z",
+    updatedAt: "2026-03-20T08:15:00.000Z",
     steps: [
       {
-        id: "s1",
+        id: "wfstep_expense_manager",
         name: "Manager Review",
-        order: 1,
-        requiredRoles: ["manager"]
+        description: "Validate business value and team budget.",
+        stepOrder: 1,
+        type: "APPROVAL",
+        requiredRoles: ["manager"],
+        createdAt: "2026-03-10T09:00:00.000Z"
       },
       {
-        id: "s2",
+        id: "wfstep_expense_finance",
         name: "Finance Review",
-        order: 2,
-        requiredRoles: ["finance"]
-      },
-      { id: "s3", name: "Final Approval", order: 3, requiredRoles: ["admin"] }
-    ],
-    status: "ACTIVE"
+        description: "Confirm ledger coding and spending threshold.",
+        stepOrder: 2,
+        type: "APPROVAL",
+        requiredRoles: ["finance"],
+        createdAt: "2026-03-10T09:10:00.000Z"
+      }
+    ]
   },
   {
-    id: "wf-2",
-    name: "Leave Request",
-    type: "APPROVAL",
+    id: "wf_vendor",
+    name: "Vendor Onboarding",
+    description: "Sequence security, procurement, and legal before activation.",
+    type: "SEQUENTIAL",
+    status: "ACTIVE",
+    createdAt: "2026-03-08T11:00:00.000Z",
+    updatedAt: "2026-03-19T13:10:00.000Z",
     steps: [
       {
-        id: "s1",
-        name: "Supervisor Approval",
-        order: 1,
-        requiredRoles: ["supervisor"]
+        id: "wfstep_vendor_security",
+        name: "Security Check",
+        description: "Review data access and integration scope.",
+        stepOrder: 1,
+        type: "APPROVAL",
+        requiredRoles: ["security"],
+        createdAt: "2026-03-08T11:00:00.000Z"
       },
-      { id: "s2", name: "HR Review", order: 2, requiredRoles: ["hr"] }
-    ],
-    status: "ACTIVE"
+      {
+        id: "wfstep_vendor_procurement",
+        name: "Procurement Check",
+        description: "Validate pricing, procurement policy, and owner.",
+        stepOrder: 2,
+        type: "APPROVAL",
+        requiredRoles: ["procurement"],
+        createdAt: "2026-03-08T11:05:00.000Z"
+      },
+      {
+        id: "wfstep_vendor_legal",
+        name: "Legal Sign-off",
+        description: "Approve terms before the vendor goes live.",
+        stepOrder: 3,
+        type: "APPROVAL",
+        requiredRoles: ["legal"],
+        createdAt: "2026-03-08T11:10:00.000Z"
+      }
+    ]
   },
   {
-    id: "wf-3",
-    name: "Document Review",
-    type: "SEQUENTIAL",
+    id: "wf_policy_exception",
+    name: "Policy Exception",
+    description: "Escalate a temporary exception through team lead and compliance.",
+    type: "APPROVAL",
+    status: "DRAFT",
+    createdAt: "2026-03-15T07:30:00.000Z",
+    updatedAt: "2026-03-18T11:20:00.000Z",
     steps: [
-      { id: "s1", name: "Author Review", order: 1, requiredRoles: ["author"] },
-      { id: "s2", name: "Peer Review", order: 2, requiredRoles: ["reviewer"] },
-      { id: "s3", name: "Publish", order: 3, requiredRoles: ["publisher"] }
-    ],
-    status: "DRAFT"
+      {
+        id: "wfstep_policy_lead",
+        name: "Team Lead Review",
+        description: "Check urgency and expected blast radius.",
+        stepOrder: 1,
+        type: "APPROVAL",
+        requiredRoles: ["team-lead"],
+        createdAt: "2026-03-15T07:30:00.000Z"
+      },
+      {
+        id: "wfstep_policy_compliance",
+        name: "Compliance Review",
+        description: "Accept or reject the exception request.",
+        stepOrder: 2,
+        type: "APPROVAL",
+        requiredRoles: ["compliance"],
+        createdAt: "2026-03-15T07:40:00.000Z"
+      }
+    ]
   }
 ];
-var mockWorkflowInstances = [
+var WORKFLOW_SYSTEM_DEMO_INSTANCES = [
   {
-    id: "inst-1",
-    definitionId: "wf-1",
-    definitionName: "Purchase Approval",
+    id: "wfinst_expense_open",
+    definitionId: "wf_expense",
     status: "IN_PROGRESS",
-    currentStepId: "s2",
-    startedAt: "2024-01-15T10:00:00Z",
-    requestedBy: "John Doe"
+    currentStepId: "wfstep_expense_finance",
+    data: {
+      amount: 4200,
+      currency: "EUR",
+      vendor: "Nimbus AI"
+    },
+    requestedBy: "sarah@contractspec.io",
+    startedAt: "2026-03-20T08:00:00.000Z",
+    approvals: [
+      {
+        id: "wfappr_expense_manager",
+        stepId: "wfstep_expense_manager",
+        status: "APPROVED",
+        actorId: "manager.demo",
+        comment: "Approved for the Q2 automation budget.",
+        decidedAt: "2026-03-20T08:15:00.000Z",
+        createdAt: "2026-03-20T08:05:00.000Z"
+      },
+      {
+        id: "wfappr_expense_finance",
+        stepId: "wfstep_expense_finance",
+        status: "PENDING",
+        createdAt: "2026-03-20T08:15:00.000Z"
+      }
+    ]
   },
   {
-    id: "inst-2",
-    definitionId: "wf-1",
-    definitionName: "Purchase Approval",
+    id: "wfinst_vendor_done",
+    definitionId: "wf_vendor",
     status: "COMPLETED",
-    currentStepId: null,
-    startedAt: "2024-01-10T09:00:00Z",
-    completedAt: "2024-01-12T14:00:00Z",
-    requestedBy: "Jane Smith"
+    data: {
+      vendor: "Acme Cloud",
+      riskTier: "medium"
+    },
+    requestedBy: "leo@contractspec.io",
+    startedAt: "2026-03-19T09:30:00.000Z",
+    completedAt: "2026-03-19T13:10:00.000Z",
+    approvals: [
+      {
+        id: "wfappr_vendor_security",
+        stepId: "wfstep_vendor_security",
+        status: "APPROVED",
+        actorId: "security.demo",
+        comment: "SOC2 scope is acceptable.",
+        decidedAt: "2026-03-19T10:10:00.000Z",
+        createdAt: "2026-03-19T09:35:00.000Z"
+      },
+      {
+        id: "wfappr_vendor_procurement",
+        stepId: "wfstep_vendor_procurement",
+        status: "APPROVED",
+        actorId: "procurement.demo",
+        comment: "Commercial terms match the preferred vendor tier.",
+        decidedAt: "2026-03-19T11:25:00.000Z",
+        createdAt: "2026-03-19T10:15:00.000Z"
+      },
+      {
+        id: "wfappr_vendor_legal",
+        stepId: "wfstep_vendor_legal",
+        status: "APPROVED",
+        actorId: "legal.demo",
+        comment: "MSA redlines are complete.",
+        decidedAt: "2026-03-19T13:05:00.000Z",
+        createdAt: "2026-03-19T11:30:00.000Z"
+      }
+    ]
   },
   {
-    id: "inst-3",
-    definitionId: "wf-2",
-    definitionName: "Leave Request",
-    status: "PENDING",
-    currentStepId: "s1",
-    startedAt: "2024-01-16T08:00:00Z",
-    requestedBy: "Bob Wilson"
+    id: "wfinst_policy_rejected",
+    definitionId: "wf_policy_exception",
+    status: "REJECTED",
+    currentStepId: "wfstep_policy_compliance",
+    data: {
+      policy: "Model rollout freeze",
+      durationDays: 14
+    },
+    requestedBy: "maya@contractspec.io",
+    startedAt: "2026-03-18T10:00:00.000Z",
+    completedAt: "2026-03-18T11:20:00.000Z",
+    approvals: [
+      {
+        id: "wfappr_policy_lead",
+        stepId: "wfstep_policy_lead",
+        status: "APPROVED",
+        actorId: "lead.demo",
+        comment: "Escalation justified for the release train.",
+        decidedAt: "2026-03-18T10:30:00.000Z",
+        createdAt: "2026-03-18T10:05:00.000Z"
+      },
+      {
+        id: "wfappr_policy_compliance",
+        stepId: "wfstep_policy_compliance",
+        status: "REJECTED",
+        actorId: "compliance.demo",
+        comment: "Exception exceeds the allowed blast radius.",
+        decidedAt: "2026-03-18T11:15:00.000Z",
+        createdAt: "2026-03-18T10:35:00.000Z"
+      }
+    ]
+  }
+];
+
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var INSTANCE_LIST_REF = {
+  key: "workflow.instance.list",
+  version: "1.0.0"
+};
+var META = {
+  version: "1.0.0",
+  domain: "workflow",
+  stability: "experimental",
+  owners: ["@example.workflow-system"],
+  tags: ["workflow", "visualization", "operations"]
+};
+var WorkflowInstanceStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "workflow-system.visualization.instance-status",
+    title: "Instance Status Breakdown",
+    description: "Distribution of workflow instance states.",
+    goal: "Surface the current workload mix.",
+    context: "Workflow operations overview."
+  },
+  source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "status",
+    valueMeasure: "instances",
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      {
+        key: "instances",
+        label: "Instances",
+        dataPath: "instances",
+        format: "number"
+      }
+    ],
+    table: { caption: "Workflow instance counts by status." }
+  }
+});
+var WorkflowThroughputVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "workflow-system.visualization.throughput",
+    title: "Run Throughput",
+    description: "Daily workflow instance starts.",
+    goal: "Show operational throughput over time.",
+    context: "Workflow trend monitoring."
+  },
+  source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "line",
+    xDimension: "day",
+    yMeasures: ["instances"],
+    dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
+    measures: [
+      {
+        key: "instances",
+        label: "Instances",
+        dataPath: "instances",
+        format: "number",
+        color: "#0f766e"
+      }
+    ],
+    table: { caption: "Daily workflow instance starts." }
+  }
+});
+var WorkflowActiveMetricVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "workflow-system.visualization.active-work",
+    title: "Active Work",
+    description: "Current in-flight or pending workflow instances.",
+    goal: "Expose active operational workload.",
+    context: "Workflow workload comparison."
+  },
+  source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "value",
+    measures: [
+      { key: "value", label: "Instances", dataPath: "value", format: "number" }
+    ],
+    table: { caption: "Active workflow count." }
   }
+});
+var WorkflowCompletedMetricVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "workflow-system.visualization.completed-work",
+    title: "Completed Work",
+    description: "Completed workflow instances in the current sample.",
+    goal: "Show output against active workload.",
+    context: "Workflow workload comparison."
+  },
+  source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "value",
+    measures: [
+      { key: "value", label: "Instances", dataPath: "value", format: "number" }
+    ],
+    table: { caption: "Completed workflow count." }
+  }
+});
+var WorkflowVisualizationSpecs = [
+  WorkflowInstanceStatusVisualization,
+  WorkflowThroughputVisualization,
+  WorkflowActiveMetricVisualization,
+  WorkflowCompletedMetricVisualization
 ];
+var WorkflowVisualizationRegistry = new VisualizationRegistry([
+  ...WorkflowVisualizationSpecs
+]);
+var WorkflowVisualizationRefs = WorkflowVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function toDayKey(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return date.toISOString().slice(0, 10);
+}
+function createWorkflowVisualizationSections(instances) {
+  const statusCounts = new Map;
+  const throughput = new Map;
+  let activeCount = 0;
+  let completedCount = 0;
+  for (const instance of instances) {
+    statusCounts.set(instance.status, (statusCounts.get(instance.status) ?? 0) + 1);
+    const day = toDayKey(instance.startedAt);
+    throughput.set(day, (throughput.get(day) ?? 0) + 1);
+    if (instance.status === "PENDING" || instance.status === "IN_PROGRESS") {
+      activeCount += 1;
+    }
+    if (instance.status === "COMPLETED") {
+      completedCount += 1;
+    }
+  }
+  const primaryItems = [
+    {
+      key: "workflow-status",
+      spec: WorkflowInstanceStatusVisualization,
+      data: {
+        data: Array.from(statusCounts.entries()).map(([status, count]) => ({
+          status,
+          instances: count
+        }))
+      },
+      title: "Instance Status Breakdown",
+      description: "Status mix across workflow instances.",
+      height: 260
+    },
+    {
+      key: "workflow-throughput",
+      spec: WorkflowThroughputVisualization,
+      data: {
+        data: Array.from(throughput.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, instances: count }))
+      },
+      title: "Run Throughput",
+      description: "Daily workflow starts from current instances."
+    }
+  ];
+  const comparisonItems = [
+    {
+      key: "workflow-active",
+      spec: WorkflowActiveMetricVisualization,
+      data: { data: [{ value: activeCount }] },
+      title: "Active Work",
+      description: "Pending and in-progress workflows.",
+      height: 200
+    },
+    {
+      key: "workflow-completed",
+      spec: WorkflowCompletedMetricVisualization,
+      data: { data: [{ value: completedCount }] },
+      title: "Completed Work",
+      description: "Completed workflows in the current sample.",
+      height: 200
+    }
+  ];
+  return {
+    primaryItems,
+    comparisonItems
+  };
+}
+// src/ui/renderers/workflow.markdown.ts
+var workflowDefinitions = WORKFLOW_SYSTEM_DEMO_DEFINITIONS;
+var workflowInstances = WORKFLOW_SYSTEM_DEMO_INSTANCES;
+var workflowDefinitionById = new Map(workflowDefinitions.map((definition) => [definition.id, definition]));
+function formatDate(value) {
+  return new Date(value).toISOString().slice(0, 10);
+}
 var workflowDashboardMarkdownRenderer = {
   target: "markdown",
   render: async (desc) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "WorkflowDashboard") {
       throw new Error("workflowDashboardMarkdownRenderer: not WorkflowDashboard");
     }
-    const definitions = mockWorkflowDefinitions;
-    const instances = mockWorkflowInstances;
+    const definitions = workflowDefinitions;
+    const instances = workflowInstances;
+    const visualizations = createWorkflowVisualizationSections(instances);
     const activeDefinitions = definitions.filter((d) => d.status === "ACTIVE");
-    const pendingInstances = instances.filter((i) => i.status === "PENDING");
-    const inProgressInstances = instances.filter((i) => i.status === "IN_PROGRESS");
-    const completedInstances = instances.filter((i) => i.status === "COMPLETED");
+    const awaitingActionInstances = instances.filter((i) => i.status === "PENDING" || i.status === "IN_PROGRESS");
     const lines = [
       "# Workflow Dashboard",
       "",
-      "> Workflow and approval management overview",
+      "> Seeded workflow and approval overview for the sandbox demo.",
       "",
       "## Summary",
       "",
       "| Metric | Value |",
       "|--------|-------|",
       `| Active Workflows | ${activeDefinitions.length} |`,
-      `| Pending Approvals | ${pendingInstances.length} |`,
-      `| In Progress | ${inProgressInstances.length} |`,
-      `| Completed | ${completedInstances.length} |`,
-      "",
-      "## Active Workflow Definitions",
+      `| Awaiting Action | ${awaitingActionInstances.length} |`,
+      `| Completed | ${instances.filter((i) => i.status === "COMPLETED").length} |`,
+      `| Rejected | ${instances.filter((i) => i.status === "REJECTED").length} |`,
       ""
     ];
+    lines.push("## Visualization Overview");
+    lines.push("");
+    for (const item of [
+      ...visualizations.primaryItems,
+      ...visualizations.comparisonItems
+    ]) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+    }
+    lines.push("");
+    lines.push("## Active Workflow Definitions");
+    lines.push("");
     if (activeDefinitions.length === 0) {
       lines.push("_No active workflow definitions._");
     } else {
@@ -2167,8 +2504,9 @@ var workflowDashboardMarkdownRenderer = {
       lines.push("| Workflow | Requested By | Status | Started |");
       lines.push("|----------|--------------|--------|---------|");
       for (const inst of instances.slice(0, 10)) {
-        const startedDate = new Date(inst.startedAt).toLocaleDateString();
-        lines.push(`| ${inst.definitionName} | ${inst.requestedBy} | ${inst.status} | ${startedDate} |`);
+        const startedDate = formatDate(inst.startedAt);
+        const definitionName = workflowDefinitionById.get(inst.definitionId)?.name ?? inst.definitionId;
+        lines.push(`| ${definitionName} | ${inst.requestedBy} | ${inst.status} | ${startedDate} |`);
       }
     }
     return {
@@ -2184,7 +2522,7 @@ var workflowDefinitionListMarkdownRenderer = {
     if (desc.source.type !== "component" || desc.source.componentKey !== "WorkflowDefinitionList") {
       throw new Error("workflowDefinitionListMarkdownRenderer: not WorkflowDefinitionList");
     }
-    const definitions = mockWorkflowDefinitions;
+    const definitions = workflowDefinitions;
     const lines = [
       "# Workflow Definitions",
       "",
@@ -2199,7 +2537,7 @@ var workflowDefinitionListMarkdownRenderer = {
       lines.push("### Steps");
       lines.push("");
       for (const step of def.steps) {
-        lines.push(`${step.order}. **${step.name}** - Roles: ${step.requiredRoles.join(", ")}`);
+        lines.push(`${step.stepOrder}. **${step.name}** - Roles: ${step.requiredRoles.join(", ")}`);
       }
       lines.push("");
     }
@@ -2216,7 +2554,7 @@ var workflowInstanceDetailMarkdownRenderer = {
     if (desc.source.type !== "component" || desc.source.componentKey !== "WorkflowInstanceDetail") {
       throw new Error("workflowInstanceDetailMarkdownRenderer: not WorkflowInstanceDetail");
     }
-    const instance = mockWorkflowInstances[0];
+    const instance = workflowInstances.find((workflowInstance) => workflowInstance.status === "IN_PROGRESS") ?? workflowInstances[0];
     if (!instance) {
       return {
         mimeType: "text/markdown",
@@ -2225,14 +2563,14 @@ var workflowInstanceDetailMarkdownRenderer = {
 No workflow instances available.`
       };
     }
-    const definition = mockWorkflowDefinitions.find((d) => d.id === instance.definitionId);
+    const definition = workflowDefinitions.find((d) => d.id === instance.definitionId);
     const lines = [
-      `# Workflow: ${instance.definitionName}`,
+      `# Workflow: ${definition?.name ?? instance.definitionId}`,
       "",
       `**Instance ID:** ${instance.id}`,
       `**Status:** ${instance.status}`,
       `**Requested By:** ${instance.requestedBy}`,
-      `**Started:** ${new Date(instance.startedAt).toLocaleString()}`,
+      `**Started:** ${formatDate(instance.startedAt)}`,
       "",
       "## Steps Progress",
       ""
@@ -2253,7 +2591,7 @@ No workflow instances available.`
     lines.push("## Actions");
     lines.push("");
     lines.push("- **Approve** - Move to next step");
-    lines.push("- **Reject** - Reject and return");
+    lines.push("- **Reject** - End the workflow with a rejection outcome");
     lines.push("- **Delegate** - Assign to another approver");
     return {
       mimeType: "text/markdown",
@@ -2262,6 +2600,51 @@ No workflow instances available.`
     };
   }
 };
+// src/ui/WorkflowDashboard.visualizations.tsx
+import {
+  ComparisonView,
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function WorkflowVisualizationOverview({
+  instances
+}) {
+  const { primaryItems, comparisonItems } = createWorkflowVisualizationSections(instances);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "space-y-4",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-semibold text-lg",
+            children: "Workflow Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts for workflow health and throughput."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: primaryItems.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(ComparisonView, {
+        description: "Shared comparison surface for active versus completed work.",
+        items: comparisonItems,
+        title: "Workload Comparison"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/ui/WorkflowDashboard.tsx
 import {
   Button,
@@ -2271,7 +2654,7 @@ import {
   StatCardGroup
 } from "@contractspec/lib.design-system";
 import { useState as useState2 } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var STATUS_COLORS = {
   ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
@@ -2291,151 +2674,148 @@ function WorkflowDashboard() {
     { id: "instances", label: "Instances", icon: "\uD83D\uDD04" }
   ];
   if (loading) {
-    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV2(LoaderBlock, {
       label: "Loading Workflows..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV(ErrorState, {
+    return /* @__PURE__ */ jsxDEV2(ErrorState, {
       title: "Failed to load Workflows",
       description: error.message,
       onRetry: refetch,
       retryLabel: "Retry"
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsxDEV2("h2", {
             className: "font-bold text-2xl",
             children: "Workflow System"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Button, {
-            onClick: () => alert("Create workflow modal"),
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "mr-2",
-                children: "+"
-              }, undefined, false, undefined, this),
-              " New Workflow"
-            ]
-          }, undefined, true, undefined, this)
+          /* @__PURE__ */ jsxDEV2(Button, {
+            onClick: () => void refetch(),
+            children: "Refresh"
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(StatCardGroup, {
+      /* @__PURE__ */ jsxDEV2(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Workflows",
             value: stats.totalDefinitions,
             hint: `${stats.activeDefinitions} active`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Instances",
             value: stats.totalInstances,
             hint: "total runs"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
-            label: "Pending",
-            value: stats.pendingInstances,
-            hint: "awaiting action"
+          /* @__PURE__ */ jsxDEV2(StatCard, {
+            label: "Awaiting Action",
+            value: stats.pendingInstances + stats.inProgressInstances,
+            hint: "open approvals"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Completed",
             value: stats.completedInstances,
             hint: "finished"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("nav", {
+      /* @__PURE__ */ jsxDEV2(WorkflowVisualizationOverview, {
+        instances
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("nav", {
         className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(Button, {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV2(Button, {
           type: "button",
           role: "tab",
           "aria-selected": activeTab === tab.id,
           onClick: () => setActiveTab(tab.id),
           className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV("span", {
+            /* @__PURE__ */ jsxDEV2("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "definitions" && /* @__PURE__ */ jsxDEV("div", {
+          activeTab === "definitions" && /* @__PURE__ */ jsxDEV2("div", {
             className: "rounded-lg border border-border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+            children: /* @__PURE__ */ jsxDEV2("table", {
               className: "w-full",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
+                /* @__PURE__ */ jsxDEV2("thead", {
                   className: "border-border border-b bg-muted/30",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Name"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Type"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Status"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Created"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
+                /* @__PURE__ */ jsxDEV2("tbody", {
                   className: "divide-y divide-border",
                   children: [
-                    definitions.map((def) => /* @__PURE__ */ jsxDEV("tr", {
+                    definitions.map((def) => /* @__PURE__ */ jsxDEV2("tr", {
                       className: "hover:bg-muted/50",
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "font-medium",
                               children: def.name
                             }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "text-muted-foreground text-sm",
                               children: def.description
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 font-mono text-sm",
                           children: def.type
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
+                          children: /* @__PURE__ */ jsxDEV2("span", {
                             className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[def.status] ?? ""}`,
                             children: def.status
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 text-muted-foreground text-sm",
                           children: def.createdAt.toLocaleDateString()
                         }, undefined, false, undefined, this)
                       ]
                     }, def.id, true, undefined, this)),
-                    definitions.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-                      children: /* @__PURE__ */ jsxDEV("td", {
+                    definitions.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
+                      children: /* @__PURE__ */ jsxDEV2("td", {
                         colSpan: 4,
                         className: "px-4 py-8 text-center text-muted-foreground",
                         children: "No workflow definitions found"
@@ -2446,63 +2826,63 @@ function WorkflowDashboard() {
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          activeTab === "instances" && /* @__PURE__ */ jsxDEV("div", {
+          activeTab === "instances" && /* @__PURE__ */ jsxDEV2("div", {
             className: "rounded-lg border border-border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+            children: /* @__PURE__ */ jsxDEV2("table", {
               className: "w-full",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
+                /* @__PURE__ */ jsxDEV2("thead", {
                   className: "border-border border-b bg-muted/30",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Instance ID"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Status"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Requested By"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
+                      /* @__PURE__ */ jsxDEV2("th", {
                         className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Started"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
+                /* @__PURE__ */ jsxDEV2("tbody", {
                   className: "divide-y divide-border",
                   children: [
-                    instances.map((inst) => /* @__PURE__ */ jsxDEV("tr", {
+                    instances.map((inst) => /* @__PURE__ */ jsxDEV2("tr", {
                       className: "hover:bg-muted/50",
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 font-mono text-sm",
                           children: inst.id
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
+                          children: /* @__PURE__ */ jsxDEV2("span", {
                             className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[inst.status] ?? ""}`,
                             children: inst.status
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 text-sm",
                           children: inst.requestedBy
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 text-muted-foreground text-sm",
                           children: inst.startedAt.toLocaleDateString()
                         }, undefined, false, undefined, this)
                       ]
                     }, inst.id, true, undefined, this)),
-                    instances.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-                      children: /* @__PURE__ */ jsxDEV("td", {
+                    instances.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
+                      children: /* @__PURE__ */ jsxDEV2("td", {
                         colSpan: 4,
                         className: "px-4 py-8 text-center text-muted-foreground",
                         children: "No workflow instances found"
@@ -3027,6 +3407,7 @@ var WorkflowSystemFeature = defineFeature({
       targets: ["react", "markdown"]
     }
   ],
+  visualizations: WorkflowVisualizationRefs,
   capabilities: {
     requires: [
       { key: "identity", version: "1.0.0" },
@@ -3061,11 +3442,16 @@ export {
   workflowDashboardMarkdownRenderer,
   useWorkflowList,
   mockDataStore,
+  createWorkflowVisualizationSections,
   createWorkflowHandlers,
   createStateMachineEngine,
   createInitialState,
   buildStateMachineDefinition,
+  WorkflowVisualizationSpecs,
+  WorkflowVisualizationRegistry,
+  WorkflowVisualizationRefs,
   WorkflowUpdatedEvent,
+  WorkflowThroughputVisualization,
   WorkflowSystemPresentations,
   WorkflowSystemFeature,
   WorkflowStepModel,
@@ -3073,12 +3459,15 @@ export {
   WorkflowPublishedEvent,
   WorkflowMetricsPresentation,
   WorkflowListPresentation,
+  WorkflowInstanceStatusVisualization,
   WorkflowInstanceModel,
   WorkflowDetailPresentation,
   WorkflowDesignerPresentation,
   WorkflowDefinitionModel,
   WorkflowDashboard,
   WorkflowCreatedEvent,
+  WorkflowCompletedMetricVisualization,
+  WorkflowActiveMetricVisualization,
   UpdateWorkflowInputModel,
   UpdateWorkflowContract,
   TriggerTypeEnum,