refactor(playground): rename AppBuilder internals to Playground

mcpjam-inspector/client/src/App.tsx

@@ -944,7 +944,7 @@ export function PlaygroundRoute() {
     projectServers,
     remoteFirstRunOnboardingShown,
     selectedMCPConfig,
-    setAppBuilderOnboarding,
+    setPlaygroundOnboarding,
     setEvalChatHandoff,
     workOsUser,
   } = useAppRouteContext();
@@ -965,7 +965,7 @@ export function PlaygroundRoute() {
       onConnect={handleConnect}
       onSaveHostContext={handleUpdateHostContext}
       ensureServersReady={ensureServersReady}
-      onOnboardingChange={setAppBuilderOnboarding}
+      onOnboardingChange={setPlaygroundOnboarding}
       playgroundServerSelectorProps={playgroundServerSelectorProps}
       activeHost={activeHost}
       evalChatHandoff={evalChatHandoff}
@@ -1084,7 +1084,7 @@ export default function App() {
     optimisticallyDeletedOrganizationIds,
     setOptimisticallyDeletedOrganizationIds,
   ] = useState<string[]>([]);
-  const [appBuilderOnboarding, setAppBuilderOnboarding] = useState(false);
+  const [playgroundOnboarding, setPlaygroundOnboarding] = useState(false);
   const [callbackCompleted, setCallbackCompleted] = useState(false);
   const [callbackRecoveryExpired, setCallbackRecoveryExpired] = useState(false);
   const billingDeepLinkNavRef = useRef(false);
@@ -2895,7 +2895,7 @@ export default function App() {
     saveServerConfigWithoutConnecting,
     selectedMCPConfig,
     selectedServerEntry,
-    setAppBuilderOnboarding,
+    setPlaygroundOnboarding,
     setActiveHostId,
     setEvalChatHandoff,
     setHostsTabSelectedHostId,
@@ -2911,7 +2911,7 @@ export default function App() {
   const appContent = (
     <SidebarProvider defaultOpen={true}>
       <AppChromeSidebar
-        hidden={appBuilderOnboarding}
+        hidden={playgroundOnboarding}
         onNavigate={handleNavigate}
         activeTab={activeTab}
         projects={projects}
@@ -2934,7 +2934,7 @@ export default function App() {
       />
       <SidebarInset className="flex flex-col min-h-0">
         <AppChromeHeader
-          hidden={appBuilderOnboarding}
+          hidden={playgroundOnboarding}
           activeServerSelectorProps={activeServerSelectorProps}
           globalHostBarProps={globalHostBarProps}
         />

mcpjam-inspector/client/src/components/ActiveServerSelector.tsx

@@ -35,8 +35,7 @@ export interface ActiveServerSelectorProps {
    * Bulk-replace the multi-server selection. Wired in for the Playground
    * tab's host snapshot — picking a named host should toggle on the host's
    * required + optional servers in one shot, not per-server. Optional on
-   * the shared interface so the AppBuilder (single-select) doesn't need
-   * it.
+   * the shared interface so single-select callers don't need it.
    */
   onSelectMultipleServers?: (serverNames: string[]) => void;
   onConnect: (formData: ServerFormData) => void;

mcpjam-inspector/client/src/components/playground/PlaygroundCenter.tsx

@@ -1,20 +1,20 @@
 /**
  * PlaygroundCenter
  *
- * Center pane of the Playground IDE shell. Consumes `useAppBuilderState`
+ * Center pane of the Playground IDE shell. Consumes `usePlaygroundState`
  * via context (PlaygroundTab owns the single hook call so the docked tools
  * pane and the center share state). Renders `PlaygroundMain` directly — the
  * tools sidebar UI lives in the docked `tools` pane instead.
  */
 import { Wrench } from "lucide-react";
 import { EmptyState } from "@/components/ui/empty-state";
-import { AppBuilderSkeleton } from "@/components/app-builder/AppBuilderSkeleton";
+import { PlaygroundSkeleton } from "@/components/playground/PlaygroundSkeleton";
 import { PlaygroundMain } from "@/components/ui-playground/PlaygroundMain";
 import SaveRequestDialog from "@/components/tools/SaveRequestDialog";
 import {
-  APP_BUILDER_FIRST_RUN_PROMPT,
-  useAppBuilderStateContext,
-} from "@/components/ui-playground/hooks/use-app-builder-state";
+  PLAYGROUND_FIRST_RUN_PROMPT,
+  usePlaygroundStateContext,
+} from "@/components/ui-playground/hooks/use-playground-state";
 import type { PlaygroundServerSelectorProps } from "@/components/ActiveServerSelector";
 import type { ProjectHostContextDraft } from "@/lib/client-config";
 import type { EnsureServersReadyResult } from "@/hooks/use-app-state";
@@ -46,12 +46,12 @@ export function PlaygroundCenter({
   evalChatHandoff = null,
   onEvalChatHandoffConsumed,
 }: PlaygroundCenterProps) {
-  const state = useAppBuilderStateContext();
+  const state = usePlaygroundStateContext();
 
   if (state.loadingState.kind === "skeleton") {
     return (
       <div className="h-full flex flex-col overflow-hidden relative">
-        <AppBuilderSkeleton />
+        <PlaygroundSkeleton />
       </div>
     );
   }
@@ -92,7 +92,7 @@ export function PlaygroundCenter({
         playgroundServerSelectorProps={playgroundServerSelectorProps}
         initialInput={
           state.firstRunComposerSeed
-            ? APP_BUILDER_FIRST_RUN_PROMPT
+            ? PLAYGROUND_FIRST_RUN_PROMPT
             : undefined
         }
         initialInputTypewriter={state.firstRunComposerSeed}

mcpjam-inspector/client/src/components/playground/PlaygroundLeftRail.tsx

@@ -3,7 +3,7 @@ import { Hammer, History } from "lucide-react";
 import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react";
 import { standardEventProps } from "@/lib/PosthogUtils";
 import { ChatHistoryRail } from "@/components/chat-v2/history/ChatHistoryRail";
-import { useAppBuilderStateContext } from "@/components/ui-playground/hooks/use-app-builder-state";
+import { usePlaygroundStateContext } from "@/components/ui-playground/hooks/use-playground-state";
 import { PlaygroundLeft } from "@/components/ui-playground/PlaygroundLeft";
 import { MultiServerToolsPaneInner } from "./panes/MultiServerToolsPane";
 import { usePlaygroundChatHistoryBridge } from "./playground-chat-history-bridge";
@@ -130,7 +130,7 @@ function SessionsBody() {
 }
 
 function ToolsBody() {
-  const state = useAppBuilderStateContext();
+  const state = usePlaygroundStateContext();
   const isMulti = state.activeServerNames.length > 1;
 
   if (isMulti) {

mcpjam-inspector/client/src/components/app-builder/AppBuilderSkeleton.tsx → mcpjam-inspector/client/src/components/playground/PlaygroundSkeleton.tsx

@@ -1,7 +1,7 @@
 /**
- * Lightweight loading shell for App Builder while auth or first-run connect settles.
+ * Lightweight loading shell for the Playground while auth or first-run connect settles.
  * Sidebars are collapsed during onboarding so no skeleton is needed.
  */
-export function AppBuilderSkeleton() {
+export function PlaygroundSkeleton() {
   return <div className="h-full bg-background" />;
 }

mcpjam-inspector/client/src/components/playground/PlaygroundTab.tsx

@@ -3,9 +3,9 @@ import { useConvexAuth } from "convex/react";
 import { usePostHog } from "posthog-js/react";
 import { standardEventProps } from "@/lib/PosthogUtils";
 import {
-  AppBuilderStateProvider,
-  useAppBuilderState,
-} from "@/components/ui-playground/hooks/use-app-builder-state";
+  PlaygroundStateProvider,
+  usePlaygroundState,
+} from "@/components/ui-playground/hooks/use-playground-state";
 import {
   ChatboxChatUiOverrideProvider,
   ChatboxHostStyleProvider,
@@ -93,8 +93,8 @@ interface PlaygroundTabProps {
  * in v2. Chat-v2 also keeps these local, and matching that behavior keeps the
  * mental model simple ("rails are workspace chrome, not part of a view").
  *
- * Owns the single `useAppBuilderState()` call for the surface; the
- * `AppBuilderStateProvider` exposes it to both the left rail's Tools tab and
+ * Owns the single `usePlaygroundState()` call for the surface; the
+ * `PlaygroundStateProvider` exposes it to both the left rail's Tools tab and
  * the center pane.
  */
 export function PlaygroundTab(props: PlaygroundTabProps) {
@@ -186,7 +186,7 @@ export function PlaygroundTab(props: PlaygroundTabProps) {
     requiredServerNames: effectiveHostRequiredNames,
   });
 
-  const appBuilderState = useAppBuilderState({
+  const playgroundState = usePlaygroundState({
     activeProjectId: props.activeProjectId,
     serverConfig: props.serverConfig,
     serverName: props.serverName,
@@ -201,7 +201,6 @@ export function PlaygroundTab(props: PlaygroundTabProps) {
     onSaveHostContext: props.onSaveHostContext,
     ensureServersReady: props.ensureServersReady,
     onOnboardingChange: props.onOnboardingChange,
-    surface: "playground",
     // Playground supports multi-server tool selection — pass the active
     // multi-server set through so the docked tools pane aggregates across
     // all of them and execution routes to the right server per tool.
@@ -221,7 +220,7 @@ export function PlaygroundTab(props: PlaygroundTabProps) {
   const rightPanelRef = useRef<ImperativePanelHandle | null>(null);
 
   return (
-    <AppBuilderStateProvider value={appBuilderState}>
+    <PlaygroundStateProvider value={playgroundState}>
       <ActiveMcpProfileProvider value={activeMcpProfile}>
         <ActiveHostCapsResolverScope
           // Preview-mode (explicit picker selection) wins; otherwise fall
@@ -356,6 +355,6 @@ export function PlaygroundTab(props: PlaygroundTabProps) {
           </ChatboxHostStyleProvider>
         </ActiveHostCapsResolverScope>
       </ActiveMcpProfileProvider>
-    </AppBuilderStateProvider>
+    </PlaygroundStateProvider>
   );
 }

mcpjam-inspector/client/src/components/playground/panes/MultiServerToolsPane.tsx

@@ -27,7 +27,7 @@ import { ScrollArea } from "@mcpjam/design-system/scroll-area";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@mcpjam/design-system/tooltip";
 import { RefreshCw } from "lucide-react";
 import { useAggregatedTools } from "@/hooks/use-aggregated-tools";
-import { useAppBuilderStateContext } from "@/components/ui-playground/hooks/use-app-builder-state";
+import { usePlaygroundStateContext } from "@/components/ui-playground/hooks/use-playground-state";
 import { ParametersForm } from "@/components/ui-playground/ParametersForm";
 import { SelectedToolHeader } from "@/components/ui-playground/SelectedToolHeader";
 import { TabHeader } from "@/components/ui-playground/TabHeader";
@@ -54,7 +54,7 @@ interface Selection {
 }
 
 export function MultiServerToolsPaneInner({ activeServerNames }: InnerProps) {
-  const state = useAppBuilderStateContext();
+  const state = usePlaygroundStateContext();
   const { flat, collidingNames, loadingByServer, refetch } =
     useAggregatedTools(activeServerNames);
 

mcpjam-inspector/client/src/components/ui-playground/HandDrawnSendHint.tsx

@@ -65,7 +65,7 @@ export function HandDrawnSendHint({
     >
       <div
         className="flex flex-col items-end gap-0"
-        data-testid="app-builder-send-nux-hint"
+        data-testid="playground-send-nux-hint"
       >
         <span
           className="inline-block"

mcpjam-inspector/client/src/components/ui-playground/PlaygroundLeft.tsx

@@ -57,8 +57,8 @@ interface PlaygroundLeftProps {
   onClose?: () => void;
   /**
    * Whether to render the inline LoggerView in the bottom resizable slot.
-   * Defaults to true for backward compat with AppBuilderTab. The Playground
-   * left rail passes `false` because the logger lives in the right rail.
+   * Defaults to true for legacy callers. The Playground left rail passes
+   * `false` because the logger lives in the right rail.
    */
   showLogger?: boolean;
 }

mcpjam-inspector/client/src/components/ui-playground/PlaygroundMain.tsx

@@ -116,7 +116,7 @@ import {
   extractHostTheme,
   type ProjectHostContextDraft,
 } from "@/lib/client-config";
-import { PostConnectGuide } from "@/components/app-builder/PostConnectGuide";
+import { PostConnectGuide } from "@/components/ui-playground/PostConnectGuide";
 import {
   ChatboxHostStyleProvider,
   ChatboxHostThemeProvider,

mcpjam-inspector/client/src/components/ui-playground/__tests__/HandDrawnSendHint.test.tsx

@@ -19,7 +19,7 @@ describe("HandDrawnSendHint", () => {
 
   it("renders the hint label", () => {
     render(<HandDrawnSendHint theme="light" />);
-    expect(screen.getByTestId("app-builder-send-nux-hint")).toHaveTextContent(
+    expect(screen.getByTestId("playground-send-nux-hint")).toHaveTextContent(
       "Try this prompt with a demo MCP server",
     );
   });

mcpjam-inspector/client/src/components/ui-playground/__tests__/PlaygroundMain.test.tsx

@@ -1571,7 +1571,7 @@ describe("PlaygroundMain", () => {
         />,
       );
 
-      const hint = screen.getByTestId("app-builder-send-nux-hint");
+      const hint = screen.getByTestId("playground-send-nux-hint");
       const chatInput = screen.getByTestId("chat-input");
       expect(hint).toHaveTextContent("Try this prompt with a demo MCP server");
       expect(hint.closest('[data-testid="chat-input"]')).toBeNull();
@@ -1582,7 +1582,7 @@ describe("PlaygroundMain", () => {
       expect(hint.querySelector("svg")).toBeTruthy();
     });
 
-    it("keeps App Builder send NUX hint visible after server connects", () => {
+    it("keeps Playground send NUX hint visible after server connects", () => {
       mockSharedAppState.servers["test-server"] = {
         connectionStatus: "connected",
       };
@@ -1596,7 +1596,7 @@ describe("PlaygroundMain", () => {
         />,
       );
 
-      expect(screen.getByTestId("app-builder-send-nux-hint")).toHaveTextContent(
+      expect(screen.getByTestId("playground-send-nux-hint")).toHaveTextContent(
         "Try this prompt with a demo MCP server",
       );
     });

mcpjam-inspector/client/src/components/ui-playground/hooks/__tests__/select-connected-active-server-names.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { ServerWithName } from "@/hooks/use-app-state";
-import { selectConnectedActiveServerNames } from "../use-app-builder-state";
+import { selectConnectedActiveServerNames } from "../use-playground-state";
 
 function server(
   name: string,

mcpjam-inspector/client/src/components/ui-playground/hooks/index.ts

@@ -19,13 +19,13 @@ export type {
 } from "./useToolExecution";
 export { useToolExecution } from "./useToolExecution";
 export type {
-  AppBuilderLoadingState,
-  UseAppBuilderStateOptions,
-  UseAppBuilderStateReturn,
-} from "./use-app-builder-state";
+  PlaygroundLoadingState,
+  UsePlaygroundStateOptions,
+  UsePlaygroundStateReturn,
+} from "./use-playground-state";
 export {
-  APP_BUILDER_FIRST_RUN_PROMPT,
-  AppBuilderStateProvider,
-  useAppBuilderState,
-  useAppBuilderStateContext,
-} from "./use-app-builder-state";
+  PLAYGROUND_FIRST_RUN_PROMPT,
+  PlaygroundStateProvider,
+  usePlaygroundState,
+  usePlaygroundStateContext,
+} from "./use-playground-state";