feat(web): flow assistant — multi-proposal + list-page surface #391

Merged
charles merged 1 commit from feat/flow-assistant-relocate-multi into main 2026-04-26 16:51:24 +00:00
Collaborator

Summary

Moves the flow assistant from the canvas-only side-drawer onto the /flows list page as a primary-surface drawer, and extends it to propose multiple flows in one turn for complex workflows.

Operator can now type "a flow that opens a PR, requests review, and merges on approval" and get N proposed flows surfaced as separate cards — each with its own Apply / Discard / Edit buttons + a bulk "Apply all".

Server (single prompt change)

flow-assistant-routes.ts — system prompt relaxes the "ONE fenced ```json``` block per reply" rule. Encourages multiple blocks for multi-trigger workflows. The fenced-block extractor + tool_use SSE event already supported N blocks; only the prompt needed to change.

Client

FlowAssistantPanel reworked:

  • New mode: "create" | "canvas" prop
  • Per-message proposal field → proposals: Proposal[] (tool_use APPENDS instead of overwrites)
  • Each proposal renders its own card with status (valid / invalid / applied / discarded)
  • Per-card actions:
    • Applymode=create: POST /flows; mode=canvas: replace canvas state
    • Discard — local opt-out
    • Edit (create only) — stash proposal in sessionStorage, navigate to /flows/new (which reads + pre-loads the canvas)
  • Bulk "Apply all N" when 2+ valid proposals are still pending in mode=create

flows.index.tsx — assistant lives in a 440px right-side drawer toggled by Assistant button. On close, invalidates ["flows"] query so newly-created flows appear in the list.

flows.new.tsx — reads sessionStorage["flow-assistant-prefill"] on mount and seeds the canvas with the proposal.

FlowCanvas.tsx — passes mode="canvas" to its mounted panel (unchanged behaviour, just the new prop).

Test plan

  • 4 new e2e tests on FlowAssistantPanel.test.tsx:
    • multiple tool_use events accumulate as N cards
    • create mode: Apply → createFlow → marks card applied
    • create mode: Discard hides actions
    • create mode: Apply All batches N parallel creates
  • All existing 9 panel tests updated to pass mode="canvas" → 13/13 pass
  • Server: flow-assistant-routes.test.ts 10/10 pass
  • Web typecheck clean
  • Server typecheck clean
  • Manual: open /flows, click Assistant, type "a workflow with 3 steps…", verify 3 cards

🤖 Generated with Claude Code

## Summary Moves the flow assistant from the canvas-only side-drawer onto the `/flows` list page as a primary-surface drawer, and extends it to propose **multiple flows in one turn** for complex workflows. Operator can now type `"a flow that opens a PR, requests review, and merges on approval"` and get N proposed flows surfaced as separate cards — each with its own Apply / Discard / Edit buttons + a bulk "Apply all". ## Server (single prompt change) `flow-assistant-routes.ts` — system prompt relaxes the "ONE fenced ` ```json``` ` block per reply" rule. Encourages multiple blocks for multi-trigger workflows. The fenced-block extractor + `tool_use` SSE event already supported N blocks; only the prompt needed to change. ## Client **`FlowAssistantPanel`** reworked: - New `mode: "create" | "canvas"` prop - Per-message `proposal` field → `proposals: Proposal[]` (tool_use APPENDS instead of overwrites) - Each proposal renders its own card with status (valid / invalid / applied / discarded) - Per-card actions: - **Apply** — `mode=create`: POST /flows; `mode=canvas`: replace canvas state - **Discard** — local opt-out - **Edit** (create only) — stash proposal in `sessionStorage`, navigate to `/flows/new` (which reads + pre-loads the canvas) - **Bulk "Apply all N"** when 2+ valid proposals are still pending in `mode=create` **`flows.index.tsx`** — assistant lives in a 440px right-side drawer toggled by ✨ Assistant button. On close, invalidates `["flows"]` query so newly-created flows appear in the list. **`flows.new.tsx`** — reads `sessionStorage["flow-assistant-prefill"]` on mount and seeds the canvas with the proposal. **`FlowCanvas.tsx`** — passes `mode="canvas"` to its mounted panel (unchanged behaviour, just the new prop). ## Test plan - [x] 4 new e2e tests on `FlowAssistantPanel.test.tsx`: - multiple `tool_use` events accumulate as N cards - create mode: Apply → createFlow → marks card applied - create mode: Discard hides actions - create mode: Apply All batches N parallel creates - [x] All existing 9 panel tests updated to pass `mode="canvas"` → 13/13 pass - [x] Server: `flow-assistant-routes.test.ts` 10/10 pass - [x] Web typecheck clean - [x] Server typecheck clean - [ ] Manual: open `/flows`, click ✨ Assistant, type "a workflow with 3 steps…", verify 3 cards 🤖 Generated with [Claude Code](https://claude.com/claude-code)
feat(web): flow assistant — multi-proposal + list-page surface
All checks were successful
qa / qa (pull_request) Successful in 6m28s
qa / dockerfile (pull_request) Successful in 12s
3272ee7d7f
Moves the flow assistant from the canvas-only side-drawer onto the
`/flows` list page as a primary-surface drawer, and extends it to
propose MULTIPLE flows in one turn for complex workflows.

## Server

`flow-assistant-routes.ts` system-prompt relaxes the "ONE fenced
\`\`\`json\`\`\` block per reply" rule — encourages multiple blocks
when the operator describes a workflow that naturally spans several
triggers. The fenced-block extractor + tool_use SSE event already
supported N blocks; only the prompt needed to change.

## Client

`FlowAssistantPanel` reworked:
- `mode: "create" | "canvas"` prop selects mounting context
- Per-message `proposal` field becomes `proposals: Proposal[]` —
  tool_use events APPEND instead of overwriting
- Each proposal renders its own preview card with per-card status
  (valid / invalid / applied / discarded)
- Per-card actions:
  - Apply — `mode=create`: POST /flows via `createFlow`;
            `mode=canvas`: replace canvas state via `onApply`
  - Discard — local-only opt-out
  - Edit — `mode=create` only: stash proposal in sessionStorage,
           navigate to `/flows/new` (the new-flow route reads it on
           mount and pre-loads the canvas)
- Bulk "Apply all N" button when 2+ valid proposals are still
  pending in `mode=create`

`flows.index.tsx`: assistant lives in a 440px right-side drawer,
toggled by a " Assistant" button next to "+ Create flow". On
close, invalidates the `["flows"]` query so newly-created proposals
appear in the list.

`flows.new.tsx`: reads `sessionStorage["flow-assistant-prefill"]` on
mount and seeds the canvas with the proposal — wired to the
"Edit-in-canvas" Edit button on each proposal card.

`FlowCanvas.tsx`: now passes `mode="canvas"` to its mounted panel
(unchanged behaviour, just the new prop).

## Tests

4 new e2e tests in `FlowAssistantPanel.test.tsx`:
- multiple tool_use events accumulate as N proposal cards
- create mode: Apply triggers createFlow, marks card applied
- create mode: Discard hides actions
- create mode: Apply all batches N valid proposals via createFlow

Existing 9 tests updated to pass `mode="canvas"`. All 13 pass.

Server side: `flow-assistant-routes.test.ts` — 10 pass / 0 fail.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
charles deleted branch feat/flow-assistant-relocate-multi 2026-04-26 16:51:24 +00:00
Sign in to join this conversation.
No reviewers
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!391
No description provided.