feat(psa): add Update Ticket modal with note posting and status update

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

frontend/src/api/integrations.ts

@@ -1,6 +1,6 @@
 import { apiClient } from './client'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
-import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem } from '@/types/integrations'
+import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry } from '@/types/integrations'
 
 export const integrationsApi = {
   getConnection: () =>
@@ -24,4 +24,10 @@ export const integrationsApi = {
 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),
 }

frontend/src/components/session/TicketLinkIndicator.tsx

@@ -1,4 +1,4 @@
-import { Ticket, Unlink, Link2 } from 'lucide-react'
+import { Ticket, Unlink, Link2, Send } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { Session } from '@/types'
 import type { PSATicketInfo } from '@/types/integrations'
@@ -8,10 +8,11 @@ interface Props {
   hasConnection: boolean
   onLinkClick: () => void
   onUnlink: () => void
+  onUpdateClick?: () => void
   ticketInfo?: PSATicketInfo | null
 }
 
-export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, ticketInfo }: Props) {
+export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, onUpdateClick, ticketInfo }: Props) {
   // No connection — show nothing
   if (!hasConnection) return null
 
@@ -61,14 +62,30 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
           </div>
         )}
       </div>
-      <button
+      <div className="flex shrink-0 items-center gap-1">
-        type="button"
+        {onUpdateClick && (
-        onClick={onUnlink}
+          <button
-        className="shrink-0 rounded p-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+            type="button"
-        title="Unlink ticket"
+            onClick={onUpdateClick}
-      >
+            className={cn(
-        <Unlink className="h-3.5 w-3.5" />
+              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors',
-      </button>
+              '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>
   )
 }

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

frontend/src/pages/ProceduralNavigationPage.tsx

@@ -27,6 +27,7 @@ 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 {
@@ -93,6 +94,7 @@ export function ProceduralNavigationPage() {
   // 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
@@ -626,6 +628,7 @@ export function ProceduralNavigationPage() {
               hasConnection={hasConnection}
               onLinkClick={() => setShowTicketPicker(true)}
               onUnlink={handleTicketUnlink}
+              onUpdateClick={session.psa_ticket_id ? () => setShowUpdateModal(true) : undefined}
               ticketInfo={psaTicketInfo}
             />
           </div>
@@ -933,6 +936,13 @@ export function ProceduralNavigationPage() {
           onLinked={handleTicketLinked}
         />
       )}
+      {session && (
+        <UpdateTicketModal
+          open={showUpdateModal}
+          onClose={() => setShowUpdateModal(false)}
+          sessionId={session.id}
+        />
+      )}
     </div>
   )
 }

frontend/src/pages/TreeNavigationPage.tsx

@@ -25,6 +25,7 @@ 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 {
@@ -72,6 +73,7 @@ export function TreeNavigationPage() {
   // 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) => {
@@ -697,6 +699,7 @@ export function TreeNavigationPage() {
               hasConnection={hasConnection}
               onLinkClick={() => setShowTicketPicker(true)}
               onUnlink={handleTicketUnlink}
+              onUpdateClick={session.psa_ticket_id ? () => setShowUpdateModal(true) : undefined}
               ticketInfo={ticketInfo}
             />
           )}
@@ -1305,6 +1308,13 @@ export function TreeNavigationPage() {
           onLinked={handleTicketLinked}
         />
       )}
+      {session && (
+        <UpdateTicketModal
+          open={showUpdateModal}
+          onClose={() => setShowUpdateModal(false)}
+          sessionId={session.id}
+        />
+      )}
       </div>
       </div>
 

frontend/src/types/integrations.ts

@@ -68,3 +68,36 @@ export interface PSATicketStatusItem {
   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
+}