Niveau supérieur (inspiré de Jean) : modes Plan/Build/Yolo + panneau Git & Diff

Modes d'exécution (composer) :
- routes/chat : champ mode ; _apply_mode adapte la config —
  plan = outils lecture seule + plan forcé ; yolo = confirm_shell off ;
  build = comportement normal.
- Frontend : ModeSelector dans le composer, mode dans le store + requête chat.

Panneau Git & Diff (le workspace est un dépôt git, Aider commite) :
- routes/git : /api/git/log (commits), /api/git/diff (commit ou working),
  /api/git/revert (git revert --no-edit, confiné au workspace).
- Frontend : onglet Git dans le PreviewPanel — liste des commits, diff
  colorisé, bouton Annuler (revert) avec rafraîchissement de l'arbo.

Bonus : le panneau Matériel explique que « GPU déclaré 12 Go » vient de
GPU_VRAM_MB (valeur manuelle) — à corriger en 16000 pour une 16 Go.

Tests : git log/diff/revert, modes plan/yolo/build via la route chat, builds.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N

README.md

@@ -129,6 +129,21 @@ message suivant paie alors un rechargement complet (lent). Loki évite ça :
 - **Indicateur d'état** : la pastille du sélecteur de modèle est verte quand le
   modèle est chargé sur GPU, orange sur CPU, blanche s'il reste à charger.
 
+## Modes d'exécution (Plan / Build / Yolo)
+
+Un sélecteur dans le composer contrôle le niveau d'autonomie de l'agent :
+- **Plan** 🔍 — lecture seule (`read_file`, `list_dir`, `grep_search`) : l'agent
+  analyse et propose sans jamais modifier de fichier ni exécuter de commande.
+- **Build** 🔨 — normal : écrit les fichiers, `run_shell` demande confirmation.
+- **Yolo** ⚡ — autonomie maximale : approuve tout, y compris le shell.
+
+## Panneau Git & Diff
+
+Le workspace étant un dépôt git (chaque action de l'agent = un commit), l'onglet
+**Git** du panneau de droite montre l'historique des commits, le **diff coloré**
+de chacun, et un bouton **↶ Annuler** (revert) pour défaire une modification en
+un clic.
+
 ## Intelligence augmentée
 
 - **Plan-puis-exécute** : les demandes complexes sont décomposées en 3-5 étapes

backend/app/main.py

@@ -14,7 +14,7 @@ from fastapi.staticfiles import StaticFiles
 
 from . import agent_config, coder, db, rag
 from .config import settings
-from .routes import benchmark, chat, config, files, models, sessions, shell, system
+from .routes import benchmark, chat, config, files, git, models, sessions, shell, system
 
 
 async def _warm_default_model() -> None:
@@ -71,6 +71,7 @@ app.include_router(config.router)
 app.include_router(shell.router)
 app.include_router(system.router)
 app.include_router(benchmark.router)
+app.include_router(git.router)
 
 
 @app.get("/api/health")

backend/app/routes/chat.py

@@ -31,6 +31,29 @@ class ChatRequest(BaseModel):
     session_id: str
     content: str
     model: str | None = None
+    # Mode d'exécution : "plan" (lecture seule), "build" (normal), "yolo" (auto).
+    mode: str = "build"
+
+
+# Outils autorisés en mode Plan : lecture/analyse uniquement.
+_READONLY_TOOLS = {"read_file", "list_dir", "grep_search"}
+
+
+def _apply_mode(cfg: dict, mode: str) -> dict:
+    """Adapte la config au mode d'exécution choisi dans le composer."""
+    cfg = dict(cfg)
+    if mode == "plan":
+        # Lecture seule : aucune écriture, aucun shell, aucun moteur code.
+        cfg["tools"] = {
+            name: (on and name in _READONLY_TOOLS)
+            for name, on in cfg["tools"].items()
+        }
+        cfg["plan_mode"] = True
+    elif mode == "yolo":
+        # Autonomie maximale : plus de validation shell.
+        cfg["confirm_shell"] = False
+    # "build" : comportement par défaut (inchangé).
+    return cfg
 
 
 def _sse(event: str, data: dict) -> str:
@@ -153,7 +176,7 @@ async def chat(req: ChatRequest) -> StreamingResponse:
         raise HTTPException(404, "session introuvable")
 
     model = req.model or session.get("model") or settings.default_model
-    cfg = agent_config.get_config(model)
+    cfg = _apply_mode(agent_config.get_config(model), req.mode)
 
     # Premier message : titre la session avec un extrait.
     if not db.list_messages(req.session_id):

backend/app/routes/git.py

@@ -0,0 +1,92 @@
+"""Routes Git du workspace : historique, diff, retour arrière.
+
+Le workspace est un dépôt git (Aider commite chaque modification). Ces routes
+donnent à l'UI un panneau Git : voir les commits, leur diff, et annuler une
+modification. Toutes les commandes sont exécutées DANS le workspace.
+"""
+from __future__ import annotations
+
+import subprocess
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+
+from ..coder import ensure_git
+from ..config import settings
+
+router = APIRouter(prefix="/api/git", tags=["git"])
+
+
+def _git(*args: str, timeout: int = 15) -> subprocess.CompletedProcess:
+    """Exécute une commande git dans le workspace."""
+    ensure_git(settings.workspace_dir)
+    return subprocess.run(
+        ["git", *args],
+        cwd=settings.workspace_dir,
+        capture_output=True,
+        text=True,
+        timeout=timeout,
+    )
+
+
+@router.get("/log")
+async def git_log(limit: int = 40) -> dict:
+    """Historique des commits (hash court, message, auteur, date, nb fichiers)."""
+    fmt = "%h%x1f%s%x1f%an%x1f%ar%x1f%H"
+    proc = _git("log", f"-{max(1, min(limit, 200))}", f"--pretty=format:{fmt}")
+    if proc.returncode != 0:
+        # Dépôt sans commit encore.
+        return {"commits": []}
+
+    commits = []
+    for line in proc.stdout.splitlines():
+        parts = line.split("\x1f")
+        if len(parts) != 5:
+            continue
+        short, subject, author, when, full = parts
+        # Nombre de fichiers touchés par ce commit.
+        stat = _git("show", "--stat", "--oneline", "--format=", full)
+        files = [l for l in stat.stdout.splitlines() if "|" in l]
+        commits.append({
+            "hash": short,
+            "full_hash": full,
+            "subject": subject,
+            "author": author,
+            "when": when,
+            "files_changed": len(files),
+        })
+    return {"commits": commits}
+
+
+@router.get("/diff")
+async def git_diff(hash: str | None = None) -> dict:
+    """Diff d'un commit (hash) ou des modifications non commitées si absent."""
+    if hash:
+        if not hash.replace("-", "").isalnum():
+            raise HTTPException(400, "hash invalide")
+        proc = _git("show", "--no-color", hash)
+    else:
+        proc = _git("diff", "--no-color", "HEAD")
+    if proc.returncode != 0:
+        raise HTTPException(404, "diff introuvable")
+    # Borne la taille pour ne pas noyer l'UI.
+    return {"diff": proc.stdout[:200_000]}
+
+
+class RevertRequest(BaseModel):
+    hash: str
+
+
+@router.post("/revert")
+async def git_revert(req: RevertRequest) -> dict:
+    """Annule un commit en créant un commit inverse (git revert)."""
+    h = req.hash.strip()
+    if not h.replace("-", "").isalnum():
+        raise HTTPException(400, "hash invalide")
+    proc = _git("revert", "--no-edit", h, timeout=30)
+    if proc.returncode != 0:
+        # Conflit ou commit introuvable : on nettoie un éventuel revert en cours.
+        _git("revert", "--abort")
+        detail = (proc.stderr or proc.stdout).strip()[:300]
+        raise HTTPException(409, f"revert impossible : {detail}")
+    return {"ok": True, "message": f"commit {h[:7]} annulé"}

frontend/src/api/client.ts

@@ -41,6 +41,42 @@ export async function getSystemStats(): Promise<SystemStats> {
   return res.json();
 }
 
+// ── Git du workspace ─────────────────────────────────────────────────────
+export interface GitCommit {
+  hash: string;
+  full_hash: string;
+  subject: string;
+  author: string;
+  when: string;
+  files_changed: number;
+}
+
+export async function getGitLog(): Promise<GitCommit[]> {
+  try {
+    const res = await fetch("/api/git/log");
+    return (await res.json()).commits;
+  } catch {
+    return [];
+  }
+}
+
+export async function getGitDiff(hash?: string): Promise<string> {
+  const url = hash ? `/api/git/diff?hash=${encodeURIComponent(hash)}` : "/api/git/diff";
+  const res = await fetch(url);
+  if (!res.ok) return "";
+  return (await res.json()).diff;
+}
+
+export async function revertCommit(hash: string): Promise<{ message: string }> {
+  const res = await fetch("/api/git/revert", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ hash }),
+  });
+  if (!res.ok) throw await apiError(res, "revert impossible");
+  return res.json();
+}
+
 export interface HardwareInfo {
   loki_gpus: {
     index: number;
@@ -405,7 +441,7 @@ export async function deleteSession(id: string): Promise<void> {
 
 /** Envoie un message et streame la réponse de l'agent via SSE. */
 export async function streamChat(
-  body: { session_id: string; content: string; model?: string },
+  body: { session_id: string; content: string; model?: string; mode?: string },
   handlers: {
     onToken: (t: string) => void;
     onThinking: (t: string) => void;

frontend/src/panels/ChatPanel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useStore } from "../store/useStore";
-import { ChevronDown, ClipIcon, LokiMark, SendIcon } from "../components/Icon";
+import { ChevronDown, LokiMark, SendIcon } from "../components/Icon";
 import { ToolCard } from "../components/ToolCard";
 import { MessageContent } from "../components/MessageContent";
 import type { Message, ToolCall } from "../api/client";
@@ -135,11 +135,9 @@ export function ChatPanel() {
               className="min-h-[40px] w-full resize-none bg-transparent text-[14px] leading-relaxed text-ink outline-none placeholder:text-muted-3"
             />
             <div className="mt-1.5 flex items-center gap-2">
-              <button className="flex h-8 w-8 items-center justify-center border-2 border-line text-ink-2">
+              <ModeSelector />
-                <ClipIcon />
-              </button>
               <div
-                className="flex h-8 min-w-0 max-w-[220px] items-center gap-1.5 border-2 border-line px-2.5 text-[13px] text-ink-2"
+                className="flex h-8 min-w-0 max-w-[180px] items-center gap-1.5 border-2 border-line px-2.5 text-[13px] text-ink-2"
                 title={selectedModel || undefined}
               >
                 <span className="h-2 w-2 border-2 border-line bg-accent" />
@@ -175,6 +173,70 @@ export function ChatPanel() {
 }
 
 /** Plan d'exécution affiché avant le travail de l'agent. */
+const MODES = [
+  { id: "plan", label: "Plan", icon: "🔍", desc: "Lecture seule : analyse et propose, sans rien modifier" },
+  { id: "build", label: "Build", icon: "🔨", desc: "Normal : écrit les fichiers, confirme les commandes shell" },
+  { id: "yolo", label: "Yolo", icon: "⚡", desc: "Auto : approuve tout, y compris le shell" },
+] as const;
+
+/** Sélecteur de mode d'exécution (Plan / Build / Yolo) dans le composer. */
+function ModeSelector() {
+  const { mode, setMode } = useStore();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  const current = MODES.find((m) => m.id === mode) ?? MODES[1];
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={`flex h-8 items-center gap-1.5 border-2 border-line px-2.5 text-[13px] ${
+          mode === "plan"
+            ? "bg-info text-white"
+            : mode === "yolo"
+              ? "bg-accent text-white"
+              : "bg-card text-ink-2"
+        }`}
+        title={current.desc}
+      >
+        <span>{current.icon}</span>
+        <span>{current.label}</span>
+        <ChevronDown size={11} />
+      </button>
+      {open && (
+        <div className="absolute bottom-10 left-0 z-20 w-64 border-[3px] border-line bg-card p-1 shadow-hard">
+          {MODES.map((m) => (
+            <button
+              key={m.id}
+              onClick={() => {
+                setMode(m.id);
+                setOpen(false);
+              }}
+              className={`flex w-full flex-col items-start gap-0.5 px-2 py-2 text-left hover:bg-base ${
+                m.id === mode ? "bg-base" : ""
+              }`}
+            >
+              <span className="text-[13px] text-ink">
+                {m.icon} {m.label}
+              </span>
+              <span className="text-[11px] leading-tight text-muted-2">{m.desc}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function PlanCard({ steps }: { steps: string[] }) {
   return (
     <div

frontend/src/panels/PreviewPanel.tsx

@@ -1,9 +1,16 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useStore } from "../store/useStore";
-import { downloadFile, type ToolCall } from "../api/client";
+import {
+  downloadFile,
+  getGitDiff,
+  getGitLog,
+  revertCommit,
+  type GitCommit,
+  type ToolCall,
+} from "../api/client";
 import { DownloadIcon } from "../components/Icon";
 
-type TabId = "preview" | "code" | "logs";
+type TabId = "preview" | "code" | "logs" | "git";
 
 /** Panneau droit : onglets Aperçu / Code / Logs. */
 export function PreviewPanel() {
@@ -74,6 +81,9 @@ export function PreviewPanel() {
             {logs.length}
           </span>
         </Tab>
+        <Tab active={tab === "git"} onClick={() => setTab("git")}>
+          Git
+        </Tab>
       </div>
 
       {/* URL bar */}
@@ -96,8 +106,11 @@ export function PreviewPanel() {
         )}
       </div>
 
-      {/* Onglet Logs (fond sombre) */}
+      {/* Onglet Git */}
-      {tab === "logs" ? (
+      {tab === "git" ? (
+        <GitPanel />
+      ) : /* Onglet Logs (fond sombre) */
+      tab === "logs" ? (
         <div className="scr mx-3 mb-3 flex-1 overflow-auto border-[3px] border-line bg-card-deep p-3 text-[12.5px]">
           {logs.length === 0 ? (
             <div className="py-10 text-center text-on-dark-3">
@@ -171,6 +184,122 @@ export function PreviewPanel() {
   );
 }
 
+/** Onglet Git : historique des commits, diff colorisé, retour arrière. */
+function GitPanel() {
+  const refreshFiles = useStore((s) => s.refreshFiles);
+  const [commits, setCommits] = useState<GitCommit[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [diff, setDiff] = useState("");
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = () => getGitLog().then(setCommits).catch(() => {});
+  useEffect(() => {
+    load();
+  }, []);
+
+  const openDiff = async (hash: string) => {
+    setSelected(hash);
+    setDiff("Chargement…");
+    setDiff((await getGitDiff(hash)) || "(diff vide)");
+  };
+
+  const doRevert = async (hash: string) => {
+    if (!window.confirm(`Annuler le commit ${hash.slice(0, 7)} ? (crée un commit inverse)`))
+      return;
+    setBusy(hash);
+    setError(null);
+    try {
+      await revertCommit(hash);
+      await load();
+      await refreshFiles();
+      if (selected === hash) setSelected(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "revert impossible");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="scr mx-3 mb-3 flex flex-1 flex-col overflow-hidden border-[3px] border-line bg-card">
+      {error && (
+        <div className="border-b-2 border-line bg-warn/10 px-3 py-2 text-[12px] text-warn">
+          {error}
+        </div>
+      )}
+      {/* Liste des commits */}
+      <div className="scr max-h-[45%] overflow-auto border-b-2 border-line">
+        {commits.length === 0 ? (
+          <div className="p-4 text-center text-[12px] text-muted-2">
+            Aucun commit. L'agent commitera chaque modification de code ici.
+          </div>
+        ) : (
+          commits.map((c) => (
+            <div
+              key={c.full_hash}
+              className={`flex items-center gap-2 border-b border-line-soft px-3 py-2 last:border-0 ${
+                selected === c.hash ? "bg-base" : ""
+              }`}
+            >
+              <button
+                onClick={() => openDiff(c.hash)}
+                className="min-w-0 flex-1 text-left"
+                title={c.subject}
+              >
+                <div className="truncate text-[13px] text-ink">{c.subject}</div>
+                <div className="text-[11px] text-muted-2">
+                  {c.hash} · {c.when} · {c.files_changed} fichier
+                  {c.files_changed > 1 ? "s" : ""}
+                </div>
+              </button>
+              <button
+                onClick={() => doRevert(c.hash)}
+                disabled={busy === c.hash}
+                className="flex-none border-2 border-line bg-card px-2 py-1 text-[11px] text-warn disabled:opacity-40"
+                title="Annuler ce commit (revert)"
+              >
+                {busy === c.hash ? "…" : "↶ Annuler"}
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+      {/* Diff du commit sélectionné */}
+      <div className="scr flex-1 overflow-auto bg-card-deep p-3">
+        {selected ? (
+          <DiffView diff={diff} />
+        ) : (
+          <div className="py-8 text-center text-[12px] text-on-dark-3">
+            Clique un commit pour voir ses modifications.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Rendu coloré d'un diff unifié. */
+function DiffView({ diff }: { diff: string }) {
+  return (
+    <pre className="m-0 whitespace-pre-wrap text-[11.5px] leading-relaxed">
+      {diff.split("\n").map((line, i) => {
+        let color = "text-on-dark-2";
+        if (line.startsWith("+") && !line.startsWith("+++")) color = "text-ok";
+        else if (line.startsWith("-") && !line.startsWith("---")) color = "text-accent";
+        else if (line.startsWith("@@")) color = "text-info";
+        else if (/^(commit|Author|Date|diff|index)/.test(line))
+          color = "text-on-dark-3";
+        return (
+          <div key={i} className={color}>
+            {line || " "}
+          </div>
+        );
+      })}
+    </pre>
+  );
+}
+
 function Empty({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">

frontend/src/panels/SettingsView.tsx

@@ -541,7 +541,11 @@ function HardwareCard() {
         <div className="border-2 border-line bg-base px-3 py-2 text-[13px] text-ink">
           {hw.gpu_override.name} ·{" "}
           {(hw.gpu_override.vram_total_mb / 1024).toFixed(0)} Go{" "}
-          <span className="text-muted-2">(déclaré)</span>
+          <span className="text-muted-2">(valeur déclarée)</span>
+          <div className="mt-1 text-[11px] text-muted-2">
+            C'est la valeur de <code>GPU_VRAM_MB</code> que tu as fixée, pas une
+            détection réelle. Corrige-la (ex. 16000 pour 16 Go) ou mets 0.
+          </div>
         </div>
       ) : (
         <div className="border-2 border-line bg-base px-3 py-2 text-[12px] text-muted-2">

frontend/src/store/useStore.ts

@@ -75,6 +75,9 @@ interface LokiState {
   removeSession: (id: string) => Promise<void>;
   sendMessage: (content: string) => Promise<void>;
   stopStreaming: () => void;
+
+  mode: "plan" | "build" | "yolo";
+  setMode: (m: "plan" | "build" | "yolo") => void;
 }
 
 let activeStreamController: AbortController | null = null;
@@ -106,6 +109,9 @@ export const useStore = create<LokiState>((set, get) => ({
   config: null,
   availableTools: [],
   pendingShell: null,
+  mode: "build",
+
+  setMode: (m) => set({ mode: m }),
 
   approveShell: async () => {
     const cmd = get().pendingShell;
@@ -350,7 +356,12 @@ export const useStore = create<LokiState>((set, get) => ({
     activeStreamController = controller;
 
     await streamChat(
-      { session_id: sid, content, model: get().selectedModel || undefined },
+      {
+        session_id: sid,
+        content,
+        model: get().selectedModel || undefined,
+        mode: get().mode,
+      },
       {
         onToken: (t) => set({ streamContent: get().streamContent + t }),
         onThinking: (t) => set({ streamThinking: get().streamThinking + t }),