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/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'