feat(psa): add ticket picker modal and session header ticket link indicator

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

frontend/src/api/index.ts

@@ -22,4 +22,4 @@ export { assistantChatApi } from './assistantChat'
 export { flowTransferApi } from './flowTransfer'
 export { kbAcceleratorApi } from './kbAccelerator'
 export { scriptsApi } from './scripts'
-export { integrationsApi } from './integrations'
+export { integrationsApi, sessionPsaApi } from './integrations'

frontend/src/api/integrations.ts

@@ -1,5 +1,6 @@
 import { apiClient } from './client'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+import type { TicketLinkResponse } from '@/types/integrations'
 
 export const integrationsApi = {
   getConnection: () =>
@@ -13,3 +14,8 @@ export const integrationsApi = {
   testConnection: (id: string) =>
     apiClient.post<PsaConnectionTestResponse>(`/integrations/psa/connections/${id}/test`).then(r => r.data),
 }
+
+export const sessionPsaApi = {
+  linkTicket: (sessionId: string, psaTicketId: string | null) =>
+    apiClient.patch<TicketLinkResponse>(`/sessions/${sessionId}/ticket-link`, { psa_ticket_id: psaTicketId }).then(r => r.data),
+}

frontend/src/components/session/TicketLinkIndicator.tsx

@@ -0,0 +1,74 @@
+import { Ticket, Unlink, Link2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { Session } from '@/types'
+import type { PSATicketInfo } from '@/types/integrations'
+
+interface Props {
+  session: Session
+  hasConnection: boolean
+  onLinkClick: () => void
+  onUnlink: () => void
+  ticketInfo?: PSATicketInfo | null
+}
+
+export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, ticketInfo }: Props) {
+  // No connection — show nothing
+  if (!hasConnection) return null
+
+  // No ticket linked — show subtle "Link Ticket" button
+  if (!session.psa_ticket_id) {
+    return (
+      <button
+        type="button"
+        onClick={onLinkClick}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors',
+          'hover:bg-accent hover:text-foreground'
+        )}
+      >
+        <Link2 className="h-3.5 w-3.5" />
+        Link Ticket
+      </button>
+    )
+  }
+
+  // Ticket linked
+  return (
+    <div className="glass-card-static inline-flex items-start gap-2.5 rounded-lg border border-border px-3 py-2">
+      <Ticket className="mt-0.5 h-4 w-4 shrink-0 text-cyan-400" />
+      <div className="min-w-0">
+        <p className="text-sm font-medium text-foreground">
+          CW #{session.psa_ticket_id}
+          {ticketInfo?.summary && (
+            <span className="text-muted-foreground"> — {ticketInfo.summary}</span>
+          )}
+        </p>
+        {ticketInfo && (
+          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            {ticketInfo.company_name && <span>{ticketInfo.company_name}</span>}
+            {ticketInfo.board_name && (
+              <>
+                <span className="text-[#5a6170]">&bull;</span>
+                <span>{ticketInfo.board_name}</span>
+              </>
+            )}
+            {ticketInfo.status_name && (
+              <>
+                <span className="text-[#5a6170]">&bull;</span>
+                <span>{ticketInfo.status_name}</span>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={onUnlink}
+        className="shrink-0 rounded p-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+        title="Unlink ticket"
+      >
+        <Unlink className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}

frontend/src/components/session/TicketPickerModal.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { Ticket, Search, AlertCircle, CheckCircle2 } from 'lucide-react'
+import { Modal } from '@/components/common/Modal'
+import { Input } from '@/components/ui/Input'
+import { Button } from '@/components/ui/Button'
+import { cn } from '@/lib/utils'
+import { sessionPsaApi } from '@/api/integrations'
+import type { PSATicketInfo } from '@/types/integrations'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  sessionId: string
+  onLinked: (ticketId: string, ticket: PSATicketInfo) => void
+}
+
+export function TicketPickerModal({ open, onClose, sessionId, onLinked }: Props) {
+  const [ticketId, setTicketId] = useState('')
+  const [isLooking, setIsLooking] = useState(false)
+  const [isLinking, setIsLinking] = useState(false)
+  const [ticketInfo, setTicketInfo] = useState<PSATicketInfo | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleLookup = async () => {
+    const trimmed = ticketId.trim()
+    if (!trimmed) return
+
+    setIsLooking(true)
+    setError(null)
+    setTicketInfo(null)
+
+    try {
+      const result = await sessionPsaApi.linkTicket(sessionId, trimmed)
+      if (result.ticket) {
+        setTicketInfo(result.ticket)
+      } else {
+        setError('Ticket not found in ConnectWise')
+      }
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === 'object' && 'response' in err
+          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+          : null
+      setError(message || 'Failed to look up ticket. Please check the ticket number and try again.')
+    } finally {
+      setIsLooking(false)
+    }
+  }
+
+  const handleLink = () => {
+    if (!ticketInfo) return
+    onLinked(ticketId.trim(), ticketInfo)
+    handleReset()
+  }
+
+  const handleReset = () => {
+    setTicketId('')
+    setTicketInfo(null)
+    setError(null)
+    setIsLooking(false)
+    setIsLinking(false)
+  }
+
+  const handleClose = () => {
+    handleReset()
+    onClose()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && ticketId.trim() && !isLooking && !ticketInfo) {
+      handleLookup()
+    }
+  }
+
+  return (
+    <Modal isOpen={open} onClose={handleClose} title="Link ConnectWise Ticket" size="sm">
+      <div className="space-y-4">
+        {/* Ticket ID input */}
+        <div>
+          <label className="mb-1.5 block text-sm font-medium text-foreground">
+            Ticket Number
+          </label>
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              inputMode="numeric"
+              placeholder="Enter ticket number..."
+              value={ticketId}
+              onChange={(e) => {
+                setTicketId(e.target.value)
+                if (ticketInfo) {
+                  setTicketInfo(null)
+                }
+                if (error) {
+                  setError(null)
+                }
+              }}
+              onKeyDown={handleKeyDown}
+              disabled={isLooking || isLinking}
+              className="flex-1"
+            />
+            <Button
+              variant="secondary"
+              size="md"
+              onClick={handleLookup}
+              disabled={!ticketId.trim() || isLooking || !!ticketInfo}
+              loading={isLooking}
+            >
+              {!isLooking && <Search className="h-4 w-4" />}
+              Look Up
+            </Button>
+          </div>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="flex items-start gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-3 py-2.5">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+            <p className="text-sm text-red-400">{error}</p>
+          </div>
+        )}
+
+        {/* Ticket info card */}
+        {ticketInfo && (
+          <div className="glass-card-static space-y-3 rounded-xl border border-border p-4">
+            <div className="flex items-start gap-2">
+              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
+              <div className="min-w-0">
+                <p className="text-sm font-semibold text-foreground">
+                  CW #{ticketId.trim()} — {ticketInfo.summary}
+                </p>
+                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+                  {ticketInfo.company_name && (
+                    <span>{ticketInfo.company_name}</span>
+                  )}
+                  {ticketInfo.board_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{ticketInfo.board_name}</span>
+                    </>
+                  )}
+                  {ticketInfo.status_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{ticketInfo.status_name}</span>
+                    </>
+                  )}
+                  {ticketInfo.priority_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{ticketInfo.priority_name}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <Button
+              className="w-full"
+              onClick={handleLink}
+              loading={isLinking}
+            >
+              <Ticket className="h-4 w-4" />
+              Link This Ticket
+            </Button>
+          </div>
+        )}
+
+        {/* Skip link */}
+        <div className="flex justify-center pt-1">
+          <button
+            type="button"
+            onClick={handleClose}
+            className={cn(
+              'text-sm text-muted-foreground transition-colors',
+              'hover:text-foreground'
+            )}
+          >
+            Skip
+          </button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -24,6 +24,10 @@ import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'
 import { PostStepActionModal } from '@/components/session/PostStepActionModal'
 import { CopilotPanel } from '@/components/copilot/CopilotPanel'
 import { CopilotToggle } from '@/components/copilot/CopilotToggle'
+import { integrationsApi, sessionPsaApi } from '@/api/integrations'
+import { TicketPickerModal } from '@/components/session/TicketPickerModal'
+import { TicketLinkIndicator } from '@/components/session/TicketLinkIndicator'
+import type { PSATicketInfo } from '@/types/integrations'
 
 interface StepState {
   notes: string
@@ -86,6 +90,11 @@ export function ProceduralNavigationPage() {
   const [isSavingStep, setIsSavingStep] = useState(false)
   const [copilotOpen, setCopilotOpen] = useState(false)
 
+  // PSA ticket link state
+  const [hasConnection, setHasConnection] = useState(false)
+  const [showTicketPicker, setShowTicketPicker] = useState(false)
+  const [psaTicketInfo, setPsaTicketInfo] = useState<PSATicketInfo | null>(null)
+
   // Editable variables panel state
   const [editingVarName, setEditingVarName] = useState<string | null>(null)
   const [editingVarValue, setEditingVarValue] = useState('')
@@ -131,6 +140,32 @@ export function ProceduralNavigationPage() {
     }
   }, [treeId])
 
+  // Check for PSA connection on mount
+  useEffect(() => {
+    integrationsApi.getConnection()
+      .then((conn) => setHasConnection(!!conn))
+      .catch(() => setHasConnection(false))
+  }, [])
+
+  const handleTicketLinked = (linkedTicketId: string, ticket: PSATicketInfo) => {
+    setPsaTicketInfo(ticket)
+    setSession((prev) => prev ? { ...prev, psa_ticket_id: linkedTicketId } : prev)
+    setShowTicketPicker(false)
+    toast.success(`Linked to CW #${linkedTicketId}`)
+  }
+
+  const handleTicketUnlink = async () => {
+    if (!session) return
+    try {
+      await sessionPsaApi.linkTicket(session.id, null)
+      setSession((prev) => prev ? { ...prev, psa_ticket_id: null } : prev)
+      setPsaTicketInfo(null)
+      toast.success('Ticket unlinked')
+    } catch {
+      toast.error('Failed to unlink ticket')
+    }
+  }
+
   // Parse backend timestamp — ensure UTC if no timezone info
   const parseTimestamp = (ts: string) => {
     if (!ts.endsWith('Z') && !ts.includes('+') && !/\d{2}:\d{2}$/.test(ts.slice(-5))) {
@@ -584,6 +619,17 @@ export function ProceduralNavigationPage() {
             Exit
           </button>
         </div>
+        {session && (
+          <div className="mt-1.5">
+            <TicketLinkIndicator
+              session={session}
+              hasConnection={hasConnection}
+              onLinkClick={() => setShowTicketPicker(true)}
+              onUnlink={handleTicketUnlink}
+              ticketInfo={psaTicketInfo}
+            />
+          </div>
+        )}
         <div className="mt-2">
           <ProgressBar
             currentStep={completedStepIds.size}
@@ -877,6 +923,16 @@ export function ProceduralNavigationPage() {
       {treeId && (
         <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
       )}
+
+      {/* Ticket Picker Modal */}
+      {session && (
+        <TicketPickerModal
+          open={showTicketPicker}
+          onClose={() => setShowTicketPicker(false)}
+          sessionId={session.id}
+          onLinked={handleTicketLinked}
+        />
+      )}
     </div>
   )
 }

frontend/src/pages/TreeNavigationPage.tsx

@@ -22,6 +22,10 @@ import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sess
 import { CopilotPanel } from '@/components/copilot/CopilotPanel'
 import { CopilotToggle } from '@/components/copilot/CopilotToggle'
 import { Button } from '@/components/ui/Button'
+import { integrationsApi, sessionPsaApi } from '@/api/integrations'
+import { TicketPickerModal } from '@/components/session/TicketPickerModal'
+import { TicketLinkIndicator } from '@/components/session/TicketLinkIndicator'
+import type { PSATicketInfo } from '@/types/integrations'
 
 interface LocationState {
   sessionId?: string
@@ -65,6 +69,11 @@ export function TreeNavigationPage() {
   const sharePopoverRef = useRef<HTMLDivElement>(null)
   const [copilotOpen, setCopilotOpen] = useState(false)
 
+  // PSA ticket link state
+  const [hasConnection, setHasConnection] = useState(false)
+  const [showTicketPicker, setShowTicketPicker] = useState(false)
+  const [ticketInfo, setTicketInfo] = useState<PSATicketInfo | null>(null)
+
   const handleCopyCommand = (text: string) => {
     navigator.clipboard.writeText(text)
     setCopiedCommand(text)
@@ -272,6 +281,32 @@ export function TreeNavigationPage() {
     }
   }, [treeId])
 
+  // Check for PSA connection on mount
+  useEffect(() => {
+    integrationsApi.getConnection()
+      .then((conn) => setHasConnection(!!conn))
+      .catch(() => setHasConnection(false))
+  }, [])
+
+  const handleTicketLinked = (linkedTicketId: string, ticket: PSATicketInfo) => {
+    setTicketInfo(ticket)
+    setSession((prev) => prev ? { ...prev, psa_ticket_id: linkedTicketId } : prev)
+    setShowTicketPicker(false)
+    toast.success(`Linked to CW #${linkedTicketId}`)
+  }
+
+  const handleTicketUnlink = async () => {
+    if (!session) return
+    try {
+      await sessionPsaApi.linkTicket(session.id, null)
+      setSession((prev) => prev ? { ...prev, psa_ticket_id: null } : prev)
+      setTicketInfo(null)
+      toast.success('Ticket unlinked')
+    } catch {
+      toast.error('Failed to unlink ticket')
+    }
+  }
+
   const loadTreeAndSession = async () => {
     setIsLoading(true)
     setError(null)
@@ -656,6 +691,15 @@ export function TreeNavigationPage() {
               {clientName && `Client: ${clientName}`}
             </p>
           )}
+          {session && (
+            <TicketLinkIndicator
+              session={session}
+              hasConnection={hasConnection}
+              onLinkClick={() => setShowTicketPicker(true)}
+              onUnlink={handleTicketUnlink}
+              ticketInfo={ticketInfo}
+            />
+          )}
         </div>
         <div className="flex items-center gap-2">
           {/* Share Progress Popover */}
@@ -1251,6 +1295,16 @@ export function TreeNavigationPage() {
           onClose={() => setShowShareModal(false)}
         />
       )}
+
+      {/* Ticket Picker Modal */}
+      {session && (
+        <TicketPickerModal
+          open={showTicketPicker}
+          onClose={() => setShowTicketPicker(false)}
+          sessionId={session.id}
+          onLinked={handleTicketLinked}
+        />
+      )}
       </div>
       </div>
 

frontend/src/types/integrations.ts

@@ -37,3 +37,18 @@ export interface PsaConnectionTestResponse {
   message: string
   server_version: string | null
 }
+
+export interface PSATicketInfo {
+  id: string
+  summary: string
+  company_name: string | null
+  board_name: string | null
+  status_name: string | null
+  priority_name: string | null
+}
+
+export interface TicketLinkResponse {
+  session_id: string
+  psa_ticket_id: string | null
+  ticket: PSATicketInfo | null
+}

frontend/src/types/session.ts

@@ -64,6 +64,8 @@ export interface Session {
   assigned_to_id?: string | null
   batch_id?: string
   target_label?: string
+  psa_ticket_id?: string | null
+  psa_connection_id?: string | null
 }
 
 export interface SessionCreate {