Fixed the text disappearing issue in the chat panel that occurred after sending messages. Also added a one-time model loading animation when the browser model initializes.
Bug Fix: Chat Panel Lifecycle
The root cause was Lit re-rendering replacing the ChatPanel element on every state update. Separated the static header from the dynamic chat panel with distinct DOM containers. The header renders via Lit's templating, while the ChatPanel is appended once and never replaced.
New: Model Loading Overlay
When using the browser model (Gemma 4 E4B), a loading overlay now appears showing real-time download progress. This only shows once — the first time the model is loaded. Subsequent visits skip the overlay since the model is cached locally.
// Model loading state communicated via custom events localModel.subscribe((state) => { if (state.loading) showLoadingOverlay(state.loadingProgress); if (state.loaded) hideLoadingOverlay(); });
The overlay includes a progress bar, percentage display, and explains that the ~2GB download only happens once.