feat: dashboard UI/UX overhaul from full review

Shared foundation:
- New Modal component on native <dialog>.showModal() (focus trap, inert
  background, Escape, focus restore, scroll lock); all eight dialogs and
  both globalThis.confirm calls migrated to it
- Design tokens for success/warning/danger surfaces; pill danger variant;
  .sr-only utility; toast layering above dialog backdrops; not-allowed
  cursor for validity-disabled buttons

Conversations/attention: auto-scroll with jump-to-latest, per-conversation
draft persistence, suggestion undo, 30s auto-refresh with refresh controls,
unread emphasis and counts, blur-consistent share dialog, empty-accounts
guidance, collapsed user lookup, relative timestamps, danger pills for
critical items

Media/library/outreach: click-blurred-to-reveal, lightbox with arrow
navigation and captions, dirty-form preservation across refetches, upload
validation with thumbnail preview, save feedback, result counts with
load-more and clear-filters, ticking countdowns from a single clock

Overview/performance/operations/settings: mutation errors inside the
confirm dialog, live sending-window countdown, offline-aware loading
states, per-panel loading/error with retry, 7/30/90-day range toggle,
console scroll yielding with shown/retained counts, risky-save matching
by subreddit name instead of index, useBlocker unsaved-changes guard,
single-pass validation with focus-to-first-error, access panel JSON
validation and input reset

Tests: 806 -> 844 passing; both typechecks clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

tests/dashboard/app.test.tsx

@@ -2,7 +2,7 @@
 
 import '@testing-library/jest-dom/vitest';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { cleanup, render, screen, waitFor, within } from '@testing-library/react';
+import { act, cleanup, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { HttpResponse, http } from 'msw';
 import { setupServer } from 'msw/node';
@@ -339,7 +339,7 @@ describe('dashboard foundation', () => {
     expect(within(dialog).getByRole('img', { name: 'Source post: The source post title' })).toHaveAttribute(
       'src', 'https://i.redd.it/source.jpg',
     );
-    expect(within(dialog).getByRole('link', { name: 'Open Reddit post' })).toHaveAttribute(
+    expect(within(dialog).getByRole('link', { name: /Open Reddit post/ })).toHaveAttribute(
       'href', 'https://www.reddit.com/r/example/comments/source/the_source_post_title/',
     );
   });
@@ -401,4 +401,59 @@ describe('dashboard foundation', () => {
     expect(await screen.findByText('Running', { selector: '[data-bot-status]' })).toBeInTheDocument();
     expect(startRequests).toBe(1);
   });
+
+  it('shows a start failure inside the confirmation dialog instead of a stray toast', async () => {
+    installSuccessfulApi();
+    server.use(
+      http.post('/api/start', () => HttpResponse.json({ error: 'Browser runtime is not ready' }, { status: 503 })),
+    );
+    const user = userEvent.setup();
+    renderDashboard();
+
+    await user.click(await screen.findByRole('button', { name: 'Start bot' }));
+    const dialog = screen.getByRole('dialog', { name: 'Start bot?' });
+    await user.click(within(dialog).getByRole('button', { name: 'Confirm start' }));
+
+    expect(await within(dialog).findByRole('alert')).toHaveTextContent('Browser runtime is not ready');
+    // The dialog stays open so the operator can retry or cancel.
+    expect(screen.getByRole('dialog', { name: 'Start bot?' })).toBeInTheDocument();
+
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('flips the sending window from cooling down to ready without a refetch', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      let timerRequests = 0;
+      const startedAt = Date.now();
+      server.use(
+        http.get('/api/stats', () => HttpResponse.json(createStats())),
+        http.get('/api/timers', () => {
+          timerRequests += 1;
+          return HttpResponse.json({
+            nextMessageAvailableAt: startedAt + 5_000,
+            hourlyResetAt: startedAt + 3_600_000,
+            isHourlyLimitReached: false,
+            messagesRemaining: 6,
+          });
+        }),
+        http.get('/api/messages', () => HttpResponse.json([])),
+      );
+      renderDashboard();
+
+      expect(await screen.findByText('Cooling down')).toBeInTheDocument();
+      expect(screen.getByText(/^Ready in /)).toBeInTheDocument();
+      const requestsAfterLoad = timerRequests;
+
+      act(() => { vi.advanceTimersByTime(6_000); });
+
+      expect(screen.getByText('Ready')).toBeInTheDocument();
+      expect(screen.getByText('Available now')).toBeInTheDocument();
+      expect(screen.queryByText('Cooling down')).not.toBeInTheDocument();
+      expect(timerRequests).toBe(requestsAfterLoad);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });