Skip to content

Sidebars

Zelos has two resizable sidebars that provide access to different aspects of your workspace:

  • Left Sidebar - Browse and add signals, actions, and extensions
  • Right Sidebar - Manage layouts and connections

Both sidebars can be toggled, resized, and their states persist across sessions.

Toggle Sidebars

Sidebar Keyboard UI Button Location
Left Cmd+B / Ctrl+B Sidebar icon Title bar (top-right)
Right Cmd+J / Ctrl+J Panel icon Title bar (top-right)

Resizing Sidebars

Both sidebars can be resized by dragging their edge handles:

  • Left sidebar - Drag the right edge
  • Right sidebar - Drag the left edge
  • Snap-to-close - Dragging below 5% width automatically closes the sidebar
  • Default width - 18% of viewport (remembers your last size)
  • Maximum width - Left: 55%, Right: 50%

Quick Close

Drag a sidebar edge toward the window edge to quickly close it. Your size preference is remembered when you reopen it.

Section Structure

Both sidebars contain collapsible sections that can be individually resized:

  • Click section header to expand or collapse
  • Drag dividers between sections to adjust height
  • Section actions (⋮ menu) for section-specific operations
  • Section states persist per workspace

The left sidebar provides access to your data sources and tools. It contains three sections, with visibility depending on your workspace mode.

Sections

Signals (Always visible)

Browse and add data signals from your connected agent or trace file.

Actions (Live mode only)

Execute commands and operations on your connected agent.

Extensions (Live mode only)

Manage and control installed extensions.

Mode-Based Visibility

Actions and Extensions are only visible when connected to a live agent. When working with trace files, only Signals is available.

A unified search bar at the top searches across all left sidebar sections.

Features:

  • Real-time filtering as you type
  • Persistent per workspace
  • Full-path matching across hierarchy (e.g., motor_controller/status/rpm)
  • Glob patterns with wildcards (*INV*rx*Real*)
  • Auto-expansion of matching folders
  • Match counter shows number of results

Pattern Examples:

Pattern Finds Description
temp temperature, temp_sensor Partial match (auto-wraps to *temp*)
*inv*voltage* inverter/power/voltage_input Multi-wildcard across paths
motor?1 motor01, motorA1 ? matches one character

Shortcuts:

  • Ctrl+F - Focus search
  • Esc - Clear search (when focused)

Tree Interactions

Both Signals and Actions use hierarchical trees with consistent interaction patterns.

Adding Items

Method Action Result
Drag & Drop Drag item to panel area Adds to existing or creates new panel
Double-Click Double-click item Creates new panel
Folder drag Drag a folder Adds all items within (respects search filter)

Multi-Select

Action Shortcut
Toggle selection Cmd+Click / Ctrl+Click
Range select Shift+Click
Select all visible Cmd+A / Ctrl+A
Deselect all Esc or click outside tree

Once selected, drag any selected item to add them all to a panel.

Smart Selection

When searching, Cmd+A / Ctrl+A selects only visible search results. Selections automatically clear after successful drag and drop.

Section Actions

Click the ⋮ menu in any section header:

  • Expand All - Open all folders
  • Collapse All - Close all folders

Signals

Browse and add data signals from your connected agent or trace file.

Signal Hierarchy

Signals are organized hierarchically with support for nested events:

📁 Source
  └── 📁 Event (supports nesting: event/sub_event/...)
      └── 📊 Field

Example: robot/sensors/temperature.value

  • Source: robot
  • Event: sensors/temperature (nested)
  • Field: value

Visual Features

  • Data type icons - Numeric, string, and binary data use different icons
  • Indent guides - Visual hierarchy depth indicators
  • Tooltips - Full path and data type on hover
  • Color-coded - Empty fields shown with muted colors

Actions

Execute commands and operations on your connected agent.

Live Mode Only

Actions are only available when connected to a live agent. This section is hidden when working with trace files.

Action Hierarchy

Actions are organized by namespace and category:

📁 Namespace
  └── 📁 Category
      └── ⚡ Action

Action Panels

Once added to your workspace, action panels provide parameter inputs, execute button, result display, and execution history.

Extensions

Manage and control extensions directly from the left sidebar.

Live Mode Only

Extensions are only available when connected to a live agent. This section is hidden when working with trace files.

Extension Controls

Control Action
Click extension Open extension interface
Play/Stop Start or stop extension
Settings Configure extension parameters

Extension States

  • Running (🟢) - Active and operational
  • Stopped (🔴) - Installed but not running

The right sidebar helps you manage workspace layouts and agent connections. Toggle it with Cmd+J / Ctrl+J or the panel button in the title bar.

Layouts

Save, load, and manage different panel arrangements for your workspace.

Features:

  • Save - Update current layout with your changes
  • Save As - Create a new layout from current arrangement
  • Personal/Shared toggle - Control layout visibility (user vs team)
  • Layout actions (dropdown per layout):
  • Rename - Edit layout name inline
  • Share with Team - Convert personal layout to shared
  • Delete - Remove layout permanently

Visual indicators:

  • Active layout - Highlighted with colored border
  • Modified - Shows when unsaved changes exist
  • Personal vs Shared - Icon indicates visibility

Interaction:

  • Click a layout to load it
  • Enter to save when editing name
  • Esc to cancel editing

Connections

Manage saved agent connections and open trace files.

Features:

  • Add Connection - Save a new agent address
  • Disconnect - Disconnect from current agent
  • Open Trace - Load a trace file for analysis
  • Delete - Remove saved connection (via dropdown menu)

Visual indicators:

  • Active connection - Highlighted with green status dot
  • Loading state - Shown during connection attempts

Interaction:

  • Click a connection to connect to that agent
  • Enter to connect when entering address
  • Esc to cancel connection input

Search

The right sidebar has its own search bar that filters both Layouts and Connections sections:

  • Layouts - Searches by name, creator email, and ID
  • Connections - Searches by address and ID
  • Ctrl+F - Focus search
  • Esc - Clear search (when focused)

Keyboard Shortcuts

Action Shortcut
Toggle left sidebar Cmd+B / Ctrl+B
Toggle right sidebar Cmd+J / Ctrl+J
Focus search Ctrl+F

Tree Navigation (Signals/Actions)

Action Shortcut
Toggle selection Cmd+Click / Ctrl+Click
Range select Shift+Click
Select all visible Cmd+A / Ctrl+A
Deselect all Esc or click outside
Navigate Arrow keys
Expand/collapse folder Arrow Left/Right
Activate item Enter or double-click

Next Steps