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
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112

# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
id: 6
title: "Maquettes UX des panels pour le citizen user"
state: closed
author:
  name: k33g
  email: ph.charriere@gmail.com
createdAt: 2026-10-29T07:20:04.000Z
updatedAt: 2026-10-29T08:51:00.000Z
labels:
  - "kind::chore"
  - "area::ui"
  - "citizen-ux"
  - "priority::high"
  - "size::M"
milestone: "Initialize"
epic: "Specifications"
body: |
  ## Contexte
  Le draft [#1 — draft](.tickets/issues/0001-draft.yaml) veut une UI « sobre et fancy », organisée en panels comme Zed, mais pour un **utilisateur non technique**. Ces deux exigences tirent dans des sens opposés : Zed est dense et pensé pour des développeurs.

  ## Pourquoi des maquettes avant le code
  - Les choix de layout (où vivent Channels, Agents, Settings ; ce qu'on cache par défaut) conditionnent [#12 — Shell UI à panels inspiré de Zed](.tickets/issues/0012-shell-ui-a-panels-inspire-de-zed.yaml) et tout le frontend.
  - Elles permettent de valider tôt les interactions clés : `@` + Tab, `/` + Tab, `/agent:commande`, dialogue de permission, terminal.
  - C'est le moment de décider ce qui est **caché** pour le citizen user (ex. terminal et treeview repliés par défaut).

  ## Écrans à couvrir
  1. Layout global (dock gauche : Channels / Agents ; centre : conversation ; dock droit/bas : fichiers, terminal, Settings).
  2. Conversation multi-agents (identification visuelle de chaque agent).
  3. Popups d'autocomplétion `@` et `/`.
  4. Demande de permission d'un outil (texte compréhensible, pas de JSON brut).
  5. Panel Agents : liste, statut, treeview, terminal.
  6. Premier lancement (état vide).

  ## Critères d'acceptation
  - [ ] Maquettes (draw.io ou Excalidraw) dans `docs/design/`.
  - [ ] Parcours « je crée un channel, j'invite Alice, je lui pose une question » validé.
tasks:
  - id: 1
    title: "Layout global et docks"
    state: closed
    priority: medium
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
  - id: 2
    title: "Vue conversation multi-agents"
    state: closed
    priority: medium
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
  - id: 3
    title: "Popups @ et /"
    state: closed
    priority: medium
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
  - id: 4
    title: "Dialogue de permission"
    state: closed
    priority: high
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
  - id: 5
    title: "Panel Agents (treeview + terminal)"
    state: closed
    priority: medium
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
  - id: 6
    title: "Écran de premier lancement"
    state: closed
    priority: medium
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T07:20:04.000Z
    updatedAt: 2026-10-29T08:51:00.000Z
    closedAt: 2026-10-29T08:51:00.000Z
comments:
  - id: 1
    author:
      name: k33g
      email: ph.charriere@gmail.com
    createdAt: 2026-10-29T08:51:00.000Z
    body: |
      ## Résultat

      6 écrans en draw.io (une page par écran) : [docs/design](docs/design/README.md) — `wireframes.drawio` + SVG/PNG, générés par `docs/design/wireframes.py` pour que le .drawio et les images ne divergent pas.

      Décisions visibles dans les maquettes : seuls la conversation et le dock gauche sont visibles par défaut ; la permission est attachée à la conversation et propose toujours « Ne plus jamais » et « Arrêter l'agent » (conséquence du spike #2) ; l'arrivée d'un agent dans un channel est annoncée ; le premier lancement ne montre jamais de YAML.

      À valider par toi : le parcours « je crée un channel, j'invite Alice, je lui pose une question » (critère d'acceptation).