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/layout/AppLayout.tsx

@@ -1,17 +1,25 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { BrandLogo } from '@/components/common/BrandLogo'
-import { Menu, X, LogOut, User, Shield } from 'lucide-react'
+import { Menu, X, LogOut, User, Shield, ChevronDown, FolderTree, ListOrdered, Layers } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
+interface NavItem {
+  path: string
+  label: string
+  children?: { path: string; label: string; icon: React.ReactNode }[]
+}
+
 export function AppLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const { user, logout } = useAuthStore()
   const { effectiveRole, isSuperAdmin } = usePermissions()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [flowsDropdownOpen, setFlowsDropdownOpen] = useState(false)
+  const flowsDropdownRef = useRef<HTMLDivElement>(null)
 
   const handleLogout = async () => {
     setMobileMenuOpen(false)
@@ -24,13 +32,30 @@ export function AppLayout() {
   if (prevPath !== location.pathname) {
     setPrevPath(location.pathname)
     if (mobileMenuOpen) setMobileMenuOpen(false)
+    setFlowsDropdownOpen(false)
   }
 
   // Close on Escape
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'Escape') setMobileMenuOpen(false)
+    if (e.key === 'Escape') {
+      setMobileMenuOpen(false)
+      setFlowsDropdownOpen(false)
+    }
   }, [])
 
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (flowsDropdownRef.current && !flowsDropdownRef.current.contains(e.target as Node)) {
+        setFlowsDropdownOpen(false)
+      }
+    }
+    if (flowsDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [flowsDropdownOpen])
+
   useEffect(() => {
     if (mobileMenuOpen) {
       document.addEventListener('keydown', handleKeyDown)
@@ -44,10 +69,20 @@ export function AppLayout() {
     }
   }, [mobileMenuOpen, handleKeyDown])
 
-  const navItems = [
+  const isFlowsActive = location.pathname.startsWith('/trees') || location.pathname.startsWith('/flows')
+
+  const navItems: NavItem[] = [
     { path: '/', label: 'Home' },
-    { path: '/trees', label: 'Trees' },
-    { path: '/my-trees', label: 'My Trees' },
+    {
+      path: '/trees',
+      label: 'Flows',
+      children: [
+        { path: '/trees', label: 'All Flows', icon: <Layers className="h-4 w-4 text-white/50" /> },
+        { path: '/trees?type=troubleshooting', label: 'Troubleshooting', icon: <FolderTree className="h-4 w-4 text-white/50" /> },
+        { path: '/trees?type=procedural', label: 'Procedures', icon: <ListOrdered className="h-4 w-4 text-white/50" /> },
+      ],
+    },
+    { path: '/my-trees', label: 'My Flows' },
     { path: '/sessions', label: 'Sessions' },
     { path: '/account', label: 'Account' },
     ...(isSuperAdmin ? [{ path: '/admin', label: 'Admin Panel' }] : []),
@@ -84,6 +119,40 @@ export function AppLayout() {
             {/* Desktop Navigation */}
             <nav className="hidden items-center gap-1 sm:flex">
               {navItems.map((item) => {
+                if (item.children) {
+                  return (
+                    <div key={item.path} className="relative" ref={flowsDropdownRef}>
+                      <button
+                        onClick={() => setFlowsDropdownOpen(!flowsDropdownOpen)}
+                        className={cn(
+                          'flex items-center gap-1 rounded-xl px-4 py-2 text-sm font-medium transition-all',
+                          isFlowsActive
+                            ? 'bg-white/10 text-white border border-white/20'
+                            : 'text-white/50 hover:text-white hover:bg-white/[0.06]'
+                        )}
+                      >
+                        {item.label}
+                        <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', flowsDropdownOpen && 'rotate-180')} />
+                      </button>
+                      {flowsDropdownOpen && (
+                        <div className="absolute left-0 z-50 mt-1 w-52 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
+                          {item.children.map((child) => (
+                            <Link
+                              key={child.path}
+                              to={child.path}
+                              onClick={() => setFlowsDropdownOpen(false)}
+                              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
+                            >
+                              {child.icon}
+                              {child.label}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )
+                }
+
                 const isActive = item.path === '/'
                   ? location.pathname === '/'
                   : location.pathname.startsWith(item.path)
@@ -200,6 +269,34 @@ export function AppLayout() {
               {/* Nav items */}
               <div className="space-y-1">
                 {navItems.map((item) => {
+                  if (item.children) {
+                    return (
+                      <div key={item.path}>
+                        <div className={cn(
+                          'px-4 py-2 text-xs font-semibold uppercase tracking-wider',
+                          isFlowsActive ? 'text-white/60' : 'text-white/30'
+                        )}>
+                          {item.label}
+                        </div>
+                        <div className="space-y-0.5">
+                          {item.children.map((child) => (
+                            <Link
+                              key={child.path}
+                              to={child.path}
+                              className={cn(
+                                'flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ml-1',
+                                'text-white/50 hover:text-white hover:bg-white/[0.06]'
+                              )}
+                            >
+                              {child.icon}
+                              {child.label}
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  }
+
                   const isActive = item.path === '/'
                     ? location.pathname === '/'
                     : location.pathname.startsWith(item.path)

frontend/src/components/library/TreeGridView.tsx

@@ -8,7 +8,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 
 interface TreeGridViewProps {
   trees: TreeListItem[]
-  onStartSession: (treeId: string) => void
+  onStartSession: (treeId: string, treeType?: string) => void
   onTagClick: (tag: string) => void
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
@@ -119,7 +119,7 @@ export function TreeGridView({
               )}
               <button
                 type="button"
-                onClick={() => onStartSession(tree.id)}
+                onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
                   'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
                   'hover:bg-white/90'

frontend/src/components/library/TreeListView.tsx

@@ -8,7 +8,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 
 interface TreeListViewProps {
   trees: TreeListItem[]
-  onStartSession: (treeId: string) => void
+  onStartSession: (treeId: string, treeType?: string) => void
   onTagClick: (tag: string) => void
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
@@ -123,7 +123,7 @@ export function TreeListView({
               )}
               <button
                 type="button"
-                onClick={() => onStartSession(tree.id)}
+                onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
                   'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
                   'hover:bg-white/90 whitespace-nowrap'

frontend/src/components/library/TreeTableView.tsx

@@ -9,7 +9,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 
 interface TreeTableViewProps {
   trees: TreeListItem[]
-  onStartSession: (treeId: string) => void
+  onStartSession: (treeId: string, treeType?: string) => void
   onTagClick: (tag: string) => void
   onFolderCreated: (parentId?: string | null) => void
   onDeleteTree: (tree: TreeListItem) => void
@@ -227,7 +227,7 @@ export function TreeTableView({
                   )}
                   <button
                     type="button"
-                    onClick={() => onStartSession(tree.id)}
+                    onClick={() => onStartSession(tree.id, tree.tree_type)}
                     className={cn(
                       'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
                       'hover:bg-white/90 whitespace-nowrap'

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>
+  )
+}

frontend/src/components/procedural/CompletionSummary.tsx

@@ -0,0 +1,147 @@
+import { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
+import type { ProceduralStep } from '@/types'
+
+interface StepCompletion {
+  stepId: string
+  notes: string
+  verificationValue: string
+  completedAt: string
+}
+
+interface CompletionSummaryProps {
+  treeName: string
+  steps: ProceduralStep[]
+  completions: Map<string, StepCompletion>
+  variables: Record<string, string>
+  startedAt: string
+  completedAt: string
+  onExport: () => void
+  onClose: () => void
+}
+
+export function CompletionSummary({
+  treeName,
+  steps,
+  completions,
+  variables,
+  startedAt,
+  completedAt,
+  onExport,
+  onClose,
+}: CompletionSummaryProps) {
+  const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
+
+  // Parse backend timestamp — ensure UTC if no timezone info
+  const parseTs = (ts: string) => {
+    if (!ts.endsWith('Z') && !ts.includes('+') && !/\d{2}:\d{2}$/.test(ts.slice(-5))) {
+      return new Date(ts + 'Z')
+    }
+    return new Date(ts)
+  }
+
+  const start = parseTs(startedAt)
+  const end = parseTs(completedAt)
+  const totalMinutes = Math.max(0, Math.round((end.getTime() - start.getTime()) / 60000))
+
+  const formatTime = (minutes: number) => {
+    if (minutes < 1) return '<1 minute'
+    if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''}`
+    const h = Math.floor(minutes / 60)
+    const m = minutes % 60
+    return m > 0 ? `${h}h ${m}m` : `${h} hour${h > 1 ? 's' : ''}`
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      {/* Success header */}
+      <div className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-400/10">
+          <CheckCircle2 className="h-8 w-8 text-emerald-400" />
+        </div>
+        <h1 className="text-2xl font-bold text-white">Procedure Complete</h1>
+        <p className="mt-1 text-white/40">{treeName}</p>
+      </div>
+
+      {/* Summary stats */}
+      <div className="grid grid-cols-3 gap-3">
+        <div className="glass-card rounded-xl p-3 text-center">
+          <CheckCircle2 className="mx-auto mb-1 h-5 w-5 text-emerald-400" />
+          <div className="text-lg font-semibold text-white">{procedureSteps.length}</div>
+          <div className="text-xs text-white/40">Steps Completed</div>
+        </div>
+        <div className="glass-card rounded-xl p-3 text-center">
+          <Clock className="mx-auto mb-1 h-5 w-5 text-white/50" />
+          <div className="text-lg font-semibold text-white">{formatTime(totalMinutes)}</div>
+          <div className="text-xs text-white/40">Total Time</div>
+        </div>
+        <div className="glass-card rounded-xl p-3 text-center">
+          <FileText className="mx-auto mb-1 h-5 w-5 text-white/50" />
+          <div className="text-lg font-semibold text-white">{Object.keys(variables).length}</div>
+          <div className="text-xs text-white/40">Parameters</div>
+        </div>
+      </div>
+
+      {/* Project parameters */}
+      {Object.keys(variables).length > 0 && (
+        <div className="glass-card rounded-xl p-4">
+          <h3 className="mb-3 text-sm font-semibold text-white/60">Project Parameters</h3>
+          <div className="space-y-1.5">
+            {Object.entries(variables).map(([key, value]) => (
+              <div key={key} className="flex items-baseline justify-between gap-4 text-sm">
+                <span className="font-mono text-white/40">{key}</span>
+                <span className="text-right text-white/70">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Step details */}
+      <div className="glass-card rounded-xl p-4">
+        <h3 className="mb-3 text-sm font-semibold text-white/60">Step Summary</h3>
+        <div className="space-y-2">
+          {procedureSteps.map((step, index) => {
+            const completion = completions.get(step.id)
+            return (
+              <div key={step.id} className="flex items-start gap-2 text-sm">
+                <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-white/70">
+                      {index + 1}. {step.title}
+                    </span>
+                  </div>
+                  {completion?.notes && (
+                    <p className="mt-0.5 text-xs text-white/30">Note: {completion.notes}</p>
+                  )}
+                  {completion?.verificationValue && (
+                    <p className="mt-0.5 text-xs text-white/30">
+                      Verified: {completion.verificationValue}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onExport}
+          className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-white/10 px-4 py-2.5 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+        >
+          <Download className="h-4 w-4" />
+          Export Report
+        </button>
+        <button
+          onClick={onClose}
+          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-white px-4 py-2.5 text-sm font-medium text-black hover:bg-white/90"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/components/procedural/IntakeFormModal.tsx

@@ -0,0 +1,249 @@
+import { useState } from 'react'
+import type { IntakeFormField } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface IntakeFormModalProps {
+  isOpen: boolean
+  fields: IntakeFormField[]
+  treeName: string
+  onSubmit: (variables: Record<string, string>) => void
+  onCancel: () => void
+}
+
+export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }: IntakeFormModalProps) {
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {}
+    for (const field of fields) {
+      initial[field.variable_name] = field.default_value || ''
+    }
+    return initial
+  })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  if (!isOpen) return null
+
+  const setValue = (variableName: string, value: string) => {
+    setValues((prev) => ({ ...prev, [variableName]: value }))
+    if (errors[variableName]) {
+      setErrors((prev) => {
+        const next = { ...prev }
+        delete next[variableName]
+        return next
+      })
+    }
+  }
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {}
+    for (const field of fields) {
+      const val = values[field.variable_name]?.trim()
+      if (field.required && !val) {
+        newErrors[field.variable_name] = `${field.label} is required`
+      }
+    }
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      // Only include non-empty values
+      const cleanValues: Record<string, string> = {}
+      for (const [key, val] of Object.entries(values)) {
+        if (val.trim()) cleanValues[key] = val.trim()
+      }
+      onSubmit(cleanValues)
+    }
+  }
+
+  // Group fields by group_name
+  const groups = new Map<string, IntakeFormField[]>()
+  for (const field of fields) {
+    const group = field.group_name || ''
+    if (!groups.has(group)) groups.set(group, [])
+    groups.get(group)!.push(field)
+  }
+
+  const renderField = (field: IntakeFormField) => {
+    const value = values[field.variable_name] || ''
+    const error = errors[field.variable_name]
+
+    const baseInputClass = cn(
+      'w-full rounded-lg border bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-1',
+      error
+        ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
+        : 'border-white/10 focus:border-white/30 focus:ring-white/20'
+    )
+
+    let input: React.ReactNode
+
+    switch (field.field_type) {
+      case 'textarea':
+        input = (
+          <textarea
+            value={value}
+            onChange={(e) => setValue(field.variable_name, e.target.value)}
+            placeholder={field.placeholder}
+            rows={3}
+            className={baseInputClass}
+          />
+        )
+        break
+
+      case 'number':
+        input = (
+          <input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(field.variable_name, e.target.value)}
+            placeholder={field.placeholder}
+            className={baseInputClass}
+          />
+        )
+        break
+
+      case 'checkbox':
+        input = (
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={value === 'true'}
+              onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
+              className="rounded border-white/20"
+            />
+            <span className="text-sm text-white/70">{field.placeholder || field.label}</span>
+          </label>
+        )
+        break
+
+      case 'password':
+        input = (
+          <input
+            type="password"
+            value={value}
+            onChange={(e) => setValue(field.variable_name, e.target.value)}
+            placeholder={field.placeholder}
+            className={baseInputClass}
+          />
+        )
+        break
+
+      case 'select':
+        input = (
+          <select
+            value={value}
+            onChange={(e) => setValue(field.variable_name, e.target.value)}
+            className={baseInputClass}
+          >
+            <option value="">{field.placeholder || 'Select...'}</option>
+            {(field.options || []).map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+        )
+        break
+
+      case 'multi_select':
+        input = (
+          <div className="space-y-1">
+            {(field.options || []).map((opt) => {
+              const selected = value.split(',').filter(Boolean)
+              const isChecked = selected.includes(opt)
+              return (
+                <label key={opt} className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={() => {
+                      const next = isChecked
+                        ? selected.filter((s) => s !== opt)
+                        : [...selected, opt]
+                      setValue(field.variable_name, next.join(','))
+                    }}
+                    className="rounded border-white/20"
+                  />
+                  <span className="text-sm text-white/70">{opt}</span>
+                </label>
+              )
+            })}
+          </div>
+        )
+        break
+
+      default: // text, ip_address, email
+        input = (
+          <input
+            type={field.field_type === 'email' ? 'email' : 'text'}
+            value={value}
+            onChange={(e) => setValue(field.variable_name, e.target.value)}
+            placeholder={field.placeholder}
+            className={baseInputClass}
+          />
+        )
+    }
+
+    return (
+      <div key={field.variable_name}>
+        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-white/60">
+          {field.label}
+          {field.required && <span className="text-red-400">*</span>}
+        </label>
+        {field.help_text && (
+          <p className="mb-1.5 text-xs text-white/30">{field.help_text}</p>
+        )}
+        {input}
+        {error && <p className="mt-1 text-xs text-red-400">{error}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="mx-4 w-full max-w-lg rounded-2xl border border-white/10 bg-[#0a0a0a] shadow-xl">
+        {/* Header */}
+        <div className="border-b border-white/[0.06] px-6 py-4">
+          <h2 className="text-lg font-semibold text-white">Project Information</h2>
+          <p className="mt-0.5 text-sm text-white/40">
+            Fill in the details for <span className="text-white/60">{treeName}</span>
+          </p>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit}>
+          <div className="max-h-[60vh] space-y-4 overflow-y-auto px-6 py-4">
+            {Array.from(groups.entries()).map(([groupName, groupFields]) => (
+              <div key={groupName}>
+                {groupName && (
+                  <h3 className="mb-3 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
+                    {groupName}
+                  </h3>
+                )}
+                <div className="space-y-3">
+                  {groupFields.map(renderField)}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="rounded-md border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+            >
+              Start Procedure
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/procedural/ProgressBar.tsx

@@ -0,0 +1,46 @@
+interface ProgressBarProps {
+  currentStep: number
+  totalSteps: number
+  elapsedMinutes?: number
+  estimatedTotalMinutes?: number
+}
+
+export function ProgressBar({ currentStep, totalSteps, elapsedMinutes, estimatedTotalMinutes }: ProgressBarProps) {
+  const percentage = totalSteps > 0 ? Math.round((currentStep / totalSteps) * 100) : 0
+  const elapsed = Math.max(0, elapsedMinutes ?? 0)
+
+  const formatTime = (minutes: number) => {
+    if (minutes < 1) return '<1m'
+    if (minutes < 60) return `${minutes}m`
+    const h = Math.floor(minutes / 60)
+    const m = minutes % 60
+    return m > 0 ? `${h}h ${m}m` : `${h}h`
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-white/60">
+          Step {currentStep} of {totalSteps}
+        </span>
+        <div className="flex items-center gap-3">
+          {elapsedMinutes !== undefined && (
+            <span className="text-white/50">
+              {formatTime(elapsed)}
+              {estimatedTotalMinutes ? (
+                <span className="text-white/25"> / est. {formatTime(estimatedTotalMinutes)}</span>
+              ) : null}
+            </span>
+          )}
+          <span className="font-medium text-white/70">{percentage}%</span>
+        </div>
+      </div>
+      <div className="h-1.5 overflow-hidden rounded-full bg-white/10">
+        <div
+          className="h-full rounded-full bg-white transition-all duration-300"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}

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>
+  )
+}

frontend/src/components/procedural/StepDetail.tsx

@@ -0,0 +1,236 @@
+import { useState } from 'react'
+import { AlertTriangle, CheckCircle2, Info, Zap, Copy, Check, ExternalLink } from 'lucide-react'
+import type { ProceduralStep, StepContentType, CommandBlock } from '@/types'
+import { resolveVariables } from '@/lib/variableResolver'
+import { cn } from '@/lib/utils'
+
+const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; bg: string; label: string }> = {
+  action: { icon: Zap, color: 'text-blue-400', bg: 'bg-blue-400/10', label: 'Action' },
+  informational: { icon: Info, color: 'text-white/50', bg: 'bg-white/10', label: 'Info' },
+  verification: { icon: CheckCircle2, color: 'text-emerald-400', bg: 'bg-emerald-400/10', label: 'Verification' },
+  warning: { icon: AlertTriangle, color: 'text-yellow-400', bg: 'bg-yellow-400/10', label: 'Warning' },
+}
+
+interface StepDetailProps {
+  step: ProceduralStep
+  stepNumber: number
+  totalSteps: number
+  variables: Record<string, string>
+  notes: string
+  onNotesChange: (notes: string) => void
+  verificationValue: string
+  onVerificationChange: (value: string) => void
+  isCompleted: boolean
+  onMarkComplete: () => void
+  isLast: boolean
+}
+
+export function StepDetail({
+  step,
+  stepNumber,
+  totalSteps,
+  variables,
+  notes,
+  onNotesChange,
+  verificationValue,
+  onVerificationChange,
+  isCompleted,
+  onMarkComplete,
+  isLast,
+}: StepDetailProps) {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
+  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 resolve = (text: string | undefined) => {
+    if (!text) return ''
+    return resolveVariables(text, variables)
+  }
+
+  // Normalize commands to array of CommandBlock
+  const commandBlocks: CommandBlock[] = (() => {
+    if (!step.commands) return []
+    if (typeof step.commands === 'string') {
+      return [{ code: step.commands }]
+    }
+    if (Array.isArray(step.commands)) {
+      return step.commands
+    }
+    return []
+  })()
+
+  const handleCopyCommand = (code: string, index: number) => {
+    navigator.clipboard.writeText(resolve(code))
+    setCopiedIndex(index)
+    setTimeout(() => setCopiedIndex(null), 2000)
+  }
+
+  const canComplete = () => {
+    if (isCompleted) return false
+    if (verificationType === 'checkbox' && !verificationValue) return false
+    if (verificationType === 'text_input' && !verificationValue.trim()) return false
+    return true
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Step header */}
+      <div className="flex items-start gap-3">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/10 text-sm font-semibold text-white">
+          {stepNumber}
+        </span>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-lg font-semibold text-white">{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>
+            <span className="text-xs text-white/30">
+              Step {stepNumber} of {totalSteps}
+            </span>
+            {step.estimated_minutes && (
+              <span className="text-xs text-white/30">~{step.estimated_minutes} min</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Warning banner */}
+      {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>
+        </div>
+      )}
+
+      {/* Description */}
+      {step.description && (
+        <div className="prose prose-invert prose-sm max-w-none text-white/70">
+          <p className="whitespace-pre-wrap">{resolve(step.description)}</p>
+        </div>
+      )}
+
+      {/* Commands block(s) */}
+      {commandBlocks.length > 0 && (
+        <div className="space-y-3">
+          {commandBlocks.map((cmd, i) => (
+            <div key={i} className="rounded-lg border border-white/[0.06] bg-black/50">
+              <div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-1.5">
+                <span className="text-xs font-medium text-white/40">
+                  {cmd.label || (cmd.language ? cmd.language : 'Command')}
+                </span>
+                <button
+                  onClick={() => handleCopyCommand(cmd.code, i)}
+                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-white/40 hover:bg-white/10 hover:text-white"
+                >
+                  {copiedIndex === i ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
+                  {copiedIndex === i ? 'Copied' : 'Copy'}
+                </button>
+              </div>
+              <pre className="overflow-x-auto p-3 font-mono text-sm text-emerald-300">
+                {resolve(cmd.code)}
+              </pre>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Expected outcome */}
+      {step.expected_outcome && (
+        <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+          <h4 className="mb-1 text-xs font-medium text-white/50">Expected Outcome</h4>
+          <p className="text-sm text-white/70">{resolve(step.expected_outcome)}</p>
+        </div>
+      )}
+
+      {/* Verification */}
+      {verificationPrompt && (
+        <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+          <h4 className="mb-2 text-xs font-medium text-white/50">Verification</h4>
+          {verificationType === 'checkbox' ? (
+            <label className="flex items-center gap-2 text-sm text-white/70">
+              <input
+                type="checkbox"
+                checked={!!verificationValue}
+                onChange={(e) => onVerificationChange(e.target.checked ? 'confirmed' : '')}
+                disabled={isCompleted}
+                className="rounded border-white/20"
+              />
+              {resolve(verificationPrompt)}
+            </label>
+          ) : (
+            <div>
+              <p className="mb-2 text-sm text-white/70">{resolve(verificationPrompt)}</p>
+              <input
+                type="text"
+                value={verificationValue}
+                onChange={(e) => onVerificationChange(e.target.value)}
+                disabled={isCompleted}
+                placeholder="Enter observed value..."
+                className="w-full rounded border border-white/10 bg-black/50 px-3 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 disabled:opacity-50"
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Notes */}
+      {step.notes_enabled !== false && (
+        <div>
+          <label className="mb-1 block text-xs font-medium text-white/50">Notes</label>
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            placeholder="Add notes for this step..."
+            rows={2}
+            className="w-full rounded-lg 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>
+      )}
+
+      {/* Reference link */}
+      {step.reference_url && (
+        <a
+          href={resolve(step.reference_url)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white"
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          Reference Documentation
+        </a>
+      )}
+
+      {/* Complete button */}
+      <div className="pt-2">
+        <button
+          onClick={onMarkComplete}
+          disabled={!canComplete()}
+          className={cn(
+            'flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
+            isCompleted
+              ? 'bg-emerald-400/10 text-emerald-400'
+              : 'bg-white text-black hover:bg-white/90 disabled:opacity-40 disabled:hover:bg-white'
+          )}
+        >
+          {isCompleted ? (
+            <>
+              <CheckCircle2 className="h-4 w-4" />
+              Completed
+            </>
+          ) : isLast ? (
+            'Complete Procedure'
+          ) : (
+            'Mark Complete & Next'
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}