feat: ConnectWise PSA integration (#106)

PSA abstraction layer with provider pattern, ConnectWise integration (connection management, ticket linking, note posting, status updates, member mapping), Integrations page UI, Fernet credential encryption, in-memory TTL cache, 6 DB migrations, ConnectWise API reference docs.
2026-03-15 01:45:35 -04:00
parent 80e094215f
commit 46865882c6
60 changed files with 726716 additions and 11 deletions
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -22,3 +22,4 @@ export { assistantChatApi } from './assistantChat'
 export { flowTransferApi } from './flowTransfer'
 export { kbAcceleratorApi } from './kbAccelerator'
 export { scriptsApi } from './scripts'
+export { integrationsApi, sessionPsaApi } from './integrations'
--- a/frontend/src/api/integrations.ts
+++ b/frontend/src/api/integrations.ts
@@ -0,0 +1,41 @@
+import { apiClient } from './client'
+import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry, PsaMemberResponse, PsaMemberMappingResponse, AutoMatchResult } from '@/types/integrations'
+
+export const integrationsApi = {
+  getConnection: () =>
+    apiClient.get<PsaConnectionResponse | null>('/integrations/psa/connections').then(r => r.data),
+  createConnection: (data: PsaConnectionCreate) =>
+    apiClient.post<PsaConnectionResponse>('/integrations/psa/connections', data).then(r => r.data),
+  updateConnection: (id: string, data: PsaConnectionUpdate) =>
+    apiClient.put<PsaConnectionResponse>(`/integrations/psa/connections/${id}`, data).then(r => r.data),
+  deleteConnection: (id: string) =>
+    apiClient.delete(`/integrations/psa/connections/${id}`),
+  testConnection: (id: string) =>
+    apiClient.post<PsaConnectionTestResponse>(`/integrations/psa/connections/${id}/test`).then(r => r.data),
+  searchTickets: (params: { query?: string; board_id?: number; include_closed?: boolean }) =>
+    apiClient.get<PSATicketSearchResult[]>('/integrations/psa/tickets/search', { params }).then(r => r.data),
+  getTicket: (id: string) =>
+    apiClient.get<PSATicketInfo>(`/integrations/psa/tickets/${id}`).then(r => r.data),
+  getTicketStatuses: (ticketId: string) =>
+    apiClient.get<PSATicketStatusItem[]>(`/integrations/psa/tickets/${ticketId}/statuses`).then(r => r.data),
+  listMembers: () =>
+    apiClient.get<PsaMemberResponse[]>('/integrations/psa/members').then(r => r.data),
+  getMemberMappings: () =>
+    apiClient.get<PsaMemberMappingResponse[]>('/integrations/psa/member-mappings').then(r => r.data),
+  saveMemberMappings: (mappings: { user_id: string; external_member_id: string; external_member_name: string }[]) =>
+    apiClient.post<PsaMemberMappingResponse[]>('/integrations/psa/member-mappings', mappings).then(r => r.data),
+  autoMatchMembers: () =>
+    apiClient.post<AutoMatchResult>('/integrations/psa/member-mappings/auto-match').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),
+  getPostPreview: (sessionId: string) =>
+    apiClient.get<PsaPreviewResponse>(`/sessions/${sessionId}/psa-post/preview`).then(r => r.data),
+  postToTicket: (sessionId: string, data: { note_type: string; content: string; update_status_id?: number }) =>
+    apiClient.post<PsaPostResponse>(`/sessions/${sessionId}/psa-post`, data).then(r => r.data),
+  getPostHistory: (sessionId: string) =>
+    apiClient.get<PsaPostLogEntry[]>(`/sessions/${sessionId}/psa-posts`).then(r => r.data),
+}
--- a/frontend/src/components/session/TicketLinkIndicator.tsx
+++ b/frontend/src/components/session/TicketLinkIndicator.tsx
@@ -0,0 +1,91 @@
+import { Ticket, Unlink, Link2, Send } 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
+  onUpdateClick?: () => void
+  ticketInfo?: PSATicketInfo | null
+}
+
+export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, onUpdateClick, 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>
+      <div className="flex shrink-0 items-center gap-1">
+        {onUpdateClick && (
+          <button
+            type="button"
+            onClick={onUpdateClick}
+            className={cn(
+              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors',
+              'hover:bg-primary/10 hover:text-foreground'
+            )}
+            title="Update ticket"
+          >
+            <Send className="h-3 w-3" />
+            <span className="hidden sm:inline">Update</span>
+          </button>
+        )}
+        <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>
+    </div>
+  )
+}
--- a/frontend/src/components/session/TicketPickerModal.tsx
+++ b/frontend/src/components/session/TicketPickerModal.tsx
@@ -0,0 +1,436 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Ticket, Search, AlertCircle, CheckCircle2, Hash, Loader2 } 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 { integrationsApi, sessionPsaApi } from '@/api/integrations'
+import type { PSATicketInfo, PSATicketSearchResult } from '@/types/integrations'
+
+type Mode = 'search' | 'manual'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  sessionId: string
+  onLinked: (ticketId: string, ticket: PSATicketInfo) => void
+}
+
+export function TicketPickerModal({ open, onClose, sessionId, onLinked }: Props) {
+  const [mode, setMode] = useState<Mode>('search')
+
+  // Search mode state
+  const [searchQuery, setSearchQuery] = useState('')
+  const [includeClosed, setIncludeClosed] = useState(false)
+  const [searchResults, setSearchResults] = useState<PSATicketSearchResult[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [hasSearched, setHasSearched] = useState(false)
+
+  // Manual mode state
+  const [manualId, setManualId] = useState('')
+
+  // Shared state
+  const [selectedTicket, setSelectedTicket] = useState<PSATicketInfo | null>(null)
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
+  const [isLooking, setIsLooking] = useState(false)
+  const [isLinking, setIsLinking] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Debounced search
+  const performSearch = useCallback(async (query: string, closed: boolean) => {
+    if (!query.trim()) {
+      setSearchResults([])
+      setHasSearched(false)
+      return
+    }
+
+    setIsSearching(true)
+    setError(null)
+    try {
+      const results = await integrationsApi.searchTickets({
+        query: query.trim(),
+        include_closed: closed,
+      })
+      setSearchResults(results)
+      setHasSearched(true)
+    } 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 search tickets.')
+      setSearchResults([])
+      setHasSearched(true)
+    } finally {
+      setIsSearching(false)
+    }
+  }, [])
+
+  // Trigger debounced search when query or includeClosed changes
+  useEffect(() => {
+    if (mode !== 'search') return
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    if (!searchQuery.trim()) {
+      setSearchResults([])
+      setHasSearched(false)
+      return
+    }
+
+    debounceRef.current = setTimeout(() => {
+      performSearch(searchQuery, includeClosed)
+    }, 300)
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [searchQuery, includeClosed, mode, performSearch])
+
+  const handleSelectSearchResult = async (result: PSATicketSearchResult) => {
+    setIsLooking(true)
+    setError(null)
+    try {
+      const ticket = await integrationsApi.getTicket(result.id)
+      setSelectedTicket(ticket)
+      setSelectedTicketId(result.id)
+    } 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 load ticket details.')
+    } finally {
+      setIsLooking(false)
+    }
+  }
+
+  const handleManualLookup = async () => {
+    const trimmed = manualId.trim()
+    if (!trimmed) return
+
+    setIsLooking(true)
+    setError(null)
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+
+    try {
+      const ticket = await integrationsApi.getTicket(trimmed)
+      setSelectedTicket(ticket)
+      setSelectedTicketId(trimmed)
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === 'object' && 'response' in err
+          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+          : null
+      setError(message || 'Ticket not found. Please check the ticket number and try again.')
+    } finally {
+      setIsLooking(false)
+    }
+  }
+
+  const handleLink = async () => {
+    if (!selectedTicket || !selectedTicketId) return
+
+    setIsLinking(true)
+    setError(null)
+    try {
+      await sessionPsaApi.linkTicket(sessionId, selectedTicketId)
+      onLinked(selectedTicketId, selectedTicket)
+      handleReset()
+    } 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 link ticket.')
+    } finally {
+      setIsLinking(false)
+    }
+  }
+
+  const handleReset = () => {
+    setSearchQuery('')
+    setSearchResults([])
+    setHasSearched(false)
+    setManualId('')
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+    setError(null)
+    setIsLooking(false)
+    setIsLinking(false)
+    setIsSearching(false)
+    setIncludeClosed(false)
+  }
+
+  const handleClose = () => {
+    handleReset()
+    setMode('search')
+    onClose()
+  }
+
+  const handleClearSelection = () => {
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+    setError(null)
+  }
+
+  const handleManualKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && manualId.trim() && !isLooking && !selectedTicket) {
+      handleManualLookup()
+    }
+  }
+
+  const switchMode = (newMode: Mode) => {
+    setMode(newMode)
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+    setError(null)
+  }
+
+  return (
+    <Modal isOpen={open} onClose={handleClose} title="Link ConnectWise Ticket" size="sm">
+      <div className="space-y-4">
+        {/* Mode tabs */}
+        <div className="flex gap-1 rounded-lg bg-white/[0.03] p-1">
+          <button
+            type="button"
+            onClick={() => switchMode('search')}
+            className={cn(
+              'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
+              mode === 'search'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            Search
+          </button>
+          <button
+            type="button"
+            onClick={() => switchMode('manual')}
+            className={cn(
+              'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
+              mode === 'manual'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Hash className="h-3.5 w-3.5" />
+            Ticket #
+          </button>
+        </div>
+
+        {/* Search mode */}
+        {mode === 'search' && !selectedTicket && (
+          <div className="space-y-3">
+            <div>
+              <Input
+                type="text"
+                placeholder="Search tickets by summary, company, or #..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                disabled={isLooking}
+                className="w-full"
+                autoFocus
+              />
+            </div>
+
+            {/* Include closed toggle */}
+            <label className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
+              <input
+                type="checkbox"
+                checked={includeClosed}
+                onChange={(e) => setIncludeClosed(e.target.checked)}
+                className="rounded border-border bg-card accent-primary"
+              />
+              Include closed tickets
+            </label>
+
+            {/* Search results */}
+            {isSearching && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            )}
+
+            {!isSearching && hasSearched && searchResults.length === 0 && (
+              <div className="py-6 text-center text-sm text-muted-foreground">
+                No tickets found
+              </div>
+            )}
+
+            {!isSearching && searchResults.length > 0 && (
+              <div className="max-h-64 space-y-1 overflow-y-auto">
+                {searchResults.map((result) => (
+                  <button
+                    key={result.id}
+                    type="button"
+                    onClick={() => handleSelectSearchResult(result)}
+                    disabled={isLooking}
+                    className={cn(
+                      'w-full rounded-lg border border-transparent px-3 py-2.5 text-left transition-all',
+                      'hover:border-border hover:bg-white/[0.04]',
+                      'disabled:opacity-50',
+                      result.closed && 'opacity-60'
+                    )}
+                  >
+                    <p className="truncate text-sm font-medium text-foreground">
+                      <span className="text-muted-foreground">#{result.id}</span>
+                      {' — '}
+                      {result.summary}
+                    </p>
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+                      {result.company_name && <span>{result.company_name}</span>}
+                      {result.board_name && (
+                        <>
+                          <span className="text-[#5a6170]">&bull;</span>
+                          <span>{result.board_name}</span>
+                        </>
+                      )}
+                      {result.status_name && (
+                        <>
+                          <span className="text-[#5a6170]">&bull;</span>
+                          <span className={result.closed ? 'text-[#5a6170]' : ''}>
+                            {result.status_name}
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {isLooking && (
+              <div className="flex items-center justify-center py-3">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading ticket details...</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Manual mode */}
+        {mode === 'manual' && !selectedTicket && (
+          <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={manualId}
+                onChange={(e) => {
+                  setManualId(e.target.value)
+                  if (error) setError(null)
+                }}
+                onKeyDown={handleManualKeyDown}
+                disabled={isLooking}
+                className="flex-1"
+                autoFocus
+              />
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={handleManualLookup}
+                disabled={!manualId.trim() || isLooking}
+                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>
+        )}
+
+        {/* Selected ticket confirmation card */}
+        {selectedTicket && selectedTicketId && (
+          <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 #{selectedTicketId} — {selectedTicket.summary}
+                </p>
+                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+                  {selectedTicket.company_name && (
+                    <span>{selectedTicket.company_name}</span>
+                  )}
+                  {selectedTicket.board_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{selectedTicket.board_name}</span>
+                    </>
+                  )}
+                  {selectedTicket.status_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{selectedTicket.status_name}</span>
+                    </>
+                  )}
+                  {selectedTicket.priority_name && (
+                    <>
+                      <span className="text-[#5a6170]">&bull;</span>
+                      <span>{selectedTicket.priority_name}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={handleClearSelection}
+                disabled={isLinking}
+                className="flex-1"
+              >
+                Back
+              </Button>
+              <Button
+                className="flex-1"
+                onClick={handleLink}
+                loading={isLinking}
+              >
+                <Ticket className="h-4 w-4" />
+                Link This Ticket
+              </Button>
+            </div>
+          </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>
+  )
+}
--- a/frontend/src/components/session/UpdateTicketModal.tsx
+++ b/frontend/src/components/session/UpdateTicketModal.tsx
@@ -0,0 +1,313 @@
+import { useState, useEffect } from 'react'
+import { Loader2, Copy, AlertTriangle, AlertCircle, RefreshCw } from 'lucide-react'
+import { Modal } from '@/components/common/Modal'
+import { Textarea } from '@/components/ui/Textarea'
+import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'
+import { sessionPsaApi } from '@/api/integrations'
+import type { PsaPreviewResponse } from '@/types/integrations'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  sessionId: string
+  onPosted?: () => void
+}
+
+type NoteType = 'internal_analysis' | 'resolution' | 'description'
+
+const NOTE_TYPE_OPTIONS: { value: NoteType; label: string; description: string; warning?: string }[] = [
+  { value: 'internal_analysis', label: 'Internal Analysis', description: 'Internal only, no notifications' },
+  { value: 'resolution', label: 'Resolution', description: 'Internal only, triggers notifications' },
+  { value: 'description', label: 'Description', description: 'Visible to the customer', warning: 'This note will be visible to the customer' },
+]
+
+const CHAR_WARNING_THRESHOLD = 15000
+
+export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props) {
+  const [preview, setPreview] = useState<PsaPreviewResponse | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [loadError, setLoadError] = useState<string | null>(null)
+
+  const [content, setContent] = useState('')
+  const [noteType, setNoteType] = useState<NoteType>('internal_analysis')
+  const [selectedStatusId, setSelectedStatusId] = useState<number | null>(null)
+
+  const [isPosting, setIsPosting] = useState(false)
+  const [postError, setPostError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      loadPreview()
+    } else {
+      // Reset state when closed
+      setPreview(null)
+      setContent('')
+      setNoteType('internal_analysis')
+      setSelectedStatusId(null)
+      setPostError(null)
+      setLoadError(null)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, sessionId])
+
+  const loadPreview = async () => {
+    setIsLoading(true)
+    setLoadError(null)
+    try {
+      const data = await sessionPsaApi.getPostPreview(sessionId)
+      setPreview(data)
+      setContent(data.content)
+      // Find current status ID from available_statuses matching ticket status_name
+      const currentStatus = data.available_statuses.find(
+        (s) => s.name === data.ticket.status_name
+      )
+      setSelectedStatusId(currentStatus?.id ?? null)
+    } catch (err) {
+      const axiosErr = err as { response?: { data?: { detail?: string } } }
+      setLoadError(axiosErr.response?.data?.detail || 'Failed to load preview')
+      console.error(err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCopyContent = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      toast.success('Content copied to clipboard')
+    } catch {
+      toast.error('Failed to copy content')
+    }
+  }
+
+  const handlePost = async () => {
+    setIsPosting(true)
+    setPostError(null)
+    try {
+      // Determine if status should be updated
+      const currentStatus = preview?.available_statuses.find(
+        (s) => s.name === preview?.ticket.status_name
+      )
+      const statusChanged = selectedStatusId !== null && selectedStatusId !== currentStatus?.id
+
+      await sessionPsaApi.postToTicket(sessionId, {
+        note_type: noteType,
+        content,
+        ...(statusChanged ? { update_status_id: selectedStatusId } : {}),
+      })
+
+      toast.success('Note posted to ticket successfully')
+      onPosted?.()
+      onClose()
+    } catch (err) {
+      const axiosErr = err as { response?: { data?: { detail?: string } } }
+      setPostError(axiosErr.response?.data?.detail || 'Failed to post to ticket')
+      console.error(err)
+    } finally {
+      setIsPosting(false)
+    }
+  }
+
+  const currentStatusId = preview?.available_statuses.find(
+    (s) => s.name === preview?.ticket.status_name
+  )?.id
+
+  const footer = (
+    <div className="space-y-3">
+      {postError && (
+        <div className="flex items-center justify-between gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-3 py-2 text-sm text-red-400">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-4 w-4 shrink-0" />
+            <span>{postError}</span>
+          </div>
+          <button
+            onClick={handlePost}
+            className="inline-flex items-center gap-1.5 shrink-0 text-xs font-medium hover:text-red-300 transition-colors"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Retry
+          </button>
+        </div>
+      )}
+      <div className="flex items-center justify-end gap-3">
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handlePost}
+          disabled={isPosting || !content.trim()}
+          className={cn(
+            'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
+            'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
+            'hover:opacity-90 active:scale-[0.97] transition-all',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+          )}
+        >
+          {isPosting && <Loader2 className="h-4 w-4 animate-spin" />}
+          Update Ticket
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <Modal isOpen={open} onClose={onClose} title="Update Ticket" size="xl" footer={footer}>
+      {isLoading && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {loadError && (
+        <div className="flex flex-col items-center gap-3 py-8">
+          <div className="flex items-center gap-2 text-red-400">
+            <AlertCircle className="h-5 w-5" />
+            <span className="text-sm">{loadError}</span>
+          </div>
+          <button
+            onClick={loadPreview}
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      )}
+
+      {preview && !isLoading && (
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Left panel - Content editor */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Note Content
+              </p>
+              <button
+                type="button"
+                onClick={handleCopyContent}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                title="Copy content"
+              >
+                <Copy className="h-3 w-3" />
+                Copy
+              </button>
+            </div>
+
+            <Textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              rows={18}
+              className="min-h-[300px] resize-y font-mono text-xs"
+            />
+
+            <div className="flex items-center justify-between text-xs">
+              {content.length >= CHAR_WARNING_THRESHOLD ? (
+                <span className="flex items-center gap-1 text-amber-400">
+                  <AlertTriangle className="h-3 w-3" />
+                  Content may be truncated by ConnectWise
+                </span>
+              ) : (
+                <span />
+              )}
+              <span className="text-muted-foreground">
+                {content.length.toLocaleString()} characters
+              </span>
+            </div>
+          </div>
+
+          {/* Right panel - Controls */}
+          <div className="space-y-6">
+            {/* Ticket info summary */}
+            <div className="glass-card-static rounded-lg border border-border p-3">
+              <p className="text-sm font-medium text-foreground">
+                CW #{preview.ticket.id}
+                {preview.ticket.summary && (
+                  <span className="text-muted-foreground"> — {preview.ticket.summary}</span>
+                )}
+              </p>
+              {(preview.ticket.company_name || preview.ticket.board_name) && (
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {[preview.ticket.company_name, preview.ticket.board_name].filter(Boolean).join(' / ')}
+                </p>
+              )}
+            </div>
+
+            {/* Note Type */}
+            <div>
+              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
+                Note Type
+              </p>
+              <div className="space-y-2">
+                {NOTE_TYPE_OPTIONS.map((opt) => (
+                  <label
+                    key={opt.value}
+                    className={cn(
+                      'flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors',
+                      noteType === opt.value
+                        ? 'border-primary/30 bg-primary/5'
+                        : 'border-border hover:border-[rgba(255,255,255,0.12)]'
+                    )}
+                  >
+                    <input
+                      type="radio"
+                      name="note_type"
+                      value={opt.value}
+                      checked={noteType === opt.value}
+                      onChange={() => setNoteType(opt.value)}
+                      className="mt-0.5 accent-cyan-400"
+                    />
+                    <div className="min-w-0">
+                      <span className="text-sm font-medium text-foreground">{opt.label}</span>
+                      <p className="text-xs text-muted-foreground">{opt.description}</p>
+                      {opt.warning && noteType === opt.value && (
+                        <p className="mt-1 flex items-center gap-1 text-xs text-amber-400">
+                          <AlertTriangle className="h-3 w-3 shrink-0" />
+                          {opt.warning}
+                        </p>
+                      )}
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Ticket Status */}
+            <div>
+              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+                Ticket Status
+              </p>
+              <select
+                value={selectedStatusId ?? ''}
+                onChange={(e) => setSelectedStatusId(e.target.value ? Number(e.target.value) : null)}
+                className={cn(
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                  'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                )}
+              >
+                {preview.available_statuses.map((status) => (
+                  <option key={status.id} value={status.id}>
+                    {status.name}
+                    {status.id === currentStatusId ? ' (current)' : ''}
+                    {status.is_closed ? ' [closed]' : ''}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Previous posts */}
+            {preview.previous_posts > 0 && (
+              <p className="text-xs text-muted-foreground">
+                This session has been posted {preview.previous_posts} time{preview.previous_posts > 1 ? 's' : ''} before.
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText, UserCog, AlertTriangle, Clock } from 'lucide-react'
+import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText, UserCog, AlertTriangle, Clock, Plug } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
@@ -555,6 +555,23 @@ export function AccountSettingsPage() {
          </Link>
        )}

+        {/* Integrations Link (owners only) */}
+        {isAccountOwner && (
+          <Link
+            to="/account/integrations"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
+          >
+            <div className="flex items-center gap-3">
+              <Plug className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <h2 className="text-lg font-semibold text-foreground">Integrations</h2>
+                <p className="text-sm text-muted-foreground">Connect your PSA to sync session documentation to tickets</p>
+              </div>
+            </div>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
+          </Link>
+        )}
+
        {/* Feedback Link (all users) */}
        <Link
          to="/feedback"
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -24,6 +24,11 @@ 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 { UpdateTicketModal } from '@/components/session/UpdateTicketModal'
+import type { PSATicketInfo } from '@/types/integrations'

 interface StepState {
  notes: string
@@ -86,6 +91,12 @@ 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 [showUpdateModal, setShowUpdateModal] = 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 +142,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 +621,18 @@ export function ProceduralNavigationPage() {
            Exit
          </button>
        </div>
+        {session && (
+          <div className="mt-1.5">
+            <TicketLinkIndicator
+              session={session}
+              hasConnection={hasConnection}
+              onLinkClick={() => setShowTicketPicker(true)}
+              onUnlink={handleTicketUnlink}
+              onUpdateClick={session.psa_ticket_id ? () => setShowUpdateModal(true) : undefined}
+              ticketInfo={psaTicketInfo}
+            />
+          </div>
+        )}
        <div className="mt-2">
          <ProgressBar
            currentStep={completedStepIds.size}
@@ -877,6 +926,23 @@ 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}
+        />
+      )}
+      {session && (
+        <UpdateTicketModal
+          open={showUpdateModal}
+          onClose={() => setShowUpdateModal(false)}
+          sessionId={session.id}
+        />
+      )}
    </div>
  )
 }
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -22,6 +22,11 @@ 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 { UpdateTicketModal } from '@/components/session/UpdateTicketModal'
+import type { PSATicketInfo } from '@/types/integrations'

 interface LocationState {
  sessionId?: string
@@ -65,6 +70,12 @@ 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 [showUpdateModal, setShowUpdateModal] = useState(false)
+  const [ticketInfo, setTicketInfo] = useState<PSATicketInfo | null>(null)
+
  const handleCopyCommand = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopiedCommand(text)
@@ -272,6 +283,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 +693,16 @@ export function TreeNavigationPage() {
              {clientName && `Client: ${clientName}`}
            </p>
          )}
+          {session && (
+            <TicketLinkIndicator
+              session={session}
+              hasConnection={hasConnection}
+              onLinkClick={() => setShowTicketPicker(true)}
+              onUnlink={handleTicketUnlink}
+              onUpdateClick={session.psa_ticket_id ? () => setShowUpdateModal(true) : undefined}
+              ticketInfo={ticketInfo}
+            />
+          )}
        </div>
        <div className="flex items-center gap-2">
          {/* Share Progress Popover */}
@@ -1251,6 +1298,23 @@ export function TreeNavigationPage() {
          onClose={() => setShowShareModal(false)}
        />
      )}
+
+      {/* Ticket Picker Modal */}
+      {session && (
+        <TicketPickerModal
+          open={showTicketPicker}
+          onClose={() => setShowTicketPicker(false)}
+          sessionId={session.id}
+          onLinked={handleTicketLinked}
+        />
+      )}
+      {session && (
+        <UpdateTicketModal
+          open={showUpdateModal}
+          onClose={() => setShowUpdateModal(false)}
+          sessionId={session.id}
+        />
+      )}
      </div>
      </div>

--- a/frontend/src/pages/account/IntegrationsPage.tsx
+++ b/frontend/src/pages/account/IntegrationsPage.tsx
@@ -0,0 +1,799 @@
+import { useEffect, useState } from 'react'
+import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield, History, Ticket, Users, Zap, Save } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
+import { integrationsApi } from '@/api/integrations'
+import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+import type { PsaMemberResponse, PsaMemberMappingResponse } from '@/types/integrations'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/Input'
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays < 30) return `${diffDays}d ago`
+  return date.toLocaleDateString()
+}
+
+interface ConnectionForm {
+  display_name: string
+  site_url: string
+  company_id: string
+  public_key: string
+  private_key: string
+}
+
+const emptyForm: ConnectionForm = {
+  display_name: '',
+  site_url: '',
+  company_id: '',
+  public_key: '',
+  private_key: '',
+}
+
+type Tab = 'connection' | 'member-mapping' | 'post-history'
+
+export function IntegrationsPage() {
+  const [activeTab, setActiveTab] = useState<Tab>('connection')
+  const [connection, setConnection] = useState<PsaConnectionResponse | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Form state
+  const [mode, setMode] = useState<'view' | 'setup' | 'edit'>('setup')
+  const [form, setForm] = useState<ConnectionForm>(emptyForm)
+  const [isSaving, setIsSaving] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+
+  // Test state
+  const [isTesting, setIsTesting] = useState(false)
+  const [testResult, setTestResult] = useState<PsaConnectionTestResponse | null>(null)
+
+  // Delete state
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  useEffect(() => {
+    loadConnection()
+  }, [])
+
+  const loadConnection = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const data = await integrationsApi.getConnection()
+      setConnection(data)
+      setMode(data ? 'view' : 'setup')
+    } catch (err) {
+      // 404 means no connection exists — that's fine
+      const axiosErr = err as { response?: { status?: number } }
+      if (axiosErr.response?.status === 404) {
+        setConnection(null)
+        setMode('setup')
+      } else {
+        setError('Failed to load integration settings')
+        console.error(err)
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    setFormError(null)
+    try {
+      const payload: PsaConnectionCreate = {
+        provider: 'connectwise',
+        ...form,
+      }
+      const created = await integrationsApi.createConnection(payload)
+      setConnection(created)
+      setMode('view')
+      setForm(emptyForm)
+    } catch (err) {
+      const axiosErr = err as { response?: { data?: { detail?: string } } }
+      setFormError(axiosErr.response?.data?.detail || 'Failed to create connection. Please check your credentials and try again.')
+      console.error(err)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!connection) return
+    setIsSaving(true)
+    setFormError(null)
+    try {
+      const update: PsaConnectionUpdate = {}
+      if (form.display_name && form.display_name !== connection.display_name) update.display_name = form.display_name
+      if (form.site_url && form.site_url !== connection.site_url) update.site_url = form.site_url
+      if (form.company_id && form.company_id !== connection.company_id) update.company_id = form.company_id
+      if (form.public_key) update.public_key = form.public_key
+      if (form.private_key) update.private_key = form.private_key
+      // client_id is server-side (settings.CW_CLIENT_ID), not per-account
+
+      const updated = await integrationsApi.updateConnection(connection.id, update)
+      setConnection(updated)
+      setMode('view')
+      setForm(emptyForm)
+    } catch (err) {
+      const axiosErr = err as { response?: { data?: { detail?: string } } }
+      setFormError(axiosErr.response?.data?.detail || 'Failed to update connection.')
+      console.error(err)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleTest = async () => {
+    if (!connection) return
+    setIsTesting(true)
+    setTestResult(null)
+    try {
+      const result = await integrationsApi.testConnection(connection.id)
+      setTestResult(result)
+    } catch (err) {
+      setTestResult({ success: false, message: 'Connection test failed. Check your credentials.', server_version: null })
+      console.error(err)
+    } finally {
+      setIsTesting(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!connection) return
+    setIsDeleting(true)
+    try {
+      await integrationsApi.deleteConnection(connection.id)
+      setConnection(null)
+      setMode('setup')
+      setForm(emptyForm)
+      setShowDeleteConfirm(false)
+      setTestResult(null)
+    } catch (err) {
+      console.error('Failed to delete connection:', err)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const startEdit = () => {
+    if (!connection) return
+    setForm({
+      display_name: connection.display_name,
+      site_url: connection.site_url,
+      company_id: connection.company_id,
+      public_key: '',
+      private_key: '',
+    })
+    setFormError(null)
+    setTestResult(null)
+    setMode('edit')
+  }
+
+  const cancelEdit = () => {
+    setMode('view')
+    setForm(emptyForm)
+    setFormError(null)
+  }
+
+  if (isLoading) {
+    return (
+      <>
+        <PageMeta title="Integrations" />
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </>
+    )
+  }
+
+  if (error) {
+    return (
+      <>
+        <PageMeta title="Integrations" />
+        <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5" />
+            {error}
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <PageMeta title="Integrations" />
+      <div>
+        <div className="mb-8">
+          <div className="flex items-center gap-3">
+            <Plug className="h-8 w-8 text-muted-foreground" />
+            <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Integrations</h1>
+          </div>
+          <p className="mt-2 text-muted-foreground">
+            Connect your PSA to post session documentation directly to tickets.
+          </p>
+        </div>
+
+        {/* Tabs */}
+        <div className="mb-6 flex gap-1 border-b border-border">
+          {([
+            { id: 'connection' as Tab, label: 'Connection', icon: Plug },
+            { id: 'member-mapping' as Tab, label: 'Member Mapping', icon: Users },
+            { id: 'post-history' as Tab, label: 'Post History', icon: History },
+          ]).map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={cn(
+                'inline-flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors -mb-px',
+                activeTab === id
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Connection Tab */}
+        {activeTab === 'connection' && (
+        <div className="max-w-3xl">
+          {/* Setup / Edit Form */}
+          {(mode === 'setup' || mode === 'edit') && (
+            <div className="glass-card-static p-6">
+              <div className="flex items-center gap-2 mb-6">
+                <Shield className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">
+                  {mode === 'setup' ? 'Connect to ConnectWise PSA' : 'Edit Connection'}
+                </h2>
+              </div>
+
+              <form onSubmit={mode === 'setup' ? handleCreate : handleUpdate} className="space-y-4">
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Display Name
+                  </label>
+                  <Input
+                    type="text"
+                    value={form.display_name}
+                    onChange={(e) => setForm({ ...form, display_name: e.target.value })}
+                    placeholder="My ConnectWise Instance"
+                    required={mode === 'setup'}
+                    className="mt-1"
+                  />
+                </div>
+
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Site URL
+                  </label>
+                  <Input
+                    type="text"
+                    value={form.site_url}
+                    onChange={(e) => setForm({ ...form, site_url: e.target.value })}
+                    placeholder="na.myconnectwise.net"
+                    required={mode === 'setup'}
+                    className="mt-1"
+                  />
+                </div>
+
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Company ID
+                  </label>
+                  <Input
+                    type="text"
+                    value={form.company_id}
+                    onChange={(e) => setForm({ ...form, company_id: e.target.value })}
+                    placeholder="mycompany"
+                    required={mode === 'setup'}
+                    className="mt-1"
+                  />
+                </div>
+
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Public Key
+                  </label>
+                  <Input
+                    type="text"
+                    value={form.public_key}
+                    onChange={(e) => setForm({ ...form, public_key: e.target.value })}
+                    placeholder={mode === 'edit' && connection ? `Current: ${connection.public_key_hint}` : 'Enter public key'}
+                    required={mode === 'setup'}
+                    className="mt-1"
+                  />
+                </div>
+
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Private Key
+                  </label>
+                  <Input
+                    type="password"
+                    value={form.private_key}
+                    onChange={(e) => setForm({ ...form, private_key: e.target.value })}
+                    placeholder={mode === 'edit' && connection ? `Current: ${connection.private_key_hint}` : 'Enter private key'}
+                    required={mode === 'setup'}
+                    className="mt-1"
+                  />
+                </div>
+
+                {formError && (
+                  <div className="flex items-center gap-2 rounded-md border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
+                    <AlertCircle className="h-4 w-4 shrink-0" />
+                    {formError}
+                  </div>
+                )}
+
+                <div className="flex items-center gap-3 pt-2">
+                  <button
+                    type="submit"
+                    disabled={isSaving}
+                    className={cn(
+                      'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
+                      'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
+                      'hover:opacity-90 active:scale-[0.97] transition-all',
+                      'disabled:opacity-50 disabled:cursor-not-allowed'
+                    )}
+                  >
+                    {isSaving && <Loader2 className="h-4 w-4 animate-spin" />}
+                    {mode === 'setup' ? 'Connect' : 'Save Changes'}
+                  </button>
+
+                  {mode === 'edit' && (
+                    <button
+                      type="button"
+                      onClick={cancelEdit}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  )}
+                </div>
+              </form>
+            </div>
+          )}
+
+          {/* Connected View */}
+          {mode === 'view' && connection && (
+            <div className="space-y-4">
+              {/* Status Card */}
+              <div className="glass-card-static p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center gap-3">
+                    <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-label font-medium text-primary">
+                      ConnectWise
+                    </span>
+                    <h2 className="text-lg font-semibold text-foreground">{connection.display_name}</h2>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={cn(
+                        'inline-flex h-2 w-2 rounded-full',
+                        connection.is_active ? 'bg-emerald-400' : 'bg-amber-400'
+                      )}
+                    />
+                    <span className={cn(
+                      'text-xs font-label',
+                      connection.is_active ? 'text-emerald-400' : 'text-amber-400'
+                    )}>
+                      {connection.is_active ? 'Connected' : 'Not validated'}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div>
+                    <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Site URL</p>
+                    <p className="mt-1 text-sm text-foreground">{connection.site_url}</p>
+                  </div>
+                  <div>
+                    <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Company ID</p>
+                    <p className="mt-1 text-sm text-foreground">{connection.company_id}</p>
+                  </div>
+                  <div>
+                    <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Public Key</p>
+                    <p className="mt-1 text-sm text-foreground font-mono">{connection.public_key_hint}</p>
+                  </div>
+                  <div>
+                    <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Private Key</p>
+                    <p className="mt-1 text-sm text-foreground font-mono">{connection.private_key_hint}</p>
+                  </div>
+                  <div>
+                    <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Last Validated</p>
+                    <p className="mt-1 text-sm text-foreground">
+                      {connection.last_validated_at ? formatRelativeTime(connection.last_validated_at) : 'Never'}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Test Result */}
+              {testResult && (
+                <div
+                  className={cn(
+                    'flex items-center gap-2 rounded-xl border p-4 text-sm',
+                    testResult.success
+                      ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
+                      : 'border-red-400/20 bg-red-400/10 text-red-400'
+                  )}
+                >
+                  {testResult.success ? (
+                    <CheckCircle2 className="h-4 w-4 shrink-0" />
+                  ) : (
+                    <AlertCircle className="h-4 w-4 shrink-0" />
+                  )}
+                  <span>{testResult.message}</span>
+                  {testResult.server_version && (
+                    <span className="ml-auto text-xs text-muted-foreground">
+                      v{testResult.server_version}
+                    </span>
+                  )}
+                </div>
+              )}
+
+              {/* Action Buttons */}
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleTest}
+                  disabled={isTesting}
+                  className={cn(
+                    'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
+                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+                    'hover:border-[rgba(255,255,255,0.12)] transition-all',
+                    'disabled:opacity-50 disabled:cursor-not-allowed'
+                  )}
+                >
+                  {isTesting ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <CheckCircle2 className="h-4 w-4" />
+                  )}
+                  Test Connection
+                </button>
+
+                <button
+                  onClick={startEdit}
+                  className={cn(
+                    'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
+                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+                    'hover:border-[rgba(255,255,255,0.12)] transition-all'
+                  )}
+                >
+                  <Pencil className="h-4 w-4" />
+                  Edit
+                </button>
+
+                {showDeleteConfirm ? (
+                  <div className="flex items-center gap-2 ml-auto">
+                    <span className="text-sm text-muted-foreground">Disconnect?</span>
+                    <button
+                      onClick={handleDelete}
+                      disabled={isDeleting}
+                      className="inline-flex items-center gap-1.5 rounded-[10px] px-3 py-2 text-sm font-medium text-red-400 hover:bg-red-400/10 transition-colors"
+                    >
+                      {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                      Confirm
+                    </button>
+                    <button
+                      onClick={() => setShowDeleteConfirm(false)}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="inline-flex items-center gap-2 ml-auto text-sm text-red-400 hover:text-red-300 transition-colors"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Disconnect
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        )}
+
+        {/* Member Mapping Tab */}
+        {activeTab === 'member-mapping' && (
+          <MemberMappingTab connection={connection} />
+        )}
+
+        {/* Post History Tab */}
+        {activeTab === 'post-history' && (
+          <div className="max-w-3xl">
+            <div className="glass-card-static p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <Ticket className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">Post History</h2>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                View post history from individual sessions by clicking on linked tickets.
+                When a session has a ConnectWise ticket linked, use the Update button to post
+                session documentation and view previous posts.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+/* ─── Member Mapping Tab ─── */
+
+function MemberMappingTab({ connection }: { connection: PsaConnectionResponse | null }) {
+  const [cwMembers, setCwMembers] = useState<PsaMemberResponse[]>([])
+  const [mappings, setMappings] = useState<PsaMemberMappingResponse[]>([])
+  const [localMappings, setLocalMappings] = useState<Record<string, { external_member_id: string; external_member_name: string }>>({})
+  const [isLoadingData, setIsLoadingData] = useState(false)
+  const [isAutoMatching, setIsAutoMatching] = useState(false)
+  const [isSavingMappings, setIsSavingMappings] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+
+  useEffect(() => {
+    if (connection) {
+      loadMappingData()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connection?.id])
+
+  const loadMappingData = async () => {
+    setIsLoadingData(true)
+    try {
+      const [members, existingMappings] = await Promise.all([
+        integrationsApi.listMembers(),
+        integrationsApi.getMemberMappings(),
+      ])
+      setCwMembers(members)
+      setMappings(existingMappings)
+
+      // Build local mapping state from existing mappings
+      const lookup: Record<string, { external_member_id: string; external_member_name: string }> = {}
+      for (const m of existingMappings) {
+        lookup[m.user_id] = { external_member_id: m.external_member_id, external_member_name: m.external_member_name }
+      }
+      setLocalMappings(lookup)
+      setIsDirty(false)
+      setHasLoaded(true)
+    } catch (err) {
+      console.error('Failed to load mapping data:', err)
+      toast.error('Failed to load member data')
+    } finally {
+      setIsLoadingData(false)
+    }
+  }
+
+  const handleAutoMatch = async () => {
+    setIsAutoMatching(true)
+    try {
+      const result = await integrationsApi.autoMatchMembers()
+      toast.success(`Matched ${result.matched.length} user${result.matched.length !== 1 ? 's' : ''}${result.unmatched_users > 0 ? `, ${result.unmatched_users} remain unmapped` : ''}`)
+      await loadMappingData()
+    } catch (err) {
+      console.error('Auto-match failed:', err)
+      toast.error('Auto-match failed')
+    } finally {
+      setIsAutoMatching(false)
+    }
+  }
+
+  const handleMemberChange = (userId: string, externalMemberId: string) => {
+    setLocalMappings(prev => {
+      const next = { ...prev }
+      if (!externalMemberId) {
+        delete next[userId]
+      } else {
+        const member = cwMembers.find(m => m.id === externalMemberId)
+        next[userId] = {
+          external_member_id: externalMemberId,
+          external_member_name: member?.name || '',
+        }
+      }
+      return next
+    })
+    setIsDirty(true)
+  }
+
+  const handleSave = async () => {
+    setIsSavingMappings(true)
+    try {
+      const payload = Object.entries(localMappings).map(([user_id, mapping]) => ({
+        user_id,
+        external_member_id: mapping.external_member_id,
+        external_member_name: mapping.external_member_name,
+      }))
+      await integrationsApi.saveMemberMappings(payload)
+      toast.success('Member mappings saved')
+      setIsDirty(false)
+      // Reload to get fresh data with matched_by etc.
+      await loadMappingData()
+    } catch (err) {
+      console.error('Failed to save mappings:', err)
+      toast.error('Failed to save mappings')
+    } finally {
+      setIsSavingMappings(false)
+    }
+  }
+
+  // Derive user list from mappings response (all account users are returned)
+  const userRows = mappings.length > 0
+    ? mappings.map(m => ({ user_id: m.user_id, user_email: m.user_email, user_name: m.user_name, matched_by: m.matched_by }))
+    : []
+
+  // Deduplicate: mappings may only contain mapped users, so we show what we have
+  const uniqueUsers = hasLoaded ? userRows : []
+
+  if (!connection) {
+    return (
+      <div className="max-w-3xl">
+        <div className="glass-card-static p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Set up a PSA connection first to map team members to ConnectWise members.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      {/* Header + Auto-Match */}
+      <div className="glass-card-static p-6">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
+          </div>
+          <button
+            type="button"
+            onClick={handleAutoMatch}
+            disabled={isAutoMatching || isLoadingData}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
+              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+              'hover:border-[rgba(255,255,255,0.12)] transition-all',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isAutoMatching ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Zap className="h-4 w-4" />
+            )}
+            Auto-Match by Email
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Map your ResolutionFlow users to ConnectWise members so session posts are attributed correctly.
+        </p>
+      </div>
+
+      {/* Loading state */}
+      {isLoadingData && (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Mapping Table */}
+      {hasLoaded && !isLoadingData && (
+        <div className="glass-card-static overflow-hidden">
+          {uniqueUsers.length === 0 ? (
+            <div className="p-6 text-center text-sm text-muted-foreground">
+              No users found. Use Auto-Match to discover and map users.
+            </div>
+          ) : (
+            <>
+              {/* Table header */}
+              <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-border px-6 py-3">
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">User</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Mapped To</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground w-20 text-center">Method</span>
+              </div>
+
+              {/* Rows */}
+              {uniqueUsers.map((user) => {
+                const currentMapping = localMappings[user.user_id]
+                return (
+                  <div
+                    key={user.user_id}
+                    className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-border/50 px-6 py-3 last:border-b-0"
+                  >
+                    <span className="text-sm text-foreground truncate">{user.user_name}</span>
+                    <span className="text-sm text-muted-foreground truncate">{user.user_email}</span>
+                    <select
+                      title={`Map ${user.user_name} to a ConnectWise member`}
+                      value={currentMapping?.external_member_id || ''}
+                      onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
+                      className={cn(
+                        'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
+                        'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+                        !currentMapping && 'text-muted-foreground'
+                      )}
+                    >
+                      <option value="">-- Unmapped --</option>
+                      {cwMembers.map((member) => (
+                        <option key={member.id} value={member.id}>
+                          {member.name}{member.email ? ` (${member.email})` : ''}
+                        </option>
+                      ))}
+                    </select>
+                    <span className="w-20 text-center">
+                      {currentMapping && !isDirty && user.matched_by ? (
+                        <span className={cn(
+                          'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label',
+                          user.matched_by === 'auto_email'
+                            ? 'bg-primary/10 text-primary'
+                            : 'bg-card border border-border text-muted-foreground'
+                        )}>
+                          {user.matched_by === 'auto_email' ? 'auto' : 'manual'}
+                        </span>
+                      ) : currentMapping ? (
+                        <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label bg-card border border-border text-muted-foreground">
+                          manual
+                        </span>
+                      ) : (
+                        <span className="text-[0.625rem] text-muted-foreground/50">—</span>
+                      )}
+                    </span>
+                  </div>
+                )
+              })}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Save button */}
+      {isDirty && (
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={isSavingMappings}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
+              'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
+              'hover:opacity-90 active:scale-[0.97] transition-all',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isSavingMappings ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            Save Mappings
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default IntegrationsPage
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -68,6 +68,7 @@ const ProfileSettingsPage = lazy(() => import('@/pages/account/ProfileSettingsPa
 const TeamCategoriesPage = lazy(() => import('@/pages/account/TeamCategoriesPage'))
 const TargetListsPage = lazy(() => import('@/pages/account/TargetListsPage'))
 const ChatRetentionSettingsPage = lazy(() => import('@/pages/account/ChatRetentionSettingsPage'))
+const IntegrationsPage = lazy(() => import('@/pages/account/IntegrationsPage'))

 /** Wraps a lazy-loaded page with Suspense + ErrorBoundary */
 function page(Component: React.LazyExoticComponent<React.ComponentType>) {
@@ -224,6 +225,14 @@ export const router = sentryCreateBrowserRouter([
            ),
          },
          { path: 'target-lists', element: page(TargetListsPage) },
+          {
+            path: 'integrations',
+            element: (
+              <ProtectedRoute requiredRole="owner">
+                {page(IntegrationsPage)}
+              </ProtectedRoute>
+            ),
+          },
        ],
      },
    ],
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -89,3 +89,4 @@ export type {
 } from './kbAccelerator'

 export * from './scripts'
+export * from './integrations'
--- a/frontend/src/types/integrations.ts
+++ b/frontend/src/types/integrations.ts
@@ -0,0 +1,123 @@
+export interface PsaConnectionResponse {
+  id: string
+  account_id: string
+  provider: string
+  display_name: string
+  site_url: string
+  company_id: string
+  is_active: boolean
+  last_validated_at: string | null
+  created_at: string
+  updated_at: string
+  public_key_hint: string
+  private_key_hint: string
+}
+
+export interface PsaConnectionCreate {
+  provider: string
+  display_name: string
+  site_url: string
+  company_id: string
+  public_key: string
+  private_key: string
+}
+
+export interface PsaConnectionUpdate {
+  display_name?: string
+  site_url?: string
+  company_id?: string
+  public_key?: string
+  private_key?: string
+}
+
+export interface PsaConnectionTestResponse {
+  success: boolean
+  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
+}
+
+export interface PSATicketSearchResult {
+  id: string
+  summary: string
+  company_name: string | null
+  board_name: string | null
+  status_name: string | null
+  priority_name: string | null
+  closed: boolean
+}
+
+export interface PSATicketStatusItem {
+  id: number
+  name: string
+  is_closed: boolean
+}
+
+export interface PsaPreviewResponse {
+  content: string
+  ticket: PSATicketSearchResult
+  available_statuses: PSATicketStatusItem[]
+  character_count: number
+  previous_posts: number
+}
+
+export interface PsaPostResponse {
+  id: string
+  session_id: string
+  ticket_id: string
+  note_type: string
+  status: string
+  external_note_id: string | null
+  error_message: string | null
+  status_changed_from: string | null
+  status_changed_to: string | null
+  posted_at: string
+}
+
+export interface PsaPostLogEntry {
+  id: string
+  ticket_id: string
+  note_type: string
+  status: string
+  error_message: string | null
+  status_changed_from: string | null
+  status_changed_to: string | null
+  posted_at: string
+  content_preview: string
+}
+
+export interface PsaMemberResponse {
+  id: string
+  identifier: string
+  name: string
+  email: string | null
+}
+
+export interface PsaMemberMappingResponse {
+  id: string
+  user_id: string
+  user_email: string
+  user_name: string
+  external_member_id: string
+  external_member_name: string
+  matched_by: string
+}
+
+export interface AutoMatchResult {
+  matched: PsaMemberMappingResponse[]
+  unmatched_users: number
+}
--- a/frontend/src/types/session.ts
+++ b/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 {