How to use the workspace panel

This guide shows how to browse, preview, edit and run commands next to the conversation. It assumes Ori is running (see the getting started tutorial).

Steps

Click ⊞ Workspace in the header. The right-hand panel opens with the file tree of the agent's working directory (--cwd).
Preview a file: click it in the tree. Code appears with syntax highlighting; .md and .adoc files open in their rendered form, with a Rendered / Source toggle in the pane header. Images (.png, .jpg/.jpeg, .gif, .webp, .svg, .bmp, .ico, .avif — including draw.io's .drawio.svg / .drawio.png exports) show at natural size over a checkerboard, with their pixel dimensions underneath. Diagrams saved as .drawio / .dio XML render in the diagrams.net viewer, with the XML behind Source.
Edit a file: double-click it in the tree (or press Edit in the preview header). A ● marks unsaved changes; save with the Save button or Ctrl/Cmd+S.
Open a terminal: select the Terminal tab. A real shell starts in the working directory; it keeps running while you switch tabs or collapse the panel.
Resize the file tree: drag the thin vertical line between the tree and the tabs. It highlights on hover; the column follows the pointer between 120 px and 800 px. Double-click the line to return to the default width (14rem).

Variants

The tree's ⟳ button re-reads the working directory after the agent created or deleted files.
Binary files and files over 5 MiB are refused by the preview and editor with an explicit message; images are the exception, streamed by GET /api/raw without a cap.
The draw.io viewer is embed.diagrams.net, loaded in an iframe and fed the XML locally over its postMessage protocol (the diagram is not uploaded anywhere). In a browser that cannot reach that host, the pane says so after a few seconds and the Source view remains available. See the architecture explanation for why there is no offline renderer.
The shell is taken from $SHELL (falling back to bash, then sh); resize is automatic.
The file tree divider is keyboard-operable: focus it with Tab, then ← / → move it by 16 px, Home / End jump to the narrowest / widest width. The chosen width is remembered per browser (localStorage key ori.fileTreeWidth) and survives a page reload; clearing site data restores the default.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


# How to use the workspace panel

This guide shows how to browse, preview, edit and run commands next to the conversation. It assumes Ori is running (see the [getting started tutorial](../tutorials/getting-started.md)).

## Steps

1. Click **⊞ Workspace** in the header. The right-hand panel opens with the file tree of the agent's working directory (`--cwd`).
2. **Preview a file**: click it in the tree. Code appears with syntax highlighting; `.md` and `.adoc` files open in their rendered form, with a **Rendered / Source** toggle in the pane header. Images (`.png`, `.jpg`/`.jpeg`, `.gif`, `.webp`, `.svg`, `.bmp`, `.ico`, `.avif` — including draw.io's `.drawio.svg` / `.drawio.png` exports) show at natural size over a checkerboard, with their pixel dimensions underneath. Diagrams saved as `.drawio` / `.dio` XML render in the diagrams.net viewer, with the XML behind **Source**.
3. **Edit a file**: double-click it in the tree (or press **Edit** in the preview header). A **●** marks unsaved changes; save with the **Save** button or **Ctrl/Cmd+S**.
4. **Open a terminal**: select the **Terminal** tab. A real shell starts in the working directory; it keeps running while you switch tabs or collapse the panel.
5. **Resize the file tree**: drag the thin vertical line between the tree and the tabs. It highlights on hover; the column follows the pointer between 120 px and 800 px. Double-click the line to return to the default width (14rem).

## Variants

- The tree's **⟳** button re-reads the working directory after the agent created or deleted files.
- Binary files and files over 5 MiB are refused by the preview and editor with an explicit message; images are the exception, streamed by `GET /api/raw` without a cap.
- The draw.io viewer is `embed.diagrams.net`, loaded in an iframe and fed the XML locally over its postMessage protocol (the diagram is not uploaded anywhere). In a browser that cannot reach that host, the pane says so after a few seconds and the **Source** view remains available. See the [architecture explanation](../explanation/architecture.md) for why there is no offline renderer.
- The shell is taken from `$SHELL` (falling back to bash, then sh); resize is automatic.
- The file tree divider is keyboard-operable: focus it with **Tab**, then **←** / **→** move it by 16 px, **Home** / **End** jump to the narrowest / widest width. The chosen width is remembered per browser (localStorage key `ori.fileTreeWidth`) and survives a page reload; clearing site data restores the default.

## See also

- Endpoints and wire formats: [workspace API reference](../reference/workspace-api.md)
- Why panes survive tab switches: [explanation: architecture](../explanation/architecture.md)