UI Layout and Navigation

What This Chapter Covers

This chapter explains what each region of the PAIO window is responsible for (header, Explorer, editor, bottom panels, and status bar), what each menu item and button actually does, and where a label differs from the real behavior. It is written for users opening PAIO for the first time and for users looking for a specific feature on screen. There are no prerequisites. Installation and sign-in are covered in 03. Installation, Login and License, and the workspace and project structure in 04. Workspaces and Projects. For a quick look at the shortcuts alone, see 19. Keyboard Shortcuts.

5.1 Header (Top Bar)

5.1.1 The Two Menus

PAIO has two separate menus.

1. The menu bar drawn by the app — Project, Edit, View, and Help, shown on the left side of the header. Clicking an item runs the action on the spot. While one menu is open, hovering over another menu name switches directly to that menu.
2. The native application menu — on Windows and Linux this is not visible in the window. This menu is responsible for registering shortcuts (accelerators), not for display. On macOS it appears in the menu bar at the top of the screen.

The two menus hold different items. The "Behavior" column in the tables below always describes the menu drawn by the app, and the two menus diverge as follows.

Area	App-Rendered Menu	Native Menu
Project	Has Save All	No Save All
Edit	Undo · Redo · Cut · Copy · Paste · Select All	The same items plus Delete
View	Toggle Sidebar · Toggle Panel · three zoom items · Toggle Full Screen	Reload · Force Reload · three zoom items · Toggle Fullscreen
Help	Report Issue opens https://autosar.io/support/qna	Report Issue opens https://github.com/popcornsar/PAIO/issues

5.1.2 Project Menu

The Project menu holds the following items.

Item	Listed Shortcut	Behavior
New Project	Ctrl+N	Opens the new project flow. If no workspace is open, a workspace selection dialog appears first
Quick Start	—	Creates a new project and then opens the AI workflow editor. If there is no workspace, the workspace selection step runs first
Open Workspace...	Ctrl+O	Opens the workspace folder selection dialog
Save	Ctrl+S	Saves the active editor in the active group
Save As...	Ctrl+Shift+S	Does nothing (see the note below)
Save All	—	Saves every modified editor in the active project
Exit	Alt+F4	Closes the window. If there are unsaved changes, PAIO asks whether to save first

New Project, Quick Start, Save, and Save All run only after passing the license gate. If the license has expired or is read-only, an upgrade dialog appears instead of the action (see 03. Installation, Login and License). Open Workspace... has no gate.

Alt+F4 is the window close handled by the OS, not a key the app registers. The app does, however, intercept the window close itself and run the save confirmation, so Exit in the header, the ✕ at the top right of the window, and Alt+F4 all follow the same exit flow.

Save As... does nothing. The menu item and the command palette entry are both exposed, but neither clicking the menu nor pressing Ctrl+Shift+S has any global effect. "Save as" works in only two places: the IVC editor (the Save IVC Diagram dialog opens) and the DataType editor (the Save DataTypes dialog opens).

Save All saves only the active project. A single window can hold editors from several projects, and Save All in the menu narrows its scope to the project the active tab belongs to. If you choose Save in the save confirmation that appears when you close the app, PAIO saves the changes in all open projects at that point. If you choose Discard in the same confirmation, it closes without saving anything.

5.1.3 Edit Menu

The Edit menu holds the following items.

Item	Listed Shortcut	Behavior
Undo	Ctrl+Z	Reverts the most recent operation in the project history
Redo	Ctrl+Y	Reapplies a reverted operation
Cut	Ctrl+X	Runs the browser clipboard command (cut)
Copy	Ctrl+C	Runs the browser clipboard command (copy)
Paste	Ctrl+V	Runs the browser clipboard command (paste)
Select All	Ctrl+A	Runs the browser select-all command

Cut, Copy, Paste, and Select All are browser commands that act on text input elements. They do not copy canvas nodes or table rows.

The Undo / Redo items also show the name of the operation to be reverted (for example, Undo Move — ECU_1 › CAN_Conn). When there is nothing to revert, the item is disabled and the label reads only Undo or Redo.

5.1.4 View Menu

The View menu holds the following items.

Item	Listed Shortcut	Behavior
Toggle Sidebar	Ctrl+B	Shows or hides the project Explorer on the left
Toggle Panel	Ctrl+J	Shows or hides the Utility panel (History / Problems)
Zoom In	Ctrl++	Increases the zoom level by 0.1
Zoom Out	Ctrl+-	Decreases the zoom level by 0.1 (lower bound 0.5x)
Reset Zoom	Ctrl+0	Returns the zoom level to 1.0x
Toggle Full Screen	F11	Toggles full screen

Be careful with the Ctrl+J label. The menu lists Ctrl+J next to Toggle Panel, but on the keyboard Ctrl+J actually toggles the terminal panel. There is no shortcut that opens the Utility panel from the keyboard, so use the menu item or the panel button in the status bar.

Clicking the menu and pressing the key change the zoom level in different ways (see 05.7).

5.1.5 Help Menu

The Help menu holds the following items.

Item	Behavior
Report Issue	Opens https://autosar.io/support/qna in the default browser
About PAIO	Opens the version information dialog
Check for Updates	Runs an update check and shows the result as a toast at the bottom right

The About PAIO dialog holds the title PopcornSAR PAIO, Version: <version>, the product description, the contact address contact@popcornsar.com, and the copyright notice. You can close it with the OK button, the × at the top right, a click outside the dialog, or Escape.

The result of Check for Updates appears as a toast titled Software Update at the bottom right. You can also close the toast with the × at its top right. For the wording and buttons of the result toast and for the background check behavior, see 3.5.

5.1.6 The Right Side of the Header

The right side of the header holds the following elements.

Element	Behavior
Robot icon	Opens and closes the AI Chat dock on the right. The tooltip is AI Chat Panel
User icon	Opens a dropdown holding Profile and Sign Out
–	Minimizes the window (tooltip Minimize)
□ / ⧉	Maximizes the window or restores its previous size (tooltip Maximize / Restore Down)
✕	Closes the window (tooltip Close)

If the license has expired and you have no edit permission, the robot icon is disabled and its tooltip changes to Plan expired. The icon of a signed-in user shows the initials taken from the name (up to two letters). Sign Out shows a confirmation only when unsaved tabs exist, then signs out and brings up the sign-in screen.

5.1.7 The Title in the Center of the Header

The title in the center of the header is always fixed to PAIO. It does not show the workspace name or the remote connection state. You can check the remote connection state in the remote indicator on the left of the status bar.

5.2 Project Explorer (Left)

The sidebar header shows the workspace folder name together with the kind of connection. The header reads as follows per state.

State	Header
No workspace	EXPLORER
Local	EXPLORER: <folder>
SSH connection	EXPLORER: <folder> [SSH: <host>]
WSL	EXPLORER: <folder> [WSL: <distribution>]
Container	EXPLORER: <folder> [Container: <container>]

If the container name is unknown, the trailing part shortens to [Container].

There are three buttons at the right of the header.

Button	Tooltip	Behavior
Refresh	Refresh Explorer	Reads the tree again
Collapse/expand	Collapse All	Collapses everything if at least one node is expanded, and expands everything if none is
Three dots	More Actions...	Clicking it does nothing

How to operate the tree and how the project is structured are covered in 04. Workspaces and Projects. The keys used in the Explorer are listed in 18.8 Explorer.

5.3 Editor Area

5.3.1 Welcome Screen

When no tab is open, the welcome screen appears. It shows the title Welcome to PAIO, the subtitle Software Defined Vehicle Development Tool, and PAIO v<version>. The buttons below depend on the connection state.

• Local: two buttons, Open Workspace and New Project
• During an SSH, WSL, or container session: one button, Open Folder

As soon as you open a tab, the welcome screen disappears and the editor appears.

5.3.2 Tabs

Tabs support the following actions.

Action	Result
Click	Activates the tab
Enter or Space (with the tab focused)	Activates the tab
Middle-click	Closes the tab
✕ button	Closes the tab
Right-click	Opens the tab context menu
Drag	Reorders the tab, moves it to another group, or splits

Hovering over an editor tab title shows the full file path as a tooltip. The title format is project:node (for example, HONDA:System). If no project can be found for the node path, only the node name appears.

A modified tab carries a dirty marker (●). This marker is derived from whether any operation is recorded in the edit history. It therefore disappears when you save the edit, and also when you undo back to the save point.

When the tabs exceed the width of the tab bar, the tab bar scrolls horizontally. A thin scroll bar appears on hover. Note that there is no button that lists the overflowing tabs.

You can open at most 20 tabs across all groups combined. Once the limit is reached, no new tab opens and nothing is shown on screen (only the developer console records Maximum number of tabs (20) reached). Opening the same file again does not create a new tab; it moves to the tab that is already open.

5.3.3 Tab Context Menu

Right-clicking a tab brings up four items.

Item	Behavior
Close	Closes that tab. If it has unsaved changes, PAIO asks whether to save
Close Others	Closes the rest of the tabs in the same group, keeping that tab
Close Saved	Closes only the tabs in the same group that have no unsaved changes
Close All	Closes every tab in the same group

The menu position is corrected so that it does not go off screen, and it closes on Escape, on an outside click, or on a right-click elsewhere. Move between items with ArrowUp, ArrowDown, Home, and End, and run an item with Enter or Space.

If you use Close on a tab with unsaved changes, the Unsaved Changes dialog appears with the body Do you want to save the changes to <tab title>?. Save saves and then closes, Discard closes without saving, and Cancel does nothing. If the save fails with an error, the tab stays open.

Close Others and Close All do not ask whether to save. These two items close their target tabs immediately, including tabs with unsaved changes. To keep unsaved edits, use Close Saved, or save first and then close.

5.3.4 Split View

There is no menu item or button that performs a split. You create a split only by dragging and dropping a tab.

When you drag a tab and drop it somewhere, the result depends on where you drop it.

1. Drop it on the right half of the editor body → the group splits left and right, and the tab moves to the new right group.
2. Drop it on the left half of the editor body → no split happens, and the tab moves to that group. If it is the same group, nothing happens.
3. Drop it on the tab bar → within the same group the order changes, and across groups the tab moves to that group. A vertical line shows the insertion position.

A preview appears before the drop in both cases. On the right half only that half is covered; on the left half the whole body is covered with a dashed border and a faint highlight color. On the right half a rectangular marker with a vertical split line in the middle appears as well, so you can tell a "split" from a plain "move" by whether this marker is visible.

A pane created this way is called an editor group. Splitting supports the horizontal direction only. There is no way to split top and bottom. A newly created group and the existing group start at 50/50, and you change the ratio by dragging the divider between them. A drag that would take either side below 10% is ignored. A group that becomes empty because all of its tabs moved away disappears automatically, and the remaining groups share the freed width. When you close the last tab of the last group, the split is released and the welcome screen returns.

5.3.5 Editor Types

A tab opens in one of the editors below depending on the node type. If the extension is an image (.png, .jpg, .jpeg, .gif, .svg, .webp, .bmp), the file opens in the image viewer regardless of the type.

There are nine model editors.

Type	Display Name	Description
QuickStartPage	Quick Start	AUTOSAR template-based workflow generator
SystemPage	System	System configuration and properties
IvcPage	In-Vehicle Network	In-vehicle communication topology
SignalPage	Signal	Signal / PDU / Frame dictionary
VfbPage	VFB	Virtual Functional Bus architecture
InterfacePage	Interface	Interface dictionary
DataTypePage	Data Type	Data type dictionary
ModuleDefinitionPage	Module Definition	ECUC Module Definition editor
ModuleConfigPage	Module Config	ECUC Module Configuration editor

The remaining six are file editors and viewers.

Type	Display Name	Description
CodeEditor	Code	Monaco-based editor that opens XML / ARXML / DBC
CCodeEditor	C/C++ Code	Editor for C, C++, and Rust sources
MarkdownEditor	Markdown	Markdown document editor
TextEditor	Text	Plain text editor
ImageViewer	Image	Image viewer
HtmlPreview	HTML	Rendered HTML preview

5.3.6 Save, Undo, and Redo

Every editable editor offers save, undo, and redo together, and all three work through the single edit history each project has. The following therefore holds.

• You can revert an edit made in any editor with Edit ▸ Undo.
• Even when the active tab is a non-editable editor (code, image, or text), Edit ▸ Undo and the Undo command in the command palette still work, and PAIO moves automatically to the editor that holds the reverted target. The physical Ctrl+Z, by contrast, is handled by each editor itself, so nothing happens on a non-editable tab.
• Saving records that point as the "no changes" baseline. The history is not cleared, so you can keep undoing after a save, and returning to the save point puts the project back in the no-changes state.
• Even with several groups after a split, Undo, Redo, and Save from the menu and the command palette run only once, in the active group.

The physical Ctrl+S is handled by each editor within its own area. A Ctrl+S that no editor catches (for example, right after you click a popup menu and focus falls back to the body) saves through exactly the same path as the Save menu item. That is not the case if an editor has already consumed the key. The view mode of the XML editor is one such case: there Ctrl+S is consumed and no save takes place.

5.3.7 External Change Detection

When a file an editor has open changes externally (through an import, another tool, a remote sync, and so on), PAIO reads the content again and reflects it on screen. However, it does not re-read while unsaved edits exist or while an edit is in progress.

This is an intentional safeguard, not a bug. A re-read would make the user's unsaved edits vanish without a trace, so PAIO chooses edit preservation over refreshing the screen. In that case a warning appears to report that no re-read happened, in the form <model> file changed on disk. Keeping your unsaved edits - save to overwrite the external change. (if it repeats for the same file within 5 seconds, it is shown only once). The same applies while an open configuration dialog is being edited: PAIO does not re-read.

5.3.8 XML / ARXML Editor

Opening an .arxml, .xml, or .dbc file, for example one under export/, brings up the Monaco-based editor. It has a toolbar at the top, the edit area in the middle, and the PROBLEMS panel and a status line at the bottom. The toolbar buttons are as follows.

Button	Tooltip	Behavior
Eye/pencil icon	Switch to Edit mode / Switch to View mode	Switches between view mode and edit mode
Save	Save (Ctrl+S)	Saves the file
Undo	Undo (Ctrl+Z)	Reverts a Monaco edit
Redo	Redo (Ctrl+Y)	Reapplies a Monaco edit
Format	Format XML (Shift+Alt+F)	Indents and tidies the XML

View mode is the default, and in it the save, undo, redo, and format buttons are all disabled. They become enabled once you click the eye icon to switch to edit mode. The format button is not shown at all for .dbc files. Only the button is hidden, though: the Shift+Alt+F key stays alive, so pressing it with a .dbc file in edit mode runs the XML formatting function as it is.

The status line at the bottom shows the cursor position (Ln 1, Col 1), the encoding (UTF-8), the number of selected characters (N selected), the schema version (Schema: ...), and the validation summary (✓ No problems, or the error and warning counts). The selection, schema, and validation items appear only when that information exists.

The PROBLEMS panel is collapsed by default, and you click its header to expand it. It expands on its own as soon as any error is detected. Once expanded, it splits the space with the edit area at roughly 7 to 3. When there is no problem, it shows No problems found. Clicking a row moves to that position.

Validation runs once right after the file opens, and after that it runs again shortly after every change to the content. The first validation runs in view mode as well, so you can see the result without switching to edit mode. The validator used depends on the extension.

Extension	Validator	Notes
.arxml · .xml	AUTOSAR schema validation	Selects the release from the AUTOSAR_NNNNN.xsd number written in the document's xsi:schemaLocation, and also shows that result in Schema: ... on the status line
.dbc	DBC format validation	A line-by-line check; no schema display appears

DBC validation reports as an error: a frame ID out of range; a DLC that is negative or greater than 64; a signal whose start bit or bit length falls outside the DLC range; a factor of 0; a missing mandatory section; a missing semicolon on a VAL_ line; an unclosed CM_ comment; and a character that is not allowed in a name. It reports as a warning: overlapping signal bits within one frame; duplicate frame or signal names; a minimum greater than the maximum; and an empty sender.

In edit mode, typing < suggests the AUTOSAR child elements that may appear under the current parent element through autocompletion.

5.4 Bottom Panels

Below the editor area there are three mutually independent panels (Utility, TERMINAL, and VALIDATION). The three panels stack in that order from top to bottom, and each can be turned on and off separately. You adjust the height by dragging the top divider. The AI Chat dock is the third column of the body, and when it opens the editor area shrinks by that much.

Each region is shown by default as follows. You can resize all of them by dragging their divider.

Area	Shown by Default
Left sidebar (EXPLORER)	Shown
Utility panel	Hidden
TERMINAL panel	Hidden
VALIDATION panel	Hidden
AI Chat dock	Hidden

The visibility and size of all five regions are stored, so they persist when you restart the app.

5.4.1 Utility Panel — History / Problems

The panel has two tabs, History and Problems, and History is the default. Close the panel with the ✕ at the top right (tooltip Close Panel).

History shows the edit history of the active project, newest first. It is composed as follows, from the top.

1. Operations that can be redone (shown dimmed)
2. The Current state marker line
3. Operations already applied
4. The Initial state row

Each row consists of an icon, the operation name, a tag for the target editor or file, and the time as HH:MM:SS; hovering shows the target file path and the full time as a tooltip. A single click selects, and a double-click moves to that point. Double-clicking a dimmed row moves forward. Double-clicking Initial state works only when at least one operation has been applied. The list accepts no input while a move is in progress.

When there is no history at all, it shows No edits yet in this project. (or No edits yet. when no active project has been determined).

History shows only the history of the active project. Even with several projects open in one window, operations from another project do not appear, and moving to a point in time never reverts another project's operations.

The Problems tab currently shows only the message No problems have been detected. The actual diagnostics appear elsewhere. Code and XML diagnostics appear in the PROBLEMS panel at the bottom of the editor in question, and model constraint violations appear in the VALIDATION panel.

5.4.2 TERMINAL Panel

The terminal panel holds the following buttons.

Button	Tooltip	Behavior
-	Decrease	Decreases the font size
+	Increase	Increases the font size
New terminal	New Terminal	Adds a terminal
Split	Split Terminal	Splits the terminal
Kill	Kill Terminal	Terminates the current terminal
✕	Close Panel	Closes the panel

When you open the panel with Ctrl+J or Ctrl+` and no terminal exists, PAIO creates one automatically. For details, see 16. Code Editing, Build, Terminal and Documents.

5.4.3 VALIDATION Panel

This panel shows the list of AUTOSAR constraint violations as a table. It has four columns, Element Type, Name, Description, and Constr, and you adjust the widths by dragging the column borders. There are three buttons at the right of the header.

Button	Tooltip	Behavior
Minimize	Minimize	Reduces the panel to its minimum height
Maximize	Maximize / Restore	Grows the panel to the maximum allowed height, or returns it to its previous height
✕	Close Panel	Closes the panel

When several elements violate the same constraint, they first appear as a group row. Clicking the group row expands the collapsed list (tooltip Expand to mark each element individually), and clicking an individual violation row opens the editor that holds the element and selects it (tooltip Go to the element to fix). For details, see 14. Validation.

5.5 Status Bar (Bottom)

5.5.1 Left Side

The remote indicator (the >< icon) is always at the far left. While not connected it is just an icon with the tooltip Open a Remote Window; once connected it gets a green background and a label.

State	Label
Not connected	(none)
SSH connection	SSH: <host>
Connecting	Connecting...
Connection error	Connection Error
Container	Container: <container>
WSL	WSL: <distribution>

While connected, · Click to manage is appended to the tooltip. Clicking it opens the remote connection menu (see 17. Remote Development (SSH, Dev Container, WSL)).

To the right of it are four panel toggle buttons.

Button	Tooltip	Behavior
Explorer	Toggle Project Explorer (Ctrl+B)	Toggles the left sidebar
Panel	Toggle Panel (History / Problems)	Toggles the Utility panel
Terminal	Toggle Terminal (Ctrl+`)	Toggles the terminal panel
Validation	Toggle Validation	Toggles the VALIDATION panel

While a panel is open, its button is highlighted as active.

The validation button carries a violation count badge. The badge disappears when the count is 0, and counts above 99 appear as 99+. The color follows the most severe level (error, then warning, then info). The button tooltip then changes to Validation: N error(s), N warning(s), N info(s). When the validation itself could not run, the badge shows ! and the tooltip becomes Validation could not run — open the Validation panel. This distinguishes a failure from "zero violations".

To the right of the buttons is a status string. It reads Ready normally, and Loading... while an operation is in progress.

5.5.2 Right Side

The right side of the status bar holds the following elements.

Element	Display	Behavior
License	Trial — 30d / Pro / Pro - 5 days / License Expired	Clicking it opens a dialog
Update icon	Appears only when a new version is available	Clicking it checks for updates again and shows the result toast
Version	In the form v0.5.0	—

The dialog that opens when you click the license display depends on the plan. For Trial the upgrade notice opens; for any other plan the License Info dialog opens (plan, expiry date, and days remaining). When expiry is near the title becomes License Expiring Soon, and when the license has already expired it becomes License Expired and a Renew Pro button appears with it. The tooltip on hover is Click to manage license.

The tooltip of the update icon is Update available · <version>. For the behavior on click and the result toast, see 3.5.

5.6 Command Palette

Open it with Ctrl+Shift+P, and close it by pressing the same keys again, pressing Escape, or clicking outside. The placeholder in the field reads Type a command..., preceded by a > mark.

The search is a fuzzy search. An entry is included in the results as long as the characters you type appear, in that order, within category + name (for example, tgt matches View: Toggle Terminal). When nothing matches, it shows No matching commands.

The palette uses the following keys.

Key	Behavior
ArrowDown / ArrowUp	Move between items
Tab / Shift+Tab	Move between items
Enter	Run the selected command
Escape	Close

In the list, the item you hover is selected immediately, and clicking it runs the command.

5.6.1 Registered Commands

There are 30 registered commands in total. The table below is the complete list.

Category	Commands
Project	New Project, Open Workspace...
File	Save, Save As..., Save All
Model	Derive Signal (CP-SOA), PARA: Import Platform
Edit	Undo, Redo, Cut, Copy, Paste, Select All
View	Toggle Sidebar, Toggle Panel, Toggle Terminal, Zoom In, Zoom Out, Reset Zoom, Toggle Full Screen
AI	Manage AI Accounts...
Help	Report Issue, About PAIO
Remote-SSH	Connect to SSH Host..., Open Remote Folder..., Disconnect from SSH Host, Add New SSH Host...
WSL	New WSL Terminal, Open WSL Folder..., Connect to WSL...

• Derive Signal (CP-SOA): Runs CP SOA signal derivation for the project the active tab belongs to. If no editor is open, the message Open an editor of the target project first appears.
• PARA: Import Platform: Injects the PopcornSAR AP default configuration (PARA Base Set) into the project. A VFB editor with an HPC-mapped composition must be open; otherwise the message Open a VFB editor with an HPC-mapped composition, or use the PARA Platform button in the Machine Configuration dialog. appears.
• New WSL Terminal and Connect to WSL... differ only in name and run the same action (the WSL distribution selection dialog).

5.6.2 Commands That Do Nothing When Run

The 13 commands below appear in the list but do nothing when run. Items with the same name work correctly when chosen from the header menu, so use the menu when you need these features.

Category	Non-Functional Command	Use Instead
File	Save As...	None (see 5.1.2)
Edit	Cut, Copy, Paste, Select All	The Edit menu or the standard editing keys
View	Toggle Sidebar, Toggle Panel, Zoom In, Zoom Out, Reset Zoom, Toggle Full Screen	The View menu or the status bar buttons
View	Toggle Terminal	The terminal button in the status bar or Ctrl+`
Help	Report Issue	The Help menu

5.7 Screen Zoom

The View ▸ Zoom In, Zoom Out, and Reset Zoom menu items adjust the zoom level of the app body in steps of 0.1. The lower bound is 0.5x, and there is no upper bound on zooming in. Reset Zoom returns the level to 1.0x.

The Ctrl++, Ctrl+-, and Ctrl+0 keys listed in the menu are handled by the default accelerators of the zoom items registered in the native menu, not by the app screen, and they change the zoom level in a different way from clicking the menu item. Mixing the two paths can make the zoom level look inconsistent, so use only one of them.

Zooming inside the canvas editors (IVC and VFB) is separate from this. Rolling the wheel with Ctrl held over the canvas zooms only the canvas, within a range of 0.1x to 4.0x (see 18.2 Graphic Editors).