Deploy AIM Learning Companion to HF Spaces

* Rewrite app: strict Socratic questioning engine with FastAPI backend

- Remove standalone client-side index.html (violated spec)
- Use openai Python library with configurable base_url (no hardcoded provider)
- System prompts verbatim from spec: one question per response, never direct answers
- Stateless sessions: no localStorage, no cookies, no persistence
- No dashboard/usage statistics — only end-of-session analysis report
- RAG: ChromaDB + sentence-transformers, 3 chunks injected per turn
- 5-phase protocol: Ciblage/Clarification/Mecanisme/Verification/Stress-test
- Two modes: TUTOR (accompaniment) and CRITIC (devil's advocate)
- JSON export of full session (messages + scores + timestamps)
- Docker + docker-compose with volume-mounted /corpus
- README: dual config (OpenRouter test / Ollama production)
- No hardcoded references to any LLM provider in code

https://claude.ai/code/session_015z3yZxNNfXF63JuQDuPbEG

* Add Render deployment config for online demo

- render.yaml Blueprint: auto-configures service, env vars, persistent disk
- Dockerfile: install PyTorch CPU-only to reduce image size (~800MB vs ~2.5GB)
- README: deployment instructions for Render

https://claude.ai/code/session_015z3yZxNNfXF63JuQDuPbEG

* Switch deployment to Hugging Face Spaces (free, no credit card)

- Remove render.yaml (requires paid plan)
- Dockerfile: use port 7860 (HF Spaces default)
- README: HF Spaces deployment instructions replace Render

https://claude.ai/code/session_015z3yZxNNfXF63JuQDuPbEG

* Add Hugging Face Spaces metadata to README.md

https://claude.ai/code/session_015z3yZxNNfXF63JuQDuPbEG

---------

Co-authored-by: Claude <noreply@anthropic.com>

.env.example

@@ -1,2 +1,9 @@
+# --- Option A : Test (OpenRouter) ---
 OPENROUTER_API_KEY=sk-or-v1-your-key-here
+LLM_BASE_URL=https://openrouter.ai/api/v1
 LLM_MODEL=mistralai/mistral-7b-instruct
+
+# --- Option B : Production (Ollama local) ---
+# OPENROUTER_API_KEY=ollama
+# LLM_BASE_URL=http://localhost:11434/v1
+# LLM_MODEL=mistral:instruct

.gitignore

@@ -2,3 +2,4 @@
 __pycache__/
 *.pyc
 chroma_data/
+*.egg-info/

Dockerfile

@@ -7,10 +7,13 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
 
 COPY requirements.txt .
+
+# Install PyTorch CPU-only first (much smaller than default CUDA build)
+RUN pip install --no-cache-dir torch --index-url https://download.pytorch.org/whl/cpu
 RUN pip install --no-cache-dir -r requirements.txt
 
 COPY . .
 
-EXPOSE 8000
+EXPOSE 7860
 
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,53 +1,114 @@
-# AIM Learning Companion
+---
+title: AIM Learning Companion
+emoji: 🎯
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
 
-A Socratic AI companion for adult learners in professional training contexts. Uses a strict 5-phase Socratic protocol to guide learners through critical thinking, grounded in course materials via RAG.
+# AIM - Compagnon socratique d'apprentissage
+
+Moteur de questionnement socratique pour apprenants adultes en formation professionnelle. Applique un protocole strict en 5 phases pour guider la reflexion critique, ancre dans les documents de cours via RAG.
 
 ## Architecture
 
-- **Backend**: FastAPI (Python)
-- **LLM**: Ollama with `mistral:instruct` (local, no external API calls)
-- **Vector Store**: ChromaDB (local)
-- **Embeddings**: sentence-transformers (`all-MiniLM-L6-v2`, local)
-- **Frontend**: Vanilla HTML/CSS/JS
+- **Backend** : FastAPI (Python)
+- **LLM** : OpenRouter ou Ollama (configurable via `.env`)
+- **Vector Store** : ChromaDB (local, persistant)
+- **Embeddings** : sentence-transformers (`all-MiniLM-L6-v2`)
+- **Frontend** : Vanilla HTML/CSS/JS (servi par FastAPI)
 
-## Prerequisites
+## Demarrage rapide
 
-1. **Install Ollama**: https://ollama.ai
-2. **Pull the model**:
+1. Copier le fichier d'environnement :
    ```bash
-   ollama pull mistral:instruct
+   cp .env.example .env
    ```
-3. **Ensure Ollama is running**:
+
+2. Configurer la cle API dans `.env` (voir section "Configuration LLM" ci-dessous)
+
+3. Lancer :
    ```bash
-   ollama serve
+   docker-compose up --build
    ```
 
-## Quick Start
+4. Ouvrir http://localhost:8000
+
+## Configuration LLM
+
+### Option A : Test (OpenRouter)
+
+```env
+OPENROUTER_API_KEY=sk-or-v1-votre-cle-ici
+LLM_BASE_URL=https://openrouter.ai/api/v1
+LLM_MODEL=mistralai/mistral-7b-instruct
+```
+
+### Option B : Production (Ollama local)
+
+```env
+OPENROUTER_API_KEY=ollama
+LLM_BASE_URL=http://localhost:11434/v1
+LLM_MODEL=mistral:instruct
+```
 
+Prerequis pour Ollama :
 ```bash
-docker-compose up --build
+ollama pull mistral:instruct
+ollama serve
 ```
 
-Open http://localhost:8000 in your browser.
+## Deploiement en ligne (Hugging Face Spaces)
+
+Pour une demo accessible via URL publique, gratuite, sans carte bancaire :
+
+1. Creer un compte sur [huggingface.co](https://huggingface.co)
+2. **New Space** > choisir **Docker** comme SDK
+3. Connecter le repo GitHub ou pousser le code directement
+4. Dans **Settings > Variables and secrets**, ajouter comme **secrets** :
+   - `OPENROUTER_API_KEY` = votre cle OpenRouter
+   - `LLM_BASE_URL` = `https://openrouter.ai/api/v1`
+   - `LLM_MODEL` = `mistralai/mistral-7b-instruct`
+5. Le Space se build et deploie automatiquement
+6. URL publique : `https://votre-nom-aim.hf.space`
+
+Free tier : 2 Go RAM, 16 Go disque — suffisant pour sentence-transformers + ChromaDB.
+
+## Migration vers deploiement local
+
+L'application est concue pour rendre la migration triviale :
+
+1. **LLM** : Changer uniquement `LLM_BASE_URL` et `LLM_MODEL` dans `.env`
+   - Remplacer `https://openrouter.ai/api/v1` par `http://localhost:11434/v1`
+   - Remplacer `mistralai/mistral-7b-instruct` par `mistral:instruct`
+   - Mettre `OPENROUTER_API_KEY=ollama` (Ollama n'exige pas de cle mais le champ doit etre non-vide)
+
+2. **Aucune modification de code requise** : le `base_url` et l'`api_key` sont charges exclusivement depuis `.env`
+
+3. **Resultat** : inference 100% locale, aucune donnee ne quitte le reseau client
 
 ## Corpus
 
-Place `.pdf` and `.txt` files in the `/corpus` directory. The RAG pipeline will load and index them on startup. A sample file is included for testing.
+Placer des fichiers `.pdf` et `.txt` dans le dossier `/corpus`. Le pipeline RAG les charge et les indexe au demarrage.
+
+Le dossier `/corpus` est monte en volume — ajout ou remplacement de documents sans reconstruction du conteneur.
 
-The `/corpus` directory is volume-mounted — you can add or swap documents without rebuilding the container.
+Un fichier `sample.txt` est inclus pour tester le RAG immediatement.
 
-## Features
+## Fonctionnalites
 
-- **Two modes**: TUTOR (guided learning) and CRITIC (logical audit)
-- **5-phase Socratic protocol**: Ciblage → Clarification → Mécanisme → Vérification → Stress-test
-- **RAG-grounded questioning**: Questions are informed by course materials
-- **Session analysis**: End-of-session cognitive assessment with 6 scored dimensions
-- **JSON export**: Download full session data
-- **Privacy**: All processing is local — no external API calls, no data retention
+- **Deux modes** : TUTEUR (accompagnement) et CRITIQUE (audit logique)
+- **Protocole socratique en 5 phases** : Ciblage → Clarification → Mecanisme → Verification → Stress-test
+- **Une seule question par reponse** — jamais de reponse directe
+- **RAG** : questions ancrees dans les documents de cours
+- **Analyse de fin de session** : 6 dimensions notees (0-100) + bilan + export JSON
+- **Stateless** : aucune donnee persistee apres fermeture de l'onglet
 
-## Privacy
+## Confidentialite
 
-- No external API calls during inference
-- All processing in-memory or local filesystem
-- No retention of learner inputs after session ends
-- No login, no authentication
+- Sessions sans etat : aucune donnee persistee apres fermeture de l'onglet
+- Pas de localStorage pour l'historique
+- Pas de comptes utilisateurs, pas d'authentification
+- Pas de cookies, pas de tracking

app/llm.py

@@ -1,46 +1,67 @@
-"""LLM interaction via OpenRouter (OpenAI-compatible API)."""
+"""LLM interaction via OpenAI-compatible API."""
 
+import json
 import os
-import httpx
 
-OPENROUTER_API_KEY = os.environ.get("OPENROUTER_API_KEY", "")
-OPENROUTER_BASE_URL = "https://openrouter.ai/api/v1"
-MODEL = os.environ.get("LLM_MODEL", "mistralai/mistral-7b-instruct")
-TIMEOUT = 120.0
+from openai import AsyncOpenAI
 
+_api_key = os.environ.get("OPENROUTER_API_KEY", "")
+_base_url = os.environ.get("LLM_BASE_URL", "")
+_model = os.environ.get("LLM_MODEL", "mistralai/mistral-7b-instruct")
+
+_client = AsyncOpenAI(api_key=_api_key, base_url=_base_url)
+
+# ---------------------------------------------------------------------------
+# System prompts (verbatim from spec)
+# ---------------------------------------------------------------------------
 
 SYSTEM_TUTOR = """Tu es un mentor socratique bienveillant, empathique et complice.
 Tu utilises systématiquement le "TU" pour t'adresser à l'apprenant·e.
+Tu ne donnes jamais de réponse directe. Tu poses une seule question par message.
 Ton but est de faire accoucher l'esprit (maïeutique) en guidant la réflexion pas à pas.
 Règles :
 1. Ne dépasse jamais 3 à 4 phrases par message.
-2. Valide l'effort avant de rediriger. Si l'apprenant·e bloque, propose une analogie ou un indice progressif.
-3. Si une définition est demandée, explique en max 2 phrases puis vérifie la compréhension immédiatement.
-4. Dès qu'une base est posée, avance vers Phase 2. Ne reste pas bloqué en Phase 1.
-5. Évite les reproches. Préfère l'invitation : "Ce point semble complexe, essayons un autre angle..."
+2. Valide l'effort avant de rediriger.
+3. Si l'apprenant·e bloque, propose une analogie ou un indice progressif.
+4. Si une définition est demandée, explique en max 2 phrases puis pose immédiatement une question de vérification.
+5. Dès qu'une base est posée en Phase 1, avance vers Phase 2.
+6. Préfère l'invitation au reproche : "Ce point semble complexe, essayons un autre angle..."
 À la fin de chaque message, ajoute obligatoirement :
 ---
 Phase: [Numéro]
-
-Mode : Tuteur (Accompagnement)
-Sujet d'exploration : "{topic}" """
+Mode : Tuteur
+Sujet d'exploration : "{topic}"
+Contexte du cours (extrait RAG) :
+{rag_context}"""
 
 SYSTEM_CRITIC = """Tu es un mentor socratique bienveillant, empathique et complice.
 Tu utilises systématiquement le "TU" pour t'adresser à l'apprenant·e.
+Tu ne donnes jamais de réponse directe. Tu poses une seule question par message.
 Ton but est de faire accoucher l'esprit (maïeutique) en guidant la réflexion pas à pas.
 Règles :
 1. Ne dépasse jamais 3 à 4 phrases par message.
-2. Valide l'effort avant de rediriger. Si l'apprenant·e bloque, propose une analogie ou un indice progressif.
-3. Si une définition est demandée, explique en max 2 phrases puis vérifie la compréhension immédiatement.
-4. Dès qu'une base est posée, avance vers Phase 2. Ne reste pas bloqué en Phase 1.
-5. Évite les reproches. Préfère l'invitation : "Ce point semble complexe, essayons un autre angle..."
+2. Valide l'effort avant de rediriger.
+3. Si l'apprenant·e bloque, propose une analogie ou un indice progressif.
+4. Si une définition est demandée, explique en max 2 phrases puis pose immédiatement une question de vérification.
+5. Dès qu'une base est posée en Phase 1, avance vers Phase 2.
+6. Préfère l'invitation au reproche : "Ce point semble complexe, essayons un autre angle..."
 À la fin de chaque message, ajoute obligatoirement :
 ---
 Phase: [Numéro]
+Mode : Critique
+Ta mission : proposer des raisonnements fallacieux pour tester la vigilance.
+Reste un partenaire de jeu élégant, jamais méprisant.
+Sujet d'exploration : "{topic}"
+Contexte du cours (extrait RAG) :
+{rag_context}"""
 
-Mode : Critique (Audit Logique)
-Ta mission : proposer des raisonnements fallacieux pour tester la vigilance. Reste un partenaire de jeu élégant, jamais méprisant.
-Sujet d'exploration : "{topic}" """
+PHASE_GUIDANCE = {
+    0: "Phase actuelle : 0 (Ciblage). Reformule l'input de l'apprenant·e pour identifier l'objet exact de l'interrogation.",
+    1: "Phase actuelle : 1 (Clarification). Fais émerger les ambiguïtés conceptuelles, demande des définitions de termes.",
+    2: "Phase actuelle : 2 (Mécanisme). Demande à l'apprenant·e d'expliquer les relations cause-effet.",
+    3: "Phase actuelle : 3 (Vérification). Demande à l'apprenant·e d'identifier des preuves ou des critères testables.",
+    4: "Phase actuelle : 4 (Stress-test). Confronte le raisonnement avec ses propres limites ou des contre-exemples.",
+}
 
 ANALYSIS_SYSTEM = """Tu es un évaluateur pédagogique. Analyse la conversation suivante entre un mentor socratique et un apprenant.
 Produis un JSON strict avec cette structure :
@@ -51,70 +72,38 @@ Produis un JSON strict avec cette structure :
   "processScore": <0-100>,
   "reflectionScore": <0-100>,
   "integrityScore": <0-100>,
-  "summary": "<150 mots max : évaluation de la progression cognitive>",
+  "summary": "<évaluation de la progression cognitive, 150 mots max>",
   "keyStrengths": ["...", "..."],
   "weaknesses": ["...", "..."]
 }
 Réponds UNIQUEMENT avec le JSON, sans texte autour."""
 
 
-PHASE_GUIDANCE = {
-    0: "Phase actuelle: 0 (Ciblage). Identifie l'objet exact de l'interrogation et l'intention de l'apprenant·e.",
-    1: "Phase actuelle: 1 (Clarification). Fais émerger les ambiguïtés conceptuelles, définis les termes rigoureusement.",
-    2: "Phase actuelle: 2 (Mécanisme). Explore les relations cause-effet. 'Comment ça marche ?'",
-    3: "Phase actuelle: 3 (Vérification). Pousse vers des preuves, critères testables, protocoles de preuve.",
-    4: "Phase actuelle: 4 (Stress-test). Confronte le raisonnement avec des contre-exemples et des limites.",
-}
-
-STRATEGIES = [
-    "clarification", "test_necessite", "contre_exemple", "prediction",
-    "falsifiabilite", "mecanisme_causal", "changement_cadre",
-    "compression", "concession_controlee",
-]
-
-
-def build_system_prompt(mode: str, topic: str, phase: int, rag_context: list[str]) -> str:
+def build_system_prompt(mode: str, topic: str, phase: int, rag_chunks: list[str]) -> str:
     """Build the full system prompt with mode, phase guidance, and RAG context."""
     template = SYSTEM_TUTOR if mode == "TUTOR" else SYSTEM_CRITIC
-    system = template.replace("{topic}", topic)
-
-    system += f"\n\n{PHASE_GUIDANCE.get(phase, PHASE_GUIDANCE[0])}"
 
-    system += f"\n\nStratégies socratiques disponibles : {', '.join(STRATEGIES)}. Choisis la plus pertinente pour ce tour."
+    rag_text = "\n---\n".join(rag_chunks) if rag_chunks else "(aucun document chargé)"
+    prompt = template.replace("{topic}", topic).replace("{rag_context}", rag_text)
 
-    if rag_context:
-        context_text = "\n---\n".join(rag_context)
-        system += f"\n\nContexte documentaire (utilise-le pour ancrer tes questions, ne le montre PAS directement à l'apprenant·e) :\n{context_text}"
+    prompt += f"\n\n{PHASE_GUIDANCE.get(phase, PHASE_GUIDANCE[0])}"
 
-    return system
+    return prompt
 
 
 async def chat(system_prompt: str, messages: list[dict]) -> str:
-    """Send chat to OpenRouter and return assistant response."""
-    api_messages = [{"role": "system", "content": system_prompt}]
-    api_messages.extend(messages)
-
-    async with httpx.AsyncClient(timeout=TIMEOUT) as client:
-        response = await client.post(
-            f"{OPENROUTER_BASE_URL}/chat/completions",
-            headers={
-                "Authorization": f"Bearer {OPENROUTER_API_KEY}",
-                "Content-Type": "application/json",
-            },
-            json={
-                "model": MODEL,
-                "messages": api_messages,
-            },
-        )
-        response.raise_for_status()
-        data = response.json()
-        return data["choices"][0]["message"]["content"]
+    """Send chat completion request and return assistant message."""
+    api_messages = [{"role": "system", "content": system_prompt}] + messages
+
+    response = await _client.chat.completions.create(
+        model=_model,
+        messages=api_messages,
+    )
+    return response.choices[0].message.content
 
 
 async def analyze_session(messages: list[dict]) -> dict:
     """Generate end-of-session analysis via a second LLM call."""
-    import json as json_mod
-
     conversation_text = "\n".join(
         f"{'Apprenant' if m['role'] == 'user' else 'Companion'}: {m['content']}"
         for m in messages
@@ -126,14 +115,12 @@ async def analyze_session(messages: list[dict]) -> dict:
 
     raw = await chat(ANALYSIS_SYSTEM, analysis_messages)
 
-    # Try to parse JSON from response
     try:
-        # Find JSON in the response
         start = raw.find("{")
         end = raw.rfind("}") + 1
         if start >= 0 and end > start:
-            return json_mod.loads(raw[start:end])
-    except (json_mod.JSONDecodeError, ValueError):
+            return json.loads(raw[start:end])
+    except (json.JSONDecodeError, ValueError):
         pass
 
     return {

app/main.py

@@ -1,12 +1,11 @@
 """FastAPI application for AIM Learning Companion."""
 
-import json
-import time
+import re
 from contextlib import asynccontextmanager
 from pathlib import Path
 
 from fastapi import FastAPI
-from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
@@ -33,7 +32,6 @@ class ChatRequest(BaseModel):
     topic: str = ""
     phase: int = 0
     history: list[dict] = []
-    timestamp: float = 0.0
 
 
 class ChatResponse(BaseModel):
@@ -59,14 +57,13 @@ class AnalysisResponse(BaseModel):
     rhythmBreakCount: int = 0
 
 
-@app.get("/", response_class=HTMLResponse)
+@app.get("/")
 async def index():
     return FileResponse(str(STATIC_DIR / "index.html"))
 
 
 def _detect_phase(reply: str, current_phase: int) -> int:
     """Extract phase number from the companion's reply."""
-    import re
     match = re.search(r"Phase:\s*(\d)", reply)
     if match:
         return int(match.group(1))
@@ -75,22 +72,13 @@ def _detect_phase(reply: str, current_phase: int) -> int:
 
 @app.post("/api/chat", response_model=ChatResponse)
 async def api_chat(req: ChatRequest):
-    # Retrieve relevant context from corpus
     rag_chunks = retrieve(req.message)
-
-    # Build system prompt
     system_prompt = build_system_prompt(req.mode, req.topic, req.phase, rag_chunks)
 
-    # Build message history for LLM
-    messages = []
-    for msg in req.history:
-        messages.append({"role": msg["role"], "content": msg["content"]})
+    messages = [{"role": m["role"], "content": m["content"]} for m in req.history]
     messages.append({"role": "user", "content": req.message})
 
-    # Get LLM response
     reply = await chat(system_prompt, messages)
-
-    # Detect phase from reply
     detected_phase = _detect_phase(reply, req.phase)
 
     return ChatResponse(reply=reply, phase=detected_phase)
@@ -98,10 +86,9 @@ async def api_chat(req: ChatRequest):
 
 @app.post("/api/analyze", response_model=AnalysisResponse)
 async def api_analyze(req: AnalysisRequest):
-    # Get LLM analysis
     analysis = await analyze_session(req.history)
 
-    # Count rhythm breaks (responses under 8 seconds)
+    # Count rhythm breaks: user responses submitted in under 8 seconds
     rhythm_breaks = 0
     if len(req.timestamps) >= 2:
         for i in range(1, len(req.timestamps), 2):

app/rag.py

@@ -1,13 +1,13 @@
 """RAG layer: load corpus, chunk, embed, and retrieve."""
 
 import os
-import re
+
 import chromadb
 from sentence_transformers import SentenceTransformer
 
 CORPUS_DIR = os.environ.get("CORPUS_DIR", "corpus")
 CHROMA_DIR = os.environ.get("CHROMA_DIR", "chroma_data")
-CHUNK_SIZE = 500  # tokens (approximated as words for simplicity)
+CHUNK_SIZE = 500   # approximate token count (words used as proxy)
 CHUNK_OVERLAP = 50
 TOP_K = 3
 
@@ -60,11 +60,11 @@ def load_corpus() -> None:
         is_persistent=True,
     ))
 
-    # Delete and recreate to pick up new documents
     try:
         client.delete_collection("corpus")
     except Exception:
         pass
+
     _collection = client.create_collection(
         name="corpus",
         metadata={"hnsw:space": "cosine"},
@@ -78,7 +78,7 @@ def load_corpus() -> None:
     if not os.path.isdir(CORPUS_DIR):
         return
 
-    for filename in os.listdir(CORPUS_DIR):
+    for filename in sorted(os.listdir(CORPUS_DIR)):
         filepath = os.path.join(CORPUS_DIR, filename)
         if filename.lower().endswith(".txt"):
             text = _read_txt(filepath)

corpus/sample.txt

@@ -1,7 +1,7 @@
-Critical Thinking in Professional AI Contexts
+Critical Thinking Applied to AI in Professional Training Contexts
 
 In professional environments where artificial intelligence systems are deployed, critical thinking becomes an essential competency that goes beyond simple technical understanding. Practitioners must evaluate AI outputs not as ground truth but as probabilistic suggestions shaped by training data, model architecture, and inference parameters. A critical thinker in this domain questions the provenance of training data, identifies potential biases embedded in model outputs, and assesses whether the confidence level reported by an AI system genuinely reflects the reliability of its predictions. This requires a combination of domain expertise, statistical literacy, and epistemological humility — the recognition that even highly performant models can fail in subtle, context-dependent ways.
 
-The application of critical thinking to AI decision-making in professional training contexts demands structured reasoning frameworks. Professionals must learn to distinguish between correlation and causation when interpreting AI-generated insights, evaluate the external validity of models trained on historical data when applied to novel situations, and recognize the limits of automation in tasks requiring ethical judgment or contextual nuance. Effective critical evaluation also involves stress-testing AI recommendations against edge cases, considering what evidence would falsify a given AI-generated conclusion, and maintaining awareness of the Dunning-Kruger effect — where superficial familiarity with AI tools can create an illusion of deep understanding.
+The application of critical thinking to AI decision-making in professional training contexts demands structured reasoning frameworks. Professionals must learn to distinguish between correlation and causation when interpreting AI-generated insights, evaluate the external validity of models trained on historical data when applied to novel situations, and recognize the limits of automation in tasks requiring ethical judgment or contextual nuance. Effective critical evaluation also involves stress-testing AI recommendations against edge cases, considering what evidence would falsify a given AI-generated conclusion, and maintaining awareness of the Dunning-Kruger effect — where superficial familiarity with AI tools can create an illusion of deep understanding. Training programs should embed these analytical habits into every interaction with AI tools, rather than treating critical evaluation as a separate module.
 
 Building a culture of critical thinking around AI in organizations requires deliberate pedagogical strategies. Rather than passively accepting AI outputs, professionals should be trained to interrogate them through Socratic questioning: What assumptions does this model make? What data was excluded? Under what conditions would this recommendation fail? How would we verify this output independently? These habits of mind transform AI users from passive consumers into active evaluators, creating a more robust and trustworthy integration of artificial intelligence into professional workflows. The goal is not skepticism for its own sake, but informed trust — knowing when to rely on AI systems and when to override them based on principled reasoning.

docker-compose.yml

@@ -6,9 +6,8 @@ services:
     volumes:
       - ./corpus:/app/corpus
       - chroma-data:/app/chroma_data
-    environment:
-      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY}
-      - LLM_MODEL=${LLM_MODEL:-mistralai/mistral-7b-instruct}
+    env_file:
+      - .env
     restart: unless-stopped
 
 volumes:

index.html

@@ -1,845 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>AIM Learning Companion</title>
-<style type="text/css">
-*, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    background-color: #0f1117;
-    color: #e4e6f0;
-    min-height: 100vh;
-}
-
-/* === SCREENS === */
-.screen {
-    display: none !important;
-    min-height: 100vh;
-}
-.screen.active {
-    display: flex !important;
-    flex-direction: column;
-}
-
-/* === SETUP SCREEN === */
-.setup-container {
-    max-width: 520px;
-    margin: 0 auto;
-    padding: 3rem 2rem;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-}
-.logo {
-    font-size: 2.2rem;
-    font-weight: 800;
-    margin-bottom: 0.4rem;
-    background: linear-gradient(135deg, #a29bfe, #00cec9);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-.subtitle {
-    color: #8b8fa3;
-    font-size: 0.95rem;
-    margin-bottom: 2.5rem;
-}
-.setup-form {
-    text-align: left;
-    width: 100%;
-}
-.form-label {
-    display: block;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #8b8fa3;
-    margin-bottom: 0.4rem;
-    margin-top: 1.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-.form-input {
-    width: 100%;
-    padding: 0.8rem 1rem;
-    background-color: #1a1d27;
-    border: 1px solid #2e3144;
-    border-radius: 10px;
-    color: #e4e6f0;
-    font-size: 1rem;
-    font-family: inherit;
-    outline: none;
-    transition: border-color 0.2s;
-}
-.form-input:focus {
-    border-color: #6c5ce7;
-}
-.mode-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-    margin-top: 0.25rem;
-}
-.mode-card {
-    background-color: #1a1d27;
-    border: 2px solid #2e3144;
-    border-radius: 12px;
-    padding: 1.2rem 0.8rem;
-    cursor: pointer;
-    text-align: center;
-    color: #e4e6f0;
-    transition: all 0.2s;
-    font-family: inherit;
-    font-size: inherit;
-}
-.mode-card:hover {
-    border-color: #6c5ce7;
-    background-color: #1e2130;
-}
-.mode-card.selected {
-    border-color: #6c5ce7;
-    background-color: rgba(108, 92, 231, 0.12);
-}
-.mode-card-icon {
-    font-size: 1.6rem;
-    display: block;
-    margin-bottom: 0.5rem;
-}
-.mode-card-title {
-    font-weight: 700;
-    font-size: 0.95rem;
-    display: block;
-    margin-bottom: 0.25rem;
-}
-.mode-card-desc {
-    font-size: 0.78rem;
-    color: #8b8fa3;
-    display: block;
-}
-.btn-primary {
-    width: 100%;
-    padding: 0.85rem;
-    background-color: #6c5ce7;
-    color: #ffffff;
-    border: none;
-    border-radius: 10px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    margin-top: 2rem;
-    font-family: inherit;
-    transition: opacity 0.2s;
-}
-.btn-primary:hover:not(:disabled) {
-    opacity: 0.85;
-}
-.btn-primary:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-}
-.btn-secondary {
-    padding: 0.45rem 0.85rem;
-    background-color: #242734;
-    color: #e4e6f0;
-    border: 1px solid #2e3144;
-    border-radius: 8px;
-    font-size: 0.82rem;
-    cursor: pointer;
-    font-family: inherit;
-    transition: background-color 0.2s;
-}
-.btn-secondary:hover {
-    background-color: #2e3144;
-}
-
-/* === CHAT SCREEN === */
-.chat-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1.25rem;
-    background-color: #1a1d27;
-    border-bottom: 1px solid #2e3144;
-    flex-shrink: 0;
-}
-.header-left {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-.header-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-}
-.badge-mode {
-    font-size: 0.65rem;
-    font-weight: 700;
-    padding: 0.15rem 0.55rem;
-    background-color: #6c5ce7;
-    color: #ffffff;
-    border-radius: 20px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-.badge-topic {
-    font-size: 0.82rem;
-    color: #8b8fa3;
-    max-width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.header-right {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* === PHASES === */
-.phases-bar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.85rem 1rem;
-    background-color: #1a1d27;
-    border-bottom: 1px solid #2e3144;
-    flex-shrink: 0;
-    gap: 0;
-}
-.phase-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.35rem;
-}
-.phase-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: #2e3144;
-    transition: all 0.3s;
-}
-.phase-item.is-active .phase-dot {
-    background-color: #6c5ce7;
-    box-shadow: 0 0 10px rgba(108, 92, 231, 0.6);
-}
-.phase-item.is-done .phase-dot {
-    background-color: #00b894;
-}
-.phase-name {
-    font-size: 0.65rem;
-    color: #8b8fa3;
-    white-space: nowrap;
-}
-.phase-item.is-active .phase-name {
-    color: #a29bfe;
-    font-weight: 700;
-}
-.phase-item.is-done .phase-name {
-    color: #00b894;
-}
-.phase-line {
-    width: 32px;
-    height: 2px;
-    background-color: #2e3144;
-    margin: 0 0.2rem;
-    margin-bottom: 1.1rem;
-}
-
-/* === MESSAGES === */
-.messages-area {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-.msg {
-    max-width: 78%;
-    padding: 0.8rem 1rem;
-    border-radius: 14px;
-    line-height: 1.55;
-    font-size: 0.93rem;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-.msg-user {
-    align-self: flex-end;
-    background-color: #6c5ce7;
-    color: #ffffff;
-    border-bottom-right-radius: 4px;
-}
-.msg-assistant {
-    align-self: flex-start;
-    background-color: #242734;
-    border: 1px solid #2e3144;
-    border-bottom-left-radius: 4px;
-}
-.msg-system {
-    align-self: center;
-    background-color: transparent;
-    color: #8b8fa3;
-    font-size: 0.82rem;
-    font-style: italic;
-    text-align: center;
-    max-width: 100%;
-}
-.msg-typing {
-    align-self: flex-start;
-    padding: 0.8rem 1rem;
-    background-color: #242734;
-    border: 1px solid #2e3144;
-    border-radius: 14px;
-    border-bottom-left-radius: 4px;
-    color: #8b8fa3;
-    font-style: italic;
-    font-size: 0.93rem;
-}
-
-/* === INPUT === */
-.input-bar {
-    display: flex;
-    gap: 0.65rem;
-    padding: 0.85rem 1.25rem;
-    background-color: #1a1d27;
-    border-top: 1px solid #2e3144;
-    flex-shrink: 0;
-}
-.input-bar textarea {
-    flex: 1;
-    padding: 0.7rem 0.9rem;
-    background-color: #242734;
-    border: 1px solid #2e3144;
-    border-radius: 10px;
-    color: #e4e6f0;
-    font-size: 0.93rem;
-    font-family: inherit;
-    resize: none;
-    outline: none;
-    transition: border-color 0.2s;
-}
-.input-bar textarea:focus {
-    border-color: #6c5ce7;
-}
-.input-bar .btn-primary {
-    width: auto;
-    margin-top: 0;
-    padding: 0.7rem 1.4rem;
-    flex-shrink: 0;
-}
-
-/* === ANALYSIS SCREEN === */
-.analysis-wrap {
-    max-width: 680px;
-    margin: 0 auto;
-    padding: 2rem;
-    overflow-y: auto;
-    flex: 1;
-}
-.analysis-title {
-    text-align: center;
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-}
-.loading-text {
-    text-align: center;
-    color: #8b8fa3;
-    padding: 3rem 0;
-    font-style: italic;
-}
-.hidden {
-    display: none !important;
-}
-.scores-row {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.85rem;
-    margin-bottom: 1.5rem;
-}
-.score-tile {
-    background-color: #1a1d27;
-    border: 1px solid #2e3144;
-    border-radius: 12px;
-    padding: 1.1rem;
-    text-align: center;
-}
-.score-num {
-    font-size: 2rem;
-    font-weight: 800;
-    margin-bottom: 0.2rem;
-}
-.score-lbl {
-    font-size: 0.72rem;
-    color: #8b8fa3;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-.score-track {
-    height: 4px;
-    background-color: #2e3144;
-    border-radius: 2px;
-    margin-top: 0.65rem;
-    overflow: hidden;
-}
-.score-fill {
-    height: 100%;
-    border-radius: 2px;
-    transition: width 0.8s ease;
-}
-.analysis-card {
-    background-color: #1a1d27;
-    border: 1px solid #2e3144;
-    border-radius: 12px;
-    padding: 1.2rem;
-    margin-bottom: 0.85rem;
-}
-.analysis-card h3 {
-    font-size: 0.8rem;
-    color: #8b8fa3;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    margin-bottom: 0.65rem;
-}
-.analysis-card p {
-    line-height: 1.6;
-    font-size: 0.93rem;
-}
-.analysis-card ul {
-    list-style: none;
-    padding: 0;
-}
-.analysis-card li {
-    padding: 0.35rem 0;
-    padding-left: 1.2rem;
-    position: relative;
-    font-size: 0.93rem;
-}
-.analysis-card li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0.65rem;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #6c5ce7;
-}
-.analysis-btns {
-    display: flex;
-    gap: 0.85rem;
-    margin-top: 1.5rem;
-}
-.analysis-btns .btn-primary,
-.analysis-btns .btn-secondary {
-    flex: 1;
-    text-align: center;
-}
-
-@media (max-width: 640px) {
-    .scores-row {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .phase-name {
-        font-size: 0.55rem;
-    }
-    .phase-line {
-        width: 16px;
-    }
-    .msg {
-        max-width: 90%;
-    }
-}
-</style>
-</head>
-<body>
-
-<!-- ============ SETUP ============ -->
-<div id="screen-setup" class="screen active">
-    <div class="setup-container">
-        <div class="logo">AIM Learning Companion</div>
-        <p class="subtitle">Compagnon socratique pour l'apprentissage professionnel</p>
-        <div class="setup-form">
-            <label class="form-label" for="inp-topic">Sujet d'exploration</label>
-            <input class="form-input" type="text" id="inp-topic" placeholder="Ex: L'intelligence artificielle en entreprise..." autocomplete="off">
-
-            <label class="form-label">Mode</label>
-            <div class="mode-grid">
-                <button class="mode-card selected" data-mode="TUTOR">
-                    <span class="mode-card-icon">&#11088;</span>
-                    <span class="mode-card-title">TUTOR</span>
-                    <span class="mode-card-desc">Accompagnement bienveillant</span>
-                </button>
-                <button class="mode-card" data-mode="CRITIC">
-                    <span class="mode-card-icon">&#9878;&#65039;</span>
-                    <span class="mode-card-title">CRITIC</span>
-                    <span class="mode-card-desc">Audit logique</span>
-                </button>
-            </div>
-
-            <label class="form-label" for="inp-key">Cle API OpenRouter</label>
-            <input class="form-input" type="password" id="inp-key" placeholder="sk-or-v1-..." autocomplete="off">
-
-            <button id="btn-start" class="btn-primary" disabled>Commencer la session</button>
-        </div>
-    </div>
-</div>
-
-<!-- ============ CHAT ============ -->
-<div id="screen-chat" class="screen">
-    <header class="chat-header">
-        <div class="header-left">
-            <span class="header-title">Companion</span>
-            <span id="hdr-mode" class="badge-mode">TUTOR</span>
-            <span id="hdr-topic" class="badge-topic"></span>
-        </div>
-        <div class="header-right">
-            <button id="btn-end" class="btn-secondary">Terminer</button>
-            <button id="btn-reset" class="btn-secondary">Reset</button>
-        </div>
-    </header>
-    <div class="phases-bar">
-        <div class="phase-item" data-p="0"><div class="phase-dot"></div><span class="phase-name">Ciblage</span></div>
-        <div class="phase-line"></div>
-        <div class="phase-item" data-p="1"><div class="phase-dot"></div><span class="phase-name">Clarification</span></div>
-        <div class="phase-line"></div>
-        <div class="phase-item" data-p="2"><div class="phase-dot"></div><span class="phase-name">Mecanisme</span></div>
-        <div class="phase-line"></div>
-        <div class="phase-item" data-p="3"><div class="phase-dot"></div><span class="phase-name">Verification</span></div>
-        <div class="phase-line"></div>
-        <div class="phase-item" data-p="4"><div class="phase-dot"></div><span class="phase-name">Stress-test</span></div>
-    </div>
-    <div id="messages" class="messages-area"></div>
-    <div class="input-bar">
-        <textarea id="inp-msg" placeholder="Ecris ta reponse ici..." rows="2"></textarea>
-        <button id="btn-send" class="btn-primary">Envoyer</button>
-    </div>
-</div>
-
-<!-- ============ ANALYSIS ============ -->
-<div id="screen-analysis" class="screen">
-    <div class="analysis-wrap">
-        <h2 class="analysis-title">Analyse de session</h2>
-        <div id="ana-loading" class="loading-text">Analyse en cours...</div>
-        <div id="ana-content" class="hidden">
-            <div class="scores-row" id="ana-scores"></div>
-            <div class="analysis-card"><h3>Resume</h3><p id="ana-summary"></p></div>
-            <div class="analysis-card"><h3>Points forts</h3><ul id="ana-strengths"></ul></div>
-            <div class="analysis-card"><h3>Axes d'amelioration</h3><ul id="ana-weaknesses"></ul></div>
-            <div class="analysis-card"><h3>Rythme</h3><p id="ana-rhythm"></p></div>
-            <div class="analysis-btns">
-                <button id="btn-export" class="btn-primary">Exporter en JSON</button>
-                <button id="btn-new" class="btn-secondary">Nouvelle session</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-(function() {
-    "use strict";
-
-    var API_URL = "https://openrouter.ai/api/v1/chat/completions";
-    var MODEL = "mistralai/mistral-small-3.1-24b-instruct";
-
-    /* --- RAG corpus --- */
-    var CORPUS = [
-        "In professional environments where artificial intelligence systems are deployed, critical thinking becomes an essential competency that goes beyond simple technical understanding. Practitioners must evaluate AI outputs not as ground truth but as probabilistic suggestions shaped by training data, model architecture, and inference parameters. A critical thinker in this domain questions the provenance of training data, identifies potential biases embedded in model outputs, and assesses whether the confidence level reported by an AI system genuinely reflects the reliability of its predictions.",
-        "The application of critical thinking to AI decision-making in professional training contexts demands structured reasoning frameworks. Professionals must learn to distinguish between correlation and causation when interpreting AI-generated insights, evaluate the external validity of models trained on historical data when applied to novel situations, and recognize the limits of automation in tasks requiring ethical judgment or contextual nuance.",
-        "Building a culture of critical thinking around AI in organizations requires deliberate pedagogical strategies. Rather than passively accepting AI outputs, professionals should be trained to interrogate them through Socratic questioning: What assumptions does this model make? What data was excluded? Under what conditions would this recommendation fail? How would we verify this output independently?"
-    ];
-
-    function retrieveContext(query) {
-        var words = query.toLowerCase().split(/\s+/);
-        var scored = [];
-        for (var i = 0; i < CORPUS.length; i++) {
-            var lower = CORPUS[i].toLowerCase();
-            var score = 0;
-            for (var j = 0; j < words.length; j++) {
-                if (words[j].length > 3 && lower.indexOf(words[j]) >= 0) score++;
-            }
-            if (score > 0) scored.push({ chunk: CORPUS[i], score: score });
-        }
-        scored.sort(function(a, b) { return b.score - a.score; });
-        return scored.slice(0, 3).map(function(s) { return s.chunk; });
-    }
-
-    /* --- System prompts --- */
-    var SYSTEM_TUTOR = "Tu es un mentor socratique bienveillant, empathique et complice.\nTu utilises systematiquement le \"TU\" pour t'adresser a l'apprenant.\nTon but est de faire accoucher l'esprit (maieutique) en guidant la reflexion pas a pas.\nRegles :\n1. Ne depasse jamais 3 a 4 phrases par message.\n2. Valide l'effort avant de rediriger. Si l'apprenant bloque, propose une analogie ou un indice progressif.\n3. Si une definition est demandee, explique en max 2 phrases puis verifie la comprehension immediatement.\n4. Des qu'une base est posee, avance vers Phase 2. Ne reste pas bloque en Phase 1.\n5. Evite les reproches. Prefere l'invitation.\nA la fin de chaque message, ajoute obligatoirement :\n---\nPhase: [Numero]\n\nMode : Tuteur (Accompagnement)";
-
-    var SYSTEM_CRITIC = "Tu es un mentor socratique bienveillant, empathique et complice.\nTu utilises systematiquement le \"TU\" pour t'adresser a l'apprenant.\nTon but est de faire accoucher l'esprit (maieutique) en guidant la reflexion pas a pas.\nRegles :\n1. Ne depasse jamais 3 a 4 phrases par message.\n2. Valide l'effort avant de rediriger.\n3. Si une definition est demandee, explique en max 2 phrases puis verifie la comprehension immediatement.\n4. Des qu'une base est posee, avance vers Phase 2.\n5. Evite les reproches.\nA la fin de chaque message, ajoute obligatoirement :\n---\nPhase: [Numero]\n\nMode : Critique (Audit Logique)\nTa mission : proposer des raisonnements fallacieux pour tester la vigilance. Reste un partenaire de jeu elegant, jamais meprisant.";
-
-    var PHASE_DESC = [
-        "Phase actuelle: 0 (Ciblage). Identifie l'objet exact de l'interrogation.",
-        "Phase actuelle: 1 (Clarification). Fais emerger les ambiguites conceptuelles.",
-        "Phase actuelle: 2 (Mecanisme). Explore les relations cause-effet.",
-        "Phase actuelle: 3 (Verification). Pousse vers des preuves et criteres testables.",
-        "Phase actuelle: 4 (Stress-test). Confronte le raisonnement avec des contre-exemples."
-    ];
-
-    var STRATEGIES = "clarification, test_necessite, contre_exemple, prediction, falsifiabilite, mecanisme_causal, changement_cadre, compression, concession_controlee";
-
-    var ANALYSIS_SYSTEM = "Tu es un evaluateur pedagogique. Analyse la conversation suivante entre un mentor socratique et un apprenant.\nProduis un JSON strict avec cette structure :\n{\"reasoningScore\": 0, \"clarityScore\": 0, \"skepticismScore\": 0, \"processScore\": 0, \"reflectionScore\": 0, \"integrityScore\": 0, \"summary\": \"\", \"keyStrengths\": [], \"weaknesses\": []}\nRemplis chaque score de 0 a 100. Reponds UNIQUEMENT avec le JSON, sans texte autour.";
-
-    function buildSystem(mode, topic, phase, rag) {
-        var s = (mode === "TUTOR" ? SYSTEM_TUTOR : SYSTEM_CRITIC);
-        s += "\nSujet d'exploration : " + topic;
-        s += "\n\n" + (PHASE_DESC[phase] || PHASE_DESC[0]);
-        s += "\n\nStrategies socratiques : " + STRATEGIES;
-        if (rag.length > 0) {
-            s += "\n\nContexte documentaire (ne le montre PAS directement) :\n" + rag.join("\n---\n");
-        }
-        return s;
-    }
-
-    /* --- API --- */
-    function callLLM(key, sys, msgs) {
-        if (!key || key.length < 10) {
-            return Promise.reject(new Error("Cle API manquante ou invalide (longueur: " + (key ? key.length : 0) + ")"));
-        }
-        var body = JSON.stringify({
-            model: MODEL,
-            messages: [{ role: "system", content: sys }].concat(msgs)
-        });
-        var hdrs = new Headers();
-        hdrs.append("Content-Type", "application/json");
-        hdrs.append("Authorization", "Bearer " + key);
-        hdrs.append("HTTP-Referer", "https://rochikh.github.io/aim/");
-        hdrs.append("X-Title", "AIM Learning Companion");
-        return fetch(API_URL, {
-            method: "POST",
-            headers: hdrs,
-            body: body
-        }).then(function(r) {
-            if (!r.ok) return r.text().then(function(t) { throw new Error("API " + r.status + ": " + t); });
-            return r.json();
-        }).then(function(d) {
-            return d.choices[0].message.content;
-        });
-    }
-
-    /* --- State --- */
-    var S = { mode: "TUTOR", topic: "", phase: 0, history: [], ts: [], sending: false, key: "" };
-
-    /* --- DOM refs --- */
-    var screenSetup = document.getElementById("screen-setup");
-    var screenChat = document.getElementById("screen-chat");
-    var screenAnalysis = document.getElementById("screen-analysis");
-    var inpTopic = document.getElementById("inp-topic");
-    var inpKey = document.getElementById("inp-key");
-    var btnStart = document.getElementById("btn-start");
-    var messagesEl = document.getElementById("messages");
-    var inpMsg = document.getElementById("inp-msg");
-    var btnSend = document.getElementById("btn-send");
-
-    function showScreen(name) {
-        screenSetup.classList.remove("active");
-        screenChat.classList.remove("active");
-        screenAnalysis.classList.remove("active");
-        if (name === "setup") screenSetup.classList.add("active");
-        else if (name === "chat") screenChat.classList.add("active");
-        else if (name === "analysis") screenAnalysis.classList.add("active");
-    }
-
-    /* --- Setup --- */
-    function checkReady() {
-        btnStart.disabled = !(inpTopic.value.trim() && inpKey.value.trim());
-    }
-    inpTopic.addEventListener("input", checkReady);
-    inpKey.addEventListener("input", checkReady);
-
-    var modeCards = document.querySelectorAll(".mode-card");
-    for (var i = 0; i < modeCards.length; i++) {
-        modeCards[i].addEventListener("click", function() {
-            for (var j = 0; j < modeCards.length; j++) modeCards[j].classList.remove("selected");
-            this.classList.add("selected");
-            S.mode = this.getAttribute("data-mode");
-        });
-    }
-
-    btnStart.addEventListener("click", function() {
-        S.topic = inpTopic.value.trim();
-        S.key = inpKey.value.trim();
-        if (!S.topic || !S.key) return;
-        S.phase = 0;
-        S.history = [];
-        S.ts = [];
-        document.getElementById("hdr-mode").textContent = S.mode;
-        document.getElementById("hdr-topic").textContent = S.topic;
-        showScreen("chat");
-        updatePhases();
-        addMsg("system", "Session demarree - Mode: " + S.mode + " - Sujet: " + S.topic);
-        doSend("Je souhaite explorer le sujet suivant : " + S.topic);
-    });
-
-    /* --- Phases --- */
-    function updatePhases() {
-        var items = document.querySelectorAll(".phase-item");
-        for (var i = 0; i < items.length; i++) {
-            var p = parseInt(items[i].getAttribute("data-p"));
-            items[i].classList.remove("is-active", "is-done");
-            if (p === S.phase) items[i].classList.add("is-active");
-            else if (p < S.phase) items[i].classList.add("is-done");
-        }
-    }
-
-    /* --- Messages --- */
-    function addMsg(type, text) {
-        var div = document.createElement("div");
-        if (type === "user") div.className = "msg msg-user";
-        else if (type === "assistant") div.className = "msg msg-assistant";
-        else div.className = "msg msg-system";
-        div.textContent = text;
-        messagesEl.appendChild(div);
-        messagesEl.scrollTop = messagesEl.scrollHeight;
-    }
-
-    /* --- Send --- */
-    btnSend.addEventListener("click", function() { sendUserMsg(); });
-    inpMsg.addEventListener("keydown", function(e) {
-        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendUserMsg(); }
-    });
-
-    function sendUserMsg() {
-        var t = inpMsg.value.trim();
-        if (!t || S.sending) return;
-        inpMsg.value = "";
-        addMsg("user", t);
-        S.ts.push(Date.now() / 1000);
-        doSend(t);
-    }
-
-    function doSend(text) {
-        S.sending = true;
-        btnSend.disabled = true;
-        inpMsg.disabled = true;
-
-        var typing = document.createElement("div");
-        typing.className = "msg-typing";
-        typing.textContent = "Companion reflechit...";
-        messagesEl.appendChild(typing);
-        messagesEl.scrollTop = messagesEl.scrollHeight;
-
-        var rag = retrieveContext(text);
-        var sys = buildSystem(S.mode, S.topic, S.phase, rag);
-        var apiMsgs = S.history.concat([{ role: "user", content: text }]);
-
-        callLLM(S.key, sys, apiMsgs).then(function(reply) {
-            if (typing.parentNode) typing.parentNode.removeChild(typing);
-            var m = reply.match(/Phase:\s*(\d)/);
-            if (m) { S.phase = parseInt(m[1]); updatePhases(); }
-            S.history.push({ role: "user", content: text });
-            S.history.push({ role: "assistant", content: reply });
-            S.ts.push(Date.now() / 1000);
-            addMsg("assistant", reply);
-        }).catch(function(err) {
-            if (typing.parentNode) typing.parentNode.removeChild(typing);
-            addMsg("system", "Erreur: " + err.message);
-        }).finally(function() {
-            S.sending = false;
-            btnSend.disabled = false;
-            inpMsg.disabled = false;
-            inpMsg.focus();
-        });
-    }
-
-    /* --- End session --- */
-    document.getElementById("btn-end").addEventListener("click", function() {
-        if (S.history.length === 0) { addMsg("system", "Aucun message."); return; }
-        showScreen("analysis");
-        document.getElementById("ana-loading").classList.remove("hidden");
-        document.getElementById("ana-content").classList.add("hidden");
-
-        var conv = S.history.map(function(m) {
-            return (m.role === "user" ? "Apprenant" : "Companion") + ": " + m.content;
-        }).join("\n");
-
-        callLLM(S.key, ANALYSIS_SYSTEM, [{ role: "user", content: "Conversation:\n\n" + conv }]).then(function(raw) {
-            var s = raw.indexOf("{"), e = raw.lastIndexOf("}") + 1;
-            var data = {};
-            if (s >= 0 && e > s) { try { data = JSON.parse(raw.substring(s, e)); } catch(x) {} }
-            var fast = 0;
-            for (var i = 1; i < S.ts.length; i += 2) {
-                if (i + 1 < S.ts.length && S.ts[i + 1] - S.ts[i] < 8) fast++;
-            }
-            data.rhythmBreaks = fast;
-            showAnalysis(data);
-        }).catch(function(err) {
-            document.getElementById("ana-loading").textContent = "Erreur: " + err.message;
-        });
-    });
-
-    function showAnalysis(d) {
-        document.getElementById("ana-loading").classList.add("hidden");
-        document.getElementById("ana-content").classList.remove("hidden");
-
-        var defs = [
-            { k: "reasoningScore", l: "Raisonnement", c: "#6c5ce7" },
-            { k: "clarityScore", l: "Clarte", c: "#00cec9" },
-            { k: "skepticismScore", l: "Scepticisme", c: "#e17055" },
-            { k: "processScore", l: "Processus", c: "#00b894" },
-            { k: "reflectionScore", l: "Reflexion", c: "#fdcb6e" },
-            { k: "integrityScore", l: "Integrite", c: "#a29bfe" }
-        ];
-        var grid = document.getElementById("ana-scores");
-        grid.innerHTML = "";
-        for (var i = 0; i < defs.length; i++) {
-            var v = d[defs[i].k] || 0;
-            var tile = document.createElement("div");
-            tile.className = "score-tile";
-            tile.innerHTML = '<div class="score-num" style="color:' + defs[i].c + '">' + v + '</div><div class="score-lbl">' + defs[i].l + '</div><div class="score-track"><div class="score-fill" style="width:' + v + '%;background:' + defs[i].c + '"></div></div>';
-            grid.appendChild(tile);
-        }
-        document.getElementById("ana-summary").textContent = d.summary || "Pas d'analyse disponible.";
-
-        var sl = document.getElementById("ana-strengths"); sl.innerHTML = "";
-        var strengths = d.keyStrengths || [];
-        for (var i = 0; i < strengths.length; i++) {
-            var li = document.createElement("li"); li.textContent = strengths[i]; sl.appendChild(li);
-        }
-        var wl = document.getElementById("ana-weaknesses"); wl.innerHTML = "";
-        var weaks = d.weaknesses || [];
-        for (var i = 0; i < weaks.length; i++) {
-            var li = document.createElement("li"); li.textContent = weaks[i]; wl.appendChild(li);
-        }
-        document.getElementById("ana-rhythm").textContent = "Reponses trop rapides (< 8s) : " + (d.rhythmBreaks || 0);
-    }
-
-    /* --- Export --- */
-    document.getElementById("btn-export").addEventListener("click", function() {
-        var blob = new Blob([JSON.stringify({ topic: S.topic, mode: S.mode, history: S.history, timestamps: S.ts, exported: new Date().toISOString() }, null, 2)], { type: "application/json" });
-        var a = document.createElement("a");
-        a.href = URL.createObjectURL(blob);
-        a.download = "aim-session-" + Date.now() + ".json";
-        a.click();
-    });
-
-    /* --- Reset / New --- */
-    document.getElementById("btn-reset").addEventListener("click", function() {
-        if (!confirm("Reinitialiser la session ?")) return;
-        resetAll(); showScreen("setup");
-    });
-    document.getElementById("btn-new").addEventListener("click", function() {
-        resetAll(); showScreen("setup");
-    });
-
-    function resetAll() {
-        S.phase = 0; S.history = []; S.ts = [];
-        messagesEl.innerHTML = "";
-        inpTopic.value = "";
-        btnStart.disabled = true;
-    }
-
-})();
-</script>
-</body>
-</html>

requirements.txt

@@ -1,8 +1,9 @@
 fastapi==0.115.6
 uvicorn[standard]==0.34.0
-httpx==0.28.1
+openai==1.58.1
 chromadb==0.5.23
 sentence-transformers==3.3.1
 pydantic==2.10.4
 python-multipart==0.0.20
 pypdf2==3.0.1
+python-dotenv==1.0.1

static/app.js

@@ -1,93 +1,115 @@
 /**
- * AIM Learning Companion - Frontend Application
+ * AIM Learning Companion - Frontend
+ * Stateless: no localStorage, no cookies, no persistence.
  */
 
-const state = {
-    mode: "TUTOR",
-    topic: "",
-    phase: 0,
-    history: [],       // {role, content}
-    timestamps: [],    // timestamps for each message
-    sending: false,
-};
-
-// DOM elements
-const $ = (sel) => document.querySelector(sel);
-const setupScreen = $("#setup-screen");
-const chatScreen = $("#chat-screen");
-const analysisScreen = $("#analysis-screen");
-const topicInput = $("#topic-input");
-const startBtn = $("#start-btn");
-const chatMessages = $("#chat-messages");
-const chatInput = $("#chat-input");
-const sendBtn = $("#send-btn");
-const endSessionBtn = $("#end-session-btn");
-const resetBtn = $("#reset-btn");
-const exportBtn = $("#export-btn");
-const newSessionBtn = $("#new-session-btn");
-
-// Setup: mode selection
-document.querySelectorAll(".mode-btn").forEach((btn) => {
-    btn.addEventListener("click", () => {
-        document.querySelectorAll(".mode-btn").forEach((b) => b.classList.remove("active"));
-        btn.classList.add("active");
-        state.mode = btn.dataset.mode;
-    });
-});
-
-// Setup: enable start when topic is entered
-topicInput.addEventListener("input", () => {
-    startBtn.disabled = !topicInput.value.trim();
-});
-
-// Start session
-startBtn.addEventListener("click", () => {
-    state.topic = topicInput.value.trim();
-    if (!state.topic) return;
-    state.phase = 0;
-    state.history = [];
-    state.timestamps = [];
-    $("#header-mode").textContent = state.mode;
-    $("#header-topic").textContent = state.topic;
-    showScreen("chat");
-    updatePhaseIndicator();
-    addSystemMessage(`Session démarrée — Mode: ${state.mode} — Sujet: ${state.topic}`);
-    // Send initial message to get companion's opening question
-    sendMessage(`Je souhaite explorer le sujet suivant : ${state.topic}`);
-});
-
-// Send message
-sendBtn.addEventListener("click", () => sendUserMessage());
-chatInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        sendUserMessage();
+(function () {
+    "use strict";
+
+    /* ===== State (in-memory only, lost on tab close) ===== */
+    var state = {
+        mode: "TUTOR",
+        topic: "",
+        phase: 0,
+        history: [],      // {role, content}
+        timestamps: [],   // epoch ms for every message (user & assistant alternating)
+        analysisResult: null
+    };
+
+    var PHASE_NAMES = [
+        "Ciblage",
+        "Clarification",
+        "Mecanisme",
+        "Verification",
+        "Stress-test"
+    ];
+
+    /* ===== DOM refs ===== */
+    var setupScreen   = document.getElementById("setup-screen");
+    var chatScreen    = document.getElementById("chat-screen");
+    var analysisScreen = document.getElementById("analysis-screen");
+
+    var topicInput  = document.getElementById("topic-input");
+    var btnStart    = document.getElementById("btn-start");
+    var modeBtns    = document.querySelectorAll(".mode-btn");
+
+    var modeBadge   = document.getElementById("mode-badge");
+    var topicBadge  = document.getElementById("topic-badge");
+    var phaseDots   = document.getElementById("phase-dots");
+    var phaseLabels = document.getElementById("phase-labels");
+    var messagesEl  = document.getElementById("messages");
+    var typingEl    = document.getElementById("typing");
+    var chatInput   = document.getElementById("chat-input");
+    var btnSend     = document.getElementById("btn-send");
+    var btnEnd      = document.getElementById("btn-end-session");
+    var btnReset    = document.getElementById("btn-reset");
+
+    var scoresGrid  = document.getElementById("scores-grid");
+    var summaryEl   = document.getElementById("analysis-summary");
+    var strengthsEl = document.getElementById("analysis-strengths");
+    var weaknessesEl = document.getElementById("analysis-weaknesses");
+    var rhythmCount = document.getElementById("rhythm-count");
+    var btnExport   = document.getElementById("btn-export");
+    var btnNewSession = document.getElementById("btn-new-session");
+
+    /* ===== Screen navigation ===== */
+    function showScreen(screen) {
+        setupScreen.classList.remove("active");
+        chatScreen.classList.remove("active");
+        analysisScreen.classList.remove("active");
+        screen.classList.add("active");
+    }
+
+    /* ===== Phase indicator ===== */
+    function renderPhaseIndicator() {
+        phaseDots.innerHTML = "";
+        phaseLabels.innerHTML = "";
+
+        for (var i = 0; i < 5; i++) {
+            if (i > 0) {
+                var conn = document.createElement("div");
+                conn.className = "phase-connector" + (i <= state.phase ? " done" : "");
+                phaseDots.appendChild(conn);
+            }
+            var dot = document.createElement("div");
+            dot.className = "phase-dot";
+            if (i === state.phase) dot.className += " active";
+            else if (i < state.phase) dot.className += " done";
+            dot.textContent = i;
+            phaseDots.appendChild(dot);
+
+            var lbl = document.createElement("div");
+            lbl.className = "phase-label-text" + (i === state.phase ? " active" : "");
+            lbl.textContent = PHASE_NAMES[i];
+            phaseLabels.appendChild(lbl);
+        }
     }
-});
-
-function sendUserMessage() {
-    const text = chatInput.value.trim();
-    if (!text || state.sending) return;
-    chatInput.value = "";
-    addMessage("user", text);
-    state.timestamps.push(Date.now() / 1000);
-    sendMessage(text);
-}
-
-async function sendMessage(text) {
-    state.sending = true;
-    sendBtn.disabled = true;
-    chatInput.disabled = true;
-
-    // Show typing indicator
-    const typing = document.createElement("div");
-    typing.className = "typing-indicator";
-    typing.textContent = "Companion réfléchit...";
-    chatMessages.appendChild(typing);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-
-    try {
-        const resp = await fetch("/api/chat", {
+
+    /* ===== Messages ===== */
+    function addMessage(role, content) {
+        var div = document.createElement("div");
+        div.className = "message " + role;
+        div.textContent = content;
+        messagesEl.insertBefore(div, typingEl);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    function setTyping(on) {
+        typingEl.style.display = on ? "block" : "none";
+        if (on) messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    /* ===== API calls ===== */
+    function sendMessage(text) {
+        state.history.push({ role: "user", content: text });
+        state.timestamps.push(Date.now());
+        addMessage("user", text);
+
+        chatInput.value = "";
+        btnSend.disabled = true;
+        setTyping(true);
+
+        fetch("/api/chat", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
@@ -95,184 +117,196 @@ async function sendMessage(text) {
                 mode: state.mode,
                 topic: state.topic,
                 phase: state.phase,
+                history: state.history.slice(0, -1) // send history before this message
+            })
+        })
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+            setTyping(false);
+            state.phase = data.phase;
+            state.history.push({ role: "assistant", content: data.reply });
+            state.timestamps.push(Date.now());
+            addMessage("assistant", data.reply);
+            renderPhaseIndicator();
+            btnSend.disabled = false;
+            chatInput.focus();
+        })
+        .catch(function (err) {
+            setTyping(false);
+            addMessage("assistant", "Erreur de connexion. Veuillez reessayer.");
+            btnSend.disabled = false;
+        });
+    }
+
+    function requestAnalysis() {
+        btnEnd.disabled = true;
+        setTyping(true);
+
+        fetch("/api/analyze", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
                 history: state.history,
-                timestamp: Date.now() / 1000,
-            }),
+                timestamps: state.timestamps
+            })
+        })
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+            setTyping(false);
+            state.analysisResult = data;
+            renderAnalysis(data);
+            showScreen(analysisScreen);
+        })
+        .catch(function () {
+            setTyping(false);
+            btnEnd.disabled = false;
+            alert("Erreur lors de l'analyse. Veuillez reessayer.");
         });
+    }
 
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = await resp.json();
+    /* ===== Analysis rendering ===== */
+    function renderAnalysis(data) {
+        var scores = [
+            { key: "reasoningScore", label: "Raisonnement" },
+            { key: "clarityScore", label: "Clarte" },
+            { key: "skepticismScore", label: "Scepticisme" },
+            { key: "processScore", label: "Processus" },
+            { key: "reflectionScore", label: "Reflexion" },
+            { key: "integrityScore", label: "Integrite" }
+        ];
+
+        scoresGrid.innerHTML = "";
+        scores.forEach(function (s) {
+            var val = data[s.key] || 0;
+            var card = document.createElement("div");
+            card.className = "score-card";
+            card.innerHTML =
+                '<div class="score-value">' + val + '</div>' +
+                '<div class="score-label">' + s.label + '</div>' +
+                '<div class="score-bar"><div class="score-bar-fill" style="width:' + val + '%"></div></div>';
+            scoresGrid.appendChild(card);
+        });
 
-        // Remove typing indicator
-        typing.remove();
+        summaryEl.textContent = data.summary || "Aucun bilan disponible.";
 
-        // Update phase
-        state.phase = data.phase;
-        updatePhaseIndicator();
+        strengthsEl.innerHTML = "";
+        (data.keyStrengths || []).forEach(function (s) {
+            var li = document.createElement("li");
+            li.textContent = s;
+            strengthsEl.appendChild(li);
+        });
 
-        // Add to history and display
-        state.history.push({ role: "user", content: text });
-        state.history.push({ role: "assistant", content: data.reply });
-        state.timestamps.push(Date.now() / 1000);
-
-        addMessage("assistant", data.reply);
-    } catch (err) {
-        typing.remove();
-        addSystemMessage(`Erreur de connexion: ${err.message}. Vérifiez qu'Ollama est en cours d'exécution.`);
-    } finally {
-        state.sending = false;
-        sendBtn.disabled = false;
-        chatInput.disabled = false;
-        chatInput.focus();
+        weaknessesEl.innerHTML = "";
+        (data.weaknesses || []).forEach(function (w) {
+            var li = document.createElement("li");
+            li.textContent = w;
+            weaknessesEl.appendChild(li);
+        });
+
+        rhythmCount.textContent = data.rhythmBreakCount || 0;
     }
-}
-
-function addMessage(role, content) {
-    const div = document.createElement("div");
-    div.className = `message ${role}`;
-    div.textContent = content;
-    chatMessages.appendChild(div);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function addSystemMessage(text) {
-    const div = document.createElement("div");
-    div.className = "message system";
-    div.textContent = text;
-    chatMessages.appendChild(div);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function updatePhaseIndicator() {
-    document.querySelectorAll(".phase-step").forEach((step) => {
-        const p = parseInt(step.dataset.phase);
-        step.classList.remove("active", "done");
-        if (p === state.phase) step.classList.add("active");
-        else if (p < state.phase) step.classList.add("done");
-    });
-}
-
-function showScreen(name) {
-    [setupScreen, chatScreen, analysisScreen].forEach((s) => s.classList.remove("active"));
-    if (name === "setup") setupScreen.classList.add("active");
-    else if (name === "chat") chatScreen.classList.add("active");
-    else if (name === "analysis") analysisScreen.classList.add("active");
-}
-
-// End session
-endSessionBtn.addEventListener("click", async () => {
-    if (state.history.length === 0) {
-        addSystemMessage("Aucun message dans la session.");
-        return;
+
+    /* ===== JSON export ===== */
+    function exportJSON() {
+        var payload = {
+            mode: state.mode,
+            topic: state.topic,
+            messages: state.history,
+            timestamps: state.timestamps,
+            scores: state.analysisResult
+        };
+        var blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = "aim-session-" + new Date().toISOString().slice(0, 10) + ".json";
+        a.click();
+        URL.revokeObjectURL(url);
     }
-    showScreen("analysis");
-    $("#analysis-loading").classList.remove("hidden");
-    $("#analysis-content").classList.add("hidden");
 
-    try {
-        const resp = await fetch("/api/analyze", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                history: state.history,
-                timestamps: state.timestamps,
-            }),
+    /* ===== Reset ===== */
+    function resetSession() {
+        state.mode = "TUTOR";
+        state.topic = "";
+        state.phase = 0;
+        state.history = [];
+        state.timestamps = [];
+        state.analysisResult = null;
+
+        topicInput.value = "";
+        chatInput.value = "";
+        messagesEl.querySelectorAll(".message").forEach(function (el) { el.remove(); });
+
+        modeBtns.forEach(function (btn) {
+            btn.classList.toggle("selected", btn.dataset.mode === "TUTOR");
         });
 
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = await resp.json();
-        displayAnalysis(data);
-    } catch (err) {
-        $("#analysis-loading").textContent = `Erreur: ${err.message}`;
+        btnStart.disabled = true;
+        btnEnd.disabled = false;
+        btnSend.disabled = false;
+
+        showScreen(setupScreen);
     }
-});
-
-function displayAnalysis(data) {
-    $("#analysis-loading").classList.add("hidden");
-    $("#analysis-content").classList.remove("hidden");
-
-    const scores = [
-        { key: "reasoningScore", label: "Raisonnement", color: "#6c5ce7" },
-        { key: "clarityScore", label: "Clarté", color: "#00cec9" },
-        { key: "skepticismScore", label: "Scepticisme", color: "#e17055" },
-        { key: "processScore", label: "Processus", color: "#00b894" },
-        { key: "reflectionScore", label: "Réflexion", color: "#fdcb6e" },
-        { key: "integrityScore", label: "Intégrité", color: "#a29bfe" },
-    ];
 
-    const grid = $("#scores-grid");
-    grid.innerHTML = "";
-    scores.forEach(({ key, label, color }) => {
-        const val = data[key] || 0;
-        const card = document.createElement("div");
-        card.className = "score-card";
-        card.innerHTML = `
-            <div class="score-value" style="color: ${color}">${val}</div>
-            <div class="score-label">${label}</div>
-            <div class="score-bar">
-                <div class="score-bar-fill" style="width: ${val}%; background: ${color}"></div>
-            </div>
-        `;
-        grid.appendChild(card);
+    /* ===== Event listeners ===== */
+
+    // Mode selection
+    modeBtns.forEach(function (btn) {
+        btn.addEventListener("click", function () {
+            modeBtns.forEach(function (b) { b.classList.remove("selected"); });
+            btn.classList.add("selected");
+            state.mode = btn.dataset.mode;
+        });
     });
 
-    $("#analysis-summary").textContent = data.summary || "Aucune analyse disponible.";
+    // Topic input enables start button
+    topicInput.addEventListener("input", function () {
+        btnStart.disabled = !topicInput.value.trim();
+    });
+
+    // Start session
+    btnStart.addEventListener("click", function () {
+        var topic = topicInput.value.trim();
+        if (!topic) return;
+
+        state.topic = topic;
+        modeBadge.textContent = state.mode === "TUTOR" ? "Tuteur" : "Critique";
+        topicBadge.textContent = topic;
 
-    const strengthsList = $("#analysis-strengths");
-    strengthsList.innerHTML = "";
-    (data.keyStrengths || []).forEach((s) => {
-        const li = document.createElement("li");
-        li.textContent = s;
-        strengthsList.appendChild(li);
+        renderPhaseIndicator();
+        showScreen(chatScreen);
+        chatInput.focus();
     });
 
-    const weaknessesList = $("#analysis-weaknesses");
-    weaknessesList.innerHTML = "";
-    (data.weaknesses || []).forEach((w) => {
-        const li = document.createElement("li");
-        li.textContent = w;
-        weaknessesList.appendChild(li);
+    // Send message
+    btnSend.addEventListener("click", function () {
+        var text = chatInput.value.trim();
+        if (text) sendMessage(text);
     });
 
-    $("#analysis-rhythm").textContent =
-        `Nombre de réponses avec un rythme anormalement rapide (< 8s) : ${data.rhythmBreakCount || 0}`;
-}
-
-// Export JSON
-exportBtn.addEventListener("click", () => {
-    const exportData = {
-        topic: state.topic,
-        mode: state.mode,
-        history: state.history,
-        timestamps: state.timestamps,
-        exportedAt: new Date().toISOString(),
-    };
-    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `aim-session-${Date.now()}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-});
-
-// Reset / New session
-resetBtn.addEventListener("click", () => {
-    if (!confirm("Réinitialiser la session ? Toutes les données seront perdues.")) return;
-    resetState();
-    showScreen("setup");
-});
-
-newSessionBtn.addEventListener("click", () => {
-    resetState();
-    showScreen("setup");
-});
-
-function resetState() {
-    state.phase = 0;
-    state.history = [];
-    state.timestamps = [];
-    chatMessages.innerHTML = "";
-    topicInput.value = "";
-    startBtn.disabled = true;
-}
+    chatInput.addEventListener("keydown", function (e) {
+        if (e.key === "Enter") {
+            var text = chatInput.value.trim();
+            if (text) sendMessage(text);
+        }
+    });
+
+    // End session -> analysis
+    btnEnd.addEventListener("click", function () {
+        if (state.history.length === 0) {
+            alert("Aucun echange a analyser.");
+            return;
+        }
+        requestAnalysis();
+    });
+
+    // Reset
+    btnReset.addEventListener("click", resetSession);
+
+    // Export JSON
+    btnExport.addEventListener("click", exportJSON);
+
+    // New session from analysis screen
+    btnNewSession.addEventListener("click", resetSession);
+
+})();

static/index.html

@@ -3,119 +3,96 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AIM Learning Companion</title>
+    <title>AIM - Compagnon d'apprentissage</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-    <div id="app">
-        <!-- Setup Screen -->
-        <div id="setup-screen" class="screen active">
-            <div class="setup-container">
-                <h1>AIM Learning Companion</h1>
-                <p class="subtitle">Compagnon socratique pour l'apprentissage professionnel</p>
-                <div class="setup-form">
-                    <label for="topic-input">Sujet d'exploration</label>
-                    <input type="text" id="topic-input" placeholder="Ex: L'intelligence artificielle en entreprise..." autocomplete="off">
-                    <label for="mode-select">Mode</label>
-                    <div class="mode-selector">
-                        <button class="mode-btn active" data-mode="TUTOR">
-                            <span class="mode-icon">&#9733;</span>
-                            <span class="mode-label">TUTOR</span>
-                            <span class="mode-desc">Accompagnement bienveillant</span>
-                        </button>
-                        <button class="mode-btn" data-mode="CRITIC">
-                            <span class="mode-icon">&#9878;</span>
-                            <span class="mode-label">CRITIC</span>
-                            <span class="mode-desc">Audit logique</span>
-                        </button>
-                    </div>
-                    <button id="start-btn" class="primary-btn" disabled>Commencer la session</button>
-                </div>
-            </div>
-        </div>
 
-        <!-- Chat Screen -->
-        <div id="chat-screen" class="screen">
-            <header class="chat-header">
-                <div class="header-left">
-                    <h2>Companion</h2>
-                    <span id="header-mode" class="mode-badge">TUTOR</span>
-                    <span id="header-topic" class="topic-badge"></span>
-                </div>
-                <div class="header-right">
-                    <button id="end-session-btn" class="secondary-btn">Terminer la session</button>
-                    <button id="reset-btn" class="secondary-btn">Reset</button>
-                </div>
-            </header>
+    <!-- ===== Setup Screen ===== -->
+    <div id="setup-screen" class="screen active">
+        <h1>AIM</h1>
+        <p class="subtitle">Compagnon socratique d'apprentissage</p>
 
-            <!-- Phase Indicator -->
-            <div class="phase-indicator">
-                <div class="phase-step" data-phase="0">
-                    <div class="phase-dot"></div>
-                    <span class="phase-label">0 Ciblage</span>
-                </div>
-                <div class="phase-connector"></div>
-                <div class="phase-step" data-phase="1">
-                    <div class="phase-dot"></div>
-                    <span class="phase-label">1 Clarification</span>
-                </div>
-                <div class="phase-connector"></div>
-                <div class="phase-step" data-phase="2">
-                    <div class="phase-dot"></div>
-                    <span class="phase-label">2 Mécanisme</span>
-                </div>
-                <div class="phase-connector"></div>
-                <div class="phase-step" data-phase="3">
-                    <div class="phase-dot"></div>
-                    <span class="phase-label">3 Vérification</span>
+        <div class="form-group">
+            <label for="topic-input">Sujet d'exploration</label>
+            <input type="text" id="topic-input" placeholder="Ex : L'intelligence artificielle en formation professionnelle">
+        </div>
+
+        <div class="form-group">
+            <label>Mode</label>
+            <div class="mode-selector">
+                <div class="mode-btn selected" data-mode="TUTOR">
+                    <div class="mode-title">Tuteur</div>
+                    <div class="mode-desc">Accompagnement bienveillant, questions ouvertes</div>
                 </div>
-                <div class="phase-connector"></div>
-                <div class="phase-step" data-phase="4">
-                    <div class="phase-dot"></div>
-                    <span class="phase-label">4 Stress-test</span>
+                <div class="mode-btn" data-mode="CRITIC">
+                    <div class="mode-title">Critique</div>
+                    <div class="mode-desc">Avocat du diable, teste les failles logiques</div>
                 </div>
             </div>
+        </div>
 
-            <!-- Chat Messages -->
-            <div id="chat-messages" class="chat-messages"></div>
+        <button id="btn-start" class="btn-primary" disabled>Commencer la session</button>
+    </div>
 
-            <!-- Input Area -->
-            <div class="chat-input-area">
-                <textarea id="chat-input" placeholder="Écris ta réponse ici..." rows="2"></textarea>
-                <button id="send-btn" class="primary-btn">Envoyer</button>
+    <!-- ===== Chat Screen ===== -->
+    <div id="chat-screen" class="screen">
+        <div class="chat-header">
+            <div class="chat-header-left">
+                <span id="mode-badge" class="badge badge-mode"></span>
+                <span id="topic-badge" class="badge badge-topic"></span>
+            </div>
+            <div class="chat-header-right">
+                <button id="btn-end-session" class="btn-end">Terminer la session</button>
+                <button id="btn-reset" class="btn-reset">Recommencer</button>
             </div>
         </div>
 
-        <!-- Analysis Screen -->
-        <div id="analysis-screen" class="screen">
-            <div class="analysis-container">
-                <h2>Analyse de session</h2>
-                <div id="analysis-loading" class="loading">Analyse en cours...</div>
-                <div id="analysis-content" class="hidden">
-                    <div class="scores-grid" id="scores-grid"></div>
-                    <div class="analysis-section">
-                        <h3>Résumé</h3>
-                        <p id="analysis-summary"></p>
-                    </div>
-                    <div class="analysis-section">
-                        <h3>Points forts</h3>
-                        <ul id="analysis-strengths"></ul>
-                    </div>
-                    <div class="analysis-section">
-                        <h3>Axes d'amélioration</h3>
-                        <ul id="analysis-weaknesses"></ul>
-                    </div>
-                    <div class="analysis-section">
-                        <h3>Rythme</h3>
-                        <p id="analysis-rhythm"></p>
-                    </div>
-                    <div class="analysis-actions">
-                        <button id="export-btn" class="primary-btn">Exporter en JSON</button>
-                        <button id="new-session-btn" class="secondary-btn">Nouvelle session</button>
-                    </div>
-                </div>
+        <div class="phase-indicator" id="phase-dots"></div>
+        <div class="phase-labels" id="phase-labels"></div>
+
+        <div class="messages" id="messages">
+            <div class="typing-indicator" id="typing">
+                <span></span><span></span><span></span>
             </div>
         </div>
+
+        <div class="input-bar">
+            <input type="text" id="chat-input" placeholder="Tape ta reflexion ici...">
+            <button id="btn-send" class="btn-send">Envoyer</button>
+        </div>
+    </div>
+
+    <!-- ===== Analysis Screen ===== -->
+    <div id="analysis-screen" class="screen">
+        <h2>Rapport de session</h2>
+
+        <div class="scores-grid" id="scores-grid"></div>
+
+        <div class="analysis-section">
+            <h3>Bilan</h3>
+            <p id="analysis-summary"></p>
+        </div>
+
+        <div class="analysis-section">
+            <h3>Points forts</h3>
+            <ul id="analysis-strengths"></ul>
+        </div>
+
+        <div class="analysis-section">
+            <h3>Axes d'amelioration</h3>
+            <ul id="analysis-weaknesses"></ul>
+        </div>
+
+        <div class="analysis-section">
+            <h3>Rythme</h3>
+            <p>Reponses en moins de 8 secondes : <span id="rhythm-count" class="rhythm-badge">0</span></p>
+        </div>
+
+        <div class="analysis-actions">
+            <button id="btn-export" class="btn-secondary">Exporter JSON</button>
+            <button id="btn-new-session" class="btn-primary">Nouvelle session</button>
+        </div>
     </div>
 
     <script src="/static/app.js"></script>

static/style.css

@@ -1,460 +1,432 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
+/* ===== Variables & Reset ===== */
 :root {
-    --bg: #0f1117;
-    --surface: #1a1d27;
-    --surface-2: #242734;
-    --border: #2e3144;
-    --text: #e4e6f0;
-    --text-muted: #8b8fa3;
-    --primary: #6c5ce7;
-    --primary-light: #a29bfe;
-    --accent: #00cec9;
+    --bg-primary: #0f1117;
+    --bg-secondary: #1a1d27;
+    --bg-tertiary: #252833;
+    --text-primary: #e8e8ed;
+    --text-secondary: #9ca3af;
+    --accent: #6c5ce7;
+    --accent-light: #a29bfe;
     --success: #00b894;
     --warning: #fdcb6e;
     --danger: #e17055;
-    --phase-active: #6c5ce7;
-    --phase-done: #00b894;
-    --phase-pending: #2e3144;
+    --border: #2d3040;
     --radius: 12px;
     --radius-sm: 8px;
 }
 
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    min-height: 100vh;
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-.screen {
-    display: none;
+body {
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
     min-height: 100vh;
-}
-
-.screen.active {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
-/* Setup Screen */
-.setup-container {
-    max-width: 520px;
-    margin: auto;
-    padding: 2rem;
-    text-align: center;
+.screen { display: none; width: 100%; max-width: 720px; padding: 24px; }
+.screen.active { display: flex; flex-direction: column; }
+
+/* ===== Setup Screen ===== */
+#setup-screen {
+    align-items: center;
+    gap: 32px;
+    min-height: 100vh;
+    justify-content: center;
 }
 
-.setup-container h1 {
+#setup-screen h1 {
     font-size: 2rem;
-    margin-bottom: 0.5rem;
-    background: linear-gradient(135deg, var(--primary-light), var(--accent));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-weight: 700;
+    text-align: center;
 }
 
-.subtitle {
-    color: var(--text-muted);
-    margin-bottom: 2.5rem;
-    font-size: 1rem;
+#setup-screen p.subtitle {
+    color: var(--text-secondary);
+    text-align: center;
+    margin-top: -16px;
+    font-size: 0.95rem;
 }
 
-.setup-form {
-    text-align: left;
+.form-group {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
-.setup-form label {
-    display: block;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-    margin-top: 1.25rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.form-group label {
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
 }
 
-.setup-form input {
-    width: 100%;
-    padding: 0.85rem 1rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
+.form-group input {
+    padding: 14px 16px;
     border-radius: var(--radius-sm);
-    color: var(--text);
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
     font-size: 1rem;
     outline: none;
     transition: border-color 0.2s;
 }
 
-.setup-form input:focus {
-    border-color: var(--primary);
+.form-group input:focus {
+    border-color: var(--accent);
 }
 
 .mode-selector {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    margin-top: 0.25rem;
+    display: flex;
+    gap: 16px;
+    width: 100%;
 }
 
 .mode-btn {
-    background: var(--surface);
-    border: 2px solid var(--border);
+    flex: 1;
+    padding: 20px 16px;
     border-radius: var(--radius);
-    padding: 1.25rem 1rem;
+    border: 2px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
     cursor: pointer;
     text-align: center;
     transition: all 0.2s;
-    color: var(--text);
 }
 
-.mode-btn:hover {
-    border-color: var(--primary);
-}
-
-.mode-btn.active {
-    border-color: var(--primary);
-    background: rgba(108, 92, 231, 0.1);
-}
-
-.mode-icon {
-    font-size: 1.5rem;
-    display: block;
-    margin-bottom: 0.5rem;
-}
+.mode-btn:hover { border-color: var(--accent-light); }
+.mode-btn.selected { border-color: var(--accent); background: var(--bg-tertiary); }
 
-.mode-label {
+.mode-btn .mode-title {
     font-weight: 700;
-    font-size: 0.95rem;
-    display: block;
-    margin-bottom: 0.25rem;
+    font-size: 1.1rem;
+    margin-bottom: 6px;
 }
 
-.mode-desc {
-    font-size: 0.8rem;
-    color: var(--text-muted);
+.mode-btn .mode-desc {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
 }
 
-.primary-btn {
-    width: 100%;
-    padding: 0.85rem;
-    background: var(--primary);
-    color: white;
-    border: none;
+.btn-primary {
+    padding: 14px 32px;
     border-radius: var(--radius-sm);
+    border: none;
+    background: var(--accent);
+    color: #fff;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
-    margin-top: 2rem;
     transition: opacity 0.2s;
+    width: 100%;
 }
 
-.primary-btn:hover:not(:disabled) {
-    opacity: 0.9;
-}
-
-.primary-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-
-.secondary-btn {
-    padding: 0.5rem 1rem;
-    background: var(--surface-2);
-    color: var(--text);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    font-size: 0.85rem;
-    cursor: pointer;
-    transition: background 0.2s;
-}
+.btn-primary:hover { opacity: 0.9; }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-.secondary-btn:hover {
-    background: var(--border);
+/* ===== Chat Screen ===== */
+#chat-screen {
+    height: 100vh;
+    max-height: 100vh;
+    padding: 0;
+    gap: 0;
 }
 
-/* Chat Header */
 .chat-header {
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border);
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 1.5rem;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
+    justify-content: space-between;
+    flex-shrink: 0;
 }
 
-.header-left {
+.chat-header-left {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 12px;
 }
 
-.header-left h2 {
-    font-size: 1.1rem;
+.badge {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.78rem;
+    font-weight: 600;
 }
 
-.header-right {
+.badge-mode { background: var(--accent); color: #fff; }
+.badge-topic { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
+
+.chat-header-right {
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
 }
 
-.mode-badge {
-    font-size: 0.7rem;
-    font-weight: 700;
-    padding: 0.2rem 0.6rem;
-    background: var(--primary);
-    color: white;
-    border-radius: 20px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.btn-end {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--danger);
+    background: transparent;
+    color: var(--danger);
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
-.topic-badge {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.btn-end:hover { background: var(--danger); color: #fff; }
+
+.btn-reset {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    cursor: pointer;
+    margin-left: 8px;
 }
 
-/* Phase Indicator */
+.btn-reset:hover { border-color: var(--text-secondary); }
+
+/* Phase indicator */
 .phase-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem 1.5rem;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
     gap: 0;
+    padding: 14px 24px 6px;
+    flex-shrink: 0;
 }
 
 .phase-step {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 0.4rem;
-    position: relative;
 }
 
 .phase-dot {
-    width: 14px;
-    height: 14px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
-    background: var(--phase-pending);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
     border: 2px solid var(--border);
     transition: all 0.3s;
+    flex-shrink: 0;
 }
 
-.phase-step.active .phase-dot {
-    background: var(--phase-active);
-    border-color: var(--phase-active);
-    box-shadow: 0 0 12px rgba(108, 92, 231, 0.5);
+.phase-dot.active {
+    background: var(--accent);
+    color: #fff;
+    border-color: var(--accent);
 }
 
-.phase-step.done .phase-dot {
-    background: var(--phase-done);
-    border-color: var(--phase-done);
+.phase-dot.done {
+    background: var(--success);
+    color: #fff;
+    border-color: var(--success);
 }
 
-.phase-label {
-    font-size: 0.7rem;
-    color: var(--text-muted);
-    white-space: nowrap;
+.phase-connector {
+    width: 32px;
+    height: 2px;
+    background: var(--border);
+    flex-shrink: 0;
 }
 
-.phase-step.active .phase-label {
-    color: var(--primary-light);
-    font-weight: 600;
-}
+.phase-connector.done { background: var(--success); }
 
-.phase-step.done .phase-label {
-    color: var(--success);
+.phase-labels {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 12px 10px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
 }
 
-.phase-connector {
-    width: 40px;
-    height: 2px;
-    background: var(--border);
-    margin: 0 0.25rem;
-    margin-bottom: 1.25rem;
+.phase-label-text {
+    font-size: 0.68rem;
+    color: var(--text-secondary);
+    text-align: center;
+    flex: 1;
 }
 
-/* Chat Messages */
-.chat-messages {
+.phase-label-text.active { color: var(--accent-light); font-weight: 600; }
+
+/* Messages */
+.messages {
     flex: 1;
     overflow-y: auto;
-    padding: 1.5rem;
+    padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 16px;
 }
 
 .message {
-    max-width: 80%;
-    padding: 0.85rem 1.1rem;
+    max-width: 85%;
+    padding: 14px 18px;
     border-radius: var(--radius);
     line-height: 1.55;
     font-size: 0.95rem;
     white-space: pre-wrap;
-}
-
-.message.user {
-    align-self: flex-end;
-    background: var(--primary);
-    color: white;
-    border-bottom-right-radius: 4px;
+    word-wrap: break-word;
 }
 
 .message.assistant {
-    align-self: flex-start;
-    background: var(--surface-2);
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
-    border-bottom-left-radius: 4px;
+    align-self: flex-start;
 }
 
-.message.system {
-    align-self: center;
-    background: transparent;
-    color: var(--text-muted);
-    font-size: 0.85rem;
-    font-style: italic;
-    text-align: center;
+.message.user {
+    background: var(--accent);
+    color: #fff;
+    align-self: flex-end;
 }
 
 .typing-indicator {
     align-self: flex-start;
-    padding: 0.85rem 1.1rem;
-    background: var(--surface-2);
+    padding: 14px 18px;
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    border-bottom-left-radius: 4px;
-    color: var(--text-muted);
-    font-style: italic;
+    display: none;
 }
 
-/* Chat Input */
-.chat-input-area {
-    display: flex;
-    gap: 0.75rem;
-    padding: 1rem 1.5rem;
-    background: var(--surface);
+.typing-indicator span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: var(--text-secondary);
+    border-radius: 50%;
+    margin: 0 2px;
+    animation: bounce 1.4s ease-in-out infinite;
+}
+
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+    0%, 60%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-6px); }
+}
+
+/* Input bar */
+.input-bar {
+    padding: 16px 24px;
     border-top: 1px solid var(--border);
+    display: flex;
+    gap: 12px;
+    flex-shrink: 0;
 }
 
-.chat-input-area textarea {
+.input-bar input {
     flex: 1;
-    padding: 0.75rem 1rem;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
+    padding: 14px 16px;
     border-radius: var(--radius-sm);
-    color: var(--text);
-    font-size: 0.95rem;
-    font-family: inherit;
-    resize: none;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 1rem;
     outline: none;
-    transition: border-color 0.2s;
 }
 
-.chat-input-area textarea:focus {
-    border-color: var(--primary);
-}
+.input-bar input:focus { border-color: var(--accent); }
 
-.chat-input-area .primary-btn {
-    width: auto;
-    margin-top: 0;
-    padding: 0.75rem 1.5rem;
+.btn-send {
+    padding: 14px 24px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: var(--accent);
+    color: #fff;
+    font-weight: 600;
+    cursor: pointer;
 }
 
-/* Analysis Screen */
-.analysis-container {
-    max-width: 680px;
-    margin: 2rem auto;
-    padding: 2rem;
-}
+.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
 
-.analysis-container h2 {
-    text-align: center;
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
+/* ===== Analysis Screen ===== */
+#analysis-screen {
+    min-height: 100vh;
+    justify-content: flex-start;
+    padding-top: 40px;
+    gap: 24px;
 }
 
-.loading {
+#analysis-screen h2 {
+    font-size: 1.5rem;
     text-align: center;
-    color: var(--text-muted);
-    padding: 3rem 0;
-    font-style: italic;
-}
-
-.hidden {
-    display: none;
 }
 
 .scores-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-    margin-bottom: 2rem;
+    gap: 12px;
+    width: 100%;
 }
 
 .score-card {
-    background: var(--surface);
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1.25rem;
+    border-radius: var(--radius-sm);
+    padding: 16px;
     text-align: center;
 }
 
 .score-card .score-value {
     font-size: 2rem;
     font-weight: 700;
-    margin-bottom: 0.25rem;
+    color: var(--accent-light);
 }
 
 .score-card .score-label {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    margin-top: 4px;
 }
 
 .score-bar {
+    width: 100%;
     height: 4px;
-    background: var(--border);
+    background: var(--bg-tertiary);
     border-radius: 2px;
-    margin-top: 0.75rem;
+    margin-top: 8px;
     overflow: hidden;
 }
 
 .score-bar-fill {
     height: 100%;
+    background: var(--accent);
     border-radius: 2px;
-    transition: width 0.8s ease;
+    transition: width 0.6s ease;
 }
 
 .analysis-section {
-    background: var(--surface);
+    width: 100%;
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 1.25rem;
-    margin-bottom: 1rem;
+    padding: 20px;
 }
 
 .analysis-section h3 {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    margin-bottom: 0.75rem;
+    font-size: 1rem;
+    margin-bottom: 12px;
+    color: var(--text-secondary);
 }
 
-.analysis-section p {
+.analysis-section p, .analysis-section li {
     line-height: 1.6;
-    font-size: 0.95rem;
+    font-size: 0.92rem;
 }
 
 .analysis-section ul {
@@ -462,51 +434,46 @@ body {
     padding: 0;
 }
 
-.analysis-section li {
-    padding: 0.4rem 0;
-    padding-left: 1.25rem;
-    position: relative;
-    font-size: 0.95rem;
+.analysis-section ul li::before {
+    content: "- ";
+    color: var(--accent-light);
 }
 
-.analysis-section li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0.7rem;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--primary);
+.rhythm-badge {
+    display: inline-block;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
 }
 
 .analysis-actions {
     display: flex;
-    gap: 1rem;
-    margin-top: 2rem;
-}
-
-.analysis-actions .primary-btn,
-.analysis-actions .secondary-btn {
-    flex: 1;
-    text-align: center;
+    gap: 12px;
+    width: 100%;
 }
 
-/* Responsive */
-@media (max-width: 640px) {
-    .scores-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+.analysis-actions button { flex: 1; }
 
-    .phase-label {
-        font-size: 0.6rem;
-    }
+.btn-secondary {
+    padding: 14px 24px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+}
 
-    .phase-connector {
-        width: 20px;
-    }
+.btn-secondary:hover { border-color: var(--accent); }
 
-    .message {
-        max-width: 90%;
-    }
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+    .scores-grid { grid-template-columns: repeat(2, 1fr); }
+    .mode-selector { flex-direction: column; }
+    .analysis-actions { flex-direction: column; }
+    .chat-header { flex-wrap: wrap; gap: 8px; }
 }