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 && (
+
+
+
+ )}
+
{/* Session Variables button */}
{intakeFields.length > 0 && (
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
(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() {
+ {/* PSA Ticket Context Panel */}
+ {session?.psa_ticket_id && (
+
+
+
+ )}
+
{/* Breadcrumb */}
{pathTaken.map((nodeId, index) => {