[Badri-Rajendran]

Problem

Ask Trueup worked correctly (a real pass a day earlier fixed the tool-trace field-name bug, added auto-scroll, markdown rendering, and the streaming composer) but never got a real visual pass — that commit touched zero layout CSS. Investigation found the "very basic" feel had one root structural cause plus several real, specific gaps:

• The flex height chain was broken. .tu-app-layout__main had no min-height: 0, so the composer never pinned to the bottom and the transcript never scrolled internally — the auto-scroll logic that already existed was a silent no-op.
• Bubble differentiation was too weak (~4 hex points apart between user/assistant backgrounds).
• Two chat-specific error codes were unmapped (daily_chat_query_cap_exceeded, chat_turn_in_progress) — a customer hitting the daily cap saw "Something went wrong."
• The stream error state had no retry.
• The composer disabled while streaming — no composing your next question while a reply arrived. The stop button used ✕ (reads as cancel, not stop).
• Raw tool names leaked into "How this was answered" (execute_read_only_sql) — not appropriate on a financial platform's customer-facing surface.
• listSessions/getMessages existed but were unused — every page visit destroyed the conversation.
• No markdown table support, despite gpt-4o-mini commonly emitting tables unprompted for multi-row data.

Three scope calls were confirmed with the user directly before building: skip a backend "tool in progress" SSE event (frontend-only pass); build a basic session-history sidebar; add table rendering.

Implementation

• Height-chain fix: every ancestor in the chat's height chain uses flex: 1, not height: 100% — a flex item's flex-resolved size doesn't count as a "definite height" for a percentage-height child to resolve against (a real CSS gotcha, caught by inspecting live computed styles in the browser, not assumed from the diff — the first height:100% attempt looked plausible and was still wrong two levels down).
• Assistant messages render as flowing ink-colored text, not a bubble — grounded in design-system.md's own "one authoritative voice" framing of the ink token, marked by a small circular monogram reusing the wordmark's serif letterform. User messages stay a bounded, right-aligned bubble.
• Mapped both chat error codes; wired onRetry into the stream error state (resends the same text without duplicating the user bubble).
• Composer field stays typeable during streaming; only the send/stop control changes. New real stop icon.
• Humanized both known tool names in the trace disclosure.
• New SessionHistory sidebar: useChatSession resumes the most recent session on mount instead of always creating a fresh one; explicit "New chat" and per-session switching, disabled mid-stream (no safe way to abandon an in-flight turn). Switching resets useChatStream's state so a stale error/streaming state can't bleed into the newly-selected transcript.
• GFM pipe-table parsing in the markdown renderer, rendered through the app's real Table compound component — plus one line added to the backend system prompt asking for tables on multi-row results.

Validation

Verified against the real running app with genuine end-to-end OpenAI streaming (a real API key is configured locally — not the FakeAgentAdapter test double):

• Empty state, real streaming with the transcript actually auto-scrolling now
• Table-rendering path verified via the parsed React element tree (paragraph → Table → paragraph) — this test account has no multi-row account data for the model to honestly report on
• Humanized tool trace, typing a follow-up while a reply streams (text survives intact)
• New chat, session switching restoring the correct real messages
• Light and dark themes (dark-mode avatar colors confirmed via computed styles, not eyeballed)
• 375px mobile including the sidebar — caught and fixed a real overlap bug there (.tu-chat-window__body needed flex-direction: column on mobile so an open sidebar stacks above the transcript instead of fighting it for row space)
• Keyboard-only tab order with visible focus throughout
• No regression on another page (Dashboard) after making .tu-app-layout__main a flex container

Backend: tests/api/test_chat.py 12/12, ruff clean. Frontend: lint and build clean, 246 modules.

Security / DB / API impact

• Security: none. No new data collected; the humanized tool-name mapping reduces (not increases) what reaches the customer.
• DB: none.
• API: none — no route, request, or response shape changed. The system prompt gains one line of formatting guidance only.

🤖 Generated with Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.