From 451de748343da3a7bb4c62f7485620668b51f2ec Mon Sep 17 00:00:00 2001 From: shrimbly Date: Mon, 12 Jan 2026 13:57:14 +1300 Subject: [PATCH] docs(10-01): complete node autosizing plan Tasks completed: 2/2 - Create node dimension calculation utility - Auto-resize generate nodes on output SUMMARY: .planning/phases/10-node-autosizing/10-01-SUMMARY.md --- .planning/ROADMAP.md | 8 +- .planning/STATE.md | 24 ++--- .../10-node-autosizing/10-01-SUMMARY.md | 94 +++++++++++++++++++ 3 files changed, 111 insertions(+), 15 deletions(-) create mode 100644 .planning/phases/10-node-autosizing/10-01-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index b460e925..4dbb2e91 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -126,15 +126,15 @@ Plans: Plans: - [x] 09-01: Video history types, store support, load API, and carousel UI -#### Phase 10: Node Autosizing +#### Phase 10: Node Autosizing ✅ **Goal**: Auto-size nodes to output dimensions and aspect ratio **Depends on**: Phase 9 **Research**: Unlikely (React Flow node sizing) -**Plans**: TBD +**Plans**: 1 plan Plans: -- [ ] 10-01: TBD (run /gsd:plan-phase 10 to break down) +- [x] 10-01: Node dimension utility and auto-resize on output #### Phase 11: UI Polish @@ -173,6 +173,6 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → | 7. Video Connections | v1.1 | 1/1 | Complete | 2026-01-12 | | 8. Error Display | v1.1 | 1/1 | Complete | 2026-01-12 | | 9. Video History | v1.1 | 1/1 | Complete | 2026-01-12 | -| 10. Node Autosizing | v1.1 | 0/? | Not started | - | +| 10. Node Autosizing | v1.1 | 1/1 | Complete | 2026-01-12 | | 11. UI Polish | v1.1 | 0/? | Not started | - | | 12. Model Improvements | v1.1 | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 2dec2a7b..d3cd626f 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -5,23 +5,23 @@ See: .planning/PROJECT.md (updated 2026-01-09) **Core value:** Provider infrastructure that dynamically discovers models from external APIs, enabling users to access hundreds of image/video generation models without hardcoding schemas. -**Current focus:** Phase 10 - Node Autosizing +**Current focus:** Phase 11 - UI Polish ## Current Position -Phase: 9 of 12 (Video History) +Phase: 10 of 12 (Node Autosizing) Plan: 1 of 1 complete Status: Phase complete -Last activity: 2026-01-12 - Completed 09-01-PLAN.md +Last activity: 2026-01-12 - Completed 10-01-PLAN.md -Progress: ███░░░░░░░ 33% +Progress: ████░░░░░░ 37% ## Performance Metrics **Velocity:** -- Total plans completed: 18 -- Average duration: 7.4 min -- Total execution time: 2.23 hours +- Total plans completed: 19 +- Average duration: 7.1 min +- Total execution time: 2.27 hours **By Phase:** @@ -36,10 +36,11 @@ Progress: ███░░░░░░░ 33% | 7. Video Connections | 1/1 | 4 min | 4 min | | 8. Error Display | 1/1 | 14 min | 14 min | | 9. Video History | 1/1 | 12 min | 12 min | +| 10. Node Autosizing | 1/1 | 2 min | 2 min | **Recent Trend:** -- Last 5 plans: 28 min, 5 min, 4 min, 14 min, 12 min -- Trend: Consistent execution with established patterns +- Last 5 plans: 5 min, 4 min, 14 min, 12 min, 2 min +- Trend: Fast execution with established patterns ## Accumulated Context @@ -79,6 +80,7 @@ Recent decisions affecting current work: - Fetch schema from provider API at model selection time with 10-min cache - Filter internal params, prioritize user-relevant ones (seed, steps, guidance) - Collapsible parameters section to keep node UI compact +- Node autosizing constraints: 200-500px width, 200-600px height, ~100px chrome ### Deferred Issues @@ -97,6 +99,6 @@ Recent decisions affecting current work: ## Session Continuity Last session: 2026-01-12 -Stopped at: Phase 9 Video History completed +Stopped at: Phase 10 Node Autosizing completed Resume file: None -Next action: Plan Phase 10 (Node Autosizing) +Next action: Plan Phase 11 (UI Polish) diff --git a/.planning/phases/10-node-autosizing/10-01-SUMMARY.md b/.planning/phases/10-node-autosizing/10-01-SUMMARY.md new file mode 100644 index 00000000..b857b4cc --- /dev/null +++ b/.planning/phases/10-node-autosizing/10-01-SUMMARY.md @@ -0,0 +1,94 @@ +--- +phase: 10-node-autosizing +plan: 01 +subsystem: ui +tags: [react-flow, node-sizing, aspect-ratio] + +# Dependency graph +requires: + - phase: 06-video-polish + provides: GenerateImageNode and GenerateVideoNode base implementation +provides: + - Node dimension calculation utility (getImageDimensions, getVideoDimensions, calculateNodeSize) + - Auto-resize behavior for generate nodes based on output aspect ratio +affects: [ui-polish] + +# Tech tracking +tech-stack: + added: [] + patterns: [node-auto-resize-on-output] + +key-files: + created: + - src/utils/nodeDimensions.ts + modified: + - src/components/nodes/GenerateImageNode.tsx + - src/components/nodes/GenerateVideoNode.tsx + +key-decisions: + - "Node sizing constraints: 200-500px width, 200-600px height" + - "Node chrome allocation: ~100px for header and controls" + - "Use requestAnimationFrame to avoid React Flow update conflicts" + +patterns-established: + - "Output-based resize: useEffect watches output, extracts dimensions, applies constrained sizing" + +issues-created: [] + +# Metrics +duration: 2min +completed: 2026-01-12 +--- + +# Phase 10 Plan 01: Node Autosizing Summary + +**Generate nodes auto-resize to match output image/video aspect ratio with constrained dimensions (200-500px width, 200-600px height)** + +## Performance + +- **Duration:** 2 min +- **Started:** 2026-01-12T00:53:24Z +- **Completed:** 2026-01-12T00:55:46Z +- **Tasks:** 2 +- **Files modified:** 3 + +## Accomplishments +- Created node dimension calculation utility with image/video dimension extraction +- GenerateImageNode auto-resizes when output image is set +- GenerateVideoNode auto-resizes when output video is set +- Aspect ratio maintained within size constraints + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Create node dimension calculation utility** - `b0d0a4c` (feat) +2. **Task 2: Auto-resize generate nodes on output** - `52efbea` (feat) + +## Files Created/Modified +- `src/utils/nodeDimensions.ts` - Utility for image/video dimension extraction and node size calculation +- `src/components/nodes/GenerateImageNode.tsx` - Added auto-resize effect on outputImage change +- `src/components/nodes/GenerateVideoNode.tsx` - Added auto-resize effect on outputVideo change + +## Decisions Made +- Node sizing constraints: min 200px, max 500px width; min 200px, max 600px height +- Account for ~100px node chrome (header ~40px, controls ~60px) +- Use requestAnimationFrame to avoid React Flow update conflicts during resize +- Track previous output value to prevent redundant resize operations + +## Deviations from Plan + +None - plan executed exactly as written. + +## Issues Encountered + +None + +## Next Phase Readiness +- Phase 10 complete with 1/1 plans finished +- Node autosizing working for both image and video generation nodes +- Ready for Phase 11: UI Polish + +--- +*Phase: 10-node-autosizing* +*Completed: 2026-01-12*