From 6044d5a88bc660af5099c41b5efaf0026941a513 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@resolutionflow.com>
Date: Thu, 16 Apr 2026 04:59:03 +0000
Subject: [PATCH] fix(tickets): fix permissions toast, board fallback,
 assignment search, remove load more
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- list_resources: return [] on PSAError instead of 502 — stops global interceptor
  toast when CW API key lacks ticket members permission (Lesson 111)
- list_boards/list_priorities: add warning logging so Railway logs reveal the
  root cause when CW permissions are missing
- TicketsPage: derive board options from ticket search results when listBoards
  returns empty (CW permissions fallback)
- TicketFilterBar: replace assignment <select> with searchable member picker —
  fixed options (All/Mine/Unassigned) + text-filtered member dropdown
- TicketQueue: remove Load More / infinite scroll; page now exists at /tickets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/app/api/endpoints/integrations.py     | 10 +-
 .../src/components/dashboard/TicketQueue.tsx  | 52 ++---------
 .../components/tickets/TicketFilterBar.tsx    | 91 +++++++++++++++----
 frontend/src/pages/TicketsPage.tsx            |  9 ++
 4 files changed, 96 insertions(+), 66 deletions(-)

diff --git a/backend/app/api/endpoints/integrations.py b/backend/app/api/endpoints/integrations.py
index 53abd104..78abf7a2 100644
--- a/backend/app/api/endpoints/integrations.py
+++ b/backend/app/api/endpoints/integrations.py
@@ -376,8 +376,9 @@ async def list_boards(
         provider = await get_provider_for_account(current_user.account_id, db)
         boards = await provider.list_boards()
         return [PSABoardResponse(id=b.id, name=b.name) for b in boards]
-    except PSAError:
+    except PSAError as e:
         # Boards are optional UI chrome — degrade gracefully rather than surfacing a toast
+        logger.warning("list_boards failed: %s", e)
         return []
 
 
@@ -630,7 +631,9 @@ async def list_ticket_resources(
     try:
         return await ticket_svc.list_resources(current_user.account_id, ticket_id, db)
     except PSAError as e:
-        raise HTTPException(status_code=502, detail=str(e))
+        # Resources are optional display data — degrade gracefully rather than surfacing a toast
+        logger.warning("list_resources(%s) failed: %s", ticket_id, e)
+        return []
 
 
 @router.post("/tickets/{ticket_id}/resources", response_model=PSAResourceSchema, status_code=201)
@@ -679,7 +682,8 @@ async def list_priorities(
         provider = await get_provider_for_account(current_user.account_id, db)
         raw = await provider.list_priorities()
         return [PSAPrioritySchema(id=p["id"], name=p["name"]) for p in raw if p.get("id")]
-    except PSAError:
+    except PSAError as e:
+        logger.warning("list_priorities failed: %s", e)
         return []
 
 
diff --git a/frontend/src/components/dashboard/TicketQueue.tsx b/frontend/src/components/dashboard/TicketQueue.tsx
index 5437dedf..6826b70d 100644
--- a/frontend/src/components/dashboard/TicketQueue.tsx
+++ b/frontend/src/components/dashboard/TicketQueue.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
-import { Ticket, ChevronDown, Check, Loader2, AlertCircle } from 'lucide-react'
+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'
@@ -193,10 +193,7 @@ export function TicketQueue() {
   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
@@ -227,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') {
@@ -243,12 +240,7 @@ export function TicketQueue() {
 
       try {
         const results = await integrationsApi.searchTicketsQueue(params)
-        if (append) {
-          setTickets((prev) => [...prev, ...results.items])
-        } else {
-          setTickets(results.items)
-        }
-        setHasMore(results.items.length === PAGE_SIZE)
+        setTickets(results.items)
         setError(null)
       } catch {
         setError('Failed to load tickets. Check your PSA connection.')
@@ -261,21 +253,11 @@ export function TicketQueue() {
   useEffect(() => {
     if (!hasConnection) return
     if (activeTab === 'mine' && hasMemberMapping !== true) return
-    setPage(1)
     setTickets([])
-    setHasMore(false)
     setLoading(true)
-    fetchTickets(activeTab, selectedBoardIds, 1, false).finally(() => setLoading(false))
+    fetchTickets(activeTab, selectedBoardIds).finally(() => setLoading(false))
   }, [activeTab, selectedBoardIds, hasConnection, hasMemberMapping, fetchTickets])
 
-  const handleLoadMore = async () => {
-    const nextPage = page + 1
-    setPage(nextPage)
-    setLoadingMore(true)
-    await fetchTickets(activeTab, selectedBoardIds, nextPage, true)
-    setLoadingMore(false)
-  }
-
   const handleStartSession = (ticket: PSATicketSearchResult) => {
     navigate('/pilot', {
       state: {
@@ -368,7 +350,7 @@ export function TicketQueue() {
               <TicketRow
                 key={ticket.id}
                 ticket={ticket}
-                isLast={i === tickets.length - 1 && !hasMore}
+                isLast={i === tickets.length - 1}
                 onStartSession={handleStartSession}
               />
             ))}
@@ -404,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>
   )
diff --git a/frontend/src/components/tickets/TicketFilterBar.tsx b/frontend/src/components/tickets/TicketFilterBar.tsx
index bb92ca1d..6f882ea1 100644
--- a/frontend/src/components/tickets/TicketFilterBar.tsx
+++ b/frontend/src/components/tickets/TicketFilterBar.tsx
@@ -1,5 +1,6 @@
 // frontend/src/components/tickets/TicketFilterBar.tsx
-import { Search, X } from 'lucide-react'
+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'
@@ -27,6 +28,24 @@ export function TicketFilterBar({
   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 */}
@@ -42,22 +61,60 @@ export function TicketFilterBar({
           />
         </div>
 
-        {/* Assignment */}
-        <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={typeof filters.assigned === 'number' ? String(filters.assigned) : filters.assigned}
-          onChange={e => {
-            const v = e.target.value
-            onChange({ assigned: v === 'me' || v === 'unassigned' || v === 'all' ? v : Number(v) })
-          }}
-        >
-          <option value="all">All Tickets</option>
-          <option value="me">My Tickets</option>
-          <option value="unassigned">Unassigned</option>
-          {members.map(m => (
-            <option key={m.id} value={String(m.id)}>{m.name}</option>
-          ))}
-        </select>
+        {/* 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
diff --git a/frontend/src/pages/TicketsPage.tsx b/frontend/src/pages/TicketsPage.tsx
index 6bdf30c2..befc7b32 100644
--- a/frontend/src/pages/TicketsPage.tsx
+++ b/frontend/src/pages/TicketsPage.tsx
@@ -81,6 +81,15 @@ export default function TicketsPage() {
       })
       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 {
       setTickets([])
       setTotal(0)