feat: mount TicketContextPanel in session runners when ticket is linked

ProceduralNavigationPage renders panel in left sidebar below step checklist.
TreeNavigationPage renders panel above breadcrumb trail. Both use
useTicketContext hook and show panel only when psa_ticket_id is set.

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

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -30,6 +30,8 @@ import { TicketLinkIndicator } from '@/components/session/TicketLinkIndicator'
 import { UpdateTicketModal } from '@/components/session/UpdateTicketModal'
 import type { PSATicketInfo } from '@/types/integrations'
 import { addRecentFlow } from '@/lib/recentFlows'
+import { useTicketContext } from '@/hooks/useTicketContext'
+import { TicketContextPanel } from '@/components/session/TicketContextPanel'
 
 interface StepState {
   notes: string
@@ -92,6 +94,12 @@ export function ProceduralNavigationPage() {
   const [isSavingStep, setIsSavingStep] = useState(false)
   const [copilotOpen, setCopilotOpen] = useState(false)
 
+  // PSA ticket context
+  const { context: ticketContext, loading: ticketContextLoading, error: ticketContextError, refresh: refreshTicketContext } = useTicketContext(
+    session?.psa_ticket_id,
+    session?.psa_connection_id
+  )
+
   // PSA ticket link state
   const [hasConnection, setHasConnection] = useState(false)
   const [showTicketPicker, setShowTicketPicker] = useState(false)
@@ -673,6 +681,18 @@ export function ProceduralNavigationPage() {
                 onStepClick={setCurrentStepIndex}
               />
 
+              {/* PSA Ticket Context Panel */}
+              {session?.psa_ticket_id && (
+                <div className="mt-3 border-t border-border pt-3">
+                  <TicketContextPanel
+                    context={ticketContext}
+                    loading={ticketContextLoading}
+                    error={ticketContextError}
+                    onRefresh={refreshTicketContext}
+                  />
+                </div>
+              )}
+
               {/* Session Variables button */}
               {intakeFields.length > 0 && (
                 <div className="mt-3 border-t border-border pt-3">

frontend/src/pages/TreeNavigationPage.tsx

@@ -28,6 +28,8 @@ import { TicketLinkIndicator } from '@/components/session/TicketLinkIndicator'
 import { UpdateTicketModal } from '@/components/session/UpdateTicketModal'
 import type { PSATicketInfo } from '@/types/integrations'
 import { addRecentFlow } from '@/lib/recentFlows'
+import { useTicketContext } from '@/hooks/useTicketContext'
+import { TicketContextPanel } from '@/components/session/TicketContextPanel'
 
 interface LocationState {
   sessionId?: string
@@ -77,6 +79,12 @@ export function TreeNavigationPage() {
   const [showUpdateModal, setShowUpdateModal] = useState(false)
   const [ticketInfo, setTicketInfo] = useState<PSATicketInfo | null>(null)
 
+  // PSA ticket context
+  const { context: ticketContext, loading: ticketContextLoading, error: ticketContextError, refresh: refreshTicketContext } = useTicketContext(
+    session?.psa_ticket_id,
+    session?.psa_connection_id
+  )
+
   const handleCopyCommand = (text: string) => {
     navigator.clipboard.writeText(text)
     setCopiedCommand(text)
@@ -780,6 +788,18 @@ export function TreeNavigationPage() {
         </div>
       </div>
 
+      {/* PSA Ticket Context Panel */}
+      {session?.psa_ticket_id && (
+        <div className="mb-6">
+          <TicketContextPanel
+            context={ticketContext}
+            loading={ticketContextLoading}
+            error={ticketContextError}
+            onRefresh={refreshTicketContext}
+          />
+        </div>
+      )}
+
       {/* Breadcrumb */}
       <div className="mb-6 flex items-center gap-2 overflow-x-auto text-sm">
         {pathTaken.map((nodeId, index) => {