refactor(playground): rename AppBuilder internals to Playground#2310
Conversation
…ound App Builder (tab) and chat-v2 (tab) are both removed; Playground is the only consumer of the orchestration hook, context, skeleton, and onboarding state that still carried "AppBuilder" names. Pure mechanical rename — no behavior change. - useAppBuilderState -> usePlaygroundState (+ co-exports, types, file rename) - AppBuilderStateProvider / useAppBuilderStateContext -> Playground-prefixed - APP_BUILDER_FIRST_RUN_PROMPT -> PLAYGROUND_FIRST_RUN_PROMPT - appBuilderOnboarding state in App.tsx -> playgroundOnboarding - AppBuilderSkeleton -> PlaygroundSkeleton (moved to components/playground/) - PostConnectGuide moved to components/ui-playground/ (no identifier rename) - "app-builder-send-nux-hint" testid -> "playground-send-nux-hint" - Drop the "app-builder" arm from surface literal unions in shared/inspector-command.ts (no in-tree caller sends it; CLI ships "playground") - Delete the now-empty components/app-builder/ directory PostHog event names (app_builder_tab_viewed etc.) preserved for analytics continuity; comments updated to explain the carry-over. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dosubot
Bot
added
the
size:L
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
WalkthroughThis PR performs a systematic migration from App Builder state management to Playground state management. The core hook is renamed from Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
mcpjam-inspector/client/src/components/ui-playground/hooks/use-playground-state.ts (1)
228-241:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPropagate onboarding start to the parent callback.
This effect updates the local sidebar state, but
onOnboardingChangeis only ever called withfalseon Line 224 and Line 245. Any parent state wired through this callback never observes onboarding begin, so the app-level Playground onboarding gating added in this rename will stay off.Suggested fix
useLayoutEffect(() => { // NUX: collapse the tools sidebar for the whole first-run connect + guided // flow. While the server is still connecting, `isGuidedPostConnect` is // false; checking phase too avoids flashing the sidebar open until // connect completes. const collapseToolsForNux = onboarding.phase === "connecting_excalidraw" || onboarding.isGuidedPostConnect; + onOnboardingChange?.(collapseToolsForNux); if (collapseToolsForNux) { setSidebarVisible(false); } else { setSidebarVisible(true); } - }, [onboarding.phase, onboarding.isGuidedPostConnect, setSidebarVisible]); + }, [ + onboarding.phase, + onboarding.isGuidedPostConnect, + onOnboardingChange, + setSidebarVisible, + ]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@mcpjam-inspector/client/src/components/ui-playground/hooks/use-playground-state.ts` around lines 228 - 241, The effect that toggles the local sidebar (useLayoutEffect using onboarding.phase and onboarding.isGuidedPostConnect and setSidebarVisible) must also notify the parent via onOnboardingChange: when collapseToolsForNux is true call onOnboardingChange(true) to propagate that onboarding has started, and when collapseToolsForNux is false call onOnboardingChange(false) to indicate it ended; add these calls alongside the existing setSidebarVisible branches so the parent receives both start and stop events driven by onboarding.phase / onboarding.isGuidedPostConnect.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@mcpjam-inspector/client/src/components/ui-playground/hooks/use-playground-state.ts`:
- Around line 228-241: The effect that toggles the local sidebar
(useLayoutEffect using onboarding.phase and onboarding.isGuidedPostConnect and
setSidebarVisible) must also notify the parent via onOnboardingChange: when
collapseToolsForNux is true call onOnboardingChange(true) to propagate that
onboarding has started, and when collapseToolsForNux is false call
onOnboardingChange(false) to indicate it ended; add these calls alongside the
existing setSidebarVisible branches so the parent receives both start and stop
events driven by onboarding.phase / onboarding.isGuidedPostConnect.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 86e5d219-a4c2-469d-9c9b-6f60e47d6fc0
📒 Files selected for processing (18)
mcpjam-inspector/client/src/App.tsxmcpjam-inspector/client/src/components/ActiveServerSelector.tsxmcpjam-inspector/client/src/components/playground/PlaygroundCenter.tsxmcpjam-inspector/client/src/components/playground/PlaygroundLeftRail.tsxmcpjam-inspector/client/src/components/playground/PlaygroundSkeleton.tsxmcpjam-inspector/client/src/components/playground/PlaygroundTab.tsxmcpjam-inspector/client/src/components/playground/panes/MultiServerToolsPane.tsxmcpjam-inspector/client/src/components/ui-playground/HandDrawnSendHint.tsxmcpjam-inspector/client/src/components/ui-playground/PlaygroundLeft.tsxmcpjam-inspector/client/src/components/ui-playground/PlaygroundMain.tsxmcpjam-inspector/client/src/components/ui-playground/PostConnectGuide.tsxmcpjam-inspector/client/src/components/ui-playground/__tests__/HandDrawnSendHint.test.tsxmcpjam-inspector/client/src/components/ui-playground/__tests__/PlaygroundMain.test.tsxmcpjam-inspector/client/src/components/ui-playground/__tests__/PostConnectGuide.test.tsxmcpjam-inspector/client/src/components/ui-playground/hooks/__tests__/select-connected-active-server-names.test.tsmcpjam-inspector/client/src/components/ui-playground/hooks/index.tsmcpjam-inspector/client/src/components/ui-playground/hooks/use-playground-state.tsmcpjam-inspector/shared/inspector-command.ts
Internal previewPreview URL: https://mcp-inspector-pr-2310.up.railway.app |
1 participant
Summary
Final follow-up to #2301 (App Builder removal) and #2308 (chat-v2 tab removal). App Builder (tab) and chat-v2 (tab) are both gone; Playground is the only consumer of the orchestration hook, context, skeleton, and onboarding state that still carried "AppBuilder" names. Pure mechanical rename — no behavior change.
Naming changes
useAppBuilderStateusePlaygroundStateAppBuilderStateProvider/useAppBuilderStateContextPlaygroundStateProvider/usePlaygroundStateContextUseAppBuilderStateOptions/UseAppBuilderStateReturnUsePlaygroundStateOptions/UsePlaygroundStateReturnAppBuilderLoadingStatePlaygroundLoadingStateAPP_BUILDER_FIRST_RUN_PROMPTPLAYGROUND_FIRST_RUN_PROMPTappBuilderOnboarding/setAppBuilderOnboarding(App.tsx)playgroundOnboarding/setPlaygroundOnboardingAppBuilderSkeletonPlaygroundSkeleton"app-builder-send-nux-hint"testid"playground-send-nux-hint"use-app-builder-state.tsuse-playground-state.tscomponents/app-builder/AppBuilderSkeleton.tsxcomponents/playground/PlaygroundSkeleton.tsxcomponents/app-builder/PostConnectGuide.tsxcomponents/ui-playground/PostConnectGuide.tsx(no identifier rename)components/app-builder/directory deleted.Other changes
"app-builder"arm fromsurfaceliteral unions inshared/inspector-command.ts(ToolInvocationPayload,RenderToolResultInspectorCommand,SnapshotAppInspectorCommand). The CLI ships"playground"already; no in-tree caller emits"app-builder".surfaceoption fromUsePlaygroundStateOptions. The only call site (PlaygroundTab.tsx) always passed"playground"— single-value union was dead weight."playground".ActiveServerSelector.tsxandui-playground/PlaygroundLeft.tsxso the catch-all grep is clean.Preserved (analytics continuity)
PostHog event names stay as-is:
app_builder_tab_viewedapp_builder_tool_executedapp_builder_send_messageEach fire site has a comment explaining the carry-over.
The
surface:property on theapp_builder_tab_viewedPostHog event payload was dropped along with the option. It was only meaningful when there were two surfaces (App Builder vs Playground). If any PostHog dashboard or query filters/breakdowns on that property, this is a small downstream analytics change — let me know and I'll restore it as a hardcodedsurface: "playground".Test plan
npm run typecheck:clientcleanuseAppBuilderState | AppBuilderStateProvider | AppBuilderLoadingState | AppBuilderSkeleton | APP_BUILDER_FIRST_RUN_PROMPT | appBuilderOnboarding | app-builder-send-nux-hint→ 0"app-builder"literal in client/shared.ts/.tsx→ 0components/app-builder/import paths → 0AppBuilder | app-builder | appBuilder | APP_BUILDERacross client/shared → 0 (PostHog event strings use underscores, so they're excluded)Net diff: 18 files, +91 / −107.
🤖 Generated with Claude Code
Note
Medium Risk
Inspector commands or dashboards that still send or filter on
"app-builder"or the droppedsurfaceproperty on tab-view events will break or skew analytics; otherwise this is a rename with narrow contract tightening.Overview
Renames the Playground orchestration layer from App Builder naming to Playground across hooks, context, skeleton, onboarding state in
App.tsx, exports, and tests (usePlaygroundState,PlaygroundStateProvider,PLAYGROUND_FIRST_RUN_PROMPT,playground-send-nux-hint, etc.), including movingPostConnectGuideunderui-playground.Tightens shared inspector command types by removing
"app-builder"fromsurfaceunions inshared/inspector-command.ts; Playground handlers now accept only"playground", and the optionalsurfaceoption on the state hook (and its PostHog payload onapp_builder_tab_viewed) is removed.PostHog event names (
app_builder_tab_viewed, etc.) are unchanged for analytics continuity.Reviewed by Cursor Bugbot for commit 75d2031. Bugbot is set up for automated code reviews on this repo. Configure here.