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 English, the default language (French is chosen with ui.language: fr).
| Screen | Shows |
|---|---|
| 1 · Overall layout | Docks: channels and agents on the left, the conversation in the centre, Settings on the right, terminal and files folded at the bottom |
| 2 · Multi-agent conversation | One colour per agent, the "joined the channel" message, folded tool calls, the Stop button, the context gauge |
| 3 · @ and / | 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 · Agents panel | An agent's state, workspace tree, editor and terminal |
| 6 · First launch | 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.
Logo
The logo is Orbite: you in the centre, your agents in orbit around you. Colours: ink #1E2240, ring #C9CCE8, teal #12A39A and coral #FF7A59 on a light ground; white, #4A5078, #2FD1C5 and coral on a dark one.
| File | Use |
|---|---|
| logo/sidekicks-mark.svg | The mark on a light ground |
| logo/sidekicks-mark-dark.svg | The mark on a dark ground |
| logo/sidekicks-favicon.svg | 16–32 px: the ring is dropped, it no longer reads at that size |
| logo/sidekicks-app-icon.svg | The application icon, a copy of build/appicon.svg |
The application icon's source is build/appicon.svg. After changing it, regenerate the images:
rsvg-convert -w 1024 -h 1024 -o build/appicon.png build/appicon.svg
cd build && wails3 generate icons -input appicon.png -macfilename darwin/icons.icns -windowsfilename windows/icon.ico -iconcomposerinput appicon.icon -macassetdir darwin
The last two options rebuild build/darwin/Assets.car from build/appicon.icon (its glyph is Assets/sidekicks-mark.svg); they only work on macOS.
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|