refactor(alerts/ui): rewrite History as DataTable + DateRangePicker

Replaces custom feed rows with DataTable. Adds a DateRangePicker
filter (client-side) defaulting to the last 7 days. Client-side
range filter is a stopgap; a server-side range param is a future
enhancement captured in the design spec.

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

ui/src/pages/Alerts/HistoryPage.tsx

@@ -1,26 +1,116 @@
-import { SectionHeader } from '@cameleer/design-system';
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { History } from 'lucide-react';
+import {
+  SectionHeader, DataTable, EmptyState, DateRangePicker,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
-import { useAlerts } from '../../api/queries/alerts';
+import { SeverityBadge } from '../../components/SeverityBadge';
-import { AlertRow } from './AlertRow';
+import {
+  useAlerts, 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';
+
+/** Duration in s/m/h/d. Pure, best-effort. */
+function formatDuration(from?: string | null, to?: string | null): string {
+  if (!from || !to) return '—';
+  const ms = new Date(to).getTime() - new Date(from).getTime();
+  if (ms < 0 || Number.isNaN(ms)) return '—';
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
+  if (sec < 86_400) return `${Math.floor(sec / 3600)}h`;
+  return `${Math.floor(sec / 86_400)}d`;
+}
 
 export default function HistoryPage() {
+  const [dateRange, setDateRange] = useState({
+    start: new Date(Date.now() - 7 * 24 * 3600_000),
+    end: new Date(),
+  });
+
+  // useAlerts doesn't accept a time range today; filter client-side.
   const { data, isLoading, error } = useAlerts({ state: 'RESOLVED', limit: 200 });
 
+  const filtered = (data ?? []).filter((a) => {
+    if (!a.firedAt) return false;
+    const t = new Date(a.firedAt).getTime();
+    return t >= dateRange.start.getTime() && t <= dateRange.end.getTime();
+  });
+
+  const columns: Column<AlertDto>[] = [
+    {
+      key: 'severity', header: 'Severity', width: '110px',
+      render: (_, row) => row.severity ? <SeverityBadge severity={row.severity} /> : null,
+    },
+    {
+      key: 'title', header: 'Title',
+      render: (_, row) => (
+        <div className={css.titleCell}>
+          <Link to={`/alerts/inbox/${row.id}`}>{row.title ?? '(untitled)'}</Link>
+          {row.message && <span className={css.titlePreview}>{row.message}</span>}
+        </div>
+      ),
+    },
+    {
+      key: 'firedAt', header: 'Fired at', width: '140px', sortable: true,
+      render: (_, row) =>
+        row.firedAt ? (
+          <span title={row.firedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
+            {formatRelativeTime(row.firedAt)}
+          </span>
+        ) : '—',
+    },
+    {
+      key: 'resolvedAt', header: 'Resolved at', width: '140px', sortable: true,
+      render: (_, row) =>
+        row.resolvedAt ? (
+          <span title={row.resolvedAt} style={{ fontVariantNumeric: 'tabular-nums' }}>
+            {formatRelativeTime(row.resolvedAt)}
+          </span>
+        ) : '—',
+    },
+    {
+      key: 'duration', header: 'Duration', width: '90px',
+      render: (_, row) => formatDuration(row.firedAt, row.resolvedAt),
+    },
+  ];
+
   if (isLoading) return <PageLoader />;
   if (error) return <div className={css.page}>Failed to load history: {String(error)}</div>;
 
-  const rows = data ?? [];
-
   return (
     <div className={css.page}>
       <div className={css.toolbar}>
         <SectionHeader>History</SectionHeader>
       </div>
-      {rows.length === 0 ? (
+
-        <div className={css.empty}>No resolved alerts in retention window.</div>
+      <div className={css.filterBar}>
+        <DateRangePicker value={dateRange} onChange={setDateRange} />
+      </div>
+
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={<History size={32} />}
+          title="No resolved alerts"
+          description="Nothing in the selected date range. Try widening it."
+        />
       ) : (
-        rows.map((a) => <AlertRow key={a.id} alert={a} unread={false} />)
+        <div className={tableStyles.tableSection}>
+          <DataTable<AlertDto & { id: string }>
+            columns={columns as Column<AlertDto & { id: string }>[]}
+            data={filtered as Array<AlertDto & { id: string }>}
+            sortable
+            flush
+            rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
+            expandedContent={renderAlertExpanded}
+          />
+        </div>
       )}
     </div>
   );