# Mode d'emploi Synapse V2

> **Synapse** est votre "second cerveau" pour la gestion de projets digitaux. Il combine IA conversationnelle, gestion de projet visuelle et outils de design thinking.

---

## Table des matières

1. [Installation](#1-installation)
2. [Configuration initiale](#2-configuration-initiale)
   - [API Gemini (IA)](#21-api-gemini-ia)
   - [API Figma (optionnel)](#22-api-figma-optionnel)
3. [Extension UX Tracker](#3-extension-ux-tracker)
4. [Interface principale](#4-interface-principale)
5. [Fonctionnalités par module](#5-fonctionnalités-par-module)
6. [Les agents IA](#6-les-agents-ia)
7. [Raccourcis et astuces](#7-raccourcis-et-astuces)

---

## 1. Installation

### Windows (Application Desktop)

1. Téléchargez `Synapse V2 Setup 1.0.0.exe` depuis le dossier `release/`
2. Double-cliquez sur l'installateur
3. Suivez les instructions d'installation
4. Lancez Synapse depuis le menu Démarrer ou le raccourci Bureau

### Mode Navigateur (Développement)

```bash
cd synapse-app
npm install
npm run dev
```
Ouvrez `http://localhost:3000` dans votre navigateur.

---

## 2. Configuration initiale

Au premier lancement, configurez vos clés API pour activer toutes les fonctionnalités.

### 2.1 API Gemini (IA)

L'API Gemini est **indispensable** pour utiliser l'assistant IA Cortex et les agents spécialisés.

#### Étape 1 : Obtenir une clé API

1. Rendez-vous sur [Google AI Studio](https://aistudio.google.com/apikey)
2. Connectez-vous avec votre compte Google
3. Cliquez sur **"Create API Key"**
4. Copiez la clé générée (commence par `AIza...`)

#### Étape 2 : Configurer dans Synapse

1. Dans Synapse, cliquez sur l'icône **Paramètres** (engrenage) en bas à gauche
2. Collez votre clé API dans le champ **"Clé API Gemini"**
3. Cliquez sur **Sauvegarder**

#### Options supplémentaires

- **Mode Économie** : Réduit l'utilisation de tokens pour économiser votre quota API. Recommandé si vous utilisez le niveau gratuit.

> **Note** : Le niveau gratuit de Gemini permet environ 60 requêtes/minute. Synapse limite automatiquement à 10 requêtes/minute pour éviter les erreurs.

---

### 2.2 API Figma (optionnel)

L'API Figma est nécessaire uniquement pour le module **FORGE** (annotation de maquettes).

#### Étape 1 : Obtenir un token Figma

1. Connectez-vous à [Figma](https://www.figma.com)
2. Cliquez sur votre avatar > **Settings**
3. Descendez jusqu'à **Personal access tokens**
4. Cliquez sur **Generate new token**
5. Donnez un nom (ex: "Synapse") et copiez le token

#### Étape 2 : Configurer dans FORGE

1. Ouvrez un projet dans Synapse
2. Allez dans l'onglet **FORGE**
3. Cliquez sur **"Configurer Figma"**
4. Collez votre token Figma
5. Entrez l'URL d'un fichier Figma (ex: `https://www.figma.com/file/ABC123/MonProjet`)

---

## 3. Extension UX Tracker

L'extension Chrome permet d'enregistrer des sessions utilisateur sur n'importe quel site web.

### Installation de l'extension

#### Méthode 1 : Depuis Synapse (recommandé)

1. Ouvrez Synapse et allez dans un projet
2. Cliquez sur l'onglet **UX Tracking**
3. Cliquez sur le bouton **"⬇️ Extension"**
4. Choisissez où sauvegarder le fichier `uxtracker-extension.zip`
5. Décompressez le ZIP

#### Méthode 2 : Depuis le dossier source

Le fichier se trouve dans : `synapse-app/extension.zip`

### Charger l'extension dans Chrome

1. Ouvrez Chrome et allez à `chrome://extensions/`
2. Activez le **Mode développeur** (interrupteur en haut à droite)
3. Cliquez sur **"Charger l'extension non empaquetée"**
4. Sélectionnez le dossier décompressé de l'extension
5. L'icône UX Tracker apparaît dans votre barre d'extensions

### Utiliser l'extension

1. **Naviguez** sur le site à analyser
2. **Cliquez** sur l'icône UX Tracker
3. **Démarrez** l'enregistrement
4. **Interagissez** avec le site (clics, scrolls, navigation)
5. **Arrêtez** l'enregistrement
6. **Exportez** la session en fichier `.uxtrack`

### Importer dans Synapse

1. Dans Synapse, ouvrez votre projet
2. Allez dans l'onglet **UX Tracking**
3. Cliquez sur **"📥 Importer"**
4. Sélectionnez votre fichier `.uxtrack`
5. La session apparaît dans la liste

---

## 4. Interface principale

### Navigation

| Zone | Description |
|------|-------------|
| **Sidebar gauche** | Navigation principale (Cortex, Dashboard, Projets, Calendrier, Modules) |
| **Zone centrale** | Contenu actif (chat, kanban, détails projet) |
| **Panneau Cortex** | Assistant IA (s'ouvre sur le côté droit) |

### Vues principales

- **Cortex** : Interface de chat IA pleine page
- **Dashboard** : Statistiques globales de tous vos projets
- **Projets** : Liste et création de projets
- **Calendrier** : Vue mensuelle des tâches avec deadlines
- **Modules & Skills** : Accès aux fonctionnalités avancées

---

## 5. Fonctionnalités par module

### 5.1 Gestion de Projet (Kanban)

Chaque projet dispose d'un tableau Kanban avec 4 colonnes :

| Colonne | Usage |
|---------|-------|
| **Backlog** | Tâches à planifier |
| **En cours** | Tâches en développement |
| **À valider** | Tâches terminées en attente de review |
| **Terminé** | Tâches validées |

**Actions** :
- **Glisser-déposer** pour changer le statut
- **Cliquer** sur une carte pour voir les détails
- **Double-cliquer** pour éditer rapidement

### 5.2 Détail d'une tâche

Cliquez sur une tâche pour accéder aux onglets :

| Onglet | Fonctionnalité |
|--------|----------------|
| **Liens** | URLs et ressources associées |
| **Todos** | Checklist de sous-tâches |
| **Tableaux** | Tableurs dynamiques |
| **Fichiers** | Pièces jointes |
| **Risques** | Matrice des risques (impact/probabilité) |
| **Roadmap** | Diagramme de Gantt |
| **Sitemap** | Architecture visuelle |
| **UX Tracking** | Sessions utilisateur |
| **FORGE** | Annotations Figma |
| **Tinkerer** | Canvas de brainstorming |

### 5.3 Roadmap (Gantt)

Visualisez la timeline de votre projet :

- **Tâches** : Barres colorées par équipe (Dev, UX, Testing, Management)
- **Sous-tâches** : Imbriquées sous les tâches parentes
- **Jalons** : Sprint, Discovery, COPIL

**Interaction** :
- Glissez les bords d'une barre pour modifier les dates
- Cliquez sur + pour ajouter tâches/jalons

### 5.4 Sitemap

Créez l'architecture visuelle de votre produit :

- **Nœuds** : Pages, écrans, fonctionnalités
- **Connexions** : Liens entre les éléments
- **Post-its** : Annotations sur le canvas

### 5.5 Tinkerer (Brainstorming)

Canvas infini pour organiser vos idées avec **11 types de nœuds** :

| Type | Usage |
|------|-------|
| Texte/Idée | Notes et concepts |
| Image | Visuels et captures |
| Formulaire | Maquettes de formulaires |
| Liste | Checklists et bullet points |
| Tableau | Données structurées |
| Citation | Verbatims utilisateurs |
| URL | Liens externes |
| Persona | Profils utilisateurs |
| Post-it | Annotations rapides |
| Hypothèse | À valider |
| Opportunité | Pistes à explorer |

**Fonctionnalités** :
- Pan & zoom (molette + clic milieu)
- Connexions sémantiques entre nœuds
- Groupes pour organiser
- Votes sur les idées
- Export PNG

### 5.6 FORGE (Annotation Design)

Annotez vos maquettes Figma :

1. Connectez votre projet Figma (voir section 2.2)
2. Sélectionnez une frame à annoter
3. Ajoutez des post-its : User Voice, Pain Points, Validations
4. Générez automatiquement des User Stories

### 5.7 UX Tracking

Analysez le comportement utilisateur :

| Vue | Description |
|-----|-------------|
| **Sessions** | Liste des enregistrements importés |
| **Replay** | Rejouez une session avec curseur et clics |
| **Heatmap** | Carte de chaleur des clics |
| **Scroll Depth** | Profondeur de scroll (vert=vu, rouge=non atteint) |
| **Feedback** | Annotations et commentaires |

### 5.8 Risques

Gérez les risques projet avec une **matrice 5×5** :

- **Impact** : 1 (faible) à 5 (critique)
- **Probabilité** : 1 (rare) à 5 (quasi certain)
- **Sévérité** : Calculée automatiquement (Impact × Probabilité)

Pour chaque risque, définissez :
- Plan de mitigation
- Plan de contingence
- Propriétaire

---

## 6. Les agents IA

Synapse dispose de **11 agents spécialisés** accessibles via le sélecteur dans Cortex.

### Agents essentiels (P0)

| Agent | Spécialité |
|-------|------------|
| **🎯 Product Owner** | Backlog, priorisation RICE/MoSCoW, user stories |
| **⚠️ Risk Manager** | Identification des risques, analyse FMEA |
| **📈 Project Analyst** | KPIs, tendances, valeur acquise |

### Agents importants (P1)

| Agent | Spécialité |
|-------|------------|
| **🎨 Product Designer** | Jobs-to-be-Done, design thinking |
| **🔍 UX Designer** | Heuristiques Nielsen, audit WCAG |
| **🏗️ Tech Architect** | Architecture technique, scalabilité |
| **✍️ Content Strategist** | Stratégie de contenu, tone of voice |

### Agents spécialisés (P2)

| Agent | Spécialité |
|-------|------------|
| **🧪 QA Engineer** | Plans de test, couverture |
| **🏃 Agile Coach** | Scrum/Kanban, rétrospectives |
| **💰 Budget Manager** | Suivi des coûts, ROI |
| **🔬 Data Scientist** | Analytics prédictifs |

### Utilisation

1. Ouvrez **Cortex** (icône cerveau ou panneau latéral)
2. Sélectionnez un agent dans le menu déroulant
3. Posez votre question - l'agent répond selon son expertise

**Exemple** :
> Sélectionnez "Risk Manager" puis demandez : *"Identifie les risques de mon projet e-commerce"*

---

## 7. Raccourcis et astuces

### Raccourcis globaux

| Raccourci | Action |
|-----------|--------|
| Clic sur icône projet | Ouvre le kanban |
| Double-clic sur carte | Édition rapide |
| Glisser une carte | Change le statut |

### Astuces Cortex

- **Joindre des fichiers** : Glissez-déposez des images, PDF ou documents dans le chat
- **Contexte projet** : L'IA connaît automatiquement le projet actif
- **Commandes** : Demandez à l'IA de créer des tâches, risques, etc.

### Astuces Tinkerer

- **Zoom** : Molette de souris
- **Pan** : Clic molette + glisser
- **Multi-sélection** : Ctrl + clic
- **Connexion rapide** : Glissez depuis le bord d'un nœud

### Fenêtres détachées

Certains modules peuvent s'ouvrir dans une **fenêtre séparée** (pratique avec 2 écrans) :
- Cliquez sur l'icône "détacher" dans l'onglet
- La fenêtre s'ouvre sur le second écran si disponible

---

## Support

- **Documentation** : Ce fichier et `SYNAPSE_DOCUMENTATION.md`
- **Problèmes** : Contactez le développeur ou ouvrez une issue

---

*Synapse V2 - Votre second cerveau pour la gestion de projets digitaux*