DEV Community

jackymenCZ (jackymenCZ)
jackymenCZ (jackymenCZ)

Posted on Edited on

Sentinel-IR Playground Is in Beta: Structural Code Analysis in Your Browser, Even on Your Phone. WASM

Sentinel-IR Playground

Thanks for support:
https://www.npmjs.com/package/sentinel-ir-mcp/v/0.3.0?activeTab=code

The first 30 seconds: What is this?

What if you could inspect potentially dangerous code without installing anything, opening a terminal, or uploading your source code?

That is the idea behind Sentinel-IR Playground.

It is a small browser-based interface for Sentinel-IR 0.3.1. Paste your code or select a file, and it shows structural information: risk levels, security signals, imports, routes, operations and compact information that an AI agent can use.

It runs locally in your browser using WebAssembly. Your code is not uploaded, and it is never executed.

It is currently a beta release. I built it for a simple reason: I wanted to use my own project with one tap, including from my phone.

Try it here:

"Open Sentinel-IR Playground" (https://sentinel-ir-playground-dc30c8.gitlab.io/)


The next five minutes: For developers

  1. Why build another interface?

Sentinel-IR already existed as an npm package.

Developers could install it, use Node.js and integrate it into their own workflows. Its MCP integration also made structural analysis available to AI coding assistants.

But there was one practical problem.

Using a developer tool should not always require a development environment.

I work primarily from mobile devices. Opening Termux, preparing a Node.js environment and running commands just to inspect a code snippet is not always convenient.

I wanted something simpler.

Open a browser. Paste code. Analyze. Copy the result.

That became Sentinel-IR Playground.

  1. What happens inside the browser?

The playground uses the published "sentinel-ir" package, version 0.3.1.

It supports:

  • JavaScript
  • TypeScript
  • TSX
  • Python

The user can paste source code or select a local file.

The application then uses the WebAssembly-based parsing infrastructure to produce structural analysis.

The output includes:

  • Risk level: low, medium, high or critical.
  • Risk signals: individual findings with source line numbers.
  • Routes: detected application routes.
  • Imports: imported modules and dependencies.
  • Operations: structural operations detected in the source.
  • Forbidden capabilities: capabilities associated with security risks.
  • Compact IR: the structured representation an AI agent can consume.

You can also copy the resulting IR and compare its size with the original source code.

One important detail: selecting a signal allows you to jump to its corresponding source line.

The goal is not to replace a full IDE. It is to make structural code information accessible without unnecessary setup.

  1. Privacy was a design requirement

This part matters to me.

The playground does not need an AI model or an API key.

It does not have server-side application code, analytics or a source-code upload mechanism.

The analysis takes place in the browser through WebAssembly.

The source code is parsed, not executed.

The application also uses a Content Security Policy with:

"connect-src 'self'"

This restricts connections made through browser networking APIs to the application's own origin.

The browser tests additionally check that the application does not request resources from external origins during its tested workflows.

There is an important distinction here: this is an architecture and test claim, not a guarantee that every possible browser extension or compromised device is harmless.

The intention is straightforward: developers should be able to inspect code without sending their source to another service.

  1. How do we test browser results?

One of the most important requirements was that the browser version should not silently produce different results from the Node.js package.

The automated browser tests check that every example produces exactly the same compact IR and security signals as Sentinel-IR running under Node.js.

They also check:

  • Automatic language detection for pasted code.
  • File-extension-based language selection.
  • Navigation from a signal to its source line.
  • Layout at a 393-pixel mobile viewport.
  • No unexpected external requests.
  • No browser console errors or Content Security Policy violations.

The tests use Playwright with Chromium.

The CI pipeline builds the application, runs the tests and publishes GitLab Pages from the "main" branch.

This gives us repeatable checks rather than relying only on screenshots or manual inspection.

  1. How to run it locally

Requirements: Node.js 20 or newer.

Clone the repository:

git clone https://gitlab.com/jakubrojicek11/sentinel-ir-playground.git

cd sentinel-ir-playground

Install dependencies:

npm ci

Build the application:

npm run build

Start the local server:

npm run serve

Run the tests:

npm test

The browser tests use Chromium through "playwright-core". Chromium can be installed separately or provided through "CHROME_PATH".

  1. What this beta does not promise

This is a beta release, not a finished security auditing platform.

There are several limitations worth understanding.

Static analysis is not proof of safety.

A low risk level or an empty list of signals does not mean that a program is safe.

An incomplete parsing result is also not evidence of safety.

Compact IR is not always smaller.

For very small code snippets, the structural representation can be larger than the original source. Its benefits become more meaningful with larger files.

Language detection is heuristic.

For pasted code, automatic detection makes an educated guess. A selected file's extension takes priority, and users can choose the language manually.

Browser compatibility is still being evaluated.

The current automated browser coverage uses Chromium, including desktop and mobile viewport dimensions. Firefox and Safari have not been tested in CI.

I would rather document these boundaries than pretend the application has been tested everywhere.


Three projects, different responsibilities

Sentinel-IR Playground is not replacing the existing projects.

The responsibilities remain separate:

The playground does not require an AI agent. The MCP integration remains a separate way to make the same analysis available to coding assistants.

Each project has its own responsibility.


Try the beta

Live application:
https://sentinel-ir-playground-dc30c8.gitlab.io/

Public repository:
https://gitlab.com/jakubrojicek11/sentinel-ir-playground

Implementation snapshot:
https://gitlab.com/jakubrojicek11/sentinel-ir-playground/-/tree/9267d4781f41d439e2085e7b920235480f113876/

Try the examples, paste your own code or open a file from your device.

I am particularly interested in feedback about the mobile experience, browser compatibility and whether the information presented by the playground is useful in everyday development.

This is the first beta. There are still things to improve.

But one thing is already working: I can open my own structural code analyzer from a browser on my phone, without setting up a development environment.

Sometimes making a tool easier to use is just as important as making the tool itself more powerful.

One tap. Your code. Your device. No upload.

Thanks for trying it.

I tried it, here is an example:


Compact IR:

{
"analysisStatus": "complete",
"language": "typescript",
"mission": {
"target": "sentinel-market-relay-prototype.json",
"objective": "general_optimization"
},
"world": {
"pressure": 0.5,
"confidence": 0.75,
"budget": 0.015,
"risk": "low"
},
"constraints": [
"preserve_api",
"avoid_breaking_changes"
],
"forbidden": [],
"summary": {
"size": 8337,
"lines": 13,
"hasCrypto": false,
"hasFilesystem": false,
"hasNetwork": false
},
"facts": {
"ast": true
}
}


Explanatory note:

JSON is basically just the shipping box here. It's used to bring the code in, and then to ship the final analysis out. The box itself is JSON, but the actual content inside describes the TypeScript architecture.

Next Python:

Top comments (0)