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

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>

frontend/src/api/steps.ts

@@ -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
   },
 

frontend/src/components/session/ContinuationModal.tsx

@@ -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>
+  )
+}

frontend/src/components/session/ForkTreeModal.tsx

@@ -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>
+  )
+}

frontend/src/components/session/PostStepActionModal.tsx

@@ -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>
+  )
+}

frontend/src/components/session/index.ts

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

frontend/src/components/step-library/CustomStepModal.tsx

@@ -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) {
+      // Always create a draft - saving to library is handled by PostStepActionModal
-        // Save to library first, then return the saved step
+      const draft: CustomStepDraft = {
-        const savedStep = await stepsApi.create(data)
+        title: data.title,
-        onInsertStep(savedStep)
+        step_type: data.step_type,
-      } else {
+        content: data.content,
-        // Return as draft (not saved to library)
+        category_id: data.category_id,
-        const draft: CustomStepDraft = {
+        tags: data.tags
-          title: data.title,
-          step_type: data.step_type,
-          content: data.content,
-          category_id: data.category_id,
-          tags: data.tags
-        }
-        onInsertStep(draft)
       }
+      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 (

frontend/src/components/step-library/StepForm.tsx

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

frontend/src/components/step-library/StepLibraryBrowser.tsx

@@ -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"

frontend/src/pages/TreeNavigationPage.tsx

@@ -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) => {
+  // Called when CustomStepModal submits - show action modal instead of inserting directly
-    if (!session) return
+  const handleStepCreated = (step: Step | CustomStepDraft, isFromLibrary: boolean) => {
-
+    setPendingStep(step)
-    // Create custom step object
+    setPendingStepIsFromLibrary(isFromLibrary)
-    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)
     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>
   )