feat: Step Library sync + service account for default tree ownership

* feat: maintenance flow UX redesign — batch status hub, context strip, detail page upgrades (#85) - Add BatchStatusPage (/flows/:id/batches/:batchId): per-target Start/Resume/View cards, progress bar, 5s polling while in-progress, completion outcome summary - Add BatchStatusCard: handles not-started/in-progress/complete states with step progress for in-progress targets - Add ActiveBatchBanner: amber banner on detail page when a batch is running, links to BatchStatusPage - Add MaintenanceContextStrip: amber strip in ProceduralNavigationPage for maintenance flows showing target name, batch progress (X/Y complete), and Back to Batch nav - Update MaintenanceFlowDetailPage: active batch banner, clickable run history rows with mini progress dots and outcome summaries, Run button loading state, post-launch navigates to BatchStatusPage - Update ProceduralNavigationPage: renders MaintenanceContextStrip between top bar and content when tree_type === 'maintenance'; fetches batch progress once on mount - Add batch_id filter to GET /sessions backend endpoint and SessionListParams frontend type - Add /flows/:id/batches/:batchId route to router Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: session detail page — completion action + outcome summary card - In-progress sessions: amber banner with "Complete Session" button opens SessionOutcomeModal to set outcome/notes/next-steps and finalize - Completed sessions: colored outcome summary card (icon + outcome label + duration + notes + next steps) replaces dense header metadata; "Copy for Ticket" promoted to primary action inside the card - Export toolbar de-emphasized to secondary row of smaller controls below the summary card Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add library-page action props to StepCard (edit/delete/save) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: pass library-page action props through StepLibraryBrowser + refreshKey Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepFormModal wrapper + submitLabel/isSubmitting props on StepForm Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: Step Library page — create, edit, delete, save-to-library Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add RuntimeStep union type for procedural custom steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepChecklist accepts RuntimeStep[], renders amber Custom badge Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepDetail accepts RuntimeStep, renders Custom Step badge for custom steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: custom step insertion in procedural flow sessions Engineers can add custom steps inline during execution. Steps are persisted to session.custom_steps and restored on resume. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: suppress StepFeedback on custom steps, fix resume stepState seeding, functional updater for step index Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add tree forking UI design doc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add tree fork UI implementation plan Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkInfo type and fork fields to Tree/TreeListItem Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: align ForkInfo type with backend schema, remove redundant fork fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: ForkInfo placement, required fork_info field, add JSDoc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkModal component with name and reason fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: ForkModal accessibility and UX (escape, click-outside, labels, maxLength) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: open ForkModal on fork action in TreeLibraryPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkModal to MyTreesPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show Fork chip badge on forked tree cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add flow-to-library step sync design doc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add flow-to-library sync implementation plan Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add sync tracking columns to step_library Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add sync columns and source_tree relationship to StepLibrary model Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add group_label to StepContent, is_flow_synced/source_tree_name to StepLibraryResponse Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: include is_flow_synced and source_tree_name in step list/detail responses Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add is_flow_synced and source_tree_name to step list response Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add selectinload and sync fields to search and get_step endpoints Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add step_sync module with extraction and upsert logic Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: safe NOT IN placeholders for asyncpg, add deactivate docstring Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: trigger step library sync on tree publish and deactivate on delete - Call sync_steps_from_tree in update_tree whenever the tree is published (status transitions to 'published' or is already published and structure changes) - Call deactivate_synced_steps_for_tree in delete_tree before db.commit() so the FK SET NULL does not nullify source_tree_id before the WHERE clause runs - Fix ::jsonb cast syntax in step_sync.py (asyncpg rejects :: operator in text() queries; replaced with CAST(:content AS jsonb)) - Add UniqueConstraint('source_tree_id','source_node_id') to StepLibrary model so Base.metadata.create_all (used by tests) creates the constraint that the ON CONFLICT clause in sync_steps_from_tree depends on Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add is_flow_synced and source_tree_name to Step types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show From Flow badge and lock icon on flow-synced StepCard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show source flow name in StepDetailModal for synced steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add Library Visibility select to procedural StepEditor Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: address code review issues in flow-to-library sync - Fix sync trigger: only fire on publish transition, not every PUT - Add TestSyncOnPublish integration tests (2 tests, 16 total passing) - Add group_label to frontend StepContent interface - Guard Library Visibility select to procedure_step nodes only - Block API edits to flow-synced steps (400 read-only guard) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: handle None author_id in step sync to avoid invalid UUID error When a system/default tree has no author (author_id is None), str(None) produces the literal string 'None' which asyncpg rejects as an invalid UUID for the created_by column. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add ResolutionFlow service account to own default tree steps in library Default/system trees had no author_id (NULL), causing a NOT NULL violation when syncing steps to step_library.created_by on publish. - Add is_service_account flag to users table (migration 4f4137ce) - Add service_account.py: idempotent ensure_service_account() creates noreply@resolutionflow.com with unusable password on startup - Cache service account ID on app.state at lifespan startup - Add get_service_account_id() FastAPI dep (returns None in tests) - sync_steps_from_tree: resolve author_id or service_account_id as created_by - create_tree: set author_id=service_account_id for is_default trees - Migration 1490781700bc: backfill author_id on 31 existing default trees Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-25 23:17:29 -05:00
parent a6abd23727
commit e6a0c0549b
45 changed files with 4261 additions and 270 deletions
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react'
+import { GitBranch, X } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import { useNavigate } from 'react-router-dom'
+
+interface ForkModalProps {
+  treeId: string
+  treeName: string
+  onClose: () => void
+}
+
+export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
+  const navigate = useNavigate()
+  const [name, setName] = useState(`Copy of ${treeName}`)
+  const [forkReason, setForkReason] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setIsSubmitting(true)
+    setError(null)
+    try {
+      await treesApi.fork(treeId, {
+        name: name.trim(),
+        fork_reason: forkReason.trim() || undefined,
+      })
+      toast.success('Flow forked successfully')
+      onClose()
+      navigate('/my-trees')
+    } catch (err) {
+      console.error('Failed to fork flow:', err)
+      setError('Failed to fork flow. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <div className="flex items-center gap-2">
+            <GitBranch className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold text-foreground">Fork Flow</h2>
+          </div>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <form onSubmit={handleSubmit} className="space-y-4 px-5 py-4">
+          <div>
+            <label htmlFor="fork-name" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Name <span className="text-red-400">*</span>
+            </label>
+            <input
+              id="fork-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              autoFocus
+              maxLength={255}
+              className={cn(
+                'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              )}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="fork-reason" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Reason for Forking{' '}
+              <span className="text-muted-foreground/60">(optional)</span>
+            </label>
+            <textarea
+              id="fork-reason"
+              value={forkReason}
+              onChange={(e) => setForkReason(e.target.value)}
+              rows={3}
+              placeholder="e.g. customizing for a specific client…"
+              className={cn(
+                'w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              )}
+            />
+          </div>
+
+          {error && (
+            <p className="text-xs text-red-400">{error}</p>
+          )}
+
+          {/* Footer */}
+          <div className="flex justify-end gap-2 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !name.trim()}
+              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? 'Forking…' : 'Fork Flow'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -52,6 +52,11 @@ export function TreeGridView({
                  Maintenance
                </span>
              )}
+              {'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
+                <span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
+                  Fork
+                </span>
+              )}
            </div>
            <div className="flex items-center gap-2">
              {onTogglePin && (
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -53,6 +53,11 @@ export function TreeListView({
                  Maintenance
                </span>
              )}
+              {'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
+                <span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
+                  Fork
+                </span>
+              )}
              {tree.is_public ? (
                <span title="Public tree">
                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -182,6 +182,11 @@ export function TreeTableView({
                      Maintenance
                    </span>
                  )}
+                  {'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
+                    <span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
+                      Fork
+                    </span>
+                  )}
                  {tree.is_public ? (
                    <span title="Public tree">
                      <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
--- a/frontend/src/components/maintenance/ActiveBatchBanner.tsx
+++ b/frontend/src/components/maintenance/ActiveBatchBanner.tsx
@@ -0,0 +1,46 @@
+import { X, RefreshCw, ChevronRight } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import type { Session } from '@/types'
+
+interface ActiveBatchBannerProps {
+  treeId: string
+  sessions: Session[]
+  onDismiss: () => void
+}
+
+export function ActiveBatchBanner({ treeId, sessions, onDismiss }: ActiveBatchBannerProps) {
+  const navigate = useNavigate()
+
+  // Find the most recently started in-progress batch
+  const inProgressSessions = sessions.filter(s => s.started_at && !s.completed_at && s.batch_id)
+  if (inProgressSessions.length === 0) return null
+
+  const batchId = inProgressSessions[0].batch_id!
+
+  // Count all sessions in this batch
+  const batchSessions = sessions.filter(s => s.batch_id === batchId)
+  const completed = batchSessions.filter(s => s.completed_at).length
+  const total = batchSessions.length
+
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+      <RefreshCw className="h-4 w-4 shrink-0 animate-spin text-amber-400" />
+      <p className="flex-1 text-[0.875rem] text-amber-300">
+        Batch in progress · <span className="font-medium">{completed} of {total}</span> targets complete
+      </p>
+      <button
+        onClick={() => navigate(`/flows/${treeId}/batches/${batchId}`)}
+        className="flex items-center gap-1 text-[0.8125rem] font-medium text-amber-400 hover:text-amber-300 transition-colors"
+      >
+        View Batch
+        <ChevronRight className="h-3.5 w-3.5" />
+      </button>
+      <button
+        onClick={onDismiss}
+        className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}
--- a/frontend/src/components/maintenance/BatchStatusCard.tsx
+++ b/frontend/src/components/maintenance/BatchStatusCard.tsx
@@ -0,0 +1,144 @@
+import { CheckCircle, Circle, Loader2, Play, RotateCcw, Eye } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+import type { Session } from '@/types'
+
+interface BatchStatusCardProps {
+  session: Session | null
+  targetLabel: string
+  treeId: string
+  batchId: string
+}
+
+function formatDuration(startedAt: string, completedAt: string): string {
+  const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime()
+  const totalSeconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  if (minutes === 0) return `${seconds}s`
+  return `${minutes}m ${seconds}s`
+}
+
+const OUTCOME_LABELS: Record<string, string> = {
+  resolved: 'Resolved',
+  escalated: 'Escalated',
+  workaround: 'Workaround',
+  unresolved: 'Unresolved',
+}
+
+const OUTCOME_COLORS: Record<string, string> = {
+  resolved: 'text-emerald-400 bg-emerald-500/10',
+  escalated: 'text-red-400 bg-red-500/10',
+  workaround: 'text-amber-400 bg-amber-500/10',
+  unresolved: 'text-muted-foreground bg-muted',
+}
+
+export function BatchStatusCard({ session, targetLabel, treeId, batchId }: BatchStatusCardProps) {
+  const navigate = useNavigate()
+
+  const isComplete = !!session?.completed_at
+  const isInProgress = !!session?.started_at && !session.completed_at
+  const isNotStarted = !session || !session.started_at
+
+  // Derive step progress for in-progress sessions
+  const stepProgress = (() => {
+    if (!session || !isInProgress) return null
+    const snapshot = session.tree_snapshot as { steps?: { type: string }[] } | null
+    const totalSteps = snapshot?.steps?.filter(s => s.type === 'procedure_step').length ?? 0
+    const completedSteps = (session.decisions ?? []).filter(d => d.answer === 'completed').length
+    return totalSteps > 0 ? { completed: completedSteps, total: totalSteps } : null
+  })()
+
+  const handleStart = () => {
+    navigate(`/flows/${treeId}/navigate`, {
+      state: { targetLabel, batchId },
+    })
+  }
+
+  const handleResume = () => {
+    if (!session) return
+    navigate(`/flows/${treeId}/navigate`, {
+      state: { sessionId: session.id },
+    })
+  }
+
+  const handleView = () => {
+    if (!session) return
+    navigate(`/sessions/${session.id}`)
+  }
+
+  return (
+    <div className="flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3 gap-4">
+      {/* Status indicator + target name */}
+      <div className="flex items-center gap-3 min-w-0">
+        {isComplete && (
+          <CheckCircle className="h-4 w-4 shrink-0 text-emerald-400" />
+        )}
+        {isInProgress && (
+          <Loader2 className="h-4 w-4 shrink-0 text-amber-400 animate-spin" />
+        )}
+        {isNotStarted && (
+          <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
+        )}
+
+        <div className="min-w-0">
+          <p className="text-[0.875rem] font-medium text-foreground truncate">{targetLabel}</p>
+          <div className="flex items-center gap-2 mt-0.5">
+            {isComplete && session?.outcome && (
+              <span className={cn(
+                "font-label text-[0.625rem] uppercase tracking-wide rounded-full px-2 py-0.5",
+                OUTCOME_COLORS[session.outcome] ?? OUTCOME_COLORS.unresolved
+              )}>
+                {OUTCOME_LABELS[session.outcome] ?? session.outcome}
+              </span>
+            )}
+            {isComplete && session?.started_at && session?.completed_at && (
+              <span className="text-[0.75rem] text-muted-foreground">
+                {formatDuration(session.started_at, session.completed_at)}
+              </span>
+            )}
+            {isInProgress && stepProgress && (
+              <span className="text-[0.75rem] text-amber-400">
+                Step {stepProgress.completed + 1} of {stepProgress.total}
+              </span>
+            )}
+            {isNotStarted && (
+              <span className="text-[0.75rem] text-muted-foreground">Not started</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Action button */}
+      <div className="shrink-0">
+        {isComplete && (
+          <button
+            onClick={handleView}
+            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+          >
+            <Eye className="h-3.5 w-3.5" />
+            View
+          </button>
+        )}
+        {isInProgress && (
+          <button
+            onClick={handleResume}
+            className="flex items-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/30 px-3 py-1.5 text-[0.8125rem] text-amber-400 hover:bg-amber-500/20 transition-colors"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            Resume
+          </button>
+        )}
+        {isNotStarted && (
+          <button
+            onClick={handleStart}
+            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-3 py-1.5 text-[0.8125rem] font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90 transition-opacity"
+          >
+            <Play className="h-3.5 w-3.5" />
+            Start
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/maintenance/MaintenanceContextStrip.tsx
+++ b/frontend/src/components/maintenance/MaintenanceContextStrip.tsx
@@ -0,0 +1,46 @@
+import { Wrench, ChevronLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+
+interface MaintenanceContextStripProps {
+  treeId: string
+  targetLabel?: string | null
+  batchId?: string | null
+  batchProgress?: { completed: number; total: number } | null
+}
+
+export function MaintenanceContextStrip({
+  treeId,
+  targetLabel,
+  batchId,
+  batchProgress,
+}: MaintenanceContextStripProps) {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex items-center gap-3 border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm">
+      <Wrench className="h-3.5 w-3.5 shrink-0 text-amber-400" />
+      <span className="font-medium text-amber-300">
+        {targetLabel ? `Target: ${targetLabel}` : 'Manual Run'}
+      </span>
+
+      {batchProgress && (
+        <>
+          <span className="text-muted-foreground">·</span>
+          <span className="text-muted-foreground text-[0.8125rem]">
+            {batchProgress.completed} / {batchProgress.total} complete
+          </span>
+        </>
+      )}
+
+      {batchId && (
+        <button
+          onClick={() => navigate(`/flows/${treeId}/batches/${batchId}`)}
+          className="ml-auto flex items-center gap-1 text-xs text-amber-400 hover:text-amber-300 transition-colors"
+        >
+          <ChevronLeft className="h-3 w-3" />
+          Back to Batch
+        </button>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -254,6 +254,28 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                </label>
              </div>
            </div>
+
+            {/* Library Visibility — procedure_step nodes only */}
+            {step.type === 'procedure_step' && <div>
+              <label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+                Library Visibility
+              </label>
+              <select
+                id="library-visibility"
+                value={step.library_visibility ?? ''}
+                onChange={(e) => onUpdate({
+                  library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
+                })}
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              >
+                <option value="">Inherit from flow</option>
+                <option value="team">Team only</option>
+                <option value="public">Public</option>
+              </select>
+              <p className="mt-1 text-[10px] text-muted-foreground">
+                Controls visibility in the step library. Defaults to the flow's own visibility setting.
+              </p>
+            </div>}
          </div>
        )}
      </div>
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -1,9 +1,9 @@
 import { CheckCircle2, Circle, ArrowRight } from 'lucide-react'
-import type { ProceduralStep } from '@/types'
+import type { RuntimeStep } from '@/types'
 import { cn } from '@/lib/utils'

 interface StepChecklistProps {
-  steps: ProceduralStep[]
+  steps: RuntimeStep[]
  currentStepIndex: number
  completedStepIds: Set<string>
  onStepClick: (index: number) => void
@@ -16,7 +16,8 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
  const sectionVisibility = new Set<number>()
  let prevSection: string | undefined
  for (let i = 0; i < procedureSteps.length; i++) {
-    const header = procedureSteps[i].section_header
+    const s = procedureSteps[i]
+    const header = 'section_header' in s ? s.section_header : undefined
    if (header && header !== prevSection) sectionVisibility.add(i)
    if (header) prevSection = header
  }
@@ -32,7 +33,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
          <div key={step.id}>
            {showSection && (
              <div className="mb-1 mt-3 border-b border-border pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:mt-0">
-                {step.section_header}
+                {'section_header' in step ? step.section_header : undefined}
              </div>
            )}
            <button
@@ -54,8 +55,15 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
                {index + 1}
              </span>
-              <span className="min-w-0 flex-1 truncate">{step.title || 'Untitled step'}</span>
-              {step.estimated_minutes && (
+              <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
+                <span className="truncate">{step.title || 'Untitled step'}</span>
+                {'isCustom' in step && step.isCustom && (
+                  <span className="shrink-0 rounded-full bg-amber-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-400">
+                    Custom
+                  </span>
+                )}
+              </span>
+              {'estimated_minutes' in step && step.estimated_minutes && (
                <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
              )}
            </button>
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { AlertTriangle, CheckCircle2, Info, Zap, Copy, Check, ExternalLink } from 'lucide-react'
-import type { ProceduralStep, StepContentType, CommandBlock } from '@/types'
+import type { RuntimeStep, StepContentType, CommandBlock } from '@/types'
 import { resolveVariables } from '@/lib/variableResolver'
 import { cn } from '@/lib/utils'

@@ -12,7 +12,7 @@ const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: stri
 }

 interface StepDetailProps {
-  step: ProceduralStep
+  step: RuntimeStep
  stepNumber: number
  totalSteps: number
  variables: Record<string, string>
@@ -39,13 +39,18 @@ export function StepDetail({
  isLast,
 }: StepDetailProps) {
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
+  const isCustom = 'isCustom' in step && step.isCustom
  const contentType = step.content_type || 'action'
  const config = contentTypeConfig[contentType]
  const Icon = config.icon

  // Derive verification from either flat fields or nested object
-  const verificationPrompt = step.verification_prompt || step.verification?.prompt
-  const verificationType = step.verification_type || step.verification?.type
+  const verificationPrompt = !isCustom && 'verification_prompt' in step
+    ? step.verification_prompt || step.verification?.prompt
+    : undefined
+  const verificationType = !isCustom && 'verification_type' in step
+    ? step.verification_type || step.verification?.type
+    : undefined

  const resolve = (text: string | undefined) => {
    if (!text) return ''
@@ -87,14 +92,20 @@ export function StepDetail({
        <div className="min-w-0 flex-1">
          <h2 className="text-lg font-semibold text-foreground">{step.title}</h2>
          <div className="mt-1 flex items-center gap-2">
-            <span className={cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs', config.bg, config.color)}>
-              <Icon className="h-3 w-3" />
-              {config.label}
-            </span>
+            {isCustom ? (
+              <span className="inline-flex items-center gap-1 rounded-full bg-amber-400/15 px-2 py-0.5 text-xs text-amber-400">
+                ✦ Custom Step
+              </span>
+            ) : (
+              <span className={cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs', config.bg, config.color)}>
+                <Icon className="h-3 w-3" />
+                {config.label}
+              </span>
+            )}
            <span className="text-xs text-muted-foreground">
              Step {stepNumber} of {totalSteps}
            </span>
-            {step.estimated_minutes && (
+            {'estimated_minutes' in step && step.estimated_minutes && (
              <span className="text-xs text-muted-foreground">~{step.estimated_minutes} min</span>
            )}
          </div>
@@ -102,7 +113,7 @@ export function StepDetail({
      </div>

      {/* Warning banner */}
-      {step.warning_text && (
+      {'warning_text' in step && step.warning_text && (
        <div className="flex items-start gap-2 rounded-lg border border-yellow-400/20 bg-yellow-400/5 px-3 py-2.5">
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-400" />
          <p className="text-sm text-yellow-200">{resolve(step.warning_text)}</p>
@@ -142,7 +153,7 @@ export function StepDetail({
      )}

      {/* Expected outcome */}
-      {step.expected_outcome && (
+      {'expected_outcome' in step && step.expected_outcome && (
        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
          <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
          <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
@@ -181,7 +192,7 @@ export function StepDetail({
      )}

      {/* Notes */}
-      {step.notes_enabled !== false && (
+      {(!('notes_enabled' in step) || step.notes_enabled !== false) && (
        <div>
          <label className="mb-1 block text-xs font-medium text-muted-foreground">Notes</label>
          <textarea
@@ -195,7 +206,7 @@ export function StepDetail({
      )}

      {/* Reference link */}
-      {step.reference_url && (
+      {'reference_url' in step && step.reference_url && (
        <a
          href={resolve(step.reference_url)}
          target="_blank"
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -1,11 +1,15 @@
-import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle } 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'

 interface StepCardProps {
  step: StepListItem
  onPreview: (step: StepListItem) => void
-  onInsert: (step: StepListItem) => void
+  onInsert?: (step: StepListItem) => void      // session context (now optional)
+  onEdit?: (step: StepListItem) => void        // library page
+  onDelete?: (step: StepListItem) => void      // library page — NOTE: pass full StepListItem, not just ID
+  onSave?: (step: StepListItem) => void        // library page (save copy to My Steps)
+  currentUserId?: string                       // to determine ownership
 }

 const stepTypeIcons = {
@@ -20,12 +24,14 @@ const stepTypeColors = {
  solution: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/20'
 }

-export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
+export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave, currentUserId }: StepCardProps) {
  const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
  const hasRating = step.rating_count > 0
  const visibleTags = step.tags.slice(0, 3)
  const remainingTags = step.tags.length - 3

+  const isOwn = currentUserId ? step.created_by === currentUserId : false
+
  return (
    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
      {/* Header */}
@@ -49,6 +55,13 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
                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 */}
@@ -118,26 +131,89 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {

      {/* Actions */}
      <div className="flex gap-2">
-        <button
-          onClick={() => onPreview(step)}
-          className={cn(
-            '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={() => onInsert(step)}
-          className={cn(
-            'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
-            'hover:opacity-90 transition-colors'
-          )}
-        >
-          <Plus className="h-4 w-4" />
-          Insert
-        </button>
+        {(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
+                  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
+            <>
+              <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={() => onSave?.(step)}
+                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
+              >
+                <Bookmark className="h-4 w-4" />
+                Save
+              </button>
+            </>
+          )
+        ) : (
+          // Session context (original): Preview + Insert
+          <>
+            <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={() => onInsert?.(step)}
+              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
+            >
+              <Plus className="h-4 w-4" />
+              Insert
+            </button>
+          </>
+        )}
      </div>
    </div>
  )
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar } from 'lucide-react'
+import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar, GitBranch } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { stepsApi } from '@/api/steps'
@@ -283,6 +283,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                    <span className="text-muted-foreground">Author:</span>
                    <span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
                  </div>
+                  {step.is_flow_synced && step.source_tree_name && (
+                    <div className="col-span-2 flex items-center gap-1.5 text-muted-foreground">
+                      <GitBranch className="h-3.5 w-3.5 shrink-0" />
+                      <span>Sourced from <span className="font-medium text-foreground">{step.source_tree_name}</span></span>
+                    </div>
+                  )}
                  <div>
                    <span className="text-muted-foreground">Usage Count:</span>
                    <span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -8,6 +8,8 @@ interface StepFormProps {
  onSubmit: (data: StepCreate) => void
  onCancel: () => void
  initialData?: Partial<StepCreate>
+  submitLabel?: string
+  isSubmitting?: boolean
 }

 const stepTypeOptions = [
@@ -16,7 +18,7 @@ const stepTypeOptions = [
  { value: 'solution', label: 'Solution', icon: CheckCircle, description: 'Resolution endpoint' }
 ] as const

-export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
+export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmitting }: StepFormProps) {
  // Form state
  const [stepType, setStepType] = useState<'decision' | 'action' | 'solution'>(
    initialData?.step_type || 'action'
@@ -376,9 +378,10 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
        </button>
        <button
          type="submit"
-          className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
+          disabled={isSubmitting}
+          className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
        >
-          Insert Step
+          {isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
        </button>
      </div>
    </form>
--- a/frontend/src/components/step-library/StepFormModal.tsx
+++ b/frontend/src/components/step-library/StepFormModal.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { stepsApi } from '@/api/steps'
+import { StepForm } from './StepForm'
+import type { Step, StepCreate } from '@/types/step'
+
+interface StepFormModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSuccess: (step: Step) => void
+  editingStep?: Step | null   // full Step (parent fetches before opening), null/undefined = create mode
+}
+
+export function StepFormModal({ isOpen, onClose, onSuccess, editingStep }: StepFormModalProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!isOpen) return null
+
+  const isEditMode = !!editingStep
+
+  const handleSubmit = async (data: StepCreate) => {
+    setIsSubmitting(true)
+    setError(null)
+    try {
+      let result: Step
+      if (isEditMode && editingStep) {
+        result = await stepsApi.update(editingStep.id, data)
+      } else {
+        result = await stepsApi.create(data)
+      }
+      onSuccess(result)
+    } catch (err) {
+      console.error('Failed to save step:', err)
+      setError('Failed to save step. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // Build initialData from full Step including content
+  const initialData = editingStep ? {
+    title: editingStep.title,
+    step_type: editingStep.step_type,
+    content: editingStep.content,
+    visibility: editingStep.visibility,
+    category_id: editingStep.category_id,
+    tags: editingStep.tags,
+  } : undefined
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+      <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border p-6 pb-4">
+          <h2 className="text-lg font-semibold text-foreground">
+            {isEditMode ? 'Edit Step' : 'Create Step'}
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={isSubmitting}
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            aria-label="Close"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="mx-6 mt-4 rounded-lg border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
+            {error}
+          </div>
+        )}
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6">
+          <StepForm
+            onSubmit={handleSubmit}
+            onCancel={onClose}
+            initialData={initialData}
+            submitLabel={isEditMode ? 'Save Changes' : 'Create Step'}
+            isSubmitting={isSubmitting}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -8,12 +8,17 @@ import { StepDetailModal } from './StepDetailModal'
 import type { Step, StepListItem, StepCategory, PopularTag, StepListParams } from '@/types/step'

 interface StepLibraryBrowserProps {
-  onInsert: (step: Step) => void
+  onInsert?: (step: Step) => void
  onCreateNew?: () => void
  showCreateButton?: boolean
+  onEdit?: (step: StepListItem) => void
+  onDelete?: (step: StepListItem) => void
+  onSave?: (step: StepListItem) => void
+  currentUserId?: string
+  refreshKey?: number
 }

-export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false }: StepLibraryBrowserProps) {
+export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false, onEdit, onDelete, onSave, currentUserId, refreshKey }: StepLibraryBrowserProps) {
  // State
  const [steps, setSteps] = useState<StepListItem[]>([])
  const [categories, setCategories] = useState<StepCategory[]>([])
@@ -87,7 +92,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
    }

    loadSteps()
-  }, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag])
+  }, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag, refreshKey])

  // Group steps by visibility
  const groupedSteps = useMemo(() => {
@@ -108,12 +113,15 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f

  const handleInsertFromPreview = (step: Step) => {
    setPreviewStepId(null)
-    onInsert(step)
+    if (onInsert) {
+      onInsert(step)
+    }
  }

  const handleInsertFromCard = (stepItem: StepListItem) => {
-    // Need to fetch full step details for insert
-    stepsApi.get(stepItem.id).then(onInsert)
+    if (onInsert) {
+      stepsApi.get(stepItem.id).then(onInsert)
+    }
  }

  const handleTagClick = (tag: string) => {
@@ -275,7 +283,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                        key={step.id}
                        step={step}
                        onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                      />
                    ))}
                  </div>
@@ -304,7 +316,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                        key={step.id}
                        step={step}
                        onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                      />
                    ))}
                  </div>
@@ -333,7 +349,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                        key={step.id}
                        step={step}
                        onPreview={handlePreview}
-                        onInsert={handleInsertFromCard}
+                        onInsert={onInsert ? handleInsertFromCard : undefined}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                        onSave={onSave}
+                        currentUserId={currentUserId}
                      />
                    ))}
                  </div>