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>
2026-02-14 04:13:52 -05:00
parent 303570ca2c
commit 350c977eda
58 changed files with 11686 additions and 167 deletions
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -0,0 +1,60 @@
+import { CheckCircle2, Circle, ArrowRight } from 'lucide-react'
+import type { ProceduralStep } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface StepChecklistProps {
+  steps: ProceduralStep[]
+  currentStepIndex: number
+  completedStepIds: Set<string>
+  onStepClick: (index: number) => void
+}
+
+export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
+  const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
+  let lastSection: string | undefined
+
+  return (
+    <nav className="space-y-0.5">
+      {procedureSteps.map((step, index) => {
+        const isCompleted = completedStepIds.has(step.id)
+        const isCurrent = index === currentStepIndex
+        const showSection = step.section_header && step.section_header !== lastSection
+        if (step.section_header) lastSection = step.section_header
+
+        return (
+          <div key={step.id}>
+            {showSection && (
+              <div className="mb-1 mt-3 border-b border-white/[0.06] pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40 first:mt-0">
+                {step.section_header}
+              </div>
+            )}
+            <button
+              onClick={() => onStepClick(index)}
+              className={cn(
+                'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
+                isCurrent && 'bg-white/10 text-white',
+                !isCurrent && isCompleted && 'text-white/40',
+                !isCurrent && !isCompleted && 'text-white/50 hover:bg-white/[0.04]'
+              )}
+            >
+              {isCompleted ? (
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
+              ) : isCurrent ? (
+                <ArrowRight className="h-4 w-4 shrink-0 text-white" />
+              ) : (
+                <Circle className="h-4 w-4 shrink-0 text-white/20" />
+              )}
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 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="shrink-0 text-[10px] text-white/30">~{step.estimated_minutes}m</span>
+              )}
+            </button>
+          </div>
+        )
+      })}
+    </nav>
+  )
+}