From 7e61aa7cdc22efa94ed85781c7a2e4218eb4c78c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 25 Feb 2026 13:47:38 -0500
Subject: [PATCH] feat: show From Flow badge and lock icon on flow-synced
 StepCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/step-library/StepCard.tsx  | 76 +++++++++++++------
 1 file changed, 51 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/step-library/StepCard.tsx b/frontend/src/components/step-library/StepCard.tsx
index a4be0efc..7d3f6928 100644
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -1,4 +1,4 @@
-import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark } from 'lucide-react'
+import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark, Lock } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { StepListItem } from '@/types/step'
 
@@ -55,6 +55,13 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
                 Featured
               </span>
             )}
+
+            {/* From Flow Badge */}
+            {step.is_flow_synced && (
+              <span className="rounded-full bg-blue-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-blue-400">
+                From Flow
+              </span>
+            )}
           </div>
 
           {/* Title */}
@@ -126,30 +133,49 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
       <div className="flex gap-2">
         {(onEdit || onDelete || onSave) ? (
           isOwn ? (
-            // Own step: Preview + Edit + Delete icon
-            <>
-              <button
-                onClick={() => onPreview(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-              >
-                <Eye className="h-4 w-4" />
-                Preview
-              </button>
-              <button
-                onClick={() => onEdit?.(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-              >
-                <Pencil className="h-4 w-4" />
-                Edit
-              </button>
-              <button
-                onClick={() => onDelete?.(step)}
-                className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
-                aria-label="Delete step"
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
-            </>
+            step.is_flow_synced ? (
+              // Flow-synced step: Preview + lock (read-only)
+              <>
+                <button
+                  onClick={() => onPreview(step)}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <Eye className="h-4 w-4" />
+                  Preview
+                </button>
+                <span
+                  title="Managed by source flow — fork to customize"
+                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
+                >
+                  <Lock className="h-4 w-4" />
+                </span>
+              </>
+            ) : (
+              // Own step: Preview + Edit + Delete icon
+              <>
+                <button
+                  onClick={() => onPreview(step)}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <Eye className="h-4 w-4" />
+                  Preview
+                </button>
+                <button
+                  onClick={() => onEdit?.(step)}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <Pencil className="h-4 w-4" />
+                  Edit
+                </button>
+                <button
+                  onClick={() => onDelete?.(step)}
+                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
+                  aria-label="Delete step"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </>
+            )
           ) : (
             // Others' step: Preview + Save
             <>