feat(psa): add Integrations page with connection management UI

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

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 } from './integrations'

frontend/src/api/integrations.ts

@@ -0,0 +1,15 @@
+import { apiClient } from './client'
+import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+
+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),
+}

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"

frontend/src/pages/account/IntegrationsPage.tsx

@@ -0,0 +1,505 @@
+import { useEffect, useState } from 'react'
+import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
+import { integrationsApi } from '@/api/integrations'
+import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+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
+  client_id: string
+}
+
+const emptyForm: ConnectionForm = {
+  display_name: '',
+  site_url: '',
+  company_id: '',
+  public_key: '',
+  private_key: '',
+  client_id: '',
+}
+
+export function IntegrationsPage() {
+  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
+      if (form.client_id) update.client_id = form.client_id
+
+      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: '',
+      client_id: '',
+    })
+    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>
+
+        <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>
+
+                <div>
+                  <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                    Client ID
+                  </label>
+                  <Input
+                    type="text"
+                    value={form.client_id}
+                    onChange={(e) => setForm({ ...form, client_id: e.target.value })}
+                    placeholder="ConnectWise Developer Client ID"
+                    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>
+      </div>
+    </>
+  )
+}
+
+export default IntegrationsPage

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>
+            ),
+          },
         ],
       },
     ],

frontend/src/types/index.ts

@@ -89,3 +89,4 @@ export type {
 } from './kbAccelerator'
 
 export * from './scripts'
+export * from './integrations'

frontend/src/types/integrations.ts

@@ -0,0 +1,39 @@
+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
+  client_id: string
+}
+
+export interface PsaConnectionUpdate {
+  display_name?: string
+  site_url?: string
+  company_id?: string
+  public_key?: string
+  private_key?: string
+  client_id?: string
+}
+
+export interface PsaConnectionTestResponse {
+  success: boolean
+  message: string
+  server_version: string | null
+}