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>
This commit is contained in:
teernisse
2026-02-26 15:24:06 -05:00
parent 3dc10aa060
commit b9c1bd6ff1
5 changed files with 142 additions and 78 deletions

View File

@@ -1,4 +1,4 @@
import { html, useState } from '../lib/preact.js';
import { html, useState, useRef } from '../lib/preact.js';
import { getStatusMeta } from '../utils/status.js';
export function SimpleInput({ sessionId, status, onRespond }) {
@@ -6,6 +6,7 @@ export function SimpleInput({ sessionId, status, onRespond }) {
const [focused, setFocused] = useState(false);
const [sending, setSending] = useState(false);
const [error, setError] = useState(null);
const textareaRef = useRef(null);
const meta = getStatusMeta(status);
const handleSubmit = async (e) => {
@@ -22,6 +23,11 @@ export function SimpleInput({ sessionId, status, onRespond }) {
console.error('SimpleInput send error:', err);
} finally {
setSending(false);
// Refocus the textarea after submission
// Use setTimeout to ensure React has re-rendered with disabled=false
setTimeout(() => {
textareaRef.current?.focus();
}, 0);
}
}
};
@@ -35,6 +41,7 @@ export function SimpleInput({ sessionId, status, onRespond }) {
`}
<div class="flex items-end gap-2.5">
<textarea
ref=${textareaRef}
value=${text}
onInput=${(e) => {
setText(e.target.value);