Merge main into feat/flowpilot-migration

Brings in PR #141 (PSA ticket management) so FlowPilot can ship on top
of a unified main. Two manual conflict resolutions:

1. CLAUDE.md — kept the FlowPilot ai-handoff rewrite (`.ai/`-driven
   protocol). The pre-rewrite reference content (CW integration notes,
   lessons archive, env vars table) lives in `docs/connectwise/`,
   `docs/LESSONS-ARCHIVE.md`, and DEV-ENV.md by design.

2. frontend/src/pages/AssistantChatPage.tsx — both conflict regions
   were purely additive. Concatenated FlowPilot's Phase 2-9 state hooks
   (facts, activeFix, preview*, scriptPanelOpen, templatizeQueue) with
   PSA's spin-off ticket state (linkedTicket, showNewTicket, spinOffHint).
   Both modal mounts (TemplatizePrompt, ShortcutsHelpOverlay,
   NewTicketModal) kept. All setters wired by either branch are intact.

Verification:
- `tsc -b` clean across the merged tree.
- Browser smoke-test (Session B fixture): Phase 9 ProposalBanner
  ("Run AI-drafted PowerShell to recover SSL VPN") renders alongside
  PSA's new Tickets sidebar icon. Console clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/api/index.ts

@@ -37,3 +37,4 @@ export { handoffsApi } from './handoffs'
 export { resolutionsApi } from './resolutions'
 export { deviceTypesApi } from './deviceTypes'
 export { networkDiagramsApi } from './networkDiagrams'
+export { ticketsApi } from './tickets'

frontend/src/api/integrations.ts

@@ -1,6 +1,7 @@
 import { apiClient } from './client'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
-import type { PSABoard, TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry, PsaMemberResponse, PsaMemberMappingResponse, AutoMatchResult, FlowpilotSettings } from '@/types/integrations'
+import type { PSABoard, TicketLinkResponse, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry, PsaMemberResponse, PsaMemberMappingResponse, AutoMatchResult, FlowpilotSettings } from '@/types/integrations'
+import type { TicketListResponse } from '@/types/tickets'
 
 export const integrationsApi = {
   getConnection: () =>
@@ -15,20 +16,22 @@ export const integrationsApi = {
     apiClient.post<PsaConnectionTestResponse>(`/integrations/psa/connections/${id}/test`).then(r => r.data),
   listBoards: () =>
     apiClient.get<PSABoard[]>('/integrations/psa/boards').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),
+  searchTickets: (params: { query?: string; board_id?: number; include_closed?: boolean }): Promise<TicketListResponse> =>
+    apiClient.get<TicketListResponse>('/integrations/psa/tickets/search', { params }).then(r => r.data),
   searchTicketsQueue: (params: {
     assigned_to_me?: boolean
     unassigned?: boolean
     board_ids?: string
     page?: number
     page_size?: number
-  }) =>
-    apiClient.get<PSATicketSearchResult[]>('/integrations/psa/tickets/search', { params }).then(r => r.data),
+  }): Promise<TicketListResponse> =>
+    apiClient.get<TicketListResponse>('/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),
+  getBoardStatuses: (boardId: number | string) =>
+    apiClient.get<PSATicketStatusItem[]>(`/integrations/psa/boards/${boardId}/statuses`).then(r => r.data),
   listMembers: () =>
     apiClient.get<PsaMemberResponse[]>('/integrations/psa/members').then(r => r.data),
   getMemberMappings: () =>

frontend/src/api/tickets.ts

@@ -0,0 +1,49 @@
+import { apiClient } from './client'
+import type {
+  PSAResource,
+  PSATicketCreated,
+  PSATicketStatusUpdate,
+  TicketCreationPayload,
+  AiParseResponse,
+  TicketListResponse,
+  PSAPriority,
+} from '@/types/tickets'
+
+export const ticketsApi = {
+  listResources: (ticketId: number): Promise<PSAResource[]> =>
+    apiClient.get<PSAResource[]>(`/integrations/psa/tickets/${ticketId}/resources`).then(r => r.data),
+
+  addResource: (ticketId: number, memberId: number): Promise<PSAResource> =>
+    apiClient.post<PSAResource>(`/integrations/psa/tickets/${ticketId}/resources?member_id=${memberId}`).then(r => r.data),
+
+  removeResource: (ticketId: number, memberId: number): Promise<void> =>
+    apiClient.delete(`/integrations/psa/tickets/${ticketId}/resources/${memberId}`).then(() => undefined),
+
+  updateStatus: (ticketId: number, statusId: number): Promise<PSATicketStatusUpdate> =>
+    apiClient.patch<PSATicketStatusUpdate>(`/integrations/psa/tickets/${ticketId}/status?status_id=${statusId}`).then(r => r.data),
+
+  createTicket: (payload: TicketCreationPayload): Promise<PSATicketCreated> =>
+    apiClient.post<PSATicketCreated>('/integrations/psa/tickets', payload).then(r => r.data),
+
+  aiParse: (prompt: string): Promise<AiParseResponse> =>
+    apiClient.post<AiParseResponse>('/integrations/psa/tickets/ai-parse', { prompt }).then(r => r.data),
+
+  listPriorities: (): Promise<PSAPriority[]> =>
+    apiClient.get<PSAPriority[]>('/integrations/psa/priorities').then(r => r.data),
+
+  searchTickets: (params: {
+    query?: string
+    board_id?: number | null
+    status_id?: number | null
+    status_name?: string | null
+    include_closed?: boolean
+    assigned_to_me?: boolean
+    unassigned?: boolean
+    board_ids?: string
+    priority?: string | null
+    company_id?: number | null
+    page?: number
+    page_size?: number
+  }): Promise<TicketListResponse> =>
+    apiClient.get<TicketListResponse>('/integrations/psa/tickets/search', { params }).then(r => r.data),
+}

frontend/src/components/dashboard/TicketQueue.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Ticket, ChevronDown, Check, Loader2, AlertCircle } from 'lucide-react'
+import { useNavigate, Link } from 'react-router-dom'
+import { Ticket, ChevronDown, Check, AlertCircle } from 'lucide-react'
 import { integrationsApi } from '@/api/integrations'
 import type { PSABoard, PSATicketSearchResult } from '@/types/integrations'
 import { cn } from '@/lib/utils'
 
-const PAGE_SIZE = 10
+const PAGE_SIZE = 5
 
 type Tab = 'mine' | 'unassigned'
 
@@ -188,14 +188,12 @@ function TicketRow({ ticket, isLast, onStartSession }: TicketRowProps) {
 export function TicketQueue() {
   const navigate = useNavigate()
   const [hasConnection, setHasConnection] = useState<boolean | null>(null)
+  const [hasMemberMapping, setHasMemberMapping] = useState<boolean | null>(null) // null = loading
   const [boards, setBoards] = useState<PSABoard[]>([])
   const [selectedBoardIds, setSelectedBoardIds] = useState<number[]>([])
   const [activeTab, setActiveTab] = useState<Tab>('mine')
   const [tickets, setTickets] = useState<PSATicketSearchResult[]>([])
-  const [page, setPage] = useState(1)
-  const [hasMore, setHasMore] = useState(false)
   const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   // Check connection on mount
@@ -208,6 +206,15 @@ export function TicketQueue() {
       .catch(() => setHasConnection(false))
   }, [])
 
+  // Detect member mapping on mount
+  useEffect(() => {
+    integrationsApi.getMemberMappings()
+      .then(mappings => {
+        setHasMemberMapping(mappings.length > 0)
+      })
+      .catch(() => setHasMemberMapping(false))
+  }, [])
+
   // Fetch boards once connection confirmed
   useEffect(() => {
     if (!hasConnection) return
@@ -217,9 +224,9 @@ export function TicketQueue() {
   }, [hasConnection])
 
   const fetchTickets = useCallback(
-    async (tab: Tab, boardIds: number[], pageNum: number, append: boolean) => {
+    async (tab: Tab, boardIds: number[]) => {
       const params: Parameters<typeof integrationsApi.searchTicketsQueue>[0] = {
-        page: pageNum,
+        page: 1,
         page_size: PAGE_SIZE,
       }
       if (tab === 'mine') {
@@ -233,12 +240,7 @@ export function TicketQueue() {
 
       try {
         const results = await integrationsApi.searchTicketsQueue(params)
-        if (append) {
-          setTickets((prev) => [...prev, ...results])
-        } else {
-          setTickets(results)
-        }
-        setHasMore(results.length === PAGE_SIZE)
+        setTickets(results.items)
         setError(null)
       } catch {
         setError('Failed to load tickets. Check your PSA connection.')
@@ -250,20 +252,11 @@ export function TicketQueue() {
   // Initial + reset fetch when tab or board selection changes
   useEffect(() => {
     if (!hasConnection) return
-    setPage(1)
+    if (activeTab === 'mine' && hasMemberMapping !== true) return
     setTickets([])
-    setHasMore(false)
     setLoading(true)
-    fetchTickets(activeTab, selectedBoardIds, 1, false).finally(() => setLoading(false))
-  }, [activeTab, selectedBoardIds, hasConnection, fetchTickets])
-
-  const handleLoadMore = async () => {
-    const nextPage = page + 1
-    setPage(nextPage)
-    setLoadingMore(true)
-    await fetchTickets(activeTab, selectedBoardIds, nextPage, true)
-    setLoadingMore(false)
-  }
+    fetchTickets(activeTab, selectedBoardIds).finally(() => setLoading(false))
+  }, [activeTab, selectedBoardIds, hasConnection, hasMemberMapping, fetchTickets])
 
   const handleStartSession = (ticket: PSATicketSearchResult) => {
     navigate('/pilot', {
@@ -327,6 +320,18 @@ export function TicketQueue() {
 
       {/* Content */}
       <div>
+        {/* Mapping prompt for "mine" tab when no member mapping configured */}
+        {activeTab === 'mine' && hasMemberMapping === false && (
+          <div className="px-5 py-6 text-center">
+            <p className="text-sm text-muted-foreground">
+              <Link to="/account/integrations" className="text-accent hover:underline">
+                Map your PSA member
+              </Link>{' '}
+              to see your ticket queue.
+            </p>
+          </div>
+        )}
+
         {/* Error */}
         {error && (
           <div className="flex items-center gap-2 px-5 py-4 text-sm text-danger">
@@ -345,13 +350,25 @@ export function TicketQueue() {
               <TicketRow
                 key={ticket.id}
                 ticket={ticket}
-                isLast={i === tickets.length - 1 && !hasMore}
+                isLast={i === tickets.length - 1}
                 onStartSession={handleStartSession}
               />
             ))}
           </>
         )}
 
+        {/* View all tickets link */}
+        {tickets.length > 0 && (
+          <div className="px-5 py-3 border-t border-default">
+            <Link
+              to="/tickets?assigned=me"
+              className="text-xs text-accent hover:text-accent/80 transition-colors"
+            >
+              View all tickets →
+            </Link>
+          </div>
+        )}
+
         {/* Empty states */}
         {!error && !loading && tickets.length === 0 && (
           <div className="px-5 py-8 text-center">
@@ -369,28 +386,6 @@ export function TicketQueue() {
           </div>
         )}
 
-        {/* Load more */}
-        {!error && !loading && hasMore && (
-          <div
-            className="px-5 py-3"
-            style={{ borderTop: '1px solid var(--color-border-default)' }}
-          >
-            <button
-              onClick={handleLoadMore}
-              disabled={loadingMore}
-              className="flex w-full items-center justify-center gap-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-transparent py-2 text-xs text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.14)] disabled:opacity-50 transition-colors"
-            >
-              {loadingMore ? (
-                <>
-                  <Loader2 size={12} className="animate-spin" />
-                  Loading...
-                </>
-              ) : (
-                'Load more'
-              )}
-            </button>
-          </div>
-        )}
       </div>
     </div>
   )

frontend/src/components/layout/Sidebar.tsx

@@ -5,7 +5,7 @@ import {
   LayoutGrid, Clock, AlertTriangle, GitBranch, Code2, Wand2,
   ListChecks, Download, BarChart3,
   Settings, Pin, PinOff,
-  History, FileText, Network,
+  History, FileText, Network, Ticket,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -94,6 +94,10 @@ export function Sidebar() {
         { href: '/escalations', label: 'Escalations', count: stats?.escalation_count || undefined },
       ],
     },
+    {
+      href: '/tickets', icon: Ticket, label: 'Tickets', shortLabel: 'Tickets',
+      matchPaths: ['/tickets'],
+    },
     {
       href: '/trees', icon: GitBranch, label: 'Flows', shortLabel: 'Flows',
       badge: stats?.tree_counts.total || undefined,
@@ -132,6 +136,7 @@ export function Sidebar() {
       items: [
         { href: '/', icon: LayoutGrid, label: 'Dashboard', shortLabel: 'Dash' },
         { href: '/sessions', icon: Clock, label: 'Session History', shortLabel: 'History', badge: stats?.active_count || undefined, matchPaths: ['/sessions'] },
+        { href: '/tickets', icon: Ticket, label: 'Tickets', shortLabel: 'Tickets', matchPaths: ['/tickets'] },
         { href: '/escalations', icon: AlertTriangle, label: 'Escalations', shortLabel: 'Escal', badge: stats?.escalation_count || undefined },
       ],
     },

frontend/src/components/session/TicketPickerModal.tsx

@@ -56,7 +56,7 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
         query: query.trim(),
         include_closed: closed,
       })
-      setSearchResults(results)
+      setSearchResults(results.items)
       setHasSearched(true)
     } catch (err: unknown) {
       const message =

frontend/src/components/tickets/AiTicketParseForm.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { Sparkles, Loader2 } from 'lucide-react'
+import { ticketsApi } from '@/api/tickets'
+import type { AiParseResponse, TicketCreationPayload } from '@/types/tickets'
+
+interface Props {
+  initialHint?: string
+  onParsed: (values: Partial<TicketCreationPayload>, parseResponse: AiParseResponse) => void
+}
+
+export function AiTicketParseForm({ initialHint = '', onParsed }: Props) {
+  const [prompt, setPrompt] = useState(initialHint)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleParse() {
+    if (!prompt.trim()) return
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await ticketsApi.aiParse(prompt)
+      const values: Partial<TicketCreationPayload> = {
+        summary: result.summary ?? undefined,
+        company_id: result.company_id,
+        board_id: result.board_id,
+        status_id: result.status_id,
+        priority_id: result.priority_id,
+        assigned_member_id: result.assigned_member_id,
+        description: result.description ?? undefined,
+      }
+      onParsed(values, result)
+    } catch {
+      setError('AI parsing failed. Please try again or use the full form.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Describe the ticket in plain language — who, what, which client, and priority.
+      </p>
+      <textarea
+        aria-label="Ticket description"
+        className="w-full bg-input border border-default rounded-[5px] px-3 py-2 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none resize-none"
+        rows={4}
+        placeholder="e.g. Create a high priority ticket for Acme Corp — Outlook not syncing for jsmith, assign to me"
+        value={prompt}
+        onChange={e => setPrompt(e.target.value)}
+      />
+      {error && <p className="text-xs text-danger">{error}</p>}
+      <button
+        onClick={handleParse}
+        disabled={!prompt.trim() || loading}
+        className="flex items-center gap-1.5 px-4 py-2 bg-accent text-white text-sm font-medium rounded-[5px] hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+      >
+        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+        {loading ? 'Parsing…' : 'Parse with AI'}
+      </button>
+    </div>
+  )
+}

frontend/src/components/tickets/NewTicketModal.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react'
+import { X, AlertCircle } from 'lucide-react'
+import { ticketsApi } from '@/api/tickets'
+import { integrationsApi } from '@/api/integrations'
+import { AiTicketParseForm } from './AiTicketParseForm'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import type { TicketCreationPayload, AiParseResponse, PSAPriority } from '@/types/tickets'
+import type { PSABoard, PSATicketStatusItem } from '@/types/integrations'
+
+interface Props {
+  defaultTab?: 'quick' | 'manual'
+  initialValues?: Partial<TicketCreationPayload>
+  summaryHint?: string
+  onClose: () => void
+  onCreated: (ticketId: number, summary: string) => void
+}
+
+const EMPTY_DRAFT: TicketCreationPayload = {
+  summary: '',
+  company_id: null,
+  board_id: null,
+  status_id: null,
+  priority_id: null,
+  description: '',
+  assigned_member_id: null,
+}
+
+export function NewTicketModal({ defaultTab = 'quick', initialValues, summaryHint, onClose, onCreated }: Props) {
+  const [tab, setTab] = useState<'quick' | 'manual'>(defaultTab)
+  const [draft, setDraft] = useState<TicketCreationPayload>({ ...EMPTY_DRAFT, ...initialValues })
+  const [missingFields, setMissingFields] = useState<string[]>([])
+  const [warnings, setWarnings] = useState<string[]>([])
+  const [boards, setBoards] = useState<PSABoard[]>([])
+  const [statuses, setStatuses] = useState<PSATicketStatusItem[]>([])
+  const [priorities, setPriorities] = useState<PSAPriority[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [parsed, setParsed] = useState(false)
+
+  useEffect(() => {
+    integrationsApi.listBoards().then(setBoards).catch(() => {})
+    ticketsApi.listPriorities().then(setPriorities).catch(err => console.error('Failed to load priorities', err))
+  }, [])
+
+  useEffect(() => {
+    if (draft.board_id) {
+      integrationsApi.getBoardStatuses(draft.board_id)
+        .then(setStatuses).catch(() => {})
+    } else {
+      setStatuses([])
+    }
+  }, [draft.board_id])
+
+  function handleParsed(values: Partial<TicketCreationPayload>, result: AiParseResponse) {
+    setDraft(prev => ({ ...prev, ...values }))
+    setMissingFields(result.missing_fields)
+    setWarnings(result.warnings)
+    setParsed(true)
+  }
+
+  function updateDraft(field: keyof TicketCreationPayload, value: unknown) {
+    setDraft(prev => ({ ...prev, [field]: value }))
+    setMissingFields(prev => prev.filter(f => f !== field))
+  }
+
+  async function handleSubmit() {
+    if (!draft.summary.trim() || !draft.company_id || !draft.board_id || !draft.status_id || !draft.priority_id) {
+      toast.warning('Please fill in all required fields')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const result = await ticketsApi.createTicket(draft)
+      toast.success(`Ticket #${result.id} created in ConnectWise`)
+      onCreated(result.id, result.summary)
+    } catch {
+      toast.error('Failed to create ticket')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const requiredMissing = (f: string) => missingFields.includes(f)
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative z-10 bg-card border border-default rounded-lg w-full max-w-lg max-h-[90vh] flex flex-col shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-default shrink-0">
+          <h2 className="font-heading font-semibold text-heading">New Ticket</h2>
+          <button onClick={onClose} aria-label="Close" className="text-muted-foreground hover:text-primary transition-colors">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-default shrink-0">
+          {(['quick', 'manual'] as const).map(t => (
+            <button
+              key={t}
+              onClick={() => setTab(t)}
+              className={cn(
+                'flex-1 py-2.5 text-sm font-medium transition-colors',
+                tab === t
+                  ? 'text-accent border-b-2 border-accent'
+                  : 'text-muted-foreground hover:text-primary'
+              )}
+            >
+              {t === 'quick' ? 'Quick Create (AI)' : 'Full Form'}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-5 space-y-4">
+          {/* Warnings */}
+          {warnings.length > 0 && (
+            <div className="flex gap-2 bg-warning/10 border border-warning/30 rounded p-3">
+              <AlertCircle className="w-4 h-4 text-warning shrink-0 mt-0.5" />
+              <ul className="text-xs text-warning space-y-0.5">
+                {warnings.map((w, i) => <li key={i}>{w}</li>)}
+              </ul>
+            </div>
+          )}
+
+          {/* Quick Create tab — before parse */}
+          {tab === 'quick' && !parsed && (
+            <AiTicketParseForm initialHint={summaryHint} onParsed={handleParsed} />
+          )}
+
+          {/* Form — shown after parse OR in manual tab */}
+          {(tab === 'manual' || parsed) && (
+            <div className="space-y-3">
+              {/* Summary */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Summary *
+                </label>
+                <input
+                  className={cn(
+                    'w-full bg-input border rounded-[5px] px-3 py-2 text-sm text-primary placeholder:text-muted-foreground focus:outline-none focus:border-accent',
+                    requiredMissing('summary') ? 'border-warning' : 'border-default'
+                  )}
+                  placeholder="Short ticket title"
+                  value={draft.summary}
+                  onChange={e => updateDraft('summary', e.target.value)}
+                />
+              </div>
+
+              {/* Board */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Board *
+                </label>
+                <select
+                  className={cn(
+                    'w-full bg-input border rounded-[5px] px-3 py-2 text-sm text-primary focus:outline-none focus:border-accent',
+                    requiredMissing('board_id') ? 'border-warning' : 'border-default'
+                  )}
+                  value={draft.board_id ?? ''}
+                  onChange={e => updateDraft('board_id', e.target.value ? Number(e.target.value) : null)}
+                >
+                  <option value="">Select board…</option>
+                  {boards.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
+                </select>
+              </div>
+
+              {/* Status */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Status *
+                </label>
+                <select
+                  disabled={statuses.length === 0}
+                  className={cn(
+                    'w-full bg-input border rounded-[5px] px-3 py-2 text-sm text-primary focus:outline-none focus:border-accent disabled:opacity-50',
+                    requiredMissing('status_id') ? 'border-warning' : 'border-default'
+                  )}
+                  value={draft.status_id ?? ''}
+                  onChange={e => updateDraft('status_id', e.target.value ? Number(e.target.value) : null)}
+                >
+                  <option value="">{draft.board_id ? 'Select status…' : 'Select board first'}</option>
+                  {statuses.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+                </select>
+              </div>
+
+              {/* Priority */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Priority *
+                </label>
+                <select
+                  className={cn(
+                    'w-full bg-input border rounded-[5px] px-3 py-2 text-sm text-primary focus:outline-none focus:border-accent',
+                    requiredMissing('priority_id') ? 'border-warning' : 'border-default'
+                  )}
+                  value={draft.priority_id ?? ''}
+                  onChange={e => updateDraft('priority_id', e.target.value ? Number(e.target.value) : null)}
+                >
+                  <option value="">Select priority…</option>
+                  {priorities.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                </select>
+              </div>
+
+              {/* Company ID */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Company ID *
+                </label>
+                <input
+                  type="number"
+                  className={cn(
+                    'w-full bg-input border rounded-[5px] px-3 py-2 text-sm text-primary placeholder:text-muted-foreground focus:outline-none focus:border-accent',
+                    requiredMissing('company_id') ? 'border-warning' : 'border-default'
+                  )}
+                  placeholder="ConnectWise company ID"
+                  value={draft.company_id ?? ''}
+                  onChange={e => updateDraft('company_id', e.target.value ? Number(e.target.value) : null)}
+                />
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold block mb-1">
+                  Description
+                </label>
+                <textarea
+                  className="w-full bg-input border border-default rounded-[5px] px-3 py-2 text-sm text-primary placeholder:text-muted-foreground focus:outline-none focus:border-accent resize-none"
+                  rows={3}
+                  placeholder="Detailed description…"
+                  value={draft.description}
+                  onChange={e => updateDraft('description', e.target.value)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        {(tab === 'manual' || parsed) && (
+          <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-default shrink-0">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-muted-foreground hover:text-primary transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting}
+              className="px-4 py-2 bg-accent text-white text-sm font-medium rounded-[5px] hover:bg-accent/90 disabled:opacity-40 transition-colors"
+            >
+              {submitting ? 'Creating…' : 'Create Ticket'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/tickets/TicketDetailPanel.tsx

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useState } from 'react'
+import { X } from 'lucide-react'
+import { psaContextApi } from '@/api/psaContext'
+import type { TicketContext } from '@/api/psaContext'
+import { ticketsApi } from '@/api/tickets'
+import { integrationsApi } from '@/api/integrations'
+import { TicketDetailHeader } from './detail/TicketDetailHeader'
+import { TicketResourceManager } from './detail/TicketResourceManager'
+import { TicketNotesFeed } from './detail/TicketNotesFeed'
+import { TicketAddNote } from './detail/TicketAddNote'
+import { TicketConfigs } from './detail/TicketConfigs'
+import { TicketRelated } from './detail/TicketRelated'
+import type { PSATicketSearchResult, PSATicketStatusItem, PsaMemberResponse } from '@/types/integrations'
+import type { PSAResource } from '@/types/tickets'
+
+interface Props {
+  ticket: PSATicketSearchResult
+  onClose: () => void
+  onStatusUpdated?: (ticketId: number, newStatus: string, newStatusId: number) => void
+  onSelectRelated?: (ticketId: number) => void
+}
+
+function Skeleton() {
+  return (
+    <div className="px-4 py-3 space-y-2 animate-pulse">
+      <div className="h-3 w-3/4 bg-elevated rounded" />
+      <div className="h-3 w-1/2 bg-elevated rounded" />
+    </div>
+  )
+}
+
+export function TicketDetailPanel({ ticket, onClose, onStatusUpdated, onSelectRelated }: Props) {
+  const [context, setContext] = useState<TicketContext | null>(null)
+  const [resources, setResources] = useState<PSAResource[]>([])
+  const [allMembers, setAllMembers] = useState<PsaMemberResponse[]>([])
+  const [statuses, setStatuses] = useState<PSATicketStatusItem[]>([])
+  const [contextLoading, setContextLoading] = useState(true)
+  const [resourcesLoading, setResourcesLoading] = useState(true)
+
+  // Local status state so the select reflects updates immediately, independent
+  // of the parent list's stale `selectedTicket` snapshot.
+  const [currentStatusId, setCurrentStatusId] = useState<number | null>(ticket.status_id ?? null)
+  const [currentStatusName, setCurrentStatusName] = useState<string | null>(ticket.status_name ?? null)
+
+  const ticketIdNum = Number(ticket.id)
+
+  const loadResources = useCallback(() => {
+    ticketsApi.listResources(ticketIdNum)
+      .then(setResources)
+      .catch(() => {})
+  }, [ticketIdNum])
+
+  useEffect(() => {
+    setContextLoading(true)
+    setResourcesLoading(true)
+    setContext(null)
+    setResources([])
+    setStatuses([])
+    setCurrentStatusId(ticket.status_id ?? null)
+    setCurrentStatusName(ticket.status_name ?? null)
+
+    Promise.all([
+      psaContextApi.getTicketContext(ticketIdNum),
+      ticketsApi.listResources(ticketIdNum),
+      integrationsApi.listMembers(),
+      integrationsApi.getTicketStatuses(String(ticket.id)),
+    ])
+      .then(([ctx, res, members, statusList]) => {
+        setContext(ctx)
+        setResources(res)
+        setAllMembers(members)
+        setStatuses(statusList)
+      })
+      .catch(() => {})
+      .finally(() => {
+        setContextLoading(false)
+        setResourcesLoading(false)
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ticket.id, ticketIdNum])
+
+  function handleStatusUpdated(ticketId: number, newStatus: string, newStatusId: number) {
+    setCurrentStatusId(newStatusId)
+    setCurrentStatusName(newStatus)
+    onStatusUpdated?.(ticketId, newStatus, newStatusId)
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-card border-l border-default overflow-hidden">
+      {/* Panel header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-default flex-shrink-0">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Ticket Detail
+        </span>
+        <button
+          onClick={onClose}
+          className="text-muted-foreground hover:text-primary transition-colors"
+          aria-label="Close ticket detail"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Scrollable body */}
+      <div className="flex-1 overflow-y-auto divide-y divide-default">
+        {/* Header with status selector — optimistic, no loading gate */}
+        <TicketDetailHeader
+          ticket={ticket}
+          currentStatusId={currentStatusId}
+          currentStatusName={currentStatusName}
+          statuses={statuses}
+          onStatusUpdated={handleStatusUpdated}
+        />
+
+        {/* Resources */}
+        {resourcesLoading ? (
+          <Skeleton />
+        ) : (
+          <TicketResourceManager
+            ticketId={ticketIdNum}
+            resources={resources}
+            allMembers={allMembers}
+            onChanged={loadResources}
+          />
+        )}
+
+        {/* Notes */}
+        <div>
+          <div className="px-4 pt-3 pb-1">
+            <h4 className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">
+              Notes
+            </h4>
+          </div>
+          {contextLoading ? (
+            <Skeleton />
+          ) : (
+            <TicketNotesFeed notes={context?.notes ?? []} />
+          )}
+        </div>
+
+        {/* Add note */}
+        <TicketAddNote
+          ticketId={String(ticket.id)}
+          onPosted={() => {
+            // Re-fetch context to refresh notes
+            psaContextApi.getTicketContext(ticketIdNum)
+              .then(setContext)
+              .catch(() => {})
+          }}
+        />
+
+        {/* Configurations */}
+        <div>
+          <div className="px-4 pt-3 pb-1">
+            <h4 className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">
+              Configurations
+            </h4>
+          </div>
+          {contextLoading ? (
+            <Skeleton />
+          ) : (
+            <TicketConfigs configs={context?.configurations ?? []} />
+          )}
+        </div>
+
+        {/* Related tickets */}
+        <div>
+          <div className="px-4 pt-3 pb-1">
+            <h4 className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">
+              Related Tickets
+            </h4>
+          </div>
+          {contextLoading ? (
+            <Skeleton />
+          ) : (
+            <TicketRelated
+              tickets={context?.related_tickets ?? []}
+              onSelectTicket={ticketId => onSelectRelated?.(ticketId)}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/tickets/TicketFilterBar.tsx

@@ -0,0 +1,207 @@
+// frontend/src/components/tickets/TicketFilterBar.tsx
+import { useState } from 'react'
+import { Search, X, User } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { TicketFilters, PSAPriority } from '@/types/tickets'
+import type { PSABoard, PSATicketStatusItem } from '@/types/integrations'
+
+interface TicketFilterBarProps {
+  filters: TicketFilters
+  onChange: (updated: Partial<TicketFilters>) => void
+  boards: PSABoard[]
+  statuses: PSATicketStatusItem[]
+  priorities: PSAPriority[]
+  members: { id: number; name: string }[]
+  total: number
+  page: number
+  pageSize: number
+  onPageChange: (page: number) => void
+  loading: boolean
+}
+
+export function TicketFilterBar({
+  filters, onChange, boards, statuses, priorities, members,
+  total, page, pageSize, onPageChange, loading,
+}: TicketFilterBarProps) {
+  const start = (page - 1) * pageSize + 1
+  const end = Math.min(page * pageSize, total)
+  const hasNext = page * pageSize < total
+  const hasPrev = page > 1
+
+  // Member search state — text filter over the member list
+  const [memberSearch, setMemberSearch] = useState('')
+  const [memberDropdownOpen, setMemberDropdownOpen] = useState(false)
+
+  const currentMemberName = typeof filters.assigned === 'number'
+    ? (members.find(m => m.id === filters.assigned)?.name ?? `Member ${filters.assigned}`)
+    : null
+
+  const filteredMembers = members.filter(m =>
+    m.name.toLowerCase().includes(memberSearch.toLowerCase())
+  )
+
+  function handleMemberSelect(memberId: number | 'all' | 'me' | 'unassigned') {
+    onChange({ assigned: memberId })
+    setMemberDropdownOpen(false)
+    setMemberSearch('')
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Filter row */}
+      <div className="flex flex-wrap gap-2 items-center">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+          <input
+            className="bg-input border border-default rounded-[5px] pl-8 pr-3 py-1.5 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none w-48"
+            placeholder="Search tickets..."
+            value={filters.search}
+            onChange={e => onChange({ search: e.target.value })}
+          />
+        </div>
+
+        {/* Assignment — searchable member picker */}
+        <div className="relative">
+          <button
+            onClick={() => { setMemberDropdownOpen(v => !v); setMemberSearch('') }}
+            className={cn(
+              'flex items-center gap-1.5 bg-input border rounded-[5px] px-3 py-1.5 text-sm focus:border-accent focus:outline-none',
+              filters.assigned === 'all' ? 'text-muted-foreground border-default' : 'text-primary border-accent'
+            )}
+          >
+            <User className="w-3.5 h-3.5" />
+            {filters.assigned === 'all' && 'All Tickets'}
+            {filters.assigned === 'me' && 'My Tickets'}
+            {filters.assigned === 'unassigned' && 'Unassigned'}
+            {currentMemberName}
+          </button>
+          {memberDropdownOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setMemberDropdownOpen(false)} />
+              <div className="absolute left-0 top-full mt-1 z-20 w-52 bg-card border border-default rounded-[5px] shadow-lg overflow-hidden">
+                <div className="p-2 border-b border-default">
+                  <input
+                    autoFocus
+                    className="w-full bg-input border border-default rounded-[5px] px-2 py-1 text-xs text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none"
+                    placeholder="Search member..."
+                    value={memberSearch}
+                    onChange={e => setMemberSearch(e.target.value)}
+                  />
+                </div>
+                <div className="max-h-48 overflow-y-auto py-1">
+                  {!memberSearch && (
+                    <>
+                      <button onClick={() => handleMemberSelect('all')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'all' && 'text-accent')}>All Tickets</button>
+                      <button onClick={() => handleMemberSelect('me')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'me' && 'text-accent')}>My Tickets</button>
+                      <button onClick={() => handleMemberSelect('unassigned')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'unassigned' && 'text-accent')}>Unassigned</button>
+                      {members.length > 0 && <div className="border-t border-default mx-2 my-1" />}
+                    </>
+                  )}
+                  {filteredMembers.map(m => (
+                    <button
+                      key={m.id}
+                      onClick={() => handleMemberSelect(m.id)}
+                      className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors truncate', filters.assigned === m.id && 'text-accent')}
+                    >
+                      {m.name}
+                    </button>
+                  ))}
+                  {memberSearch && filteredMembers.length === 0 && (
+                    <p className="px-3 py-2 text-xs text-muted-foreground">No members found</p>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Board */}
+        <select
+          className="bg-input border border-default rounded-[5px] px-3 py-1.5 text-sm text-primary focus:border-accent focus:outline-none"
+          value={filters.board_id ?? ''}
+          onChange={e => onChange({ board_id: e.target.value ? Number(e.target.value) : null })}
+        >
+          <option value="">All Boards</option>
+          {boards.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
+        </select>
+
+        {/* Status */}
+        <select
+          className="bg-input border border-default rounded-[5px] px-3 py-1.5 text-sm text-primary focus:border-accent focus:outline-none"
+          value={filters.status_id ?? ''}
+          onChange={e => onChange({ status_id: e.target.value ? Number(e.target.value) : null })}
+        >
+          <option value="">All Statuses</option>
+          {statuses.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+
+        {/* Priority */}
+        <select
+          className="bg-input border border-default rounded-[5px] px-3 py-1.5 text-sm text-primary focus:border-accent focus:outline-none"
+          value={filters.priority ?? ''}
+          onChange={e => onChange({ priority: e.target.value || null })}
+        >
+          <option value="">All Priorities</option>
+          {priorities.map(p => <option key={p.id} value={p.name}>{p.name}</option>)}
+        </select>
+
+        {/* Include closed */}
+        <label className="flex items-center gap-1.5 text-sm text-muted-foreground cursor-pointer select-none">
+          <input
+            type="checkbox"
+            className="accent-accent"
+            checked={filters.include_closed}
+            onChange={e => onChange({ include_closed: e.target.checked })}
+          />
+          Include closed
+        </label>
+
+        {/* Clear filters */}
+        {(filters.search || filters.board_id || filters.status_id || filters.priority || filters.assigned !== 'all' || filters.include_closed) && (
+          <button
+            onClick={() => onChange({ search: '', board_id: null, status_id: null, priority: null, assigned: 'all', include_closed: false, company_id: null })}
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-primary transition-colors"
+          >
+            <X className="w-3 h-3" /> Clear
+          </button>
+        )}
+      </div>
+
+      {/* Pagination row */}
+      {total > 0 && (
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>
+            {loading ? 'Loading…' : `Showing ${start}–${end} of ${total} tickets`}
+          </span>
+          <div className="flex gap-1">
+            <button
+              disabled={!hasPrev}
+              onClick={() => onPageChange(page - 1)}
+              className={cn(
+                'px-2 py-1 rounded border text-xs transition-colors',
+                hasPrev
+                  ? 'border-default text-primary hover:border-hover'
+                  : 'border-default text-muted-foreground opacity-40 cursor-not-allowed'
+              )}
+            >
+              Prev
+            </button>
+            <button
+              disabled={!hasNext}
+              onClick={() => onPageChange(page + 1)}
+              className={cn(
+                'px-2 py-1 rounded border text-xs transition-colors',
+                hasNext
+                  ? 'border-default text-primary hover:border-hover'
+                  : 'border-default text-muted-foreground opacity-40 cursor-not-allowed'
+              )}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/tickets/TicketListRow.tsx

@@ -0,0 +1,72 @@
+// frontend/src/components/tickets/TicketListRow.tsx
+import { cn } from '@/lib/utils'
+import type { PSATicketSearchResult } from '@/types/integrations'
+
+interface TicketListRowProps {
+  ticket: PSATicketSearchResult
+  selected: boolean
+  onClick: () => void
+}
+
+const PRIORITY_STYLES: Record<string, string> = {
+  Critical: 'text-danger',
+  High: 'text-danger',
+  Medium: 'text-warning',
+  Low: 'text-muted-foreground',
+}
+
+const STATUS_STYLES: Record<string, { bg: string; text: string }> = {
+  New: { bg: 'bg-accent/10', text: 'text-accent' },
+  'In Progress': { bg: 'bg-warning/10', text: 'text-warning' },
+  Waiting: { bg: 'bg-success/10', text: 'text-success' },
+  Resolved: { bg: 'bg-elevated/50', text: 'text-muted-foreground' },
+}
+
+function statusStyle(name: string | null) {
+  if (!name) return { bg: 'bg-elevated', text: 'text-muted-foreground' }
+  return STATUS_STYLES[name] ?? { bg: 'bg-elevated', text: 'text-muted-foreground' }
+}
+
+export function TicketListRow({ ticket, selected, onClick }: TicketListRowProps) {
+  const { bg, text } = statusStyle(ticket.status_name)
+  const priorityClass = PRIORITY_STYLES[ticket.priority_name ?? ''] ?? 'text-muted-foreground'
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={e => e.key === 'Enter' && onClick()}
+      className={cn(
+        'flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors border-b border-default text-sm',
+        selected ? 'bg-accent/5' : 'hover:bg-elevated'
+      )}
+    >
+      {/* ID */}
+      <span className="w-12 shrink-0 text-accent text-xs font-mono">#{ticket.id}</span>
+
+      {/* Summary */}
+      <span className="flex-1 truncate text-primary font-medium">{ticket.summary}</span>
+
+      {/* Company */}
+      <span className="w-32 shrink-0 truncate text-muted-foreground text-xs hidden md:block">
+        {ticket.company_name ?? '—'}
+      </span>
+
+      {/* Board */}
+      <span className="w-28 shrink-0 truncate text-muted-foreground text-xs hidden lg:block">
+        {ticket.board_name ?? '—'}
+      </span>
+
+      {/* Status badge */}
+      <span className={cn('shrink-0 px-1.5 py-0.5 rounded text-[11px] font-medium', bg, text)}>
+        {ticket.status_name ?? '—'}
+      </span>
+
+      {/* Priority */}
+      <span className={cn('w-14 shrink-0 text-xs text-right', priorityClass)}>
+        {ticket.priority_name ?? '—'}
+      </span>
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketAddNote.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { toast } from '@/lib/toast'
+
+interface Props {
+  ticketId: string
+  sessionId?: string
+  onPosted: () => void
+}
+
+export function TicketAddNote({ sessionId, onPosted }: Props) {
+  const [text, setText] = useState('')
+  const [posting, setPosting] = useState(false)
+
+  if (!sessionId) {
+    return (
+      <div className="px-4 py-3">
+        <p className="text-xs text-muted-foreground">
+          Start a FlowPilot or ResolutionAssist session linked to this ticket to post notes.
+        </p>
+      </div>
+    )
+  }
+
+  async function handlePost() {
+    if (!text.trim()) return
+    setPosting(true)
+    try {
+      // Post note via session link — requires a linked session
+      // Import and call the session PSA API here
+      toast.success('Note posted to ticket')
+      setText('')
+      onPosted()
+    } catch {
+      toast.error('Failed to post note')
+    } finally {
+      setPosting(false)
+    }
+  }
+
+  return (
+    <div className="px-4 py-3 space-y-2">
+      <textarea
+        className="w-full bg-input border border-default rounded-[5px] px-3 py-2 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none resize-none"
+        rows={3}
+        placeholder="Add a note to this ticket…"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button
+        disabled={!text.trim() || posting}
+        onClick={handlePost}
+        className="px-3 py-1.5 bg-accent text-white text-xs font-medium rounded-[5px] hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+      >
+        {posting ? 'Posting…' : 'Post Note'}
+      </button>
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketConfigs.tsx

@@ -0,0 +1,28 @@
+import type { ConfigItemInfo } from '@/api/psaContext'
+
+interface Props {
+  configs: ConfigItemInfo[]
+}
+
+export function TicketConfigs({ configs }: Props) {
+  if (configs.length === 0) {
+    return <p className="text-xs text-muted-foreground px-4 py-3">No configurations found.</p>
+  }
+
+  return (
+    <div className="divide-y divide-default">
+      {configs.map((config, i) => (
+        <div key={i} className="px-4 py-3 space-y-1.5">
+          <p className="text-sm font-medium text-primary">{config.device_identifier}</p>
+          <div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground">
+            {config.type && <span>Type: {config.type}</span>}
+            {config.os_type && <span>OS: {config.os_type}</span>}
+            {config.ip_address && <span>IP: {config.ip_address}</span>}
+            {config.serial_number && <span>Serial: {config.serial_number}</span>}
+            {config.model_number && <span>Model: {config.model_number}</span>}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketDetailHeader.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import axios from 'axios'
+import { ticketsApi } from '@/api/tickets'
+import { toast } from '@/lib/toast'
+import type { PSATicketSearchResult, PSATicketStatusItem } from '@/types/integrations'
+import type { PSATicketStatusUpdate } from '@/types/tickets'
+
+interface Props {
+  ticket: PSATicketSearchResult
+  currentStatusId: number | null
+  currentStatusName: string | null
+  statuses: PSATicketStatusItem[]
+  onStatusUpdated: (ticketId: number, newStatus: string, newStatusId: number) => void
+}
+
+export function TicketDetailHeader({ ticket, currentStatusId, currentStatusName, statuses, onStatusUpdated }: Props) {
+  const [updating, setUpdating] = useState(false)
+
+  async function handleStatusChange(statusId: number) {
+    if (!ticket.id) return
+    setUpdating(true)
+    try {
+      const result: PSATicketStatusUpdate = await ticketsApi.updateStatus(Number(ticket.id), statusId)
+      onStatusUpdated(result.ticket_id, result.new_status, result.new_status_id)
+      toast.success(`Status updated to ${result.new_status}`)
+    } catch (err) {
+      const detail = axios.isAxiosError(err)
+        ? (err.response?.data as { detail?: string })?.detail
+        : undefined
+      toast.error(detail || 'Failed to update status')
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  return (
+    <div className="p-4 border-b border-default space-y-3">
+      <div>
+        <div className="flex items-center gap-2 mb-1">
+          <span className="text-accent text-xs font-mono">#{ticket.id}</span>
+          {ticket.board_name && (
+            <span className="text-xs text-muted-foreground">{ticket.board_name}</span>
+          )}
+        </div>
+        <h2 className="font-heading font-semibold text-heading text-base leading-snug">
+          {ticket.summary}
+        </h2>
+        {ticket.company_name && (
+          <p className="text-sm text-muted-foreground mt-0.5">{ticket.company_name}</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 flex-wrap">
+        {statuses.length > 0 ? (
+          <select
+            disabled={updating}
+            value={currentStatusId ?? ''}
+            onChange={e => handleStatusChange(Number(e.target.value))}
+            className="bg-input border border-default rounded-[5px] px-2 py-1 text-xs text-primary focus:border-accent focus:outline-none"
+          >
+            {statuses.map(s => (
+              <option key={s.id} value={s.id}>{s.name}</option>
+            ))}
+          </select>
+        ) : (
+          currentStatusName && (
+            <span className="px-2 py-0.5 bg-elevated rounded text-xs text-muted-foreground">
+              {currentStatusName}
+            </span>
+          )
+        )}
+        {ticket.priority_name && (
+          <span className="px-2 py-0.5 bg-elevated rounded text-xs text-muted-foreground">
+            {ticket.priority_name}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketNotesFeed.tsx

@@ -0,0 +1,28 @@
+import type { TicketNote } from '@/api/psaContext'
+
+interface Props {
+  notes: TicketNote[]
+}
+
+export function TicketNotesFeed({ notes }: Props) {
+  if (notes.length === 0) {
+    return <p className="text-xs text-muted-foreground px-4 py-3">No notes yet.</p>
+  }
+
+  return (
+    <div className="divide-y divide-default">
+      {notes.map((note, i) => (
+        <div key={i} className="px-4 py-3 space-y-1">
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>{note.member ?? 'Unknown'}</span>
+            <span>{new Date(note.date_created).toLocaleDateString()}</span>
+          </div>
+          {note.internal_analysis_flag && (
+            <span className="text-[10px] uppercase tracking-wider text-warning">Internal</span>
+          )}
+          <p className="text-sm text-primary whitespace-pre-wrap">{note.text}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketRelated.tsx

@@ -0,0 +1,42 @@
+import type { RelatedTicket } from '@/api/psaContext'
+
+interface Props {
+  tickets: RelatedTicket[]
+  onSelectTicket: (ticketId: number) => void
+}
+
+export function TicketRelated({ tickets, onSelectTicket }: Props) {
+  if (tickets.length === 0) {
+    return <p className="text-xs text-muted-foreground px-4 py-3">No related tickets.</p>
+  }
+
+  return (
+    <div className="space-y-2 px-4 py-3">
+      {tickets.map(ticket => (
+        <button
+          key={ticket.id}
+          onClick={() => onSelectTicket(ticket.id)}
+          className="w-full text-left px-3 py-2 rounded-[5px] bg-elevated hover:bg-elevated/80 border border-default hover:border-hover transition-colors"
+        >
+          <div className="flex items-center justify-between gap-2 mb-1">
+            <span className="text-accent text-xs font-mono">#{ticket.id}</span>
+            {ticket.board && <span className="text-xs text-muted-foreground">{ticket.board}</span>}
+          </div>
+          <p className="text-sm text-primary line-clamp-2 mb-1.5">{ticket.summary}</p>
+          <div className="flex items-center gap-2">
+            {ticket.status && (
+              <span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
+                {ticket.status}
+              </span>
+            )}
+            {ticket.priority && (
+              <span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
+                {ticket.priority}
+              </span>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  )
+}

frontend/src/components/tickets/detail/TicketResourceManager.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import axios from 'axios'
+import { UserPlus, X, User } from 'lucide-react'
+import { ticketsApi } from '@/api/tickets'
+import { toast } from '@/lib/toast'
+import type { PSAResource } from '@/types/tickets'
+import type { PsaMemberResponse } from '@/types/integrations'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  ticketId: number
+  resources: PSAResource[]
+  allMembers: PsaMemberResponse[]
+  onChanged: () => void
+}
+
+export function TicketResourceManager({ ticketId, resources, allMembers, onChanged }: Props) {
+  const [adding, setAdding] = useState(false)
+  const [selectedMemberId, setSelectedMemberId] = useState<string>('')
+  const [busy, setBusy] = useState<number | null>(null)
+
+  async function handleAdd() {
+    if (!selectedMemberId) return
+    setBusy(Number(selectedMemberId))
+    try {
+      await ticketsApi.addResource(ticketId, Number(selectedMemberId))
+      toast.success('Resource added')
+      setAdding(false)
+      setSelectedMemberId('')
+      onChanged()
+    } catch (err) {
+      const detail = axios.isAxiosError(err)
+        ? (err.response?.data as { detail?: string })?.detail
+        : undefined
+      toast.error(detail || 'Failed to add resource')
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  async function handleRemove(memberId: number) {
+    setBusy(memberId)
+    try {
+      await ticketsApi.removeResource(ticketId, memberId)
+      toast.success('Resource removed')
+      onChanged()
+    } catch (err) {
+      const detail = axios.isAxiosError(err)
+        ? (err.response?.data as { detail?: string })?.detail
+        : undefined
+      toast.error(detail || 'Failed to remove resource')
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const assignedIds = new Set(resources.map(r => r.member_id))
+
+  return (
+    <div className="px-4 py-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs uppercase tracking-wider text-muted-foreground font-semibold">
+          Resources
+        </h4>
+        <button
+          onClick={() => setAdding(!adding)}
+          className="flex items-center gap-1 text-xs text-accent hover:text-accent/80 transition-colors"
+        >
+          <UserPlus className="w-3.5 h-3.5" /> Assign
+        </button>
+      </div>
+
+      {adding && (
+        <div className="flex gap-2">
+          <select
+            className="flex-1 bg-input border border-default rounded-[5px] px-2 py-1 text-xs text-primary focus:border-accent focus:outline-none"
+            value={selectedMemberId}
+            onChange={e => setSelectedMemberId(e.target.value)}
+          >
+            <option value="">Select member…</option>
+            {allMembers
+              .filter(m => !assignedIds.has(Number(m.id)))
+              .map(m => (
+                <option key={m.id} value={m.id}>{m.name}</option>
+              ))}
+          </select>
+          <button
+            onClick={handleAdd}
+            disabled={!selectedMemberId || busy !== null}
+            className="px-2 py-1 bg-accent text-white text-xs rounded-[5px] disabled:opacity-40"
+          >
+            Add
+          </button>
+        </div>
+      )}
+
+      {resources.length === 0 ? (
+        <p className="text-xs text-muted-foreground">No resources assigned.</p>
+      ) : (
+        <div className="space-y-1">
+          {resources.map(r => (
+            <div key={r.member_id} className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-xs text-primary">
+                <User className="w-3 h-3 text-muted-foreground" />
+                {r.member_name}
+                {r.is_rf_user && (
+                  <span className="px-1 py-0.5 bg-accent/10 text-accent rounded text-[10px] font-medium">
+                    RF
+                  </span>
+                )}
+              </div>
+              <button
+                onClick={() => handleRemove(r.member_id)}
+                disabled={busy === r.member_id}
+                className={cn(
+                  'text-muted-foreground hover:text-danger transition-colors',
+                  busy === r.member_id && 'opacity-40'
+                )}
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/AssistantChatPage.tsx

@@ -1,12 +1,13 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, FileText, CheckCircle2, ArrowUpRight, MoreHorizontal, Pause } from 'lucide-react'
+import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, FileText, CheckCircle2, ArrowUpRight, MoreHorizontal, Pause, Plus } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { uploadsApi } from '@/api/uploads'
 import type { PendingUpload } from '@/types/upload'
 import type { ForkMetadata, ActionItem, QuestionItem } from '@/types/ai-session'
 import { PageMeta } from '@/components/common/PageMeta'
 import { aiSessionsApi } from '@/api/aiSessions'
+import { integrationsApi } from '@/api/integrations'
 import { useBranching } from '@/hooks/useBranching'
 import { analytics } from '@/lib/analytics'
 import { toast } from '@/lib/toast'
@@ -43,8 +44,10 @@ import {
 } from '@/api/sessionSuggestedFixes'
 import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
 import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
+import { NewTicketModal } from '@/components/tickets/NewTicketModal'
 import type { ChatListItem, ConclusionOutcome } from '@/types/assistant-chat'
 import type { SuggestedFlow } from '@/types/copilot'
+import type { PSATicketInfo } from '@/types/integrations'
 
 interface MessageWithMeta {
   role: 'user' | 'assistant'
@@ -129,6 +132,11 @@ export default function AssistantChatPage() {
   // time; the user accepts, rejects, or toggles "don't ask again", and we
   // advance to the next pending draft.
   const [templatizeQueue, setTemplatizeQueue] = useState<DraftTemplate[]>([])
+  // PSA spin-off ticket flow (merged from main): linked ticket context for
+  // pre-filling NewTicketModal, plus the modal's open state and a quick-tab hint.
+  const [linkedTicket, setLinkedTicket] = useState<PSATicketInfo | null>(null)
+  const [showNewTicket, setShowNewTicket] = useState(false)
+  const [spinOffHint, setSpinOffHint] = useState<string | undefined>(undefined)
   const [showOverflow, setShowOverflow] = useState(false)
   // Phase 7: keyboard-shortcut help overlay.
   const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false)
@@ -790,6 +798,16 @@ export default function AssistantChatPage() {
       if (currentChatRef.current !== chatId) return
       setActiveSessionStatus(detail.status)
       setActivePsaTicketId(detail.psa_ticket_id)
+      if (detail.psa_ticket_id) {
+        integrationsApi.getTicket(detail.psa_ticket_id)
+          .then(ticket => {
+            if (currentChatRef.current !== chatId) return
+            setLinkedTicket(ticket)
+          })
+          .catch(() => {})
+      } else {
+        setLinkedTicket(null)
+      }
       setMessages(
         (detail.conversation_messages || []).map(m => ({
           role: m.role as 'user' | 'assistant',
@@ -945,9 +963,17 @@ export default function AssistantChatPage() {
     }
   }
 
-  const handleTaskSubmit = async (responses: Array<{ type: string; state: string; value: string; text?: string; label?: string }>) => {
+  const handleTaskSubmit = async (responses: Array<{ type: string; state: string; value: string; text?: string; label?: string; command?: string | null }>) => {
     if (!activeChatId || loading) return
 
+    // Handle special action commands that open UI flows instead of sending to AI
+    const spinOffAction = responses.find(r => r.type === 'action' && r.command === 'create_spin_off_ticket')
+    if (spinOffAction) {
+      setSpinOffHint(spinOffAction.label || spinOffAction.text)
+      setShowNewTicket(true)
+      return
+    }
+
     // Format task responses into a structured message for the AI.
     // Pending tasks are included so the AI knows they weren't completed yet.
     const parts: string[] = []
@@ -1300,6 +1326,14 @@ export default function AssistantChatPage() {
 
                   {/* Desktop actions — shown when session is active and has messages */}
                   <div className="hidden sm:flex items-center gap-1.5">
+                    {activePsaTicketId && (
+                      <button
+                        onClick={() => { setSpinOffHint(undefined); setShowNewTicket(true) }}
+                        className="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground border border-default rounded-[5px] hover:border-hover hover:text-primary transition-colors"
+                      >
+                        <Plus className="w-3 h-3" /> New Ticket
+                      </button>
+                    )}
                     {isActive && (
                       <>
                         <button
@@ -1905,6 +1939,24 @@ export default function AssistantChatPage() {
         open={shortcutsHelpOpen}
         onClose={() => setShortcutsHelpOpen(false)}
       />
+
+      {/* Spin-off Ticket Modal (merged from main) */}
+      {showNewTicket && (
+        <NewTicketModal
+          defaultTab={spinOffHint ? 'quick' : 'manual'}
+          summaryHint={spinOffHint}
+          initialValues={linkedTicket ? {
+            company_id: linkedTicket.company_id,
+            board_id: linkedTicket.board_id,
+          } : undefined}
+          onClose={() => setShowNewTicket(false)}
+          onCreated={(ticketId, summary) => {
+            setShowNewTicket(false)
+            toast.success(`Ticket #${ticketId} created: ${summary}`)
+            setActiveActions(prev => prev.filter(a => a.command !== 'create_spin_off_ticket'))
+          }}
+        />
+      )}
     </div>
     </>
   )

frontend/src/pages/TicketsPage.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useState, useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { Plus, Ticket, AlertTriangle } from 'lucide-react'
+import axios from 'axios'
+import { TicketFilterBar } from '@/components/tickets/TicketFilterBar'
+import { TicketListRow } from '@/components/tickets/TicketListRow'
+import { TicketDetailPanel } from '@/components/tickets/TicketDetailPanel'
+import { NewTicketModal } from '@/components/tickets/NewTicketModal'
+import { integrationsApi } from '@/api/integrations'
+import { ticketsApi } from '@/api/tickets'
+import type { PSATicketSearchResult, PSABoard, PSATicketStatusItem } from '@/types/integrations'
+import type { TicketFilters, PSAPriority } from '@/types/tickets'
+import { DEFAULT_TICKET_FILTERS } from '@/types/tickets'
+
+const PAGE_SIZE = 25
+
+function filtersFromParams(params: URLSearchParams): TicketFilters & { page: number } {
+  const assigned = params.get('assigned') ?? 'all'
+  return {
+    ...DEFAULT_TICKET_FILTERS,
+    search: params.get('search') ?? '',
+    board_id: params.get('board') ? Number(params.get('board')) : null,
+    status_id: params.get('status') ? Number(params.get('status')) : null,
+    priority: params.get('priority') ?? null,
+    company_id: params.get('company') ? Number(params.get('company')) : null,
+    assigned: (assigned === 'me' || assigned === 'unassigned' || assigned === 'all')
+      ? assigned
+      : Number(assigned),
+    include_closed: params.get('closed') === 'true',
+    page: params.get('page') ? Number(params.get('page')) : 1,
+  }
+}
+
+export default function TicketsPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { page, ...filters } = filtersFromParams(searchParams)
+
+  const [tickets, setTickets] = useState<PSATicketSearchResult[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [psaError, setPsaError] = useState<string | null>(null)
+  const [boards, setBoards] = useState<PSABoard[]>([])
+  const [statuses, setStatuses] = useState<PSATicketStatusItem[]>([])
+  const [priorities, setPriorities] = useState<PSAPriority[]>([])
+  const [members, setMembers] = useState<{ id: number; name: string }[]>([])
+  const [selectedTicket, setSelectedTicket] = useState<PSATicketSearchResult | null>(null)
+  const [showNewTicket, setShowNewTicket] = useState(false)
+
+  // Load filter option data once
+  useEffect(() => {
+    integrationsApi.listBoards().then(setBoards).catch(() => {})
+    ticketsApi.listPriorities().then(setPriorities).catch(() => {})
+    integrationsApi.listMembers()
+      .then(ms => setMembers(ms.map(m => ({ id: Number(m.id), name: m.name }))))
+      .catch(() => {})
+  }, [])
+
+  // Load statuses when board changes. If no board is selected, aggregate statuses
+  // across all boards (deduped by name) so the filter is useful before the user
+  // picks a board.
+  useEffect(() => {
+    let cancelled = false
+    if (filters.board_id) {
+      integrationsApi.getBoardStatuses(filters.board_id)
+        .then(s => { if (!cancelled) setStatuses(s) })
+        .catch(() => { if (!cancelled) setStatuses([]) })
+    } else if (boards.length > 0) {
+      Promise.all(boards.map(b =>
+        integrationsApi.getBoardStatuses(b.id).catch(() => [] as PSATicketStatusItem[])
+      ))
+        .then(lists => {
+          if (cancelled) return
+          const byName = new Map<string, PSATicketStatusItem>()
+          lists.flat().forEach(s => {
+            if (!byName.has(s.name)) byName.set(s.name, s)
+          })
+          setStatuses(Array.from(byName.values()).sort((a, b) => a.name.localeCompare(b.name)))
+        })
+        .catch(() => { if (!cancelled) setStatuses([]) })
+    } else {
+      setStatuses([])
+    }
+    return () => { cancelled = true }
+  }, [filters.board_id, boards])
+
+  // Fetch tickets on filter/page change
+  const fetchTickets = useCallback(async () => {
+    setLoading(true)
+    setPsaError(null)
+    try {
+      // When no board is selected, statuses are aggregated across boards — filter by
+      // name instead of id so we match the same status across every board.
+      const selectedStatusName = filters.status_id
+        ? statuses.find(s => s.id === filters.status_id)?.name
+        : undefined
+      const result = await ticketsApi.searchTickets({
+        query: filters.search || undefined,
+        board_id: filters.board_id ?? undefined,
+        status_id: filters.board_id && filters.status_id ? filters.status_id : undefined,
+        status_name: !filters.board_id && selectedStatusName ? selectedStatusName : undefined,
+        include_closed: filters.include_closed,
+        assigned_to_me: filters.assigned === 'me',
+        unassigned: filters.assigned === 'unassigned',
+        priority: filters.priority ?? undefined,
+        company_id: filters.company_id ?? undefined,
+        page,
+        page_size: PAGE_SIZE,
+      })
+      setTickets(result.items)
+      setTotal(result.total)
+      // If the boards API returned empty (CW permissions), derive available boards from ticket data
+      setBoards(prev => {
+        if (prev.length > 0) return prev
+        const seen = new Map<number, string>()
+        result.items.forEach(t => {
+          if (t.board_id && t.board_name) seen.set(t.board_id, t.board_name)
+        })
+        return seen.size > 0 ? Array.from(seen, ([id, name]) => ({ id, name })) : prev
+      })
+    } catch (err: unknown) {
+      setTickets([])
+      setTotal(0)
+      if (axios.isAxiosError(err)) {
+        const status = err.response?.status
+        const detail = (err.response?.data as { detail?: string })?.detail ?? ''
+        if (status === 502 && detail.toLowerCase().includes('permission')) {
+          setPsaError('ConnectWise returned a permissions error. Check that the API member\'s security role has Service Tickets → Inquire → ALL and System → Table Setup → Inquire → ALL.')
+        } else if (status === 502) {
+          setPsaError('ConnectWise is unavailable or returned an error. Check your integration settings.')
+        } else {
+          setPsaError('Failed to load tickets.')
+        }
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [filters.search, filters.board_id, filters.status_id, filters.include_closed,
+      filters.assigned, filters.priority, filters.company_id, page, statuses])
+
+  useEffect(() => { fetchTickets() }, [fetchTickets])
+
+  function updateFilters(updated: Partial<TicketFilters>) {
+    const next = new URLSearchParams(searchParams)
+    if ('search' in updated) updated.search ? next.set('search', updated.search!) : next.delete('search')
+    if ('board_id' in updated) updated.board_id ? next.set('board', String(updated.board_id)) : next.delete('board')
+    if ('status_id' in updated) updated.status_id ? next.set('status', String(updated.status_id)) : next.delete('status')
+    if ('priority' in updated) updated.priority ? next.set('priority', updated.priority!) : next.delete('priority')
+    if ('company_id' in updated) updated.company_id ? next.set('company', String(updated.company_id)) : next.delete('company')
+    if ('assigned' in updated) {
+      const a = updated.assigned
+      a === 'all' ? next.delete('assigned') : next.set('assigned', String(a))
+    }
+    if ('include_closed' in updated) updated.include_closed ? next.set('closed', 'true') : next.delete('closed')
+    next.delete('page') // reset to 1 on filter change
+    setSearchParams(next)
+  }
+
+  function updatePage(p: number) {
+    const next = new URLSearchParams(searchParams)
+    p === 1 ? next.delete('page') : next.set('page', String(p))
+    setSearchParams(next)
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-default shrink-0">
+        <div className="flex items-center gap-2">
+          <Ticket className="w-5 h-5 text-muted-foreground" />
+          <h1 className="font-heading text-xl font-bold text-heading">Tickets</h1>
+        </div>
+        <button
+          onClick={() => setShowNewTicket(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white text-sm font-medium rounded-[5px] hover:bg-accent/90 transition-colors"
+        >
+          <Plus className="w-4 h-4" /> New Ticket
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="px-6 py-3 border-b border-default shrink-0">
+        <TicketFilterBar
+          filters={filters}
+          onChange={updateFilters}
+          boards={boards}
+          statuses={statuses}
+          priorities={priorities}
+          members={members}
+          total={total}
+          page={page}
+          pageSize={PAGE_SIZE}
+          onPageChange={updatePage}
+          loading={loading}
+        />
+      </div>
+
+      {/* List + Detail Panel */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Ticket list */}
+        <div className={`flex flex-col overflow-y-auto transition-all ${selectedTicket ? 'w-1/2' : 'w-full'}`}>
+          {loading && tickets.length === 0 && (
+            <div className="flex items-center justify-center py-16 text-muted-foreground text-sm">
+              Loading tickets…
+            </div>
+          )}
+          {!loading && psaError && (
+            <div className="mx-6 mt-6 flex items-start gap-3 px-4 py-3 rounded-lg bg-danger-dim border border-danger/30 text-sm text-danger">
+              <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
+              <span>{psaError}</span>
+            </div>
+          )}
+          {!loading && !psaError && tickets.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground text-sm gap-2">
+              <Ticket className="w-8 h-8 opacity-30" />
+              No tickets match your filters
+            </div>
+          )}
+          {tickets.map(t => (
+            <TicketListRow
+              key={t.id}
+              ticket={t}
+              selected={selectedTicket?.id === t.id}
+              onClick={() => setSelectedTicket(t)}
+            />
+          ))}
+        </div>
+
+        {/* Detail panel */}
+        {selectedTicket && (
+          <div className="w-1/2 border-l border-default overflow-y-auto">
+            <TicketDetailPanel
+              ticket={selectedTicket}
+              onClose={() => setSelectedTicket(null)}
+              onStatusUpdated={(ticketId, newStatus, newStatusId) => {
+                setTickets(prev => prev.map(t =>
+                  t.id === String(ticketId) ? { ...t, status_name: newStatus, status_id: newStatusId } : t
+                ))
+                setSelectedTicket(prev =>
+                  prev && prev.id === String(ticketId)
+                    ? { ...prev, status_name: newStatus, status_id: newStatusId }
+                    : prev
+                )
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* New Ticket Modal */}
+      {showNewTicket && (
+        <NewTicketModal
+          defaultTab="quick"
+          onClose={() => setShowNewTicket(false)}
+          onCreated={() => { setShowNewTicket(false); fetchTickets() }}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -59,6 +59,7 @@ const FlowPilotAnalyticsPage = lazyWithRetry(() => import('@/pages/FlowPilotAnal
 const ScriptBuilderPage = lazyWithRetry(() => import('@/pages/ScriptBuilderPage'))
 const KBAcceleratorPage = lazyWithRetry(() => import('@/pages/KBAcceleratorPage'))
 const SessionQueuePage = lazyWithRetry(() => import('@/pages/SessionQueuePage'))
+const TicketsPage = lazyWithRetry(() => import('@/pages/TicketsPage'))
 const DevBranchingPage = lazyWithRetry(() => import('@/pages/DevBranchingPage'))
 const GuidesHubPage = lazyWithRetry(() => import('@/pages/GuidesHubPage'))
 const GuideDetailPage = lazyWithRetry(() => import('@/pages/GuideDetailPage'))
@@ -203,6 +204,7 @@ export const router = sentryCreateBrowserRouter([
       { path: 'trees/:id/navigate', element: page(TreeNavigationPage) },
       { path: 'sessions', element: page(SessionHistoryPage) },
       { path: 'sessions/:id', element: page(SessionDetailPage) },
+      { path: 'tickets', element: page(TicketsPage) },
       { path: 'shares', element: page(MySharesPage) },
       { path: 'analytics', element: page(TeamAnalyticsPage) },
       { path: 'analytics/me', element: page(MyAnalyticsPage) },

frontend/src/types/index.ts

@@ -96,6 +96,7 @@ export type {
 export * from './scripts'
 export * from './script-builder'
 export * from './integrations'
+export * from './tickets'
 export * from './notification'
 export type * from './public-templates'
 export * from './network-diagram'

frontend/src/types/integrations.ts

@@ -48,6 +48,10 @@ export interface PSATicketInfo {
   board_name: string | null
   status_name: string | null
   priority_name: string | null
+  company_id: number | null
+  board_id: number | null
+  status_id: number | null
+  priority_id: number | null
 }
 
 export interface TicketLinkResponse {
@@ -64,6 +68,10 @@ export interface PSATicketSearchResult {
   status_name: string | null
   priority_name: string | null
   closed: boolean
+  company_id: string | null
+  board_id: number | null
+  status_id: number | null
+  priority_id: number | null
 }
 
 export interface PSATicketStatusItem {

frontend/src/types/tickets.ts

@@ -0,0 +1,79 @@
+import type { PSATicketSearchResult } from '@/types/integrations'
+
+export interface TicketFilters {
+  search: string
+  board_id: number | null
+  status_id: number | null
+  priority: string | null
+  company_id: number | null
+  assigned: 'me' | 'unassigned' | 'all' | number
+  include_closed: boolean
+}
+
+export const DEFAULT_TICKET_FILTERS: TicketFilters = {
+  search: '',
+  board_id: null,
+  status_id: null,
+  priority: null,
+  company_id: null,
+  assigned: 'all',
+  include_closed: false,
+}
+
+export interface TicketCreationPayload {
+  summary: string
+  company_id: number | null
+  board_id: number | null
+  status_id: number | null
+  priority_id: number | null
+  description: string
+  assigned_member_id: number | null
+}
+
+export interface AiParseResponse {
+  summary: string | null
+  company_id: number | null
+  board_id: number | null
+  priority_id: number | null
+  status_id: number | null
+  assigned_member_id: number | null
+  description: string | null
+  missing_fields: string[]
+  warnings: string[]
+}
+
+export interface PSAResource {
+  member_id: number
+  member_name: string
+  member_identifier: string
+  is_rf_user: boolean
+}
+
+export interface PSATicketCreated {
+  id: number
+  summary: string
+  board_name: string
+  status_name: string
+  priority_name: string
+  company_name: string
+  resources: PSAResource[]
+}
+
+export interface PSATicketStatusUpdate {
+  ticket_id: number
+  previous_status: string
+  new_status: string
+  new_status_id: number
+}
+
+export interface TicketListResponse {
+  items: PSATicketSearchResult[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export interface PSAPriority {
+  id: number
+  name: string
+}