availsync 0.1.0

package/frontend/app/admin/page.tsx

@@ -0,0 +1,747 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Activity, AlertTriangle, Building2, CreditCard, Mail, MessageSquare, RefreshCw, Search, Server, Shield } from 'lucide-react';
+import {
+  getAdminOrgDetail,
+  getAdminOverview,
+  getAdminSystem,
+  listAdminWaitlist,
+  listAdminSupportTickets,
+  listAdminOrgs,
+  logoutWorkspace,
+  updateAdminWaitlistLead,
+  updateAdminSupportTicket,
+  type AdminOrgDetail,
+  type AdminOrgRow,
+  type AdminOverview,
+  type AdminSystem,
+  type SupportTicket,
+  type WaitlistLead,
+} from '@/lib/api';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { AvailsyncLogo } from '@/components/brand/AvailsyncLogo';
+
+function formatDate(value: string | null) {
+  if (!value) return 'Never';
+  return new Intl.DateTimeFormat('da-DK', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date(value));
+}
+
+function planVariant(plan: string): 'neutral' | 'accent' | 'success' {
+  if (plan === 'free') return 'neutral';
+  if (plan === 'individual') return 'accent';
+  return 'success';
+}
+
+export default function AdminPage() {
+  const [overview, setOverview] = useState<AdminOverview | null>(null);
+  const [system, setSystem] = useState<AdminSystem | null>(null);
+  const [orgs, setOrgs] = useState<AdminOrgRow[]>([]);
+  const [tickets, setTickets] = useState<SupportTicket[]>([]);
+  const [waitlist, setWaitlist] = useState<WaitlistLead[]>([]);
+  const [selectedTicket, setSelectedTicket] = useState<SupportTicket | null>(null);
+  const [selectedLead, setSelectedLead] = useState<WaitlistLead | null>(null);
+  const [selectedOrg, setSelectedOrg] = useState<AdminOrgDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [accessDenied, setAccessDenied] = useState(false);
+  const [filters, setFilters] = useState({
+    q: '',
+    plan: '' as '' | 'free' | 'individual' | 'team',
+    active: '' as '' | 'today' | '7d' | '30d',
+  });
+
+  const filteredPlan = filters.plan || undefined;
+  const filteredActive = filters.active || undefined;
+
+  async function load() {
+    setLoading(true);
+    setError('');
+    setAccessDenied(false);
+    try {
+      const [overviewData, orgRows, systemData] = await Promise.all([
+        getAdminOverview(),
+        listAdminOrgs({
+          q: filters.q || undefined,
+          plan: filteredPlan,
+          active: filteredActive,
+          limit: 100,
+        }),
+        getAdminSystem(),
+      ]);
+      const [supportRows, waitlistRows] = await Promise.all([
+        listAdminSupportTickets({ limit: 25 }).catch(() => ({ tickets: [] })),
+        listAdminWaitlist({ limit: 25 }).catch(() => ({ leads: [] })),
+      ]);
+      setOverview(overviewData);
+      setOrgs(orgRows.orgs);
+      setSystem(systemData);
+      setTickets(supportRows.tickets);
+      setWaitlist(waitlistRows.leads);
+    } catch (err) {
+      const message = (err as Error).message;
+      if (message.includes('missing_workspace_session')) {
+        window.location.href = '/login';
+        return;
+      }
+      if (message === 'forbidden' || message.includes('Admin access')) {
+        setAccessDenied(true);
+        return;
+      }
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters.plan, filters.active]);
+
+  async function openOrg(orgId: string) {
+    setDetailLoading(true);
+    setError('');
+    try {
+      setSelectedOrg(await getAdminOrgDetail(orgId));
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setDetailLoading(false);
+    }
+  }
+
+  async function updateTicket(ticket: SupportTicket, status: SupportTicket['status']) {
+    try {
+      const result = await updateAdminSupportTicket(ticket.id, status);
+      setTickets((rows) => rows.map((row) => (row.id === ticket.id ? result.ticket : row)));
+      setSelectedTicket(result.ticket);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }
+
+  async function updateLead(lead: WaitlistLead, status: WaitlistLead['status']) {
+    try {
+      const result = await updateAdminWaitlistLead(lead.id, status);
+      setWaitlist((rows) => rows.map((row) => (row.id === lead.id ? result.lead : row)));
+      setSelectedLead(result.lead);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }
+
+  async function signOut() {
+    await logoutWorkspace().catch(() => {});
+    window.location.href = '/login';
+  }
+
+  const paidRate = useMemo(() => {
+    if (!overview?.total_workspaces) return '0%';
+    return `${Math.round((overview.paid_workspaces / overview.total_workspaces) * 100)}%`;
+  }, [overview]);
+
+  return (
+    <main className="min-h-screen bg-bg text-text-primary">
+      <header className="border-b border-border bg-surface">
+        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-3">
+            <AvailsyncLogo compact glow markClassName="h-8 w-8" />
+            <div>
+              <h1 className="text-heading font-semibold">Availsync Admin</h1>
+              <p className="text-body text-text-tertiary">Read-only operations dashboard</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" onClick={load} disabled={loading}>
+              <RefreshCw className="h-4 w-4" />
+              Refresh
+            </Button>
+            <Button variant="ghost" onClick={signOut}>Sign out</Button>
+          </div>
+        </div>
+      </header>
+
+      {accessDenied ? (
+        <div className="mx-auto max-w-xl px-6 py-16">
+          <div className="rounded border border-border bg-surface p-6">
+            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded border border-error/30 bg-error/10">
+              <Shield className="h-5 w-5 text-error" />
+            </div>
+            <h2 className="text-title font-semibold text-text-primary">Admin access required</h2>
+            <p className="mt-2 text-body leading-6 text-text-secondary">
+              This page is only available to internal Availsync admins listed in `ADMIN_EMAILS`.
+            </p>
+            <div className="mt-5 flex gap-2">
+              <Button href="/app" variant="secondary">Go to app</Button>
+              <Button onClick={signOut} variant="ghost">Sign out</Button>
+            </div>
+          </div>
+        </div>
+      ) : (
+      <>
+        <div className="mx-auto max-w-7xl px-6 py-6">
+        {error && (
+          <div className="mb-4 rounded border border-error/30 bg-error/10 p-3 text-body text-error">
+            {error}
+          </div>
+        )}
+
+        <SystemPanel system={system} />
+
+        <section className="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-7">
+          <Metric icon={Building2} label="Workspaces" value={overview?.total_workspaces ?? 0} sub={`${overview?.active_workspaces_7d ?? 0} active 7d`} />
+          <Metric icon={CreditCard} label="Paid" value={overview?.paid_workspaces ?? 0} sub={`${paidRate} · ${overview?.waitlist_new ?? 0} waitlist new`} />
+          <Metric icon={Server} label="Agents" value={overview?.total_agents ?? 0} sub={`${overview?.quiet_agents ?? 0} quiet · ${overview?.never_connected_agents ?? 0} never`} />
+          <Metric icon={Activity} label="API today" value={overview?.api_calls_today ?? 0} sub={`${overview?.api_calls_month ?? 0} month`} />
+          <Metric icon={AlertTriangle} label="Errors" value={overview?.errors_today ?? 0} />
+          <Metric icon={Shield} label="Work claims" value={overview?.active_work_claims ?? 0} />
+          <Metric icon={AlertTriangle} label="Blocked runs" value={overview?.blocked_agent_runs ?? 0} sub={`${overview?.conflicts_prevented_7d ?? 0} prevented 7d`} />
+        </section>
+
+        <SupportPanel
+          tickets={tickets}
+          onOpen={setSelectedTicket}
+        />
+
+        <WaitlistPanel
+          leads={waitlist}
+          onOpen={setSelectedLead}
+        />
+
+        <section className="rounded border border-border bg-surface">
+          <div className="flex flex-col gap-3 border-b border-border px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <h2 className="text-heading font-medium">Workspaces</h2>
+              <p className="text-body text-text-tertiary">Read-only account, plan, and usage overview.</p>
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-text-tertiary" />
+                <Input
+                  value={filters.q}
+                  onChange={(event) => setFilters({ ...filters, q: event.target.value })}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') load();
+                  }}
+                  className="pl-9"
+                  placeholder="Search org or owner"
+                />
+              </div>
+              <Select
+                value={filters.plan}
+                onChange={(event) => setFilters({ ...filters, plan: event.target.value as typeof filters.plan })}
+              >
+                <option value="">All plans</option>
+                <option value="free">Free</option>
+                <option value="individual">Individual</option>
+                <option value="team">Team</option>
+              </Select>
+              <Select
+                value={filters.active}
+                onChange={(event) => setFilters({ ...filters, active: event.target.value as typeof filters.active })}
+              >
+                <option value="">Any activity</option>
+                <option value="today">Active today</option>
+                <option value="7d">Active 7d</option>
+                <option value="30d">Active 30d</option>
+              </Select>
+              <Button variant="secondary" onClick={load}>Search</Button>
+            </div>
+          </div>
+
+          {loading ? (
+            <p className="p-4 text-body text-text-tertiary">Loading admin data...</p>
+          ) : orgs.length === 0 ? (
+            <p className="p-4 text-body text-text-tertiary">No workspaces match the filters.</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-border text-label uppercase text-text-tertiary">
+                    <th className="px-4 py-2 text-left font-medium">Workspace</th>
+                    <th className="px-4 py-2 text-left font-medium">Plan</th>
+                    <th className="px-4 py-2 text-left font-medium">Agents</th>
+                    <th className="px-4 py-2 text-left font-medium">API 24h</th>
+                    <th className="px-4 py-2 text-left font-medium">Errors</th>
+                    <th className="px-4 py-2 text-left font-medium">Work</th>
+                    <th className="px-4 py-2 text-left font-medium">Last activity</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orgs.map((org) => (
+                    <tr
+                      key={org.id}
+                      className="cursor-pointer border-b border-border transition hover:bg-surface-raised"
+                      onClick={() => openOrg(org.id)}
+                    >
+                      <td className="px-4 py-3">
+                        <div className="text-body font-medium text-text-primary">{org.name}</div>
+                        <div className="text-label text-text-tertiary">{org.owner_email || 'No owner email'}</div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <Badge variant={planVariant(org.plan)}>{org.plan}</Badge>
+                        <div className="mt-1 text-label text-text-tertiary">
+                          {org.subscription_status}{org.cancel_at_period_end ? ' · canceling' : ''}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-body text-text-secondary">
+                        {org.agent_count}/{org.agent_limit}
+                        <span className="ml-2 text-text-tertiary">· {org.connected_agent_count} online</span>
+                      </td>
+                      <td className="px-4 py-3 text-body text-text-secondary">
+                        {org.api_calls_24h}
+                        <span className="ml-2 text-text-tertiary">· {org.api_calls_month} month</span>
+                      </td>
+                      <td className="px-4 py-3 text-body text-text-secondary">{org.errors_24h}</td>
+                      <td className="px-4 py-3 text-body text-text-secondary">
+                        {org.active_work_claims} active
+                        <span className="ml-2 text-text-tertiary">· {org.protected_resources} resources</span>
+                      </td>
+                      <td className="px-4 py-3 text-body text-text-tertiary">{formatDate(org.last_activity_at)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+
+        {selectedOrg && (
+          <div className="fixed inset-0 z-50 flex justify-end">
+            <div className="absolute inset-0 bg-black/50" onClick={() => setSelectedOrg(null)} />
+            <aside className="relative h-full w-full max-w-2xl overflow-y-auto border-l border-border bg-surface p-6">
+              <div className="mb-5 flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-title font-semibold">{selectedOrg.org.name}</h2>
+                  <p className="mt-1 font-mono text-[12px] text-text-tertiary">{selectedOrg.org.id}</p>
+                </div>
+                <Badge variant={planVariant(selectedOrg.org.plan)}>{selectedOrg.org.plan}</Badge>
+              </div>
+
+              {detailLoading ? (
+                <p className="text-body text-text-tertiary">Loading detail...</p>
+              ) : (
+                <OrgDetail detail={selectedOrg} />
+              )}
+            </aside>
+          </div>
+        )}
+
+        {selectedTicket && (
+          <div className="fixed inset-0 z-50 flex justify-end">
+            <div className="absolute inset-0 bg-black/50" onClick={() => setSelectedTicket(null)} />
+            <aside className="relative h-full w-full max-w-xl overflow-y-auto border-l border-border bg-surface p-6">
+              <div className="mb-5 flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-title font-semibold">{selectedTicket.subject}</h2>
+                  <p className="mt-1 text-body text-text-tertiary">{selectedTicket.org_name || selectedTicket.org_id}</p>
+                </div>
+                <Badge variant={selectedTicket.status === 'open' ? 'error' : selectedTicket.status === 'in_review' ? 'warning' : 'success'}>
+                  {selectedTicket.status}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <Info label="Email" value={selectedTicket.email} />
+                <Info label="Plan" value={selectedTicket.plan} />
+                <Info label="Category" value={selectedTicket.category.replaceAll('_', ' ')} />
+                <Info label="Created" value={formatDate(selectedTicket.created_at)} />
+              </div>
+              <section className="mt-5 rounded border border-border bg-bg p-4">
+                <h3 className="text-body font-medium text-text-primary">Message</h3>
+                <p className="mt-2 whitespace-pre-wrap text-body leading-6 text-text-secondary">{selectedTicket.message}</p>
+              </section>
+              <section className="mt-5 rounded border border-border bg-bg p-4">
+                <h3 className="text-body font-medium text-text-primary">Safe context</h3>
+                <pre className="mt-2 overflow-auto rounded border border-border bg-surface p-3 text-[11px] text-text-secondary">
+                  {JSON.stringify(selectedTicket.context, null, 2)}
+                </pre>
+              </section>
+              <div className="mt-5 flex flex-wrap gap-2">
+                <Button variant="secondary" onClick={() => navigator.clipboard.writeText(selectedTicket.email)}>
+                  Copy email
+                </Button>
+                <Button variant="secondary" onClick={() => updateTicket(selectedTicket, 'in_review')}>
+                  Mark in review
+                </Button>
+                <Button variant="secondary" onClick={() => updateTicket(selectedTicket, 'closed')}>
+                  Mark closed
+                </Button>
+              </div>
+            </aside>
+          </div>
+        )}
+
+        {selectedLead && (
+          <div className="fixed inset-0 z-50 flex justify-end">
+            <div className="absolute inset-0 bg-black/50" onClick={() => setSelectedLead(null)} />
+            <aside className="relative h-full w-full max-w-xl overflow-y-auto border-l border-border bg-surface p-6">
+              <div className="mb-5 flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-title font-semibold">{selectedLead.email}</h2>
+                  <p className="mt-1 text-body text-text-tertiary">{selectedLead.org_name || selectedLead.org_id || 'Public lead'}</p>
+                </div>
+                <Badge variant={selectedLead.status === 'new' ? 'error' : selectedLead.status === 'contacted' ? 'warning' : 'success'}>
+                  {selectedLead.status}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <Info label="Plan" value={selectedLead.plan} />
+                <Info label="Source" value={selectedLead.source} />
+                <Info label="Created" value={formatDate(selectedLead.created_at)} />
+                <Info label="Workspace" value={selectedLead.org_name || selectedLead.org_id || '-'} />
+              </div>
+              <section className="mt-5 rounded border border-border bg-bg p-4">
+                <h3 className="text-body font-medium text-text-primary">Message</h3>
+                <p className="mt-2 whitespace-pre-wrap text-body leading-6 text-text-secondary">
+                  {selectedLead.message || 'No message.'}
+                </p>
+              </section>
+              <section className="mt-5 rounded border border-border bg-bg p-4">
+                <h3 className="text-body font-medium text-text-primary">Safe context</h3>
+                <pre className="mt-2 overflow-auto rounded border border-border bg-surface p-3 text-[11px] text-text-secondary">
+                  {JSON.stringify(selectedLead.context, null, 2)}
+                </pre>
+              </section>
+              <div className="mt-5 flex flex-wrap gap-2">
+                <Button variant="secondary" onClick={() => navigator.clipboard.writeText(selectedLead.email)}>
+                  Copy email
+                </Button>
+                <Button variant="secondary" onClick={() => updateLead(selectedLead, 'contacted')}>
+                  Mark contacted
+                </Button>
+                <Button variant="secondary" onClick={() => updateLead(selectedLead, 'closed')}>
+                  Mark closed
+                </Button>
+              </div>
+            </aside>
+          </div>
+        )}
+      </>
+      )}
+    </main>
+  );
+}
+
+function WaitlistPanel({
+  leads,
+  onOpen,
+}: {
+  leads: WaitlistLead[];
+  onOpen: (lead: WaitlistLead) => void;
+}) {
+  const newCount = leads.filter((lead) => lead.status === 'new').length;
+
+  return (
+    <section className="mb-6 rounded border border-border bg-surface">
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <Mail className="h-4 w-4 text-accent" />
+            <h2 className="text-heading font-medium">Paid plan waitlist</h2>
+          </div>
+          <p className="text-body text-text-tertiary">People who asked for Individual or Team access.</p>
+        </div>
+        <Badge variant={newCount > 0 ? 'error' : 'neutral'}>{newCount} new</Badge>
+      </div>
+      {leads.length === 0 ? (
+        <p className="p-4 text-body text-text-tertiary">No waitlist leads yet.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border text-label uppercase text-text-tertiary">
+                <th className="px-4 py-2 text-left font-medium">Time</th>
+                <th className="px-4 py-2 text-left font-medium">Email</th>
+                <th className="px-4 py-2 text-left font-medium">Plan</th>
+                <th className="px-4 py-2 text-left font-medium">Workspace</th>
+                <th className="px-4 py-2 text-left font-medium">Source</th>
+                <th className="px-4 py-2 text-left font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {leads.slice(0, 8).map((lead) => (
+                <tr
+                  key={lead.id}
+                  className="cursor-pointer border-b border-border transition hover:bg-surface-raised"
+                  onClick={() => onOpen(lead)}
+                >
+                  <td className="px-4 py-3 text-body text-text-tertiary">{formatDate(lead.created_at)}</td>
+                  <td className="px-4 py-3 text-body text-text-primary">{lead.email}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={planVariant(lead.plan)}>{lead.plan}</Badge>
+                  </td>
+                  <td className="px-4 py-3 text-body text-text-secondary">{lead.org_name || lead.org_id || 'Public'}</td>
+                  <td className="px-4 py-3 text-body text-text-secondary">{lead.source}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={lead.status === 'new' ? 'error' : lead.status === 'contacted' ? 'warning' : 'success'}>
+                      {lead.status}
+                    </Badge>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function SupportPanel({
+  tickets,
+  onOpen,
+}: {
+  tickets: SupportTicket[];
+  onOpen: (ticket: SupportTicket) => void;
+}) {
+  const openCount = tickets.filter((ticket) => ticket.status === 'open').length;
+
+  return (
+    <section className="mb-6 rounded border border-border bg-surface">
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <MessageSquare className="h-4 w-4 text-accent" />
+            <h2 className="text-heading font-medium">Support tickets</h2>
+          </div>
+          <p className="text-body text-text-tertiary">Paid customer requests. Reply manually by email.</p>
+        </div>
+        <Badge variant={openCount > 0 ? 'error' : 'neutral'}>{openCount} open</Badge>
+      </div>
+      {tickets.length === 0 ? (
+        <p className="p-4 text-body text-text-tertiary">No support tickets yet.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border text-label uppercase text-text-tertiary">
+                <th className="px-4 py-2 text-left font-medium">Time</th>
+                <th className="px-4 py-2 text-left font-medium">Workspace</th>
+                <th className="px-4 py-2 text-left font-medium">Email</th>
+                <th className="px-4 py-2 text-left font-medium">Subject</th>
+                <th className="px-4 py-2 text-left font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tickets.slice(0, 8).map((ticket) => (
+                <tr
+                  key={ticket.id}
+                  className="cursor-pointer border-b border-border transition hover:bg-surface-raised"
+                  onClick={() => onOpen(ticket)}
+                >
+                  <td className="px-4 py-3 text-body text-text-tertiary">{formatDate(ticket.created_at)}</td>
+                  <td className="px-4 py-3 text-body text-text-primary">{ticket.org_name || ticket.org_id}</td>
+                  <td className="px-4 py-3 text-body text-text-secondary">{ticket.email}</td>
+                  <td className="px-4 py-3">
+                    <div className="text-body text-text-primary">{ticket.subject}</div>
+                    <div className="text-label text-text-tertiary">{ticket.category.replaceAll('_', ' ')} · {ticket.plan}</div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <Badge variant={ticket.status === 'open' ? 'error' : ticket.status === 'in_review' ? 'warning' : 'success'}>
+                      {ticket.status}
+                    </Badge>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function statusVariant(status: string): 'success' | 'warning' | 'error' | 'neutral' {
+  if (status === 'ok' || status === 'applied') return 'success';
+  if (status === 'degraded' || status === 'running') return 'warning';
+  if (status === 'error' || status === 'failed') return 'error';
+  return 'neutral';
+}
+
+function SystemPanel({ system }: { system: AdminSystem | null }) {
+  const missing = system?.env.missing ?? [];
+  const readiness = [
+    { label: 'Database', ok: Boolean(system?.database.connected) },
+    { label: 'Migrations', ok: Boolean(system && system.migrations.failed === 0 && system.migrations.pending === 0) },
+    { label: 'Stripe key', ok: Boolean(system?.stripe.configured) },
+    { label: 'Stripe webhook', ok: Boolean(system?.stripe.webhook_configured) },
+    { label: 'Individual price', ok: Boolean(system?.stripe.individual_price_configured) },
+    { label: 'Team price', ok: Boolean(system?.stripe.team_price_configured) },
+    { label: 'Required env', ok: Boolean(system?.env.ok) },
+  ];
+
+  return (
+    <section className="mb-6 rounded border border-border bg-surface">
+      <div className="flex flex-col gap-3 border-b border-border px-4 py-3 md:flex-row md:items-start md:justify-between">
+        <div>
+          <div className="flex items-center gap-2">
+            <h2 className="text-heading font-medium">System</h2>
+            <Badge variant={statusVariant(system?.status || 'neutral')}>{system?.status || 'loading'}</Badge>
+          </div>
+          <p className="mt-1 text-body text-text-tertiary">
+            Runtime, deployment and environment readiness. Values are redacted.
+          </p>
+        </div>
+        <div className="text-right text-label text-text-tertiary">
+          <div>v{system?.app.version || '-'}</div>
+          <div>{system?.app.git_commit?.slice(0, 12) || 'unknown'}</div>
+          <div>{system?.app.node_version || '-'}</div>
+        </div>
+      </div>
+      <div className="grid gap-3 p-4 lg:grid-cols-[1.2fr_1fr]">
+        <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+          <Info label="Migrations" value={system ? `${system.migrations.applied}/${system.migrations.total} applied` : '-'} />
+          <Info label="Pending" value={String(system?.migrations.pending ?? 0)} />
+          <Info label="Failed" value={String(system?.migrations.failed ?? 0)} />
+          <Info label="Latest" value={system?.migrations.latest?.filename || '-'} />
+        </div>
+        <div className="rounded border border-border bg-bg p-3">
+          <div className="mb-2 text-label uppercase text-text-tertiary">Readiness</div>
+          <div className="flex flex-wrap gap-2">
+            {readiness.map((item) => (
+              <Badge key={item.label} variant={item.ok ? 'success' : 'warning'}>
+                {item.label}
+              </Badge>
+            ))}
+          </div>
+          {missing.length > 0 && (
+            <div className="mt-3 text-body text-warning">
+              Missing env: {missing.join(', ')}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Metric({
+  icon: Icon,
+  label,
+  value,
+  sub,
+}: {
+  icon: typeof Building2;
+  label: string;
+  value: number | string;
+  sub?: string;
+}) {
+  return (
+    <div className="rounded border border-border bg-surface p-4">
+      <div className="mb-2 flex items-center gap-2 text-label uppercase text-text-tertiary">
+        <Icon className="h-3.5 w-3.5" />
+        {label}
+      </div>
+      <div className="text-title font-semibold text-text-primary">{value}</div>
+      {sub && <div className="mt-0.5 text-body text-text-tertiary">{sub}</div>}
+    </div>
+  );
+}
+
+function OrgDetail({ detail }: { detail: AdminOrgDetail }) {
+  return (
+    <div className="space-y-5">
+      <section className="grid grid-cols-2 gap-2">
+        <Info label="Owner" value={detail.users.find((user) => user.role === 'owner')?.email || detail.users[0]?.email || '-'} />
+        <Info label="Created" value={formatDate(detail.org.created_at)} />
+        <Info label="Stripe customer" value={detail.org.has_stripe_customer ? 'Yes' : 'No'} />
+        <Info label="Stripe subscription" value={detail.org.has_stripe_subscription ? 'Yes' : 'No'} />
+        <Info label="Subscription status" value={`${detail.org.subscription_status}${detail.org.cancel_at_period_end ? ' · canceling' : ''}`} />
+        <Info label="Renewal" value={formatDate(detail.org.current_period_end)} />
+        <Info label="API calls 24h" value={String(detail.usage.api_calls_24h)} />
+        <Info label="API calls month" value={String(detail.usage.api_calls_month)} />
+        <Info label="Errors 24h" value={String(detail.usage.errors_24h)} />
+        <Info label="Connected agents" value={`${detail.usage.connected_agents}/${detail.usage.agents}`} />
+        <Info label="Quiet agents" value={String(detail.usage.quiet_agents)} />
+        <Info label="Never connected" value={String(detail.usage.never_connected_agents)} />
+        <Info label="Prevented 7d" value={String(detail.usage.conflicts_prevented_7d)} />
+        <Info label="Resources" value={String(detail.usage.protected_resources)} />
+        <Info label="Blocked runs" value={String(detail.usage.blocked_agent_runs)} />
+      </section>
+
+      <Panel title="Users">
+        {detail.users.map((user) => (
+          <Row key={user.id} primary={user.email} secondary={`${user.role} · ${formatDate(user.created_at)}`} />
+        ))}
+      </Panel>
+
+      <Panel title="Agents">
+        {detail.agents.length === 0 ? (
+          <p className="text-body text-text-tertiary">No agents.</p>
+        ) : (
+          detail.agents.map((agent) => (
+            <Row
+              key={agent.id}
+              primary={agent.name}
+              secondary={`${agent.agent_type} · priority ${agent.priority} · last ${formatDate(agent.last_activity_at)}`}
+            />
+          ))
+        )}
+      </Panel>
+
+      <Panel title="Recent activity">
+        {detail.recent_activity.length === 0 ? (
+          <p className="text-body text-text-tertiary">No activity.</p>
+        ) : (
+          detail.recent_activity.map((event) => (
+            <Row
+              key={event.id}
+              primary={`${event.activity_type} · ${event.status}`}
+              secondary={`${event.agent_name || 'Unknown'} · ${event.error_code || event.endpoint || '-'} · ${formatDate(event.created_at)}`}
+            />
+          ))
+        )}
+      </Panel>
+
+      <Panel title="Recent work events">
+        {detail.recent_work_events.length === 0 ? (
+          <p className="text-body text-text-tertiary">No work events.</p>
+        ) : (
+          detail.recent_work_events.map((event) => (
+            <Row
+              key={event.id}
+              primary={`${event.event_type} · ${event.resource_key || '-'}`}
+              secondary={`${event.agent_name || 'Unknown'} · ${event.actor_label || event.actor_type || '-'} · ${formatDate(event.created_at)}`}
+            />
+          ))
+        )}
+      </Panel>
+    </div>
+  );
+}
+
+function Info({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded border border-border bg-bg p-3">
+      <div className="text-label uppercase text-text-tertiary">{label}</div>
+      <div className="mt-1 break-words text-body text-text-primary">{value}</div>
+    </div>
+  );
+}
+
+function Panel({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="rounded border border-border bg-bg">
+      <h3 className="border-b border-border px-3 py-2 text-body font-medium text-text-primary">{title}</h3>
+      <div className="divide-y divide-border p-3">{children}</div>
+    </section>
+  );
+}
+
+function Row({ primary, secondary }: { primary: string; secondary: string }) {
+  return (
+    <div className="py-2 first:pt-0 last:pb-0">
+      <div className="text-body text-text-primary">{primary}</div>
+      <div className="text-label text-text-tertiary">{secondary}</div>
+    </div>
+  );
+}