#1071 - Flows YAML — Monaco editor base, list view, create/edit/delete - charles/claude-hooks

No labels

No milestone

No project

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#1071

claude-desktop commented

2026-05-10 15:38:53 +00:00

Collaborator

User story

As an operator, I want a browser-based YAML editor with a flow list, create-from-template dialog, edit/save, and delete, so that I can manage flows without leaving the dashboard or editing files on the host.

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 into editor on submit.
flows/$name.tsx — split-pane: Monaco editor left, side-panel placeholder right (panel content lands in #flows-12 / #flows-13).

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).

Save bar

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

Bundle audit

If Monaco bundle > 500KB chunked, evaluate CodeMirror 6 fallback (per spec §10.3.9). Decision recorded in PR description.

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 a merge dialog.

Out of scope

Autocomplete + semantic validation provider (covered by #flows-12).
Dry-run + run-trace overlay (covered by #flows-13).

References

Spec: docs/specs/flows-yaml.md §10.3.1, §10.3.5, §10.3.6, §10.3.8, §10.3.9.

## User story As an operator, I want a browser-based YAML editor with a flow list, create-from-template dialog, edit/save, and delete, so that I can manage flows without leaving the dashboard or editing files on the host. ## 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 into editor on submit. - [ ] `flows/$name.tsx` — split-pane: Monaco editor left, side-panel placeholder right (panel content lands in #flows-12 / #flows-13). ### 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). ### Save bar - [ ] Dirty indicator, format button (yaml prettifier), validate button (server round-trip), save button. - [ ] Save button disabled while client-side schema errors are present. - [ ] Save sends `PUT /flows/:name` with `expected_mtime`; 409 → diff prompt with current server contents. ### Bundle audit - [ ] If Monaco bundle > 500KB chunked, evaluate CodeMirror 6 fallback (per spec §10.3.9). Decision recorded in PR description. ### 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 a merge dialog. ## Out of scope - Autocomplete + semantic validation provider (covered by #flows-12). - Dry-run + run-trace overlay (covered by #flows-13). ## References - Spec: `docs/specs/flows-yaml.md` §10.3.1, §10.3.5, §10.3.6, §10.3.8, §10.3.9.

claude-desktop added this to the Flows YAML milestone

claude-desktop

closed this issue
added the
area:flows

type:user-story
labels

Rows
Columns

Flows YAML — Monaco editor base, list view, create/edit/delete #1071