Skip to content

FE-1500: add the example embed route - #9427

Open
kube wants to merge 1 commit into
codex/fe-1500-examplesfrom
claude/fe-1500-embed
Open

FE-1500: add the example embed route#9427
kube wants to merge 1 commit into
codex/fe-1500-examplesfrom
claude/fe-1500-embed

Conversation

@kube

@kube kube commented Aug 29, 2026

Copy link
Copy Markdown
Collaborator

🌟 What is the purpose of this PR?

Adds the embed route /embed/examples/<slug>, rendering the regular Petrinaut component read-only with embed options. This makes the embed URL contract available for oEmbed immediately; a compact preview surface replaces the component in a later PR without changing the contract. Stacked on #9362.

🔗 Related links

🔍 What does this change?

  • New embed route; direct browser visits render it too, so the view can be tested without an iframe harness. Framing policy is enforced by HTTP headers (vercel.json, in the oEmbed PR), not by client-side checks.
  • EmbeddedExamplePage lazy-loads a read-only Petrinaut with all net-management controls hidden and a plain title in the top bar; navigation always uses replace-history inside the iframe. (The review presentation profile that hides authoring controls arrives later in the stack, in FE-1500: add editor presentation profiles #9425.)
  • Embed URLs carry only the shared scenario/subnet/selection subset: new sharedSearchToNavigationState / navigationStateToSharedSearch codecs project the full navigation state onto that contract, and normalizeEmbedSearch drops anything the contract cannot represent on entry.
  • The page keeps the full navigation state in memory and mirrors only its shared projection to the URL: controls that drive URL-unrepresentable state (the mode switcher, the viewport-settings overlay) work inside the embed instead of silently snapping back, and external URL changes (Back/Forward, the normalization redirect) merge back into the in-memory location.
  • Adds the /embed/examples/* SPA rewrite to vercel.json.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph

🐾 Next steps

  • A compact PetrinautPreview surface replaces the full component inside the embed later in this stack, keeping the URL contract property-tested identical.

🛡 What tests cover this?

  • New: embed-route.test.ts (search normalization) and fast-check properties in navigation-search.property.test.ts proving normalizeEmbedSearch is idempotent (so the redirect in beforeLoad terminates) and shared states survive encode then decode.

❓ How to test this?

  1. Checkout the branch and run yarn workspace @hashintel/petrinaut build:lib, then yarn workspace @apps/petrinaut-website dev.
  2. Visit http://localhost:5173/embed/examples/gases-1-pn directly and confirm the read-only embed renders.
  3. Confirm scenario, subnet, and selection changes rewrite the URL without adding history entries, and that unsupported query params are stripped by a replace-redirect on entry.

@kube kube self-assigned this Aug 29, 2026
@vercel

vercel Bot commented Aug 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Building Building Preview Aug 31, 2026 11:17am
petrinaut Ready Ready Preview Aug 31, 2026 11:17am
petrinaut-docs Ready Ready Preview Aug 31, 2026 11:17am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
hashdotdesign-tokens Ignored Ignored Preview Aug 31, 2026 11:17am

Request Review

@kube
kube force-pushed the claude/fe-1500-embed branch from a48dcd5 to 3315bbb Compare August 29, 2026 14:28
@kube
kube force-pushed the claude/fe-1500-embed branch from 3315bbb to 5afc088 Compare August 29, 2026 20:03
@kube
kube changed the base branch from codex/fe-1500-viewer-simulation to codex/fe-1500-examples August 30, 2026 01:09
@github-actions github-actions Bot added area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Aug 30, 2026
@kube
kube force-pushed the claude/fe-1500-embed branch from 5afc088 to 690195c Compare August 30, 2026 01:09
@github-actions github-actions Bot removed area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Aug 30, 2026
@kube
kube force-pushed the claude/fe-1500-embed branch from 690195c to 2d06143 Compare August 30, 2026 03:34
@cursor

cursor Bot commented Aug 31, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Website-only routing and URL normalization for a new embed path; no auth, payments, or publishable library changes.

Overview
Adds /embed/examples/$slug so Petrinaut examples can be embedded (and opened directly) as a read-only, full-viewport surface for oEmbed and iframes.

The embed URL only encodes scenario, subnet, and selection. New shared-search codecs (navigationStateToSharedSearch / sharedSearchToNavigationState) and normalizeEmbedSearch strip invalid or legacy query fragments; beforeLoad replace-redirects when the parsed search or raw query string is not canonical (e.g. extra mode or dangling itemId). EmbeddedExamplePage keeps full navigation state in memory (mode, overlays) while mirroring just the shared subset to the URL with replace history so iframe navigation does not pollute the parent stack.

vercel.json gains an SPA rewrite for /embed/examples/*. Unit and property tests cover normalization, canonical query detection, and idempotent redirect behavior.

Reviewed by Cursor Bugbot for commit b42f4d0. Bugbot is set up for automated code reviews on this repo. Configure here.

Comment thread apps/petrinaut-website/src/routes/embed.examples.$slug.tsx

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ec552ec. Configure here.

Comment thread apps/petrinaut-website/src/examples/embedded-example-page.tsx
@semgrep-code-hashintel

Copy link
Copy Markdown

Semgrep found 1 regex_dos finding:

  • apps/petrinaut-website/src/main/app/brunch-demo/brunch-endpoint.ts

Ensure that the regex used to compare with user supplied input is safe from regular expression denial of service.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

1 participant