# 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)