feat(frontend): crosstalk tab — in-L2 threads + cross-Enterprise consult inbox/outbox (#171) (#188)

Adds the next L2 admin UI tab after Personas (#170). Three sub-tabs:

  1. In-L2 threads — peer-to-peer agent communication inside this L2
     (rendered from GET /crosstalk/threads). Subject, participants
     count + 5-min "live" indicator, status, opened-at. Click a row →
     drawer with full message timeline, admin-override close, and
     markdown export.
  2. Consult inbox — peer-Enterprise consults addressed to this L2
     (GET /consults/inbox). From-Enterprise + persona, topic, status,
     opened-at. Drawer shows envelope timeline + claimed_by.
  3. Consult outbox — derived from /activity event_type=consult_open
     (no /consults/outbox endpoint yet, surfaced as backend gap).
     Best-effort; the inline note flags that receiver-side status is
     not preserved in the activity-log payload.

Frontend-only. Reuses the cyan-eyebrow brand chrome from #181 and the
row+drawer pattern from #183 — no new design primitives.

Bundle delta: +4.56 KB gzipped (255.24 → 259.80) — under the 5 KB
ceiling specified in the issue.

Backend gaps (to be opened as follow-up issues):
  - GET /consults/outbox does not exist; the page reconstructs from
    activity log.
  - ThreadSummary lacks message_count + last_message_at; the list
    view defers to per-thread fetch for the authoritative count.
  - Per-thread routing health (AIGRP latency, signature success-rate)
    needs an aggregated read; placeholder copy in the drawer.

Tests: 5 vitest cases covering empty-state, in-L2 listing, search
filter, consult-inbox sub-tab, and outbox derivation. All 32 frontend
tests pass; biome lint clean.

Author: dwinter3

server/frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { AuthProvider, useAuth } from "./auth"
 import { Layout } from "./components/Layout"
 import { ProtectedRoute } from "./components/ProtectedRoute"
 import { ApiKeysPage } from "./pages/ApiKeysPage"
+import { CrosstalkPage } from "./pages/CrosstalkPage"
 import { DashboardPage } from "./pages/DashboardPage"
 import { InvitesPage } from "./pages/InvitesPage"
 import { LoginPage } from "./pages/LoginPage"
@@ -33,6 +34,7 @@ function AppRoutes() {
         <Route path="/review" element={<ReviewPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/network" element={<NetworkPage />} />
+        <Route path="/crosstalk" element={<CrosstalkPage />} />
         <Route path="/settings/api-keys" element={<ApiKeysPage />} />
         <Route path="/admin/personas" element={<PersonasPage />} />
         <Route path="/admin/invites" element={<InvitesPage />} />

server/frontend/src/api.ts

@@ -1,9 +1,14 @@
 import type {
+  ActivityListResponse,
   ApiKeysList,
+  ConsultInboxResponse,
+  ConsultMessagesResponse,
   CreatedApiKey,
   CreateInviteRequest,
   CreatePersonaRequest,
   CreatePersonaResponse,
+  CrosstalkThreadListResponse,
+  CrosstalkThreadWithMessages,
   InvitePublic,
   InviteStatus,
   InvitesPublic,
@@ -167,6 +172,64 @@ export const api = {
     request<InvitePublic>(`/admin/invites/${id}`, {
       method: "DELETE",
     }),
+
+  // Activity-log read. The crosstalk tab uses it to derive the
+  // cross-Enterprise consult outbox from consult_open events.
+  listActivity: (
+    params: {
+      persona?: string
+      since?: string
+      until?: string
+      event_type?: string
+      limit?: number
+      cursor?: string
+    } = {},
+  ) => {
+    const qs = new URLSearchParams()
+    if (params.persona) qs.set("persona", params.persona)
+    if (params.since) qs.set("since", params.since)
+    if (params.until) qs.set("until", params.until)
+    if (params.event_type) qs.set("event_type", params.event_type)
+    if (params.limit != null) qs.set("limit", String(params.limit))
+    if (params.cursor) qs.set("cursor", params.cursor)
+    const query = qs.toString()
+    return request<ActivityListResponse>(`/activity${query ? `?${query}` : ""}`)
+  },
+
+  // Crosstalk threads (#171). The list endpoint returns ThreadSummary
+  // (compact shape — no message-count or last-message timestamp). The
+  // per-thread fetch returns the full CrosstalkThread + messages, which
+  // the drawer uses to render the timeline.
+  listCrosstalkThreads: (limit = 100) =>
+    request<CrosstalkThreadListResponse>(`/crosstalk/threads?limit=${limit}`),
+
+  getCrosstalkThread: (threadId: string, limit = 200) =>
+    request<CrosstalkThreadWithMessages>(
+      `/crosstalk/threads/${encodeURIComponent(threadId)}?limit=${limit}`,
+    ),
+
+  closeCrosstalkThread: (threadId: string, reason?: string) =>
+    request<{ thread_id: string; status: string }>(
+      `/crosstalk/threads/${encodeURIComponent(threadId)}/close`,
+      {
+        method: "POST",
+        body: JSON.stringify({ reason: reason ?? null }),
+      },
+    ),
+
+  // Cross-Enterprise consults (#171). Inbox = consults addressed to this
+  // L2; outbox endpoint does not exist on the backend yet (see issue
+  // surfaced from #171 — derive from /activity event_type=consult_open
+  // for now, or wait for the dedicated endpoint).
+  consultInbox: (includeClosed = true, limit = 100) =>
+    request<ConsultInboxResponse>(
+      `/consults/inbox?include_closed=${includeClosed}&limit=${limit}`,
+    ),
+
+  consultMessages: (threadId: string) =>
+    request<ConsultMessagesResponse>(
+      `/consults/${encodeURIComponent(threadId)}/messages`,
+    ),
 }
 
 export { ApiError }