feat(thebe): enable in-page live compute via JupyterLite (Phase 2) by mmcky · Pull Request #98 · QuantEcon/quantecon-theme.mystmd

mmcky · 2026-06-19T03:16:23Z

Summary

Enables opt-in in-page live compute via the standard MyST thebe frontmatter, completing Phase 2 (launch parity). The execution infra was already wired in the theme (ComputeOptionsProvider + ThebeLoaderAndServer in Page.tsx; ExecuteScopeProvider + NotebookToolbar in PageContent.tsx) and gated behind project.thebe — so this turns it on, sets the QuantEcon default, verifies it end-to-end, and documents it.

How it works

Enablement is config-derived (compute.enabled = !!thebeFrontmatterToOptions(project.thebe), no runtime setter). Setting project.thebe surfaces the @myst-theme/jupyter NotebookToolbar on notebook pages: a Power toggle, then Run / Restart / Clear once a kernel connects. That per-notebook toolbar is the live-compute toggle — consistent with the framework, no extra top-bar control (matching the decision recorded on #88).

QuantEcon default: JupyterLite

# myst.yml
project:
  thebe:
    lite: true

Python runs in the browser via Pyodide — no server or Binder to host (avoids the flaky Binder, #26). Verified end-to-end: clicking Power boots the Pyodide kernel in-browser and the Run/Restart/Clear controls appear. The Pyodide package caveat (numba/JAX unavailable) is documented in the README, and binder: / server: backends remain available through the same thebe config for projects that need a full environment.

Changes

Fixture — project.thebe: { lite: true } so the toolbar is exercised.
Test — new live-compute-toggle assertion (the Power toggle renders on /notebook); refreshed notebook.png + launch-open.png darwin baselines (the toolbar now renders on the notebook page, and behind the launch popover). Booting Pyodide is a heavy in-browser download, so kernel execution is verified manually, not in CI.
Docs — README "Live compute (Thebe / JupyterLite)" section; PLAN.md Phase 2 marked complete.

Snapshots

Only the darwin baselines are refreshed in this commit. The linux CI baselines need regenerating, so I'll post /update-snapshots on this PR to let the bot refresh them — the visual-regression job will be red until that lands.

Closes #88.

🤖 Generated with Claude Code

Enable opt-in in-page execution via the standard MyST `thebe` frontmatter. The infra was already wired (ComputeOptionsProvider/ThebeLoaderAndServer in Page.tsx; ExecuteScopeProvider/NotebookToolbar in PageContent.tsx) and gated on `project.thebe`; setting it surfaces the @myst-theme/jupyter NotebookToolbar (Power -> Run/Restart/Clear once a kernel connects) on notebook pages, which is the per-notebook live-compute toggle — no extra top-bar control, consistent with the framework. Enablement is config-derived (`compute.enabled = !!thebeFrontmatterToOptions(project.thebe)`). QuantEcon default is JupyterLite (`thebe: { lite: true }`): Python runs in the browser via Pyodide — no server/Binder (avoids the flaky Binder, #26). Verified end-to-end: clicking Power boots the Pyodide kernel in-browser. - fixture: set `project.thebe: { lite: true }` so the toolbar is exercised. - test: assert the live-compute Power toggle renders on /notebook; refresh the notebook.png + launch-open.png darwin snapshots (the toolbar now renders on the notebook page and behind the launch popover). - docs: README "Live compute" section incl. the Pyodide package caveat. Completes Phase 2 (launch parity). Part of #88. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky · 2026-06-19T03:16:57Z

/update-snapshots

Refreshing the linux Chromium baselines for the new live-compute toolbar (notebook.png) and the launch popover backdrop (launch-open.png). Darwin baselines are already updated in db64a28.

github-actions · 2026-06-19T03:17:51Z

PR Preview Action v1.8.1
🚀 View preview at https://QuantEcon.github.io/quantecon-theme.mystmd/pr-preview/pr-98/
Built to branch `gh-pages` at 2026-06-19 10:39 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-06-19T03:18:53Z

🎭 Refreshed visual baselines in 22e3a63:

tests/visual/snapshots/desktop-chrome-linux/launch-open.png
tests/visual/snapshots/desktop-chrome-linux/notebook.png
tests/visual/snapshots/mobile-chrome-linux/notebook.png

github-actions · 2026-06-19T03:19:02Z

🎭 Visual regression results

11 passed
3 skipped

Details

14 tests across 1 suite
24.5 seconds
e3cd165

Skipped tests

mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › launch-colab
mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › live-compute-toggle
mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › live-compute-toggle-absent-without-thebe

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Copilot

Pull request overview

Enables opt-in in-page live compute in the QuantEcon MyST theme by exercising the existing Thebe/Jupyter integration via project.thebe configuration (defaulting the visual fixture to JupyterLite), plus adds a lightweight UI assertion and documentation updates to reflect Phase 2 completion.

Changes:

Update the visual fixture to set project.thebe: { lite: true } (JupyterLite/Pyodide).
Add a Playwright assertion that the live-compute “Power” toggle renders on /notebook.
Document the feature in README.md and mark Phase 2 complete in PLAN.md.

Reviewed changes

Copilot reviewed 4 out of 10 changed files in this pull request and generated 3 comments.

File	Description
`tests/visual/theme.spec.ts`	Adds a new `live-compute-toggle` test asserting the compute toggle UI is visible.
`tests/visual/fixture/myst.yml.in`	Enables Thebe/JupyterLite in the visual fixture via `project.thebe.lite`.
`README.md`	Documents how to enable live compute (Thebe/JupyterLite) and notes Pyodide limitations.
`PLAN.md`	Updates Phase 2 status/description to reflect Thebe live compute completion and BinderHub being dropped.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…opilot #98) - README/PLAN: reword "thebe frontmatter" -> `project.thebe` in `myst.yml` (project-level config read from the project manifest, not per-page frontmatter). - test: match the live-compute toggle by /start compute/i regex, resilient to upstream label wording/casing changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The native @myst-theme/jupyter NotebookToolbar renders as a right-aligned floating sticky pill, which looked orphaned on the notebook page. Wrap it in a labelled "JupyterLite · live compute" bar at the top of the article and neutralise the floating/sticky/right-aligned layout in app.css, so the Power toggle (and Run/Restart/Clear once connected) group together as one intentional control. - PageContent.tsx: labelled bar wrapper around NotebookToolbar. - styles/app.css: neutralise `.myst-jp-nb-toolbar` float/sticky/justify-end inside `.qe-compute-bar`. - refresh notebook.png + launch-open.png darwin snapshots. - README/PLAN: describe the labelled bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky · 2026-06-19T03:57:06Z

/update-snapshots

Relocated the live-compute controls into a labelled "JupyterLite · live compute" bar (was a floating right-aligned pill), so refreshing the linux notebook.png + launch-open.png baselines. Darwin baselines updated in a646e73.

github-actions · 2026-06-19T03:59:03Z

🎭 Refreshed visual baselines in 0b6c752:

tests/visual/snapshots/desktop-chrome-linux/launch-open.png
tests/visual/snapshots/desktop-chrome-linux/notebook.png
tests/visual/snapshots/mobile-chrome-linux/notebook.png

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Per design feedback, the live-compute control now lives in the fixed header toolbar (next to Launch) instead of a floating pill / in-article bar, so it is always visible while scrolling and clusters with the other run controls. The @myst-theme/jupyter NotebookToolbar is article-coupled (its Power button calls both useThebeServer.connect() and useExecutionScope.start(slug)), and the header is mounted outside the Thebe providers — so a naive header button can't reach the connect hooks. Solved with a React portal: ComputeToolbarSlot (rendered from PageContent, inside the providers) portals the toolbar's DOM into a #qe-compute-slot in Toolbar.tsx. React context flows through the React tree, so its hooks/connection keep working without lifting the provider tree. - ComputeToolbarSlot.tsx: client-only createPortal of NotebookToolbar. - Toolbar.tsx: empty:hidden #qe-compute-slot <li> next to Launch. - styles/app.css: neutralise the floating pill, match 20px header icons. - desktop-only (like Launch); live-compute-toggle test skips mobile-chrome. - refresh notebook.png + launch-open.png darwin snapshots; README/PLAN updated. Verified end-to-end: Power in the header boots the Pyodide kernel; Run/Restart/ Clear then appear inline in the header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky · 2026-06-19T04:28:30Z

/update-snapshots

Moved the live-compute toggle into the header toolbar (next to Launch) via a portal, refreshing the linux notebook.png + launch-open.png baselines. Darwin baselines updated in 1f5fcfe.

github-actions · 2026-06-19T04:30:51Z

🎭 Refreshed visual baselines in 0037be9:

tests/visual/snapshots/desktop-chrome-linux/launch-open.png
tests/visual/snapshots/desktop-chrome-linux/notebook.png
tests/visual/snapshots/mobile-chrome-linux/notebook.png

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add a second, minimal visual fixture (tests/visual/fixture-no-thebe/) that does NOT set `project.thebe`, served on a second port, and assert that the live-compute toggle is absent on a real notebook page there. This covers the `!compute.enabled` branch of the gate — the toggle only appears when a project opts into Thebe, not merely because a page is a notebook. - serve.sh: FIXTURE_DIR env selects the fixture project (default `fixture`). - playwright.config.ts: second webServer (NO_THEBE_PORT, default 3112). - theme.spec.ts: live-compute-toggle-absent-without-thebe (desktop-only), with a "Notebook outputs" sanity check so count-0 can't false-pass. - DOM-count assertion, so no new snapshots. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky · 2026-06-19T10:45:33Z

@DrDrij this is plugging in a power button into the title bar when thebe is enabled. I like the integration. I didn't wire it into our play button as the two will almost never been on a the same time, and it was more technically difficult re: dom to do so (as I understand it).

The power button enables thebe connections to the in page code and let's them run via jupyterlite kernel.

test: refresh CI visual snapshots (linux baselines)

22e3a63

ci: nudge run on refreshed linux baselines (snapshot-bot push doesn't…

27076d1

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky requested a review from Copilot June 19, 2026 03:29

Copilot started reviewing on behalf of mmcky June 19, 2026 03:30 View session

Copilot AI reviewed Jun 19, 2026

View reviewed changes

Comment thread tests/visual/theme.spec.ts

Comment thread README.md Outdated

Comment thread PLAN.md Outdated

mmcky marked this pull request as ready for review June 19, 2026 03:40

test: refresh CI visual snapshots (linux baselines)

0b6c752

mmcky and others added 2 commits June 19, 2026 13:59

ci: nudge run on refreshed linux baselines (snapshot-bot push doesn't…

eff400f

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

test: refresh CI visual snapshots (linux baselines)

0037be9

mmcky and others added 2 commits June 19, 2026 14:31

ci: nudge run on refreshed linux baselines (snapshot-bot push doesn't…

9ba6e62

… trigger CI) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mmcky added the design-review label Jun 19, 2026

mmcky requested a review from DrDrij June 26, 2026 04:17

Uh oh!

Uh oh!

Conversation

mmcky commented Jun 19, 2026

Summary

How it works

QuantEcon default: JupyterLite

Changes

Snapshots

Uh oh!

mmcky commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-06-19 10:39 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Visual regression results

Details

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mmcky commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

mmcky commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

mmcky commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jun 19, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-06-19 10:39 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented Jun 19, 2026 •

edited

Loading