diff --git a/.changeset/petrinaut-actual-mode.md b/.changeset/petrinaut-actual-mode.md
new file mode 100644
index 00000000000..2047c84949f
--- /dev/null
+++ b/.changeset/petrinaut-actual-mode.md
@@ -0,0 +1,6 @@
+---
+"@hashintel/petrinaut": minor
+"@hashintel/petrinaut-core": minor
+---
+
+Add Actual mode: a read-only live-execution view fed by a host-provided event stream, with an Actual timeline and Events tab, recording export helpers, and a redesigned timeline series selector.
diff --git a/apps/petrinaut-website/package.json b/apps/petrinaut-website/package.json
index a80542d4671..51f0050d04e 100644
--- a/apps/petrinaut-website/package.json
+++ b/apps/petrinaut-website/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "brunch:fixture": "node --experimental-strip-types scripts/brunch-sse-fixture.ts",
     "build": "vite build",
     "dev": "vite",
     "fix:eslint": "oxlint --fix --type-aware --report-unused-disable-directives-severity=error .",
diff --git a/apps/petrinaut-website/scripts/brunch-sse-fixture.ts b/apps/petrinaut-website/scripts/brunch-sse-fixture.ts
new file mode 100644
index 00000000000..f2dbc9d6fe3
--- /dev/null
+++ b/apps/petrinaut-website/scripts/brunch-sse-fixture.ts
@@ -0,0 +1,941 @@
+#!/usr/bin/env node
+
+/**
+ * Local Brunch-compatible SSE fixture for testing Petrinaut Actual mode.
+ *
+ * The script serves a small Petri net execution plan, an initial marking,
+ * historical transition firings, and then streams new `transition_firing`
+ * events over `/stream`. It also exposes `/snapshot` for inspecting the full
+ * fixture state as JSON and prints copy-pasteable Petrinaut `/brunch` URLs
+ * when it starts.
+ *
+ * Pass `--recording=/path/to/export.petrinaut-actual.json` to replay an export
+ * from Petrinaut's Actual > Events tab instead of generating dummy events. Each
+ * `/stream` connection replays that export from the beginning and shifts
+ * timestamped events so the first recorded transition happens at connection
+ * time.
+ *
+ * This Brunch/Petrinaut interface is experimental: the event names, payload
+ * shapes, and endpoint layout are only for this first integration pass. The
+ * durable version will likely become a protocol owned by Petrinaut Core and
+ * standardized with the Brunch team later.
+ */
+
+import { readFileSync } from "node:fs";
+import http, { type ServerResponse } from "node:http";
+import { homedir } from "node:os";
+import { resolve } from "node:path";
+
+import type {
+  BrunchNetDefinitionInput,
+  BrunchTransitionInput,
+} from "../src/main/app/brunch-demo/brunch-protocol";
+import type {
+  ActualModeReceivedEvent,
+  ActualModeTransitionFiring,
+} from "@hashintel/petrinaut-core";
+
+type NumericMarking = Record<string, number>;
+
+type SseFrame = {
+  data: unknown;
+  event: string;
+};
+
+type TimedSseFrame = SseFrame & {
+  delayMs: number;
+};
+
+type RecordingReplay = {
+  definition: BrunchNetDefinitionInput;
+  events: ActualModeReceivedEvent[];
+  initialState: NumericMarking;
+  path: string;
+  transitionFirings: ActualModeTransitionFiring[];
+};
+
+type ParsedArgs = {
+  options: Map<string, string>;
+  positionals: string[];
+};
+
+const readArgs = (): ParsedArgs => {
+  const options = new Map<string, string>();
+  const positionals: string[] = [];
+  const rawArgs = process.argv.slice(2);
+
+  for (let index = 0; index < rawArgs.length; index += 1) {
+    const arg = rawArgs[index]!;
+
+    if (!arg.startsWith("--")) {
+      positionals.push(arg);
+      continue;
+    }
+
+    const normalizedArg = arg.slice(2);
+    const equalsIndex = normalizedArg.indexOf("=");
+
+    if (equalsIndex !== -1) {
+      options.set(
+        normalizedArg.slice(0, equalsIndex),
+        normalizedArg.slice(equalsIndex + 1),
+      );
+      continue;
+    }
+
+    const nextArg = rawArgs[index + 1];
+
+    if (nextArg && !nextArg.startsWith("--")) {
+      options.set(normalizedArg, nextArg);
+      index += 1;
+    } else {
+      options.set(normalizedArg, "true");
+    }
+  }
+
+  return { options, positionals };
+};
+
+const { options: args, positionals } = readArgs();
+
+const readPositiveNumberArg = (
+  name: string,
+  environmentName: string,
+  defaultValue: number,
+): number => {
+  const rawValue = args.get(name) ?? process.env[environmentName];
+
+  if (rawValue === undefined) {
+    return defaultValue;
+  }
+
+  const value = Number(rawValue);
+
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new Error(`Expected --${name} to be a positive number.`);
+  }
+
+  return value;
+};
+
+const host = args.get("host") ?? process.env.HOST ?? "127.0.0.1";
+const intervalMs = readPositiveNumberArg("interval", "INTERVAL", 2_500);
+const port = readPositiveNumberArg("port", "PORT", 5_184);
+const expandFilePath = (path: string): string => {
+  const expandedPath =
+    path === "~"
+      ? homedir()
+      : path.startsWith("~/")
+        ? resolve(homedir(), path.slice(2))
+        : path;
+
+  return resolve(expandedPath);
+};
+
+const rawRecordingPath =
+  args.get("recording") ??
+  args.get("replay") ??
+  process.env.RECORDING ??
+  positionals[0];
+const recordingPath = rawRecordingPath
+  ? expandFilePath(rawRecordingPath)
+  : undefined;
+const runId = args.get("runId") ?? process.env.RUN_ID ?? "dummy-brunch-run";
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const parseJsonFile = (path: string): unknown => {
+  try {
+    return JSON.parse(readFileSync(path, "utf8")) as unknown;
+  } catch (err) {
+    throw new Error(
+      `Unable to load recording at ${path}: ${
+        err instanceof Error ? err.message : String(err)
+      }`,
+    );
+  }
+};
+
+const assertString = (
+  value: unknown,
+  message: string,
+): asserts value is string => {
+  if (typeof value !== "string") {
+    throw new Error(message);
+  }
+};
+
+const unwrapDefinitionData = (data: unknown): unknown =>
+  isRecord(data) && "definition" in data ? data.definition : data;
+
+const unwrapInitialStateData = (data: unknown): unknown =>
+  isRecord(data) && "initialState" in data ? data.initialState : data;
+
+const parseNumericMarking = (data: unknown, label: string): NumericMarking => {
+  const candidate = unwrapInitialStateData(data);
+
+  if (!isRecord(candidate)) {
+    throw new Error(`Recording ${label} must be an object.`);
+  }
+
+  const marking: NumericMarking = {};
+
+  for (const [placeId, value] of Object.entries(candidate)) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new Error(`Recording ${label}.${placeId} must be a finite number.`);
+    }
+
+    marking[placeId] = value;
+  }
+
+  return marking;
+};
+
+const parseTransitionEffect = (
+  data: unknown,
+  label: string,
+): ActualModeTransitionFiring["input"] => {
+  if (!isRecord(data)) {
+    throw new Error(`Recording ${label} must be an object.`);
+  }
+
+  const effect: ActualModeTransitionFiring["input"] = {};
+
+  for (const [placeId, value] of Object.entries(data)) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new Error(`Recording ${label}.${placeId} must be a finite number.`);
+    }
+
+    effect[placeId] = value;
+  }
+
+  return effect;
+};
+
+const parseTransitionFiring = (
+  data: unknown,
+  label: string,
+): ActualModeTransitionFiring => {
+  if (!isRecord(data)) {
+    throw new Error(`Recording ${label} must be an object.`);
+  }
+
+  assertString(
+    data.transitionId,
+    `Recording ${label}.transitionId must be a string.`,
+  );
+  assertString(data.ts, `Recording ${label}.ts must be a string.`);
+
+  if (!Number.isFinite(Date.parse(data.ts))) {
+    throw new Error(`Recording ${label}.ts must be a valid timestamp.`);
+  }
+
+  return {
+    transitionId: data.transitionId,
+    input: parseTransitionEffect(data.input, `${label}.input`),
+    output: parseTransitionEffect(data.output, `${label}.output`),
+    ts: data.ts,
+  };
+};
+
+const parseReceivedEventsRecording = (
+  data: Record<string, unknown>,
+): ActualModeReceivedEvent[] => {
+  if (!Array.isArray(data.events)) {
+    throw new Error("Recording events must be an array.");
+  }
+
+  return data.events.map((event, index) => {
+    if (!isRecord(event)) {
+      throw new Error(`Recording events[${index}] must be an object.`);
+    }
+
+    assertString(
+      event.event,
+      `Recording events[${index}].event must be a string.`,
+    );
+
+    return {
+      event: event.event,
+      data: event.data,
+    };
+  });
+};
+
+const toBrunchDefinitionInput = (data: unknown): BrunchNetDefinitionInput => {
+  const candidate = unwrapDefinitionData(data);
+
+  if (!isRecord(candidate)) {
+    throw new Error("Recording definition must be an object.");
+  }
+
+  if (!Array.isArray(candidate.places)) {
+    throw new Error("Recording definition.places must be an array.");
+  }
+
+  if (!Array.isArray(candidate.transitions)) {
+    throw new Error("Recording definition.transitions must be an array.");
+  }
+
+  return {
+    ...(typeof candidate.version === "number"
+      ? { version: candidate.version }
+      : {}),
+    ...(isRecord(candidate.meta) ? { meta: candidate.meta } : {}),
+    title: typeof candidate.title === "string" ? candidate.title : "Brunch run",
+    places: candidate.places.map((place, index) => {
+      if (!isRecord(place)) {
+        throw new Error(
+          `Recording definition.places[${index}] must be an object.`,
+        );
+      }
+
+      assertString(
+        place.id,
+        `Recording definition.places[${index}].id must be a string.`,
+      );
+
+      return {
+        id: place.id,
+        name: typeof place.name === "string" ? place.name : place.id,
+        ...(typeof place.x === "number" ? { x: place.x } : {}),
+        ...(typeof place.y === "number" ? { y: place.y } : {}),
+      };
+    }),
+    transitions: candidate.transitions.map((transition, transitionIndex) => {
+      if (!isRecord(transition)) {
+        throw new Error(
+          `Recording definition.transitions[${transitionIndex}] must be an object.`,
+        );
+      }
+
+      assertString(
+        transition.id,
+        `Recording definition.transitions[${transitionIndex}].id must be a string.`,
+      );
+
+      if (!Array.isArray(transition.inputArcs)) {
+        throw new Error(
+          `Recording definition.transitions[${transitionIndex}].inputArcs must be an array.`,
+        );
+      }
+
+      if (!Array.isArray(transition.outputArcs)) {
+        throw new Error(
+          `Recording definition.transitions[${transitionIndex}].outputArcs must be an array.`,
+        );
+      }
+
+      return {
+        id: transition.id,
+        name:
+          typeof transition.name === "string" ? transition.name : transition.id,
+        inputArcs: transition.inputArcs.map((arc, arcIndex) => {
+          if (!isRecord(arc)) {
+            throw new Error(
+              `Recording definition.transitions[${transitionIndex}].inputArcs[${arcIndex}] must be an object.`,
+            );
+          }
+
+          assertString(
+            arc.placeId,
+            `Recording definition.transitions[${transitionIndex}].inputArcs[${arcIndex}].placeId must be a string.`,
+          );
+
+          if (typeof arc.weight !== "number") {
+            throw new Error(
+              `Recording definition.transitions[${transitionIndex}].inputArcs[${arcIndex}].weight must be a number.`,
+            );
+          }
+
+          return {
+            placeId: arc.placeId,
+            weight: arc.weight,
+            type:
+              arc.type === "read" || arc.type === "inhibitor"
+                ? arc.type
+                : "standard",
+          };
+        }),
+        outputArcs: transition.outputArcs.map((arc, arcIndex) => {
+          if (!isRecord(arc)) {
+            throw new Error(
+              `Recording definition.transitions[${transitionIndex}].outputArcs[${arcIndex}] must be an object.`,
+            );
+          }
+
+          assertString(
+            arc.placeId,
+            `Recording definition.transitions[${transitionIndex}].outputArcs[${arcIndex}].placeId must be a string.`,
+          );
+
+          if (typeof arc.weight !== "number") {
+            throw new Error(
+              `Recording definition.transitions[${transitionIndex}].outputArcs[${arcIndex}].weight must be a number.`,
+            );
+          }
+
+          return {
+            placeId: arc.placeId,
+            weight: arc.weight,
+          };
+        }),
+        ...(typeof transition.x === "number" ? { x: transition.x } : {}),
+        ...(typeof transition.y === "number" ? { y: transition.y } : {}),
+      };
+    }),
+  };
+};
+
+const parseNormalizedRecording = (
+  data: Record<string, unknown>,
+): ActualModeReceivedEvent[] => {
+  if (!Array.isArray(data.transitionFirings)) {
+    throw new Error("Recording transitionFirings must be an array.");
+  }
+
+  return [
+    { event: "definition", data: toBrunchDefinitionInput(data.definition) },
+    {
+      event: "initial_state",
+      data: parseNumericMarking(data.initialState, "initialState"),
+    },
+    ...data.transitionFirings.map((firing, index) => ({
+      event: "transition_firing",
+      data: parseTransitionFiring(firing, `transitionFirings[${index}]`),
+    })),
+  ];
+};
+
+const parseRecordingEvents = (data: unknown): ActualModeReceivedEvent[] => {
+  if (!isRecord(data)) {
+    throw new Error("Recording root must be an object.");
+  }
+
+  if ("events" in data) {
+    return parseReceivedEventsRecording(data);
+  }
+
+  if (
+    "definition" in data &&
+    "initialState" in data &&
+    "transitionFirings" in data
+  ) {
+    return parseNormalizedRecording(data);
+  }
+
+  throw new Error(
+    "Recording must be an Actual Events export with `events` or an older normalized recording.",
+  );
+};
+
+const findFirstEvent = (
+  events: ActualModeReceivedEvent[],
+  eventName: string,
+): ActualModeReceivedEvent | null =>
+  events.find((event) => event.event === eventName) ?? null;
+
+const parseRecordingReplay = (path: string): RecordingReplay => {
+  const events = parseRecordingEvents(parseJsonFile(path));
+  const definitionEvent = findFirstEvent(events, "definition");
+  const initialStateEvent = findFirstEvent(events, "initial_state");
+
+  if (!definitionEvent) {
+    throw new Error("Recording is missing a definition event.");
+  }
+
+  if (!initialStateEvent) {
+    throw new Error("Recording is missing an initial_state event.");
+  }
+
+  return {
+    definition: toBrunchDefinitionInput(definitionEvent.data),
+    events,
+    initialState: parseNumericMarking(initialStateEvent.data, "initial_state"),
+    path,
+    transitionFirings: events.flatMap((event, index) =>
+      event.event === "transition_firing"
+        ? [parseTransitionFiring(event.data, `events[${index}].data`)]
+        : [],
+    ),
+  };
+};
+
+const getEventTimestampMs = (event: ActualModeReceivedEvent): number | null => {
+  if (!isRecord(event.data) || typeof event.data.ts !== "string") {
+    return null;
+  }
+
+  const timestampMs = Date.parse(event.data.ts);
+
+  if (!Number.isFinite(timestampMs)) {
+    throw new Error(
+      `Recording event ${event.event} has an invalid timestamp: ${event.data.ts}`,
+    );
+  }
+
+  return timestampMs;
+};
+
+const retimeEventData = (data: unknown, deltaMs: number): unknown => {
+  if (!isRecord(data) || typeof data.ts !== "string") {
+    return data;
+  }
+
+  return {
+    ...data,
+    ts: new Date(Date.parse(data.ts) + deltaMs).toISOString(),
+  };
+};
+
+const createTimedReplayFrames = (
+  events: ActualModeReceivedEvent[],
+  launchTimeMs: number,
+): TimedSseFrame[] => {
+  const firstTimestampMs = events
+    .map((event) => getEventTimestampMs(event))
+    .find((timestampMs) => timestampMs !== null);
+  const deltaMs =
+    firstTimestampMs !== undefined ? launchTimeMs - firstTimestampMs : 0;
+
+  return events.map((event) => {
+    const timestampMs = getEventTimestampMs(event);
+
+    return {
+      event: event.event,
+      data: retimeEventData(event.data, deltaMs),
+      delayMs:
+        timestampMs === null
+          ? 0
+          : Math.max(0, timestampMs + deltaMs - launchTimeMs),
+    };
+  });
+};
+
+const applyFiringToMarking = (
+  marking: NumericMarking,
+  firing: ActualModeTransitionFiring,
+): void => {
+  for (const [placeId, value] of Object.entries(firing.input)) {
+    marking[placeId] = (marking[placeId] ?? 0) - value;
+  }
+
+  for (const [placeId, value] of Object.entries(firing.output)) {
+    marking[placeId] = (marking[placeId] ?? 0) + value;
+  }
+};
+
+const defaultDefinition: BrunchNetDefinitionInput = {
+  version: 1,
+  title: "Dummy Brunch Execution Plan",
+  meta: {
+    generator: "petrinaut-website/scripts/brunch-sse-fixture.ts",
+    generatorVersion: "1",
+  },
+  places: [
+    { id: "ideas", name: "Ideas" },
+    { id: "queued", name: "Queued Work" },
+    { id: "implementing", name: "Implementing" },
+    { id: "reviewing", name: "Reviewing" },
+    { id: "done", name: "Done" },
+  ],
+  transitions: [
+    {
+      id: "plan_task",
+      name: "Plan Task",
+      inputArcs: [{ placeId: "ideas", weight: 1, type: "standard" }],
+      outputArcs: [{ placeId: "queued", weight: 1 }],
+    },
+    {
+      id: "start_implementation",
+      name: "Start Implementation",
+      inputArcs: [{ placeId: "queued", weight: 1, type: "standard" }],
+      outputArcs: [{ placeId: "implementing", weight: 1 }],
+    },
+    {
+      id: "submit_review",
+      name: "Submit Review",
+      inputArcs: [{ placeId: "implementing", weight: 1, type: "standard" }],
+      outputArcs: [{ placeId: "reviewing", weight: 1 }],
+    },
+    {
+      id: "merge_change",
+      name: "Merge Change",
+      inputArcs: [{ placeId: "reviewing", weight: 1, type: "standard" }],
+      outputArcs: [{ placeId: "done", weight: 1 }],
+    },
+  ],
+};
+
+const defaultInitialState: NumericMarking = {
+  ideas: 100,
+  queued: 0,
+  implementing: 0,
+  reviewing: 0,
+  done: 0,
+};
+
+const recordingReplay = recordingPath
+  ? parseRecordingReplay(recordingPath)
+  : null;
+
+const definition = recordingReplay?.definition ?? defaultDefinition;
+const initialState = recordingReplay?.initialState ?? defaultInitialState;
+
+const transitionById = new Map(
+  definition.transitions.map((transition) => [transition.id, transition]),
+);
+
+const cloneMarking = (marking: NumericMarking): NumericMarking => ({
+  ...marking,
+});
+
+const getTransition = (transitionId: string): BrunchTransitionInput => {
+  const transition = transitionById.get(transitionId);
+
+  if (!transition) {
+    throw new Error(`Unknown transition: ${transitionId}`);
+  }
+
+  return transition;
+};
+
+const canFire = (marking: NumericMarking, transitionId: string): boolean => {
+  const transition = getTransition(transitionId);
+
+  return transition.inputArcs.every(
+    (arc) => (marking[arc.placeId] ?? 0) >= arc.weight,
+  );
+};
+
+const applyTransition = (
+  marking: NumericMarking,
+  transitionId: string,
+): ActualModeTransitionFiring => {
+  const transition = getTransition(transitionId);
+  const input: ActualModeTransitionFiring["input"] = {};
+  const output: ActualModeTransitionFiring["output"] = {};
+
+  for (const arc of transition.inputArcs) {
+    if ((arc.type ?? "standard") !== "standard") {
+      continue;
+    }
+
+    input[arc.placeId] = (input[arc.placeId] ?? 0) + arc.weight;
+    marking[arc.placeId] = (marking[arc.placeId] ?? 0) - arc.weight;
+  }
+
+  for (const arc of transition.outputArcs) {
+    output[arc.placeId] = (output[arc.placeId] ?? 0) + arc.weight;
+    marking[arc.placeId] = (marking[arc.placeId] ?? 0) + arc.weight;
+  }
+
+  return {
+    transitionId,
+    input,
+    output,
+    ts: new Date().toISOString(),
+  };
+};
+
+const currentMarking = cloneMarking(initialState);
+const transitionFirings: ActualModeTransitionFiring[] = recordingReplay
+  ? recordingReplay.transitionFirings.map((firing) => ({ ...firing }))
+  : [];
+const replayFrames: SseFrame[] = [
+  { event: "definition", data: definition },
+  { event: "initial_state", data: initialState },
+];
+
+const appendFiring = (transitionId: string): ActualModeTransitionFiring => {
+  const firing = applyTransition(currentMarking, transitionId);
+
+  transitionFirings.push(firing);
+  replayFrames.push({ event: "transition_firing", data: firing });
+
+  return firing;
+};
+
+if (recordingReplay) {
+  for (const firing of recordingReplay.transitionFirings) {
+    applyFiringToMarking(currentMarking, firing);
+  }
+} else {
+  for (const transitionId of [
+    "plan_task",
+    "start_implementation",
+    "plan_task",
+    "submit_review",
+    "merge_change",
+  ]) {
+    appendFiring(transitionId);
+  }
+}
+
+let liveTransitionIndex = 0;
+const liveTransitionCycle = [
+  "start_implementation",
+  "plan_task",
+  "submit_review",
+  "start_implementation",
+  "merge_change",
+  "plan_task",
+  "submit_review",
+  "merge_change",
+];
+
+const nextLiveFiring = (): ActualModeTransitionFiring | null => {
+  for (let attempts = 0; attempts < liveTransitionCycle.length; attempts += 1) {
+    const transitionId = liveTransitionCycle[liveTransitionIndex]!;
+    liveTransitionIndex =
+      (liveTransitionIndex + 1) % liveTransitionCycle.length;
+
+    if (canFire(currentMarking, transitionId)) {
+      return appendFiring(transitionId);
+    }
+  }
+
+  // No transition is enabled (the dummy net ran out of tokens); skip the
+  // tick instead of firing an impossible transition into negative counts.
+  return null;
+};
+
+const streamFrame = (
+  response: ServerResponse,
+  event: string,
+  data: unknown,
+): void => {
+  response.write(`event: ${event}\n`);
+  response.write(`data: ${JSON.stringify(data)}\n\n`);
+};
+
+const streamComment = (response: ServerResponse, comment: string): void => {
+  response.write(`: ${comment}\n\n`);
+};
+
+const clients = new Map<ServerResponse, ReturnType<typeof setTimeout>[]>();
+
+const addClient = (
+  response: ServerResponse,
+): ReturnType<typeof setTimeout>[] => {
+  const timers: ReturnType<typeof setTimeout>[] = [];
+  clients.set(response, timers);
+
+  return timers;
+};
+
+const closeClient = (response: ServerResponse): void => {
+  const timers = clients.get(response);
+
+  if (timers) {
+    for (const timer of timers) {
+      clearTimeout(timer);
+    }
+  }
+
+  clients.delete(response);
+};
+
+const publicHost = host === "0.0.0.0" ? "127.0.0.1" : host;
+const endpoint = `http://${publicHost}:${port}/stream`;
+const encodedEndpoint = encodeURIComponent(endpoint);
+const brunchRoute = `/brunch?sse=${encodedEndpoint}&runId=${encodeURIComponent(
+  runId,
+)}`;
+const snapshotUrl = `http://${publicHost}:${port}/snapshot`;
+
+const replayRecordingToClient = (
+  response: ServerResponse,
+  recording: RecordingReplay,
+): void => {
+  const timers = clients.get(response);
+
+  if (!timers) {
+    return;
+  }
+
+  const frames = createTimedReplayFrames(recording.events, Date.now());
+  let lastDelayMs = 0;
+
+  for (const frame of frames) {
+    lastDelayMs = Math.max(lastDelayMs, frame.delayMs);
+
+    const sendFrame = () => {
+      streamFrame(response, frame.event, frame.data);
+
+      if (
+        frame.event === "transition_firing" &&
+        isRecord(frame.data) &&
+        typeof frame.data.transitionId === "string" &&
+        typeof frame.data.ts === "string"
+      ) {
+        console.log(
+          `[${frame.data.ts}] replay transition_firing ${frame.data.transitionId}`,
+        );
+      }
+    };
+
+    if (frame.delayMs === 0) {
+      sendFrame();
+    } else {
+      timers.push(setTimeout(sendFrame, frame.delayMs));
+    }
+  }
+
+  timers.push(
+    setTimeout(() => {
+      streamFrame(response, "terminal", {
+        reason: "recording_replay_complete",
+      });
+      response.end();
+    }, lastDelayMs + 50),
+  );
+};
+
+const server = http.createServer((request, response) => {
+  const url = new URL(request.url ?? "/", endpoint);
+
+  if (url.pathname === "/stream") {
+    response.writeHead(200, {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      "Content-Type": "text/event-stream",
+    });
+
+    streamComment(response, "dummy Brunch SSE fixture connected");
+    addClient(response);
+
+    if (recordingReplay) {
+      replayRecordingToClient(response, recordingReplay);
+    } else {
+      for (const frame of replayFrames) {
+        streamFrame(response, frame.event, frame.data);
+      }
+    }
+
+    request.on("close", () => {
+      closeClient(response);
+    });
+
+    return;
+  }
+
+  if (url.pathname === "/snapshot") {
+    response.writeHead(200, {
+      "Access-Control-Allow-Origin": "*",
+      "Content-Type": "application/json",
+    });
+    response.end(
+      JSON.stringify(
+        {
+          mode: recordingReplay ? "recording-replay" : "generated",
+          recordingPath: recordingReplay?.path ?? null,
+          definition,
+          initialState,
+          currentMarking,
+          transitionFirings,
+        },
+        null,
+        2,
+      ),
+    );
+
+    return;
+  }
+
+  response.writeHead(200, { "Content-Type": "text/plain" });
+  response.end(
+    [
+      "Dummy Brunch SSE fixture",
+      "",
+      `SSE endpoint: ${endpoint}`,
+      `Petrinaut route: ${brunchRoute}`,
+      `Snapshot JSON: ${snapshotUrl}`,
+      "",
+      recordingReplay
+        ? `Replaying recording: ${recordingReplay.path}`
+        : "Generated fixture mode.",
+      recordingReplay
+        ? "Each /stream connection replays definition, initial_state, and retimed transition_firing events from the beginning."
+        : "Connect to /stream to receive definition, initial_state, previous transition_firing events, then live transition_firing events.",
+    ].join("\n"),
+  );
+});
+
+const broadcastLiveFiring = (): void => {
+  const firing = nextLiveFiring();
+
+  if (!firing) {
+    return;
+  }
+
+  for (const client of clients.keys()) {
+    streamFrame(client, "transition_firing", firing);
+  }
+
+  console.log(
+    `[${firing.ts}] transition_firing ${firing.transitionId} -> ${JSON.stringify(
+      firing.output,
+    )}`,
+  );
+};
+
+server.on("error", (err: Error & { code?: string }) => {
+  if (err.code === "EADDRINUSE") {
+    console.error(
+      `Port ${port} is already in use on ${host}. Stop the existing fixture or pass another port, for example:`,
+    );
+    console.error(
+      "  yarn workspace @apps/petrinaut-website brunch:fixture -- --port=5185",
+    );
+    process.exit(1);
+  }
+
+  throw err;
+});
+
+server.listen(port, host, () => {
+  console.log("Dummy Brunch SSE fixture running");
+  console.log("");
+  console.log(`SSE endpoint: ${endpoint}`);
+  console.log(`Petrinaut route: ${brunchRoute}`);
+  console.log(`Snapshot JSON: ${snapshotUrl}`);
+  console.log("");
+  if (recordingReplay) {
+    console.log(`Replaying recording: ${recordingReplay.path}`);
+    console.log(
+      `Recorded transition events: ${recordingReplay.transitionFirings.length}`,
+    );
+    console.log(
+      "Each /stream connection replays from the beginning with retimed timestamps.",
+    );
+  } else {
+    console.log(`Streaming live transitions every ${intervalMs}ms.`);
+  }
+  console.log("Stop with Ctrl-C.");
+});
+
+const interval = recordingReplay
+  ? null
+  : setInterval(broadcastLiveFiring, intervalMs);
+
+const shutdown = (): void => {
+  if (interval) {
+    clearInterval(interval);
+  }
+
+  for (const client of clients.keys()) {
+    streamComment(client, "fixture shutting down");
+    client.end();
+    closeClient(client);
+  }
+
+  server.close(() => {
+    process.exit(0);
+  });
+};
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);
diff --git a/apps/petrinaut-website/src/main.tsx b/apps/petrinaut-website/src/main.tsx
index 4d1c2ade620..f45641dc79a 100644
--- a/apps/petrinaut-website/src/main.tsx
+++ b/apps/petrinaut-website/src/main.tsx
@@ -5,7 +5,7 @@ import * as Sentry from "@sentry/react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import { DevApp } from "./main/app";
+import { DemoApp } from "./main/app";
 import { SentryErrorTrackerProvider } from "./sentry/sentry-error-tracker-provider";
 
 const root = createRoot(document.getElementById("root")!, {
@@ -25,7 +25,7 @@ const root = createRoot(document.getElementById("root")!, {
 root.render(
   <StrictMode>
     <SentryErrorTrackerProvider>
-      <DevApp />
+      <DemoApp />
     </SentryErrorTrackerProvider>
   </StrictMode>,
 );
diff --git a/apps/petrinaut-website/src/main/app.tsx b/apps/petrinaut-website/src/main/app.tsx
index b418482bd55..b22fd8654c2 100644
--- a/apps/petrinaut-website/src/main/app.tsx
+++ b/apps/petrinaut-website/src/main/app.tsx
@@ -1,299 +1,11 @@
-import { produce } from "immer";
-import { useEffect, useMemo, useState } from "react";
+import { BrunchDemoApp } from "./app/brunch-demo/brunch-demo-app";
+import { isBrunchDemoRoute } from "./app/brunch-demo/brunch-route";
+import { LocalStorageDemoApp } from "./app/local-storage-demo/local-storage-demo-app";
 
-import { createJsonDocHandle } from "@hashintel/petrinaut-core";
-import {
-  DefaultChatTransport,
-  Petrinaut,
-  type PetrinautAiChatTransport,
-  type PetrinautAiMessage,
-  WalkthroughProvider,
-} from "@hashintel/petrinaut/ui";
-
-import { useSentryFeedbackAction } from "./app/sentry-feedback-button";
-import { useLocalStorageAiMessages } from "./app/use-local-storage-ai-messages";
-import {
-  type SDCPNInLocalStorage,
-  useLocalStorageSDCPNs,
-} from "./app/use-local-storage-sdcpns";
-import { walkthroughSteps } from "./app/walkthrough/walkthrough-steps";
-
-import type {
-  MinimalNetMetadata,
-  PetrinautDocHandle,
-  SDCPN,
-} from "@hashintel/petrinaut-core";
-
-const isEmptySDCPN = (sdcpn: SDCPN) =>
-  sdcpn.places.length === 0 &&
-  sdcpn.transitions.length === 0 &&
-  sdcpn.types.length === 0 &&
-  sdcpn.parameters.length === 0 &&
-  sdcpn.differentialEquations.length === 0;
-
-const emptySDCPN: SDCPN = {
-  places: [],
-  transitions: [],
-  types: [],
-  parameters: [],
-  differentialEquations: [],
-};
-
-const createDefaultStoredSDCPN = (): SDCPNInLocalStorage => ({
-  id: "net-1",
-  title: "New Process",
-  sdcpn: emptySDCPN,
-  lastUpdated: new Date(0).toISOString(),
-});
-
-/**
- * Creates the localStorage record for a newly created net, keeping the generated
- * id and last-updated timestamp in sync.
- */
-const createLocalStorageNetRecord = (params: {
-  petriNetDefinition: SDCPN;
-  title: string;
-}): SDCPNInLocalStorage => {
-  const now = new Date();
-
-  return {
-    id: `net-${now.getTime()}`,
-    title: params.title,
-    sdcpn: params.petriNetDefinition,
-    lastUpdated: now.toISOString(),
-  };
-};
-
-const createHandle = (net: SDCPNInLocalStorage): PetrinautDocHandle =>
-  createJsonDocHandle({ id: net.id, initial: net.sdcpn });
-
-const petrinautAiChatTransport: PetrinautAiChatTransport =
-  new DefaultChatTransport({
-    api: "/api/chat",
-  });
-
-const getStoredSDCPNsForDisplay = (
-  storedSDCPNs: Record<string, SDCPNInLocalStorage>,
-): Record<string, SDCPNInLocalStorage> => {
-  if (Object.values(storedSDCPNs).length > 0) {
-    return storedSDCPNs;
-  }
-
-  const defaultStoredSDCPN = createDefaultStoredSDCPN();
-  return { [defaultStoredSDCPN.id]: defaultStoredSDCPN };
-};
-
-type ActiveHandle = {
-  handle: PetrinautDocHandle;
-  netId: string;
-  fallbackNet: SDCPNInLocalStorage;
-};
-
-const createActiveHandle = (net: SDCPNInLocalStorage): ActiveHandle => ({
-  handle: createHandle(net),
-  netId: net.id,
-  fallbackNet: net,
-});
-
-/**
- * Demo-site shell for Petrinaut.
- *
- * Local storage is the persistence layer for saved nets, while the active
- * Petrinaut document handle owns the currently open net's live editable state.
- * Switching files replaces the active handle instead of keeping handles alive
- * for background nets.
- */
-export const DevApp = () => {
-  const sentryFeedbackAction = useSentryFeedbackAction();
-  const { aiMessagesByNetId, setAiMessagesByNetId } =
-    useLocalStorageAiMessages();
-  const { storedSDCPNs, setStoredSDCPNs } = useLocalStorageSDCPNs();
-  const storedSDCPNsForDisplay = getStoredSDCPNsForDisplay(storedSDCPNs);
-
-  // Pick the most recently modified net
-  const mostRecentlyModifiedNet =
-    Object.values(storedSDCPNsForDisplay).sort(
-      (a, b) =>
-        new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime(),
-    )[0] ?? null;
-
-  // The net currently selected in the UI.
-  const [currentNetId, setCurrentNetId] = useState<string | null>(
-    () => mostRecentlyModifiedNet?.id ?? null,
-  );
-
-  // Metadata and persisted SDCPN snapshot for the selected net.
-  const currentNet = currentNetId
-    ? (storedSDCPNsForDisplay[currentNetId] ?? null)
-    : null;
-
-  // Live editable document handle for the selected net only.
-  const [activeHandle, setActiveHandle] = useState<ActiveHandle | null>(() =>
-    mostRecentlyModifiedNet
-      ? createActiveHandle(mostRecentlyModifiedNet)
-      : null,
-  );
-
-  useEffect(() => {
-    if (!activeHandle) {
-      return;
-    }
-
-    const { fallbackNet, handle, netId } = activeHandle;
-
-    return handle.subscribe((event) => {
-      const lastUpdated = new Date().toISOString();
-
-      setStoredSDCPNs((prev) => {
-        const stored = prev[netId] ?? fallbackNet;
-
-        return produce(prev, (draft) => {
-          draft[netId] = {
-            ...stored,
-            sdcpn: event.next,
-            lastUpdated,
-          };
-        });
-      });
-    });
-  }, [activeHandle, setStoredSDCPNs]);
-
-  const existingNets: MinimalNetMetadata[] = Object.values(storedSDCPNs)
-    .map((net) => ({
-      netId: net.id,
-      title: net.title,
-      lastUpdated: net.lastUpdated,
-    }))
-    .sort(
-      (a, b) =>
-        new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime(),
-    );
-
-  const createNewNet = (params: {
-    petriNetDefinition: SDCPN;
-    title: string;
-  }) => {
-    const newNet = createLocalStorageNetRecord(params);
-    const previousNet =
-      currentNetId && currentNetId !== newNet.id ? currentNet : null;
-    const previousNetIdToRemove = previousNet !== null ? currentNetId : null;
-
-    setStoredSDCPNs((prev) => {
-      const next = { ...prev, [newNet.id]: newNet };
-
-      // Remove the previous net if it was empty and unmodified
-      if (
-        previousNetIdToRemove &&
-        previousNet &&
-        isEmptySDCPN(prev[previousNetIdToRemove]?.sdcpn ?? previousNet.sdcpn)
-      ) {
-        delete next[previousNetIdToRemove];
-      }
-
-      return next;
-    });
-    setActiveHandle(createActiveHandle(newNet));
-    setCurrentNetId(newNet.id);
-  };
-
-  const loadPetriNet = (petriNetId: string) => {
-    const netToLoad = storedSDCPNsForDisplay[petriNetId];
-    if (!netToLoad) {
-      return;
-    }
-
-    // Remove the current net if it was empty and unmodified
-    if (currentNetId && currentNetId !== petriNetId) {
-      const previousNetIdToRemove =
-        currentNet && isEmptySDCPN(currentNet.sdcpn) ? currentNetId : null;
-
-      setStoredSDCPNs((prev) => {
-        const prevNet = previousNetIdToRemove
-          ? prev[previousNetIdToRemove]
-          : null;
-
-        if (previousNetIdToRemove && prevNet && isEmptySDCPN(prevNet.sdcpn)) {
-          const next = { ...prev };
-          delete next[previousNetIdToRemove];
-          return next;
-        }
-        return prev;
-      });
-    }
-    setActiveHandle(createActiveHandle(netToLoad));
-    setCurrentNetId(petriNetId);
-  };
-
-  const setTitle = (title: string) => {
-    if (!currentNetId || !currentNet) {
-      return;
-    }
-
-    const lastUpdated = new Date().toISOString();
-
-    setStoredSDCPNs((prev) =>
-      produce(prev, (draft) => {
-        draft[currentNetId] = {
-          ...(draft[currentNetId] ?? currentNet),
-          title,
-          lastUpdated,
-        };
-      }),
-    );
-  };
-
-  const aiAssistant = useMemo(
-    () => ({
-      transport: petrinautAiChatTransport,
-      messages: currentNetId ? aiMessagesByNetId[currentNetId] : undefined,
-      onMessages: (messages: PetrinautAiMessage[]) => {
-        if (!currentNetId) {
-          return;
-        }
-
-        setAiMessagesByNetId((prev) => ({
-          ...prev,
-          [currentNetId]: messages,
-        }));
-      },
-      onClearMessages: () => {
-        if (!currentNetId) {
-          return;
-        }
-
-        setAiMessagesByNetId((prev) => {
-          const next = { ...prev };
-          delete next[currentNetId];
-          return next;
-        });
-      },
-    }),
-    [aiMessagesByNetId, currentNetId, setAiMessagesByNetId],
-  );
-
-  if (!currentNet) {
-    return null;
-  }
-
-  if (!activeHandle || activeHandle.netId !== currentNet.id) {
-    return null;
+export const DemoApp = () => {
+  if (isBrunchDemoRoute()) {
+    return <BrunchDemoApp />;
   }
 
-  return (
-    <div style={{ height: "100vh", width: "100vw" }}>
-      <WalkthroughProvider steps={walkthroughSteps}>
-        <Petrinaut
-          aiAssistant={aiAssistant}
-          handle={activeHandle.handle}
-          existingNets={existingNets}
-          createNewNet={createNewNet}
-          loadPetriNet={loadPetriNet}
-          readonly={false}
-          setTitle={setTitle}
-          title={currentNet.title}
-          viewportActions={[sentryFeedbackAction]}
-        />
-      </WalkthroughProvider>
-    </div>
-  );
+  return <LocalStorageDemoApp />;
 };
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-provider.tsx b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-provider.tsx
new file mode 100644
index 00000000000..8974dd4e4ef
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-provider.tsx
@@ -0,0 +1,270 @@
+import { useEffect, useState, type FC, type PropsWithChildren } from "react";
+
+import { ACTUAL_MODE_TIMELINE_TICK_MS } from "@hashintel/petrinaut-core";
+import { ActualModeContext } from "@hashintel/petrinaut/react";
+
+import { normalizeBrunchDefinition } from "./brunch-definition";
+import {
+  parseDefinitionFrameData,
+  parseJsonEventData,
+  parseMarkingFrameData,
+  parseTransitionFiringFrameData,
+} from "./brunch-frame-parsers";
+
+import type { ActualModeContextValue } from "@hashintel/petrinaut-core";
+
+type AvailableActualModeContextValue = Extract<
+  ActualModeContextValue,
+  { available: true }
+>;
+
+const createLoadingActualModeValue = (
+  endpoint: string,
+  runId: string | undefined,
+): AvailableActualModeContextValue => {
+  const now = Date.now();
+
+  return {
+    available: true,
+    source: {
+      kind: "brunch",
+      endpoint,
+      ...(runId ? { runId } : {}),
+    },
+    status: "loading",
+    title: null,
+    definition: null,
+    initialState: null,
+    transitionFirings: [],
+    receivedEvents: [],
+    timelineStartedAtMs: now,
+    timelineNowMs: now,
+    error: null,
+  };
+};
+
+export const BrunchActualModeProvider: FC<
+  PropsWithChildren<{ endpoint: string; runId?: string }>
+> = ({ children, endpoint, runId }) => {
+  const [value, setValue] = useState<AvailableActualModeContextValue>(() =>
+    createLoadingActualModeValue(endpoint, runId),
+  );
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setValue((prev) =>
+        prev.status === "streaming"
+          ? {
+              ...prev,
+              timelineNowMs: Date.now(),
+            }
+          : prev,
+      );
+    }, ACTUAL_MODE_TIMELINE_TICK_MS);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    setValue(createLoadingActualModeValue(endpoint, runId));
+  }, [endpoint, runId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    let hasConnectedBefore = false;
+    const eventSource = new EventSource(endpoint);
+
+    const setFatalError = (message: string) => {
+      if (cancelled) {
+        return;
+      }
+
+      eventSource.close();
+      setValue((prev) => ({
+        ...prev,
+        status: "error",
+        timelineNowMs: Date.now(),
+        error: message,
+      }));
+    };
+
+    const setRecoverableConnectionError = (message: string) => {
+      if (cancelled) {
+        return;
+      }
+
+      setValue((prev) => {
+        if (prev.status === "error") {
+          return prev;
+        }
+
+        const canRenderActualMode =
+          prev.definition !== null && prev.initialState !== null;
+
+        return {
+          ...prev,
+          status:
+            prev.status === "complete"
+              ? "complete"
+              : canRenderActualMode
+                ? "streaming"
+                : "loading",
+          timelineNowMs: Date.now(),
+          error: message,
+        };
+      });
+    };
+
+    const onOpen = () => {
+      if (cancelled) {
+        return;
+      }
+
+      const isReconnect = hasConnectedBefore;
+      hasConnectedBefore = true;
+
+      setValue((prev) => {
+        const error = prev.status === "error" ? prev.error : null;
+
+        if (!isReconnect) {
+          return { ...prev, error };
+        }
+
+        // The temporary Brunch protocol replays the whole run (definition,
+        // initial_state, and every past transition_firing) on each connection,
+        // so appending across an automatic reconnect would duplicate every
+        // previously received event. Drop the accumulated events and let the
+        // replay rebuild them; the already-loaded definition and initial state
+        // stay visible until the replay re-delivers them. The timeline start
+        // is re-baselined too, so the briefly empty firing list does not
+        // synthesize tick frames reaching back to the original page load.
+        return {
+          ...prev,
+          transitionFirings: [],
+          receivedEvents: [],
+          timelineStartedAtMs: Date.now(),
+          timelineNowMs: Date.now(),
+          error,
+        };
+      });
+    };
+
+    const onDefinition = (event: Event) => {
+      void (async () => {
+        try {
+          const data = parseJsonEventData(event as MessageEvent, "definition");
+          const definition = parseDefinitionFrameData(data);
+
+          setValue((prev) => ({
+            ...prev,
+            status: prev.status === "complete" ? "complete" : "streaming",
+            receivedEvents: [
+              ...prev.receivedEvents,
+              { event: "definition", data },
+            ],
+            timelineNowMs: Date.now(),
+            error: null,
+          }));
+
+          const sdcpn = await normalizeBrunchDefinition(definition);
+
+          if (cancelled) {
+            return;
+          }
+
+          setValue((prev) => ({
+            ...prev,
+            status: prev.status === "complete" ? "complete" : "streaming",
+            title: definition.title,
+            definition: sdcpn,
+            timelineNowMs: Date.now(),
+            error: null,
+          }));
+        } catch (err) {
+          setFatalError(err instanceof Error ? err.message : String(err));
+        }
+      })();
+    };
+
+    const onInitialState = (event: Event) => {
+      try {
+        const data = parseJsonEventData(event as MessageEvent, "initial_state");
+        const initialState = parseMarkingFrameData(data);
+        setValue((prev) => ({
+          ...prev,
+          status: prev.status === "complete" ? "complete" : "streaming",
+          initialState,
+          receivedEvents: [
+            ...prev.receivedEvents,
+            { event: "initial_state", data },
+          ],
+          timelineNowMs: Date.now(),
+          error: null,
+        }));
+      } catch (err) {
+        setFatalError(err instanceof Error ? err.message : String(err));
+      }
+    };
+
+    const onTransitionFiring = (event: Event) => {
+      try {
+        const data = parseJsonEventData(
+          event as MessageEvent,
+          "transition_firing",
+        );
+        const firing = parseTransitionFiringFrameData(data);
+        setValue((prev) => ({
+          ...prev,
+          status: prev.status === "complete" ? "complete" : "streaming",
+          transitionFirings: [...prev.transitionFirings, firing],
+          receivedEvents: [
+            ...prev.receivedEvents,
+            { event: "transition_firing", data },
+          ],
+          timelineNowMs: Date.now(),
+          error: null,
+        }));
+      } catch (err) {
+        setFatalError(err instanceof Error ? err.message : String(err));
+      }
+    };
+
+    const onTerminal = () => {
+      eventSource.close();
+      setValue((prev) => ({
+        ...prev,
+        status: "complete",
+        timelineNowMs: Date.now(),
+        error: null,
+      }));
+    };
+
+    const onError = () => {
+      setRecoverableConnectionError(
+        "Connection to the Brunch stream was interrupted. Reconnecting...",
+      );
+    };
+
+    eventSource.addEventListener("open", onOpen);
+    eventSource.addEventListener("definition", onDefinition);
+    eventSource.addEventListener("initial_state", onInitialState);
+    eventSource.addEventListener("transition_firing", onTransitionFiring);
+    eventSource.addEventListener("terminal", onTerminal);
+    eventSource.addEventListener("error", onError);
+
+    return () => {
+      cancelled = true;
+      eventSource.close();
+      eventSource.removeEventListener("open", onOpen);
+      eventSource.removeEventListener("definition", onDefinition);
+      eventSource.removeEventListener("initial_state", onInitialState);
+      eventSource.removeEventListener("transition_firing", onTransitionFiring);
+      eventSource.removeEventListener("terminal", onTerminal);
+      eventSource.removeEventListener("error", onError);
+    };
+  }, [endpoint, runId]);
+
+  return <ActualModeContext value={value}>{children}</ActualModeContext>;
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-route.tsx b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-route.tsx
new file mode 100644
index 00000000000..28ada7d3f92
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-actual-mode-route.tsx
@@ -0,0 +1,36 @@
+import { BrunchActualModeProvider } from "./brunch-actual-mode-provider";
+import { getBrunchEndpointFromLocation } from "./brunch-endpoint";
+import { BrunchPetrinaut } from "./brunch-petrinaut";
+import { BrunchStatusPage } from "./brunch-status-page";
+
+import type { ViewportAction } from "@hashintel/petrinaut/ui";
+
+export { BrunchActualModeProvider } from "./brunch-actual-mode-provider";
+export { getBrunchEndpointFromLocation } from "./brunch-endpoint";
+
+export const BrunchActualModeRoute = ({
+  viewportActions,
+}: {
+  viewportActions: ViewportAction[];
+}) => {
+  const endpointResult = getBrunchEndpointFromLocation(window.location);
+
+  if (!endpointResult.ok) {
+    return (
+      <BrunchStatusPage
+        title="Missing Brunch endpoint"
+        body={endpointResult.error}
+      />
+    );
+  }
+
+  return (
+    <BrunchActualModeProvider
+      endpoint={endpointResult.endpoint}
+      key={`${endpointResult.endpoint}:${endpointResult.runId ?? ""}`}
+      runId={endpointResult.runId}
+    >
+      <BrunchPetrinaut viewportActions={viewportActions} />
+    </BrunchActualModeProvider>
+  );
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-definition.ts b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-definition.ts
new file mode 100644
index 00000000000..52015aeb709
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-definition.ts
@@ -0,0 +1,71 @@
+import {
+  calculateGraphLayout,
+  layoutNodeDimensions,
+} from "@hashintel/petrinaut-core";
+
+import type { BrunchNetDefinition } from "./brunch-protocol";
+import type { SDCPN } from "@hashintel/petrinaut-core";
+
+export { brunchNetDefinitionSchema } from "./brunch-protocol";
+
+const shouldAutoLayout = (definition: BrunchNetDefinition): boolean => {
+  const nodes = [...definition.places, ...definition.transitions];
+
+  if (nodes.some((node) => node.x === undefined || node.y === undefined)) {
+    return true;
+  }
+
+  return (
+    nodes.length > 1 && nodes.every((node) => node.x === 0 && node.y === 0)
+  );
+};
+
+const toSDCPN = (definition: BrunchNetDefinition): SDCPN => ({
+  places: definition.places.map((place) => ({
+    id: place.id,
+    name: place.name,
+    colorId: null,
+    dynamicsEnabled: false,
+    differentialEquationId: null,
+    x: place.x ?? 0,
+    y: place.y ?? 0,
+  })),
+  transitions: definition.transitions.map((transition) => ({
+    id: transition.id,
+    name: transition.name,
+    inputArcs: transition.inputArcs,
+    outputArcs: transition.outputArcs,
+    lambdaType: "predicate",
+    lambdaCode: "",
+    transitionKernelCode: "",
+    x: transition.x ?? 0,
+    y: transition.y ?? 0,
+  })),
+  types: [],
+  differentialEquations: [],
+  parameters: [],
+});
+
+export const normalizeBrunchDefinition = async (
+  definition: BrunchNetDefinition,
+): Promise<SDCPN> => {
+  const sdcpn = toSDCPN(definition);
+
+  if (!shouldAutoLayout(definition)) {
+    return sdcpn;
+  }
+
+  const positions = await calculateGraphLayout(sdcpn, layoutNodeDimensions);
+
+  return {
+    ...sdcpn,
+    places: sdcpn.places.map((place) => ({
+      ...place,
+      ...positions[place.id],
+    })),
+    transitions: sdcpn.transitions.map((transition) => ({
+      ...transition,
+      ...positions[transition.id],
+    })),
+  };
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-demo-app.tsx b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-demo-app.tsx
new file mode 100644
index 00000000000..c7a11828aec
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-demo-app.tsx
@@ -0,0 +1,8 @@
+import { useSentryFeedbackAction } from "../sentry-feedback-button";
+import { BrunchActualModeRoute } from "./brunch-actual-mode-route";
+
+export const BrunchDemoApp = () => {
+  const sentryFeedbackAction = useSentryFeedbackAction();
+
+  return <BrunchActualModeRoute viewportActions={[sentryFeedbackAction]} />;
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-endpoint.ts b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-endpoint.ts
new file mode 100644
index 00000000000..3fea08294b0
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-endpoint.ts
@@ -0,0 +1,54 @@
+type BrunchEndpointResult =
+  | { ok: true; endpoint: string; runId?: string }
+  | { ok: false; error: string };
+
+const normalizeEndpoint = (value: string): string => {
+  const trimmed = value.trim();
+
+  if (trimmed.length === 0) {
+    throw new Error("Brunch endpoint is empty.");
+  }
+
+  const url = /^https?:\/\//u.test(trimmed)
+    ? new URL(trimmed)
+    : /^(localhost|127\.0\.0\.1|\[::1\])(?::|\/)/u.test(trimmed)
+      ? new URL(`http://${trimmed}`)
+      : new URL(trimmed, window.location.href);
+
+  // EventSource throws synchronously on non-HTTP(S) URLs; reject them here so
+  // the route renders the friendly status page instead.
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error(
+      `Brunch endpoint must use http(s), received "${url.protocol}".`,
+    );
+  }
+
+  return url.toString();
+};
+
+export const getBrunchEndpointFromLocation = (
+  location: Location,
+): BrunchEndpointResult => {
+  const params = new URLSearchParams(location.search);
+  const rawEndpoint = params.get("sse") ?? undefined;
+
+  try {
+    if (rawEndpoint !== undefined) {
+      return {
+        ok: true,
+        endpoint: normalizeEndpoint(rawEndpoint),
+        runId: params.get("runId") ?? undefined,
+      };
+    }
+  } catch (err) {
+    return {
+      ok: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+
+  return {
+    ok: false,
+    error: "Missing Brunch stream endpoint. Add ?sse=<url>.",
+  };
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-frame-parsers.ts b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-frame-parsers.ts
new file mode 100644
index 00000000000..0e9f24b3b86
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-frame-parsers.ts
@@ -0,0 +1,149 @@
+import { z } from "zod";
+
+import {
+  actualModeMarkingSchema,
+  actualModeTransitionFiringSchema,
+} from "@hashintel/petrinaut-core";
+
+import { brunchNetDefinitionSchema } from "./brunch-protocol";
+
+import type { BrunchNetDefinition } from "./brunch-protocol";
+import type {
+  ActualModeMarking,
+  ActualModeTransitionFiring,
+} from "@hashintel/petrinaut-core";
+
+/**
+ * Decode the string payload from an EventSource MessageEvent.
+ *
+ * This is the first parsing stage in the Brunch stream handler. It does not
+ * validate the payload shape; it only turns SSE `data:` text into JSON so the
+ * frame-specific parsers can validate it against the expected protocol schema.
+ */
+export const parseJsonEventData = (
+  event: MessageEvent,
+  label: string,
+): unknown => {
+  try {
+    return JSON.parse(event.data as string) as unknown;
+  } catch (err) {
+    throw new Error(
+      `${label} frame is not valid JSON: ${
+        err instanceof Error ? err.message : String(err)
+      }`,
+    );
+  }
+};
+
+const summarizeZodError = (error: z.ZodError): string =>
+  error.issues
+    .map((issue) => {
+      const path = issue.path.length > 0 ? `${issue.path.join(".")}: ` : "";
+      return `${path}${issue.message}`;
+    })
+    .join(", ");
+
+/**
+ * Validate a decoded Brunch `definition` payload.
+ *
+ * This runs after JSON decoding and before the website normalizes the temporary
+ * Brunch execution-plan shape into a read-only Petrinaut SDCPN for rendering.
+ * The current Brunch fixture may send either the definition directly or wrap it
+ * as `{ definition }`, so this accepts both forms.
+ */
+export const parseDefinitionFrameData = (
+  data: unknown,
+): BrunchNetDefinition => {
+  const candidate =
+    typeof data === "object" && data !== null && "definition" in data
+      ? (data as { definition: unknown }).definition
+      : data;
+  const result = brunchNetDefinitionSchema.safeParse(candidate);
+
+  if (!result.success) {
+    throw new Error(
+      `Invalid Brunch definition frame: ${summarizeZodError(result.error)}`,
+    );
+  }
+
+  return result.data;
+};
+
+/**
+ * Convenience parser for EventSource `definition` events.
+ *
+ * Use this when a caller only needs the validated Brunch definition and does
+ * not need to retain the decoded raw JSON payload for export.
+ */
+export const parseDefinitionFrame = (
+  event: MessageEvent,
+): BrunchNetDefinition =>
+  parseDefinitionFrameData(parseJsonEventData(event, "definition"));
+
+/**
+ * Validate a decoded Brunch `initial_state` payload.
+ *
+ * This runs after JSON decoding and before the provider stores the initial
+ * Actual Mode marking in context. The current fixture may send either the
+ * marking directly or wrap it as `{ initialState }`, so this accepts both forms.
+ */
+export const parseMarkingFrameData = (data: unknown): ActualModeMarking => {
+  const candidate =
+    typeof data === "object" && data !== null && "initialState" in data
+      ? (data as { initialState: unknown }).initialState
+      : data;
+  const result = actualModeMarkingSchema.safeParse(candidate);
+
+  if (!result.success) {
+    throw new Error(
+      `Invalid Brunch initial_state frame: ${summarizeZodError(result.error)}`,
+    );
+  }
+
+  return result.data;
+};
+
+/**
+ * Convenience parser for EventSource `initial_state` events.
+ *
+ * Use this when a caller only needs the validated marking and does not need to
+ * retain the decoded raw JSON payload for export.
+ */
+export const parseMarkingFrame = (event: MessageEvent): ActualModeMarking =>
+  parseMarkingFrameData(parseJsonEventData(event, "initial_state"));
+
+/**
+ * Validate a decoded Brunch `transition_firing` payload.
+ *
+ * This runs after JSON decoding and before the provider appends the event to
+ * Actual Mode state. The accepted schema is the transition effect protocol:
+ * `{ transitionId, input, output, ts }`.
+ */
+export const parseTransitionFiringFrameData = (
+  data: unknown,
+): ActualModeTransitionFiring => {
+  const result = actualModeTransitionFiringSchema.safeParse(data);
+
+  if (!result.success) {
+    throw new Error(
+      `Invalid Brunch transition_firing frame: ${summarizeZodError(
+        result.error,
+      )}`,
+    );
+  }
+
+  return result.data;
+};
+
+/**
+ * Convenience parser for EventSource `transition_firing` events.
+ *
+ * Use this when a caller only needs the validated transition firing and does
+ * not need to retain the decoded raw JSON payload for export.
+ */
+export const parseTransitionFiringFrame = (
+  event: MessageEvent,
+): ActualModeTransitionFiring =>
+  parseTransitionFiringFrameData(
+    parseJsonEventData(event, "transition_firing"),
+  );
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-petrinaut.tsx b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-petrinaut.tsx
new file mode 100644
index 00000000000..57c45fda007
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-petrinaut.tsx
@@ -0,0 +1,113 @@
+import { use, useState } from "react";
+
+import {
+  createJsonDocHandle,
+  PETRINAUT_EXTENSION_NAMES,
+} from "@hashintel/petrinaut-core";
+import { ActualModeContext } from "@hashintel/petrinaut/react";
+import { Petrinaut, type ViewportAction } from "@hashintel/petrinaut/ui";
+
+import { BrunchStatusPage } from "./brunch-status-page";
+
+import type {
+  ActualModeSource,
+  PetrinautDocHandle,
+  SDCPN,
+} from "@hashintel/petrinaut-core";
+
+const getSourceKey = (source: ActualModeSource): string =>
+  `${source.kind}:${source.endpoint}:${source.runId ?? ""}`;
+
+const BrunchPetrinautWithHandle = ({
+  definition,
+  source,
+  title,
+  viewportActions,
+}: {
+  definition: SDCPN;
+  source: ActualModeSource;
+  title: string;
+  viewportActions: ViewportAction[];
+}) => {
+  const [handle] = useState<PetrinautDocHandle>(() =>
+    createJsonDocHandle({
+      id: source.runId ? `brunch-${source.runId}` : "brunch-actual",
+      initial: definition,
+      capabilities: {
+        readonly: true,
+        disabledExtensions: PETRINAUT_EXTENSION_NAMES,
+      },
+      historyLimit: 0,
+    }),
+  );
+
+  return (
+    <div style={{ height: "100vh", width: "100vw" }}>
+      <Petrinaut
+        handle={handle}
+        hideNetManagementControls="except-title"
+        readonly
+        setTitle={() => {}}
+        title={title}
+        viewportActions={viewportActions}
+      />
+    </div>
+  );
+};
+
+export const BrunchPetrinaut = ({
+  viewportActions,
+}: {
+  viewportActions: ViewportAction[];
+}) => {
+  const actualMode = use(ActualModeContext);
+  const definition = actualMode.available ? actualMode.definition : null;
+  const initialState = actualMode.available ? actualMode.initialState : null;
+  const source = actualMode.available ? actualMode.source : null;
+  const sourceKey = source ? getSourceKey(source) : null;
+
+  if (!actualMode.available) {
+    return (
+      <BrunchStatusPage
+        title="Brunch stream unavailable"
+        body="Actual mode requires a Brunch stream endpoint."
+      />
+    );
+  }
+
+  if (actualMode.status === "error") {
+    return (
+      <BrunchStatusPage
+        title="Could not load Brunch run"
+        body={actualMode.error ?? "The Brunch stream returned an error."}
+        endpoint={actualMode.source.endpoint}
+      />
+    );
+  }
+
+  if (!definition || !initialState || !source || !sourceKey) {
+    return (
+      <BrunchStatusPage
+        title="Connecting to Brunch"
+        body={
+          actualMode.error ??
+          "Waiting for the Petri net definition and initial state."
+        }
+        endpoint={actualMode.source.endpoint}
+      />
+    );
+  }
+
+  return (
+    <BrunchPetrinautWithHandle
+      definition={definition}
+      key={sourceKey}
+      source={source}
+      title={
+        actualMode.title ??
+        (source.runId ? `Brunch run ${source.runId}` : "Brunch run")
+      }
+      viewportActions={viewportActions}
+    />
+  );
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-protocol.ts b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-protocol.ts
new file mode 100644
index 00000000000..6e2d2431e2a
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-protocol.ts
@@ -0,0 +1,77 @@
+import { z } from "zod";
+
+export const brunchInputArcSchema = z
+  .object({
+    placeId: z.string(),
+    weight: z.number(),
+    type: z
+      .enum(["standard", "read", "inhibitor"])
+      .optional()
+      .default("standard"),
+  })
+  .strict();
+
+export const brunchOutputArcSchema = z
+  .object({
+    placeId: z.string(),
+    weight: z.number(),
+  })
+  .strict();
+
+export const brunchPlaceSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    x: z.number().optional(),
+    y: z.number().optional(),
+  })
+  .strict();
+
+export const brunchTransitionSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    inputArcs: z.array(brunchInputArcSchema),
+    outputArcs: z.array(brunchOutputArcSchema),
+    x: z.number().optional(),
+    y: z.number().optional(),
+  })
+  .strict();
+
+/**
+ * Temporary root schema for the Brunch execution-plan definition accepted by
+ * the demo.
+ *
+ * This is intentionally not Petrinaut's full SDCPN document format. It only
+ * accepts the plain graph data Actual Mode currently reads from Brunch:
+ * places, transitions, arcs, weights, arc types, and optional coordinates.
+ *
+ * Extension-specific SDCPN fields are excluded on purpose. The Brunch Actual
+ * Mode route does not currently support colours, stochasticity, dynamics,
+ * parameters, transition lambdas, transition kernels, visualizers, or colour
+ * types. `normalizeBrunchDefinition` supplies the required SDCPN defaults while
+ * creating a read-only handle with Petrinaut extensions disabled.
+ *
+ * The whole schema is temporary and should be replaced by the standardized
+ * Brunch/Petrinaut protocol once that protocol is owned in Petrinaut Core.
+ */
+export const brunchNetDefinitionSchema = z
+  .object({
+    version: z.number().optional().default(1),
+    meta: z
+      .object({
+        generator: z.string().optional(),
+        generatorVersion: z.string().optional(),
+      })
+      .optional(),
+    title: z.string().optional().default("Brunch run"),
+    places: z.array(brunchPlaceSchema),
+    transitions: z.array(brunchTransitionSchema),
+  })
+  .strict();
+
+export type BrunchNetDefinition = z.output<typeof brunchNetDefinitionSchema>;
+export type BrunchNetDefinitionInput = z.input<
+  typeof brunchNetDefinitionSchema
+>;
+export type BrunchTransitionInput = z.input<typeof brunchTransitionSchema>;
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-route.ts b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-route.ts
new file mode 100644
index 00000000000..2bb6f47e54f
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-route.ts
@@ -0,0 +1,9 @@
+/**
+ * This is temporary, until Petrinaut Demo app gets a real Router.
+ * Adding a real Router will require to consider every parts of the app, so this is just a quick and dirty solution.
+ */
+export const isBrunchDemoRoute = (): boolean => {
+  const path = window.location.pathname.replace(/\/+$/u, "") || "/";
+
+  return path === "/brunch";
+};
diff --git a/apps/petrinaut-website/src/main/app/brunch-demo/brunch-status-page.tsx b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-status-page.tsx
new file mode 100644
index 00000000000..f79b3c925be
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/brunch-demo/brunch-status-page.tsx
@@ -0,0 +1,62 @@
+import type { CSSProperties } from "react";
+
+const pageStyle: CSSProperties = {
+  alignItems: "center",
+  background: "#f6f7f8",
+  color: "#1f2933",
+  display: "flex",
+  fontFamily: "Inter, system-ui, sans-serif",
+  height: "100vh",
+  justifyContent: "center",
+  padding: 24,
+  width: "100vw",
+};
+
+const panelStyle: CSSProperties = {
+  background: "#ffffff",
+  border: "1px solid #d7dce1",
+  borderRadius: 8,
+  boxShadow: "0 8px 24px rgba(31, 41, 51, 0.08)",
+  maxWidth: 560,
+  padding: 24,
+};
+
+const headingStyle: CSSProperties = {
+  fontSize: 20,
+  lineHeight: "28px",
+  margin: "0 0 8px",
+};
+
+const bodyStyle: CSSProperties = {
+  color: "#4b5563",
+  fontSize: 14,
+  lineHeight: "20px",
+  margin: "0 0 16px",
+};
+
+const linkStyle: CSSProperties = {
+  color: "#2563eb",
+  fontSize: 14,
+  fontWeight: 600,
+};
+
+export const BrunchStatusPage = ({
+  body,
+  endpoint,
+  title,
+}: {
+  body: string;
+  endpoint?: string;
+  title: string;
+}) => (
+  <div style={pageStyle}>
+    <div style={panelStyle}>
+      <h1 style={headingStyle}>{title}</h1>
+      <p style={bodyStyle}>{body}</p>
+      {endpoint ? <p style={bodyStyle}>{endpoint}</p> : null}
+      <a href="/" style={linkStyle}>
+        Back to Petrinaut
+      </a>
+    </div>
+  </div>
+);
diff --git a/apps/petrinaut-website/src/main/app/local-storage-demo/local-storage-demo-app.tsx b/apps/petrinaut-website/src/main/app/local-storage-demo/local-storage-demo-app.tsx
new file mode 100644
index 00000000000..c7093b2952f
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/local-storage-demo/local-storage-demo-app.tsx
@@ -0,0 +1,299 @@
+import { produce } from "immer";
+import { useEffect, useMemo, useState } from "react";
+
+import { createJsonDocHandle } from "@hashintel/petrinaut-core";
+import {
+  DefaultChatTransport,
+  Petrinaut,
+  type PetrinautAiChatTransport,
+  type PetrinautAiMessage,
+  WalkthroughProvider,
+} from "@hashintel/petrinaut/ui";
+
+import { useSentryFeedbackAction } from "../sentry-feedback-button";
+import { useLocalStorageAiMessages } from "./use-local-storage-ai-messages";
+import {
+  type SDCPNInLocalStorage,
+  useLocalStorageSDCPNs,
+} from "./use-local-storage-sdcpns";
+import { walkthroughSteps } from "./walkthrough/walkthrough-steps";
+
+import type {
+  MinimalNetMetadata,
+  PetrinautDocHandle,
+  SDCPN,
+} from "@hashintel/petrinaut-core";
+
+const isEmptySDCPN = (sdcpn: SDCPN) =>
+  sdcpn.places.length === 0 &&
+  sdcpn.transitions.length === 0 &&
+  sdcpn.types.length === 0 &&
+  sdcpn.parameters.length === 0 &&
+  sdcpn.differentialEquations.length === 0;
+
+const emptySDCPN: SDCPN = {
+  places: [],
+  transitions: [],
+  types: [],
+  parameters: [],
+  differentialEquations: [],
+};
+
+const createDefaultStoredSDCPN = (): SDCPNInLocalStorage => ({
+  id: "net-1",
+  title: "New Process",
+  sdcpn: emptySDCPN,
+  lastUpdated: new Date(0).toISOString(),
+});
+
+/**
+ * Creates the localStorage record for a newly created net, keeping the generated
+ * id and last-updated timestamp in sync.
+ */
+const createLocalStorageNetRecord = (params: {
+  petriNetDefinition: SDCPN;
+  title: string;
+}): SDCPNInLocalStorage => {
+  const now = new Date();
+
+  return {
+    id: `net-${now.getTime()}`,
+    title: params.title,
+    sdcpn: params.petriNetDefinition,
+    lastUpdated: now.toISOString(),
+  };
+};
+
+const createHandle = (net: SDCPNInLocalStorage): PetrinautDocHandle =>
+  createJsonDocHandle({ id: net.id, initial: net.sdcpn });
+
+const petrinautAiChatTransport: PetrinautAiChatTransport =
+  new DefaultChatTransport({
+    api: "/api/chat",
+  });
+
+const getStoredSDCPNsForDisplay = (
+  storedSDCPNs: Record<string, SDCPNInLocalStorage>,
+): Record<string, SDCPNInLocalStorage> => {
+  if (Object.values(storedSDCPNs).length > 0) {
+    return storedSDCPNs;
+  }
+
+  const defaultStoredSDCPN = createDefaultStoredSDCPN();
+  return { [defaultStoredSDCPN.id]: defaultStoredSDCPN };
+};
+
+type ActiveHandle = {
+  handle: PetrinautDocHandle;
+  netId: string;
+  fallbackNet: SDCPNInLocalStorage;
+};
+
+const createActiveHandle = (net: SDCPNInLocalStorage): ActiveHandle => ({
+  handle: createHandle(net),
+  netId: net.id,
+  fallbackNet: net,
+});
+
+/**
+ * Local-storage demo shell for Petrinaut.
+ *
+ * Local storage is the persistence layer for saved nets, while the active
+ * Petrinaut document handle owns the currently open net's live editable state.
+ * Switching files replaces the active handle instead of keeping handles alive
+ * for background nets.
+ */
+export const LocalStorageDemoApp = () => {
+  const sentryFeedbackAction = useSentryFeedbackAction();
+  const { aiMessagesByNetId, setAiMessagesByNetId } =
+    useLocalStorageAiMessages();
+  const { storedSDCPNs, setStoredSDCPNs } = useLocalStorageSDCPNs();
+  const storedSDCPNsForDisplay = getStoredSDCPNsForDisplay(storedSDCPNs);
+
+  // Pick the most recently modified net
+  const mostRecentlyModifiedNet =
+    Object.values(storedSDCPNsForDisplay).sort(
+      (a, b) =>
+        new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime(),
+    )[0] ?? null;
+
+  // The net currently selected in the UI.
+  const [currentNetId, setCurrentNetId] = useState<string | null>(
+    () => mostRecentlyModifiedNet?.id ?? null,
+  );
+
+  // Metadata and persisted SDCPN snapshot for the selected net.
+  const currentNet = currentNetId
+    ? (storedSDCPNsForDisplay[currentNetId] ?? null)
+    : null;
+
+  // Live editable document handle for the selected net only.
+  const [activeHandle, setActiveHandle] = useState<ActiveHandle | null>(() =>
+    mostRecentlyModifiedNet
+      ? createActiveHandle(mostRecentlyModifiedNet)
+      : null,
+  );
+
+  useEffect(() => {
+    if (!activeHandle) {
+      return;
+    }
+
+    const { fallbackNet, handle, netId } = activeHandle;
+
+    return handle.subscribe((event) => {
+      const lastUpdated = new Date().toISOString();
+
+      setStoredSDCPNs((prev) => {
+        const stored = prev[netId] ?? fallbackNet;
+
+        return produce(prev, (draft) => {
+          draft[netId] = {
+            ...stored,
+            sdcpn: event.next,
+            lastUpdated,
+          };
+        });
+      });
+    });
+  }, [activeHandle, setStoredSDCPNs]);
+
+  const existingNets: MinimalNetMetadata[] = Object.values(storedSDCPNs)
+    .map((net) => ({
+      netId: net.id,
+      title: net.title,
+      lastUpdated: net.lastUpdated,
+    }))
+    .sort(
+      (a, b) =>
+        new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime(),
+    );
+
+  const createNewNet = (params: {
+    petriNetDefinition: SDCPN;
+    title: string;
+  }) => {
+    const newNet = createLocalStorageNetRecord(params);
+    const previousNet =
+      currentNetId && currentNetId !== newNet.id ? currentNet : null;
+    const previousNetIdToRemove = previousNet !== null ? currentNetId : null;
+
+    setStoredSDCPNs((prev) => {
+      const next = { ...prev, [newNet.id]: newNet };
+
+      // Remove the previous net if it was empty and unmodified
+      if (
+        previousNetIdToRemove &&
+        previousNet &&
+        isEmptySDCPN(prev[previousNetIdToRemove]?.sdcpn ?? previousNet.sdcpn)
+      ) {
+        delete next[previousNetIdToRemove];
+      }
+
+      return next;
+    });
+    setActiveHandle(createActiveHandle(newNet));
+    setCurrentNetId(newNet.id);
+  };
+
+  const loadPetriNet = (petriNetId: string) => {
+    const netToLoad = storedSDCPNsForDisplay[petriNetId];
+    if (!netToLoad) {
+      return;
+    }
+
+    // Remove the current net if it was empty and unmodified
+    if (currentNetId && currentNetId !== petriNetId) {
+      const previousNetIdToRemove =
+        currentNet && isEmptySDCPN(currentNet.sdcpn) ? currentNetId : null;
+
+      setStoredSDCPNs((prev) => {
+        const prevNet = previousNetIdToRemove
+          ? prev[previousNetIdToRemove]
+          : null;
+
+        if (previousNetIdToRemove && prevNet && isEmptySDCPN(prevNet.sdcpn)) {
+          const next = { ...prev };
+          delete next[previousNetIdToRemove];
+          return next;
+        }
+        return prev;
+      });
+    }
+    setActiveHandle(createActiveHandle(netToLoad));
+    setCurrentNetId(petriNetId);
+  };
+
+  const setTitle = (title: string) => {
+    if (!currentNetId || !currentNet) {
+      return;
+    }
+
+    const lastUpdated = new Date().toISOString();
+
+    setStoredSDCPNs((prev) =>
+      produce(prev, (draft) => {
+        draft[currentNetId] = {
+          ...(draft[currentNetId] ?? currentNet),
+          title,
+          lastUpdated,
+        };
+      }),
+    );
+  };
+
+  const aiAssistant = useMemo(
+    () => ({
+      transport: petrinautAiChatTransport,
+      messages: currentNetId ? aiMessagesByNetId[currentNetId] : undefined,
+      onMessages: (messages: PetrinautAiMessage[]) => {
+        if (!currentNetId) {
+          return;
+        }
+
+        setAiMessagesByNetId((prev) => ({
+          ...prev,
+          [currentNetId]: messages,
+        }));
+      },
+      onClearMessages: () => {
+        if (!currentNetId) {
+          return;
+        }
+
+        setAiMessagesByNetId((prev) => {
+          const next = { ...prev };
+          delete next[currentNetId];
+          return next;
+        });
+      },
+    }),
+    [aiMessagesByNetId, currentNetId, setAiMessagesByNetId],
+  );
+
+  if (!currentNet) {
+    return null;
+  }
+
+  if (!activeHandle || activeHandle.netId !== currentNet.id) {
+    return null;
+  }
+
+  return (
+    <div style={{ height: "100vh", width: "100vw" }}>
+      <WalkthroughProvider steps={walkthroughSteps}>
+        <Petrinaut
+          aiAssistant={aiAssistant}
+          handle={activeHandle.handle}
+          existingNets={existingNets}
+          createNewNet={createNewNet}
+          loadPetriNet={loadPetriNet}
+          readonly={false}
+          setTitle={setTitle}
+          title={currentNet.title}
+          viewportActions={[sentryFeedbackAction]}
+        />
+      </WalkthroughProvider>
+    </div>
+  );
+};
diff --git a/apps/petrinaut-website/src/main/app/use-local-storage-ai-messages.ts b/apps/petrinaut-website/src/main/app/local-storage-demo/use-local-storage-ai-messages.ts
similarity index 100%
rename from apps/petrinaut-website/src/main/app/use-local-storage-ai-messages.ts
rename to apps/petrinaut-website/src/main/app/local-storage-demo/use-local-storage-ai-messages.ts
diff --git a/apps/petrinaut-website/src/main/app/use-local-storage-sdcpns.ts b/apps/petrinaut-website/src/main/app/local-storage-demo/use-local-storage-sdcpns.ts
similarity index 100%
rename from apps/petrinaut-website/src/main/app/use-local-storage-sdcpns.ts
rename to apps/petrinaut-website/src/main/app/local-storage-demo/use-local-storage-sdcpns.ts
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/logo-mark.png b/apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/logo-mark.png
similarity index 100%
rename from apps/petrinaut-website/src/main/app/walkthrough/logo-mark.png
rename to apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/logo-mark.png
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/01-intro-example.mp4 b/apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/01-intro-example.mp4
similarity index 100%
rename from apps/petrinaut-website/src/main/app/walkthrough/videos/01-intro-example.mp4
rename to apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/01-intro-example.mp4
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/02-experiments-example.mp4 b/apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/02-experiments-example.mp4
similarity index 100%
rename from apps/petrinaut-website/src/main/app/walkthrough/videos/02-experiments-example.mp4
rename to apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/02-experiments-example.mp4
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/03-ai-example.mp4 b/apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/03-ai-example.mp4
similarity index 100%
rename from apps/petrinaut-website/src/main/app/walkthrough/videos/03-ai-example.mp4
rename to apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/videos/03-ai-example.mp4
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/walkthrough-steps.tsx b/apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/walkthrough-steps.tsx
similarity index 100%
rename from apps/petrinaut-website/src/main/app/walkthrough/walkthrough-steps.tsx
rename to apps/petrinaut-website/src/main/app/local-storage-demo/walkthrough/walkthrough-steps.tsx
diff --git a/apps/petrinaut-website/vercel.json b/apps/petrinaut-website/vercel.json
index 55c31b0694f..d38fb306fed 100644
--- a/apps/petrinaut-website/vercel.json
+++ b/apps/petrinaut-website/vercel.json
@@ -7,6 +7,12 @@
   "installCommand": "./vercel-install.sh",
   "devCommand": "turbo run build && yarn preview",
   "outputDirectory": "./dist",
+  "rewrites": [
+    {
+      "source": "/brunch",
+      "destination": "/"
+    }
+  ],
   "functions": {
     "api/chat.ts": {
       "maxDuration": 300
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/README.md b/libs/@hashintel/petrinaut-core/src/actual-mode/README.md
new file mode 100644
index 00000000000..27b501d83cb
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/README.md
@@ -0,0 +1,72 @@
+# Actual Mode Core
+
+This folder contains the experimental, transport-neutral pieces of Petrinaut
+Actual Mode.
+
+Actual Mode lets Petrinaut render an execution that comes from an external
+source instead of from Quick Simulation or Monte Carlo. The first integration is
+the Brunch demo route in `apps/petrinaut-website`, which connects to a Brunch
+SSE endpoint and feeds Petrinaut a Petri net definition, an initial marking, and
+transition firing events.
+
+## Experimental Status
+
+This is not a stable Petrinaut protocol yet.
+
+The Brunch SSE event names, endpoint layout, raw export shape, and temporary
+Brunch definition schema are still owned by the demo website integration. They
+should not be treated as a public Petrinaut Core protocol until the Brunch and
+Petrinaut teams standardize that contract.
+
+Core currently owns only the pieces that are useful independently of React and
+independently of how a host transports events:
+
+- the transition firing effect shape used by Petrinaut's timeline
+- marking reconstruction from an initial state plus transition effects
+- timeline point generation for a live or completed external execution
+- a `SimulationFrameReader` adapter so existing visualizer/timeline code can
+  inspect Actual Mode frames
+- recording helpers for normalized replay artifacts and raw received events
+- the context value type shared with the React package
+
+## Current Brunch Flow
+
+The current demo path is:
+
+1. `apps/petrinaut-website` opens `/brunch?sse=<url>`.
+2. The Brunch provider connects with `EventSource`.
+3. Website-local parsers validate the temporary Brunch definition, initial
+   state, and transition firing payloads.
+4. The website normalizes the Brunch definition into a read-only SDCPN with
+   Petrinaut extensions disabled.
+5. `@hashintel/petrinaut` receives `ActualModeContext`.
+6. Core reconstructs markings and timeline frames from the initial state and
+   transition firing effects.
+
+The currently accepted transition firing shape is:
+
+```json
+{
+  "transitionId": "start_implementation",
+  "input": { "queued": 1 },
+  "output": { "implementing": 1 },
+  "ts": "2026-06-05T17:17:27.866Z"
+}
+```
+
+`input` and `output` are transition-local token count maps. They are not full
+before/after markings.
+
+## File Map
+
+- `constants.ts`: shared Actual Mode constants.
+- `types.ts`: transport-neutral Actual Mode types and context shape.
+- `schemas.ts`: Zod schemas for core Actual Mode payloads and recordings.
+- `context.ts`: unavailable/default context value.
+- `marking.ts`: marking reconstruction helpers.
+- `timeline.ts`: live timeline point generation and frame-reader adapter.
+- `recording.ts`: normalized and raw-event recording helpers.
+- `time.ts`: timestamp parsing helpers used by recordings and timelines.
+
+When the Brunch/Petrinaut protocol becomes stable, the standardized protocol
+schemas should move here from the website adapter.
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/actual-mode.test.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/actual-mode.test.ts
new file mode 100644
index 00000000000..1ecf1c2c256
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/actual-mode.test.ts
@@ -0,0 +1,194 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createActualModeReceivedEventsRecording,
+  createActualModeRecording,
+  createActualModeTimelineFrameReader,
+  parseActualModeRecording,
+  retimeActualModeRecordingForReplay,
+} from ".";
+
+import type { SDCPN } from "../types/sdcpn";
+
+const definition: SDCPN = {
+  places: [
+    {
+      id: "queued",
+      name: "Queued",
+      colorId: null,
+      dynamicsEnabled: false,
+      differentialEquationId: null,
+      x: 0,
+      y: 0,
+    },
+  ],
+  transitions: [],
+  types: [],
+  differentialEquations: [],
+  parameters: [],
+};
+
+describe("Actual mode recordings", () => {
+  it("parses exported recordings", () => {
+    const recording = createActualModeRecording({
+      title: "Replay",
+      source: {
+        kind: "brunch",
+        endpoint: "http://127.0.0.1:5184/stream",
+      },
+      definition,
+      initialState: { queued: 1 },
+      transitionFirings: [
+        {
+          transitionId: "start",
+          input: { queued: 1 },
+          output: {},
+          ts: "2026-06-05T10:00:00.000Z",
+        },
+      ],
+      exportedAt: "2026-06-05T10:01:00.000Z",
+    });
+
+    expect(parseActualModeRecording(recording)).toEqual(recording);
+  });
+
+  it("exports raw received events without mapping to SDCPN", () => {
+    const rawDefinition = {
+      title: "Raw Brunch run",
+      places: [{ id: "queued", name: "Queued" }],
+      transitions: [],
+    };
+
+    const recording = createActualModeReceivedEventsRecording({
+      title: "Replay",
+      source: null,
+      events: [{ event: "definition", data: rawDefinition }],
+      exportedAt: "2026-06-05T10:01:00.000Z",
+    });
+
+    expect(recording).toEqual({
+      version: 1,
+      exportedAt: "2026-06-05T10:01:00.000Z",
+      title: "Replay",
+      source: null,
+      events: [{ event: "definition", data: rawDefinition }],
+    });
+  });
+
+  it("retimes transition firings relative to the first event", () => {
+    const recording = createActualModeRecording({
+      title: "Replay",
+      source: null,
+      definition,
+      initialState: { queued: 2 },
+      transitionFirings: [
+        {
+          transitionId: "first",
+          input: { queued: 1 },
+          output: {},
+          ts: "2026-06-05T10:00:00.000Z",
+        },
+        {
+          transitionId: "second",
+          input: { queued: 1 },
+          output: {},
+          ts: "2026-06-05T10:00:03.250Z",
+        },
+      ],
+    });
+
+    const retimed = retimeActualModeRecordingForReplay(
+      recording,
+      Date.parse("2026-06-05T12:00:00.000Z"),
+    );
+
+    expect(retimed.transitionFirings.map((firing) => firing.ts)).toEqual([
+      "2026-06-05T12:00:00.000Z",
+      "2026-06-05T12:00:03.250Z",
+    ]);
+  });
+
+  it("rejects transition firings with extra fields", () => {
+    expect(() =>
+      parseActualModeRecording({
+        version: 1,
+        exportedAt: "2026-06-05T10:01:00.000Z",
+        title: "Replay",
+        source: null,
+        definition,
+        initialState: { queued: 1, done: 0 },
+        transitionFirings: [
+          {
+            transitionId: "finish",
+            input: { queued: 1 },
+            output: { done: 1 },
+            unsupported: { done: 1 },
+            ts: "2026-06-05T10:00:00.000Z",
+          },
+        ],
+      }),
+    ).toThrow();
+  });
+
+  it("rejects transition firings with non-count effect values", () => {
+    expect(() =>
+      parseActualModeRecording({
+        version: 1,
+        exportedAt: "2026-06-05T10:01:00.000Z",
+        title: "Replay",
+        source: null,
+        definition,
+        initialState: { queued: 1, done: 0 },
+        transitionFirings: [
+          {
+            transitionId: "finish",
+            input: { queued: 1 },
+            output: { done: [{}] },
+            ts: "2026-06-05T10:00:00.000Z",
+          },
+        ],
+      }),
+    ).toThrow();
+  });
+
+  it("reconstructs timeline markings from firing effects", () => {
+    const reader = createActualModeTimelineFrameReader({
+      definition: {
+        ...definition,
+        places: [
+          ...definition.places,
+          {
+            id: "done",
+            name: "Done",
+            colorId: null,
+            dynamicsEnabled: false,
+            differentialEquationId: null,
+            x: 100,
+            y: 0,
+          },
+        ],
+      },
+      initialState: { queued: 2, done: 0 },
+      transitionFirings: [
+        {
+          transitionId: "finish",
+          input: { queued: 1 },
+          output: { done: 1 },
+          ts: "2026-06-05T10:00:00.000Z",
+        },
+      ],
+      transitionFiringTimesMs: [0],
+      point: {
+        kind: "transition_firing",
+        timeMs: 0,
+        transitionFiringIndex: 0,
+      },
+      number: 1,
+    });
+
+    expect(reader.toFrameState().places).toEqual({
+      queued: { tokenCount: 1 },
+      done: { tokenCount: 1 },
+    });
+  });
+});
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/constants.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/constants.ts
new file mode 100644
index 00000000000..8827add9c1b
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/constants.ts
@@ -0,0 +1,2 @@
+export const ACTUAL_MODE_TIMELINE_TICK_MS = 500;
+export const ACTUAL_MODE_RECORDING_VERSION = 1;
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/context.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/context.ts
new file mode 100644
index 00000000000..0de3543a69f
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/context.ts
@@ -0,0 +1,15 @@
+import type { ActualModeContextValue } from "./types";
+
+export const unavailableActualMode: ActualModeContextValue = {
+  available: false,
+  source: null,
+  status: "unavailable",
+  title: null,
+  definition: null,
+  initialState: null,
+  transitionFirings: [],
+  receivedEvents: [],
+  timelineStartedAtMs: null,
+  timelineNowMs: null,
+  error: null,
+};
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/index.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/index.ts
new file mode 100644
index 00000000000..4f4719805da
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/index.ts
@@ -0,0 +1,42 @@
+export {
+  ACTUAL_MODE_RECORDING_VERSION,
+  ACTUAL_MODE_TIMELINE_TICK_MS,
+} from "./constants";
+export { unavailableActualMode } from "./context";
+export {
+  applyActualModeTransitionFiring,
+  getActualModeMarkingAtTransitionFiringIndex,
+} from "./marking";
+export {
+  createActualModeReceivedEventsRecording,
+  createActualModeRecording,
+  parseActualModeRecording,
+  retimeActualModeRecordingForReplay,
+} from "./recording";
+export {
+  actualModeMarkingSchema,
+  actualModeReceivedEventSchema,
+  actualModeReceivedEventsRecordingSchema,
+  actualModeRecordingSchema,
+  actualModeSourceSchema,
+  actualModeTransitionEffectSchema,
+  actualModeTransitionFiringSchema,
+} from "./schemas";
+export {
+  buildActualModeTimelinePoints,
+  createActualModeTimelineFrameReader,
+  getActualModeTransitionFiringTimesMs,
+} from "./timeline";
+export type {
+  ActualModeContextValue,
+  ActualModeMarking,
+  ActualModeReceivedEvent,
+  ActualModeReceivedEventsRecording,
+  ActualModeRecording,
+  ActualModeSource,
+  ActualModeTimelinePoint,
+  ActualModeTimelinePointKind,
+  ActualModeTokenColour,
+  ActualModeTransitionEffect,
+  ActualModeTransitionFiring,
+} from "./types";
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/marking.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/marking.ts
new file mode 100644
index 00000000000..9fbc288c42c
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/marking.ts
@@ -0,0 +1,118 @@
+import type {
+  ActualModeMarking,
+  ActualModeTokenColour,
+  ActualModeTransitionFiring,
+} from "./types";
+
+export const isActualModeTokenColourArray = (
+  markingValue: number | ActualModeTokenColour[] | undefined,
+): markingValue is ActualModeTokenColour[] => Array.isArray(markingValue);
+
+export const getActualModePlaceMarkingTokenCount = (
+  markingValue: number | ActualModeTokenColour[] | undefined,
+): number => {
+  if (markingValue === undefined) {
+    return 0;
+  }
+
+  return isActualModeTokenColourArray(markingValue)
+    ? markingValue.length
+    : markingValue;
+};
+
+const cloneTokenColour = (
+  token: ActualModeTokenColour,
+): ActualModeTokenColour => ({ ...token });
+
+const cloneMarkingValue = (
+  markingValue: number | ActualModeTokenColour[],
+): number | ActualModeTokenColour[] =>
+  Array.isArray(markingValue)
+    ? markingValue.map((token) => cloneTokenColour(token))
+    : markingValue;
+
+const cloneMarking = (marking: ActualModeMarking): ActualModeMarking =>
+  Object.fromEntries(
+    Object.entries(marking).map(([placeId, value]) => [
+      placeId,
+      cloneMarkingValue(value),
+    ]),
+  );
+
+const emptyTokens = (count: number): ActualModeTokenColour[] =>
+  Array.from({ length: Math.max(0, Math.floor(count)) }, () => ({}));
+
+const toTokenArray = (
+  markingValue: number | ActualModeTokenColour[] | undefined,
+): ActualModeTokenColour[] => {
+  if (markingValue === undefined) {
+    return [];
+  }
+
+  return Array.isArray(markingValue)
+    ? markingValue.map((token) => cloneTokenColour(token))
+    : emptyTokens(markingValue);
+};
+
+export const applyActualModeTransitionFiring = (
+  marking: ActualModeMarking,
+  firing: ActualModeTransitionFiring,
+): ActualModeMarking => {
+  const next = cloneMarking(marking);
+  const placeIds = new Set([
+    ...Object.keys(next),
+    ...Object.keys(firing.input),
+    ...Object.keys(firing.output),
+  ]);
+
+  for (const placeId of placeIds) {
+    const currentValue = next[placeId];
+    const inputValue = firing.input[placeId];
+    const outputValue = firing.output[placeId];
+
+    if (
+      Array.isArray(currentValue) ||
+      Array.isArray(inputValue) ||
+      Array.isArray(outputValue)
+    ) {
+      const currentTokens = toTokenArray(currentValue);
+      const inputCount = getActualModePlaceMarkingTokenCount(inputValue);
+      const outputTokens = toTokenArray(outputValue);
+      next[placeId] = currentTokens.slice(inputCount).concat(outputTokens);
+      continue;
+    }
+
+    next[placeId] =
+      (currentValue ?? 0) - (inputValue ?? 0) + (outputValue ?? 0);
+  }
+
+  return next;
+};
+
+export const getActualModeMarkingAtTransitionFiringIndex = (params: {
+  initialState: ActualModeMarking;
+  transitionFirings: readonly ActualModeTransitionFiring[];
+  transitionFiringIndex: number | null;
+}): ActualModeMarking => {
+  const { initialState, transitionFiringIndex, transitionFirings } = params;
+
+  if (transitionFiringIndex === null) {
+    return initialState;
+  }
+
+  let marking = initialState;
+
+  // TODO(actual-mode follow-up): this reconstructs markings by replaying from
+  // the beginning for each requested frame. That is acceptable for this first
+  // Brunch integration, but large streams need a prefix marking cache or
+  // incremental timeline reader so scrubbing does not become O(n^2).
+  for (let index = 0; index <= transitionFiringIndex; index += 1) {
+    const firing = transitionFirings[index];
+
+    if (firing) {
+      marking = applyActualModeTransitionFiring(marking, firing);
+    }
+  }
+
+  return marking;
+};
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/recording.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/recording.ts
new file mode 100644
index 00000000000..1b22eb5a8ac
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/recording.ts
@@ -0,0 +1,73 @@
+import { ACTUAL_MODE_RECORDING_VERSION } from "./constants";
+import { actualModeRecordingSchema } from "./schemas";
+import { parseRequiredActualModeTimestampMs } from "./time";
+
+import type { SDCPN } from "../types/sdcpn";
+import type {
+  ActualModeMarking,
+  ActualModeReceivedEvent,
+  ActualModeReceivedEventsRecording,
+  ActualModeRecording,
+  ActualModeSource,
+  ActualModeTransitionFiring,
+} from "./types";
+
+export const createActualModeRecording = (params: {
+  title: string | null;
+  source: ActualModeSource | null;
+  definition: SDCPN;
+  initialState: ActualModeMarking;
+  transitionFirings: readonly ActualModeTransitionFiring[];
+  exportedAt?: string;
+}): ActualModeRecording => ({
+  version: ACTUAL_MODE_RECORDING_VERSION,
+  exportedAt: params.exportedAt ?? new Date().toISOString(),
+  title: params.title,
+  source: params.source,
+  definition: params.definition,
+  initialState: params.initialState,
+  transitionFirings: params.transitionFirings.map((firing) => ({ ...firing })),
+});
+
+export const createActualModeReceivedEventsRecording = (params: {
+  title: string | null;
+  source: ActualModeSource | null;
+  events: readonly ActualModeReceivedEvent[];
+  exportedAt?: string;
+}): ActualModeReceivedEventsRecording => ({
+  version: ACTUAL_MODE_RECORDING_VERSION,
+  exportedAt: params.exportedAt ?? new Date().toISOString(),
+  title: params.title,
+  source: params.source,
+  events: params.events.map((event) => ({
+    event: event.event,
+    data: event.data,
+  })),
+});
+
+export const parseActualModeRecording = (data: unknown): ActualModeRecording =>
+  actualModeRecordingSchema.parse(data);
+
+export const retimeActualModeRecordingForReplay = (
+  recording: ActualModeRecording,
+  launchTimeMs = Date.now(),
+): ActualModeRecording => {
+  const firstFiring = recording.transitionFirings[0];
+
+  if (!firstFiring) {
+    return { ...recording, transitionFirings: [] };
+  }
+
+  const firstTimestampMs = parseRequiredActualModeTimestampMs(firstFiring.ts);
+  const deltaMs = launchTimeMs - firstTimestampMs;
+
+  return {
+    ...recording,
+    transitionFirings: recording.transitionFirings.map((firing) => ({
+      ...firing,
+      ts: new Date(
+        parseRequiredActualModeTimestampMs(firing.ts) + deltaMs,
+      ).toISOString(),
+    })),
+  };
+};
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/schemas.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/schemas.ts
new file mode 100644
index 00000000000..e08178022c3
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/schemas.ts
@@ -0,0 +1,107 @@
+import { z } from "zod";
+
+import { sdcpnSchema } from "../file-format/types";
+import { ACTUAL_MODE_RECORDING_VERSION } from "./constants";
+
+import type { SDCPN } from "../types/sdcpn";
+import type {
+  ActualModeMarking,
+  ActualModeReceivedEvent,
+  ActualModeReceivedEventsRecording,
+  ActualModeRecording,
+  ActualModeSource,
+  ActualModeTransitionEffect,
+  ActualModeTransitionFiring,
+} from "./types";
+
+const actualModeTokenColourSchema = z.record(z.string(), z.number());
+const actualModeMarkingValueSchema = z.union([
+  z.number(),
+  z.array(actualModeTokenColourSchema),
+]);
+
+/**
+ * Root schema for an Actual Mode marking.
+ *
+ * This validates `initial_state` stream frames and recording snapshots. Places
+ * can currently be represented by a numeric token count or by token-colour
+ * arrays for future coloured-token support.
+ */
+export const actualModeMarkingSchema = z.record(
+  z.string(),
+  actualModeMarkingValueSchema,
+) satisfies z.ZodType<ActualModeMarking>;
+
+/**
+ * Root schema for a transition-local token effect.
+ *
+ * This is intentionally not a full marking: keys are only the places affected
+ * by a transition, and values are the token counts consumed or produced there.
+ */
+export const actualModeTransitionEffectSchema = z.record(
+  z.string(),
+  z.number(),
+) satisfies z.ZodType<ActualModeTransitionEffect>;
+
+const actualModeTransitionFiringEffectSchema = z
+  .object({
+    transitionId: z.string(),
+    input: actualModeTransitionEffectSchema,
+    output: actualModeTransitionEffectSchema,
+    ts: z.string(),
+  })
+  .strict();
+
+/**
+ * Root schema for Actual Mode transition events.
+ *
+ * This is the only accepted `transition_firing` payload shape for this PR:
+ * `input` contains consumed token counts, `output` contains produced token
+ * counts, and neither field carries a full before or after marking.
+ */
+export const actualModeTransitionFiringSchema =
+  actualModeTransitionFiringEffectSchema satisfies z.ZodType<ActualModeTransitionFiring>;
+
+export const actualModeSourceSchema = z
+  .object({
+    kind: z.literal("brunch"),
+    endpoint: z.string(),
+    runId: z.string().optional(),
+  })
+  .strict() satisfies z.ZodType<ActualModeSource>;
+
+export const actualModeReceivedEventSchema = z
+  .object({
+    event: z.string(),
+    data: z.unknown(),
+  })
+  .strict() satisfies z.ZodType<ActualModeReceivedEvent>;
+
+const actualModeRecordingDefinitionSchema = z.custom<SDCPN>(
+  (value) => sdcpnSchema.safeParse(value).success,
+  { message: "Invalid SDCPN definition" },
+);
+
+/**
+ * Root schema for exported Actual Mode replay recordings.
+ *
+ * A recording combines the normalized SDCPN, initial marking, source metadata,
+ * and ordered transition events needed to reconstruct the timeline offline.
+ */
+export const actualModeRecordingSchema = z.object({
+  version: z.literal(ACTUAL_MODE_RECORDING_VERSION),
+  exportedAt: z.string(),
+  title: z.string().nullable(),
+  source: actualModeSourceSchema.nullable(),
+  definition: actualModeRecordingDefinitionSchema,
+  initialState: actualModeMarkingSchema,
+  transitionFirings: z.array(actualModeTransitionFiringSchema),
+}) satisfies z.ZodType<ActualModeRecording>;
+
+export const actualModeReceivedEventsRecordingSchema = z.object({
+  version: z.literal(ACTUAL_MODE_RECORDING_VERSION),
+  exportedAt: z.string(),
+  title: z.string().nullable(),
+  source: actualModeSourceSchema.nullable(),
+  events: z.array(actualModeReceivedEventSchema),
+}) satisfies z.ZodType<ActualModeReceivedEventsRecording>;
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/time.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/time.ts
new file mode 100644
index 00000000000..3950e8632d1
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/time.ts
@@ -0,0 +1,19 @@
+export const parseActualModeTimestampMs = (
+  timestamp: string,
+): number | null => {
+  const parsed = Date.parse(timestamp);
+
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const parseRequiredActualModeTimestampMs = (
+  timestamp: string,
+): number => {
+  const timestampMs = parseActualModeTimestampMs(timestamp);
+
+  if (timestampMs === null) {
+    throw new Error(`Invalid Actual mode event timestamp: ${timestamp}`);
+  }
+
+  return timestampMs;
+};
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/timeline.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/timeline.ts
new file mode 100644
index 00000000000..9d3e5627c6e
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/timeline.ts
@@ -0,0 +1,285 @@
+import { ACTUAL_MODE_TIMELINE_TICK_MS } from "./constants";
+import {
+  getActualModeMarkingAtTransitionFiringIndex,
+  getActualModePlaceMarkingTokenCount,
+  isActualModeTokenColourArray,
+} from "./marking";
+import { parseActualModeTimestampMs } from "./time";
+
+import type {
+  SimulationFrameReader,
+  SimulationFrameState,
+  SimulationPlaceTokenValues,
+} from "../simulation/api";
+import type { Color, Place, SDCPN } from "../types/sdcpn";
+import type {
+  ActualModeContextValue,
+  ActualModeMarking,
+  ActualModeTimelinePoint,
+  ActualModeTimelinePointKind,
+  ActualModeTransitionFiring,
+} from "./types";
+
+const getTimelineBaselineMs = (
+  transitionFirings: readonly ActualModeTransitionFiring[],
+  timelineStartedAtMs: number | null,
+  timelineNowMs: number | null,
+): number => {
+  for (const firing of transitionFirings) {
+    const timestampMs = parseActualModeTimestampMs(firing.ts);
+
+    if (timestampMs !== null) {
+      return timestampMs;
+    }
+  }
+
+  return timelineStartedAtMs ?? timelineNowMs ?? 0;
+};
+
+export const getActualModeTransitionFiringTimesMs = (
+  transitionFirings: readonly ActualModeTransitionFiring[],
+  timelineStartedAtMs: number | null,
+  timelineNowMs: number | null,
+): readonly number[] => {
+  const baselineMs = getTimelineBaselineMs(
+    transitionFirings,
+    timelineStartedAtMs,
+    timelineNowMs,
+  );
+  const times: number[] = [];
+
+  for (const firing of transitionFirings) {
+    const timestampMs = parseActualModeTimestampMs(firing.ts);
+    const previousTimeMs = times.at(-1) ?? 0;
+    const nextTimeMs =
+      timestampMs === null
+        ? previousTimeMs + 1
+        : Math.max(previousTimeMs, timestampMs - baselineMs);
+
+    times.push(nextTimeMs);
+  }
+
+  return times;
+};
+
+export const buildActualModeTimelinePoints = (params: {
+  status: ActualModeContextValue["status"];
+  transitionFirings: readonly ActualModeTransitionFiring[];
+  timelineStartedAtMs: number | null;
+  timelineNowMs: number | null;
+}): readonly ActualModeTimelinePoint[] => {
+  const { status, transitionFirings, timelineStartedAtMs, timelineNowMs } =
+    params;
+  const transitionFiringTimesMs = getActualModeTransitionFiringTimesMs(
+    transitionFirings,
+    timelineStartedAtMs,
+    timelineNowMs,
+  );
+  const points: ActualModeTimelinePoint[] = [
+    { kind: "initial", timeMs: 0, transitionFiringIndex: null },
+  ];
+
+  for (const [
+    transitionFiringIndex,
+    timeMs,
+  ] of transitionFiringTimesMs.entries()) {
+    points.push({
+      kind: "transition_firing",
+      timeMs,
+      transitionFiringIndex,
+    });
+  }
+
+  if (status === "streaming") {
+    const baselineMs = getTimelineBaselineMs(
+      transitionFirings,
+      timelineStartedAtMs,
+      timelineNowMs,
+    );
+    const nowTimeMs =
+      timelineNowMs !== null ? Math.max(0, timelineNowMs - baselineMs) : 0;
+    const latestEventTimeMs = transitionFiringTimesMs.at(-1) ?? 0;
+    const liveTimeMs = Math.max(nowTimeMs, latestEventTimeMs);
+    const occupiedTimes = new Set(points.map((point) => point.timeMs));
+    let latestTransitionFiringIndex = -1;
+
+    for (
+      let timeMs = ACTUAL_MODE_TIMELINE_TICK_MS;
+      timeMs <= liveTimeMs;
+      timeMs += ACTUAL_MODE_TIMELINE_TICK_MS
+    ) {
+      let nextTransitionFiringIndex = latestTransitionFiringIndex + 1;
+
+      while (
+        nextTransitionFiringIndex < transitionFiringTimesMs.length &&
+        transitionFiringTimesMs[nextTransitionFiringIndex]! <= timeMs
+      ) {
+        latestTransitionFiringIndex = nextTransitionFiringIndex;
+        nextTransitionFiringIndex = latestTransitionFiringIndex + 1;
+      }
+
+      if (occupiedTimes.has(timeMs)) {
+        continue;
+      }
+
+      points.push({
+        kind: "tick",
+        timeMs,
+        transitionFiringIndex:
+          latestTransitionFiringIndex >= 0 ? latestTransitionFiringIndex : null,
+      });
+    }
+  }
+
+  return points.sort((left, right) => {
+    if (left.timeMs !== right.timeMs) {
+      return left.timeMs - right.timeMs;
+    }
+
+    const order: Record<ActualModeTimelinePointKind, number> = {
+      initial: 0,
+      transition_firing: 1,
+      tick: 2,
+    };
+
+    return order[left.kind] - order[right.kind];
+  });
+};
+
+const getTransitionFiringCount = (
+  transitionFirings: readonly ActualModeTransitionFiring[],
+  transitionId: string,
+  transitionFiringIndex: number | null,
+): number => {
+  if (transitionFiringIndex === null) {
+    return 0;
+  }
+
+  let firingCount = 0;
+
+  for (let index = 0; index <= transitionFiringIndex; index += 1) {
+    if (transitionFirings[index]?.transitionId === transitionId) {
+      firingCount += 1;
+    }
+  }
+
+  return firingCount;
+};
+
+export const createActualModeTimelineFrameReader = (params: {
+  definition: Pick<SDCPN, "places" | "transitions" | "types">;
+  initialState: ActualModeMarking;
+  transitionFirings: readonly ActualModeTransitionFiring[];
+  transitionFiringTimesMs: readonly number[];
+  point: ActualModeTimelinePoint;
+  number: number;
+}): SimulationFrameReader => {
+  const {
+    definition,
+    initialState,
+    number,
+    point,
+    transitionFirings,
+    transitionFiringTimesMs,
+  } = params;
+  const marking = getActualModeMarkingAtTransitionFiringIndex({
+    initialState,
+    transitionFirings,
+    transitionFiringIndex: point.transitionFiringIndex,
+  });
+
+  return {
+    number,
+    time: point.timeMs / 1_000,
+    getPlaceTokenCount: (placeId: string) =>
+      getActualModePlaceMarkingTokenCount(marking[placeId]),
+    getPlaceTokenValues: (
+      placeId: string,
+    ): SimulationPlaceTokenValues | null => {
+      const place = definition.places.find(
+        (candidatePlace) => candidatePlace.id === placeId,
+      );
+      const color = place
+        ? definition.types.find((type) => type.id === place.colorId)
+        : null;
+      const placeMarking = marking[placeId];
+
+      if (!place || !color || !isActualModeTokenColourArray(placeMarking)) {
+        return {
+          count: getActualModePlaceMarkingTokenCount(placeMarking),
+          values: new Float64Array(),
+        };
+      }
+
+      const values = new Float64Array(
+        placeMarking.length * color.elements.length,
+      );
+
+      for (const [tokenIndex, token] of placeMarking.entries()) {
+        for (const [elementIndex, element] of color.elements.entries()) {
+          values[tokenIndex * color.elements.length + elementIndex] =
+            token[element.name] ?? token[element.elementId] ?? 0;
+        }
+      }
+
+      return {
+        count: placeMarking.length,
+        values,
+      };
+    },
+    getPlaceTokens: (
+      place: Place,
+      color: Color | null | undefined,
+    ): Record<string, number>[] => {
+      const placeMarking = marking[place.id];
+
+      if (!color || !isActualModeTokenColourArray(placeMarking)) {
+        return [];
+      }
+
+      return placeMarking.map((token) => ({ ...token }));
+    },
+    getTransitionState: (transitionId: string) => {
+      const firedInThisFrame =
+        point.kind === "transition_firing" &&
+        point.transitionFiringIndex !== null &&
+        transitionFirings[point.transitionFiringIndex]?.transitionId ===
+          transitionId;
+      const firingCount = getTransitionFiringCount(
+        transitionFirings,
+        transitionId,
+        point.transitionFiringIndex,
+      );
+      let lastFiringTimeMs: number | null = null;
+
+      if (point.transitionFiringIndex !== null) {
+        for (let index = point.transitionFiringIndex; index >= 0; index -= 1) {
+          if (transitionFirings[index]?.transitionId === transitionId) {
+            lastFiringTimeMs = transitionFiringTimesMs[index] ?? null;
+            break;
+          }
+        }
+      }
+
+      return {
+        firedInThisFrame,
+        firingCount,
+        timeSinceLastFiringMs:
+          lastFiringTimeMs === null
+            ? point.timeMs
+            : Math.max(0, point.timeMs - lastFiringTimeMs),
+      };
+    },
+    toFrameState: (): SimulationFrameState => ({
+      number,
+      places: Object.fromEntries(
+        definition.places.map((place) => [
+          place.id,
+          {
+            tokenCount: getActualModePlaceMarkingTokenCount(marking[place.id]),
+          },
+        ]),
+      ),
+    }),
+  };
+};
diff --git a/libs/@hashintel/petrinaut-core/src/actual-mode/types.ts b/libs/@hashintel/petrinaut-core/src/actual-mode/types.ts
new file mode 100644
index 00000000000..b9f63ba55f7
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/actual-mode/types.ts
@@ -0,0 +1,94 @@
+import { ACTUAL_MODE_RECORDING_VERSION } from "./constants";
+
+import type { SDCPN } from "../types/sdcpn";
+
+/**
+ * Host-provided live execution state for Petrinaut's Actual mode.
+ *
+ * Core owns the transport-neutral execution primitives. React packages provide
+ * the concrete context/provider surface for UI consumption.
+ */
+
+export type ActualModeTokenColour = Record<string, number>;
+
+export type ActualModeMarking = Record<
+  string,
+  number | ActualModeTokenColour[]
+>;
+
+export type ActualModeTransitionEffect = Record<string, number>;
+
+export type ActualModeTransitionFiring = {
+  transitionId: string;
+  input: ActualModeTransitionEffect;
+  output: ActualModeTransitionEffect;
+  ts: string;
+};
+
+export type ActualModeReceivedEvent = {
+  event: string;
+  data: unknown;
+};
+
+export type ActualModeSource = {
+  kind: "brunch";
+  endpoint: string;
+  runId?: string;
+};
+
+export type ActualModeRecording = {
+  version: typeof ACTUAL_MODE_RECORDING_VERSION;
+  exportedAt: string;
+  title: string | null;
+  source: ActualModeSource | null;
+  definition: SDCPN;
+  initialState: ActualModeMarking;
+  transitionFirings: ActualModeTransitionFiring[];
+};
+
+export type ActualModeReceivedEventsRecording = {
+  version: typeof ACTUAL_MODE_RECORDING_VERSION;
+  exportedAt: string;
+  title: string | null;
+  source: ActualModeSource | null;
+  events: ActualModeReceivedEvent[];
+};
+
+export type ActualModeContextValue =
+  | {
+      available: false;
+      source: null;
+      status: "unavailable";
+      title: null;
+      definition: null;
+      initialState: null;
+      transitionFirings: readonly [];
+      receivedEvents: readonly [];
+      timelineStartedAtMs: null;
+      timelineNowMs: null;
+      error: null;
+    }
+  | {
+      available: true;
+      source: ActualModeSource;
+      status: "loading" | "streaming" | "complete" | "error";
+      title: string | null;
+      definition: SDCPN | null;
+      initialState: ActualModeMarking | null;
+      transitionFirings: readonly ActualModeTransitionFiring[];
+      receivedEvents: readonly ActualModeReceivedEvent[];
+      timelineStartedAtMs: number | null;
+      timelineNowMs: number | null;
+      error: string | null;
+    };
+
+export type ActualModeTimelinePointKind =
+  | "initial"
+  | "transition_firing"
+  | "tick";
+
+export type ActualModeTimelinePoint = {
+  kind: ActualModeTimelinePointKind;
+  timeMs: number;
+  transitionFiringIndex: number | null;
+};
diff --git a/libs/@hashintel/petrinaut-core/src/ai.ts b/libs/@hashintel/petrinaut-core/src/ai.ts
index a22e92079d7..9e009fd684b 100644
--- a/libs/@hashintel/petrinaut-core/src/ai.ts
+++ b/libs/@hashintel/petrinaut-core/src/ai.ts
@@ -89,6 +89,7 @@ export const petrinautDocNames = [
   "simulation",
   "scenarios",
   "experiments",
+  "actual-mode",
   "ai-assistant",
   "visual-settings",
   "examples",
@@ -109,6 +110,8 @@ export const petrinautDocSummaries: Record<PetrinautDocName, string> = {
     "Named simulation configurations: scenario parameters, parameter bindings, per-place vs code-mode initial state, running and switching scenarios.",
   experiments:
     "Monte Carlo batches: configuration (runs, seed, dt, max time, scenario), lifecycle/statuses, cancel/remove, results (median/mean/p10/p90), active-experiments popover.",
+  "actual-mode":
+    "Actual mode: host-provided live execution view, Brunch stream URL route, read-only extension-free net, current limits.",
   "ai-assistant":
     "In-app AI assistant: opening the panel, conversation surface, prompt chips, tool cards, read-only/simulate-mode rules, host configuration.",
   "visual-settings":
diff --git a/libs/@hashintel/petrinaut-core/src/file-format/types.ts b/libs/@hashintel/petrinaut-core/src/file-format/types.ts
index 6c9e737c7b3..7f51c74e212 100644
--- a/libs/@hashintel/petrinaut-core/src/file-format/types.ts
+++ b/libs/@hashintel/petrinaut-core/src/file-format/types.ts
@@ -109,7 +109,7 @@ const metricSchema = z.object({
   code: z.string().default(""),
 });
 
-const sdcpnSchema = z.object({
+export const sdcpnSchema = z.object({
   places: z.array(placeSchema),
   transitions: z.array(transitionSchema),
   types: z.array(colorSchema).default([]),
diff --git a/libs/@hashintel/petrinaut-core/src/index.ts b/libs/@hashintel/petrinaut-core/src/index.ts
index 84d4e621e84..ff2de8ba260 100644
--- a/libs/@hashintel/petrinaut-core/src/index.ts
+++ b/libs/@hashintel/petrinaut-core/src/index.ts
@@ -4,6 +4,38 @@
 // SDCPN documents, simulation, LSP, and playback.
 
 // --- Document ---
+export {
+  ACTUAL_MODE_RECORDING_VERSION,
+  ACTUAL_MODE_TIMELINE_TICK_MS,
+  actualModeMarkingSchema,
+  actualModeRecordingSchema,
+  actualModeSourceSchema,
+  actualModeTransitionEffectSchema,
+  actualModeTransitionFiringSchema,
+  applyActualModeTransitionFiring,
+  buildActualModeTimelinePoints,
+  createActualModeRecording,
+  createActualModeReceivedEventsRecording,
+  createActualModeTimelineFrameReader,
+  getActualModeMarkingAtTransitionFiringIndex,
+  getActualModeTransitionFiringTimesMs,
+  parseActualModeRecording,
+  retimeActualModeRecordingForReplay,
+  unavailableActualMode,
+} from "./actual-mode";
+export type {
+  ActualModeContextValue,
+  ActualModeMarking,
+  ActualModeReceivedEvent,
+  ActualModeReceivedEventsRecording,
+  ActualModeRecording,
+  ActualModeSource,
+  ActualModeTimelinePoint,
+  ActualModeTimelinePointKind,
+  ActualModeTokenColour,
+  ActualModeTransitionEffect,
+  ActualModeTransitionFiring,
+} from "./actual-mode";
 export {
   createJsonDocHandle,
   type CreateJsonDocHandleOptions,
diff --git a/libs/@hashintel/petrinaut/docs/README.md b/libs/@hashintel/petrinaut/docs/README.md
index cd99baa8c5b..0a441774d36 100644
--- a/libs/@hashintel/petrinaut/docs/README.md
+++ b/libs/@hashintel/petrinaut/docs/README.md
@@ -19,10 +19,11 @@ A quick map of the things you'll encounter:
 - **Metric** -- a built-in or user-authored function over simulation state that returns a number to plot on the Timeline.
 - **Experiment** -- a Monte Carlo batch: many independent simulation runs of the current net, optionally against one scenario, aggregated as distributions over time.
 
-Petrinaut has two global modes you switch between in the top bar:
+Petrinaut has three global modes in the top bar, though **Actual** is only enabled when the host application provides a live execution source:
 
 - **Edit** -- the drawing/configuration workspace plus single-run simulation playback.
 - **Simulate** -- a separate management surface for scenarios, metrics, and experiments.
+- **Actual** -- a read-only live-execution view supplied by a host such as Brunch.
 
 ## Contents
 
@@ -32,6 +33,7 @@ Petrinaut has two global modes you switch between in the top bar:
 - [Simulation](simulation.md) -- Set initial state, run a single simulation, use the timeline, control playback.
 - [Scenarios](scenarios.md) -- Save and switch between named simulation configurations.
 - [Experiments](experiments.md) -- Run Monte Carlo batches and inspect token-count distributions over time.
+- [Actual Mode](actual-mode.md) -- View a host-provided live Petri net execution, currently via Brunch.
 - [AI Assistant](ai-assistant.md) -- Build, review, and revise nets using natural language.
 - [Visual Settings](visual-settings.md) -- Configure the editor appearance and behavior.
 - [Examples](examples.md) -- Walkthrough of the built-in example nets.
diff --git a/libs/@hashintel/petrinaut/docs/actual-mode.md b/libs/@hashintel/petrinaut/docs/actual-mode.md
new file mode 100644
index 00000000000..901f37c706e
--- /dev/null
+++ b/libs/@hashintel/petrinaut/docs/actual-mode.md
@@ -0,0 +1,44 @@
+# Actual Mode
+
+Actual mode is used when Petrinaut is opened by a host that can provide a live execution stream. In the demo website, the first supported host is Brunch.
+
+When Actual mode is available, the top-bar mode selector enables **Actual** and Petrinaut opens on that tab by default. The canvas shows the Petri net from the live source. The document is read-only: you can pan, zoom, select items, inspect properties, export the net, and switch to the other global modes, but you cannot change places, transitions, arcs, parameters, types, or dynamic behaviour.
+
+## Brunch live runs
+
+The demo website enables Actual mode on the `/brunch` route when the URL includes a Brunch stream endpoint:
+
+```text
+/brunch?sse=<Brunch stream URL>
+```
+
+Petrinaut connects to the stream, waits for the Petri net definition and initial state, lays out the net if the stream did not include node positions, and then shows the net in Actual mode.
+
+If the stream connection is interrupted, Petrinaut keeps any loaded Actual mode data visible and waits for the browser to reconnect. Once the connection is restored, the Brunch stream replays the run from the beginning and Petrinaut rebuilds the timeline and events from that replay, so an interruption does not duplicate transition events or miss ones that fired while disconnected. If the stream sends invalid data, Petrinaut shows an error page with a link back to the normal demo site.
+
+## Timeline and events
+
+Actual mode opens the bottom panel with an Actual timeline once execution data is available. The timeline can be scrubbed to inspect the net state at earlier points in the received stream. Use the series selector below the chart to show, hide, or focus individual traces. Hover a trace and click the eye icon to hide it -- it stays in place, struck through, until the pointer leaves the selector, so a second click undoes the change -- or open the dropdown to search and use **Only**.
+
+The bottom panel also includes an **Events** tab. It shows the received transition stream in order, including each event timestamp, transition id, input tokens, and output tokens. Use the **Export** dropdown in this tab to download either the received event stream or the current Petri net.
+
+Choose **Export Stream** to download the received event stream. Brunch stream exports preserve the raw JSON payloads received from the SSE endpoint instead of the normalized SDCPN used internally for rendering.
+
+Choose **Export Net** to download a normal Petrinaut JSON net file. This file contains the read-only Petri net currently shown in Actual mode and can be imported back into Petrinaut like other net exports.
+
+For Brunch, the export is a JSON object with an `events` array. Each item stores the SSE event name and the parsed JSON payload exactly as Petrinaut received it. Transition payloads store the firing effect rather than a full before/after snapshot. The `input` and `output` fields are numeric count maps keyed by place id:
+
+```json
+{
+  "transitionId": "start_implementation",
+  "input": { "queued": 1 },
+  "output": { "implementing": 1 },
+  "ts": "2026-06-05T17:17:27.866Z"
+}
+```
+
+The stream export is an event-stream artifact for tooling that can serve the Brunch SSE protocol. The demo website does not replay the file directly.
+
+## Current limits
+
+The Brunch route opens a basic Petri net view with Petrinaut extensions disabled: no colours, stochasticity, dynamics, or parameters.
diff --git a/libs/@hashintel/petrinaut/docs/drawing-a-net.md b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
index c9564e3d282..4566b9cb643 100644
--- a/libs/@hashintel/petrinaut/docs/drawing-a-net.md
+++ b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
@@ -4,7 +4,7 @@
 
 The editor is organized around a central canvas where you build your net:
 
-- **Top bar** -- net management menu, optional title field, **Edit / Simulate** mode switcher, active-experiments indicator, recent-changes history. See [Top bar](#top-bar).
+- **Top bar** -- net management menu, optional title field, **Edit / Simulate / Actual** mode switcher, active-experiments indicator, recent-changes history. See [Top bar](#top-bar).
 - **Canvas** (center) -- the main workspace where places and transitions are displayed and connected.
 - **Left sidebar** -- lists of entities organized into tabs: Nodes, Types, Differential Equations, Parameters.
 - **Properties panel** (right) -- opens when you select an entity, showing its configurable properties.
@@ -25,7 +25,7 @@ Spans the full editor width and has three sections.
 
 **Center**
 
-- **Edit / Simulate / Actual** mode switcher. See [Edit vs Simulate mode](#edit-vs-simulate-mode) below.
+- **Edit / Simulate / Actual** mode switcher. See [Global modes](#global-modes) below.
 
 **Right**
 
@@ -33,19 +33,21 @@ Spans the full editor width and has three sections.
 - **Recent changes** (clock icon) -- a dropdown listing your recent undo/redo checkpoints with timestamps. Click any entry to jump to that state. This is the same history you walk via Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z.
 - The host application may add additional buttons here (login, share, ...).
 
-## Edit vs Simulate mode
+## Global modes
 
-Petrinaut has two global modes, switched via the centre control in the top bar.
+Petrinaut global modes are switched via the centre control in the top bar.
 
 | Mode         | Workspace                                                                                                                                                                                 |
 | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Edit**     | Canvas + left sidebar + properties panel + bottom panel + bottom toolbar (with AI assistant). This is where you draw the net, configure entities, write code, and run single simulations. |
 | **Simulate** | Replaces the workspace with the [Scenarios](scenarios.md) and [Experiments](experiments.md) management views.                                                                             |
-| **Actual**   | Reserved for a future live-data mode.                                                                                                                                                     |
+| **Actual**   | Shows a host-provided live execution source. It is disabled unless the host provides Actual-mode data. See [Actual Mode](actual-mode.md).                                                 |
 
 In Simulate mode the net structure becomes read-only -- you can still create, edit, and delete scenarios and metrics, but you cannot change places, transitions, arcs, types, or parameters. Switch back to Edit mode to modify the net.
 
-Switching modes does not stop background experiments. The active-experiments indicator remains visible in the top bar from either mode.
+In Actual mode the net is also read-only. It shows the Petri net supplied by the live source, with an Actual timeline and Events tab in the bottom panel when execution data is available.
+
+Switching modes does not stop background experiments. The active-experiments indicator remains visible in the top bar from any mode.
 
 ## Adding places and transitions
 
diff --git a/libs/@hashintel/petrinaut/docs/experiments.md b/libs/@hashintel/petrinaut/docs/experiments.md
index ef6f7f8693f..3012b1eacb0 100644
--- a/libs/@hashintel/petrinaut/docs/experiments.md
+++ b/libs/@hashintel/petrinaut/docs/experiments.md
@@ -2,7 +2,7 @@
 
 An **experiment** is a Monte Carlo batch: many independent simulation runs of the current net, all running the same scenario (or no scenario), with results aggregated as distributions of token counts over simulation time. Use experiments when one run isn't enough -- when the model is stochastic and you want to see the spread, not just one trajectory.
 
-Experiments live under the **Simulate** [global mode](drawing-a-net.md#edit-vs-simulate-mode). Open the Simulate sidebar and choose **Experiments**.
+Experiments live under the **Simulate** [global mode](drawing-a-net.md#global-modes). Open the Simulate sidebar and choose **Experiments**.
 
 ## Creating an experiment
 
diff --git a/libs/@hashintel/petrinaut/docs/scenarios.md b/libs/@hashintel/petrinaut/docs/scenarios.md
index efb6915ae34..bf3ab6d546c 100644
--- a/libs/@hashintel/petrinaut/docs/scenarios.md
+++ b/libs/@hashintel/petrinaut/docs/scenarios.md
@@ -2,7 +2,7 @@
 
 A **scenario** is a saved, named configuration for running the current net: a set of initial token values, optional scenario-only parameters, and overrides for net-level parameters. Scenarios make it easy to compare several "what if" setups without editing the net itself.
 
-Scenarios live under the **Simulate** [global mode](drawing-a-net.md#edit-vs-simulate-mode). To open the scenarios list, switch the mode selector in the top bar from **Edit** to **Simulate**, then choose the **Scenarios** tab in the Simulate sidebar.
+Scenarios live under the **Simulate** [global mode](drawing-a-net.md#global-modes). To open the scenarios list, switch the mode selector in the top bar from **Edit** to **Simulate**, then choose the **Scenarios** tab in the Simulate sidebar.
 
 ## What a scenario contains
 
diff --git a/libs/@hashintel/petrinaut/docs/simulation.md b/libs/@hashintel/petrinaut/docs/simulation.md
index dfcc27bd2eb..c85e9b24fa1 100644
--- a/libs/@hashintel/petrinaut/docs/simulation.md
+++ b/libs/@hashintel/petrinaut/docs/simulation.md
@@ -129,7 +129,7 @@ The **Timeline** tab appears in the bottom panel during and after simulation. It
 
 - **Chart type** -- toggle between **Run** (line chart) and **Stacked** (area chart) using the control in the tab header.
 - **Scrub** -- click or drag on the chart to jump to any frame. A playhead indicator shows the current position.
-- **Legend** -- click place names to show/hide individual traces. Hover to dim other traces. Y axis is automatically scaled to the maximum value.
+- **Series selector** -- the strip below the chart lists the traces currently shown. Hover a trace and click the eye icon that replaces its colour swatch to hide it; the trace stays in place, struck through, until the pointer leaves the selector, so you can hide several traces in a row or click again to undo a change. Hidden traces are managed from the dropdown: a **+N more** chip opens the full list when there are more traces than fit, and clicking anywhere else in the selector opens it for searching. The badge shows how many traces are currently shown, and your selection is kept while you switch tabs. Use **Select All** or **Unselect All** for bulk changes, or choose **Only** on a trace row to focus the chart on that one series. Y axis is automatically scaled to the maximum value.
 
 ## Viewing state during simulation
 
diff --git a/libs/@hashintel/petrinaut/src/react/actual-mode-context.ts b/libs/@hashintel/petrinaut/src/react/actual-mode-context.ts
new file mode 100644
index 00000000000..7ea93674377
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/react/actual-mode-context.ts
@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+import { unavailableActualMode } from "@hashintel/petrinaut-core";
+
+import type { ActualModeContextValue } from "@hashintel/petrinaut-core";
+
+export const ActualModeContext = createContext<ActualModeContextValue>(
+  unavailableActualMode,
+);
+
+export type { ActualModeContextValue };
diff --git a/libs/@hashintel/petrinaut/src/react/execution-frame/context.ts b/libs/@hashintel/petrinaut/src/react/execution-frame/context.ts
new file mode 100644
index 00000000000..e21de7eb54f
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/react/execution-frame/context.ts
@@ -0,0 +1,69 @@
+import { createContext } from "react";
+
+import type {
+  SimulationFrameReader,
+  SimulationFrameState,
+} from "@hashintel/petrinaut-core";
+
+/**
+ * A mode-agnostic source of execution frames.
+ *
+ * Petrinaut can show an execution coming from different backends: local
+ * simulation playback, or a host-provided Actual mode stream. Frame consumers
+ * (place nodes, visualizers, the timeline chart) read this interface instead
+ * of a backend-specific context, so they do not need to know which backend is
+ * active. The {@link ExecutionFrameProvider} in `./provider.tsx` decides which
+ * adapter feeds the context based on the editor's global mode.
+ */
+export type ExecutionFrameSource = {
+  /**
+   * Identity of the underlying run and time baseline. Consumers that
+   * accumulate state derived from frames (e.g. the timeline streaming store)
+   * reset their accumulation when this changes.
+   */
+  sourceId: string;
+
+  /** Total number of frames currently available. */
+  totalFrames: number;
+
+  /** Index of the currently viewed frame. */
+  currentFrameIndex: number;
+
+  /** Reader for the currently viewed frame; null when no frames exist. */
+  currentFrameReader: SimulationFrameReader | null;
+
+  /**
+   * Simplified state of the currently viewed frame (place token counts);
+   * null when no frames exist.
+   */
+  currentViewedFrame: SimulationFrameState | null;
+
+  /**
+   * Move the viewed frame, e.g. from timeline scrubbing. Implementations
+   * clamp the index to the available range.
+   */
+  scrubToFrame: (frameIndex: number) => void;
+
+  /**
+   * Read frame readers from `startIndex` (inclusive) to `endIndex`
+   * (exclusive, defaults to the end of the available frames).
+   */
+  getFramesInRange: (
+    startIndex: number,
+    endIndex?: number,
+  ) => Promise<SimulationFrameReader[]>;
+};
+
+export const emptyExecutionFrameSource: ExecutionFrameSource = {
+  sourceId: "none",
+  totalFrames: 0,
+  currentFrameIndex: 0,
+  currentFrameReader: null,
+  currentViewedFrame: null,
+  scrubToFrame: () => {},
+  getFramesInRange: () => Promise.resolve([]),
+};
+
+export const ExecutionFrameSourceContext = createContext<ExecutionFrameSource>(
+  emptyExecutionFrameSource,
+);
diff --git a/libs/@hashintel/petrinaut/src/react/execution-frame/provider.test.tsx b/libs/@hashintel/petrinaut/src/react/execution-frame/provider.test.tsx
new file mode 100644
index 00000000000..237e6878cde
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/react/execution-frame/provider.test.tsx
@@ -0,0 +1,174 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_PETRINAUT_EXTENSIONS } from "@hashintel/petrinaut-core";
+
+import { ActualModeContext } from "../actual-mode-context";
+import { SDCPNContext, type SDCPNContextValue } from "../state/sdcpn-context";
+import { useActualExecutionFrameSource } from "./provider";
+
+import type { ExecutionFrameSource } from "./context";
+import type { ActualModeContextValue, SDCPN } from "@hashintel/petrinaut-core";
+
+const definition: SDCPN = {
+  places: [
+    {
+      id: "queued",
+      name: "Queued",
+      colorId: null,
+      dynamicsEnabled: false,
+      differentialEquationId: null,
+      x: 0,
+      y: 0,
+    },
+    {
+      id: "done",
+      name: "Done",
+      colorId: null,
+      dynamicsEnabled: false,
+      differentialEquationId: null,
+      x: 100,
+      y: 0,
+    },
+  ],
+  transitions: [],
+  types: [],
+  differentialEquations: [],
+  parameters: [],
+};
+
+const sdcpnContextValue: SDCPNContextValue = {
+  createNewNet: () => {},
+  existingNets: [],
+  loadPetriNet: () => {},
+  petriNetId: "actual-test",
+  petriNetDefinition: definition,
+  readonly: true,
+  extensions: DEFAULT_PETRINAUT_EXTENSIONS,
+  setTitle: () => {},
+  title: "Actual test",
+  getItemType: () => null,
+};
+
+const availableActualMode: ActualModeContextValue = {
+  available: true,
+  source: {
+    kind: "brunch",
+    endpoint: "http://127.0.0.1:5184/stream",
+    runId: "run-1",
+  },
+  status: "complete",
+  title: "Run",
+  definition,
+  initialState: { queued: 2, done: 0 },
+  transitionFirings: [
+    {
+      transitionId: "finish",
+      input: { queued: 1 },
+      output: { done: 1 },
+      ts: "2026-06-05T10:00:00.000Z",
+    },
+  ],
+  receivedEvents: [],
+  timelineStartedAtMs: Date.parse("2026-06-05T10:00:00.000Z"),
+  timelineNowMs: Date.parse("2026-06-05T10:00:05.000Z"),
+  error: null,
+};
+
+/**
+ * A test component that runs the adapter hook and exposes its value.
+ */
+const ActualSourceProbe = ({
+  enabled,
+  onSource,
+}: {
+  enabled: boolean;
+  onSource: (source: ExecutionFrameSource) => void;
+}) => {
+  const source = useActualExecutionFrameSource({ enabled });
+  // Call the callback during render to capture the value
+  onSource(source);
+  return null;
+};
+
+const renderActualSource = (params: {
+  actualMode: ActualModeContextValue;
+  enabled: boolean;
+}) => {
+  // Use an object to hold the value so we can mutate it from the callback
+  const captured: { source: ExecutionFrameSource | null } = { source: null };
+  const captureSource = (source: ExecutionFrameSource) => {
+    captured.source = source;
+  };
+
+  render(
+    <ActualModeContext value={params.actualMode}>
+      <SDCPNContext value={sdcpnContextValue}>
+        <ActualSourceProbe enabled={params.enabled} onSource={captureSource} />
+      </SDCPNContext>
+    </ActualModeContext>,
+  );
+
+  return captured;
+};
+
+describe("useActualExecutionFrameSource", () => {
+  it("returns an empty source while disabled", () => {
+    const captured = renderActualSource({
+      actualMode: availableActualMode,
+      enabled: false,
+    });
+
+    expect(captured.source?.totalFrames).toBe(0);
+    expect(captured.source?.currentFrameReader).toBeNull();
+  });
+
+  it("derives frames from the initial state and transition firings", async () => {
+    const captured = renderActualSource({
+      actualMode: availableActualMode,
+      enabled: true,
+    });
+
+    // One initial point plus one transition firing; no live ticks because the
+    // stream is complete.
+    expect(captured.source?.totalFrames).toBe(2);
+    expect(captured.source?.currentFrameIndex).toBe(0);
+    expect(captured.source?.currentViewedFrame?.places).toEqual({
+      queued: { tokenCount: 2 },
+      done: { tokenCount: 0 },
+    });
+
+    const frames = (await captured.source?.getFramesInRange(0)) ?? [];
+    expect(frames.map((frame) => frame.number)).toEqual([0, 1]);
+    expect(frames[1]?.toFrameState().places).toEqual({
+      queued: { tokenCount: 1 },
+      done: { tokenCount: 1 },
+    });
+  });
+
+  it("clamps scrubbing to the available frame range", () => {
+    const captured = renderActualSource({
+      actualMode: availableActualMode,
+      enabled: true,
+    });
+
+    act(() => {
+      captured.source?.scrubToFrame(5);
+    });
+
+    expect(captured.source?.currentFrameIndex).toBe(1);
+    expect(captured.source?.currentViewedFrame?.places).toEqual({
+      queued: { tokenCount: 1 },
+      done: { tokenCount: 1 },
+    });
+
+    act(() => {
+      captured.source?.scrubToFrame(-3);
+    });
+
+    expect(captured.source?.currentFrameIndex).toBe(0);
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/react/execution-frame/provider.tsx b/libs/@hashintel/petrinaut/src/react/execution-frame/provider.tsx
new file mode 100644
index 00000000000..b44171305fa
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/react/execution-frame/provider.tsx
@@ -0,0 +1,177 @@
+import { use, useState, type FC, type PropsWithChildren } from "react";
+
+import {
+  buildActualModeTimelinePoints,
+  createActualModeTimelineFrameReader,
+  getActualModeTransitionFiringTimesMs,
+} from "@hashintel/petrinaut-core";
+
+import { ActualModeContext } from "../actual-mode-context";
+import { PlaybackContext } from "../playback/context";
+import { SimulationContext } from "../simulation/context";
+import { EditorContext } from "../state/editor-context";
+import { SDCPNContext } from "../state/sdcpn-context";
+import {
+  emptyExecutionFrameSource,
+  ExecutionFrameSourceContext,
+  type ExecutionFrameSource,
+} from "./context";
+
+import type { SimulationFrameReader } from "@hashintel/petrinaut-core";
+
+/**
+ * Adapter exposing local simulation playback as an {@link ExecutionFrameSource}.
+ */
+export const useSimulationExecutionFrameSource = (): ExecutionFrameSource => {
+  const { dt, getFramesInRange, totalFrames } = use(SimulationContext);
+  const {
+    currentFrameIndex,
+    currentFrameReader,
+    currentViewedFrame,
+    setCurrentViewedFrame,
+  } = use(PlaybackContext);
+
+  return {
+    // dt participates in the identity because a dt change rescales the time
+    // axis of everything derived from frame indices.
+    sourceId: `simulation:${dt}`,
+    totalFrames,
+    currentFrameIndex,
+    currentFrameReader,
+    currentViewedFrame,
+    scrubToFrame: setCurrentViewedFrame,
+    getFramesInRange,
+  };
+};
+
+const parseTimestampMs = (timestamp: string): number | null => {
+  const parsed = Date.parse(timestamp);
+
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const getSourceBaselineKey = (
+  transitionFirings: readonly { ts: string }[],
+  timelineStartedAtMs: number | null,
+): string => {
+  for (const firing of transitionFirings) {
+    const timestampMs = parseTimestampMs(firing.ts);
+
+    if (timestampMs !== null) {
+      return String(timestampMs);
+    }
+  }
+
+  return String(timelineStartedAtMs ?? "pending");
+};
+
+/**
+ * Adapter exposing a host-provided Actual mode stream as an
+ * {@link ExecutionFrameSource}.
+ *
+ * Timeline points, the current frame reader, and the viewed-frame index are
+ * all derived here, in one place, for both the canvas and the timeline chart.
+ * Pass `enabled: false` while another source is active so the adapter skips
+ * deriving frames from a stream nobody is looking at.
+ */
+export const useActualExecutionFrameSource = (params: {
+  enabled: boolean;
+}): ExecutionFrameSource => {
+  const actualMode = use(ActualModeContext);
+  const { petriNetDefinition } = use(SDCPNContext);
+  const [scrubbedFrameIndex, setScrubbedFrameIndex] = useState(0);
+
+  const initialState =
+    params.enabled && actualMode.available ? actualMode.initialState : null;
+
+  if (!actualMode.available || initialState === null) {
+    return emptyExecutionFrameSource;
+  }
+
+  const timelinePoints = buildActualModeTimelinePoints({
+    status: actualMode.status,
+    transitionFirings: actualMode.transitionFirings,
+    timelineStartedAtMs: actualMode.timelineStartedAtMs,
+    timelineNowMs: actualMode.timelineNowMs,
+  });
+  const transitionFiringTimesMs = getActualModeTransitionFiringTimesMs(
+    actualMode.transitionFirings,
+    actualMode.timelineStartedAtMs,
+    actualMode.timelineNowMs,
+  );
+
+  const totalFrames = timelinePoints.length;
+  const currentFrameIndex = Math.min(
+    scrubbedFrameIndex,
+    Math.max(0, totalFrames - 1),
+  );
+  const currentPoint = timelinePoints[currentFrameIndex];
+  const currentFrameReader = currentPoint
+    ? createActualModeTimelineFrameReader({
+        definition: petriNetDefinition,
+        initialState,
+        transitionFirings: actualMode.transitionFirings,
+        transitionFiringTimesMs,
+        point: currentPoint,
+        number: currentFrameIndex,
+      })
+    : null;
+
+  const getFramesInRange = async (
+    startIndex: number,
+    endIndex = timelinePoints.length,
+  ): Promise<SimulationFrameReader[]> =>
+    timelinePoints.slice(startIndex, endIndex).map((point, offset) =>
+      createActualModeTimelineFrameReader({
+        definition: petriNetDefinition,
+        initialState,
+        transitionFirings: actualMode.transitionFirings,
+        transitionFiringTimesMs,
+        point,
+        number: startIndex + offset,
+      }),
+    );
+
+  const { source } = actualMode;
+  const baselineKey = getSourceBaselineKey(
+    actualMode.transitionFirings,
+    actualMode.timelineStartedAtMs,
+  );
+
+  return {
+    sourceId: `actual:${source.kind}:${source.endpoint}:${
+      source.runId ?? ""
+    }:${baselineKey}`,
+    totalFrames,
+    currentFrameIndex,
+    currentFrameReader,
+    currentViewedFrame: currentFrameReader?.toFrameState() ?? null,
+    scrubToFrame: (frameIndex: number) => {
+      setScrubbedFrameIndex(Math.max(0, Math.floor(frameIndex)));
+    },
+    getFramesInRange,
+  };
+};
+
+/**
+ * Routes {@link ExecutionFrameSourceContext} to the adapter matching the
+ * editor's global mode: the host-provided Actual mode stream in Actual mode,
+ * local simulation playback otherwise. A single element provides the context
+ * so switching modes swaps the value without remounting the subtree.
+ */
+export const ExecutionFrameProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { globalMode } = use(EditorContext);
+  const isActualMode = globalMode === "actual";
+  const simulationSource = useSimulationExecutionFrameSource();
+  const actualSource = useActualExecutionFrameSource({
+    enabled: isActualMode,
+  });
+
+  return (
+    <ExecutionFrameSourceContext
+      value={isActualMode ? actualSource : simulationSource}
+    >
+      {children}
+    </ExecutionFrameSourceContext>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-commands.test.tsx b/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-commands.test.tsx
index f4249e98a8c..4356bd3aa10 100644
--- a/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-commands.test.tsx
+++ b/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-commands.test.tsx
@@ -67,6 +67,7 @@ const editorContextValue = (
   collapseAllPanels: () => {},
   setTimelineChartType: () => {},
   setTimelineView: () => {},
+  setHiddenTimelineSeriesIds: () => {},
   setSimulateViewMode: () => {},
   setSimulateDrawer: () => {},
   setSearchOpen: () => {},
diff --git a/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-mutations.test.tsx b/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-mutations.test.tsx
index e8e73909888..00cc889ea7f 100644
--- a/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-mutations.test.tsx
+++ b/libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-mutations.test.tsx
@@ -70,6 +70,7 @@ const editorContextValue = (
   collapseAllPanels: () => {},
   setTimelineChartType: () => {},
   setTimelineView: () => {},
+  setHiddenTimelineSeriesIds: () => {},
   setSimulateViewMode: () => {},
   setSimulateDrawer: () => {},
   setSearchOpen: () => {},
diff --git a/libs/@hashintel/petrinaut/src/react/index.ts b/libs/@hashintel/petrinaut/src/react/index.ts
index cc153601646..e2866100698 100644
--- a/libs/@hashintel/petrinaut/src/react/index.ts
+++ b/libs/@hashintel/petrinaut/src/react/index.ts
@@ -7,6 +7,8 @@
 export { PetrinautInstanceContext } from "./instance-context";
 export { usePetrinautInstance } from "./use-petrinaut-instance";
 export { useStore, useStoreSelector } from "./use-store";
+export { ActualModeContext } from "./actual-mode-context";
+export type { ActualModeContextValue } from "./actual-mode-context";
 
 // --- Provider unification ---
 export { PetrinautProvider } from "./petrinaut-provider";
diff --git a/libs/@hashintel/petrinaut/src/react/petrinaut-provider.tsx b/libs/@hashintel/petrinaut/src/react/petrinaut-provider.tsx
index 88d65be87bd..5f64ce05a46 100644
--- a/libs/@hashintel/petrinaut/src/react/petrinaut-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/petrinaut-provider.tsx
@@ -6,6 +6,7 @@ import {
   type WorkerFactory,
 } from "@hashintel/petrinaut-core";
 
+import { ExecutionFrameProvider } from "./execution-frame/provider";
 import { ExperimentsProvider } from "./experiments/provider";
 import { PetrinautInstanceContext } from "./instance-context";
 import { LanguageClientProvider } from "./lsp/provider";
@@ -78,7 +79,9 @@ export const PetrinautProvider: React.FC<PetrinautProviderProps> = ({
             <ExperimentsProvider workerFactory={monteCarloWorkerFactory}>
               <PlaybackProvider>
                 <UserSettingsProvider>
-                  <EditorProvider>{children}</EditorProvider>
+                  <EditorProvider>
+                    <ExecutionFrameProvider>{children}</ExecutionFrameProvider>
+                  </EditorProvider>
                 </UserSettingsProvider>
               </PlaybackProvider>
             </ExperimentsProvider>
diff --git a/libs/@hashintel/petrinaut/src/react/state/editor-context.ts b/libs/@hashintel/petrinaut/src/react/state/editor-context.ts
index 2a5da4dcacf..643a74c2f67 100644
--- a/libs/@hashintel/petrinaut/src/react/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/react/state/editor-context.ts
@@ -13,12 +13,14 @@ export type DraggingStateByNodeId = Record<
   { dragging: boolean; position: { x: number; y: number } }
 >;
 
-type EditorGlobalMode = "edit" | "simulate";
+export type EditorGlobalMode = "edit" | "simulate" | "actual";
 type EditorEditionMode = "cursor" | "add-place" | "add-transition";
 export type CursorMode = "select" | "pan";
 export type BottomPanelTab =
   | "diagnostics"
   | "simulation-settings"
+  | "actual-events"
+  | "actual-timeline"
   | "simulation-timeline";
 
 export type TimelineChartType = "run" | "stacked";
@@ -77,6 +79,12 @@ export type EditorState = {
    * {@link TimelineView} for the available options.
    */
   timelineView: TimelineView;
+  /**
+   * Series hidden in the timeline chart, keyed by series id. Lifted here so
+   * the selection survives bottom-panel tab switches, which unmount the
+   * timeline subviews.
+   */
+  hiddenTimelineSeriesIds: Set<string>;
   /**
    * Which tab is active in the SimulateView sidebar ("scenarios" | "metrics"
    * | "experiments"). Lifted here so external actions (e.g. the "Manage"
@@ -133,6 +141,7 @@ export type EditorActions = {
   collapseAllPanels: () => void;
   setTimelineChartType: (chartType: TimelineChartType) => void;
   setTimelineView: (view: TimelineView) => void;
+  setHiddenTimelineSeriesIds: (seriesIds: Set<string>) => void;
   setSimulateViewMode: (mode: SimulateViewMode) => void;
   setSimulateDrawer: (drawer: SimulateDrawerState) => void;
   setSearchOpen: (isOpen: boolean) => void;
@@ -165,6 +174,7 @@ export const initialEditorState: EditorState = {
   draggingStateByNodeId: {},
   timelineChartType: "run",
   timelineView: { kind: "per-place" },
+  hiddenTimelineSeriesIds: new Set(),
   simulateViewMode: "experiments",
   simulateDrawer: { type: "closed" },
   isPanelAnimating: false,
@@ -203,6 +213,7 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   collapseAllPanels: () => {},
   setTimelineChartType: () => {},
   setTimelineView: () => {},
+  setHiddenTimelineSeriesIds: () => {},
   setSimulateViewMode: () => {},
   setSimulateDrawer: () => {},
   setSearchOpen: () => {},
diff --git a/libs/@hashintel/petrinaut/src/react/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/react/state/editor-provider.tsx
index 896d8b70659..48214ba056c 100644
--- a/libs/@hashintel/petrinaut/src/react/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/state/editor-provider.tsx
@@ -6,6 +6,7 @@ import {
   type SelectionMap,
 } from "@hashintel/petrinaut-core";
 
+import { ActualModeContext } from "../actual-mode-context";
 import {
   type DraggingStateByNodeId,
   type EditorActions,
@@ -29,16 +30,27 @@ const canvasSelections = (selection: SelectionMap) =>
 export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
   const userSettings = use(UserSettingsContext);
   const { petriNetDefinition } = use(SDCPNContext);
+  const actualMode = use(ActualModeContext);
+  const startsInActualMode = actualMode.available;
+  const startsWithActualTimeline =
+    startsInActualMode &&
+    actualMode.initialState !== null &&
+    (actualMode.status === "streaming" || actualMode.status === "complete");
 
   const [state, setState] = useState<EditorState>(() => ({
     ...initialEditorState,
+    globalMode: startsInActualMode ? "actual" : initialEditorState.globalMode,
     cursorMode: userSettings.cursorMode,
     isLeftSidebarOpen: userSettings.isLeftSidebarOpen,
     leftSidebarWidth: userSettings.leftSidebarWidth,
     propertiesPanelWidth: userSettings.propertiesPanelWidth,
-    isBottomPanelOpen: userSettings.isBottomPanelOpen,
+    isBottomPanelOpen: startsWithActualTimeline
+      ? true
+      : userSettings.isBottomPanelOpen,
     bottomPanelHeight: userSettings.bottomPanelHeight,
-    activeBottomPanelTab: userSettings.activeBottomPanelTab,
+    activeBottomPanelTab: startsWithActualTimeline
+      ? "actual-timeline"
+      : userSettings.activeBottomPanelTab,
     timelineChartType: userSettings.timelineChartType,
   }));
 
@@ -216,6 +228,8 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
       setState((prev) => ({ ...prev, timelineChartType: chartType })),
     setTimelineView: (view) =>
       setState((prev) => ({ ...prev, timelineView: view })),
+    setHiddenTimelineSeriesIds: (seriesIds) =>
+      setState((prev) => ({ ...prev, hiddenTimelineSeriesIds: seriesIds })),
     setSimulateViewMode: (mode) =>
       setState((prev) => ({ ...prev, simulateViewMode: mode })),
     setSimulateDrawer: (drawer) =>
diff --git a/libs/@hashintel/petrinaut/src/react/state/use-read-only-reason.ts b/libs/@hashintel/petrinaut/src/react/state/use-read-only-reason.ts
index 1a237d0d4a1..f944517d199 100644
--- a/libs/@hashintel/petrinaut/src/react/state/use-read-only-reason.ts
+++ b/libs/@hashintel/petrinaut/src/react/state/use-read-only-reason.ts
@@ -10,11 +10,13 @@ import { SDCPNContext } from "./sdcpn-context";
  *
  * - `host-readonly`: the consumer passed `readonly`, or the handle is read-only.
  * - `simulate-mode`: the user has switched to simulate mode.
+ * - `actual-mode`: the user is viewing a host-provided live execution stream.
  * - `simulation-active`: a simulation is Running, Paused, or Complete.
  */
 export type ReadOnlyReason =
   | { kind: "host-readonly" }
   | { kind: "simulate-mode" }
+  | { kind: "actual-mode" }
   | { kind: "simulation-active"; state: "Running" | "Paused" | "Complete" };
 
 /**
@@ -33,6 +35,9 @@ export const useReadOnlyReason = (): ReadOnlyReason | null => {
   if (globalMode === "simulate") {
     return { kind: "simulate-mode" };
   }
+  if (globalMode === "actual") {
+    return { kind: "actual-mode" };
+  }
   if (
     simulationState === "Running" ||
     simulationState === "Paused" ||
@@ -52,7 +57,9 @@ export const formatReadOnlyReason = (reason: ReadOnlyReason): string => {
     case "host-readonly":
       return "This document is read-only; mutations are disabled.";
     case "simulate-mode":
-      return "The editor is in simulate mode. Ask the user to switch reset the simulation before mutating.";
+      return "The editor is in simulate mode. Ask the user to switch to edit mode before mutating.";
+    case "actual-mode":
+      return "The editor is in actual mode. Ask the user to switch to edit mode before mutating.";
     case "simulation-active":
       return `A simulation is currently ${reason.state.toLowerCase()}. Ask the user to reset the simulation before mutating.`;
   }
diff --git a/libs/@hashintel/petrinaut/src/ui/constants/ui-subviews.ts b/libs/@hashintel/petrinaut/src/ui/constants/ui-subviews.ts
index 5429b0db965..d6f196d2608 100644
--- a/libs/@hashintel/petrinaut/src/ui/constants/ui-subviews.ts
+++ b/libs/@hashintel/petrinaut/src/ui/constants/ui-subviews.ts
@@ -5,9 +5,11 @@
  * also consume EditorContext, which imports numeric constants from ui.ts.
  */
 
+import { actualEventsSubView } from "../views/Editor/panels/BottomPanel/subviews/actual-events";
 import { diagnosticsSubView } from "../views/Editor/panels/BottomPanel/subviews/diagnostics";
 import { simulationSettingsSubView } from "../views/Editor/panels/BottomPanel/subviews/simulation-settings";
-import { simulationTimelineSubView } from "../views/Editor/panels/BottomPanel/subviews/simulation-timeline";
+import { actualTimelineSubView } from "../views/Editor/panels/BottomPanel/subviews/simulation-timeline/actual";
+import { simulationTimelineSubView } from "../views/Editor/panels/BottomPanel/subviews/simulation-timeline/main";
 import { differentialEquationsListSubView } from "../views/Editor/panels/LeftSideBar/subviews/differential-equations-list";
 import { entitiesTreeSubView } from "../views/Editor/panels/LeftSideBar/subviews/entities-tree";
 import { nodesListSubView } from "../views/Editor/panels/LeftSideBar/subviews/nodes-list";
@@ -31,5 +33,11 @@ export const BOTTOM_PANEL_SUBVIEWS: SubView[] = [
   simulationSettingsSubView,
 ];
 
+// Bottom panel subviews visible in Actual mode.
+export const ACTUAL_BOTTOM_PANEL_SUBVIEWS: SubView[] = [
+  actualTimelineSubView,
+  actualEventsSubView,
+];
+
 // Subviews only visible when simulation is running/paused
 export const SIMULATION_ONLY_SUBVIEWS: SubView[] = [simulationTimelineSubView];
diff --git a/libs/@hashintel/petrinaut/src/ui/file-io/export-actual-mode-recording.ts b/libs/@hashintel/petrinaut/src/ui/file-io/export-actual-mode-recording.ts
new file mode 100644
index 00000000000..8fb74cb1764
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/file-io/export-actual-mode-recording.ts
@@ -0,0 +1,57 @@
+import {
+  createActualModeRecording,
+  createActualModeReceivedEventsRecording,
+  type ActualModeMarking,
+  type ActualModeReceivedEvent,
+  type ActualModeSource,
+  type ActualModeTransitionFiring,
+  type SDCPN,
+} from "@hashintel/petrinaut-core";
+
+import { downloadBlob, timestampedFilename } from "../lib/download-blob";
+
+export function exportActualModeRecording({
+  definition,
+  initialState,
+  receivedEvents,
+  source,
+  title,
+  transitionFirings,
+}: {
+  definition: SDCPN | null;
+  initialState: ActualModeMarking | null;
+  receivedEvents?: readonly ActualModeReceivedEvent[];
+  source: ActualModeSource | null;
+  title: string | null;
+  transitionFirings: readonly ActualModeTransitionFiring[];
+}): void {
+  const recording =
+    receivedEvents && receivedEvents.length > 0
+      ? createActualModeReceivedEventsRecording({
+          title,
+          source,
+          events: receivedEvents,
+        })
+      : definition && initialState
+        ? createActualModeRecording({
+            title,
+            source,
+            definition,
+            initialState,
+            transitionFirings,
+          })
+        : null;
+
+  if (!recording) {
+    return;
+  }
+
+  downloadBlob({
+    content: JSON.stringify(recording, null, 2),
+    mimeType: "application/json",
+    filename: timestampedFilename(
+      title ?? "actual-mode-recording",
+      "petrinaut-actual.json",
+    ),
+  });
+}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
index cc2f673ed42..d50ba4d8e89 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
@@ -41,7 +41,7 @@ const bottomBarPositionStyle = css({
   position: "absolute",
   left: "[50%]",
   transform: "translateX(-50%)",
-  zIndex: "[calc(var(--z-index-sticky) - 3)]",
+  zIndex: "[calc(var(--z-index-sticky) + 1)]",
   display: "flex",
   gap: "[20px]",
 });
@@ -77,6 +77,7 @@ export const BottomBar: React.FC<BottomBarProps> = ({
   cursorMode,
   onCursorModeChange,
 }) => {
+  const isActualMode = mode === "actual";
   const {
     isBottomPanelOpen,
     setBottomPanelOpen,
@@ -99,10 +100,10 @@ export const BottomBar: React.FC<BottomBarProps> = ({
     setBottomPanelOpen(!isBottomPanelOpen);
   }, [setBottomPanelOpen, isBottomPanelOpen]);
 
-  // Fallback to 'pan' mode when switching to simulate mode if mutative mode
+  // Fallback to cursor mode when switching away from edit while in a mutative mode.
   useEffect(() => {
     if (
-      mode === "simulate" &&
+      mode !== "edit" &&
       (editionMode === "add-place" || editionMode === "add-transition")
     ) {
       onEditionModeChange("cursor");
@@ -138,8 +139,9 @@ export const BottomBar: React.FC<BottomBarProps> = ({
             onEditionModeChange={onEditionModeChange}
             cursorMode={cursorMode}
             onCursorModeChange={onCursorModeChange}
+            showEditTools={!isActualMode}
           />
-          {hasAiAssistant && (
+          {hasAiAssistant && !isActualMode && (
             <>
               <ToolbarDivider />
               <ToolbarButton
@@ -183,12 +185,16 @@ export const BottomBar: React.FC<BottomBarProps> = ({
               <Icon name="chevronUp" size="sm" />
             )}
           </ToolbarButton>
-          <DiagnosticsIndicator
-            onClick={showDiagnostics}
-            isExpanded={isBottomPanelOpen}
-          />
-          <ToolbarDivider />
-          <SimulationControls disabled={hasDiagnostics} />
+          {!isActualMode && (
+            <>
+              <DiagnosticsIndicator
+                onClick={showDiagnostics}
+                isExpanded={isBottomPanelOpen}
+              />
+              <ToolbarDivider />
+              <SimulationControls disabled={hasDiagnostics} />
+            </>
+          )}
         </div>
       </refractive.div>
     </div>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
index ab8d7950153..a5a43942576 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
@@ -113,6 +113,7 @@ interface ToolbarModesProps {
   onEditionModeChange: (mode: EditorEditionMode) => void;
   cursorMode: CursorMode;
   onCursorModeChange: (mode: CursorMode) => void;
+  showEditTools?: boolean;
 }
 
 export const ToolbarModes: React.FC<ToolbarModesProps> = ({
@@ -120,6 +121,7 @@ export const ToolbarModes: React.FC<ToolbarModesProps> = ({
   onEditionModeChange,
   cursorMode,
   onCursorModeChange,
+  showEditTools = true,
 }) => {
   const isReadOnly = useIsReadOnly();
 
@@ -131,7 +133,7 @@ export const ToolbarModes: React.FC<ToolbarModesProps> = ({
         cursorMode={cursorMode}
         onCursorModeChange={onCursorModeChange}
       />
-      {!isReadOnly && (
+      {showEditTools && !isReadOnly && (
         <>
           <ToolbarDivider />
           <ToolbarButton
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
index 3979cd32407..bfc5ab63bd9 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
@@ -2,14 +2,16 @@ import { Icon } from "@hashintel/ds-components";
 
 import { SegmentGroup } from "../../../../components/segment-group";
 
+import type { EditorGlobalMode } from "../../../../../react/state/editor-context";
 import type { SegmentOption } from "../../../../components/segment-group";
 
 export interface ModeSelectorProps {
-  mode: "edit" | "simulate";
-  onChange: (mode: "edit" | "simulate") => void;
+  actualModeAvailable: boolean;
+  mode: EditorGlobalMode;
+  onChange: (mode: EditorGlobalMode) => void;
 }
 
-const options: SegmentOption[] = [
+const getOptions = (actualModeAvailable: boolean): SegmentOption[] => [
   {
     label: "Edit",
     value: "edit",
@@ -24,20 +26,23 @@ const options: SegmentOption[] = [
     label: "Actual",
     value: "actual",
     icon: <Icon name="circleFilled" size="sm" />,
-    disabled: true,
-    tooltip: "Actual mode is not yet available.",
+    disabled: !actualModeAvailable,
+    tooltip: actualModeAvailable
+      ? "View actual execution state."
+      : "Actual mode is not yet available.",
   },
 ];
 
 export const ModeSelector: React.FC<ModeSelectorProps> = ({
+  actualModeAvailable,
   mode,
   onChange,
 }) => {
   return (
     <SegmentGroup
       value={mode}
-      options={options}
-      onChange={(value) => onChange(value as "edit" | "simulate")}
+      options={getOptions(actualModeAvailable)}
+      onChange={(value) => onChange(value as EditorGlobalMode)}
     />
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
index 1faa41f84c4..da50eaedd2a 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
@@ -49,6 +49,7 @@ const rightSectionStyle = css({
 });
 
 interface TopBarProps {
+  actualModeAvailable: boolean;
   menuItems: MenuItem[];
   title: string;
   onTitleChange: (value: string) => void;
@@ -60,6 +61,7 @@ interface TopBarProps {
 }
 
 export const TopBar: React.FC<TopBarProps> = ({
+  actualModeAvailable,
   menuItems,
   title,
   onTitleChange,
@@ -115,7 +117,11 @@ export const TopBar: React.FC<TopBarProps> = ({
       </div>
 
       {/* Center section - mode switcher */}
-      <ModeSelector mode={mode} onChange={onModeChange} />
+      <ModeSelector
+        actualModeAvailable={actualModeAvailable}
+        mode={mode}
+        onChange={onModeChange}
+      />
 
       <div className={rightSectionStyle}>
         <RunningExperimentsPopover
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
index ed02c479b03..43c3e239d12 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
@@ -12,6 +12,7 @@ import {
 } from "@hashintel/petrinaut-core/examples";
 
 import { usePetrinautCommands } from "../../../react";
+import { ActualModeContext } from "../../../react/actual-mode-context";
 import { ExperimentsContext } from "../../../react/experiments/context";
 import { EditorContext } from "../../../react/state/editor-context";
 import { SDCPNContext } from "../../../react/state/sdcpn-context";
@@ -137,6 +138,7 @@ export const EditorView = ({
     bottomPanelHeight,
   } = use(EditorContext);
   const { setSelectedExperimentId } = use(ExperimentsContext);
+  const actualMode = use(ActualModeContext);
 
   const [pendingAiAssistantMessage, setPendingAiAssistantMessage] = useState<
     string | null
@@ -401,6 +403,7 @@ export const EditorView = ({
 
       {/* Top Bar - always visible */}
       <TopBar
+        actualModeAvailable={actualMode.available}
         menuItems={menuItems}
         title={title}
         onTitleChange={setTitle}
@@ -438,7 +441,7 @@ export const EditorView = ({
               />
             )}
 
-            {/* Bottom Panel - Diagnostics, Simulation Settings */}
+            {/* Bottom Panel */}
             <BottomPanel />
 
             <BottomBar
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
index 9c8382a255c..129122140ff 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
@@ -3,6 +3,7 @@ import { use, useEffect, useRef } from "react";
 import { Button } from "@hashintel/ds-components";
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
 
+import { ActualModeContext } from "../../../../../react/actual-mode-context";
 import { SimulationContext } from "../../../../../react/simulation/context";
 import {
   type BottomPanelTab,
@@ -21,6 +22,7 @@ import {
   PANEL_MARGIN,
 } from "../../../../constants/ui";
 import {
+  ACTUAL_BOTTOM_PANEL_SUBVIEWS,
   BOTTOM_PANEL_SUBVIEWS,
   SIMULATION_ONLY_SUBVIEWS,
 } from "../../../../constants/ui-subviews";
@@ -70,6 +72,20 @@ const headerRightStyle = css({
   gap: "[4px]",
 });
 
+const getBottomPanelSubViews = ({
+  isActualMode,
+  isSimulationActive,
+}: {
+  isActualMode: boolean;
+  isSimulationActive: boolean;
+}) =>
+  isActualMode
+    ? ACTUAL_BOTTOM_PANEL_SUBVIEWS
+    : [
+        ...BOTTOM_PANEL_SUBVIEWS,
+        ...(isSimulationActive ? SIMULATION_ONLY_SUBVIEWS : []),
+      ];
+
 /**
  * BottomPanel shows tabs for Diagnostics and Simulation Settings.
  * Positioned at the bottom of the viewport.
@@ -89,45 +105,98 @@ export const BottomPanel: React.FC = () => {
     setActiveBottomPanelTab: setActiveTab,
     toggleBottomPanel,
     isPanelAnimating,
+    globalMode,
   } = use(EditorContext);
 
   // Simulation state for conditional subviews
   const { state: simulationState } = use(SimulationContext);
+  const actualMode = use(ActualModeContext);
+  const isActualMode = globalMode === "actual";
   const isSimulationActive =
-    simulationState === "Running" ||
-    simulationState === "Paused" ||
-    simulationState === "Complete";
+    !isActualMode &&
+    (simulationState === "Running" ||
+      simulationState === "Paused" ||
+      simulationState === "Complete");
+  const isActualTimelineActive =
+    isActualMode &&
+    actualMode.available &&
+    actualMode.initialState !== null &&
+    (actualMode.status === "streaming" || actualMode.status === "complete");
 
-  // Track previous simulation state to detect when simulation starts
-  const prevSimulationActiveRef = useRef(isSimulationActive);
+  // Track previous run states to detect when a timeline becomes available.
+  const prevSimulationActiveRef = useRef(false);
+  const prevActualTimelineActiveRef = useRef(false);
 
-  // Dynamically compute subviews based on simulation state
-  const subViews = isSimulationActive
-    ? [...BOTTOM_PANEL_SUBVIEWS, ...SIMULATION_ONLY_SUBVIEWS]
-    : BOTTOM_PANEL_SUBVIEWS;
+  // Dynamically compute subviews based on available execution modes.
+  const subViews = getBottomPanelSubViews({
+    isActualMode,
+    isSimulationActive,
+  });
 
-  // Automatically open bottom panel and switch to timeline when simulation starts,
-  // and fall back to diagnostics when simulation stops
+  // Automatically open bottom panel and switch to the relevant timeline when a
+  // run starts, and fall back to diagnostics when the active timeline disappears.
   useEffect(() => {
-    const wasActive = prevSimulationActiveRef.current;
+    const wasSimulationActive = prevSimulationActiveRef.current;
+    const wasActualTimelineActive = prevActualTimelineActiveRef.current;
     prevSimulationActiveRef.current = isSimulationActive;
+    prevActualTimelineActiveRef.current = isActualTimelineActive;
 
-    // Simulation just started (transition from inactive to active)
-    if (isSimulationActive && !wasActive) {
+    if (isActualTimelineActive && !wasActualTimelineActive) {
+      setBottomPanelOpen(true);
+      setActiveTab("actual-timeline");
+    } else if (!isActualMode && isSimulationActive && !wasSimulationActive) {
       setBottomPanelOpen(true);
       setActiveTab("simulation-timeline");
     }
 
-    // Simulation just stopped (transition from active to inactive)
-    // If the current tab is simulation-only, fall back to diagnostics
     if (
       !isSimulationActive &&
-      wasActive &&
+      wasSimulationActive &&
       activeTab === "simulation-timeline"
     ) {
       setActiveTab("diagnostics");
     }
-  }, [isSimulationActive, setBottomPanelOpen, setActiveTab, activeTab]);
+
+    if (
+      !isActualMode &&
+      !isActualTimelineActive &&
+      wasActualTimelineActive &&
+      activeTab === "actual-timeline"
+    ) {
+      // Only fall back to diagnostics when leaving Actual mode entirely; while
+      // still in Actual mode the timeline tab stays valid even without data.
+      setActiveTab("diagnostics");
+    }
+  }, [
+    activeTab,
+    isActualMode,
+    isActualTimelineActive,
+    isSimulationActive,
+    setActiveTab,
+    setBottomPanelOpen,
+  ]);
+
+  useEffect(() => {
+    const availableSubViews = getBottomPanelSubViews({
+      isActualMode,
+      isSimulationActive,
+    });
+
+    if (!availableSubViews.some((subView) => subView.id === activeTab)) {
+      const fallbackTab = availableSubViews[0]?.id as
+        | BottomPanelTab
+        | undefined;
+
+      if (fallbackTab) {
+        setActiveTab(fallbackTab);
+      }
+    }
+  }, [activeTab, isActualMode, isSimulationActive, setActiveTab]);
+
+  const renderedActiveTab =
+    subViews.find((subView) => subView.id === activeTab)?.id ??
+    subViews[0]?.id ??
+    activeTab;
 
   const handleTabChange = (tabId: string) => {
     setActiveTab(tabId as BottomPanelTab);
@@ -171,27 +240,32 @@ export const BottomPanel: React.FC = () => {
       <div className={headerStyle}>
         <HorizontalTabsHeader
           subViews={subViews}
-          activeTabId={activeTab}
+          activeTabId={renderedActiveTab}
           onTabChange={handleTabChange}
         />
         <div className={headerRightStyle}>
           <HorizontalTabsHeaderAction
             subViews={subViews}
-            activeTabId={activeTab}
-          />
-          <Button
-            size="xxs"
-            variant="ghost"
-            onClick={toggleBottomPanel}
-            aria-label="Close panel"
-            tooltip="Close panel"
-            iconName="close"
+            activeTabId={renderedActiveTab}
           />
+          {!isActualMode && (
+            <Button
+              size="xxs"
+              variant="ghost"
+              onClick={toggleBottomPanel}
+              aria-label="Close panel"
+              tooltip="Close panel"
+              iconName="close"
+            />
+          )}
         </div>
       </div>
 
       {/* Scrollable content */}
-      <HorizontalTabsContent subViews={subViews} activeTabId={activeTab} />
+      <HorizontalTabsContent
+        subViews={subViews}
+        activeTabId={renderedActiveTab}
+      />
     </GlassPanel>
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/actual-events.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/actual-events.tsx
new file mode 100644
index 00000000000..5c75f8d3f75
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/actual-events.tsx
@@ -0,0 +1,394 @@
+import { use } from "react";
+
+import { Button, Icon, Menu, type MenuItem } from "@hashintel/ds-components";
+import { css, cx } from "@hashintel/ds-helpers/css";
+
+import { ActualModeContext } from "../../../../../../react/actual-mode-context";
+import { exportActualModeRecording } from "../../../../../file-io/export-actual-mode-recording";
+import { exportSDCPN } from "../../../../../file-io/export-sdcpn";
+
+import type { SubView } from "../../../../../components/sub-view/types";
+import type {
+  ActualModeMarking,
+  ActualModeTransitionFiring,
+} from "@hashintel/petrinaut-core";
+
+const MAX_VISIBLE_EVENTS = 500;
+
+const rootStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  height: "full",
+  minHeight: "[0]",
+  gap: "3",
+});
+
+const toolbarStyle = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "3",
+  flexWrap: "wrap",
+  flexShrink: 0,
+});
+
+const statusStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "2",
+  color: "neutral.s105",
+  fontSize: "xs",
+});
+
+const countStyle = css({
+  color: "neutral.s120",
+  fontWeight: "medium",
+});
+
+const exportChevronStyle = css({
+  opacity: "[0.65]",
+});
+
+const emptyStyle = css({
+  color: "neutral.s100",
+  fontStyle: "italic",
+  fontSize: "xs",
+});
+
+const tableWrapperStyle = css({
+  minHeight: "[0]",
+  overflow: "auto",
+  borderTopWidth: "thin",
+  borderColor: "neutral.bd.subtle",
+});
+
+const tableStyle = css({
+  width: "[100%]",
+  borderCollapse: "separate",
+  borderSpacing: "[0]",
+  tableLayout: "fixed",
+});
+
+const headerRowStyle = css({
+  position: "sticky",
+  top: "[0]",
+  zIndex: "base",
+  backgroundColor: "white.a85",
+  backdropFilter: "[blur(13px)]",
+  color: "neutral.s95",
+  fontSize: "[10px]",
+  fontWeight: "semibold",
+  letterSpacing: "[0]",
+  lineHeight: "[1]",
+  textTransform: "uppercase",
+});
+
+const cellStyle = css({
+  padding: "[8px 10px]",
+  borderBottomWidth: "thin",
+  borderColor: "neutral.bd.subtle",
+  textAlign: "left",
+  verticalAlign: "top",
+});
+
+const singleLineCellStyle = css({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const eventColumnStyle = css({
+  width: "[64px]",
+});
+
+const timestampColumnStyle = css({
+  width: "[180px]",
+});
+
+const transitionColumnStyle = css({
+  width: "[220px]",
+});
+
+const effectColumnStyle = css({
+  width: "[280px]",
+});
+
+const indexCellStyle = css({
+  color: "neutral.s90",
+  fontFamily: "mono",
+});
+
+const timestampCellStyle = css({
+  color: "neutral.s105",
+  fontFamily: "mono",
+});
+
+const transitionCellStyle = css({
+  color: "neutral.s125",
+  fontFamily: "mono",
+  fontWeight: "medium",
+});
+
+const markingCellStyle = css({
+  color: "neutral.s115",
+  fontFamily: "mono",
+  fontSize: "[11px]",
+});
+
+const footerNoteStyle = css({
+  color: "neutral.s90",
+  fontSize: "[11px]",
+  flexShrink: 0,
+});
+
+const formatTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+
+  if (Number.isNaN(date.getTime())) {
+    return timestamp;
+  }
+
+  return date.toLocaleString(undefined, {
+    dateStyle: "short",
+    timeStyle: "medium",
+  });
+};
+
+const formatMarkingValue = (
+  value: ActualModeMarking[string] | undefined,
+): string => {
+  if (value === undefined) {
+    return "0";
+  }
+
+  return Array.isArray(value) ? String(value.length) : String(value);
+};
+
+const formatMarking = (marking: ActualModeMarking): string =>
+  Object.entries(marking).length === 0
+    ? "none"
+    : Object.entries(marking)
+        .map(([placeId, value]) => `${placeId}: ${formatMarkingValue(value)}`)
+        .join(", ");
+
+const EventRow: React.FC<{
+  firing: ActualModeTransitionFiring;
+  index: number;
+}> = ({ firing, index }) => (
+  <tr>
+    <td
+      className={cx(
+        cellStyle,
+        singleLineCellStyle,
+        eventColumnStyle,
+        indexCellStyle,
+      )}
+    >
+      #{index + 1}
+    </td>
+    <td
+      className={cx(
+        cellStyle,
+        singleLineCellStyle,
+        timestampColumnStyle,
+        timestampCellStyle,
+      )}
+    >
+      {formatTimestamp(firing.ts)}
+    </td>
+    <td
+      className={cx(
+        cellStyle,
+        singleLineCellStyle,
+        transitionColumnStyle,
+        transitionCellStyle,
+      )}
+    >
+      {firing.transitionId}
+    </td>
+    <td
+      className={cx(
+        cellStyle,
+        singleLineCellStyle,
+        effectColumnStyle,
+        markingCellStyle,
+      )}
+    >
+      {formatMarking(firing.input)}
+    </td>
+    <td className={cx(cellStyle, singleLineCellStyle, markingCellStyle)}>
+      {formatMarking(firing.output)}
+    </td>
+  </tr>
+);
+
+const ActualEventsContent: React.FC = () => {
+  const actualMode = use(ActualModeContext);
+  const canExportStream =
+    actualMode.available &&
+    (actualMode.receivedEvents.length > 0 ||
+      (actualMode.definition !== null && actualMode.initialState !== null));
+  const canExportNet = actualMode.available && actualMode.definition !== null;
+  const canExport = canExportStream || canExportNet;
+  const transitionFirings = actualMode.transitionFirings;
+  const visibleFirings = transitionFirings.slice(-MAX_VISIBLE_EVENTS);
+  const firstVisibleIndex = transitionFirings.length - visibleFirings.length;
+
+  const handleExportStream = () => {
+    if (!actualMode.available || !canExportStream) {
+      return;
+    }
+
+    exportActualModeRecording({
+      definition: actualMode.definition,
+      initialState: actualMode.initialState,
+      receivedEvents: actualMode.receivedEvents,
+      source: actualMode.source,
+      title: actualMode.title,
+      transitionFirings,
+    });
+  };
+
+  const handleExportNet = () => {
+    if (!actualMode.available || actualMode.definition === null) {
+      return;
+    }
+
+    exportSDCPN({
+      petriNetDefinition: actualMode.definition,
+      title: actualMode.title ?? "actual-mode-net",
+    });
+  };
+
+  const exportMenuItems: MenuItem[] = [
+    {
+      id: "export-stream",
+      text: "Export Stream",
+      disabled: !canExportStream,
+      onClick: handleExportStream,
+    },
+    {
+      id: "export-net",
+      text: "Export Net",
+      disabled: !canExportNet,
+      onClick: handleExportNet,
+    },
+  ];
+
+  if (!actualMode.available) {
+    return <span className={emptyStyle}>Actual mode is not available.</span>;
+  }
+
+  return (
+    <div className={rootStyle}>
+      <div className={toolbarStyle}>
+        <div className={statusStyle}>
+          <span>
+            Status: <span className={countStyle}>{actualMode.status}</span>
+          </span>
+          <span>
+            Events:{" "}
+            <span className={countStyle}>{transitionFirings.length}</span>
+          </span>
+        </div>
+        <Menu
+          trigger={
+            <Button
+              variant="subtle"
+              tone="neutral"
+              size="xs"
+              disabled={!canExport}
+              suffix={
+                <Icon
+                  name="chevronDown"
+                  size="xs"
+                  className={exportChevronStyle}
+                />
+              }
+            >
+              Export
+            </Button>
+          }
+          items={exportMenuItems}
+          position="bottom"
+        />
+      </div>
+
+      {visibleFirings.length === 0 ? (
+        <span className={emptyStyle}>No transition events received yet.</span>
+      ) : (
+        <div className={tableWrapperStyle}>
+          <table className={tableStyle}>
+            <thead>
+              <tr className={headerRowStyle}>
+                <th
+                  className={cx(
+                    cellStyle,
+                    singleLineCellStyle,
+                    eventColumnStyle,
+                  )}
+                >
+                  Event
+                </th>
+                <th
+                  className={cx(
+                    cellStyle,
+                    singleLineCellStyle,
+                    timestampColumnStyle,
+                  )}
+                >
+                  Time
+                </th>
+                <th
+                  className={cx(
+                    cellStyle,
+                    singleLineCellStyle,
+                    transitionColumnStyle,
+                  )}
+                >
+                  Transition
+                </th>
+                <th
+                  className={cx(
+                    cellStyle,
+                    singleLineCellStyle,
+                    effectColumnStyle,
+                  )}
+                >
+                  Input
+                </th>
+                <th className={cx(cellStyle, singleLineCellStyle)}>Output</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleFirings.map((firing, index) => (
+                <EventRow
+                  key={`${firstVisibleIndex + index}:${firing.ts}:${
+                    firing.transitionId
+                  }`}
+                  firing={firing}
+                  index={firstVisibleIndex + index}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {transitionFirings.length > MAX_VISIBLE_EVENTS && (
+        <span className={footerNoteStyle}>
+          Showing the latest {MAX_VISIBLE_EVENTS} events. Export includes the
+          full stream.
+        </span>
+      )}
+    </div>
+  );
+};
+
+export const actualEventsSubView: SubView = {
+  id: "actual-events",
+  title: "Events",
+  tooltip:
+    "Inspect the Actual mode transition stream and export stream or net JSON.",
+  component: ActualEventsContent,
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
deleted file mode 100644
index a727161c3de..00000000000
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
+++ /dev/null
@@ -1,1471 +0,0 @@
-import {
-  use,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from "react";
-import uPlot from "uplot";
-
-import { Button } from "@hashintel/ds-components";
-import { css } from "@hashintel/ds-helpers/css";
-import "uplot/dist/uPlot.min.css";
-
-import {
-  compileMetric,
-  buildMetricState,
-  type CompiledMetric,
-} from "@hashintel/petrinaut-core";
-
-import { createValueStore } from "../../../../../../react/create-value-store";
-import { useElementSize } from "../../../../../../react/hooks/use-element-size";
-import { useLatest } from "../../../../../../react/hooks/use-latest";
-import { useStableCallback } from "../../../../../../react/hooks/use-stable-callback";
-import { PlaybackContext } from "../../../../../../react/playback/context";
-import {
-  SimulationContext,
-  type SimulationFrameReader,
-} from "../../../../../../react/simulation/context";
-import {
-  EditorContext,
-  type TimelineChartType,
-  type TimelineView,
-} from "../../../../../../react/state/editor-context";
-import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
-import { SegmentGroup } from "../../../../../components/segment-group";
-import { Select } from "../../../../../components/select";
-import { CreateMetricDrawer } from "../../SimulateView/metrics/create-metric-drawer";
-import { ViewMetricDrawer } from "../../SimulateView/metrics/view-metric-drawer";
-
-import type { SubView } from "../../../../../components/sub-view/types";
-
-// -- Styles -------------------------------------------------------------------
-
-const containerStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  height: "[100%]",
-  paddingTop: "[4px]",
-});
-
-const chartAreaStyle = css({
-  position: "relative",
-  flex: "[1]",
-  minHeight: "[0]",
-});
-
-const legendContainerStyle = css({
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "[12px]",
-  fontSize: "[11px]",
-  color: "[#666]",
-  paddingY: "3",
-  paddingX: "3",
-});
-
-const legendItemStyle = css({
-  display: "flex",
-  alignItems: "center",
-  gap: "[4px]",
-  cursor: "pointer",
-  userSelect: "none",
-  transition: "[opacity 0.15s ease]",
-  _hover: {
-    opacity: 1,
-  },
-});
-
-const legendColorStyle = css({
-  width: "[10px]",
-  height: "[10px]",
-  borderRadius: "[2px]",
-});
-
-const tooltipStyle = css({
-  position: "absolute",
-  pointerEvents: "none",
-  backgroundColor: "[rgba(0, 0, 0, 0.85)]",
-  color: "neutral.s00",
-  padding: "[6px 10px]",
-  borderRadius: "md",
-  fontSize: "[11px]",
-  lineHeight: "[1.4]",
-  zIndex: "[1000]",
-  whiteSpace: "nowrap",
-  boxShadow: "[0 2px 8px rgba(0, 0, 0, 0.25)]",
-  display: "none",
-});
-
-const tooltipLabelStyle = css({
-  display: "flex",
-  alignItems: "center",
-  gap: "[6px]",
-});
-
-const tooltipDotStyle = css({
-  width: "[8px]",
-  height: "[8px]",
-  borderRadius: "[50%]",
-  flexShrink: "[0]",
-});
-
-const tooltipValueStyle = css({
-  fontWeight: "semibold",
-  marginLeft: "[4px]",
-});
-
-// -- Constants ----------------------------------------------------------------
-
-const DEFAULT_COLORS = [
-  "#3b82f6", // blue
-  "#ef4444", // red
-  "#22c55e", // green
-  "#f59e0b", // amber
-  "#8b5cf6", // violet
-  "#06b6d4", // cyan
-  "#ec4899", // pink
-  "#84cc16", // lime
-];
-
-const CHART_TYPE_OPTIONS = [
-  { value: "run", label: "Run" },
-  { value: "stacked", label: "Stacked" },
-];
-
-// -- Types --------------------------------------------------------------------
-
-/** Metadata for each place (stable across streaming updates). */
-interface PlaceMeta {
-  placeId: string;
-  placeName: string;
-  color: string;
-}
-
-// -- Header action ------------------------------------------------------------
-
-const headerActionsStyle = css({
-  display: "flex",
-  alignItems: "center",
-  gap: "[8px]",
-});
-
-const metricPickerLabelStyle = css({
-  fontSize: "[10px]",
-  fontWeight: "semibold",
-  textTransform: "uppercase",
-  color: "neutral.a100",
-  letterSpacing: "[0.5px]",
-  flexShrink: 0,
-});
-
-const metricPickerWrapperStyle = css({
-  width: "[200px]",
-});
-
-// Sentinel values for the native views in the picker. Metric ids are UUIDs
-// (or `metric__*` in examples) so these cannot collide.
-const PER_PLACE_VALUE = "__per_place__";
-const PER_TYPE_VALUE = "__per_type__";
-const PER_TRANSITION_VALUE = "__per_transition__";
-
-function viewToSelectValue(view: TimelineView): string {
-  switch (view.kind) {
-    case "per-place":
-      return PER_PLACE_VALUE;
-    case "per-type":
-      return PER_TYPE_VALUE;
-    case "per-transition":
-      return PER_TRANSITION_VALUE;
-    case "metric":
-      return view.metricId;
-  }
-}
-
-function selectValueToView(value: string): TimelineView {
-  if (value === PER_PLACE_VALUE) {
-    return { kind: "per-place" };
-  }
-  if (value === PER_TYPE_VALUE) {
-    return { kind: "per-type" };
-  }
-  if (value === PER_TRANSITION_VALUE) {
-    return { kind: "per-transition" };
-  }
-  return { kind: "metric", metricId: value };
-}
-
-const TimelineChartTypeSelector: React.FC = () => {
-  const { timelineChartType: chartType, setTimelineChartType: setChartType } =
-    use(EditorContext);
-
-  return (
-    <SegmentGroup
-      value={chartType}
-      options={CHART_TYPE_OPTIONS}
-      onChange={(value) => setChartType(value as TimelineChartType)}
-      size="sm"
-    />
-  );
-};
-
-const TimelineViewPicker: React.FC = () => {
-  const { timelineView, setTimelineView, setGlobalMode, setSimulateViewMode } =
-    use(EditorContext);
-  const {
-    extensions,
-    petriNetDefinition: { metrics = [] },
-  } = use(SDCPNContext);
-  const colorsEnabled = extensions.colors;
-
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [isViewOpen, setIsViewOpen] = useState(false);
-
-  useEffect(() => {
-    if (!colorsEnabled && timelineView.kind === "per-type") {
-      setTimelineView({ kind: "per-place" });
-    }
-  }, [colorsEnabled, setTimelineView, timelineView.kind]);
-
-  const selectedMetric =
-    timelineView.kind === "metric"
-      ? metrics.find((m) => m.id === timelineView.metricId)
-      : undefined;
-
-  const options = [
-    { value: PER_PLACE_VALUE, label: "Tokens per place" },
-    ...(colorsEnabled
-      ? [{ value: PER_TYPE_VALUE, label: "Tokens per type" }]
-      : []),
-    { value: PER_TRANSITION_VALUE, label: "Transition firings" },
-    ...metrics.map((m) => ({ value: m.id, label: m.name })),
-  ];
-  const selectedValue =
-    colorsEnabled || timelineView.kind !== "per-type"
-      ? viewToSelectValue(timelineView)
-      : PER_PLACE_VALUE;
-
-  return (
-    <>
-      <span className={metricPickerLabelStyle}>Metric</span>
-      <div className={metricPickerWrapperStyle}>
-        <Select
-          size="xs"
-          value={selectedValue}
-          options={options}
-          onValueChange={(value) => setTimelineView(selectValueToView(value))}
-        />
-      </div>
-      <div style={{ display: "flex" }}>
-        {selectedMetric && (
-          <Button
-            size="xs"
-            variant="ghost"
-            aria-label="Edit metric"
-            tooltip="Edit Metric"
-            iconName="pencil"
-            onClick={() => setIsViewOpen(true)}
-          />
-        )}
-        <Button
-          size="xs"
-          variant="ghost"
-          aria-label="Create metric"
-          tooltip="Create Metric"
-          iconName="plus"
-          onClick={() => setIsCreateOpen(true)}
-        />
-        <Button
-          size="xs"
-          variant="ghost"
-          aria-label="Manage metrics"
-          tooltip="Manage Metrics"
-          iconName="list"
-          onClick={() => {
-            setSimulateViewMode("metrics");
-            setGlobalMode("simulate");
-          }}
-        />
-      </div>
-      <CreateMetricDrawer
-        open={isCreateOpen}
-        onClose={() => setIsCreateOpen(false)}
-      />
-      <ViewMetricDrawer
-        // Gate on the metric existing — the picker can swap to a non-metric
-        // view while the drawer is open, and we don't want an empty overlay.
-        open={isViewOpen && !!selectedMetric}
-        onClose={() => setIsViewOpen(false)}
-        metric={selectedMetric}
-      />
-    </>
-  );
-};
-
-const TimelineHeaderActions: React.FC = () => (
-  <div className={headerActionsStyle}>
-    <TimelineViewPicker />
-    <TimelineChartTypeSelector />
-  </div>
-);
-
-// -- Streaming data hook (uPlot-native columnar format) -----------------------
-
-/**
- * Streaming data store that builds uPlot columnar arrays directly.
- * New frames are pushed in O(k) where k = new frames, no full-array copies.
- */
-interface StreamingStore {
-  /** Place metadata (stable) */
-  places: PlaceMeta[];
-  /** Columnar arrays: [times, ...placeValues] — mutated in place */
-  columns: number[][];
-  /** Current frame count in the columns */
-  length: number;
-  /** Revision counter — incremented on every append to trigger React updates */
-  revision: number;
-}
-
-function createEmptyStore(places: PlaceMeta[]): StreamingStore {
-  return {
-    places,
-    columns: [[], ...places.map(() => [])],
-    length: 0,
-    revision: 0,
-  };
-}
-
-/**
- * A single extractor returns the value for series `seriesIdx` at the given
- * frame. Returning NaN leaves a gap on the chart.
- */
-type SeriesExtractor = (
-  frame: SimulationFrameReader,
-  seriesIdx: number,
-) => number;
-
-const UNTYPED_COLOR = "#94a3b8"; // slate-400
-
-/**
- * Hook that streams simulation frames directly into uPlot columnar arrays.
- * Returns a store ref (mutated in place) and a revision counter for React.
- *
- * Handles three view modes driven by `timelineView`:
- *  - `per-place`: one series per place, values are token counts.
- *  - `per-type`: one series per color type (plus "Untyped" for uncolored
- *    places), values are the sum of token counts across places of that type.
- *  - `metric`: a single series computed by the compiled user metric.
- */
-function useStreamingData(): {
-  store: StreamingStore;
-  metricError: string | null;
-} {
-  "use no memo"; // imperative streaming with refs
-
-  const { getFramesInRange, totalFrames } = use(SimulationContext);
-  const {
-    extensions,
-    petriNetDefinition: { places, types, transitions, metrics = [] },
-  } = use(SDCPNContext);
-  const colorsEnabled = extensions.colors;
-  const { timelineView } = use(EditorContext);
-
-  const selectedMetric = useMemo(
-    () =>
-      timelineView.kind === "metric"
-        ? (metrics.find((m) => m.id === timelineView.metricId) ?? null)
-        : null,
-    [timelineView, metrics],
-  );
-
-  // Compile the selected metric. Recompiles only when its code changes.
-  const compiledMetric = useMemo<{
-    fn: CompiledMetric | null;
-    error: string | null;
-  }>(() => {
-    if (!selectedMetric) {
-      return { fn: null, error: null };
-    }
-    const outcome = compileMetric(selectedMetric);
-    if (outcome.ok) {
-      return { fn: outcome.fn, error: null };
-    }
-    return { fn: null, error: outcome.error };
-  }, [selectedMetric]);
-
-  // Build the series descriptors + a single extractor for the active view.
-  // The store only depends on `seriesConfig`; changing view switches series.
-  const seriesConfig: {
-    series: PlaceMeta[];
-    extract: SeriesExtractor;
-  } = useMemo(() => {
-    const availableTypes = colorsEnabled ? types : [];
-
-    if (timelineView.kind === "metric") {
-      const metric = selectedMetric;
-      const fn = compiledMetric.fn;
-      if (metric && fn) {
-        const series: PlaceMeta[] = [
-          {
-            placeId: metric.id,
-            placeName: metric.name,
-            color: DEFAULT_COLORS[0]!,
-          },
-        ];
-        const extract: SeriesExtractor = (frame) => {
-          try {
-            return fn(buildMetricState(frame, places, availableTypes));
-          } catch {
-            // Runtime error (e.g. NaN) — render as a gap.
-            return Number.NaN;
-          }
-        };
-        return { series, extract };
-      }
-      // Fall through: metric missing or failed to compile. Render nothing
-      // for now (the component gates on `metricError` to render an error
-      // banner instead of the chart).
-      return {
-        series: [],
-        extract: () => Number.NaN,
-      };
-    }
-
-    if (timelineView.kind === "per-transition") {
-      // One series per transition; value at time t is the delta of an
-      // **interpolated** cumulative firing count over the trailing window.
-      //
-      // The raw `firingCount` is an integer step function, which makes the
-      // windowed delta visually spiky. To smooth it, we use the transition's
-      // `timeSinceLastFiringMs` and the most recent inter-firing interval
-      // to linearly ramp the cumulative from k to k+1 while the transition
-      // is between its k-th and expected (k+1)-th firing:
-      //
-      //   smoothed(t) = firingCount + min(1, tsl / lastInterval)
-      //
-      // Before a second firing occurs there's no interval estimate yet, so
-      // we fall back to the integer cumulative until one is known. The
-      // windowed delta is then computed from these floating-point values.
-      const PER_TRANSITION_WINDOW_SEC = 4;
-      // Exponential low-pass on the output. 0 < α ≤ 1; smaller = smoother
-      // (more lag). α ≈ 0.15 gives a ~6–7 frame effective window.
-      const OUTPUT_EWMA_ALPHA = 0.15;
-
-      const series: PlaceMeta[] = transitions.map((transition, index) => ({
-        placeId: `transition__${transition.id}`,
-        placeName: transition.name,
-        color: DEFAULT_COLORS[index % DEFAULT_COLORS.length]!,
-      }));
-      const transitionIds = transitions.map((t) => t.id);
-
-      // Per-series state. Recreated when seriesConfig is recreated
-      // (view/transitions change). Simulation restart (time regression) is
-      // detected below and clears the buffers in-place.
-      const timeHistory: number[] = [];
-      const cumulativeHistories: number[][] = transitions.map(() => []);
-      const lastFiringTimes: (number | null)[] = transitions.map(() => null);
-      const lastIntervals: (number | null)[] = transitions.map(() => null);
-      const prevFiringCounts: number[] = transitions.map(() => 0);
-      const smoothedOutputs: number[] = transitions.map(() => 0);
-
-      const resetState = () => {
-        timeHistory.length = 0;
-        for (const history of cumulativeHistories) {
-          history.length = 0;
-        }
-        for (let i = 0; i < transitions.length; i++) {
-          lastFiringTimes[i] = null;
-          lastIntervals[i] = null;
-          prevFiringCounts[i] = 0;
-          smoothedOutputs[i] = 0;
-        }
-      };
-
-      const extract: SeriesExtractor = (frame, seriesIdx) => {
-        const id = transitionIds[seriesIdx];
-        if (!id) {
-          return 0;
-        }
-
-        // On the first series of each frame, grow (or reset) the shared
-        // time history. A time regression means the simulation restarted.
-        if (seriesIdx === 0) {
-          const last = timeHistory[timeHistory.length - 1];
-          if (last !== undefined && frame.time < last) {
-            resetState();
-          }
-          timeHistory.push(frame.time);
-        }
-
-        const transitionState = frame.getTransitionState(id);
-        const firingCount = transitionState?.firingCount ?? 0;
-        const tslSec = (transitionState?.timeSinceLastFiringMs ?? 0) / 1000;
-
-        // If the firing count increased since the last frame we observed,
-        // a firing just occurred — update the last-firing time and, when
-        // we already had one, the observed inter-firing interval.
-        if (firingCount > prevFiringCounts[seriesIdx]!) {
-          const prevFiringTime = lastFiringTimes[seriesIdx] ?? null;
-          if (prevFiringTime !== null) {
-            const interval = frame.time - prevFiringTime;
-            if (interval > 0) {
-              lastIntervals[seriesIdx] = interval;
-            }
-          }
-          lastFiringTimes[seriesIdx] = frame.time;
-        }
-        prevFiringCounts[seriesIdx] = firingCount;
-
-        // Interpolated cumulative: ramp linearly over the last known
-        // interval; cap at +1 so we never overshoot the next firing.
-        const interval = lastIntervals[seriesIdx] ?? null;
-        const interpolated =
-          interval !== null && interval > 0
-            ? firingCount + Math.min(1, tslSec / interval)
-            : firingCount;
-
-        cumulativeHistories[seriesIdx]!.push(interpolated);
-
-        // Find the cumulative value at the first stored time ≤ t − window.
-        // If no such entry exists, treat the baseline as 0 (pre-simulation).
-        const targetTime = frame.time - PER_TRANSITION_WINDOW_SEC;
-        const history = cumulativeHistories[seriesIdx]!;
-        let prev = 0;
-        // Skip the current-frame entry (just pushed) by starting at length-2.
-        for (let i = timeHistory.length - 2; i >= 0; i--) {
-          if (timeHistory[i]! <= targetTime) {
-            prev = history[i]!;
-            break;
-          }
-        }
-        const rawDelta = interpolated - prev;
-
-        // Exponential low-pass on the output to tame the residual
-        // stochastic noise in firing intervals. Single MAC per frame.
-        const smoothed =
-          OUTPUT_EWMA_ALPHA * rawDelta +
-          (1 - OUTPUT_EWMA_ALPHA) * smoothedOutputs[seriesIdx]!;
-        smoothedOutputs[seriesIdx] = smoothed;
-        return smoothed;
-      };
-      return { series, extract };
-    }
-
-    if (timelineView.kind === "per-type") {
-      // Group places by color type; places with no colorId become "Untyped".
-      const groups: { series: PlaceMeta; placeIds: string[] }[] = [];
-      for (const type of availableTypes) {
-        const placeIds = places
-          .filter((p) => p.colorId === type.id)
-          .map((p) => p.id);
-        if (placeIds.length === 0) {
-          continue;
-        }
-        groups.push({
-          series: {
-            placeId: `type__${type.id}`,
-            placeName: type.name,
-            color: type.displayColor || DEFAULT_COLORS[0]!,
-          },
-          placeIds,
-        });
-      }
-      const untypedIds = places
-        .filter((p) => !colorsEnabled || p.colorId === null)
-        .map((p) => p.id);
-      if (untypedIds.length > 0) {
-        groups.push({
-          series: {
-            placeId: "type__untyped",
-            placeName: "Untyped",
-            color: UNTYPED_COLOR,
-          },
-          placeIds: untypedIds,
-        });
-      }
-      const groupPlaceIds = groups.map((g) => g.placeIds);
-      const extract: SeriesExtractor = (frame, seriesIdx) => {
-        const ids = groupPlaceIds[seriesIdx];
-        if (!ids) {
-          return 0;
-        }
-        let sum = 0;
-        for (const id of ids) {
-          sum += frame.getPlaceTokenCount(id);
-        }
-        return sum;
-      };
-      return { series: groups.map((g) => g.series), extract };
-    }
-
-    // per-place: one series per place
-    const series = places.map((place, index) => {
-      const tokenType = colorsEnabled
-        ? types.find((type) => type.id === place.colorId)
-        : undefined;
-      return {
-        placeId: place.id,
-        placeName: place.name,
-        color:
-          tokenType?.displayColor ??
-          DEFAULT_COLORS[index % DEFAULT_COLORS.length]!,
-      };
-    });
-    const placeIds = places.map((p) => p.id);
-    const extract: SeriesExtractor = (frame, seriesIdx) => {
-      const id = placeIds[seriesIdx];
-      return id ? frame.getPlaceTokenCount(id) : 0;
-    };
-    return { series, extract };
-  }, [
-    timelineView,
-    places,
-    types,
-    colorsEnabled,
-    transitions,
-    selectedMetric,
-    compiledMetric.fn,
-  ]);
-
-  const [streamingStore] = useState(() =>
-    createValueStore<StreamingStore>(createEmptyStore(seriesConfig.series)),
-  );
-  const store = useSyncExternalStore(
-    (listener) => streamingStore.subscribe(listener),
-    () => streamingStore.getSnapshot(),
-    () => streamingStore.getSnapshot(),
-  );
-  const processedRef = useRef(0);
-  const [, setRevision] = useState(0);
-
-  // Reset store when the series structure changes (view switch or net edits).
-  useEffect(() => {
-    const nextStore = createEmptyStore(seriesConfig.series);
-    streamingStore.set(nextStore);
-    processedRef.current = 0;
-  }, [seriesConfig.series, streamingStore]);
-
-  // Stream new frames into the store
-  useEffect(() => {
-    let cancelled = false;
-
-    const fetchData = async () => {
-      const initialStore = streamingStore.getSnapshot();
-
-      if (totalFrames === 0) {
-        if (initialStore.length > 0) {
-          const nextStore = createEmptyStore(initialStore.places);
-          streamingStore.set(nextStore);
-          processedRef.current = 0;
-          setRevision((r) => r + 1);
-        }
-        return;
-      }
-
-      // Handle simulation restart
-      if (totalFrames < processedRef.current) {
-        const nextStore = createEmptyStore(initialStore.places);
-        streamingStore.set(nextStore);
-        processedRef.current = 0;
-        setRevision((r) => r + 1);
-      }
-
-      const startIndex = processedRef.current;
-      if (startIndex >= totalFrames) {
-        return;
-      }
-
-      const newFrames = await getFramesInRange(startIndex);
-      if (cancelled || newFrames.length === 0) {
-        return;
-      }
-
-      // Push new data directly into existing arrays — O(k) where k = new frames
-      const activeStore = streamingStore.getSnapshot();
-      const cols = activeStore.columns;
-      const timeCol = cols[0]!;
-      const seriesCount = activeStore.places.length;
-      const { extract } = seriesConfig;
-
-      for (const frame of newFrames) {
-        timeCol.push(frame.time);
-        for (let s = 0; s < seriesCount; s++) {
-          cols[s + 1]!.push(extract(frame, s));
-        }
-      }
-
-      activeStore.length = timeCol.length;
-      activeStore.revision++;
-      processedRef.current = totalFrames;
-
-      // Single state update to trigger React re-render
-      setRevision((r) => r + 1);
-    };
-
-    void fetchData();
-    return () => {
-      cancelled = true;
-    };
-  }, [getFramesInRange, totalFrames, seriesConfig, streamingStore]);
-
-  return {
-    store,
-    metricError: compiledMetric.error,
-  };
-}
-
-// -- uPlot data builders (from store, no copies for run chart) ----------------
-
-function buildRunData(
-  store: StreamingStore,
-  hiddenPlaces: Set<string>,
-  length = store.length,
-): uPlot.AlignedData {
-  const result: (number | null | undefined)[][] = [store.columns[0]!];
-  for (let i = 0; i < store.places.length; i++) {
-    if (hiddenPlaces.has(store.places[i]!.placeId)) {
-      // Hidden series: array of nulls (uPlot skips nulls)
-      result.push(new Array(length).fill(null));
-    } else {
-      // Visible series: direct reference to the column array (no copy!)
-      result.push(store.columns[i + 1]!);
-    }
-  }
-  return result as uPlot.AlignedData;
-}
-
-function buildStackedData(
-  store: StreamingStore,
-  hiddenPlaces: Set<string>,
-  length = store.length,
-): uPlot.AlignedData {
-  const visible = store.places
-    .map((p, i) => ({ ...p, colIdx: i + 1 }))
-    .filter((p) => !hiddenPlaces.has(p.placeId));
-
-  const cumulative = new Float64Array(length);
-  const series: number[][] = [];
-
-  for (const p of visible) {
-    const col = store.columns[p.colIdx]!;
-    const stacked = new Array<number>(length);
-    for (let i = 0; i < length; i++) {
-      cumulative[i]! += col[i] ?? 0;
-      stacked[i] = cumulative[i]!;
-    }
-    series.push(stacked);
-  }
-
-  // Reverse so top band is first
-  series.reverse();
-
-  return [store.columns[0]!, ...series] as uPlot.AlignedData;
-}
-
-// -- Tooltip DOM (mutated imperatively in cursor hook — no React renders) -----
-
-interface TooltipNodes {
-  root: HTMLDivElement;
-  dot: HTMLDivElement;
-  name: HTMLSpanElement;
-  value: HTMLSpanElement;
-  time: HTMLDivElement;
-  frame: HTMLDivElement;
-}
-
-function createTooltip(): TooltipNodes {
-  const root = document.createElement("div");
-  root.className = tooltipStyle;
-
-  const label = document.createElement("div");
-  label.className = tooltipLabelStyle;
-
-  const dot = document.createElement("div");
-  dot.className = tooltipDotStyle;
-
-  const name = document.createElement("span");
-
-  const value = document.createElement("span");
-  value.className = tooltipValueStyle;
-
-  label.append(dot, name, value);
-
-  const time = document.createElement("div");
-  time.style.cssText = "font-size:10px;opacity:0.8;margin-top:2px";
-
-  const frame = document.createElement("div");
-  frame.style.cssText = "font-size:9px;opacity:0.6;margin-top:2px";
-
-  root.append(label, time, frame);
-
-  return { root, dot, name, value, time, frame };
-}
-
-/**
- * Find which stacked band (place) contains the given y value at frame `idx`.
- * Walks visible places in stacking order, accumulating values until we exceed
- * the cursor's y. O(visible places) per call — trivial cost.
- */
-function hitTestStackedBand(
-  store: StreamingStore,
-  hiddenPlaces: Set<string>,
-  idx: number,
-  yVal: number,
-): { placeIdx: number; value: number } | null {
-  if (yVal < 0) {
-    return null;
-  }
-  let cumul = 0;
-  for (let i = 0; i < store.places.length; i++) {
-    if (hiddenPlaces.has(store.places[i]!.placeId)) {
-      continue;
-    }
-    const v = store.columns[i + 1]![idx] ?? 0;
-    cumul += v;
-    if (yVal <= cumul) {
-      return { placeIdx: i, value: v };
-    }
-  }
-  return null;
-}
-
-// -- Hover target resolution (shared by tooltip) -----------------------------
-
-interface HoverHit {
-  place: PlaceMeta;
-  value: number;
-  idx: number;
-  time: number;
-}
-
-/**
- * Resolve the place + value under the cursor. Returns null when there's
- * nothing to show (cursor outside data, no focused series, hidden place).
- */
-function resolveHoverTarget(
-  u: uPlot,
-  store: StreamingStore,
-  chartType: TimelineChartType,
-  hiddenPlaces: Set<string>,
-  focusedSeriesIdx: number,
-): HoverHit | null {
-  const idx = u.cursor.idx;
-  if (idx == null || idx < 0 || store.length === 0) {
-    return null;
-  }
-
-  let placeIdx: number;
-  let value: number;
-
-  if (chartType === "stacked") {
-    const top = u.cursor.top;
-    if (top == null || top < 0) {
-      return null;
-    }
-    const hit = hitTestStackedBand(
-      store,
-      hiddenPlaces,
-      idx,
-      u.posToVal(top, "y"),
-    );
-    if (!hit) {
-      return null;
-    }
-    placeIdx = hit.placeIdx;
-    value = hit.value;
-  } else {
-    if (focusedSeriesIdx < 1) {
-      return null;
-    }
-    placeIdx = focusedSeriesIdx - 1;
-    if (hiddenPlaces.has(store.places[placeIdx]?.placeId ?? "")) {
-      return null;
-    }
-    value = store.columns[focusedSeriesIdx]?.[idx] ?? 0;
-  }
-
-  const place = store.places[placeIdx];
-  if (!place) {
-    return null;
-  }
-
-  return { place, value, idx, time: store.columns[0]![idx] ?? 0 };
-}
-
-// -- Tooltip positioning (edge-clamped inside u.over) -------------------------
-
-function positionTooltip(tooltip: TooltipNodes, u: uPlot, hit: HoverHit): void {
-  // Local alias to satisfy no-param-reassign rule on DOM mutations.
-  const t = tooltip;
-  t.dot.style.background = hit.place.color;
-  t.name.textContent = hit.place.placeName;
-  t.value.textContent = String(hit.value);
-  t.time.textContent = `${hit.time.toFixed(3)}s`;
-  t.frame.textContent = `Frame ${hit.idx}`;
-
-  // Measure after content update
-  t.root.style.display = "block";
-  const cx = u.cursor.left ?? 0;
-  const cy = u.cursor.top ?? 0;
-  const ow = u.over.clientWidth;
-  const oh = u.over.clientHeight;
-  const tw = t.root.offsetWidth;
-  const th = t.root.offsetHeight;
-  const margin = 10;
-
-  let left = cx - tw / 2;
-  if (left < 0) {
-    left = 0;
-  } else if (left + tw > ow) {
-    left = ow - tw;
-  }
-
-  let top = cy - th - margin;
-  if (top < 0) {
-    top = Math.min(cy + margin, oh - th);
-  }
-
-  t.root.style.left = `${left}px`;
-  t.root.style.top = `${top}px`;
-}
-
-// -- Playhead drawing (Logic Pro-style pin) -----------------------------------
-
-/** Draw the playhead pin in the ruler and a vertical guide line into the chart. */
-function drawPlayhead(u: uPlot, frameIdx: number): void {
-  const times = u.data[0]!;
-  if (times.length === 0) {
-    return;
-  }
-
-  const dpr = devicePixelRatio;
-  const time = times[Math.min(frameIdx, times.length - 1)]!;
-  const cx = u.valToPos(time, "x", true);
-  const plotTop = u.bbox.top;
-  const plotHeight = u.bbox.height;
-  const ctx = u.ctx;
-
-  // Pin dimensions (all in physical pixels for HiDPI correctness)
-  const headW = 12 * dpr;
-  const rectH = 6 * dpr;
-  const tipH = 6 * dpr;
-  const radius = 3 * dpr;
-  const tipY = plotTop;
-  const baseY = tipY - tipH;
-  const topY = baseY - rectH;
-  const leftX = cx - headW / 2;
-  const rightX = cx + headW / 2;
-
-  ctx.save();
-
-  // Pin head: rounded-top rectangle tapering to a triangular tip
-  ctx.fillStyle = "#1e293b";
-  ctx.beginPath();
-  ctx.moveTo(leftX, topY + radius);
-  ctx.arcTo(leftX, topY, leftX + radius, topY, radius);
-  ctx.lineTo(rightX - radius, topY);
-  ctx.arcTo(rightX, topY, rightX, topY + radius, radius);
-  ctx.lineTo(rightX, baseY);
-  ctx.lineTo(cx, tipY);
-  ctx.lineTo(leftX, baseY);
-  ctx.closePath();
-  ctx.fill();
-  ctx.strokeStyle = "#fff";
-  ctx.lineWidth = 1 * dpr;
-  ctx.stroke();
-
-  // Vertical guide line
-  ctx.strokeStyle = "#1e293b";
-  ctx.lineWidth = 1.5 * dpr;
-  ctx.beginPath();
-  ctx.moveTo(cx, tipY - 4 * dpr);
-  ctx.lineTo(cx, tipY + plotHeight);
-  ctx.stroke();
-
-  ctx.restore();
-}
-
-// -- uPlot options builder ----------------------------------------------------
-
-interface ChartOptions {
-  /** Store value for structural config (series, bands). */
-  store: StreamingStore;
-  /** Ref to the latest store — tooltip hooks read this so they always
-   *  see fresh data even if the store is replaced after a restart. */
-  storeRef: React.RefObject<StreamingStore>;
-  chartType: TimelineChartType;
-  hiddenPlaces: Set<string>;
-  size: { width: number; height: number };
-  onScrub: (frameIndex: number) => void;
-  getPlayheadFrame: () => number;
-  tooltip: TooltipNodes;
-}
-
-function buildUPlotOptions(opts: ChartOptions): uPlot.Options {
-  const {
-    store,
-    storeRef,
-    chartType,
-    hiddenPlaces,
-    size,
-    onScrub,
-    getPlayheadFrame,
-    tooltip: t,
-  } = opts;
-
-  // Mutable focus index — updated by setSeries hook, read by tooltip
-  let focused = -1;
-
-  const updateTooltip = (u: uPlot) => {
-    // Read from ref so tooltip always sees the latest store, even after
-    // simulation restart where the store object is replaced.
-    const currentStore = storeRef.current;
-    const hit = resolveHoverTarget(
-      u,
-      currentStore,
-      chartType,
-      hiddenPlaces,
-      focused,
-    );
-    if (!hit) {
-      t.root.style.display = "none";
-      return;
-    }
-    positionTooltip(t, u, hit);
-  };
-
-  // Build series + bands config
-  const series: uPlot.Series[] = [{ label: "Time" }];
-  let bands: uPlot.Band[] | undefined;
-
-  if (chartType === "stacked") {
-    const visible = store.places
-      .filter((p) => !hiddenPlaces.has(p.placeId))
-      .reverse();
-    for (const p of visible) {
-      series.push({
-        label: p.placeName,
-        stroke: p.color,
-        fill: `color-mix(in srgb, ${p.color} 53%, transparent)`,
-        width: 2,
-      });
-    }
-    // Bands clip each series' fill to the region between it and the series
-    // below, preventing overlapping semi-transparent layers from compositing
-    // into progressively darker/muddier colors.
-    if (visible.length > 1) {
-      bands = [];
-      for (let i = 1; i < visible.length; i++) {
-        bands.push({ series: [i, i + 1] as [number, number] });
-      }
-    }
-  } else {
-    for (const p of store.places) {
-      series.push({
-        label: p.placeName,
-        stroke: p.color,
-        width: 2,
-        show: !hiddenPlaces.has(p.placeId),
-      });
-    }
-  }
-
-  return {
-    width: size.width,
-    height: size.height,
-    series,
-    bands,
-    pxAlign: false,
-    padding: [0, 8, 4, null],
-    cursor: {
-      lock: false,
-      drag: { x: false, y: false, setScale: false },
-      focus: { prox: 16 },
-      bind: {
-        mousedown: (u, _targ, handler) => (e: MouseEvent) => {
-          handler(e);
-          if (u.cursor.left != null && u.cursor.left >= 0) {
-            onScrub(u.posToIdx(u.cursor.left));
-          }
-          return null;
-        },
-        mousemove: (u, _targ, handler) => (e: MouseEvent) => {
-          handler(e);
-          if (e.buttons === 1 && u.cursor.left != null && u.cursor.left >= 0) {
-            onScrub(u.posToIdx(u.cursor.left));
-          }
-          return null;
-        },
-      },
-    },
-    legend: { show: false },
-    focus: { alpha: chartType === "stacked" ? 1 : 0.3 },
-    axes: [
-      {
-        show: true,
-        side: 0,
-        size: 26,
-        font: "10px system-ui",
-        stroke: "#475569",
-        grid: { stroke: "#f3f4f6", width: 1 },
-        ticks: { stroke: "#cbd5e1", width: 1, size: 6 },
-        values: (_u, vals) => vals.map((v) => `${v}s`),
-      },
-      {
-        show: true,
-        size: 54,
-        font: "10px system-ui",
-        stroke: "#999",
-        grid: { stroke: "#f3f4f6", width: 1, dash: [4, 4] },
-        ticks: { stroke: "#e5e7eb", width: 1 },
-      },
-    ],
-    scales: {
-      x: { time: false, range: (_u, min, max) => [min, max] },
-      y: {
-        auto: true,
-        range: (_u, min, max) => [Math.min(0, min), Math.max(1, max * 1.05)],
-      },
-    },
-    hooks: {
-      drawClear: [
-        (u) => {
-          const { ctx } = u;
-          const { left: bx, width: bw, top: by } = u.bbox;
-          const dpr = devicePixelRatio;
-          ctx.save();
-          ctx.strokeStyle = "#cbd5e1";
-          ctx.lineWidth = dpr;
-          ctx.beginPath();
-          ctx.moveTo(bx, by - 0.5 * dpr);
-          ctx.lineTo(bx + bw, by - 0.5 * dpr);
-          ctx.stroke();
-          ctx.restore();
-        },
-      ],
-      setSeries: [
-        (u, sIdx) => {
-          focused = sIdx ?? -1;
-          updateTooltip(u);
-        },
-      ],
-      setCursor: [(u) => updateTooltip(u)],
-      draw: [(u) => drawPlayhead(u, getPlayheadFrame())],
-    },
-  };
-}
-
-// -- Ruler scrubbing (extracted from chart effect) ----------------------------
-
-/**
- * Attaches pointer listeners on `u.root` to allow click/drag scrubbing on the
- * top axis (ruler) area. Returns a cleanup function.
- */
-function attachRulerScrubbing(
-  u: uPlot,
-  onScrub: (frameIndex: number) => void,
-): () => void {
-  let dragging = false;
-  let overRect: DOMRect | null = null;
-
-  const onDown = (e: PointerEvent) => {
-    overRect = u.over.getBoundingClientRect();
-    if (e.clientY >= overRect.top) {
-      return;
-    }
-    if (e.clientX < overRect.left || e.clientX > overRect.right) {
-      return;
-    }
-    dragging = true;
-    u.root.setPointerCapture(e.pointerId);
-    const x = Math.max(0, Math.min(e.clientX - overRect.left, overRect.width));
-    onScrub(u.posToIdx(x));
-  };
-
-  const onMove = (e: PointerEvent) => {
-    if (dragging && overRect) {
-      const x = Math.max(
-        0,
-        Math.min(e.clientX - overRect.left, overRect.width),
-      );
-      onScrub(u.posToIdx(x));
-    }
-  };
-
-  const onUp = (e: PointerEvent) => {
-    if (dragging) {
-      dragging = false;
-      u.root.releasePointerCapture(e.pointerId);
-    }
-  };
-
-  u.root.addEventListener("pointerdown", onDown);
-  u.root.addEventListener("pointermove", onMove);
-  u.root.addEventListener("pointerup", onUp);
-  u.root.addEventListener("pointercancel", onUp);
-
-  return () => {
-    u.root.removeEventListener("pointerdown", onDown);
-    u.root.removeEventListener("pointermove", onMove);
-    u.root.removeEventListener("pointerup", onUp);
-    u.root.removeEventListener("pointercancel", onUp);
-  };
-}
-
-// -- uPlot chart component ----------------------------------------------------
-
-const UPlotChart: React.FC<{
-  store: StreamingStore;
-  chartType: TimelineChartType;
-  hiddenPlaces: Set<string>;
-  totalFrames: number;
-  currentFrameIndex: number;
-  className?: string;
-}> = ({
-  store,
-  chartType,
-  hiddenPlaces,
-  totalFrames,
-  currentFrameIndex,
-  className,
-}) => {
-  "use no memo"; // imperative uPlot lifecycle
-  const { setCurrentViewedFrame } = use(PlaybackContext);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const chartRef = useRef<uPlot | null>(null);
-  const playheadFrameRef = useRef(currentFrameIndex);
-  const storeRef = useLatest(store);
-
-  // -- Derived state ----------------------------------------------------------
-
-  // Reactive container size — replaces getBoundingClientRect + inline ResizeObserver
-  const size = useElementSize(wrapperRef);
-  // Boolean flag for the creation effect — triggers when size first becomes
-  // available (null → non-null) without re-firing on every resize.
-  const hasSize = size != null;
-  const dataLength = store.length;
-
-  // Stable identity: always calls the latest closure but never changes reference,
-  // so it doesn't trigger chart recreation when totalFrames changes.
-  const onScrub = useStableCallback((idx: number) => {
-    setCurrentViewedFrame(Math.max(0, Math.min(idx, totalFrames - 1)));
-  });
-
-  // Columnar data from the store. Manual useMemo because we opted out of
-  // React Compiler ("use no memo"), and buildStackedData allocates O(places ×
-  // frames) per call. Without memoization it would recompute on every render
-  // (e.g. every playback frame), and the result would be silently discarded
-  // since Effect 3 only consumes it when the store length or series changes.
-  const data = useMemo(
-    () =>
-      chartType === "stacked"
-        ? buildStackedData(store, hiddenPlaces, dataLength)
-        : buildRunData(store, hiddenPlaces, dataLength),
-    [store, dataLength, chartType, hiddenPlaces],
-  );
-
-  // -- Effect 1: create/destroy uPlot on structural changes -------------------
-
-  useEffect(() => {
-    // Note: parent (SimulationTimelineContent) gates on store.length === 0,
-    // so this component only mounts once data is available.
-    const wrapper = wrapperRef.current;
-    if (!wrapper || !hasSize) {
-      return;
-    }
-
-    const initialSize = {
-      width: wrapper.clientWidth,
-      height: wrapper.clientHeight,
-    };
-
-    const initialData =
-      chartType === "stacked"
-        ? buildStackedData(store, hiddenPlaces)
-        : buildRunData(store, hiddenPlaces);
-
-    const tooltip = createTooltip();
-
-    const opts = buildUPlotOptions({
-      store,
-      storeRef,
-      chartType,
-      hiddenPlaces,
-      size: initialSize,
-      onScrub,
-      getPlayheadFrame: () => playheadFrameRef.current,
-      tooltip,
-    });
-
-    chartRef.current?.destroy();
-
-    // eslint-disable-next-line new-cap -- uPlot's constructor is lowercase by convention
-    const u = new uPlot(opts, initialData, wrapper);
-    chartRef.current = u;
-
-    // Mount tooltip inside u.over (the cursor overlay div). It positions
-    // relative to that div and is bounded by its overflow:hidden — exactly
-    // matching the chart area. Cleaned up automatically by u.destroy().
-    u.over.appendChild(tooltip.root);
-
-    const cleanupRuler = attachRulerScrubbing(u, onScrub);
-
-    return () => {
-      cleanupRuler();
-      u.destroy();
-      chartRef.current = null;
-    };
-    // Recreate only when chart type, store, visible series, or size availability changes.
-    // onScrub is stable (useStableCallback). Subsequent size changes trigger
-    // setSize (Effect 2), not recreation.
-  }, [
-    chartType,
-    hiddenPlaces,
-    store,
-    store.places.length,
-    storeRef,
-    hasSize,
-    onScrub,
-  ]);
-
-  // -- Effect 2: sync container size to existing chart ------------------------
-
-  useEffect(() => {
-    if (chartRef.current && size && size.width > 0 && size.height > 0) {
-      chartRef.current.setSize(size);
-    }
-  }, [size]);
-
-  // -- Effect 3: stream new data (no chart recreation) ------------------------
-
-  useEffect(() => {
-    chartRef.current?.setData(data);
-  }, [data]);
-
-  // -- Effect 4: playhead redraw ---------------------------------------------
-
-  useEffect(() => {
-    playheadFrameRef.current = currentFrameIndex;
-    chartRef.current?.redraw(false, false);
-  }, [currentFrameIndex]);
-
-  return <div ref={wrapperRef} className={className} />;
-};
-
-// -- Legend --------------------------------------------------------------------
-
-const TimelineLegend: React.FC<{
-  places: PlaceMeta[];
-  hiddenPlaces: Set<string>;
-  onToggleVisibility: (placeId: string) => void;
-}> = ({ places, hiddenPlaces, onToggleVisibility }) => (
-  <div className={legendContainerStyle}>
-    {places.map((p) => {
-      const isHidden = hiddenPlaces.has(p.placeId);
-
-      return (
-        <div
-          key={p.placeId}
-          role="button"
-          tabIndex={0}
-          className={legendItemStyle}
-          onClick={() => onToggleVisibility(p.placeId)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              onToggleVisibility(p.placeId);
-            }
-          }}
-          style={{
-            opacity: isHidden ? 0.4 : 1,
-            textDecoration: isHidden ? "line-through" : "none",
-          }}
-        >
-          <div
-            className={legendColorStyle}
-            style={{
-              backgroundColor: p.color,
-              opacity: isHidden ? 0.5 : 1,
-            }}
-          />
-          <span>{p.placeName}</span>
-        </div>
-      );
-    })}
-  </div>
-);
-
-// -- Main component -----------------------------------------------------------
-
-const SimulationTimelineContent: React.FC = () => {
-  const { timelineChartType: chartType } = use(EditorContext);
-  const { totalFrames } = use(SimulationContext);
-  const { currentFrameIndex } = use(PlaybackContext);
-  const { store, metricError } = useStreamingData();
-
-  const [hiddenPlaces, setHiddenPlaces] = useState<Set<string>>(new Set());
-
-  const togglePlaceVisibility = (placeId: string) => {
-    setHiddenPlaces((prev) => {
-      const next = new Set(prev);
-      if (next.has(placeId)) {
-        next.delete(placeId);
-      } else {
-        next.add(placeId);
-      }
-      return next;
-    });
-  };
-
-  if (metricError) {
-    return (
-      <div className={containerStyle}>
-        <span style={{ fontSize: 12, color: "#b91c1c" }}>{metricError}</span>
-      </div>
-    );
-  }
-
-  if (store.length === 0 || totalFrames === 0) {
-    return (
-      <div className={containerStyle}>
-        <span style={{ fontSize: 12, color: "#999" }}>
-          No simulation data available
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className={containerStyle}>
-      <UPlotChart
-        className={chartAreaStyle}
-        store={store}
-        chartType={chartType}
-        hiddenPlaces={hiddenPlaces}
-        totalFrames={totalFrames}
-        currentFrameIndex={currentFrameIndex}
-      />
-      {store.places.length > 1 && (
-        <TimelineLegend
-          places={store.places}
-          hiddenPlaces={hiddenPlaces}
-          onToggleVisibility={togglePlaceVisibility}
-        />
-      )}
-    </div>
-  );
-};
-
-/**
- * SubView definition for Simulation Timeline tab.
- */
-export const simulationTimelineSubView: SubView = {
-  id: "simulation-timeline",
-  title: "Timeline",
-  tooltip:
-    "View the simulation timeline with compartment time-series. Click/drag to scrub through frames.",
-  component: SimulationTimelineContent,
-  renderHeaderAction: () => <TimelineHeaderActions />,
-  noPadding: true,
-};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/actual.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/actual.tsx
new file mode 100644
index 00000000000..6ac56445a22
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/actual.tsx
@@ -0,0 +1,91 @@
+import { use, useEffect, useState } from "react";
+
+import { ExecutionFrameSourceContext } from "../../../../../../../react/execution-frame/context";
+import { EditorContext } from "../../../../../../../react/state/editor-context";
+import { UPlotChart } from "./chart";
+import { TimelineLegend } from "./legend";
+import { chartAreaStyle, containerStyle } from "./styles";
+import { useStreamingData } from "./use-streaming-data";
+
+import type { SubView } from "../../../../../../components/sub-view/types";
+
+const ActualTimelineContent: React.FC = () => {
+  const {
+    hiddenTimelineSeriesIds: hiddenSeries,
+    setHiddenTimelineSeriesIds: setHiddenSeries,
+    setTimelineView,
+    timelineChartType: chartType,
+    timelineView,
+  } = use(EditorContext);
+  const source = use(ExecutionFrameSourceContext);
+  const { store, metricError } = useStreamingData(source);
+
+  const [isFollowingLive, setIsFollowingLive] = useState(true);
+  const { currentFrameIndex, scrubToFrame, totalFrames } = source;
+  const lastFrameIndex = Math.max(0, totalFrames - 1);
+
+  useEffect(() => {
+    if (timelineView.kind === "metric") {
+      setTimelineView({ kind: "per-place" });
+    }
+  }, [setTimelineView, timelineView.kind]);
+
+  useEffect(() => {
+    if (isFollowingLive && totalFrames > 0) {
+      scrubToFrame(lastFrameIndex);
+    }
+  }, [isFollowingLive, lastFrameIndex, scrubToFrame, totalFrames]);
+
+  const handleScrub = (frameIndex: number) => {
+    scrubToFrame(frameIndex);
+    setIsFollowingLive(frameIndex >= lastFrameIndex);
+  };
+
+  if (metricError) {
+    return (
+      <div className={containerStyle}>
+        <span style={{ fontSize: 12, color: "#b91c1c" }}>{metricError}</span>
+      </div>
+    );
+  }
+
+  if (store.length === 0 || totalFrames === 0) {
+    return (
+      <div className={containerStyle}>
+        <span style={{ fontSize: 12, color: "#999" }}>
+          No actual execution data available
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={containerStyle}>
+      <UPlotChart
+        className={chartAreaStyle}
+        store={store}
+        chartType={chartType}
+        hiddenSeries={hiddenSeries}
+        totalFrames={totalFrames}
+        currentFrameIndex={currentFrameIndex}
+        onScrub={handleScrub}
+      />
+      {store.series.length > 1 && (
+        <TimelineLegend
+          series={store.series}
+          hiddenSeries={hiddenSeries}
+          onHiddenSeriesChange={setHiddenSeries}
+        />
+      )}
+    </div>
+  );
+};
+
+export const actualTimelineSubView: SubView = {
+  id: "actual-timeline",
+  title: "Timeline",
+  tooltip:
+    "View the actual execution timeline with compartment time-series. Click/drag to scrub through frames.",
+  component: ActualTimelineContent,
+  noPadding: true,
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/chart.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/chart.tsx
index cd7f514b9fe..efae857f484 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/chart.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/chart.tsx
@@ -1,4 +1,4 @@
-import { use, useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import uPlot from "uplot";
 
 import { useElementSize } from "../../../../../../../react/hooks/use-element-size";
@@ -6,7 +6,6 @@ import "uplot/dist/uPlot.min.css";
 
 import { useLatest } from "../../../../../../../react/hooks/use-latest";
 import { useStableCallback } from "../../../../../../../react/hooks/use-stable-callback";
-import { PlaybackContext } from "../../../../../../../react/playback/context";
 import {
   tooltipDotStyle,
   tooltipLabelStyle,
@@ -475,6 +474,7 @@ export const UPlotChart: FC<{
   hiddenSeries: Set<string>;
   totalFrames: number;
   currentFrameIndex: number;
+  onScrub: (frameIndex: number) => void;
   className?: string;
 }> = ({
   store,
@@ -482,11 +482,11 @@ export const UPlotChart: FC<{
   hiddenSeries,
   totalFrames,
   currentFrameIndex,
+  onScrub,
   className,
 }) => {
   "use no memo";
 
-  const { setCurrentViewedFrame } = use(PlaybackContext);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<uPlot | null>(null);
   const playheadFrameRef = useRef(currentFrameIndex);
@@ -496,18 +496,10 @@ export const UPlotChart: FC<{
   const hasSize = size != null;
   const dataLength = store.length;
 
-  const onScrub = useStableCallback((idx: number) => {
-    setCurrentViewedFrame(Math.max(0, Math.min(idx, totalFrames - 1)));
+  const onScrubFrame = useStableCallback((idx: number) => {
+    onScrub(Math.max(0, Math.min(idx, totalFrames - 1)));
   });
 
-  const data = useMemo(
-    () =>
-      chartType === "stacked"
-        ? buildStackedData(store, hiddenSeries, dataLength)
-        : buildRunData(store, hiddenSeries, dataLength),
-    [store, dataLength, chartType, hiddenSeries],
-  );
-
   useEffect(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper || !hasSize) {
@@ -532,7 +524,7 @@ export const UPlotChart: FC<{
       chartType,
       hiddenSeries,
       size: initialSize,
-      onScrub,
+      onScrub: onScrubFrame,
       getPlayheadFrame: () => playheadFrameRef.current,
       tooltip,
     });
@@ -545,7 +537,7 @@ export const UPlotChart: FC<{
 
     u.over.appendChild(tooltip.root);
 
-    const cleanupRuler = attachRulerScrubbing(u, onScrub);
+    const cleanupRuler = attachRulerScrubbing(u, onScrubFrame);
 
     return () => {
       cleanupRuler();
@@ -559,7 +551,7 @@ export const UPlotChart: FC<{
     store.series.length,
     storeRef,
     hasSize,
-    onScrub,
+    onScrubFrame,
   ]);
 
   useEffect(() => {
@@ -569,8 +561,13 @@ export const UPlotChart: FC<{
   }, [size]);
 
   useEffect(() => {
+    const data =
+      chartType === "stacked"
+        ? buildStackedData(store, hiddenSeries, dataLength)
+        : buildRunData(store, hiddenSeries, dataLength);
+
     chartRef.current?.setData(data);
-  }, [data]);
+  }, [chartType, dataLength, hiddenSeries, store]);
 
   useEffect(() => {
     playheadFrameRef.current = currentFrameIndex;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/index.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/index.ts
deleted file mode 100644
index 70048642ea7..00000000000
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { simulationTimelineSubView } from "./main";
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.test.tsx
new file mode 100644
index 00000000000..a4a469fb30a
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.test.tsx
@@ -0,0 +1,212 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { TimelineLegend } from "./legend";
+
+import type { TimelineSeriesMeta } from "./types";
+
+// jsdom provides neither observer, but opening the combobox dropdown makes
+// zag's popper schedule @floating-ui/dom's autoUpdate on an animation frame,
+// which constructs both. Without stubs that callback throws asynchronously
+// after the tests pass, failing the run as an unhandled error.
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords(): never[] {
+    return [];
+  }
+}
+globalThis.ResizeObserver = ObserverStub as unknown as typeof ResizeObserver;
+globalThis.IntersectionObserver =
+  ObserverStub as unknown as typeof IntersectionObserver;
+
+// Vitest globals are disabled in this package, so testing-library cannot
+// auto-register its cleanup hook.
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+/** Run out the grace period that follows leaving the selector. */
+const elapseReleaseDelay = () => {
+  act(() => {
+    vi.advanceTimersByTime(700);
+  });
+};
+
+const createSeries = (count: number): TimelineSeriesMeta[] =>
+  Array.from({ length: count }, (_, index) => ({
+    seriesId: `series-${index}`,
+    seriesName: `Series ${index}`,
+    color: "#336699",
+  }));
+
+/**
+ * Owns the hidden-series state so strip interactions behave as they do under
+ * the real EditorContext-backed wiring.
+ */
+const StatefulLegend = ({ series }: { series: TimelineSeriesMeta[] }) => {
+  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
+
+  return (
+    <TimelineLegend
+      series={series}
+      hiddenSeries={hiddenSeries}
+      onHiddenSeriesChange={setHiddenSeries}
+    />
+  );
+};
+
+describe("TimelineLegend", () => {
+  it("lists only visible series in the strip, in series order", () => {
+    const series = createSeries(3);
+
+    render(
+      <TimelineLegend
+        series={series}
+        hiddenSeries={new Set(["series-0"])}
+        onHiddenSeriesChange={() => {}}
+      />,
+    );
+
+    const actionButtons = screen.getAllByTitle(/^(Hide|Show) Series \d+$/u);
+
+    expect(actionButtons.map((button) => button.title)).toEqual([
+      "Hide Series 1",
+      "Hide Series 2",
+    ]);
+    expect(screen.queryByTitle("Show Series 0")).toBeNull();
+  });
+
+  it("hides a series through its hover action", () => {
+    const series = createSeries(3);
+    const onHiddenSeriesChange = vi.fn();
+
+    render(
+      <TimelineLegend
+        series={series}
+        hiddenSeries={new Set()}
+        onHiddenSeriesChange={onHiddenSeriesChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle("Hide Series 1"));
+
+    expect(onHiddenSeriesChange).toHaveBeenCalledWith(new Set(["series-1"]));
+  });
+
+  it("keeps just-hidden series until the pointer has left the selector for a while", () => {
+    vi.useFakeTimers();
+    const { container } = render(<StatefulLegend series={createSeries(3)} />);
+    const control = container.querySelector('[data-part="control"]')!;
+
+    // Several entries can be toggled in a row; leaving an individual entry
+    // does not end the lingering window.
+    fireEvent.click(screen.getByTitle("Hide Series 1"));
+    fireEvent.pointerLeave(screen.getByTitle("Show Series 1").parentElement!);
+    fireEvent.click(screen.getByTitle("Hide Series 2"));
+
+    expect(screen.getByTitle("Show Series 1")).toBeDefined();
+    expect(screen.getByTitle("Show Series 2")).toBeDefined();
+
+    // Leaving the whole selector only starts the grace period.
+    fireEvent.pointerLeave(control);
+    expect(screen.getByTitle("Show Series 1")).toBeDefined();
+
+    // After the delay the exit transitions start; entries stay mounted until
+    // those finish (jsdom does not run transitions, so the end events are
+    // fired manually).
+    elapseReleaseDelay();
+    expect(screen.getByTitle("Show Series 1")).toBeDefined();
+
+    fireEvent.transitionEnd(screen.getByTitle("Show Series 1").parentElement!);
+    fireEvent.transitionEnd(screen.getByTitle("Show Series 2").parentElement!);
+
+    expect(screen.queryByTitle("Show Series 1")).toBeNull();
+    expect(screen.queryByTitle("Show Series 2")).toBeNull();
+    expect(screen.getByTitle("Hide Series 0")).toBeDefined();
+  });
+
+  it("keeps just-hidden series when the pointer returns within the grace period", () => {
+    vi.useFakeTimers();
+    const { container } = render(<StatefulLegend series={createSeries(3)} />);
+    const control = container.querySelector('[data-part="control"]')!;
+
+    fireEvent.click(screen.getByTitle("Hide Series 1"));
+    fireEvent.pointerLeave(control);
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    fireEvent.pointerEnter(control);
+    elapseReleaseDelay();
+
+    // The pending release was cancelled, so the entry is still in place.
+    expect(screen.getByTitle("Show Series 1")).toBeDefined();
+  });
+
+  it("restores a just-hidden series when its action is clicked again", () => {
+    vi.useFakeTimers();
+    const { container } = render(<StatefulLegend series={createSeries(3)} />);
+    const control = container.querySelector('[data-part="control"]')!;
+
+    fireEvent.click(screen.getByTitle("Hide Series 1"));
+    fireEvent.click(screen.getByTitle("Show Series 1"));
+
+    fireEvent.pointerLeave(control);
+    elapseReleaseDelay();
+
+    // Visible again, so it stays in the strip after the pointer leaves.
+    expect(screen.getByTitle("Hide Series 1")).toBeDefined();
+  });
+
+  it("summarizes series beyond the render cap with a +N more chip", () => {
+    const series = createSeries(45);
+
+    render(
+      <TimelineLegend
+        series={series}
+        hiddenSeries={new Set()}
+        onHiddenSeriesChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "+5 more" })).toBeDefined();
+    expect(screen.queryByTitle("Hide Series 44")).toBeNull();
+  });
+
+  it("clears the search text without changing the selection", async () => {
+    const series = createSeries(3);
+    const onHiddenSeriesChange = vi.fn();
+
+    render(
+      <TimelineLegend
+        series={series}
+        hiddenSeries={new Set(["series-2"])}
+        onHiddenSeriesChange={onHiddenSeriesChange}
+      />,
+    );
+
+    const input = screen.getByLabelText("Filter timeline series");
+    fireEvent.focus(input);
+    fireEvent.input(input, { target: { value: "Series 1" } });
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Clear search" }),
+    );
+
+    expect((input as HTMLInputElement).value).toBe("");
+    expect(onHiddenSeriesChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.tsx
index edd4ac600eb..067974d119b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend.tsx
@@ -1,49 +1,273 @@
-import {
-  legendColorStyle,
-  legendContainerStyle,
-  legendItemStyle,
-} from "./styles";
+import { Combobox, createListCollection } from "@ark-ui/react/combobox";
+import { useFilter } from "@ark-ui/react/locale";
+import { useState } from "react";
 
+import { Icon } from "@hashintel/ds-components";
+import { css } from "@hashintel/ds-helpers/css";
+
+import { SeriesDropdown } from "./legend/series-dropdown";
+import { SeriesStrip, useStripLingering } from "./legend/series-strip";
+import { legendContainerStyle } from "./styles";
+
+import type { LegendComboboxItem } from "./legend/series-dropdown";
 import type { TimelineSeriesMeta } from "./types";
 import type { FC } from "react";
 
+const MAX_RENDERED_OPTIONS = 250;
+
+// Hoisted so `useFilter`'s memo (keyed on its props object) stays stable and
+// the filtered collection is only rebuilt when the series or query change.
+const FILTER_OPTIONS = { sensitivity: "base" } as const;
+
+const legendSelectorStyle = css({
+  width: "[100%]",
+});
+
+const legendControlStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "2",
+  position: "relative",
+  height: "[30px]",
+  width: "[100%]",
+  minWidth: "[0]",
+  boxSizing: "border-box",
+  backgroundColor: "neutral.s00",
+  borderWidth: "[1px]",
+  borderStyle: "solid",
+  borderColor: "[transparent]",
+  borderRadius: "lg",
+  paddingX: "1",
+  color: "neutral.fg.body",
+  _hover: {
+    borderColor: "neutral.bd.subtle",
+  },
+  _focusWithin: {
+    borderColor: "neutral.bd.subtle.hover",
+    boxShadow: "[0px 0px 0px 2px {colors.neutral.a20}]",
+  },
+});
+
+const legendSearchAreaStyle = css({
+  position: "relative",
+  flex: "1",
+  minWidth: "[0]",
+  height: "[100%]",
+});
+
+const selectedCountBadgeStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0,
+  height: "[20px]",
+  paddingX: "1.5",
+  borderRadius: "md",
+  backgroundColor: "neutral.s30",
+  color: "neutral.s115",
+  fontSize: "[11px]",
+  fontVariantNumeric: "tabular-nums",
+  fontWeight: "semibold",
+  lineHeight: "[1]",
+  whiteSpace: "nowrap",
+});
+
+const legendInputStyle = css({
+  position: "relative",
+  zIndex: "[0]",
+  width: "[100%]",
+  height: "[100%]",
+  border: "[0]",
+  outline: "[0]",
+  backgroundColor: "[transparent]",
+  color: "neutral.s120",
+  fontSize: "xs",
+  fontWeight: "medium",
+  _placeholder: {
+    color: "neutral.s80",
+  },
+});
+
+const triggerButtonStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: "5",
+  height: "5",
+  border: "[0]",
+  borderRadius: "sm",
+  backgroundColor: "[transparent]",
+  color: "neutral.s90",
+  cursor: "pointer",
+  _hover: {
+    backgroundColor: "neutral.s20",
+    color: "neutral.s120",
+  },
+});
+
+const buildHiddenSeries = (
+  series: TimelineSeriesMeta[],
+  selectedSeriesIds: string[],
+): Set<string> => {
+  const selected = new Set(selectedSeriesIds);
+
+  return new Set(
+    series
+      .filter((item) => !selected.has(item.seriesId))
+      .map((item) => item.seriesId),
+  );
+};
+
+/**
+ * Selector for the timeline chart's series: a collapsed strip of the visible
+ * series (with hover actions to hide them) plus a searchable multi-select
+ * dropdown for managing everything.
+ *
+ * `hiddenSeries` is the inverse of the combobox selection — the chart reads
+ * hidden ids, the combobox speaks in selected values, and this component
+ * translates at the boundary.
+ */
 export const TimelineLegend: FC<{
   series: TimelineSeriesMeta[];
   hiddenSeries: Set<string>;
-  onToggleVisibility: (seriesId: string) => void;
-}> = ({ series, hiddenSeries, onToggleVisibility }) => (
-  <div className={legendContainerStyle}>
-    {series.map((item) => {
-      const isHidden = hiddenSeries.has(item.seriesId);
-
-      return (
-        <div
-          key={item.seriesId}
-          role="button"
-          tabIndex={0}
-          className={legendItemStyle}
-          onClick={() => onToggleVisibility(item.seriesId)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              onToggleVisibility(item.seriesId);
+  onHiddenSeriesChange: (hiddenSeries: Set<string>) => void;
+}> = ({ series, hiddenSeries, onHiddenSeriesChange }) => {
+  const filter = useFilter(FILTER_OPTIONS);
+  const [inputValue, setInputValue] = useState("");
+  const lingering = useStripLingering(hiddenSeries);
+
+  const items: LegendComboboxItem[] = series.map((item) => ({
+    color: item.color,
+    label: item.seriesName,
+    value: item.seriesId,
+  }));
+  const matchingItems = items.filter((item) =>
+    filter.contains(item.label, inputValue),
+  );
+  const visibleItems = matchingItems.slice(0, MAX_RENDERED_OPTIONS);
+  const collection = createListCollection<LegendComboboxItem>({
+    items: visibleItems,
+    itemToString: (item) => item.label,
+    itemToValue: (item) => item.value,
+  });
+  const selectedSeriesIds = series
+    .filter((item) => !hiddenSeries.has(item.seriesId))
+    .map((item) => item.seriesId);
+  const selectedCount = selectedSeriesIds.length;
+
+  const toggleSeries = (seriesId: string) => {
+    const next = new Set(hiddenSeries);
+
+    if (next.has(seriesId)) {
+      next.delete(seriesId);
+    } else {
+      next.add(seriesId);
+    }
+
+    onHiddenSeriesChange(next);
+  };
+
+  const selectOnly = (seriesId: string) => {
+    onHiddenSeriesChange(
+      new Set(
+        series
+          .filter((item) => item.seriesId !== seriesId)
+          .map((item) => item.seriesId),
+      ),
+    );
+  };
+
+  const selectAll = () => {
+    onHiddenSeriesChange(new Set());
+  };
+
+  const unselectAll = () => {
+    onHiddenSeriesChange(new Set(series.map((item) => item.seriesId)));
+  };
+
+  return (
+    <div className={legendContainerStyle}>
+      <Combobox.Root
+        className={legendSelectorStyle}
+        collection={collection}
+        closeOnSelect={false}
+        inputValue={inputValue}
+        multiple
+        onInputValueChange={(details) => setInputValue(details.inputValue)}
+        onOpenChange={(details) => {
+          if (!details.open) {
+            setInputValue("");
+          }
+        }}
+        onValueChange={(details) => {
+          onHiddenSeriesChange(buildHiddenSeries(series, details.value));
+        }}
+        openOnClick
+        positioning={{ placement: "top-start", sameWidth: false, gutter: 8 }}
+        value={selectedSeriesIds}
+      >
+        <Combobox.Control
+          className={legendControlStyle}
+          // Just-toggled strip entries linger until the pointer or focus has
+          // left the whole selector for a grace period, so several can be
+          // toggled in a row and a quick return keeps them in place.
+          onPointerEnter={lingering.cancelRelease}
+          onPointerLeave={lingering.scheduleRelease}
+          onFocus={lingering.cancelRelease}
+          onBlur={(event) => {
+            if (
+              !event.currentTarget.contains(event.relatedTarget as Node | null)
+            ) {
+              lingering.scheduleRelease();
             }
           }}
-          style={{
-            opacity: isHidden ? 0.4 : 1,
-            textDecoration: isHidden ? "line-through" : "none",
-          }}
         >
-          <div
-            className={legendColorStyle}
-            style={{
-              backgroundColor: item.color,
-              opacity: isHidden ? 0.5 : 1,
-            }}
-          />
-          <span>{item.seriesName}</span>
-        </div>
-      );
-    })}
-  </div>
-);
+          <span className={selectedCountBadgeStyle}>
+            {selectedCount}/{series.length} shown
+          </span>
+          <div className={legendSearchAreaStyle}>
+            <SeriesStrip
+              series={series}
+              hiddenSeries={hiddenSeries}
+              isSearching={inputValue.length > 0}
+              lingering={lingering}
+              onToggleSeries={toggleSeries}
+            />
+            <Combobox.Input
+              aria-label="Filter timeline series"
+              className={legendInputStyle}
+            />
+          </div>
+          {inputValue ? (
+            // Deliberately not Combobox.ClearTrigger: that part clears the
+            // *selection* as well as the input, which would hide every series.
+            <button
+              type="button"
+              aria-label="Clear search"
+              className={triggerButtonStyle}
+              onClick={() => setInputValue("")}
+            >
+              <Icon name="close" size="xxs" />
+            </button>
+          ) : null}
+          <Combobox.Trigger
+            aria-label="Toggle series list"
+            className={triggerButtonStyle}
+          >
+            <Icon name="chevronDown" size="xs" />
+          </Combobox.Trigger>
+        </Combobox.Control>
+        <SeriesDropdown
+          items={visibleItems}
+          matchCount={matchingItems.length}
+          hiddenSeries={hiddenSeries}
+          selectedCount={selectedCount}
+          totalCount={series.length}
+          onSelectAll={selectAll}
+          onUnselectAll={unselectAll}
+          onSelectOnly={selectOnly}
+        />
+      </Combobox.Root>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-dropdown.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-dropdown.tsx
new file mode 100644
index 00000000000..3fc96a2be79
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-dropdown.tsx
@@ -0,0 +1,298 @@
+import { Combobox } from "@ark-ui/react/combobox";
+import { Portal } from "@ark-ui/react/portal";
+
+import { Icon, usePortalContainerRef } from "@hashintel/ds-components";
+import { css, cx } from "@hashintel/ds-helpers/css";
+
+import type { FC } from "react";
+
+export type LegendComboboxItem = {
+  color: string;
+  label: string;
+  value: string;
+};
+
+const positionerStyle = css({
+  pointerEvents: "auto",
+  zIndex: "popover !important",
+});
+
+const contentStyle = css({
+  width: "[min(520px, calc(100vw - 32px))]",
+  maxHeight: "[min(420px, var(--available-height))]",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: "neutral.s00",
+  borderRadius: "lg",
+  boxShadow:
+    "[0px 6px 12px -4px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)]",
+  padding: "1",
+  outline: "none",
+});
+
+const globalActionsStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "1",
+  padding: "1",
+  borderBottomWidth: "thin",
+  borderColor: "neutral.bd.subtle",
+});
+
+const actionButtonStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "[24px]",
+  paddingX: "2",
+  border: "[0]",
+  borderRadius: "md",
+  backgroundColor: "[transparent]",
+  color: "neutral.s110",
+  cursor: "pointer",
+  fontSize: "xs",
+  fontWeight: "medium",
+  whiteSpace: "nowrap",
+  _hover: {
+    backgroundColor: "neutral.s20",
+    color: "neutral.s125",
+  },
+  _disabled: {
+    color: "neutral.s70",
+    cursor: "not-allowed",
+    _hover: {
+      backgroundColor: "[transparent]",
+    },
+  },
+});
+
+const listStyle = css({
+  minHeight: "[0]",
+  overflowY: "auto",
+  paddingY: "1",
+});
+
+const itemStyle = css({
+  display: "grid",
+  gridTemplateColumns: "[14px 12px minmax(0, 1fr)]",
+  alignItems: "center",
+  gap: "2",
+  position: "relative",
+  minHeight: "[34px]",
+  padding: "[5px 44px 5px 6px]",
+  borderRadius: "md",
+  color: "neutral.s115",
+  cursor: "pointer",
+  outline: "none",
+  _highlighted: {
+    backgroundColor: "neutral.bg.subtle.hover",
+    "& .timelineLegendOnlyAction": {
+      opacity: 1,
+      pointerEvents: "auto",
+    },
+  },
+  _selected: {
+    color: "neutral.s125",
+  },
+  _focusWithin: {
+    "& .timelineLegendOnlyAction": {
+      opacity: 1,
+      pointerEvents: "auto",
+    },
+  },
+  _hover: {
+    "& .timelineLegendOnlyAction": {
+      opacity: 1,
+      pointerEvents: "auto",
+    },
+  },
+});
+
+const hiddenItemStyle = css({
+  color: "neutral.s85",
+});
+
+const itemIndicatorStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "blue.s100",
+  "&[hidden]": {
+    display: "none",
+  },
+});
+
+const itemSwatchStyle = css({
+  width: "[10px]",
+  height: "[10px]",
+  borderRadius: "[2px]",
+  gridColumn: "[2]",
+});
+
+const itemLabelStyle = css({
+  minWidth: "[0]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontSize: "xs",
+  fontWeight: "medium",
+});
+
+const itemActionStyle = css({
+  height: "[22px]",
+  paddingX: "1.5",
+  border: "[0]",
+  borderRadius: "sm",
+  backgroundColor: "[transparent]",
+  color: "neutral.s100",
+  cursor: "pointer",
+  fontSize: "[11px]",
+  fontWeight: "medium",
+  whiteSpace: "nowrap",
+  _hover: {
+    backgroundColor: "neutral.s20",
+    color: "neutral.s125",
+  },
+});
+
+const onlyActionStyle = css({
+  position: "absolute",
+  right: "1.5",
+  top: "[50%]",
+  transform: "[translateY(-50%)]",
+  color: "blue.s90",
+  opacity: 0,
+  pointerEvents: "none",
+});
+
+const emptyStyle = css({
+  padding: "2",
+  color: "neutral.s85",
+  fontSize: "xs",
+});
+
+const truncationNoteStyle = css({
+  padding: "[6px 8px]",
+  borderTopWidth: "thin",
+  borderColor: "neutral.bd.subtle",
+  color: "neutral.s90",
+  fontSize: "[11px]",
+});
+
+const preventNestedActionSelection = (
+  event:
+    | React.MouseEvent<HTMLButtonElement>
+    | React.PointerEvent<HTMLButtonElement>,
+) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+/**
+ * The dropdown half of the timeline series selector: bulk actions, the
+ * filtered series list with per-row check indicators and "Only" actions, and
+ * a truncation note when the filter matches more rows than are rendered.
+ */
+export const SeriesDropdown: FC<{
+  /** Filtered items actually rendered (capped by the caller). */
+  items: LegendComboboxItem[];
+  /** How many series matched the filter before the render cap. */
+  matchCount: number;
+  hiddenSeries: Set<string>;
+  selectedCount: number;
+  totalCount: number;
+  onSelectAll: () => void;
+  onUnselectAll: () => void;
+  onSelectOnly: (seriesId: string) => void;
+}> = ({
+  items,
+  matchCount,
+  hiddenSeries,
+  selectedCount,
+  totalCount,
+  onSelectAll,
+  onUnselectAll,
+  onSelectOnly,
+}) => {
+  const portalContainerRef = usePortalContainerRef();
+
+  return (
+    <Portal container={portalContainerRef}>
+      <Combobox.Positioner className={positionerStyle}>
+        <Combobox.Content className={contentStyle}>
+          <div className={globalActionsStyle}>
+            <button
+              type="button"
+              className={actionButtonStyle}
+              disabled={selectedCount === totalCount}
+              onClick={onSelectAll}
+            >
+              Select All
+            </button>
+            <button
+              type="button"
+              className={actionButtonStyle}
+              disabled={selectedCount === 0}
+              onClick={onUnselectAll}
+            >
+              Unselect All
+            </button>
+          </div>
+          <Combobox.Empty className={emptyStyle}>
+            No series found.
+          </Combobox.Empty>
+          <Combobox.List className={listStyle}>
+            {items.map((item) => {
+              const isSelected = !hiddenSeries.has(item.value);
+
+              return (
+                <Combobox.Item
+                  key={item.value}
+                  item={item}
+                  className={cx(itemStyle, !isSelected && hiddenItemStyle)}
+                >
+                  <Combobox.ItemIndicator className={itemIndicatorStyle}>
+                    <Icon name="check" size="xxs" />
+                  </Combobox.ItemIndicator>
+                  <span
+                    className={itemSwatchStyle}
+                    style={{
+                      backgroundColor: item.color,
+                      opacity: isSelected ? 1 : 0.45,
+                    }}
+                  />
+                  <Combobox.ItemText className={itemLabelStyle}>
+                    {item.label}
+                  </Combobox.ItemText>
+                  <button
+                    type="button"
+                    aria-label={`Show only ${item.label}`}
+                    className={cx(
+                      itemActionStyle,
+                      onlyActionStyle,
+                      "timelineLegendOnlyAction",
+                    )}
+                    onClick={(event) => {
+                      preventNestedActionSelection(event);
+                      onSelectOnly(item.value);
+                    }}
+                    onPointerDown={preventNestedActionSelection}
+                  >
+                    Only
+                  </button>
+                </Combobox.Item>
+              );
+            })}
+          </Combobox.List>
+          {matchCount > items.length && (
+            <div className={truncationNoteStyle}>
+              Showing {items.length} of {matchCount} series — refine your search
+              to see the rest.
+            </div>
+          )}
+        </Combobox.Content>
+      </Combobox.Positioner>
+    </Portal>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-strip.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-strip.tsx
new file mode 100644
index 00000000000..e2f2c6821c7
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/legend/series-strip.tsx
@@ -0,0 +1,400 @@
+import { useComboboxContext } from "@ark-ui/react/combobox";
+import { useEffect, useRef, useState } from "react";
+
+import { Icon } from "@hashintel/ds-components";
+import { css, cx } from "@hashintel/ds-helpers/css";
+
+import type { TimelineSeriesMeta } from "../types";
+import type { FC } from "react";
+
+/**
+ * How many series the strip renders. Anything beyond this is summarized by
+ * the "+N more" chip — the strip is a single clipped line, so rendering
+ * hundreds of entries would only add invisible DOM.
+ */
+const STRIP_RENDER_LIMIT = 40;
+
+/**
+ * Grace period after the pointer or focus leaves the selector before
+ * just-hidden entries animate out. Returning within the delay keeps them.
+ */
+const RELEASE_DELAY_MS = 700;
+
+const stripStyle = css({
+  position: "absolute",
+  inset: "[0]",
+  display: "flex",
+  alignItems: "center",
+  gap: "2",
+  zIndex: "[1]",
+  pointerEvents: "none",
+});
+
+const stripNamesStyle = css({
+  flex: "1",
+  minWidth: "[0]",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  color: "neutral.s100",
+  fontSize: "xs",
+  fontWeight: "medium",
+  lineHeight: "[30px]",
+  // No text-overflow ellipsis: the "…" would paint over the partially
+  // clipped entry at the edge, whose action button stays hit-testable while
+  // invisible. A fade mask keeps the cut-off visible and honest instead.
+  maskImage: "[linear-gradient(to right, #000 calc(100% - 28px), transparent)]",
+});
+
+const stripItemStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "1",
+  maxWidth: "[240px]",
+  minWidth: "[0]",
+  overflow: "hidden",
+  marginRight: "1",
+  paddingX: "1",
+  paddingY: "0.5",
+  borderRadius: "sm",
+  // The surrounding strip uses a 30px line-height to centre the inline row;
+  // reset it here so the pill hugs its text instead of growing past the
+  // control.
+  lineHeight: "[1.2]",
+  verticalAlign: "middle",
+  pointerEvents: "auto",
+  transition:
+    "[max-width 0.18s ease, margin 0.18s ease, padding 0.18s ease, opacity 0.18s ease, background-color 0.15s ease]",
+  _hover: {
+    backgroundColor: "neutral.s30",
+    color: "neutral.s125",
+    "& .stripItemSwatch": {
+      display: "none",
+    },
+    "& .stripItemActionIcon": {
+      display: "inline-flex",
+    },
+  },
+  _focusWithin: {
+    backgroundColor: "neutral.s30",
+    color: "neutral.s125",
+    "& .stripItemSwatch": {
+      display: "none",
+    },
+    "& .stripItemActionIcon": {
+      display: "inline-flex",
+    },
+  },
+});
+
+const hiddenStripItemStyle = css({
+  opacity: 0.45,
+  textDecoration: "line-through",
+});
+
+/**
+ * Collapses a just-hidden entry once the lingering window closes. The CSS
+ * transition does the animation; React unmounts the entry on `transitionend`.
+ */
+const leavingStripItemStyle = css({
+  maxWidth: "[0]",
+  marginRight: "[0]",
+  paddingX: "[0]",
+  opacity: 0,
+});
+
+const stripActionStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: "[16px]",
+  height: "[16px]",
+  padding: "[0]",
+  border: "[0]",
+  borderRadius: "[2px]",
+  backgroundColor: "[transparent]",
+  color: "neutral.s110",
+  cursor: "pointer",
+  _hover: {
+    color: "neutral.s125",
+  },
+});
+
+const stripSwatchStyle = css({
+  width: "[8px]",
+  height: "[8px]",
+  borderRadius: "[2px]",
+  flexShrink: 0,
+});
+
+const stripActionIconStyle = css({
+  display: "none",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const stripItemTextStyle = css({
+  minWidth: "[0]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const moreChipStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0,
+  height: "[20px]",
+  paddingX: "1.5",
+  border: "[0]",
+  borderRadius: "md",
+  backgroundColor: "neutral.s20",
+  color: "neutral.s105",
+  cursor: "pointer",
+  fontSize: "[11px]",
+  fontWeight: "medium",
+  lineHeight: "[1]",
+  whiteSpace: "nowrap",
+  pointerEvents: "auto",
+  _hover: {
+    backgroundColor: "neutral.s30",
+    color: "neutral.s120",
+  },
+});
+
+const hiddenWhileTypingStyle = css({
+  visibility: "hidden",
+});
+
+export type StripLingering = {
+  /** Series toggled from the strip that stay in place while the pointer or
+   * focus remains inside the selector control. */
+  lingeringSeriesIds: Set<string>;
+  /** Hidden series whose strip entry is animating out before unmounting. */
+  leavingSeriesIds: Set<string>;
+  /** Keep a series in the strip during the current interaction. */
+  holdLingering: (seriesId: string) => void;
+  /** Unmount a series entry once its exit transition finished. */
+  finalizeLeave: (seriesId: string) => void;
+  /**
+   * Close the lingering window after {@link RELEASE_DELAY_MS}: hidden
+   * lingering entries then animate out.
+   */
+  scheduleRelease: () => void;
+  /** Abort a pending release, e.g. when the pointer returns in time. */
+  cancelRelease: () => void;
+};
+
+/**
+ * Lifecycle for strip entries that were just toggled: they linger in place
+ * until the pointer or focus has left the whole selector control for
+ * {@link RELEASE_DELAY_MS} (the owner wires
+ * {@link StripLingering.scheduleRelease} and
+ * {@link StripLingering.cancelRelease} to that boundary), then animate out
+ * via {@link StripLingering.leavingSeriesIds}.
+ */
+export const useStripLingering = (
+  hiddenSeries: Set<string>,
+): StripLingering => {
+  // One state object so the delayed release moves ids between the two sets
+  // atomically with a single functional update.
+  const [state, setState] = useState<{
+    lingering: Set<string>;
+    leaving: Set<string>;
+  }>({ lingering: new Set(), leaving: new Set() });
+
+  // The release fires from a timeout, so it reads the latest hidden set from
+  // a ref instead of the (possibly stale) closed-over prop.
+  const hiddenSeriesRef = useRef(hiddenSeries);
+  useEffect(() => {
+    hiddenSeriesRef.current = hiddenSeries;
+  });
+
+  const releaseTimeoutRef = useRef<number | null>(null);
+
+  const cancelRelease = () => {
+    if (releaseTimeoutRef.current !== null) {
+      window.clearTimeout(releaseTimeoutRef.current);
+      releaseTimeoutRef.current = null;
+    }
+  };
+
+  useEffect(() => cancelRelease, []);
+
+  const holdLingering = (seriesId: string) => {
+    cancelRelease();
+    setState((prev) => {
+      if (prev.lingering.has(seriesId) && !prev.leaving.has(seriesId)) {
+        return prev;
+      }
+
+      const leaving = new Set(prev.leaving);
+      leaving.delete(seriesId);
+
+      return { lingering: new Set(prev.lingering).add(seriesId), leaving };
+    });
+  };
+
+  const finalizeLeave = (seriesId: string) => {
+    setState((prev) => {
+      if (!prev.leaving.has(seriesId)) {
+        return prev;
+      }
+
+      const leaving = new Set(prev.leaving);
+      leaving.delete(seriesId);
+
+      return { ...prev, leaving };
+    });
+  };
+
+  const scheduleRelease = () => {
+    if (state.lingering.size === 0) {
+      return;
+    }
+
+    cancelRelease();
+    releaseTimeoutRef.current = window.setTimeout(() => {
+      releaseTimeoutRef.current = null;
+      setState((prev) => {
+        if (prev.lingering.size === 0) {
+          return prev;
+        }
+
+        const leaving = new Set(prev.leaving);
+
+        for (const seriesId of prev.lingering) {
+          if (hiddenSeriesRef.current.has(seriesId)) {
+            leaving.add(seriesId);
+          }
+        }
+
+        return { lingering: new Set(), leaving };
+      });
+    }, RELEASE_DELAY_MS);
+  };
+
+  return {
+    lingeringSeriesIds: state.lingering,
+    leavingSeriesIds: state.leaving,
+    holdLingering,
+    finalizeLeave,
+    scheduleRelease,
+    cancelRelease,
+  };
+};
+
+/**
+ * The collapsed legend strip rendered inside the selector control.
+ *
+ * It lists the series currently shown on the chart, in their stable chart
+ * order. Hovering an entry morphs its colour swatch into an eye action;
+ * clicking that action hides the series. Just-hidden series stay in place
+ * (struck through, with the action flipped to "show") until the pointer or
+ * focus leaves the whole selector control, so several entries can be toggled
+ * — or an accidental click undone — before they animate out of the strip.
+ * Hidden series are managed from the dropdown.
+ */
+export const SeriesStrip: FC<{
+  series: TimelineSeriesMeta[];
+  hiddenSeries: Set<string>;
+  /** Hide the strip while the user is typing a filter into the input. */
+  isSearching: boolean;
+  lingering: StripLingering;
+  onToggleSeries: (seriesId: string) => void;
+}> = ({ series, hiddenSeries, isSearching, lingering, onToggleSeries }) => {
+  const combobox = useComboboxContext();
+  const { lingeringSeriesIds, leavingSeriesIds, holdLingering, finalizeLeave } =
+    lingering;
+
+  const stripSeries = series.filter(
+    (item) =>
+      !hiddenSeries.has(item.seriesId) ||
+      lingeringSeriesIds.has(item.seriesId) ||
+      leavingSeriesIds.has(item.seriesId),
+  );
+  const renderedSeries = stripSeries.slice(0, STRIP_RENDER_LIMIT);
+  // Everything not rendered here — hidden series and entries beyond the cap —
+  // is reachable through the dropdown.
+  const overflowCount = series.length - renderedSeries.length;
+
+  return (
+    <span className={cx(stripStyle, isSearching && hiddenWhileTypingStyle)}>
+      <span className={stripNamesStyle}>
+        {renderedSeries.map((item) => {
+          const isVisible = !hiddenSeries.has(item.seriesId);
+          const isLeaving = leavingSeriesIds.has(item.seriesId);
+          const actionLabel = isVisible
+            ? `Hide ${item.seriesName}`
+            : `Show ${item.seriesName}`;
+
+          return (
+            <span
+              key={item.seriesId}
+              className={cx(
+                stripItemStyle,
+                !isVisible && !isLeaving && hiddenStripItemStyle,
+                isLeaving && leavingStripItemStyle,
+              )}
+              onPointerEnter={() => {
+                // Re-entering a leaving entry cancels the exit; the
+                // transition simply reverses.
+                if (leavingSeriesIds.has(item.seriesId)) {
+                  holdLingering(item.seriesId);
+                }
+              }}
+              onTransitionEnd={(event) => {
+                if (event.target === event.currentTarget && isLeaving) {
+                  finalizeLeave(item.seriesId);
+                }
+              }}
+            >
+              <button
+                type="button"
+                aria-label={actionLabel}
+                title={actionLabel}
+                className={stripActionStyle}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  holdLingering(item.seriesId);
+                  onToggleSeries(item.seriesId);
+                }}
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                }}
+              >
+                <span
+                  className={cx(stripSwatchStyle, "stripItemSwatch")}
+                  style={{ backgroundColor: item.color }}
+                />
+                <span
+                  className={cx(stripActionIconStyle, "stripItemActionIcon")}
+                >
+                  <Icon name={isVisible ? "eyeSlash" : "eye"} size="xs" />
+                </span>
+              </button>
+              <span className={stripItemTextStyle}>{item.seriesName}</span>
+            </span>
+          );
+        })}
+      </span>
+      {overflowCount > 0 && (
+        <button
+          type="button"
+          className={moreChipStyle}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            combobox.setOpen(true);
+          }}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          +{overflowCount} more
+        </button>
+      )}
+    </span>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/main.tsx
index 824417c2c1d..d7087526ff0 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/main.tsx
@@ -1,7 +1,6 @@
-import { use, useState } from "react";
+import { use } from "react";
 
-import { PlaybackContext } from "../../../../../../../react/playback/context";
-import { SimulationContext } from "../../../../../../../react/simulation/context";
+import { ExecutionFrameSourceContext } from "../../../../../../../react/execution-frame/context";
 import { EditorContext } from "../../../../../../../react/state/editor-context";
 import { UPlotChart } from "./chart";
 import { TimelineHeaderActions } from "./header";
@@ -12,24 +11,13 @@ import { useStreamingData } from "./use-streaming-data";
 import type { SubView } from "../../../../../../components/sub-view/types";
 
 const SimulationTimelineContent: React.FC = () => {
-  const { timelineChartType: chartType } = use(EditorContext);
-  const { totalFrames } = use(SimulationContext);
-  const { currentFrameIndex } = use(PlaybackContext);
-  const { store, metricError } = useStreamingData();
-
-  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
-
-  const toggleSeriesVisibility = (seriesId: string) => {
-    setHiddenSeries((prev) => {
-      const next = new Set(prev);
-      if (next.has(seriesId)) {
-        next.delete(seriesId);
-      } else {
-        next.add(seriesId);
-      }
-      return next;
-    });
-  };
+  const {
+    hiddenTimelineSeriesIds: hiddenSeries,
+    setHiddenTimelineSeriesIds: setHiddenSeries,
+    timelineChartType: chartType,
+  } = use(EditorContext);
+  const source = use(ExecutionFrameSourceContext);
+  const { store, metricError } = useStreamingData(source);
 
   if (metricError) {
     return (
@@ -39,7 +27,7 @@ const SimulationTimelineContent: React.FC = () => {
     );
   }
 
-  if (store.length === 0 || totalFrames === 0) {
+  if (store.length === 0 || source.totalFrames === 0) {
     return (
       <div className={containerStyle}>
         <span style={{ fontSize: 12, color: "#999" }}>
@@ -56,14 +44,15 @@ const SimulationTimelineContent: React.FC = () => {
         store={store}
         chartType={chartType}
         hiddenSeries={hiddenSeries}
-        totalFrames={totalFrames}
-        currentFrameIndex={currentFrameIndex}
+        totalFrames={source.totalFrames}
+        currentFrameIndex={source.currentFrameIndex}
+        onScrub={source.scrubToFrame}
       />
       {store.series.length > 1 && (
         <TimelineLegend
           series={store.series}
           hiddenSeries={hiddenSeries}
-          onToggleVisibility={toggleSeriesVisibility}
+          onHiddenSeriesChange={setHiddenSeries}
         />
       )}
     </div>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/styles.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/styles.ts
index 6988a824930..13360bec318 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/styles.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/styles.ts
@@ -14,31 +14,13 @@ export const chartAreaStyle = css({
 });
 
 export const legendContainerStyle = css({
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "[12px]",
-  fontSize: "[11px]",
-  color: "[#666]",
-  paddingY: "3",
-  paddingX: "3",
-});
-
-export const legendItemStyle = css({
   display: "flex",
   alignItems: "center",
-  gap: "[4px]",
-  cursor: "pointer",
-  userSelect: "none",
-  transition: "[opacity 0.15s ease]",
-  _hover: {
-    opacity: 1,
-  },
-});
-
-export const legendColorStyle = css({
-  width: "[10px]",
-  height: "[10px]",
-  borderRadius: "[2px]",
+  minHeight: "[42px]",
+  paddingX: "3",
+  paddingY: "1.5",
+  borderTopWidth: "thin",
+  borderColor: "neutral.bd.subtle",
 });
 
 export const tooltipStyle = css({
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/use-streaming-data.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/use-streaming-data.ts
index a76966e000d..97e040cc968 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/use-streaming-data.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline/use-streaming-data.ts
@@ -1,4 +1,4 @@
-import { use, useEffect, useRef, useSyncExternalStore } from "react";
+import { use, useEffect, useRef, useState, useSyncExternalStore } from "react";
 
 import {
   compileMetric,
@@ -6,11 +6,11 @@ import {
   type Metric,
 } from "@hashintel/petrinaut-core";
 
-import { SimulationContext } from "../../../../../../../react/simulation/context";
 import { EditorContext } from "../../../../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../../../../react/state/sdcpn-context";
 import { buildTimelineSeriesConfig } from "./series-config";
 
+import type { ExecutionFrameSource } from "../../../../../../../react/execution-frame/context";
 import type {
   StreamingStore,
   TimelineFrame,
@@ -138,11 +138,10 @@ function compileTimelineMetric(metric: Metric | null): {
  *    places), values are the sum of token counts across places of that type.
  *  - `metric`: a single series computed by the compiled user metric.
  */
-export function useStreamingData(): {
+export function useStreamingData(source: ExecutionFrameSource): {
   store: StreamingStore;
   metricError: string | null;
 } {
-  const { dt, getFramesInRange, totalFrames } = use(SimulationContext);
   const {
     extensions,
     petriNetDefinition: { places, types, transitions, metrics },
@@ -172,7 +171,7 @@ export function useStreamingData(): {
     compiledMetric: compiledMetric.fn,
   });
 
-  const storeController = createStreamingStoreController([]);
+  const [storeController] = useState(() => createStreamingStoreController([]));
   const { store } = useSyncExternalStore(
     storeController.subscribe,
     storeController.getSnapshot,
@@ -183,13 +182,18 @@ export function useStreamingData(): {
   // yet been appended to the uPlot columns. Updating it should not re-render.
   const processedRef = useRef(0);
 
-  // Reset store when the series structure or x-axis timing changes.
+  // The frame-related fields are depended on individually below so that
+  // changes to unrelated source fields (e.g. the viewed frame index moving
+  // during playback or scrubbing) do not restart frame reads.
+  const { getFramesInRange, sourceId, totalFrames } = source;
+
+  // Reset store when the source identity or series structure changes.
   useEffect(() => {
     storeController.reset(seriesConfig.series);
     processedRef.current = 0;
-  }, [dt, seriesConfig.series, storeController]);
+  }, [seriesConfig.series, sourceId, storeController]);
 
-  // Stream new frames into the store
+  // Stream new frames into the store.
   useEffect(() => {
     let cancelled = false;
 
@@ -219,14 +223,16 @@ export function useStreamingData(): {
       }
 
       storeController.appendFrames(newFrames, seriesConfig.extract);
-      processedRef.current = totalFrames;
+      processedRef.current = startIndex + newFrames.length;
     };
 
     void fetchData();
     return () => {
       cancelled = true;
     };
-  }, [dt, getFramesInRange, totalFrames, seriesConfig, storeController]);
+    // sourceId is depended on so a source-identity change always restarts
+    // frame reads after the reset effect above cleared the store.
+  }, [getFramesInRange, seriesConfig, sourceId, storeController, totalFrames]);
 
   return {
     store,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
index c8b6d5f9e26..02d27be3072 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
@@ -7,7 +7,7 @@ import {
   generateDefaultVisualizerCode,
 } from "@hashintel/petrinaut-core";
 
-import { PlaybackContext } from "../../../../../../../../react/playback/context";
+import { ExecutionFrameSourceContext } from "../../../../../../../../react/execution-frame/context";
 import { EditorContext } from "../../../../../../../../react/state/editor-context";
 import { SegmentGroup } from "../../../../../../../components/segment-group";
 import { Switch } from "../../../../../../../components/switch";
@@ -71,7 +71,7 @@ const VisualizerPreview: React.FC = () => {
 
 const PlaceVisualizerContent: React.FC = () => {
   const { place, updatePlace } = usePlacePropertiesContext();
-  const { totalFrames } = use(PlaybackContext);
+  const { totalFrames } = use(ExecutionFrameSourceContext);
   const [viewMode, setViewMode] = useState<ViewMode>("code");
 
   const hasVisualizer = place.visualizerCode !== undefined;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiments-story-fixtures.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiments-story-fixtures.tsx
index 8c12bd07f33..a234724c7bc 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiments-story-fixtures.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiments-story-fixtures.tsx
@@ -264,6 +264,7 @@ export function FakeEditorProvider({
       collapseAllPanels: () => {},
       setTimelineChartType: () => {},
       setTimelineView: () => {},
+      setHiddenTimelineSeriesIds: () => {},
       setSimulateViewMode,
       setSearchOpen: () => {},
       triggerPanelAnimation: () => {},
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/petrinaut-docs-content.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/petrinaut-docs-content.ts
index d99cffa2fec..3943730cff7 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/petrinaut-docs-content.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/petrinaut-docs-content.ts
@@ -3,6 +3,7 @@ import {
   petrinautDocNames,
 } from "@hashintel/petrinaut-core";
 
+import actualMode from "../../../../../../docs/actual-mode.md?raw";
 import aiAssistant from "../../../../../../docs/ai-assistant.md?raw";
 import drawingANet from "../../../../../../docs/drawing-a-net.md?raw";
 import examples from "../../../../../../docs/examples.md?raw";
@@ -32,6 +33,7 @@ const rawDocsByName: Record<PetrinautDocName, string> = {
   simulation,
   scenarios,
   experiments,
+  "actual-mode": actualMode,
   "ai-assistant": aiAssistant,
   "visual-settings": visualSettings,
   examples,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
index 9fd3e0e1a2e..16ce661063b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
@@ -4,7 +4,7 @@ import { use } from "react";
 import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 
-import { PlaybackContext } from "../../../../react/playback/context";
+import { ExecutionFrameSourceContext } from "../../../../react/execution-frame/context";
 import { SimulationContext } from "../../../../react/simulation/context";
 import { EditorContext } from "../../../../react/state/editor-context";
 import { hexToHsl } from "../../../lib/hsl-color";
@@ -133,7 +133,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
-  const { currentViewedFrame, totalFrames } = use(PlaybackContext);
+  const { currentViewedFrame, totalFrames } = use(ExecutionFrameSourceContext);
 
   // Show the visualizer on hover for places with a visualizer during simulation.
   const showStateTooltip =
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
index dafd6ae530e..52a60c21e8d 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
@@ -3,7 +3,7 @@ import { use } from "react";
 import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 
-import { PlaybackContext } from "../../../../react/playback/context";
+import { ExecutionFrameSourceContext } from "../../../../react/execution-frame/context";
 import { SimulationContext } from "../../../../react/simulation/context";
 import { EditorContext } from "../../../../react/state/editor-context";
 import { hexToHsl } from "../../../lib/hsl-color";
@@ -65,7 +65,7 @@ export const PlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
-  const { currentViewedFrame, totalFrames } = use(PlaybackContext);
+  const { currentViewedFrame, totalFrames } = use(ExecutionFrameSourceContext);
 
   // Show the visualizer on hover for places with a visualizer during simulation.
   const showStateTooltip =
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
index ac07acb145f..e323101e1ce 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
@@ -7,7 +7,7 @@ import {
   getTransitionLogicAvailability,
 } from "@hashintel/petrinaut-core";
 
-import { PlaybackContext } from "../../../../react/playback/context";
+import { ExecutionFrameSourceContext } from "../../../../react/execution-frame/context";
 import { EditorContext } from "../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../react/state/sdcpn-context";
 import { UserSettingsContext } from "../../../../react/state/user-settings-context";
@@ -42,7 +42,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
     isNotHoveredConnection,
     hoveredItem,
   } = use(EditorContext);
-  const { currentFrameReader } = use(PlaybackContext);
+  const { currentFrameReader } = use(ExecutionFrameSourceContext);
   const { compactNodes } = use(UserSettingsContext);
 
   const dimensions = compactNodes
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
index 3f7f63dca14..3a2a7ca3609 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/sdcpn-view.tsx
@@ -106,7 +106,9 @@ export const SDCPNView: React.FC<{
     hasCanvasSelection,
     setHoveredItem,
     clearHoveredItem,
+    globalMode,
   } = use(EditorContext);
+  const isActualMode = globalMode === "actual";
 
   // Hook for applying node changes
   const applyNodeChanges = useApplyNodeChanges();
@@ -455,7 +457,9 @@ export const SDCPNView: React.FC<{
         <Background gap={SNAP_GRID_SIZE} size={1} />
         {hasCanvasSelection && <div className={fadeBgStyle} />}
         {showMinimap && <MiniMap pannable zoomable />}
-        <ViewportControls viewportActions={viewportActions} />
+        {!isActualMode && (
+          <ViewportControls viewportActions={viewportActions} />
+        )}
       </ReactFlow>
     </div>
   );
diff --git a/libs/@hashintel/petrinaut/src/ui/views/shared/place-state-visualization.tsx b/libs/@hashintel/petrinaut/src/ui/views/shared/place-state-visualization.tsx
index 0f5e8cdb2b1..cb1ad1717ee 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/shared/place-state-visualization.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/shared/place-state-visualization.tsx
@@ -2,11 +2,11 @@ import { use, useMemo } from "react";
 
 import { css } from "@hashintel/ds-helpers/css";
 
+import { ExecutionFrameSourceContext } from "../../../react/execution-frame/context";
 import {
   mergeParameterValues,
   useDefaultParameterValues,
 } from "../../../react/hooks/use-default-parameter-values";
-import { PlaybackContext } from "../../../react/playback/context";
 import { SimulationContext } from "../../../react/simulation/context";
 import { compileVisualizer } from "../../lib/compile-visualizer";
 import { VisualizerErrorBoundary } from "../Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/visualizer-error-boundary";
@@ -40,7 +40,7 @@ export const PlaceStateVisualization: React.FC<
   "use no memo"; // User-authored visualizer code is compiled into a component at runtime.
 
   const { initialMarking, parameterValues } = use(SimulationContext);
-  const { currentFrameReader, totalFrames } = use(PlaybackContext);
+  const { currentFrameReader, totalFrames } = use(ExecutionFrameSourceContext);
 
   const defaultParameterValues = useDefaultParameterValues();