# Feature — Surface et navigation multi-outils   ·   Module : frontend / search   ·   Statut : cadré

> Réécrite le 2026-08-04 à partir du handoff de design **« Navigation multi-outils LintellO »**
> (prototype HTML haute fidélité + README + dix captures). Remplace la version du matin, écrite
> avant que le design ne soit disponible.
> Le moteur lui-même : `moteur.md`. Le contenant d'affichage : `../core/screen.md`.
> Les constats mesurés : `../../../STATE.md`. L'ordre : `../../ROADMAP.md`.

## Intention

Faire exister **Recherche** comme un outil qu'on ouvre, dans une application qui n'en connaît
aujourd'hui qu'un seul, et livrer l'**écran de restitution** que le design décrit.

## Le handoff de design fait foi

Le bundle est **haute fidélité** : couleurs, typographies, espacements, densités et états sont
définitifs. Le prototype HTML est une **référence à recréer** dans React, pas du code à copier.

⚠️ **Le bundle n'est pas versionné dans le dépôt.** Il faut l'y verser, sans quoi la seule source
de vérité du design vit dans un fichier zip sur un poste.

### Modèle mental

1. **Projet et outil sont à égalité.** La colonne a **deux vues exclusives** commutées par un
   segmented control : `Outils` et `Projets`. Un seul niveau de navigation affiché à la fois —
   c'est ce qui récupère la place perdue.
   - **Vue Outils** : l'outil pilote, le projet filtre. Les cinq outils, puis les éléments récents
     de l'outil actif, chacun avec un badge de projet (ou « Sans projet »).
   - **Vue Projets** : le projet pilote. Le projet ouvert se déplie **groupé par outil**, avec
     compteurs.
2. **Tout est utilisable hors projet.** Un contenu créé en vrac affiche « Rattacher à un projet ».
3. **Une seule action primaire, contextuelle** : le bouton bleu change de libellé selon l'outil.
   Jamais cinq boutons.
4. **Les modes appartiennent au chat.** Ils ne s'appliquent ni à la recherche, ni au farming, ni à
   l'éditeur, et l'écran chat le dit.
5. **Un seul outil actif à la fois.** *(Reformulation du 2026-08-04 : le handoff disait « un seul
   écran actif — pas de split view ». Le **Screen** n'est pas un outil mais une vue sur ce qu'on
   regarde ; la règle vaut pour les outils, pas pour lui.)*
6. Le Drive n'a pas de dossiers manuels : rangement automatique par projet et par origine.

### Périmètre des cinq outils

Les cinq sont **dessinés**, deux sont **branchés** en septembre : Chat et Recherche. Farming,
Documents et Drive existent dans la colonne mais renvoient à des états d'attente. C'est délibéré :
dessiner les cinq une fois évite de refaire le design à chaque ajout.

- **Farming** accueillera le module Prospect quand il rejoindra LintellO — ce n'est pas un
  homonyme, c'est le même objet à un autre moment.
- **Documents** est l'outil où se raccroche le Screen. *(Fait depuis B2, le 2026-08-12.)*

## Décisions

### 1. Le routage — la pièce structurante

L'application n'a **aucun routage interne** : une seule route protégée et un aiguillage sur l'état
d'un store. Aucune conversation n'a d'URL.

Le prototype modélise l'écran de restitution par un état local (`result: string | null`). C'est
correct pour une démo, insuffisant pour le produit : une recherche enregistrée doit se rouvrir
d'une session à l'autre, se partager et survivre à un rechargement.

**L'URL porte l'état.** Forme proposée : `/chat`, `/chat/:id`, `/projet/:id`, `/recherche`,
`/recherche/:id`. L'identifiant de recherche vient de l'entité `SearchThread` (voir `moteur.md`,
décision 5) — le lien partageable est un bénéfice de bord, pas un travail en plus.

⚠️ **C'est le seul lot réellement risqué** : le store de projets est le pivot du front et le rendre
esclave de l'URL touche cinq composants.

### 2. La capacité de mise en page pour le panneau

La zone principale doit **savoir se rétrécir** et héberger une région latérale, dès le premier lot.
C'est peu de travail maintenant et beaucoup après, puisqu'il faudrait repasser sur chaque écran.

~~**Le panneau lui-même n'est pas livré en septembre** — seule la capacité l'est.~~
➡️ **Dépassé le 2026-08-12** : le Screen est construit et garni (B2), et il porte l'édition, les
gabarits, les images et les schémas. Voir `../core/screen.md`.

### 3. Vocabulaire

- L'objet persisté s'appelle **« recherche enregistrée »** — c'est déjà le mot du design (bouton
  retour et titre de liste). Ne pas l'appeler « artefact » — ce mot désignait le **Screen** dans
  la tête du user, et il n'a plus lieu d'être : le contenant a un nom.
- Le `Ctrl K` actuel devient **« Rechercher partout »** : « Recherche » est désormais l'outil web.
- Raccourcis conservés : **Ctrl L** (action primaire contextuelle), **Ctrl K** (recherche globale),
  **Ctrl M** (modes).

### 4. Les jetons de style — le vrai contenu de « l'harmonisation »

Bonne nouvelle : l'accent du design (`#2563eb`) est **exactement** le `--color-primary` actuel, et
la police est déjà Poppins. Le rapprochement est bien plus petit que « refonte CSS » ne le laissait
craindre.

Le piège est ailleurs. Le handoff donne des **valeurs en dur**, et le thème sombre de
l'application ne fonctionne que pour ce qui passe par les variables CSS : coder les nouveaux écrans
avec ces hexadécimaux produirait des écrans **qui restent clairs en thème sombre**.

Et la palette du design est plus fine que le jeu de jetons actuel (gris de texte : 11 contre 4 ;
traits : 7 contre 2). **Il faut donc étendre le jeu de jetons pour couvrir la palette, et en
donner l'équivalent sombre, avant le premier écran.** Après, il faudrait repasser sur tout.

**Pas de migration SCSS.** Les propriétés personnalisées CSS déjà en place couvrent le besoin ;
réécrire 168 Ko qui fonctionnent pendant le seul jalon où le style ne doit pas bouger serait un
mauvais échange. La dette réelle est ailleurs : la page d'accueil publique **recopie les jetons en
dur** au lieu de les importer.

### 5. Accessibilité

Le handoff ne la spécifie pas (« focus visible à implémenter selon le codebase »). Pour un produit
qui embarque déjà une police pour dyslexiques et qui vise des élèves, c'est **à cadrer, pas à
improviser** : états de focus visibles, navigation au clavier des filtres et des relances, contraste
vérifié sur la palette étendue.

## L'écran de restitution — ce que le design impose

Il **remplace le corps** de la zone principale ; colonne et fil d'Ariane restent en place.

- **Champ de requête persistant**, toujours visible en haut. **Reformuler ne fait pas quitter
  l'écran** — mais depuis la décision **#0006**, cela **lance une recherche neuve** au lieu de
  modifier celle qu'on lit. Il n'y a donc **pas** de bouton « Relancer », et la mention sous le
  champ le dit : « Toute saisie ici lance une nouvelle recherche — celle-ci reste dans
  l'historique. »
- **Toute la ligne d'une source ouvre sa page** dans le **viewer** (panneau latéral partagé,
  50/50). Le titre reste un vrai lien : clic milieu, nouvel onglet et copie d'adresse sont des
  gestes de moteur de recherche. Le viewer est un **état d'UI, jamais une navigation** — il
  n'entre pas dans l'historique du navigateur, qui sert déjà à passer d'une recherche à l'autre.
- **Filtres de source** : Tout · Web · Actualités · Académique · Mes fichiers. État local.
  *(Deux d'entre eux n'ont pas de fournisseur identifié — `moteur.md`, Q10.)*
- **Carte Synthèse IA** :
  - **puces de citation numérotées** en fin d'affirmation, qui font défiler jusqu'à la source et la
    mettent en évidence. **Ce sont des renvois, pas des liens** — l'inverse de ce que fait le chat ;
  - **relances suggérées** sous les paragraphes, en puces préfixées d'un « + » ;
  - colonne droite : un **emplacement visuel** (schéma généré **ou** meilleure image des sources)
    et deux à trois **chiffres clés** ;
  - bouton **« Exporter en document »**, qui produira une sortie affichée dans le panneau.
- **Liste de sources**, volontairement familière : pastille (favicon si disponible), nom du site,
  URL tronquée, badge « Citée n » si reprise dans la synthèse, titre en lien, extrait, puis date et
  deux ponts vers les autres outils — **« Ajouter au Drive »** et **« Discuter dans le chat »**.
- **Mobile** : même séquence empilée, visuel en pleine largeur au-dessus du texte, sources
  compactes sans ligne d'actions, tab bar basse conservée.

**Affichage à écran remplaçant, persistance complète** : tous les tours sont enregistrés, seul le
dernier est affiché. L'historique vit dans « Récents ».

## Critères de « fait »

1. Une conversation, un projet et une recherche ont chacun une **URL** ; rechargement et retour
   arrière les retrouvent.
2. La colonne présente les cinq outils avec ses deux vues, sur desktop et sur mobile, et aucun
   libellé n'emploie deux fois le mot « recherche » pour deux choses.
3. Les nouveaux écrans **réagissent au thème sombre** sans retouche.
4. La zone principale sait se rétrécir pour héberger une région latérale, même si rien ne l'occupe.
5. Le focus est visible et les filtres sont atteignables au clavier.
6. `ChatController` est inchangé, la suite de tests est verte.
7. La page d'accueil publique et l'application tirent leurs couleurs de la **même source**.

## Ouvert

- **Le Drive reste-t-il un outil de premier niveau**, ou devient-il un onglet dans le projet ?
  (Question posée par le handoff lui-même ; le prototype le garde au premier niveau.)
- **Pagination et scroll infini** : à prévoir côté API, le nombre de projets et de contenus n'étant
  pas borné.
- **Largeur de colonne** : 258px retenus. L'argument est la place récupérée avec cinq outils —
  **ne pas l'adosser au panneau**, qui n'est pas encore décrit.