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

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">
-                <ClipIcon />
-              </button>
+              <ModeSelector />
               <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) */}
-      {tab === "logs" ? (
+      {/* Onglet Git */}
+      {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 }),