---
type: Gallery
title: Product tour
description: Every screen of the human surface, at both widths in both themes
tags: [user, overview, design]
status: stable
---

# Product tour

Every screen of the human surface, captured from a seeded hub with dummy data
at 1440x900 and 390x844 in both themes. Each pair follows your colour scheme.
The captures are a committed artifact: the `capture-wiki-screenshots` skill
refreshes them when a screen changes, and each is looked at before it lands.
The pages under [Guides](/guides/index.md) explain what each screen does.

## Home and the shell

### Home, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/home-desktop-dark.png">
  <img src="assets/screens/home-desktop-light.png" alt="Home: what waits on you, the newest events across projects, and storage at a glance.">
</picture>

### Home, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/home-phone-dark.png">
  <img src="assets/screens/home-phone-light.png" alt="Home: what waits on you, the newest events across projects, and storage at a glance.">
</picture>

## The inbox

### Inbox, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/inbox-desktop-dark.png">
  <img src="assets/screens/inbox-desktop-light.png" alt="The global inbox, grouped into waiting, unread and earlier.">
</picture>

### Inbox, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/inbox-phone-dark.png">
  <img src="assets/screens/inbox-phone-light.png" alt="The global inbox, grouped into waiting, unread and earlier.">
</picture>

### An open inbox item, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/inbox-item-desktop-dark.png">
  <img src="assets/screens/inbox-item-desktop-light.png" alt="One inbox item open in the stage, with its question and its answer.">
</picture>

### An open inbox item, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/inbox-item-phone-dark.png">
  <img src="assets/screens/inbox-item-phone-light.png" alt="One inbox item open in the stage, with its question and its answer.">
</picture>

## Projects and the feed

### Projects, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/projects-desktop-dark.png">
  <img src="assets/screens/projects-desktop-light.png" alt="The project list, each row carrying its live counts.">
</picture>

### Projects, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/projects-phone-dark.png">
  <img src="assets/screens/projects-phone-light.png" alt="The project list, each row carrying its live counts.">
</picture>

### Project feed, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/feed-desktop-dark.png">
  <img src="assets/screens/feed-desktop-light.png" alt="A project feed, day-grouped with kind badges.">
</picture>

### Project feed, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/feed-phone-dark.png">
  <img src="assets/screens/feed-phone-light.png" alt="A project feed, day-grouped with kind badges.">
</picture>

## Sessions and brains

### Sessions, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/sessions-desktop-dark.png">
  <img src="assets/screens/sessions-desktop-light.png" alt="The sessions index, grouped by project, with owners and handoffs.">
</picture>

### Sessions, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/sessions-phone-dark.png">
  <img src="assets/screens/sessions-phone-light.png" alt="The sessions index, grouped by project, with owners and handoffs.">
</picture>

### Session detail, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/session-detail-desktop-dark.png">
  <img src="assets/screens/session-detail-desktop-light.png" alt="The session detail: the brain tree, the handoff note and the lineage.">
</picture>

### Session detail, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/session-detail-phone-dark.png">
  <img src="assets/screens/session-detail-phone-light.png" alt="The session detail: the brain tree, the handoff note and the lineage.">
</picture>

## Artifacts

### Artifacts, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/artifacts-desktop-dark.png">
  <img src="assets/screens/artifacts-desktop-light.png" alt="The artifact index, with the newest artifact open and its comments in the aside.">
</picture>

### Artifacts, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/artifacts-phone-dark.png">
  <img src="assets/screens/artifacts-phone-light.png" alt="The artifact index, with the newest artifact open and its comments in the aside.">
</picture>

### A sealed artifact, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/artifact-viewer-desktop-dark.png">
  <img src="assets/screens/artifact-viewer-desktop-light.png" alt="A sealed artifact opened by its address, showing the password gate.">
</picture>

### A sealed artifact, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/artifact-viewer-phone-dark.png">
  <img src="assets/screens/artifact-viewer-phone-light.png" alt="A sealed artifact opened by its address, showing the password gate.">
</picture>

## The knowledge base and its wiki

### Project wiki, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-desktop-dark.png">
  <img src="assets/screens/wiki-desktop-light.png" alt="A project wiki with its page tree.">
</picture>

### Project wiki, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-phone-dark.png">
  <img src="assets/screens/wiki-phone-light.png" alt="A project wiki with its page tree.">
</picture>

### A knowledge base page, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-reader-desktop-dark.png">
  <img src="assets/screens/wiki-reader-desktop-light.png" alt="A knowledge base page read in the wiki.">
</picture>

### A knowledge base page, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-reader-phone-dark.png">
  <img src="assets/screens/wiki-reader-phone-light.png" alt="A knowledge base page read in the wiki.">
</picture>

### The wiki editor, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-editor-desktop-dark.png">
  <img src="assets/screens/wiki-editor-desktop-light.png" alt="The wiki editor, its path field and its Save.">
</picture>

### A page's history, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-history-desktop-dark.png">
  <img src="assets/screens/wiki-history-desktop-light.png" alt="A page's version history, one row per version.">
</picture>

### A version diff, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-diff-desktop-dark.png">
  <img src="assets/screens/wiki-diff-desktop-light.png" alt="A version diff, with the change the writer made.">
</picture>

### A version diff, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/wiki-diff-phone-dark.png">
  <img src="assets/screens/wiki-diff-phone-light.png" alt="A version diff, with the change the writer made.">
</picture>

## Search

### Search, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/search-desktop-dark.png">
  <img src="assets/screens/search-desktop-light.png" alt="Search results, grouped by family.">
</picture>

### Search, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/search-phone-dark.png">
  <img src="assets/screens/search-phone-light.png" alt="Search results, grouped by family.">
</picture>

## Storage and pruning

### Storage, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/storage-desktop-dark.png">
  <img src="assets/screens/storage-desktop-light.png" alt="Storage: the stacked bars and the prune review.">
</picture>

### Storage, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/storage-phone-dark.png">
  <img src="assets/screens/storage-phone-light.png" alt="Storage: the stacked bars and the prune review.">
</picture>

## Settings and access

### Settings, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/settings-desktop-dark.png">
  <img src="assets/screens/settings-desktop-light.png" alt="Settings, its rows under quiet group labels.">
</picture>

### Settings, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/settings-phone-dark.png">
  <img src="assets/screens/settings-phone-light.png" alt="Settings, its rows under quiet group labels.">
</picture>

### Access and tokens, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/access-desktop-dark.png">
  <img src="assets/screens/access-desktop-light.png" alt="Access: the agents, their tokens and their grants.">
</picture>

### Access and tokens, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/access-phone-dark.png">
  <img src="assets/screens/access-phone-light.png" alt="Access: the agents, their tokens and their grants.">
</picture>

### Connect an agent, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/connect-desktop-dark.png">
  <img src="assets/screens/connect-desktop-light.png" alt="The connect screen, with the MCP address and the bootstrap guide.">
</picture>

### Connect an agent, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/connect-phone-dark.png">
  <img src="assets/screens/connect-phone-light.png" alt="The connect screen, with the MCP address and the bootstrap guide.">
</picture>

### More, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/more-phone-dark.png">
  <img src="assets/screens/more-phone-light.png" alt="The phone's More sheet, holding the destinations the tab bar does not.">
</picture>

## Dialogs

### New project, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/new-project-desktop-dark.png">
  <img src="assets/screens/new-project-desktop-light.png" alt="New project: the name and the slug it will use.">
</picture>

### New project, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/new-project-phone-dark.png">
  <img src="assets/screens/new-project-phone-light.png" alt="New project: the name and the slug it will use.">
</picture>

### Delete a project, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/delete-project-desktop-dark.png">
  <img src="assets/screens/delete-project-desktop-light.png" alt="Delete a project, behind a typed confirmation.">
</picture>

### Delete a project, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/delete-project-phone-dark.png">
  <img src="assets/screens/delete-project-phone-light.png" alt="Delete a project, behind a typed confirmation.">
</picture>

### End a session, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/end-session-desktop-dark.png">
  <img src="assets/screens/end-session-desktop-light.png" alt="End a session, with the pruning note under it.">
</picture>

### End a session, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/end-session-phone-dark.png">
  <img src="assets/screens/end-session-phone-light.png" alt="End a session, with the pruning note under it.">
</picture>

### Prune, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/prune-desktop-dark.png">
  <img src="assets/screens/prune-desktop-light.png" alt="Prune, reviewing the bytes it would delete.">
</picture>

### Prune, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/prune-phone-dark.png">
  <img src="assets/screens/prune-phone-light.png" alt="Prune, reviewing the bytes it would delete.">
</picture>

### Issue a token, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/issue-token-desktop-dark.png">
  <img src="assets/screens/issue-token-desktop-light.png" alt="Issue a token, revealing it once. Reachable at the desktop width only.">
</picture>

### Revert, desktop

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/revert-desktop-dark.png">
  <img src="assets/screens/revert-desktop-light.png" alt="Revert, showing the version a revert would put back.">
</picture>

### Revert, phone

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/screens/revert-phone-dark.png">
  <img src="assets/screens/revert-phone-light.png" alt="Revert, showing the version a revert would put back.">
</picture>
