fix: add missing branching files and TypeScript fix

- Add BranchRevivalCard, BranchTransitionBar, useHandoff, useResolutionOutputs, SessionQueuePage
- Fix useFlowPilotSession: add is_branching/active_branch_id defaults

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/session/BranchRevivalCard.tsx

@@ -0,0 +1,26 @@
+import { RotateCcw } from 'lucide-react'
+import type { BranchResponse } from '@/types/branching'
+
+interface BranchRevivalCardProps {
+  branch: BranchResponse
+  evidenceSource: BranchResponse | null
+}
+
+export function BranchRevivalCard({ branch, evidenceSource }: BranchRevivalCardProps) {
+  if (branch.status !== 'revived') return null
+
+  return (
+    <div className="bg-yellow-400/5 border border-yellow-400/20 rounded-md px-3 py-2 my-2">
+      <div className="flex items-center gap-2 text-sm">
+        <RotateCcw size={14} className="text-yellow-400" />
+        <span className="text-yellow-400 font-medium">Branch Revived</span>
+      </div>
+      {branch.evidence_description && (
+        <p className="text-xs text-secondary mt-1">{branch.evidence_description}</p>
+      )}
+      {evidenceSource && (
+        <p className="text-xs text-muted mt-0.5">Evidence from: {evidenceSource.label}</p>
+      )}
+    </div>
+  )
+}

frontend/src/components/session/BranchTransitionBar.tsx

@@ -0,0 +1,22 @@
+import { ArrowRight } from 'lucide-react'
+import type { BranchResponse } from '@/types/branching'
+
+interface BranchTransitionBarProps {
+  fromBranch: BranchResponse | null
+  toBranch: BranchResponse
+}
+
+export function BranchTransitionBar({ fromBranch, toBranch }: BranchTransitionBarProps) {
+  return (
+    <div className="bg-accent-dim border border-accent/20 rounded-md px-3 py-2 my-2 flex items-center gap-2 text-sm">
+      <span className="text-muted">Switched to</span>
+      <span className="text-accent-text font-medium">{toBranch.label}</span>
+      {fromBranch && (
+        <>
+          <ArrowRight size={12} className="text-muted" />
+          <span className="text-muted">from {fromBranch.label}</span>
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/hooks/useFlowPilotSession.ts

@@ -92,6 +92,8 @@ export function useFlowPilotSession(): UseFlowPilotSession {
         ticket_data: null,
         steps: [firstStep],
         conversation_messages: [],
+        is_branching: false,
+        active_branch_id: null,
       })
       setAllSteps([firstStep])
       setCurrentStep(firstStep)

frontend/src/hooks/useHandoff.ts

@@ -0,0 +1,49 @@
+import { useState, useCallback } from 'react'
+import { handoffsApi } from '@/api'
+import type { HandoffCreateRequest, HandoffResponse, QueueItemResponse } from '@/types/branching'
+import { toast } from '@/lib/toast'
+
+export function useHandoff() {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [queue, setQueue] = useState<QueueItemResponse[]>([])
+  const [isLoadingQueue, setIsLoadingQueue] = useState(false)
+
+  const createHandoff = useCallback(async (sessionId: string, data: HandoffCreateRequest): Promise<HandoffResponse | null> => {
+    setIsSubmitting(true)
+    try {
+      const result = await handoffsApi.createHandoff(sessionId, data)
+      toast.success(data.intent === 'park' ? 'Session parked' : 'Session escalated')
+      return result
+    } catch {
+      toast.error('Failed to hand off session')
+      return null
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [])
+
+  const claimHandoff = useCallback(async (sessionId: string, handoffId: string): Promise<HandoffResponse | null> => {
+    try {
+      const result = await handoffsApi.claimHandoff(sessionId, handoffId)
+      toast.success('Session claimed')
+      return result
+    } catch {
+      toast.error('Failed to claim session')
+      return null
+    }
+  }, [])
+
+  const loadQueue = useCallback(async () => {
+    setIsLoadingQueue(true)
+    try {
+      const items = await handoffsApi.getQueue()
+      setQueue(items)
+    } catch {
+      toast.error('Failed to load queue')
+    } finally {
+      setIsLoadingQueue(false)
+    }
+  }, [])
+
+  return { isSubmitting, queue, isLoadingQueue, createHandoff, claimHandoff, loadQueue }
+}

frontend/src/hooks/useResolutionOutputs.ts

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react'
+import { resolutionsApi } from '@/api'
+import type { ResolutionOutputResponse, PushDestination } from '@/types/branching'
+import { toast } from '@/lib/toast'
+
+export function useResolutionOutputs(sessionId: string) {
+  const [outputs, setOutputs] = useState<ResolutionOutputResponse[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loadOutputs = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const data = await resolutionsApi.getOutputs(sessionId)
+      setOutputs(data.outputs)
+    } catch {
+      toast.error('Failed to load resolution outputs')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [sessionId])
+
+  const editOutput = useCallback(async (outputId: string, content: string) => {
+    try {
+      const updated = await resolutionsApi.editOutput(sessionId, outputId, { edited_content: content })
+      setOutputs(prev => prev.map(o => o.id === updated.id ? updated : o))
+      toast.success('Changes saved')
+    } catch {
+      toast.error('Failed to save changes')
+    }
+  }, [sessionId])
+
+  const pushOutput = useCallback(async (outputId: string, destination: PushDestination) => {
+    try {
+      await resolutionsApi.pushOutput(sessionId, outputId, { destination })
+      toast.success(`Pushed to ${destination}`)
+      await loadOutputs()
+    } catch {
+      toast.error('Failed to push output')
+    }
+  }, [sessionId, loadOutputs])
+
+  return { outputs, isLoading, loadOutputs, editOutput, pushOutput }
+}

frontend/src/pages/SessionQueuePage.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Inbox, ArrowUpRight, Pause, Clock } from 'lucide-react'
+import { useHandoff } from '@/hooks/useHandoff'
+
+export default function SessionQueuePage() {
+  const navigate = useNavigate()
+  const { queue, isLoadingQueue, loadQueue, claimHandoff } = useHandoff()
+
+  useEffect(() => { loadQueue() }, [loadQueue])
+
+  const handleClaim = async (item: typeof queue[0]) => {
+    const result = await claimHandoff(item.session_id, item.handoff_id)
+    if (result) navigate(`/pilot?sessionId=${item.session_id}`)
+  }
+
+  return (
+    <div className="flex-1 p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Inbox size={20} className="text-accent" />
+        <h1 className="text-xl font-heading font-bold text-heading">Session Queue</h1>
+      </div>
+      {isLoadingQueue ? (
+        <p className="text-sm text-muted">Loading queue...</p>
+      ) : queue.length === 0 ? (
+        <div className="text-center py-12">
+          <Inbox size={40} className="text-muted mx-auto mb-3" />
+          <p className="text-sm text-muted">No sessions waiting</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {queue.map(item => (
+            <div key={item.handoff_id} className="bg-card border border-default rounded-lg p-4 flex items-center justify-between hover:border-hover transition-colors">
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  {item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-red-400" /> : <Pause size={14} className="text-yellow-400" />}
+                  <span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
+                  {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-400/10 text-red-400">Elevated</span>}
+                </div>
+                {item.engineer_notes && <p className="text-xs text-secondary">{item.engineer_notes}</p>}
+                <div className="flex items-center gap-2 mt-1 text-xs text-muted">
+                  <Clock size={10} />
+                  <span>{new Date(item.created_at).toLocaleString()}</span>
+                  {item.problem_domain && <span>· {item.problem_domain}</span>}
+                </div>
+              </div>
+              <button onClick={() => handleClaim(item)} className="px-3 py-1.5 text-xs bg-accent text-white rounded-[5px] hover:bg-accent/90">Claim</button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}