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>
This commit is contained in:
chihlasm
147
frontend/src/components/procedural/CompletionSummary.tsx
Normal file
147
frontend/src/components/procedural/CompletionSummary.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
249
frontend/src/components/procedural/IntakeFormModal.tsx
Normal file
249
frontend/src/components/procedural/IntakeFormModal.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
46
frontend/src/components/procedural/ProgressBar.tsx
Normal file
46
frontend/src/components/procedural/ProgressBar.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
60
frontend/src/components/procedural/StepChecklist.tsx
Normal file
60
frontend/src/components/procedural/StepChecklist.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
236
frontend/src/components/procedural/StepDetail.tsx
Normal file
236
frontend/src/components/procedural/StepDetail.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user