Extract chat page monolith, add tests and Playwright#28
Merged
Conversation
Extract 847 lines of CSS from the 3,026-line chat page monolith into chat-styles.ts. Extract pure inspector panel functions (aggregateToolCalls, fmtToolTime, fmtNum, computeContextUsage) with dual-export pattern for testability. Add 78 new unit tests for inspector panel logic, route-utils, agent-status tracker, and activity-log. Set up Playwright e2e with 10 chat page test scenarios. Add CLAUDE.md files for chat/, dashboard/, ai/, and db/ subdirectories. The chat page monolith has been the source of recurring token tracking and inspector bugs because all state and logic was in a single 3k-line file with global variables. This is the first step of a phased extraction to make the code testable and the data flow explicit. The dual-export pattern (TypeScript function + browser JS string) enables unit testing of client-side logic that was previously untestable.
Add new test files to the main test script so bun run test includes all 78 new tests. Add phase 2 prep comment to inspectorPanelScript() to clarify it is intentionally exported but not yet consumed. Fix activity-log tests to be order-independent by using dynamic prefixes and relative assertions instead of hardcoded values.
Use ?? (nullish coalescing) instead of || (logical or) when falling back from contextTokens to inputTokens. The || operator treats 0 as falsy, which would incorrectly fall back to inputTokens when a connector reports contextTokens: 0.
Replace waitForTimeout(500) with expect().toBeVisible() so Playwright waits for the bot pill to actually get the active class instead of hoping 500ms is enough. The deep link triggers async API calls that can take longer on slow connections.
RuneLind
changed the title
RuneLind
added a commit
that referenced
this pull request
Mar 16, 2026
Extract CSS and pure inspector functions from the 3,026-line chat page monolith, add 78 new unit tests, set up Playwright e2e, and document key modules with CLAUDE.md files. The chat page has been the source of recurring token tracking and inspector bugs because all state and logic lived in a single file with global variables. This extraction makes the data flow explicit and enables unit testing of client-side logic via a dual-export pattern (TypeScript functions for tests + JS strings for the browser). - Extract 847 lines of CSS into chat-styles.ts (page.ts: 3,026 to 2,167 lines) - Extract pure inspector functions (aggregateToolCalls, fmtToolTime, fmtNum, computeContextUsage) with dual-export pattern - Add 78 unit tests: inspector panel (34), agent-status (17), activity-log (13), route-utils (14) - Set up Playwright with 10 chat page e2e scenarios - Add CLAUDE.md for src/chat/, src/dashboard/, src/ai/, src/db/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
First phase of the chat page architecture refactoring. Extracts CSS and pure inspector functions from the 3,026-line monolith, adds 78 new unit tests, sets up Playwright e2e, and documents key modules.
The chat page has been the source of recurring token tracking and inspector bugs because all state and logic lived in a single file with global variables. This extraction makes the data flow explicit and enables unit testing of client-side logic via a dual-export pattern (TypeScript functions for tests + JS strings for the browser).
chat-styles.ts(page.ts: 3,026 → 2,167 lines)aggregateToolCalls,fmtToolTime,fmtNum,computeContextUsage) with dual-export patternsrc/chat/,src/dashboard/,src/ai/,src/db/Testing