@contractspec/example.workflow-system 3.7.7 → 3.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/browser/handlers/index.js +43 -43
- package/dist/browser/handlers/workflow.handlers.js +43 -43
- package/dist/browser/index.js +572 -183
- package/dist/browser/shared/demo-scenario.js +213 -0
- package/dist/browser/ui/WorkflowDashboard.visualizations.js +239 -0
- package/dist/browser/ui/hooks/index.js +0 -47
- package/dist/browser/ui/hooks/useWorkflowList.js +5 -3
- package/dist/browser/ui/index.js +5 -3
- package/dist/browser/ui/renderers/index.js +409 -73
- package/dist/browser/ui/renderers/workflow.markdown.js +409 -73
- package/dist/browser/visualizations/catalog.js +132 -0
- package/dist/browser/visualizations/index.js +133 -0
- package/dist/browser/visualizations/selectors.js +195 -0
- package/dist/example.test.d.ts +1 -0
- package/dist/handlers/index.js +43 -43
- package/dist/handlers/workflow.handlers.js +43 -43
- package/dist/index.d.ts +1 -0
- package/dist/index.js +572 -183
- package/dist/shared/demo-scenario.d.ts +43 -0
- package/dist/shared/demo-scenario.js +214 -0
- package/dist/ui/WorkflowDashboard.visualizations.d.ts +4 -0
- package/dist/ui/WorkflowDashboard.visualizations.js +240 -0
- package/dist/ui/hooks/index.js +0 -47
- package/dist/ui/hooks/useWorkflowList.d.ts +2 -1
- package/dist/ui/hooks/useWorkflowList.js +5 -3
- package/dist/ui/index.js +5 -3
- package/dist/ui/renderers/index.js +409 -73
- package/dist/ui/renderers/workflow.markdown.js +409 -73
- package/dist/visualizations/catalog.d.ts +11 -0
- package/dist/visualizations/catalog.js +133 -0
- package/dist/visualizations/index.d.ts +2 -0
- package/dist/visualizations/index.js +134 -0
- package/dist/visualizations/selectors.d.ts +11 -0
- package/dist/visualizations/selectors.js +196 -0
- package/dist/visualizations/selectors.test.d.ts +1 -0
- package/package.json +69 -8
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
// src/shared/demo-scenario.ts
|
|
2
|
+
var WORKFLOW_SYSTEM_DEMO_PROJECT_ID = "workflow-system-demo";
|
|
3
|
+
var WORKFLOW_SYSTEM_DEMO_ORGANIZATION_ID = "org_demo";
|
|
4
|
+
var WORKFLOW_SYSTEM_DEMO_DEFINITIONS = [
|
|
5
|
+
{
|
|
6
|
+
id: "wf_expense",
|
|
7
|
+
name: "Expense Approval",
|
|
8
|
+
description: "Approve non-trivial spend before finance releases budget.",
|
|
9
|
+
type: "APPROVAL",
|
|
10
|
+
status: "ACTIVE",
|
|
11
|
+
createdAt: "2026-03-10T09:00:00.000Z",
|
|
12
|
+
updatedAt: "2026-03-20T08:15:00.000Z",
|
|
13
|
+
steps: [
|
|
14
|
+
{
|
|
15
|
+
id: "wfstep_expense_manager",
|
|
16
|
+
name: "Manager Review",
|
|
17
|
+
description: "Validate business value and team budget.",
|
|
18
|
+
stepOrder: 1,
|
|
19
|
+
type: "APPROVAL",
|
|
20
|
+
requiredRoles: ["manager"],
|
|
21
|
+
createdAt: "2026-03-10T09:00:00.000Z"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: "wfstep_expense_finance",
|
|
25
|
+
name: "Finance Review",
|
|
26
|
+
description: "Confirm ledger coding and spending threshold.",
|
|
27
|
+
stepOrder: 2,
|
|
28
|
+
type: "APPROVAL",
|
|
29
|
+
requiredRoles: ["finance"],
|
|
30
|
+
createdAt: "2026-03-10T09:10:00.000Z"
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: "wf_vendor",
|
|
36
|
+
name: "Vendor Onboarding",
|
|
37
|
+
description: "Sequence security, procurement, and legal before activation.",
|
|
38
|
+
type: "SEQUENTIAL",
|
|
39
|
+
status: "ACTIVE",
|
|
40
|
+
createdAt: "2026-03-08T11:00:00.000Z",
|
|
41
|
+
updatedAt: "2026-03-19T13:10:00.000Z",
|
|
42
|
+
steps: [
|
|
43
|
+
{
|
|
44
|
+
id: "wfstep_vendor_security",
|
|
45
|
+
name: "Security Check",
|
|
46
|
+
description: "Review data access and integration scope.",
|
|
47
|
+
stepOrder: 1,
|
|
48
|
+
type: "APPROVAL",
|
|
49
|
+
requiredRoles: ["security"],
|
|
50
|
+
createdAt: "2026-03-08T11:00:00.000Z"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: "wfstep_vendor_procurement",
|
|
54
|
+
name: "Procurement Check",
|
|
55
|
+
description: "Validate pricing, procurement policy, and owner.",
|
|
56
|
+
stepOrder: 2,
|
|
57
|
+
type: "APPROVAL",
|
|
58
|
+
requiredRoles: ["procurement"],
|
|
59
|
+
createdAt: "2026-03-08T11:05:00.000Z"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
id: "wfstep_vendor_legal",
|
|
63
|
+
name: "Legal Sign-off",
|
|
64
|
+
description: "Approve terms before the vendor goes live.",
|
|
65
|
+
stepOrder: 3,
|
|
66
|
+
type: "APPROVAL",
|
|
67
|
+
requiredRoles: ["legal"],
|
|
68
|
+
createdAt: "2026-03-08T11:10:00.000Z"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
id: "wf_policy_exception",
|
|
74
|
+
name: "Policy Exception",
|
|
75
|
+
description: "Escalate a temporary exception through team lead and compliance.",
|
|
76
|
+
type: "APPROVAL",
|
|
77
|
+
status: "DRAFT",
|
|
78
|
+
createdAt: "2026-03-15T07:30:00.000Z",
|
|
79
|
+
updatedAt: "2026-03-18T11:20:00.000Z",
|
|
80
|
+
steps: [
|
|
81
|
+
{
|
|
82
|
+
id: "wfstep_policy_lead",
|
|
83
|
+
name: "Team Lead Review",
|
|
84
|
+
description: "Check urgency and expected blast radius.",
|
|
85
|
+
stepOrder: 1,
|
|
86
|
+
type: "APPROVAL",
|
|
87
|
+
requiredRoles: ["team-lead"],
|
|
88
|
+
createdAt: "2026-03-15T07:30:00.000Z"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
id: "wfstep_policy_compliance",
|
|
92
|
+
name: "Compliance Review",
|
|
93
|
+
description: "Accept or reject the exception request.",
|
|
94
|
+
stepOrder: 2,
|
|
95
|
+
type: "APPROVAL",
|
|
96
|
+
requiredRoles: ["compliance"],
|
|
97
|
+
createdAt: "2026-03-15T07:40:00.000Z"
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
];
|
|
102
|
+
var WORKFLOW_SYSTEM_DEMO_INSTANCES = [
|
|
103
|
+
{
|
|
104
|
+
id: "wfinst_expense_open",
|
|
105
|
+
definitionId: "wf_expense",
|
|
106
|
+
status: "IN_PROGRESS",
|
|
107
|
+
currentStepId: "wfstep_expense_finance",
|
|
108
|
+
data: {
|
|
109
|
+
amount: 4200,
|
|
110
|
+
currency: "EUR",
|
|
111
|
+
vendor: "Nimbus AI"
|
|
112
|
+
},
|
|
113
|
+
requestedBy: "sarah@contractspec.io",
|
|
114
|
+
startedAt: "2026-03-20T08:00:00.000Z",
|
|
115
|
+
approvals: [
|
|
116
|
+
{
|
|
117
|
+
id: "wfappr_expense_manager",
|
|
118
|
+
stepId: "wfstep_expense_manager",
|
|
119
|
+
status: "APPROVED",
|
|
120
|
+
actorId: "manager.demo",
|
|
121
|
+
comment: "Approved for the Q2 automation budget.",
|
|
122
|
+
decidedAt: "2026-03-20T08:15:00.000Z",
|
|
123
|
+
createdAt: "2026-03-20T08:05:00.000Z"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
id: "wfappr_expense_finance",
|
|
127
|
+
stepId: "wfstep_expense_finance",
|
|
128
|
+
status: "PENDING",
|
|
129
|
+
createdAt: "2026-03-20T08:15:00.000Z"
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
id: "wfinst_vendor_done",
|
|
135
|
+
definitionId: "wf_vendor",
|
|
136
|
+
status: "COMPLETED",
|
|
137
|
+
data: {
|
|
138
|
+
vendor: "Acme Cloud",
|
|
139
|
+
riskTier: "medium"
|
|
140
|
+
},
|
|
141
|
+
requestedBy: "leo@contractspec.io",
|
|
142
|
+
startedAt: "2026-03-19T09:30:00.000Z",
|
|
143
|
+
completedAt: "2026-03-19T13:10:00.000Z",
|
|
144
|
+
approvals: [
|
|
145
|
+
{
|
|
146
|
+
id: "wfappr_vendor_security",
|
|
147
|
+
stepId: "wfstep_vendor_security",
|
|
148
|
+
status: "APPROVED",
|
|
149
|
+
actorId: "security.demo",
|
|
150
|
+
comment: "SOC2 scope is acceptable.",
|
|
151
|
+
decidedAt: "2026-03-19T10:10:00.000Z",
|
|
152
|
+
createdAt: "2026-03-19T09:35:00.000Z"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
id: "wfappr_vendor_procurement",
|
|
156
|
+
stepId: "wfstep_vendor_procurement",
|
|
157
|
+
status: "APPROVED",
|
|
158
|
+
actorId: "procurement.demo",
|
|
159
|
+
comment: "Commercial terms match the preferred vendor tier.",
|
|
160
|
+
decidedAt: "2026-03-19T11:25:00.000Z",
|
|
161
|
+
createdAt: "2026-03-19T10:15:00.000Z"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
id: "wfappr_vendor_legal",
|
|
165
|
+
stepId: "wfstep_vendor_legal",
|
|
166
|
+
status: "APPROVED",
|
|
167
|
+
actorId: "legal.demo",
|
|
168
|
+
comment: "MSA redlines are complete.",
|
|
169
|
+
decidedAt: "2026-03-19T13:05:00.000Z",
|
|
170
|
+
createdAt: "2026-03-19T11:30:00.000Z"
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
id: "wfinst_policy_rejected",
|
|
176
|
+
definitionId: "wf_policy_exception",
|
|
177
|
+
status: "REJECTED",
|
|
178
|
+
currentStepId: "wfstep_policy_compliance",
|
|
179
|
+
data: {
|
|
180
|
+
policy: "Model rollout freeze",
|
|
181
|
+
durationDays: 14
|
|
182
|
+
},
|
|
183
|
+
requestedBy: "maya@contractspec.io",
|
|
184
|
+
startedAt: "2026-03-18T10:00:00.000Z",
|
|
185
|
+
completedAt: "2026-03-18T11:20:00.000Z",
|
|
186
|
+
approvals: [
|
|
187
|
+
{
|
|
188
|
+
id: "wfappr_policy_lead",
|
|
189
|
+
stepId: "wfstep_policy_lead",
|
|
190
|
+
status: "APPROVED",
|
|
191
|
+
actorId: "lead.demo",
|
|
192
|
+
comment: "Escalation justified for the release train.",
|
|
193
|
+
decidedAt: "2026-03-18T10:30:00.000Z",
|
|
194
|
+
createdAt: "2026-03-18T10:05:00.000Z"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
id: "wfappr_policy_compliance",
|
|
198
|
+
stepId: "wfstep_policy_compliance",
|
|
199
|
+
status: "REJECTED",
|
|
200
|
+
actorId: "compliance.demo",
|
|
201
|
+
comment: "Exception exceeds the allowed blast radius.",
|
|
202
|
+
decidedAt: "2026-03-18T11:15:00.000Z",
|
|
203
|
+
createdAt: "2026-03-18T10:35:00.000Z"
|
|
204
|
+
}
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
];
|
|
208
|
+
export {
|
|
209
|
+
WORKFLOW_SYSTEM_DEMO_PROJECT_ID,
|
|
210
|
+
WORKFLOW_SYSTEM_DEMO_ORGANIZATION_ID,
|
|
211
|
+
WORKFLOW_SYSTEM_DEMO_INSTANCES,
|
|
212
|
+
WORKFLOW_SYSTEM_DEMO_DEFINITIONS
|
|
213
|
+
};
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
// src/visualizations/catalog.ts
|
|
2
|
+
import {
|
|
3
|
+
defineVisualization,
|
|
4
|
+
VisualizationRegistry
|
|
5
|
+
} from "@contractspec/lib.contracts-spec/visualizations";
|
|
6
|
+
var INSTANCE_LIST_REF = {
|
|
7
|
+
key: "workflow.instance.list",
|
|
8
|
+
version: "1.0.0"
|
|
9
|
+
};
|
|
10
|
+
var META = {
|
|
11
|
+
version: "1.0.0",
|
|
12
|
+
domain: "workflow",
|
|
13
|
+
stability: "experimental",
|
|
14
|
+
owners: ["@example.workflow-system"],
|
|
15
|
+
tags: ["workflow", "visualization", "operations"]
|
|
16
|
+
};
|
|
17
|
+
var WorkflowInstanceStatusVisualization = defineVisualization({
|
|
18
|
+
meta: {
|
|
19
|
+
...META,
|
|
20
|
+
key: "workflow-system.visualization.instance-status",
|
|
21
|
+
title: "Instance Status Breakdown",
|
|
22
|
+
description: "Distribution of workflow instance states.",
|
|
23
|
+
goal: "Surface the current workload mix.",
|
|
24
|
+
context: "Workflow operations overview."
|
|
25
|
+
},
|
|
26
|
+
source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
|
|
27
|
+
visualization: {
|
|
28
|
+
kind: "pie",
|
|
29
|
+
nameDimension: "status",
|
|
30
|
+
valueMeasure: "instances",
|
|
31
|
+
dimensions: [
|
|
32
|
+
{ key: "status", label: "Status", dataPath: "status", type: "category" }
|
|
33
|
+
],
|
|
34
|
+
measures: [
|
|
35
|
+
{
|
|
36
|
+
key: "instances",
|
|
37
|
+
label: "Instances",
|
|
38
|
+
dataPath: "instances",
|
|
39
|
+
format: "number"
|
|
40
|
+
}
|
|
41
|
+
],
|
|
42
|
+
table: { caption: "Workflow instance counts by status." }
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
var WorkflowThroughputVisualization = defineVisualization({
|
|
46
|
+
meta: {
|
|
47
|
+
...META,
|
|
48
|
+
key: "workflow-system.visualization.throughput",
|
|
49
|
+
title: "Run Throughput",
|
|
50
|
+
description: "Daily workflow instance starts.",
|
|
51
|
+
goal: "Show operational throughput over time.",
|
|
52
|
+
context: "Workflow trend monitoring."
|
|
53
|
+
},
|
|
54
|
+
source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
|
|
55
|
+
visualization: {
|
|
56
|
+
kind: "cartesian",
|
|
57
|
+
variant: "line",
|
|
58
|
+
xDimension: "day",
|
|
59
|
+
yMeasures: ["instances"],
|
|
60
|
+
dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
|
|
61
|
+
measures: [
|
|
62
|
+
{
|
|
63
|
+
key: "instances",
|
|
64
|
+
label: "Instances",
|
|
65
|
+
dataPath: "instances",
|
|
66
|
+
format: "number",
|
|
67
|
+
color: "#0f766e"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
table: { caption: "Daily workflow instance starts." }
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
var WorkflowActiveMetricVisualization = defineVisualization({
|
|
74
|
+
meta: {
|
|
75
|
+
...META,
|
|
76
|
+
key: "workflow-system.visualization.active-work",
|
|
77
|
+
title: "Active Work",
|
|
78
|
+
description: "Current in-flight or pending workflow instances.",
|
|
79
|
+
goal: "Expose active operational workload.",
|
|
80
|
+
context: "Workflow workload comparison."
|
|
81
|
+
},
|
|
82
|
+
source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
|
|
83
|
+
visualization: {
|
|
84
|
+
kind: "metric",
|
|
85
|
+
measure: "value",
|
|
86
|
+
measures: [
|
|
87
|
+
{ key: "value", label: "Instances", dataPath: "value", format: "number" }
|
|
88
|
+
],
|
|
89
|
+
table: { caption: "Active workflow count." }
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
var WorkflowCompletedMetricVisualization = defineVisualization({
|
|
93
|
+
meta: {
|
|
94
|
+
...META,
|
|
95
|
+
key: "workflow-system.visualization.completed-work",
|
|
96
|
+
title: "Completed Work",
|
|
97
|
+
description: "Completed workflow instances in the current sample.",
|
|
98
|
+
goal: "Show output against active workload.",
|
|
99
|
+
context: "Workflow workload comparison."
|
|
100
|
+
},
|
|
101
|
+
source: { primary: INSTANCE_LIST_REF, resultPath: "data" },
|
|
102
|
+
visualization: {
|
|
103
|
+
kind: "metric",
|
|
104
|
+
measure: "value",
|
|
105
|
+
measures: [
|
|
106
|
+
{ key: "value", label: "Instances", dataPath: "value", format: "number" }
|
|
107
|
+
],
|
|
108
|
+
table: { caption: "Completed workflow count." }
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
var WorkflowVisualizationSpecs = [
|
|
112
|
+
WorkflowInstanceStatusVisualization,
|
|
113
|
+
WorkflowThroughputVisualization,
|
|
114
|
+
WorkflowActiveMetricVisualization,
|
|
115
|
+
WorkflowCompletedMetricVisualization
|
|
116
|
+
];
|
|
117
|
+
var WorkflowVisualizationRegistry = new VisualizationRegistry([
|
|
118
|
+
...WorkflowVisualizationSpecs
|
|
119
|
+
]);
|
|
120
|
+
var WorkflowVisualizationRefs = WorkflowVisualizationSpecs.map((spec) => ({
|
|
121
|
+
key: spec.meta.key,
|
|
122
|
+
version: spec.meta.version
|
|
123
|
+
}));
|
|
124
|
+
|
|
125
|
+
// src/visualizations/selectors.ts
|
|
126
|
+
function toDayKey(value) {
|
|
127
|
+
const date = value instanceof Date ? value : new Date(value);
|
|
128
|
+
return date.toISOString().slice(0, 10);
|
|
129
|
+
}
|
|
130
|
+
function createWorkflowVisualizationSections(instances) {
|
|
131
|
+
const statusCounts = new Map;
|
|
132
|
+
const throughput = new Map;
|
|
133
|
+
let activeCount = 0;
|
|
134
|
+
let completedCount = 0;
|
|
135
|
+
for (const instance of instances) {
|
|
136
|
+
statusCounts.set(instance.status, (statusCounts.get(instance.status) ?? 0) + 1);
|
|
137
|
+
const day = toDayKey(instance.startedAt);
|
|
138
|
+
throughput.set(day, (throughput.get(day) ?? 0) + 1);
|
|
139
|
+
if (instance.status === "PENDING" || instance.status === "IN_PROGRESS") {
|
|
140
|
+
activeCount += 1;
|
|
141
|
+
}
|
|
142
|
+
if (instance.status === "COMPLETED") {
|
|
143
|
+
completedCount += 1;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
const primaryItems = [
|
|
147
|
+
{
|
|
148
|
+
key: "workflow-status",
|
|
149
|
+
spec: WorkflowInstanceStatusVisualization,
|
|
150
|
+
data: {
|
|
151
|
+
data: Array.from(statusCounts.entries()).map(([status, count]) => ({
|
|
152
|
+
status,
|
|
153
|
+
instances: count
|
|
154
|
+
}))
|
|
155
|
+
},
|
|
156
|
+
title: "Instance Status Breakdown",
|
|
157
|
+
description: "Status mix across workflow instances.",
|
|
158
|
+
height: 260
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
key: "workflow-throughput",
|
|
162
|
+
spec: WorkflowThroughputVisualization,
|
|
163
|
+
data: {
|
|
164
|
+
data: Array.from(throughput.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, instances: count }))
|
|
165
|
+
},
|
|
166
|
+
title: "Run Throughput",
|
|
167
|
+
description: "Daily workflow starts from current instances."
|
|
168
|
+
}
|
|
169
|
+
];
|
|
170
|
+
const comparisonItems = [
|
|
171
|
+
{
|
|
172
|
+
key: "workflow-active",
|
|
173
|
+
spec: WorkflowActiveMetricVisualization,
|
|
174
|
+
data: { data: [{ value: activeCount }] },
|
|
175
|
+
title: "Active Work",
|
|
176
|
+
description: "Pending and in-progress workflows.",
|
|
177
|
+
height: 200
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
key: "workflow-completed",
|
|
181
|
+
spec: WorkflowCompletedMetricVisualization,
|
|
182
|
+
data: { data: [{ value: completedCount }] },
|
|
183
|
+
title: "Completed Work",
|
|
184
|
+
description: "Completed workflows in the current sample.",
|
|
185
|
+
height: 200
|
|
186
|
+
}
|
|
187
|
+
];
|
|
188
|
+
return {
|
|
189
|
+
primaryItems,
|
|
190
|
+
comparisonItems
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
// src/ui/WorkflowDashboard.visualizations.tsx
|
|
194
|
+
import {
|
|
195
|
+
ComparisonView,
|
|
196
|
+
VisualizationCard,
|
|
197
|
+
VisualizationGrid
|
|
198
|
+
} from "@contractspec/lib.design-system";
|
|
199
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
200
|
+
"use client";
|
|
201
|
+
function WorkflowVisualizationOverview({
|
|
202
|
+
instances
|
|
203
|
+
}) {
|
|
204
|
+
const { primaryItems, comparisonItems } = createWorkflowVisualizationSections(instances);
|
|
205
|
+
return /* @__PURE__ */ jsxDEV("section", {
|
|
206
|
+
className: "space-y-4",
|
|
207
|
+
children: [
|
|
208
|
+
/* @__PURE__ */ jsxDEV("div", {
|
|
209
|
+
children: [
|
|
210
|
+
/* @__PURE__ */ jsxDEV("h3", {
|
|
211
|
+
className: "font-semibold text-lg",
|
|
212
|
+
children: "Workflow Visualizations"
|
|
213
|
+
}, undefined, false, undefined, this),
|
|
214
|
+
/* @__PURE__ */ jsxDEV("p", {
|
|
215
|
+
className: "text-muted-foreground text-sm",
|
|
216
|
+
children: "Contract-backed charts for workflow health and throughput."
|
|
217
|
+
}, undefined, false, undefined, this)
|
|
218
|
+
]
|
|
219
|
+
}, undefined, true, undefined, this),
|
|
220
|
+
/* @__PURE__ */ jsxDEV(VisualizationGrid, {
|
|
221
|
+
children: primaryItems.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
|
|
222
|
+
data: item.data,
|
|
223
|
+
description: item.description,
|
|
224
|
+
height: item.height,
|
|
225
|
+
spec: item.spec,
|
|
226
|
+
title: item.title
|
|
227
|
+
}, item.key, false, undefined, this))
|
|
228
|
+
}, undefined, false, undefined, this),
|
|
229
|
+
/* @__PURE__ */ jsxDEV(ComparisonView, {
|
|
230
|
+
description: "Shared comparison surface for active versus completed work.",
|
|
231
|
+
items: comparisonItems,
|
|
232
|
+
title: "Workload Comparison"
|
|
233
|
+
}, undefined, false, undefined, this)
|
|
234
|
+
]
|
|
235
|
+
}, undefined, true, undefined, this);
|
|
236
|
+
}
|
|
237
|
+
export {
|
|
238
|
+
WorkflowVisualizationOverview
|
|
239
|
+
};
|
|
@@ -1,50 +1,3 @@
|
|
|
1
|
-
// src/ui/hooks/useWorkflowList.ts
|
|
2
|
-
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
|
|
3
|
-
import { useCallback, useEffect, useState } from "react";
|
|
4
|
-
"use client";
|
|
5
|
-
function useWorkflowList(projectId = "local-project") {
|
|
6
|
-
const { handlers } = useTemplateRuntime();
|
|
7
|
-
const workflow = handlers.workflow;
|
|
8
|
-
const [definitions, setDefinitions] = useState([]);
|
|
9
|
-
const [instances, setInstances] = useState([]);
|
|
10
|
-
const [loading, setLoading] = useState(true);
|
|
11
|
-
const [error, setError] = useState(null);
|
|
12
|
-
const fetchData = useCallback(async () => {
|
|
13
|
-
try {
|
|
14
|
-
setLoading(true);
|
|
15
|
-
setError(null);
|
|
16
|
-
const [defResult, instResult] = await Promise.all([
|
|
17
|
-
workflow.listDefinitions({ projectId, limit: 100 }),
|
|
18
|
-
workflow.listInstances({ projectId, limit: 100 })
|
|
19
|
-
]);
|
|
20
|
-
setDefinitions(defResult.definitions);
|
|
21
|
-
setInstances(instResult.instances);
|
|
22
|
-
} catch (err) {
|
|
23
|
-
setError(err instanceof Error ? err : new Error("Failed to load workflows"));
|
|
24
|
-
} finally {
|
|
25
|
-
setLoading(false);
|
|
26
|
-
}
|
|
27
|
-
}, [handlers, projectId]);
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
fetchData();
|
|
30
|
-
}, [fetchData]);
|
|
31
|
-
const stats = {
|
|
32
|
-
totalDefinitions: definitions.length,
|
|
33
|
-
activeDefinitions: definitions.filter((d) => d.status === "ACTIVE").length,
|
|
34
|
-
totalInstances: instances.length,
|
|
35
|
-
pendingInstances: instances.filter((i) => i.status === "PENDING").length,
|
|
36
|
-
completedInstances: instances.filter((i) => i.status === "COMPLETED").length,
|
|
37
|
-
rejectedInstances: instances.filter((i) => i.status === "REJECTED").length
|
|
38
|
-
};
|
|
39
|
-
return {
|
|
40
|
-
definitions,
|
|
41
|
-
instances,
|
|
42
|
-
loading,
|
|
43
|
-
error,
|
|
44
|
-
stats,
|
|
45
|
-
refetch: fetchData
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
1
|
export {
|
|
49
2
|
useWorkflowList
|
|
50
3
|
};
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
|
|
3
3
|
import { useCallback, useEffect, useState } from "react";
|
|
4
4
|
"use client";
|
|
5
|
-
function useWorkflowList(
|
|
6
|
-
const { handlers } = useTemplateRuntime();
|
|
5
|
+
function useWorkflowList(projectIdOverride) {
|
|
6
|
+
const { handlers, projectId: runtimeProjectId } = useTemplateRuntime();
|
|
7
|
+
const projectId = projectIdOverride ?? runtimeProjectId;
|
|
7
8
|
const workflow = handlers.workflow;
|
|
8
9
|
const [definitions, setDefinitions] = useState([]);
|
|
9
10
|
const [instances, setInstances] = useState([]);
|
|
@@ -24,7 +25,7 @@ function useWorkflowList(projectId = "local-project") {
|
|
|
24
25
|
} finally {
|
|
25
26
|
setLoading(false);
|
|
26
27
|
}
|
|
27
|
-
}, [
|
|
28
|
+
}, [projectId, workflow]);
|
|
28
29
|
useEffect(() => {
|
|
29
30
|
fetchData();
|
|
30
31
|
}, [fetchData]);
|
|
@@ -33,6 +34,7 @@ function useWorkflowList(projectId = "local-project") {
|
|
|
33
34
|
activeDefinitions: definitions.filter((d) => d.status === "ACTIVE").length,
|
|
34
35
|
totalInstances: instances.length,
|
|
35
36
|
pendingInstances: instances.filter((i) => i.status === "PENDING").length,
|
|
37
|
+
inProgressInstances: instances.filter((i) => i.status === "IN_PROGRESS").length,
|
|
36
38
|
completedInstances: instances.filter((i) => i.status === "COMPLETED").length,
|
|
37
39
|
rejectedInstances: instances.filter((i) => i.status === "REJECTED").length
|
|
38
40
|
};
|
package/dist/browser/ui/index.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
|
|
3
3
|
import { useCallback, useEffect, useState } from "react";
|
|
4
4
|
"use client";
|
|
5
|
-
function useWorkflowList(
|
|
6
|
-
const { handlers } = useTemplateRuntime();
|
|
5
|
+
function useWorkflowList(projectIdOverride) {
|
|
6
|
+
const { handlers, projectId: runtimeProjectId } = useTemplateRuntime();
|
|
7
|
+
const projectId = projectIdOverride ?? runtimeProjectId;
|
|
7
8
|
const workflow = handlers.workflow;
|
|
8
9
|
const [definitions, setDefinitions] = useState([]);
|
|
9
10
|
const [instances, setInstances] = useState([]);
|
|
@@ -24,7 +25,7 @@ function useWorkflowList(projectId = "local-project") {
|
|
|
24
25
|
} finally {
|
|
25
26
|
setLoading(false);
|
|
26
27
|
}
|
|
27
|
-
}, [
|
|
28
|
+
}, [projectId, workflow]);
|
|
28
29
|
useEffect(() => {
|
|
29
30
|
fetchData();
|
|
30
31
|
}, [fetchData]);
|
|
@@ -33,6 +34,7 @@ function useWorkflowList(projectId = "local-project") {
|
|
|
33
34
|
activeDefinitions: definitions.filter((d) => d.status === "ACTIVE").length,
|
|
34
35
|
totalInstances: instances.length,
|
|
35
36
|
pendingInstances: instances.filter((i) => i.status === "PENDING").length,
|
|
37
|
+
inProgressInstances: instances.filter((i) => i.status === "IN_PROGRESS").length,
|
|
36
38
|
completedInstances: instances.filter((i) => i.status === "COMPLETED").length,
|
|
37
39
|
rejectedInstances: instances.filter((i) => i.status === "REJECTED").length
|
|
38
40
|
};
|