docs(26): create template preview rendering plan

Phase 26: Template Preview Rendering
- 1 plan created
- 3 tasks defined (2 auto + 1 human-verify)
- Ready for execution

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -0,0 +1,160 @@
+---
+phase: 26-template-preview-rendering
+plan: 01
+type: execute
+subsystem: ui
+---
+
+<objective>
+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.
+</objective>
+
+<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>
+
+<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)
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Create WorkflowPreview component</name>
+  <files>src/components/quickstart/WorkflowPreview.tsx</files>
+  <action>
+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
+  </action>
+  <verify>npm run build passes without errors, component exports correctly</verify>
+  <done>WorkflowPreview component created with non-interactive React Flow rendering simplified node shapes</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Integrate WorkflowPreview into TemplateCard</name>
+  <files>src/components/quickstart/TemplateCard.tsx, src/components/quickstart/TemplateExplorerView.tsx</files>
+  <action>
+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.
+  </action>
+  <verify>npm run build passes, template cards show workflow previews instead of static images</verify>
+  <done>TemplateCard shows WorkflowPreview, TemplateExplorerView passes workflow data to cards</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Workflow preview rendering in template explorer cards</what-built>
+  <how-to-verify>
+    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
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<verification>
+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
+</verification>
+
+<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>
+
+<output>
+After completion, create `.planning/phases/26-template-preview-rendering/26-01-SUMMARY.md` using summary.md template.
+</output>