feat(ui): email dashboard UX refactor — split-view, row polish, dashboard (PHASES 1/3/4)

Batch of 4 parallel units, rebased onto current develop and integrated:
- PHASE 1 split-view: clicking an email opens an in-place, collapsible + resizable
  reading pane (shared EmailDetail extracted from Senders) instead of a new tab;
  list stays interactive, selection preserved, mobile stacks (<768px); list gains
  Skeleton loading + EmptyState. (FolderView, SearchResults, +EmailDetail, +split.css)
- PHASE 3 row polish: EmailRow gains onOpen (Gmail fallback kept), a new accessible
  Checkbox primitive (ui/checkbox.jsx), 44px rows, clearer hierarchy + hover; keeps
  the search why-matched highlight rendering. (EmailRow, ui/checkbox, styles.css)
- PHASE 4 bulk+keys: BulkToolbar hierarchy/responsive/clear-selection; keyboard nav
  adds ArrowUp/Down + u=unread, hardened input guard. (BulkToolbar, useListKeyboardNav)
- PHASE 3/4 dashboard: remove dead HeatmapWidget, replace CategoryHeatmap with a
  clickable Emails-by-Category bar (a11y: rank by text+count, not colour); Skeleton +
  EmptyState on widgets. (widgets, Dashboard, client.js, styles.css)

Each unit was self-code-reviewed and built green; integrated build passes. Supersedes
PRs #40-43 (their branches had a stale 38-commit base).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitignore

@@ -70,3 +70,6 @@ vendor/
 coverage/
 .cache/
 tmp/
+
+# agent worktrees (never commit)
+.claude/worktrees/

frontend/src/api/client.js

@@ -38,7 +38,6 @@ export const AnalyticsApi = {
   health: () => api.get('/analytics/health').then((r) => r.data),
   topSenders: (take = 20) => api.get(`/analytics/top-senders?take=${take}`).then((r) => r.data),
   volume: (days = 90) => api.get(`/analytics/volume?days=${days}`).then((r) => r.data),
-  heatmap: () => api.get('/analytics/heatmap').then((r) => r.data),
   categoryHeatmap: () => api.get('/analytics/category-heatmap').then((r) => r.data),
   attachments: () => api.get('/analytics/attachments').then((r) => r.data),
   sidebarCounts: () => api.get('/analytics/sidebar-counts').then((r) => r.data),

frontend/src/components/BulkToolbar.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { MailOpen, Mail, Star, Archive, Trash2 } from 'lucide-react';
+import { MailOpen, Mail, Star, Archive, Trash2, X } from 'lucide-react';
 import { BulkApi } from '../api/client.js';
 import {
   Button, useToast,
@@ -49,9 +49,38 @@ export default function BulkToolbar({ selectedIds, onDone, onClear }) {
   };
 
   return (
-    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 shadow-sm">
-      <span className="text-sm font-medium">{count} selected</span>
-      <div className="flex-1" />
+    <div
+      role="toolbar"
+      aria-label={`${count} email${count === 1 ? '' : 's'} selected`}
+      className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg border border-border bg-card px-3 py-2 shadow-sm"
+    >
+      {/* Selection count — primary emphasis so it reads first. */}
+      <div className="flex items-center gap-2">
+        <span
+          aria-hidden="true"
+          className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-primary px-2 text-sm font-semibold tabular-nums text-primary-foreground"
+        >
+          {count}
+        </span>
+        <span className="text-sm font-medium text-foreground">
+          selected
+        </span>
+        {/* Obvious clear-selection affordance, kept next to the count. */}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          disabled={busy}
+          onClick={onClear}
+          aria-label="Clear selection"
+          title="Clear selection"
+        >
+          <X />
+        </Button>
+      </div>
+
+      <div className="flex-1 basis-full sm:basis-0" />
+
+      <div className="flex flex-wrap items-center gap-2">
         <Button variant="ghost" size="sm" disabled={busy} onClick={() => apply(BulkApi.markRead, 'read', 'Marked read')}>
           <MailOpen /> Read
         </Button>
@@ -67,7 +96,7 @@ export default function BulkToolbar({ selectedIds, onDone, onClear }) {
         <Button variant="danger-outline" size="sm" disabled={busy} onClick={() => setConfirmTrash(true)}>
           <Trash2 /> Trash
         </Button>
-      <Button variant="ghost" size="sm" disabled={busy} onClick={onClear}>Cancel</Button>
+      </div>
 
       <Dialog open={confirmTrash} onOpenChange={(o) => !busy && setConfirmTrash(o)}>
         <DialogContent>

frontend/src/components/EmailDetail.jsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { EmailApi } from '../api/client.js';
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+const fmtSize = (b) => {
+  if (!b) return '';
+  if (b < 1024) return `${b} B`;
+  if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
+  return `${(b / 1048576).toFixed(1)} MB`;
+};
+
+/**
+ * Shared reading-pane / full single-email view.
+ *
+ * Accepts either an `email` summary object (as emitted by the list rows) or a
+ * bare `emailId`. Fetches the full detail via EmailApi.get(id) and the AI
+ * summary lazily via EmailApi.summary(id). Renders subject, metadata, an AI
+ * summary button, the body, and per-email actions including "Open in Gmail".
+ *
+ * `onClose` collapses the pane.
+ */
+export default function EmailDetail({ email: summary, emailId, onClose }) {
+  const id = summary?.id ?? emailId;
+
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [aiSummary, setAiSummary] = useState(null);
+  const [aiLoading, setAiLoading] = useState(false);
+
+  useEffect(() => {
+    if (id == null) return;
+    let cancelled = false;
+    setDetail(null);
+    setLoading(true);
+    setAiSummary(null);
+    setAiLoading(false);
+    EmailApi.get(id)
+      .then((d) => { if (!cancelled) setDetail(d); })
+      .catch(() => { if (!cancelled) setDetail(null); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [id]);
+
+  const email = detail ?? summary ?? {};
+
+  const fetchAiSummary = () => {
+    if (id == null) return;
+    setAiLoading(true);
+    EmailApi.summary(id)
+      .then((r) => setAiSummary(r.summary))
+      .catch(() => setAiSummary(null))
+      .finally(() => setAiLoading(false));
+  };
+
+  const openInGmail = () => window.open(
+    `https://mail.google.com/mail/u/0/#all/${email.gmailMessageId}`,
+    '_blank', 'noopener,noreferrer'
+  );
+
+  return (
+    <div className="sv-detail">
+      <div className="sv-detail-topbar">
+        <button className="sv-close" onClick={onClose} aria-label="Close reading pane" title="Close">
+          ✕
+        </button>
+      </div>
+
+      <div className="sv-detail-header">
+        <div className="sv-detail-subject">{email.subject || '(no subject)'}</div>
+        <div className="sv-detail-meta">
+          <span>{email.senderDisplayName || email.senderAddress}</span>
+          {email.sentAtUtc && (
+            <>
+              <span className="sv-detail-sep">·</span>
+              <span>{new Date(email.sentAtUtc).toLocaleString()}</span>
+            </>
+          )}
+          {email.sizeEstimateBytes > 0 && (
+            <>
+              <span className="sv-detail-sep">·</span>
+              <span>{fmtSize(email.sizeEstimateBytes)}</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {!loading && (
+        <div className="sv-ai-summary">
+          {aiSummary != null ? (
+            <div className="sv-ai-summary-text">✨ {aiSummary}</div>
+          ) : (
+            <button className="btn-sm" onClick={fetchAiSummary} disabled={aiLoading}>
+              {aiLoading ? 'Summarising…' : '✨ AI summary'}
+            </button>
+          )}
+        </div>
+      )}
+
+      {loading && <div className="sv-body-loading muted">Loading message…</div>}
+
+      {!loading && detail?.bodyText && (
+        <div className="sv-body">{detail.bodyText}</div>
+      )}
+
+      {!loading && !detail?.bodyText && email.snippet && (
+        <div className="sv-snippet">{email.snippet}</div>
+      )}
+
+      <div className="sv-detail-actions">
+        <button className="btn-sm" onClick={openInGmail}>Open in Gmail ↗</button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/EmailRow.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { EmailApi } from '../api/client.js';
+import { Checkbox } from './ui/checkbox.jsx';
 
 const fmtDate = (iso) => {
   const d = new Date(iso);
@@ -35,7 +36,7 @@ function renderHighlight(s) {
   return out;
 }
 
-export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused }) {
+export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused, onOpen }) {
   const [email, setEmail] = useState(initial);
   const [acting, setActing] = useState(false);
 
@@ -88,12 +89,16 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
   return (
     <tr
       className={`email-row${email.isUnread ? ' email-row--unread' : ''}${acting ? ' email-row--acting' : ''}${focused ? ' email-row--focused' : ''}`}
-      onClick={openInGmail}
-      title="Open in Gmail"
+      onClick={() => onOpen ? onOpen(email) : openInGmail()}
+      title={onOpen ? 'Open' : 'Open in Gmail'}
     >
       {onToggleSelect && (
         <td className="el-select" onClick={(e) => e.stopPropagation()}>
-          <input type="checkbox" checked={!!selected} onChange={() => onToggleSelect(email.id)} />
+          <Checkbox
+            checked={!!selected}
+            onCheckedChange={() => onToggleSelect(email.id)}
+            aria-label={selected ? 'Deselect email' : 'Select email'}
+          />
         </td>
       )}
       <td className="el-unread">{email.isUnread && <span className="unread-dot" />}</td>
@@ -103,8 +108,8 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
       <td className="el-subject">
         <span className="el-subj-text">{email.subject || '(no subject)'}</span>
         {email.matchHighlight
-          ? <span className="el-snippet"> — {renderHighlight(email.matchHighlight)}</span>
-          : email.snippet && <span className="el-snippet"> — {email.snippet}</span>}
+          ? <span className="el-snippet">{renderHighlight(email.matchHighlight)}</span>
+          : email.snippet && <span className="el-snippet">{email.snippet}</span>}
       </td>
       <td className="el-meta">
         {email.hasAttachments && <span className="el-attach" title="Has attachment">📎</span>}
@@ -134,6 +139,11 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
             disabled={email._unsubDone}
           >{email._unsubDone ? '✓' : '✉✕'}</button>
         )}
+        <button
+          className="action-btn"
+          title="Open in Gmail"
+          onClick={(e) => { e.stopPropagation(); openInGmail(); }}
+        >↗</button>
         <button
           className="action-btn action-btn--danger"
           title="Move to trash"

frontend/src/components/ui/checkbox.jsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+
+/**
+ * Accessible, design-token styled checkbox.
+ * Wraps Radix Checkbox so it is keyboard-accessible with a visible focus ring.
+ * Accepts `checked`, `onCheckedChange` (Radix) and, for convenience, `onChange`
+ * (called with a synthetic-ish `{ target: { checked } }`) so it can drop into
+ * places that previously used a bare <input type="checkbox">.
+ */
+const Checkbox = forwardRef(function Checkbox(
+  { className, onCheckedChange, onChange, ...props },
+  ref
+) {
+  const handleCheckedChange = (checked) => {
+    onCheckedChange?.(checked);
+    onChange?.({ target: { checked } });
+  };
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      onCheckedChange={handleCheckedChange}
+      className={cn(
+        'peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-border bg-card transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        'hover:border-primary/60',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="h-3 w-3" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+export { Checkbox };

frontend/src/components/ui/index.js

@@ -2,6 +2,7 @@
 export { Button, buttonVariants } from './button.jsx';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card.jsx';
 export { Badge, badgeVariants } from './badge.jsx';
+export { Checkbox } from './checkbox.jsx';
 export { Input, Textarea } from './input.jsx';
 export { Switch } from './switch.jsx';
 export { Separator } from './separator.jsx';

frontend/src/components/widgets.jsx

@@ -1,13 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Bar, Line, Doughnut } from 'react-chartjs-2';
+import { Line, Doughnut } from 'react-chartjs-2';
+import { Inbox } from 'lucide-react';
 import { AnalyticsApi } from '../api/client.js';
+import { Skeleton } from './ui/skeleton.jsx';
+import { EmptyState } from './ui/misc.jsx';
 import {
-  Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement,
+  Chart as ChartJS, CategoryScale, LinearScale, PointElement,
   LineElement, ArcElement, Tooltip, Legend
 } from 'chart.js';
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, ArcElement, Tooltip, Legend);
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Tooltip, Legend);
 
 const fmtBytes = (b) => {
   if (!b) return '0 B';
@@ -77,32 +80,6 @@ export function VolumeWidget({ volume }) {
   );
 }
 
-export function HeatmapWidget({ heatmap }) {
-  if (!heatmap) return <Empty />;
-  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-  const max = Math.max(1, ...heatmap.map((c) => c.count));
-  const grid = {};
-  heatmap.forEach((c) => { grid[`${c.dayOfWeek}-${c.hour}`] = c.count; });
-  return (
-    <div className="widget">
-      <h3>Activity Heatmap</h3>
-      <div className="heatmap">
-        {days.map((d, dow) => (
-          <div className="hm-row" key={dow}>
-            <span className="hm-day">{d}</span>
-            {Array.from({ length: 24 }, (_, h) => {
-              const v = grid[`${dow}-${h}`] || 0;
-              return <span key={h} className="hm-cell" style={{ opacity: 0.1 + 0.9 * (v / max) }} title={`${d} ${h}:00 — ${v}`} />;
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
 // Maps EmailCategory enum name → folder slug or search query
 const CAT_SLUG = {
   Finance:          '/app/folder/finance',
@@ -135,41 +112,64 @@ const CAT_SLUG = {
   Unknown:          '/app/folder/allmail',
 };
 
-export function CategoryHeatmapWidget() {
+// "Emails by Category" — ranked horizontal bar list. Aggregates the
+// category×day-of-week cells into per-category totals; each bar links to
+// that category's folder via CAT_SLUG.
+export function CategoryBreakdownWidget() {
   const [cells, setCells] = useState(null);
   const navigate = useNavigate();
   useEffect(() => { AnalyticsApi.categoryHeatmap().then(setCells).catch(() => setCells([])); }, []);
 
-  if (!cells) return <div className="widget"><div className="muted">Loading…</div></div>;
-  if (cells.length === 0) return <div className="widget"><h3>Category Heatmap</h3><div className="muted">No data yet — run a sync.</div></div>;
+  if (!cells) {
+    return (
+      <div className="widget">
+        <h3>Emails by Category</h3>
+        <div className="cat-bars">
+          {Array.from({ length: 6 }, (_, i) => <Skeleton key={i} className="h-6 w-full" />)}
+        </div>
+      </div>
+    );
+  }
 
-  const categories = [...new Set(cells.map((c) => c.category))].sort();
-  const max = Math.max(1, ...cells.map((c) => c.count));
-  const grid = {};
-  cells.forEach((c) => { grid[`${c.category}-${c.dayOfWeek}`] = c.count; });
+  const totals = {};
+  cells.forEach((c) => { totals[c.category] = (totals[c.category] || 0) + c.count; });
+  const ranked = Object.entries(totals)
+    .map(([category, count]) => ({ category, count }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 8);
+
+  if (ranked.length === 0) {
+    return (
+      <div className="widget">
+        <h3>Emails by Category</h3>
+        <EmptyState icon={Inbox} title="No data yet — run a sync" description="Category totals appear once your inbox has been synced." />
+      </div>
+    );
+  }
+
+  const max = Math.max(1, ...ranked.map((r) => r.count));
 
   return (
     <div className="widget">
-      <h3>Category Heatmap</h3>
-      <div className="cat-heatmap">
-        <div className="chm-row chm-head">
-          <span className="chm-label" />
-          {DOW.map((d) => <span key={d} className="chm-col">{d}</span>)}
-        </div>
-        {categories.map((cat) => {
-          const dest = CAT_SLUG[cat];
+      <h3>Emails by Category</h3>
+      <div className="cat-bars">
+        {ranked.map(({ category, count }) => {
+          const dest = CAT_SLUG[category];
           return (
-            <div className="chm-row" key={cat}>
-              <span
-                className={`chm-label${dest ? ' chm-label--link' : ''}`}
-                title={dest ? `View ${cat} emails` : cat}
+            <button
+              type="button"
+              className={`cat-bar${dest ? ' cat-bar--link' : ''}`}
+              key={category}
+              disabled={!dest}
+              title={dest ? `View ${category} emails` : category}
               onClick={dest ? () => navigate(dest) : undefined}
-              >{cat}</span>
-              {DOW.map((_, dow) => {
-                const v = grid[`${cat}-${dow}`] || 0;
-                return <span key={dow} className="chm-cell" style={{ opacity: 0.12 + 0.88 * (v / max) }} title={`${cat} · ${DOW[dow]} — ${v}`}>{v || ''}</span>;
-              })}
-            </div>
+            >
+              <span className="cat-bar-label">{category}</span>
+              <span className="cat-bar-track">
+                <span className="cat-bar-fill" style={{ width: `${(count / max) * 100}%` }} />
+              </span>
+              <span className="cat-bar-count">{count.toLocaleString()}</span>
+            </button>
           );
         })}
       </div>
@@ -196,4 +196,10 @@ export function StorageWidget({ bytes }) {
   return <StatCard label="Estimated Storage" value={fmtBytes(bytes)} />;
 }
 
-function Empty() { return <div className="widget"><div className="muted">No data yet — run a sync.</div></div>; }
+function Empty() {
+  return (
+    <div className="widget">
+      <EmptyState icon={Inbox} title="No data yet — run a sync" description="This widget populates after your inbox has been synced." />
+    </div>
+  );
+}

frontend/src/hooks/useListKeyboardNav.js

@@ -2,9 +2,15 @@ import { useEffect, useState } from 'react';
 import { BulkApi } from '../api/client.js';
 
 /// <summary>
-/// j/k move focus down/up the list, e archives the focused email, # (shift+3)
-/// trashes it. Ignored while an input/textarea/select has focus, or while
-/// the "/" search shortcut is active, so typing is never hijacked.
+/// Keyboard navigation for an email list. Shortcuts:
+///   j / ArrowDown  move focus down
+///   k / ArrowUp    move focus up
+///   e              archive the focused email
+///   u              mark the focused email unread
+///   #  (shift+3)   trash the focused email
+/// All shortcuts are ignored while an input/textarea/select (or any
+/// contenteditable) has focus, and modifier chords (Ctrl/Cmd/Alt) are left
+/// alone, so typing and browser/OS shortcuts are never hijacked.
 /// `onRemoved(id)` lets the caller drop the row from local state after a
 /// successful archive/trash.
 /// </summary>
@@ -12,31 +18,59 @@ export default function useListKeyboardNav(emails, onRemoved) {
   const [focusedId, setFocusedId] = useState(null);
 
   useEffect(() => {
+    const isEditable = (el) => {
+      if (!el) return false;
+      const tag = el.tagName;
+      return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
+    };
+
     const handler = async (e) => {
-      const tag = document.activeElement?.tagName;
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      // Never hijack typing or modifier chords (Ctrl+C, Cmd+K, Alt+…).
+      if (isEditable(document.activeElement)) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
       if (!emails.length) return;
 
       const idx = emails.findIndex((x) => x.id === focusedId);
 
-      if (e.key === 'j') {
+      switch (e.key) {
+        case 'j':
+        case 'ArrowDown': {
           e.preventDefault();
           const next = idx < 0 ? 0 : Math.min(idx + 1, emails.length - 1);
           setFocusedId(emails[next].id);
-      } else if (e.key === 'k') {
+          break;
+        }
+        case 'k':
+        case 'ArrowUp': {
           e.preventDefault();
           const prev = idx < 0 ? 0 : Math.max(idx - 1, 0);
           setFocusedId(emails[prev].id);
-      } else if (e.key === 'e' && idx >= 0) {
+          break;
+        }
+        case 'e': {
+          if (idx < 0) break;
           e.preventDefault();
           const id = emails[idx].id;
           await BulkApi.archive([id]);
           onRemoved(id);
-      } else if (e.key === '#' && idx >= 0) {
+          break;
+        }
+        case 'u': {
+          if (idx < 0) break;
+          e.preventDefault();
+          await BulkApi.markUnread([emails[idx].id]);
+          break;
+        }
+        case '#': {
+          if (idx < 0) break;
           e.preventDefault();
           const id = emails[idx].id;
           await BulkApi.trash([id]);
           onRemoved(id);
+          break;
+        }
+        default:
+          break;
       }
     };
 

frontend/src/main.jsx

@@ -7,6 +7,7 @@ import { ToastProvider, TooltipProvider } from './components/ui';
 import '@fontsource-variable/inter';
 import './index.css';
 import './styles.css';
+import './split.css';
 
 // Route-level code splitting: each page loads its own chunk on first visit, so the
 // initial bundle no longer carries Chart.js / grid-layout / every page at once.

frontend/src/pages/Dashboard.jsx

@@ -6,8 +6,9 @@ import { AnalyticsApi, LayoutApi, ExportApi, SyncApi } from '../api/client.js';
 import SyncSplash from '../components/SyncSplash.jsx';
 import {
   HealthWidget, StatCard, TopSendersWidget, VolumeWidget,
-  CategoryHeatmapWidget, AttachmentsWidget, StorageWidget
+  CategoryBreakdownWidget, AttachmentsWidget, StorageWidget
 } from '../components/widgets.jsx';
+import { Skeleton } from '../components/ui/skeleton.jsx';
 
 // Default grid geometry; overridden by the user's saved layout.
 const DEFAULT_LAYOUT = [
@@ -17,12 +18,23 @@ const DEFAULT_LAYOUT = [
   { i: 'storage', x: 7, y: 0, w: 2, h: 2 },
   { i: 'top-senders', x: 3, y: 2, w: 3, h: 5 },
   { i: 'volume', x: 6, y: 2, w: 6, h: 4 },
-  { i: 'category-heatmap', x: 0, y: 5, w: 6, h: 5 },
+  { i: 'category-breakdown', x: 0, y: 5, w: 6, h: 5 },
   { i: 'attachments', x: 6, y: 6, w: 4, h: 4 },
 ];
 
 const ALL_WIDGETS = DEFAULT_LAYOUT.map((l) => l.i);
 
+function WidgetSkeleton() {
+  return (
+    <div className="widget">
+      <Skeleton className="mb-3 h-4 w-1/3" />
+      <Skeleton className="mb-2 h-3 w-full" />
+      <Skeleton className="mb-2 h-3 w-5/6" />
+      <Skeleton className="h-3 w-2/3" />
+    </div>
+  );
+}
+
 export default function Dashboard() {
   const [data, setData] = useState(null);
   const [layout, setLayout] = useState(DEFAULT_LAYOUT);
@@ -87,15 +99,18 @@ export default function Dashboard() {
   const visibleLayout = useMemo(() => layout.filter((l) => !hidden.includes(l.i)), [layout, hidden]);
 
   const render = (key) => {
+    // category-breakdown self-fetches, so it renders regardless of dashboard load state.
+    if (key === 'category-breakdown') return <CategoryBreakdownWidget />;
+    // While the dashboard payload loads, show a skeleton placeholder per widget.
+    if (!data) return <WidgetSkeleton />;
     switch (key) {
-      case 'inbox-health': return <HealthWidget health={data?.health} />;
-      case 'total-emails': return <StatCard label="Total Emails" value={(data?.totalEmails ?? 0).toLocaleString()} to="/app/folder/allmail" />;
-      case 'unread-emails': return <StatCard label="Unread" value={(data?.unreadEmails ?? 0).toLocaleString()} to="/app/folder/unread" />;
-      case 'storage': return <StorageWidget bytes={data?.storageEstimateBytes} />;
-      case 'top-senders': return <TopSendersWidget senders={data?.topSenders} />;
-      case 'volume': return <VolumeWidget volume={data?.volumeOverTime} />;
-      case 'category-heatmap': return <CategoryHeatmapWidget />;
-      case 'attachments': return <AttachmentsWidget attachments={data?.attachmentBreakdown} />;
+      case 'inbox-health': return <HealthWidget health={data.health} />;
+      case 'total-emails': return <StatCard label="Total Emails" value={(data.totalEmails ?? 0).toLocaleString()} to="/app/folder/allmail" />;
+      case 'unread-emails': return <StatCard label="Unread" value={(data.unreadEmails ?? 0).toLocaleString()} to="/app/folder/unread" />;
+      case 'storage': return <StorageWidget bytes={data.storageEstimateBytes} />;
+      case 'top-senders': return <TopSendersWidget senders={data.topSenders} />;
+      case 'volume': return <VolumeWidget volume={data.volumeOverTime} />;
+      case 'attachments': return <AttachmentsWidget attachments={data.attachmentBreakdown} />;
       default: return null;
     }
   };

frontend/src/pages/FolderView.jsx

@@ -2,7 +2,9 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 import EmailRow from '../components/EmailRow.jsx';
+import EmailDetail from '../components/EmailDetail.jsx';
 import BulkToolbar from '../components/BulkToolbar.jsx';
+import { Skeleton, EmptyState } from '../components/ui';
 import useSelection from '../hooks/useSelection.js';
 import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 
@@ -35,6 +37,20 @@ const FOLDER_META = {
 
 const PAGE_SIZE = 50;
 
+function ListSkeleton({ rows = 6 }) {
+  return (
+    <div className="sv-skeleton-list" aria-hidden="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div className="sv-skeleton-row" key={i}>
+          <Skeleton className="h-3 w-3 rounded-full" />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 
 export default function FolderView() {
   const { slug } = useParams();
@@ -46,6 +62,7 @@ export default function FolderView() {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [selectedEmail, setSelectedEmail] = useState(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
   const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
 
@@ -56,6 +73,7 @@ export default function FolderView() {
     setPage(1);
     setHasMore(true);
     setError(null);
+    setSelectedEmail(null);
     clear();
   }, [slug, clear]);
 
@@ -115,8 +133,15 @@ export default function FolderView() {
         }}
       />
 
+      <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
+        <div className="sv-list-pane">
+          {loading && emails.length === 0 && !error && <ListSkeleton />}
+
           {!loading && !error && emails.length === 0 && (
-        <div className="fv-empty">No emails in this folder.</div>
+            <EmptyState
+              title="No emails in this folder"
+              description="Nothing here yet — try another folder or run a sync."
+            />
           )}
 
           {emails.length > 0 && (
@@ -129,7 +154,11 @@ export default function FolderView() {
                     selected={selected.has(e.id)}
                     onToggleSelect={toggle}
                     focused={focusedId === e.id}
-                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
+                    onOpen={(email) => setSelectedEmail(email)}
+                    onRemove={(id) => {
+                      setEmails((prev) => prev.filter((x) => x.id !== id));
+                      setSelectedEmail((cur) => (cur?.id === id ? null : cur));
+                    }}
                   />
                 ))}
               </tbody>
@@ -139,10 +168,22 @@ export default function FolderView() {
           {/* Sentinel — triggers next page load when scrolled into view */}
           <div ref={sentinelRef} className="fv-sentinel" />
 
-      {loading && <div className="fv-loading-more">Loading…</div>}
+          {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
           {!hasMore && emails.length > 0 && (
             <div className="fv-end">— {emails.length.toLocaleString()} emails —</div>
           )}
         </div>
+
+        {selectedEmail && (
+          <aside className="sv-reading-pane">
+            <EmailDetail
+              key={selectedEmail.id}
+              email={selectedEmail}
+              onClose={() => setSelectedEmail(null)}
+            />
+          </aside>
+        )}
+      </div>
+    </div>
   );
 }

frontend/src/pages/SearchResults.jsx

@@ -2,13 +2,29 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 import EmailRow from '../components/EmailRow.jsx';
+import EmailDetail from '../components/EmailDetail.jsx';
 import BulkToolbar from '../components/BulkToolbar.jsx';
+import { Skeleton, EmptyState } from '../components/ui';
 import useSelection from '../hooks/useSelection.js';
 import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 import useSavedSearches from '../hooks/useSavedSearches.js';
 
 const PAGE_SIZE = 50;
 
+function ListSkeleton({ rows = 6 }) {
+  return (
+    <div className="sv-skeleton-list" aria-hidden="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div className="sv-skeleton-row" key={i}>
+          <Skeleton className="h-3 w-3 rounded-full" />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
@@ -20,6 +36,7 @@ export default function SearchResults() {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [selectedEmail, setSelectedEmail] = useState(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
   const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
   const { searches: savedSearches, add: addSavedSearch } = useSavedSearches();
@@ -36,6 +53,7 @@ export default function SearchResults() {
     setPage(1);
     setHasMore(true);
     setError(null);
+    setSelectedEmail(null);
     clear();
   }, [q, clear]);
 
@@ -83,11 +101,13 @@ export default function SearchResults() {
         )}
       </div>
 
-      {!q.trim() && <div className="fv-empty">Enter a search query above.</div>}
-      {error && <div className="fv-error">{error}</div>}
-      {!loading && !error && q.trim() && emails.length === 0 && !hasMore && (
-        <div className="fv-empty">No results for "{q}".</div>
+      {!q.trim() && (
+        <EmptyState
+          title="Search your mail"
+          description="Enter a search query above to find emails."
+        />
       )}
+      {error && <div className="fv-error">{error}</div>}
 
       <BulkToolbar
         selectedIds={selectedIds}
@@ -100,6 +120,18 @@ export default function SearchResults() {
         }}
       />
 
+      {q.trim() && (
+        <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
+          <div className="sv-list-pane">
+            {loading && emails.length === 0 && !error && <ListSkeleton />}
+
+            {!loading && !error && emails.length === 0 && !hasMore && (
+              <EmptyState
+                title={`No results for "${q}"`}
+                description="Try a different search term or filter."
+              />
+            )}
+
             {emails.length > 0 && (
               <table className="email-list">
                 <tbody>
@@ -110,7 +142,11 @@ export default function SearchResults() {
                       selected={selected.has(e.id)}
                       onToggleSelect={toggle}
                       focused={focusedId === e.id}
-                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
+                      onOpen={(email) => setSelectedEmail(email)}
+                      onRemove={(id) => {
+                        setEmails((prev) => prev.filter((x) => x.id !== id));
+                        setSelectedEmail((cur) => (cur?.id === id ? null : cur));
+                      }}
                     />
                   ))}
                 </tbody>
@@ -118,10 +154,23 @@ export default function SearchResults() {
             )}
 
             <div ref={sentinelRef} className="fv-sentinel" />
-      {loading && <div className="fv-loading-more">Loading…</div>}
+            {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
             {!hasMore && emails.length > 0 && (
               <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
             )}
           </div>
+
+          {selectedEmail && (
+            <aside className="sv-reading-pane">
+              <EmailDetail
+                key={selectedEmail.id}
+                email={selectedEmail}
+                onClose={() => setSelectedEmail(null)}
+              />
+            </aside>
+          )}
+        </div>
+      )}
+    </div>
   );
 }

frontend/src/split.css

@@ -0,0 +1,148 @@
+/* ── Split-view reading pane ────────────────────────────────────────────────
+ * Owned by Unit 1. Gmail/Outlook-style master-detail: the email list stays on
+ * the left, a collapsible + horizontally resizable reading pane sits on the
+ * right. Below 768px the pane overlays the list (mobile stack) instead of
+ * squishing the columns side-by-side.
+ *
+ * These pages (.folder-view) are styled from styles.css, so we reference its
+ * legacy CSS variables (--panel, --panel-2, --text, --muted, --accent) with
+ * hardcoded hex fallbacks. The modern index.css tokens are stored as raw HSL
+ * channel triplets and only work via hsl(var(--x)), so they are NOT used bare
+ * here.
+ * ------------------------------------------------------------------------- */
+
+.sv-split {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+/* Left column — the list. Flexes to fill remaining space and scrolls itself. */
+.sv-list-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* Right column — the reading pane. Resizable via the native handle; the width
+ * gives it a sensible default, and the user can drag the bottom-right corner.
+ * `resize: horizontal` needs `overflow` other than visible. */
+.sv-reading-pane {
+  flex: 0 0 auto;
+  width: clamp(320px, 42%, 640px);
+  min-width: 300px;
+  max-width: 80vw;
+  border-left: 1px solid var(--panel-2, #222a3d);
+  overflow: auto;
+  resize: horizontal;
+  background: var(--panel, #1a2030);
+  align-self: stretch;
+}
+
+/* ── Reading pane inner content ─────────────────────────────────────────── */
+.sv-detail { padding: 18px 20px; }
+
+.sv-detail-topbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 6px;
+}
+.sv-close {
+  background: transparent;
+  border: 1px solid var(--panel-2, #222a3d);
+  color: var(--muted, #8b93a7);
+  border-radius: 6px;
+  width: 28px;
+  height: 28px;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sv-close:hover {
+  background: var(--panel-2, #222a3d);
+  color: var(--text, #e6e9f0);
+}
+
+.sv-detail-header { margin-bottom: 14px; }
+.sv-detail-subject {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 6px;
+  color: var(--text, #e6e9f0);
+  word-break: break-word;
+}
+.sv-detail-meta {
+  font-size: 12px;
+  color: var(--muted, #8b93a7);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.sv-detail-sep { opacity: 0.4; }
+
+.sv-ai-summary { margin-bottom: 14px; }
+.sv-ai-summary-text {
+  background: var(--panel-2, #222a3d);
+  border: 1px solid var(--panel-2, #222a3d);
+  border-radius: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--text, #e6e9f0);
+}
+
+.sv-body-loading { padding: 8px 0 18px; }
+.sv-body {
+  background: var(--panel, #1a2030);
+  border: 1px solid var(--panel-2, #222a3d);
+  border-radius: 8px;
+  padding: 16px 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text, #e6e9f0);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-bottom: 18px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.sv-snippet {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--muted, #8b93a7);
+  margin-bottom: 18px;
+}
+.sv-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+
+/* ── List loading / empty states ───────────────────────────────────────── */
+.sv-skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0;
+}
+.sv-skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 8px;
+}
+
+/* ── Mobile: stack / overlay the reading pane ──────────────────────────── */
+@media (max-width: 767px) {
+  .sv-reading-pane {
+    position: fixed;
+    inset: 56px 0 0 0; /* below the topbar */
+    width: 100% !important;
+    max-width: 100vw;
+    min-width: 0;
+    border-left: none;
+    resize: none;
+    z-index: 40;
+  }
+  /* When the pane is open, hide the underlying list to avoid double-scroll. */
+  .sv-split.sv-split--open .sv-list-pane {
+    display: none;
+  }
+}

frontend/src/styles.css

@@ -117,8 +117,6 @@ button:disabled { opacity: 0.5; cursor: default; }
 .widget--link:hover { border-color: var(--accent); }
 .mini-row--link { cursor: pointer; }
 .mini-row--link:hover td { color: var(--accent); }
-.chm-label--link { cursor: pointer; text-decoration: underline dotted; }
-.chm-label--link:hover { color: var(--accent); }
 .widget canvas { flex: 1; min-height: 0; }
 
 .stat { align-items: flex-start; justify-content: center; }
@@ -137,17 +135,21 @@ table.grid th, table.grid td { padding: 8px; border-bottom: 1px solid #332f2b; t
 .num { text-align: right; }
 .muted { color: var(--muted); font-size: 12px; }
 
-.heatmap { display: flex; flex-direction: column; gap: 2px; }
-.hm-row { display: flex; align-items: center; gap: 2px; }
-.hm-day { width: 30px; font-size: 10px; color: var(--muted); }
-.hm-cell { width: 10px; height: 10px; background: var(--accent); border-radius: 2px; }
-
-/* Category heatmap */
-.cat-heatmap { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
-.chm-row { display: grid; grid-template-columns: 92px repeat(7, 1fr); gap: 3px; align-items: stretch; }
-.chm-head .chm-col { font-size: 10px; color: var(--muted); text-align: center; }
-.chm-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.chm-cell { background: var(--accent); border-radius: 3px; min-height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
+/* Emails by Category — ranked horizontal bars */
+.cat-bars { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
+.cat-bar {
+  display: grid; grid-template-columns: 92px 1fr 40px; gap: 8px; align-items: center;
+  width: 100%; padding: 3px 4px; margin: 0; border: none; background: transparent;
+  border-radius: 6px; text-align: left; font: inherit; color: inherit;
+}
+.cat-bar--link { cursor: pointer; }
+.cat-bar--link:hover { background: rgba(255, 255, 255, 0.04); }
+.cat-bar:disabled { cursor: default; }
+.cat-bar-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cat-bar-track { height: 14px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; }
+.cat-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
+.cat-bar-count { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
+.cat-bar--link:hover .cat-bar-label { color: var(--accent); }
 
 /* react-grid-layout resize handle — make it clearly visible on the dark theme */
 .react-resizable-handle {
@@ -296,32 +298,57 @@ input, select { background: var(--panel-2); border: 1px solid #332f2b; color: va
 .fv-error { color: var(--danger); font-size: 14px; padding: 12px 0; }
 
 .email-list { width: 100%; border-collapse: collapse; font-size: 13px; }
-.email-row { border-bottom: 1px solid #332f2b; cursor: pointer; }
+.email-row {
+  height: 44px;
+  border-bottom: 1px solid #332f2b;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.email-row > td { padding-top: 0; padding-bottom: 0; vertical-align: middle; }
+/* Single, consistent hover state for the whole row. */
 .email-row:hover { background: var(--panel); }
-.email-row--unread .el-sender,
+/* Unread: prominent subject, keep sender readable but not shouty. */
 .email-row--unread .el-subj-text { font-weight: 700; color: var(--text); }
+.email-row--unread .el-sender { font-weight: 600; color: var(--text); }
 
-.el-unread { width: 14px; padding: 10px 4px 10px 0; }
+.el-select { width: 34px; padding: 0 4px 0 10px; text-align: center; }
+.el-select > * { vertical-align: middle; }
+
+.el-unread { width: 14px; padding: 0 4px 0 0; text-align: center; }
 .unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
-.el-sender { width: 180px; padding: 10px 12px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
-.el-subject { padding: 10px 8px; overflow: hidden; }
+
+/* Sender: secondary in the hierarchy — muted by default. */
+.el-sender {
+  width: 180px; padding: 0 12px 0 4px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--muted); font-size: 12.5px;
+}
+
+/* Subject + snippet share one line: subject prominent, snippet muted. */
+.el-subject { padding: 0 8px; overflow: hidden; max-width: 0; white-space: nowrap; text-overflow: ellipsis; }
 .el-subj-text { color: var(--text); }
-.el-snippet { color: var(--muted); }
-.el-meta { width: 80px; padding: 10px 8px; text-align: right; white-space: nowrap; }
+.el-snippet {
+  color: var(--muted); font-size: 12.5px;
+}
+.el-snippet::before { content: '—'; margin: 0 6px; opacity: 0.55; }
+
+.el-meta { width: 80px; padding: 0 8px; text-align: right; white-space: nowrap; }
 .el-attach { margin-right: 4px; font-size: 12px; }
 .el-size { font-size: 11px; color: var(--muted); }
-.el-date { width: 70px; padding: 10px 0 10px 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
+.el-date { width: 70px; padding: 0 0 0 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
 
-.el-actions { width: 80px; padding: 0 6px; text-align: right; white-space: nowrap; }
+.el-actions { width: 96px; padding: 0 6px; text-align: right; white-space: nowrap; }
 .action-btn {
-  background: none; border: none; padding: 3px 4px; cursor: pointer;
-  font-size: 13px; opacity: 0; transition: opacity 0.1s, color 0.1s;
+  background: none; border: none; padding: 4px 5px; cursor: pointer;
+  font-size: 13px; line-height: 1; opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
   border-radius: 4px; color: var(--muted);
 }
-.action-btn:hover { background: var(--panel-2); opacity: 1 !important; }
+.action-btn:hover { background: var(--panel-2); color: var(--text); opacity: 1 !important; }
 .action-btn--active { opacity: 1 !important; }
 .action-btn--danger:hover { color: var(--danger); }
-.email-row:hover .action-btn { opacity: 0.6; }
+.email-row:hover .action-btn { opacity: 0.65; }
+.action-btn:focus-visible { opacity: 1 !important; outline: 2px solid var(--accent); outline-offset: 1px; }
 .email-row--acting { opacity: 0.6; pointer-events: none; }
 .action-btn--unsub { font-size: 11px; }
 .action-btn--done { opacity: 1 !important; color: var(--ok); }
@@ -405,7 +432,6 @@ input, select { background: var(--panel-2); border: 1px solid #332f2b; color: va
 }
 .bulk-btn:hover { border-color: var(--accent); }
 .bulk-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
-.el-select { width: 28px; text-align: center; }
 
 /* ── Keyboard shortcut help ──────────────────────────────────────────────── */
 .kbd-hint { position: fixed; bottom: 14px; right: 14px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid #332f2b; border-radius: 6px; padding: 4px 10px; opacity: 0.7; }