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