Use the explorer component for ephemeral app sandbox pages

[dwwoelfel]

The devtools on ephemeral apps don't work because you can't sign in to them.

This replaces them with the new explorer component.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds devtool: false to database initialization points, introduces admin-token handling, local storage and a toggleable Explorer UI in the ephemeral app sandbox, and expands Tailwind's content globs to include component source files.

Changes

Cohort / File(s)	Summary
Devtools Configuration client/packages/components/src/components/explorer/query-inspector.tsx, client/packages/components/src/hooks/useStableDB.ts	Add devtool: false to InstantReactWebDatabase / init calls to disable devtools integration.
Ephemeral App Enhancements client/sandbox/react-nextjs/components/EphemeralAppPage.tsx	Add Toaster import; maintain adminToken and explorerOpen state; extract/store admin-token from provisioning/verification responses; attempt to load stored token on load; render a fixed toggle button and conditional Explorer panel with Toaster; include devtool: false in final config passed to init.
Build Configuration client/sandbox/react-nextjs/tailwind.config.js	Extend Tailwind content globs to include node_modules/@instantdb/components/src/**/*.{js,ts,jsx,tsx,md}.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EphemeralApp as EphemeralApp Page
    participant Provisioning as Provisioning Service
    participant Storage as Local Storage
    participant Explorer as Explorer UI

    User->>EphemeralApp: Load ephemeral app
    EphemeralApp->>Storage: Read stored admin-token
    Storage-->>EphemeralApp: Return token or null
    alt No token
        User->>EphemeralApp: Request provisioning / verify
        EphemeralApp->>Provisioning: Provision/verify with devtool: false
        Provisioning-->>EphemeralApp: Return app response containing admin-token
        EphemeralApp->>EphemeralApp: Extract admin-token
        EphemeralApp->>Storage: Store admin-token
        EphemeralApp->>EphemeralApp: setAdminToken(state)
    end
    alt admin-token present
        EphemeralApp->>User: Render toggle button
        User->>EphemeralApp: Click toggle
        EphemeralApp->>EphemeralApp: setExplorerOpen(true)
        EphemeralApp->>Explorer: Render Explorer + Toaster
        Explorer-->>User: Display explorer UI
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: using the explorer component to replace devtools on ephemeral app sandbox pages, which aligns with all file changes across multiple components.
Description check	✅ Passed	The description directly explains the rationale (devtools don't work on ephemeral apps due to sign-in restrictions) and the solution (replacing with explorer component), which is related to the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch button-on-admin

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[dwwoelfel]

Disabled the devtool for this internal init instance so that it doesn't conflict with our (or the user's) devtool

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

client/sandbox/react-nextjs/components/EphemeralAppPage.tsx (1)

312-312: Remove commented-out prop.

//useShadowDOM={true} looks like a leftover from debugging. Consider removing it to keep the code clean.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@client/sandbox/react-nextjs/components/EphemeralAppPage.tsx` at line 312,
Remove the commented-out prop left in the EphemeralAppPage component: delete the
line "//useShadowDOM={true}" (search for the useShadowDOM prop or the
EphemeralAppPage JSX block to locate it) so the code has no leftover
debugging/commented props and remains clean.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@client/sandbox/react-nextjs/components/EphemeralAppPage.tsx`:
- Around line 291-316: The Toaster is currently rendered inside the fixed
overlay div that is conditionally mounted by explorerOpen, which causes toasts
to be clipped by overflow: hidden and unmounted when the Explorer closes; move
the <Toaster position="top-right" /> out of the overlay div and render it as a
sibling (still within the EphemeralAppPage component's JSX) so it stays mounted
regardless of explorerOpen and is not constrained by the overlay's overflow,
keeping the existing position prop and without changing the Explorer or overlay
div.

---

Nitpick comments:
In `@client/sandbox/react-nextjs/components/EphemeralAppPage.tsx`:
- Line 312: Remove the commented-out prop left in the EphemeralAppPage
component: delete the line "//useShadowDOM={true}" (search for the useShadowDOM
prop or the EphemeralAppPage JSX block to locate it) so the code has no leftover
debugging/commented props and remains clean.

[github-actions]

View Vercel preview at instant-www-js-button-on-admin-jsv.vercel.app.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@client/sandbox/react-nextjs/components/EphemeralAppPage.tsx`:
- Around line 260-289: The toggle button using setExplorerOpen is missing an
accessible name; update the button element to include an aria-label (e.g.,
aria-label="Toggle Explorer") to provide a screen-reader name, and/or add a
<title> element inside the SVG for assistive tech; ensure the label is concise
and descriptive and that the button remains keyboard-focusable so
setExplorerOpen still toggles the explorer as before.

---

Duplicate comments:
In `@client/sandbox/react-nextjs/components/EphemeralAppPage.tsx`:
- Around line 291-315: This is a duplicate review note and requires no code
change; leave the conditional block using explorerOpen that renders the overlay
div containing <Explorer appId, adminToken, apiURI, websocketURI> and the
<Toaster> as-is per the author’s decision; if you later want Toaster to escape
the overflow, move the <Toaster> out of that fixed overlay div (keep <Explorer>
inside) and ensure Toaster remains mounted at top-level so its positioning is
not clipped.

[stopachka]

Nice!