refactor(alerts/ui): rewrite Inbox as DataTable with expandable rows

Replaces custom feed-row layout with the shared DataTable shell used
elsewhere in the app. Adds checkbox selection + bulk "Mark selected
read" toolbar alongside the existing "Mark all read". Uses DS
EmptyState for empty lists, severity-driven rowAccent for unread
tinting, and renderAlertExpanded for row detail.

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

ui/src/pages/Alerts/InboxPage.tsx

@@ -1,47 +1,177 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
-import { Button, SectionHeader, useToast } from '@cameleer/design-system';
+import { Link } from 'react-router';
+import { Inbox } from 'lucide-react';
+import {
+  Button, SectionHeader, DataTable, EmptyState, useToast,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
-import { useAlerts, useBulkReadAlerts } from '../../api/queries/alerts';
+import { SeverityBadge } from '../../components/SeverityBadge';
-import { AlertRow } from './AlertRow';
+import { AlertStateChip } from '../../components/AlertStateChip';
+import {
+  useAlerts, useAckAlert, useBulkReadAlerts, useMarkAlertRead,
+  type AlertDto,
+} from '../../api/queries/alerts';
+import { severityToAccent } from './severity-utils';
+import { formatRelativeTime } from './time-utils';
+import { renderAlertExpanded } from './alert-expanded';
 import css from './alerts-page.module.css';
+import tableStyles from '../../styles/table-section.module.css';
 
 export default function InboxPage() {
   const { data, isLoading, error } = useAlerts({ state: ['FIRING', 'ACKNOWLEDGED'], limit: 100 });
   const bulkRead = useBulkReadAlerts();
+  const markRead = useMarkAlertRead();
+  const ack = useAckAlert();
   const { toast } = useToast();
 
-  const unreadIds = useMemo(
+  const [selected, setSelected] = useState<Set<string>>(new Set());
-    () => (data ?? []).filter((a) => a.state === 'FIRING').map((a) => a.id),
-    [data],
-  );
-
-  if (isLoading) return <PageLoader />;
-  if (error) return <div className={css.page}>Failed to load alerts: {String(error)}</div>;
-
   const rows = data ?? [];
 
-  const onMarkAllRead = async () => {
+  const unreadIds = useMemo(
-    if (unreadIds.length === 0) return;
+    () => rows.filter((a) => a.state === 'FIRING').map((a) => a.id),
+    [rows],
+  );
+
+  const toggleSelected = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+
+  const onAck = async (id: string, title?: string) => {
     try {
-      await bulkRead.mutateAsync(unreadIds);
+      await ack.mutateAsync(id);
-      toast({ title: `Marked ${unreadIds.length} as read`, variant: 'success' });
+      toast({ title: 'Acknowledged', description: title, variant: 'success' });
+    } catch (e) {
+      toast({ title: 'Ack failed', description: String(e), variant: 'error' });
+    }
+  };
+
+  const onBulkRead = async (ids: string[]) => {
+    if (ids.length === 0) return;
+    try {
+      await bulkRead.mutateAsync(ids);
+      setSelected(new Set());
+      toast({ title: `Marked ${ids.length} as read`, variant: 'success' });
     } catch (e) {
       toast({ title: 'Bulk read failed', description: String(e), variant: 'error' });
     }
   };
 
+  const columns: Column<AlertDto>[] = [
+    {
+      key: 'select', header: '', width: '40px',
+      render: (_, row) => (
+        <input
+          type="checkbox"
+          checked={selected.has(row.id)}
+          onChange={() => toggleSelected(row.id)}
+          aria-label={`Select ${row.title ?? row.id}`}
+          onClick={(e) => e.stopPropagation()}
+        />
+      ),
+    },
+    {
+      key: 'severity', header: 'Severity', width: '110px',
+      render: (_, row) =>
+        row.severity ? <SeverityBadge severity={row.severity} /> : null,
+    },
+    {
+      key: 'state', header: 'State', width: '140px',
+      render: (_, row) =>
+        row.state ? <AlertStateChip state={row.state} silenced={row.silenced} /> : null,
+    },
+    {
+      key: 'title', header: 'Title',
+      render: (_, row) => {
+        const unread = row.state === 'FIRING';
+        return (
+          <div className={`${css.titleCell} ${unread ? css.titleCellUnread : ''}`}>
+            <Link to={`/alerts/inbox/${row.id}`} onClick={() => markRead.mutate(row.id)}>
+              {row.title ?? '(untitled)'}
+            </Link>
+            {row.message && <span className={css.titlePreview}>{row.message}</span>}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'age', header: 'Age', width: '100px', sortable: true,
+      render: (_, row) =>
+        row.firedAt ? (
+          <span title={row.firedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
+            {formatRelativeTime(row.firedAt)}
+          </span>
+        ) : '—',
+    },
+    {
+      key: 'ack', header: '', width: '70px',
+      render: (_, row) =>
+        row.state === 'FIRING' ? (
+          <Button size="sm" variant="secondary" onClick={() => onAck(row.id, row.title ?? undefined)}>
+            Ack
+          </Button>
+        ) : null,
+    },
+  ];
+
+  if (isLoading) return <PageLoader />;
+  if (error) return <div className={css.page}>Failed to load alerts: {String(error)}</div>;
+
+  const selectedIds = Array.from(selected);
+
   return (
     <div className={css.page}>
       <div className={css.toolbar}>
         <SectionHeader>Inbox</SectionHeader>
-        <Button variant="secondary" onClick={onMarkAllRead} disabled={bulkRead.isPending || unreadIds.length === 0}>
-          Mark all read
-        </Button>
       </div>
+
+      <div className={css.bulkBar}>
+        <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
+          {selectedIds.length > 0
+            ? `${selectedIds.length} selected`
+            : `${unreadIds.length} unread`}
+        </span>
+        <div style={{ marginLeft: 'auto', display: 'flex', gap: 'var(--space-sm)' }}>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onBulkRead(selectedIds)}
+            disabled={selectedIds.length === 0 || bulkRead.isPending}
+          >
+            Mark selected read
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onBulkRead(unreadIds)}
+            disabled={unreadIds.length === 0 || bulkRead.isPending}
+          >
+            Mark all read
+          </Button>
+        </div>
+      </div>
+
       {rows.length === 0 ? (
-        <div className={css.empty}>No open alerts for you in this environment.</div>
+        <EmptyState
+          icon={<Inbox size={32} />}
+          title="All clear"
+          description="No open alerts for you in this environment."
+        />
       ) : (
-        rows.map((a) => <AlertRow key={a.id} alert={a} unread={a.state === 'FIRING'} />)
+        <div className={tableStyles.tableSection}>
+          <DataTable<AlertDto & { id: string }>
+            columns={columns as Column<AlertDto & { id: string }>[]}
+            data={rows as Array<AlertDto & { id: string }>}
+            sortable
+            flush
+            rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
+            expandedContent={renderAlertExpanded}
+          />
+        </div>
       )}
     </div>
   );