chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: flexible intake — deferred variables + prepared sessions

Browse Source 
Remove blocking intake form modal. Variables are now filled inline during
flow execution or pre-filled via prepared sessions. Adds PATCH /sessions/{id}/variables
endpoint, POST /sessions/prepare for session pre-staging, inline variable prompts
in StepDetail, editable Session Variables panel, and "Prepared for You" dashboard section.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-10 01:42:52 -04:00
parent 4727106141
commit 299dff8bfc
22 changed files with 1117 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
frontend/src/pages/ProceduralNavigationPage.tsx
View File

@@ -1,13 +1,12 @@
import { useEffect, useState, useRef } from 'react'
import { useParams, useNavigate, useLocation } from 'react-router-dom'
import { ChevronLeft, ChevronRight, ListOrdered, Settings2, X, Plus } from 'lucide-react'
import { ChevronLeft, ChevronRight, ListOrdered, Settings2, X, Plus, Check, AlertCircle } from 'lucide-react'
import { treesApi } from '@/api/trees'
import { sessionsApi } from '@/api/sessions'
import { stepsApi } from '@/api/steps'
import type { Tree, Session, ProceduralStep, DecisionRecord, RuntimeStep, CustomProceduralStep } from '@/types'
import type { Tree, Session, ProceduralStep, DecisionRecord, RuntimeStep, CustomProceduralStep, IntakeFormField } from '@/types'
import type { CustomStep } from '@/types/session'
import type { Step } from '@/types/step'
import { IntakeFormModal } from '@/components/procedural/IntakeFormModal'
import { StepChecklist } from '@/components/procedural/StepChecklist'
import { StepDetail } from '@/components/procedural/StepDetail'
import { ProgressBar } from '@/components/procedural/ProgressBar'
@@ -64,7 +63,6 @@ export function ProceduralNavigationPage() {
const [tree, setTree] = useState<Tree | null>(null)
const [session, setSession] = useState<Session | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [showIntakeForm, setShowIntakeForm] = useState(false)
const [sessionVariables, setSessionVariables] = useState<Record<string, string>>({})
const [currentStepIndex, setCurrentStepIndex] = useState(0)
const [stepStates, setStepStates] = useState<Map<string, StepState>>(new Map())
@@ -88,6 +86,22 @@ export function ProceduralNavigationPage() {
const [isSavingStep, setIsSavingStep] = useState(false)
const [copilotOpen, setCopilotOpen] = useState(false)
// Editable variables panel state
const [editingVarName, setEditingVarName] = useState<string | null>(null)
const [editingVarValue, setEditingVarValue] = useState('')
const [showUnfilledWarning, setShowUnfilledWarning] = useState(false)
// Get intake form fields from tree snapshot or tree
const intakeFields: IntakeFormField[] = (() => {
if (tree?.intake_form && tree.intake_form.length > 0) return tree.intake_form
// Fallback: check tree snapshot on session
const snapshot = session?.tree_snapshot as Record<string, unknown> | undefined
if (snapshot?.intake_form && Array.isArray(snapshot.intake_form)) {
return snapshot.intake_form as IntakeFormField[]
}
return []
})()
// Get procedural steps from tree
const getSteps = (): ProceduralStep[] => {
if (!tree) return []
@@ -127,9 +141,9 @@ export function ProceduralNavigationPage() {
// Elapsed time timer
useEffect(() => {
if (session && !isComplete) {
if (session && session.started_at && !isComplete) {
const calcElapsed = () => {
const start = parseTimestamp(session.started_at).getTime()
const start = parseTimestamp(session.started_at!).getTime()
setElapsedMinutes(Math.max(0, Math.floor((Date.now() - start) / 60000)))
}
calcElapsed()
@@ -169,12 +183,9 @@ export function ProceduralNavigationPage() {
return
}
// Check if intake form exists
if (treeData.intake_form && treeData.intake_form.length > 0) {
setShowIntakeForm(true)
} else {
await startSession(id, {})
}
// Start session immediately — no intake form modal
// Variables will be filled inline during execution
await startSession(id, {})
} catch {
toast.error('Failed to load flow')
navigate('/trees')
@@ -191,7 +202,6 @@ export function ProceduralNavigationPage() {
})
setSession(newSession)
setSessionVariables(variables)
setShowIntakeForm(false)
// Initialize step states
const initialStates = new Map<string, StepState>()
@@ -212,7 +222,6 @@ export function ProceduralNavigationPage() {
const sessionData = await sessionsApi.get(sessionId)
setSession(sessionData)
setSessionVariables(sessionData.session_variables || {})
setShowIntakeForm(false)
// Initialize step states from session decisions
const allSteps = getStepsFromTree(treeData)
@@ -257,9 +266,21 @@ export function ProceduralNavigationPage() {
return structure.steps || []
}
const handleIntakeSubmit = async (variables: Record<string, string>) => {
if (!treeId) return
await startSession(treeId, variables)
// Handle inline variable submission (from StepDetail or variables panel)
const handleVariableSubmit = async (variableName: string, value: string) => {
if (!session) return
// Optimistic update
const newVars = { ...sessionVariables, [variableName]: value }
setSessionVariables(newVars)
try {
await sessionsApi.updateVariables(session.id, { [variableName]: value })
} catch {
// Revert on failure
setSessionVariables(sessionVariables)
toast.error('Failed to save variable')
}
}
const handleMarkComplete = async () => {
@@ -310,7 +331,18 @@ export function ProceduralNavigationPage() {
// Move to next step or complete
if (currentStepIndex >= procedureSteps.length - 1) {
// Last step — complete the procedure
// Last step — check for unfilled required variables
const unfilledReqVars = intakeFields.filter(
f => f.required && !sessionVariables[f.variable_name]?.trim()
)
if (unfilledReqVars.length > 0 && !showUnfilledWarning) {
// Show warning but don't block
setShowUnfilledWarning(true)
return
}
setShowUnfilledWarning(false)
// Complete the procedure
const completedTime = new Date().toISOString()
await sessionsApi.complete(session.id, {
outcome: 'resolved',
@@ -461,6 +493,21 @@ export function ProceduralNavigationPage() {
setPendingCustomStep(null)
}
// Variables panel: start editing
const startEditingVar = (varName: string) => {
setEditingVarName(varName)
setEditingVarValue(sessionVariables[varName] || '')
}
// Variables panel: save edit
const saveEditingVar = () => {
if (editingVarName && editingVarValue.trim()) {
handleVariableSubmit(editingVarName, editingVarValue.trim())
}
setEditingVarName(null)
setEditingVarValue('')
}
// Loading state
if (isLoading) {
return (
@@ -470,19 +517,6 @@ export function ProceduralNavigationPage() {
)
}
// Intake form modal
if (showIntakeForm && tree) {
return (
<IntakeFormModal
isOpen={true}
fields={tree.intake_form || []}
treeName={tree.name}
onSubmit={handleIntakeSubmit}
onCancel={() => navigate('/trees')}
/>
)
}
// Completion summary
if (isComplete && tree && session) {
return (
@@ -501,7 +535,7 @@ export function ProceduralNavigationPage() {
}])
)}
variables={sessionVariables}
startedAt={session.started_at}
startedAt={session.started_at || ''}
completedAt={completedAt}
onExport={() => navigate(`/sessions/${session.id}`)}
onClose={() => navigate('/trees')}
@@ -516,6 +550,11 @@ export function ProceduralNavigationPage() {
const currentStep = procedureSteps[currentStepIndex]
const currentStepState = currentStep ? stepStates.get(currentStep.id) : undefined
// Count unfilled required variables
const unfilledRequired = intakeFields.filter(
f => f.required && !sessionVariables[f.variable_name]?.trim()
).length
return (
<div className="flex h-full min-h-0 flex-col overflow-hidden">
{/* Top bar */}
@@ -583,15 +622,20 @@ export function ProceduralNavigationPage() {
onStepClick={setCurrentStepIndex}
/>
{/* View Parameters button */}
{Object.keys(sessionVariables).length > 0 && (
{/* Session Variables button */}
{intakeFields.length > 0 && (
<div className="mt-3 border-t border-border pt-3">
<button
onClick={() => setParamsOpen(true)}
className="flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-muted-foreground"
>
<Settings2 className="h-3.5 w-3.5" />
View Parameters ({Object.keys(sessionVariables).length})
Session Variables
{unfilledRequired > 0 && (
<span className="ml-auto flex h-4 w-4 items-center justify-center rounded-full bg-amber-400/20 text-[0.6rem] font-bold text-amber-400">
{unfilledRequired}
</span>
)}
</button>
</div>
)}
@@ -614,6 +658,8 @@ export function ProceduralNavigationPage() {
isCompleted={completedStepIds.has(currentStep.id)}
onMarkComplete={handleMarkComplete}
isLast={currentStepIndex === procedureSteps.length - 1}
intakeFields={intakeFields}
onVariableSubmit={handleVariableSubmit}
/>
)}
@@ -667,7 +713,16 @@ export function ProceduralNavigationPage() {
confirmLabel="Exit"
/>
{/* Parameters popover */}
<ConfirmDialog
isOpen={showUnfilledWarning}
onClose={() => setShowUnfilledWarning(false)}
onConfirm={handleMarkComplete}
title="Unfilled Variables"
message={`${intakeFields.filter(f => f.required && !sessionVariables[f.variable_name]?.trim()).length} required variable(s) are still empty. You can fill them now via the Session Variables panel, or complete anyway. Unfilled variables will appear as blank in exports.`}
confirmLabel="Complete Anyway"
/>
{/* Session Variables Panel (editable) */}
{paramsOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
@@ -676,7 +731,7 @@ export function ProceduralNavigationPage() {
/>
<div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl backdrop-blur-xs">
<div className="flex items-center justify-between border-b border-border px-5 py-4">
<h3 className="text-sm font-semibold text-foreground">Project Parameters</h3>
<h3 className="text-sm font-semibold text-foreground">Session Variables</h3>
<button
onClick={() => setParamsOpen(false)}
className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
@@ -686,12 +741,111 @@ export function ProceduralNavigationPage() {
</div>
<div className="max-h-[60vh] overflow-y-auto p-5">
<div className="space-y-2">
{Object.entries(sessionVariables).map(([key, value]) => (
<div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-accent px-3 py-2">
<span className="text-xs font-medium text-muted-foreground">{key.replace(/_/g, ' ')}</span>
<span className="text-right text-sm text-muted-foreground">{value || 'N/A'}</span>
</div>
))}
{intakeFields
.sort((a, b) => a.display_order - b.display_order)
.map((field) => {
const value = sessionVariables[field.variable_name] || ''
const isFilled = !!value.trim()
const isEditing = editingVarName === field.variable_name
return (
<div
key={field.variable_name}
className={cn(
'rounded-lg border px-3 py-2.5',
isFilled ? 'border-border bg-accent' : 'border-cyan-500/20 bg-cyan-500/5'
)}
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
{isFilled ? (
<Check className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
) : (
<AlertCircle className="h-3.5 w-3.5 shrink-0 text-cyan-400" />
)}
<span className="text-xs font-medium text-muted-foreground truncate">
{field.label}
{field.required && <span className="ml-1 text-amber-400">*</span>}
</span>
</div>
{!isEditing && (
<button
onClick={() => startEditingVar(field.variable_name)}
className="shrink-0 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-card hover:text-foreground"
>
{isFilled ? 'Edit' : 'Fill'}
</button>
)}
</div>
{isEditing ? (
<div className="mt-2">
{field.field_type === 'select' && field.options?.length ? (
<select
value={editingVarValue}
onChange={(e) => setEditingVarValue(e.target.value)}
autoFocus
className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
>
<option value="">{field.placeholder || 'Select...'}</option>
{field.options.map((opt) => (
<option key={opt} value={opt}>{opt}</option>
))}
</select>
) : field.field_type === 'textarea' ? (
<textarea
value={editingVarValue}
onChange={(e) => setEditingVarValue(e.target.value)}
autoFocus
rows={3}
placeholder={field.placeholder}
className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
/>
) : (
<input
type={field.field_type === 'number' ? 'number' : field.field_type === 'email' ? 'email' : 'text'}
value={editingVarValue}
onChange={(e) => setEditingVarValue(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') saveEditingVar() }}
autoFocus
placeholder={field.placeholder}
className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
/>
)}
{field.help_text && (
<p className="mt-1 text-[0.625rem] text-muted-foreground">{field.help_text}</p>
)}
<div className="mt-2 flex justify-end gap-2">
<button
onClick={() => { setEditingVarName(null); setEditingVarValue('') }}
className="rounded px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground"
>
Cancel
</button>
<button
onClick={saveEditingVar}
disabled={!editingVarValue.trim()}
className="rounded bg-gradient-brand px-2.5 py-1 text-xs font-medium text-[#101114] disabled:opacity-40"
>
Save
</button>
</div>
</div>
) : isFilled ? (
<p className="mt-1 text-sm text-foreground truncate">{value}</p>
) : null}
</div>
)
})}
{/* Show any extra variables not in intake form */}
{Object.entries(sessionVariables)
.filter(([key]) => !intakeFields.some(f => f.variable_name === key))
.map(([key, value]) => (
<div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-accent px-3 py-2">
<span className="text-xs font-medium text-muted-foreground">{key.replace(/_/g, ' ')}</span>
<span className="text-right text-sm text-muted-foreground">{value || 'N/A'}</span>
</div>
))}
</div>
</div>
</div>