UI Components

The five panel components that live in the resizable bottom strip — RoidList, RoidRunnerChannels, RoidPropertiesPanel, RoidRunnerLogger — plus the SlangViewerModal overlay.

RoidList

Displays the list of currently running roid processes. Each row shows the roid_id and three icon buttons. Clicking the row selects the roid and requests its bar history and slang source.

RoidInfo type

export interface RoidInfo {
  roid_id: string;  // Unique process identifier assigned by the hub
  pid:     number;  // OS process ID (0 when not yet determined)
}

Props

Prop	Type	Description
theme	'light' \| 'dark'	Controls background, border, and text colours.
roids	RoidInfo[]	Current list of running roids.
selectedRoidId	string \| null	Highlights the matching row with a left indigo border.
onSelect(roidId)	callback	Called when a row is clicked. Parent fetches bars and slang for the roid.
onKill(roidId)	callback	Shows an inline confirm popover; on confirm calls sendKillRoid via the hub.
onGetSlang(roidId)	callback	Sends get_slang command; opens SlangViewerModal.
onReload()	callback	Sends get_roids command; refreshes the list from the server.

Row buttons

View Slang (</> icon)

Calls onGetSlang. Opens SlangViewerModal for the row's roid_id.

Kill (✕ icon)

First click shows an inline "Kill?" confirm popover. Confirm button calls onKill.

Reload (⟳ header icon)

In the panel header. Calls onReload to refresh the full list.

RoidRunnerChannels

The channel visibility panel. It groups channel labels by their node prefix, shows the latest numeric value, and provides per-channel eye-toggle and per-node stack-toggle controls. Source symbol rows (e.g. AAPL) are always shown at the top without controls.

Channel grouping

groupChannels(channels) converts the flat label array into NodeGroup[]:

Single-channel node

Label has no dot (e.g. sma). Group has channels: null. Renders as a single flat row with eye + stack icons.

{ node: 'sma', labels: ['sma'], channels: null }

Multi-channel node

Labels share a prefix (e.g. ichimoku.conv, ichimoku.base). Renders as a collapsible group header + indented sub-rows. confidence and timestamp sub-channels are filtered out.

{ node: 'ichimoku', labels: ['ichimoku.conv', 'ichimoku.base'], channels: [{ch:'conv',…}, …] }

Props

Prop	Type	Description
channels	string[]	Ordered list of all channel labels. Position determines the colour index.
latestValues	Map<string, number>	Most recent value per label, shown inline next to the name.
hiddenChannels	Set<string>	Labels whose line series are hidden in the chart.
onToggleChannel(ch)	callback	Toggle a single label's visibility.
onToggleGroup(labels)	callback	All visible → hide all; any hidden → show all.
selectedNode	string \| null	Highlights the corresponding node row (indigo left border + background).
onSelectNode(varName)	callback	Called when the user clicks a node header row.
stackedChannels	Set<string>	Node names currently rendered in a dedicated stacked pane.
onToggleStack(node)	callback	Toggle a node's stacked-pane state.
sourceChannels	Set<string>	Symbol labels (OHLCV data sources). Rendered without eye/stack controls.

Colour assignment

Colours are assigned by the channel label's position in the channels array, modulo 12. The same LINE_COLORS palette is shared with RoidRunnerChart so the eye-toggle dot colour always matches the chart line.

[0]

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

RoidPropertiesPanel

Shows the inputs and parameters of the currently selected Slang node. Stateless — the parent owns selectedNode and slangNodes and passes them as props.

Props

Prop	Type	Description
theme	'light' \| 'dark'	Panel colours.
nodes	ParsedNode[]	All nodes parsed from the selected roid's Slang source.
selectedNode	string \| null	varName of the node to display.

Display layout

Title row

Shows varName (indigo accent) and funcName(…) (dimmed). Separated by a bottom border.

Input rows

One row per inputRef, labelled input1, input2, … (dim left column). Value shown in a neutral badge (grey background). Represents the variable names wired in from prior steps.

Parameter rows

One row per resolved parameter name → raw value. Left column uses text colour; right column value badge uses accent background (indigo tint) to visually distinguish params from inputs.

Empty state

"No nodes" shown when the nodes list is empty; "Select a node" when nodes exist but none is selected.

RoidRunnerLogger

A scrolling log panel that auto-scrolls to the latest entry. Each entry is colour-coded by type. The panel header has a Clear button (trash icon).

LogEntry type

export interface LogEntry {
  timestamp: Date;
  type:      'info' | 'success' | 'error' | 'request';
  message:   string;
}

Type colours

info

General log lines from runner process

success

Hub connected, roid spawned

error

Connection failure, validation errors

request

Decompiled slang lines sent to hub

Props

Prop	Type	Description
theme	'light' \| 'dark'	Controls background and text colours.
logs	LogEntry[]	Full log history to display. New entries at the end scroll into view automatically.
onClear	() => void	Clears the log array. Implemented in the parent by calling setLogs([]).

SlangViewerModal

A portal-based modal that displays the raw Slang source of a running roid. It is opened when the hub returns a get_slang response. It also provides two actions: Send to Graph (compile the slang into the graph editor) and Save to Library (persist via the Inventory API).

Props

Prop	Type	Description
theme	'light' \| 'dark'	Modal colour scheme.
roidId	string	The roid ID whose slang is shown (displayed in the modal title).
slang	string	The raw Slang source text displayed in a read-only pre block.
onClose	() => void	Closes the modal. Called on backdrop click or after a successful action.

Internal actions

Send to Graph

User clicks "Send to Graph" → showConfirm confirmation dialog appears.
On confirm: compileSlang(slang) compiles the source into the graph editor.
onClose() is called, closing the modal.

Save to Library

User clicks the save icon button → a name-input popup appears, positioned below the button via getBoundingClientRect().
User enters a name and confirms → apiSaveSlang(name, slang) is called.
On success: setCurrentSlang() marks it as the current script, inventoryPrependSlang() inserts it into the inventory panel list, openInventorySlangTab() switches to the Slang tab, onClose() closes the modal.

Hub & Commands Chart & Visualisation