@caddis/cli 0.4.45 → 0.4.46

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.
Files changed (191) hide show
  1. package/bundles/antigravity-plugin/plugin.json +1 -1
  2. package/bundles/antigravity-plugin/skills/flow-studio/README.md +46 -7
  3. package/bundles/antigravity-plugin/skills/flow-studio/SKILL.md +80 -81
  4. package/bundles/antigravity-plugin/skills/flow-studio/examples/README.md +8 -0
  5. package/bundles/antigravity-plugin/skills/flow-studio/examples/agent-journey.json +103 -0
  6. package/bundles/antigravity-plugin/skills/flow-studio/examples/approval-flow.json +134 -0
  7. package/bundles/antigravity-plugin/skills/flow-studio/examples/ci-cd-pipeline.json +132 -0
  8. package/bundles/antigravity-plugin/skills/flow-studio/examples/incident-timeline.json +109 -0
  9. package/bundles/antigravity-plugin/skills/flow-studio/examples/order-desk.json +99 -0
  10. package/bundles/antigravity-plugin/skills/flow-studio/examples/service-map.json +133 -0
  11. package/bundles/antigravity-plugin/skills/flow-studio/examples/state-machine.json +106 -0
  12. package/bundles/antigravity-plugin/skills/flow-studio/examples/ticket-lifecycle.json +107 -0
  13. package/bundles/antigravity-plugin/skills/flow-studio/model.schema.json +27 -8
  14. package/bundles/antigravity-plugin/skills/flow-studio/react/FlowStudioView.test.tsx +82 -0
  15. package/bundles/antigravity-plugin/skills/flow-studio/react/FlowStudioView.tsx +67 -0
  16. package/bundles/antigravity-plugin/skills/flow-studio/react/README.md +37 -0
  17. package/bundles/antigravity-plugin/skills/flow-studio/react/index.ts +3 -0
  18. package/bundles/antigravity-plugin/skills/flow-studio/react/native/FlowCanvas.tsx +58 -0
  19. package/bundles/antigravity-plugin/skills/flow-studio/react/native/Inspector.tsx +27 -0
  20. package/bundles/antigravity-plugin/skills/flow-studio/react/native/index.ts +6 -0
  21. package/bundles/antigravity-plugin/skills/flow-studio/react/native/native.css +18 -0
  22. package/bundles/antigravity-plugin/skills/flow-studio/react/native/native.test.tsx +161 -0
  23. package/bundles/antigravity-plugin/skills/flow-studio/react/native/useFlowGeometry.ts +22 -0
  24. package/bundles/antigravity-plugin/skills/flow-studio/react/native/useTrace.ts +29 -0
  25. package/bundles/antigravity-plugin/skills/flow-studio/react/native/useViewport.ts +75 -0
  26. package/bundles/antigravity-plugin/skills/flow-studio/react/states.tsx +13 -0
  27. package/bundles/antigravity-plugin/skills/flow-studio/references/design-language.md +169 -0
  28. package/bundles/antigravity-plugin/skills/flow-studio/references/implement-in-app.md +213 -0
  29. package/bundles/antigravity-plugin/skills/flow-studio/references/model-schema.md +254 -0
  30. package/bundles/antigravity-plugin/skills/flow-studio/references/notes-and-spec.md +74 -0
  31. package/bundles/antigravity-plugin/skills/flow-studio/references/patterns.md +385 -49
  32. package/bundles/antigravity-plugin/skills/flow-studio/references/ux-rules.md +91 -0
  33. package/bundles/antigravity-plugin/skills/flow-studio/references/verify.md +124 -0
  34. package/bundles/antigravity-plugin/skills/flow-studio/scripts/build-engine.mjs +54 -14
  35. package/bundles/antigravity-plugin/skills/flow-studio/scripts/build.mjs +21 -4
  36. package/bundles/antigravity-plugin/skills/flow-studio/scripts/check.mjs +320 -28
  37. package/bundles/antigravity-plugin/skills/flow-studio/scripts/default-notes.json +67 -0
  38. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/auto-entry-guard.mjs +5 -0
  39. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/auto-entry-guard.test.mjs +14 -0
  40. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/auto-entry.test.mjs +31 -0
  41. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/build-engine.test.mjs +30 -2
  42. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/check-args.mjs +18 -0
  43. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/check-args.test.mjs +15 -0
  44. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/check-selftest.test.mjs +64 -4
  45. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/cli.test.mjs +115 -0
  46. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/demo-pack.mjs +23 -0
  47. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/demo-pack.test.mjs +34 -0
  48. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/docs.test.mjs +128 -0
  49. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/library.test.mjs +26 -0
  50. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/react-proof-cleanup.mjs +12 -0
  51. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/react-proof-cleanup.test.mjs +45 -0
  52. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/react-proof-page.mjs +3 -0
  53. package/bundles/antigravity-plugin/skills/flow-studio/scripts/lib/react-proof-page.test.mjs +9 -0
  54. package/bundles/antigravity-plugin/skills/flow-studio/scripts/react-proof.mjs +92 -0
  55. package/bundles/antigravity-plugin/skills/flow-studio/scripts/validate.mjs +5 -1
  56. package/bundles/antigravity-plugin/skills/flow-studio/src/autolayout.test.ts +78 -0
  57. package/bundles/antigravity-plugin/skills/flow-studio/src/autolayout.ts +132 -0
  58. package/bundles/antigravity-plugin/skills/flow-studio/src/chrome.ts +11 -7
  59. package/bundles/antigravity-plugin/skills/flow-studio/src/controls.ts +8 -0
  60. package/bundles/antigravity-plugin/skills/flow-studio/src/ctx.ts +16 -0
  61. package/bundles/antigravity-plugin/skills/flow-studio/src/diff.test.ts +31 -0
  62. package/bundles/antigravity-plugin/skills/flow-studio/src/diff.ts +34 -0
  63. package/bundles/antigravity-plugin/skills/flow-studio/src/engine.ts +83 -32
  64. package/bundles/antigravity-plugin/skills/flow-studio/src/inspector.ts +23 -5
  65. package/bundles/antigravity-plugin/skills/flow-studio/src/interact.ts +21 -8
  66. package/bundles/antigravity-plugin/skills/flow-studio/src/layout.test.ts +75 -0
  67. package/bundles/antigravity-plugin/skills/flow-studio/src/layout.ts +49 -11
  68. package/bundles/antigravity-plugin/skills/flow-studio/src/lib.ts +20 -0
  69. package/bundles/antigravity-plugin/skills/flow-studio/src/metrics.test.ts +57 -0
  70. package/bundles/antigravity-plugin/skills/flow-studio/src/metrics.ts +29 -0
  71. package/bundles/antigravity-plugin/skills/flow-studio/src/model.test.ts +62 -2
  72. package/bundles/antigravity-plugin/skills/flow-studio/src/model.ts +101 -16
  73. package/bundles/antigravity-plugin/skills/flow-studio/src/notes.ts +8 -0
  74. package/bundles/antigravity-plugin/skills/flow-studio/src/page.ts +21 -0
  75. package/bundles/antigravity-plugin/skills/flow-studio/src/playback.test.ts +104 -0
  76. package/bundles/antigravity-plugin/skills/flow-studio/src/playback.ts +106 -0
  77. package/bundles/antigravity-plugin/skills/flow-studio/src/playbackui.ts +193 -0
  78. package/bundles/antigravity-plugin/skills/flow-studio/src/render.ts +66 -18
  79. package/bundles/antigravity-plugin/skills/flow-studio/src/routing.test.ts +21 -1
  80. package/bundles/antigravity-plugin/skills/flow-studio/src/routing.ts +32 -0
  81. package/bundles/antigravity-plugin/skills/flow-studio/src/rules.test.ts +48 -1
  82. package/bundles/antigravity-plugin/skills/flow-studio/src/rules.ts +52 -1
  83. package/bundles/antigravity-plugin/skills/flow-studio/src/selection.test.ts +12 -0
  84. package/bundles/antigravity-plugin/skills/flow-studio/src/selection.ts +4 -0
  85. package/bundles/antigravity-plugin/skills/flow-studio/src/stateCss.test.ts +7 -0
  86. package/bundles/antigravity-plugin/skills/flow-studio/src/stateCss.ts +1 -0
  87. package/bundles/antigravity-plugin/skills/flow-studio/src/styles.css +35 -2
  88. package/bundles/antigravity-plugin/skills/flow-studio/src/trace.test.ts +21 -1
  89. package/bundles/antigravity-plugin/skills/flow-studio/src/trace.ts +18 -0
  90. package/bundles/antigravity-plugin/skills/flow-studio/templates/engine.html +986 -74
  91. package/bundles/antigravity-plugin/skills/flow-studio/templates/engine.shell.html +1 -39
  92. package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.css +190 -0
  93. package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.lib.d.mts +1 -0
  94. package/bundles/antigravity-plugin/skills/flow-studio/templates/flow-studio.lib.mjs +2491 -0
  95. package/bundles/antigravity-plugin/skills/flow-studio/templates/shell-body.html +50 -0
  96. package/bundles/codex/.codex/skills/frontend/flow-studio/README.md +46 -7
  97. package/bundles/codex/.codex/skills/frontend/flow-studio/SKILL.md +80 -81
  98. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/README.md +8 -0
  99. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/agent-journey.json +103 -0
  100. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/approval-flow.json +134 -0
  101. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/ci-cd-pipeline.json +132 -0
  102. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/incident-timeline.json +109 -0
  103. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/order-desk.json +99 -0
  104. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/service-map.json +133 -0
  105. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/state-machine.json +106 -0
  106. package/bundles/codex/.codex/skills/frontend/flow-studio/examples/ticket-lifecycle.json +107 -0
  107. package/bundles/codex/.codex/skills/frontend/flow-studio/model.schema.json +27 -8
  108. package/bundles/codex/.codex/skills/frontend/flow-studio/react/FlowStudioView.test.tsx +82 -0
  109. package/bundles/codex/.codex/skills/frontend/flow-studio/react/FlowStudioView.tsx +67 -0
  110. package/bundles/codex/.codex/skills/frontend/flow-studio/react/README.md +37 -0
  111. package/bundles/codex/.codex/skills/frontend/flow-studio/react/index.ts +3 -0
  112. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/FlowCanvas.tsx +58 -0
  113. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/Inspector.tsx +27 -0
  114. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/index.ts +6 -0
  115. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/native.css +18 -0
  116. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/native.test.tsx +161 -0
  117. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/useFlowGeometry.ts +22 -0
  118. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/useTrace.ts +29 -0
  119. package/bundles/codex/.codex/skills/frontend/flow-studio/react/native/useViewport.ts +75 -0
  120. package/bundles/codex/.codex/skills/frontend/flow-studio/react/states.tsx +13 -0
  121. package/bundles/codex/.codex/skills/frontend/flow-studio/references/design-language.md +169 -0
  122. package/bundles/codex/.codex/skills/frontend/flow-studio/references/implement-in-app.md +213 -0
  123. package/bundles/codex/.codex/skills/frontend/flow-studio/references/model-schema.md +254 -0
  124. package/bundles/codex/.codex/skills/frontend/flow-studio/references/notes-and-spec.md +74 -0
  125. package/bundles/codex/.codex/skills/frontend/flow-studio/references/patterns.md +385 -49
  126. package/bundles/codex/.codex/skills/frontend/flow-studio/references/ux-rules.md +91 -0
  127. package/bundles/codex/.codex/skills/frontend/flow-studio/references/verify.md +124 -0
  128. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/build-engine.mjs +54 -14
  129. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/build.mjs +21 -4
  130. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/check.mjs +320 -28
  131. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/default-notes.json +67 -0
  132. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/auto-entry-guard.mjs +5 -0
  133. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/auto-entry-guard.test.mjs +14 -0
  134. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/auto-entry.test.mjs +31 -0
  135. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/build-engine.test.mjs +30 -2
  136. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/check-args.mjs +18 -0
  137. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/check-args.test.mjs +15 -0
  138. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/check-selftest.test.mjs +64 -4
  139. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/cli.test.mjs +115 -0
  140. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/demo-pack.mjs +23 -0
  141. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/demo-pack.test.mjs +34 -0
  142. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/docs.test.mjs +128 -0
  143. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/library.test.mjs +26 -0
  144. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/react-proof-cleanup.mjs +12 -0
  145. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/react-proof-cleanup.test.mjs +45 -0
  146. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/react-proof-page.mjs +3 -0
  147. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/lib/react-proof-page.test.mjs +9 -0
  148. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/react-proof.mjs +92 -0
  149. package/bundles/codex/.codex/skills/frontend/flow-studio/scripts/validate.mjs +5 -1
  150. package/bundles/codex/.codex/skills/frontend/flow-studio/src/autolayout.test.ts +78 -0
  151. package/bundles/codex/.codex/skills/frontend/flow-studio/src/autolayout.ts +132 -0
  152. package/bundles/codex/.codex/skills/frontend/flow-studio/src/chrome.ts +11 -7
  153. package/bundles/codex/.codex/skills/frontend/flow-studio/src/controls.ts +8 -0
  154. package/bundles/codex/.codex/skills/frontend/flow-studio/src/ctx.ts +16 -0
  155. package/bundles/codex/.codex/skills/frontend/flow-studio/src/diff.test.ts +31 -0
  156. package/bundles/codex/.codex/skills/frontend/flow-studio/src/diff.ts +34 -0
  157. package/bundles/codex/.codex/skills/frontend/flow-studio/src/engine.ts +83 -32
  158. package/bundles/codex/.codex/skills/frontend/flow-studio/src/inspector.ts +23 -5
  159. package/bundles/codex/.codex/skills/frontend/flow-studio/src/interact.ts +21 -8
  160. package/bundles/codex/.codex/skills/frontend/flow-studio/src/layout.test.ts +75 -0
  161. package/bundles/codex/.codex/skills/frontend/flow-studio/src/layout.ts +49 -11
  162. package/bundles/codex/.codex/skills/frontend/flow-studio/src/lib.ts +20 -0
  163. package/bundles/codex/.codex/skills/frontend/flow-studio/src/metrics.test.ts +57 -0
  164. package/bundles/codex/.codex/skills/frontend/flow-studio/src/metrics.ts +29 -0
  165. package/bundles/codex/.codex/skills/frontend/flow-studio/src/model.test.ts +62 -2
  166. package/bundles/codex/.codex/skills/frontend/flow-studio/src/model.ts +101 -16
  167. package/bundles/codex/.codex/skills/frontend/flow-studio/src/notes.ts +8 -0
  168. package/bundles/codex/.codex/skills/frontend/flow-studio/src/page.ts +21 -0
  169. package/bundles/codex/.codex/skills/frontend/flow-studio/src/playback.test.ts +104 -0
  170. package/bundles/codex/.codex/skills/frontend/flow-studio/src/playback.ts +106 -0
  171. package/bundles/codex/.codex/skills/frontend/flow-studio/src/playbackui.ts +193 -0
  172. package/bundles/codex/.codex/skills/frontend/flow-studio/src/render.ts +66 -18
  173. package/bundles/codex/.codex/skills/frontend/flow-studio/src/routing.test.ts +21 -1
  174. package/bundles/codex/.codex/skills/frontend/flow-studio/src/routing.ts +32 -0
  175. package/bundles/codex/.codex/skills/frontend/flow-studio/src/rules.test.ts +48 -1
  176. package/bundles/codex/.codex/skills/frontend/flow-studio/src/rules.ts +52 -1
  177. package/bundles/codex/.codex/skills/frontend/flow-studio/src/selection.test.ts +12 -0
  178. package/bundles/codex/.codex/skills/frontend/flow-studio/src/selection.ts +4 -0
  179. package/bundles/codex/.codex/skills/frontend/flow-studio/src/stateCss.test.ts +7 -0
  180. package/bundles/codex/.codex/skills/frontend/flow-studio/src/stateCss.ts +1 -0
  181. package/bundles/codex/.codex/skills/frontend/flow-studio/src/styles.css +35 -2
  182. package/bundles/codex/.codex/skills/frontend/flow-studio/src/trace.test.ts +21 -1
  183. package/bundles/codex/.codex/skills/frontend/flow-studio/src/trace.ts +18 -0
  184. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/engine.html +986 -74
  185. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/engine.shell.html +1 -39
  186. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/flow-studio.css +190 -0
  187. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/flow-studio.lib.d.mts +1 -0
  188. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/flow-studio.lib.mjs +2491 -0
  189. package/bundles/codex/.codex/skills/frontend/flow-studio/templates/shell-body.html +50 -0
  190. package/bundles/manifest.json +2 -2
  191. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "caddis",
3
- "version": "1.3.131",
3
+ "version": "1.3.132",
4
4
  "description": "caddis — agent-agnostic dev harness as an Antigravity (agy) plugin: TDD skills + commands, single-sourced with the Claude Code plugin."
5
5
  }
@@ -1,10 +1,10 @@
1
1
  # flow-studio (engine source)
2
2
 
3
- Stage S1a of the `flow-studio` skill: a model file (JSON) describes a flow, lifecycle or journey, and one
3
+ The `flow-studio` skill: a model file (JSON) describes a flow, lifecycle or journey, and one
4
4
  engine draws it as a self-contained HTML page with pan and zoom, lanes, linked nodes, a slide-in
5
- inspector, motion that carries state, and numbered implementation notes. The design is in
6
- `.caddis/plans/flow-studio-skill-design.md`; the plan for this stage is `.caddis/plans/flow-studio-s1a-plan.md`.
7
- There is no `SKILL.md` yet: the playbook arrives in stage S2.
5
+ inspector, scenario playback, metric overlays, live update, motion that carries state, and numbered implementation notes. The design is in
6
+ `.caddis/plans/flow-studio-skill-design.md`; the S4 stage status is in `.caddis/plans/flow-studio-s4-status.md`.
7
+ `SKILL.md` is the current playbook.
8
8
 
9
9
  ## Use it
10
10
 
@@ -12,12 +12,22 @@ There is no `SKILL.md` yet: the playbook arrives in stage S2.
12
12
  # from this folder (Node 22.6 or newer)
13
13
  node --experimental-strip-types scripts/validate.mjs examples/lineage.json
14
14
  node --experimental-strip-types scripts/build.mjs examples/lineage.json out/lineage.html
15
+ node --experimental-strip-types scripts/validate.mjs examples/order-desk.json
16
+ node --experimental-strip-types scripts/build.mjs examples/order-desk.json out/order-desk.html
15
17
  ```
16
18
 
17
19
  Open `out/lineage.html`. It has no network access and no libraries.
20
+ `order-desk.json` shows auto layout, a loop-back link, a gateway with labelled exits, a group that opens, two playback scenarios, an SLA, and metrics.
21
+ See [examples/README.md](examples/README.md) for the full catalog of worked scenario models.
22
+ A group with `contains` starts collapsed unless `collapsed` is `false`.
18
23
 
19
- `build.mjs` embeds the model's own `notes` plus any extra notes from `--notes notes.json` (the model's
20
- notes come first, then the file's). Note anchors are CSS selectors for parts of the page, for example
24
+ Play or step through a scenario with the playbar. At a gateway, step mode offers each exit and marks the scenario's next link as suggested. A model can provide `metrics` on nodes and `scenarios` with exact link ids. `FlowStudio.update(model)` validates a new model and keeps the current view, selection, search and playback position. The caller must derive node and link ids from stable business keys. Array positions are not stable ids.
25
+
26
+ `build.mjs` embeds the model's own `notes` plus any extra notes from `--notes notes.json`. Pass
27
+ `--demo-pack` to include the standard shell implementation notes: default notes come first, then
28
+ the model's notes, then extra notes, numbered sequentially 1..n. Default notes whose target elements
29
+ do not exist in the page are dropped (such as `#playbar` when there are no scenarios, or `#modeSwitch`
30
+ when there are fewer than two views). Note anchors are CSS selectors for parts of the page, for example
21
31
  `#viewport`.
22
32
 
23
33
  ## Check a page
@@ -34,6 +44,34 @@ interaction (zoom, pan, select, what-if, view switch), accessibility (names, foc
34
44
  reduced motion), safety (no network, hostile text stays inert) and performance (200 nodes). Exit code 0 means
35
45
  every check passed.
36
46
 
47
+ ## Build inside a React app
48
+
49
+ Choose the route in [implement-in-app.md](references/implement-in-app.md):
50
+
51
+ - **Fast wrapper:** copy `templates/flow-studio.lib.mjs`, its `flow-studio.lib.d.mts` declaration,
52
+ `templates/flow-studio.css`, `react/`, and `src/`. Keep the relative folder layout. Import the CSS once and
53
+ render `FlowStudioView` with a validated `Model`. This route uses the engine's own look and behaviour.
54
+ - **Native components:** copy `react/native/` and `src/`. The hooks handle viewport, geometry, and trace
55
+ state. Adapt `FlowCanvas` and `Inspector` to the app's design system. The app owns the final behaviour and
56
+ visual checks.
57
+
58
+ Both routes need stable node and link ids based on business keys. Use typed loading, empty, ready, and error
59
+ states. Keep the last good graph on a failed refresh. See [react/README.md](react/README.md) for wrapper props
60
+ and the proof app command. The proof creates a temporary Vite app and removes it when finished:
61
+
62
+ ```text
63
+ node scripts/react-proof.mjs
64
+ ```
65
+
66
+ Run the browser harness against a running app page:
67
+
68
+ ```text
69
+ node <skill>/scripts/check.mjs http://127.0.0.1:<port>/<route> --out shots --channel msedge --skip hostile
70
+ ```
71
+
72
+ The `hostile` group needs a separate hostile page, which the proof app does not provide. Record any other
73
+ feature group that the app intentionally skips. A skipped check is not a pass.
74
+
37
75
  `scripts/lib/check-selftest.test.mjs` feeds the harness pages with one deliberate defect each and fails
38
76
  if a defect is not caught. It is skipped when Playwright cannot be resolved, so run it from a folder that has
39
77
  it: `FLOW_STUDIO_CHANNEL=msedge node --test /path/to/flow-studio/scripts/lib/check-selftest.test.mjs`.
@@ -46,8 +84,9 @@ it: `FLOW_STUDIO_CHANNEL=msedge node --test /path/to/flow-studio/scripts/lib/che
46
84
  - `npm test` runs the unit tests (`node --experimental-strip-types --test`).
47
85
  - `templates/engine.html` is generated and committed. After you change `src/` or `templates/engine.shell.html`,
48
86
  run `node --experimental-strip-types scripts/build-engine.mjs`. A test fails when the committed file is stale.
49
- - `build-engine.mjs` needs `esbuild`. It looks in this folder, then in the caddis `cli/` folder, then in the
87
+ - `build-engine.mjs` needs `esbuild`. It looks in `FLOW_STUDIO_NODE_MODULES` first, then this folder, the caddis `cli/` folder, then in the
50
88
  current folder. In a caddis checkout, `cli/node_modules` already has it. Elsewhere, run `npm i -D esbuild`. The stale-engine check compares bytes, so use the same esbuild version as the checkout that committed the file (the caddis `cli/` one).
89
+ - Set `FLOW_STUDIO_NODE_MODULES` to a shared `node_modules` folder to use its `esbuild` first when building in a worktree.
51
90
  - Type check with `tsc -p tsconfig.json` (TypeScript from `cli/node_modules` or your own install).
52
91
  - Examples use fictional data only: this repository is public.
53
92
  - Delete the `out/` folder before exporting bundles. It is ignored by git but not by a file copy.
@@ -5,99 +5,98 @@ description: Design an interactive flow, lifecycle or journey page (nodes, lanes
5
5
 
6
6
  # flow-studio
7
7
 
8
- Turns a one-paragraph brief into an explorable page: stages across, lanes down, linked nodes, pan and zoom,
9
- a slide-in inspector, motion that carries meaning, and numbered implementation notes. One JSON **model**
10
- describes the scenario. One engine draws it. A check script proves it is sound.
8
+ Turns a one-paragraph brief into an explorable interactive flow page: stages across, lanes down, linked nodes, pan and zoom, a slide-in inspector, motion that carries meaning, and numbered implementation notes. One JSON model describes the scenario. One engine renders it. A check script proves it is sound.
9
+
10
+ Paths in the commands below are relative to the folder that holds this file, and `<skill folder>` in a command means that folder. Node 22.6 or newer is needed for `--experimental-strip-types`.
11
+
12
+ ## When to use it
13
+
14
+ Use it for:
15
+ - Data lineage and dependency impact analysis.
16
+ - Ticket, case, and support workflows.
17
+ - Agent and customer journey mapping.
18
+ - CI/CD and release pipelines.
19
+ - Multi-step approval flows.
20
+ - Incident timelines and blast-radius exploration.
21
+ - Microservice architecture dependency maps.
22
+ See `references/patterns.md` for scenario recipes.
23
+
24
+ Do not use it for:
25
+ - Static UI layouts or component screen variants (use `mockup` or `sketch`).
26
+ - Manual whiteboard architectural diagrams (use `draw-io`).
27
+ - Simple text-based markdown diagrams (use `mermaid-diagrams`).
28
+ - Pure data schema specs without flow visualization (use `data-lineage`).
29
+
30
+ ## What works today
31
+
32
+ - **Layouts**: columns and lanes, free coordinate placement (`layout: "free"`), and automatic layout (`layout: "auto"`).
33
+ - **Nodes and links**: forward links, loop-back links, gateway diamonds with labelled exits, collapsible groups, portal chips, placeholders, and cards.
34
+ - **Search and filter**: text search with an N-hop neighborhood filter.
35
+ - **Scenarios and playback**: token animation along links, SLA breach indicators, step mode with branch selection, speed control, and scrubber.
36
+ - **Metrics and what-if**: node metric badges with sparkline history, and inspector what-if ripple simulations.
37
+ - **Views and diffing**: baseline views with automatic addition and gap detection.
38
+ - **Live updates**: `FlowStudio.update(model)` updates data while preserving viewport, selection, and playback state.
39
+ - **Notes and demo pack**: numbered notes anchored to page elements, and built-in demo pack guidance (`--demo-pack`).
11
40
 
12
- Use it for: data lineage and dependency impact, a ticket or case lifecycle, an agent or customer journey, a CI/CD
13
- or release pipeline, an approval flow, an incident timeline, a service map. See `references/patterns.md`.
14
- Not for: a static screen or UI variants (use `mockup` or `sketch`), a chart, a graph with more than 300 nodes.
41
+ ## Process: demo mode
15
42
 
16
- ## What works today (version 0.1)
43
+ 1. **Ask at most three questions**: what is the page for, who reads it, and what are the stages, lanes, and states. If the brief already specifies them, ask nothing.
44
+ 2. **Map the scenario** to columns, lanes, states, nodes, and links using `references/patterns.md`.
45
+ 3. **Write `model.json`**. Check fields in `references/model-schema.md`. Use `examples/lineage.json` or `examples/order-desk.json` as references.
46
+ 4. **Validate**: `node --experimental-strip-types scripts/validate.mjs model.json`. Fix every error and review warnings.
47
+ 5. **Build**: `node --experimental-strip-types scripts/build.mjs model.json out/page.html` (optionally pass `--demo-pack` or `--notes`).
48
+ 6. **Check**: run `node <skill folder>/scripts/check.mjs out/page.html --out shots [--channel msedge]` from a folder whose `node_modules` resolves `playwright`. Every check must pass. Open the screenshots to inspect visual hierarchy and legibility.
49
+ 7. **Show**: present the standalone page and screenshots. Do not declare completion until checks pass.
17
50
 
18
- Left-to-right flows in **columns** (stages) and **lanes** (apps, systems or actors): states with their own look
19
- and motion, portal chips for shared nodes, wide placeholders for what is not recorded, two or more views
20
- (for example Today and Complete), search, a what-if action (a red ripple downstream), a table view, and notes.
51
+ ## Build mode: implement it in a real app
21
52
 
22
- **Not yet** (planned, do not promise them): links that go back to an earlier stage (loops), gateway diamonds,
23
- automatic placement, token playback along a path, live data updates, free x and y placement. If the scenario
24
- needs a loop, show the return as its own node in a later column (for example "Reopened") and say so.
53
+ Use `references/model-schema.md` as the data contract. Follow `references/implement-in-app.md` for the test-first procedure.
25
54
 
26
- ## Process: demo mode
55
+ Choose one React route:
56
+ - **Fast wrapper route**: copy `templates/flow-studio.lib.mjs`, `templates/flow-studio.lib.d.mts`, `templates/flow-studio.css`, `react/`, and `src/` into the app. Import the CSS once and render `FlowStudioView`.
57
+ - **Native components route**: copy `react/native/` and `src/` into the app. Wire `useFlowGeometry`, `useViewport`, and `useTrace`. Style `FlowCanvas` and `Inspector` using the app design system.
27
58
 
28
- 1. **Ask at most three questions**: what is the page for, who reads it, and what are the nouns (the stages, the
29
- lanes, the states). If the brief already says, ask none.
30
- 2. **Map the scenario** to the model (`references/patterns.md` has a recipe per scenario):
31
- columns = stages left to right, lanes = who or what owns the row, states = the vocabulary (for example
32
- new, open, waiting, breached, resolved), nodes = the things, links = the flow.
33
- 3. **Write `model.json`.** Fields are in `model.schema.json`; `examples/lineage.json` is a complete model.
34
- 4. **Validate:** `node --experimental-strip-types scripts/validate.mjs model.json`. Fix every error. Read every
35
- warning.
36
- 5. **Build:** `node --experimental-strip-types scripts/build.mjs model.json out/page.html`. It is one file with
37
- no network use.
38
- 6. **Check:** from a folder that has `playwright`:
39
- `node <skill folder>/scripts/check.mjs out/page.html --out shots [--channel msedge]`.
40
- Every check must pass. Open the screenshots and look at them: the checks do not judge taste.
41
- 7. **Show** the page and the screenshots. Do not call it done until the checks pass and you have looked.
42
-
43
- Paths above are relative to the folder that holds this file. Node 22.6 or newer is needed.
44
-
45
- ## Design rules (the engine and the checks enforce most of them)
46
-
47
- 1. **No orphan.** Every node sits in a lane and has a link. A missing neighbour is a dotted placeholder that says
48
- what is missing. Never guess a link.
49
- 2. **The first view is readable**: fit to width at zoom 0.6 or more (up to 60 groups). Key `0` shows everything.
50
- 3. **Read left to right**, with pinned column headers and a phase ribbon.
51
- 4. **Motion carries state**: links flow by state, gaps breathe, the selected path draws in, a what-if ripples.
52
- No decorative loops, no sweeping scan line, no bounce.
53
- 5. **No permanent side panel.** The inspector slides in on a click and closes with Esc.
54
- 6. **Standard controls**: select, hand, zoom in and out, fit, 100 percent, zoom to selection, fullscreen, keys.
55
- 7. **Every state has a word as well as a colour.** Contrast at least 4.5 in light and dark.
56
- 8. **Titles stay short** (one line at the column width). Long text goes in `subtitle` or `members`.
57
- 9. **Fixed node sizes per kind.** The engine never measures text, so layout does not depend on fonts.
58
- 10. **Reduced motion** removes all motion and keeps the glow.
59
-
60
- ## Model in one screen
59
+ In either route, derive node and link IDs from immutable business keys. Preserve these IDs across data refreshes so `update(model)` retains user state. Represent loading, empty, and error as typed states.
61
60
 
62
- ```
63
- version 1, meta {title, help, asOf, source, labels?}, layout "columns-lanes"
64
- columns [{id, title, short?, width, phase?}] stages, left to right
65
- lanes [{id, title, badge?, badgeTone?, note?, gap?}] rows; gap true = dashed amber "no document" lane
66
- states {id: {word, tone, border, edge, motion, bucket}} the vocabulary; bucket good|neutral|gap
67
- nodes [{id, kind, lane, col, colSpan?, row, state, title, subtitle?, members?, weight?, ref?, upgrade?,
68
- stateIn?, visibleIn?}] kind: card group chip placeholder (others draw as cards)
69
- links [{id, from, to, state, label?, stateIn?, visibleIn?}] from must be in an earlier column than to
70
- views [{id, label, default?}] the first view is the baseline
71
- inspector {relations [3 of {id,label,dir,filter?}], actions [{id,label,dir,staleText}]}
72
- notes [{anchor, title, text}] anchor is a CSS selector for a part of the page
73
- ```
61
+ ## Design rules
74
62
 
75
- Rows are numbers (1 row = 62 px). Keep nodes in one column at least 1 row apart. A lane needs about 1.75 rows of
76
- space between single-row lanes. `validate.mjs` checks all of this and names the node or link at fault.
63
+ 1. **No orphan**: every node sits in a lane and has a link. Missing neighbours use dotted placeholders.
64
+ 2. **Readable first view**: the initial view fits width at zoom 0.6 or higher (up to 60 visible groups). Key `0` fits all.
65
+ 3. **Read left to right**: pinned column headers and a phase ribbon guide the reader.
66
+ 4. **Motion carries state**: links flow by state, gaps breathe, selected paths pulse, what-if ripples. Avoid decorative animation.
67
+ 5. **No permanent side panel**: the inspector slides in on click and closes with Escape.
68
+ 6. **Standard controls**: select, hand, zoom in/out, fit, 100%, zoom to selection, fullscreen, and keyboard shortcuts.
69
+ 7. **Word and colour**: every state provides a label word and tone. Contrast meets 4.5:1 in light and dark themes.
70
+ 8. **Short titles**: titles fit one line at column width. Long descriptions belong in subtitles or member lists.
71
+ 9. **Fixed node dimensions**: node kinds use fixed box sizes so font rendering does not shift layout.
72
+ 10. **Reduced motion**: removes all animations while preserving static borders and status glows.
77
73
 
78
- ## Build mode: implement it in a real app
74
+ ## Model summary
79
75
 
80
- Use the demo page as the visual contract and `model.schema.json` as the data contract.
76
+ ```
77
+ version 1, meta {title, help, asOf, source, labels?}, layout "columns-lanes" | "free" | "auto"
78
+ columns [{id, title, short?, width, phase?}] stages, left to right
79
+ lanes [{id, title, badge?, badgeTone?, note?, gap?}] rows; gap true = dashed amber lane
80
+ states {id: {word, tone, border, edge, motion, bucket}} tone: ok|warn|crit|info|muted|accent; bucket: good|neutral|gap
81
+ nodes [{id, kind, lane?, col?, colSpan?, row?, x?, y?, w?, h?, state, title, subtitle?, members?, weight?,
82
+ ref?, upgrade?, contains?, collapsed?, stateIn?, visibleIn?, sla?, metrics?}]
83
+ links [{id, from, to, state, kind?, label?, stateIn?, visibleIn?}] kind: forward | loop-back
84
+ views [{id, label, default?}] first view serves as baseline
85
+ inspector {relations [up to 3], actions [{id, label, dir, staleText}]}
86
+ notes [{anchor, title, text}] anchor is a CSS selector in the page
87
+ scenarios [{id, label, steps:[{link, at?, dur?, caption?}]}] at in seconds, dur in milliseconds
88
+ ```
81
89
 
82
- 1. Copy the pure modules from `src/` into the app: `model.ts`, `layout.ts`, `viewport.ts`, `routing.ts`,
83
- `trace.ts`, `rules.ts`, `stateCss.ts`, and their `*.test.ts` files. They have no DOM and no dependencies.
84
- 2. Work test first: run the copied tests, then write a failing test for each change.
85
- 3. Write the components in the app's own framework and design system (the demo's DOM and CSS are in
86
- `src/render.ts`, `src/controls.ts`, `src/inspector.ts`, `src/chrome.ts`, `src/styles.css`). Feed them from the
87
- app's real data through the app's hook and service layer. Make node and link ids stable (use business keys, not
88
- array positions).
89
- 4. Keep typed loading, empty and error states. A failed refresh keeps the last good graph. Never draw a missing
90
- value as zero.
91
- 5. Run `scripts/check.mjs` against the running app page for the structural, interaction and accessibility checks
92
- (the page must expose the same element ids, or copy the harness and adapt it).
90
+ ## Limits
93
91
 
94
- A packaged React kit and live-update API are planned; until then, build mode is "copy the pure modules, port the
95
- DOM modules".
92
+ - **Size**: up to 60 visible groups for a readable initial view.
93
+ - **Node capacity**: up to 300 nodes using collapsible groups.
94
+ - **No image export**: the engine does not export PNG, SVG, or PDF files. Use browser print or screenshots.
95
+ - **No visual editor**: models are author-defined JSON; there is no drag-and-drop authoring canvas.
96
96
 
97
97
  ## Gotchas
98
98
 
99
- - Examples and any committed data must be invented: a public repo must not carry real host, job or repo names.
100
- - A model string is data, never markup. The engine renders text safely; keep it that way in any port.
101
- - The caddis pool budgets all skill descriptions together. Keep this one short.
102
- - `templates/engine.html` is generated. After changing `src/`, run `node --experimental-strip-types
103
- scripts/build-engine.mjs` (it needs `esbuild`; see `README.md`).
99
+ - **Time units**: `at` and `sla` use seconds for business elapsed time; `dur` uses milliseconds for UI token transitions.
100
+ - **Fictional data only**: public repositories must never include real hosts, databases, jobs, or customer names.
101
+ - **Data over markup**: strings are treated as plain text and escaped safely. Do not insert raw HTML into model fields.
102
+ - **Generated engine**: `templates/engine.html` is generated. Run `node --experimental-strip-types scripts/build-engine.mjs` after modifying `src/`.
@@ -5,6 +5,14 @@ Model files only. Build one with `node --experimental-strip-types scripts/build.
5
5
  | File | What it shows |
6
6
  |---|---|
7
7
  | `lineage.json` | A fictional data estate ("Northwind Analytics"): nine columns from source system to page, eight lanes (documented, infrastructure, gaps), four evidence states, two views (Today and Complete), portal chips, wide placeholders, the failure what-if. The proof that the generic engine reproduces a hand-built lineage page. |
8
+ | `order-desk.json` | A retail order lifecycle that shows column-lane layout, gateway diamonds, and scenario playback with SLA breach detection. |
9
+ | `ticket-lifecycle.json` | A support ticket workflow that shows column-and-lane layout, loop-back links, metrics, and scenario playback with SLA breach. |
10
+ | `agent-journey.json` | An AI customer service workflow that shows phase columns, actor lanes, gateway branching, and loop-back error recovery. |
11
+ | `incident-timeline.json` | A service outage timeline that shows time bucket columns, blast radius simulation, and before-and-after views. |
12
+ | `ci-cd-pipeline.json` | A deployment pipeline that shows build stages, service lanes, approval gateways, and release rollback links. |
13
+ | `approval-flow.json` | An expense approval workflow that shows automatic layout, role lanes, multiple decision gateways, and loop-back review paths. |
14
+ | `service-map.json` | A microservice architecture that shows auto layout, collapsible data store groups, service health metrics, and blast radius simulation. |
15
+ | `state-machine.json` | An order state machine that shows automatic layout, terminal and active order states, and return-flow loop-back transitions. |
8
16
  | `hostile.json` | The same model with markup and script text in every free-text field (`</script>`, an image with an `onerror`, quotes, U+2028 and U+2029). The check harness loads it to prove nothing executes. Do not use it as a template. |
9
17
 
10
18
  All data is fictional. The names are invented, and no real host, job, table or repository appears in them.
@@ -0,0 +1,103 @@
1
+ {
2
+ "version": 1,
3
+ "meta": {
4
+ "title": "AUTONOMOUS AGENT JOURNEY",
5
+ "help": "Follow an AI agent handling a customer service request from intake through tool execution and human supervision.",
6
+ "asOf": "2026-10-06",
7
+ "source": "Fictional Contoso Retail support telemetry. No real agent executions or customer records are used."
8
+ },
9
+ "layout": "columns-lanes",
10
+ "columns": [
11
+ { "id": "receive", "title": "Receive", "width": 150 },
12
+ { "id": "understand", "title": "Understand", "width": 160 },
13
+ { "id": "plan", "title": "Plan", "width": 150 },
14
+ { "id": "act", "title": "Act", "width": 160 },
15
+ { "id": "verify", "title": "Verify", "width": 160 },
16
+ { "id": "respond", "title": "Respond", "width": 150 }
17
+ ],
18
+ "lanes": [
19
+ { "id": "customer", "title": "Customer" },
20
+ { "id": "agent", "title": "Agent" },
21
+ { "id": "tools", "title": "Tools" },
22
+ { "id": "human", "title": "Human reviewer" }
23
+ ],
24
+ "states": {
25
+ "smooth": { "word": "SMOOTH", "tone": "ok", "border": "solid", "edge": "flow", "motion": "flow", "bucket": "good" },
26
+ "friction": { "word": "FRICTION", "tone": "warn", "border": "dashed", "edge": "dash", "motion": "flow-slow", "bucket": "neutral" },
27
+ "failure": { "word": "FAILURE", "tone": "crit", "border": "dotted", "edge": "dot", "motion": "breathe", "bucket": "gap" },
28
+ "settled": { "word": "SETTLED", "tone": "muted", "border": "solid", "edge": "dash-short", "motion": "none", "bucket": "good" }
29
+ },
30
+ "nodes": [
31
+ { "id": "cust-req", "kind": "start", "lane": "customer", "col": 0, "row": 0, "state": "smooth", "title": "Submit prompt" },
32
+ { "id": "cust-ack", "kind": "end", "lane": "customer", "col": 5, "row": 0, "state": "settled", "title": "Receive response" },
33
+ { "id": "agent-parse", "kind": "card", "lane": "agent", "col": 1, "row": 2, "state": "smooth", "title": "Parse prompt", "metrics": { "label": "Intent match", "value": 94, "max": 100, "unit": "%" } },
34
+ { "id": "agent-gate", "kind": "gateway", "lane": "agent", "col": 2, "row": 2, "state": "smooth", "title": "Confident?" },
35
+ { "id": "agent-eval", "kind": "card", "lane": "agent", "col": 4, "row": 2, "state": "smooth", "title": "Validate response" },
36
+ { "id": "agent-synth", "kind": "card", "lane": "agent", "col": 4, "row": 3.2, "state": "smooth", "title": "Synthesize answer" },
37
+ { "id": "tool-search", "kind": "card", "lane": "tools", "col": 3, "row": 5.2, "state": "smooth", "title": "Search catalog", "metrics": { "label": "Search latency", "value": 140, "max": 500, "unit": "ms", "series": [95, 110, 130, 125, 140] } },
38
+ { "id": "tool-exec", "kind": "card", "lane": "tools", "col": 3, "row": 6.4, "state": "friction", "title": "Execute mutation", "metrics": { "label": "API latency", "value": 480, "max": 600, "unit": "ms", "series": [210, 260, 310, 390, 480] } },
39
+ { "id": "tool-db", "kind": "card", "lane": "tools", "col": 3, "row": 7.6, "state": "smooth", "title": "State verification" },
40
+ { "id": "human-alert", "kind": "card", "lane": "human", "col": 3, "row": 9.6, "state": "friction", "title": "Escalation queue" },
41
+ { "id": "human-review", "kind": "card", "lane": "human", "col": 4, "row": 9.6, "state": "failure", "title": "Reviewer verdict", "sla": 30, "metrics": { "label": "Hold time", "value": 42, "max": 60, "unit": "s" } },
42
+ { "id": "human-approve", "kind": "end", "lane": "human", "col": 5, "row": 9.6, "state": "settled", "title": "Human override" }
43
+ ],
44
+ "links": [
45
+ { "id": "l-cust-parse", "from": "cust-req", "to": "agent-parse", "state": "smooth" },
46
+ { "id": "l-parse-gate", "from": "agent-parse", "to": "agent-gate", "state": "smooth" },
47
+ { "id": "l-gate-alert", "from": "agent-gate", "to": "human-alert", "state": "friction", "label": "Uncertain intent" },
48
+ { "id": "l-gate-search", "from": "agent-gate", "to": "tool-search", "state": "smooth", "label": "Search query" },
49
+ { "id": "l-gate-exec", "from": "agent-gate", "to": "tool-exec", "state": "friction", "label": "Run action" },
50
+ { "id": "l-search-eval", "from": "tool-search", "to": "agent-eval", "state": "smooth" },
51
+ { "id": "l-exec-db", "from": "tool-exec", "to": "agent-eval", "state": "friction" },
52
+ { "id": "l-db-eval", "from": "tool-db", "to": "agent-eval", "state": "smooth" },
53
+ { "id": "l-alert-review", "from": "human-alert", "to": "human-review", "state": "friction" },
54
+ { "id": "l-review-gate", "from": "human-review", "to": "agent-gate", "state": "friction", "kind": "loop-back", "label": "Refined guidance" },
55
+ { "id": "l-eval-synth", "from": "agent-eval", "to": "cust-ack", "state": "smooth" },
56
+ { "id": "l-synth-ack", "from": "agent-synth", "to": "cust-ack", "state": "smooth" },
57
+ { "id": "l-exec-alert", "from": "tool-exec", "to": "human-review", "state": "failure", "label": "Tool failure" },
58
+ { "id": "l-review-approve", "from": "human-review", "to": "human-approve", "state": "settled", "label": "Direct approval" }
59
+ ],
60
+ "scenarios": [
61
+ {
62
+ "id": "normal",
63
+ "label": "Normal request",
64
+ "steps": [
65
+ { "link": "l-cust-parse", "at": 0, "caption": "User requests store operating hours" },
66
+ { "link": "l-parse-gate", "at": 10, "caption": "Agent parses intent with high confidence" },
67
+ { "link": "l-gate-search", "at": 25, "caption": "Knowledge base search tool dispatched" },
68
+ { "link": "l-search-eval", "at": 45, "caption": "Answer returned and verified" },
69
+ { "link": "l-eval-synth", "at": 60, "caption": "Verified response delivered to user" }
70
+ ]
71
+ },
72
+ {
73
+ "id": "escalated",
74
+ "label": "Tool fails, human steps in",
75
+ "steps": [
76
+ { "link": "l-cust-parse", "at": 0, "caption": "User requests order address update" },
77
+ { "link": "l-parse-gate", "at": 10, "caption": "Intent recognized with moderate ambiguity" },
78
+ { "link": "l-gate-exec", "at": 20, "caption": "Agent attempts address update mutation" },
79
+ { "link": "l-exec-alert", "at": 45, "caption": "Mutation times out and crosses SLA target" },
80
+ { "link": "l-review-gate", "at": 65, "caption": "Reviewer inputs valid account address" },
81
+ { "link": "l-gate-search", "at": 80, "caption": "Agent re-runs lookup under new guidance" },
82
+ { "link": "l-search-eval", "at": 95, "caption": "Lookup confirms corrected address" },
83
+ { "link": "l-eval-synth", "at": 110, "caption": "Confirmation sent to customer" }
84
+ ]
85
+ }
86
+ ],
87
+ "inspector": {
88
+ "relations": [
89
+ { "id": "up", "label": "Invoked from", "dir": "up" },
90
+ { "id": "down", "label": "Dispatches to", "dir": "down" },
91
+ { "id": "outcomes", "label": "Journey completion", "dir": "down", "filter": { "kind": "end" } }
92
+ ],
93
+ "actions": [
94
+ { "id": "sim-tool-fail", "label": "Simulate: Tool timeout", "dir": "down", "staleText": "Simulating tool timeout and reviewer handoff" }
95
+ ]
96
+ },
97
+ "notes": [
98
+ { "anchor": "#n_agent-gate", "title": "Confidence evaluation gateway", "text": "The agent checks model confidence before executing tools or escalating to human staff." },
99
+ { "anchor": "#n_tool-search", "title": "Tool latency tracking", "text": "Tool invocation latency is measured across executions to detect API slowdowns early." },
100
+ { "anchor": "#n_human-review", "title": "Supervisory intervention SLA", "text": "Escalated actions wait in the supervisor queue with a 30-second target SLA." },
101
+ { "anchor": "#playbar", "title": "Scenario reproduction", "text": "Replay normal requests or examine supervisory intervention when tool failures occur." }
102
+ ]
103
+ }
@@ -0,0 +1,134 @@
1
+ {
2
+ "version": 1,
3
+ "meta": {
4
+ "title": "EXPENSE APPROVAL WORKFLOW",
5
+ "help": "Track corporate expense reports from submission through management review, policy thresholds, and final disbursement.",
6
+ "asOf": "2026-10-06",
7
+ "source": "Fictional Contoso Retail expense system. No real employee records or transactions are used."
8
+ },
9
+ "layout": "auto",
10
+ "columns": [
11
+ { "id": "submit", "title": "Submit", "width": 150 },
12
+ { "id": "review", "title": "Manager review", "width": 160 },
13
+ { "id": "policy", "title": "Policy check", "width": 160 },
14
+ { "id": "finance", "title": "Finance review", "width": 160 },
15
+ { "id": "audit", "title": "Compliance", "width": 150 },
16
+ { "id": "payout", "title": "Disbursement", "width": 160 },
17
+ { "id": "settled", "title": "Close", "width": 150 }
18
+ ],
19
+ "lanes": [
20
+ { "id": "employee", "title": "Employee" },
21
+ { "id": "manager", "title": "Manager" },
22
+ { "id": "finance", "title": "Finance" },
23
+ { "id": "auditor", "title": "Auditor" }
24
+ ],
25
+ "states": {
26
+ "pending": { "word": "PENDING", "tone": "warn", "border": "dashed", "edge": "dash", "motion": "flow-slow", "bucket": "neutral" },
27
+ "approved": { "word": "APPROVED", "tone": "ok", "border": "solid", "edge": "flow", "motion": "flow", "bucket": "good" },
28
+ "rejected": { "word": "REJECTED", "tone": "crit", "border": "dotted", "edge": "dot", "motion": "none", "bucket": "gap" },
29
+ "waiting": { "word": "WAITING", "tone": "accent", "border": "dashed", "edge": "dash", "motion": "breathe", "bucket": "neutral" }
30
+ },
31
+ "nodes": [
32
+ { "id": "emp_draft", "kind": "start", "lane": "employee", "state": "pending", "title": "Draft claim", "subtitle": "Enter expenses" },
33
+ { "id": "emp_submit", "kind": "card", "lane": "employee", "state": "pending", "title": "Submit claim", "subtitle": "Attach receipts" },
34
+ { "id": "emp_resubmit", "kind": "card", "lane": "employee", "state": "waiting", "title": "Revise claim", "subtitle": "Add details", "sla": 120 },
35
+ { "id": "emp_notified", "kind": "end", "lane": "employee", "state": "approved", "title": "Receive notice", "subtitle": "Claim updated" },
36
+ { "id": "mgr_review", "kind": "card", "lane": "manager", "state": "pending", "title": "Review claim", "subtitle": "Verify line items" },
37
+ { "id": "mgr_gate", "kind": "gateway", "lane": "manager", "state": "pending", "title": "Manager approves?", "subtitle": "Approval threshold" },
38
+ { "id": "mgr_reject", "kind": "end", "lane": "manager", "state": "rejected", "title": "Manager rejected", "subtitle": "Claim denied" },
39
+ { "id": "fin_gate", "kind": "gateway", "lane": "finance", "state": "pending", "title": "Over the limit?", "subtitle": "Policy limit check" },
40
+ { "id": "fin_standard", "kind": "card", "lane": "finance", "state": "approved", "title": "Standard approve", "subtitle": "Within limits" },
41
+ { "id": "fin_exec", "kind": "card", "lane": "finance", "state": "pending", "title": "Exec approval", "subtitle": "Above threshold", "sla": 45 },
42
+ { "id": "fin_disburse", "kind": "card", "lane": "finance", "state": "approved", "title": "Process payment", "subtitle": "Issue reimbursement", "metrics": { "label": "Batch queue", "value": 14, "max": 20, "unit": "claims", "series": [8, 10, 12, 11, 14] } },
43
+ { "id": "fin_paid", "kind": "end", "lane": "finance", "state": "approved", "title": "Paid", "subtitle": "Funds transferred" },
44
+ { "id": "fin_reject", "kind": "end", "lane": "finance", "state": "rejected", "title": "Rejected", "subtitle": "Policy violation" },
45
+ { "id": "aud_sample", "kind": "card", "lane": "auditor", "state": "pending", "title": "Sample review", "subtitle": "Random audit" },
46
+ { "id": "aud_verify", "kind": "card", "lane": "auditor", "state": "approved", "title": "Tax check", "subtitle": "Validate tax codes" },
47
+ { "id": "aud_archive", "kind": "end", "lane": "auditor", "state": "approved", "title": "Archive file", "subtitle": "Store records" }
48
+ ],
49
+ "links": [
50
+ { "id": "l_draft_sub", "from": "emp_draft", "to": "emp_submit", "state": "pending" },
51
+ { "id": "l_sub_rev", "from": "emp_submit", "to": "mgr_review", "state": "pending" },
52
+ { "id": "l_rev_mgate", "from": "mgr_review", "to": "mgr_gate", "state": "pending" },
53
+ { "id": "l_mgate_fgate", "from": "mgr_gate", "to": "fin_gate", "state": "approved", "label": "Approved" },
54
+ { "id": "l_mgate_mrej", "from": "mgr_gate", "to": "mgr_reject", "state": "rejected", "label": "Rejected" },
55
+ { "id": "l_mgate_info", "from": "mgr_gate", "to": "emp_resubmit", "state": "waiting", "kind": "loop-back", "label": "Needs more info" },
56
+ { "id": "l_resub_rev", "from": "emp_resubmit", "to": "mgr_review", "state": "pending" },
57
+ { "id": "l_fgate_std", "from": "fin_gate", "to": "fin_standard", "state": "approved", "label": "Under limit" },
58
+ { "id": "l_fgate_exec", "from": "fin_gate", "to": "fin_exec", "state": "pending", "label": "Over limit" },
59
+ { "id": "l_fgate_frej", "from": "fin_gate", "to": "fin_reject", "state": "rejected", "label": "Policy breach" },
60
+ { "id": "l_std_pay", "from": "fin_standard", "to": "fin_disburse", "state": "approved" },
61
+ { "id": "l_exec_aud", "from": "fin_exec", "to": "aud_verify", "state": "approved" },
62
+ { "id": "l_aud_pay", "from": "aud_verify", "to": "fin_disburse", "state": "approved" },
63
+ { "id": "l_pay_paid", "from": "fin_disburse", "to": "fin_paid", "state": "approved" },
64
+ { "id": "l_paid_notif", "from": "fin_paid", "to": "emp_notified", "state": "approved" },
65
+ { "id": "l_aud_sample", "from": "fin_standard", "to": "aud_sample", "state": "pending" },
66
+ { "id": "l_sample_arch", "from": "aud_sample", "to": "aud_archive", "state": "approved" }
67
+ ],
68
+ "inspector": {
69
+ "relations": [
70
+ { "id": "upstream", "label": "Submitted by", "dir": "up" },
71
+ { "id": "down", "label": "Routes to", "dir": "down" },
72
+ { "id": "audit", "label": "Audit record", "dir": "down" }
73
+ ],
74
+ "actions": [
75
+ {
76
+ "id": "sim_reject",
77
+ "label": "Simulate: reject claim",
78
+ "dir": "down",
79
+ "staleText": "Claim rejected. Notification sent to employee."
80
+ }
81
+ ]
82
+ },
83
+ "notes": [
84
+ {
85
+ "anchor": "#viewport",
86
+ "title": "Expense routing overview",
87
+ "text": "Expenses route through management sign-off and finance policy thresholds before payment."
88
+ },
89
+ {
90
+ "anchor": "#n_mgr_gate",
91
+ "title": "Manager approval gate",
92
+ "text": "Managers verify expense legitimacy, reject non-compliant items, or ask for receipts."
93
+ },
94
+ {
95
+ "anchor": "#n_fin_gate",
96
+ "title": "Policy limit gateway",
97
+ "text": "Expenses above the standard threshold escalate to executive finance approval."
98
+ },
99
+ {
100
+ "anchor": "#playbar",
101
+ "title": "Scenario playback",
102
+ "text": "Select the standard or executive path to see workflow routing and SLA timing."
103
+ }
104
+ ],
105
+ "scenarios": [
106
+ {
107
+ "id": "standard_path",
108
+ "label": "Standard approval",
109
+ "steps": [
110
+ { "link": "l_draft_sub", "at": 0, "caption": "Employee submits expense report" },
111
+ { "link": "l_sub_rev", "at": 10, "caption": "Direct manager begins receipt review" },
112
+ { "link": "l_rev_mgate", "at": 20, "caption": "Receipts verified and approved by manager" },
113
+ { "link": "l_mgate_fgate", "at": 30, "caption": "Claim enters finance policy check" },
114
+ { "link": "l_fgate_std", "at": 40, "caption": "Total falls within standard spending policy" },
115
+ { "link": "l_std_pay", "at": 50, "caption": "Finance schedules payment batch" },
116
+ { "link": "l_pay_paid", "at": 60, "caption": "Payment disbursed directly to bank account" }
117
+ ]
118
+ },
119
+ {
120
+ "id": "exec_path",
121
+ "label": "Executive approval",
122
+ "steps": [
123
+ { "link": "l_draft_sub", "at": 0, "caption": "Employee submits high-value travel claim" },
124
+ { "link": "l_sub_rev", "at": 10, "caption": "Manager approves baseline receipts" },
125
+ { "link": "l_rev_mgate", "at": 20, "caption": "Manager routes to finance queue" },
126
+ { "link": "l_mgate_fgate", "at": 30, "caption": "Policy engine flags claim above standard limit" },
127
+ { "link": "l_fgate_exec", "at": 55, "caption": "Executive review exceeds target SLA window" },
128
+ { "link": "l_exec_aud", "at": 70, "caption": "Tax compliance auditor validates receipts" },
129
+ { "link": "l_aud_pay", "at": 85, "caption": "Auditor clears claim for disbursement" },
130
+ { "link": "l_pay_paid", "at": 100, "caption": "Reimbursement paid to employee" }
131
+ ]
132
+ }
133
+ ]
134
+ }