feat(web): React UI v2.0 — Phase 3 Task 36 (App wiring) — Phase 3 complete#25
Merged
Conversation
Composes the Phase 3 shell components (Topbar, FlowStrip, SessionsRail, Statusbar) and Phase 2 data hooks (useUiHints, useSessionList, useApprovalsQueue, useAgentDefinitions, useSessionFull) into a working <App> that renders the empty 3-pane shell. Canvas is an empty-state placeholder (Phase 4); monitor rail is a placeholder (Phase 5). main.tsx now wraps <App> in QueryClientProvider + SelectedRefProvider and mounts the IconSprite. vite.config.ts gains the same '@/' alias as vitest.config.ts (build broke without it now that main/App use '@/'). Tests: 4 new App.test.tsx cases (brand name from useUiHints, empty SessionsRail, Statusbar version, canvas empty-state) — full suite remains green at 91 passing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
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.
Summary
Final task of Phase 3 — wires Topbar + FlowStrip + SessionsRail + Statusbar into a working
<App>shell. This is the first runnable end-to-end render of the React UI v2.0. After this lands, Phase 3 is complete (Tasks 32-36 all merged).web/src/App.tsx— composes Phase 3 shell components, subscribes to Phase 2 hooks (useUiHints,useSessionList,useApprovalsQueue,useAgentDefinitions,useSessionFull). Manages localactiveSidstate for session selection. Canvas + monitor rail are placeholder panes (Phase 4 + 5 fill them).web/src/main.tsx— wraps<App>inQueryClientProvider+SelectedRefProvider, mounts<IconSprite>once at root.web/vite.config.ts— added@/→./srcresolve alias. Required for production builds (was previously only in tsconfig + vitest config; Vite dev didn't need it for the placeholder App but now does forimport {...} from '@/...').web/tests/component/App.test.tsx— 4 tests: brand renders from useUiHints, empty SessionsRail, Statusbar version, canvas empty state.Validation
cd web && npm install→ 0 vulnerabilitiesnpm run typecheck→ exit 0npx vitest run→ 91 passed / 0 failed (Phase 3 shell's 87 + 4 new App tests)npm run build→ clean, 247 kB JS (76 kB gzip) — first build with real component importsNothing touches
src/runtime/— nodist/app.pyregen.What you see now
Running
cd web && npm run dev(or serving the production build) shows the full 3-pane shell with:ui-hints/api/v1/agents/api/v1/sessions(or empty state)No interactions yet — the onSearch/onNew/onApprovalsClick callbacks are no-ops; modals come in Phase 6.
Phase 3 retrospective
What's next
Phase 4 (Tasks 37-42): Canvas — CanvasHead, Sidenote, Turn, HITLBand, Transcript assembly, SessionCanvas top-level. These plug into the empty canvas slot.
Test plan
🤖 Generated with Claude Code