feat: add procedural flows with intake forms, navigation, and seed templates

Adds a new "procedural" tree type for linear step-by-step project workflows
(domain controller setup, M365 onboarding, VPN config, etc). Includes intake
form builder, two-panel step navigation, variable resolution, procedural
exports, 3 seed templates, and UI rename from "Trees" to "Flows".

Also archives 19 implemented plan docs and creates deferred features backlog.

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

frontend/src/components/procedural-editor/IntakeFieldEditor.tsx

@@ -0,0 +1,154 @@
+import { GripVertical, Trash2, ChevronDown, ChevronUp } from 'lucide-react'
+import { useState } from 'react'
+import type { IntakeFormField, IntakeFieldType } from '@/types'
+
+const FIELD_TYPE_OPTIONS: { value: IntakeFieldType; label: string }[] = [
+  { value: 'text', label: 'Text' },
+  { value: 'textarea', label: 'Text Area' },
+  { value: 'number', label: 'Number' },
+  { value: 'ip_address', label: 'IP Address' },
+  { value: 'email', label: 'Email' },
+  { value: 'select', label: 'Select (Dropdown)' },
+  { value: 'multi_select', label: 'Multi-Select' },
+  { value: 'checkbox', label: 'Checkbox' },
+  { value: 'password', label: 'Password' },
+]
+
+interface IntakeFieldEditorProps {
+  field: IntakeFormField
+  onUpdate: (updates: Partial<IntakeFormField>) => void
+  onRemove: () => void
+}
+
+export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEditorProps) {
+  const [expanded, setExpanded] = useState(false)
+  const needsOptions = field.field_type === 'select' || field.field_type === 'multi_select'
+
+  return (
+    <div className="glass-card rounded-xl p-3">
+      {/* Header row */}
+      <div className="flex items-center gap-2">
+        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/30" />
+
+        <input
+          type="text"
+          value={field.label}
+          onChange={(e) => onUpdate({ label: e.target.value })}
+          placeholder="Field label"
+          className="min-w-0 flex-1 rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+        />
+
+        <select
+          value={field.field_type}
+          onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
+          className="rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+        >
+          {FIELD_TYPE_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+
+        <label className="flex items-center gap-1 text-xs text-white/50">
+          <input
+            type="checkbox"
+            checked={field.required}
+            onChange={(e) => onUpdate({ required: e.target.checked })}
+            className="rounded border-white/20"
+          />
+          Req
+        </label>
+
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+        >
+          {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+        </button>
+
+        <button
+          onClick={onRemove}
+          className="rounded p-1 text-white/40 hover:bg-red-500/20 hover:text-red-400"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {/* Expanded details */}
+      {expanded && (
+        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-white/[0.06] pt-3">
+          <div>
+            <label className="mb-1 block text-xs text-white/50">Variable Name</label>
+            <input
+              type="text"
+              value={field.variable_name}
+              onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
+              placeholder="e.g. server_name"
+              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm font-mono text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+            <p className="mt-0.5 text-[10px] text-white/30">Used as [VAR:{field.variable_name}]</p>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs text-white/50">Placeholder</label>
+            <input
+              type="text"
+              value={field.placeholder || ''}
+              onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
+              placeholder="Hint text"
+              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+
+          <div className="col-span-2">
+            <label className="mb-1 block text-xs text-white/50">Help Text</label>
+            <input
+              type="text"
+              value={field.help_text || ''}
+              onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
+              placeholder="Description or instructions"
+              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs text-white/50">Default Value</label>
+            <input
+              type="text"
+              value={field.default_value || ''}
+              onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
+              placeholder="Pre-filled value"
+              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs text-white/50">Group Name</label>
+            <input
+              type="text"
+              value={field.group_name || ''}
+              onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
+              placeholder="e.g. Network Settings"
+              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+
+          {needsOptions && (
+            <div className="col-span-2">
+              <label className="mb-1 block text-xs text-white/50">Options (one per line)</label>
+              <textarea
+                value={(field.options || []).join('\n')}
+                onChange={(e) => {
+                  const options = e.target.value.split('\n').filter((o) => o.trim())
+                  onUpdate({ options: options.length > 0 ? options : undefined })
+                }}
+                placeholder="Option 1&#10;Option 2&#10;Option 3"
+                rows={3}
+                className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/procedural-editor/IntakeFormBuilder.tsx

@@ -0,0 +1,49 @@
+import { Plus, FileText } from 'lucide-react'
+import { IntakeFieldEditor } from './IntakeFieldEditor'
+import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
+
+export function IntakeFormBuilder() {
+  const { intakeForm, addField, removeField, updateField } = useProceduralEditorStore()
+
+  return (
+    <div className="glass-card rounded-2xl p-4 sm:p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <FileText className="h-5 w-5 text-white/50" />
+          <h2 className="text-lg font-semibold text-white">Intake Form</h2>
+          <span className="text-sm text-white/40">
+            ({intakeForm.length} field{intakeForm.length !== 1 ? 's' : ''})
+          </span>
+        </div>
+        <button
+          onClick={addField}
+          className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add Field
+        </button>
+      </div>
+
+      {intakeForm.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] py-8 text-center">
+          <FileText className="mx-auto mb-2 h-8 w-8 text-white/20" />
+          <p className="text-sm text-white/40">No intake form fields yet</p>
+          <p className="mt-1 text-xs text-white/30">
+            Add fields to collect project data before the procedure starts
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {intakeForm.map((field, index) => (
+            <IntakeFieldEditor
+              key={field.variable_name + '-' + index}
+              field={field}
+              onUpdate={(updates) => updateField(field.variable_name, updates)}
+              onRemove={() => removeField(field.variable_name)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/procedural-editor/StepEditor.tsx

@@ -0,0 +1,233 @@
+import { ChevronUp, AlertTriangle, Clock, ExternalLink, CheckSquare, Terminal, Type } from 'lucide-react'
+import type { ProceduralStep, StepContentType, IntakeFormField } from '@/types'
+import { cn } from '@/lib/utils'
+
+const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
+  { value: 'action', label: 'Action', color: 'text-blue-400' },
+  { value: 'informational', label: 'Info', color: 'text-white/60' },
+  { value: 'verification', label: 'Verify', color: 'text-emerald-400' },
+  { value: 'warning', label: 'Warning', color: 'text-yellow-400' },
+]
+
+interface StepEditorProps {
+  step: ProceduralStep
+  stepNumber: number
+  onUpdate: (updates: Partial<ProceduralStep>) => void
+  onCollapse: () => void
+  availableVariables: IntakeFormField[]
+}
+
+export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVariables }: StepEditorProps) {
+  return (
+    <div className="glass-card rounded-xl border border-white/10 p-4">
+      {/* Header */}
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white">
+            {stepNumber}
+          </span>
+          <span className="text-sm font-medium text-white">Edit Step</span>
+        </div>
+        <button
+          onClick={onCollapse}
+          className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+        >
+          <ChevronUp className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <label className="mb-1 block text-xs font-medium text-white/50">Title</label>
+          <input
+            type="text"
+            value={step.title}
+            onChange={(e) => onUpdate({ title: e.target.value })}
+            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          />
+        </div>
+
+        {/* Content type + Section header row */}
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="mb-1 block text-xs font-medium text-white/50">Content Type</label>
+            <div className="flex gap-1">
+              {CONTENT_TYPE_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => onUpdate({ content_type: opt.value })}
+                  className={cn(
+                    'rounded px-2 py-1 text-xs font-medium transition-colors',
+                    step.content_type === opt.value
+                      ? 'bg-white/15 ' + opt.color
+                      : 'text-white/40 hover:bg-white/10 hover:text-white/60'
+                  )}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+              <Clock className="h-3 w-3" />
+              Est. Minutes
+            </label>
+            <input
+              type="number"
+              value={step.estimated_minutes || ''}
+              onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
+              placeholder="—"
+              min={1}
+              className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+        </div>
+
+        {/* Section Header */}
+        <div>
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+            <Type className="h-3 w-3" />
+            Section Header (optional)
+          </label>
+          <input
+            type="text"
+            value={step.section_header || ''}
+            onChange={(e) => onUpdate({ section_header: e.target.value || undefined })}
+            placeholder="e.g. Phase 2: AD Configuration"
+            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          />
+        </div>
+
+        {/* Description */}
+        <div>
+          <label className="mb-1 block text-xs font-medium text-white/50">Description / Instructions</label>
+          <textarea
+            value={step.description || ''}
+            onChange={(e) => onUpdate({ description: e.target.value })}
+            placeholder="Step instructions. Use [VAR:name] for variables."
+            rows={4}
+            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          />
+          {availableVariables.length > 0 && (
+            <div className="mt-1 flex flex-wrap gap-1">
+              <span className="text-[10px] text-white/30">Variables:</span>
+              {availableVariables.map((v) => (
+                <button
+                  key={v.variable_name}
+                  onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
+                  className="rounded bg-white/5 px-1.5 py-0.5 font-mono text-[10px] text-white/50 hover:bg-white/10 hover:text-white/70"
+                >
+                  {v.variable_name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Warning text */}
+        {(step.content_type === 'warning' || step.warning_text) && (
+          <div>
+            <label className="mb-1 flex items-center gap-1 text-xs font-medium text-yellow-400/70">
+              <AlertTriangle className="h-3 w-3" />
+              Warning Text
+            </label>
+            <textarea
+              value={step.warning_text || ''}
+              onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
+              placeholder="Caution: This will restart the service..."
+              rows={2}
+              className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
+            />
+          </div>
+        )}
+
+        {/* Commands */}
+        <div>
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+            <Terminal className="h-3 w-3" />
+            Commands (optional)
+          </label>
+          <textarea
+            value={typeof step.commands === 'string' ? step.commands : (Array.isArray(step.commands) ? step.commands.map(c => c.code).join('\n\n') : '')}
+            onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
+            placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
+            rows={3}
+            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          />
+        </div>
+
+        {/* Expected Outcome */}
+        <div>
+          <label className="mb-1 block text-xs font-medium text-white/50">Expected Outcome (optional)</label>
+          <input
+            type="text"
+            value={step.expected_outcome || ''}
+            onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
+            placeholder="Server should respond with..."
+            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          />
+        </div>
+
+        {/* Verification */}
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+              <CheckSquare className="h-3 w-3" />
+              Verification Prompt (optional)
+            </label>
+            <input
+              type="text"
+              value={step.verification_prompt || ''}
+              onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
+              placeholder="Confirm the role was installed"
+              className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-medium text-white/50">Verification Type</label>
+            <select
+              value={step.verification_type || ''}
+              onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
+              className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            >
+              <option value="">None</option>
+              <option value="checkbox">Checkbox (confirm done)</option>
+              <option value="text_input">Text input (enter value)</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Reference URL + Notes toggle */}
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+              <ExternalLink className="h-3 w-3" />
+              Reference URL (optional)
+            </label>
+            <input
+              type="url"
+              value={step.reference_url || ''}
+              onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
+              placeholder="https://learn.microsoft.com/..."
+              className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            />
+          </div>
+          <div className="flex items-end pb-1">
+            <label className="flex items-center gap-2 text-sm text-white/60">
+              <input
+                type="checkbox"
+                checked={step.notes_enabled !== false}
+                onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
+                className="rounded border-white/20"
+              />
+              Allow tech notes
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/procedural-editor/StepList.tsx

@@ -0,0 +1,158 @@
+import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield } from 'lucide-react'
+import type { StepContentType } from '@/types'
+import { StepEditor } from './StepEditor'
+import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
+import { cn } from '@/lib/utils'
+
+const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
+  action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
+  informational: { icon: Info, color: 'text-white/50', label: 'Info' },
+  verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
+  warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
+}
+
+export function StepList() {
+  const {
+    steps,
+    intakeForm,
+    expandedStepId,
+    setExpandedStepId,
+    addStep,
+    removeStep,
+    updateStep,
+  } = useProceduralEditorStore()
+
+  const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
+
+  return (
+    <div className="glass-card rounded-2xl p-4 sm:p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Shield className="h-5 w-5 text-white/50" />
+          <h2 className="text-lg font-semibold text-white">Steps</h2>
+          <span className="text-sm text-white/40">
+            ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''})
+          </span>
+        </div>
+        <button
+          onClick={() => addStep()}
+          className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add Step
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        {steps.map((step, index) => {
+          if (step.type === 'procedure_end') {
+            // Render end step as a simple footer
+            return (
+              <div
+                key={step.id}
+                className="flex items-center gap-2 rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-3 py-2"
+              >
+                <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
+                <input
+                  type="text"
+                  value={step.title}
+                  onChange={(e) => updateStep(step.id, { title: e.target.value })}
+                  className="flex-1 bg-transparent text-sm text-white/50 focus:outline-none"
+                  placeholder="Procedure Complete"
+                />
+                <span className="text-[10px] text-white/30">END</span>
+              </div>
+            )
+          }
+
+          const isExpanded = expandedStepId === step.id
+          const contentType = step.content_type || 'action'
+          const config = contentTypeConfig[contentType]
+          const Icon = config.icon
+          const stepNumber = index + 1
+
+          if (isExpanded) {
+            return (
+              <div key={step.id}>
+                {step.section_header && (
+                  <div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
+                    {step.section_header}
+                  </div>
+                )}
+                <StepEditor
+                  step={step}
+                  stepNumber={stepNumber}
+                  onUpdate={(updates) => updateStep(step.id, updates)}
+                  onCollapse={() => setExpandedStepId(null)}
+                  availableVariables={intakeForm}
+                />
+              </div>
+            )
+          }
+
+          return (
+            <div key={step.id}>
+              {step.section_header && (
+                <div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
+                  {step.section_header}
+                </div>
+              )}
+              <div
+                className={cn(
+                  'group flex items-center gap-2 rounded-xl border border-white/[0.06] px-3 py-2.5 transition-colors',
+                  'hover:border-white/10 hover:bg-white/[0.03]'
+                )}
+              >
+                <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/20 group-hover:text-white/40" />
+
+                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white/70">
+                  {stepNumber}
+                </span>
+
+                <span className={cn('shrink-0', config.color)}>
+                  <Icon className="h-3.5 w-3.5" />
+                </span>
+
+                <span
+                  className="min-w-0 flex-1 cursor-pointer truncate text-sm text-white"
+                  onClick={() => setExpandedStepId(step.id)}
+                >
+                  {step.title || 'Untitled step'}
+                </span>
+
+                {step.estimated_minutes && (
+                  <span className="shrink-0 text-[10px] text-white/30">
+                    ~{step.estimated_minutes}m
+                  </span>
+                )}
+
+                <button
+                  onClick={() => setExpandedStepId(step.id)}
+                  className="shrink-0 rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                >
+                  <ChevronDown className="h-3.5 w-3.5" />
+                </button>
+
+                <button
+                  onClick={() => removeStep(step.id)}
+                  className="shrink-0 rounded p-1 text-white/30 opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Add step button at bottom */}
+      <button
+        onClick={() => addStep()}
+        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/10 py-2 text-sm text-white/40 transition-colors hover:border-white/20 hover:text-white/60"
+      >
+        <Plus className="h-3.5 w-3.5" />
+        Add Step
+      </button>
+    </div>
+  )
+}