Browser interface

The browser workspace puts the conversation, Albert's steps, the plan and the diff, the app and its tests, the repository's files and a terminal side by side. Start it from a terminal:

cd your-project
albertcode web

albertcode --ui does the same. It opens in your default browser, signed in, on the folder you started it in. To make albertcode always open the browser, set ALBERTCODE_SURFACE=ui. Each session has an address of its own, ending in /s/ and the session's id, so a bookmark or a reload opens it again.

The browser and the terminal interface work on the same sessions: a session started in one is there in the other, and what Albert does shows in both as it happens. If a page ever asks you to open AlbertCode from your terminal, run albertcode web again: a new version of AlbertCode signs in again.

The workspace

┌ AlbertCode   Session  Project  Git  Evidence  View  Settings  Help ─────────────────────────────────┐
│ SESSIONS     ‹ │ Show prices in euros   shop ⎇ main · Governed              │ Changes Files App Tests │
│ ✎ New session  │                                                              │ Context Task            │
│ ⌕ Find a sess… │  You     Show the prices in euros                            │                         │
│ ▾ S shop     3 │  Albert  ▸ 3 steps before answering                          │ The inspector: the      │
│   ● Show pri…  │  ┌ Task · Plan waiting for you ─────────────────────────┐   │ change, the files, the  │
│   ○ Fix the c… │  │ ✓ Read the project  ◆ Plan ready  ○ Build  ○ Checks  │   │ app, its tests, the     │
│ ▸ N notes    2 │  └ Approve and build · Revise · Reject ─────────────────┘   │ context, the task       │
│                │  ❯ Ask anything, or say what to change    Governed · model   │                         │
│                ├ Terminal (Ctrl+`) ───────────────────────────────────────────┤                         │
└ ● Live · shop · main ──────────────────────────── Governed · model · MCP 1/1 · Inspector ───────────┘

• The menu bar at the top: every command, by area. See The menus.
• Sessions, down the left: every project with its sessions under it, each with a lamp that says whether it is working (it moves), waiting for you (amber) or stopped with an error (red). New session starts one in the project you are in; Find a session searches titles and what was said. Each session's ⋯ has Rename, Pin, Stop, Archive and Delete, and ‹ folds the list to a rail of its projects.
• The conversation: your messages, Albert's answers, and each task as a card with Albert's steps as he takes them, what he read, wrote and ran, a stage at a time, and the answers its gate takes when it needs you. See While Albert works.
• The message box at the bottom: the mode (Governed; Direct, with Ask each write or Auto-approve; or Ask only), the model, the agent, and + to attach files. Type / for slash commands.
• The inspector on the right (Alt P): the change, the repository's files, the app, its browser tests, the context and the task in full. See The inspector.
• The terminal, under the conversation (Ctrl `). See Terminal.
• The status bar: whether the service is live, the folder and its branch, the mode, the model, the MCP servers connected, and a button for the inspector.

Every session (Alt B) shows every session as cards by day, searched across titles and what was said, with the projects on the left. On a narrow window the sessions and the inspector fold away and come back from the buttons at the top.

The menus

Session

Project

Git

Evidence

View

Settings

Help

The inspector

The inspector, on the right, holds what goes with the conversation. Alt P shows or hides it; on a narrow window it opens over the conversation.

Changes

The working tree's changes, file by file with their diffs, and the branch. A governed task's change stays in its own copy until you accept it, so it shows on its card, not here, until then.

Files

The repository's files, as a tree. Click a folder to open it and a file to read it, with line numbers; Files goes back to the tree. A file named in an answer opens here (see below).

The arrows move through the tree; → opens a folder, ← closes it, Enter opens a file. By design it will not work outside the repository or through a link, show or change Git's own folder, open or change a file that looks like it holds secrets (shown with a lock), or overwrite anything. Deleted items go to the Trash (the Recycle Bin on Windows), where you can restore them, and every change is recorded in the evidence ledger.

App

Run the app (or /preview) starts the repository's app with its dev script and shows it here, at desktop, tablet or phone width. The toolbar has Edit (change the page by clicking it), Logs, Reload, Open in browser, Restart and Stop the app. When the app fails or answers with an error, Ask Albert to fix puts what went wrong in the message box, to read and send. See Preview and browser tests.

Tests

The repository's browser tests, a step at a time: Albert writes them (as a task, so you approve the plan and the diff), the test runner is installed, a browser is found or downloaded, then Run tests checks every journey against the app. A failed test shows its error and screenshot, with Fix with Albert (a session of its own, given the error and how to run the test), Open the test, Download trace and Run again. See Preview and browser tests.

Context and Task

Context shows what this session's tasks used: tokens, the context each step had, and the cost when the provider gives one. Task shows the open task in full: its plan, every stage and step, its checks and reviews.

Terminal

Terminal in the Project menu (or Ctrl `) opens a real shell in the repository, under the conversation: zsh or bash on macOS and Linux, PowerShell on Windows.

• Turn it on first. The first time, the panel says what it allows: what you type runs on your computer as you, outside the limits AlbertCode puts on the agent. Turn on the terminal turns it on; Use my terminal app instead opens your own terminal in the repository.
• Tabs. New terminal (or Ctrl Shift `) opens another; each tab's × closes it.
• Size. Drag the line at its top. AlbertCode remembers the height.
• It keeps running. Hide it or reload the page: each shell carries on and comes back with what it wrote. A shell that has ended says so.

Only your own AlbertCode page can connect to it, a shared AlbertCode server never offers it, and no model key is in its environment. Turning it on or off and opening or closing a shell are recorded in the ledger; what you type is not. The ⋯ menu has Open my terminal app here and Turn the terminal off, which closes every shell it opened.

The command palette

Ctrl K (⌘ K on a Mac), or Every command in the Help menu, opens the palette: type to find a command, Enter to run it.

Slash commands

Typed at the start of the message box. Enter picks the highlighted one from the list; a command that needs words after it waits for them, and Enter again runs it.

A repository can have commands of its own (see Extending): /name … runs one, and /server:prompt … uses an MCP server's prompt. A repository's own /requirements, /architecture, /files or /terminal takes the place of AlbertCode's, since those names are not reserved.

Keyboard shortcuts

Keys and commands in the Help menu lists them all.

A file named in an answer

When Albert names a file in an answer, such as src/cart.py or src/cart.py:12, the name is a link: click it (or press Enter on it) and the file opens in the inspector's Files tab, at that line. Code in an answer is always shown as text, never run in the page.

The classic page

The page AlbertCode had before this workspace is still served, at /ui on the same service (The classic page in the Help menu), while every screen finishes moving over. It works on the same tasks, evidence and settings. The rest of this page describes it.

The classic layout

┌ Sidebar ──────────────┬ Top bar: session title · folder · Preview · Test · Files · Terminal · ⋮ ─────┐
│ AlbertCode  v1.51  ◧  │ ✓ Plan ─ ◆ Your approval ─ ○ Build in a copy ─ ○ Checks ─ … ─ ○ In your files│
│ ┌ repository ───────┐ │                                                                              │
│ │ S shop     Browse │ │   The page: Chat, or Requirements, Architecture, Tasks…                      │
│ │ Boundary · Run app│ │                                                   ┌ Side panel ──────────┐   │
│ └───────────────────┘ │                                                   │ Preview, Test,       │   │
│ ● New session         │                                                   │ Files, Terminal or   │   │
│ Search sessions       │                                                   │ a file               │   │
│ SESSIONS Projects|Days│                                                   └──────────────────────┘   │
│ ▾ S shop           3  │                                                                              │
│    ● Show prices…     │                                                                              │
│    ○ Fix the cart  1h │                                                                              │
│ ▸ N notes          2  │   ┌ message box · mode · model · attach ─────────────────────────────────┐   │
└───────────────────────┴───┴──────────────────────────────────────────────────────────────────────┴───┘

• The repository card at the top of the sidebar: the folder you are working in, with Browse to choose another, Boundary for its contract, and Run app to start its app with one command.
• New session and Search sessions, then every session under the folder it works in, the folder you used most recently first, each with a lamp that says whether its run is working or waiting for you. Days lists them by day instead. See Sessions and Chats about one thing.
• ◧, at the top right of the sidebar, folds it to a rail (see Folding the sidebar).
• The top bar: on Chat, the session's own title (click it to rename the session) and its folder; on any other page, that page's name. Then the side panels (Preview, Test, Files, Terminal), and the ⋮ menu with every other page and setting.
• The gate track, under the top bar while the session has a governed task: where the task stands, from the plan to your files. See While Albert works.
• The message box at the bottom of Chat, with the mode chip, the model chip, the agent chip and the attach button.

On a narrow window the sidebar folds away behind the ☰ button at the top left.

Folding the sidebar

◧ at the top right of the sidebar, or Fold the sidebar in the command palette, folds the sidebar to a rail of icons so the conversation gets the room. The rail keeps:

AlbertCode remembers whether the sidebar is folded. Focus mode hides it altogether.

Choosing a folder

Browse opens Open a repository, the folder picker:

• On the left: Recent folders, Places (your home and its usual folders) and Storage (your drives).
• The path at the top: click it (or press Ctrl/⌘ L) to type one.
• Back, Forward and Enclosing folder, and New folder to make one here.
• Folders that are Git repositories are marked Git.
• Type to filter the list. Enter goes into the highlighted folder; Open (or Ctrl/⌘ Enter) chooses it.

Boundary also has Type a path instead, and Inspect boundary to read the folder's contract.

Changing folder puts the current session in the sidebar under the folder it was about; opening it again goes back to that folder. A run it had going carries on.

The ⋮ menu

A dot on the ⋮ button means a task is waiting for you.

The classic command palette

Ctrl K (⌘ K on a Mac) opens the palette: type to find a command or a session, Enter to run it.

Below the commands, the palette lists your sessions, each with its folder and day: pick one to open it. Typing a folder's name finds its sessions.

Slash commands on the classic page

Typed in the message box, these are answered by the page and never sent to a model:

/plan <request> and /do <request> start a change (Chatting with Albert), /name … runs one of your custom commands, and /server:prompt … uses an MCP prompt.

Keys on the classic page

Files on the classic page

Files in the top bar shows the repository's files beside the chat. Click a folder to open it, and a file to read it in the side panel; Back to Files returns.

By design it will not: work outside the open repository or through a link; show or change Git's own folder; open or change a file that looks like it holds secrets (shown with a lock); or overwrite anything. Deleted items go to the Trash (the Recycle Bin on Windows), where you can restore them. Every change is recorded in the evidence ledger.

The terminal on the classic page

Terminal in the top bar (or Ctrl `) opens a real shell in the open repository: zsh or bash on macOS and Linux, PowerShell on Windows. It opens in the side panel; the button in its header docks it under the chat instead, and back. AlbertCode remembers where you put it.

• Tabs. + (or Ctrl Shift `) opens another. Close a tab with its ×, a middle-click, or Delete when the tab is focused.
• Size. Drag the side panel's edge; under the chat, drag the panel's top edge, or double-click it to maximise.
• Copy and paste. Select and press Ctrl C (with nothing selected it interrupts, as usual), or Ctrl Shift C and Ctrl Shift V. On a Mac, ⌘ C and ⌘ V.
• It keeps running. Hide it, move it, or reload the page: each shell carries on and comes back with what it wrote. A shell that has ended says so; press Enter for a new one.

The terminal is off until you turn it on. The first time, the panel explains what it allows: what you type runs on your computer as you, outside the limits AlbertCode puts on the agent. Only your own AlbertCode page can connect to it, a shared AlbertCode server never offers it, and no model key is in its environment. Turning it on or off and opening or closing a shell are recorded in the ledger; what you type is not. Turn it off from the panel's ⋯ menu, which closes every shell it opened; Open in your terminal app there opens your own terminal instead.

Preview and Test on the classic page

Preview runs the repository's app beside the chat, and lets you edit it by clicking. Test runs its browser tests. Both have their own guide: Preview and browser tests.

Run app

Run app on the repository card is the quickest way to start the app with one command: AlbertCode fills in the command it found (such as npm run dev), or you type one, then Run. Open opens the app in a new tab, Stop stops it.

The side panel

Files, links and pictures you open from a chat, a plan, the task board or any page open in the side panel, beside what you were doing. Its header has Reload, Copy (the path or address) and Close.

Documentation

Documentation, in the ⋮ menu or the command palette, opens this guide in the side panel: every page, served by AlbertCode itself, so it works offline. Links between pages open in the panel; links to the web open in a new tab. ‹ All documentation goes back to the start. The same pages are published on the web, in the public repository's docs/ folder.

Light, dark and focus

Light or dark in the ⋮ menu switches the theme; by default AlbertCode follows your system. Focus mode hides the sidebar for a wider conversation; the ☰ button brings it back. To keep your sessions in reach with the same room, fold the sidebar instead.