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

feat: Add custom step continuation flow with save/use/branch options

Browse Source 
Custom steps during tree navigation now support a complete workflow:
- PostStepActionModal: Save for Later / Use Now / Both options
- ContinuationModal: Pick descendant nodes or build custom branch
- ForkTreeModal: Save modified tree as personal copy at completion
- Custom steps are recorded in decisions array for export
- Fix popular-tags API endpoint URL mismatch
- Add aria-labels for accessibility on select/button elements

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-02-03 20:53:48 -05:00
parent 8498d25efb
commit 6bd21d7efc
9 changed files with 726 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -1,12 +1,14 @@
import { useEffect, useState } from 'react'
import { useParams, useNavigate, useLocation } from 'react-router-dom'
import { treesApi, sessionsApi } from '@/api'
import { treesApi, sessionsApi, stepsApi } from '@/api'
import { useTreeNavigationShortcuts } from '@/hooks/useKeyboardShortcuts'
import type { Tree, Session, DecisionRecord, TreeStructure, CustomStep, Step } from '@/types'
import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'
import { cn } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { CustomStepModal } from '@/components/step-library/CustomStepModal'
import { PostStepActionModal, ContinuationModal, ForkTreeModal, type DescendantNode } from '@/components/session'
import { Plus, CheckCircle } from 'lucide-react'
interface LocationState {
sessionId?: string
@@ -37,6 +39,22 @@ export function TreeNavigationPage() {
const [customSteps, setCustomSteps] = useState<CustomStep[]>([])
const [showCustomStepModal, setShowCustomStepModal] = useState(false)
// Post-step action flow
const [showPostStepModal, setShowPostStepModal] = useState(false)
const [pendingStep, setPendingStep] = useState<Step | CustomStepDraft | null>(null)
const [pendingStepIsFromLibrary, setPendingStepIsFromLibrary] = useState(false)
const [isSavingStep, setIsSavingStep] = useState(false)
// Continuation flow
const [showContinuationModal, setShowContinuationModal] = useState(false)
const [branchOriginNodeId, setBranchOriginNodeId] = useState<string | null>(null)
// Custom branch mode
const [customBranchMode, setCustomBranchMode] = useState(false)
// Fork flow
const [showForkModal, setShowForkModal] = useState(false)
useEffect(() => {
if (treeId) {
loadTreeAndSession()
@@ -105,6 +123,31 @@ export function TreeNavigationPage() {
return customSteps.find(cs => cs.id === nodeId) || null
}
// Get descendant nodes (grandchildren) from a decision node's options
const getDescendantNodes = (decisionNodeId: string): DescendantNode[] => {
const decisionNode = findNode(decisionNodeId, tree?.tree_structure)
if (!decisionNode || decisionNode.type !== 'decision' || !decisionNode.options) {
return []
}
const descendants: DescendantNode[] = []
for (const option of decisionNode.options) {
if (!option.next_node_id) continue
const nextNode = findNode(option.next_node_id, tree?.tree_structure)
if (!nextNode) continue
descendants.push({
id: nextNode.id,
label: nextNode.question || nextNode.title || 'Untitled',
type: nextNode.type,
parentOptionLabel: option.label
})
}
return descendants
}
// Handler functions - defined before hook call to avoid temporal dead zone
const handleSelectOption = async (_optionId: string, optionLabel: string, nextNodeId: string) => {
if (!session || !tree) return
@@ -219,35 +262,214 @@ export function TreeNavigationPage() {
setCurrentNodeId(newPath[newPath.length - 1])
}
const handleInsertCustomStep = async (step: Step | CustomStepDraft) => {
if (!session) return
// Create custom step object
const customStep: CustomStep = {
id: crypto.randomUUID(),
inserted_after_node_id: currentNodeId,
step_data: step,
timestamp: new Date().toISOString()
}
// Add to local state
const newCustomSteps = [...customSteps, customStep]
setCustomSteps(newCustomSteps)
// Navigate to custom step (becomes current)
setCurrentNodeId(customStep.id)
// Called when CustomStepModal submits - show action modal instead of inserting directly
const handleStepCreated = (step: Step | CustomStepDraft, isFromLibrary: boolean) => {
setPendingStep(step)
setPendingStepIsFromLibrary(isFromLibrary)
setShowCustomStepModal(false)
setShowPostStepModal(true)
}
// Save to backend
const resetPendingStep = () => {
setShowPostStepModal(false)
setPendingStep(null)
setPendingStepIsFromLibrary(false)
setIsSavingStep(false)
}
// Save to library only, don't insert into session
const handleSaveForLater = async () => {
if (!pendingStep) return
setIsSavingStep(true)
try {
if (!pendingStepIsFromLibrary) {
await stepsApi.create({
title: pendingStep.title,
step_type: pendingStep.step_type,
content: pendingStep.content,
visibility: 'private',
tags: pendingStep.tags || []
})
}
resetPendingStep()
} catch (err) {
console.error('Failed to save step to library:', err)
setIsSavingStep(false)
}
}
// Insert into session and show continuation options
const handleUseNow = async () => {
if (!pendingStep || !session) return
setIsSavingStep(true)
try {
// Remember where we branched from (for showing descendants later)
setBranchOriginNodeId(currentNodeId)
// Create custom step object
const customStep: CustomStep = {
id: crypto.randomUUID(),
inserted_after_node_id: currentNodeId,
step_data: pendingStep,
timestamp: new Date().toISOString()
}
// Record decision (so it appears in exports)
const newDecision: DecisionRecord = {
node_id: customStep.id,
question: null,
answer: null,
action_performed: `Custom Step: ${pendingStep.title}`,
notes: pendingStep.content.instructions || null,
automation_used: false,
timestamp: new Date().toISOString(),
attachments: []
}
// Update state
const newCustomSteps = [...customSteps, customStep]
const newDecisions = [...decisions, newDecision]
const newPath = [...pathTaken, customStep.id]
setCustomSteps(newCustomSteps)
setDecisions(newDecisions)
setPathTaken(newPath)
setCurrentNodeId(customStep.id)
// Persist to backend
await sessionsApi.update(session.id, {
path_taken: newPath,
decisions: newDecisions,
custom_steps: newCustomSteps
})
resetPendingStep()
// Show continuation modal
setShowContinuationModal(true)
} catch (err) {
console.error('Failed to save custom step:', err)
console.error('Failed to insert custom step:', err)
setIsSavingStep(false)
}
}
// Save to library AND insert into session
const handleBoth = async () => {
if (!pendingStep) return
setIsSavingStep(true)
try {
// Save to library first
if (!pendingStepIsFromLibrary) {
await stepsApi.create({
title: pendingStep.title,
step_type: pendingStep.step_type,
content: pendingStep.content,
visibility: 'private',
tags: pendingStep.tags || []
})
}
// Then use now (this will handle the rest and reset pending step)
await handleUseNow()
} catch (err) {
console.error('Failed to save and insert step:', err)
setIsSavingStep(false)
}
}
// Handle selecting a descendant node from continuation modal
const handleSelectDescendant = async (nodeId: string) => {
setShowContinuationModal(false)
setBranchOriginNodeId(null)
const newPath = [...pathTaken, nodeId]
setPathTaken(newPath)
setCurrentNodeId(nodeId)
setNotes('')
try {
await sessionsApi.update(session!.id, { path_taken: newPath })
} catch (err) {
console.error('Failed to update session path:', err)
}
}
// Enter custom branch building mode
const handleBuildCustomBranch = () => {
setShowContinuationModal(false)
setCustomBranchMode(true)
}
// Complete session from custom branch mode
const handleCustomBranchComplete = async () => {
if (!session) return
setIsCompleting(true)
setError(null)
try {
// Record completion decision
const completionDecision: DecisionRecord = {
node_id: currentNodeId,
question: null,
answer: null,
action_performed: 'Custom Branch Completed',
notes: notes || 'Issue resolved via custom troubleshooting steps',
automation_used: false,
timestamp: new Date().toISOString(),
attachments: []
}
await sessionsApi.update(session.id, {
decisions: [...decisions, completionDecision]
})
await sessionsApi.complete(session.id)
// Show fork modal if custom steps exist
if (customSteps.length > 0) {
setShowForkModal(true)
} else {
navigate(`/sessions/${session.id}`)
}
} catch (err) {
console.error('Failed to complete session:', err)
setError('Failed to complete session. Please try again.')
} finally {
setIsCompleting(false)
}
}
// Fork tree with custom branch
const handleForkTree = async (name: string, description: string) => {
if (!tree) return
try {
// Create a forked tree structure
// For now, we'll create a simple copy - the custom steps are documented in the session
const forkedTree = await treesApi.create({
name,
description,
tree_structure: tree.tree_structure, // Base structure
is_public: false
})
navigate(`/trees/${forkedTree.id}/edit`)
} catch (err) {
console.error('Failed to fork tree:', err)
throw err
}
}
// Skip forking and go to session detail
const handleSkipFork = () => {
setShowForkModal(false)
navigate(`/sessions/${session!.id}`)
}
// Compute current node for keyboard shortcuts (must be before any returns for hooks rules)
const currentNode = tree ? findNode(currentNodeId, tree.tree_structure) : null
const currentCustomStep = findCustomStep(currentNodeId)
@@ -495,6 +717,38 @@ export function TreeNavigationPage() {
</div>
</div>
)}
{/* Custom Branch Controls */}
{customBranchMode && (
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">
<p className="mb-3 text-sm text-amber-600 dark:text-amber-400">
Building custom branch - add steps until the issue is resolved
</p>
<div className="flex flex-wrap gap-3">
<button
onClick={() => setShowCustomStepModal(true)}
className={cn(
'flex items-center gap-2 rounded-md border border-input px-4 py-2 text-sm font-medium',
'bg-background hover:bg-accent hover:text-accent-foreground'
)}
>
<Plus className="h-4 w-4" />
Add Another Step
</button>
<button
onClick={handleCustomBranchComplete}
disabled={isCompleting}
className={cn(
'flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white',
'hover:bg-green-700 disabled:opacity-50'
)}
>
<CheckCircle className="h-4 w-4" />
{isCompleting ? 'Completing...' : 'This Solves My Issue'}
</button>
</div>
</div>
)}
</div>
)}
@@ -629,7 +883,39 @@ export function TreeNavigationPage() {
<CustomStepModal
isOpen={showCustomStepModal}
onClose={() => setShowCustomStepModal(false)}
onInsertStep={handleInsertCustomStep}
onInsertStep={handleStepCreated}
/>
{/* Post Step Action Modal */}
{pendingStep && (
<PostStepActionModal
isOpen={showPostStepModal}
onClose={resetPendingStep}
step={pendingStep}
onSaveForLater={handleSaveForLater}
onUseNow={handleUseNow}
onBoth={handleBoth}
isFromLibrary={pendingStepIsFromLibrary}
isSaving={isSavingStep}
/>
)}
{/* Continuation Modal */}
<ContinuationModal
isOpen={showContinuationModal}
onClose={() => setShowContinuationModal(false)}
descendantNodes={branchOriginNodeId ? getDescendantNodes(branchOriginNodeId) : []}
onSelectNode={handleSelectDescendant}
onBuildCustomBranch={handleBuildCustomBranch}
/>
{/* Fork Tree Modal */}
<ForkTreeModal
isOpen={showForkModal}
onClose={() => setShowForkModal(false)}
originalTreeName={tree?.name || 'Tree'}
onFork={handleForkTree}
onSkip={handleSkipFork}
/>
</div>
)