experiment(notebooks): webapp Query editor as same-document widget

[mariusandra]

Experiment 3/3: shared widgets — the real insight editor in code, no iframe

Part of the notebook node-editing parity experiments (stacked on #3450). Companion posthog branch: code-widgets-experiment. Verdict from the run: keep / iterate.

Proves the toolbar pattern generalizes: the webapp's full editable Query/InsightViz editor (series row, math dropdown, full TaxonomicFilter, breakdown/filters) mounts same-document inside the code app — shadow root, its own React 18 + kea copy, coexisting with the React 19 tree with zero page errors — and round-trips query JSON to the host via onQueryChange.

What was verified

• Standalone harness: editor fully styled and interactive inside the shadow root; popovers positioned correctly inside it; math change fired onQueryChange ("total" → "dau"); live dark/light flip restyles even open popovers.
• Inside the running Electron app: mountQueryEditor next to the live React 19 UI, math change delivered "weekly_active" through the callback, clean unmount().
• Not yet demonstrated: authenticated in-notebook editing (needs one interactive OAuth login in the experiment app instance; wiring is in place behind localStorage["posthog.notebooks.widgetsUrl"]).

Why it was cheap

Upstream already had the seams: standalone OAuth mode in lib/api.ts (one new in-memory setOAuthSessionOverride seam with a 401→refresh hook), FloatingContainerContext for popover containment, tokens declared on :root, :host. Only userLogic + teamLogic needed hand-mounting; everything else self-mounts via kea connect.

Numbers & findings

• Bundle: widgets.js 2.03 MB (603 KB gz) + CSS 137 KB gz; eager mount cost ~2.7 MB gz total; 186 lazy chunks for deferred surfaces (monaco etc.).
• CORS: non-issue — cloud allows all origins on /api/* (the toolbar depends on this).
• Editor-critical endpoints (query, cohorts, event/property definitions, themes, user/org/team) all declare scope_object → token auth supported.

Dragons

kea-router listens to the host window.history (no interference observed; "open in app" links would misroute); kea's localStorage plugin writes into the host origin; Max AI conversations polling runs even embedded; production serving story (bundle in app resources vs cloud static) undecided.

🤖 Generated with Claude Code

Screenshots

The full TaxonomicFilter open inside the shadow root (dark theme), standalone harness:

Math dropdown, light theme — popovers positioned correctly inside the shadow root:

Mounted inside the running Electron app next to the React 19 UI (widget bottom-right):

[github-actions]

React Doctor found 6 issues in 1 file · 3 errors & 3 warnings.

Errors

• ❌ src/features/notebooks/widgets/QueryWidgetEdit.tsx:60 No JSX.Element no-jsx-element-type
• ❌ src/features/notebooks/widgets/QueryWidgetEdit.tsx:85 State synced to a prop inside an effect no-adjust-state-on-prop-change
• ❌ src/features/notebooks/widgets/QueryWidgetEdit.tsx:92 State synced to a prop inside an effect no-adjust-state-on-prop-change

3 warnings

src/features/notebooks/widgets/QueryWidgetEdit.tsx

• ⚠️ src/features/notebooks/widgets/QueryWidgetEdit.tsx:78 Missing effect dependencies exhaustive-deps
• ⚠️ src/features/notebooks/widgets/QueryWidgetEdit.tsx:78 Multiple setState calls in one effect no-cascading-set-state
• ⚠️ src/features/notebooks/widgets/QueryWidgetEdit.tsx:136 Missing effect dependencies exhaustive-deps

_{Reviewed by React Doctor for commit f73cbc9.}