nandi/ori · use-the-workspace.md

nandi/oripublic⑂ Fork 0

⑂ 00224b167266e7d496672adfe1e60fcffeab7e63

use-the-workspace.md · 24 lines · 2.7 KBmarkdown    Blame HistoryRaw
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme   1# How to use the workspace panel
3This 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)).
71. Click **⊞ Workspace** in the header. The right-hand panel opens with the file tree of the agent's working directory (`--cwd`).
82. **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**.
93. **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**.
104. **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.
115. **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).
13## Variants
15- The tree's **⟳** button re-reads the working directory after the agent created or deleted files.
16- 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.
17- 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.
18- The shell is taken from `$SHELL` (falling back to bash, then sh); resize is automatic.
19- 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.
21## See also
23- Endpoints and wire formats: [workspace API reference](../reference/workspace-api.md)
24- Why panes survive tab switches: [explanation: architecture](../explanation/architecture.md)

✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday	1	# How to use the workspace panel
	2
	3	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)).
	4
	5	## Steps
	6
	7	1. Click ⊞ Workspace in the header. The right-hand panel opens with the file tree of the agent's working directory (`--cwd`).
	8	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.
	9	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.
	10	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.
	11	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).
	12
	13	## Variants
	14
	15	- The tree's ⟳ button re-reads the working directory after the agent created or deleted files.
	16	- 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.
	17	- 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.
	18	- The shell is taken from `$SHELL` (falling back to bash, then sh); resize is automatic.
	19	- 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.
	20
	21	## See also
	22
	23	- Endpoints and wire formats: [workspace API reference](../reference/workspace-api.md)
	24	- Why panes survive tab switches: [explanation: architecture](../explanation/architecture.md)