IDE walkthrough

The entire JasperNode product is a browser IDE served by the runtime. This page tours it screen-by-screen so you know where everything lives. To follow along, open the IDE (see Getting started).

Note

The images below are real captures of the IDE. A few predate recent UI changes (the sidebar logo, the redesigned tag tree and tag properties, and the Scripting tab) and are queued for re-capture — see public/screenshots/README.md. The descriptions are accurate to the current build.

This is the tour — the reference pages name every control

This page orients you to each screen. For an exhaustive list of every button, field and status label, see the companion references: The IDE frame, Tag & logic screens, Connector screens and Diagnostics & settings.

The persistent frame

Every screen sits inside the same chrome:

• Left icon rail — the JasperNode logo sits at the top, above the primary navigation: Overview, Node Views (the tag tools), Connector Manager, and Diagnostics. At the bottom: toggles for the AI chat panel, dark mode, and your account menu.
• Right edge — the AI Agent panel. Always docked on the right (resizable, collapsible). Press ⌘K / Ctrl+K to focus it.
• Bottom status bar — node health, connector counts (active / configured / errors), the Logic Cycle Stop/Start control, and the version. A floating Logger button opens a log drawer from the bottom on most screens.

Overview

The landing dashboard — system health and live signals at a glance.

Every element on it:

| Card | Element | What it is | | ---- | ------- | ---------- | | Activity | unread-errors banner | N unread errors since you last checked, or Caught up · no unread errors — click to open them. | | | Tags | How many tags exist. | | | Scripts | How many scripts exist. | | | Active | How many scripts are currently active. | | | Inserts/s | Tag value writes per second right now. | | | Logic Cycle indicator | Whether the script runtime is RUNNING or stopped. | | Connectors | Active / Configured / Errors | Live connector counts. | | | OT / IT | The split between fieldbus and network connectors. | | | manage → | Opens the Connector Manager. | | Quick actions | Flow Exploration · Open Tag Tree · Connector Manager · Diagnostics | Shortcuts to the main screens. | | Recent activity | log feed + all → | The latest events (errors highlighted); all → opens the full Logger. |

The AI Agent panel on the right offers starter prompts on an empty chat. Every frame control (rail, status bar, AI panel) is named in The IDE frame.

Node Views

The left rail’s Node Views opens a tabbed workspace over your tags: Flow Exploration, Signal River, and Tag Tree.

Tag Tree

The primary place you author tags and logic — a two-pane view.

• Left — Tag Viewer. A searchable, VS Code-style tree with recents, multi-select and a right-click menu. Rows carry type icons (folders open/closed; leaves by value type) and a code glyph on scripted tags. The ＋ button adds a tag; Export / Import live in the panel header’s ⋮ menu.
• Right — Properties, with three tabs for the selected tag:
  • Basic — a status-first layout: a status icon row (plug / role / script), a value card with quality shown as a coloured dot, the path/name id, linked connectors, description, and rename / duplicate / delete.
  • Scripting — the logic editor (below).
  • Stats — triggers, extras and dependents, each clickable to walk the dependency graph.

The Scripting tab is the editor for a tag’s logic: a code editor, the trigger and extra lists, a Test panel that runs the saved script against synthetic values, Save (draft) → Deploy, and a Run once action. Deploying or enabling a script never runs it — it runs on its next trigger (or Run once). Live run stats (run count, average time, last error) show beneath it. A coloured dot on the tab flags an undeployed draft or a last-run error.

Flow Exploration

A causal tracer with no real PLC equivalent: pick a signal and expand its upstream causes and downstream effects across the dependency graph. The fastest way to answer “what drives this value, and what does it affect?”

Signal River

A whole-graph overview — a map of the node’s signals as an alternative to the tree, for spotting structure at a glance.

Connector Manager

Install, configure and monitor everything that bridges the node to the field and the cloud.

• A filterable catalog of connector types (All / Hardware (OT) / Cloud / IT), each card showing a short description and active/total counts, with configure →.
• An Instances table across all types: name, type, live status pill, latency, an Enabled toggle, and Configure.

Selecting a type opens its dedicated page (an Instances list plus, for some, Bench Tools). Editing an instance opens the connection settings, the value mapping table, and a live diagnostics panel — see the Modbus example in Connectors.

The AI Agent panel & Deploy Gate

The right-edge chat is where you work with the AI agent. Tool calls render inline; investigation runs freely, while a process-affecting change appears as a Deploy Gate card — a proposed-change diff, a test report, and Approve / Reject — that the agent waits on before the change goes live. Use @ to mention tags in your messages.

Diagnostics

Node health at a glance plus the full log.

• Host cards — hostname, CPU load, memory, and uptime (sourced from __sys/host/*).
• Logger — the node’s log stream (info / warning / error), also reachable from the floating Logger drawer on other screens.

Account, settings and theme

The account button at the bottom of the rail opens a menu to System Config, System Updates, and Report an Issue. Beside it, a control toggles dark / light mode. Sign-in itself happens on the Login screen (Login via JasperX), and a brand-new node shows a one-time Setup step first.

Keyboard & tips

• ⌘K / Ctrl+K — focus the AI chat.
• The Logic Cycle Stop/Start toggle (status bar) pauses or resumes all scripts; stopping asks for confirmation.
• Status pills are consistent everywhere: Connected (green), Disconnected/Error (red/amber), Stopped (muted).