feat(phase5): Cluster B — Inter-Agency Coordination

apps/admin-desktop/package.json

@@ -19,9 +19,13 @@
     "react-router-dom": "^7.14.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "happy-dom": "^15.11.0",
+    "vitest": "^4.1.4",
     "vite": "^8.0.8"
   }
 }

apps/admin-desktop/src/__tests__/command-channel-panel.test.tsx

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { CommandChannelPanel } from '../components/CommandChannelPanel.js'
+import { httpsCallable } from 'firebase/functions'
+
+const { mockOnSnapshot, mockHttpsCallable, mockGetFunctions, mockDb } = vi.hoisted(() => ({
+  mockOnSnapshot: vi.fn(),
+  mockHttpsCallable: vi.fn(),
+  mockGetFunctions: vi.fn(() => ({})),
+  mockDb: {},
+}))
+
+interface MockQueryRef {
+  type: string
+  filters: { type: string; field?: string }[]
+}
+
+vi.mock('firebase/firestore', () => {
+  const collection = vi.fn((_db, name) => ({ type: 'collection', name }))
+  const where = vi.fn((field, _op, value) => ({ type: 'where', field, value }))
+  const orderBy = vi.fn((field, dir) => ({ type: 'orderBy', field, dir }))
+  const limit = vi.fn((n) => ({ type: 'limit', n }))
+  const query = vi.fn((...args) => ({ type: 'query', filters: args.slice(1) }))
+  return {
+    getFirestore: vi.fn(() => mockDb),
+    collection,
+    query,
+    where,
+    orderBy,
+    limit,
+    onSnapshot: mockOnSnapshot,
+    doc: vi.fn(),
+  }
+})
+
+vi.mock('firebase/functions', () => ({
+  httpsCallable: vi.fn(() => mockHttpsCallable),
+  getFunctions: mockGetFunctions,
+}))
+
+const threadSnap = {
+  docs: [
+    {
+      id: 'th1',
+      data: () => ({
+        threadType: 'agency_assistance',
+        subject: 'Test thread',
+        participantUids: { u1: true, u2: true },
+        lastMessageAt: 1000,
+      }),
+    },
+  ],
+  empty: false,
+}
+
+const msgSnap = {
+  docs: [
+    {
+      id: 'm1',
+      data: () => ({
+        authorUid: 'u2',
+        body: 'Hello world',
+        createdAt: 1000,
+      }),
+    },
+  ],
+  empty: false,
+}
+
+beforeEach(() => {
+  mockOnSnapshot.mockReset()
+  mockHttpsCallable.mockReset()
+  mockHttpsCallable.mockResolvedValue({ data: { status: 'sent' } })
+
+  mockOnSnapshot.mockImplementation((ref: MockQueryRef, cb) => {
+    if (ref.type === 'query') {
+      const isMessages = ref.filters.some((f) => f.type === 'where' && f.field === 'threadId')
+      cb(isMessages ? msgSnap : threadSnap)
+    }
+    return vi.fn()
+  })
+})
+
+describe('CommandChannelPanel', () => {
+  it('renders nothing when no threads', () => {
+    mockOnSnapshot.mockImplementation((ref: MockQueryRef, cb) => {
+      if (ref.type === 'query') {
+        cb({ docs: [], empty: true })
+      }
+      return vi.fn()
+    })
+    const { container } = render(<CommandChannelPanel reportId="r1" currentUserUid="u1" />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders thread tabs and messages', () => {
+    render(<CommandChannelPanel reportId="r1" currentUserUid="u1" />)
+    expect(screen.getByText('🏥 Agency')).toBeInTheDocument()
+    expect(screen.getByText('Test thread')).toBeInTheDocument()
+    expect(screen.getByText('Hello world')).toBeInTheDocument()
+  })
+
+  it('sends a message when clicking Send', async () => {
+    render(<CommandChannelPanel reportId="r1" currentUserUid="u1" />)
+    const textarea = screen.getByPlaceholderText('Type a message...')
+    fireEvent.change(textarea, { target: { value: 'Units dispatched' } })
+    fireEvent.click(screen.getByText('Send'))
+    await waitFor(() => {
+      expect(httpsCallable).toHaveBeenCalledWith(expect.any(Object), 'addCommandChannelMessage')
+      expect(mockHttpsCallable).toHaveBeenCalledWith(
+        expect.objectContaining({
+          threadId: 'th1',
+          body: 'Units dispatched',
+          idempotencyKey: expect.any(String),
+        }),
+      )
+    })
+    expect(textarea).toHaveValue('')
+  })
+
+  it('displays an error when send fails', async () => {
+    mockHttpsCallable.mockRejectedValue(new Error('Network error'))
+    render(<CommandChannelPanel reportId="r1" currentUserUid="u1" />)
+    const textarea = screen.getByPlaceholderText('Type a message...')
+    fireEvent.change(textarea, { target: { value: 'Fail me' } })
+    fireEvent.click(screen.getByText('Send'))
+    await waitFor(() => {
+      expect(screen.getByText('Network error')).toBeInTheDocument()
+    })
+  })
+
+  it('enforces max length of 2000', () => {
+    render(<CommandChannelPanel reportId="r1" currentUserUid="u1" />)
+    const textarea = screen.getByPlaceholderText('Type a message...')
+    expect(textarea).toHaveAttribute('maxLength', '2000')
+  })
+})

apps/admin-desktop/src/__tests__/field-mode-store.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useFieldModeStore } from '../hooks/useFieldModeStore.js'
+
+const { mockOnSnapshot, mockHttpsCallable } = vi.hoisted(() => ({
+  mockOnSnapshot: vi.fn(),
+  mockHttpsCallable: vi.fn(),
+}))
+
+vi.mock('firebase/firestore', () => ({
+  doc: vi.fn(),
+  onSnapshot: mockOnSnapshot,
+  getFirestore: vi.fn(() => ({})),
+}))
+
+vi.mock('firebase/functions', () => ({
+  httpsCallable: vi.fn(() => mockHttpsCallable),
+  getFunctions: vi.fn(() => ({})),
+}))
+
+const ts = Date.now()
+
+beforeEach(() => {
+  mockOnSnapshot.mockReset()
+  mockHttpsCallable.mockReset()
+  mockHttpsCallable.mockResolvedValue({ data: { status: 'exited' } })
+})
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('useFieldModeStore', () => {
+  it('shows isActive true when session snapshot has isActive true', () => {
+    mockOnSnapshot.mockImplementation((_ref, cb) => {
+      cb({
+        exists: () => true,
+        data: () => ({ isActive: true, expiresAt: ts + 3600000 }),
+      })
+      return vi.fn()
+    })
+    const { result } = renderHook(() => useFieldModeStore('uid-1'))
+    expect(result.current.isActive).toBe(true)
+  })
+
+  it('shows isActive false when no session exists', () => {
+    mockOnSnapshot.mockImplementation((_ref, cb) => {
+      cb({ exists: () => false, data: () => undefined })
+      return vi.fn()
+    })
+    const { result } = renderHook(() => useFieldModeStore('uid-1'))
+    expect(result.current.isActive).toBe(false)
+  })
+
+  it('calls exitFieldMode when session expires', () => {
+    vi.useFakeTimers()
+    const expiredAt = Date.now() - 1000
+    mockOnSnapshot.mockImplementation((_ref, cb) => {
+      cb({
+        exists: () => true,
+        data: () => ({ isActive: true, expiresAt: expiredAt }),
+      })
+      return vi.fn()
+    })
+    renderHook(() => useFieldModeStore('uid-1'))
+    act(() => {
+      vi.advanceTimersByTime(65000)
+    })
+    expect(mockHttpsCallable).toHaveBeenCalled()
+  })
+})

apps/admin-desktop/src/components/CommandChannelPanel.tsx

@@ -0,0 +1,150 @@
+// apps/admin-desktop/src/components/CommandChannelPanel.tsx
+import { useState, useEffect } from 'react'
+import {
+  collection,
+  query,
+  where,
+  orderBy,
+  limit,
+  onSnapshot,
+  type QueryDocumentSnapshot,
+  getFirestore,
+} from 'firebase/firestore'
+import { httpsCallable, getFunctions } from 'firebase/functions'
+
+interface Thread {
+  id: string
+  threadType: 'agency_assistance' | 'border_share'
+  subject: string
+  participantUids: Record<string, boolean>
+  lastMessageAt?: number
+}
+
+interface Message {
+  id: string
+  authorUid: string
+  body: string
+  createdAt: number
+}
+
+interface Props {
+  reportId: string
+  currentUserUid: string
+}
+
+export function CommandChannelPanel({ reportId, currentUserUid }: Props) {
+  const [threads, setThreads] = useState<Thread[]>([])
+  const [activeThreadId, setActiveThreadId] = useState<string | null>(null)
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const db = getFirestore()
+
+  useEffect(() => {
+    const q = query(collection(db, 'command_channel_threads'), where('reportId', '==', reportId))
+    return onSnapshot(q, (snap) => {
+      const found = snap.docs.map((d: QueryDocumentSnapshot) => ({
+        id: d.id,
+        ...(d.data() as Omit<Thread, 'id'>),
+      }))
+      setThreads(found)
+      if (found.length > 0 && !activeThreadId) {
+        const first = found[0]
+        if (first) {
+          setActiveThreadId(first.id)
+        }
+      }
+    })
+  }, [reportId, db, activeThreadId])
+
+  useEffect(() => {
+    if (!activeThreadId) return
+    const q = query(
+      collection(db, 'command_channel_messages'),
+      where('threadId', '==', activeThreadId),
+      orderBy('createdAt', 'desc'),
+      limit(50),
+    )
+    return onSnapshot(q, (snap) => {
+      setMessages(
+        snap.docs
+          .map((d: QueryDocumentSnapshot) => ({ id: d.id, ...(d.data() as Omit<Message, 'id'>) }))
+          .reverse(),
+      )
+    })
+  }, [activeThreadId, db])
+
+  async function handleSend() {
+    if (!activeThreadId || !input.trim()) return
+    setError(null)
+    try {
+      const fn = httpsCallable(getFunctions(), 'addCommandChannelMessage')
+      await fn({
+        threadId: activeThreadId,
+        body: input.trim(),
+        idempotencyKey: crypto.randomUUID(),
+      })
+      setInput('')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send')
+    }
+  }
+
+  if (threads.length === 0) return null
+
+  const activeThread = threads.find((t) => t.id === activeThreadId)
+
+  return (
+    <div className="border rounded-lg p-4 space-y-3">
+      <div className="flex gap-2">
+        {threads.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => {
+              setActiveThreadId(t.id)
+            }}
+            className={`px-2 py-1 text-xs rounded ${t.id === activeThreadId ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}
+          >
+            {t.threadType === 'agency_assistance' ? '🏥 Agency' : '🗺️ Border'}
+          </button>
+        ))}
+      </div>
+
+      {activeThread && <p className="text-xs text-gray-500">{activeThread.subject}</p>}
+
+      <div className="h-48 overflow-y-auto space-y-2 border rounded p-2 bg-gray-50">
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={`text-sm ${m.authorUid === currentUserUid ? 'text-right' : ''}`}
+          >
+            <span className="text-xs text-gray-500">{m.authorUid}</span>
+            <p>{m.body}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-2">
+        <textarea
+          value={input}
+          onChange={(e) => {
+            setInput(e.target.value)
+          }}
+          maxLength={2000}
+          rows={2}
+          className="flex-1 border rounded px-2 py-1 text-sm resize-none"
+          placeholder="Type a message..."
+        />
+        <button
+          onClick={() => void handleSend()}
+          disabled={!input.trim()}
+          className="px-3 py-1 bg-blue-600 text-white rounded text-sm disabled:opacity-50"
+        >
+          Send
+        </button>
+      </div>
+      <p className="text-xs text-right text-gray-400">{input.length}/2000</p>
+      {error && <p className="text-xs text-red-600">{error}</p>}
+    </div>
+  )
+}

apps/admin-desktop/src/components/ReconnectBanner.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  actionLabel: string
+}
+
+export function ReconnectBanner({ actionLabel }: Props) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800">
+      <span>⚠</span>
+      <span>Connect to {actionLabel}</span>
+    </div>
+  )
+}