feat(dashboard): improve real-time updates and scroll behavior

Major UX improvements to conversation display and state management.

Scroll behavior (SessionCard.js):
- Replace scroll-position tracking with wheel-event intent detection
- Accumulate scroll-up distance before disabling sticky mode (50px threshold)
- Re-enable sticky on scroll-down when near bottom (100px threshold)
- Always scroll to bottom on first load or user's own message submission
- Use requestAnimationFrame for smooth scroll positioning

Optimistic updates (App.js):
- Immediately show user messages before API confirmation
- Remove optimistic message on send failure
- Eliminates perceived latency when sending responses

Error tracking integration (App.js):
- Wire up trackError/clearErrorCount for API operations
- Track: state fetch, conversation fetch, respond, dismiss, SSE init/parse
- Clear error counts on successful operations
- Clear SSE event cache on reconnect to force refresh

Conversation management (App.js):
- Use mtime_ns (preferred) or last_event_at for change detection
- Clean up conversation cache when sessions are dismissed
- Add modalSessionRef for stable reference across renders

Message stability (ChatMessages.js):
- Prefer server-assigned message IDs for React keys
- Fallback to role+timestamp+index for legacy messages

Input UX (SimpleInput.js):
- Auto-refocus textarea after successful submission
- Use setTimeout to ensure React has re-rendered first

Sorting simplification (status.js):
- Remove status-based group/session reordering
- Return groups in API order (server handles sorting)

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

dashboard/components/ChatMessages.js

@@ -2,6 +2,13 @@ import { html } from '../lib/preact.js';
 import { getUserMessageBg } from '../utils/status.js';
 import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
 
+function getMessageKey(msg, index) {
+  // Server-assigned ID (preferred)
+  if (msg.id) return msg.id;
+  // Fallback: role + timestamp + index (for legacy/edge cases)
+  return `${msg.role}-${msg.timestamp || ''}-${index}`;
+}
+
 export function ChatMessages({ messages, status, limit = 20 }) {
   const userBgClass = getUserMessageBg(status);
 
@@ -21,7 +28,7 @@ export function ChatMessages({ messages, status, limit = 20 }) {
     <div class="space-y-2.5">
       ${displayMessages.map((msg, i) => html`
         <${MessageBubble}
-          key=${`${msg.role}-${msg.timestamp || (offset + i)}`}
+          key=${getMessageKey(msg, offset + i)}
           msg=${msg}
           userBg=${userBgClass}
           compact=${true}