@contractspec/example.workflow-system 3.7.6 → 3.8.2

package/dist/shared/demo-scenario.js

@@ -0,0 +1,214 @@
+// @bun
+// 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_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: "wfstep_expense_manager",
+        name: "Manager Review",
+        description: "Validate business value and team budget.",
+        stepOrder: 1,
+        type: "APPROVAL",
+        requiredRoles: ["manager"],
+        createdAt: "2026-03-10T09:00:00.000Z"
+      },
+      {
+        id: "wfstep_expense_finance",
+        name: "Finance Review",
+        description: "Confirm ledger coding and spending threshold.",
+        stepOrder: 2,
+        type: "APPROVAL",
+        requiredRoles: ["finance"],
+        createdAt: "2026-03-10T09:10:00.000Z"
+      }
+    ]
+  },
+  {
+    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: "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: "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_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: "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 WORKFLOW_SYSTEM_DEMO_INSTANCES = [
+  {
+    id: "wfinst_expense_open",
+    definitionId: "wf_expense",
+    status: "IN_PROGRESS",
+    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: "wfinst_vendor_done",
+    definitionId: "wf_vendor",
+    status: "COMPLETED",
+    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: "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"
+      }
+    ]
+  }
+];
+export {
+  WORKFLOW_SYSTEM_DEMO_PROJECT_ID,
+  WORKFLOW_SYSTEM_DEMO_ORGANIZATION_ID,
+  WORKFLOW_SYSTEM_DEMO_INSTANCES,
+  WORKFLOW_SYSTEM_DEMO_DEFINITIONS
+};

package/dist/shared/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * Shared utilities and types for workflow system.
  */
-export * from './types';
 export * from './mock-data';
+export * from './types';

package/dist/shared/mock-data.d.ts

@@ -2,7 +2,7 @@
  * Mock data store for workflow system.
  * In production, this would be backed by a database.
  */
-import type { WorkflowDefinitionRecord, WorkflowStepRecord, WorkflowInstanceRecord, ApprovalRequestRecord } from './types';
+import type { ApprovalRequestRecord, WorkflowDefinitionRecord, WorkflowInstanceRecord, WorkflowStepRecord } from './types';
 export declare const mockDataStore: {
     workflows: Map<string, WorkflowDefinitionRecord>;
     steps: Map<string, WorkflowStepRecord>;

package/dist/ui/WorkflowDashboard.visualizations.d.ts

@@ -0,0 +1,4 @@
+import type { WorkflowInstance } from '../handlers/workflow.handlers';
+export declare function WorkflowVisualizationOverview({ instances, }: {
+    instances: WorkflowInstance[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/WorkflowDashboard.visualizations.js

@@ -0,0 +1,240 @@
+// @bun
+// 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/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);
+}
+export {
+  WorkflowVisualizationOverview
+};

package/dist/ui/hooks/index.js

@@ -1,51 +1,4 @@
 // @bun
-// src/ui/hooks/useWorkflowList.ts
-import { useCallback, useEffect, useState } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-"use client";
-function useWorkflowList(projectId = "local-project") {
-  const { handlers } = useTemplateRuntime();
-  const workflow = handlers.workflow;
-  const [definitions, setDefinitions] = useState([]);
-  const [instances, setInstances] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const [defResult, instResult] = await Promise.all([
-        workflow.listDefinitions({ projectId, limit: 100 }),
-        workflow.listInstances({ projectId, limit: 100 })
-      ]);
-      setDefinitions(defResult.definitions);
-      setInstances(instResult.instances);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to load workflows"));
-    } finally {
-      setLoading(false);
-    }
-  }, [handlers, projectId]);
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  const stats = {
-    totalDefinitions: definitions.length,
-    activeDefinitions: definitions.filter((d) => d.status === "ACTIVE").length,
-    totalInstances: instances.length,
-    pendingInstances: instances.filter((i) => i.status === "PENDING").length,
-    completedInstances: instances.filter((i) => i.status === "COMPLETED").length,
-    rejectedInstances: instances.filter((i) => i.status === "REJECTED").length
-  };
-  return {
-    definitions,
-    instances,
-    loading,
-    error,
-    stats,
-    refetch: fetchData
-  };
-}
 export {
   useWorkflowList
 };

package/dist/ui/hooks/useWorkflowList.d.ts

@@ -4,10 +4,11 @@ export interface WorkflowStats {
     activeDefinitions: number;
     totalInstances: number;
     pendingInstances: number;
+    inProgressInstances: number;
     completedInstances: number;
     rejectedInstances: number;
 }
-export declare function useWorkflowList(projectId?: string): {
+export declare function useWorkflowList(projectIdOverride?: string): {
     definitions: WorkflowDefinition[];
     instances: WorkflowInstance[];
     loading: boolean;

package/dist/ui/hooks/useWorkflowList.js

@@ -1,10 +1,11 @@
 // @bun
 // src/ui/hooks/useWorkflowList.ts
-import { useCallback, useEffect, useState } from "react";
 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([]);
@@ -25,7 +26,7 @@ function useWorkflowList(projectId = "local-project") {
     } finally {
       setLoading(false);
     }
-  }, [handlers, projectId]);
+  }, [projectId, workflow]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -34,6 +35,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
   };

package/dist/ui/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Workflow System Template Components
  */
+export * from './hooks';
 export * from './renderers';
 export { WorkflowDashboard } from './WorkflowDashboard';
-export * from './hooks';

package/dist/ui/index.js

@@ -1,10 +1,11 @@
 // @bun
 // src/ui/hooks/useWorkflowList.ts
-import { useCallback, useEffect, useState } from "react";
 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([]);
@@ -25,7 +26,7 @@ function useWorkflowList(projectId = "local-project") {
     } finally {
       setLoading(false);
     }
-  }, [handlers, projectId]);
+  }, [projectId, workflow]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -34,6 +35,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
   };