popiart-node-canvas/.planning/phases/26-template-preview-rendering/26-01-PLAN.md

phase	plan	type	subsystem
26-template-preview-rendering	1	execute	ui

Create visual preview of workflow templates showing node layout and connections before loading.

Purpose: Help users understand template structure at a glance, making it easier to select the right workflow. Output: WorkflowPreview component integrated into TemplateCard showing miniature node graph.

<execution_context> @~/.claude/get-shit-done/workflows/execute-phase.md @~/.claude/get-shit-done/templates/summary.md @~/.claude/get-shit-done/references/checkpoints.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Phase 25 context (template explorer foundation):

@.planning/phases/25-template-explorer-ui/25-01-SUMMARY.md @.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md

Key source files:

@src/components/quickstart/TemplateCard.tsx @src/components/quickstart/TemplateExplorerView.tsx @src/lib/quickstart/templates.ts @src/components/WorkflowCanvas.tsx

Tech stack available:

• @xyflow/react v12.9.3 (React Flow) for node graph rendering
• Tailwind CSS for styling
• Existing template system with workflow data (nodes, edges)

Established patterns:

• onWheelCapture for isolating modal scroll from React Flow canvas
• Templates have full workflow data available via PRESET_TEMPLATES
• Category color coding: blue=product, purple=style, green=composition, amber=community

Constraining decisions:

• Phase 25-01: TemplateCard accepts previewImage prop, shows static thumbnail
• Phase 25-02: Templates already have workflow.nodes and workflow.edges available
• Node types have consistent colors in minimap (WorkflowCanvas.tsx)

Task 1: Create WorkflowPreview component src/components/quickstart/WorkflowPreview.tsx Create a reusable WorkflowPreview component that renders a miniature, non-interactive React Flow visualization.

Implementation details:

1. Accept workflow prop with nodes and edges arrays
2. Create simplified preview nodes - just colored rectangles based on node type (no internal content):
   • imageInput: green-500
   • annotation: yellow-500
   • prompt: blue-500
   • nanoBanana: orange-500 (generate nodes)
   • generateVideo: purple-500
   • llmGenerate: cyan-500
   • splitGrid: pink-500
   • output: gray-500
3. Use React Flow with these props for non-interactive mode:
   • nodesDraggable={false}
   • nodesConnectable={false}
   • elementsSelectable={false}
   • panOnDrag={false}
   • zoomOnScroll={false}
   • zoomOnPinch={false}
   • zoomOnDoubleClick={false}
   • fitView={true}
   • fitViewOptions={{ padding: 0.2 }}
4. Create a custom PreviewNode component that renders a simple colored rectangle with rounded corners
5. Use simplified edges (just lines, no labels or interaction)
6. No Background, Controls, or MiniMap - keep it minimal
7. Container should accept width/height or use aspect-ratio

Key considerations:

• DO NOT try to render full node content - just colored shapes representing node types
• Use ReactFlowProvider wrapper since this is a standalone React Flow instance
• Keep component lightweight - it will be rendered multiple times in the grid npm run build passes without errors, component exports correctly WorkflowPreview component created with non-interactive React Flow rendering simplified node shapes

Task 2: Integrate WorkflowPreview into TemplateCard src/components/quickstart/TemplateCard.tsx, src/components/quickstart/TemplateExplorerView.tsx Replace the static thumbnail image in TemplateCard with the WorkflowPreview component.

Implementation details:

1. Update TemplateCard props:
   • Change previewImage?: string to workflow?: { nodes: Node[]; edges: Edge[] }
   • Import WorkflowPreview component
2. In the thumbnail area (currently aspect-[4/3] div):
   • If workflow is provided, render WorkflowPreview
   • Keep the loading spinner state unchanged
   • Remove the fallback icon (the workflow preview IS the preview)
3. Update TemplateExplorerView:
   • Instead of passing previewImage, pass the workflow from PRESET_TEMPLATES
   • Each preset template already has workflow.nodes and workflow.edges
4. Consider adding a subtle semi-transparent overlay on hover for better UX

Remove the previewImages useMemo from TemplateExplorerView since we won't need static images anymore. npm run build passes, template cards show workflow previews instead of static images TemplateCard shows WorkflowPreview, TemplateExplorerView passes workflow data to cards

Workflow preview rendering in template explorer cards 1. Run: npm run dev 2. Open browser to http://localhost:3000 3. Click "Browse templates" or similar to open template explorer 4. Verify each template card shows a miniature node graph: - Colored rectangles representing different node types - Lines/edges connecting the nodes - Layout matches the actual template structure 5. Verify the preview is non-interactive (can't drag/zoom) 6. Verify scrolling still works in the template gallery (onWheelCapture from Phase 25) 7. Verify hover/click states still work on cards Type "approved" to continue, or describe issues to fix Before declaring phase complete: - [ ] `npm run build` succeeds without errors - [ ] WorkflowPreview component renders node graphs correctly - [ ] Template cards show workflow structure visually - [ ] Previews are non-interactive (no drag, zoom, or pan) - [ ] Scrolling in template explorer still works - [ ] No performance issues with multiple previews in grid

<success_criteria>

• All tasks completed
• All verification checks pass
• No errors or warnings introduced
• Template cards show meaningful workflow previews
• Phase 26 complete </success_criteria>

After completion, create `.planning/phases/26-template-preview-rendering/26-01-SUMMARY.md` using summary.md template.