charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Flows YAML — Monaco editor with autocomplete, validation, dry-run, run trace #1077

New issue

Closed

opened 2026-05-10 15:42:52 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-10 15:42:52 +00:00

Collaborator

Copy link

User story

As an operator, I want a polished in-browser YAML editor with list view, CRUD, IntelliSense-grade autocomplete, multi-layer validation, side-panel diagnostics + docs, dry-run, and historical run replay overlay, so that authoring and debugging flows feels as good as editing CI YAML in VS Code.

Replaces the React Flow canvas (NF-UI-1..7).

Acceptance criteria

Routes (`apps/web/src/routes/`)

flows/index.tsx — searchable table: name, source badge (default/custom), trigger summary, enabled pill, last-run pill, mtime. Row actions: edit, dry-run, disable, delete (custom only).
flows/new.tsx — name input + starter template picker (blank, pr-opened, issue-labeled, …); loads template YAML on submit.
flows/$name.tsx — split-pane: Monaco editor left, side-panel right.
flows/$name?run=<id> — same view, editor read-only with replay overlay.

Editor stack

monaco-editor + monaco-yaml lazy-loaded as a route-level chunk.
Tokyo Night theme (matches design/tokens.json).
Editor loads /schemas/flows.schema.json once on mount.
First paint < 300ms after route load (perf budget tracked in CI bundle audit).
If Monaco bundle > 500KB chunked, evaluate CodeMirror 6 fallback (spec §10.3.9); decision recorded in PR description.

Save bar

Dirty indicator, format button (yaml prettifier), validate button (server round-trip), save button.
Save disabled while client-side schema errors present.
PUT /flows/:name with expected_mtime; 409 → diff prompt with current server contents.

Autocomplete provider

Top-level keys: name, on, if, priority, concurrency, steps, env.
on: value list: trigger kinds; on.<kind> array list: subtypes filtered by kind.
steps[].uses: — registered op names from schema discriminator.
steps[].with: — required + optional args for the chosen uses:, with type hints + Zod .describe() text.
Inside ${{ }} and if:: event.*, steps.<id>.outputs.<key>, env.*, built-in functions, operators.

Custom diagnostics provider

Duplicate step.id within a flow.
${{ steps.X.outputs.Y }} references unknown step or output key (uses outputsSchema).
if: expression fails to parse (mini-AST round-trip).
uses: not in registered ops list.
concurrency.group template references unknown variable.
Diagnostics run in a web worker, < 50ms p95 on keystroke.

Side panel tabs

Validation — Monaco markers grouped by severity, click → jump-to-line, live count update.
Help — schema docs auto-generated from Zod .describe(): per op, per trigger, per built-in; searchable.
Dry-run — synthetic-event picker (dropdown of triggers + JSON form prefilled per kind). Run button calls POST /flows/:name/dry-run. Output panel: per-step status, duration, resolved args, output. Sample-event templates seeded for each trigger.
Runs — GET /flows/runs?flow=:name paginated list with status pill, duration, trigger summary, link to overlay.

Replay overlay (`?run=<id>`)

Editor read-only.
Per-step gutter decoration: green check, red x, gray skip.
Hover on step shows step output / error JSON in tooltip.
URL is shareable; deep-linked load fetches GET /flows/runs/:id.

Server defence in depth

Validate button calls POST /flows/:name?validate=1 (server returns 422 with same diagnostics shape if invalid).
Save blocks on server validation failures even if client-side reports clean.

Tests (Vitest browser mode)

List renders from mocked API; row actions navigate.
Create-flow dialog writes through to POST /flows.
Save fires PUT /flows/:name and updates dirty state; mtime conflict surfaces merge dialog.
Typing triggers each diagnostic class; autocomplete suggestions snapshot per position.
Dry-run smoke test against each default flow.
Replay overlay renders gutter decorations matching server trace.

Out of scope

Editing during replay.
Cross-flow timeline view.
Diff between two runs.
Git commit-and-push button.

References

Spec: docs/specs/flows-yaml.md §10.3 (all subsections).

## User story As an operator, I want a polished in-browser YAML editor with list view, CRUD, IntelliSense-grade autocomplete, multi-layer validation, side-panel diagnostics + docs, dry-run, and historical run replay overlay, so that authoring and debugging flows feels as good as editing CI YAML in VS Code. Replaces the React Flow canvas (NF-UI-1..7). ## Acceptance criteria ### Routes (`apps/web/src/routes/`) - [ ] `flows/index.tsx` — searchable table: name, source badge (default/custom), trigger summary, enabled pill, last-run pill, mtime. Row actions: edit, dry-run, disable, delete (custom only). - [ ] `flows/new.tsx` — name input + starter template picker (blank, pr-opened, issue-labeled, …); loads template YAML on submit. - [ ] `flows/$name.tsx` — split-pane: Monaco editor left, side-panel right. - [ ] `flows/$name?run=<id>` — same view, editor read-only with replay overlay. ### Editor stack - [ ] `monaco-editor` + `monaco-yaml` lazy-loaded as a route-level chunk. - [ ] Tokyo Night theme (matches `design/tokens.json`). - [ ] Editor loads `/schemas/flows.schema.json` once on mount. - [ ] First paint < 300ms after route load (perf budget tracked in CI bundle audit). - [ ] If Monaco bundle > 500KB chunked, evaluate CodeMirror 6 fallback (spec §10.3.9); decision recorded in PR description. ### Save bar - [ ] Dirty indicator, format button (yaml prettifier), validate button (server round-trip), save button. - [ ] Save disabled while client-side schema errors present. - [ ] `PUT /flows/:name` with `expected_mtime`; 409 → diff prompt with current server contents. ### Autocomplete provider - [ ] Top-level keys: `name`, `on`, `if`, `priority`, `concurrency`, `steps`, `env`. - [ ] `on:` value list: trigger kinds; `on.<kind>` array list: subtypes filtered by kind. - [ ] `steps[].uses:` — registered op names from schema discriminator. - [ ] `steps[].with:` — required + optional args for the chosen `uses:`, with type hints + Zod `.describe()` text. - [ ] Inside `${{ }}` and `if:`: `event.*`, `steps.<id>.outputs.<key>`, `env.*`, built-in functions, operators. ### Custom diagnostics provider - [ ] Duplicate `step.id` within a flow. - [ ] `${{ steps.X.outputs.Y }}` references unknown step or output key (uses `outputsSchema`). - [ ] `if:` expression fails to parse (mini-AST round-trip). - [ ] `uses:` not in registered ops list. - [ ] `concurrency.group` template references unknown variable. - [ ] Diagnostics run in a web worker, < 50ms p95 on keystroke. ### Side panel tabs - [ ] **Validation** — Monaco markers grouped by severity, click → jump-to-line, live count update. - [ ] **Help** — schema docs auto-generated from Zod `.describe()`: per op, per trigger, per built-in; searchable. - [ ] **Dry-run** — synthetic-event picker (dropdown of triggers + JSON form prefilled per kind). Run button calls `POST /flows/:name/dry-run`. Output panel: per-step status, duration, resolved args, output. Sample-event templates seeded for each trigger. - [ ] **Runs** — `GET /flows/runs?flow=:name` paginated list with status pill, duration, trigger summary, link to overlay. ### Replay overlay (`?run=<id>`) - [ ] Editor read-only. - [ ] Per-step gutter decoration: green check, red x, gray skip. - [ ] Hover on step shows step output / error JSON in tooltip. - [ ] URL is shareable; deep-linked load fetches `GET /flows/runs/:id`. ### Server defence in depth - [ ] Validate button calls `POST /flows/:name?validate=1` (server returns 422 with same diagnostics shape if invalid). - [ ] Save blocks on server validation failures even if client-side reports clean. ### Tests (Vitest browser mode) - [ ] List renders from mocked API; row actions navigate. - [ ] Create-flow dialog writes through to `POST /flows`. - [ ] Save fires `PUT /flows/:name` and updates dirty state; mtime conflict surfaces merge dialog. - [ ] Typing triggers each diagnostic class; autocomplete suggestions snapshot per position. - [ ] Dry-run smoke test against each default flow. - [ ] Replay overlay renders gutter decorations matching server trace. ## Out of scope - Editing during replay. - Cross-flow timeline view. - Diff between two runs. - Git commit-and-push button. ## References - Spec: `docs/specs/flows-yaml.md` §10.3 (all subsections).

claude-desktop added this to the Flows YAML milestone

2026-05-10 15:42:52 +00:00

claude-desktop added the

area:flows

type:user-story

labels

2026-05-10 15:42:52 +00:00

charles referenced this issue from a commit

2026-05-10 16:35:20 +00:00

docs(specs): add flows-yaml spec — replace node-graph dispatch with YAML

claude-desktop referenced this issue

2026-05-10 16:36:11 +00:00

feat(flows-yaml): engine + 15 ops + integration layer (closes #1075) #1079

claude-desktop referenced this issue

2026-05-10 18:31:16 +00:00

feat(flows-yaml): 9 defaults + JSON Schema pipeline + REST CRUD + main wiring (closes #1076) #1081

charles referenced this issue from a commit

2026-05-10 19:27:48 +00:00

feat(flows-yaml/ui): Monaco editor + autocomplete + validation + dry-run + replay (closes #1077)

claude-desktop referenced this issue from a pull request that will close it,

2026-05-10 19:28:18 +00:00

feat(flows-yaml/ui): Monaco editor + autocomplete + validation + dry-run + replay (closes #1077) #1082

charles referenced this issue from a commit

2026-05-10 19:35:41 +00:00

fix(flows-yaml/ui): i18n-guard placeholders + test waits + onJump testid

charles referenced this issue from a commit

2026-05-10 19:52:19 +00:00

fix(flows-yaml/ui): wire revealLine + disable save when error diagnostics present

charles closed this issue

2026-05-10 19:56:43 +00:00

charles referenced this issue from a commit

2026-05-10 19:56:44 +00:00

feat(flows-yaml/ui): Monaco editor + autocomplete + validation + dry-run + replay (closes #1077) (#1082)

claude-desktop referenced this issue

2026-05-10 21:07:08 +00:00

feat(flows-yaml): shadow mode + cutover CLI + legacy + UI deletion (closes #1078) #1083

charles referenced this issue from a commit

2026-05-10 21:28:56 +00:00

feat(flows-yaml): shadow mode + cutover CLI + legacy + UI deletion (closes #1078) (#1083)

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

Flows YAML

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#1077

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns

Flows YAML — Monaco editor with autocomplete, validation, dry-run, run trace #1077

User story

Acceptance criteria

Routes (apps/web/src/routes/)

Editor stack

Save bar

Autocomplete provider

Custom diagnostics provider

Side panel tabs

Replay overlay (?run=<id>)

Server defence in depth

Tests (Vitest browser mode)

Out of scope

References

Routes (`apps/web/src/routes/`)

Replay overlay (`?run=<id>`)