fix: cancelled flag in useClientDetail, assign error display, remove unused import

- useClientDetail: add cancelled flag to prevent setState on unmounted component
- ClientDetailPage: show error message when agent assignment fails
- Remove unused ChevronDown import

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

Author: dreynow

apps/observatory/src/hooks/useClientDetail.ts

@@ -74,18 +74,21 @@ export function useClientDetail(clientId: string | undefined) {
 
   const fetchAll = useCallback(async () => {
     if (!clientId) return;
+    let cancelled = false;
     setLoading(true);
     setError(null);
 
     try {
       // Fetch client detail from CP API
       const clientResp = await cpFetch(`/v1/clients/${clientId}`);
+      if (cancelled) return;
       if (!clientResp.ok) {
         setError(`Failed to load client (${clientResp.status})`);
         setLoading(false);
         return;
       }
       const clientData: ClientDetail = await clientResp.json();
+      if (cancelled) return;
       setClient(clientData);
 
       // Fetch QB data if connected (parallel, best-effort)
@@ -94,28 +97,31 @@ export function useClientDetail(clientId: string | undefined) {
       if (clientData.quickbooks_connected) {
         promises.push(
           cpFetch(`/v1/clients/${clientId}/qb/company`)
-            .then(async (r) => { if (r.ok) setCompany(await r.json()); })
+            .then(async (r) => { if (!cancelled && r.ok) setCompany(await r.json()); })
             .catch(() => {})
         );
         promises.push(
           cpFetch(`/v1/clients/${clientId}/qb/vendors`)
-            .then(async (r) => { if (r.ok) setVendors(await r.json()); })
+            .then(async (r) => { if (!cancelled && r.ok) setVendors(await r.json()); })
             .catch(() => {})
         );
       }
 
       // Fetch escalations for this client from Observatory API
       promises.push(
         apiFetch(`/v1/escalations?client_id=${clientId}&limit=10`)
-          .then(async (r) => { if (r.ok) setEscalations(await r.json()); })
+          .then(async (r) => { if (!cancelled && r.ok) setEscalations(await r.json()); })
           .catch(() => {})
       );
 
       await Promise.all(promises);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Network error');
+      if (!cancelled) setError(e instanceof Error ? e.message : 'Network error');
     }
-    setLoading(false);
+    if (!cancelled) setLoading(false);
+
+    // Return cleanup for useEffect
+    return () => { cancelled = true; };
   }, [clientId]);
 
   useEffect(() => {

apps/observatory/src/pages/ClientDetailPage.tsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import {
   ArrowLeft, Building2, Check, Clock, Users, AlertTriangle, DollarSign,
-  RefreshCw, Plus, X, Link2, ChevronDown, Shield,
+  RefreshCw, Plus, X, Link2, Shield,
 } from 'lucide-react';
 import { useClientDetail, type ClientAgent, type QbVendor, type Escalation } from '../hooks/useClientDetail';
 import { DELEGATION_TEMPLATES } from '../lib/constants';
@@ -36,6 +36,7 @@ export const ClientDetailPage: React.FC = () => {
   const [assignName, setAssignName] = useState('');
   const [assignTemplate, setAssignTemplate] = useState(1); // AP Clerk default
   const [assigning, setAssigning] = useState(false);
+  const [assignError, setAssignError] = useState<string | null>(null);
   const [syncing, setSyncing] = useState(false);
   const [unassigningAgent, setUnassigningAgent] = useState<string | null>(null);
 
@@ -67,10 +68,15 @@ export const ClientDetailPage: React.FC = () => {
   const handleAssign = async () => {
     if (!assignName.trim()) return;
     setAssigning(true);
-    await assignAgent(assignName.trim(), [...template.scopes], 4);
+    setAssignError(null);
+    const result = await assignAgent(assignName.trim(), [...template.scopes], 4);
     setAssigning(false);
-    setShowAssign(false);
-    setAssignName('');
+    if (result.ok) {
+      setShowAssign(false);
+      setAssignName('');
+    } else {
+      setAssignError(result.error || 'Failed to assign agent');
+    }
   };
 
   const handleUnassign = async (agentName: string) => {
@@ -227,6 +233,9 @@ export const ClientDetailPage: React.FC = () => {
                 </div>
                 <p className="text-[9px] text-[#9C978E] mt-1">{template.description}{template.maxCost ? ` - up to $${template.maxCost.toLocaleString()}` : ''}</p>
               </div>
+              {assignError && (
+                <p className="text-xs text-[#C23A3A] bg-[#FDF0F0] border border-[#F0C6C6] rounded-md px-3 py-2">{assignError}</p>
+              )}
               <button
                 onClick={handleAssign}
                 disabled={!assignName.trim() || assigning}