From 8007766d35795345673473845db0725d3c0d1a64 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 16 Jan 2026 23:11:22 +1300
Subject: [PATCH] refactor(26-01): use actual screenshot in detail modal
 instead of preview

- Replace WorkflowPreview component with actual template screenshot image
- Remove unused presetWorkflows memo from TemplateExplorerView
- Pass previewImage prop instead of workflow to TemplateDetailModal

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../quickstart/TemplateDetailModal.tsx        | 21 ++++++++++++-------
 .../quickstart/TemplateExplorerView.tsx       | 16 ++------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/quickstart/TemplateDetailModal.tsx b/src/components/quickstart/TemplateDetailModal.tsx
index d16f0049..9a654aa9 100644
--- a/src/components/quickstart/TemplateDetailModal.tsx
+++ b/src/components/quickstart/TemplateDetailModal.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { useEffect, useCallback } from "react";
-import { Node, Edge } from "@xyflow/react";
 import { TemplateCategory } from "@/types/quickstart";
-import { WorkflowPreview } from "./WorkflowPreview";
 
 interface TemplateDetailModalProps {
   isOpen: boolean;
@@ -18,7 +16,7 @@ interface TemplateDetailModalProps {
     tags: string[];
   };
   nodeCount: number;
-  workflow: { nodes: Node[]; edges: Edge[] };
+  previewImage?: string;
 }
 
 const CATEGORY_LABELS: Record<TemplateCategory, string> = {
@@ -42,7 +40,7 @@ export function TemplateDetailModal({
   isLoading,
   template,
   nodeCount,
-  workflow,
+  previewImage,
 }: TemplateDetailModalProps) {
   // Handle escape key to close
   const handleKeyDown = useCallback(
@@ -117,10 +115,19 @@ export function TemplateDetailModal({
           </button>
         </div>
 
-        {/* Workflow Preview */}
+        {/* Workflow Screenshot */}
         <div className="flex-1 min-h-0 p-6 bg-neutral-950/50">
-          <div className="w-full h-[50vh] bg-neutral-900 rounded-lg border border-neutral-800 overflow-hidden">
-            <WorkflowPreview workflow={workflow} />
+          <div className="w-full h-[50vh] bg-neutral-900 rounded-lg border border-neutral-800 overflow-hidden flex items-center justify-center">
+            {previewImage ? (
+              /* eslint-disable-next-line @next/next/no-img-element */
+              <img
+                src={previewImage}
+                alt={`${template.name} workflow screenshot`}
+                className="max-w-full max-h-full object-contain"
+              />
+            ) : (
+              <div className="text-neutral-500 text-sm">No preview available</div>
+            )}
           </div>
         </div>
 
diff --git a/src/components/quickstart/TemplateExplorerView.tsx b/src/components/quickstart/TemplateExplorerView.tsx
index deed8740..0938548f 100644
--- a/src/components/quickstart/TemplateExplorerView.tsx
+++ b/src/components/quickstart/TemplateExplorerView.tsx
@@ -71,18 +71,6 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
-  // Get workflow data for each template
-  const presetWorkflows = useMemo(() => {
-    const workflows: Record<string, { nodes: typeof PRESET_TEMPLATES[0]["workflow"]["nodes"]; edges: typeof PRESET_TEMPLATES[0]["workflow"]["edges"] } | undefined> = {};
-    PRESET_TEMPLATES.forEach((template) => {
-      workflows[template.id] = {
-        nodes: template.workflow.nodes,
-        edges: template.workflow.edges,
-      };
-    });
-    return workflows;
-  }, []);
-
   // Get preview image for each template (first image from "full" content level)
   const previewImages = useMemo(() => {
     const images: Record<string, string | undefined> = {};
@@ -595,7 +583,7 @@ export function TemplateExplorerView({
       </div>
 
       {/* Template Detail Modal */}
-      {selectedTemplateId && presetWorkflows[selectedTemplateId] && (
+      {selectedTemplateId && (
         <TemplateDetailModal
           isOpen={true}
           onClose={() => setSelectedTemplateId(null)}
@@ -605,7 +593,7 @@ export function TemplateExplorerView({
           isLoading={loadingWorkflowId === selectedTemplateId}
           template={presets.find((p) => p.id === selectedTemplateId)!}
           nodeCount={presetMetadata[selectedTemplateId]?.nodeCount ?? 0}
-          workflow={presetWorkflows[selectedTemplateId]}
+          previewImage={previewImages[selectedTemplateId]}
         />
       )}
     </div>