From 7359ec822203401f91a831aae455c7bb414ed878 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 16 Mar 2026 01:13:41 -0400
Subject: [PATCH] feat: create FallbackSteps UI component (Task 17)

Collapsible component supporting edit and execute modes. Edit mode
provides title/description inputs with add/remove controls. Execute
mode shows "This worked" / "Didn't help" action buttons with emerald/
rose styling. Amber accent styling throughout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/procedural/FallbackSteps.tsx   | 153 ++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 frontend/src/components/procedural/FallbackSteps.tsx

diff --git a/frontend/src/components/procedural/FallbackSteps.tsx b/frontend/src/components/procedural/FallbackSteps.tsx
new file mode 100644
index 00000000..0f8ff8fa
--- /dev/null
+++ b/frontend/src/components/procedural/FallbackSteps.tsx
@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { AlertCircle, ChevronDown, ChevronRight, Plus, Trash2, Check, X } from 'lucide-react'
+import type { ProceduralStep } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface FallbackStepsProps {
+  fallbackSteps: ProceduralStep[]
+  mode: 'edit' | 'execute'
+  // Edit mode
+  onAdd?: () => void
+  onRemove?: (index: number) => void
+  onUpdate?: (index: number, updates: Partial<ProceduralStep>) => void
+  // Execute mode
+  onComplete?: (stepId: string, notes: string | null, outcome: 'resolved' | 'not_resolved' | 'skipped') => void
+  completedIds?: Set<string>
+}
+
+export function FallbackSteps({
+  fallbackSteps,
+  mode,
+  onAdd,
+  onRemove,
+  onUpdate,
+  onComplete,
+  completedIds,
+}: FallbackStepsProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  // In execute mode, hide if no fallback steps
+  if (mode === 'execute' && fallbackSteps.length === 0) {
+    return null
+  }
+
+  const toggleLabel =
+    mode === 'execute'
+      ? "Didn't work?"
+      : `Fallback branches (${fallbackSteps.length})`
+
+  return (
+    <div className="mt-4">
+      {/* Toggle button */}
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-amber-400/80 transition-colors"
+      >
+        <AlertCircle className="h-4 w-4 text-amber-400/80 shrink-0" />
+        <span>{toggleLabel}</span>
+        {expanded ? (
+          <ChevronDown className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+      </button>
+
+      {expanded && (
+        <div className="mt-3 border-l-2 border-amber-400/20 pl-4">
+          <div className="space-y-2">
+            {fallbackSteps.map((fbStep, index) => {
+              const isCompleted = completedIds?.has(fbStep.id)
+
+              return (
+                <div
+                  key={fbStep.id}
+                  className={cn(
+                    'rounded-lg border p-3 transition-colors',
+                    'bg-white/[0.02] border-border/50',
+                    isCompleted && 'border-emerald-500/30 bg-emerald-500/5'
+                  )}
+                >
+                  {mode === 'edit' ? (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <input
+                          type="text"
+                          value={fbStep.title}
+                          onChange={(e) => onUpdate?.(index, { title: e.target.value })}
+                          placeholder="Fallback step title"
+                          className="flex-1 rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => onRemove?.(index)}
+                          className="shrink-0 rounded p-1.5 text-muted-foreground hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
+                          title="Remove fallback step"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                      <textarea
+                        value={fbStep.description || ''}
+                        onChange={(e) =>
+                          onUpdate?.(index, { description: e.target.value || undefined })
+                        }
+                        placeholder="Describe this alternative approach..."
+                        rows={2}
+                        className="w-full rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                      />
+                    </div>
+                  ) : (
+                    // Execute mode
+                    <div>
+                      <p className={cn('text-sm font-medium', isCompleted ? 'text-emerald-400' : 'text-foreground')}>
+                        {fbStep.title}
+                      </p>
+                      {fbStep.description && (
+                        <p className="mt-1 text-xs text-muted-foreground">{fbStep.description}</p>
+                      )}
+                      {!isCompleted && (
+                        <div className="mt-3 flex gap-2">
+                          <button
+                            type="button"
+                            onClick={() => onComplete?.(fbStep.id, null, 'resolved')}
+                            className="flex items-center gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
+                          >
+                            <Check className="h-3.5 w-3.5" />
+                            This worked
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => onComplete?.(fbStep.id, null, 'not_resolved')}
+                            className="flex items-center gap-1.5 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-400 hover:bg-rose-500/20 transition-colors"
+                          >
+                            <X className="h-3.5 w-3.5" />
+                            Didn&apos;t help
+                          </button>
+                        </div>
+                      )}
+                      {isCompleted && (
+                        <p className="mt-2 text-xs text-emerald-400/70">Resolved via this fallback</p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+
+            {mode === 'edit' && (
+              <button
+                type="button"
+                onClick={onAdd}
+                className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-amber-400/20 px-3 py-2 text-xs text-amber-400/60 hover:border-amber-400/40 hover:text-amber-400/80 transition-colors"
+              >
+                <Plus className="h-3.5 w-3.5" />
+                Add fallback step
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}