diff --git a/.planning/phases/26-template-preview-rendering/26-01-PLAN.md b/.planning/phases/26-template-preview-rendering/26-01-PLAN.md
new file mode 100644
index 00000000..c12c499b
--- /dev/null
+++ b/.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
+---
+
+
+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.
+
+
+
+@~/.claude/get-shit-done/workflows/execute-phase.md
+@~/.claude/get-shit-done/templates/summary.md
+@~/.claude/get-shit-done/references/checkpoints.md
+
+
+
+@.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
+
+
+
+
+- All tasks completed
+- All verification checks pass
+- No errors or warnings introduced
+- Template cards show meaningful workflow previews
+- Phase 26 complete
+
+
+