feat: show From Flow badge and lock icon on flow-synced StepCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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,6 +133,24 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
       <div className="flex gap-2">
         {(onEdit || onDelete || onSave) ? (
           isOwn ? (
+            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
@@ -150,6 +175,7 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
                   <Trash2 className="h-4 w-4" />
                 </button>
               </>
+            )
           ) : (
             // Others' step: Preview + Save
             <>