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>

apps/dashboard/src/features/conversations/processed-user-lookup.tsx

@@ -7,24 +7,34 @@ export function ProcessedUserLookup() {
   const [input, setInput] = useState('');
   const [username, setUsername] = useState('');
   const postsQuery = useProcessedPostsQuery(username);
+  // Only show results that belong to the current lookup; switching the
+  // username changes the query key, which clears stale data automatically.
+  const showResults = postsQuery.data !== undefined && !postsQuery.isFetching;
 
   return (
-    <section aria-labelledby="processed-user-heading" className="new-conversation-panel">
-      <h2 id="processed-user-heading">Processed user lookup</h2>
-      <form onSubmit={(event) => { event.preventDefault(); setUsername(input.trim().replace(/^u\//i, '')); }}>
-        <label htmlFor="processed-user">Lookup Reddit username</label>
-        <input id="processed-user" onChange={(event) => setInput(event.target.value)} value={input} />
-        <button disabled={input.trim().length === 0} type="submit">Look up user</button>
+    <details className="new-conversation-panel processed-user-lookup">
+      <summary>
+        <h2 id="processed-user-heading">Processed user lookup</h2>
+      </summary>
+      <form
+        className="start-conversation-form processed-user-form"
+        onSubmit={(event) => { event.preventDefault(); setUsername(input.trim().replace(/^u\//i, '')); }}
+      >
+        <div className="conversation-field">
+          <label htmlFor="processed-user">Lookup Reddit username</label>
+          <input autoComplete="off" id="processed-user" onChange={(event) => setInput(event.target.value)} value={input} />
+        </div>
+        <button className="conversation-primary" disabled={input.trim().length === 0} type="submit">Look up user</button>
       </form>
-      {postsQuery.isPending && username ? <p role="status">Looking up processed posts...</p> : null}
-      {postsQuery.isError ? <p role="alert">{postsQuery.error.message}</p> : null}
-      {postsQuery.data ? (
+      {postsQuery.isFetching && username ? <p role="status">Looking up processed posts...</p> : null}
+      {postsQuery.isError ? <p className="conversation-inline-error" role="alert">{postsQuery.error.message}</p> : null}
+      {showResults && postsQuery.data ? (
         postsQuery.data.length === 0 ? <p>No processed posts found for <RedditUsernameLink username={username} />.</p> : (
           <ol aria-label={`Processed posts for ${redditUsernameLabel(username)}`}>
             {postsQuery.data.map((post) => <li key={`${post.owner?.accountId ?? 'legacy'}:${post.id}`}><strong>{post.title}</strong><AccountOwnerBadge owner={post.owner} /><span>r/{post.subreddit} · {post.messageSent ? 'Message sent' : post.error ?? 'Processed'}</span></li>)}
           </ol>
         )
       ) : null}
-    </section>
+    </details>
   );
 }