feat: status popover + CSV export

Two follow-ons after the ⌘K palette:

StatusIndicator → Popover
- The top-bar status light is no longer a direct link to /status.
  Clicking it opens a popover with grouped issues (failing
  integrations, expired tokens, expiring tokens) so a quick glance
  answers "what's broken" without leaving the current page.  A "View
  full status" link at the bottom routes to /status when needed.
- The trigger keeps the same color rollup so the visual hint is
  visible without opening the popover.

DataTable → CSV export
- Optional `exportable` + `exportFilename` props add an "Export CSV"
  button next to the search bar.  Default behavior exports the current
  page; pass `onExportAll` for server-side full-result downloads.
- Built client-side from column defs (label → header, raw value →
  cell).  BOM-prefixed UTF-8 so Excel decodes correctly.  Quoting +
  escape handled.
- Enabled on /admin/data-browser/{companies,tickets} as initial demos.
  Other data-browser pages opt in by adding two props.

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

components/admin/DataTable.tsx

@@ -62,6 +62,7 @@ import {
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
+  Download,
   Loader2,
   Search,
 } from 'lucide-react';
@@ -94,6 +95,14 @@ export interface DataTableProps<TData = any> {
   emptyDescription?: string;
   /** Pin the first column when the table scrolls horizontally. Default true. */
   stickyFirstColumn?: boolean;
+  /** When true, render an "Export CSV" button. Exports the current page only
+   *  unless `onExportAll` is provided (which receives all records server-side). */
+  exportable?: boolean;
+  /** Filename prefix for the CSV download (e.g. "tickets" → "tickets-2026-05-03.csv"). */
+  exportFilename?: string;
+  /** Optional async callback for full-result export — called instead of building
+   *  the CSV from `data`.  Should resolve with the full row set. */
+  onExportAll?: () => Promise<TData[]>;
 }
 
 export default function DataTable<TData = any>({
@@ -112,6 +121,9 @@ export default function DataTable<TData = any>({
   emptyTitle = 'No data found',
   emptyDescription = 'Try adjusting your search or filters.',
   stickyFirstColumn = true,
+  exportable = false,
+  exportFilename = 'export',
+  onExportAll,
 }: DataTableProps<TData>) {
   const [searchQuery, setSearchQuery] = useState('');
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -191,24 +203,59 @@ export default function DataTable<TData = any>({
     onSearch?.(searchQuery);
   };
 
+  const [exporting, setExporting] = useState(false);
+  async function handleExport() {
+    setExporting(true);
+    try {
+      const rows = onExportAll ? await onExportAll() : data;
+      const csv = toCsv(columns, rows);
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const today = new Date().toISOString().slice(0, 10);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${exportFilename}-${today}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } finally {
+      setExporting(false);
+    }
+  }
+
   return (
     <div className="space-y-4">
-      {onSearch && (
+      {(onSearch || exportable) && (
         <div className="flex gap-2">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <Input
-              placeholder="Search…"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-              className="pl-10"
-            />
-          </div>
-          <Button onClick={handleSearch} disabled={isLoading}>
-            {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
-            <span className="ml-2">Search</span>
-          </Button>
+          {onSearch && (
+            <>
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search…"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  className="pl-10"
+                />
+              </div>
+              <Button onClick={handleSearch} disabled={isLoading}>
+                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+                <span className="ml-2">Search</span>
+              </Button>
+            </>
+          )}
+          {exportable && (
+            <Button variant="outline" onClick={handleExport} disabled={exporting || data.length === 0} className="ml-auto">
+              {exporting ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Download className="w-4 h-4" />
+              )}
+              <span className="ml-2">Export CSV</span>
+            </Button>
+          )}
         </div>
       )}
 
@@ -383,3 +430,26 @@ function renderLoadingRows<TData>(table: ReturnType<typeof useReactTable<TData>>
     </TableRow>
   ));
 }
+
+/**
+ * Build a CSV string from columns + rows.  Cell values come from
+ * `row[col.key]` (raw, not column.render — render returns ReactNode
+ * which doesn't serialize).  Quotes are doubled, fields containing
+ * comma / quote / newline are wrapped in quotes; everything else is
+ * left bare.  Booleans render true/false, null/undefined render empty.
+ */
+function toCsv<T = any>(columns: Column<T>[], rows: T[]): string {
+  const escape = (v: unknown): string => {
+    if (v === null || v === undefined) return '';
+    const s = typeof v === 'object' ? JSON.stringify(v) : String(v);
+    return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  };
+  const header = columns.map((c) => escape(c.label)).join(',');
+  const body = rows
+    .map((row) =>
+      columns.map((c) => escape((row as Record<string, unknown>)[c.key])).join(','),
+    )
+    .join('\n');
+  // BOM so Excel reads UTF-8 correctly.
+  return '' + header + '\n' + body + '\n';
+}

components/navigation/status-indicator.tsx

@@ -1,26 +1,56 @@
-/* StatusIndicator — top-bar entry point to /status.
+/* StatusIndicator — top-bar status pill with inline issue summary.
  *
- * Polls /api/dashboard/integration-health every 60 s, rolls up overall
- * state into a single StatusLight, and links to /status. Title attribute
- * gives a quick textual hint; click goes to the full page. */
+ * Click to open a Popover that lists what's wrong (failed integrations,
+ * expiring/expired tokens, recent sync failures) with deep-links to the
+ * relevant tools.  When everything is healthy the popover just confirms
+ * "All systems operational".  A "View full status" link at the bottom
+ * routes to /status.
+ *
+ * Polls /api/dashboard/integration-health every 60 s.  Rolls up the
+ * summary into a single StatusLight color in the trigger so the visual
+ * hint is visible without opening the popover. */
 
 'use client';
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import { ArrowRight, KeyRound, Power, ShieldCheck, XCircle } from 'lucide-react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import { StatusLight, type StatusLightState } from '@/components/ui/status-light';
+import { Separator } from '@/components/ui/separator';
+
+interface IntegrationHealthItem {
+  key: string;
+  name: string;
+  status: 'ok' | 'auth_failed' | 'unreachable' | 'not_configured' | 'unknown' | 'disabled';
+  error?: string | null;
+  tokenExpiry?: { envVar: string; daysRemaining: number } | null;
+}
 
 interface HealthSummary {
+  total: number;
+  ok: number;
   failed: number;
-  expired: number;
+  notConfigured: number;
+  disabled: number;
   expiringWithin14Days: number;
+  expired: number;
   hasIssues: boolean;
 }
 
+interface HealthResponse {
+  items: IntegrationHealthItem[];
+  summary: HealthSummary;
+}
+
 const POLL_MS = 60_000;
 
 export function StatusIndicator() {
-  const [summary, setSummary] = useState<HealthSummary | null>(null);
+  const [data, setData] = useState<HealthResponse | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -28,10 +58,10 @@ export function StatusIndicator() {
       try {
         const res = await fetch('/api/dashboard/integration-health', { cache: 'no-store' });
         if (!res.ok || cancelled) return;
-        const j = (await res.json()) as { summary: HealthSummary };
-        if (!cancelled) setSummary(j.summary);
+        const j = (await res.json()) as HealthResponse;
+        if (!cancelled) setData(j);
       } catch {
-        /* leave summary null — light renders idle */
+        /* leave null — trigger renders idle */
       }
     }
     void load();
@@ -42,6 +72,7 @@ export function StatusIndicator() {
     };
   }, []);
 
+  const summary = data?.summary;
   const state: StatusLightState = !summary
     ? 'idle'
     : summary.failed > 0 || summary.expired > 0
@@ -50,7 +81,7 @@ export function StatusIndicator() {
         ? 'warn'
         : 'ok';
 
-  const title = !summary
+  const triggerTitle = !summary
     ? 'System status'
     : state === 'error'
       ? `${summary.failed + summary.expired} integration issue(s)`
@@ -59,13 +90,178 @@ export function StatusIndicator() {
         : 'All systems operational';
 
   return (
-    <Link
-      href="/status"
-      title={title}
-      aria-label={title}
-      className="inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-accent/40 transition-colors"
-    >
-      <StatusLight state={state} size="md" label={title} />
-    </Link>
+    <Popover>
+      <PopoverTrigger
+        title={triggerTitle}
+        aria-label={triggerTitle}
+        className="inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-accent/40 transition-colors"
+      >
+        <StatusLight state={state} size="md" label={triggerTitle} />
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-80 p-0">
+        <StatusSummary data={data} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function StatusSummary({ data }: { data: HealthResponse | null }) {
+  if (!data) {
+    return (
+      <div className="px-4 py-3">
+        <p className="text-sm text-muted-foreground">Loading system status…</p>
+      </div>
+    );
+  }
+
+  const failing = data.items.filter(
+    (i) => i.status === 'auth_failed' || i.status === 'unreachable',
+  );
+  const expired = data.items.filter(
+    (i) => i.tokenExpiry && i.tokenExpiry.daysRemaining <= 0,
+  );
+  const expiring = data.items.filter(
+    (i) =>
+      i.tokenExpiry &&
+      i.tokenExpiry.daysRemaining > 0 &&
+      i.tokenExpiry.daysRemaining <= 14,
+  );
+
+  const allOk = failing.length === 0 && expired.length === 0 && expiring.length === 0;
+
+  return (
+    <>
+      <div className="px-4 pt-3 pb-2">
+        <div className="flex items-center gap-2">
+          {allOk ? (
+            <>
+              <ShieldCheck className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+              <p className="text-sm font-medium">All systems operational</p>
+            </>
+          ) : (
+            <>
+              <Power className="h-4 w-4 text-destructive" />
+              <p className="text-sm font-medium">
+                {failing.length + expired.length + expiring.length} item(s) need attention
+              </p>
+            </>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground mt-1">
+          <span className="num">{data.summary.ok}</span> healthy ·{' '}
+          <span className="num">{data.summary.disabled}</span> disabled ·{' '}
+          <span className="num">{data.summary.notConfigured}</span> unconfigured
+        </p>
+      </div>
+
+      {failing.length > 0 && (
+        <>
+          <Separator />
+          <IssueGroup
+            title="Failing"
+            icon={<XCircle className="h-3.5 w-3.5 text-destructive" />}
+          >
+            {failing.map((i) => (
+              <IssueRow
+                key={i.key}
+                primary={i.name}
+                secondary={
+                  i.status === 'auth_failed' ? 'authentication failed' : 'unreachable'
+                }
+                tone="error"
+              />
+            ))}
+          </IssueGroup>
+        </>
+      )}
+
+      {expired.length > 0 && (
+        <>
+          <Separator />
+          <IssueGroup
+            title="Expired tokens"
+            icon={<KeyRound className="h-3.5 w-3.5 text-destructive" />}
+          >
+            {expired.map((i) => (
+              <IssueRow
+                key={i.key}
+                primary={i.name}
+                secondary={`expired ${Math.abs(i.tokenExpiry!.daysRemaining).toFixed(0)} d ago`}
+                tone="error"
+              />
+            ))}
+          </IssueGroup>
+        </>
+      )}
+
+      {expiring.length > 0 && (
+        <>
+          <Separator />
+          <IssueGroup
+            title="Expiring soon"
+            icon={<KeyRound className="h-3.5 w-3.5 text-amber-500" />}
+          >
+            {expiring.map((i) => (
+              <IssueRow
+                key={i.key}
+                primary={i.name}
+                secondary={`expires in ${i.tokenExpiry!.daysRemaining.toFixed(0)} d`}
+                tone="warn"
+              />
+            ))}
+          </IssueGroup>
+        </>
+      )}
+
+      <Separator />
+      <Link
+        href="/status"
+        className="flex items-center justify-between px-4 py-2.5 text-sm hover:bg-accent/40 transition-colors"
+      >
+        <span>View full status</span>
+        <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+      </Link>
+    </>
+  );
+}
+
+function IssueGroup({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="px-4 py-2 space-y-1">
+      <p className="metric-label flex items-center gap-1.5">
+        {icon}
+        {title}
+      </p>
+      <ul className="space-y-0.5 mt-1">{children}</ul>
+    </div>
+  );
+}
+
+function IssueRow({
+  primary,
+  secondary,
+  tone,
+}: {
+  primary: string;
+  secondary: string;
+  tone: 'error' | 'warn';
+}) {
+  const toneClass =
+    tone === 'error'
+      ? 'text-destructive'
+      : 'text-amber-700 dark:text-amber-400';
+  return (
+    <li className="flex items-center justify-between text-sm">
+      <span className="font-medium truncate">{primary}</span>
+      <span className={`text-xs num ${toneClass}`}>{secondary}</span>
+    </li>
   );
 }