From d97d84a0353d80455e30319ba89b9ba8bb5e4206 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 16 Mar 2026 01:09:19 -0400
Subject: [PATCH] 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>
---
 .../src/pages/ProceduralNavigationPage.tsx    | 20 +++++++++++++++++++
 frontend/src/pages/TreeNavigationPage.tsx     | 20 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index 72aa5ee2..25de94d8 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/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">
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 25c23eb6..ceb1a8c7 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/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) => {