diff --git a/prd.json b/prd.json index 0f828f8..d12839d 100644 --- a/prd.json +++ b/prd.json @@ -164,7 +164,7 @@ "Verify in browser using dev-browser skill" ], "priority": 9, - "passes": false, + "passes": true, "notes": "Dependencies: US-057, US-065" }, { diff --git a/progress.txt b/progress.txt index d3a35ea..dea5ea5 100644 --- a/progress.txt +++ b/progress.txt @@ -39,6 +39,8 @@ - In FlowchartEditor, `handleAddVariable` adds a variable *node* to the canvas; `handleAddVariableDefinition` creates a variable *definition* in project data. Avoid naming collisions between "add node" and "add definition" callbacks. - Edge interactions use `onEdgeClick` on ReactFlow component. ConditionEditor opens as a modal overlay since React Flow edges don't support inline panels. - `Condition.value` supports `number | string | boolean` — always check variable type before rendering value inputs for edge conditions. +- `OptionConditionEditor` at `src/components/editor/OptionConditionEditor.tsx` handles choice option conditions. Same pattern as `ConditionEditor` but with simpler props (no edgeId). +- `ChoiceOption` type includes optional `condition?: Condition`. When counting variable usage, check variable nodes + edge conditions + choice option conditions. --- @@ -133,3 +135,19 @@ - The `selectedEdge` is derived via `useMemo` from `edges` state and `selectedEdgeId`, so it always reflects the latest condition data. - No browser testing tools are available; manual verification is needed. --- + +## 2026-01-23 - US-061 +- What was implemented: Choice option condition variable dropdown using OptionConditionEditor component with Combobox +- Files changed: + - `src/types/flowchart.ts` - Added `condition?: Condition` to `ChoiceOption` type; moved `Condition` type definition before `ChoiceOption` for correct reference order + - `src/components/editor/OptionConditionEditor.tsx` - New component: modal-based condition editor for choice options with Combobox variable selection, type-aware operators, type-adaptive value inputs, inline "Add new variable" form, orange warning for invalid references + - `src/components/editor/nodes/ChoiceNode.tsx` - Added condition button per option (clipboard icon), condition summary text below options, OptionConditionEditor integration, EditorContext usage for variables, invalid reference detection with orange warning styling + - `src/app/editor/[projectId]/FlowchartEditor.tsx` - Extended `getVariableUsageCount` to also count variable references in choice option conditions +- **Learnings for future iterations:** + - The `OptionConditionEditor` follows the same pattern as `ConditionEditor` but with a simpler API: it doesn't need an edgeId since it works with a single option's condition via `onChange(condition | undefined)` callback + - The `ChoiceOption` type in `flowchart.ts` now references `Condition`, which required reordering type definitions (Condition must be defined before ChoiceOption) + - Each choice option shows a small clipboard icon button that turns blue when a condition is set, or orange when the referenced variable is invalid/deleted + - A condition summary line (e.g., "if score > 10") appears below each option label when a condition is active + - The `getVariableUsageCount` in FlowchartEditor now counts three sources: variable nodes, edge conditions, and choice option conditions + - No browser testing tools are available; manual verification is needed. +---