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 data sources

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

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 data sources. 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

Data

Manage all your data sources in one unified view. The Data section combines agent connections and trace files, organized into three subsections for easy access.

Active

Shows currently connected agents and open trace files.

Visual indicators:

  • Connected (green dot) - Live agent connection active
  • Loading (spinner) - Connection or file loading in progress
  • Error (red dot) - Connection failed or file error

Pinned

Frequently used connections and traces that you want quick access to. Pinned items persist across sessions and appear at the top of your data list.

Features:

  • Pin any connection or trace for quick access
  • Pinned items stay visible regardless of recent activity
  • Organize your most-used data sources

Recent

Previous connections and traces, sorted by most recent access time.

Features:

  • Automatic tracking of recently used data sources
  • Quick access to previously opened files and connections
  • Remove individual items from history

Data Section Features

Adding Data Sources:

Action Method
Connect to agent Click "Add Connection" or click saved connection
Open trace file Click "Open Trace" or double-click a file

Status Indicators:

Status Icon Description
Connected Green dot Live agent connection active
Loading Spinner Connection/load in progress
Error Red dot Failed connection or load error
Pinned Pin icon Item is pinned for quick access

Search

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

  • Layouts - Searches by name, creator email, and ID
  • Data - Searches across all subsections by address, filename, 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