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

2
frontend/src/api/steps.ts
View File

@@ -45,7 +45,7 @@ export const stepsApi = {
},
async getPopularTags(): Promise<PopularTag[]> {
const response = await apiClient.get<PopularTag[]>('/steps/popular-tags')
const response = await apiClient.get<PopularTag[]>('/steps/tags/popular')
return response.data
},

139
frontend/src/components/session/ContinuationModal.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { Modal } from '@/components/common/Modal'
import { ArrowRight, GitBranch, AlertTriangle, HelpCircle, Zap, CheckCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { NodeType } from '@/types/tree'
export interface DescendantNode {
id: string
label: string
type: NodeType
parentOptionLabel: string
}
interface ContinuationModalProps {
isOpen: boolean
onClose: () => void
descendantNodes: DescendantNode[]
onSelectNode: (nodeId: string) => void
onBuildCustomBranch: () => void
}
const nodeTypeIcons: Record<NodeType, React.ReactNode> = {
decision: <HelpCircle className="h-4 w-4 text-blue-500" />,
action: <Zap className="h-4 w-4 text-amber-500" />,
solution: <CheckCircle className="h-4 w-4 text-green-500" />
}
const nodeTypeLabels: Record<NodeType, string> = {
decision: 'Decision',
action: 'Action',
solution: 'Solution'
}
export function ContinuationModal({
isOpen,
onClose,
descendantNodes,
onSelectNode,
onBuildCustomBranch
}: ContinuationModalProps) {
// Group nodes by parent option
const groupedNodes = descendantNodes.reduce((acc, node) => {
if (!acc[node.parentOptionLabel]) {
acc[node.parentOptionLabel] = []
}
acc[node.parentOptionLabel].push(node)
return acc
}, {} as Record<string, DescendantNode[]>)
const hasDescendants = descendantNodes.length > 0
return (
<Modal isOpen={isOpen} onClose={onClose} title="Where does this lead?" size="lg">
<div className="space-y-6">
{/* Descendant Selection */}
{hasDescendants && (
<div>
<p className="mb-4 text-sm text-muted-foreground">
Select the next step in your troubleshooting path:
</p>
<div className="space-y-4">
{Object.entries(groupedNodes).map(([parentOption, nodes]) => (
<div key={parentOption}>
<p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
From: {parentOption}
</p>
<div className="space-y-2">
{nodes.map(node => (
<button
key={node.id}
onClick={() => onSelectNode(node.id)}
className={cn(
'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent'
)}
>
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
{nodeTypeIcons[node.type]}
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{node.label}</p>
<p className="text-xs text-muted-foreground">
{nodeTypeLabels[node.type]}
</p>
</div>
<ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
</button>
))}
</div>
</div>
))}
</div>
</div>
)}
{/* Divider */}
{hasDescendants && (
<div className="flex items-center gap-4">
<div className="h-px flex-1 bg-border" />
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Or
</span>
<div className="h-px flex-1 bg-border" />
</div>
)}
{/* Build Custom Branch */}
<div>
<button
onClick={onBuildCustomBranch}
className={cn(
'flex w-full items-center gap-3 rounded-lg border-2 border-dashed border-amber-500/50 bg-amber-500/5 p-4 text-left transition-colors',
'hover:border-amber-500 hover:bg-amber-500/10'
)}
>
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-amber-500/10">
<GitBranch className="h-5 w-5 text-amber-500" />
</div>
<div className="flex-1">
<p className="font-medium">Build Custom Branch</p>
<p className="text-sm text-muted-foreground">
Create your own troubleshooting path with custom steps
</p>
</div>
</button>
{/* Warning */}
<div className="mt-3 flex items-start gap-2 rounded-md bg-amber-500/10 p-3">
<AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" />
<p className="text-sm text-amber-700 dark:text-amber-400">
You'll need to complete this branch manually or mark the issue as resolved.
Custom branches can be saved as a personal tree when your session ends.
</p>
</div>
</div>
</div>
</Modal>
)
}

144
frontend/src/components/session/ForkTreeModal.tsx Normal file
View File

@@ -0,0 +1,144 @@
import { useState } from 'react'
import { Modal } from '@/components/common/Modal'
import { GitFork, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
interface ForkTreeModalProps {
isOpen: boolean
onClose: () => void
originalTreeName: string
onFork: (name: string, description: string) => Promise<void>
onSkip: () => void
}
export function ForkTreeModal({
isOpen,
onClose,
originalTreeName,
onFork,
onSkip
}: ForkTreeModalProps) {
const [name, setName] = useState(`${originalTreeName} (Custom)`)
const [description, setDescription] = useState('')
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleFork = async () => {
if (!name.trim()) {
setError('Please enter a name for your tree')
return
}
setIsSaving(true)
setError(null)
try {
await onFork(name.trim(), description.trim())
} catch (err) {
setError('Failed to save tree. Please try again.')
console.error(err)
} finally {
setIsSaving(false)
}
}
const footer = (
<div className="flex justify-end gap-3">
<button
onClick={onSkip}
disabled={isSaving}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium transition-colors',
'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
Skip
</button>
<button
onClick={handleFork}
disabled={isSaving || !name.trim()}
className={cn(
'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors',
'hover:bg-primary/90',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
{isSaving ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Saving...
</>
) : (
<>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</>
)}
</button>
</div>
)
return (
<Modal isOpen={isOpen} onClose={onClose} title="Save Custom Tree?" footer={footer}>
<div className="space-y-4">
<div className="flex items-start gap-3 rounded-lg bg-accent/50 p-4">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
<GitFork className="h-5 w-5 text-primary" />
</div>
<div>
<p className="font-medium">You've created a custom troubleshooting path!</p>
<p className="mt-1 text-sm text-muted-foreground">
Save it as your own personal tree to reuse this troubleshooting flow in the future.
</p>
</div>
</div>
<div className="space-y-4">
<div>
<label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium">
Tree Name <span className="text-destructive">*</span>
</label>
<input
id="tree-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="My Custom Tree"
className={cn(
'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
'focus:outline-none focus:ring-2 focus:ring-ring'
)}
/>
</div>
<div>
<label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="tree-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Describe what this tree helps troubleshoot..."
rows={3}
className={cn(
'w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
'focus:outline-none focus:ring-2 focus:ring-ring',
'resize-none'
)}
/>
</div>
</div>
{error && (
<p className="text-sm text-destructive">{error}</p>
)}
<p className="text-xs text-muted-foreground">
The new tree will include your custom steps and will be saved to your personal tree library.
</p>
</div>
</Modal>
)
}

114
frontend/src/components/session/PostStepActionModal.tsx Normal file
View File

@@ -0,0 +1,114 @@
import { Modal } from '@/components/common/Modal'
import { Bookmark, Play, BookmarkPlus } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Step } from '@/types/step'
import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'
interface PostStepActionModalProps {
isOpen: boolean
onClose: () => void
step: Step | CustomStepDraft
onSaveForLater: () => void
onUseNow: () => void
onBoth: () => void
isFromLibrary: boolean
isSaving?: boolean
}
export function PostStepActionModal({
isOpen,
onClose,
step,
onSaveForLater,
onUseNow,
onBoth,
isFromLibrary,
isSaving = false
}: PostStepActionModalProps) {
return (
<Modal isOpen={isOpen} onClose={onClose} title="What would you like to do?">
<div className="space-y-3">
<p className="mb-4 text-sm text-muted-foreground">
You've created: <strong className="text-foreground">{step.title}</strong>
</p>
{/* Save for Later - Only show if not already from library */}
{!isFromLibrary && (
<button
onClick={onSaveForLater}
disabled={isSaving}
className={cn(
'w-full rounded-lg border border-border p-4 text-left transition-colors',
'hover:border-primary hover:bg-accent',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10">
<Bookmark className="h-5 w-5 text-blue-500" />
</div>
<div>
<p className="font-medium">Save for Later</p>
<p className="text-sm text-muted-foreground">
Add to your step library for future use
</p>
</div>
</div>
</button>
)}
{/* Use Now */}
<button
onClick={onUseNow}
disabled={isSaving}
className={cn(
'w-full rounded-lg border border-border p-4 text-left transition-colors',
'hover:border-primary hover:bg-accent',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10">
<Play className="h-5 w-5 text-green-500" />
</div>
<div>
<p className="font-medium">Use Now</p>
<p className="text-sm text-muted-foreground">
Insert into this session and continue troubleshooting
</p>
</div>
</div>
</button>
{/* Both - Only show if not already from library */}
{!isFromLibrary && (
<button
onClick={onBoth}
disabled={isSaving}
className={cn(
'w-full rounded-lg border border-border p-4 text-left transition-colors',
'hover:border-primary hover:bg-accent',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500/10">
<BookmarkPlus className="h-5 w-5 text-purple-500" />
</div>
<div>
<p className="font-medium">Do Both</p>
<p className="text-sm text-muted-foreground">
Save to library AND use in this session
</p>
</div>
</div>
</button>
)}
{isSaving && (
<p className="text-center text-sm text-muted-foreground">Saving...</p>
)}
</div>
</Modal>
)
}

3
frontend/src/components/session/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { PostStepActionModal } from './PostStepActionModal'
export { ContinuationModal, type DescendantNode } from './ContinuationModal'
export { ForkTreeModal } from './ForkTreeModal'

31
frontend/src/components/step-library/CustomStepModal.tsx
View File

@@ -1,7 +1,6 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { stepsApi } from '@/api'
import { StepForm } from './StepForm'
import { StepLibraryBrowser } from './StepLibraryBrowser'
import type { Step, StepCreate } from '@/types/step'
@@ -25,7 +24,7 @@ export interface CustomStepDraft {
interface CustomStepModalProps {
isOpen: boolean
onClose: () => void
onInsertStep: (step: Step | CustomStepDraft) => void
onInsertStep: (step: Step | CustomStepDraft, isFromLibrary: boolean) => void
}
type Tab = 'create' | 'browse'
@@ -37,26 +36,22 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
if (!isOpen) return null
const handleFormSubmit = async (data: StepCreate, saveToLibrary: boolean) => {
const handleFormSubmit = async (data: StepCreate, _saveToLibrary: boolean) => {
// Note: saveToLibrary preference is no longer used here - the PostStepActionModal
// handles the decision of whether to save to library, use now, or both
setIsSubmitting(true)
setError(null)
try {
if (saveToLibrary) {
// Save to library first, then return the saved step
const savedStep = await stepsApi.create(data)
onInsertStep(savedStep)
} else {
// Return as draft (not saved to library)
const draft: CustomStepDraft = {
title: data.title,
step_type: data.step_type,
content: data.content,
category_id: data.category_id,
tags: data.tags
}
onInsertStep(draft)
// Always create a draft - saving to library is handled by PostStepActionModal
const draft: CustomStepDraft = {
title: data.title,
step_type: data.step_type,
content: data.content,
category_id: data.category_id,
tags: data.tags
}
onInsertStep(draft, false) // false = not from library (user typed it)
} catch (err) {
console.error('Failed to create step:', err)
setError('Failed to create step. Please try again.')
@@ -65,7 +60,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
}
const handleBrowserInsert = (step: Step) => {
onInsertStep(step)
onInsertStep(step, true) // true = from library (already saved)
}
return (

1
frontend/src/components/step-library/StepForm.tsx
View File

@@ -340,6 +340,7 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
type="button"
onClick={() => removeTag(tag)}
className="rounded-full hover:bg-primary/20"
aria-label={`Remove tag ${tag}`}
>
<X className="h-3 w-3" />
</button>

4
frontend/src/components/step-library/StepLibraryBrowser.tsx
View File

@@ -149,6 +149,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{/* Category Filter */}
<select
aria-label="Filter by category"
value={selectedCategoryId || ''}
onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
@@ -161,6 +162,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Type Filter */}
<select
aria-label="Filter by step type"
value={selectedStepType || ''}
onChange={(e) => setSelectedStepType((e.target.value as any) || undefined)}
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
@@ -173,6 +175,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Min Rating Filter */}
<select
aria-label="Filter by minimum rating"
value={minRating?.toString() || ''}
onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
@@ -185,6 +188,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Sort By */}
<select
aria-label="Sort steps by"
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"

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