Wireframes

Six screens for issue #6, drawn for a user who is not a developer. Each screen shows the window on the left and numbered design notes on the right; the purple badges point at what each note explains. The interface text is in French, the default language.

Screen	Shows
1 · Layout global	Docks: channels and agents on the left, the conversation in the centre, Settings on the right, terminal and files folded at the bottom
2 · Conversation multi-agents	One colour per agent, the "joined the channel" message, folded tool calls, the Stop button, the context gauge
3 · @ et /	The `@` agent list and the `/agent:command` list, Tab to pick
4 · Permission	A permission request in plain language, the four ACP options and "Stop Riker"
5 · Panel Agents	An agent's state, workspace tree, editor and terminal
6 · Premier lancement	The empty state: three steps, an "add my first agent" assistant, a human error message

Files

wireframes.drawio — the editable source, one page per screen (diagrams.net, or the VS Code Draw.io extension).
NN-*.svg / NN-*.png — the rendered screens.
wireframes.py — generates all of the above from one description, so the draw.io pages and the images never drift apart.

To change a screen, edit wireframes.py, then:

python3 docs/design/wireframes.py
for f in docs/design/*.svg; do rsvg-convert -o "${f%.svg}.png" "$f"; done

Editing wireframes.drawio by hand is fine for exploring, but the next generation overwrites it: carry the change over into wireframes.py.

Decisions taken in these screens

Only the conversation and the left dock are visible by default; Settings, terminal and files are one click away (screens 1, 5).
A permission request is attached to the conversation it concerns and never blocks the others; "never in this session" and "Stop the agent" are always offered, because the ACP spike showed a small model retrying a refused action 40 times (ADR 0001, screen 4).
Agents join a channel visibly, and each keeps one colour everywhere (screen 2).
The first launch never shows YAML: the default configuration is created for the user, and an assistant writes agents into it (screen 6).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


# Wireframes

Six screens for issue [#6](../../.tickets/issues/0006-maquettes-ux-des-panels-pour-le-citizen-user.yaml), drawn for a user who is not a developer. Each screen shows the window on the left and numbered design notes on the right; the purple badges point at what each note explains. The interface text is in French, the default language.

| Screen | Shows |
| --- | --- |
| [1 · Layout global](01-layout.png) | Docks: channels and agents on the left, the conversation in the centre, Settings on the right, terminal and files folded at the bottom |
| [2 · Conversation multi-agents](02-conversation.png) | One colour per agent, the "joined the channel" message, folded tool calls, the Stop button, the context gauge |
| [3 · @ et /](03-mentions-commands.png) | The `@` agent list and the `/agent:command` list, Tab to pick |
| [4 · Permission](04-permission.png) | A permission request in plain language, the four ACP options and "Stop Riker" |
| [5 · Panel Agents](05-agents-panel.png) | An agent's state, workspace tree, editor and terminal |
| [6 · Premier lancement](06-first-launch.png) | The empty state: three steps, an "add my first agent" assistant, a human error message |

## Files

- `wireframes.drawio` — the editable source, one page per screen (diagrams.net, or the VS Code Draw.io extension).
- `NN-*.svg` / `NN-*.png` — the rendered screens.
- `wireframes.py` — generates all of the above from one description, so the draw.io pages and the images never drift apart.

To change a screen, edit `wireframes.py`, then:

```bash
python3 docs/design/wireframes.py
for f in docs/design/*.svg; do rsvg-convert -o "${f%.svg}.png" "$f"; done
```

Editing `wireframes.drawio` by hand is fine for exploring, but the next generation overwrites it: carry the change over into `wireframes.py`.

## Decisions taken in these screens

- Only the conversation and the left dock are visible by default; Settings, terminal and files are one click away (screens 1, 5).
- A permission request is attached to the conversation it concerns and never blocks the others; "never in this session" and "Stop the agent" are always offered, because the ACP spike showed a small model retrying a refused action 40 times ([ADR 0001](../adr/0001-acp.md), screen 4).
- Agents join a channel visibly, and each keeps one colour everywhere (screen 2).
- The first launch never shows YAML: the default configuration is created for the user, and an assistant writes agents into it (screen 6).