FE-1500: add Preview quick simulation and compact timeline

[kube]

Summary

Before this PR, PetrinautPreview showed a static marking. Running a scenario needed the full editor with its language server, because the simulation provider lowered scenario code through the language client alone.

PetrinautPreview gains an optional Quick Simulation mode. The host passes precompiled HIR artifacts and bounded run settings; the preview gains scenario configuration, compact playback controls, and a timeline that expands above the playback bar while frames exist. No language tooling is mounted.

9360.mp4

Links

• Ticket FE-1500
• Docs Preview › Quick Simulation

Changes

Simulation provider

• SimulationProvider accepts a compiler and an initialConfiguration

  SimulationCompiler is the compilation surface without an LSP: requestHirArtifacts and requestScenarioHir.
  requestScenarioHir takes the ad-hoc synthesis context and the scenario id a host with precompiled artifacts keys its lookup by.

• useScenarioHir takes an options object

  requestScenarioHir and adHocContext.
  The provider injects the preview compiler; the settings panel and the experiments drawer keep the language client default.

• requireScenario resolves missing or stale selections to the model's first scenario

  The selection normalizes back through controlled navigation. The full editor keeps its "No scenario" flow.

• PlaybackProvider accepts an initialSpeed

Preview

• quickSimulation prop on PetrinautPreview

  hirArtifacts, scenarioHirById, dt, maxTime, allowedPlaybackSpeeds, defaultPlaybackSpeed, parameterBounds, workerFactory.
  Artifacts are validated against the model before mounting and served through a compiler adapter.

• Playback bar is a flat bordered box, square, opaque, without shadow

  It hugs its controls until frames arrive, then widens and expands upward into the timeline, and collapses on reset.
  Animation follows the animations preference and prefers-reduced-motion.
  At widths down to the 177px oEmbed minimum the control row scrolls horizontally.

• SimulationTimeline extracted from the editor's timeline chart with a showLegend prop

  The editor keeps its legend, the preview hides it.

Known issues

• validatePreviewQuickSimulation throws during render when artifacts do not match the model

  Hosts regenerate artifacts with the model and may add an error boundary.

Test coverage

• quick-simulation.test.ts:

  Validation, playback-option resolution, compiler adapter.

• react/simulation/provider.test.ts:

  requireScenario policy.

• preview-quick-simulation-controls.test.tsx:

  Timeline expansion and rAF-driven playback.

• react/playback/provider.test.tsx, navigation-adapter.test.ts:

  Initial speed cases and mode pinning.

How to test

• Render <PetrinautPreview quickSimulation={...} /> with artifacts from yarn workspace @apps/petrinaut-website examples:generate
• Quick Simulation > pick a scenario, adjust a parameter
• Play

  Expect playback to advance and the timeline to expand

• Playback settings

  Expect speeds limited to the allow-list

• Reset

  Expect timeline collapsed

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 4, 2026 9:27am UTC
petrinaut	Ready	Preview	Sep 4, 2026 9:27am UTC
petrinaut-docs	Ready	Preview	Sep 4, 2026 9:27am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 4, 2026 9:27am UTC

[cursor]

PR Summary

Medium Risk
Touches shared simulation/playback providers and scenario selection normalization; preview misconfiguration throws at render, but the full editor path keeps prior defaults.

Overview
PetrinautPreview can opt into Quick Simulation via a new quickSimulation prop: the host supplies precompiled net and per-scenario HIR, fixed dt/maxTime, optional playback speed limits, and parameter bounds. The embed runs scenarios without Monaco/LSP by mounting SimulationProvider with a SimulationCompiler adapter and requireScenario (no “no scenario”; invalid selections normalize to the first scenario).

The preview adds a header Quick Simulation popover (shared scenario controls), a bottom playback bar (reused editor SimulationControls), and an expandable timeline (SimulationTimeline extracted with optional showLegend) that opens when frames exist and collapses on reset.

Simulation stack changes: injectable compiler and initialConfiguration on SimulationProvider; useScenarioHir accepts an options object and passes scenarioId into lowering; PlaybackProvider / PetrinautCanvasProvider honor initialPlaybackSpeed; preview navigation can pin simulate mode. Public @hashintel/petrinaut/preview and react exports document the new types/providers; preview docs describe the feature.

^{Reviewed by Cursor Bugbot for commit cf9e73c. Bugbot is set up for automated code reviews on this repo. Configure here.}

[semgrep-code-hashintel]

Semgrep found 3 detect-replaceall-sanitization findings:

• apps/petrinaut-website/api/oembed.ts
  • L87-92 - Triage
  • L87-91 - Triage
  • L87-88 - Triage

Detected a call to replaceAll() in an attempt to HTML escape the string value .replaceAll("&", "&amp;") .replaceAll('"', "&quot;") .replaceAll("'", "&#39;") .replaceAll("<", "&lt;"). Manually sanitizing input through a manually built list can be circumvented in many situations, and it's better to use a well known sanitization library such as sanitize-html or DOMPurify.

Semgrep found 1 regex_dos finding:

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

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

[Copilot]

🟡 Changes recommended

Preflight validation does not detect mismatched HIR artifacts as documented, and required-scenario normalization lacks integration coverage.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds optional precompiled Quick Simulation support to the embedded Petrinaut preview.

Changes:

• Adds scenario configuration, playback controls, and compact timeline.
• Introduces compiler injection, required-scenario normalization, and initial playback speed.
• Adds tests, user documentation, and a package changeset.

File summaries

File	Description
.changeset/petrinaut-preview-quick-simulation.md	Records the publishable feature.
libs/@hashintel/petrinaut/docs/preview.md	Documents Quick Simulation.
src/react/index.ts	Exports simulation APIs.
src/react/petrinaut-provider-layers.tsx	Threads initial playback speed.
src/react/playback/provider.tsx	Initializes configured playback speed.
src/react/playback/provider.test.tsx	Tests initial speed.
src/react/simulation/provider.tsx	Adds compiler injection and scenario policy.
src/react/simulation/provider.test.ts	Tests scenario selection helper.
src/react/simulation/use-scenario-hir.ts	Supports injected HIR requests.
src/ui/preview/index.ts	Exports Quick Simulation type.
src/ui/preview/navigation-adapter.ts	Pins preview navigation mode.
src/ui/preview/navigation-adapter.test.ts	Tests simulation mode pinning.
src/ui/preview/petrinaut-preview.tsx	Composes Quick Simulation providers and UI.
src/ui/preview/preview-quick-simulation-controls.tsx	Adds compact controls and timeline.
src/ui/preview/preview-quick-simulation-controls.test.tsx	Tests timeline expansion.
src/ui/preview/quick-simulation.ts	Defines validation and compiler adapter.
src/ui/preview/quick-simulation.test.ts	Tests Quick Simulation helpers.
src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/content.tsx	Extracts reusable timeline content.
src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/main.tsx	Uses extracted timeline.
src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx	Adopts the HIR options API.

Review details

• Files reviewed: 20/20 changed files
• Comments generated: 3
• Review effort level: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cursor]

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

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

^{Reviewed by Cursor Bugbot for commit c5d89e5. Configure here.}