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) => {