Chat UI Polish & Code Quality Overhaul

[mmogr]

Summary

Decompose the ChatMessagesPanel god component (857 LOC) into cohesive subcomponents, then incrementally add UX polish (code copy buttons, auto-grow textarea, message animations, streaming cursor) to bring the chat interface up to the standard of professional AI chat apps (VS Code Copilot, ChatGPT, Claude).

Architectural Constraints

1. Context isolation is mandatory — ThinkingTimingContext, VoiceContext, DeepResearchContext are high-frequency updaters. They stay in separate isolated contexts. Never combine with slow-updating contexts.
2. <200 LOC is a guideline, cohesion comes first — Don't fragment so heavily that prop-drilling worsens.
3. assistant-ui primitives are sacrosanct — Wrap, don't replace. Preserve native event handlers and a11y.
4. Strictly incremental — Each phase: branch → implement → UAT → review → next phase.

Phases

Phase 1: Component Decomposition

• Extract ChatHeader from ChatMessagesPanel (~60 LOC, 15 props)
• Extract SystemPromptCard (~55 LOC, 12 props)
• Extract ChatAlerts (~20 LOC, 3 props)
• Extract ChatComposer (~80 LOC, 8 props)
• Slim ChatMessagesPanel orchestrator (857 → ~550 LOC)

Phase 2: Chat UX Polish

• Code block header with copy button (CodeBlock.tsx)
• Auto-growing composer textarea (CSS-based wrapper)
• Message appear animations (fade-in + slide-up)
• Streaming text cursor (CSS ::after)
• Error banner dismiss + retry

Phase 3: Conversation & Navigation Polish

• Conversation list: inline rename, right-click context menu, EmptyState
• Scroll-to-bottom: unread badge, entrance animation
• Loading skeletons for message hydration

Phase 4: Code Quality & DRY

• Memoize MessageBubbles + MarkdownMessageContent
• Add ErrorBoundary (markdown, tool UI, thread)
• Replace hardcoded rgba() with CSS variables
• Unify modal form patterns (FormField, FormSection)

Phase 5: Advanced Polish

• Tool execution progress bar
• Light theme support
• Keyboard shortcuts

Files NOT being changed

• src/pages/ChatPage.tsx — already well-structured
• src/hooks/useGglibRuntime/ — clean runtime layer
• src/services/transport/ — clean platform abstraction
• src/components/ChatMessagesPanel/context/ — contexts stay isolated