diff --git a/mcpjam-inspector/.env.local b/mcpjam-inspector/.env.local
index 018343b99..007a87403 100644
--- a/mcpjam-inspector/.env.local
+++ b/mcpjam-inspector/.env.local
@@ -1,7 +1,7 @@
-VITE_CONVEX_URL=https://proper-clownfish-150.convex.cloud
-CONVEX_URL=https://proper-clownfish-150.convex.cloud
+VITE_CONVEX_URL=https://tough-cassowary-291.convex.cloud
+CONVEX_URL=https://tough-cassowary-291.convex.cloud
 VITE_WORKOS_CLIENT_ID=client_01K4C1TVA6CMQ3G32F1P301A9G
 VITE_WORKOS_REDIRECT_URI=mcpjam://oauth/callback
-CONVEX_HTTP_URL=https://proper-clownfish-150.convex.site
+CONVEX_HTTP_URL=https://tough-cassowary-291.convex.site
 ENVIRONMENT=local
-VITE_DISABLE_POSTHOG_LOCAL=true
\ No newline at end of file
+VITE_DISABLE_POSTHOG_LOCAL=true
diff --git a/mcpjam-inspector/client/src/App.tsx b/mcpjam-inspector/client/src/App.tsx
index e1df675bd..fa6cf01ef 100644
--- a/mcpjam-inspector/client/src/App.tsx
+++ b/mcpjam-inspector/client/src/App.tsx
@@ -13,6 +13,7 @@ import { ChatTabV2 } from "./components/ChatTabV2";
 import { EvalsTab } from "./components/EvalsTab";
 import { CiEvalsTab } from "./components/CiEvalsTab";
 import { ViewsTab } from "./components/ViewsTab";
+import { SandboxesTab } from "./components/SandboxesTab";
 import { SettingsTab } from "./components/SettingsTab";
 import { TracingTab } from "./components/TracingTab";
 import { AuthTab } from "./components/AuthTab";
@@ -54,23 +55,55 @@ import {
   SharedServerChatPage,
   getSharedPathTokenFromLocation,
 } from "./components/hosted/SharedServerChatPage";
+import {
+  SandboxChatPage,
+  getSandboxPathTokenFromLocation,
+} from "./components/hosted/SandboxChatPage";
 import { useHostedApiContext } from "./hooks/hosted/use-hosted-api-context";
 import { HOSTED_MODE } from "./lib/config";
 import { resolveHostedNavigation } from "./lib/hosted-navigation";
 import { buildOAuthTokensByServerId } from "./lib/oauth/oauth-tokens";
+import {
+  clearHostedOAuthPendingState,
+  getHostedOAuthCallbackContext,
+  resolveHostedOAuthReturnHash,
+} from "./lib/hosted-oauth-callback";
+import {
+  clearSandboxSignInReturnPath,
+  readSandboxSession,
+  readSandboxSignInReturnPath,
+  writeSandboxSignInReturnPath,
+} from "./lib/sandbox-session";
 import {
   clearSharedSignInReturnPath,
-  hasActiveSharedSession,
   readSharedServerSession,
   readSharedSignInReturnPath,
   slugify,
-  SHARED_OAUTH_PENDING_KEY,
   writeSharedSignInReturnPath,
   readPendingServerAdd,
   clearPendingServerAdd,
 } from "./lib/shared-server-session";
+import {
+  sanitizeHostedOAuthErrorMessage,
+  writeHostedOAuthResumeMarker,
+} from "./lib/hosted-oauth-resume";
 import { handleOAuthCallback } from "./lib/oauth/mcp-oauth";
 
+function getHostedOAuthCallbackErrorMessage(): string {
+  const params = new URLSearchParams(window.location.search);
+  const error = params.get("error");
+  const description = params.get("error_description");
+
+  if (error === "access_denied" && !description) {
+    return "Authorization was cancelled. Try again.";
+  }
+
+  return sanitizeHostedOAuthErrorMessage(
+    description || error,
+    "Authorization could not be completed. Try again.",
+  );
+}
+
 export default function App() {
   const [activeTab, setActiveTab] = useState("servers");
   const [activeOrganizationId, setActiveOrganizationId] = useState<
@@ -88,38 +121,128 @@ export default function App() {
     isLoading: isWorkOsLoading,
   } = useAuth();
   const { isAuthenticated, isLoading: isAuthLoading } = useConvexAuth();
-  const [sharedOAuthHandling, setSharedOAuthHandling] = useState(false);
+  const [hostedOAuthHandling, setHostedOAuthHandling] = useState(() =>
+    HOSTED_MODE ? getHostedOAuthCallbackContext() !== null : false,
+  );
   const [exitedSharedChat, setExitedSharedChat] = useState(false);
+  const [exitedSandboxChat, setExitedSandboxChat] = useState(false);
   const sharedPathToken = HOSTED_MODE ? getSharedPathTokenFromLocation() : null;
+  const sandboxPathToken = HOSTED_MODE
+    ? getSandboxPathTokenFromLocation()
+    : null;
+  const sharedSession = HOSTED_MODE ? readSharedServerSession() : null;
+  const sandboxSession = HOSTED_MODE ? readSandboxSession() : null;
+  const currentHashSlug = window.location.hash
+    .replace(/^#/, "")
+    .replace(/^\/+/, "")
+    .split("/")[0];
+  const hostedRouteKind = useMemo(() => {
+    if (!HOSTED_MODE) {
+      return null;
+    }
+
+    if (sharedPathToken) {
+      return "shared" as const;
+    }
+    if (sandboxPathToken) {
+      return "sandbox" as const;
+    }
+
+    if (sharedSession && sandboxSession) {
+      if (currentHashSlug === slugify(sharedSession.payload.serverName)) {
+        return "shared" as const;
+      }
+      if (currentHashSlug === slugify(sandboxSession.payload.name)) {
+        return "sandbox" as const;
+      }
+      return null;
+    }
+
+    if (sharedSession) {
+      return "shared" as const;
+    }
+    if (sandboxSession) {
+      return "sandbox" as const;
+    }
+
+    return null;
+  }, [
+    currentHashSlug,
+    sandboxPathToken,
+    sandboxSession,
+    sharedPathToken,
+    sharedSession,
+  ]);
   const isSharedChatRoute =
-    HOSTED_MODE &&
-    !exitedSharedChat &&
-    (!!sharedPathToken || hasActiveSharedSession());
+    HOSTED_MODE && !exitedSharedChat && hostedRouteKind === "shared";
+  const isSandboxChatRoute =
+    HOSTED_MODE && !exitedSandboxChat && hostedRouteKind === "sandbox";
+  const isHostedChatRoute = isSharedChatRoute || isSandboxChatRoute;
 
-  // Handle shared OAuth callback: detect code + pending flag before normal rendering
+  // Handle hosted OAuth callback: claim the callback before any hosted page renders.
   useEffect(() => {
+    const callbackContext = getHostedOAuthCallbackContext();
+    if (!callbackContext) return;
+
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get("code");
-    if (!code || !localStorage.getItem(SHARED_OAUTH_PENDING_KEY)) return;
+    const error = urlParams.get("error");
 
     let cancelled = false;
-    setSharedOAuthHandling(true);
+    setHostedOAuthHandling(true);
 
-    const cleanupOAuth = () => {
+    const finalizeHostedOAuth = (errorMessage?: string | null) => {
       if (cancelled) return;
-      localStorage.removeItem(SHARED_OAUTH_PENDING_KEY);
-      const storedSession = readSharedServerSession();
-      const sharedHash = storedSession
-        ? slugify(storedSession.payload.serverName)
-        : "shared";
-      window.history.replaceState({}, "", `/#${sharedHash}`);
+      if (callbackContext.serverName) {
+        writeHostedOAuthResumeMarker({
+          surface: callbackContext.surface,
+          serverName: callbackContext.serverName,
+          serverUrl: callbackContext.serverUrl,
+          errorMessage:
+            errorMessage && errorMessage.trim() ? errorMessage : null,
+        });
+      }
+
+      clearHostedOAuthPendingState();
+      localStorage.removeItem("mcp-oauth-pending");
+      localStorage.removeItem("mcp-oauth-return-hash");
+      window.history.replaceState(
+        {},
+        "",
+        `/${resolveHostedOAuthReturnHash(callbackContext)}`,
+      );
     };
 
+    if (error || !code) {
+      finalizeHostedOAuth(getHostedOAuthCallbackErrorMessage());
+      setHostedOAuthHandling(false);
+      return;
+    }
+
     handleOAuthCallback(code)
-      .then(cleanupOAuth)
-      .catch(cleanupOAuth)
+      .then((result) => {
+        if (result.success) {
+          finalizeHostedOAuth(null);
+          return;
+        }
+
+        finalizeHostedOAuth(
+          sanitizeHostedOAuthErrorMessage(
+            result.error,
+            "Authorization could not be completed. Try again.",
+          ),
+        );
+      })
+      .catch((callbackError) => {
+        finalizeHostedOAuth(
+          sanitizeHostedOAuthErrorMessage(
+            callbackError,
+            "Authorization could not be completed. Try again.",
+          ),
+        );
+      })
       .finally(() => {
-        if (!cancelled) setSharedOAuthHandling(false);
+        if (!cancelled) setHostedOAuthHandling(false);
       });
 
     return () => {
@@ -167,9 +290,15 @@ export default function App() {
 
     // Let AuthKit + Convex auth settle before leaving /callback.
     if (!isAuthLoading && isAuthenticated) {
+      const sandboxReturnPath = readSandboxSignInReturnPath();
       const sharedReturnPath = readSharedSignInReturnPath();
+      clearSandboxSignInReturnPath();
       clearSharedSignInReturnPath();
-      window.history.replaceState({}, "", sharedReturnPath ?? "/");
+      window.history.replaceState(
+        {},
+        "",
+        sandboxReturnPath ?? sharedReturnPath ?? "/",
+      );
       setCallbackCompleted(true);
       setCallbackRecoveryExpired(false);
       return;
@@ -212,7 +341,7 @@ export default function App() {
 
   // Auto-add a shared server when returning from SharedServerChatPage via "Open MCPJam"
   useEffect(() => {
-    if (isSharedChatRoute) return;
+    if (isHostedChatRoute) return;
     if (isLoadingRemoteWorkspaces) return;
     if (isAuthLoading) return;
 
@@ -233,7 +362,7 @@ export default function App() {
       oauthScopes: pending.oauthScopes ?? undefined,
     });
   }, [
-    isSharedChatRoute,
+    isHostedChatRoute,
     isLoadingRemoteWorkspaces,
     isAuthLoading,
     workspaceServers,
@@ -306,7 +435,7 @@ export default function App() {
     guestOauthTokensByServerName,
     isAuthenticated,
     serverConfigs: guestServerConfigs,
-    enabled: !isSharedChatRoute,
+    enabled: !isHostedChatRoute,
   });
 
   // Compute the set of server names that have saved views
@@ -337,6 +466,17 @@ export default function App() {
         return;
       }
 
+      if (isSandboxChatRoute) {
+        const storedSession = readSandboxSession();
+        if (storedSession) {
+          const expectedHash = slugify(storedSession.payload.name);
+          if (window.location.hash !== `#${expectedHash}`) {
+            window.location.hash = expectedHash;
+          }
+        }
+        return;
+      }
+
       const resolved = resolveHostedNavigation(target, HOSTED_MODE);
 
       if (
@@ -374,12 +514,16 @@ export default function App() {
       }
       setActiveTab(resolved.normalizedTab);
     },
-    [isSharedChatRoute, setSelectedMultipleServersToAllServers],
+    [
+      isSandboxChatRoute,
+      isSharedChatRoute,
+      setSelectedMultipleServersToAllServers,
+    ],
   );
 
   // Sync tab with hash on mount and when hash changes
   useEffect(() => {
-    if (isSharedChatRoute) {
+    if (isHostedChatRoute) {
       return;
     }
 
@@ -390,7 +534,7 @@ export default function App() {
     applyHash();
     window.addEventListener("hashchange", applyHash);
     return () => window.removeEventListener("hashchange", applyHash);
-  }, [applyNavigation, isSharedChatRoute]);
+  }, [applyNavigation, isHostedChatRoute]);
 
   // Redirect away from tabs hidden by the ci-evals feature flag.
   // Use strict equality to avoid redirecting while the flag is still loading (undefined).
@@ -410,7 +554,7 @@ export default function App() {
     return <OAuthDebugCallback />;
   }
 
-  if (sharedOAuthHandling) {
+  if (hostedOAuthHandling) {
     return <LoadingScreen />;
   }
 
@@ -447,7 +591,7 @@ export default function App() {
     return <CompletingSignInLoading />;
   }
 
-  if (isLoading && !isSharedChatRoute) {
+  if (isLoading && !isHostedChatRoute) {
     return <LoadingScreen />;
   }
 
@@ -459,7 +603,7 @@ export default function App() {
     hasWorkOsUser: !!workOsUser,
     isLoadingRemoteWorkspaces,
   });
-  const sharedHostedShellGateState = resolveHostedShellGateState({
+  const hostedChatShellGateState = resolveHostedShellGateState({
     hostedMode: HOSTED_MODE,
     isConvexAuthLoading: isAuthLoading,
     isConvexAuthenticated: isAuthenticated,
@@ -554,6 +698,9 @@ export default function App() {
               onLeaveWorkspace={() => handleLeaveWorkspace(activeWorkspaceId)}
             />
           )}
+          {activeTab === "sandboxes" && (
+            <SandboxesTab workspaceId={convexWorkspaceId} />
+          )}
           {activeTab === "resources" && (
             <div className="h-full overflow-hidden">
               <ResourcesTab
@@ -647,14 +794,15 @@ export default function App() {
         <Toaster />
         <HostedShellGate
           state={
-            isSharedChatRoute
-              ? sharedHostedShellGateState
-              : hostedShellGateState
+            isHostedChatRoute ? hostedChatShellGateState : hostedShellGateState
           }
           onSignIn={() => {
             if (sharedPathToken) {
               writeSharedSignInReturnPath(window.location.pathname);
             }
+            if (sandboxPathToken) {
+              writeSandboxSignInReturnPath(window.location.pathname);
+            }
             signIn();
           }}
         >
@@ -663,6 +811,11 @@ export default function App() {
               pathToken={sharedPathToken}
               onExitSharedChat={() => setExitedSharedChat(true)}
             />
+          ) : isSandboxChatRoute ? (
+            <SandboxChatPage
+              pathToken={sandboxPathToken}
+              onExitSandboxChat={() => setExitedSandboxChat(true)}
+            />
           ) : (
             appContent
           )}
diff --git a/mcpjam-inspector/client/src/__tests__/App.hosted-oauth.test.tsx b/mcpjam-inspector/client/src/__tests__/App.hosted-oauth.test.tsx
new file mode 100644
index 000000000..270c90a70
--- /dev/null
+++ b/mcpjam-inspector/client/src/__tests__/App.hosted-oauth.test.tsx
@@ -0,0 +1,300 @@
+import type { ReactNode } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import App from "../App";
+import {
+  clearHostedOAuthPendingState,
+  writeHostedOAuthPendingMarker,
+} from "../lib/hosted-oauth-callback";
+import {
+  clearSandboxSession,
+  writeSandboxSession,
+} from "../lib/sandbox-session";
+
+const { mockHandleOAuthCallback, mockPosthogCapture, mockUseAppState } =
+  vi.hoisted(() => ({
+    mockHandleOAuthCallback: vi.fn(),
+    mockPosthogCapture: vi.fn(),
+    mockUseAppState: vi.fn(() => ({
+      appState: {
+        servers: {},
+        selectedServer: undefined,
+        selectedMultipleServers: [],
+      },
+      isLoading: false,
+      isLoadingRemoteWorkspaces: false,
+      workspaceServers: {},
+      connectedOrConnectingServerConfigs: {},
+      selectedMCPConfig: null,
+      handleConnect: vi.fn(),
+      handleDisconnect: vi.fn(),
+      handleReconnect: vi.fn(),
+      handleUpdate: vi.fn(),
+      handleRemoveServer: vi.fn(),
+      setSelectedServer: vi.fn(),
+      toggleServerSelection: vi.fn(),
+      setSelectedMultipleServersToAllServers: vi.fn(),
+      workspaces: {},
+      activeWorkspaceId: "ws_local",
+      handleSwitchWorkspace: vi.fn(),
+      handleCreateWorkspace: vi.fn(),
+      handleUpdateWorkspace: vi.fn(),
+      handleDeleteWorkspace: vi.fn(),
+      handleLeaveWorkspace: vi.fn(),
+      handleWorkspaceShared: vi.fn(),
+      saveServerConfigWithoutConnecting: vi.fn(),
+      handleConnectWithTokensFromOAuthFlow: vi.fn(),
+      handleRefreshTokensFromOAuthFlow: vi.fn(),
+    })),
+  }));
+
+vi.mock("convex/react", () => ({
+  useConvexAuth: () => ({
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}));
+
+vi.mock("@workos-inc/authkit-react", () => ({
+  useAuth: () => ({
+    getAccessToken: vi.fn(),
+    signIn: vi.fn(),
+    user: null,
+    isLoading: false,
+  }),
+}));
+
+vi.mock("posthog-js/react", () => ({
+  usePostHog: () => ({
+    capture: mockPosthogCapture,
+  }),
+  useFeatureFlagEnabled: () => false,
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+vi.mock("../hooks/use-app-state", () => ({
+  useAppState: mockUseAppState,
+}));
+
+vi.mock("../hooks/useViews", () => ({
+  useViewQueries: () => ({ viewsByServer: new Map() }),
+  useWorkspaceServers: () => ({ serversById: new Map() }),
+}));
+
+vi.mock("../hooks/hosted/use-hosted-api-context", () => ({
+  useHostedApiContext: vi.fn(),
+}));
+
+vi.mock("../hooks/useElectronOAuth", () => ({
+  useElectronOAuth: vi.fn(),
+}));
+
+vi.mock("../hooks/useEnsureDbUser", () => ({
+  useEnsureDbUser: vi.fn(),
+}));
+
+vi.mock("../hooks/usePostHogIdentify", () => ({
+  usePostHogIdentify: vi.fn(),
+}));
+
+vi.mock("../lib/config", () => ({
+  HOSTED_MODE: true,
+}));
+
+vi.mock("../lib/theme-utils", () => ({
+  getInitialThemeMode: () => "light",
+  updateThemeMode: vi.fn(),
+  getInitialThemePreset: () => "default",
+  updateThemePreset: vi.fn(),
+}));
+
+vi.mock("../lib/oauth/mcp-oauth", () => ({
+  handleOAuthCallback: mockHandleOAuthCallback,
+}));
+
+vi.mock("../components/ServersTab", () => ({
+  ServersTab: () => <div />,
+}));
+vi.mock("../components/ToolsTab", () => ({
+  ToolsTab: () => <div />,
+}));
+vi.mock("../components/ResourcesTab", () => ({
+  ResourcesTab: () => <div />,
+}));
+vi.mock("../components/PromptsTab", () => ({
+  PromptsTab: () => <div />,
+}));
+vi.mock("../components/SkillsTab", () => ({
+  SkillsTab: () => <div />,
+}));
+vi.mock("../components/LearningTab", () => ({
+  LearningTab: () => <div />,
+}));
+vi.mock("../components/TasksTab", () => ({
+  TasksTab: () => <div />,
+}));
+vi.mock("../components/ChatTabV2", () => ({
+  ChatTabV2: () => <div />,
+}));
+vi.mock("../components/EvalsTab", () => ({
+  EvalsTab: () => <div />,
+}));
+vi.mock("../components/CiEvalsTab", () => ({
+  CiEvalsTab: () => <div />,
+}));
+vi.mock("../components/ViewsTab", () => ({
+  ViewsTab: () => <div />,
+}));
+vi.mock("../components/SandboxesTab", () => ({
+  SandboxesTab: () => <div />,
+}));
+vi.mock("../components/SettingsTab", () => ({
+  SettingsTab: () => <div />,
+}));
+vi.mock("../components/TracingTab", () => ({
+  TracingTab: () => <div />,
+}));
+vi.mock("../components/AuthTab", () => ({
+  AuthTab: () => <div />,
+}));
+vi.mock("../components/OAuthFlowTab", () => ({
+  OAuthFlowTab: () => <div />,
+}));
+vi.mock("../components/ui-playground/AppBuilderTab", () => ({
+  AppBuilderTab: () => <div />,
+}));
+vi.mock("../components/ProfileTab", () => ({
+  ProfileTab: () => <div />,
+}));
+vi.mock("../components/OrganizationsTab", () => ({
+  OrganizationsTab: () => <div />,
+}));
+vi.mock("../components/SupportTab", () => ({
+  SupportTab: () => <div />,
+}));
+vi.mock("../components/oauth/OAuthDebugCallback", () => ({
+  default: () => <div />,
+}));
+vi.mock("../components/mcp-sidebar", () => ({
+  MCPSidebar: () => <div />,
+}));
+vi.mock("../components/ui/sidebar", () => ({
+  SidebarInset: ({ children }: { children?: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  SidebarProvider: ({ children }: { children?: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock("../stores/preferences/preferences-provider", () => ({
+  PreferencesStoreProvider: ({ children }: { children?: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock("../components/ui/sonner", () => ({
+  Toaster: () => <div />,
+}));
+vi.mock("../state/app-state-context", () => ({
+  AppStateProvider: ({ children }: { children?: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock("../components/CompletingSignInLoading", () => ({
+  default: () => <div />,
+}));
+vi.mock("../components/LoadingScreen", () => ({
+  default: () => <div data-testid="hosted-oauth-loading" />,
+}));
+vi.mock("../components/Header", () => ({
+  Header: () => <div />,
+}));
+vi.mock("../components/hosted/HostedShellGate", () => ({
+  HostedShellGate: ({ children }: { children?: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock("../components/hosted/hosted-shell-gate-state", () => ({
+  resolveHostedShellGateState: () => "ready",
+}));
+vi.mock("../components/hosted/SharedServerChatPage", () => ({
+  SharedServerChatPage: () => <button type="button">Authorize</button>,
+  getSharedPathTokenFromLocation: () => null,
+}));
+vi.mock("../components/hosted/SandboxChatPage", () => ({
+  SandboxChatPage: () => <button type="button">Authorize</button>,
+  getSandboxPathTokenFromLocation: () => null,
+}));
+
+describe("App hosted OAuth callback handling", () => {
+  beforeEach(() => {
+    clearHostedOAuthPendingState();
+    clearSandboxSession();
+    localStorage.clear();
+    sessionStorage.clear();
+    vi.stubGlobal("__APP_VERSION__", "test");
+    window.history.replaceState({}, "", "/oauth/callback?code=oauth-code");
+    mockHandleOAuthCallback.mockReset();
+    mockPosthogCapture.mockReset();
+    mockHandleOAuthCallback.mockImplementation(
+      () => new Promise<never>(() => {}),
+    );
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Asaan",
+        description: "Hosted sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [
+          {
+            serverId: "srv_asana",
+            serverName: "asana",
+            useOAuth: true,
+            serverUrl: "https://mcp.asana.com/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+        ],
+      },
+    });
+    writeHostedOAuthPendingMarker({
+      surface: "sandbox",
+      serverName: "asana",
+      serverUrl: "https://mcp.asana.com/sse",
+      returnHash: "#asaan",
+    });
+    localStorage.setItem("mcp-oauth-pending", "asana");
+    localStorage.setItem("mcp-serverUrl-asana", "https://mcp.asana.com/sse");
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("shows loading before any hosted authorize CTA can render", async () => {
+    render(<App />);
+
+    expect(screen.getByTestId("hosted-oauth-loading")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Authorize" }),
+    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(mockHandleOAuthCallback).toHaveBeenCalledWith("oauth-code");
+    });
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/ChatTabV2.tsx b/mcpjam-inspector/client/src/components/ChatTabV2.tsx
index 3188c2c03..b1f0f5670 100644
--- a/mcpjam-inspector/client/src/components/ChatTabV2.tsx
+++ b/mcpjam-inspector/client/src/components/ChatTabV2.tsx
@@ -14,6 +14,7 @@ import { ElicitationDialog } from "@/components/ElicitationDialog";
 import type { DialogElicitation } from "@/components/ToolsTab";
 import { ChatInput } from "@/components/chat-v2/chat-input";
 import { Thread } from "@/components/chat-v2/thread";
+import { type ReasoningDisplayMode } from "@/components/chat-v2/thread/parts/reasoning-part";
 import { ServerWithName } from "@/hooks/use-app-state";
 import { MCPJamFreeModelsPrompt } from "@/components/chat-v2/mcpjam-free-models-prompt";
 import { usePostHog } from "posthog-js/react";
@@ -42,6 +43,7 @@ import { useSharedAppState } from "@/state/app-state-context";
 import { useWorkspaceServers } from "@/hooks/useViews";
 import { HOSTED_MODE } from "@/lib/config";
 import { buildOAuthTokensByServerId } from "@/lib/oauth/oauth-tokens";
+import type { HostedOAuthRequiredDetails } from "@/lib/hosted-oauth-required";
 
 interface ChatTabProps {
   connectedOrConnectingServerConfigs: Record<string, ServerWithName>;
@@ -52,7 +54,13 @@ interface ChatTabProps {
   hostedSelectedServerIdsOverride?: string[];
   hostedOAuthTokensOverride?: Record<string, string>;
   hostedShareToken?: string;
-  onOAuthRequired?: (serverUrl?: string) => void;
+  hostedSandboxToken?: string;
+  initialModelId?: string;
+  initialSystemPrompt?: string;
+  initialTemperature?: number;
+  initialRequireToolApproval?: boolean;
+  reasoningDisplayMode?: ReasoningDisplayMode;
+  onOAuthRequired?: (details?: HostedOAuthRequiredDetails) => void;
 }
 
 function ScrollToBottomButton() {
@@ -82,6 +90,12 @@ export function ChatTabV2({
   hostedSelectedServerIdsOverride,
   hostedOAuthTokensOverride,
   hostedShareToken,
+  hostedSandboxToken,
+  initialModelId,
+  initialSystemPrompt,
+  initialTemperature,
+  initialRequireToolApproval,
+  reasoningDisplayMode = "inline",
   onOAuthRequired,
 }: ChatTabProps) {
   const { signUp } = useAuth();
@@ -195,6 +209,11 @@ export function ChatTabV2({
     hostedSelectedServerIds: effectiveHostedSelectedServerIds,
     hostedOAuthTokens: effectiveHostedOAuthTokens,
     hostedShareToken,
+    hostedSandboxToken,
+    initialModelId,
+    initialSystemPrompt,
+    initialTemperature,
+    initialRequireToolApproval,
     minimalMode,
     onReset: () => {
       setInput("");
@@ -445,7 +464,20 @@ export function ChatTabV2({
     try {
       const parsed = JSON.parse(msg);
       if (parsed?.details?.oauthRequired) {
-        onOAuthRequired(parsed.details.serverUrl);
+        onOAuthRequired({
+          serverUrl:
+            typeof parsed.details.serverUrl === "string"
+              ? parsed.details.serverUrl
+              : null,
+          serverId:
+            typeof parsed.details.serverId === "string"
+              ? parsed.details.serverId
+              : null,
+          serverName:
+            typeof parsed.details.serverName === "string"
+              ? parsed.details.serverName
+              : null,
+        });
         return;
       }
     } catch {
@@ -677,6 +709,7 @@ export function ChatTabV2({
                       fullscreenChatDisabled={inputDisabled}
                       onToolApprovalResponse={addToolApprovalResponse}
                       minimalMode={minimalMode}
+                      reasoningDisplayMode={reasoningDisplayMode}
                     />
                   </StickToBottom.Content>
                   <ScrollToBottomButton />
diff --git a/mcpjam-inspector/client/src/components/SandboxesTab.tsx b/mcpjam-inspector/client/src/components/SandboxesTab.tsx
new file mode 100644
index 000000000..cd85787ea
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/SandboxesTab.tsx
@@ -0,0 +1,370 @@
+import { useEffect, useState } from "react";
+import {
+  Copy,
+  ExternalLink,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import { useConvexAuth } from "convex/react";
+import { toast } from "sonner";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SandboxUsagePanel } from "@/components/sandboxes/SandboxUsagePanel";
+import { SandboxEditor } from "@/components/sandboxes/SandboxEditor";
+import {
+  useSandbox,
+  useSandboxList,
+  useSandboxMutations,
+  type SandboxListItem,
+  type SandboxSettings,
+} from "@/hooks/useSandboxes";
+import { useWorkspaceServers } from "@/hooks/useViews";
+import { copyToClipboard } from "@/lib/clipboard";
+import { buildSandboxLink } from "@/lib/sandbox-session";
+
+interface SandboxesTabProps {
+  workspaceId: string | null;
+}
+
+type RightPaneView = "usage" | "edit" | "create";
+type SandboxActionTarget = Pick<SandboxListItem, "sandboxId" | "name">;
+
+export function SandboxesTab({ workspaceId }: SandboxesTabProps) {
+  const { isAuthenticated } = useConvexAuth();
+  const { sandboxes, isLoading } = useSandboxList({
+    isAuthenticated,
+    workspaceId,
+  });
+  const { servers } = useWorkspaceServers({
+    isAuthenticated,
+    workspaceId,
+  });
+  const { deleteSandbox, duplicateSandbox } = useSandboxMutations();
+
+  const [selectedSandboxId, setSelectedSandboxId] = useState<string | null>(
+    null,
+  );
+  const [rightPaneView, setRightPaneView] = useState<RightPaneView>("usage");
+
+  useEffect(() => {
+    if (!sandboxes || sandboxes.length === 0) {
+      setSelectedSandboxId(null);
+      return;
+    }
+
+    setSelectedSandboxId((current) => {
+      if (
+        current &&
+        sandboxes.some((sandbox) => sandbox.sandboxId === current)
+      ) {
+        return current;
+      }
+      return sandboxes[0]?.sandboxId ?? null;
+    });
+  }, [sandboxes]);
+
+  const { sandbox: selectedSandbox, isLoading: isSandboxLoading } = useSandbox({
+    isAuthenticated,
+    sandboxId: selectedSandboxId,
+  });
+
+  const handleSelectSandbox = (sandboxId: string) => {
+    setSelectedSandboxId(sandboxId);
+    setRightPaneView("usage");
+  };
+
+  const handleDelete = async (sandbox: SandboxActionTarget) => {
+    const shouldDelete = window.confirm(
+      `Delete "${sandbox.name}"? This will also delete persisted usage history.`,
+    );
+    if (!shouldDelete) return;
+
+    try {
+      await deleteSandbox({ sandboxId: sandbox.sandboxId });
+      toast.success("Sandbox deleted");
+      if (sandbox.sandboxId === selectedSandboxId) {
+        setSelectedSandboxId(null);
+        setRightPaneView("usage");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete sandbox",
+      );
+    }
+  };
+
+  const handleDuplicate = async (sandbox: SandboxActionTarget) => {
+    try {
+      const duplicatedSandbox = (await duplicateSandbox({
+        sandboxId: sandbox.sandboxId,
+      })) as SandboxSettings;
+      toast.success(`Sandbox duplicated as "${duplicatedSandbox.name}"`);
+      handleCreated(duplicatedSandbox);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to duplicate sandbox",
+      );
+    }
+  };
+
+  const handleCreated = (sandbox: SandboxSettings) => {
+    setSelectedSandboxId(sandbox.sandboxId);
+    setRightPaneView("usage");
+  };
+
+  const resolveSandboxLink = (sandbox: SandboxActionTarget) => {
+    if (sandbox.sandboxId !== selectedSandboxId) {
+      handleSelectSandbox(sandbox.sandboxId);
+      return null;
+    }
+
+    const token = selectedSandbox?.link?.token?.trim();
+    return token ? buildSandboxLink(token, sandbox.name) : null;
+  };
+
+  const handleOpenSandbox = (sandbox: SandboxActionTarget) => {
+    const shareLink = resolveSandboxLink(sandbox);
+    if (!shareLink) {
+      if (sandbox.sandboxId === selectedSandboxId) {
+        toast.error("Sandbox link unavailable");
+      }
+      return;
+    }
+
+    window.open(shareLink, "_blank");
+  };
+
+  const handleCopySandboxLink = async (sandbox: SandboxActionTarget) => {
+    const shareLink = resolveSandboxLink(sandbox);
+    if (!shareLink) {
+      if (sandbox.sandboxId === selectedSandboxId) {
+        toast.error("Sandbox link unavailable");
+      }
+      return;
+    }
+
+    const didCopy = await copyToClipboard(shareLink);
+    if (didCopy) {
+      toast.success("Sandbox link copied");
+      return;
+    }
+
+    toast.error("Failed to copy link");
+  };
+
+  if (!workspaceId) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-muted-foreground">
+          Select a workspace to manage sandboxes.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={30} minSize={22} maxSize={40}>
+        <div className="flex h-full flex-col border-r">
+          <div className="flex items-center justify-between border-b px-4 py-3">
+            <div>
+              <h2 className="text-sm font-semibold">Sandboxes</h2>
+              <p className="text-xs text-muted-foreground">
+                Hosted chat environments
+              </p>
+            </div>
+            <Button size="sm" onClick={() => setRightPaneView("create")}>
+              <Plus className="mr-1.5 h-3.5 w-3.5" />
+              New
+            </Button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-2">
+            {isLoading ? (
+              <div className="flex h-full items-center justify-center">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : !sandboxes || sandboxes.length === 0 ? (
+              <div className="flex h-full items-center justify-center px-4 text-center">
+                <div>
+                  <p className="text-sm font-medium">No sandboxes yet</p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Create one to package a prompt, model, and server set into a
+                    hosted environment.
+                  </p>
+                </div>
+              </div>
+            ) : (
+              sandboxes.map((sandbox) => {
+                const isSelected = sandbox.sandboxId === selectedSandboxId;
+                return (
+                  <div
+                    key={sandbox.sandboxId}
+                    className={`mb-1 cursor-pointer rounded-lg px-3 py-2.5 transition-colors ${
+                      isSelected ? "bg-muted/50" : "hover:bg-muted/40"
+                    }`}
+                    onClick={() => handleSelectSandbox(sandbox.sandboxId)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <p className="min-w-0 flex-1 truncate text-sm font-medium">
+                        {sandbox.name}
+                      </p>
+                      <div className="flex shrink-0 items-center gap-0.5">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0 text-muted-foreground"
+                          aria-label="Copy sandbox link"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            void handleCopySandboxLink(sandbox);
+                          }}
+                        >
+                          <Copy className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0 text-muted-foreground"
+                          aria-label="Open sandbox"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleOpenSandbox(sandbox);
+                          }}
+                        >
+                          <ExternalLink className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 shrink-0 p-0 text-muted-foreground"
+                            aria-label="Sandbox actions"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleSelectSandbox(sandbox.sandboxId);
+                              setRightPaneView("edit");
+                            }}
+                          >
+                            <Pencil className="mr-2 h-3.5 w-3.5" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              void handleDuplicate(sandbox);
+                            }}
+                          >
+                            <Copy className="mr-2 h-3.5 w-3.5" />
+                            Duplicate
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              void handleDelete(sandbox);
+                            }}
+                          >
+                            <Trash2 className="mr-2 h-3.5 w-3.5" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                    {sandbox.description ? (
+                      <p className="mt-0.5 text-xs text-muted-foreground line-clamp-1">
+                        {sandbox.description}
+                      </p>
+                    ) : null}
+                    {sandbox.serverNames.length > 0 && (
+                      <div className="mt-1.5 flex flex-wrap gap-1">
+                        {sandbox.serverNames.map((serverName) => (
+                          <Badge
+                            key={`${sandbox.sandboxId}-${serverName}`}
+                            variant="outline"
+                            className="text-[11px] text-muted-foreground"
+                          >
+                            {serverName}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </ResizablePanel>
+
+      <ResizableHandle withHandle />
+
+      <ResizablePanel defaultSize={70}>
+        <div className="flex h-full flex-col">
+          {rightPaneView === "create" && servers ? (
+            <SandboxEditor
+              workspaceId={workspaceId}
+              workspaceServers={servers}
+              onBack={() => setRightPaneView("usage")}
+              onSaved={handleCreated}
+            />
+          ) : !selectedSandboxId ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">
+                Select a sandbox to view details.
+              </p>
+            </div>
+          ) : isSandboxLoading || selectedSandbox === undefined ? (
+            <div className="flex h-full items-center justify-center">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : !selectedSandbox ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">
+                Sandbox not found.
+              </p>
+            </div>
+          ) : rightPaneView === "edit" && servers ? (
+            <SandboxEditor
+              sandbox={selectedSandbox}
+              workspaceId={workspaceId}
+              workspaceServers={servers}
+              onBack={() => setRightPaneView("usage")}
+              onDeleted={() => {
+                setSelectedSandboxId(null);
+                setRightPaneView("usage");
+              }}
+            />
+          ) : (
+            <SandboxUsagePanel sandbox={selectedSandbox} />
+          )}
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
diff --git a/mcpjam-inspector/client/src/components/__tests__/SandboxesTab.test.tsx b/mcpjam-inspector/client/src/components/__tests__/SandboxesTab.test.tsx
new file mode 100644
index 000000000..75f5ed0b6
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/__tests__/SandboxesTab.test.tsx
@@ -0,0 +1,293 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { SandboxesTab } from "../SandboxesTab";
+import { buildSandboxLink } from "@/lib/sandbox-session";
+
+const mockDeleteSandbox = vi.fn();
+const mockDuplicateSandbox = vi.fn();
+const mockToastSuccess = vi.fn();
+const mockToastError = vi.fn();
+const mockClipboard = {
+  writeText: vi.fn().mockResolvedValue(undefined),
+};
+
+Object.assign(navigator, { clipboard: mockClipboard });
+
+const sandboxList = [
+  {
+    sandboxId: "sbx-1",
+    workspaceId: "ws-1",
+    name: "Alpha",
+    description: "Alpha description",
+    hostStyle: "claude" as const,
+    mode: "invited_only" as const,
+    allowGuestAccess: false,
+    serverCount: 1,
+    serverNames: ["alpha-server"],
+    createdAt: 1,
+    updatedAt: 1,
+  },
+  {
+    sandboxId: "sbx-2",
+    workspaceId: "ws-1",
+    name: "Beta",
+    description: "Beta description",
+    hostStyle: "chatgpt" as const,
+    mode: "invited_only" as const,
+    allowGuestAccess: false,
+    serverCount: 1,
+    serverNames: ["beta-server"],
+    createdAt: 2,
+    updatedAt: 2,
+  },
+];
+
+const sandboxDetails: Record<string, any> = {
+  "sbx-1": {
+    ...sandboxList[0],
+    systemPrompt: "You are Alpha.",
+    modelId: "gpt-4o-mini",
+    temperature: 0.4,
+    requireToolApproval: true,
+    servers: [
+      {
+        serverId: "server-1",
+        serverName: "alpha-server",
+        useOAuth: false,
+        serverUrl: "https://example.com/alpha",
+        clientId: null,
+        oauthScopes: null,
+      },
+    ],
+    link: {
+      token: "alpha-token",
+      path: "/sandbox/alpha/alpha-token",
+      url: "https://app.mcpjam.com/sandbox/alpha/alpha-token",
+      rotatedAt: 1,
+      updatedAt: 1,
+    },
+    members: [],
+  },
+  "sbx-2": {
+    ...sandboxList[1],
+    systemPrompt: "You are Beta.",
+    modelId: "gpt-4o-mini",
+    temperature: 0.5,
+    requireToolApproval: false,
+    servers: [
+      {
+        serverId: "server-2",
+        serverName: "beta-server",
+        useOAuth: false,
+        serverUrl: "https://example.com/beta",
+        clientId: null,
+        oauthScopes: null,
+      },
+    ],
+    link: {
+      token: "beta-token",
+      path: "/sandbox/beta/beta-token",
+      url: "https://app.mcpjam.com/sandbox/beta/beta-token",
+      rotatedAt: 2,
+      updatedAt: 2,
+    },
+    members: [],
+  },
+  "sbx-3": {
+    ...sandboxList[1],
+    sandboxId: "sbx-3",
+    name: "Beta (Copy)",
+    systemPrompt: "You are Beta.",
+    modelId: "gpt-4o-mini",
+    temperature: 0.5,
+    requireToolApproval: false,
+    servers: [
+      {
+        serverId: "server-2",
+        serverName: "beta-server",
+        useOAuth: false,
+        serverUrl: "https://example.com/beta",
+        clientId: null,
+        oauthScopes: null,
+      },
+    ],
+    link: {
+      token: "beta-copy-token",
+      path: "/sandbox/beta-copy/beta-copy-token",
+      url: "https://app.mcpjam.com/sandbox/beta-copy/beta-copy-token",
+      rotatedAt: 3,
+      updatedAt: 3,
+    },
+    members: [],
+  },
+};
+
+vi.mock("convex/react", () => ({
+  useConvexAuth: () => ({
+    isAuthenticated: true,
+  }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}));
+
+vi.mock("@/hooks/useViews", () => ({
+  useWorkspaceServers: () => ({
+    servers: [],
+  }),
+}));
+
+vi.mock("@/hooks/useSandboxes", () => ({
+  useSandboxList: () => ({
+    sandboxes: sandboxList,
+    isLoading: false,
+  }),
+  useSandbox: ({ sandboxId }: { sandboxId: string | null }) => ({
+    sandbox: sandboxId ? (sandboxDetails[sandboxId] ?? null) : null,
+    isLoading: false,
+  }),
+  useSandboxMutations: () => ({
+    deleteSandbox: mockDeleteSandbox,
+    duplicateSandbox: mockDuplicateSandbox,
+  }),
+}));
+
+vi.mock("@/components/ui/resizable", () => ({
+  ResizablePanelGroup: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  ResizablePanel: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  ResizableHandle: () => <div />,
+}));
+
+vi.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    onClick,
+    className,
+  }: {
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+  }) => (
+    <button className={className} onClick={onClick} type="button">
+      {children}
+    </button>
+  ),
+  DropdownMenuSeparator: () => <div />,
+}));
+
+vi.mock("@/components/sandboxes/SandboxUsagePanel", () => ({
+  SandboxUsagePanel: ({ sandbox }: { sandbox: { name: string } }) => (
+    <div>{sandbox.name}</div>
+  ),
+}));
+
+vi.mock("@/components/sandboxes/SandboxEditor", () => ({
+  SandboxEditor: () => <div>Sandbox editor</div>,
+}));
+
+describe("SandboxesTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDuplicateSandbox.mockResolvedValue(sandboxDetails["sbx-3"]);
+    mockDeleteSandbox.mockResolvedValue({ deleted: true });
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.spyOn(window, "open").mockImplementation(() => null);
+  });
+
+  it("duplicates the clicked sandbox instead of the currently selected one", async () => {
+    render(<SandboxesTab workspaceId="ws-1" />);
+
+    fireEvent.click(screen.getAllByText("Duplicate")[1]!);
+
+    await waitFor(() => {
+      expect(mockDuplicateSandbox).toHaveBeenCalledWith({
+        sandboxId: "sbx-2",
+      });
+    });
+    expect(mockToastSuccess).toHaveBeenCalledWith(
+      'Sandbox duplicated as "Beta (Copy)"',
+    );
+  });
+
+  it("deletes the clicked sandbox instead of the currently selected one", async () => {
+    render(<SandboxesTab workspaceId="ws-1" />);
+
+    fireEvent.click(screen.getAllByText("Delete")[1]!);
+
+    await waitFor(() => {
+      expect(mockDeleteSandbox).toHaveBeenCalledWith({
+        sandboxId: "sbx-2",
+      });
+    });
+    expect(window.confirm).toHaveBeenCalledWith(
+      'Delete "Beta"? This will also delete persisted usage history.',
+    );
+  });
+
+  it("opens the selected sandbox from the icon action", () => {
+    render(<SandboxesTab workspaceId="ws-1" />);
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Open sandbox" })[0]!,
+    );
+
+    expect(window.open).toHaveBeenCalledWith(
+      buildSandboxLink("alpha-token", "Alpha"),
+      "_blank",
+    );
+  });
+
+  it("copies the selected sandbox link from the icon action", async () => {
+    render(<SandboxesTab workspaceId="ws-1" />);
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Copy sandbox link" })[0]!,
+    );
+
+    await waitFor(() => {
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(
+        buildSandboxLink("alpha-token", "Alpha"),
+      );
+    });
+    expect(mockToastSuccess).toHaveBeenCalledWith("Sandbox link copied");
+  });
+
+  it("keeps the row action icons visible without hover-only classes", () => {
+    render(<SandboxesTab workspaceId="ws-1" />);
+
+    for (const button of screen.getAllByRole("button", {
+      name: "Copy sandbox link",
+    })) {
+      expect(button).not.toHaveClass("opacity-0");
+    }
+
+    for (const button of screen.getAllByRole("button", {
+      name: "Open sandbox",
+    })) {
+      expect(button).not.toHaveClass("opacity-0");
+    }
+
+    for (const button of screen.getAllByRole("button", {
+      name: "Sandbox actions",
+    })) {
+      expect(button).not.toHaveClass("opacity-0");
+    }
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/chat-v2/__tests__/ChatInput.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/__tests__/ChatInput.test.tsx
index 1f7737d24..9fc2a08d1 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/__tests__/ChatInput.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/__tests__/ChatInput.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { ChatInput } from "../chat-input";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
 import type { ModelDefinition } from "@/shared/types";
 
 // Mock child components
@@ -143,9 +144,21 @@ describe("ChatInput", () => {
     it("renders submit button", () => {
       render(<ChatInput {...defaultProps} value="Hello" />);
 
-      // Submit button exists
-      const buttons = screen.getAllByRole("button");
-      expect(buttons.length).toBeGreaterThan(0);
+      expect(
+        screen.getByRole("button", { name: "Send message" }),
+      ).toBeInTheDocument();
+    });
+
+    it("uses ChatGPT submit styling inside ChatGPT sandboxes", () => {
+      render(
+        <SandboxHostStyleProvider value="chatgpt">
+          <ChatInput {...defaultProps} value="Hello" />
+        </SandboxHostStyleProvider>,
+      );
+
+      expect(screen.getByRole("button", { name: "Send message" })).toHaveClass(
+        "bg-[#1f1f1f]",
+      );
     });
   });
 
diff --git a/mcpjam-inspector/client/src/components/chat-v2/__tests__/MessageView.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/__tests__/MessageView.test.tsx
index 4db090258..e4936c4dc 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/__tests__/MessageView.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/__tests__/MessageView.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { MessageView } from "../thread/message-view";
 import type { UIMessage } from "@ai-sdk/react";
 import type { ModelDefinition } from "@/shared/types";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
 
 // Mock PartSwitch
 vi.mock("../thread/part-switch", () => ({
@@ -31,8 +32,8 @@ vi.mock("@/stores/preferences/preferences-provider", () => ({
 }));
 
 // Mock chat-helpers
-vi.mock("../shared/chat-helpers", () => ({
-  getProviderLogoFromModel: () => null,
+vi.mock("@/components/chat-v2/shared/chat-helpers", () => ({
+  getProviderLogoFromModel: () => "/provider-logo.png",
 }));
 
 describe("MessageView", () => {
@@ -143,6 +144,22 @@ describe("MessageView", () => {
         "assistant",
       );
     });
+
+    it("uses a neutral placeholder for sandbox assistant avatars", () => {
+      const message = createMessage({
+        role: "assistant",
+        parts: [{ type: "text", text: "Hello" }],
+      });
+
+      render(
+        <SandboxHostStyleProvider value="claude">
+          <MessageView {...defaultProps} message={message} />
+        </SandboxHostStyleProvider>,
+      );
+
+      expect(screen.getByLabelText("Assistant")).toBeInTheDocument();
+      expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
   });
 
   describe("special messages", () => {
diff --git a/mcpjam-inspector/client/src/components/chat-v2/__tests__/PartSwitch.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/__tests__/PartSwitch.test.tsx
index 2816a85c3..56589789c 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/__tests__/PartSwitch.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/__tests__/PartSwitch.test.tsx
@@ -27,8 +27,20 @@ vi.mock("../thread/parts/tool-part", () => ({
 }));
 
 vi.mock("../thread/parts/reasoning-part", () => ({
-  ReasoningPart: ({ text, state }: { text: string; state: string }) => (
-    <div data-testid="reasoning-part" data-state={state}>
+  ReasoningPart: ({
+    text,
+    state,
+    displayMode,
+  }: {
+    text: string;
+    state: string;
+    displayMode?: string;
+  }) => (
+    <div
+      data-testid="reasoning-part"
+      data-state={state}
+      data-display-mode={displayMode ?? "inline"}
+    >
       {text}
     </div>
   ),
@@ -208,13 +220,55 @@ describe("PartSwitch", () => {
     });
 
     it("passes state to ReasoningPart", () => {
-      const part = { type: "reasoning", text: "Done", state: "complete" };
+      const part = { type: "reasoning", text: "Done", state: "done" };
 
       render(<PartSwitch {...defaultProps} part={part as any} />);
 
       expect(screen.getByTestId("reasoning-part")).toHaveAttribute(
         "data-state",
-        "complete",
+        "done",
+      );
+    });
+
+    it("passes reasoning display mode to ReasoningPart", () => {
+      const part = {
+        type: "reasoning",
+        text: "Hidden in traces",
+        state: "done",
+      };
+
+      render(
+        <PartSwitch
+          {...defaultProps}
+          part={part as any}
+          reasoningDisplayMode="collapsed"
+        />,
+      );
+
+      expect(screen.getByTestId("reasoning-part")).toHaveAttribute(
+        "data-display-mode",
+        "collapsed",
+      );
+    });
+
+    it("passes collapsible reasoning display mode to ReasoningPart", () => {
+      const part = {
+        type: "reasoning",
+        text: "Owner thread reasoning",
+        state: "done",
+      };
+
+      render(
+        <PartSwitch
+          {...defaultProps}
+          part={part as any}
+          reasoningDisplayMode="collapsible"
+        />,
+      );
+
+      expect(screen.getByTestId("reasoning-part")).toHaveAttribute(
+        "data-display-mode",
+        "collapsible",
       );
     });
   });
diff --git a/mcpjam-inspector/client/src/components/chat-v2/__tests__/ThinkingIndicator.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/__tests__/ThinkingIndicator.test.tsx
new file mode 100644
index 000000000..62b0352a9
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/chat-v2/__tests__/ThinkingIndicator.test.tsx
@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ThinkingIndicator } from "../shared/thinking-indicator";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
+import type { ModelDefinition } from "@/shared/types";
+
+vi.mock("@/stores/preferences/preferences-provider", () => ({
+  usePreferencesStore: (selector: (state: { themeMode: "light" }) => unknown) =>
+    selector({ themeMode: "light" }),
+}));
+
+vi.mock("@/components/chat-v2/shared/chat-helpers", () => ({
+  getProviderLogoFromModel: () => "/provider-logo.png",
+}));
+
+describe("ThinkingIndicator", () => {
+  const defaultModel: ModelDefinition = {
+    id: "gpt-4",
+    name: "GPT-4",
+    provider: "openai",
+    contextWindow: 8192,
+    maxOutputTokens: 4096,
+    supportsTools: true,
+    supportsVision: false,
+    supportsStreaming: true,
+  };
+
+  it("renders the provider logo outside sandboxes", () => {
+    render(<ThinkingIndicator model={defaultModel} />);
+
+    expect(screen.getByRole("img")).toHaveAttribute("alt", "gpt-4 logo");
+  });
+
+  it("renders a neutral placeholder inside sandboxes", () => {
+    render(
+      <SandboxHostStyleProvider value="chatgpt">
+        <ThinkingIndicator model={defaultModel} />
+      </SandboxHostStyleProvider>,
+    );
+
+    expect(screen.getByLabelText("Assistant")).toBeInTheDocument();
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/chat-v2/__tests__/Thread.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/__tests__/Thread.test.tsx
index b5d930c68..e3929f278 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/__tests__/Thread.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/__tests__/Thread.test.tsx
@@ -4,24 +4,24 @@ import { Thread } from "../thread";
 import type { UIMessage } from "@ai-sdk/react";
 import type { ModelDefinition } from "@/shared/types";
 
+const mockMessageView = vi.fn();
+
 // Mock child components
 vi.mock("../thread/message-view", () => ({
-  MessageView: ({
-    message,
-    model,
-  }: {
-    message: UIMessage;
-    model: ModelDefinition;
-  }) => (
-    <div data-testid={`message-${message.id}`} data-role={message.role}>
-      <span data-testid="message-model">{model.name}</span>
-      {message.parts?.map((part, i) => (
-        <span key={i} data-testid={`part-${i}`}>
-          {(part as any).text || (part as any).type}
-        </span>
-      ))}
-    </div>
-  ),
+  MessageView: (props: { message: UIMessage; model: ModelDefinition }) => {
+    mockMessageView(props);
+    const { message, model } = props;
+    return (
+      <div data-testid={`message-${message.id}`} data-role={message.role}>
+        <span data-testid="message-model">{model.name}</span>
+        {message.parts?.map((part, i) => (
+          <span key={i} data-testid={`part-${i}`}>
+            {(part as any).text || (part as any).type}
+          </span>
+        ))}
+      </div>
+    );
+  },
 }));
 
 vi.mock("../shared/thinking-indicator", () => ({
@@ -134,6 +134,69 @@ describe("Thread", () => {
 
       expect(screen.getByTestId("message-model")).toHaveTextContent("GPT-4");
     });
+
+    it("forwards interactive to MessageView", () => {
+      const messages = [createMessage({ id: "msg-1" })];
+
+      render(
+        <Thread {...defaultProps} messages={messages} interactive={false} />,
+      );
+
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          interactive: false,
+        }),
+      );
+    });
+
+    it("forwards reasoningDisplayMode to MessageView", () => {
+      const messages = [createMessage({ id: "msg-1" })];
+
+      render(
+        <Thread
+          {...defaultProps}
+          messages={messages}
+          reasoningDisplayMode="collapsed"
+        />,
+      );
+
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reasoningDisplayMode: "collapsed",
+        }),
+      );
+    });
+
+    it("forwards hidden reasoningDisplayMode to MessageView", () => {
+      const messages = [createMessage({ id: "msg-1" })];
+
+      render(
+        <Thread
+          {...defaultProps}
+          messages={messages}
+          reasoningDisplayMode="hidden"
+        />,
+      );
+
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reasoningDisplayMode: "hidden",
+        }),
+      );
+    });
+
+    it("keeps interactive and reasoningDisplayMode defaults", () => {
+      const messages = [createMessage({ id: "msg-1" })];
+
+      render(<Thread {...defaultProps} messages={messages} />);
+
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          interactive: true,
+          reasoningDisplayMode: "inline",
+        }),
+      );
+    });
   });
 
   describe("loading state", () => {
diff --git a/mcpjam-inspector/client/src/components/chat-v2/chat-input.tsx b/mcpjam-inspector/client/src/components/chat-v2/chat-input.tsx
index d9bab49c2..0da96a4ac 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/chat-input.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/chat-input.tsx
@@ -41,6 +41,7 @@ import { MCPPromptResultCard } from "@/components/chat-v2/chat-input/prompts/mcp
 import type { SkillResult } from "@/components/chat-v2/chat-input/skills/skill-types";
 import { SkillResultCard } from "@/components/chat-v2/chat-input/skills/skill-result-card";
 import { usePostHog } from "posthog-js/react";
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
 
 interface ChatInputProps {
   value: string;
@@ -132,6 +133,7 @@ export function ChatInput({
   minimalMode = false,
 }: ChatInputProps) {
   const posthog = usePostHog();
+  const sandboxHostStyle = useSandboxHostStyle();
   const formRef = useRef<HTMLFormElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -324,13 +326,32 @@ export function ChatInput({
     );
   };
 
+  const composerClasses =
+    sandboxHostStyle === "chatgpt"
+      ? "sandbox-host-composer rounded-[1.75rem] border-transparent bg-[#f4f4f4] shadow-none dark:bg-[#2f2f2f]"
+      : sandboxHostStyle === "claude"
+        ? "sandbox-host-composer rounded-[1.35rem] border-[#d7cfbf] bg-[#f5f0e8] shadow-none dark:border-[#4b463d] dark:bg-[#34322e]"
+        : "rounded-3xl border border-border/40 bg-muted/70";
+  const activeSubmitButtonClasses =
+    sandboxHostStyle === "chatgpt"
+      ? "bg-[#1f1f1f] text-white hover:bg-[#303030] dark:bg-[#f4f4f4] dark:text-[#1f1f1f] dark:hover:bg-[#e8e8e8]"
+      : sandboxHostStyle === "claude"
+        ? "bg-[#e27d47] text-white hover:bg-[#d16f3d] dark:bg-[#d07b53] dark:text-[#fff7f0] dark:hover:bg-[#c06f49]"
+        : "bg-primary text-primary-foreground hover:bg-primary/90";
+  const inactiveSubmitButtonClasses =
+    sandboxHostStyle === "chatgpt"
+      ? "bg-[#e7e7e7] text-[#9b9b9b] cursor-not-allowed dark:bg-[#3a3a3a] dark:text-[#8a8a8a]"
+      : sandboxHostStyle === "claude"
+        ? "bg-[#ebe5dc] text-[#b6ada0] cursor-not-allowed dark:bg-[#45413b] dark:text-[#8d857a]"
+        : "bg-muted text-muted-foreground cursor-not-allowed";
+
   return (
     <form ref={formRef} className={cn("w-full", className)} onSubmit={onSubmit}>
       <div
         ref={containerRef}
         className={cn(
-          "relative flex w-full flex-col rounded-3xl border border-border/40",
-          "bg-muted/70 px-2 pt-2 pb-2",
+          "relative flex w-full flex-col px-2 pt-2 pb-2",
+          composerClasses,
         )}
       >
         <PromptsPopover
@@ -573,6 +594,7 @@ export function ChatInput({
                     size="icon"
                     variant="secondary"
                     className="size-[34px] rounded-full transition-colors"
+                    aria-label="Stop generating"
                     onClick={() => stop()}
                   >
                     <Square size={16} />
@@ -586,13 +608,14 @@ export function ChatInput({
                   <Button
                     type="submit"
                     size="icon"
+                    aria-label="Send message"
                     className={cn(
                       "size-[34px] rounded-full transition-colors",
                       (value.trim() || hasResults) &&
                         !disabled &&
                         !submitDisabled
-                        ? "bg-primary text-primary-foreground hover:bg-primary/90"
-                        : "bg-muted text-muted-foreground cursor-not-allowed",
+                        ? activeSubmitButtonClasses
+                        : inactiveSubmitButtonClasses,
                     )}
                     disabled={
                       (!value.trim() && !hasResults) ||
diff --git a/mcpjam-inspector/client/src/components/chat-v2/shared/assistant-avatar.ts b/mcpjam-inspector/client/src/components/chat-v2/shared/assistant-avatar.ts
new file mode 100644
index 000000000..4777ed328
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/chat-v2/shared/assistant-avatar.ts
@@ -0,0 +1,42 @@
+import type { ModelDefinition } from "@/shared/types";
+import type { SandboxHostStyle } from "@/lib/sandbox-host-style";
+import { getProviderLogoFromModel } from "@/components/chat-v2/shared/chat-helpers";
+
+type ThemeMode = "light" | "dark" | "system";
+
+interface AssistantAvatarOptions {
+  model: ModelDefinition;
+  themeMode: ThemeMode;
+  sandboxHostStyle: SandboxHostStyle | null;
+}
+
+export interface AssistantAvatarDescriptor {
+  logoSrc: string | null;
+  logoAlt: string | null;
+  avatarClasses: string;
+  ariaLabel: string;
+}
+
+const DEFAULT_AVATAR_CLASSES = "border-border/40 bg-muted/40";
+
+export function getAssistantAvatarDescriptor({
+  model,
+  themeMode,
+  sandboxHostStyle,
+}: AssistantAvatarOptions): AssistantAvatarDescriptor {
+  if (sandboxHostStyle !== null) {
+    return {
+      logoSrc: null,
+      logoAlt: null,
+      avatarClasses: DEFAULT_AVATAR_CLASSES,
+      ariaLabel: "Assistant",
+    };
+  }
+
+  return {
+    logoSrc: getProviderLogoFromModel(model, themeMode),
+    logoAlt: `${model.id} logo`,
+    avatarClasses: DEFAULT_AVATAR_CLASSES,
+    ariaLabel: `${model.name} assistant`,
+  };
+}
diff --git a/mcpjam-inspector/client/src/components/chat-v2/shared/thinking-indicator.tsx b/mcpjam-inspector/client/src/components/chat-v2/shared/thinking-indicator.tsx
index 806bfacdc..fc6d4f2b2 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/shared/thinking-indicator.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/shared/thinking-indicator.tsx
@@ -2,11 +2,17 @@ import { MessageCircle } from "lucide-react";
 
 import { ModelDefinition } from "@/shared/types";
 import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
-import { getProviderLogoFromModel } from "./chat-helpers";
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
+import { getAssistantAvatarDescriptor } from "./assistant-avatar";
 
 export function ThinkingIndicator({ model }: { model: ModelDefinition }) {
   const themeMode = usePreferencesStore((s) => s.themeMode);
-  const logoSrc = getProviderLogoFromModel(model, themeMode);
+  const sandboxHostStyle = useSandboxHostStyle();
+  const assistantAvatar = getAssistantAvatarDescriptor({
+    model,
+    themeMode,
+    sandboxHostStyle,
+  });
 
   return (
     <article
@@ -14,15 +20,21 @@ export function ThinkingIndicator({ model }: { model: ModelDefinition }) {
       aria-live="polite"
       aria-busy="true"
     >
-      <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/40 bg-muted/40">
-        {logoSrc ? (
+      <div
+        className={`mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border ${assistantAvatar.avatarClasses}`}
+        aria-label={assistantAvatar.ariaLabel}
+      >
+        {assistantAvatar.logoSrc ? (
           <img
-            src={logoSrc}
-            alt={`${model.id} logo`}
+            src={assistantAvatar.logoSrc}
+            alt={assistantAvatar.logoAlt ?? ""}
             className="h-4 w-4 object-contain"
           />
         ) : (
-          <MessageCircle className="h-4 w-4 text-muted-foreground" />
+          <MessageCircle
+            className="h-4 w-4 text-muted-foreground"
+            aria-hidden
+          />
         )}
       </div>
 
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread.tsx
index 2b6b3b0f2..fb9581963 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread.tsx
@@ -10,6 +10,7 @@ import { ThinkingIndicator } from "@/components/chat-v2/shared/thinking-indicato
 import { FullscreenChatOverlay } from "@/components/chat-v2/fullscreen-chat-overlay";
 import { UIType } from "@/lib/mcp-ui/mcp-apps-utils";
 import { ToolRenderOverride } from "@/components/chat-v2/thread/tool-render-overrides";
+import { type ReasoningDisplayMode } from "./thread/parts/reasoning-part";
 
 interface ThreadProps {
   messages: UIMessage[];
@@ -37,6 +38,8 @@ interface ThreadProps {
   toolRenderOverrides?: Record<string, ToolRenderOverride>;
   showSaveViewButton?: boolean;
   minimalMode?: boolean;
+  interactive?: boolean;
+  reasoningDisplayMode?: ReasoningDisplayMode;
 }
 
 export function Thread({
@@ -59,6 +62,8 @@ export function Thread({
   toolRenderOverrides,
   showSaveViewButton = true,
   minimalMode = false,
+  interactive = true,
+  reasoningDisplayMode = "inline",
 }: ThreadProps) {
   const [pipWidgetId, setPipWidgetId] = useState<string | null>(null);
   const [fullscreenWidgetId, setFullscreenWidgetId] = useState<string | null>(
@@ -134,6 +139,8 @@ export function Thread({
             toolRenderOverrides={toolRenderOverrides}
             showSaveViewButton={showSaveViewButton}
             minimalMode={minimalMode}
+            interactive={interactive}
+            reasoningDisplayMode={reasoningDisplayMode}
           />
         ))}
         {isLoading && <ThinkingIndicator model={model} />}
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/__tests__/widget-replay.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/__tests__/widget-replay.test.tsx
new file mode 100644
index 000000000..d3cebf6d6
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/__tests__/widget-replay.test.tsx
@@ -0,0 +1,74 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { WidgetReplay } from "../widget-replay";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
+
+const mockDetectUIType = vi.fn();
+
+vi.mock("../chatgpt-app-renderer", () => ({
+  ChatGPTAppRenderer: ({ toolName }: { toolName: string }) => (
+    <div data-testid="chatgpt-renderer">{toolName}</div>
+  ),
+}));
+
+vi.mock("../mcp-apps/mcp-apps-renderer", () => ({
+  MCPAppsRenderer: ({ toolName }: { toolName: string }) => (
+    <div data-testid="mcp-apps-renderer">{toolName}</div>
+  ),
+}));
+
+vi.mock("@/lib/mcp-ui/mcp-apps-utils", () => ({
+  detectUIType: (...args: unknown[]) => mockDetectUIType(...args),
+  getUIResourceUri: () => "ui://widget/test.html",
+  UIType: {
+    MCP_APPS: "mcp-apps",
+    OPENAI_SDK: "openai-sdk",
+    OPENAI_SDK_AND_MCP_APPS: "openai-sdk-and-mcp-apps",
+  },
+}));
+
+vi.mock("@/lib/apis/mcp-tools-api", () => ({
+  getToolServerId: () => "server-1",
+}));
+
+vi.mock("@/lib/tool-result-utils", () => ({
+  readToolResultMeta: () => undefined,
+  readToolResultServerId: () => "server-1",
+}));
+
+describe("WidgetReplay", () => {
+  const baseProps = {
+    toolName: "dual-tool",
+    toolCallId: "call-1",
+    toolState: "output-available" as const,
+    toolInput: { prompt: "hello" },
+    toolOutput: { ok: true },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDetectUIType.mockReturnValue("openai-sdk-and-mcp-apps");
+  });
+
+  it("prefers the OpenAI renderer for ChatGPT sandboxes", () => {
+    render(
+      <SandboxHostStyleProvider value="chatgpt">
+        <WidgetReplay {...baseProps} />
+      </SandboxHostStyleProvider>,
+    );
+
+    expect(screen.getByTestId("chatgpt-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("mcp-apps-renderer")).not.toBeInTheDocument();
+  });
+
+  it("prefers the MCP Apps renderer for Claude sandboxes", () => {
+    render(
+      <SandboxHostStyleProvider value="claude">
+        <WidgetReplay {...baseProps} />
+      </SandboxHostStyleProvider>,
+    );
+
+    expect(screen.getByTestId("mcp-apps-renderer")).toBeInTheDocument();
+    expect(screen.queryByTestId("chatgpt-renderer")).not.toBeInTheDocument();
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/__tests__/mcp-apps-renderer.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/__tests__/mcp-apps-renderer.test.tsx
index 01b24a39a..8a3c2bcc9 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/__tests__/mcp-apps-renderer.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/__tests__/mcp-apps-renderer.test.tsx
@@ -85,8 +85,10 @@ vi.mock("@/components/ui/sandboxed-iframe", () => ({
         value: { postMessage: mockSandboxPostMessage },
       });
       Object.defineProperty(el, "offsetHeight", { value: 400 });
-      (el as HTMLElement & { animate: ReturnType<typeof vi.fn> }).animate =
-        vi.fn();
+      const animatedEl = el as unknown as HTMLElement & {
+        animate: ReturnType<typeof vi.fn>;
+      };
+      animatedEl.animate = vi.fn();
       iframeElementRef.current = el;
     }
 
@@ -167,6 +169,7 @@ vi.mock("../mcp-apps-modal", () => ({
 // ── Import component under test (after mocks) ─────────────────────────────
 import { MCPAppsRenderer } from "../mcp-apps-renderer";
 import { authFetch } from "@/lib/session-token";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 const baseProps = {
@@ -250,6 +253,36 @@ describe("MCPAppsRenderer tool input streaming", () => {
     expect(sandboxedIframePropsRef.current?.permissions).toBeUndefined();
   });
 
+  it("uses sandbox host style for SEP-1865 host context outside the playground", async () => {
+    render(
+      <SandboxHostStyleProvider value="chatgpt">
+        <MCPAppsRenderer {...baseProps} />
+      </SandboxHostStyleProvider>,
+    );
+
+    await vi.waitFor(() => {
+      expect(mockBridge.connect).toHaveBeenCalled();
+    });
+
+    await act(async () => {
+      triggerReady();
+      await Promise.resolve();
+    });
+
+    await vi.waitFor(() => {
+      expect(mockBridge.setHostContext).toHaveBeenCalledWith(
+        expect.objectContaining({
+          platform: "web",
+          styles: expect.objectContaining({
+            css: expect.objectContaining({
+              fonts: "",
+            }),
+          }),
+        }),
+      );
+    });
+  });
+
   it("forces permissive replay for cached HTML even when strict replay metadata is stored", async () => {
     render(
       <MCPAppsRenderer
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx
index 3e34d62e8..3db45d271 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx
@@ -69,6 +69,7 @@ import { fetchMcpAppsWidgetContent } from "./fetch-widget-content";
 import type { CheckoutSession } from "@/shared/acp-types";
 import { listResources, readResource } from "@/lib/apis/mcp-resources-api";
 import { listPrompts } from "@/lib/apis/mcp-prompts-api";
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
 
 // Injected by Vite at build time from package.json
 declare const __APP_VERSION__: string;
@@ -170,10 +171,11 @@ export function MCPAppsRenderer({
 }: MCPAppsRendererProps) {
   const sandboxRef = useRef<SandboxedIframeHandle>(null);
   const themeMode = usePreferencesStore((s) => s.themeMode);
+  const sandboxHostStyle = useSandboxHostStyle();
 
   // Get CSP mode and host style from playground store when in playground
   const isPlaygroundActive = useUIPlaygroundStore((s) => s.isPlaygroundActive);
-  const hostStyle = useUIPlaygroundStore((s) => s.hostStyle);
+  const playgroundHostStyle = useUIPlaygroundStore((s) => s.hostStyle);
   const playgroundCspMode = useUIPlaygroundStore((s) => s.mcpAppsCspMode);
   const cspMode: CspMode = isPlaygroundActive
     ? playgroundCspMode
@@ -574,7 +576,10 @@ export function MCPAppsRenderer({
 
   // CSS Variables for theming (SEP-1865 styles.variables)
   // These are sent via hostContext.styles.variables - the SDK should pass them through
-  const useChatGPTStyle = isPlaygroundActive && hostStyle === "chatgpt";
+  const effectiveHostStyle = isPlaygroundActive
+    ? playgroundHostStyle
+    : (sandboxHostStyle ?? "claude");
+  const useChatGPTStyle = effectiveHostStyle === "chatgpt";
   const styleVariables = useMemo(
     () =>
       useChatGPTStyle
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/message-view.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/message-view.tsx
index d710512b7..0b1515cca 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/message-view.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/message-view.tsx
@@ -7,11 +7,13 @@ import { PartSwitch } from "./part-switch";
 import { ModelDefinition } from "@/shared/types";
 import { type DisplayMode } from "@/stores/ui-playground-store";
 import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
-import { getProviderLogoFromModel } from "@/components/chat-v2/shared/chat-helpers";
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
 import { groupAssistantPartsIntoSteps } from "./thread-helpers";
 import { ToolServerMap } from "@/lib/apis/mcp-tools-api";
 import { UIType } from "@/lib/mcp-ui/mcp-apps-utils";
 import { ToolRenderOverride } from "@/components/chat-v2/thread/tool-render-overrides";
+import { type ReasoningDisplayMode } from "./parts/reasoning-part";
+import { getAssistantAvatarDescriptor } from "@/components/chat-v2/shared/assistant-avatar";
 
 export function MessageView({
   message,
@@ -35,6 +37,7 @@ export function MessageView({
   showSaveViewButton = true,
   minimalMode = false,
   interactive = true,
+  reasoningDisplayMode = "inline",
 }: {
   message: UIMessage;
   model: ModelDefinition;
@@ -63,9 +66,15 @@ export function MessageView({
   showSaveViewButton?: boolean;
   minimalMode?: boolean;
   interactive?: boolean;
+  reasoningDisplayMode?: ReasoningDisplayMode;
 }) {
   const themeMode = usePreferencesStore((s) => s.themeMode);
-  const logoSrc = getProviderLogoFromModel(model, themeMode);
+  const sandboxHostStyle = useSandboxHostStyle();
+  const assistantAvatar = getAssistantAvatarDescriptor({
+    model,
+    themeMode,
+    sandboxHostStyle,
+  });
   // Hide widget state messages (these are internal and sent to the model)
   if (message.id?.startsWith("widget-state-")) return null;
   // Hide model context messages (these are internal and sent to the model)
@@ -110,6 +119,7 @@ export function MessageView({
                 showSaveViewButton={showSaveViewButton}
                 minimalMode={minimalMode}
                 interactive={interactive}
+                reasoningDisplayMode={reasoningDisplayMode}
               />
             ))}
           </div>
@@ -142,6 +152,7 @@ export function MessageView({
                 showSaveViewButton={showSaveViewButton}
                 minimalMode={minimalMode}
                 interactive={interactive}
+                reasoningDisplayMode={reasoningDisplayMode}
               />
             ))}
           </UserMessageBubble>
@@ -153,15 +164,21 @@ export function MessageView({
   const steps = groupAssistantPartsIntoSteps(message.parts ?? []);
   return (
     <article className="flex gap-4 w-full">
-      <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/40 bg-muted/40">
-        {logoSrc ? (
+      <div
+        className={`mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border ${assistantAvatar.avatarClasses}`}
+        aria-label={assistantAvatar.ariaLabel}
+      >
+        {assistantAvatar.logoSrc ? (
           <img
-            src={logoSrc}
-            alt={`${model.id} logo`}
+            src={assistantAvatar.logoSrc}
+            alt={assistantAvatar.logoAlt ?? ""}
             className="h-4 w-4 object-contain"
           />
         ) : (
-          <MessageCircle className="h-4 w-4 text-muted-foreground" />
+          <MessageCircle
+            className="h-4 w-4 text-muted-foreground"
+            aria-hidden
+          />
         )}
       </div>
 
@@ -195,6 +212,7 @@ export function MessageView({
                 showSaveViewButton={showSaveViewButton}
                 minimalMode={minimalMode}
                 interactive={interactive}
+                reasoningDisplayMode={reasoningDisplayMode}
               />
             ))}
           </div>
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/part-switch.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/part-switch.tsx
index 2795e295a..d456af735 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/part-switch.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/part-switch.tsx
@@ -7,7 +7,10 @@ import { usePostHog } from "posthog-js/react";
 import { detectPlatform, detectEnvironment } from "@/lib/PosthogUtils";
 
 import { ToolPart } from "./parts/tool-part";
-import { ReasoningPart } from "./parts/reasoning-part";
+import {
+  ReasoningPart,
+  type ReasoningDisplayMode,
+} from "./parts/reasoning-part";
 import { FilePart } from "./parts/file-part";
 import { SourceUrlPart } from "./parts/source-url-part";
 import { SourceDocumentPart } from "./parts/source-document-part";
@@ -71,6 +74,7 @@ export function PartSwitch({
   showSaveViewButton = true,
   minimalMode = false,
   interactive = true,
+  reasoningDisplayMode = "inline",
 }: {
   part: AnyPart;
   role: UIMessage["role"];
@@ -100,6 +104,7 @@ export function PartSwitch({
   showSaveViewButton?: boolean;
   minimalMode?: boolean;
   interactive?: boolean;
+  reasoningDisplayMode?: ReasoningDisplayMode;
 }) {
   const [appSupportedDisplayModes, setAppSupportedDisplayModes] = useState<
     DisplayMode[] | undefined
@@ -400,7 +405,13 @@ export function PartSwitch({
     case "text":
       return <TextPart text={part.text} role={role} />;
     case "reasoning":
-      return <ReasoningPart text={part.text} state={part.state} />;
+      return (
+        <ReasoningPart
+          text={part.text}
+          state={part.state}
+          displayMode={reasoningDisplayMode}
+        />
+      );
     case "file":
       return <FilePart part={part} />;
     case "source-url":
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/reasoning-part.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/reasoning-part.test.tsx
new file mode 100644
index 000000000..84bde5652
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/reasoning-part.test.tsx
@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ReasoningPart } from "../reasoning-part";
+
+describe("ReasoningPart", () => {
+  it("renders reasoning inline by default", () => {
+    render(<ReasoningPart text="Reasoned response" />);
+
+    expect(screen.getByText("Reasoned response")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /reasoning/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("collapses reasoning in trace mode and expands on demand", () => {
+    render(
+      <ReasoningPart
+        text="Private reasoning for trace viewers"
+        displayMode="collapsed"
+      />,
+    );
+
+    const toggle = screen.getByRole("button", { name: /reasoning/i });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByText("Private reasoning for trace viewers"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(
+      screen.getByText("Private reasoning for trace viewers"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows collapsible reasoning expanded by default", () => {
+    render(
+      <ReasoningPart text="Owner thread reasoning" displayMode="collapsible" />,
+    );
+
+    const toggle = screen.getByRole("button", { name: /reasoning/i });
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Owner thread reasoning")).toBeInTheDocument();
+
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByText("Owner thread reasoning"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("hides reasoning when display mode is hidden", () => {
+    const { container } = render(
+      <ReasoningPart
+        text="Not for public sandbox viewers"
+        displayMode="hidden"
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("hides redacted reasoning", () => {
+    const { container } = render(<ReasoningPart text="[REDACTED]" />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/tool-part-approval.test.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/tool-part-approval.test.tsx
index 8fe72ed84..c1b58073a 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/tool-part-approval.test.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/__tests__/tool-part-approval.test.tsx
@@ -67,6 +67,12 @@ vi.mock("@/components/ui/json-editor", () => ({
   ),
 }));
 
+vi.mock("../text-part", () => ({
+  TextPart: ({ text }: { text: string }) => (
+    <div data-testid="text-part">{text}</div>
+  ),
+}));
+
 const basePart = {
   type: "tool-invocation" as const,
   toolName: "test-tool",
@@ -199,4 +205,99 @@ describe("ToolPart approval expansion", () => {
     });
     expect(window.location.hash).toBe("#chat-v2");
   });
+
+  it("keeps attached readable output collapsed until the header is clicked", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ToolPart
+        part={
+          {
+            ...basePart,
+            traceDisplayText: "# Excalidraw Element Format",
+            traceDisplayMode: "markdown",
+          } as any
+        }
+        uiType="mcp-apps"
+      />,
+    );
+
+    expect(screen.queryByTestId("text-part")).not.toBeInTheDocument();
+    expect(getHeaderButton()).toHaveAttribute("aria-expanded", "false");
+
+    const headerButton = getHeaderButton();
+    expect(headerButton).toBeTruthy();
+    if (headerButton) {
+      await user.click(headerButton);
+    }
+
+    expect(getHeaderButton()).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("text-part")).toHaveTextContent(
+      "# Excalidraw Element Format",
+    );
+
+    if (headerButton) {
+      await user.click(headerButton);
+    }
+
+    expect(getHeaderButton()).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByTestId("text-part")).not.toBeInTheDocument();
+  });
+
+  it("reuses attached readable output instead of rendering a duplicate result json block", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ToolPart
+        part={
+          {
+            ...basePart,
+            input: { prompt: "read me" },
+            output: { type: "json", value: { ignored: true } },
+            traceDisplayText: "Readable output",
+            traceDisplayMode: "markdown",
+          } as any
+        }
+        uiType="mcp-apps"
+      />,
+    );
+
+    const headerButton = getHeaderButton();
+    expect(headerButton).toBeTruthy();
+    if (headerButton) {
+      await user.click(headerButton);
+    }
+
+    expect(screen.getByTestId("text-part")).toHaveTextContent(
+      "Readable output",
+    );
+    expect(screen.getAllByTestId("json-editor")).toHaveLength(1);
+  });
+
+  it("does not expand attached readable output in minimal mode", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ToolPart
+        part={
+          {
+            ...basePart,
+            traceDisplayText: "Readable output",
+            traceDisplayMode: "markdown",
+          } as any
+        }
+        uiType="mcp-apps"
+        minimalMode
+      />,
+    );
+
+    const headerButton = getHeaderButton();
+    expect(headerButton).toBeTruthy();
+    if (headerButton) {
+      await user.click(headerButton);
+    }
+
+    expect(getHeaderButton()).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByTestId("text-part")).not.toBeInTheDocument();
+  });
 });
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/reasoning-part.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/reasoning-part.tsx
index 46f7f7e7c..2355a6836 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/reasoning-part.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/reasoning-part.tsx
@@ -1,13 +1,73 @@
+import { useEffect, useId, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+export type ReasoningDisplayMode =
+  | "inline"
+  | "collapsible"
+  | "collapsed"
+  | "hidden";
+
 export function ReasoningPart({
   text,
+  state,
+  displayMode = "inline",
 }: {
   text: string;
   state?: "streaming" | "done";
+  displayMode?: ReasoningDisplayMode;
 }) {
-  if (!text || text.trim() === "[REDACTED]") return null;
+  const isRedacted = !text || text.trim() === "[REDACTED]";
+  const isHidden = displayMode === "hidden";
+  const isCollapsible =
+    displayMode === "collapsed" || displayMode === "collapsible";
+  const [isExpanded, setIsExpanded] = useState(displayMode !== "collapsed");
+  const contentId = useId();
+
+  useEffect(() => {
+    setIsExpanded(displayMode !== "collapsed");
+  }, [displayMode, text]);
+
+  if (isRedacted || isHidden) return null;
+
+  if (!isCollapsible) {
+    return (
+      <div className="rounded-lg border border-border/30 bg-muted/10 p-3 text-xs text-muted-foreground">
+        <pre className="whitespace-pre-wrap break-words">{text}</pre>
+      </div>
+    );
+  }
+
   return (
     <div className="rounded-lg border border-border/30 bg-muted/10 p-3 text-xs text-muted-foreground">
-      <pre className="whitespace-pre-wrap break-words">{text}</pre>
+      <button
+        type="button"
+        onClick={() => setIsExpanded((expanded) => !expanded)}
+        className="flex w-full items-center justify-between gap-3 text-left text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground/90"
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+      >
+        <span>Reasoning</span>
+        <span className="flex items-center gap-2">
+          {state === "streaming" ? (
+            <span className="text-[10px] normal-case tracking-normal text-muted-foreground/70">
+              Streaming
+            </span>
+          ) : null}
+          <ChevronDown
+            className={`h-3.5 w-3.5 transition-transform duration-150 ${
+              isExpanded ? "rotate-180" : ""
+            }`}
+          />
+        </span>
+      </button>
+      {isExpanded ? (
+        <pre
+          id={contentId}
+          className="mt-3 whitespace-pre-wrap break-words text-[12px]"
+        >
+          {text}
+        </pre>
+      ) : null}
     </div>
   );
 }
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/tool-part.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/tool-part.tsx
index 4b5ee1461..0182b4420 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/parts/tool-part.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/parts/tool-part.tsx
@@ -37,8 +37,10 @@ import {
 import { CspDebugPanel } from "../csp-debug-panel";
 import { JsonEditor } from "@/components/ui/json-editor";
 import { cn } from "@/lib/chat-utils";
+import { TextPart } from "./text-part";
 
 type ApprovalVisualState = "pending" | "approved" | "denied";
+type TraceDisplayMode = "markdown" | "json-markdown";
 const SAVE_VIEW_BUTTON_USED_KEY = "mcpjam-save-view-button-used";
 const SAVE_VIEW_REDIRECTED_KEY = "mcpjam-save-view-redirected";
 
@@ -134,9 +136,21 @@ export function ToolPart({
   const inputData = (part as any).input;
   const outputData = (part as any).output;
   const errorText = (part as any).errorText ?? (part as any).error;
+  const traceDisplayText =
+    typeof (part as { traceDisplayText?: unknown }).traceDisplayText ===
+    "string"
+      ? (part as { traceDisplayText: string }).traceDisplayText
+      : undefined;
+  const traceDisplayMode = (part as { traceDisplayMode?: TraceDisplayMode })
+    .traceDisplayMode;
+  const hasAttachedTraceDisplay = Boolean(
+    traceDisplayText &&
+    (traceDisplayMode === "markdown" || traceDisplayMode === "json-markdown"),
+  );
   const hasInput = inputData !== undefined && inputData !== null;
   const hasOutput = outputData !== undefined && outputData !== null;
   const hasError = state === "output-error" && !!errorText;
+  const showRawResult = hasOutput && !hasAttachedTraceDisplay;
 
   const widgetDebugInfo = useWidgetDebugStore((s) =>
     toolCallId ? s.widgets.get(toolCallId) : undefined,
@@ -403,6 +417,90 @@ export function ToolPart({
     </span>
   );
 
+  const renderToolInput = () =>
+    hasInput ? (
+      <div className="space-y-1">
+        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+          Input
+        </div>
+        <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
+          <JsonEditor
+            height="100%"
+            viewOnly
+            value={inputData}
+            className="p-2 text-[11px]"
+            collapsible
+            defaultExpandDepth={2}
+          />
+        </div>
+      </div>
+    ) : null;
+
+  const renderAttachedTraceDisplay = () =>
+    hasAttachedTraceDisplay && traceDisplayText ? (
+      <div className="space-y-1">
+        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+          Result
+        </div>
+        <div
+          data-testid="tool-part-readable-result"
+          className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto px-3 py-2"
+        >
+          <TextPart text={traceDisplayText} role="assistant" />
+        </div>
+      </div>
+    ) : null;
+
+  const renderToolResult = () =>
+    showRawResult ? (
+      <div className="space-y-1">
+        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+          Result
+        </div>
+        <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
+          <JsonEditor
+            height="100%"
+            viewOnly
+            value={outputData}
+            className="p-2 text-[11px]"
+            collapsible
+            defaultExpandDepth={2}
+          />
+        </div>
+      </div>
+    ) : null;
+
+  const renderToolError = () =>
+    hasError ? (
+      <div className="space-y-1">
+        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+          Error
+        </div>
+        <div className="rounded border border-destructive/40 bg-destructive/10 p-2 text-destructive">
+          {errorText}
+        </div>
+      </div>
+    ) : null;
+
+  const renderToolData = () => {
+    if (!hasInput && !showRawResult && !hasError && !hasAttachedTraceDisplay) {
+      return (
+        <div className="text-muted-foreground/70">
+          No tool details available.
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-4">
+        {renderToolInput()}
+        {renderAttachedTraceDisplay()}
+        {renderToolResult()}
+        {renderToolError()}
+      </div>
+    );
+  };
+
   return (
     <div
       className={cn(
@@ -520,59 +618,7 @@ export function ToolPart({
         <div className="border-t border-border/40 px-3 py-3">
           {!hideDiagnosticsUI && (
             <>
-              {hasWidgetDebug && activeDebugTab === "data" && (
-                <div className="space-y-4">
-                  {hasInput && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Input
-                      </div>
-                      <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
-                        <JsonEditor
-                          height="100%"
-                          viewOnly
-                          value={inputData}
-                          className="p-2 text-[11px]"
-                          collapsible
-                          defaultExpandDepth={2}
-                        />
-                      </div>
-                    </div>
-                  )}
-                  {hasOutput && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Result
-                      </div>
-                      <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
-                        <JsonEditor
-                          height="100%"
-                          viewOnly
-                          value={outputData}
-                          className="p-2 text-[11px]"
-                          collapsible
-                          defaultExpandDepth={2}
-                        />
-                      </div>
-                    </div>
-                  )}
-                  {hasError && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Error
-                      </div>
-                      <div className="rounded border border-destructive/40 bg-destructive/10 p-2 text-destructive">
-                        {errorText}
-                      </div>
-                    </div>
-                  )}
-                  {!hasInput && !hasOutput && !hasError && (
-                    <div className="text-muted-foreground/70">
-                      No tool details available.
-                    </div>
-                  )}
-                </div>
-              )}
+              {hasWidgetDebug && activeDebugTab === "data" && renderToolData()}
               {hasWidgetDebug && activeDebugTab === "state" && (
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
@@ -681,62 +727,7 @@ export function ToolPart({
                   )}
                 </div>
               )}
-              {!hasWidgetDebug && (
-                <div className="space-y-4">
-                  {hasInput && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Input
-                      </div>
-                      <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
-                        <JsonEditor
-                          height="100%"
-                          viewOnly
-                          value={inputData}
-                          className="p-2 text-[11px]"
-                          collapsible
-                          defaultExpandDepth={2}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {hasOutput && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Result
-                      </div>
-                      <div className="rounded-md border border-border/30 bg-muted/20 max-h-[300px] overflow-auto">
-                        <JsonEditor
-                          height="100%"
-                          viewOnly
-                          value={outputData}
-                          className="p-2 text-[11px]"
-                          collapsible
-                          defaultExpandDepth={2}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {hasError && (
-                    <div className="space-y-1">
-                      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
-                        Error
-                      </div>
-                      <div className="rounded border border-destructive/40 bg-destructive/10 p-2 text-destructive">
-                        {errorText}
-                      </div>
-                    </div>
-                  )}
-
-                  {!hasInput && !hasOutput && !hasError && (
-                    <div className="text-muted-foreground/70">
-                      No tool details available.
-                    </div>
-                  )}
-                </div>
-              )}
+              {!hasWidgetDebug && renderToolData()}
             </>
           )}
           {needsApproval && approvalVisualState === "pending" && (
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/user-message-bubble.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/user-message-bubble.tsx
index 351edc700..cec549254 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/user-message-bubble.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/user-message-bubble.tsx
@@ -5,6 +5,8 @@
  * Used by both ChatTabV2's Thread and the UI Playground for consistent styling.
  */
 
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
+
 interface UserMessageBubbleProps {
   children: React.ReactNode;
   className?: string;
@@ -14,9 +16,19 @@ export function UserMessageBubble({
   children,
   className = "",
 }: UserMessageBubbleProps) {
+  const sandboxHostStyle = useSandboxHostStyle();
+  const bubbleClasses =
+    sandboxHostStyle === "chatgpt"
+      ? "sandbox-host-user-bubble rounded-[1.5rem] border-transparent bg-[#f4f4f4] text-[#1f1f1f] shadow-none dark:bg-[#2f2f2f] dark:text-[#f5f5f5]"
+      : sandboxHostStyle === "claude"
+        ? "sandbox-host-user-bubble rounded-xl border-[#d9d1c5] bg-[#f5f0e8] text-[#2d2926] shadow-none dark:border-[#4c473f] dark:bg-[#3a3832] dark:text-[#f2ede6]"
+        : "rounded-xl border border-[#e5e7ec] bg-[#f9fafc] text-[#1f2733] shadow-sm dark:border-[#4a5261] dark:bg-[#2f343e] dark:text-[#e6e8ed]";
+
   return (
     <div className={`flex justify-end ${className}`}>
-      <div className="max-w-3xl max-h-[70vh] space-y-3 overflow-auto overscroll-contain rounded-xl border border-[#e5e7ec] bg-[#f9fafc] px-4 py-3 text-sm leading-6 text-[#1f2733] shadow-sm dark:border-[#4a5261] dark:bg-[#2f343e] dark:text-[#e6e8ed]">
+      <div
+        className={`max-w-3xl max-h-[70vh] space-y-3 overflow-auto overscroll-contain px-4 py-3 text-sm leading-6 ${bubbleClasses}`}
+      >
         {children}
       </div>
     </div>
diff --git a/mcpjam-inspector/client/src/components/chat-v2/thread/widget-replay.tsx b/mcpjam-inspector/client/src/components/chat-v2/thread/widget-replay.tsx
index f90866fa9..05d6e837b 100644
--- a/mcpjam-inspector/client/src/components/chat-v2/thread/widget-replay.tsx
+++ b/mcpjam-inspector/client/src/components/chat-v2/thread/widget-replay.tsx
@@ -13,6 +13,8 @@ import {
   readToolResultMeta,
   readToolResultServerId,
 } from "@/lib/tool-result-utils";
+import { useSandboxHostStyle } from "@/contexts/sandbox-host-style-context";
+import { getSandboxProtocolOverride } from "@/lib/sandbox-host-style";
 import type { DisplayMode } from "@/stores/ui-playground-store";
 
 export interface WidgetReplayProps {
@@ -78,9 +80,14 @@ export function WidgetReplay({
   displayMode,
   onDisplayModeChange,
   onAppSupportedDisplayModesChange,
-  selectedProtocolOverrideIfBothExists = UIType.OPENAI_SDK,
+  selectedProtocolOverrideIfBothExists,
   minimalMode = false,
 }: WidgetReplayProps) {
+  const sandboxHostStyle = useSandboxHostStyle();
+  const protocolOverride =
+    selectedProtocolOverrideIfBothExists ??
+    getSandboxProtocolOverride(sandboxHostStyle) ??
+    UIType.OPENAI_SDK;
   const effectiveToolMeta =
     renderOverride?.toolMetadata ??
     toolMetadata ??
@@ -98,7 +105,7 @@ export function WidgetReplay({
   if (
     uiType === UIType.OPENAI_SDK ||
     (uiType === UIType.OPENAI_SDK_AND_MCP_APPS &&
-      selectedProtocolOverrideIfBothExists === UIType.OPENAI_SDK)
+      protocolOverride === UIType.OPENAI_SDK)
   ) {
     if (
       toolState !== "output-available" &&
@@ -151,7 +158,7 @@ export function WidgetReplay({
   if (
     uiType === UIType.MCP_APPS ||
     (uiType === UIType.OPENAI_SDK_AND_MCP_APPS &&
-      selectedProtocolOverrideIfBothExists === UIType.MCP_APPS)
+      protocolOverride === UIType.MCP_APPS)
   ) {
     if (
       toolState !== "output-available" &&
diff --git a/mcpjam-inspector/client/src/components/connection/AddServerModal.tsx b/mcpjam-inspector/client/src/components/connection/AddServerModal.tsx
index b07b30be6..c9eb53a9a 100644
--- a/mcpjam-inspector/client/src/components/connection/AddServerModal.tsx
+++ b/mcpjam-inspector/client/src/components/connection/AddServerModal.tsx
@@ -25,6 +25,7 @@ interface AddServerModalProps {
   onClose: () => void;
   onSubmit: (formData: ServerFormData) => void;
   initialData?: Partial<ServerFormData>;
+  requireHttps?: boolean;
 }
 
 export function AddServerModal({
@@ -32,9 +33,10 @@ export function AddServerModal({
   onClose,
   onSubmit,
   initialData,
+  requireHttps,
 }: AddServerModalProps) {
   const posthog = usePostHog();
-  const formState = useServerForm();
+  const formState = useServerForm(undefined, { requireHttps });
 
   // Initialize form with initial data if provided
   useEffect(() => {
diff --git a/mcpjam-inspector/client/src/components/connection/ShareServerDialog.tsx b/mcpjam-inspector/client/src/components/connection/ShareServerDialog.tsx
index c6904a3c8..7d397203a 100644
--- a/mcpjam-inspector/client/src/components/connection/ShareServerDialog.tsx
+++ b/mcpjam-inspector/client/src/components/connection/ShareServerDialog.tsx
@@ -45,8 +45,7 @@ import {
   useServerShareMutations,
   useServerShareSettings,
 } from "@/hooks/useServerShares";
-import { slugify } from "@/lib/shared-server-session";
-import { HOSTED_MODE } from "@/lib/config";
+import { getShareableAppOrigin, slugify } from "@/lib/shared-server-session";
 import { ShareUsageDialog } from "./share-usage/ShareUsageDialog";
 
 interface ShareServerDialogProps {
@@ -140,9 +139,7 @@ export function ShareServerDialog({
     if (!settings?.link?.token) return;
     try {
       const slug = slugify(serverName);
-      const origin = HOSTED_MODE
-        ? window.location.origin
-        : "https://app.mcpjam.com";
+      const origin = getShareableAppOrigin();
       const shareUrl = `${origin}/shared/${slug}/${encodeURIComponent(settings.link.token)}`;
       await navigator.clipboard.writeText(shareUrl);
       toast.success("Share link copied");
@@ -471,8 +468,9 @@ export function ShareServerDialog({
           isOpen={isOpen && view === "usage"}
           onClose={onClose}
           onBackToSettings={() => setView("settings")}
-          shareId={settings.shareId}
-          serverName={serverName}
+          sourceType="serverShare"
+          sourceId={settings.shareId}
+          title={serverName}
         />
       )}
     </>
diff --git a/mcpjam-inspector/client/src/components/connection/hooks/__tests__/use-server-form.test.ts b/mcpjam-inspector/client/src/components/connection/hooks/__tests__/use-server-form.test.ts
new file mode 100644
index 000000000..ec98f0cd9
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/connection/hooks/__tests__/use-server-form.test.ts
@@ -0,0 +1,50 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/hooks/use-app-state", () => ({}));
+vi.mock("@/lib/config", () => ({
+  HOSTED_MODE: false,
+}));
+vi.mock("@/lib/oauth/mcp-oauth", () => ({
+  hasOAuthConfig: vi.fn().mockReturnValue(false),
+  getStoredTokens: vi.fn().mockReturnValue(null),
+}));
+
+import { useServerForm } from "../use-server-form";
+
+describe("useServerForm", () => {
+  it("rejects malformed HTTP URLs even when HTTPS is optional", () => {
+    const { result } = renderHook(() => useServerForm());
+
+    act(() => {
+      result.current.setName("Test server");
+      result.current.setUrl("foo");
+    });
+
+    expect(result.current.validateForm()).toBe("Invalid URL format");
+  });
+
+  it("allows valid HTTP URLs when HTTPS is not required", () => {
+    const { result } = renderHook(() => useServerForm());
+
+    act(() => {
+      result.current.setName("Test server");
+      result.current.setUrl("http://example.com/mcp");
+    });
+
+    expect(result.current.validateForm()).toBeNull();
+  });
+
+  it("still enforces HTTPS when explicitly required", () => {
+    const { result } = renderHook(() =>
+      useServerForm(undefined, { requireHttps: true }),
+    );
+
+    act(() => {
+      result.current.setName("Test server");
+      result.current.setUrl("http://example.com/mcp");
+    });
+
+    expect(result.current.validateForm()).toBe("HTTPS is required");
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/connection/hooks/use-server-form.ts b/mcpjam-inspector/client/src/components/connection/hooks/use-server-form.ts
index b95cbc447..512502eee 100644
--- a/mcpjam-inspector/client/src/components/connection/hooks/use-server-form.ts
+++ b/mcpjam-inspector/client/src/components/connection/hooks/use-server-form.ts
@@ -4,7 +4,10 @@ import { ServerWithName } from "@/hooks/use-app-state";
 import { hasOAuthConfig, getStoredTokens } from "@/lib/oauth/mcp-oauth";
 import { HOSTED_MODE } from "@/lib/config";
 
-export function useServerForm(server?: ServerWithName) {
+export function useServerForm(
+  server?: ServerWithName,
+  options?: { requireHttps?: boolean },
+) {
   const [name, setName] = useState("");
   const [type, setType] = useState<"stdio" | "http">("http");
   const [commandInput, setCommandInput] = useState("");
@@ -184,16 +187,19 @@ export function useServerForm(server?: ServerWithName) {
         return "URL is required for HTTP servers";
       }
 
-      // Enforce HTTPS in hosted mode
-      if (HOSTED_MODE) {
-        try {
-          const urlObj = new URL(url.trim());
-          if (urlObj.protocol !== "https:") {
-            return "HTTPS is required in web app";
-          }
-        } catch {
-          return "Invalid URL format";
-        }
+      let urlObj: URL;
+      try {
+        urlObj = new URL(url.trim());
+      } catch {
+        return "Invalid URL format";
+      }
+
+      // Enforce HTTPS in hosted mode or when explicitly required
+      if (
+        (HOSTED_MODE || options?.requireHttps) &&
+        urlObj.protocol !== "https:"
+      ) {
+        return "HTTPS is required";
       }
     }
 
diff --git a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageDialog.tsx b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageDialog.tsx
index 33bc03b14..86971f0df 100644
--- a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageDialog.tsx
+++ b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageDialog.tsx
@@ -14,27 +14,30 @@ import {
 } from "@/components/ui/resizable";
 import { ShareUsageThreadList } from "./ShareUsageThreadList";
 import { ShareUsageThreadDetail } from "./ShareUsageThreadDetail";
+import type { SharedChatSourceType } from "@/hooks/useSharedChatThreads";
 
 interface ShareUsageDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onBackToSettings: () => void;
-  shareId: string;
-  serverName: string;
+  sourceType: SharedChatSourceType;
+  sourceId: string;
+  title: string;
 }
 
 export function ShareUsageDialog({
   isOpen,
   onClose,
   onBackToSettings,
-  shareId,
-  serverName,
+  sourceType,
+  sourceId,
+  title,
 }: ShareUsageDialogProps) {
   const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
 
   useEffect(() => {
     setSelectedThreadId(null);
-  }, [shareId]);
+  }, [sourceId]);
 
   return (
     <Dialog
@@ -55,7 +58,7 @@ export function ShareUsageDialog({
               <ArrowLeft className="h-4 w-4" />
             </Button>
             <DialogTitle className="text-base">
-              Usage &mdash; {serverName}
+              Usage &mdash; {title}
             </DialogTitle>
           </div>
         </DialogHeader>
@@ -65,7 +68,8 @@ export function ShareUsageDialog({
             <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
               <div className="h-full overflow-hidden">
                 <ShareUsageThreadList
-                  shareId={shareId}
+                  sourceType={sourceType}
+                  sourceId={sourceId}
                   selectedThreadId={selectedThreadId}
                   onSelectThread={setSelectedThreadId}
                 />
diff --git a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadDetail.tsx b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadDetail.tsx
index 34f81538b..49d9e8109 100644
--- a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadDetail.tsx
+++ b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadDetail.tsx
@@ -89,7 +89,7 @@ export function ShareUsageThreadDetail({
         toolCallId: snap.toolCallId,
         toolName: snap.toolName,
         protocol: snap.uiType,
-        serverId: thread.serverId,
+        serverId: snap.serverId,
         resourceUri: snap.resourceUri ?? "",
         toolMetadata,
         widgetCsp: snap.widgetCsp,
@@ -106,8 +106,10 @@ export function ShareUsageThreadDetail({
     if (!messages) return null;
     return adaptTraceToUiMessages({
       trace: { messages: messages as any, widgetSnapshots },
+      toolResultDisplay:
+        thread?.sourceType === "sandbox" ? "attached-to-tool" : "sibling-text",
     });
-  }, [messages, widgetSnapshots]);
+  }, [messages, thread?.sourceType, widgetSnapshots]);
 
   const resolvedModel: ModelDefinition = useMemo(
     () => ({
@@ -161,6 +163,8 @@ export function ShareUsageThreadDetail({
         ? `${Math.round(duration / 1000)}s`
         : `${Math.round(duration / 60000)}m`
       : null;
+  const isSandboxThread = thread.sourceType === "sandbox";
+  const reasoningDisplayMode = isSandboxThread ? "collapsible" : "collapsed";
 
   return (
     <div className="flex h-full flex-col">
@@ -214,8 +218,9 @@ export function ShareUsageThreadDetail({
               onExitFullscreen={NOOP}
               toolRenderOverrides={adaptedTrace.toolRenderOverrides}
               showSaveViewButton={false}
-              minimalMode={true}
+              minimalMode={!isSandboxThread}
               interactive={false}
+              reasoningDisplayMode={reasoningDisplayMode}
             />
           ))}
         </div>
diff --git a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadList.tsx b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadList.tsx
index 4b313d1d8..fcdd8c463 100644
--- a/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadList.tsx
+++ b/mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadList.tsx
@@ -3,21 +3,24 @@ import { MessageSquare } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   useSharedChatThreadList,
+  type SharedChatSourceType,
   type SharedChatThread,
 } from "@/hooks/useSharedChatThreads";
 
 interface ShareUsageThreadListProps {
-  shareId: string;
+  sourceType: SharedChatSourceType;
+  sourceId: string;
   selectedThreadId: string | null;
   onSelectThread: (threadId: string) => void;
 }
 
 export function ShareUsageThreadList({
-  shareId,
+  sourceType,
+  sourceId,
   selectedThreadId,
   onSelectThread,
 }: ShareUsageThreadListProps) {
-  const { threads } = useSharedChatThreadList({ shareId });
+  const { threads } = useSharedChatThreadList({ sourceType, sourceId });
 
   if (threads === undefined) {
     return (
diff --git a/mcpjam-inspector/client/src/components/connection/share-usage/__tests__/ShareUsageThreadDetail.test.tsx b/mcpjam-inspector/client/src/components/connection/share-usage/__tests__/ShareUsageThreadDetail.test.tsx
new file mode 100644
index 000000000..8b0b081c1
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/connection/share-usage/__tests__/ShareUsageThreadDetail.test.tsx
@@ -0,0 +1,138 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ShareUsageThreadDetail } from "../ShareUsageThreadDetail";
+
+const { mockMessageView, mockAdaptTraceToUiMessages, mockThreadState } =
+  vi.hoisted(() => ({
+    mockMessageView: vi.fn(),
+    mockAdaptTraceToUiMessages: vi.fn(),
+    mockThreadState: {
+      sourceType: "sandbox",
+    },
+  }));
+
+vi.mock("@/hooks/useSharedChatThreads", () => ({
+  useSharedChatThread: () => ({
+    thread: {
+      sourceType: mockThreadState.sourceType,
+      messagesBlobUrl: "https://storage.example.com/thread.json",
+      modelId: "openai/gpt-oss-120b",
+      visitorDisplayName: "Marcelo Jimenez",
+      messageCount: 2,
+      startedAt: Date.now() - 1000,
+      lastActivityAt: Date.now(),
+    },
+  }),
+  useSharedChatWidgetSnapshots: () => ({
+    snapshots: [],
+  }),
+}));
+
+vi.mock("@/components/evals/trace-viewer-adapter", () => ({
+  adaptTraceToUiMessages: (...args: unknown[]) =>
+    mockAdaptTraceToUiMessages(...args),
+}));
+
+vi.mock("@/components/chat-v2/thread/message-view", () => ({
+  MessageView: (props: Record<string, unknown>) => {
+    mockMessageView(props);
+    return <div data-testid="message-view" />;
+  },
+}));
+
+describe("ShareUsageThreadDetail", () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockThreadState.sourceType = "sandbox";
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [{ role: "assistant", content: [] }],
+    } as Response);
+    mockAdaptTraceToUiMessages.mockReturnValue({
+      messages: [
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [
+            {
+              type: "reasoning",
+              text: "Collapsed in share usage traces",
+              state: "done",
+            },
+          ],
+        },
+      ],
+      toolRenderOverrides: {},
+    });
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it("renders formatted share traces with collapsed reasoning", async () => {
+    render(<ShareUsageThreadDetail threadId="thread-1" />);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", { name: "Chat" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Trace" }),
+      ).not.toBeInTheDocument();
+      expect(mockAdaptTraceToUiMessages).toHaveBeenCalledWith(
+        expect.objectContaining({
+          toolResultDisplay: "attached-to-tool",
+        }),
+      );
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reasoningDisplayMode: "collapsible",
+          interactive: false,
+          minimalMode: false,
+        }),
+      );
+    });
+  });
+
+  it("keeps sandbox threads in chat mode without a toggle", async () => {
+    render(<ShareUsageThreadDetail threadId="thread-1" />);
+
+    await waitFor(() => {
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          minimalMode: false,
+          reasoningDisplayMode: "collapsible",
+        }),
+      );
+    });
+  });
+
+  it("keeps server share threads in trace mode without a toggle", async () => {
+    mockThreadState.sourceType = "serverShare";
+
+    render(<ShareUsageThreadDetail threadId="thread-1" />);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", { name: "Chat" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Trace" }),
+      ).not.toBeInTheDocument();
+      expect(mockAdaptTraceToUiMessages).toHaveBeenCalledWith(
+        expect.objectContaining({
+          toolResultDisplay: "sibling-text",
+        }),
+      );
+      expect(mockMessageView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          minimalMode: true,
+          reasoningDisplayMode: "collapsed",
+        }),
+      );
+    });
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer-adapter.test.ts b/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer-adapter.test.ts
index 0b7602f4a..a1c9055f5 100644
--- a/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer-adapter.test.ts
+++ b/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer-adapter.test.ts
@@ -93,6 +93,98 @@ describe("adaptTraceToUiMessages", () => {
     expect(msg.parts[2]).toMatchObject({ type: "text" });
   });
 
+  it("attaches readable tool output to the tool part in attached-to-tool mode", () => {
+    const trace: TraceEnvelope = {
+      messages: [
+        {
+          role: "assistant",
+          content: [
+            { type: "text", text: "Let me do that." },
+            {
+              type: "tool-call",
+              toolCallId: "call-1",
+              toolName: "read_me",
+              input: { id: 42 },
+            },
+          ],
+        },
+        {
+          role: "tool",
+          content: [
+            {
+              type: "tool-result",
+              toolCallId: "call-1",
+              toolName: "read_me",
+              output: { type: "json", value: { text: "result text" } },
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = adaptTraceToUiMessages({
+      trace,
+      toolResultDisplay: "attached-to-tool",
+    });
+    expect(result.messages).toHaveLength(1);
+
+    const msg = result.messages[0];
+    expect(msg.parts).toHaveLength(2);
+    expect(msg.parts[1]).toMatchObject({
+      type: "dynamic-tool",
+      toolCallId: "call-1",
+      toolName: "read_me",
+      traceDisplayText: "result text",
+      traceDisplayMode: "markdown",
+    });
+    expect(
+      msg.parts.find((part) => part.type === "text" && part !== msg.parts[0]),
+    ).toBeUndefined();
+  });
+
+  it("attaches structured tool output as json markdown in attached-to-tool mode", () => {
+    const trace: TraceEnvelope = {
+      messages: [
+        {
+          role: "assistant",
+          content: [
+            {
+              type: "tool-call",
+              toolCallId: "call-1",
+              toolName: "read_me",
+              input: {},
+            },
+          ],
+        },
+        {
+          role: "tool",
+          content: [
+            {
+              type: "tool-result",
+              toolCallId: "call-1",
+              toolName: "read_me",
+              output: { hello: "world" },
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = adaptTraceToUiMessages({
+      trace,
+      toolResultDisplay: "attached-to-tool",
+    });
+
+    expect(result.messages[0].parts).toHaveLength(1);
+    expect(result.messages[0].parts[0]).toMatchObject({
+      type: "dynamic-tool",
+      traceDisplayMode: "json-markdown",
+    });
+    expect((result.messages[0].parts[0] as any).traceDisplayText).toContain(
+      '"hello": "world"',
+    );
+  });
+
   // --- Test 2: Multiple tool calls ---
   it("groups multiple tool-calls and results into a single assistant UIMessage", () => {
     const trace: TraceEnvelope = {
diff --git a/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer.test.tsx b/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer.test.tsx
index 9f2837a4a..636fbcb24 100644
--- a/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer.test.tsx
+++ b/mcpjam-inspector/client/src/components/evals/__tests__/trace-viewer.test.tsx
@@ -59,6 +59,25 @@ const simpleTextTrace = {
   ],
 };
 
+const reasoningTrace = {
+  messages: [
+    {
+      role: "assistant",
+      content: [
+        {
+          type: "reasoning",
+          text: "Thinking through the tool choice.",
+          state: "done",
+        },
+        {
+          type: "text",
+          text: "I should call the server listing tool.",
+        },
+      ],
+    },
+  ],
+};
+
 const toolTrace = {
   messages: [
     {
@@ -182,6 +201,16 @@ describe("TraceViewer", () => {
     );
   });
 
+  it("requests collapsed reasoning rendering in formatted trace mode", () => {
+    render(<TraceViewer trace={reasoningTrace} />);
+
+    expect(mockMessageView).toHaveBeenCalledWith(
+      expect.objectContaining({
+        reasoningDisplayMode: "collapsed",
+      }),
+    );
+  });
+
   it("forwards ModelDefinition when provided", () => {
     const model = {
       id: "gpt-4o",
diff --git a/mcpjam-inspector/client/src/components/evals/trace-viewer-adapter.ts b/mcpjam-inspector/client/src/components/evals/trace-viewer-adapter.ts
index 050d1117a..cd545464f 100644
--- a/mcpjam-inspector/client/src/components/evals/trace-viewer-adapter.ts
+++ b/mcpjam-inspector/client/src/components/evals/trace-viewer-adapter.ts
@@ -61,6 +61,9 @@ export interface AdaptedTraceResult {
   toolRenderOverrides: Record<string, ToolRenderOverride>;
 }
 
+type ToolResultDisplay = "sibling-text" | "attached-to-tool";
+type TraceDisplayMode = "markdown" | "json-markdown";
+
 interface TraceToolResultEntry {
   part: TraceContentPart;
   messageIndex: number;
@@ -361,6 +364,34 @@ function createReplayOverride(
   }).renderOverride;
 }
 
+function getTraceDisplayAttachment(params: {
+  displayedOutput: unknown;
+  adaptedOutput: unknown;
+  canReplayWidget: boolean;
+}): { text: string; mode: TraceDisplayMode } | null {
+  const extractedText = extractTextFromToolResult(params.displayedOutput);
+  if (extractedText) {
+    return {
+      text: extractedText,
+      mode: "markdown",
+    };
+  }
+
+  if (params.canReplayWidget) {
+    return null;
+  }
+
+  const jsonMarkdown = toMarkdownJson(params.adaptedOutput);
+  if (!jsonMarkdown) {
+    return null;
+  }
+
+  return {
+    text: jsonMarkdown,
+    mode: "json-markdown",
+  };
+}
+
 function buildToolParts(params: {
   toolCall: TraceContentPart;
   matchedResult?: TraceContentPart;
@@ -371,6 +402,7 @@ function buildToolParts(params: {
   toolServerMap: ToolServerMap;
   connectedServerIds: Set<string>;
   toolRenderOverrides: Record<string, ToolRenderOverride>;
+  toolResultDisplay: ToolResultDisplay;
 }): UIMessage["parts"] {
   const toolName = getToolName(params.toolCall);
   const toolInput = getToolInput(params.toolCall);
@@ -422,8 +454,20 @@ function buildToolParts(params: {
     };
   }
 
+  const traceDisplayAttachment =
+    !isError && params.matchedResult
+      ? getTraceDisplayAttachment({
+          displayedOutput,
+          adaptedOutput,
+          canReplayWidget,
+        })
+      : null;
+
   const parts: UIMessage["parts"] = [];
-  const toolPart: DynamicToolUIPart = isError
+  const toolPart: DynamicToolUIPart & {
+    traceDisplayText?: string;
+    traceDisplayMode?: TraceDisplayMode;
+  } = isError
     ? {
         type: "dynamic-tool",
         toolCallId,
@@ -448,6 +492,13 @@ function buildToolParts(params: {
           state: "input-available",
           input: toolInput,
         };
+  if (
+    params.toolResultDisplay === "attached-to-tool" &&
+    traceDisplayAttachment
+  ) {
+    toolPart.traceDisplayText = traceDisplayAttachment.text;
+    toolPart.traceDisplayMode = traceDisplayAttachment.mode;
+  }
   parts.push(toolPart);
 
   if (isError) {
@@ -462,23 +513,15 @@ function buildToolParts(params: {
     return parts;
   }
 
-  const extractedText = extractTextFromToolResult(displayedOutput);
-  if (extractedText) {
-    parts.push({
-      type: "text",
-      text: extractedText,
-    });
+  if (params.toolResultDisplay === "attached-to-tool") {
     return parts;
   }
 
-  if (!canReplayWidget) {
-    const jsonMarkdown = toMarkdownJson(adaptedOutput);
-    if (jsonMarkdown) {
-      parts.push({
-        type: "text",
-        text: jsonMarkdown,
-      });
-    }
+  if (traceDisplayAttachment) {
+    parts.push({
+      type: "text",
+      text: traceDisplayAttachment.text,
+    });
   }
 
   return parts;
@@ -507,6 +550,7 @@ function buildAssistantMessage(params: {
   toolServerMap: ToolServerMap;
   connectedServerIds: Set<string>;
   toolRenderOverrides: Record<string, ToolRenderOverride>;
+  toolResultDisplay: ToolResultDisplay;
 }): { message: UIMessage; extraMessages: UIMessage[] } {
   const assistantParts = normalizeMessageContent(params.message);
   const toolResultEntries = params.toolMessages.flatMap(
@@ -550,6 +594,7 @@ function buildAssistantMessage(params: {
           toolServerMap: params.toolServerMap,
           connectedServerIds: params.connectedServerIds,
           toolRenderOverrides: params.toolRenderOverrides,
+          toolResultDisplay: params.toolResultDisplay,
         }),
       );
       return;
@@ -595,6 +640,7 @@ function buildAssistantMessage(params: {
           toolServerMap: params.toolServerMap,
           connectedServerIds: params.connectedServerIds,
           toolRenderOverrides: params.toolRenderOverrides,
+          toolResultDisplay: params.toolResultDisplay,
         }),
       } satisfies UIMessage;
     },
@@ -633,6 +679,7 @@ function buildOrphanToolMessages(params: {
   toolServerMap: ToolServerMap;
   connectedServerIds: Set<string>;
   toolRenderOverrides: Record<string, ToolRenderOverride>;
+  toolResultDisplay: ToolResultDisplay;
 }) {
   return params.toolMessages.flatMap((message, messageOffset) =>
     normalizeMessageContent(message)
@@ -669,6 +716,7 @@ function buildOrphanToolMessages(params: {
             toolServerMap: params.toolServerMap,
             connectedServerIds: params.connectedServerIds,
             toolRenderOverrides: params.toolRenderOverrides,
+            toolResultDisplay: params.toolResultDisplay,
           }),
         } satisfies UIMessage;
       })
@@ -681,6 +729,7 @@ export function adaptTraceToUiMessages(params: {
   toolsMetadata?: Record<string, Record<string, any>>;
   toolServerMap?: ToolServerMap;
   connectedServerIds?: string[];
+  toolResultDisplay?: ToolResultDisplay;
 }): AdaptedTraceResult {
   const { messages, widgetSnapshots } = resolveTraceMessages(params.trace);
   const widgetSnapshotMap = new Map(
@@ -691,6 +740,7 @@ export function adaptTraceToUiMessages(params: {
   const toolsMetadata = params.toolsMetadata ?? {};
   const toolServerMap = params.toolServerMap ?? {};
   const connectedServerIds = new Set(params.connectedServerIds ?? []);
+  const toolResultDisplay = params.toolResultDisplay ?? "sibling-text";
 
   for (let index = 0; index < messages.length; index++) {
     const message = messages[index];
@@ -717,6 +767,7 @@ export function adaptTraceToUiMessages(params: {
         toolServerMap,
         connectedServerIds,
         toolRenderOverrides,
+        toolResultDisplay,
       });
       uiMessages.push(
         adaptedAssistant.message,
@@ -743,6 +794,7 @@ export function adaptTraceToUiMessages(params: {
           toolServerMap,
           connectedServerIds,
           toolRenderOverrides,
+          toolResultDisplay,
         }),
       );
       index = nextIndex - 1;
diff --git a/mcpjam-inspector/client/src/components/evals/trace-viewer.tsx b/mcpjam-inspector/client/src/components/evals/trace-viewer.tsx
index 4734d2967..47146fffb 100644
--- a/mcpjam-inspector/client/src/components/evals/trace-viewer.tsx
+++ b/mcpjam-inspector/client/src/components/evals/trace-viewer.tsx
@@ -147,6 +147,7 @@ export function TraceViewer({
               showSaveViewButton={false}
               minimalMode={true}
               interactive={false}
+              reasoningDisplayMode="collapsed"
             />
           ))}
         </div>
diff --git a/mcpjam-inspector/client/src/components/hosted/SandboxChatPage.tsx b/mcpjam-inspector/client/src/components/hosted/SandboxChatPage.tsx
new file mode 100644
index 000000000..cfda68aaf
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/hosted/SandboxChatPage.tsx
@@ -0,0 +1,651 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@workos-inc/authkit-react";
+import { useConvexAuth } from "convex/react";
+import { Loader2, Link2Off, ShieldX } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ChatTabV2 } from "@/components/ChatTabV2";
+import type { ServerWithName } from "@/hooks/use-app-state";
+import { useHostedApiContext } from "@/hooks/hosted/use-hosted-api-context";
+import { useHostedOAuthGate } from "@/hooks/hosted/use-hosted-oauth-gate";
+import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
+import { getGuestBearerToken } from "@/lib/guest-session";
+import { getStoredTokens } from "@/lib/oauth/mcp-oauth";
+import {
+  buildSandboxLink,
+  clearSandboxSession,
+  extractSandboxTokenFromPath,
+  readSandboxSession,
+  SANDBOX_OAUTH_PENDING_KEY,
+  type SandboxSession,
+  writeSandboxSession,
+  writeSandboxSignInReturnPath,
+} from "@/lib/sandbox-session";
+import { isHostedOAuthBusy } from "@/lib/hosted-oauth-resume";
+import type { HostedOAuthRequiredDetails } from "@/lib/hosted-oauth-required";
+import { slugify } from "@/lib/shared-server-session";
+import { SandboxHostStyleProvider } from "@/contexts/sandbox-host-style-context";
+import { getSandboxShellStyle } from "@/lib/sandbox-host-style";
+
+interface SandboxChatPageProps {
+  pathToken?: string | null;
+  onExitSandboxChat?: () => void;
+}
+
+interface SandboxRouteError {
+  status: number;
+  code?: string;
+  message: string;
+  rawMessage: string;
+}
+
+type SandboxErrorKind =
+  | "access_denied"
+  | "guest_blocked"
+  | "invalid_link"
+  | "unexpected";
+
+interface SandboxDisplayError {
+  kind: SandboxErrorKind;
+  title: string;
+  message: string;
+}
+
+const INVALID_SANDBOX_LINK_MESSAGE =
+  "This sandbox link is invalid or expired. Ask the owner to share a new link if you still need access.";
+const UNEXPECTED_SANDBOX_ERROR_MESSAGE =
+  "We couldn't open this sandbox right now. Please try again or open MCPJam.";
+
+async function getHostedBearerHeader(
+  getAccessToken: () => Promise<string | undefined | null>,
+): Promise<string | null> {
+  try {
+    const workOsToken = await getAccessToken();
+    if (workOsToken) {
+      return `Bearer ${workOsToken}`;
+    }
+  } catch {
+    // Fall through to guest auth.
+  }
+
+  const guestToken = await getGuestBearerToken();
+  return guestToken ? `Bearer ${guestToken}` : null;
+}
+
+function sanitizeSandboxRouteErrorMessage(message: string): string {
+  const normalized = message.replace(/\s+/g, " ").trim();
+  if (!normalized) {
+    return "";
+  }
+
+  const withoutWrapper = normalized.replace(/^Uncaught Error:\s*/i, "");
+  return withoutWrapper
+    .replace(/\s+at\s+(?:async\s+)?[A-Za-z0-9_$./<>-]+(?:\s+\(|$).*/s, "")
+    .trim();
+}
+
+function createSandboxRouteError(
+  status: number,
+  message: string,
+  code?: string,
+): SandboxRouteError {
+  const fallbackMessage = `Request failed with status ${status}`;
+  const rawMessage = message.trim() || fallbackMessage;
+  const sanitizedMessage = sanitizeSandboxRouteErrorMessage(rawMessage);
+
+  return {
+    status,
+    code,
+    rawMessage,
+    message: sanitizedMessage || fallbackMessage,
+  };
+}
+
+async function readRouteError(response: Response): Promise<SandboxRouteError> {
+  const bodyText = await response.text();
+  const trimmedBody = bodyText.trim();
+  let code: string | undefined;
+  let message = trimmedBody;
+
+  try {
+    const body = (trimmedBody ? JSON.parse(trimmedBody) : null) as {
+      code?: string;
+      message?: string;
+      error?: string;
+    } | null;
+
+    code = typeof body?.code === "string" ? body.code : undefined;
+    message =
+      body?.message ||
+      body?.error ||
+      trimmedBody ||
+      `Request failed with status ${response.status}`;
+  } catch {
+    message = trimmedBody || `Request failed with status ${response.status}`;
+  }
+
+  return createSandboxRouteError(response.status, message, code);
+}
+
+function isSandboxRouteError(error: unknown): error is SandboxRouteError {
+  return (
+    !!error &&
+    typeof error === "object" &&
+    "status" in error &&
+    typeof error.status === "number" &&
+    "message" in error &&
+    typeof error.message === "string" &&
+    "rawMessage" in error &&
+    typeof error.rawMessage === "string"
+  );
+}
+
+function getSandboxDisplayError(
+  error: SandboxRouteError | null,
+): SandboxDisplayError {
+  if (!error) {
+    return {
+      kind: "invalid_link",
+      title: "Sandbox Link Unavailable",
+      message: INVALID_SANDBOX_LINK_MESSAGE,
+    };
+  }
+
+  const normalizedMessage = error.message.toLowerCase();
+  const requiresSignIn = normalizedMessage.includes(
+    "sign in to access this sandbox",
+  );
+  const isAccessDenied = normalizedMessage.includes("don't have access");
+  const isGuestBlocked =
+    normalizedMessage.includes("guests cannot access") ||
+    normalizedMessage.includes("guest access");
+  const isInvalidLink =
+    error.status === 404 ||
+    error.code === "NOT_FOUND" ||
+    normalizedMessage.includes("invalid or has expired") ||
+    normalizedMessage.includes("invalid or expired");
+
+  if (requiresSignIn || isAccessDenied) {
+    return {
+      kind: "access_denied",
+      title: "Access Denied",
+      message: error.message,
+    };
+  }
+
+  if (isGuestBlocked) {
+    return {
+      kind: "guest_blocked",
+      title: "Access Denied",
+      message: error.message,
+    };
+  }
+
+  if (isInvalidLink) {
+    return {
+      kind: "invalid_link",
+      title: "Sandbox Link Unavailable",
+      message: INVALID_SANDBOX_LINK_MESSAGE,
+    };
+  }
+
+  return {
+    kind: "unexpected",
+    title: "Sandbox Link Unavailable",
+    message: UNEXPECTED_SANDBOX_ERROR_MESSAGE,
+  };
+}
+
+function getSandboxOAuthRowCopy(status: string): {
+  description: string;
+  buttonLabel: string | null;
+} {
+  switch (status) {
+    case "launching":
+      return {
+        description: "Opening consent screen…",
+        buttonLabel: null,
+      };
+    case "resuming":
+      return {
+        description: "Finishing authorization…",
+        buttonLabel: null,
+      };
+    case "verifying":
+      return {
+        description: "Verifying access…",
+        buttonLabel: null,
+      };
+    case "error":
+      return {
+        description: "Authorization could not be completed. Try again.",
+        buttonLabel: "Authorize again",
+      };
+    case "needs_auth":
+    default:
+      return {
+        description: "You'll return here automatically after consent.",
+        buttonLabel: "Authorize",
+      };
+  }
+}
+
+export function SandboxChatPage({
+  pathToken,
+  onExitSandboxChat,
+}: SandboxChatPageProps) {
+  const { getAccessToken, signIn } = useAuth();
+  const { isAuthenticated, isLoading: isAuthLoading } = useConvexAuth();
+  const themeMode = usePreferencesStore((s) => s.themeMode);
+
+  const [session, setSession] = useState<SandboxSession | null>(() =>
+    readSandboxSession(),
+  );
+  const [isResolving, setIsResolving] = useState(!!pathToken);
+  const [routeError, setRouteError] = useState<SandboxRouteError | null>(null);
+
+  const oauthServers = useMemo(() => session?.payload.servers ?? [], [session]);
+  const {
+    oauthStateByServerId,
+    pendingOAuthServers,
+    authorizeServer,
+    markOAuthRequired,
+  } = useHostedOAuthGate({
+    surface: "sandbox",
+    pendingKey: SANDBOX_OAUTH_PENDING_KEY,
+    servers: oauthServers,
+  });
+
+  const sandboxServerConfigs = useMemo(() => {
+    if (!session) return {};
+
+    return Object.fromEntries(
+      session.payload.servers.map((server) => [
+        server.serverName,
+        {
+          name: server.serverName,
+          config: {
+            url: "https://sandbox-chat.invalid",
+          } as any,
+          lastConnectionTime: new Date(),
+          connectionStatus: "connected",
+          retryCount: 0,
+          enabled: true,
+        } satisfies ServerWithName,
+      ]),
+    );
+  }, [session]);
+
+  const hostedServerIdsByName = useMemo(() => {
+    if (!session) return {};
+
+    return Object.fromEntries(
+      session.payload.servers.flatMap((server) => [
+        [server.serverName, server.serverId],
+        [server.serverId, server.serverId],
+      ]),
+    );
+  }, [session]);
+
+  const oauthTokensForChat = useMemo(() => {
+    if (!session) return undefined;
+
+    const entries = session.payload.servers
+      .map((server) => {
+        const token = getStoredTokens(server.serverName)?.access_token;
+        return token ? ([server.serverId, token] as const) : null;
+      })
+      .filter((entry): entry is readonly [string, string] =>
+        Array.isArray(entry),
+      );
+
+    return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+  }, [oauthStateByServerId, session]);
+
+  useHostedApiContext({
+    workspaceId: session?.payload.workspaceId ?? null,
+    serverIdsByName: hostedServerIdsByName,
+    getAccessToken,
+    oauthTokensByServerId: oauthTokensForChat,
+    sandboxToken: session?.token,
+    isAuthenticated,
+  });
+
+  useEffect(() => {
+    if (isAuthLoading) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const resolve = async () => {
+      const tokenFromPath = pathToken?.trim() || null;
+
+      if (tokenFromPath) {
+        setIsResolving(true);
+        setRouteError(null);
+        try {
+          const authorization = await getHostedBearerHeader(getAccessToken);
+          if (!authorization) {
+            throw new Error(
+              "Unable to create a hosted session for this sandbox.",
+            );
+          }
+
+          const response = await fetch("/api/web/sandboxes/bootstrap", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: authorization,
+            },
+            body: JSON.stringify({ token: tokenFromPath }),
+          });
+
+          if (!response.ok) {
+            throw await readRouteError(response);
+          }
+
+          const payload = (await response.json()) as SandboxSession["payload"];
+          if (cancelled) return;
+
+          const nextSession: SandboxSession = {
+            token: tokenFromPath,
+            payload,
+          };
+          writeSandboxSession(nextSession);
+          setSession(nextSession);
+          setRouteError(null);
+
+          const nextSlug = slugify(nextSession.payload.name);
+          if (window.location.hash !== `#${nextSlug}`) {
+            window.history.replaceState({}, "", `/#${nextSlug}`);
+          }
+        } catch (error) {
+          if (cancelled) return;
+          setSession(null);
+          clearSandboxSession();
+
+          const nextError = isSandboxRouteError(error)
+            ? error
+            : createSandboxRouteError(
+                500,
+                error instanceof Error
+                  ? error.message
+                  : "Unable to open this sandbox.",
+              );
+          const displayError = getSandboxDisplayError(nextError);
+
+          if (displayError.kind === "unexpected") {
+            console.error("[SandboxChatPage] Failed to bootstrap sandbox", {
+              status: nextError.status,
+              code: nextError.code,
+              message: nextError.message,
+              rawMessage: nextError.rawMessage,
+            });
+          }
+
+          setRouteError(nextError);
+        } finally {
+          if (!cancelled) {
+            setIsResolving(false);
+          }
+        }
+        return;
+      }
+
+      const recovered = readSandboxSession();
+      if (recovered) {
+        setSession(recovered);
+        setRouteError(null);
+        const recoveredSlug = slugify(recovered.payload.name);
+        if (window.location.hash !== `#${recoveredSlug}`) {
+          window.history.replaceState({}, "", `/#${recoveredSlug}`);
+        }
+        return;
+      }
+
+      setSession(null);
+      setRouteError(
+        createSandboxRouteError(404, "Invalid or expired sandbox link"),
+      );
+    };
+
+    void resolve();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [getAccessToken, isAuthLoading, pathToken]);
+
+  useEffect(() => {
+    if (!session) return;
+
+    const expectedHash = slugify(session.payload.name);
+    const enforceHash = () => {
+      if (window.location.hash !== `#${expectedHash}`) {
+        window.location.hash = expectedHash;
+      }
+    };
+
+    enforceHash();
+    window.addEventListener("hashchange", enforceHash);
+    return () => {
+      window.removeEventListener("hashchange", enforceHash);
+    };
+  }, [session]);
+
+  const handleCopyLink = useCallback(async () => {
+    const token = session?.token?.trim();
+    if (!session || !token) {
+      toast.error("Sandbox link unavailable");
+      return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+      toast.error("Copy is not available in this browser");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(
+        buildSandboxLink(token, session.payload.name),
+      );
+      toast.success("Sandbox link copied");
+    } catch {
+      toast.error("Failed to copy sandbox link");
+    }
+  }, [session]);
+
+  const handleOpenMcpJam = useCallback(() => {
+    clearSandboxSession();
+    window.history.replaceState({}, "", "/#sandboxes");
+    onExitSandboxChat?.();
+  }, [onExitSandboxChat]);
+
+  const handleSignIn = useCallback(() => {
+    writeSandboxSignInReturnPath(window.location.pathname);
+    signIn();
+  }, [signIn]);
+
+  const handleOAuthRequired = useCallback(
+    (details?: HostedOAuthRequiredDetails) => {
+      markOAuthRequired(details);
+    },
+    [markOAuthRequired],
+  );
+
+  const hostStyle = session?.payload.hostStyle ?? "claude";
+  const shellStyle = getSandboxShellStyle(hostStyle, themeMode);
+  const displayError = getSandboxDisplayError(routeError);
+  const isFinishingOAuth =
+    pendingOAuthServers.length > 0 &&
+    pendingOAuthServers.every(({ state }) => isHostedOAuthBusy(state.status));
+
+  const renderContent = () => {
+    if (isResolving) {
+      return (
+        <div className="flex flex-1 items-center justify-center">
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </div>
+      );
+    }
+
+    if (!session) {
+      const isAccessDenied = displayError.kind === "access_denied";
+      const guestBlocked = displayError.kind === "guest_blocked";
+
+      return (
+        <div className="flex flex-1 items-center justify-center px-4">
+          <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-3 inline-flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+              {isAccessDenied || guestBlocked ? (
+                <ShieldX className="h-5 w-5 text-muted-foreground" />
+              ) : (
+                <Link2Off className="h-5 w-5 text-muted-foreground" />
+              )}
+            </div>
+            <h2 className="text-base font-semibold text-foreground">
+              {displayError.title}
+            </h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {displayError.message}
+            </p>
+            <div className="mt-4 flex items-center justify-center gap-2">
+              {!isAuthenticated && (isAccessDenied || guestBlocked) ? (
+                <Button onClick={handleSignIn}>Sign in</Button>
+              ) : null}
+              <Button variant="outline" onClick={handleOpenMcpJam}>
+                Open in App
+              </Button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    if (pendingOAuthServers.length > 0) {
+      return (
+        <div className="flex flex-1 items-center justify-center px-4">
+          <div className="w-full max-w-xl rounded-lg border border-border bg-card p-6">
+            <h2 className="text-center text-base font-semibold text-foreground">
+              {isFinishingOAuth
+                ? "Finishing authorization"
+                : "Authorization Required"}
+            </h2>
+            <p className="mt-2 text-center text-sm text-muted-foreground">
+              {isFinishingOAuth
+                ? "Finishing authorization for the required sandbox servers."
+                : "Authorize the required sandbox servers to continue."}
+            </p>
+            <div className="mt-5 space-y-3">
+              {pendingOAuthServers.map(({ server, state }) => {
+                const rowCopy = getSandboxOAuthRowCopy(state.status);
+                return (
+                  <div
+                    key={server.serverId}
+                    className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-medium">
+                        {server.serverName}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {state.status === "error" && state.errorMessage
+                          ? state.errorMessage
+                          : rowCopy.description}
+                      </p>
+                    </div>
+                    {rowCopy.buttonLabel ? (
+                      <Button
+                        size="sm"
+                        onClick={() => void authorizeServer(server)}
+                      >
+                        {rowCopy.buttonLabel}
+                      </Button>
+                    ) : (
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex min-h-0 flex-1">
+        <ChatTabV2
+          connectedOrConnectingServerConfigs={sandboxServerConfigs}
+          selectedServerNames={session.payload.servers.map(
+            (server) => server.serverName,
+          )}
+          minimalMode
+          reasoningDisplayMode="hidden"
+          hostedWorkspaceIdOverride={session.payload.workspaceId}
+          hostedSelectedServerIdsOverride={session.payload.servers.map(
+            (server) => server.serverId,
+          )}
+          hostedOAuthTokensOverride={oauthTokensForChat}
+          hostedSandboxToken={session.token}
+          initialModelId={session.payload.modelId}
+          initialSystemPrompt={session.payload.systemPrompt}
+          initialTemperature={session.payload.temperature}
+          initialRequireToolApproval={session.payload.requireToolApproval}
+          onOAuthRequired={handleOAuthRequired}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <SandboxHostStyleProvider value={hostStyle}>
+      <div
+        className="sandbox-host-shell flex h-svh min-h-0 flex-col"
+        data-host-style={hostStyle}
+        style={shellStyle}
+      >
+        <header className="border-b border-border/50 bg-background/95 backdrop-blur">
+          <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-2.5">
+            <h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+              {session?.payload.name || "\u00A0"}
+            </h1>
+            <button
+              onClick={handleOpenMcpJam}
+              className="cursor-pointer flex-shrink-0 border-none bg-transparent p-0"
+            >
+              <img
+                src={
+                  themeMode === "dark"
+                    ? "/mcp_jam_dark.png"
+                    : "/mcp_jam_light.png"
+                }
+                alt="MCPJam"
+                className="h-4 w-auto object-contain"
+              />
+            </button>
+            <div className="flex flex-1 items-center justify-end gap-1.5">
+              {session ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-muted-foreground"
+                  onClick={handleCopyLink}
+                >
+                  Copy link
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </header>
+
+        {renderContent()}
+      </div>
+    </SandboxHostStyleProvider>
+  );
+}
+
+export function getSandboxPathTokenFromLocation(): string | null {
+  return extractSandboxTokenFromPath(window.location.pathname);
+}
diff --git a/mcpjam-inspector/client/src/components/hosted/SharedServerChatPage.tsx b/mcpjam-inspector/client/src/components/hosted/SharedServerChatPage.tsx
index 53f8c1934..c6e1634d1 100644
--- a/mcpjam-inspector/client/src/components/hosted/SharedServerChatPage.tsx
+++ b/mcpjam-inspector/client/src/components/hosted/SharedServerChatPage.tsx
@@ -2,15 +2,19 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMutation, useConvexAuth } from "convex/react";
 import { ConvexError } from "convex/values";
 import { useAuth } from "@workos-inc/authkit-react";
-import { Loader2, Link2Off, Lock, ShieldX } from "lucide-react";
+import { Loader2, Link2Off, ShieldX } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { ChatTabV2 } from "@/components/ChatTabV2";
 import type { ServerWithName } from "@/hooks/use-app-state";
 import { useHostedApiContext } from "@/hooks/hosted/use-hosted-api-context";
+import { useHostedOAuthGate } from "@/hooks/hosted/use-hosted-oauth-gate";
+import { checkHostedServerOAuthRequirement } from "@/lib/apis/web/servers-api";
+import type { HostedOAuthRequiredDetails } from "@/lib/hosted-oauth-required";
 import {
   clearSharedServerSession,
   extractSharedTokenFromPath,
+  getShareableAppOrigin,
   readSharedServerSession,
   slugify,
   SHARED_OAUTH_PENDING_KEY,
@@ -18,7 +22,7 @@ import {
   writeSharedServerSession,
   writePendingServerAdd,
 } from "@/lib/shared-server-session";
-import { getStoredTokens, initiateOAuth } from "@/lib/oauth/mcp-oauth";
+import { getStoredTokens } from "@/lib/oauth/mcp-oauth";
 
 function extractShareErrorMessage(error: unknown): string {
   if (error instanceof ConvexError) {
@@ -27,7 +31,6 @@ function extractShareErrorMessage(error: unknown): string {
       : "This shared link is invalid or expired.";
   }
   if (error instanceof Error) {
-    // Legacy fallback: Convex wraps errors as "[CONVEX ...] Uncaught Error: <msg> ..."
     const uncaughtMatch = error.message.match(
       /Uncaught Error:\s*(.*?)\s*(?:\bat handler\b|$)/s,
     );
@@ -41,9 +44,49 @@ interface SharedServerChatPageProps {
   onExitSharedChat?: () => void;
 }
 
-const OAUTH_PREFLIGHT_TOKEN_RETRY_MS = 250;
-const OAUTH_PREFLIGHT_REQUEST_RETRY_MS = 1000;
-const OAUTH_PREFLIGHT_VALIDATE_TOKEN_ATTEMPTS = 8;
+function getSharedOAuthCopy(
+  status: string,
+  serverName: string,
+): {
+  title: string;
+  description: string;
+  buttonLabel: string | null;
+} {
+  switch (status) {
+    case "launching":
+      return {
+        title: "Finishing authorization",
+        description: "Opening the consent screen…",
+        buttonLabel: null,
+      };
+    case "resuming":
+      return {
+        title: "Finishing authorization",
+        description: "Waiting for the OAuth callback to finish…",
+        buttonLabel: null,
+      };
+    case "verifying":
+      return {
+        title: "Finishing authorization",
+        description: "Verifying access…",
+        buttonLabel: null,
+      };
+    case "error":
+      return {
+        title: "Authorization Required",
+        description:
+          "Authorization could not be completed. Try again to continue.",
+        buttonLabel: "Authorize again",
+      };
+    case "needs_auth":
+    default:
+      return {
+        title: "Authorization Required",
+        description: `${serverName} requires authorization to continue. You'll return here automatically after consent.`,
+        buttonLabel: "Authorize",
+      };
+  }
+}
 
 export function SharedServerChatPage({
   pathToken,
@@ -60,20 +103,11 @@ export function SharedServerChatPage({
   );
   const [isResolving, setIsResolving] = useState(!!pathToken);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [needsOAuth, setNeedsOAuth] = useState(false);
-  const [discoveredServerUrl, setDiscoveredServerUrl] = useState<string | null>(
-    null,
-  );
-  const [isCheckingOAuth, setIsCheckingOAuth] = useState(() => {
-    if (!session) return false;
-    // Always start as true for OAuth servers — even if tokens exist locally,
-    // we need to validate them before rendering the chat UI.
-    if (session.payload.useOAuth) return true;
-    return true;
-  });
-  const [oauthPreflightError, setOauthPreflightError] = useState<string | null>(
-    null,
+  const [isCheckingOAuthRequirement, setIsCheckingOAuthRequirement] = useState(
+    () => !!session && !session.payload.useOAuth,
   );
+  const [pendingRuntimeOAuthDetails, setPendingRuntimeOAuthDetails] =
+    useState<HostedOAuthRequiredDetails | null>(null);
 
   const selectedServerName = session?.payload.serverName;
   const hostedServerIdsByName = useMemo(() => {
@@ -85,16 +119,38 @@ export function SharedServerChatPage({
     };
   }, [session]);
 
-  // Build OAuth tokens map early so both useHostedApiContext and ChatTabV2 can use it.
-  // The global hosted context needs it for widget-content and other direct API calls.
+  const oauthServers = useMemo(() => {
+    if (!session) return [];
+    return [
+      {
+        serverId: session.payload.serverId,
+        serverName: session.payload.serverName,
+        useOAuth: session.payload.useOAuth,
+        serverUrl: session.payload.serverUrl,
+        clientId: session.payload.clientId,
+        oauthScopes: session.payload.oauthScopes,
+      },
+    ];
+  }, [session]);
+
+  const {
+    oauthStateByServerId,
+    pendingOAuthServers,
+    authorizeServer,
+    markOAuthRequired,
+  } = useHostedOAuthGate({
+    surface: "shared",
+    pendingKey: SHARED_OAUTH_PENDING_KEY,
+    servers: oauthServers,
+  });
+
   const oauthTokensForChat = useMemo(() => {
     if (!session) return undefined;
     const { serverName, serverId } = session.payload;
     const tokens = getStoredTokens(serverName);
     if (!tokens?.access_token) return undefined;
     return { [serverId]: tokens.access_token };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session, needsOAuth]);
+  }, [session, oauthStateByServerId]);
 
   useHostedApiContext({
     workspaceId: session?.payload.workspaceId ?? null,
@@ -204,337 +260,116 @@ export function SharedServerChatPage({
     };
   }, [session]);
 
-  // Preflight OAuth check: validate stored tokens before rendering the chat UI.
   useEffect(() => {
     if (!session || isAuthLoading || !isAuthenticated) return;
 
+    if (session.payload.useOAuth) {
+      setIsCheckingOAuthRequirement(false);
+      return;
+    }
+
     let cancelled = false;
+    setIsCheckingOAuthRequirement(true);
 
-    const checkOAuth = async () => {
-      setIsCheckingOAuth(true);
-      setOauthPreflightError(null);
+    const discoverOAuthRequirement = async () => {
       try {
-        if (session.payload.useOAuth) {
-          const tokens = getStoredTokens(session.payload.serverName);
-
-          if (!tokens?.access_token) {
-            setNeedsOAuth(true);
-            return;
-          }
-
-          // Tokens exist locally — validate them before rendering the chat UI.
-          // Keep isCheckingOAuth=true (the spinner) until validation resolves
-          // so ChatTabV2 doesn't mount and fire requests with an expired token.
-          {
-            let bearerToken: string | null | undefined = null;
-            for (
-              let attempt = 1;
-              attempt <= OAUTH_PREFLIGHT_VALIDATE_TOKEN_ATTEMPTS;
-              attempt++
-            ) {
-              try {
-                bearerToken = await getAccessToken();
-              } catch {}
-
-              if (cancelled) return;
-              if (bearerToken) break;
-              if (attempt < OAUTH_PREFLIGHT_VALIDATE_TOKEN_ATTEMPTS) {
-                await new Promise((resolve) =>
-                  window.setTimeout(resolve, OAUTH_PREFLIGHT_TOKEN_RETRY_MS),
-                );
-              }
-            }
-
-            if (!bearerToken) {
-              // Can't validate without a bearer token — trust local tokens.
-              setNeedsOAuth(false);
-              return;
-            }
-
-            if (cancelled) return;
-
-            // Re-read tokens in case they were cleared while waiting for bearer.
-            const freshTokens = getStoredTokens(session.payload.serverName);
-            if (!freshTokens?.access_token) {
-              if (!cancelled) setNeedsOAuth(true);
-              return;
-            }
-
-            try {
-              const validateRes = await fetch("/api/web/servers/validate", {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                  Authorization: `Bearer ${bearerToken}`,
-                },
-                body: JSON.stringify({
-                  workspaceId: session.payload.workspaceId,
-                  serverId: session.payload.serverId,
-                  oauthAccessToken: freshTokens.access_token,
-                  accessScope: "chat_v2",
-                  shareToken: session.token,
-                }),
-              });
-
-              if (cancelled) return;
-
-              if (validateRes.ok) {
-                // Token is valid — allow the chat UI to render.
-                setNeedsOAuth(false);
-              } else {
-                let body: unknown = null;
-                try {
-                  const textBody = await validateRes.text();
-                  if (textBody) {
-                    try {
-                      body = JSON.parse(textBody);
-                    } catch {
-                      body = textBody;
-                    }
-                  }
-                } catch {
-                  body = "Unable to read validation error response body";
-                }
-
-                console.error(
-                  "[SharedServerChatPage] Stored OAuth token validation failed",
-                  {
-                    status: validateRes.status,
-                    statusText: validateRes.statusText,
-                    body,
-                  },
-                );
-                if (!cancelled) {
-                  // Clear the expired/invalid tokens so the auto-close
-                  // polling effect (which watches localStorage) doesn't
-                  // immediately find the stale tokens and flip needsOAuth
-                  // back to false.
-                  localStorage.removeItem(
-                    `mcp-tokens-${session.payload.serverName}`,
-                  );
-                  setNeedsOAuth(true);
-                }
-              }
-            } catch {
-              // Network/unexpected error — trust local tokens, don't show modal.
-              if (!cancelled) {
-                setNeedsOAuth(false);
-              }
-            }
-          }
-
+        const result = await checkHostedServerOAuthRequirement(
+          session.payload.serverId,
+        );
+        if (cancelled || !result.useOAuth) {
           return;
         }
 
-        let warnedMissingToken = false;
-
-        while (!cancelled) {
-          let token: string | null | undefined = null;
-          try {
-            token = await getAccessToken();
-          } catch (error) {
-            if (cancelled) return;
-            const message =
-              "OAuth preflight could not retrieve a WorkOS bearer token yet. Retrying...";
-            if (!warnedMissingToken) {
-              console.error("[SharedServerChatPage] " + message, error);
-              warnedMissingToken = true;
-            }
-            setOauthPreflightError(message);
-            await new Promise((resolve) =>
-              window.setTimeout(resolve, OAUTH_PREFLIGHT_TOKEN_RETRY_MS),
-            );
-            continue;
-          }
-          if (cancelled) return;
-
-          if (!token) {
-            const message =
-              "OAuth preflight waiting for WorkOS bearer token. Retrying...";
-            if (!warnedMissingToken) {
-              console.warn("[SharedServerChatPage] " + message, {
-                workspaceId: session.payload.workspaceId,
-                serverId: session.payload.serverId,
-              });
-              warnedMissingToken = true;
-            }
-            setOauthPreflightError(message);
-            await new Promise((resolve) =>
-              window.setTimeout(resolve, OAUTH_PREFLIGHT_TOKEN_RETRY_MS),
-            );
-            continue;
-          }
-
-          const res = await fetch("/api/web/servers/check-oauth", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`,
-            },
-            body: JSON.stringify({
-              workspaceId: session.payload.workspaceId,
-              serverId: session.payload.serverId,
-              accessScope: "chat_v2",
-              shareToken: session.token,
-            }),
-          });
-
-          if (cancelled) return;
-
-          if (!res.ok) {
-            let body: unknown = null;
-            try {
-              const textBody = await res.text();
-              if (textBody) {
-                try {
-                  body = JSON.parse(textBody);
-                } catch {
-                  body = textBody;
-                }
-              }
-            } catch {
-              body = "Unable to read error response body";
-            }
-            if (cancelled) return;
-
-            const message = `OAuth preflight failed: ${res.status} ${res.statusText}. Retrying...`;
-            console.error("[SharedServerChatPage] " + message, {
+        const nextSession: SharedServerSession = {
+          ...session,
+          payload: {
+            ...session.payload,
+            useOAuth: true,
+            serverUrl: result.serverUrl ?? session.payload.serverUrl,
+          },
+        };
+        writeSharedServerSession(nextSession);
+        setSession(nextSession);
+      } catch (error) {
+        if (!cancelled) {
+          console.error(
+            "[SharedServerChatPage] OAuth requirement check failed",
+            {
               workspaceId: session.payload.workspaceId,
               serverId: session.payload.serverId,
-              status: res.status,
-              statusText: res.statusText,
-              body,
-            });
-            setOauthPreflightError(message);
-            await new Promise((resolve) =>
-              window.setTimeout(resolve, OAUTH_PREFLIGHT_REQUEST_RETRY_MS),
-            );
-            continue;
-          }
-
-          const data = (await res.json()) as {
-            useOAuth?: boolean;
-            serverUrl?: string | null;
-          };
-          if (cancelled) return;
-
-          setOauthPreflightError(null);
-
-          if (data.useOAuth) {
-            if (data.serverUrl) {
-              setDiscoveredServerUrl(data.serverUrl);
-            }
-
-            const nextSession: SharedServerSession = {
-              ...session,
-              payload: {
-                ...session.payload,
-                useOAuth: true,
-                serverUrl: data.serverUrl ?? session.payload.serverUrl,
-              },
-            };
-            writeSharedServerSession(nextSession);
-            setSession(nextSession);
-
-            const tokens = getStoredTokens(session.payload.serverName);
-            if (!tokens?.access_token) {
-              setNeedsOAuth(true);
-            }
-          }
-
-          return;
+              error,
+            },
+          );
         }
-      } catch (error) {
-        if (cancelled) return;
-        const message = "OAuth preflight request failed unexpectedly.";
-        console.error("[SharedServerChatPage] " + message, error);
-        setOauthPreflightError(message);
       } finally {
         if (!cancelled) {
-          setIsCheckingOAuth(false);
+          setIsCheckingOAuthRequirement(false);
         }
       }
     };
 
-    void checkOAuth();
+    void discoverOAuthRequirement();
 
     return () => {
       cancelled = true;
     };
-  }, [session, isAuthLoading, isAuthenticated, getAccessToken]);
+  }, [isAuthLoading, isAuthenticated, session]);
 
-  const handleOAuthRequired = useCallback((serverUrl?: string) => {
-    if (serverUrl) {
-      setDiscoveredServerUrl(serverUrl);
+  useEffect(() => {
+    if (!pendingRuntimeOAuthDetails || !session?.payload.useOAuth) {
+      return;
     }
-    setNeedsOAuth(true);
-  }, []);
 
-  const handleAuthorize = async () => {
-    if (!session) return;
-    const { serverName, clientId, oauthScopes } = session.payload;
-    const serverUrl = session.payload.serverUrl || discoveredServerUrl;
-    if (!serverUrl) return;
-
-    localStorage.setItem(SHARED_OAUTH_PENDING_KEY, "true");
-    localStorage.setItem("mcp-oauth-return-hash", "#" + slugify(serverName));
-
-    const result = await initiateOAuth({
-      serverName,
-      serverUrl,
-      clientId: clientId ?? undefined,
-      scopes: oauthScopes ?? undefined,
+    markOAuthRequired({
+      serverId: pendingRuntimeOAuthDetails.serverId ?? session.payload.serverId,
+      serverName:
+        pendingRuntimeOAuthDetails.serverName ?? session.payload.serverName,
+      serverUrl:
+        pendingRuntimeOAuthDetails.serverUrl ?? session.payload.serverUrl,
     });
+    setPendingRuntimeOAuthDetails(null);
+  }, [markOAuthRequired, pendingRuntimeOAuthDetails, session]);
 
-    // If initiateOAuth returns without redirecting (already authorized)
-    if (result.success) {
-      localStorage.removeItem(SHARED_OAUTH_PENDING_KEY);
-      setOauthPreflightError(null);
-      const initialTokens = getStoredTokens(serverName);
-      if (initialTokens?.access_token) {
-        setNeedsOAuth(false);
+  const handleOAuthRequired = useCallback(
+    (details?: HostedOAuthRequiredDetails) => {
+      if (!session) {
         return;
       }
 
-      // Token writes can lag briefly in some callback paths. Poll briefly.
-      for (let i = 0; i < 15; i++) {
-        await new Promise((resolve) => window.setTimeout(resolve, 100));
-        const polledTokens = getStoredTokens(serverName);
-        if (polledTokens?.access_token) {
-          setNeedsOAuth(false);
-          return;
-        }
+      const nextDetails: HostedOAuthRequiredDetails = {
+        serverId: details?.serverId ?? session.payload.serverId,
+        serverName: details?.serverName ?? session.payload.serverName,
+        serverUrl: details?.serverUrl ?? session.payload.serverUrl,
+      };
+
+      setSession((previous) => {
+        if (!previous) return previous;
+        const nextSession: SharedServerSession = {
+          ...previous,
+          payload: {
+            ...previous.payload,
+            useOAuth: true,
+            serverUrl: nextDetails.serverUrl ?? previous.payload.serverUrl,
+          },
+        };
+        writeSharedServerSession(nextSession);
+        return nextSession;
+      });
+
+      if (session.payload.useOAuth) {
+        markOAuthRequired(nextDetails);
+      } else {
+        setPendingRuntimeOAuthDetails(nextDetails);
       }
-    }
-  };
-
-  // If modal is currently open, auto-close it as soon as a token appears.
-  useEffect(() => {
-    if (!needsOAuth || !session?.payload.useOAuth) return;
-
-    const serverName = session.payload.serverName;
-    const interval = window.setInterval(() => {
-      const tokens = getStoredTokens(serverName);
-      if (tokens?.access_token) {
-        setOauthPreflightError(null);
-        setNeedsOAuth(false);
-      }
-    }, 250);
-
-    const timeout = window.setTimeout(() => {
-      window.clearInterval(interval);
-    }, 15_000);
-
-    return () => {
-      window.clearInterval(interval);
-      window.clearTimeout(timeout);
-    };
-  }, [needsOAuth, session]);
+    },
+    [markOAuthRequired, session],
+  );
 
   const handleOpenMcpJam = () => {
     if (session) {
       const effectiveServerUrl =
-        session.payload.serverUrl || discoveredServerUrl;
+        session.payload.serverUrl ??
+        oauthStateByServerId[session.payload.serverId]?.serverUrl;
       if (effectiveServerUrl) {
         writePendingServerAdd({
           serverName: session.payload.serverName,
@@ -552,7 +387,7 @@ export function SharedServerChatPage({
 
   const handleCopyLink = async () => {
     const token = session?.token?.trim();
-    if (!token) {
+    if (!session || !token) {
       toast.error("Share link unavailable");
       return;
     }
@@ -562,7 +397,7 @@ export function SharedServerChatPage({
       return;
     }
 
-    const shareUrl = `${window.location.origin}/shared/${slugify(session.payload.serverName)}/${encodeURIComponent(token)}`;
+    const shareUrl = `${getShareableAppOrigin()}/shared/${slugify(session.payload.serverName)}/${encodeURIComponent(token)}`;
     try {
       await navigator.clipboard.writeText(shareUrl);
       toast.success("Share link copied");
@@ -572,9 +407,14 @@ export function SharedServerChatPage({
   };
 
   const displayServerName = session?.payload.serverName || "\u00A0";
+  const activeOAuthServer = pendingOAuthServers[0] ?? null;
+  const activeOAuthState = activeOAuthServer?.state ?? null;
+  const activeOAuthCopy = activeOAuthState
+    ? getSharedOAuthCopy(activeOAuthState.status, displayServerName)
+    : null;
 
   const renderContent = () => {
-    if (isResolving || isCheckingOAuth) {
+    if (isResolving || isCheckingOAuthRequirement) {
       return (
         <div className="flex flex-1 items-center justify-center">
           <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -608,49 +448,45 @@ export function SharedServerChatPage({
       );
     }
 
-    if (needsOAuth) {
+    if (activeOAuthServer && activeOAuthState && activeOAuthCopy) {
       return (
         <div className="flex flex-1 items-center justify-center px-4">
           <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 text-center">
-            <div className="mx-auto mb-3 inline-flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-              <Lock className="h-5 w-5 text-muted-foreground" />
-            </div>
             <h2 className="text-base font-semibold text-foreground">
-              Authorization Required
+              {activeOAuthCopy.title}
             </h2>
             <p className="mt-2 text-sm text-muted-foreground">
-              {selectedServerName} requires authorization to continue.
+              {activeOAuthState.status === "error" &&
+              activeOAuthState.errorMessage
+                ? activeOAuthState.errorMessage
+                : activeOAuthCopy.description}
             </p>
-            <Button className="mt-4" onClick={handleAuthorize}>
-              Authorize
-            </Button>
+            {activeOAuthCopy.buttonLabel ? (
+              <Button
+                className="mt-4"
+                onClick={() => void authorizeServer(activeOAuthServer.server)}
+              >
+                {activeOAuthCopy.buttonLabel}
+              </Button>
+            ) : null}
           </div>
         </div>
       );
     }
 
     return (
-      <>
-        {oauthPreflightError ? (
-          <div className="border-b border-amber-200 bg-amber-50 px-4 py-2 text-xs text-amber-800">
-            OAuth preflight hit an issue. Runtime OAuth detection remains
-            enabled.
-          </div>
-        ) : null}
-
-        <div className="flex min-h-0 flex-1">
-          <ChatTabV2
-            connectedOrConnectingServerConfigs={sharedServerConfigs}
-            selectedServerNames={[selectedServerName!]}
-            minimalMode
-            hostedWorkspaceIdOverride={session!.payload.workspaceId}
-            hostedSelectedServerIdsOverride={[session!.payload.serverId]}
-            hostedOAuthTokensOverride={oauthTokensForChat}
-            hostedShareToken={session!.token}
-            onOAuthRequired={handleOAuthRequired}
-          />
-        </div>
-      </>
+      <div className="flex min-h-0 flex-1">
+        <ChatTabV2
+          connectedOrConnectingServerConfigs={sharedServerConfigs}
+          selectedServerNames={[selectedServerName]}
+          minimalMode
+          hostedWorkspaceIdOverride={session.payload.workspaceId}
+          hostedSelectedServerIdsOverride={[session.payload.serverId]}
+          hostedOAuthTokensOverride={oauthTokensForChat}
+          hostedShareToken={session.token}
+          onOAuthRequired={handleOAuthRequired}
+        />
+      </div>
     );
   };
 
@@ -658,26 +494,26 @@ export function SharedServerChatPage({
     <div className="flex h-svh min-h-0 flex-col">
       <header className="border-b border-border/50 bg-background/95 backdrop-blur">
         <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-2.5">
-          <h1 className="truncate text-sm font-semibold text-foreground min-w-0 flex-1">
+          <h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
             {displayServerName}
           </h1>
           <button
             onClick={handleOpenMcpJam}
-            className="cursor-pointer flex-shrink-0 bg-transparent border-none p-0"
+            className="cursor-pointer flex-shrink-0 border-none bg-transparent p-0"
           >
             <img
               src="/mcp_jam_dark.png"
               alt="MCPJam"
-              className="hidden dark:block h-4 w-auto"
+              className="hidden h-4 w-auto dark:block"
             />
             <img
               src="/mcp_jam_light.png"
               alt="MCPJam"
-              className="block dark:hidden h-4 w-auto"
+              className="block h-4 w-auto dark:hidden"
             />
           </button>
-          <div className="flex items-center gap-1.5 flex-1 justify-end">
-            {session && (
+          <div className="flex flex-1 items-center justify-end gap-1.5">
+            {session ? (
               <Button
                 variant="ghost"
                 size="sm"
@@ -686,7 +522,7 @@ export function SharedServerChatPage({
               >
                 Copy link
               </Button>
-            )}
+            ) : null}
           </div>
         </div>
       </header>
diff --git a/mcpjam-inspector/client/src/components/hosted/__tests__/SandboxChatPage.test.tsx b/mcpjam-inspector/client/src/components/hosted/__tests__/SandboxChatPage.test.tsx
new file mode 100644
index 000000000..98cc5c8d3
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/hosted/__tests__/SandboxChatPage.test.tsx
@@ -0,0 +1,554 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SandboxChatPage } from "../SandboxChatPage";
+import {
+  SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY,
+  clearSandboxSession,
+  writeSandboxSession,
+} from "@/lib/sandbox-session";
+import {
+  clearHostedOAuthResumeMarker,
+  writeHostedOAuthResumeMarker,
+} from "@/lib/hosted-oauth-resume";
+
+const {
+  mockConvexAuthState,
+  mockGetAccessToken,
+  mockSignIn,
+  mockGetStoredTokens,
+  mockInitiateOAuth,
+  mockValidateHostedServer,
+  mockChatTabV2,
+} = vi.hoisted(() => ({
+  mockConvexAuthState: {
+    isAuthenticated: true,
+    isLoading: false,
+  },
+  mockGetAccessToken: vi.fn(),
+  mockSignIn: vi.fn(),
+  mockGetStoredTokens: vi.fn(),
+  mockInitiateOAuth: vi.fn(async () => ({ success: false })),
+  mockValidateHostedServer: vi.fn(),
+  mockChatTabV2: vi.fn(),
+}));
+
+vi.mock("convex/react", () => ({
+  useConvexAuth: () => mockConvexAuthState,
+}));
+
+vi.mock("@workos-inc/authkit-react", () => ({
+  useAuth: () => ({
+    getAccessToken: mockGetAccessToken,
+    signIn: mockSignIn,
+  }),
+}));
+
+vi.mock("@/hooks/hosted/use-hosted-api-context", () => ({
+  useHostedApiContext: vi.fn(),
+}));
+
+vi.mock("@/lib/apis/web/servers-api", () => ({
+  validateHostedServer: mockValidateHostedServer,
+}));
+
+vi.mock("@/stores/preferences/preferences-provider", () => ({
+  usePreferencesStore: (selector: (state: { themeMode: "light" }) => unknown) =>
+    selector({ themeMode: "light" }),
+}));
+
+vi.mock("@/components/ChatTabV2", () => ({
+  ChatTabV2: (props: {
+    onOAuthRequired?: (details?: {
+      serverUrl?: string | null;
+      serverId?: string | null;
+      serverName?: string | null;
+    }) => void;
+    reasoningDisplayMode?: string;
+  }) => {
+    mockChatTabV2(props);
+    const { onOAuthRequired } = props;
+    return (
+      <div>
+        <div data-testid="sandbox-chat-tab" />
+        {onOAuthRequired ? (
+          <>
+            <button type="button" onClick={() => onOAuthRequired()}>
+              Trigger OAuth
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                onOAuthRequired({
+                  serverId: "srv_asana",
+                  serverName: "asana",
+                  serverUrl: "https://mcp.asana.com/sse",
+                })
+              }
+            >
+              Trigger targeted OAuth
+            </button>
+          </>
+        ) : null}
+      </div>
+    );
+  },
+}));
+
+vi.mock("@/lib/oauth/mcp-oauth", () => ({
+  getStoredTokens: mockGetStoredTokens,
+  initiateOAuth: mockInitiateOAuth,
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe("SandboxChatPage", () => {
+  function createFetchResponse(
+    body: unknown,
+    overrides: Partial<{
+      ok: boolean;
+      status: number;
+      statusText: string;
+    }> = {},
+  ) {
+    return {
+      ok: overrides.ok ?? true,
+      status: overrides.status ?? 200,
+      statusText: overrides.statusText ?? "OK",
+      json: async () => body,
+      text: async () =>
+        typeof body === "string" ? body : JSON.stringify(body),
+      headers: new Headers(),
+    } as Response;
+  }
+
+  beforeEach(() => {
+    vi.useRealTimers();
+    clearSandboxSession();
+    clearHostedOAuthResumeMarker();
+    localStorage.clear();
+    sessionStorage.clear();
+    window.history.replaceState({}, "", "/");
+    mockConvexAuthState.isAuthenticated = true;
+    mockConvexAuthState.isLoading = false;
+    mockGetAccessToken.mockReset();
+    mockSignIn.mockReset();
+    mockGetStoredTokens.mockReset();
+    mockInitiateOAuth.mockReset();
+    mockValidateHostedServer.mockReset();
+    mockChatTabV2.mockReset();
+
+    mockGetAccessToken.mockResolvedValue("workos-token");
+    mockGetStoredTokens.mockReturnValue(null);
+    mockInitiateOAuth.mockResolvedValue({ success: false });
+    mockValidateHostedServer.mockResolvedValue({
+      success: true,
+      status: "connected",
+      initInfo: null,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("applies sandbox host style data attributes while keeping MCPJam branding", async () => {
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "ChatGPT Sandbox",
+        description: "Hosted sandbox",
+        hostStyle: "chatgpt",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [],
+      },
+    });
+
+    const { container } = render(<SandboxChatPage />);
+
+    expect(await screen.findByTestId("sandbox-chat-tab")).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-host-style="chatgpt"]'),
+    ).toBeInTheDocument();
+    expect(screen.getByAltText("MCPJam")).toBeInTheDocument();
+    expect(mockChatTabV2).toHaveBeenCalledWith(
+      expect.objectContaining({
+        reasoningDisplayMode: "hidden",
+      }),
+    );
+  });
+
+  it("shows curated copy for an invalid or expired sandbox link", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        createFetchResponse(
+          {
+            code: "NOT_FOUND",
+            message:
+              "Uncaught Error: This sandbox link is invalid or has expired. at resolveSandboxBootstrapForUser (../../convex/sandboxes.ts:309:14) at async handler (../../convex/sandboxes.ts:1088:6)",
+          },
+          { ok: false, status: 404, statusText: "Not Found" },
+        ),
+      ),
+    );
+
+    render(<SandboxChatPage pathToken="stale-token" />);
+
+    expect(
+      await screen.findByRole("heading", { name: "Sandbox Link Unavailable" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "This sandbox link is invalid or expired. Ask the owner to share a new link if you still need access.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/Uncaught Error:/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/resolveSandboxBootstrapForUser/),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps the access denied sign-in path intact", async () => {
+    mockConvexAuthState.isAuthenticated = false;
+    window.history.replaceState({}, "", "/sandbox/test/token-denied");
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        createFetchResponse(
+          {
+            code: "FORBIDDEN",
+            message:
+              "You don't have access to Test Sandbox. This sandbox is invite-only - ask the owner to invite you.",
+          },
+          { ok: false, status: 403, statusText: "Forbidden" },
+        ),
+      ),
+    );
+
+    render(<SandboxChatPage pathToken="token-denied" />);
+
+    expect(
+      await screen.findByRole("heading", { name: "Access Denied" }),
+    ).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole("button", {
+        name: "Sign in",
+      }),
+    );
+
+    expect(mockSignIn).toHaveBeenCalledTimes(1);
+    expect(localStorage.getItem(SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY)).toBe(
+      "/sandbox/test/token-denied",
+    );
+  });
+
+  it("shows a generic fallback for unexpected sandbox bootstrap failures", async () => {
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        createFetchResponse(
+          {
+            code: "INTERNAL_ERROR",
+            message:
+              "Uncaught Error: Internal database exploded at handler (../../convex/sandboxes.ts:1088:6)",
+          },
+          { ok: false, status: 500, statusText: "Internal Server Error" },
+        ),
+      ),
+    );
+
+    render(<SandboxChatPage pathToken="broken-token" />);
+
+    expect(
+      await screen.findByRole("heading", { name: "Sandbox Link Unavailable" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "We couldn't open this sandbox right now. Please try again or open MCPJam.",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Internal database exploded/),
+    ).not.toBeInTheDocument();
+    expect(consoleError).toHaveBeenCalledWith(
+      "[SandboxChatPage] Failed to bootstrap sandbox",
+      expect.objectContaining({
+        status: 500,
+        code: "INTERNAL_ERROR",
+        message: "Internal database exploded",
+        rawMessage:
+          "Uncaught Error: Internal database exploded at handler (../../convex/sandboxes.ts:1088:6)",
+      }),
+    );
+  });
+
+  it("auto-resumes sandbox OAuth after callback completion", async () => {
+    vi.useFakeTimers();
+    let hasToken = false;
+    mockGetStoredTokens.mockImplementation(() =>
+      hasToken ? { access_token: "sandbox-token" } : null,
+    );
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Asana Sandbox",
+        description: "Hosted sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [
+          {
+            serverId: "srv_asana",
+            serverName: "asana",
+            useOAuth: true,
+            serverUrl: "https://mcp.asana.com/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+        ],
+      },
+    });
+    writeHostedOAuthResumeMarker({
+      surface: "sandbox",
+      serverName: "Asana Production",
+      serverUrl: "https://mcp.asana.com/sse",
+    });
+
+    render(<SandboxChatPage />);
+
+    expect(
+      screen.getByRole("heading", { name: "Finishing authorization" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Authorize" }),
+    ).not.toBeInTheDocument();
+
+    await act(async () => {
+      hasToken = true;
+      await vi.runAllTimersAsync();
+    });
+
+    expect(screen.getByTestId("sandbox-chat-tab")).toBeInTheDocument();
+    expect(mockValidateHostedServer).toHaveBeenCalledWith(
+      "srv_asana",
+      "sandbox-token",
+    );
+    expect(mockValidateHostedServer).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows curated copy instead of transport details when sandbox OAuth validation fails", async () => {
+    vi.useFakeTimers();
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    mockGetStoredTokens.mockReturnValue({ access_token: "stale-token" });
+    mockValidateHostedServer.mockRejectedValue(
+      new Error(
+        'Authentication failed for MCP server "mn70g96re2qn05cxjw7y4y26ah82jzgh": SSE error: SSE error: Non-200 status code (401)',
+      ),
+    );
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Asana Sandbox",
+        description: "Hosted sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [
+          {
+            serverId: "srv_asana",
+            serverName: "asana",
+            useOAuth: true,
+            serverUrl: "https://mcp.asana.com/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+        ],
+      },
+    });
+
+    render(<SandboxChatPage />);
+
+    expect(
+      screen.getByRole("heading", { name: "Finishing authorization" }),
+    ).toBeInTheDocument();
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    expect(
+      screen.getByRole("heading", { name: "Authorization Required" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Your authorization expired or was rejected. Authorize again to continue.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/SSE error/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Non-200 status code/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Authorize again" }),
+    ).toBeInTheDocument();
+    expect(consoleError).toHaveBeenCalledWith(
+      "[useHostedOAuthGate] OAuth validation failed",
+      expect.objectContaining({
+        surface: "sandbox",
+        serverId: "srv_asana",
+        serverName: "asana",
+      }),
+    );
+  });
+
+  it("re-enters the sandbox OAuth gate when chat reports OAuth is required", async () => {
+    mockGetStoredTokens.mockReturnValue({ access_token: "sandbox-token" });
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Asana Sandbox",
+        description: "Hosted sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [
+          {
+            serverId: "srv_asana",
+            serverName: "asana",
+            useOAuth: true,
+            serverUrl: "https://mcp.asana.com/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+        ],
+      },
+    });
+
+    render(<SandboxChatPage />);
+
+    expect(await screen.findByTestId("sandbox-chat-tab")).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Trigger OAuth" }),
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Authorization Required" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("You'll return here automatically after consent."),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Authorize" }),
+    ).toBeInTheDocument();
+  });
+
+  it("re-opens auth only for the matching sandbox server when chat includes server details", async () => {
+    mockGetStoredTokens.mockImplementation((serverName: string) => {
+      if (serverName === "asana") {
+        return { access_token: "asana-token" };
+      }
+      if (serverName === "linear") {
+        return { access_token: "linear-token" };
+      }
+      return null;
+    });
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Asana Sandbox",
+        description: "Hosted sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [
+          {
+            serverId: "srv_asana",
+            serverName: "asana",
+            useOAuth: true,
+            serverUrl: "https://mcp.asana.com/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+          {
+            serverId: "srv_linear",
+            serverName: "linear",
+            useOAuth: true,
+            serverUrl: "https://mcp.linear.app/sse",
+            clientId: null,
+            oauthScopes: null,
+          },
+        ],
+      },
+    });
+
+    render(<SandboxChatPage />);
+
+    expect(await screen.findByTestId("sandbox-chat-tab")).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Trigger targeted OAuth" }),
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Authorization Required" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("asana")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Authorize again" }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("linear")).not.toBeInTheDocument();
+  });
+});
diff --git a/mcpjam-inspector/client/src/components/hosted/__tests__/SharedServerChatPage.test.tsx b/mcpjam-inspector/client/src/components/hosted/__tests__/SharedServerChatPage.test.tsx
index b0bcb05c3..141653de2 100644
--- a/mcpjam-inspector/client/src/components/hosted/__tests__/SharedServerChatPage.test.tsx
+++ b/mcpjam-inspector/client/src/components/hosted/__tests__/SharedServerChatPage.test.tsx
@@ -1,19 +1,39 @@
 import { act, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { SharedServerChatPage } from "../SharedServerChatPage";
 import {
   clearSharedServerSession,
   writeSharedServerSession,
 } from "@/lib/shared-server-session";
+import {
+  clearHostedOAuthResumeMarker,
+  writeHostedOAuthResumeMarker,
+} from "@/lib/hosted-oauth-resume";
 
-const mockResolveShareForViewer = vi.fn();
-const mockGetAccessToken = vi.fn();
-const mockClipboardWriteText = vi.fn();
-const mockGetStoredTokens = vi.fn();
-const mockInitiateOAuth = vi.fn(async () => ({ success: false }));
-const toastSuccess = vi.fn();
-const toastError = vi.fn();
+const {
+  mockResolveShareForViewer,
+  mockGetAccessToken,
+  mockClipboardWriteText,
+  mockGetStoredTokens,
+  mockInitiateOAuth,
+  mockCheckHostedServerOAuthRequirement,
+  mockValidateHostedServer,
+  mockChatTabV2,
+  toastSuccess,
+  toastError,
+} = vi.hoisted(() => ({
+  mockResolveShareForViewer: vi.fn(),
+  mockGetAccessToken: vi.fn(),
+  mockClipboardWriteText: vi.fn(),
+  mockGetStoredTokens: vi.fn(),
+  mockInitiateOAuth: vi.fn(async () => ({ success: false })),
+  mockCheckHostedServerOAuthRequirement: vi.fn(),
+  mockValidateHostedServer: vi.fn(),
+  mockChatTabV2: vi.fn(),
+  toastSuccess: vi.fn(),
+  toastError: vi.fn(),
+}));
 
 vi.mock("convex/react", () => ({
   useConvexAuth: () => ({
@@ -34,12 +54,51 @@ vi.mock("@/hooks/hosted/use-hosted-api-context", () => ({
 }));
 
 vi.mock("@/components/ChatTabV2", () => ({
-  ChatTabV2: () => <div data-testid="shared-chat-tab" />,
+  ChatTabV2: (props: {
+    onOAuthRequired?: (details?: {
+      serverUrl?: string | null;
+      serverId?: string | null;
+      serverName?: string | null;
+    }) => void;
+    reasoningDisplayMode?: string;
+  }) => {
+    mockChatTabV2(props);
+    const { onOAuthRequired } = props;
+    return (
+      <div>
+        <div data-testid="shared-chat-tab" />
+        {onOAuthRequired ? (
+          <>
+            <button type="button" onClick={() => onOAuthRequired()}>
+              Trigger OAuth
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                onOAuthRequired({
+                  serverId: "srv_asana",
+                  serverName: "Asana",
+                  serverUrl: "https://mcp.asana.com/sse",
+                })
+              }
+            >
+              Trigger targeted OAuth
+            </button>
+          </>
+        ) : null}
+      </div>
+    );
+  },
 }));
 
 vi.mock("@/lib/oauth/mcp-oauth", () => ({
-  getStoredTokens: (...args: unknown[]) => mockGetStoredTokens(...args),
-  initiateOAuth: (...args: unknown[]) => mockInitiateOAuth(...args),
+  getStoredTokens: mockGetStoredTokens,
+  initiateOAuth: mockInitiateOAuth,
+}));
+
+vi.mock("@/lib/apis/web/servers-api", () => ({
+  checkHostedServerOAuthRequirement: mockCheckHostedServerOAuthRequirement,
+  validateHostedServer: mockValidateHostedServer,
 }));
 
 vi.mock("sonner", () => ({
@@ -50,22 +109,12 @@ vi.mock("sonner", () => ({
 }));
 
 describe("SharedServerChatPage", () => {
-  function createDeferred<T>() {
-    let resolve!: (value: T) => void;
-    let reject!: (reason?: unknown) => void;
-    const promise = new Promise<T>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    return { promise, resolve, reject };
-  }
-
   function createSharePayload(
     overrides: Partial<{
       workspaceId: string;
       serverId: string;
       serverName: string;
-      mode: "invited_only" | "workspace";
+      mode: "any_signed_in_with_link" | "invited_only";
       viewerIsWorkspaceMember: boolean;
       useOAuth: boolean;
       serverUrl: string | null;
@@ -77,7 +126,7 @@ describe("SharedServerChatPage", () => {
       workspaceId: "ws_1",
       serverId: "srv_1",
       serverName: "Server One",
-      mode: "invited_only" as const,
+      mode: "any_signed_in_with_link" as const,
       viewerIsWorkspaceMember: false,
       useOAuth: false,
       serverUrl: null,
@@ -87,37 +136,35 @@ describe("SharedServerChatPage", () => {
     };
   }
 
-  function createFetchResponse(
-    body: unknown,
-    overrides: Partial<{
-      ok: boolean;
-      status: number;
-      statusText: string;
-    }> = {},
-  ) {
-    return {
-      ok: overrides.ok ?? true,
-      status: overrides.status ?? 200,
-      statusText: overrides.statusText ?? "OK",
-      json: async () => body,
-      text: async () => JSON.stringify(body),
-      headers: new Headers(),
-    } as Response;
-  }
-
   beforeEach(() => {
+    vi.useRealTimers();
     clearSharedServerSession();
+    clearHostedOAuthResumeMarker();
+    localStorage.clear();
+    sessionStorage.clear();
     mockResolveShareForViewer.mockReset();
     mockGetAccessToken.mockReset();
     mockClipboardWriteText.mockReset();
     mockGetStoredTokens.mockReset();
     mockInitiateOAuth.mockReset();
+    mockCheckHostedServerOAuthRequirement.mockReset();
+    mockValidateHostedServer.mockReset();
+    mockChatTabV2.mockReset();
     toastSuccess.mockReset();
     toastError.mockReset();
 
     mockGetAccessToken.mockResolvedValue("workos-token");
     mockGetStoredTokens.mockReturnValue(null);
     mockInitiateOAuth.mockResolvedValue({ success: false });
+    mockCheckHostedServerOAuthRequirement.mockResolvedValue({
+      useOAuth: false,
+      serverUrl: null,
+    });
+    mockValidateHostedServer.mockResolvedValue({
+      success: true,
+      status: "connected",
+      initInfo: null,
+    });
     mockClipboardWriteText.mockResolvedValue(undefined);
     Object.defineProperty(navigator, "clipboard", {
       configurable: true,
@@ -127,6 +174,12 @@ describe("SharedServerChatPage", () => {
     });
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
   it("copies the full shared path link from the header", async () => {
     writeSharedServerSession({
       token: "token 123",
@@ -147,79 +200,153 @@ describe("SharedServerChatPage", () => {
     expect(toastError).not.toHaveBeenCalled();
   });
 
-  it("ignores a stale validation network error after the effect is cancelled", async () => {
-    const deferredValidate = createDeferred<Response>();
-    vi.mocked(global.fetch).mockImplementation(
-      async (input: RequestInfo | URL) => {
-        const url =
-          typeof input === "string"
-            ? input
-            : input instanceof URL
-              ? input.toString()
-              : input.url;
-
-        if (url === "/api/web/servers/validate") {
-          return deferredValidate.promise;
-        }
-
-        return createFetchResponse({});
-      },
+  it("keeps shared server reasoning rendering unchanged", async () => {
+    writeSharedServerSession({
+      token: "token-1",
+      payload: createSharePayload(),
+    });
+
+    render(<SharedServerChatPage />);
+
+    expect(await screen.findByTestId("shared-chat-tab")).toBeInTheDocument();
+    expect(mockChatTabV2).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        reasoningDisplayMode: "hidden",
+      }),
     );
+  });
 
-    mockGetStoredTokens.mockImplementation((serverName: string) => {
-      if (serverName === "OAuth One") {
-        return { access_token: "expired-token" };
-      }
-      return null;
-    });
+  it("auto-resumes hosted OAuth after callback completion", async () => {
+    vi.useFakeTimers();
+    let hasToken = false;
+    mockGetStoredTokens.mockImplementation(() =>
+      hasToken ? { access_token: "oauth-token" } : null,
+    );
 
     writeSharedServerSession({
       token: "token-one",
       payload: createSharePayload({
-        workspaceId: "ws_oauth_1",
-        serverId: "srv_oauth_1",
-        serverName: "OAuth One",
+        serverName: "Asana",
+        serverId: "srv_asana",
         useOAuth: true,
-        serverUrl: "https://oauth-one.example.com/mcp",
+        serverUrl: "https://mcp.asana.com/sse",
       }),
     });
+    writeHostedOAuthResumeMarker({
+      surface: "shared",
+      serverName: "asana production",
+      serverUrl: "https://mcp.asana.com/sse",
+    });
 
-    const { rerender } = render(<SharedServerChatPage />);
+    render(<SharedServerChatPage />);
 
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        "/api/web/servers/validate",
-        expect.any(Object),
-      );
+    expect(
+      screen.getByRole("heading", { name: "Finishing authorization" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Authorize" }),
+    ).not.toBeInTheDocument();
+
+    await act(async () => {
+      hasToken = true;
+      await vi.runAllTimersAsync();
     });
 
-    mockResolveShareForViewer.mockResolvedValueOnce(
-      createSharePayload({
-        workspaceId: "ws_oauth_2",
-        serverId: "srv_oauth_2",
-        serverName: "OAuth Two",
-        useOAuth: true,
-        serverUrl: "https://oauth-two.example.com/mcp",
-      }),
+    expect(screen.getByTestId("shared-chat-tab")).toBeInTheDocument();
+    expect(mockValidateHostedServer).toHaveBeenCalledWith(
+      "srv_asana",
+      "oauth-token",
     );
+    expect(mockValidateHostedServer).toHaveBeenCalledTimes(1);
+  });
 
-    rerender(<SharedServerChatPage pathToken="token-two" />);
+  it("marks runtime OAuth as required after switching a shared page into OAuth mode", async () => {
+    mockGetStoredTokens.mockReturnValue({ access_token: "stale-token" });
+
+    writeSharedServerSession({
+      token: "token-runtime",
+      payload: createSharePayload({
+        serverId: "srv_asana",
+        serverName: "Asana",
+        useOAuth: false,
+        serverUrl: null,
+      }),
+    });
+
+    render(<SharedServerChatPage />);
+
+    expect(await screen.findByTestId("shared-chat-tab")).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Trigger targeted OAuth" }),
+    );
 
     expect(
       await screen.findByRole("heading", { name: "Authorization Required" }),
     ).toBeInTheDocument();
-    expect(screen.queryByTestId("shared-chat-tab")).not.toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Asana requires authorization to continue. You'll return here automatically after consent.",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Authorize" }),
+    ).toBeInTheDocument();
+    expect(mockValidateHostedServer).not.toHaveBeenCalled();
+  });
 
-    await act(async () => {
-      deferredValidate.reject(new Error("validation request failed"));
-      await Promise.resolve();
+  it("shows an explicit retry CTA when hosted OAuth validation keeps failing", async () => {
+    vi.useFakeTimers();
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    mockGetStoredTokens.mockReturnValue({ access_token: "stale-token" });
+    mockValidateHostedServer.mockRejectedValue(
+      new Error("invalid_token from hosted validation"),
+    );
+
+    writeSharedServerSession({
+      token: "token-fail",
+      payload: createSharePayload({
+        serverName: "Asana",
+        serverId: "srv_asana",
+        useOAuth: true,
+        serverUrl: "https://mcp.asana.com/sse",
+      }),
     });
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("heading", { name: "Authorization Required" }),
-      ).toBeInTheDocument();
+    render(<SharedServerChatPage />);
+
+    expect(
+      screen.getByRole("heading", { name: "Finishing authorization" }),
+    ).toBeInTheDocument();
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
     });
+
+    expect(
+      screen.getByRole("heading", { name: "Authorization Required" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Your authorization expired or was rejected. Authorize again to continue.",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("invalid_token from hosted validation"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Authorize again" }),
+    ).toBeInTheDocument();
     expect(screen.queryByTestId("shared-chat-tab")).not.toBeInTheDocument();
+    expect(consoleError).toHaveBeenCalledWith(
+      "[useHostedOAuthGate] OAuth validation failed",
+      expect.objectContaining({
+        surface: "shared",
+        serverId: "srv_asana",
+        serverName: "Asana",
+      }),
+    );
   });
 });
diff --git a/mcpjam-inspector/client/src/components/mcp-sidebar.tsx b/mcpjam-inspector/client/src/components/mcp-sidebar.tsx
index 40cb979e0..628f27a17 100644
--- a/mcpjam-inspector/client/src/components/mcp-sidebar.tsx
+++ b/mcpjam-inspector/client/src/components/mcp-sidebar.tsx
@@ -15,6 +15,7 @@ import {
   MessageCircleQuestionIcon,
   GitBranch,
   GraduationCap,
+  Box,
 } from "lucide-react";
 import { usePostHog, useFeatureFlagEnabled } from "posthog-js/react";
 
@@ -97,6 +98,11 @@ const navigationSections: NavSection[] = [
         url: "#chat-v2",
         icon: MessageCircle,
       },
+      {
+        title: "Sandboxes",
+        url: "#sandboxes",
+        icon: Box,
+      },
     ],
   },
   {
diff --git a/mcpjam-inspector/client/src/components/sandboxes/CreateSandboxDialog.tsx b/mcpjam-inspector/client/src/components/sandboxes/CreateSandboxDialog.tsx
new file mode 100644
index 000000000..f34b0f225
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/sandboxes/CreateSandboxDialog.tsx
@@ -0,0 +1,308 @@
+import { useEffect, useMemo, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { isMCPJamProvidedModel, SUPPORTED_MODELS } from "@/shared/types";
+import type { SandboxSettings } from "@/hooks/useSandboxes";
+import { useSandboxMutations } from "@/hooks/useSandboxes";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+interface WorkspaceServerOption {
+  _id: string;
+  name: string;
+  transportType: "stdio" | "http";
+}
+
+interface CreateSandboxDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceId: string;
+  workspaceServers: WorkspaceServerOption[];
+  sandbox?: SandboxSettings | null;
+  onSaved?: (sandbox: SandboxSettings) => void;
+}
+
+const DEFAULT_SYSTEM_PROMPT = "You are a helpful assistant.";
+
+export function CreateSandboxDialog({
+  isOpen,
+  onClose,
+  workspaceId,
+  workspaceServers,
+  sandbox,
+  onSaved,
+}: CreateSandboxDialogProps) {
+  const { createSandbox, updateSandbox } = useSandboxMutations();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPT);
+  const [modelId, setModelId] = useState("openai/gpt-5-mini");
+  const [temperature, setTemperature] = useState(0.7);
+  const [requireToolApproval, setRequireToolApproval] = useState(false);
+  const [allowGuestAccess, setAllowGuestAccess] = useState(false);
+  const [selectedServerIds, setSelectedServerIds] = useState<string[]>([]);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const availableServers = useMemo(
+    () => workspaceServers.filter((server) => server.transportType === "http"),
+    [workspaceServers],
+  );
+  const hostedModels = useMemo(
+    () =>
+      SUPPORTED_MODELS.filter((model) =>
+        isMCPJamProvidedModel(String(model.id)),
+      ),
+    [],
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setName(sandbox?.name ?? "");
+    setDescription(sandbox?.description ?? "");
+    setSystemPrompt(sandbox?.systemPrompt ?? DEFAULT_SYSTEM_PROMPT);
+    setModelId(
+      sandbox?.modelId ??
+        hostedModels[0]?.id?.toString() ??
+        "openai/gpt-5-mini",
+    );
+    setTemperature(sandbox?.temperature ?? 0.7);
+    setRequireToolApproval(sandbox?.requireToolApproval ?? false);
+    setAllowGuestAccess(sandbox?.allowGuestAccess ?? false);
+    setSelectedServerIds(
+      sandbox?.servers.map((server) => server.serverId) ?? [],
+    );
+  }, [hostedModels, isOpen, sandbox]);
+
+  const handleToggleServer = (serverId: string, checked: boolean) => {
+    setSelectedServerIds((current) => {
+      if (checked) {
+        return current.includes(serverId) ? current : [...current, serverId];
+      }
+      return current.filter((id) => id !== serverId);
+    });
+  };
+
+  const handleSave = async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      toast.error("Sandbox name is required");
+      return;
+    }
+    if (selectedServerIds.length === 0) {
+      toast.error("Select at least one HTTP server");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload = {
+        name: trimmedName,
+        description: description.trim() || undefined,
+        systemPrompt: systemPrompt.trim() || DEFAULT_SYSTEM_PROMPT,
+        modelId,
+        temperature,
+        hostStyle: sandbox?.hostStyle ?? "claude",
+        requireToolApproval,
+        allowGuestAccess,
+        serverIds: selectedServerIds,
+      };
+
+      const next = (
+        sandbox
+          ? await updateSandbox({
+              sandboxId: sandbox.sandboxId,
+              ...payload,
+            })
+          : await createSandbox({
+              workspaceId,
+              ...payload,
+            })
+      ) as SandboxSettings;
+
+      onSaved?.(next);
+      toast.success(sandbox ? "Sandbox updated" : "Sandbox created");
+      onClose();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save sandbox",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            {sandbox ? "Edit Sandbox" : "Create Sandbox"}
+          </DialogTitle>
+          <DialogDescription>
+            Configure a hosted chat environment with a fixed model, prompt, and
+            server set.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <div className="grid gap-2">
+            <Label htmlFor="sandbox-name">Name</Label>
+            <Input
+              id="sandbox-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Support Assistant Demo"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="sandbox-description">Description</Label>
+            <Textarea
+              id="sandbox-description"
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="Short context for anyone opening this sandbox."
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="sandbox-system-prompt">System prompt</Label>
+            <Textarea
+              id="sandbox-system-prompt"
+              value={systemPrompt}
+              onChange={(event) => setSystemPrompt(event.target.value)}
+              className="min-h-32"
+            />
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="grid gap-2">
+              <Label>Model</Label>
+              <Select value={modelId} onValueChange={setModelId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
+                <SelectContent>
+                  {hostedModels.map((model) => (
+                    <SelectItem key={String(model.id)} value={String(model.id)}>
+                      {model.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label>Temperature</Label>
+                <span className="text-xs text-muted-foreground">
+                  {temperature.toFixed(2)}
+                </span>
+              </div>
+              <Slider
+                min={0}
+                max={2}
+                step={0.05}
+                value={[temperature]}
+                onValueChange={(values) => setTemperature(values[0] ?? 0.7)}
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-3 rounded-lg border p-4">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <p className="text-sm font-medium">Require tool approval</p>
+                <p className="text-xs text-muted-foreground">
+                  Visitors must approve tool calls before execution continues.
+                </p>
+              </div>
+              <Switch
+                checked={requireToolApproval}
+                onCheckedChange={setRequireToolApproval}
+              />
+            </div>
+
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <p className="text-sm font-medium">Allow guest access</p>
+                <p className="text-xs text-muted-foreground">
+                  Unauthenticated visitors can open the link when the sandbox
+                  mode allows it.
+                </p>
+              </div>
+              <Switch
+                checked={allowGuestAccess}
+                onCheckedChange={setAllowGuestAccess}
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-3">
+            <div>
+              <p className="text-sm font-medium">Servers</p>
+              <p className="text-xs text-muted-foreground">
+                Only HTTP servers can be used in sandboxes.
+              </p>
+            </div>
+            <div className="max-h-56 space-y-2 overflow-y-auto rounded-lg border p-3">
+              {availableServers.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No HTTP servers are available in this workspace yet.
+                </p>
+              ) : (
+                availableServers.map((server) => (
+                  <label
+                    key={server._id}
+                    className="flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50"
+                  >
+                    <Checkbox
+                      checked={selectedServerIds.includes(server._id)}
+                      onCheckedChange={(checked) =>
+                        handleToggleServer(server._id, checked === true)
+                      }
+                    />
+                    <span className="text-sm">{server.name}</span>
+                  </label>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={() => void handleSave()} disabled={isSaving}>
+            {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+            {sandbox ? "Save" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/mcpjam-inspector/client/src/components/sandboxes/SandboxEditor.tsx b/mcpjam-inspector/client/src/components/sandboxes/SandboxEditor.tsx
new file mode 100644
index 000000000..ab2dd6ea9
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/sandboxes/SandboxEditor.tsx
@@ -0,0 +1,733 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  ArrowLeft,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Globe,
+  Loader2,
+  Lock,
+  Plus,
+  Save,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  isMCPJamProvidedModel,
+  SUPPORTED_MODELS,
+  type ServerFormData,
+} from "@/shared/types";
+import type { SandboxMode, SandboxSettings } from "@/hooks/useSandboxes";
+import { useSandboxMutations } from "@/hooks/useSandboxes";
+import { useServerMutations } from "@/hooks/useWorkspaces";
+import { AddServerModal } from "@/components/connection/AddServerModal";
+import { SandboxShareSection } from "@/components/sandboxes/SandboxShareSection";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  getSandboxHostLabel,
+  getSandboxHostLogo,
+  type SandboxHostStyle,
+} from "@/lib/sandbox-host-style";
+
+interface WorkspaceServerOption {
+  _id: string;
+  name: string;
+  transportType: "stdio" | "http";
+  url?: string;
+}
+
+function isInsecureUrl(url: string | undefined): boolean {
+  if (!url) return false;
+  try {
+    return new URL(url).protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
+interface SandboxEditorProps {
+  sandbox?: SandboxSettings | null;
+  workspaceId: string;
+  workspaceServers: WorkspaceServerOption[];
+  onBack: () => void;
+  onSaved?: (sandbox: SandboxSettings) => void;
+  onDeleted?: () => void;
+}
+
+const DEFAULT_SYSTEM_PROMPT = "You are a helpful assistant.";
+const HOST_STYLE_OPTIONS: SandboxHostStyle[] = ["claude", "chatgpt"];
+
+export function SandboxEditor({
+  sandbox,
+  workspaceId,
+  workspaceServers,
+  onBack,
+  onSaved,
+  onDeleted,
+}: SandboxEditorProps) {
+  const { createSandbox, updateSandbox, deleteSandbox, setSandboxMode } =
+    useSandboxMutations();
+  const { createServer } = useServerMutations();
+  const isCreateMode = !sandbox;
+
+  const hostedModels = useMemo(
+    () =>
+      SUPPORTED_MODELS.filter((model) =>
+        isMCPJamProvidedModel(String(model.id)),
+      ),
+    [],
+  );
+
+  const [name, setName] = useState(sandbox?.name ?? "");
+  const [description, setDescription] = useState(sandbox?.description ?? "");
+  const [hostStyle, setHostStyle] = useState<SandboxHostStyle>(
+    sandbox?.hostStyle ?? "claude",
+  );
+  const [systemPrompt, setSystemPrompt] = useState(
+    sandbox?.systemPrompt ?? DEFAULT_SYSTEM_PROMPT,
+  );
+  const [modelId, setModelId] = useState(
+    sandbox?.modelId ?? hostedModels[0]?.id?.toString() ?? "openai/gpt-5-mini",
+  );
+  const [temperature, setTemperature] = useState(sandbox?.temperature ?? 0.7);
+  const [requireToolApproval, setRequireToolApproval] = useState(
+    sandbox?.requireToolApproval ?? false,
+  );
+  const [allowGuestAccess, setAllowGuestAccess] = useState(
+    sandbox?.allowGuestAccess ?? true,
+  );
+  const [mode, setMode] = useState<SandboxMode>(
+    sandbox?.mode ?? "any_signed_in_with_link",
+  );
+  const [selectedServerIds, setSelectedServerIds] = useState<string[]>(
+    sandbox?.servers.map((s) => s.serverId) ?? [],
+  );
+  const [isSaving, setIsSaving] = useState(false);
+  const [isEditingTitle, setIsEditingTitle] = useState(isCreateMode);
+  const [isAddServerOpen, setIsAddServerOpen] = useState(false);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+
+  // Reset form when the selected sandbox changes or the editor switches modes.
+  useEffect(() => {
+    if (!sandbox) {
+      setName("");
+      setDescription("");
+      setHostStyle("claude");
+      setSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+      setModelId(hostedModels[0]?.id?.toString() ?? "openai/gpt-5-mini");
+      setTemperature(0.7);
+      setRequireToolApproval(false);
+      setAllowGuestAccess(true);
+      setMode("any_signed_in_with_link");
+      setSelectedServerIds([]);
+      setIsEditingTitle(true);
+      return;
+    }
+
+    setName(sandbox.name);
+    setDescription(sandbox.description ?? "");
+    setHostStyle(sandbox.hostStyle);
+    setSystemPrompt(sandbox.systemPrompt);
+    setModelId(sandbox.modelId);
+    setTemperature(sandbox.temperature);
+    setRequireToolApproval(sandbox.requireToolApproval);
+    setAllowGuestAccess(sandbox.allowGuestAccess);
+    setMode(sandbox.mode);
+    setSelectedServerIds(sandbox.servers.map((s) => s.serverId));
+    setIsEditingTitle(false);
+  }, [hostedModels, sandbox]);
+
+  const availableServers = useMemo(
+    () => workspaceServers.filter((s) => s.transportType === "http"),
+    [workspaceServers],
+  );
+
+  const hasUnsavedChanges = useMemo(() => {
+    if (isCreateMode) return true;
+    const currentServerIds = sandbox!.servers.map((s) => s.serverId).sort();
+    const formServerIds = [...selectedServerIds].sort();
+    return (
+      name !== sandbox!.name ||
+      description !== (sandbox!.description ?? "") ||
+      hostStyle !== sandbox!.hostStyle ||
+      systemPrompt !== sandbox!.systemPrompt ||
+      modelId !== sandbox!.modelId ||
+      temperature !== sandbox!.temperature ||
+      requireToolApproval !== sandbox!.requireToolApproval ||
+      allowGuestAccess !== sandbox!.allowGuestAccess ||
+      JSON.stringify(formServerIds) !== JSON.stringify(currentServerIds)
+    );
+  }, [
+    isCreateMode,
+    name,
+    description,
+    hostStyle,
+    systemPrompt,
+    modelId,
+    temperature,
+    requireToolApproval,
+    allowGuestAccess,
+    selectedServerIds,
+    sandbox,
+  ]);
+
+  const handleToggleServer = (serverId: string, checked: boolean) => {
+    setSelectedServerIds((current) => {
+      if (checked) {
+        return current.includes(serverId) ? current : [...current, serverId];
+      }
+      return current.filter((id) => id !== serverId);
+    });
+  };
+
+  const saveServerToWorkspace = async (formData: ServerFormData) => {
+    const serverId = (await createServer({
+      workspaceId,
+      name: formData.name,
+      enabled: true,
+      transportType: "http",
+      url: formData.url,
+      headers: formData.headers,
+      timeout: formData.requestTimeout,
+      useOAuth: formData.useOAuth,
+      oauthScopes: formData.oauthScopes,
+      clientId: formData.clientId,
+    })) as string;
+    return serverId;
+  };
+
+  const handleAddServer = async (formData: ServerFormData) => {
+    if (formData.type !== "http") {
+      toast.error("Only HTTP servers can be used in sandboxes");
+      return;
+    }
+    if (isInsecureUrl(formData.url)) {
+      toast.error("Only HTTPS servers can be used in sandboxes");
+      return;
+    }
+    try {
+      const serverId = await saveServerToWorkspace(formData);
+      setSelectedServerIds((current) => [...current, serverId]);
+      toast.success(`Server "${formData.name}" added`);
+      setIsAddServerOpen(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to add server",
+      );
+    }
+  };
+
+  const handleSave = async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      toast.error("Sandbox name is required");
+      return;
+    }
+    if (selectedServerIds.length === 0) {
+      toast.error("Select at least one HTTPS server");
+      return;
+    }
+    const hasInsecure = selectedServerIds.some((id) => {
+      const server = availableServers.find((s) => s._id === id);
+      return server && isInsecureUrl(server.url);
+    });
+    if (hasInsecure) {
+      toast.error("Only HTTPS servers can be used in sandboxes");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload = {
+        name: trimmedName,
+        description: description.trim() || undefined,
+        hostStyle,
+        systemPrompt: systemPrompt.trim() || DEFAULT_SYSTEM_PROMPT,
+        modelId,
+        temperature,
+        requireToolApproval,
+        allowGuestAccess,
+        serverIds: selectedServerIds,
+      };
+
+      let result;
+      if (isCreateMode) {
+        result = await createSandbox({ workspaceId, ...payload });
+        // Backend defaults to 'invited_only', so set mode if different
+        if (mode !== "invited_only") {
+          result = await setSandboxMode({
+            sandboxId: (result as SandboxSettings).sandboxId,
+            mode,
+          });
+        }
+      } else {
+        result = await updateSandbox({
+          sandboxId: sandbox!.sandboxId,
+          ...payload,
+        });
+      }
+
+      toast.success(isCreateMode ? "Sandbox created" : "Sandbox updated");
+      onSaved?.(result as SandboxSettings);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save sandbox",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!sandbox) return;
+    const shouldDelete = window.confirm(
+      `Delete "${sandbox.name}"? This will also delete persisted usage history.`,
+    );
+    if (!shouldDelete) return;
+
+    try {
+      await deleteSandbox({ sandboxId: sandbox.sandboxId });
+      toast.success("Sandbox deleted");
+      onDeleted?.();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete sandbox",
+      );
+    }
+  };
+
+  const handleTitleBlur = () => {
+    setIsEditingTitle(false);
+  };
+
+  const handleTitleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      setIsEditingTitle(false);
+    }
+    if (e.key === "Escape") {
+      if (sandbox) setName(sandbox.name);
+      setIsEditingTitle(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Sticky header */}
+      <div className="flex items-start justify-between gap-4 border-b px-5 py-4">
+        <div className="flex min-w-0 flex-1 items-start gap-3">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="mt-0.5 h-7 w-7 shrink-0 p-0"
+            onClick={onBack}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div className="min-w-0 flex-1">
+            {isEditingTitle ? (
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                onBlur={handleTitleBlur}
+                onKeyDown={handleTitleKeyDown}
+                autoFocus
+                placeholder="Sandbox name"
+                className="w-full border-none bg-transparent px-0 py-0 text-lg font-semibold placeholder:text-muted-foreground/50 focus:outline-none focus:ring-0"
+              />
+            ) : (
+              <h2
+                className="cursor-pointer truncate text-lg font-semibold transition-opacity hover:opacity-60"
+                onClick={() => setIsEditingTitle(true)}
+              >
+                {name || "Untitled sandbox"}
+              </h2>
+            )}
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Add a description…"
+              className="mt-1 w-full border-none bg-transparent px-0 py-0 text-sm text-muted-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-0"
+            />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {hasUnsavedChanges && (
+            <Button
+              size="sm"
+              onClick={() => void handleSave()}
+              disabled={isSaving}
+              className="h-9 px-4 text-xs font-medium"
+            >
+              {isSaving ? (
+                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Save className="mr-1.5 h-3.5 w-3.5" />
+              )}
+              {isCreateMode ? "Create" : "Save"}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 space-y-1 overflow-y-auto p-2">
+        <div className="px-1 pt-2">
+          <Label className="text-xs font-medium text-muted-foreground">
+            Host style
+          </Label>
+          <div className="mt-1.5 grid gap-2 sm:grid-cols-2">
+            {HOST_STYLE_OPTIONS.map((option) => {
+              const isSelected = hostStyle === option;
+              return (
+                <Button
+                  key={option}
+                  type="button"
+                  variant={isSelected ? "secondary" : "ghost"}
+                  className="h-auto justify-start gap-3 rounded-xl border border-border/50 px-3 py-3"
+                  onClick={() => setHostStyle(option)}
+                >
+                  <img
+                    src={getSandboxHostLogo(option)}
+                    alt={getSandboxHostLabel(option)}
+                    className="h-5 w-5 object-contain"
+                  />
+                  <div className="flex min-w-0 flex-col items-start">
+                    <span className="text-sm font-medium">
+                      {getSandboxHostLabel(option)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {option === "chatgpt"
+                        ? "OpenAI-style sandbox chrome"
+                        : "Claude-style sandbox chrome"}
+                    </span>
+                  </div>
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Model + Servers side by side */}
+        <div className="grid gap-4 px-1 pt-2 md:grid-cols-2">
+          <div>
+            <Label className="text-xs font-medium text-muted-foreground">
+              Model
+            </Label>
+            <Select value={modelId} onValueChange={setModelId}>
+              <SelectTrigger className="mt-1.5 border-0 bg-muted/50 transition-colors hover:bg-muted">
+                <SelectValue placeholder="Select a model" />
+              </SelectTrigger>
+              <SelectContent>
+                {hostedModels.map((model) => (
+                  <SelectItem key={String(model.id)} value={String(model.id)}>
+                    {model.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between">
+              <Label className="text-xs font-medium text-muted-foreground">
+                Servers
+              </Label>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  onClick={() => setIsAddServerOpen(true)}
+                >
+                  <Plus className="h-3 w-3" />
+                  Add
+                </button>
+              </div>
+            </div>
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border-0 bg-muted/50 px-3 py-2 text-sm transition-colors hover:bg-muted"
+                >
+                  {selectedServerIds.length === 0 ? (
+                    <span className="text-muted-foreground">
+                      Select servers…
+                    </span>
+                  ) : (
+                    <span className="flex flex-wrap gap-1">
+                      {selectedServerIds.map((id) => {
+                        const server = availableServers.find(
+                          (s) => s._id === id,
+                        );
+                        return (
+                          <Badge
+                            key={id}
+                            variant="secondary"
+                            className="text-xs"
+                          >
+                            {server?.name ?? id}
+                          </Badge>
+                        );
+                      })}
+                    </span>
+                  )}
+                  <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="w-[var(--radix-popover-trigger-width)] p-1"
+                align="start"
+              >
+                {availableServers.length === 0 ? (
+                  <p className="px-2 py-1.5 text-sm text-muted-foreground">
+                    No HTTP servers available.
+                  </p>
+                ) : (
+                  <div className="max-h-56 overflow-y-auto">
+                    {availableServers.map((server) => {
+                      const insecure = isInsecureUrl(server.url);
+                      return (
+                        <label
+                          key={server._id}
+                          className={`flex items-center gap-3 rounded-md px-2 py-1.5 ${insecure ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50"}`}
+                          title={
+                            insecure
+                              ? "Sandboxes require HTTPS server URLs"
+                              : undefined
+                          }
+                        >
+                          <Checkbox
+                            checked={
+                              !insecure &&
+                              selectedServerIds.includes(server._id)
+                            }
+                            onCheckedChange={(checked) =>
+                              handleToggleServer(server._id, checked === true)
+                            }
+                            disabled={insecure}
+                          />
+                          <span className="flex-1 text-sm">{server.name}</span>
+                          {insecure && (
+                            <span className="text-[10px] text-destructive">
+                              Requires HTTPS
+                            </span>
+                          )}
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        {/* Advanced config (collapsible) */}
+        <div className="px-1 pt-3">
+          <Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
+            <CollapsibleTrigger className="flex w-full items-center gap-1.5 py-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors">
+              {isAdvancedOpen ? (
+                <ChevronDown className="h-3.5 w-3.5" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5" />
+              )}
+              Advanced config
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-1 pt-2">
+              {/* System prompt */}
+              <div>
+                <Label className="text-xs font-medium text-muted-foreground">
+                  System prompt
+                </Label>
+                <p className="mb-1.5 text-[10px] text-muted-foreground">
+                  Instructions given to the model at the start of each
+                  conversation.
+                </p>
+                <Textarea
+                  value={systemPrompt}
+                  onChange={(e) => setSystemPrompt(e.target.value)}
+                  rows={6}
+                  className="resize-none border-0 bg-muted/30 px-3 py-2 text-sm transition-colors focus-visible:bg-muted/50"
+                />
+              </div>
+
+              {/* Temperature */}
+              <div className="pt-3">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs font-medium text-muted-foreground">
+                    Temperature
+                  </Label>
+                  <span className="text-xs text-muted-foreground">
+                    {temperature.toFixed(2)}
+                  </span>
+                </div>
+                <Slider
+                  min={0}
+                  max={2}
+                  step={0.05}
+                  value={[temperature]}
+                  onValueChange={(values) => setTemperature(values[0] ?? 0.7)}
+                  className="mt-3"
+                />
+              </div>
+
+              {/* Settings */}
+              <div className="pt-3">
+                <Label className="text-xs font-medium text-muted-foreground">
+                  Settings
+                </Label>
+                <div className="mt-1.5 space-y-1 rounded-md bg-muted/30 p-3">
+                  <div className="flex items-center justify-between gap-3 rounded-md px-1 py-1.5">
+                    <div>
+                      <p className="text-sm">Require tool approval</p>
+                      <p className="text-[10px] text-muted-foreground">
+                        Visitors must approve tool calls before execution.
+                      </p>
+                    </div>
+                    <Switch
+                      checked={requireToolApproval}
+                      onCheckedChange={setRequireToolApproval}
+                    />
+                  </div>
+                  <div className="flex items-center justify-between gap-3 rounded-md px-1 py-1.5">
+                    <div>
+                      <p className="text-sm">Allow guest access</p>
+                      <p className="text-[10px] text-muted-foreground">
+                        Unauthenticated visitors can use the sandbox link.
+                      </p>
+                    </div>
+                    <Switch
+                      checked={allowGuestAccess}
+                      onCheckedChange={setAllowGuestAccess}
+                    />
+                  </div>
+                </div>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+
+        {/* Inline share section - only in edit mode */}
+        {!isCreateMode && sandbox && (
+          <div className="px-1 pt-3 pb-4">
+            <Separator className="mb-4" />
+            <Label className="text-xs font-medium text-muted-foreground">
+              Sharing
+            </Label>
+            <SandboxShareSection sandbox={sandbox} onUpdated={onSaved} />
+          </div>
+        )}
+
+        {/* Access mode picker - create mode only */}
+        {isCreateMode && (
+          <div className="px-1 pt-3 pb-4">
+            <Separator className="mb-4" />
+            <p className="text-sm font-medium">General access</p>
+            <div className="mt-2 flex items-start gap-3">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted">
+                {mode === "any_signed_in_with_link" ? (
+                  <Globe className="size-4 text-muted-foreground" />
+                ) : (
+                  <Lock className="size-4 text-muted-foreground" />
+                )}
+              </div>
+              <div className="min-w-0 flex-1">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded-md px-1 py-0.5 text-sm font-medium hover:bg-muted/50 transition-colors"
+                    >
+                      {mode === "any_signed_in_with_link"
+                        ? "Anyone with the link"
+                        : "Invited users only"}
+                      <ChevronDown className="size-3.5 text-muted-foreground" />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-56 p-1" align="start">
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+                      onClick={() => setMode("any_signed_in_with_link")}
+                    >
+                      <span>Anyone with the link</span>
+                      {mode === "any_signed_in_with_link" && (
+                        <Check className="size-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+                      onClick={() => setMode("invited_only")}
+                    >
+                      <span>Invited users only</span>
+                      {mode === "invited_only" && (
+                        <Check className="size-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                  </PopoverContent>
+                </Popover>
+                <p className="mt-0.5 px-1 text-xs text-muted-foreground">
+                  {mode === "any_signed_in_with_link"
+                    ? "Any signed-in user with the link can open this sandbox."
+                    : "Only people you've invited can access this sandbox."}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Delete - only in edit mode, pinned to bottom */}
+        {!isCreateMode && (
+          <div className="px-1 pb-4 pt-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 px-2 text-xs text-destructive hover:text-destructive"
+              onClick={() => void handleDelete()}
+            >
+              <Trash2 className="h-3 w-3" />
+              Delete
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <AddServerModal
+        isOpen={isAddServerOpen}
+        onClose={() => setIsAddServerOpen(false)}
+        onSubmit={(formData) => void handleAddServer(formData)}
+        initialData={{ type: "http" }}
+        requireHttps
+      />
+    </div>
+  );
+}
diff --git a/mcpjam-inspector/client/src/components/sandboxes/SandboxShareSection.tsx b/mcpjam-inspector/client/src/components/sandboxes/SandboxShareSection.tsx
new file mode 100644
index 000000000..fa3aaaba1
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/sandboxes/SandboxShareSection.tsx
@@ -0,0 +1,374 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Check,
+  ChevronDown,
+  Copy,
+  Globe,
+  Link2,
+  Loader2,
+  Lock,
+  RotateCw,
+  X,
+} from "lucide-react";
+import { useAuth } from "@workos-inc/authkit-react";
+import { useConvexAuth } from "convex/react";
+import { toast } from "sonner";
+import { useProfilePicture } from "@/hooks/useProfilePicture";
+import {
+  type SandboxMember,
+  type SandboxMode,
+  type SandboxSettings,
+  useSandboxMutations,
+} from "@/hooks/useSandboxes";
+import { getInitials } from "@/lib/utils";
+import { buildSandboxLink } from "@/lib/sandbox-session";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+
+interface SandboxShareSectionProps {
+  sandbox: SandboxSettings;
+  onUpdated?: (sandbox: SandboxSettings) => void;
+}
+
+export function SandboxShareSection({
+  sandbox,
+  onUpdated,
+}: SandboxShareSectionProps) {
+  const { isAuthenticated } = useConvexAuth();
+  const { user } = useAuth();
+  const { profilePictureUrl } = useProfilePicture();
+  const {
+    setSandboxMode,
+    rotateSandboxLink,
+    upsertSandboxMember,
+    removeSandboxMember,
+  } = useSandboxMutations();
+
+  const [settings, setSettings] = useState<SandboxSettings>(sandbox);
+  const [email, setEmail] = useState("");
+  const [isMutating, setIsMutating] = useState(false);
+
+  useEffect(() => {
+    setSettings(sandbox);
+  }, [sandbox]);
+
+  const displayName =
+    [user?.firstName, user?.lastName].filter(Boolean).join(" ") || "You";
+  const displayInitials = getInitials(displayName);
+  const activeMembers = useMemo(
+    () => settings.members.filter((member) => !member.revokedAt),
+    [settings.members],
+  );
+
+  const updateSettings = (next: SandboxSettings) => {
+    setSettings(next);
+    onUpdated?.(next);
+  };
+
+  const handleCopyLink = async () => {
+    const token = settings.link?.token?.trim();
+    if (!token) {
+      toast.error("Sandbox link unavailable");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(
+        buildSandboxLink(token, settings.name),
+      );
+      toast.success("Sandbox link copied");
+    } catch {
+      toast.error("Failed to copy link");
+    }
+  };
+
+  const handleRotate = async () => {
+    setIsMutating(true);
+    try {
+      const next = (await rotateSandboxLink({
+        sandboxId: settings.sandboxId,
+      })) as SandboxSettings;
+      updateSettings(next);
+      toast.success("Sandbox link rotated");
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to rotate sandbox link",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleModeChange = async (mode: SandboxMode) => {
+    if (mode === settings.mode) return;
+
+    setIsMutating(true);
+    try {
+      const next = (await setSandboxMode({
+        sandboxId: settings.sandboxId,
+        mode,
+      })) as SandboxSettings;
+      updateSettings(next);
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to update sandbox mode",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleInvite = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+    if (!normalizedEmail) return;
+
+    setIsMutating(true);
+    try {
+      const next = (await upsertSandboxMember({
+        sandboxId: settings.sandboxId,
+        email: normalizedEmail,
+        sendInviteEmail: true,
+      })) as SandboxSettings;
+      updateSettings(next);
+      setEmail("");
+      toast.success(`Invited ${normalizedEmail}`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to invite");
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleRemoveMember = async (member: SandboxMember) => {
+    setIsMutating(true);
+    try {
+      const next = (await removeSandboxMember({
+        sandboxId: settings.sandboxId,
+        memberIdOrEmail: member.email,
+      })) as SandboxSettings;
+      updateSettings(next);
+      toast.success(`Removed ${member.email}`);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to remove member",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <p className="pt-4 text-sm text-muted-foreground">
+        Sign in to manage sandbox access.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex gap-2 pt-4 pb-5">
+        <Input
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="Add people by email"
+          className="flex-1"
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              void handleInvite();
+            }
+          }}
+        />
+        <Button
+          onClick={() => void handleInvite()}
+          disabled={!email.trim() || isMutating}
+        >
+          {isMutating && email.trim() ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            "Invite"
+          )}
+        </Button>
+      </div>
+
+      <div className="space-y-1">
+        <p className="text-sm font-medium">People with access</p>
+        <div className="max-h-[220px] overflow-y-auto -mx-1">
+          <div className="flex items-center gap-3 rounded-md px-1 py-1.5">
+            <Avatar className="size-8 shrink-0">
+              <AvatarImage src={profilePictureUrl} alt={displayName} />
+              <AvatarFallback className="text-xs">
+                {displayInitials}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5">
+                <p className="truncate text-sm">{displayName}</p>
+                <span className="text-xs text-muted-foreground">(you)</span>
+              </div>
+              <p className="truncate text-xs text-muted-foreground">
+                {user?.email}
+              </p>
+            </div>
+            <span className="shrink-0 text-xs text-muted-foreground">
+              Owner
+            </span>
+          </div>
+
+          {activeMembers.length === 0 ? (
+            <p className="px-1 py-3 text-sm text-muted-foreground">
+              No one has been invited yet.
+            </p>
+          ) : (
+            activeMembers.map((member) => {
+              const name = member.user?.name || member.email;
+              const isPending = !member.userId;
+              const initials = getInitials(name);
+
+              return (
+                <div
+                  key={member._id}
+                  className="group flex items-center gap-3 rounded-md px-1 py-1.5 hover:bg-muted/40"
+                >
+                  <Avatar className="size-8 shrink-0">
+                    <AvatarImage src={member.user?.imageUrl} alt={name} />
+                    <AvatarFallback className="text-xs">
+                      {initials}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm">{name}</p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {member.email}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {isPending ? (
+                      <span className="text-xs text-muted-foreground">
+                        Pending
+                      </span>
+                    ) : null}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-7 opacity-0 group-hover:opacity-100"
+                      onClick={() => void handleRemoveMember(member)}
+                    >
+                      <X className="size-3.5" />
+                    </Button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      <Separator className="my-5" />
+
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm font-medium">General access</p>
+          <div className="mt-2 flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted">
+              {settings.mode === "any_signed_in_with_link" ? (
+                <Globe className="size-4 text-muted-foreground" />
+              ) : (
+                <Lock className="size-4 text-muted-foreground" />
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded-md px-1 py-0.5 text-sm font-medium hover:bg-muted/50 transition-colors"
+                  >
+                    {settings.mode === "any_signed_in_with_link"
+                      ? "Anyone with the link"
+                      : "Invited users only"}
+                    <ChevronDown className="size-3.5 text-muted-foreground" />
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56 p-1" align="start">
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+                    onClick={() =>
+                      void handleModeChange("any_signed_in_with_link")
+                    }
+                  >
+                    <span>Anyone with the link</span>
+                    {settings.mode === "any_signed_in_with_link" && (
+                      <Check className="size-3.5 text-muted-foreground" />
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted/50"
+                    onClick={() => void handleModeChange("invited_only")}
+                  >
+                    <span>Invited users only</span>
+                    {settings.mode === "invited_only" && (
+                      <Check className="size-3.5 text-muted-foreground" />
+                    )}
+                  </button>
+                </PopoverContent>
+              </Popover>
+              <p className="mt-0.5 px-1 text-xs text-muted-foreground">
+                {settings.mode === "any_signed_in_with_link"
+                  ? "Any signed-in user with the link can open this sandbox."
+                  : "Only people you've invited can access this sandbox."}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-lg border p-3">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <Link2 className="size-4" />
+            Share link
+          </div>
+          <p className="mt-1 text-xs text-muted-foreground break-all">
+            {settings.link?.url || buildSandboxLink("", settings.name)}
+          </p>
+          <div className="mt-3 flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void handleCopyLink()}
+            >
+              <Copy className="mr-1.5 size-3.5" />
+              Copy link
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void handleRotate()}
+              disabled={isMutating}
+            >
+              {isMutating ? (
+                <Loader2 className="mr-1.5 size-3.5 animate-spin" />
+              ) : (
+                <RotateCw className="mr-1.5 size-3.5" />
+              )}
+              Rotate
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/mcpjam-inspector/client/src/components/sandboxes/SandboxUsagePanel.tsx b/mcpjam-inspector/client/src/components/sandboxes/SandboxUsagePanel.tsx
new file mode 100644
index 000000000..fbd5b4407
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/sandboxes/SandboxUsagePanel.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { MessageSquare } from "lucide-react";
+import type { SandboxSettings } from "@/hooks/useSandboxes";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { ShareUsageThreadList } from "@/components/connection/share-usage/ShareUsageThreadList";
+import { ShareUsageThreadDetail } from "@/components/connection/share-usage/ShareUsageThreadDetail";
+
+interface SandboxUsagePanelProps {
+  sandbox: SandboxSettings;
+}
+
+export function SandboxUsagePanel({ sandbox }: SandboxUsagePanelProps) {
+  const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSelectedThreadId(null);
+  }, [sandbox.sandboxId]);
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="border-b px-5 py-4">
+        <h2 className="truncate text-lg font-semibold">{sandbox.name}</h2>
+        {sandbox.description && (
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            {sandbox.description}
+          </p>
+        )}
+      </div>
+
+      {/* Usage body */}
+      <div className="min-h-0 flex-1">
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+            <div className="h-full overflow-hidden">
+              <ShareUsageThreadList
+                sourceType="sandbox"
+                sourceId={sandbox.sandboxId}
+                selectedThreadId={selectedThreadId}
+                onSelectThread={setSelectedThreadId}
+              />
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={70}>
+            <div className="h-full overflow-hidden">
+              {selectedThreadId ? (
+                <ShareUsageThreadDetail threadId={selectedThreadId} />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center">
+                    <MessageSquare className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
+                    <p className="text-sm text-muted-foreground">
+                      Select a conversation to view
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/mcpjam-inspector/client/src/components/sandboxes/ShareSandboxDialog.tsx b/mcpjam-inspector/client/src/components/sandboxes/ShareSandboxDialog.tsx
new file mode 100644
index 000000000..660add3d6
--- /dev/null
+++ b/mcpjam-inspector/client/src/components/sandboxes/ShareSandboxDialog.tsx
@@ -0,0 +1,385 @@
+import { useEffect, useMemo, useState } from "react";
+import { Copy, Globe, Link2, Loader2, Lock, RotateCw, X } from "lucide-react";
+import { useAuth } from "@workos-inc/authkit-react";
+import { useConvexAuth } from "convex/react";
+import { toast } from "sonner";
+import { useProfilePicture } from "@/hooks/useProfilePicture";
+import {
+  type SandboxMember,
+  type SandboxMode,
+  type SandboxSettings,
+  useSandboxMutations,
+} from "@/hooks/useSandboxes";
+import { getInitials } from "@/lib/utils";
+import { buildSandboxLink } from "@/lib/sandbox-session";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+interface ShareSandboxDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  sandbox: SandboxSettings;
+  onUpdated?: (sandbox: SandboxSettings) => void;
+}
+
+export function ShareSandboxDialog({
+  isOpen,
+  onClose,
+  sandbox,
+  onUpdated,
+}: ShareSandboxDialogProps) {
+  const { isAuthenticated } = useConvexAuth();
+  const { user } = useAuth();
+  const { profilePictureUrl } = useProfilePicture();
+  const {
+    setSandboxMode,
+    rotateSandboxLink,
+    upsertSandboxMember,
+    removeSandboxMember,
+  } = useSandboxMutations();
+
+  const [settings, setSettings] = useState<SandboxSettings>(sandbox);
+  const [email, setEmail] = useState("");
+  const [isMutating, setIsMutating] = useState(false);
+
+  useEffect(() => {
+    setSettings(sandbox);
+  }, [sandbox]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setEmail("");
+      setIsMutating(false);
+    }
+  }, [isOpen]);
+
+  const displayName =
+    [user?.firstName, user?.lastName].filter(Boolean).join(" ") || "You";
+  const displayInitials = getInitials(displayName);
+  const activeMembers = useMemo(
+    () => settings.members.filter((member) => !member.revokedAt),
+    [settings.members],
+  );
+
+  const updateSettings = (next: SandboxSettings) => {
+    setSettings(next);
+    onUpdated?.(next);
+  };
+
+  const handleCopyLink = async () => {
+    const token = settings.link?.token?.trim();
+    if (!token) {
+      toast.error("Sandbox link unavailable");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(
+        buildSandboxLink(token, settings.name),
+      );
+      toast.success("Sandbox link copied");
+    } catch {
+      toast.error("Failed to copy link");
+    }
+  };
+
+  const handleRotate = async () => {
+    setIsMutating(true);
+    try {
+      const next = (await rotateSandboxLink({
+        sandboxId: settings.sandboxId,
+      })) as SandboxSettings;
+      updateSettings(next);
+      toast.success("Sandbox link rotated");
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to rotate sandbox link",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleModeChange = async (mode: SandboxMode) => {
+    if (mode === settings.mode) return;
+
+    setIsMutating(true);
+    try {
+      const next = (await setSandboxMode({
+        sandboxId: settings.sandboxId,
+        mode,
+      })) as SandboxSettings;
+      updateSettings(next);
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to update sandbox mode",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleInvite = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+    if (!normalizedEmail) return;
+
+    setIsMutating(true);
+    try {
+      const next = (await upsertSandboxMember({
+        sandboxId: settings.sandboxId,
+        email: normalizedEmail,
+        sendInviteEmail: true,
+      })) as SandboxSettings;
+      updateSettings(next);
+      setEmail("");
+      toast.success(`Invited ${normalizedEmail}`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to invite");
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleRemoveMember = async (member: SandboxMember) => {
+    setIsMutating(true);
+    try {
+      const next = (await removeSandboxMember({
+        sandboxId: settings.sandboxId,
+        memberIdOrEmail: member.email,
+      })) as SandboxSettings;
+      updateSettings(next);
+      toast.success(`Removed ${member.email}`);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to remove member",
+      );
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[520px] gap-0">
+        <DialogHeader>
+          <DialogTitle>Share &ldquo;{settings.name}&rdquo;</DialogTitle>
+        </DialogHeader>
+
+        {!isAuthenticated ? (
+          <p className="pt-4 text-sm text-muted-foreground">
+            Sign in to manage sandbox access.
+          </p>
+        ) : (
+          <>
+            <div className="flex gap-2 pt-4 pb-5">
+              <Input
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder="Add people by email"
+                className="flex-1"
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    void handleInvite();
+                  }
+                }}
+              />
+              <Button
+                onClick={() => void handleInvite()}
+                disabled={!email.trim() || isMutating}
+              >
+                {isMutating && email.trim() ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "Invite"
+                )}
+              </Button>
+            </div>
+
+            <div className="space-y-1">
+              <p className="text-sm font-medium">People with access</p>
+              <div className="max-h-[220px] overflow-y-auto -mx-1">
+                <div className="flex items-center gap-3 rounded-md px-1 py-1.5">
+                  <Avatar className="size-8 shrink-0">
+                    <AvatarImage src={profilePictureUrl} alt={displayName} />
+                    <AvatarFallback className="text-xs">
+                      {displayInitials}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5">
+                      <p className="truncate text-sm">{displayName}</p>
+                      <span className="text-xs text-muted-foreground">
+                        (you)
+                      </span>
+                    </div>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {user?.email}
+                    </p>
+                  </div>
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    Owner
+                  </span>
+                </div>
+
+                {activeMembers.length === 0 ? (
+                  <p className="px-1 py-3 text-sm text-muted-foreground">
+                    No one has been invited yet.
+                  </p>
+                ) : (
+                  activeMembers.map((member) => {
+                    const name = member.user?.name || member.email;
+                    const isPending = !member.userId;
+                    const initials = getInitials(name);
+
+                    return (
+                      <div
+                        key={member._id}
+                        className="group flex items-center gap-3 rounded-md px-1 py-1.5 hover:bg-muted/40"
+                      >
+                        <Avatar className="size-8 shrink-0">
+                          <AvatarImage src={member.user?.imageUrl} alt={name} />
+                          <AvatarFallback className="text-xs">
+                            {initials}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm">{name}</p>
+                          <p className="truncate text-xs text-muted-foreground">
+                            {member.email}
+                          </p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {isPending ? (
+                            <span className="text-xs text-muted-foreground">
+                              Pending
+                            </span>
+                          ) : null}
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 opacity-0 group-hover:opacity-100"
+                            onClick={() => void handleRemoveMember(member)}
+                          >
+                            <X className="size-3.5" />
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+
+            <Separator className="my-5" />
+
+            <div className="space-y-4">
+              <div className="grid gap-2">
+                <p className="text-sm font-medium">Access mode</p>
+                <Select
+                  value={settings.mode}
+                  onValueChange={(value) =>
+                    void handleModeChange(value as SandboxMode)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="invited_only">
+                      <div className="flex items-center gap-2">
+                        <Lock className="size-3.5" />
+                        Invite only
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="any_signed_in_with_link">
+                      <div className="flex items-center gap-2">
+                        <Globe className="size-3.5" />
+                        Any signed-in user with the link
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="rounded-lg border p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium">Guest access</p>
+                    <p className="text-xs text-muted-foreground">
+                      {settings.allowGuestAccess
+                        ? "Guests can open this sandbox when the link mode allows it."
+                        : "Guests cannot open this sandbox. Signed-in access only."}
+                    </p>
+                  </div>
+                  {settings.allowGuestAccess ? (
+                    <Globe className="size-4 text-muted-foreground" />
+                  ) : (
+                    <Lock className="size-4 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+
+              <div className="rounded-lg border p-3">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Link2 className="size-4" />
+                  Share link
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground break-all">
+                  {settings.link?.url || buildSandboxLink("", settings.name)}
+                </p>
+                <div className="mt-3 flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void handleCopyLink()}
+                  >
+                    <Copy className="mr-1.5 size-3.5" />
+                    Copy link
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void handleRotate()}
+                    disabled={isMutating}
+                  >
+                    {isMutating ? (
+                      <Loader2 className="mr-1.5 size-3.5 animate-spin" />
+                    ) : (
+                      <RotateCw className="mr-1.5 size-3.5" />
+                    )}
+                    Rotate
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end pt-5">
+              <Button size="sm" onClick={onClose}>
+                Done
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/mcpjam-inspector/client/src/contexts/sandbox-host-style-context.ts b/mcpjam-inspector/client/src/contexts/sandbox-host-style-context.ts
new file mode 100644
index 000000000..d4a84ad47
--- /dev/null
+++ b/mcpjam-inspector/client/src/contexts/sandbox-host-style-context.ts
@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import type { SandboxHostStyle } from "@/lib/sandbox-host-style";
+
+const SandboxHostStyleContext = createContext<SandboxHostStyle | null>(null);
+
+export const SandboxHostStyleProvider = SandboxHostStyleContext.Provider;
+
+export function useSandboxHostStyle(): SandboxHostStyle | null {
+  return useContext(SandboxHostStyleContext);
+}
diff --git a/mcpjam-inspector/client/src/hooks/__tests__/use-chat-session.hosted.test.tsx b/mcpjam-inspector/client/src/hooks/__tests__/use-chat-session.hosted.test.tsx
index 17413c80d..e34993268 100644
--- a/mcpjam-inspector/client/src/hooks/__tests__/use-chat-session.hosted.test.tsx
+++ b/mcpjam-inspector/client/src/hooks/__tests__/use-chat-session.hosted.test.tsx
@@ -147,4 +147,25 @@ describe("useChatSession hosted mode", () => {
     });
     unmount();
   });
+
+  it("includes sandbox token in the hosted transport body", async () => {
+    const { unmount } = renderHook(() =>
+      useChatSession({
+        selectedServers: ["server-1"],
+        hostedWorkspaceId: "workspace-2",
+        hostedSelectedServerIds: ["server-id-2"],
+        hostedSandboxToken: "sandbox-token",
+      }),
+    );
+
+    const body = lastTransportOptions.body();
+    expect(body).toMatchObject({
+      workspaceId: "workspace-2",
+      chatSessionId: "chat-session-id",
+      selectedServerIds: ["server-id-2"],
+      sandboxToken: "sandbox-token",
+      accessScope: "chat_v2",
+    });
+    unmount();
+  });
 });
diff --git a/mcpjam-inspector/client/src/hooks/__tests__/use-server-state.hosted-oauth.test.tsx b/mcpjam-inspector/client/src/hooks/__tests__/use-server-state.hosted-oauth.test.tsx
new file mode 100644
index 000000000..86626b484
--- /dev/null
+++ b/mcpjam-inspector/client/src/hooks/__tests__/use-server-state.hosted-oauth.test.tsx
@@ -0,0 +1,123 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useServerState } from "../use-server-state";
+import { writeHostedOAuthPendingMarker } from "@/lib/hosted-oauth-callback";
+
+const {
+  mockHandleOAuthCallback,
+  mockListServers,
+  mockUseServerMutations,
+  toastSuccess,
+} = vi.hoisted(() => ({
+  mockHandleOAuthCallback: vi.fn(),
+  mockListServers: vi.fn(),
+  mockUseServerMutations: vi.fn(() => ({
+    createServer: vi.fn(),
+    updateServer: vi.fn(),
+    deleteServer: vi.fn(),
+  })),
+  toastSuccess: vi.fn(),
+}));
+
+vi.mock("@/lib/config", () => ({
+  HOSTED_MODE: true,
+}));
+
+vi.mock("@/state/mcp-api", () => ({
+  testConnection: vi.fn(),
+  deleteServer: vi.fn(),
+  listServers: mockListServers,
+  reconnectServer: vi.fn(),
+  getInitializationInfo: vi.fn(),
+}));
+
+vi.mock("@/state/oauth-orchestrator", () => ({
+  ensureAuthorizedForReconnect: vi.fn(),
+}));
+
+vi.mock("@/lib/oauth/mcp-oauth", () => ({
+  handleOAuthCallback: mockHandleOAuthCallback,
+  getStoredTokens: vi.fn(),
+  clearOAuthData: vi.fn(),
+  initiateOAuth: vi.fn(),
+}));
+
+vi.mock("@/lib/apis/web/context", () => ({
+  injectHostedServerMapping: vi.fn(),
+}));
+
+vi.mock("@/lib/session-token", () => ({
+  authFetch: vi.fn(),
+}));
+
+vi.mock("@/stores/ui-playground-store", () => ({
+  useUIPlaygroundStore: {
+    getState: () => ({
+      setCspMode: vi.fn(),
+      setMcpAppsCspMode: vi.fn(),
+    }),
+  },
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: toastSuccess,
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("../useWorkspaces", () => ({
+  useServerMutations: mockUseServerMutations,
+}));
+
+describe("useServerState hosted OAuth callback guards", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+    window.history.replaceState({}, "", "/?code=oauth-code");
+    mockHandleOAuthCallback.mockReset();
+    mockListServers.mockReset();
+    toastSuccess.mockReset();
+    mockListServers.mockResolvedValue({ success: true, servers: [] });
+  });
+
+  it("defers hosted sandbox OAuth callbacks to App.tsx", async () => {
+    writeHostedOAuthPendingMarker({
+      surface: "sandbox",
+      serverName: "asana",
+      serverUrl: "https://mcp.asana.com/sse",
+      returnHash: "#asaan",
+    });
+    localStorage.setItem("mcp-oauth-pending", "asana");
+    localStorage.setItem("mcp-serverUrl-asana", "https://mcp.asana.com/sse");
+
+    renderHook(() =>
+      useServerState({
+        appState: {
+          servers: {},
+          selectedMultipleServers: [],
+        } as any,
+        dispatch: vi.fn(),
+        isLoading: false,
+        isAuthenticated: true,
+        isAuthLoading: false,
+        isLoadingWorkspaces: false,
+        useLocalFallback: false,
+        effectiveWorkspaces: {} as any,
+        effectiveActiveWorkspaceId: "ws_1",
+        activeWorkspaceServersFlat: [],
+        logger: {
+          info: vi.fn(),
+          warn: vi.fn(),
+          error: vi.fn(),
+          debug: vi.fn(),
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(mockHandleOAuthCallback).not.toHaveBeenCalled();
+    });
+    expect(toastSuccess).not.toHaveBeenCalled();
+  });
+});
diff --git a/mcpjam-inspector/client/src/hooks/__tests__/useSharedChatWidgetCapture.test.tsx b/mcpjam-inspector/client/src/hooks/__tests__/useSharedChatWidgetCapture.test.tsx
index 27a08aab4..8763526c3 100644
--- a/mcpjam-inspector/client/src/hooks/__tests__/useSharedChatWidgetCapture.test.tsx
+++ b/mcpjam-inspector/client/src/hooks/__tests__/useSharedChatWidgetCapture.test.tsx
@@ -268,4 +268,92 @@ describe("useSharedChatWidgetCapture", () => {
       randomSpy.mockRestore();
     }
   });
+
+  it("uploads sandbox widget snapshots with the originating server id", async () => {
+    const { unmount } = renderHook(() =>
+      useSharedChatWidgetCapture({
+        enabled: true,
+        chatSessionId: "chat-session-2",
+        hostedSandboxToken: "sandbox-token",
+        messages: [
+          {
+            id: "assistant-1",
+            role: "assistant",
+            parts: [
+              {
+                type: "tool-search",
+                toolCallId: "call-2",
+                input: { q: "sandbox" },
+                output: {
+                  result: "ok",
+                  _meta: {
+                    "openai/outputTemplate": "ui://widget.html",
+                    _serverId: "srv_123",
+                  },
+                },
+              },
+            ],
+          } as any,
+        ],
+      }),
+    );
+
+    act(() => {
+      useWidgetDebugStore.setState({
+        widgets: new Map([
+          [
+            "call-2",
+            {
+              toolCallId: "call-2",
+              toolName: "search",
+              protocol: "openai-apps",
+              widgetState: null,
+              prefersBorder: true,
+              globals: {
+                theme: "dark",
+                displayMode: "inline",
+              },
+              widgetHtml: "<div>Sandbox widget</div>",
+              updatedAt: Date.now(),
+            },
+          ],
+        ]),
+      });
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    await flushMicrotasks();
+
+    expect(mockCreateWidgetSnapshot).toHaveBeenCalledWith({
+      sandboxToken: "sandbox-token",
+      chatSessionId: "chat-session-2",
+      serverId: "srv_123",
+      toolCallId: "call-2",
+      toolName: "search",
+      widgetHtmlBlobId: expect.stringMatching(/^blob-/),
+      uiType: "openai-apps",
+      resourceUri: "ui://widget.html",
+      toolInputBlobId: expect.stringMatching(/^blob-/),
+      toolOutputBlobId: expect.stringMatching(/^blob-/),
+      widgetCsp: undefined,
+      widgetPermissions: undefined,
+      widgetPermissive: false,
+      prefersBorder: true,
+      displayContext: {
+        theme: "dark",
+        displayMode: "inline",
+        deviceType: undefined,
+        viewport: undefined,
+        locale: undefined,
+        timeZone: undefined,
+        capabilities: undefined,
+        safeAreaInsets: undefined,
+      },
+    });
+
+    unmount();
+  });
 });
diff --git a/mcpjam-inspector/client/src/hooks/hosted/use-hosted-api-context.ts b/mcpjam-inspector/client/src/hooks/hosted/use-hosted-api-context.ts
index 7c7cea2c8..eba7a6185 100644
--- a/mcpjam-inspector/client/src/hooks/hosted/use-hosted-api-context.ts
+++ b/mcpjam-inspector/client/src/hooks/hosted/use-hosted-api-context.ts
@@ -9,6 +9,7 @@ interface UseHostedApiContextOptions {
   oauthTokensByServerId?: Record<string, string>;
   guestOauthTokensByServerName?: Record<string, string>;
   shareToken?: string;
+  sandboxToken?: string;
   isAuthenticated?: boolean;
   /** Maps server name → MCPServerConfig for guest mode (no Convex). */
   serverConfigs?: Record<string, unknown>;
@@ -22,6 +23,7 @@ export function useHostedApiContext({
   oauthTokensByServerId,
   guestOauthTokensByServerName,
   shareToken,
+  sandboxToken,
   isAuthenticated,
   serverConfigs,
   enabled = true,
@@ -48,6 +50,7 @@ export function useHostedApiContext({
       oauthTokensByServerId,
       guestOauthTokensByServerName,
       shareToken,
+      sandboxToken,
       isAuthenticated,
       serverConfigs,
     });
@@ -63,6 +66,7 @@ export function useHostedApiContext({
     oauthTokensByServerId,
     guestOauthTokensByServerName,
     shareToken,
+    sandboxToken,
     isAuthenticated,
     serverConfigs,
   ]);
diff --git a/mcpjam-inspector/client/src/hooks/hosted/use-hosted-oauth-gate.ts b/mcpjam-inspector/client/src/hooks/hosted/use-hosted-oauth-gate.ts
new file mode 100644
index 000000000..1b11bf149
--- /dev/null
+++ b/mcpjam-inspector/client/src/hooks/hosted/use-hosted-oauth-gate.ts
@@ -0,0 +1,496 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import { getStoredTokens, initiateOAuth } from "@/lib/oauth/mcp-oauth";
+import type { HostedOAuthRequiredDetails } from "@/lib/hosted-oauth-required";
+import {
+  clearHostedOAuthPendingState,
+  matchesHostedOAuthServerIdentity,
+  writeHostedOAuthPendingMarker,
+} from "@/lib/hosted-oauth-callback";
+import {
+  clearHostedOAuthResumeMarker,
+  type HostedOAuthState,
+  type HostedOAuthStatus,
+  type HostedOAuthSurface,
+  isHostedOAuthBusy,
+  readHostedOAuthResumeMarker,
+  sanitizeHostedOAuthErrorMessage,
+} from "@/lib/hosted-oauth-resume";
+import { validateHostedServer } from "@/lib/apis/web/servers-api";
+import { slugify } from "@/lib/shared-server-session";
+
+const INLINE_TOKEN_POLL_ATTEMPTS = 15;
+const RESUME_TOKEN_POLL_ATTEMPTS = 24;
+const TOKEN_POLL_MS = 250;
+const VALIDATION_RETRY_ATTEMPTS = 3;
+const VALIDATION_RETRY_MS = 400;
+
+const TOKEN_MISSING_ERROR =
+  "Authorization completed, but MCPJam could not find the access token. Try again.";
+const VALIDATION_ERROR =
+  "Authorization completed, but MCPJam could not verify access. Try again.";
+const RUNTIME_OAUTH_ERROR =
+  "Authorization expired or is missing. Authorize again to continue.";
+
+export interface HostedOAuthServerDescriptor {
+  serverId: string;
+  serverName: string;
+  useOAuth: boolean;
+  serverUrl: string | null;
+  clientId: string | null;
+  oauthScopes: string[] | null;
+}
+
+function buildHostedOAuthStateMap(
+  oauthServers: HostedOAuthServerDescriptor[],
+  surface: HostedOAuthSurface,
+  previous: Record<string, HostedOAuthState> = {},
+): Record<string, HostedOAuthState> {
+  const resumeMarker = readHostedOAuthResumeMarker(surface);
+  const nextState: Record<string, HostedOAuthState> = {};
+
+  for (const server of oauthServers) {
+    const existing = previous[server.serverId];
+    const hasToken = !!getStoredTokens(server.serverName)?.access_token;
+    const matchesResume =
+      resumeMarker != null &&
+      matchesHostedOAuthServerIdentity(
+        {
+          serverName: resumeMarker.serverName,
+          serverUrl: resumeMarker.serverUrl,
+        },
+        {
+          serverName: server.serverName,
+          serverUrl: server.serverUrl,
+        },
+      );
+    const serverUrl = server.serverUrl ?? existing?.serverUrl ?? null;
+
+    let status: HostedOAuthStatus;
+    let errorMessage: string | null = existing?.errorMessage ?? null;
+
+    if (existing?.status === "launching") {
+      status = "launching";
+      errorMessage = null;
+    } else if (matchesResume && resumeMarker?.errorMessage) {
+      status = "error";
+      errorMessage = resumeMarker.errorMessage;
+    } else if (matchesResume) {
+      status = hasToken ? "verifying" : "resuming";
+      errorMessage = null;
+    } else if (hasToken) {
+      status = existing?.status === "ready" ? "ready" : "verifying";
+      errorMessage = null;
+    } else if (existing?.status === "error") {
+      status = "error";
+    } else {
+      status = "needs_auth";
+      errorMessage = null;
+    }
+
+    nextState[server.serverId] = {
+      status,
+      errorMessage,
+      serverUrl,
+    };
+  }
+
+  return nextState;
+}
+
+function setStoredOAuthTokenState(
+  serverName: string,
+  nextState: HostedOAuthState,
+  setState: Dispatch<SetStateAction<Record<string, HostedOAuthState>>>,
+  serverId: string,
+) {
+  setState((previous) => ({
+    ...previous,
+    [serverId]: {
+      ...nextState,
+      serverUrl: nextState.serverUrl ?? previous[serverId]?.serverUrl ?? null,
+    },
+  }));
+
+  if (nextState.status === "needs_auth" || nextState.status === "error") {
+    localStorage.removeItem(`mcp-tokens-${serverName}`);
+  }
+}
+
+async function waitForStoredAccessToken(
+  serverName: string,
+  attempts: number,
+): Promise<string | null> {
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    const accessToken = getStoredTokens(serverName)?.access_token;
+    if (typeof accessToken === "string" && accessToken.trim()) {
+      return accessToken;
+    }
+
+    await new Promise((resolve) => window.setTimeout(resolve, TOKEN_POLL_MS));
+  }
+
+  return null;
+}
+
+async function validateWithRetry(
+  serverId: string,
+  oauthAccessToken: string,
+): Promise<{ ok: true } | { ok: false; error: unknown }> {
+  let lastError: unknown = null;
+
+  for (let attempt = 1; attempt <= VALIDATION_RETRY_ATTEMPTS; attempt++) {
+    try {
+      await validateHostedServer(serverId, oauthAccessToken);
+      return { ok: true };
+    } catch (error) {
+      lastError = error;
+      if (attempt < VALIDATION_RETRY_ATTEMPTS) {
+        await new Promise((resolve) =>
+          window.setTimeout(resolve, VALIDATION_RETRY_MS),
+        );
+      }
+    }
+  }
+
+  return { ok: false, error: lastError };
+}
+
+export interface UseHostedOAuthGateOptions {
+  surface: HostedOAuthSurface;
+  pendingKey: string;
+  servers: HostedOAuthServerDescriptor[];
+}
+
+export interface UseHostedOAuthGateResult {
+  oauthStateByServerId: Record<string, HostedOAuthState>;
+  pendingOAuthServers: Array<{
+    server: HostedOAuthServerDescriptor;
+    state: HostedOAuthState;
+  }>;
+  hasBusyOAuth: boolean;
+  authorizeServer: (server: HostedOAuthServerDescriptor) => Promise<void>;
+  markOAuthRequired: (details?: HostedOAuthRequiredDetails) => void;
+}
+
+export function useHostedOAuthGate({
+  surface,
+  pendingKey,
+  servers,
+}: UseHostedOAuthGateOptions): UseHostedOAuthGateResult {
+  const oauthServers = useMemo(
+    () => servers.filter((server) => server.useOAuth),
+    [servers],
+  );
+  const [oauthStateByServerId, setOAuthStateByServerId] = useState<
+    Record<string, HostedOAuthState>
+  >(() => buildHostedOAuthStateMap(oauthServers, surface));
+  const oauthStateByServerIdRef = useRef(oauthStateByServerId);
+  const processingServerIdsRef = useRef<Set<string>>(new Set());
+  const isUnmountedRef = useRef(false);
+
+  useEffect(() => {
+    oauthStateByServerIdRef.current = oauthStateByServerId;
+  }, [oauthStateByServerId]);
+
+  useEffect(() => {
+    isUnmountedRef.current = false;
+    return () => {
+      isUnmountedRef.current = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    setOAuthStateByServerId((previous) =>
+      buildHostedOAuthStateMap(oauthServers, surface, previous),
+    );
+  }, [oauthServers, surface]);
+
+  useEffect(() => {
+    if (oauthServers.length === 0) {
+      return;
+    }
+
+    const processServer = async (
+      server: HostedOAuthServerDescriptor,
+      status: HostedOAuthStatus,
+    ) => {
+      if (processingServerIdsRef.current.has(server.serverId)) {
+        return;
+      }
+
+      processingServerIdsRef.current.add(server.serverId);
+      try {
+        const isResume = status === "resuming";
+        const accessToken = isResume
+          ? await waitForStoredAccessToken(
+              server.serverName,
+              RESUME_TOKEN_POLL_ATTEMPTS,
+            )
+          : (getStoredTokens(server.serverName)?.access_token ?? null);
+
+        if (isUnmountedRef.current) return;
+
+        if (!accessToken) {
+          clearHostedOAuthResumeMarker();
+          setStoredOAuthTokenState(
+            server.serverName,
+            {
+              status: "error",
+              errorMessage: TOKEN_MISSING_ERROR,
+              serverUrl:
+                oauthStateByServerIdRef.current[server.serverId]?.serverUrl ??
+                server.serverUrl,
+            },
+            setOAuthStateByServerId,
+            server.serverId,
+          );
+          return;
+        }
+
+        if (status !== "verifying") {
+          setOAuthStateByServerId((previous) => ({
+            ...previous,
+            [server.serverId]: {
+              status: "verifying",
+              errorMessage: null,
+              serverUrl:
+                previous[server.serverId]?.serverUrl ??
+                server.serverUrl ??
+                null,
+            },
+          }));
+        }
+
+        const validation = await validateWithRetry(
+          server.serverId,
+          accessToken,
+        );
+        if (isUnmountedRef.current) return;
+
+        if (validation.ok) {
+          clearHostedOAuthResumeMarker();
+          setOAuthStateByServerId((previous) => ({
+            ...previous,
+            [server.serverId]: {
+              status: "ready",
+              errorMessage: null,
+              serverUrl:
+                previous[server.serverId]?.serverUrl ??
+                server.serverUrl ??
+                null,
+            },
+          }));
+          return;
+        }
+
+        console.error("[useHostedOAuthGate] OAuth validation failed", {
+          surface,
+          serverId: server.serverId,
+          serverName: server.serverName,
+          error: validation.error,
+        });
+        clearHostedOAuthResumeMarker();
+        setStoredOAuthTokenState(
+          server.serverName,
+          {
+            status: "error",
+            errorMessage: sanitizeHostedOAuthErrorMessage(
+              validation.error,
+              VALIDATION_ERROR,
+            ),
+            serverUrl:
+              oauthStateByServerIdRef.current[server.serverId]?.serverUrl ??
+              server.serverUrl,
+          },
+          setOAuthStateByServerId,
+          server.serverId,
+        );
+      } finally {
+        processingServerIdsRef.current.delete(server.serverId);
+      }
+    };
+
+    for (const server of oauthServers) {
+      const currentStatus = oauthStateByServerId[server.serverId]?.status;
+      if (currentStatus === "resuming" || currentStatus === "verifying") {
+        void processServer(server, currentStatus);
+      }
+    }
+  }, [oauthServers, oauthStateByServerId, surface]);
+
+  const authorizeServer = useCallback(
+    async (server: HostedOAuthServerDescriptor) => {
+      clearHostedOAuthResumeMarker();
+      clearHostedOAuthPendingState();
+      setOAuthStateByServerId((previous) => ({
+        ...previous,
+        [server.serverId]: {
+          status: "launching",
+          errorMessage: null,
+          serverUrl:
+            previous[server.serverId]?.serverUrl ?? server.serverUrl ?? null,
+        },
+      }));
+
+      if (!server.serverUrl) {
+        setOAuthStateByServerId((previous) => ({
+          ...previous,
+          [server.serverId]: {
+            status: "error",
+            errorMessage:
+              "This server is missing its OAuth URL. Try again or contact the owner.",
+            serverUrl: previous[server.serverId]?.serverUrl ?? null,
+          },
+        }));
+        return;
+      }
+
+      const returnHash =
+        window.location.hash || `#${slugify(server.serverName)}`;
+      writeHostedOAuthPendingMarker({
+        surface,
+        serverName: server.serverName,
+        serverUrl: server.serverUrl,
+        returnHash,
+      });
+      localStorage.setItem(pendingKey, "true");
+      localStorage.setItem("mcp-oauth-return-hash", returnHash);
+
+      const result = await initiateOAuth({
+        serverName: server.serverName,
+        serverUrl: server.serverUrl,
+        clientId: server.clientId ?? undefined,
+        scopes: server.oauthScopes ?? undefined,
+      });
+
+      if (!result.success) {
+        clearHostedOAuthPendingState();
+        localStorage.removeItem("mcp-oauth-pending");
+        localStorage.removeItem("mcp-oauth-return-hash");
+        localStorage.removeItem(pendingKey);
+        setOAuthStateByServerId((previous) => ({
+          ...previous,
+          [server.serverId]: {
+            status: "error",
+            errorMessage: sanitizeHostedOAuthErrorMessage(
+              result.error,
+              "Authorization could not be started. Try again.",
+            ),
+            serverUrl:
+              previous[server.serverId]?.serverUrl ?? server.serverUrl ?? null,
+          },
+        }));
+        return;
+      }
+
+      const accessToken = await waitForStoredAccessToken(
+        server.serverName,
+        INLINE_TOKEN_POLL_ATTEMPTS,
+      );
+
+      if (accessToken) {
+        clearHostedOAuthPendingState();
+        localStorage.removeItem("mcp-oauth-pending");
+        localStorage.removeItem("mcp-oauth-return-hash");
+        localStorage.removeItem(pendingKey);
+      }
+
+      setOAuthStateByServerId((previous) => ({
+        ...previous,
+        [server.serverId]: {
+          status: accessToken ? "verifying" : "resuming",
+          errorMessage: null,
+          serverUrl:
+            previous[server.serverId]?.serverUrl ?? server.serverUrl ?? null,
+        },
+      }));
+    },
+    [pendingKey, surface],
+  );
+
+  const markOAuthRequired = useCallback(
+    (details?: HostedOAuthRequiredDetails) => {
+      setOAuthStateByServerId((previous) => {
+        const nextState = { ...previous };
+        const matchingServers = oauthServers.filter((server) => {
+          if (details?.serverId && server.serverId === details.serverId) {
+            return true;
+          }
+          if (details?.serverName && server.serverName === details.serverName) {
+            return true;
+          }
+          if (details?.serverUrl && server.serverUrl === details.serverUrl) {
+            return true;
+          }
+          return false;
+        });
+
+        const fallbackServer =
+          matchingServers.length > 0
+            ? null
+            : oauthServers.length === 1
+              ? oauthServers[0]
+              : null;
+        const targetServers =
+          matchingServers.length > 0
+            ? matchingServers
+            : fallbackServer
+              ? [fallbackServer]
+              : oauthServers;
+
+        for (const server of targetServers) {
+          localStorage.removeItem(`mcp-tokens-${server.serverName}`);
+          nextState[server.serverId] = {
+            status: "needs_auth",
+            errorMessage: details?.serverUrl ? null : RUNTIME_OAUTH_ERROR,
+            serverUrl:
+              details?.serverUrl ??
+              previous[server.serverId]?.serverUrl ??
+              server.serverUrl ??
+              null,
+          };
+        }
+
+        return nextState;
+      });
+    },
+    [oauthServers],
+  );
+
+  const pendingOAuthServers = useMemo(
+    () =>
+      oauthServers
+        .map((server) => ({
+          server,
+          state:
+            oauthStateByServerId[server.serverId] ??
+            ({
+              status: "needs_auth",
+              errorMessage: null,
+              serverUrl: server.serverUrl,
+            } satisfies HostedOAuthState),
+        }))
+        .filter(({ state }) => state.status !== "ready"),
+    [oauthServers, oauthStateByServerId],
+  );
+
+  const hasBusyOAuth = pendingOAuthServers.some(({ state }) =>
+    isHostedOAuthBusy(state.status),
+  );
+
+  return {
+    oauthStateByServerId,
+    pendingOAuthServers,
+    hasBusyOAuth,
+    authorizeServer,
+    markOAuthRequired,
+  };
+}
diff --git a/mcpjam-inspector/client/src/hooks/use-chat-session.ts b/mcpjam-inspector/client/src/hooks/use-chat-session.ts
index 5273f643b..4231d907d 100644
--- a/mcpjam-inspector/client/src/hooks/use-chat-session.ts
+++ b/mcpjam-inspector/client/src/hooks/use-chat-session.ts
@@ -50,6 +50,7 @@ import { countTextTokens } from "@/lib/apis/mcp-tokenizer-api";
 import { getAuthHeaders as getSessionAuthHeaders } from "@/lib/session-token";
 import { HOSTED_MODE } from "@/lib/config";
 import { useSharedChatWidgetCapture } from "@/hooks/useSharedChatWidgetCapture";
+import { getHostedAuthorizationHeader } from "@/lib/apis/web/context";
 
 export interface UseChatSessionOptions {
   /** Server names to connect to */
@@ -62,12 +63,18 @@ export interface UseChatSessionOptions {
   hostedOAuthTokens?: Record<string, string>;
   /** Optional server-share token for hosted shared chat sessions */
   hostedShareToken?: string;
+  /** Optional sandbox token for hosted sandbox sessions */
+  hostedSandboxToken?: string;
   /** Minimal UI mode for shared chat (hides diagnostics surfaces only) */
   minimalMode?: boolean;
+  /** Fixed initial model for hosted sandbox sessions */
+  initialModelId?: string;
   /** Initial system prompt (defaults to DEFAULT_SYSTEM_PROMPT) */
   initialSystemPrompt?: string;
   /** Initial temperature (defaults to 0.7) */
   initialTemperature?: number;
+  /** Initial tool approval mode for hosted sandbox sessions */
+  initialRequireToolApproval?: boolean;
   /** Callback when chat is reset */
   onReset?: () => void;
 }
@@ -184,14 +191,28 @@ function isAuthDeniedError(error: unknown): boolean {
   return /\b(401|403)\b|unauthorized|forbidden/i.test(withStatus.message);
 }
 
+function getAuthHeadersSignature(
+  headers: Record<string, string> | undefined,
+): string {
+  if (!headers) return "";
+
+  return Object.entries(headers)
+    .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+    .map(([key, value]) => `${key}:${value}`)
+    .join("|");
+}
+
 export function useChatSession({
   selectedServers,
   hostedWorkspaceId,
   hostedSelectedServerIds = [],
   hostedOAuthTokens,
   hostedShareToken,
+  hostedSandboxToken,
+  initialModelId,
   initialSystemPrompt = DEFAULT_SYSTEM_PROMPT,
   initialTemperature = 0.7,
+  initialRequireToolApproval = false,
   onReset,
 }: UseChatSessionOptions): UseChatSessionReturn {
   const { getAccessToken } = useAuth();
@@ -235,12 +256,16 @@ export function useChatSession({
   >(null);
   const [systemPromptTokenCountLoading, setSystemPromptTokenCountLoading] =
     useState(false);
-  const [requireToolApproval, setRequireToolApproval] = useState(false);
+  const [requireToolApproval, setRequireToolApproval] = useState(
+    initialRequireToolApproval,
+  );
   const requireToolApprovalRef = useRef(requireToolApproval);
   requireToolApprovalRef.current = requireToolApproval;
   const skipNextForkDetectionRef = useRef(false);
   const pendingForkSessionIdRef = useRef<string | null>(null);
   const pendingForkMessagesRef = useRef<UIMessage[] | null>(null);
+  const hasResolvedAuthHeadersRef = useRef(false);
+  const authHeadersSignatureRef = useRef("");
 
   // Build available models
   const availableModels = useMemo(() => {
@@ -269,16 +294,25 @@ export function useChatSession({
   const { selectedModelId, setSelectedModelId } = usePersistedModel();
   const selectedModel = useMemo<ModelDefinition>(() => {
     const fallback = getDefaultModel(availableModels);
+    if (initialModelId) {
+      return (
+        availableModels.find((model) => String(model.id) === initialModelId) ??
+        fallback
+      );
+    }
     if (!selectedModelId) return fallback;
     const found = availableModels.find((m) => String(m.id) === selectedModelId);
     return found ?? fallback;
-  }, [availableModels, selectedModelId]);
+  }, [availableModels, initialModelId, selectedModelId]);
 
   const setSelectedModel = useCallback(
     (model: ModelDefinition) => {
+      if (initialModelId) {
+        return;
+      }
       setSelectedModelId(String(model.id));
     },
-    [setSelectedModelId],
+    [initialModelId, setSelectedModelId],
   );
 
   const isMcpJamModel = useMemo(() => {
@@ -325,6 +359,9 @@ export function useChatSession({
               selectedServerIds: hostedSelectedServerIds,
               accessScope: "chat_v2" as const,
               ...(hostedShareToken ? { shareToken: hostedShareToken } : {}),
+              ...(hostedSandboxToken
+                ? { sandboxToken: hostedSandboxToken }
+                : {}),
               ...(hostedOAuthTokens && Object.keys(hostedOAuthTokens).length > 0
                 ? { oauthTokens: hostedOAuthTokens }
                 : {}),
@@ -352,6 +389,7 @@ export function useChatSession({
     hostedSelectedServerIds,
     hostedOAuthTokens,
     hostedShareToken,
+    hostedSandboxToken,
     // requireToolApproval read from ref at request time
   ]);
 
@@ -373,9 +411,13 @@ export function useChatSession({
   });
 
   useSharedChatWidgetCapture({
-    enabled: HOSTED_MODE && !!hostedShareToken && isAuthenticated,
+    enabled:
+      HOSTED_MODE &&
+      Boolean(hostedShareToken || hostedSandboxToken) &&
+      isAuthenticated,
     chatSessionId,
     hostedShareToken,
+    hostedSandboxToken,
     messages,
   });
 
@@ -459,35 +501,70 @@ export function useChatSession({
   useEffect(() => {
     let active = true;
     (async () => {
+      let nextAuthHeaders: Record<string, string> | undefined;
+
       try {
-        const token = await getAccessToken?.();
-        if (!active) return;
-        if (token) {
-          setAuthHeaders({ Authorization: `Bearer ${token}` });
+        if (HOSTED_MODE) {
+          const hostedHeader = await getHostedAuthorizationHeader();
+          if (!active) return;
+          nextAuthHeaders = hostedHeader
+            ? { Authorization: hostedHeader }
+            : undefined;
         } else {
-          setAuthHeaders(undefined);
+          const token = await getAccessToken?.();
+          if (!active) return;
+          if (token) {
+            nextAuthHeaders = { Authorization: `Bearer ${token}` };
+          } else {
+            nextAuthHeaders = undefined;
+          }
         }
       } catch (err) {
         console.error("[useChatSession] Failed to get access token:", err);
         if (!active) return;
-        setAuthHeaders(undefined);
+        nextAuthHeaders = undefined;
       }
-      // Reset chat to force new session with updated auth headers
-      // This ensures the transport is recreated with the correct headers
-      if (active) {
-        skipNextForkDetectionRef.current = true;
-        pendingForkSessionIdRef.current = null;
-        pendingForkMessagesRef.current = null;
-        setChatSessionId(generateId());
-        setMessages([]);
-        onResetRef.current?.();
+
+      if (!active) return;
+
+      setAuthHeaders(nextAuthHeaders);
+
+      const nextAuthHeadersSignature = getAuthHeadersSignature(nextAuthHeaders);
+      if (!hasResolvedAuthHeadersRef.current) {
+        hasResolvedAuthHeadersRef.current = true;
+        authHeadersSignatureRef.current = nextAuthHeadersSignature;
+        return;
       }
+
+      if (authHeadersSignatureRef.current === nextAuthHeadersSignature) {
+        return;
+      }
+
+      authHeadersSignatureRef.current = nextAuthHeadersSignature;
+      skipNextForkDetectionRef.current = true;
+      pendingForkSessionIdRef.current = null;
+      pendingForkMessagesRef.current = null;
+      setChatSessionId(generateId());
+      setMessages([]);
+      onResetRef.current?.();
     })();
     return () => {
       active = false;
     };
   }, [getAccessToken, setMessages]);
 
+  useEffect(() => {
+    setSystemPrompt(initialSystemPrompt);
+  }, [initialSystemPrompt]);
+
+  useEffect(() => {
+    setTemperature(initialTemperature);
+  }, [initialTemperature]);
+
+  useEffect(() => {
+    setRequireToolApproval(initialRequireToolApproval);
+  }, [initialRequireToolApproval]);
+
   // Ollama model detection
   useEffect(() => {
     if (HOSTED_MODE) {
@@ -556,7 +633,12 @@ export function useChatSession({
             : null,
         );
       } catch (error) {
-        if (!(hostedShareToken && isAuthDeniedError(error))) {
+        if (
+          !(
+            Boolean(hostedShareToken || hostedSandboxToken) &&
+            isAuthDeniedError(error)
+          )
+        ) {
           console.warn(
             "[useChatSession] Failed to fetch tools metadata:",
             error,
@@ -571,7 +653,7 @@ export function useChatSession({
     };
 
     fetchToolsMetadata();
-  }, [selectedServers, selectedModel, hostedShareToken]);
+  }, [selectedServers, selectedModel, hostedShareToken, hostedSandboxToken]);
 
   // System prompt token count
   useEffect(() => {
@@ -590,7 +672,12 @@ export function useChatSession({
         const count = await countTextTokens(systemPrompt, modelId);
         setSystemPromptTokenCount(count > 0 ? count : null);
       } catch (error) {
-        if (!(hostedShareToken && isAuthDeniedError(error))) {
+        if (
+          !(
+            Boolean(hostedShareToken || hostedSandboxToken) &&
+            isAuthDeniedError(error)
+          )
+        ) {
           console.warn(
             "[useChatSession] Failed to count system prompt tokens:",
             error,
@@ -603,7 +690,7 @@ export function useChatSession({
     };
 
     fetchSystemPromptTokenCount();
-  }, [systemPrompt, selectedModel, hostedShareToken]);
+  }, [systemPrompt, selectedModel, hostedShareToken, hostedSandboxToken]);
 
   // Reset chat when selected servers change
   const previousSelectedServersRef = useRef<string[]>(selectedServers);
@@ -651,11 +738,10 @@ export function useChatSession({
 
   // Computed state for UI
   const requiresAuthForChat = HOSTED_MODE || isMcpJamModel;
-  const isAuthReady =
-    !requiresAuthForChat || (isAuthenticated && !!authHeaders);
-  const disableForAuthentication = !isAuthenticated && requiresAuthForChat;
-  const authHeadersNotReady =
-    requiresAuthForChat && isAuthenticated && !authHeaders;
+  const isAuthReady = !requiresAuthForChat || !!authHeaders;
+  const disableForAuthentication =
+    !HOSTED_MODE && !isAuthenticated && requiresAuthForChat;
+  const authHeadersNotReady = requiresAuthForChat && !authHeaders;
   const hostedContextNotReady =
     HOSTED_MODE &&
     (!hostedWorkspaceId ||
diff --git a/mcpjam-inspector/client/src/hooks/use-server-state.ts b/mcpjam-inspector/client/src/hooks/use-server-state.ts
index 1f4d2b2b4..41bd5016d 100644
--- a/mcpjam-inspector/client/src/hooks/use-server-state.ts
+++ b/mcpjam-inspector/client/src/hooks/use-server-state.ts
@@ -26,10 +26,10 @@ import {
   clearOAuthData,
   initiateOAuth,
 } from "@/lib/oauth/mcp-oauth";
+import { getHostedOAuthCallbackContext } from "@/lib/hosted-oauth-callback";
 import { HOSTED_MODE } from "@/lib/config";
 import { injectHostedServerMapping } from "@/lib/apis/web/context";
 import type { OAuthTestProfile } from "@/lib/oauth/profile";
-import { SHARED_OAUTH_PENDING_KEY } from "@/lib/shared-server-session";
 import { authFetch } from "@/lib/session-token";
 import { useUIPlaygroundStore } from "@/stores/ui-playground-store";
 import { useServerMutations, type RemoteServer } from "./useWorkspaces";
@@ -495,9 +495,12 @@ export function useServerState({
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get("code");
     const error = urlParams.get("error");
+    const hostedOAuthCallbackContext = HOSTED_MODE
+      ? getHostedOAuthCallbackContext()
+      : null;
     if (code) {
-      if (localStorage.getItem(SHARED_OAUTH_PENDING_KEY)) {
-        return; // Handled by App.tsx shared OAuth interception
+      if (hostedOAuthCallbackContext) {
+        return; // Handled by App.tsx hosted OAuth interception
       }
       if (oauthCallbackHandledRef.current) {
         return;
@@ -513,6 +516,9 @@ export function useServerState({
 
       handleOAuthCallbackComplete(code);
     } else if (error) {
+      if (hostedOAuthCallbackContext) {
+        return; // Handled by App.tsx hosted OAuth interception
+      }
       toast.error(`OAuth authorization failed: ${error}`);
       localStorage.removeItem("mcp-oauth-pending");
       window.history.replaceState({}, document.title, window.location.pathname);
diff --git a/mcpjam-inspector/client/src/hooks/useSandboxes.ts b/mcpjam-inspector/client/src/hooks/useSandboxes.ts
new file mode 100644
index 000000000..3e5727565
--- /dev/null
+++ b/mcpjam-inspector/client/src/hooks/useSandboxes.ts
@@ -0,0 +1,131 @@
+import { useMutation, useQuery } from "convex/react";
+import type { SandboxHostStyle } from "@/lib/sandbox-host-style";
+
+export type SandboxMode = "any_signed_in_with_link" | "invited_only";
+
+export interface SandboxMember {
+  _id: string;
+  sandboxId: string;
+  workspaceId: string;
+  email: string;
+  userId?: string;
+  role: "chat";
+  invitedBy: string;
+  invitedAt: number;
+  revokedAt?: number;
+  acceptedAt?: number;
+  user: {
+    _id: string;
+    name: string;
+    email: string;
+    imageUrl: string;
+  } | null;
+}
+
+export interface SandboxServerSettings {
+  serverId: string;
+  serverName: string;
+  useOAuth: boolean;
+  serverUrl: string | null;
+  clientId: string | null;
+  oauthScopes: string[] | null;
+}
+
+export interface SandboxSettings {
+  sandboxId: string;
+  workspaceId: string;
+  name: string;
+  description?: string;
+  hostStyle: SandboxHostStyle;
+  systemPrompt: string;
+  modelId: string;
+  temperature: number;
+  requireToolApproval: boolean;
+  allowGuestAccess: boolean;
+  mode: SandboxMode;
+  servers: SandboxServerSettings[];
+  link: {
+    token: string;
+    path: string;
+    url: string;
+    rotatedAt: number;
+    updatedAt: number;
+  } | null;
+  members: SandboxMember[];
+}
+
+export interface SandboxListItem {
+  sandboxId: string;
+  workspaceId: string;
+  name: string;
+  description?: string;
+  hostStyle: SandboxHostStyle;
+  mode: SandboxMode;
+  allowGuestAccess: boolean;
+  serverCount: number;
+  serverNames: string[];
+  createdAt: number;
+  updatedAt: number;
+}
+
+export function useSandboxList({
+  isAuthenticated,
+  workspaceId,
+}: {
+  isAuthenticated: boolean;
+  workspaceId: string | null;
+}) {
+  const sandboxes = useQuery(
+    "sandboxes:listSandboxes" as any,
+    isAuthenticated && workspaceId ? ({ workspaceId } as any) : "skip",
+  ) as SandboxListItem[] | undefined;
+
+  return {
+    sandboxes,
+    isLoading: isAuthenticated && !!workspaceId && sandboxes === undefined,
+  };
+}
+
+export function useSandbox({
+  isAuthenticated,
+  sandboxId,
+}: {
+  isAuthenticated: boolean;
+  sandboxId: string | null;
+}) {
+  const sandbox = useQuery(
+    "sandboxes:getSandbox" as any,
+    isAuthenticated && sandboxId ? ({ sandboxId } as any) : "skip",
+  ) as SandboxSettings | null | undefined;
+
+  return {
+    sandbox,
+    isLoading: isAuthenticated && !!sandboxId && sandbox === undefined,
+  };
+}
+
+export function useSandboxMutations() {
+  const createSandbox = useMutation("sandboxes:createSandbox" as any);
+  const duplicateSandbox = useMutation("sandboxes:duplicateSandbox" as any);
+  const updateSandbox = useMutation("sandboxes:updateSandbox" as any);
+  const deleteSandbox = useMutation("sandboxes:deleteSandbox" as any);
+  const setSandboxMode = useMutation("sandboxes:setSandboxMode" as any);
+  const rotateSandboxLink = useMutation("sandboxes:rotateSandboxLink" as any);
+  const upsertSandboxMember = useMutation(
+    "sandboxes:upsertSandboxMember" as any,
+  );
+  const removeSandboxMember = useMutation(
+    "sandboxes:removeSandboxMember" as any,
+  );
+
+  return {
+    createSandbox,
+    duplicateSandbox,
+    updateSandbox,
+    deleteSandbox,
+    setSandboxMode,
+    rotateSandboxLink,
+    upsertSandboxMember,
+    removeSandboxMember,
+  };
+}
diff --git a/mcpjam-inspector/client/src/hooks/useSharedChatThreads.ts b/mcpjam-inspector/client/src/hooks/useSharedChatThreads.ts
index e05b7aa0e..f78285d55 100644
--- a/mcpjam-inspector/client/src/hooks/useSharedChatThreads.ts
+++ b/mcpjam-inspector/client/src/hooks/useSharedChatThreads.ts
@@ -1,10 +1,14 @@
 import { useQuery } from "convex/react";
 
+export type SharedChatSourceType = "serverShare" | "sandbox";
+
 export interface SharedChatThread {
   _id: string;
-  shareId: string;
+  sourceType: SharedChatSourceType;
+  shareId?: string;
+  sandboxId?: string;
   chatSessionId: string;
-  serverId: string;
+  serverId?: string;
   visitorUserId: string;
   visitorDisplayName: string;
   modelId: string;
@@ -20,6 +24,7 @@ export interface SharedChatWidgetSnapshot {
   threadId: string;
   toolCallId: string;
   toolName: string;
+  serverId: string;
   uiType: "mcp-apps" | "openai-apps";
   resourceUri?: string;
   widgetCsp: Record<string, unknown> | null;
@@ -30,14 +35,28 @@ export interface SharedChatWidgetSnapshot {
 }
 
 export function useSharedChatThreadList({
-  shareId,
+  sourceType,
+  sourceId,
 }: {
-  shareId: string | null;
+  sourceType: SharedChatSourceType;
+  sourceId: string | null;
 }) {
-  const threads = useQuery(
-    "sharedChatThreads:listByShare" as any,
-    shareId ? ({ shareId, limit: 50 } as any) : "skip",
-  ) as SharedChatThread[] | undefined;
+  const queryName =
+    sourceType === "sandbox"
+      ? "sharedChatThreads:listBySandbox"
+      : "sharedChatThreads:listByShare";
+  const queryArgs =
+    sourceType === "sandbox"
+      ? sourceId
+        ? ({ sandboxId: sourceId, limit: 50 } as any)
+        : "skip"
+      : sourceId
+        ? ({ shareId: sourceId, limit: 50 } as any)
+        : "skip";
+
+  const threads = useQuery(queryName as any, queryArgs) as
+    | SharedChatThread[]
+    | undefined;
 
   return { threads };
 }
diff --git a/mcpjam-inspector/client/src/hooks/useSharedChatWidgetCapture.ts b/mcpjam-inspector/client/src/hooks/useSharedChatWidgetCapture.ts
index ea842c6c5..af9734051 100644
--- a/mcpjam-inspector/client/src/hooks/useSharedChatWidgetCapture.ts
+++ b/mcpjam-inspector/client/src/hooks/useSharedChatWidgetCapture.ts
@@ -3,7 +3,10 @@ import { useMutation } from "convex/react";
 import type { UIMessage } from "@ai-sdk/react";
 import type { DisplayContext, WidgetCsp } from "./useViews";
 import { detectUIType, getUIResourceUri } from "@/lib/mcp-ui/mcp-apps-utils";
-import { readToolResultMeta } from "@/lib/tool-result-utils";
+import {
+  readToolResultMeta,
+  readToolResultServerId,
+} from "@/lib/tool-result-utils";
 import {
   useWidgetDebugStore,
   type WidgetDebugInfo,
@@ -13,6 +16,7 @@ interface UseSharedChatWidgetCaptureOptions {
   enabled: boolean;
   chatSessionId: string;
   hostedShareToken?: string;
+  hostedSandboxToken?: string;
   messages: UIMessage[];
 }
 
@@ -21,6 +25,7 @@ interface ToolSnapshotSource {
   input: unknown;
   rawOutput: unknown;
   resourceUri?: string;
+  serverId?: string;
 }
 
 function hashString(value: string): string {
@@ -79,6 +84,7 @@ function buildToolSourceMap(
         resourceUri:
           getUIResourceUri(detectUIType(toolMeta, rawOutput), toolMeta) ??
           undefined,
+        serverId: readToolResultServerId(rawOutput),
       });
     }
   }
@@ -149,6 +155,7 @@ export function useSharedChatWidgetCapture({
   enabled,
   chatSessionId,
   hostedShareToken,
+  hostedSandboxToken,
   messages,
 }: UseSharedChatWidgetCaptureOptions): void {
   const widgets = useWidgetDebugStore((state) => state.widgets);
@@ -180,6 +187,7 @@ export function useSharedChatWidgetCapture({
   const widgetsRef = useRef(widgets);
   const sessionIdRef = useRef(chatSessionId);
   const shareTokenRef = useRef(hostedShareToken);
+  const sandboxTokenRef = useRef(hostedSandboxToken);
   const uploadAttemptRef = useRef<(toolCallId: string) => Promise<void>>(
     async () => {},
   );
@@ -195,6 +203,7 @@ export function useSharedChatWidgetCapture({
   useEffect(() => {
     sessionIdRef.current = chatSessionId;
     shareTokenRef.current = hostedShareToken;
+    sandboxTokenRef.current = hostedSandboxToken;
     uploadedHashesRef.current.clear();
     cachedBlobsRef.current.clear();
     retryCountRef.current.clear();
@@ -204,7 +213,7 @@ export function useSharedChatWidgetCapture({
     }
     pendingTimersRef.current.clear();
     inFlightRef.current.clear();
-  }, [chatSessionId, hostedShareToken]);
+  }, [chatSessionId, hostedSandboxToken, hostedShareToken]);
 
   useEffect(() => {
     return () => {
@@ -218,7 +227,12 @@ export function useSharedChatWidgetCapture({
 
   uploadAttemptRef.current = async (toolCallId: string) => {
     const shareToken = shareTokenRef.current;
-    if (!enabled || !shareToken || inFlightRef.current.has(toolCallId)) {
+    const sandboxToken = sandboxTokenRef.current;
+    if (
+      !enabled ||
+      (!shareToken && !sandboxToken) ||
+      inFlightRef.current.has(toolCallId)
+    ) {
       return;
     }
 
@@ -228,6 +242,9 @@ export function useSharedChatWidgetCapture({
     if (!widget?.widgetHtml || !toolSource) {
       return;
     }
+    if (sandboxToken && !toolSource.serverId) {
+      return;
+    }
 
     const htmlHash = hashString(widget.widgetHtml);
     if (uploadedHashesRef.current.get(toolCallId) === htmlHash) {
@@ -240,7 +257,10 @@ export function useSharedChatWidgetCapture({
       content: BlobPart,
       contentType: string,
     ): Promise<string> => {
-      const uploadUrl = await generateSnapshotUploadUrl({ shareToken });
+      const uploadUrl = await generateSnapshotUploadUrl({
+        ...(shareToken ? { shareToken } : {}),
+        ...(sandboxToken ? { sandboxToken } : {}),
+      });
       const response = await fetch(uploadUrl, {
         method: "POST",
         body: new Blob([content], { type: contentType }),
@@ -284,8 +304,10 @@ export function useSharedChatWidgetCapture({
       }
 
       await createWidgetSnapshot({
-        shareToken,
+        ...(shareToken ? { shareToken } : {}),
+        ...(sandboxToken ? { sandboxToken } : {}),
         chatSessionId: sessionIdRef.current,
+        ...(toolSource.serverId ? { serverId: toolSource.serverId } : {}),
         toolCallId,
         toolName: toolSource.toolName,
         widgetHtmlBlobId: cached.widgetHtmlBlobId,
@@ -343,7 +365,7 @@ export function useSharedChatWidgetCapture({
   };
 
   useEffect(() => {
-    if (!enabled || !hostedShareToken) {
+    if (!enabled || (!hostedShareToken && !hostedSandboxToken)) {
       return;
     }
 
@@ -372,5 +394,5 @@ export function useSharedChatWidgetCapture({
 
       pendingTimersRef.current.set(toolCallId, timer);
     }
-  }, [enabled, hostedShareToken, widgets, messages]);
+  }, [enabled, hostedSandboxToken, hostedShareToken, widgets, messages]);
 }
diff --git a/mcpjam-inspector/client/src/hooks/useViews.ts b/mcpjam-inspector/client/src/hooks/useViews.ts
index 73910bfe8..024494900 100644
--- a/mcpjam-inspector/client/src/hooks/useViews.ts
+++ b/mcpjam-inspector/client/src/hooks/useViews.ts
@@ -201,6 +201,7 @@ export function useWorkspaceServers({
         name: string;
         workspaceId: string;
         transportType: "stdio" | "http";
+        url?: string;
       }>
     | undefined;
 
diff --git a/mcpjam-inspector/client/src/index.css b/mcpjam-inspector/client/src/index.css
index ca11e82cc..25a3c852a 100644
--- a/mcpjam-inspector/client/src/index.css
+++ b/mcpjam-inspector/client/src/index.css
@@ -5,6 +5,7 @@
 @import "./styles/presets/brutalist.css";
 @import "./styles/presets/soft-pop.css";
 @import "./styles/presets/tangerine.css";
+@import "./styles/host-mimicry.css";
 
 @source "../../node_modules/streamdown/dist/*.js";
 
diff --git a/mcpjam-inspector/client/src/lib/__tests__/hosted-navigation.test.ts b/mcpjam-inspector/client/src/lib/__tests__/hosted-navigation.test.ts
index c3435dcef..0cf3e6f6b 100644
--- a/mcpjam-inspector/client/src/lib/__tests__/hosted-navigation.test.ts
+++ b/mcpjam-inspector/client/src/lib/__tests__/hosted-navigation.test.ts
@@ -45,4 +45,12 @@ describe("hosted-navigation", () => {
     expect(resolved.normalizedTab).toBe("ci-evals");
     expect(resolved.isBlocked).toBe(false);
   });
+
+  it("treats sandboxes as a normal hosted app tab", () => {
+    const resolved = resolveHostedNavigation("#sandboxes", true);
+    expect(resolved.normalizedTab).toBe("sandboxes");
+    expect(resolved.isBlocked).toBe(false);
+    expect(resolved.shouldSelectAllServers).toBe(false);
+    expect(resolved.shouldClearChatMessages).toBe(true);
+  });
 });
diff --git a/mcpjam-inspector/client/src/lib/__tests__/hosted-oauth-resume.test.ts b/mcpjam-inspector/client/src/lib/__tests__/hosted-oauth-resume.test.ts
new file mode 100644
index 000000000..84268da31
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/__tests__/hosted-oauth-resume.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { sanitizeHostedOAuthErrorMessage } from "@/lib/hosted-oauth-resume";
+
+describe("sanitizeHostedOAuthErrorMessage", () => {
+  it("maps transport-heavy 401 errors to user-friendly copy", () => {
+    expect(
+      sanitizeHostedOAuthErrorMessage(
+        'Authentication failed for MCP server "mn70g96re2qn05cxjw7y4y26ah82jzgh": SSE error: SSE error: Non-200 status code (401)',
+        "Authorization could not be completed. Try again.",
+      ),
+    ).toBe(
+      "Your authorization expired or was rejected. Authorize again to continue.",
+    );
+  });
+
+  it("strips stack trace wrappers before applying copy rules", () => {
+    expect(
+      sanitizeHostedOAuthErrorMessage(
+        "Uncaught Error: invalid_token from hosted validation at async handler (oauth.ts:42:7)",
+        "Authorization could not be completed. Try again.",
+      ),
+    ).toBe(
+      "Your authorization expired or was rejected. Authorize again to continue.",
+    );
+  });
+
+  it("preserves already-safe plain-language errors", () => {
+    expect(
+      sanitizeHostedOAuthErrorMessage(
+        "Authorization was cancelled. Try again.",
+        "Authorization could not be completed. Try again.",
+      ),
+    ).toBe("Authorization was cancelled. Try again.");
+  });
+});
diff --git a/mcpjam-inspector/client/src/lib/__tests__/hosted-tab-policy.test.ts b/mcpjam-inspector/client/src/lib/__tests__/hosted-tab-policy.test.ts
index e1aa514cc..2732aae54 100644
--- a/mcpjam-inspector/client/src/lib/__tests__/hosted-tab-policy.test.ts
+++ b/mcpjam-inspector/client/src/lib/__tests__/hosted-tab-policy.test.ts
@@ -26,6 +26,14 @@ describe("hosted-tab-policy", () => {
     expect(isHostedSidebarTabAllowed("ci-evals")).toBe(true);
   });
 
+  it("keeps sandboxes visible in hosted navigation", () => {
+    expect(HOSTED_SIDEBAR_ALLOWED_TABS).toContain("sandboxes");
+    expect(HOSTED_HASH_ALLOWED_TABS).toContain("sandboxes");
+    expect(isHostedSidebarTabAllowed("sandboxes")).toBe(true);
+    expect(isHostedHashTabAllowed("sandboxes")).toBe(true);
+    expect(isHostedHashTabBlocked("sandboxes")).toBe(false);
+  });
+
   it("allows profile and organizations hashes in hosted mode", () => {
     expect(HOSTED_HASH_ALLOWED_TABS).toContain("profile");
     expect(HOSTED_HASH_ALLOWED_TABS).toContain("organizations");
diff --git a/mcpjam-inspector/client/src/lib/__tests__/hosted-web-context.test.ts b/mcpjam-inspector/client/src/lib/__tests__/hosted-web-context.test.ts
index 597e1b91c..fffa81ee5 100644
--- a/mcpjam-inspector/client/src/lib/__tests__/hosted-web-context.test.ts
+++ b/mcpjam-inspector/client/src/lib/__tests__/hosted-web-context.test.ts
@@ -38,6 +38,29 @@ describe("hosted web context", () => {
     });
   });
 
+  it("includes sandbox token and chat_v2 scope for sandbox requests", () => {
+    setHostedApiContext({
+      workspaceId: "ws_sandbox",
+      serverIdsByName: { demo: "srv_demo" },
+      getAccessToken: async () => null,
+      sandboxToken: "sandbox_tok_123",
+    });
+
+    expect(buildHostedServerRequest("demo")).toEqual({
+      workspaceId: "ws_sandbox",
+      serverId: "srv_demo",
+      accessScope: "chat_v2",
+      sandboxToken: "sandbox_tok_123",
+    });
+
+    expect(buildHostedServerBatchRequest(["demo"])).toEqual({
+      workspaceId: "ws_sandbox",
+      serverIds: ["srv_demo"],
+      accessScope: "chat_v2",
+      sandboxToken: "sandbox_tok_123",
+    });
+  });
+
   it("omits share scope fields when no share token is present", () => {
     setHostedApiContext({
       workspaceId: "ws_regular",
diff --git a/mcpjam-inspector/client/src/lib/__tests__/sandbox-session.test.ts b/mcpjam-inspector/client/src/lib/__tests__/sandbox-session.test.ts
new file mode 100644
index 000000000..43e859c14
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/__tests__/sandbox-session.test.ts
@@ -0,0 +1,149 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  buildSandboxLink,
+  clearSandboxSession,
+  clearSandboxSignInReturnPath,
+  extractSandboxTokenFromPath,
+  hasActiveSandboxSession,
+  readSandboxSession,
+  readSandboxSignInReturnPath,
+  SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY,
+  writeSandboxSession,
+  writeSandboxSignInReturnPath,
+} from "../sandbox-session";
+
+describe("sandbox-session", () => {
+  beforeEach(() => {
+    clearSandboxSession();
+    clearSandboxSignInReturnPath();
+  });
+
+  it("extracts token from /sandbox/<slug>/<token> paths", () => {
+    expect(extractSandboxTokenFromPath("/sandbox/demo/abc123")).toBe("abc123");
+    expect(extractSandboxTokenFromPath("/sandbox/demo/abc%20123")).toBe(
+      "abc 123",
+    );
+    expect(extractSandboxTokenFromPath("/sandbox/onlyone")).toBeNull();
+    expect(extractSandboxTokenFromPath("/settings")).toBeNull();
+  });
+
+  it("detects an active sandbox session", () => {
+    expect(hasActiveSandboxSession()).toBe(false);
+
+    writeSandboxSession({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Demo Sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [],
+      },
+    });
+
+    expect(hasActiveSandboxSession()).toBe(true);
+  });
+
+  it("round-trips sandbox session storage", () => {
+    const payload = {
+      workspaceId: "ws_1",
+      sandboxId: "sbx_1",
+      name: "Sandbox",
+      description: "Hosted sandbox",
+      hostStyle: "chatgpt" as const,
+      mode: "any_signed_in_with_link" as const,
+      allowGuestAccess: true,
+      viewerIsWorkspaceMember: false,
+      systemPrompt: "System prompt",
+      modelId: "openai/gpt-5-mini",
+      temperature: 0.7,
+      requireToolApproval: false,
+      servers: [
+        {
+          serverId: "srv_1",
+          serverName: "Bench",
+          useOAuth: true,
+          serverUrl: "https://example.com/mcp",
+          clientId: "client_1",
+          oauthScopes: ["read"],
+        },
+      ],
+    };
+
+    writeSandboxSession({ token: "sandbox-token", payload });
+
+    expect(readSandboxSession()).toEqual({
+      token: "sandbox-token",
+      payload,
+    });
+  });
+
+  it("defaults missing hostStyle to claude for legacy sandbox sessions", () => {
+    sessionStorage.setItem(
+      "mcpjam_sandbox_session_v1",
+      JSON.stringify({
+        token: "sandbox-token",
+        payload: {
+          workspaceId: "ws_1",
+          sandboxId: "sbx_1",
+          name: "Legacy Sandbox",
+          mode: "invited_only",
+          allowGuestAccess: false,
+          viewerIsWorkspaceMember: true,
+          systemPrompt: "You are helpful.",
+          modelId: "openai/gpt-5-mini",
+          temperature: 0.4,
+          requireToolApproval: true,
+          servers: [],
+        },
+      }),
+    );
+
+    expect(readSandboxSession()).toEqual({
+      token: "sandbox-token",
+      payload: {
+        workspaceId: "ws_1",
+        sandboxId: "sbx_1",
+        name: "Legacy Sandbox",
+        hostStyle: "claude",
+        mode: "invited_only",
+        allowGuestAccess: false,
+        viewerIsWorkspaceMember: true,
+        systemPrompt: "You are helpful.",
+        modelId: "openai/gpt-5-mini",
+        temperature: 0.4,
+        requireToolApproval: true,
+        servers: [],
+      },
+    });
+  });
+
+  it("round-trips sandbox sign-in return path", () => {
+    writeSandboxSignInReturnPath("/sandbox/demo/token-123");
+    expect(readSandboxSignInReturnPath()).toBe("/sandbox/demo/token-123");
+
+    clearSandboxSignInReturnPath();
+    expect(readSandboxSignInReturnPath()).toBeNull();
+  });
+
+  it("ignores non-sandbox sign-in return paths", () => {
+    writeSandboxSignInReturnPath("/servers");
+    expect(readSandboxSignInReturnPath()).toBeNull();
+
+    localStorage.setItem(SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY, "/servers");
+    expect(readSandboxSignInReturnPath()).toBeNull();
+  });
+
+  it("builds sandbox links from the current browser origin", () => {
+    expect(buildSandboxLink("token 123", "Demo Sandbox")).toBe(
+      `${window.location.origin}/sandbox/demo-sandbox/token%20123`,
+    );
+  });
+});
diff --git a/mcpjam-inspector/client/src/lib/__tests__/session-token.hosted-retry.test.ts b/mcpjam-inspector/client/src/lib/__tests__/session-token.hosted-retry.test.ts
index d127abad4..411cd1067 100644
--- a/mcpjam-inspector/client/src/lib/__tests__/session-token.hosted-retry.test.ts
+++ b/mcpjam-inspector/client/src/lib/__tests__/session-token.hosted-retry.test.ts
@@ -24,7 +24,7 @@ vi.mock("@/lib/apis/web/context", async () => {
     ...actual,
     getHostedAuthorizationHeader: vi.fn(),
     resetTokenCache: vi.fn(),
-    isGuestMode: vi.fn(),
+    shouldRetryHostedAuth401: vi.fn(),
   };
 });
 
@@ -33,7 +33,7 @@ import { forceRefreshGuestSession } from "@/lib/guest-session";
 import {
   getHostedAuthorizationHeader,
   resetTokenCache,
-  isGuestMode,
+  shouldRetryHostedAuth401,
 } from "@/lib/apis/web/context";
 
 describe("authFetch hosted 401 retry", () => {
@@ -41,7 +41,7 @@ describe("authFetch hosted 401 retry", () => {
     vi.mocked(getHostedAuthorizationHeader).mockReset();
     vi.mocked(resetTokenCache).mockReset();
     vi.mocked(forceRefreshGuestSession).mockReset();
-    vi.mocked(isGuestMode).mockReturnValue(true);
+    vi.mocked(shouldRetryHostedAuth401).mockReturnValue(true);
     vi.mocked(global.fetch).mockReset();
   });
 
@@ -49,7 +49,7 @@ describe("authFetch hosted 401 retry", () => {
     vi.restoreAllMocks();
   });
 
-  it("retries with fresh token on 401 in guest mode", async () => {
+  it("retries with fresh token on 401 when hosted auth is guest-backed", async () => {
     vi.mocked(getHostedAuthorizationHeader).mockResolvedValueOnce(
       "Bearer stale-token",
     );
@@ -138,8 +138,8 @@ describe("authFetch hosted 401 retry", () => {
     expect(global.fetch).toHaveBeenCalledTimes(1);
   });
 
-  it("does not retry when not in guest mode", async () => {
-    vi.mocked(isGuestMode).mockReturnValue(false);
+  it("does not retry when hosted auth is fully authenticated", async () => {
+    vi.mocked(shouldRetryHostedAuth401).mockReturnValue(false);
     vi.mocked(getHostedAuthorizationHeader).mockResolvedValueOnce(
       "Bearer workos-token",
     );
diff --git a/mcpjam-inspector/client/src/lib/__tests__/shared-server-session.test.ts b/mcpjam-inspector/client/src/lib/__tests__/shared-server-session.test.ts
index e566864ea..7eb46c4f9 100644
--- a/mcpjam-inspector/client/src/lib/__tests__/shared-server-session.test.ts
+++ b/mcpjam-inspector/client/src/lib/__tests__/shared-server-session.test.ts
@@ -3,6 +3,7 @@ import {
   clearSharedSignInReturnPath,
   clearSharedServerSession,
   extractSharedTokenFromPath,
+  getShareableAppOrigin,
   hasActiveSharedSession,
   readSharedSignInReturnPath,
   readSharedServerSession,
@@ -144,4 +145,8 @@ describe("shared-server-session", () => {
     localStorage.setItem(SHARED_SIGN_IN_RETURN_PATH_STORAGE_KEY, "/servers");
     expect(readSharedSignInReturnPath()).toBeNull();
   });
+
+  it("uses the current browser origin for share links in web contexts", () => {
+    expect(getShareableAppOrigin()).toBe(window.location.origin);
+  });
 });
diff --git a/mcpjam-inspector/client/src/lib/apis/web/context.ts b/mcpjam-inspector/client/src/lib/apis/web/context.ts
index ebae07c08..0534c5754 100644
--- a/mcpjam-inspector/client/src/lib/apis/web/context.ts
+++ b/mcpjam-inspector/client/src/lib/apis/web/context.ts
@@ -10,6 +10,7 @@ export interface HostedApiContext {
   oauthTokensByServerId?: Record<string, string>;
   guestOauthTokensByServerName?: Record<string, string>;
   shareToken?: string;
+  sandboxToken?: string;
   isAuthenticated?: boolean;
   /** Maps server name → MCPServerConfig for guest mode (no Convex). */
   serverConfigs?: Record<string, unknown>;
@@ -47,6 +48,11 @@ export function isGuestMode(): boolean {
   return !hostedApiContext.workspaceId && !hostedApiContext.isAuthenticated;
 }
 
+export function shouldRetryHostedAuth401(): boolean {
+  if (!HOSTED_MODE) return false;
+  return !hostedApiContext.isAuthenticated;
+}
+
 function buildGuestServerRequest(
   config: unknown,
   oauthAccessToken?: string,
@@ -148,8 +154,14 @@ export function getHostedShareToken(): string | undefined {
   return hostedApiContext.shareToken;
 }
 
+export function getHostedSandboxToken(): string | undefined {
+  return hostedApiContext.sandboxToken;
+}
+
 function getHostedAccessScope(): HostedAccessScope | undefined {
-  return getHostedShareToken() ? "chat_v2" : undefined;
+  return getHostedShareToken() || getHostedSandboxToken()
+    ? "chat_v2"
+    : undefined;
 }
 
 export function buildHostedServerRequest(
@@ -174,6 +186,7 @@ export function buildHostedServerRequest(
   const serverId = resolveHostedServerId(serverNameOrId);
   const oauthToken = getHostedOAuthToken(serverId);
   const shareToken = getHostedShareToken();
+  const sandboxToken = getHostedSandboxToken();
   const accessScope = getHostedAccessScope();
   return {
     workspaceId: getHostedWorkspaceId(),
@@ -181,6 +194,7 @@ export function buildHostedServerRequest(
     ...(oauthToken ? { oauthAccessToken: oauthToken } : {}),
     ...(accessScope ? { accessScope } : {}),
     ...(shareToken ? { shareToken } : {}),
+    ...(sandboxToken ? { sandboxToken } : {}),
   };
 }
 
@@ -190,10 +204,12 @@ export function buildHostedServerBatchRequest(serverNamesOrIds: string[]): {
   oauthTokens?: Record<string, string>;
   accessScope?: HostedAccessScope;
   shareToken?: string;
+  sandboxToken?: string;
 } {
   const serverIds = resolveHostedServerIds(serverNamesOrIds);
   const oauthTokens = buildHostedOAuthTokensMap(serverIds);
   const shareToken = getHostedShareToken();
+  const sandboxToken = getHostedSandboxToken();
   const accessScope = getHostedAccessScope();
   return {
     workspaceId: getHostedWorkspaceId(),
@@ -201,6 +217,7 @@ export function buildHostedServerBatchRequest(serverNamesOrIds: string[]): {
     ...(oauthTokens ? { oauthTokens } : {}),
     ...(accessScope ? { accessScope } : {}),
     ...(shareToken ? { shareToken } : {}),
+    ...(sandboxToken ? { sandboxToken } : {}),
   };
 }
 
diff --git a/mcpjam-inspector/client/src/lib/apis/web/servers-api.ts b/mcpjam-inspector/client/src/lib/apis/web/servers-api.ts
index 2b8f147ad..c4c2309c4 100644
--- a/mcpjam-inspector/client/src/lib/apis/web/servers-api.ts
+++ b/mcpjam-inspector/client/src/lib/apis/web/servers-api.ts
@@ -7,6 +7,21 @@ export interface HostedServerValidateResponse {
   initInfo?: Record<string, unknown> | null;
 }
 
+export interface HostedServerOAuthRequirementResponse {
+  useOAuth: boolean;
+  serverUrl: string | null;
+}
+
+export async function checkHostedServerOAuthRequirement(
+  serverNameOrId: string,
+): Promise<HostedServerOAuthRequirementResponse> {
+  const request = buildHostedServerRequest(serverNameOrId);
+  return webPost<typeof request, HostedServerOAuthRequirementResponse>(
+    "/api/web/servers/check-oauth",
+    request,
+  );
+}
+
 export async function validateHostedServer(
   serverNameOrId: string,
   oauthAccessToken?: string,
diff --git a/mcpjam-inspector/client/src/lib/hosted-oauth-callback.ts b/mcpjam-inspector/client/src/lib/hosted-oauth-callback.ts
new file mode 100644
index 000000000..b03aa015f
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/hosted-oauth-callback.ts
@@ -0,0 +1,240 @@
+import type { HostedOAuthSurface } from "@/lib/hosted-oauth-resume";
+import {
+  readSandboxSession,
+  SANDBOX_OAUTH_PENDING_KEY,
+} from "@/lib/sandbox-session";
+import {
+  readSharedServerSession,
+  SHARED_OAUTH_PENDING_KEY,
+  slugify,
+} from "@/lib/shared-server-session";
+
+export interface HostedOAuthPendingMarker {
+  surface: HostedOAuthSurface;
+  serverName: string;
+  serverUrl: string | null;
+  returnHash: string | null;
+  startedAt: number;
+}
+
+export interface HostedOAuthCallbackContext extends HostedOAuthPendingMarker {}
+
+export const HOSTED_OAUTH_PENDING_STORAGE_KEY = "mcp-hosted-oauth-pending";
+
+const HOSTED_OAUTH_PENDING_TTL_MS = 10 * 60 * 1000;
+
+export function normalizeHostedOAuthServerName(
+  serverName?: string | null,
+): string {
+  return serverName?.trim().toLowerCase() ?? "";
+}
+
+function normalizeHostedOAuthReturnHash(
+  hashValue?: string | null,
+): string | null {
+  const trimmed = hashValue?.trim() ?? "";
+  if (!trimmed) {
+    return null;
+  }
+
+  return trimmed.startsWith("#") ? trimmed : `#${trimmed.replace(/^\/+/, "")}`;
+}
+
+export function matchesHostedOAuthServerIdentity(
+  left: {
+    serverName?: string | null;
+    serverUrl?: string | null;
+  },
+  right: {
+    serverName?: string | null;
+    serverUrl?: string | null;
+  },
+): boolean {
+  if (left.serverUrl && right.serverUrl && left.serverUrl === right.serverUrl) {
+    return true;
+  }
+
+  const leftName = normalizeHostedOAuthServerName(left.serverName);
+  const rightName = normalizeHostedOAuthServerName(right.serverName);
+  return !!leftName && !!rightName && leftName === rightName;
+}
+
+export function writeHostedOAuthPendingMarker(
+  marker: Omit<HostedOAuthPendingMarker, "startedAt">,
+): void {
+  try {
+    localStorage.setItem(
+      HOSTED_OAUTH_PENDING_STORAGE_KEY,
+      JSON.stringify({
+        ...marker,
+        serverUrl: marker.serverUrl ?? null,
+        returnHash: normalizeHostedOAuthReturnHash(marker.returnHash),
+        startedAt: Date.now(),
+      }),
+    );
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+export function readHostedOAuthPendingMarker(): HostedOAuthPendingMarker | null {
+  try {
+    const raw = localStorage.getItem(HOSTED_OAUTH_PENDING_STORAGE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<HostedOAuthPendingMarker> | null;
+    if (
+      !parsed ||
+      typeof parsed !== "object" ||
+      (parsed.surface !== "sandbox" && parsed.surface !== "shared") ||
+      typeof parsed.serverName !== "string" ||
+      typeof parsed.startedAt !== "number"
+    ) {
+      clearHostedOAuthPendingMarker();
+      return null;
+    }
+
+    if (Date.now() - parsed.startedAt > HOSTED_OAUTH_PENDING_TTL_MS) {
+      clearHostedOAuthPendingMarker();
+      return null;
+    }
+
+    return {
+      surface: parsed.surface,
+      serverName: parsed.serverName,
+      serverUrl: typeof parsed.serverUrl === "string" ? parsed.serverUrl : null,
+      returnHash: normalizeHostedOAuthReturnHash(parsed.returnHash),
+      startedAt: parsed.startedAt,
+    };
+  } catch {
+    clearHostedOAuthPendingMarker();
+    return null;
+  }
+}
+
+export function clearHostedOAuthPendingMarker(): void {
+  localStorage.removeItem(HOSTED_OAUTH_PENDING_STORAGE_KEY);
+}
+
+export function clearHostedOAuthLegacyPendingKeys(): void {
+  localStorage.removeItem(SHARED_OAUTH_PENDING_KEY);
+  localStorage.removeItem(SANDBOX_OAUTH_PENDING_KEY);
+}
+
+export function clearHostedOAuthPendingState(): void {
+  clearHostedOAuthPendingMarker();
+  clearHostedOAuthLegacyPendingKeys();
+}
+
+function inferHostedOAuthSurfaceFromSessions(
+  serverName: string,
+  serverUrl: string | null,
+): HostedOAuthSurface | null {
+  const hasSandboxLegacyPending = !!localStorage.getItem(
+    SANDBOX_OAUTH_PENDING_KEY,
+  );
+  const hasSharedLegacyPending = !!localStorage.getItem(
+    SHARED_OAUTH_PENDING_KEY,
+  );
+
+  if (hasSandboxLegacyPending !== hasSharedLegacyPending) {
+    return hasSandboxLegacyPending ? "sandbox" : "shared";
+  }
+
+  const sandboxSession = readSandboxSession();
+  const sharedSession = readSharedServerSession();
+
+  const sandboxMatch =
+    sandboxSession?.payload.servers.some((server) =>
+      matchesHostedOAuthServerIdentity(
+        {
+          serverName: server.serverName,
+          serverUrl: server.serverUrl,
+        },
+        { serverName, serverUrl },
+      ),
+    ) ?? false;
+  const sharedMatch =
+    sharedSession != null
+      ? matchesHostedOAuthServerIdentity(
+          {
+            serverName: sharedSession.payload.serverName,
+            serverUrl: sharedSession.payload.serverUrl,
+          },
+          { serverName, serverUrl },
+        )
+      : false;
+
+  if (sandboxMatch && !sharedMatch) {
+    return "sandbox";
+  }
+  if (sharedMatch && !sandboxMatch) {
+    return "shared";
+  }
+
+  if (sandboxSession && !sharedSession) {
+    return "sandbox";
+  }
+  if (sharedSession && !sandboxSession) {
+    return "shared";
+  }
+
+  return null;
+}
+
+export function getHostedOAuthCallbackContext(): HostedOAuthCallbackContext | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  if (!urlParams.get("code") && !urlParams.get("error")) {
+    return null;
+  }
+
+  const pendingMarker = readHostedOAuthPendingMarker();
+  if (pendingMarker) {
+    return pendingMarker;
+  }
+
+  const serverName = localStorage.getItem("mcp-oauth-pending")?.trim() ?? "";
+  if (!serverName) {
+    return null;
+  }
+
+  const serverUrl = localStorage.getItem(`mcp-serverUrl-${serverName}`);
+  const surface = inferHostedOAuthSurfaceFromSessions(serverName, serverUrl);
+  if (!surface) {
+    return null;
+  }
+
+  return {
+    surface,
+    serverName,
+    serverUrl,
+    returnHash: normalizeHostedOAuthReturnHash(
+      localStorage.getItem("mcp-oauth-return-hash"),
+    ),
+    startedAt: Date.now(),
+  };
+}
+
+export function resolveHostedOAuthReturnHash(
+  context: Pick<HostedOAuthCallbackContext, "surface" | "returnHash">,
+): string {
+  if (context.returnHash) {
+    return context.returnHash;
+  }
+
+  if (context.surface === "sandbox") {
+    const sandboxSession = readSandboxSession();
+    return sandboxSession
+      ? `#${slugify(sandboxSession.payload.name)}`
+      : "#sandbox";
+  }
+
+  const sharedSession = readSharedServerSession();
+  return sharedSession
+    ? `#${slugify(sharedSession.payload.serverName)}`
+    : "#shared";
+}
diff --git a/mcpjam-inspector/client/src/lib/hosted-oauth-required.ts b/mcpjam-inspector/client/src/lib/hosted-oauth-required.ts
new file mode 100644
index 000000000..1013f34d5
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/hosted-oauth-required.ts
@@ -0,0 +1,5 @@
+export interface HostedOAuthRequiredDetails {
+  serverUrl?: string | null;
+  serverId?: string | null;
+  serverName?: string | null;
+}
diff --git a/mcpjam-inspector/client/src/lib/hosted-oauth-resume.ts b/mcpjam-inspector/client/src/lib/hosted-oauth-resume.ts
new file mode 100644
index 000000000..74282fed6
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/hosted-oauth-resume.ts
@@ -0,0 +1,168 @@
+export type HostedOAuthSurface = "sandbox" | "shared";
+
+export type HostedOAuthStatus =
+  | "needs_auth"
+  | "launching"
+  | "resuming"
+  | "verifying"
+  | "ready"
+  | "error";
+
+export interface HostedOAuthResumeMarker {
+  surface: HostedOAuthSurface;
+  serverName: string;
+  serverUrl: string | null;
+  completedAt: number;
+  errorMessage?: string | null;
+}
+
+export interface HostedOAuthState {
+  status: HostedOAuthStatus;
+  errorMessage: string | null;
+  serverUrl: string | null;
+}
+
+export const HOSTED_OAUTH_RESUME_STORAGE_KEY = "mcp-hosted-oauth-resume";
+
+const HOSTED_OAUTH_RESUME_TTL_MS = 60_000;
+
+export function writeHostedOAuthResumeMarker(
+  marker: Omit<HostedOAuthResumeMarker, "completedAt">,
+): void {
+  try {
+    localStorage.setItem(
+      HOSTED_OAUTH_RESUME_STORAGE_KEY,
+      JSON.stringify({
+        ...marker,
+        serverUrl: marker.serverUrl ?? null,
+        errorMessage: marker.errorMessage ?? null,
+        completedAt: Date.now(),
+      }),
+    );
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+export function readHostedOAuthResumeMarker(
+  surface?: HostedOAuthSurface,
+): HostedOAuthResumeMarker | null {
+  try {
+    const raw = localStorage.getItem(HOSTED_OAUTH_RESUME_STORAGE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<HostedOAuthResumeMarker> | null;
+    if (
+      !parsed ||
+      typeof parsed !== "object" ||
+      (parsed.surface !== "sandbox" && parsed.surface !== "shared") ||
+      typeof parsed.serverName !== "string" ||
+      typeof parsed.completedAt !== "number"
+    ) {
+      clearHostedOAuthResumeMarker();
+      return null;
+    }
+
+    if (Date.now() - parsed.completedAt > HOSTED_OAUTH_RESUME_TTL_MS) {
+      clearHostedOAuthResumeMarker();
+      return null;
+    }
+
+    if (surface && parsed.surface !== surface) {
+      return null;
+    }
+
+    return {
+      surface: parsed.surface,
+      serverName: parsed.serverName,
+      serverUrl: typeof parsed.serverUrl === "string" ? parsed.serverUrl : null,
+      completedAt: parsed.completedAt,
+      errorMessage:
+        typeof parsed.errorMessage === "string" ? parsed.errorMessage : null,
+    };
+  } catch {
+    clearHostedOAuthResumeMarker();
+    return null;
+  }
+}
+
+export function clearHostedOAuthResumeMarker(): void {
+  localStorage.removeItem(HOSTED_OAUTH_RESUME_STORAGE_KEY);
+}
+
+export function isHostedOAuthBusy(status: HostedOAuthStatus): boolean {
+  return (
+    status === "launching" || status === "resuming" || status === "verifying"
+  );
+}
+
+export function sanitizeHostedOAuthErrorMessage(
+  error: unknown,
+  fallback: string,
+): string {
+  const message =
+    typeof error === "string"
+      ? error
+      : error instanceof Error
+        ? error.message
+        : fallback;
+
+  const normalized = message.replace(/\s+/g, " ").trim();
+  if (!normalized) {
+    return fallback;
+  }
+
+  const sanitized = normalized
+    .replace(/^Uncaught Error:\s*/i, "")
+    .replace(/\s+at\s+(?:async\s+)?[A-Za-z0-9_$./<>-]+(?:\s+\(|$).*/s, "")
+    .trim();
+
+  if (!sanitized) {
+    return fallback;
+  }
+
+  if (
+    /\b(cancelled|canceled)\b|user denied|denied the request|access_denied/i.test(
+      sanitized,
+    )
+  ) {
+    return "Authorization was cancelled. Try again.";
+  }
+
+  if (/missing its oauth url/i.test(sanitized)) {
+    return "This server needs additional setup before it can be authorized. Try again or contact the owner.";
+  }
+
+  if (/could not find the access token/i.test(sanitized)) {
+    return "We couldn't finish connecting this account. Authorize again.";
+  }
+
+  if (/could not verify access/i.test(sanitized)) {
+    return "We couldn't confirm access to this account. Authorize again.";
+  }
+
+  if (
+    /\b(401|403)\b|unauthorized|forbidden|authentication failed|invalid[_\s-]?token|expired token|token expired|non-200 status code|access denied/i.test(
+      sanitized,
+    )
+  ) {
+    return "Your authorization expired or was rejected. Authorize again to continue.";
+  }
+
+  if (
+    /sse error|failed to fetch|network ?error|timeout|timed out|socket hang up|econn/i.test(
+      sanitized,
+    )
+  ) {
+    return "We couldn't reach the authorization service. Try again.";
+  }
+
+  if (
+    /\boauth\b/i.test(sanitized) &&
+    /\b(error|failed|unable|could not)\b/i.test(sanitized)
+  ) {
+    return "Authorization could not be completed. Try again.";
+  }
+
+  return sanitized;
+}
diff --git a/mcpjam-inspector/client/src/lib/hosted-tab-policy.ts b/mcpjam-inspector/client/src/lib/hosted-tab-policy.ts
index dba7998bf..5edff9960 100644
--- a/mcpjam-inspector/client/src/lib/hosted-tab-policy.ts
+++ b/mcpjam-inspector/client/src/lib/hosted-tab-policy.ts
@@ -6,6 +6,7 @@ const HASH_TAB_ALIASES = {
 export const HOSTED_SIDEBAR_ALLOWED_TABS = [
   "servers",
   "chat-v2",
+  "sandboxes",
   "app-builder",
   "views",
   "ci-evals",
diff --git a/mcpjam-inspector/client/src/lib/sandbox-host-style.ts b/mcpjam-inspector/client/src/lib/sandbox-host-style.ts
new file mode 100644
index 000000000..3e2e662ed
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/sandbox-host-style.ts
@@ -0,0 +1,86 @@
+import type { CSSProperties } from "react";
+import claudeLogo from "/claude_logo.png";
+import openaiLogo from "/openai_logo.png";
+import { UIType } from "@/lib/mcp-ui/mcp-apps-utils";
+import {
+  CHATGPT_CHAT_BACKGROUND,
+  getChatGPTStyleVariables,
+} from "@/config/chatgpt-host-context";
+import {
+  CLAUDE_DESKTOP_CHAT_BACKGROUND,
+  getClaudeDesktopStyleVariables,
+} from "@/config/claude-desktop-host-context";
+
+export type SandboxHostStyle = "claude" | "chatgpt";
+
+type ResolvedThemeMode = "light" | "dark";
+
+type SandboxShellStyle = CSSProperties & Record<`--${string}`, string>;
+
+export function getSandboxHostLabel(hostStyle: SandboxHostStyle): string {
+  return hostStyle === "chatgpt" ? "ChatGPT" : "Claude";
+}
+
+export function getSandboxHostLogo(hostStyle: SandboxHostStyle): string {
+  return hostStyle === "chatgpt" ? openaiLogo : claudeLogo;
+}
+
+export function getSandboxProtocolOverride(
+  hostStyle: SandboxHostStyle | null | undefined,
+): UIType | undefined {
+  if (!hostStyle) return undefined;
+  return hostStyle === "chatgpt" ? UIType.OPENAI_SDK : UIType.MCP_APPS;
+}
+
+export function getSandboxShellStyle(
+  hostStyle: SandboxHostStyle,
+  themeMode: ResolvedThemeMode,
+): CSSProperties {
+  const styleVariables =
+    hostStyle === "chatgpt"
+      ? getChatGPTStyleVariables(themeMode)
+      : getClaudeDesktopStyleVariables(themeMode);
+  const background =
+    hostStyle === "chatgpt"
+      ? CHATGPT_CHAT_BACKGROUND[themeMode]
+      : CLAUDE_DESKTOP_CHAT_BACKGROUND[themeMode];
+  const resolvedStyleVariables = styleVariables as Record<
+    string,
+    string | undefined
+  >;
+  const getStyleVar = (key: string, fallback: string) =>
+    resolvedStyleVariables[key] ?? fallback;
+
+  const shellStyle: SandboxShellStyle = {
+    "--background": background,
+    "--foreground": getStyleVar("--color-text-primary", background),
+    "--card": getStyleVar("--color-background-primary", background),
+    "--card-foreground": getStyleVar("--color-text-primary", background),
+    "--popover": getStyleVar("--color-background-primary", background),
+    "--popover-foreground": getStyleVar("--color-text-primary", background),
+    "--secondary": getStyleVar("--color-background-secondary", background),
+    "--secondary-foreground": getStyleVar("--color-text-primary", background),
+    "--muted": getStyleVar("--color-background-secondary", background),
+    "--muted-foreground": getStyleVar("--color-text-secondary", background),
+    "--accent": getStyleVar("--color-background-tertiary", background),
+    "--accent-foreground": getStyleVar("--color-text-primary", background),
+    "--border": getStyleVar("--color-border-secondary", background),
+    "--input": getStyleVar("--color-border-primary", background),
+    "--ring": getStyleVar("--color-ring-primary", background),
+    "--font-sans": getStyleVar("--font-sans", "ui-sans-serif, sans-serif"),
+    "--shadow-sm":
+      resolvedStyleVariables["--shadow-sm"] ??
+      "0 1px 2px -1px rgba(0, 0, 0, 0.08)",
+    "--shadow":
+      resolvedStyleVariables["--shadow-sm"] ??
+      "0 1px 2px -1px rgba(0, 0, 0, 0.08)",
+    "--shadow-md":
+      resolvedStyleVariables["--shadow-md"] ??
+      "0 2px 4px -1px rgba(0, 0, 0, 0.08)",
+    "--shadow-lg":
+      resolvedStyleVariables["--shadow-lg"] ??
+      "0 4px 8px -2px rgba(0, 0, 0, 0.1)",
+  };
+
+  return shellStyle;
+}
diff --git a/mcpjam-inspector/client/src/lib/sandbox-session.ts b/mcpjam-inspector/client/src/lib/sandbox-session.ts
new file mode 100644
index 000000000..22c811edd
--- /dev/null
+++ b/mcpjam-inspector/client/src/lib/sandbox-session.ts
@@ -0,0 +1,183 @@
+import { getShareableAppOrigin, slugify } from "@/lib/shared-server-session";
+import type { SandboxHostStyle } from "@/lib/sandbox-host-style";
+
+export type SandboxShareMode = "any_signed_in_with_link" | "invited_only";
+
+export interface SandboxBootstrapServer {
+  serverId: string;
+  serverName: string;
+  useOAuth: boolean;
+  serverUrl: string | null;
+  clientId: string | null;
+  oauthScopes: string[] | null;
+}
+
+export interface SandboxBootstrapPayload {
+  workspaceId: string;
+  sandboxId: string;
+  name: string;
+  description?: string;
+  hostStyle: SandboxHostStyle;
+  mode: SandboxShareMode;
+  allowGuestAccess: boolean;
+  viewerIsWorkspaceMember: boolean;
+  systemPrompt: string;
+  modelId: string;
+  temperature: number;
+  requireToolApproval: boolean;
+  servers: SandboxBootstrapServer[];
+}
+
+export interface SandboxSession {
+  token: string;
+  payload: SandboxBootstrapPayload;
+}
+
+export const SANDBOX_SESSION_STORAGE_KEY = "mcpjam_sandbox_session_v1";
+export const SANDBOX_OAUTH_PENDING_KEY = "mcp-oauth-sandbox-pending";
+export const SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY =
+  "mcpjam_sandbox_signin_return_path_v1";
+
+export function extractSandboxTokenFromPath(pathname: string): string | null {
+  const match = pathname.match(/^\/sandbox\/[^/?#]+\/([^/?#]+)/);
+  if (!match || !match[1]) return null;
+  try {
+    return decodeURIComponent(match[1]).trim() || null;
+  } catch {
+    return match[1].trim() || null;
+  }
+}
+
+export function hasActiveSandboxSession(): boolean {
+  return readSandboxSession() !== null;
+}
+
+export function readSandboxSession(): SandboxSession | null {
+  try {
+    const raw = sessionStorage.getItem(SANDBOX_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<SandboxSession> | null;
+    if (!parsed || typeof parsed !== "object") return null;
+    const token =
+      typeof parsed.token === "string" ? parsed.token.trim() : undefined;
+    const payload = parsed.payload;
+    const hostStyle =
+      payload?.hostStyle === "claude" || payload?.hostStyle === "chatgpt"
+        ? payload.hostStyle
+        : payload?.hostStyle == null
+          ? "claude"
+          : null;
+
+    if (
+      !token ||
+      !payload ||
+      typeof payload.workspaceId !== "string" ||
+      typeof payload.sandboxId !== "string" ||
+      typeof payload.name !== "string" ||
+      hostStyle === null ||
+      typeof payload.modelId !== "string" ||
+      typeof payload.systemPrompt !== "string" ||
+      typeof payload.temperature !== "number" ||
+      typeof payload.requireToolApproval !== "boolean" ||
+      typeof payload.allowGuestAccess !== "boolean" ||
+      typeof payload.viewerIsWorkspaceMember !== "boolean" ||
+      !Array.isArray(payload.servers)
+    ) {
+      return null;
+    }
+
+    return {
+      token,
+      payload: {
+        workspaceId: payload.workspaceId,
+        sandboxId: payload.sandboxId,
+        name: payload.name,
+        description:
+          typeof payload.description === "string"
+            ? payload.description
+            : undefined,
+        hostStyle,
+        mode:
+          payload.mode === "any_signed_in_with_link"
+            ? payload.mode
+            : "invited_only",
+        allowGuestAccess: payload.allowGuestAccess,
+        viewerIsWorkspaceMember: payload.viewerIsWorkspaceMember,
+        systemPrompt: payload.systemPrompt,
+        modelId: payload.modelId,
+        temperature: payload.temperature,
+        requireToolApproval: payload.requireToolApproval,
+        servers: payload.servers
+          .filter(
+            (server): server is SandboxBootstrapServer =>
+              !!server &&
+              typeof server === "object" &&
+              typeof server.serverId === "string" &&
+              typeof server.serverName === "string",
+          )
+          .map((server) => ({
+            serverId: server.serverId,
+            serverName: server.serverName,
+            useOAuth: Boolean(server.useOAuth),
+            serverUrl:
+              typeof server.serverUrl === "string" ? server.serverUrl : null,
+            clientId:
+              typeof server.clientId === "string" ? server.clientId : null,
+            oauthScopes: Array.isArray(server.oauthScopes)
+              ? server.oauthScopes
+              : null,
+          })),
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function writeSandboxSession(session: SandboxSession): void {
+  sessionStorage.setItem(SANDBOX_SESSION_STORAGE_KEY, JSON.stringify(session));
+}
+
+export function clearSandboxSession(): void {
+  sessionStorage.removeItem(SANDBOX_SESSION_STORAGE_KEY);
+}
+
+export function writeSandboxSignInReturnPath(path: string): void {
+  const normalizedPath = path.trim();
+  if (!extractSandboxTokenFromPath(normalizedPath)) {
+    return;
+  }
+
+  try {
+    localStorage.setItem(
+      SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY,
+      normalizedPath,
+    );
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+export function readSandboxSignInReturnPath(): string | null {
+  try {
+    const raw = localStorage.getItem(SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY);
+    if (!raw) return null;
+    const normalizedPath = raw.trim();
+    if (!normalizedPath || !extractSandboxTokenFromPath(normalizedPath)) {
+      return null;
+    }
+    return normalizedPath;
+  } catch {
+    return null;
+  }
+}
+
+export function clearSandboxSignInReturnPath(): void {
+  localStorage.removeItem(SANDBOX_SIGN_IN_RETURN_PATH_STORAGE_KEY);
+}
+
+export function buildSandboxLink(token: string, sandboxName: string): string {
+  const origin = getShareableAppOrigin();
+  return `${origin}/sandbox/${slugify(sandboxName)}/${encodeURIComponent(token)}`;
+}
diff --git a/mcpjam-inspector/client/src/lib/session-token.ts b/mcpjam-inspector/client/src/lib/session-token.ts
index ca9d952b9..8d744c385 100644
--- a/mcpjam-inspector/client/src/lib/session-token.ts
+++ b/mcpjam-inspector/client/src/lib/session-token.ts
@@ -15,8 +15,8 @@
 import { HOSTED_MODE } from "@/lib/config";
 import {
   getHostedAuthorizationHeader,
-  isGuestMode,
   resetTokenCache,
+  shouldRetryHostedAuth401,
 } from "@/lib/apis/web/context";
 import { forceRefreshGuestSession } from "@/lib/guest-session";
 
@@ -234,7 +234,7 @@ export async function authFetch(
   if (
     response.status !== 401 ||
     !HOSTED_MODE ||
-    !isGuestMode() ||
+    !shouldRetryHostedAuth401() ||
     callerProvidedAuthorization
   ) {
     return response;
diff --git a/mcpjam-inspector/client/src/lib/shared-server-session.ts b/mcpjam-inspector/client/src/lib/shared-server-session.ts
index 1676ce26a..08863a4e5 100644
--- a/mcpjam-inspector/client/src/lib/shared-server-session.ts
+++ b/mcpjam-inspector/client/src/lib/shared-server-session.ts
@@ -23,6 +23,7 @@ export const SHARED_SERVER_SESSION_STORAGE_KEY =
 export const SHARED_OAUTH_PENDING_KEY = "mcp-oauth-shared-chat-pending";
 export const SHARED_SIGN_IN_RETURN_PATH_STORAGE_KEY =
   "mcpjam_shared_signin_return_path_v1";
+export const MCPJAM_APP_ORIGIN = "https://app.mcpjam.com";
 
 export function slugify(name: string): string {
   const slug = name
@@ -35,6 +36,17 @@ export function slugify(name: string): string {
   return slug || "server";
 }
 
+export function getShareableAppOrigin(): string {
+  if (typeof window === "undefined") {
+    return MCPJAM_APP_ORIGIN;
+  }
+
+  return window.location.protocol === "http:" ||
+    window.location.protocol === "https:"
+    ? window.location.origin
+    : MCPJAM_APP_ORIGIN;
+}
+
 export function extractSharedTokenFromPath(pathname: string): string | null {
   const match = pathname.match(/^\/shared\/[^/?#]+\/([^/?#]+)/);
   if (!match || !match[1]) return null;
diff --git a/mcpjam-inspector/client/src/styles/host-mimicry.css b/mcpjam-inspector/client/src/styles/host-mimicry.css
new file mode 100644
index 000000000..62dbb59f3
--- /dev/null
+++ b/mcpjam-inspector/client/src/styles/host-mimicry.css
@@ -0,0 +1,22 @@
+.sandbox-host-shell {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+.sandbox-host-shell .sandbox-host-user-bubble,
+.sandbox-host-shell .sandbox-host-assistant-avatar,
+.sandbox-host-shell .sandbox-host-composer {
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.sandbox-host-shell[data-host-style="chatgpt"] .sandbox-host-composer {
+  border-width: 1px;
+  border-color: transparent;
+}
+
+.sandbox-host-shell[data-host-style="claude"] .sandbox-host-composer {
+  border-width: 1px;
+}
diff --git a/mcpjam-inspector/server/__tests__/env.test.ts b/mcpjam-inspector/server/__tests__/env.test.ts
new file mode 100644
index 000000000..2020dc48e
--- /dev/null
+++ b/mcpjam-inspector/server/__tests__/env.test.ts
@@ -0,0 +1,82 @@
+import {
+  mkdirSync,
+  mkdtempSync,
+  realpathSync,
+  rmSync,
+  writeFileSync,
+} from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import { afterEach, describe, expect, it } from "vitest";
+import { getInspectorEnvFileNames, loadInspectorEnv } from "../env.js";
+
+const ORIGINAL_CONVEX_HTTP_URL = process.env.CONVEX_HTTP_URL;
+const ORIGINAL_PRIORITY_TEST = process.env.MCPJAM_ENV_PRIORITY_TEST;
+
+afterEach(() => {
+  if (ORIGINAL_CONVEX_HTTP_URL === undefined) {
+    delete process.env.CONVEX_HTTP_URL;
+  } else {
+    process.env.CONVEX_HTTP_URL = ORIGINAL_CONVEX_HTTP_URL;
+  }
+
+  if (ORIGINAL_PRIORITY_TEST === undefined) {
+    delete process.env.MCPJAM_ENV_PRIORITY_TEST;
+  } else {
+    process.env.MCPJAM_ENV_PRIORITY_TEST = ORIGINAL_PRIORITY_TEST;
+  }
+});
+
+describe("env loader", () => {
+  it("uses Vite-compatible file precedence in development", () => {
+    expect(getInspectorEnvFileNames("development")).toEqual([
+      ".env.development.local",
+      ".env.local",
+      ".env.development",
+      ".env",
+    ]);
+  });
+
+  it("keeps .env.local values ahead of .env.development", () => {
+    delete process.env.CONVEX_HTTP_URL;
+    delete process.env.MCPJAM_ENV_PRIORITY_TEST;
+
+    const tempRoot = mkdtempSync(join(tmpdir(), "mcpjam-env-"));
+    const resolvedTempRoot = realpathSync(tempRoot);
+    const originalCwd = process.cwd();
+    const serverDir = join(tempRoot, "server", "dist");
+    mkdirSync(serverDir, { recursive: true });
+
+    writeFileSync(
+      join(tempRoot, ".env.local"),
+      [
+        "CONVEX_HTTP_URL=https://local-priority.convex.site",
+        "MCPJAM_ENV_PRIORITY_TEST=local",
+      ].join("\n"),
+    );
+    writeFileSync(
+      join(tempRoot, ".env.development"),
+      [
+        "CONVEX_HTTP_URL=https://development-fallback.convex.site",
+        "MCPJAM_ENV_PRIORITY_TEST=development",
+      ].join("\n"),
+    );
+
+    try {
+      process.chdir(tempRoot);
+      const loadedEnv = loadInspectorEnv(serverDir);
+
+      expect(process.env.CONVEX_HTTP_URL).toBe(
+        "https://local-priority.convex.site",
+      );
+      expect(process.env.MCPJAM_ENV_PRIORITY_TEST).toBe("local");
+      expect(loadedEnv.loadedFiles).toEqual([
+        join(resolvedTempRoot, ".env.local"),
+        join(resolvedTempRoot, ".env.development"),
+      ]);
+    } finally {
+      process.chdir(originalCwd);
+      rmSync(tempRoot, { force: true, recursive: true });
+    }
+  });
+});
diff --git a/mcpjam-inspector/server/app.ts b/mcpjam-inspector/server/app.ts
index d2465770d..8eb7029df 100644
--- a/mcpjam-inspector/server/app.ts
+++ b/mcpjam-inspector/server/app.ts
@@ -5,9 +5,8 @@ import { bodyLimit } from "hono/body-limit";
 import { logger } from "hono/logger";
 import { logger as appLogger } from "./utils/logger.js";
 import { serveStatic } from "@hono/node-server/serve-static";
-import dotenv from "dotenv";
-import { existsSync, readFileSync } from "fs";
-import { join, dirname, resolve } from "path";
+import { readFileSync } from "fs";
+import { dirname } from "path";
 import { fileURLToPath } from "url";
 
 // Import routes
@@ -35,46 +34,15 @@ import {
 } from "./middleware/session-auth.js";
 import { originValidationMiddleware } from "./middleware/origin-validation.js";
 import { securityHeadersMiddleware } from "./middleware/security-headers.js";
+import { loadInspectorEnv, warnOnConvexDevMisconfiguration } from "./env.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 export function createHonoApp() {
   // Load environment variables early so route handlers can read CONVEX_HTTP_URL
-  const envFile =
-    process.env.NODE_ENV === "production" ? ".env.production" : ".env.local";
-
-  // Determine where to look for .env file:
-  // 1. Electron packaged: use process.resourcesPath directly
-  // 2. npm package: package root (two levels up from dist/server)
-  // 3. Local dev: current working directory
-  let envPath = envFile;
-
-  if (process.env.IS_PACKAGED === "true" && (process as any).resourcesPath) {
-    // Electron packaged app - use process.resourcesPath directly
-    envPath = join((process as any).resourcesPath, envFile);
-  } else if (process.env.ELECTRON_APP === "true") {
-    // Electron dev mode - already handled by src/main.ts setting env vars
-    envPath = join(process.env.ELECTRON_RESOURCES_PATH || ".", envFile);
-  } else {
-    // npm package or local dev
-    const packageRoot = resolve(__dirname, "..", "..");
-    const packageEnvPath = join(packageRoot, envFile);
-    if (existsSync(packageEnvPath)) {
-      envPath = packageEnvPath;
-    }
-  }
-
-  dotenv.config({ path: envPath });
-
-  // Validate required env vars
-  if (!process.env.CONVEX_HTTP_URL) {
-    throw new Error(
-      `CONVEX_HTTP_URL is required but not set. Tried loading from: ${envPath}\n` +
-        `IS_PACKAGED=${process.env.IS_PACKAGED}, resourcesPath=${(process as any).resourcesPath}\n` +
-        `File exists: ${existsSync(envPath)}`,
-    );
-  }
+  const loadedEnv = loadInspectorEnv(__dirname);
+  warnOnConvexDevMisconfiguration(loadedEnv);
 
   // Ensure PATH includes user shell paths so child processes (e.g., npx) can be found
   // This is crucial when launched from GUI apps (Electron) where PATH is minimal
diff --git a/mcpjam-inspector/server/env.ts b/mcpjam-inspector/server/env.ts
new file mode 100644
index 000000000..a181aa25f
--- /dev/null
+++ b/mcpjam-inspector/server/env.ts
@@ -0,0 +1,146 @@
+import dotenv from "dotenv";
+import { existsSync } from "fs";
+import { join, resolve } from "path";
+import { logger as appLogger } from "./utils/logger.js";
+
+export type InspectorEnvMode = "development" | "production";
+
+export interface LoadedInspectorEnv {
+  cwd: string;
+  envDir: string;
+  loadedFiles: string[];
+  mode: InspectorEnvMode;
+}
+
+function getInspectorEnvMode(): InspectorEnvMode {
+  return process.env.NODE_ENV === "production" ? "production" : "development";
+}
+
+export function getInspectorEnvFileNames(
+  mode: InspectorEnvMode = getInspectorEnvMode(),
+): string[] {
+  return [`.env.${mode}.local`, ".env.local", `.env.${mode}`, ".env"];
+}
+
+export function resolveInspectorEnvDir(serverDir: string): string {
+  if (
+    process.env.IS_PACKAGED === "true" &&
+    typeof (process as any).resourcesPath === "string"
+  ) {
+    return (process as any).resourcesPath;
+  }
+
+  if (process.env.ELECTRON_APP === "true") {
+    return process.env.ELECTRON_RESOURCES_PATH || ".";
+  }
+
+  const envFileNames = getInspectorEnvFileNames();
+  const candidateDirs = [
+    process.cwd(),
+    resolve(serverDir, ".."),
+    resolve(serverDir, "..", ".."),
+  ];
+
+  for (const candidateDir of candidateDirs) {
+    if (
+      !existsSync(candidateDir) ||
+      !envFileNames.some((fileName) => existsSync(join(candidateDir, fileName)))
+    ) {
+      continue;
+    }
+
+    return candidateDir;
+  }
+
+  return process.cwd();
+}
+
+export function loadInspectorEnv(serverDir: string): LoadedInspectorEnv {
+  const mode = getInspectorEnvMode();
+  const envDir = resolveInspectorEnvDir(serverDir);
+  const loadedFiles: string[] = [];
+
+  for (const fileName of getInspectorEnvFileNames(mode)) {
+    const envPath = join(envDir, fileName);
+    if (!existsSync(envPath)) continue;
+
+    dotenv.config({ path: envPath });
+    loadedFiles.push(envPath);
+  }
+
+  if (!process.env.CONVEX_HTTP_URL) {
+    throw new Error(
+      `CONVEX_HTTP_URL is required but not set. Loaded from: ${loadedFiles.join(", ") || "(none)"}`,
+    );
+  }
+
+  return {
+    cwd: process.cwd(),
+    envDir,
+    loadedFiles,
+    mode,
+  };
+}
+
+function getConvexDeploymentSlug(url: string | undefined): string | null {
+  if (!url) return null;
+
+  try {
+    return new URL(url).hostname.split(".")[0] || null;
+  } catch {
+    return null;
+  }
+}
+
+async function checkBootstrapRoute(convexHttpUrl: string): Promise<void> {
+  const response = await fetch(`${convexHttpUrl}/sandbox/bootstrap`, {
+    method: "OPTIONS",
+    signal: AbortSignal.timeout(2_000),
+  });
+
+  if (response.status === 404) {
+    appLogger.warn(
+      `[boot] CONVEX_HTTP_URL does not expose /sandbox/bootstrap. cwd=${process.cwd()} CONVEX_HTTP_URL=${convexHttpUrl}`,
+    );
+  }
+}
+
+export function warnOnConvexDevMisconfiguration(env: LoadedInspectorEnv): void {
+  if (
+    env.mode === "production" ||
+    process.env.NODE_ENV === "test" ||
+    (
+      globalThis as typeof globalThis & {
+        __MCPJAM_CONVEX_DIAGNOSTICS_STARTED__?: boolean;
+      }
+    ).__MCPJAM_CONVEX_DIAGNOSTICS_STARTED__
+  ) {
+    return;
+  }
+
+  (
+    globalThis as typeof globalThis & {
+      __MCPJAM_CONVEX_DIAGNOSTICS_STARTED__?: boolean;
+    }
+  ).__MCPJAM_CONVEX_DIAGNOSTICS_STARTED__ = true;
+
+  const convexHttpUrl = process.env.CONVEX_HTTP_URL;
+  const viteConvexUrl = process.env.VITE_CONVEX_URL;
+
+  const httpSlug = getConvexDeploymentSlug(convexHttpUrl);
+  const viteSlug = getConvexDeploymentSlug(viteConvexUrl);
+
+  if (httpSlug && viteSlug && httpSlug !== viteSlug) {
+    appLogger.warn(
+      `[boot] Client/server Convex deployment mismatch detected. cwd=${env.cwd} VITE_CONVEX_URL=${viteConvexUrl} CONVEX_HTTP_URL=${convexHttpUrl}`,
+    );
+  }
+
+  if (!convexHttpUrl) return;
+
+  void checkBootstrapRoute(convexHttpUrl).catch((error) => {
+    appLogger.warn(
+      `[boot] Failed to verify /sandbox/bootstrap on CONVEX_HTTP_URL. cwd=${env.cwd} CONVEX_HTTP_URL=${convexHttpUrl} error=${error instanceof Error ? error.message : String(error)}`,
+    );
+  });
+}
diff --git a/mcpjam-inspector/server/index.ts b/mcpjam-inspector/server/index.ts
index 1cf88a9f5..6da5161c9 100644
--- a/mcpjam-inspector/server/index.ts
+++ b/mcpjam-inspector/server/index.ts
@@ -1,5 +1,4 @@
 import { serve } from "@hono/node-server";
-import dotenv from "dotenv";
 import fixPath from "fix-path";
 import { Hono } from "hono";
 import { HTTPException } from "hono/http-exception";
@@ -8,10 +7,11 @@ import { bodyLimit } from "hono/body-limit";
 import { logger } from "hono/logger";
 import { logger as appLogger } from "./utils/logger";
 import { serveStatic } from "@hono/node-server/serve-static";
-import { readFileSync, existsSync } from "fs";
-import { join, dirname, resolve } from "path";
+import { readFileSync } from "fs";
+import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { MCPClientManager } from "@mcpjam/sdk";
+import { loadInspectorEnv, warnOnConvexDevMisconfiguration } from "./env";
 
 // Security imports
 import {
@@ -205,37 +205,8 @@ const strictModeResponse = (c: any, path: string) =>
   );
 
 // Load environment variables early so route handlers can read CONVEX_HTTP_URL
-const envFile =
-  process.env.NODE_ENV === "production"
-    ? ".env.production"
-    : ".env.development";
-
-// Determine where to look for .env file:
-// 1. Electron: Resources folder
-// 2. npm package: package root (two levels up from dist/server)
-// 3. Local dev: current working directory
-let envPath = envFile;
-if (
-  process.env.ELECTRON_APP === "true" &&
-  process.env.ELECTRON_RESOURCES_PATH
-) {
-  envPath = join(process.env.ELECTRON_RESOURCES_PATH, envFile);
-} else {
-  const packageRoot = resolve(__dirname, "..", "..");
-  const packageEnvPath = join(packageRoot, envFile);
-  if (existsSync(packageEnvPath)) {
-    envPath = packageEnvPath;
-  }
-}
-
-dotenv.config({ path: envPath });
-
-// Validate required env vars
-if (!process.env.CONVEX_HTTP_URL) {
-  throw new Error(
-    "CONVEX_HTTP_URL is required but not set. Please set it via environment variable or .env file.",
-  );
-}
+const loadedEnv = loadInspectorEnv(__dirname);
+warnOnConvexDevMisconfiguration(loadedEnv);
 
 // Initialize centralized MCPJam Client Manager and wire RPC logging to SSE bus
 const mcpClientManager = new MCPClientManager(
diff --git a/mcpjam-inspector/server/routes/web/__tests__/sandboxes.test.ts b/mcpjam-inspector/server/routes/web/__tests__/sandboxes.test.ts
new file mode 100644
index 000000000..0ac237631
--- /dev/null
+++ b/mcpjam-inspector/server/routes/web/__tests__/sandboxes.test.ts
@@ -0,0 +1,137 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createWebTestApp, expectJson, postJson } from "./helpers/test-app.js";
+
+const ORIGINAL_CONVEX_HTTP_URL = process.env.CONVEX_HTTP_URL;
+
+describe("web routes — sandboxes bootstrap", () => {
+  const { app, token } = createWebTestApp();
+
+  beforeEach(() => {
+    process.env.CONVEX_HTTP_URL = "https://test-deployment.convex.site";
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+
+    if (ORIGINAL_CONVEX_HTTP_URL === undefined) {
+      delete process.env.CONVEX_HTTP_URL;
+    } else {
+      process.env.CONVEX_HTTP_URL = ORIGINAL_CONVEX_HTTP_URL;
+    }
+  });
+
+  it("surfaces a deployment mismatch when the upstream sandbox route is missing", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        new Response("No matching routes found", {
+          status: 404,
+          headers: {
+            "Content-Type": "text/plain; charset=utf-8",
+          },
+        }),
+      ),
+    );
+
+    const response = await postJson(
+      app,
+      "/api/web/sandboxes/bootstrap",
+      { token: "sandbox-link-token" },
+      token,
+    );
+    const { status, data } = await expectJson<{
+      code: string;
+      message: string;
+    }>(response);
+
+    expect(status).toBe(404);
+    expect(data.code).toBe("NOT_FOUND");
+    expect(data.message).toContain("does not expose /sandbox/bootstrap");
+  });
+
+  it("returns a timeout error when sandbox bootstrap aborts", async () => {
+    const fetchMock = vi.fn().mockRejectedValue(
+      Object.assign(new Error("The operation was aborted"), {
+        name: "AbortError",
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+
+    const response = await postJson(
+      app,
+      "/api/web/sandboxes/bootstrap",
+      { token: "sandbox-link-token" },
+      token,
+    );
+    const { status, data } = await expectJson<{
+      code: string;
+      message: string;
+    }>(response);
+
+    expect(status).toBe(504);
+    expect(data).toEqual({
+      code: "SERVER_UNREACHABLE",
+      message: "Sandbox bootstrap service timed out",
+    });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://test-deployment.convex.site/sandbox/bootstrap",
+      expect.objectContaining({
+        signal: expect.any(AbortSignal),
+      }),
+    );
+  });
+
+  it("returns the sandbox bootstrap payload on success", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            payload: {
+              workspaceId: "ws_1",
+              sandboxId: "sbx_1",
+              name: "Host Styled Sandbox",
+              hostStyle: "chatgpt",
+              mode: "invited_only",
+              allowGuestAccess: false,
+              viewerIsWorkspaceMember: true,
+              systemPrompt: "You are helpful.",
+              modelId: "openai/gpt-5-mini",
+              temperature: 0.4,
+              requireToolApproval: true,
+              servers: [],
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          },
+        ),
+      ),
+    );
+
+    const response = await postJson(
+      app,
+      "/api/web/sandboxes/bootstrap",
+      { token: "sandbox-link-token" },
+      token,
+    );
+    const { status, data } = await expectJson<{
+      workspaceId: string;
+      sandboxId: string;
+      name: string;
+      hostStyle: string;
+    }>(response);
+
+    expect(status).toBe(200);
+    expect(data).toMatchObject({
+      workspaceId: "ws_1",
+      sandboxId: "sbx_1",
+      name: "Host Styled Sandbox",
+      hostStyle: "chatgpt",
+    });
+  });
+});
diff --git a/mcpjam-inspector/server/routes/web/auth.ts b/mcpjam-inspector/server/routes/web/auth.ts
index 8251f8407..ce93bc736 100644
--- a/mcpjam-inspector/server/routes/web/auth.ts
+++ b/mcpjam-inspector/server/routes/web/auth.ts
@@ -16,13 +16,33 @@ import {
 
 // ── Zod Schemas ──────────────────────────────────────────────────────
 
-export const workspaceServerSchema = z.object({
-  workspaceId: z.string().min(1),
-  serverId: z.string().min(1),
-  oauthAccessToken: z.string().optional(),
-  accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
-  shareToken: z.string().min(1).optional(),
-});
+function refineHostedTokens<T extends z.ZodRawShape>(schema: z.ZodObject<T>) {
+  return schema.superRefine((value, ctx) => {
+    const hostedValue = value as {
+      shareToken?: string;
+      sandboxToken?: string;
+    };
+
+    if (hostedValue.shareToken && hostedValue.sandboxToken) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["sandboxToken"],
+        message: "shareToken and sandboxToken cannot both be provided",
+      });
+    }
+  });
+}
+
+export const workspaceServerSchema = refineHostedTokens(
+  z.object({
+    workspaceId: z.string().min(1),
+    serverId: z.string().min(1),
+    oauthAccessToken: z.string().optional(),
+    accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
+    shareToken: z.string().min(1).optional(),
+    sandboxToken: z.string().min(1).optional(),
+  }),
+);
 
 export const toolsListSchema = workspaceServerSchema.extend({
   modelId: z.string().optional(),
@@ -47,13 +67,16 @@ export const promptsListSchema = workspaceServerSchema.extend({
   cursor: z.string().optional(),
 });
 
-export const promptsListMultiSchema = z.object({
-  workspaceId: z.string().min(1),
-  serverIds: z.array(z.string().min(1)).min(1),
-  oauthTokens: z.record(z.string(), z.string()).optional(),
-  accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
-  shareToken: z.string().min(1).optional(),
-});
+export const promptsListMultiSchema = refineHostedTokens(
+  z.object({
+    workspaceId: z.string().min(1),
+    serverIds: z.array(z.string().min(1)).min(1),
+    oauthTokens: z.record(z.string(), z.string()).optional(),
+    accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
+    shareToken: z.string().min(1).optional(),
+    sandboxToken: z.string().min(1).optional(),
+  }),
+);
 
 export const promptsGetSchema = workspaceServerSchema.extend({
   promptName: z.string().min(1),
@@ -62,16 +85,19 @@ export const promptsGetSchema = workspaceServerSchema.extend({
     .optional(),
 });
 
-export const hostedChatSchema = z
-  .object({
-    workspaceId: z.string().min(1),
-    selectedServerIds: z.array(z.string().min(1)),
-    chatSessionId: z.string().min(1).optional(),
-    oauthTokens: z.record(z.string(), z.string()).optional(),
-    accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
-    shareToken: z.string().min(1).optional(),
-  })
-  .passthrough();
+export const hostedChatSchema = refineHostedTokens(
+  z
+    .object({
+      workspaceId: z.string().min(1),
+      selectedServerIds: z.array(z.string().min(1)),
+      chatSessionId: z.string().min(1).optional(),
+      oauthTokens: z.record(z.string(), z.string()).optional(),
+      accessScope: z.enum(["workspace_member", "chat_v2"]).optional(),
+      shareToken: z.string().min(1).optional(),
+      sandboxToken: z.string().min(1).optional(),
+    })
+    .passthrough(),
+);
 
 // ── Guest Schema ─────────────────────────────────────────────────────
 
@@ -110,6 +136,7 @@ export async function authorizeServer(
   options?: {
     accessScope?: "workspace_member" | "chat_v2";
     shareToken?: string;
+    sandboxToken?: string;
   },
 ): Promise<ConvexAuthorizeResponse> {
   const convexUrl = process.env.CONVEX_HTTP_URL;
@@ -123,6 +150,14 @@ export async function authorizeServer(
 
   let response: Response;
   try {
+    if (options?.shareToken && options?.sandboxToken) {
+      throw new WebRouteError(
+        400,
+        ErrorCode.VALIDATION_ERROR,
+        "shareToken and sandboxToken cannot both be provided",
+      );
+    }
+
     response = await fetch(`${convexUrl}/web/authorize`, {
       method: "POST",
       headers: {
@@ -134,6 +169,9 @@ export async function authorizeServer(
         serverId,
         ...(options?.accessScope ? { accessScope: options.accessScope } : {}),
         ...(options?.shareToken ? { shareToken: options.shareToken } : {}),
+        ...(options?.sandboxToken
+          ? { sandboxToken: options.sandboxToken }
+          : {}),
       }),
     });
   } catch (error) {
@@ -225,6 +263,7 @@ export async function createAuthorizedManager(
   options?: {
     accessScope?: "workspace_member" | "chat_v2";
     shareToken?: string;
+    sandboxToken?: string;
   },
 ): Promise<AuthorizedManagerResult> {
   const uniqueServerIds = Array.from(new Set(serverIds));
@@ -234,6 +273,7 @@ export async function createAuthorizedManager(
       const auth = await authorizeServer(bearerToken, workspaceId, serverId, {
         accessScope: options?.accessScope,
         shareToken: options?.shareToken,
+        sandboxToken: options?.sandboxToken,
       });
       const oauthToken = oauthTokens?.[serverId];
 
@@ -248,6 +288,7 @@ export async function createAuthorizedManager(
             `Server "${serverId}" requires OAuth authentication. Please complete the OAuth flow first.`,
             {
               oauthRequired: true,
+              serverId,
               serverUrl: auth.serverConfig.url,
             },
           );
@@ -456,6 +497,10 @@ export async function withEphemeralConnection<S extends z.ZodTypeAny, T>(
       typeof raw.shareToken === "string" && raw.shareToken.trim()
         ? raw.shareToken
         : undefined;
+    const sandboxToken =
+      typeof raw.sandboxToken === "string" && raw.sandboxToken.trim()
+        ? raw.sandboxToken
+        : undefined;
 
     return withManager(
       createAuthorizedManager(
@@ -467,6 +512,7 @@ export async function withEphemeralConnection<S extends z.ZodTypeAny, T>(
         {
           accessScope,
           shareToken,
+          sandboxToken,
         },
       ),
       (manager) => fn(manager, body as z.infer<S>),
diff --git a/mcpjam-inspector/server/routes/web/chat-v2.ts b/mcpjam-inspector/server/routes/web/chat-v2.ts
index 9361caa97..62d58b708 100644
--- a/mcpjam-inspector/server/routes/web/chat-v2.ts
+++ b/mcpjam-inspector/server/routes/web/chat-v2.ts
@@ -36,6 +36,7 @@ chatV2.post("/", async (c) => {
       workspaceId: string;
       selectedServerIds: string[];
       shareToken?: string;
+      sandboxToken?: string;
       accessScope?: "workspace_member" | "chat_v2";
     };
 
@@ -47,6 +48,7 @@ chatV2.post("/", async (c) => {
       requireToolApproval,
       selectedServerIds,
       shareToken,
+      sandboxToken,
     } = body;
 
     if (!Array.isArray(messages) || messages.length === 0) {
@@ -75,6 +77,7 @@ chatV2.post("/", async (c) => {
       {
         accessScope: "chat_v2",
         shareToken,
+        sandboxToken,
       },
     );
     oauthServerUrls = urls;
@@ -90,6 +93,7 @@ chatV2.post("/", async (c) => {
           temperature,
           requireToolApproval,
           customProviders: body.customProviders,
+          includeMcpToolInventory: true,
         });
       } catch (error) {
         const msg = error instanceof Error ? error.message : String(error);
@@ -129,11 +133,12 @@ chatV2.post("/", async (c) => {
         selectedServers: selectedServerIds,
         requireToolApproval,
         onConversationComplete:
-          shareToken && body.chatSessionId
+          (shareToken || sandboxToken) && body.chatSessionId
             ? async (fullHistory) => {
                 await saveThreadToConvex({
                   chatSessionId: body.chatSessionId!,
                   shareToken,
+                  sandboxToken,
                   bearerToken,
                   messages: fullHistory,
                   messageCount: fullHistory.length,
@@ -150,10 +155,12 @@ chatV2.post("/", async (c) => {
   } catch (error) {
     // Enrich MCPAuthError with OAuth server URL so the client can initiate OAuth
     if (isMCPAuthError(error) && Object.keys(oauthServerUrls).length > 0) {
-      const firstUrl = Object.values(oauthServerUrls)[0];
+      const [firstServerId] = Object.keys(oauthServerUrls);
+      const firstUrl = firstServerId ? oauthServerUrls[firstServerId] : null;
       const msg = error instanceof Error ? error.message : String(error);
       return webError(c, 401, ErrorCode.UNAUTHORIZED, msg, {
         oauthRequired: true,
+        serverId: firstServerId,
         serverUrl: firstUrl,
       });
     }
diff --git a/mcpjam-inspector/server/routes/web/index.ts b/mcpjam-inspector/server/routes/web/index.ts
index 08ab89d2b..8d4770a15 100644
--- a/mcpjam-inspector/server/routes/web/index.ts
+++ b/mcpjam-inspector/server/routes/web/index.ts
@@ -7,6 +7,7 @@ import tools from "./tools.js";
 import resources from "./resources.js";
 import prompts from "./prompts.js";
 import chatV2 from "./chat-v2.js";
+import sandboxes from "./sandboxes.js";
 import apps from "./apps.js";
 import oauthWeb from "./oauth.js";
 import xrayPayload from "./xray-payload.js";
@@ -20,11 +21,14 @@ web.use("/servers/*", bearerAuthMiddleware, guestRateLimitMiddleware);
 web.use("/tools/*", bearerAuthMiddleware, guestRateLimitMiddleware);
 web.use("/resources/*", bearerAuthMiddleware, guestRateLimitMiddleware);
 web.use("/prompts/*", bearerAuthMiddleware, guestRateLimitMiddleware);
+web.use("/sandboxes/*", bearerAuthMiddleware, guestRateLimitMiddleware);
+web.use("/chat-v2", bearerAuthMiddleware, guestRateLimitMiddleware);
 
 web.route("/servers", servers);
 web.route("/tools", tools);
 web.route("/resources", resources);
 web.route("/prompts", prompts);
+web.route("/sandboxes", sandboxes);
 web.route("/export", exporter);
 web.route("/chat-v2", chatV2);
 web.route("/apps", apps);
diff --git a/mcpjam-inspector/server/routes/web/sandboxes.ts b/mcpjam-inspector/server/routes/web/sandboxes.ts
new file mode 100644
index 000000000..d14e6e436
--- /dev/null
+++ b/mcpjam-inspector/server/routes/web/sandboxes.ts
@@ -0,0 +1,110 @@
+import { Hono } from "hono";
+import { z } from "zod";
+import {
+  ErrorCode,
+  WebRouteError,
+  assertBearerToken,
+  handleRoute,
+  parseErrorMessage,
+  parseWithSchema,
+  readJsonBody,
+} from "./auth.js";
+
+const sandboxes = new Hono();
+
+const sandboxBootstrapSchema = z.object({
+  token: z.string().min(1),
+});
+
+sandboxes.post("/bootstrap", async (c) =>
+  handleRoute(c, async () => {
+    const convexUrl = process.env.CONVEX_HTTP_URL;
+    if (!convexUrl) {
+      throw new WebRouteError(
+        500,
+        ErrorCode.INTERNAL_ERROR,
+        "Server missing CONVEX_HTTP_URL configuration",
+      );
+    }
+
+    const bearerToken = assertBearerToken(c);
+    const body = parseWithSchema(
+      sandboxBootstrapSchema,
+      await readJsonBody<unknown>(c),
+    );
+
+    let response: Response;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10_000);
+    try {
+      response = await fetch(`${convexUrl}/sandbox/bootstrap`, {
+        method: "POST",
+        signal: controller.signal,
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${bearerToken}`,
+        },
+        body: JSON.stringify({ token: body.token }),
+      });
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        throw new WebRouteError(
+          504,
+          ErrorCode.SERVER_UNREACHABLE,
+          "Sandbox bootstrap service timed out",
+        );
+      }
+      throw new WebRouteError(
+        502,
+        ErrorCode.SERVER_UNREACHABLE,
+        `Failed to reach sandbox bootstrap service: ${parseErrorMessage(error)}`,
+      );
+    } finally {
+      clearTimeout(timeout);
+    }
+
+    const responseText = await response.text();
+    const trimmedResponseText = responseText.trim();
+    let payload: any = null;
+    try {
+      payload = trimmedResponseText ? JSON.parse(trimmedResponseText) : null;
+    } catch {
+      // ignored
+    }
+
+    if (!response.ok) {
+      let message =
+        typeof payload?.error === "string"
+          ? payload.error
+          : typeof payload?.message === "string"
+            ? payload.message
+            : trimmedResponseText ||
+              `Sandbox bootstrap failed (${response.status})`;
+      if (response.status === 404 && message === "No matching routes found") {
+        message =
+          "Configured Convex deployment does not expose /sandbox/bootstrap. Check CONVEX_HTTP_URL and VITE_CONVEX_URL.";
+      }
+      const code =
+        response.status === 401
+          ? ErrorCode.UNAUTHORIZED
+          : response.status === 403
+            ? ErrorCode.FORBIDDEN
+            : response.status === 404
+              ? ErrorCode.NOT_FOUND
+              : ErrorCode.INTERNAL_ERROR;
+      throw new WebRouteError(response.status, code, message);
+    }
+
+    if (!payload?.ok || !payload?.payload) {
+      throw new WebRouteError(
+        500,
+        ErrorCode.INTERNAL_ERROR,
+        "Sandbox bootstrap response was missing payload",
+      );
+    }
+
+    return payload.payload;
+  }),
+);
+
+export default sandboxes;
diff --git a/mcpjam-inspector/server/routes/web/servers.ts b/mcpjam-inspector/server/routes/web/servers.ts
index 2cba0bf12..066a35e9e 100644
--- a/mcpjam-inspector/server/routes/web/servers.ts
+++ b/mcpjam-inspector/server/routes/web/servers.ts
@@ -27,17 +27,20 @@ servers.post("/validate", async (c) =>
 
 servers.post("/check-oauth", async (c) =>
   handleRoute(c, async () => {
-    // Guests have no Convex server records — OAuth is never applicable
-    const guestId = c.get("guestId") as string | undefined;
-    if (guestId) {
+    const rawBody = await readJsonBody<unknown>(c);
+    const isDirectGuestRequest =
+      !!rawBody &&
+      typeof rawBody === "object" &&
+      typeof (rawBody as { serverUrl?: unknown }).serverUrl === "string" &&
+      !(rawBody as { workspaceId?: unknown }).workspaceId;
+
+    // Direct guest sessions connect without Convex server records.
+    if (isDirectGuestRequest) {
       return { useOAuth: false, serverUrl: null };
     }
 
     const bearerToken = assertBearerToken(c);
-    const body = parseWithSchema(
-      workspaceServerSchema,
-      await readJsonBody<unknown>(c),
-    );
+    const body = parseWithSchema(workspaceServerSchema, rawBody);
     const auth = await authorizeServer(
       bearerToken,
       body.workspaceId,
@@ -45,6 +48,7 @@ servers.post("/check-oauth", async (c) =>
       {
         accessScope: body.accessScope,
         shareToken: body.shareToken,
+        sandboxToken: body.sandboxToken,
       },
     );
     return {
diff --git a/mcpjam-inspector/server/utils/__tests__/chat-v2-orchestration.test.ts b/mcpjam-inspector/server/utils/__tests__/chat-v2-orchestration.test.ts
new file mode 100644
index 000000000..12b28a01e
--- /dev/null
+++ b/mcpjam-inspector/server/utils/__tests__/chat-v2-orchestration.test.ts
@@ -0,0 +1,89 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../skill-tools.js", () => ({
+  getSkillToolsAndPrompt: vi.fn(),
+}));
+
+vi.mock("@/shared/types", async () => {
+  const actual =
+    await vi.importActual<typeof import("@/shared/types")>("@/shared/types");
+  return {
+    ...actual,
+    isGPT5Model: vi.fn().mockReturnValue(false),
+  };
+});
+
+import { prepareChatV2 } from "../chat-v2-orchestration";
+import { getSkillToolsAndPrompt } from "../skill-tools";
+
+function mockManager(tools: Record<string, unknown>) {
+  return {
+    getToolsForAiSdk: vi.fn().mockResolvedValue(tools),
+  } as any;
+}
+
+beforeEach(() => {
+  vi.mocked(getSkillToolsAndPrompt).mockResolvedValue({
+    tools: {},
+    systemPromptSection: "",
+  });
+});
+
+describe("prepareChatV2", () => {
+  it("adds MCP tool inventory to the prompt for hosted chat", async () => {
+    const manager = mockManager({
+      fetch_tasks: {
+        description: "Fetch tasks from the task service",
+        _serverId: "server-b",
+      },
+      find_users: {
+        description: "Find users in the directory",
+        _serverId: "server-a",
+      },
+    });
+
+    const result = await prepareChatV2({
+      mcpClientManager: manager,
+      selectedServers: ["server-a", "server-b"],
+      modelDefinition: { id: "gpt-4.1", provider: "openai" } as any,
+      systemPrompt: "Base prompt.",
+      includeMcpToolInventory: true,
+    });
+
+    expect(result.enhancedSystemPrompt).toContain("## Connected MCP Tools");
+    expect(result.enhancedSystemPrompt).toContain(
+      "answer from this list instead of saying you do not have MCP visibility.",
+    );
+    expect(result.enhancedSystemPrompt).toContain(
+      "Server server-a:\n- find_users: Find users in the directory",
+    );
+    expect(result.enhancedSystemPrompt).toContain(
+      "Server server-b:\n- fetch_tasks: Fetch tasks from the task service",
+    );
+    expect(
+      result.enhancedSystemPrompt.indexOf("Server server-a:"),
+    ).toBeLessThan(result.enhancedSystemPrompt.indexOf("Server server-b:"));
+    expect(manager.getToolsForAiSdk).toHaveBeenCalledWith(
+      ["server-a", "server-b"],
+      undefined,
+    );
+  });
+
+  it("does not add MCP tool inventory unless requested", async () => {
+    const manager = mockManager({
+      fetch_tasks: {
+        description: "Fetch tasks from the task service",
+        _serverId: "server-b",
+      },
+    });
+
+    const result = await prepareChatV2({
+      mcpClientManager: manager,
+      selectedServers: ["server-b"],
+      modelDefinition: { id: "gpt-4.1", provider: "openai" } as any,
+      systemPrompt: "Base prompt.",
+    });
+
+    expect(result.enhancedSystemPrompt).toBe("Base prompt.");
+  });
+});
diff --git a/mcpjam-inspector/server/utils/__tests__/mcpjam-stream-handler.test.ts b/mcpjam-inspector/server/utils/__tests__/mcpjam-stream-handler.test.ts
index fa6a02577..c85d57678 100644
--- a/mcpjam-inspector/server/utils/__tests__/mcpjam-stream-handler.test.ts
+++ b/mcpjam-inspector/server/utils/__tests__/mcpjam-stream-handler.test.ts
@@ -261,4 +261,132 @@ describe("mcpjam-stream-handler", () => {
     expect(onConversationComplete).not.toHaveBeenCalled();
     expect(onStreamComplete).toHaveBeenCalledTimes(1);
   });
+
+  it("removes reasoning parts from outbound backend context", async () => {
+    await handleMCPJamFreeChatModel({
+      messages: [
+        {
+          role: "assistant",
+          content: [
+            {
+              type: "reasoning",
+              text: "private chain of thought",
+              state: "done",
+            },
+            {
+              type: "text",
+              text: "Visible answer",
+            },
+          ],
+        },
+      ] as any,
+      modelId: "gpt-4.1-mini",
+      systemPrompt: "You are helpful",
+      tools: {},
+      mcpClientManager: {
+        getAllToolsMetadata: vi.fn().mockReturnValue({}),
+      } as any,
+    });
+
+    await lastExecution;
+
+    const fetchBody = JSON.parse(
+      ((global.fetch as any).mock.calls[0]?.[1]?.body as string) ?? "{}",
+    );
+    const scrubbedMessages = JSON.parse(fetchBody.messages);
+
+    expect(scrubbedMessages).toEqual([
+      {
+        role: "assistant",
+        content: [
+          {
+            type: "text",
+            text: "Visible answer",
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("persists reasoning parts in order with surrounding assistant content", async () => {
+    const onConversationComplete = vi.fn();
+    global.fetch = vi.fn().mockResolvedValue(
+      createSseResponse([
+        {
+          type: "reasoning-start",
+          id: "reasoning-1",
+        },
+        {
+          type: "reasoning-delta",
+          id: "reasoning-1",
+          delta: "Need to inspect tool inventory first.",
+        },
+        {
+          type: "reasoning-end",
+          id: "reasoning-1",
+        },
+        {
+          type: "text-start",
+          id: "text-1",
+        },
+        {
+          type: "text-delta",
+          id: "text-1",
+          delta: "Connected server details:",
+        },
+        {
+          type: "text-end",
+          id: "text-1",
+        },
+        {
+          type: "tool-input-available",
+          toolCallId: "call-1",
+          toolName: "list_servers",
+          input: {},
+        },
+        {
+          type: "finish",
+          finishReason: "stop",
+          totalUsage: { inputTokens: 1, outputTokens: 1, totalTokens: 2 },
+        },
+      ]),
+    );
+
+    await handleMCPJamFreeChatModel({
+      messages: [{ role: "user", content: "List my servers" }] as any,
+      modelId: "gpt-4.1-mini",
+      systemPrompt: "You are helpful",
+      tools: {},
+      mcpClientManager: {
+        getAllToolsMetadata: vi.fn().mockReturnValue({}),
+      } as any,
+      requireToolApproval: true,
+      onConversationComplete,
+    });
+
+    await lastExecution;
+
+    const fullHistory = onConversationComplete.mock.calls[0]?.[0];
+    expect(fullHistory).toHaveLength(2);
+    expect(fullHistory[1]).toEqual({
+      role: "assistant",
+      content: [
+        {
+          type: "reasoning",
+          text: "Need to inspect tool inventory first.",
+          state: "done",
+        },
+        {
+          type: "text",
+          text: "Connected server details:",
+        },
+        {
+          type: "tool-call",
+          toolCallId: "call-1",
+          toolName: "list_servers",
+          input: {},
+        },
+      ],
+    });
+  });
 });
diff --git a/mcpjam-inspector/server/utils/__tests__/shared-chat-persistence.test.ts b/mcpjam-inspector/server/utils/__tests__/shared-chat-persistence.test.ts
new file mode 100644
index 000000000..abf022fd2
--- /dev/null
+++ b/mcpjam-inspector/server/utils/__tests__/shared-chat-persistence.test.ts
@@ -0,0 +1,68 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { saveThreadToConvex } from "../shared-chat-persistence";
+
+vi.mock("../logger", () => ({
+  logger: {
+    error: vi.fn(),
+  },
+}));
+
+describe("shared-chat-persistence", () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    process.env.CONVEX_HTTP_URL = "https://test-convex.example.com";
+    global.fetch = vi.fn().mockResolvedValue(
+      new Response(null, {
+        status: 200,
+      }),
+    );
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+    delete process.env.CONVEX_HTTP_URL;
+  });
+
+  it("serializes reasoning parts when saving shared chat threads", async () => {
+    await saveThreadToConvex({
+      chatSessionId: "session-1",
+      shareToken: "share-token",
+      bearerToken: "bearer-token",
+      messageCount: 1,
+      modelId: "openai/gpt-oss-120b",
+      messages: [
+        {
+          role: "assistant",
+          content: [
+            {
+              type: "reasoning",
+              text: "Need to inspect the saved trace payload.",
+              state: "done",
+            },
+            {
+              type: "text",
+              text: "Saved trace response",
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    const request = (global.fetch as any).mock.calls[0]?.[1];
+    const body = JSON.parse((request?.body as string) ?? "{}");
+
+    expect(body.messages[0].content).toEqual([
+      {
+        type: "reasoning",
+        text: "Need to inspect the saved trace payload.",
+        state: "done",
+      },
+      {
+        type: "text",
+        text: "Saved trace response",
+      },
+    ]);
+  });
+});
diff --git a/mcpjam-inspector/server/utils/chat-v2-orchestration.ts b/mcpjam-inspector/server/utils/chat-v2-orchestration.ts
index 74f7d445a..6d6552266 100644
--- a/mcpjam-inspector/server/utils/chat-v2-orchestration.ts
+++ b/mcpjam-inspector/server/utils/chat-v2-orchestration.ts
@@ -39,6 +39,7 @@ export interface PrepareChatV2Options {
   temperature?: number;
   requireToolApproval?: boolean;
   customProviders?: CustomProviderConfig[];
+  includeMcpToolInventory?: boolean;
 }
 
 export interface PrepareChatV2Result {
@@ -48,6 +49,79 @@ export interface PrepareChatV2Result {
   scrubMessages: (msgs: ModelMessage[]) => ModelMessage[];
 }
 
+interface MCPToolPromptEntry {
+  name: string;
+  description?: string;
+}
+
+function truncateToolDescription(
+  description: string | undefined,
+  maxLength = 160,
+): string | undefined {
+  if (!description) return undefined;
+
+  const normalized = description.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  return `${normalized.slice(0, maxLength - 3)}...`;
+}
+
+function buildMcpToolInventoryPrompt(
+  mcpTools: Record<string, unknown>,
+  selectedServers?: string[],
+): string {
+  const serverGroups = new Map<string, MCPToolPromptEntry[]>();
+
+  for (const [name, tool] of Object.entries(mcpTools)) {
+    if (!tool || typeof tool !== "object") continue;
+
+    const toolRecord = tool as Record<string, unknown>;
+    const serverId =
+      typeof toolRecord._serverId === "string"
+        ? toolRecord._serverId
+        : undefined;
+    if (!serverId) continue;
+
+    const existing = serverGroups.get(serverId) ?? [];
+    existing.push({
+      name,
+      description:
+        typeof toolRecord.description === "string"
+          ? truncateToolDescription(toolRecord.description)
+          : undefined,
+    });
+    serverGroups.set(serverId, existing);
+  }
+
+  if (serverGroups.size === 0) return "";
+
+  const preferredServerIds = Array.from(new Set(selectedServers ?? [])).filter(
+    (serverId) => serverGroups.has(serverId),
+  );
+  const remainingServerIds = Array.from(serverGroups.keys())
+    .filter((serverId) => !preferredServerIds.includes(serverId))
+    .sort((left, right) => left.localeCompare(right));
+  const orderedServerIds = [...preferredServerIds, ...remainingServerIds];
+
+  const serverSections = orderedServerIds
+    .map((serverId) => {
+      const toolLines = [...(serverGroups.get(serverId) ?? [])]
+        .sort((left, right) => left.name.localeCompare(right.name))
+        .map(({ name, description }) =>
+          description ? `- ${name}: ${description}` : `- ${name}`,
+        )
+        .join("\n");
+
+      return `Server ${serverId}:\n${toolLines}`;
+    })
+    .join("\n\n");
+
+  return [
+    "## Connected MCP Tools",
+    "You have direct access to the following MCP tools. If the user asks what tools or servers are available, answer from this list instead of saying you do not have MCP visibility.",
+    serverSections,
+  ].join("\n\n");
+}
+
 /**
  * Prepare tools, system prompt, temperature, and message scrubber for chat-v2.
  *
@@ -64,6 +138,7 @@ export async function prepareChatV2(
     temperature,
     requireToolApproval,
     customProviders,
+    includeMcpToolInventory,
   } = options;
 
   // 1. Get MCP + skill tools
@@ -75,15 +150,21 @@ export async function prepareChatV2(
     HOSTED_MODE
       ? { tools: {}, systemPromptSection: "" }
       : await getSkillToolsAndPrompt();
+  const toolInventoryPromptSection = includeMcpToolInventory
+    ? buildMcpToolInventoryPrompt(mcpTools, selectedServers)
+    : "";
 
-  const finalSkillTools = requireToolApproval
+  const finalSkillTools: Record<string, unknown> = requireToolApproval
     ? Object.fromEntries(
         Object.entries(skillTools).map(([name, tool]) => [
           name,
-          { ...tool, needsApproval: true },
+          {
+            ...(tool && typeof tool === "object" ? tool : {}),
+            needsApproval: true,
+          },
         ]),
       )
-    : skillTools;
+    : (skillTools as Record<string, unknown>);
 
   const allTools = { ...mcpTools, ...finalSkillTools } as ToolSet;
 
@@ -99,9 +180,13 @@ export async function prepareChatV2(
   }
 
   // 3. System prompt concatenation
-  const enhancedSystemPrompt = systemPrompt
-    ? systemPrompt + skillsPromptSection
-    : skillsPromptSection;
+  const enhancedSystemPrompt = [
+    systemPrompt,
+    toolInventoryPromptSection,
+    skillsPromptSection,
+  ]
+    .filter((section): section is string => Boolean(section?.trim()))
+    .join("\n\n");
 
   // 4. Temperature resolution
   const resolvedTemperature = isGPT5Model(modelDefinition.id)
diff --git a/mcpjam-inspector/server/utils/mcpjam-stream-handler.ts b/mcpjam-inspector/server/utils/mcpjam-stream-handler.ts
index 1984413ac..17c36abec 100644
--- a/mcpjam-inspector/server/utils/mcpjam-stream-handler.ts
+++ b/mcpjam-inspector/server/utils/mcpjam-stream-handler.ts
@@ -10,11 +10,13 @@ import {
   createUIMessageStream,
   createUIMessageStreamResponse,
   parseJsonEventStream,
+  pruneMessages,
   uiMessageChunkSchema,
   type ToolSet,
 } from "ai";
 import type {
   UIMessageChunk,
+  ReasoningUIPart,
   TextPart,
   ToolCallPart,
   ToolModelMessage,
@@ -73,8 +75,10 @@ interface StepContext {
   usedToolCallIds: Set<string>;
 }
 
+type PersistedAssistantPart = TextPart | ToolCallPart | ReasoningUIPart;
+
 interface StreamResult {
-  contentParts: Array<TextPart | ToolCallPart>;
+  contentParts: PersistedAssistantPart[];
   hasToolCalls: boolean;
   finishChunk: UIMessageChunk | null;
 }
@@ -177,8 +181,13 @@ function scrubMessagesForBackend(
   mcpClientManager: MCPClientManager,
   selectedServers?: string[],
 ): ModelMessage[] {
+  const pruned = pruneMessages({
+    messages,
+    reasoning: "all",
+  }) as unknown as ModelMessage[];
+
   // First strip approval-specific parts that Convex/OpenRouter doesn't understand
-  const stripped: ModelMessage[] = messages.map((msg) => {
+  const stripped: ModelMessage[] = pruned.map((msg) => {
     if (msg.role === "assistant") {
       const assistantMsg = msg as AssistantModelMessage;
       if (!Array.isArray(assistantMsg.content)) return msg;
@@ -222,8 +231,10 @@ async function processStream(
   normalizeToolCallId: (toolCallId?: string) => string,
   requireToolApproval?: boolean,
 ): Promise<StreamResult> {
-  const contentParts: Array<TextPart | ToolCallPart> = [];
+  const contentParts: PersistedAssistantPart[] = [];
   let pendingText = "";
+  let pendingReasoning = "";
+  let pendingReasoningId: string | null = null;
   let hasToolCalls = false;
   let finishChunk: UIMessageChunk | null = null;
 
@@ -234,6 +245,18 @@ async function processStream(
     }
   };
 
+  const flushReasoning = () => {
+    if (pendingReasoning) {
+      contentParts.push({
+        type: "reasoning",
+        text: pendingReasoning,
+        state: "done",
+      });
+      pendingReasoning = "";
+    }
+    pendingReasoningId = null;
+  };
+
   const parsedStream = parseJsonEventStream({
     stream: body,
     schema: uiMessageChunkSchema,
@@ -266,11 +289,13 @@ async function processStream(
       // Handle chunk by type
       switch (chunk?.type) {
         case "text-start":
+          flushReasoning();
           flushText();
           writer.write(chunk);
           break;
 
         case "text-delta":
+          flushReasoning();
           pendingText += chunk.delta ?? "";
           writer.write(chunk);
           break;
@@ -280,9 +305,37 @@ async function processStream(
           writer.write(chunk);
           break;
 
+        case "reasoning-start":
+          flushText();
+          flushReasoning();
+          pendingReasoningId = chunk.id;
+          writer.write(chunk);
+          break;
+
+        case "reasoning-delta":
+          flushText();
+          if (pendingReasoningId !== null && chunk.id !== pendingReasoningId) {
+            flushReasoning();
+          }
+          pendingReasoningId = chunk.id;
+          pendingReasoning += chunk.delta ?? "";
+          writer.write(chunk);
+          break;
+
+        case "reasoning-end":
+          if (pendingReasoningId !== null && chunk.id !== pendingReasoningId) {
+            flushReasoning();
+            pendingReasoningId = chunk.id;
+          }
+          flushReasoning();
+          writer.write(chunk);
+          break;
+
         case "tool-input-start":
         case "tool-input-delta":
         case "tool-input-error": {
+          flushText();
+          flushReasoning();
           const toolCallId = normalizeToolCallId(chunk.toolCallId);
           writer.write({ ...chunk, toolCallId });
           break;
@@ -290,6 +343,7 @@ async function processStream(
 
         case "tool-input-available": {
           flushText();
+          flushReasoning();
           const toolCallId = normalizeToolCallId(chunk.toolCallId);
           contentParts.push({
             type: "tool-call",
@@ -331,6 +385,7 @@ async function processStream(
   }
 
   flushText();
+  flushReasoning();
   return { contentParts, hasToolCalls, finishChunk };
 }
 
diff --git a/mcpjam-inspector/server/utils/shared-chat-persistence.ts b/mcpjam-inspector/server/utils/shared-chat-persistence.ts
index a5161fe4b..6f90305ac 100644
--- a/mcpjam-inspector/server/utils/shared-chat-persistence.ts
+++ b/mcpjam-inspector/server/utils/shared-chat-persistence.ts
@@ -5,7 +5,8 @@ const PREVIEW_MAX_LENGTH = 200;
 
 interface SaveThreadToConvexOptions {
   chatSessionId: string;
-  shareToken: string;
+  shareToken?: string;
+  sandboxToken?: string;
   bearerToken: string;
   messages: ModelMessage[];
   messageCount: number;
@@ -55,11 +56,21 @@ function getFirstMessagePreview(messages: ModelMessage[]): string {
 export async function saveThreadToConvex({
   chatSessionId,
   shareToken,
+  sandboxToken,
   bearerToken,
   messages,
   messageCount,
   modelId,
 }: SaveThreadToConvexOptions): Promise<void> {
+  if (!!shareToken === !!sandboxToken) {
+    logger.error(
+      "[shared-chat-persistence] Exactly one hosted token is required while saving thread",
+      undefined,
+      { chatSessionId },
+    );
+    return;
+  }
+
   const convexUrl = process.env.CONVEX_HTTP_URL;
   if (!convexUrl) {
     logger.error(
@@ -79,7 +90,8 @@ export async function saveThreadToConvex({
       },
       body: JSON.stringify({
         chatSessionId,
-        shareToken,
+        ...(shareToken ? { shareToken } : {}),
+        ...(sandboxToken ? { sandboxToken } : {}),
         messages,
         messageCount,
         firstMessagePreview: getFirstMessagePreview(messages),