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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user