1034 lines
36 KiB
TypeScript
1034 lines
36 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useParams, useNavigate, useLocation } from 'react-router-dom'
|
|
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, ScratchpadSidebar, type DescendantNode } from '@/components/session'
|
|
import { Plus, CheckCircle, ArrowRight } from 'lucide-react'
|
|
|
|
interface LocationState {
|
|
sessionId?: string
|
|
}
|
|
|
|
export function TreeNavigationPage() {
|
|
const { id: treeId } = useParams<{ id: string }>()
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const locationState = location.state as LocationState | undefined
|
|
|
|
const [tree, setTree] = useState<Tree | null>(null)
|
|
const [session, setSession] = useState<Session | null>(null)
|
|
const [currentNodeId, setCurrentNodeId] = useState<string>('root')
|
|
const [pathTaken, setPathTaken] = useState<string[]>(['root'])
|
|
const [decisions, setDecisions] = useState<DecisionRecord[]>([])
|
|
const [notes, setNotes] = useState<string>('')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [isCompleting, setIsCompleting] = useState(false)
|
|
|
|
// Session metadata
|
|
const [ticketNumber, setTicketNumber] = useState<string>('')
|
|
const [clientName, setClientName] = useState<string>('')
|
|
const [showMetadataForm, setShowMetadataForm] = useState(true)
|
|
|
|
// Custom steps
|
|
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)
|
|
const [pendingContinuationNodeId, setPendingContinuationNodeId] = useState<string | null>(null)
|
|
|
|
// Custom branch mode
|
|
const [customBranchMode, setCustomBranchMode] = useState(false)
|
|
|
|
// Fork flow
|
|
const [showForkModal, setShowForkModal] = useState(false)
|
|
|
|
// Scratchpad save handler
|
|
const handleScratchpadSave = async (content: string) => {
|
|
if (!session) return
|
|
await sessionsApi.updateScratchpad(session.id, content)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (treeId) {
|
|
loadTreeAndSession()
|
|
}
|
|
}, [treeId])
|
|
|
|
const loadTreeAndSession = async () => {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
try {
|
|
const treeData = await treesApi.get(treeId!)
|
|
setTree(treeData)
|
|
|
|
// If resuming a session
|
|
if (locationState?.sessionId) {
|
|
const sessionData = await sessionsApi.get(locationState.sessionId)
|
|
setSession(sessionData)
|
|
setPathTaken(sessionData.path_taken)
|
|
setCurrentNodeId(sessionData.path_taken[sessionData.path_taken.length - 1] || 'root')
|
|
setDecisions(sessionData.decisions as DecisionRecord[])
|
|
setCustomSteps(sessionData.custom_steps || [])
|
|
setTicketNumber(sessionData.ticket_number || '')
|
|
setClientName(sessionData.client_name || '')
|
|
setShowMetadataForm(false)
|
|
}
|
|
} catch (err) {
|
|
setError('Failed to load tree')
|
|
console.error(err)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const startSession = async () => {
|
|
if (!tree) return
|
|
setIsLoading(true)
|
|
try {
|
|
const newSession = await sessionsApi.create({
|
|
tree_id: tree.id,
|
|
ticket_number: ticketNumber || undefined,
|
|
client_name: clientName || undefined,
|
|
})
|
|
setSession(newSession)
|
|
setShowMetadataForm(false)
|
|
} catch (err) {
|
|
setError('Failed to start session')
|
|
console.error(err)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const findNode = (nodeId: string, structure?: TreeStructure): TreeStructure | null => {
|
|
if (!structure) return null
|
|
if (structure.id === nodeId) return structure
|
|
if (structure.children) {
|
|
for (const child of structure.children) {
|
|
const found = findNode(nodeId, child)
|
|
if (found) return found
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
const findCustomStep = (nodeId: string): CustomStep | null => {
|
|
return customSteps.find(cs => cs.id === nodeId) || null
|
|
}
|
|
|
|
// Get descendant nodes two levels deep (grandchildren) from a decision node's options.
|
|
// This skips the immediate children (which often mirror the option labels) and shows
|
|
// the actual next-level nodes the user would encounter further down each path.
|
|
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 childNode = findNode(option.next_node_id, tree?.tree_structure)
|
|
if (!childNode) continue
|
|
|
|
// Go one level deeper: get the grandchildren
|
|
if (childNode.type === 'decision' && childNode.options) {
|
|
for (const childOption of childNode.options) {
|
|
if (!childOption.next_node_id) continue
|
|
const grandchild = findNode(childOption.next_node_id, tree?.tree_structure)
|
|
if (!grandchild) continue
|
|
|
|
descendants.push({
|
|
id: grandchild.id,
|
|
label: grandchild.question || grandchild.title || 'Untitled',
|
|
type: grandchild.type,
|
|
parentOptionLabel: `${option.label} \u2192 ${childOption.label}`
|
|
})
|
|
}
|
|
} else if (childNode.type === 'action' && childNode.next_node_id) {
|
|
const grandchild = findNode(childNode.next_node_id, tree?.tree_structure)
|
|
if (grandchild) {
|
|
descendants.push({
|
|
id: grandchild.id,
|
|
label: grandchild.question || grandchild.title || 'Untitled',
|
|
type: grandchild.type,
|
|
parentOptionLabel: `${option.label} \u2192 ${childNode.title || 'Action'}`
|
|
})
|
|
}
|
|
}
|
|
// Solution children have no further descendants - skip them
|
|
}
|
|
|
|
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
|
|
|
|
const node = findNode(currentNodeId, tree.tree_structure)
|
|
if (!node) return
|
|
|
|
const newDecision: DecisionRecord = {
|
|
node_id: currentNodeId,
|
|
question: node.question || null,
|
|
answer: optionLabel,
|
|
action_performed: null,
|
|
notes: notes || null,
|
|
automation_used: false,
|
|
timestamp: new Date().toISOString(),
|
|
attachments: [],
|
|
}
|
|
|
|
const newPath = [...pathTaken, nextNodeId]
|
|
const newDecisions = [...decisions, newDecision]
|
|
|
|
setPathTaken(newPath)
|
|
setDecisions(newDecisions)
|
|
setCurrentNodeId(nextNodeId)
|
|
setNotes('')
|
|
|
|
// Update session on backend
|
|
try {
|
|
await sessionsApi.update(session.id, {
|
|
path_taken: newPath,
|
|
decisions: newDecisions,
|
|
})
|
|
} catch (err) {
|
|
console.error('Failed to update session:', err)
|
|
}
|
|
}
|
|
|
|
const handleContinue = async (actionPerformed?: string) => {
|
|
if (!session || !tree) return
|
|
|
|
const node = findNode(currentNodeId, tree.tree_structure)
|
|
if (!node || !node.next_node_id) return
|
|
|
|
const newDecision: DecisionRecord = {
|
|
node_id: currentNodeId,
|
|
question: null,
|
|
answer: null,
|
|
action_performed: actionPerformed || node.title || 'Action completed',
|
|
notes: notes || null,
|
|
automation_used: false,
|
|
timestamp: new Date().toISOString(),
|
|
attachments: [],
|
|
}
|
|
|
|
const newPath = [...pathTaken, node.next_node_id]
|
|
const newDecisions = [...decisions, newDecision]
|
|
|
|
setPathTaken(newPath)
|
|
setDecisions(newDecisions)
|
|
setCurrentNodeId(node.next_node_id)
|
|
setNotes('')
|
|
|
|
try {
|
|
await sessionsApi.update(session.id, {
|
|
path_taken: newPath,
|
|
decisions: newDecisions,
|
|
})
|
|
} catch (err) {
|
|
console.error('Failed to update session:', err)
|
|
}
|
|
}
|
|
|
|
const handleComplete = async () => {
|
|
if (!session || !tree) return
|
|
setIsCompleting(true)
|
|
setError(null)
|
|
try {
|
|
// Add final decision
|
|
const node = findNode(currentNodeId, tree.tree_structure)
|
|
if (node) {
|
|
const finalDecision: DecisionRecord = {
|
|
node_id: currentNodeId,
|
|
question: null,
|
|
answer: null,
|
|
action_performed: node.title || 'Session completed',
|
|
notes: notes || null,
|
|
automation_used: false,
|
|
timestamp: new Date().toISOString(),
|
|
attachments: [],
|
|
}
|
|
await sessionsApi.update(session.id, {
|
|
decisions: [...decisions, finalDecision],
|
|
})
|
|
}
|
|
|
|
await sessionsApi.complete(session.id)
|
|
navigate(`/sessions/${session.id}`)
|
|
} catch (err) {
|
|
console.error('Failed to complete session:', err)
|
|
setError('Failed to complete session. Check console for details.')
|
|
} finally {
|
|
setIsCompleting(false)
|
|
}
|
|
}
|
|
|
|
const handleGoBack = () => {
|
|
if (pathTaken.length <= 1) return
|
|
const newPath = pathTaken.slice(0, -1)
|
|
const newDecisions = decisions.slice(0, -1)
|
|
setPathTaken(newPath)
|
|
setDecisions(newDecisions)
|
|
setCurrentNodeId(newPath[newPath.length - 1])
|
|
}
|
|
|
|
// Navigate back to a previously-created custom step from the decision node
|
|
const handleNavigateToCustomStep = (customStep: CustomStep) => {
|
|
const newPath = [...pathTaken, customStep.id]
|
|
setPathTaken(newPath)
|
|
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)
|
|
}
|
|
|
|
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 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.
|
|
// Stores the selection so the user can write notes on their custom step first.
|
|
const handleSelectDescendant = (nodeId: string) => {
|
|
setShowContinuationModal(false)
|
|
setBranchOriginNodeId(null)
|
|
setPendingContinuationNodeId(nodeId)
|
|
}
|
|
|
|
// Navigate to the previously-selected descendant node
|
|
const handleContinueToDescendant = async () => {
|
|
if (!pendingContinuationNodeId || !session) return
|
|
|
|
const newPath = [...pathTaken, pendingContinuationNodeId]
|
|
setPathTaken(newPath)
|
|
setCurrentNodeId(pendingContinuationNodeId)
|
|
setNotes('')
|
|
setPendingContinuationNodeId(null)
|
|
|
|
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)
|
|
const currentOptions = currentNode?.options || []
|
|
|
|
// Keyboard shortcuts - must be called unconditionally (React hooks rules)
|
|
useTreeNavigationShortcuts({
|
|
onSelectOption: (index) => {
|
|
const option = currentOptions[index]
|
|
if (option && session && tree) {
|
|
handleSelectOption(option.id, option.label, option.next_node_id)
|
|
}
|
|
},
|
|
onGoBack: handleGoBack,
|
|
onContinue: () => {
|
|
if (currentNode?.type === 'action' && currentNode.next_node_id) {
|
|
handleContinue()
|
|
} else if (currentNode?.type === 'solution') {
|
|
handleComplete()
|
|
}
|
|
},
|
|
optionCount: currentOptions.length,
|
|
canGoBack: pathTaken.length > 1 && !showMetadataForm && !isLoading,
|
|
canContinue: !showMetadataForm && !isLoading && (currentNode?.type === 'action' || currentNode?.type === 'solution'),
|
|
})
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error || !tree) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="rounded-md bg-destructive/10 p-4 text-destructive">
|
|
{error || 'Tree not found'}
|
|
</div>
|
|
<button
|
|
onClick={() => navigate('/trees')}
|
|
className="mt-4 text-primary hover:underline"
|
|
>
|
|
Back to trees
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Session metadata form
|
|
if (showMetadataForm) {
|
|
return (
|
|
<div className="container mx-auto max-w-lg px-4 py-8">
|
|
<h1 className="mb-2 text-2xl font-bold text-foreground">{tree.name}</h1>
|
|
<p className="mb-6 text-muted-foreground">{tree.description}</p>
|
|
|
|
<div className="space-y-4 rounded-lg border border-border bg-card p-6">
|
|
<h2 className="font-semibold text-card-foreground">Session Details</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Optional: Add ticket and client info for easier tracking
|
|
</p>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">
|
|
Ticket Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={ticketNumber}
|
|
onChange={(e) => setTicketNumber(e.target.value)}
|
|
placeholder="e.g., INC0012345"
|
|
className={cn(
|
|
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
|
|
'text-foreground placeholder:text-muted-foreground',
|
|
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">
|
|
Client Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={clientName}
|
|
onChange={(e) => setClientName(e.target.value)}
|
|
placeholder="e.g., Acme Corp"
|
|
className={cn(
|
|
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
|
|
'text-foreground placeholder:text-muted-foreground',
|
|
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={startSession}
|
|
className={cn(
|
|
'w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
|
'hover:bg-primary/90'
|
|
)}
|
|
>
|
|
Start Troubleshooting
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!currentNode && !currentCustomStep) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="rounded-md bg-destructive/10 p-4 text-destructive">
|
|
Invalid tree structure
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-4rem)]">
|
|
{/* Main Content */}
|
|
<div className="flex-1 min-w-0 overflow-y-auto px-4 py-8">
|
|
<div className="mx-auto max-w-4xl">
|
|
{/* Header */}
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-foreground">{tree.name}</h1>
|
|
{(ticketNumber || clientName) && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{ticketNumber && `Ticket: ${ticketNumber}`}
|
|
{ticketNumber && clientName && ' · '}
|
|
{clientName && `Client: ${clientName}`}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => navigate('/sessions')}
|
|
className="text-sm text-muted-foreground hover:text-foreground"
|
|
>
|
|
Exit
|
|
</button>
|
|
</div>
|
|
|
|
{/* Breadcrumb */}
|
|
<div className="mb-6 flex items-center gap-2 overflow-x-auto text-sm">
|
|
{pathTaken.map((nodeId, index) => {
|
|
const node = findNode(nodeId, tree?.tree_structure)
|
|
const customStep = findCustomStep(nodeId)
|
|
const label = node?.question || node?.title || customStep?.step_data.title || nodeId
|
|
return (
|
|
<span key={nodeId} className="flex items-center gap-2 whitespace-nowrap">
|
|
{index > 0 && <span className="text-muted-foreground">→</span>}
|
|
<span
|
|
className={cn(
|
|
index === pathTaken.length - 1
|
|
? 'font-medium text-foreground'
|
|
: 'text-muted-foreground'
|
|
)}
|
|
>
|
|
{label.length > 30 ? `${label.slice(0, 30)}...` : label}
|
|
</span>
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Current Node */}
|
|
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
|
|
{/* Decision Node */}
|
|
{currentNode && currentNode.type === 'decision' && (
|
|
<>
|
|
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
|
|
{currentNode.question}
|
|
</h2>
|
|
{currentNode.help_text && (
|
|
<div className="mb-4 text-sm text-muted-foreground">
|
|
<MarkdownContent content={currentNode.help_text} />
|
|
</div>
|
|
)}
|
|
<div className="mb-4 space-y-2">
|
|
{currentNode.options?.map((option, index) => (
|
|
<button
|
|
key={option.id}
|
|
onClick={() => handleSelectOption(option.id, option.label, option.next_node_id)}
|
|
className={cn(
|
|
'w-full rounded-md border border-input p-3 text-left transition-colors',
|
|
'hover:border-primary hover:bg-accent',
|
|
'flex items-center gap-3'
|
|
)}
|
|
>
|
|
{index < 9 && (
|
|
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-xs font-medium text-muted-foreground">
|
|
{index + 1}
|
|
</span>
|
|
)}
|
|
<span>{option.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{/* Previously-created custom steps at this node */}
|
|
{customSteps.filter(cs => cs.inserted_after_node_id === currentNodeId).length > 0 && (
|
|
<div className="mt-2 space-y-2">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
Your Custom Steps
|
|
</p>
|
|
{customSteps
|
|
.filter(cs => cs.inserted_after_node_id === currentNodeId)
|
|
.map(cs => (
|
|
<button
|
|
type="button"
|
|
key={cs.id}
|
|
onClick={() => handleNavigateToCustomStep(cs)}
|
|
className={cn(
|
|
'w-full rounded-md border border-purple-300 bg-purple-50 p-3 text-left transition-colors',
|
|
'hover:border-purple-500 hover:bg-purple-100',
|
|
'dark:border-purple-700 dark:bg-purple-900/20 dark:hover:border-purple-500 dark:hover:bg-purple-900/40',
|
|
'flex items-center gap-3'
|
|
)}
|
|
>
|
|
<span className="flex-shrink-0 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-100">
|
|
Custom
|
|
</span>
|
|
<span>{cs.step_data.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Custom Step Button */}
|
|
<button
|
|
onClick={() => setShowCustomStepModal(true)}
|
|
className="mt-2 text-sm text-primary hover:underline"
|
|
>
|
|
+ Add Custom Step
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{/* Custom Step Node */}
|
|
{currentCustomStep && (
|
|
<div className="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-900/20">
|
|
{/* Custom Step Badge */}
|
|
<span className="mb-2 inline-block rounded-full bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-100">
|
|
Custom Step
|
|
</span>
|
|
|
|
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
|
|
{currentCustomStep.step_data.title}
|
|
</h2>
|
|
|
|
{currentCustomStep.step_data.content.instructions && (
|
|
<div className="mb-4 text-muted-foreground">
|
|
<MarkdownContent content={currentCustomStep.step_data.content.instructions} />
|
|
</div>
|
|
)}
|
|
|
|
{currentCustomStep.step_data.content.help_text && (
|
|
<div className="mb-4 rounded bg-blue-500/10 p-3 text-sm">
|
|
<MarkdownContent content={currentCustomStep.step_data.content.help_text} />
|
|
</div>
|
|
)}
|
|
|
|
{currentCustomStep.step_data.content.commands && currentCustomStep.step_data.content.commands.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
|
|
<div className="space-y-2">
|
|
{currentCustomStep.step_data.content.commands.map((cmd, index) => (
|
|
<div key={index}>
|
|
<p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
|
|
<code className="block rounded bg-muted p-2 text-sm font-mono">
|
|
{cmd.command}
|
|
</code>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Continue to selected descendant */}
|
|
{pendingContinuationNodeId && !customBranchMode && (() => {
|
|
const targetNode = findNode(pendingContinuationNodeId, tree?.tree_structure)
|
|
const targetLabel = targetNode?.question || targetNode?.title || 'next step'
|
|
return (
|
|
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">
|
|
<button
|
|
type="button"
|
|
onClick={handleContinueToDescendant}
|
|
className={cn(
|
|
'flex w-full items-center justify-between rounded-md bg-primary px-4 py-3 text-sm font-medium text-primary-foreground',
|
|
'hover:bg-primary/90'
|
|
)}
|
|
>
|
|
<span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
|
|
<ArrowRight className="h-4 w-4 flex-shrink-0" />
|
|
</button>
|
|
</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>
|
|
)}
|
|
|
|
{/* Action Node */}
|
|
{currentNode && currentNode.type === 'action' && (
|
|
<>
|
|
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
|
|
{currentNode.title}
|
|
</h2>
|
|
{currentNode.description && (
|
|
<div className="mb-4 text-muted-foreground">
|
|
<MarkdownContent content={currentNode.description} />
|
|
</div>
|
|
)}
|
|
{currentNode.commands && currentNode.commands.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
|
|
<div className="space-y-1">
|
|
{currentNode.commands.map((cmd, index) => (
|
|
<code
|
|
key={index}
|
|
className="block rounded bg-muted p-2 text-sm font-mono"
|
|
>
|
|
{cmd}
|
|
</code>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{currentNode.expected_outcome && (
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
<strong>Expected outcome:</strong> {currentNode.expected_outcome}
|
|
</p>
|
|
)}
|
|
{currentNode.next_node_id && (
|
|
<button
|
|
onClick={() => handleContinue()}
|
|
className={cn(
|
|
'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
|
'hover:bg-primary/90'
|
|
)}
|
|
>
|
|
Continue
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Solution Node */}
|
|
{currentNode && currentNode.type === 'solution' && (
|
|
<>
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<span className="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
|
|
Solution
|
|
</span>
|
|
</div>
|
|
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
|
|
{currentNode.title}
|
|
</h2>
|
|
{currentNode.description && (
|
|
<div className="mb-4 text-muted-foreground">
|
|
<MarkdownContent content={currentNode.description} />
|
|
</div>
|
|
)}
|
|
{currentNode.resolution_steps && currentNode.resolution_steps.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="mb-2 text-sm font-medium text-foreground">Resolution steps:</p>
|
|
<ol className="list-inside list-decimal space-y-1 text-sm text-muted-foreground">
|
|
{currentNode.resolution_steps.map((step, index) => (
|
|
<li key={index}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={handleComplete}
|
|
disabled={isCompleting}
|
|
className={cn(
|
|
'rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white',
|
|
'hover:bg-green-700 disabled:opacity-50'
|
|
)}
|
|
>
|
|
{isCompleting ? 'Completing...' : 'Complete Session'}
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{/* Notes */}
|
|
<div className="mt-6 border-t border-border pt-4">
|
|
<label className="block text-sm font-medium text-foreground">
|
|
Notes (optional)
|
|
</label>
|
|
<textarea
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
placeholder="Add any notes for this step..."
|
|
rows={2}
|
|
className={cn(
|
|
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
|
|
'text-foreground placeholder:text-muted-foreground',
|
|
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Back Button */}
|
|
{pathTaken.length > 1 && (
|
|
<button
|
|
onClick={handleGoBack}
|
|
className="mt-4 text-sm text-muted-foreground hover:text-foreground"
|
|
>
|
|
← Go back
|
|
</button>
|
|
)}
|
|
|
|
{/* Keyboard Shortcuts Hint */}
|
|
{currentNode && (
|
|
<div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
|
|
<span className="font-medium">Keyboard:</span>{' '}
|
|
{currentNode.type === 'decision' && currentOptions.length > 0 && (
|
|
<span>1-{Math.min(currentOptions.length, 9)} select option</span>
|
|
)}
|
|
{pathTaken.length > 1 && <span>, Esc go back</span>}
|
|
{(currentNode.type === 'action' || currentNode.type === 'solution') && (
|
|
<span>, Enter {currentNode.type === 'solution' ? 'complete' : 'continue'}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Custom Step Modal */}
|
|
<CustomStepModal
|
|
isOpen={showCustomStepModal}
|
|
onClose={() => setShowCustomStepModal(false)}
|
|
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>
|
|
</div>
|
|
|
|
{/* Scratchpad Sidebar */}
|
|
{session && (
|
|
<ScratchpadSidebar
|
|
sessionId={session.id}
|
|
initialContent={session.scratchpad ?? ''}
|
|
onSave={handleScratchpadSave}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TreeNavigationPage
|