H-5840: SDCPN diagnostics panel with global type-checker #8171

kube · 2025-12-09T00:19:22Z

H-5840 (part of H-5684)

🌟 What is the purpose of this PR?

Add global DiagnosticsPanel with linting
First step of having a global SDCPN checker (H-5684)

🔍 What does this change?

A new DiagnosticsPanel is present at the bottom of the UI (toggle using the new Diagnostics icon in BottomBar)
createSDCPNLanguageService that takes an SDCPN as input and lints
- This does not handle the changes on SDCPN at the moment, so needs to be re-instantiated every time.
checkSDCPN function, that creates

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

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

📜 Does this require a change to the docs?

The changes in this PR:

are internal and do not require a docs change

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

The changes in this PR:

do not affect the execution graph

⚠️ Known issues

In some cases, the linter fails to see an invalid property access.

🐾 Next steps

H-5841 Linting of all SDCPN properties, not just code
H-5839 create LSP from current solution, and re-use for MonacoEditor instances

🛡 What tests cover this?

This PR adds basic tests for createSDCPN function.
- These will be reworked/enhanced progressively.

❓ How to test this?

Use latest Petrinaut deployment (in thread)

kube · 2025-12-09T00:19:40Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor · 2025-12-15T01:38:33Z

PR Summary

Adds a Diagnostics Panel powered by a TypeScript language service to validate SDCPN code, integrated into the editor UI and simulation flow with tests.

UI/Editor:
- Diagnostics Panel: New bottom panel (DiagnosticsPanel) with resizable UI, grouped errors, and selection linking; toggle via new indicator in BottomBar.
- State: Introduces CheckerProvider and editor store fields for diagnostics visibility/size; adjusts PropertiesPanel/LeftSideBar layouts to coexist with the panel.
Core/Checker:
- TypeScript LS: Implements virtual-file TS language service (create-sdcpn-language-service, create-language-service-host, file-paths) to type-check differential equations, transition lambdas, and kernels.
- Validation API: Adds checkSDCPN returning grouped diagnostics; extensive unit tests (checker.test.ts) and helper createSDCPN for test setups.
Simulation:
- Pre-check: simulation-store runs checkSDCPN before initializing; surfaces first TS error in state.
- Tests: Updates simulation tests to new code shapes and names.
Build/Config:
- Vite: defines minimal process.versions shim for TS LS in browser; adds vite-env.d.ts.
- Package: ensures typescript dependency; changeset for minor release.

^{Written by Cursor Bugbot for commit 239cfae. This will update automatically on new commits. Configure here.}

graphite-app · 2025-12-15T01:41:44Z

libs/@hashintel/petrinaut/src/core/checker/create-language-service-host.ts

+    getCompilationSettings: () => COMPILER_OPTIONS,
+    getScriptVersion: () => "0",
+    getCurrentDirectory: () => "",
+    getDefaultLibFileName: () => "lib.2015.core.d.ts",


The default lib filename does not match the bundled lib files. Returns "lib.2015.core.d.ts" but the BUNDLED_LIBS map uses "lib.es2015.core.d.ts" as the key. This mismatch causes TypeScript to fail loading the default lib file, which means basic JavaScript types (Array, Object, String, etc.) won't be available during type checking.

Fix:

getDefaultLibFileName: () => "lib.es2015.core.d.ts",

Or alternatively, update line 22 in COMPILER_OPTIONS to use "lib.2015.core.d.ts" and adjust the BUNDLED_LIBS map key accordingly.

Suggested change

getDefaultLibFileName: () => "lib.2015.core.d.ts",

getDefaultLibFileName: () => "lib.es2015.core.d.ts",

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

libs/@hashintel/petrinaut/src/core/checker/create-language-service-host.ts

cursor · 2025-12-15T01:43:22Z

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

+      const tokenTuple = Array.from({ length: arc.weight })
+        .fill(`Color_${sanitizedColorId}`)
+        .join(", ");
+      inputTypeProperties.push(`  "${place.name}": [${tokenTuple}];`);


Bug: Duplicate place names generate invalid TypeScript type definitions

The generated TypeScript type definitions use place.name as property keys for the Input and Output types. Since place names are not guaranteed to be unique (the SDCPN type allows multiple places with the same name but different IDs), if a transition has arcs to two places that share the same name, the generated type literal will contain duplicate property names. This produces invalid TypeScript that causes the type-checker to fail with a syntax error when parsing the generated definitions.

Additional Locations (1)

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts#L131-L132

Is this fair? If so can we fix?

It is not, or at least it should not.

We should never have multiple places with the same name, but at the moment we do not do this verification (that should be done in the part of the checker that does not do the type-checking).

In any case, this will not be the responsibility of the type-checker part.

And if it results in a linting error, that's actually a good thing, even if it's not by-design.

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

CiaranMn

Great addition! A few minor comments

libs/@hashintel/petrinaut/src/core/checker/checker.ts

CiaranMn · 2025-12-17T14:00:38Z

libs/@hashintel/petrinaut/src/core/checker/checker.ts

+
+  // Check all differential equations
+  for (const de of sdcpn.differentialEquations) {
+    const filePath = `differential_equations/${de.id}/code.ts`;


Can we have a generateCodeFilePath(id: string, type: ItemType): string function in create-sdcpn-language-service which is then used both here and when creating the files?

At the moment they are magic strings which need keeping in sync manually if they change.

Same applies to other file paths below.

Yes much clearer indeed, I will add that.

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

CiaranMn · 2025-12-17T14:02:17Z

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

+      const tokenTuple = Array.from({ length: arc.weight })
+        .fill(`Color_${sanitizedColorId}`)
+        .join(", ");
+      inputTypeProperties.push(`  "${place.name}": [${tokenTuple}];`);


Is this fair? If so can we fix?

CiaranMn · 2025-12-17T14:04:11Z

libs/@hashintel/petrinaut/src/state/editor-store.ts

            }),

+          // Properties panel width
+          propertiesPanelWidth: 450,


Can we create a separate variable for this and diagnosticsPanelHeight to avoid repeating them and them potentially going out of sync?

i.e. somewhere up top in the file const propertiesPanelWidth = 450;

CiaranMn · 2025-12-17T14:06:27Z

libs/@hashintel/petrinaut/src/views/Editor/components/DiagnosticsPanel/diagnostics-panel.tsx

+// Position offsets (accounting for sidebar padding/margins)
+const MIN_HEIGHT = 100;
+const MAX_HEIGHT = 600;
+const LEFT_SIDEBAR_WIDTH = 344; // 320px + 24px padding


Can we pull the sidebar width from where it's defined? And the padding from wherever that is?

I tried to centralize all panel-related stuff together, including some styles, but ended up with bugs on styles.

If that is okay for you I'll add this on top of the PR fixing PandaCSS, or directly in the one that contains the BottomPanel (DiagnosticsPanel is already removed in my new PR)

Okay sure – I don't see how just defining some numbers as variables rather than hard-coding them several times would cause style bugs, so hopefully easy enough to fix

Not sure about that, but possibly one of the issues I had was:

When the constant is in an external file, PandaCSS cannot statically analyze/create the style by just reading one file.

So this LEFT_SIDEBAR_WIDTH would either:

Not be in the css() anymore, but in an inline style

Replaced by a CSS variable.

But given PandaCSS was not configured properly, I was not sure of what was causing the issue exactly.

CiaranMn · 2025-12-17T14:07:03Z

libs/@hashintel/petrinaut/src/views/Editor/components/PropertiesPanel/properties-panel.tsx

 import { TransitionProperties } from "./transition-properties";
 import { TypeProperties } from "./type-properties";

 const startingWidth = 450;


Here we have 450 again, definitely this could go out of sync with the 450s in the editor store, should all draw from the same variable

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

libs/@hashintel/petrinaut/src/views/Editor/components/DiagnosticsPanel/diagnostics-panel.tsx

cursor · 2025-12-17T22:28:21Z

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts

+ */
+function sanitizeColorId(colorId: string): string {
+  return colorId.replace(/[^a-zA-Z0-9_]/g, "");
+}


Bug: Color ID sanitization causes type name collisions

The sanitizeColorId function removes non-alphanumeric characters to create valid TypeScript identifiers, but this can cause type name collisions. If two colors have IDs that differ only in special characters (e.g., "color-1" and "color_1" both sanitize to "color1"), they'll generate types with identical names (Color_color1) in different files. When both types are imported in the same transition definition file, the second import shadows the first, causing incorrect type checking where places reference the wrong color's type structure.

Additional Locations (1)

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts#L53-L56

cursor · 2025-12-19T01:59:06Z

libs/@hashintel/petrinaut/src/state/checker-provider.tsx

+  useEffect(() => {
+    const result = checkSDCPN(petriNetDefinition);
+    setCheckResult(result);
+  }, [petriNetDefinition]);


Bug: Redundant SDCPN check on initial component mount

The checkSDCPN function is called twice on initial mount. The useState initializer (line 22-24) calls it to set the initial state, and then the useEffect (lines 27-30) immediately runs after mount and calls it again because petriNetDefinition is in the dependency array. Since checkSDCPN creates a TypeScript language service internally via ts.createLanguageService, this double execution is expensive and causes unnecessary performance overhead on every component mount.

… for correcting completion position

cursor · 2025-12-19T09:45:37Z

libs/@hashintel/petrinaut/src/state/checker-provider.tsx

+  useEffect(() => {
+    const result = checkSDCPN(petriNetDefinition);
+    setCheckResult(result);
+  }, [petriNetDefinition]);


Bug: Expensive type-checker runs twice on initial mount

The checkSDCPN function runs twice on initial mount — once in the useState initializer (line 22-24) and again immediately in the useEffect (line 27-30) since petriNetDefinition is in its dependency array. Since checkSDCPN creates a TypeScript language service and runs full diagnostic checks, this is an expensive operation to duplicate. Consider either using only the useState initializer with a ref to skip the first useEffect run, or initializing state as null and only using the effect.

cursor · 2025-12-19T09:45:37Z

libs/@hashintel/petrinaut/src/views/Editor/components/DiagnosticsPanel/diagnostics-panel.tsx

+        position: "fixed",
+        bottom: PANEL_MARGIN,
+        left: leftOffset,
+        right: PANEL_MARGIN,


Bug: DiagnosticsPanel overlaps PropertiesPanel due to unused width

The propertiesPanelWidth is stored in the editor state with a comment indicating it's "for DiagnosticsPanel positioning", and PropertiesPanel syncs its width to this value. However, DiagnosticsPanel never reads this value — it uses a fixed right: PANEL_MARGIN (12px) instead. When both panels are open, the DiagnosticsPanel extends underneath the PropertiesPanel (which has higher z-index), making a large portion of the diagnostics content visually obscured and potentially inaccessible.

Additional Locations (1)

libs/@hashintel/petrinaut/src/state/editor-store.ts#L22-L25

cursor · 2025-12-19T10:21:09Z

libs/@hashintel/petrinaut/src/state/checker-provider.tsx

+  useEffect(() => {
+    const result = checkSDCPN(petriNetDefinition);
+    setCheckResult(result);
+  }, [petriNetDefinition]);


Bug: Type checker runs twice on component mount

The checkSDCPN function is called twice on initial mount. It's first invoked in the useState lazy initializer (line 22-24), then immediately again in the useEffect (line 27-30) which runs on mount because petriNetDefinition is in its dependency array. Since checkSDCPN creates a new TypeScript language service on each call (an expensive operation involving virtual file generation and ts.createLanguageService), this causes redundant computation and noticeable delay on initial load. The useEffect should skip its first run or the useState initializer should be removed.

This will be fixed in H-5839

github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Dec 9, 2025

kube changed the title ~~Still PoC~~ H-5684: SDCPN checker and global TypeScript typecheck Dec 9, 2025

vercel bot deployed to Preview – petrinaut December 9, 2025 00:23 View deployment

vercel bot deployed to Preview – hash December 9, 2025 00:26 View deployment

kube force-pushed the cf/h-5684-implement-live-checks-on-sdcpn-validity branch from bb162e7 to a1940ac Compare December 9, 2025 11:11

vercel bot deployed to Preview – petrinaut December 9, 2025 11:15 View deployment

vercel bot deployed to Preview – hash December 9, 2025 11:19 View deployment

vilkinsons assigned kube Dec 9, 2025

vercel bot deployed to Preview – petrinaut December 9, 2025 23:16 View deployment

vercel bot deployed to Preview – petrinaut December 9, 2025 23:31 View deployment

vercel bot deployed to Preview – petrinaut December 11, 2025 01:16 View deployment

kube force-pushed the cf/h-5684-implement-live-checks-on-sdcpn-validity branch 2 times, most recently from 496cc7c to 79a4ea8 Compare December 15, 2025 01:37

kube changed the title ~~H-5684: SDCPN checker and global TypeScript typecheck~~ H-5840: SDCPN diagnostics panel with global type-checker Dec 15, 2025

kube marked this pull request as ready for review December 15, 2025 01:38

vercel bot deployed to Preview – petrinaut December 15, 2025 01:41 View deployment

graphite-app bot reviewed Dec 15, 2025

View reviewed changes

cursor bot reviewed Dec 15, 2025

View reviewed changes

vercel bot deployed to Preview – hash December 15, 2025 01:44 View deployment

vercel bot deployed to Preview – petrinaut December 15, 2025 11:13 View deployment

cursor bot reviewed Dec 15, 2025

View reviewed changes

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts Outdated Show resolved Hide resolved

graphite-app bot requested a review from a team December 15, 2025 11:18

CiaranMn reviewed Dec 17, 2025

View reviewed changes

vercel bot deployed to Preview – petrinaut December 17, 2025 18:09 View deployment

cursor bot reviewed Dec 17, 2025

View reviewed changes

libs/@hashintel/petrinaut/src/core/checker/create-sdcpn-language-service.ts Show resolved Hide resolved

libs/@hashintel/petrinaut/src/views/Editor/components/DiagnosticsPanel/diagnostics-panel.tsx Outdated Show resolved Hide resolved

kube force-pushed the cf/h-5684-implement-live-checks-on-sdcpn-validity branch from 4188954 to da1fbd9 Compare December 17, 2025 18:57

kube mentioned this pull request Dec 17, 2025

H-5850: Fix PandaCSS and single vite.config #8194

Merged

3 tasks

cursor bot reviewed Dec 17, 2025

View reviewed changes

vercel bot deployed to Preview – petrinaut December 17, 2025 23:03 View deployment

vercel bot deployed to Preview – hash December 17, 2025 23:12 View deployment

vercel bot deployed to Preview – petrinaut December 19, 2025 01:56 View deployment

cursor bot reviewed Dec 19, 2025

View reviewed changes

kube added 6 commits December 19, 2025 03:00

Simple LanguageService with prefix for definitions in file, and proxy…

2d7f1dc

… for correcting completion position

Update sanitizeColorId

ecef1fc

Add getItemFilePath

1d2a661

Fix collision issue in diagnostic keys

62c9d0b

Fix possible multiple imports of same Color

7d90b29

Fix format

a5c3883

kube force-pushed the cf/h-5684-implement-live-checks-on-sdcpn-validity branch from 2fc0cf0 to a5c3883 Compare December 19, 2025 09:39

vercel bot deployed to Preview – petrinaut December 19, 2025 09:43 View deployment

cursor bot reviewed Dec 19, 2025

View reviewed changes

vercel bot deployed to Preview – hash December 19, 2025 09:47 View deployment

kube added 2 commits December 19, 2025 11:11

Lint

f781e49

Add changeset

239cfae

github-actions bot added the area/infra Relates to version control, CI, CD or IaC (area) label Dec 19, 2025

vercel bot deployed to Preview – petrinaut December 19, 2025 10:17 View deployment

cursor bot reviewed Dec 19, 2025

View reviewed changes

graphite-app bot requested a review from a team December 19, 2025 10:21

kube requested a review from CiaranMn December 19, 2025 11:11

CiaranMn approved these changes Dec 19, 2025

View reviewed changes

kube added this pull request to the merge queue Dec 19, 2025

Merged via the queue into main with commit bc9456d Dec 19, 2025
44 checks passed

kube deleted the cf/h-5684-implement-live-checks-on-sdcpn-validity branch December 19, 2025 14:38

This was referenced Dec 20, 2025

H-5768: Extract styles from all component files in Petrinaut #8205

Open

H-5884: Add Panel SubView, with Horizontal and Vertical SubViews containers #8209

Draft

H-5691: Update Broken Machines example to have some global parameters #8211

Draft

	getDefaultLibFileName: () => "lib.2015.core.d.ts",
	getDefaultLibFileName: () => "lib.es2015.core.d.ts",

H-5840: SDCPN diagnostics panel with global type-checker #8171

H-5840: SDCPN diagnostics panel with global type-checker #8171

Uh oh!

Conversation

kube commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌟 What is the purpose of this PR?

🔍 What does this change?

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

📜 Does this require a change to the docs?

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

⚠️ Known issues

🐾 Next steps

🛡 What tests cover this?

❓ How to test this?

Uh oh!

kube commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

graphite-app bot Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot Dec 15, 2025

Choose a reason for hiding this comment

Bug: Duplicate place names generate invalid TypeScript type definitions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

CiaranMn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kube Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor bot Dec 17, 2025

Choose a reason for hiding this comment

Bug: Color ID sanitization causes type name collisions

Uh oh!

cursor bot Dec 19, 2025

Choose a reason for hiding this comment

Bug: Redundant SDCPN check on initial component mount

Uh oh!

cursor bot Dec 19, 2025

kube commented Dec 9, 2025 •

edited

Loading

kube commented Dec 9, 2025 •

edited

Loading

cursor bot commented Dec 15, 2025 •

edited

Loading

kube Dec 17, 2025 •

edited

Loading