diff --git a/backend/app/agent.py b/backend/app/agent.py
index d01c807..a2d1ccb 100644
--- a/backend/app/agent.py
+++ b/backend/app/agent.py
@@ -26,9 +26,22 @@ MAX_TOOL_REPAIR_ATTEMPTS = 2
 
 
 def _tools_not_supported(exc: OllamaError) -> bool:
-    """Détecte l'erreur Ollama renvoyée par un modèle sans function calling."""
+    """Détecte un modèle incapable de function calling.
+
+    Deux cas :
+      - Ollama refuse explicitement (« does not support tools ») ;
+      - Ollama n'arrive pas à dériver un parseur d'appels d'outils du template
+        du modèle (« Unable to generate parser for this template ») — fréquent
+        sur des modèles exotiques dont le template Jinja lève une exception.
+    Dans les deux cas, on retombe sur une conversation simple, sans outils.
+    """
     message = str(exc).lower()
-    return "does not support tools" in message or "does not support tool" in message
+    return (
+        "does not support tools" in message
+        or "does not support tool" in message
+        or "unable to generate parser for this template" in message
+        or "automatic parser generation failed" in message
+    )
 
 
 def _invalid_tool_arguments(exc: OllamaError) -> bool:
@@ -70,6 +83,7 @@ async def run_agent(
         tools = None
     collected: list[dict] = []
     text_parts: list[str] = []
+    thinking_parts: list[str] = []
     active_tools = tools
     tool_fallback_used = False
     tool_repair_attempts = 0
@@ -107,6 +121,9 @@ async def run_agent(
                         thinking = msg.get("thinking", "")
                         if thinking:
                             thinking_buf += thinking
+                            # Diffuse le raisonnement en direct pour l'afficher
+                            # dans le panneau repliable du chat.
+                            yield {"type": "thinking", "content": thinking}
                             if not thinking_status_sent:
                                 thinking_status_sent = True
                                 yield {"type": "status", "message": "Réflexion…"}
@@ -179,6 +196,7 @@ async def run_agent(
             assistant_turn: dict = {"role": "assistant", "content": content_buf}
             if thinking_buf:
                 assistant_turn["thinking"] = thinking_buf
+                thinking_parts.append(thinking_buf)
             if tool_calls:
                 assistant_turn["tool_calls"] = tool_calls
             convo.append(assistant_turn)
@@ -300,4 +318,5 @@ async def run_agent(
         "content": final_content,
         "tools": collected,
         "stats": final_stats,
+        "thinking": "\n\n".join(thinking_parts).strip(),
     }
diff --git a/backend/app/routes/chat.py b/backend/app/routes/chat.py
index 9591e02..684a43b 100644
--- a/backend/app/routes/chat.py
+++ b/backend/app/routes/chat.py
@@ -59,6 +59,7 @@ async def chat(req: ChatRequest) -> StreamingResponse:
         final_content = ""
         tools_meta: list[dict] = []
         stats_meta: dict | None = None
+        thinking_meta = ""
         error_message = ""
 
         queue: asyncio.Queue[dict | None] = asyncio.Queue()
@@ -101,6 +102,7 @@ async def chat(req: ChatRequest) -> StreamingResponse:
                 etype = ev.pop("type")
                 if etype in (
                     "token",
+                    "thinking",
                     "status",
                     "notice",
                     "tool_call",
@@ -115,6 +117,7 @@ async def chat(req: ChatRequest) -> StreamingResponse:
                     final_content = ev["content"]
                     tools_meta = ev["tools"]
                     stats_meta = ev.get("stats")
+                    thinking_meta = ev.get("thinking", "")
         finally:
             if not producer.done():
                 producer.cancel()
@@ -127,6 +130,8 @@ async def chat(req: ChatRequest) -> StreamingResponse:
                 meta["tools"] = tools_meta
             if stats_meta:
                 meta["stats"] = stats_meta
+            if thinking_meta:
+                meta["thinking"] = thinking_meta
             db.add_message(
                 req.session_id,
                 "assistant",
diff --git a/frontend/index.html b/frontend/index.html
index d07fdf3..5a45fed 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Press+Start+2P&display=swap"
       rel="stylesheet"
     />
     <title>Loki — Agent local</title>
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index e74ae57..a7e1b37 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -57,7 +57,7 @@ export interface Message {
   role: "user" | "assistant";
   content: string;
   model?: string;
-  meta?: { tools?: ToolCall[]; stats?: MessageStats } | null;
+  meta?: { tools?: ToolCall[]; stats?: MessageStats; thinking?: string } | null;
   created_at: number;
 }
 
@@ -156,6 +156,7 @@ export async function streamChat(
   body: { session_id: string; content: string; model?: string },
   handlers: {
     onToken: (t: string) => void;
+    onThinking: (t: string) => void;
     onToolCall: (call: ToolCall) => void;
     onToolResult: (call: ToolCall) => void;
     onToolConfirm: (command: string) => void;
@@ -215,6 +216,7 @@ export async function streamChat(
     try {
       const payload = JSON.parse(dataLines.join("\n"));
       if (event === "token") handlers.onToken(payload.content);
+      else if (event === "thinking") handlers.onThinking(payload.content);
       else if (event === "status") handlers.onStatus(payload.message);
       else if (event === "notice") handlers.onNotice(payload.message);
       else if (event === "tool_call")
diff --git a/frontend/src/components/ActivityBar.tsx b/frontend/src/components/ActivityBar.tsx
index aa7c08d..dce3ee2 100644
--- a/frontend/src/components/ActivityBar.tsx
+++ b/frontend/src/components/ActivityBar.tsx
@@ -15,7 +15,14 @@ const items: { id: View; icon: React.ReactNode }[] = [
   { id: "tools", icon: <NodesIcon /> },
 ];
 
-/** Barre d'activité verticale (56px) à gauche. */
+const btn = (on: boolean) =>
+  `flex h-10 w-10 items-center justify-center border-[3px] ${
+    on
+      ? "border-white bg-accent text-white shadow-accent-soft"
+      : "border-chrome-3 text-on-dark-2 hover:text-white"
+  }`;
+
+/** Barre d'activité verticale (60px) sombre à gauche. */
 export function ActivityBar({
   active,
   onChange,
@@ -24,46 +31,27 @@ export function ActivityBar({
   onChange: (v: View) => void;
 }) {
   return (
-    <div className="flex w-14 flex-none flex-col items-center gap-1 border-r border-line-soft bg-sunken py-3">
-      {items.map((it) => {
-        const on = active === it.id;
-        return (
-          <button
-            key={it.id}
-            onClick={() => onChange(it.id)}
-            className={`relative flex h-10 w-10 items-center justify-center rounded-[10px] ${
-              on ? "text-accent" : "text-muted-3 hover:text-ink-3"
-            }`}
-            style={on ? { background: "rgba(240,161,92,.14)" } : undefined}
-          >
-            {on && (
-              <span className="absolute left-[-12px] top-[11px] h-[18px] w-[3px] rounded bg-accent" />
-            )}
-            {it.icon}
-          </button>
-        );
-      })}
+    <div className="flex w-[60px] flex-none flex-col items-center gap-2 border-r-[3px] border-line bg-bar py-3">
+      {items.map((it) => (
+        <button
+          key={it.id}
+          onClick={() => onChange(it.id)}
+          className={btn(active === it.id)}
+        >
+          {it.icon}
+        </button>
+      ))}
 
       <div className="flex-1" />
 
       <button
         onClick={() => onChange("settings")}
-        className={`relative flex h-10 w-10 items-center justify-center rounded-[10px] ${
-          active === "settings" ? "text-accent" : "text-muted-3 hover:text-ink-3"
-        }`}
-        style={
-          active === "settings"
-            ? { background: "rgba(240,161,92,.14)" }
-            : undefined
-        }
+        className={btn(active === "settings")}
       >
-        {active === "settings" && (
-          <span className="absolute left-[-12px] top-[11px] h-[18px] w-[3px] rounded bg-accent" />
-        )}
         <SettingsIcon />
       </button>
 
-      <div className="mt-1 flex h-[30px] w-[30px] items-center justify-center rounded-full bg-[#3a332b] text-xs font-semibold text-ink-2">
+      <div className="font-pixel flex h-[34px] w-[34px] items-center justify-center border-[3px] border-white bg-white text-[11px] text-line">
         M
       </div>
     </div>
diff --git a/frontend/src/components/Icon.tsx b/frontend/src/components/Icon.tsx
index 3aa7602..976d966 100644
--- a/frontend/src/components/Icon.tsx
+++ b/frontend/src/components/Icon.tsx
@@ -98,20 +98,20 @@ export const CheckIcon = ({ size = 14, className }: Props) => (
   </svg>
 );
 
-/** Logo Loki : carré dégradé + losange interne. */
-export const LokiMark = ({ size = 26 }: { size?: number }) => (
+/** Logo Loki : carré orange à bordure blanche + carré interne (néo-brutaliste). */
+export const LokiMark = ({ size = 30 }: { size?: number }) => (
   <div
-    className="flex items-center justify-center rounded-lg bg-accent-grad"
-    style={{ width: size, height: size }}
+    className="flex items-center justify-center bg-accent"
+    style={{
+      width: size,
+      height: size,
+      border: "3px solid #fff",
+      boxShadow: "3px 3px 0 #ff5436",
+      borderRadius: 7,
+    }}
   >
     <div
-      className="bg-base"
-      style={{
-        width: size * 0.3,
-        height: size * 0.3,
-        borderRadius: 2,
-        transform: "rotate(45deg)",
-      }}
+      style={{ width: size * 0.3, height: size * 0.3, background: "#fff" }}
     />
   </div>
 );
diff --git a/frontend/src/components/ModelSelector.tsx b/frontend/src/components/ModelSelector.tsx
index 43d3f9a..ffefc43 100644
--- a/frontend/src/components/ModelSelector.tsx
+++ b/frontend/src/components/ModelSelector.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useStore } from "../store/useStore";
 import { ChevronDown } from "./Icon";
 
-/** Sélecteur de modèle Ollama (chip de la barre supérieure). */
+/** Sélecteur de modèle Ollama (chip orange de la barre supérieure). */
 export function ModelSelector() {
   const { models, selectedModel, setSelectedModel } = useStore();
   const [open, setOpen] = useState(false);
@@ -20,19 +20,18 @@ export function ModelSelector() {
     <div className="relative" ref={ref}>
       <button
         onClick={() => setOpen((v) => !v)}
-        className="flex h-7 items-center gap-2 rounded-lg border border-line-strong bg-[#2a251f] px-[11px]"
+        className="flex h-[34px] items-center gap-2 border-[3px] border-white bg-accent px-3 text-white shadow-accent-soft"
+        style={{ borderRadius: 7 }}
       >
-        <span className="h-1.5 w-1.5 rounded-full bg-accent" />
-        <span className="font-mono text-xs font-medium text-[#e7ddcd]">
-          {selectedModel || "—"}
-        </span>
-        <ChevronDown size={12} className="text-muted-2" />
+        <span className="h-2.5 w-2.5 border-2 border-line bg-white" />
+        <span className="text-[14px] leading-none">{selectedModel || "—"}</span>
+        <ChevronDown size={12} />
       </button>
 
       {open && (
-        <div className="absolute right-0 top-9 z-20 w-64 rounded-lg border border-line bg-card p-1 shadow-frame">
+        <div className="absolute right-0 top-11 z-20 w-64 border-[3px] border-line bg-card p-1 shadow-hard">
           {models.length === 0 && (
-            <div className="px-3 py-2 text-xs text-muted-3">
+            <div className="px-3 py-2 text-xs text-muted-2">
               Aucun modèle installé
             </div>
           )}
@@ -43,22 +42,18 @@ export function ModelSelector() {
                 setSelectedModel(m.name);
                 setOpen(false);
               }}
-              className={`flex w-full items-center gap-2 rounded-md px-2 py-2 text-left hover:bg-[#252019] ${
-                m.name === selectedModel ? "bg-[#252019]" : ""
+              className={`flex w-full items-center gap-2 px-2 py-2 text-left hover:bg-base ${
+                m.name === selectedModel ? "bg-base" : ""
               }`}
             >
               <span
-                className={`h-1.5 w-1.5 rounded-full ${
-                  m.name === selectedModel ? "bg-accent" : "bg-muted-3"
+                className={`h-2 w-2 border-2 border-line ${
+                  m.name === selectedModel ? "bg-accent" : "bg-card"
                 }`}
               />
-              <span className="flex-1 font-mono text-xs text-ink-2">
-                {m.name}
-              </span>
+              <span className="flex-1 text-xs text-ink-2">{m.name}</span>
               {m.size_go > 0 && (
-                <span className="font-mono text-[10px] text-muted-3">
-                  {m.size_go} Go
-                </span>
+                <span className="text-[10px] text-muted-2">{m.size_go} Go</span>
               )}
             </button>
           ))}
diff --git a/frontend/src/components/ToolCard.tsx b/frontend/src/components/ToolCard.tsx
index de0f77f..fa841f9 100644
--- a/frontend/src/components/ToolCard.tsx
+++ b/frontend/src/components/ToolCard.tsx
@@ -18,30 +18,31 @@ export function ToolCard({ call }: { call: ToolCall }) {
       ? "(…)"
       : "()";
 
+  const write = call.name === "write_file";
+
   return (
-    <div className="mb-[9px] overflow-hidden rounded-[11px] border border-line bg-card-deep">
-      <div className="flex items-center gap-2.5 px-[13px] py-2.5">
+    <div className="mb-[11px] overflow-hidden border-[3px] border-line bg-card shadow-hard-sm" style={{ borderRadius: 7 }}>
+      <div className="flex items-center gap-2.5 px-3 py-2.5">
         <span
-          className="flex h-6 w-6 items-center justify-center rounded-[7px] text-accent"
-          style={{ background: "rgba(240,161,92,.13)" }}
+          className={`flex h-[26px] w-[26px] items-center justify-center border-2 border-line ${
+            write ? "bg-accent text-white" : "bg-card-deep text-white"
+          }`}
         >
           <ToolGlyph name={call.name} />
         </span>
-        <span className="font-mono text-[12.5px] font-semibold text-[#e7ddcd]">
-          {call.name}
-        </span>
-        <span className="font-mono text-xs text-muted-2">{argPreview}</span>
+        <span className="text-[14px] text-ink">{call.name}</span>
+        <span className="text-[13px] text-muted-3">{argPreview}</span>
         <div className="flex-1" />
         {running ? (
-          <span className="flex items-center gap-1.5 font-mono text-[11px] text-muted">
+          <span className="flex items-center gap-1.5 text-[13px] text-muted-2">
             <span className="h-2.5 w-2.5 animate-spin rounded-full border-2 border-muted-3 border-t-accent" />
             en cours
           </span>
         ) : pending ? (
-          <span className="font-mono text-[11px] text-warn">⏸ à valider</span>
+          <span className="text-[13px] text-accent">⏸ à valider</span>
         ) : (
           <span
-            className={`flex items-center gap-1.5 font-mono text-[11px] ${
+            className={`flex items-center gap-1.5 text-[13px] ${
               error ? "text-warn" : "text-ok"
             }`}
           >
@@ -50,7 +51,7 @@ export function ToolCard({ call }: { call: ToolCall }) {
         )}
       </div>
       {call.summary && !running && (
-        <div className="border-t border-line-soft px-[13px] py-2.5 font-mono text-[11.5px] text-muted-3">
+        <div className="border-t-2 border-line-soft px-3 py-2 text-[13px] text-muted-2">
           → {call.summary}
         </div>
       )}
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index edf2abd..3830b69 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/frontend/src/components/TopBar.tsx
@@ -2,50 +2,41 @@ import { useStore } from "../store/useStore";
 import { ChevronDown, LokiMark } from "./Icon";
 import { ModelSelector } from "./ModelSelector";
 
-/** Barre supérieure : logo, fil d'Ariane, statut Ollama, sélecteur de modèle. */
+/** Barre supérieure sombre : logo, fil d'Ariane, statut Ollama, sélecteur. */
 export function TopBar() {
   const status = useStore((s) => s.status);
   const connected = status?.connected ?? false;
 
   return (
-    <div className="flex h-12 flex-none items-center gap-3.5 border-b border-line-strong bg-bar px-4">
+    <div className="flex h-[54px] flex-none items-center gap-3.5 border-b-[3px] border-line bg-bar px-4">
       <div className="flex items-center gap-2.5">
         <LokiMark />
-        <div className="text-[15px] font-bold tracking-tight">Loki</div>
-        <div className="pt-px font-mono text-[11px] text-muted-3">
-          agent local
-        </div>
+        <div className="font-pixel text-[14px] text-white">LOKI</div>
+        <div className="text-[13px] leading-none text-on-dark-2">agent local</div>
       </div>
 
-      <div className="h-5 w-px bg-line-strong" />
+      <div className="h-6 w-[3px] bg-chrome-3" />
 
-      <div className="flex items-center gap-2 text-[13px] font-medium text-ink-2">
+      <div className="flex items-center gap-2 text-[13px] text-on-dark">
         <span>Nouvelle session</span>
-        <ChevronDown className="text-muted-3" />
+        <ChevronDown className="text-on-dark-3" />
       </div>
 
       <div className="flex-1" />
 
       {/* Statut Ollama */}
       <div
-        className="flex h-7 items-center gap-2 rounded-lg border border-line-strong bg-card-soft px-[11px]"
+        className="flex h-8 items-center gap-2 border-[3px] border-chrome-3 bg-chrome-2 px-[11px]"
         title={connected ? status?.host : status?.error}
       >
         <span
-          className={`h-[7px] w-[7px] rounded-full ${
+          className={`h-[11px] w-[11px] border-2 border-line ${
             connected ? "bg-ok" : "bg-warn"
           }`}
-          style={
-            connected
-              ? { boxShadow: "0 0 0 3px rgba(134,199,154,.16)" }
-              : undefined
-          }
         />
-        <span className="text-xs font-medium text-ink-3">Ollama</span>
-        <span className="font-mono text-[11px] text-muted-3">
-          {connected
-            ? status?.host.replace(/^https?:\/\//, "")
-            : "déconnecté"}
+        <span className="text-[13px] text-on-dark">Ollama</span>
+        <span className="text-[13px] text-on-dark-3">
+          {connected ? status?.host.replace(/^https?:\/\//, "") : "déconnecté"}
         </span>
       </div>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3fc2584..c124437 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,21 +10,27 @@ body,
 }
 
 body {
-  background: #1a1714;
-  color: #efe9df;
-  font-family: "Hanken Grotesk", system-ui, sans-serif;
+  background: #ececef;
+  color: #18181b;
+  font-family: "DM Mono", ui-monospace, monospace;
+  letter-spacing: -0.01em;
   -webkit-font-smoothing: antialiased;
 }
 
-/* Barres de défilement fidèles au visuel */
+/* Police pixel pour les libellés (utilitaire .font-pixel via Tailwind aussi) */
+.font-pixel {
+  font-family: "Press Start 2P", ui-monospace, monospace;
+}
+
+/* Barres de défilement néo-brutalistes */
 .scr::-webkit-scrollbar {
-  width: 9px;
-  height: 9px;
+  width: 12px;
+  height: 12px;
 }
 .scr::-webkit-scrollbar-thumb {
-  background: #3a342c;
-  border-radius: 6px;
+  background: #18181b;
+  border: 2px solid #ececef;
 }
 .scr::-webkit-scrollbar-track {
-  background: transparent;
+  background: #e4e4e7;
 }
diff --git a/frontend/src/panels/ChatPanel.tsx b/frontend/src/panels/ChatPanel.tsx
index f8f41bc..7171917 100644
--- a/frontend/src/panels/ChatPanel.tsx
+++ b/frontend/src/panels/ChatPanel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useStore } from "../store/useStore";
-import { ClipIcon, LokiMark, SendIcon } from "../components/Icon";
+import { ChevronDown, ClipIcon, LokiMark, SendIcon } from "../components/Icon";
 import { ToolCard } from "../components/ToolCard";
 import { MessageContent } from "../components/MessageContent";
 import type { Message, ToolCall } from "../api/client";
@@ -12,6 +12,7 @@ export function ChatPanel() {
     messages,
     streaming,
     streamContent,
+    streamThinking,
     streamStatus,
     streamNotice,
     streamTools,
@@ -33,7 +34,7 @@ export function ChatPanel() {
   // Auto-scroll vers le bas à chaque token / message.
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
-  }, [messages, streamContent, streamTools]);
+  }, [messages, streamContent, streamThinking, streamTools]);
 
   const submit = () => {
     if (!draft.trim() || streaming) return;
@@ -53,21 +54,18 @@ export function ChatPanel() {
   return (
     <div className="flex min-w-0 flex-1 flex-col bg-base">
       {/* Barre de contexte */}
-      <div className="flex h-[42px] flex-none items-center gap-2 border-b border-line-soft px-[18px]">
-        <Chip>Invite système</Chip>
+      <div className="flex h-[46px] flex-none items-center gap-2 border-b-[3px] border-line bg-panel px-4">
+        <Chip>⚑ Invite système</Chip>
         <Chip>
-          <span className="h-1.5 w-1.5 rounded-full bg-ok" />
-          {activeTools} outil{activeTools > 1 ? "s" : ""} actif
-          {activeTools > 1 ? "s" : ""}
+          <span className="h-2 w-2 border-2 border-line bg-ok" />
+          {activeTools} outil{activeTools > 1 ? "s" : ""}
         </Chip>
         <Chip>
-          Température{" "}
-          <b className="font-semibold text-[#e7ddcd]">
-            {config ? config.temperature.toFixed(2) : "—"}
-          </b>
+          Temp{" "}
+          <b className="text-accent">{config ? config.temperature.toFixed(1) : "—"}</b>
         </Chip>
         <div className="flex-1" />
-        <span className="font-mono text-[11px] text-muted-4">
+        <span className="text-[13px] text-muted-3">
           {currentSessionId
             ? `${messages.length} message${messages.length > 1 ? "s" : ""}`
             : "aucune session"}
@@ -78,17 +76,15 @@ export function ChatPanel() {
       <div ref={scrollRef} className="scr flex-1 overflow-auto px-7 py-6">
         {empty ? (
           <div className="mx-auto flex max-w-[680px] flex-col items-center justify-center gap-4 pt-24 text-center">
-            <LokiMark size={44} />
-            <div className="text-lg font-semibold text-ink">
-              Prêt à travailler.
-            </div>
-            <div className="max-w-[360px] text-sm leading-relaxed text-muted">
-              Décris une tâche à l'agent. Les outils fichiers et l'aperçu en
-              direct arrivent à la prochaine étape.
+            <LokiMark size={48} />
+            <div className="font-pixel text-[15px] text-ink">PRÊT À TRAVAILLER</div>
+            <div className="max-w-[380px] text-[14px] leading-relaxed text-muted">
+              Décris une tâche à l'agent. Outils fichiers et aperçu en direct
+              disponibles.
             </div>
           </div>
         ) : (
-          <div className="mx-auto flex max-w-[680px] flex-col gap-[22px]">
+          <div className="mx-auto flex max-w-[680px] flex-col gap-5">
             {messages.map((m) => (
               <Bubble key={m.id} msg={m} />
             ))}
@@ -106,6 +102,7 @@ export function ChatPanel() {
                 pending
                 pendingStatus={streamStatus}
                 notice={streamNotice}
+                thinking={streamThinking}
               />
             )}
             {pendingShell && (
@@ -120,35 +117,34 @@ export function ChatPanel() {
       </div>
 
       {/* Composer */}
-      <div className="flex-none border-t border-line-soft px-7 pb-[18px] pt-3.5">
+      <div className="flex-none border-t-[3px] border-line bg-panel px-7 pb-[18px] pt-3.5">
         <div className="mx-auto max-w-[680px]">
-          <div className="rounded-[14px] border border-line-strong bg-card-soft p-[13px]">
+          <div className="border-[3px] border-line bg-card p-3 shadow-hard" style={{ borderRadius: 8 }}>
             <textarea
               rows={1}
               value={draft}
               onChange={(e) => setDraft(e.target.value)}
               onKeyDown={onKeyDown}
               placeholder="Envoyer un message à l'agent…"
-              className="min-h-[42px] w-full resize-none bg-transparent text-sm leading-relaxed text-ink outline-none placeholder:text-muted-3"
+              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-[30px] w-[30px] items-center justify-center rounded-lg border border-line-strong text-muted-2">
+              <button className="flex h-8 w-8 items-center justify-center border-2 border-line text-ink-2">
                 <ClipIcon />
               </button>
-              <div className="flex h-[30px] items-center gap-1.5 rounded-lg border border-line-strong px-2.5 font-mono text-[11.5px] text-muted">
-                <span className="h-1.5 w-1.5 rounded-full bg-accent" />
+              <div className="flex h-8 items-center gap-1.5 border-2 border-line px-2.5 text-[13px] text-ink-2">
+                <span className="h-2 w-2 border-2 border-line bg-accent" />
                 {selectedModel || "—"}
               </div>
               <div className="flex-1" />
-              <span className="font-mono text-[10.5px] text-muted-4">
-                ⏎ envoyer · ⇧⏎ ligne
-              </span>
+              <span className="text-[13px] text-muted-3">⏎ envoyer · ⇧⏎ ligne</span>
               <button
                 onClick={submit}
                 disabled={streaming || !draft.trim()}
-                className="flex h-[34px] items-center gap-1.5 rounded-[9px] bg-accent px-4 text-[13px] font-bold text-[#1f1b16] disabled:opacity-50"
+                className="flex h-[38px] items-center gap-1.5 border-[3px] border-line bg-card-deep px-4 text-[14px] text-white shadow-hard-accent disabled:opacity-40"
+                style={{ borderRadius: 7 }}
               >
-                {streaming ? "…" : "Envoyer"}
+                {streaming ? "…" : "ENVOYER"}
                 {!streaming && <SendIcon />}
               </button>
             </div>
@@ -164,11 +160,13 @@ function Bubble({
   pending,
   pendingStatus,
   notice,
+  thinking,
 }: {
   msg: Message;
   pending?: boolean;
   pendingStatus?: string;
   notice?: string | null;
+  thinking?: string;
 }) {
   const time = new Date(msg.created_at * 1000).toLocaleTimeString("fr-FR", {
     hour: "2-digit",
@@ -178,15 +176,15 @@ function Bubble({
   if (msg.role === "user") {
     return (
       <div className="flex gap-3">
-        <div className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-[9px] bg-[#3a332b] text-xs font-semibold text-ink-2">
+        <div className="font-pixel flex h-[34px] w-[34px] flex-none items-center justify-center border-[3px] border-line bg-card-deep text-[11px] text-white">
           M
         </div>
         <div className="flex-1">
           <div className="mb-1.5 flex items-baseline gap-2">
-            <span className="text-[13px] font-semibold">Vous</span>
-            <span className="font-mono text-[10.5px] text-muted-4">{time}</span>
+            <span className="text-[14px] text-ink">VOUS</span>
+            <span className="text-[13px] text-muted-3">{time}</span>
           </div>
-          <div className="rounded-xl rounded-tl-[4px] border border-line bg-card-soft px-[15px] py-3 text-sm leading-relaxed text-ink-2 whitespace-pre-wrap">
+          <div className="border-[3px] border-line bg-card px-[14px] py-3 text-[14px] leading-snug text-ink shadow-hard-sm whitespace-pre-wrap" style={{ borderRadius: 7 }}>
             {msg.content}
           </div>
         </div>
@@ -196,30 +194,31 @@ function Bubble({
 
   return (
     <div className="flex gap-3">
-      <div className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-[9px] bg-accent-grad">
-        <div
-          className="bg-base"
-          style={{ width: 8, height: 8, borderRadius: 2, transform: "rotate(45deg)" }}
-        />
+      <div className="flex h-[34px] w-[34px] flex-none items-center justify-center border-[3px] border-line bg-accent">
+        <div style={{ width: 10, height: 10, background: "#fff" }} />
       </div>
       <div className="min-w-0 flex-1">
         <div className="mb-2 flex items-baseline gap-2">
-          <span className="text-[13px] font-semibold">Agent</span>
-          <span className="font-mono text-[10.5px] text-muted-4">
+          <span className="text-[14px] text-ink">LOKI</span>
+          <span className="text-[13px] text-muted-3">
             {msg.model ? `${msg.model} · ` : ""}
             {time}
           </span>
         </div>
+        <ReasoningPanel
+          text={thinking ?? msg.meta?.thinking ?? ""}
+          live={!!pending}
+        />
         {(msg.meta?.tools ?? []).map((t: ToolCall, i: number) => (
           <ToolCard key={i} call={t} />
         ))}
         {notice && (
-          <div className="mb-2 rounded-lg border border-[#4a3a2a] bg-card-deep px-3 py-2 text-xs text-warn">
+          <div className="mb-2 border-[3px] border-line bg-card px-3 py-2 text-[13px] text-warn">
             {notice}
           </div>
         )}
         {(msg.content || pending) && (
-          <div className="text-sm leading-[1.65] text-ink-2">
+          <div className="text-[14px] leading-[1.5] text-ink-2">
             {msg.content ? (
               <MessageContent text={msg.content} />
             ) : (
@@ -231,9 +230,9 @@ function Bubble({
           </div>
         )}
         {!pending && msg.meta?.stats && (
-          <div className="mt-2 flex items-center gap-2.5 font-mono text-[10.5px] text-muted-4">
+          <div className="mt-2 flex items-center gap-2.5 text-[12px] text-muted-3">
             {msg.meta.stats.tokens_per_sec != null && (
-              <span className="text-muted-3">
+              <span className="text-accent-2">
                 {msg.meta.stats.tokens_per_sec} tok/s
               </span>
             )}
@@ -248,6 +247,56 @@ function Bubble({
   );
 }
 
+/** Panneau « Raisonnement » : repliable et redimensionnable (poignée en bas). */
+function ReasoningPanel({ text, live }: { text: string; live: boolean }) {
+  const [open, setOpen] = useState(live);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (live) setOpen(true);
+  }, [live]);
+
+  useEffect(() => {
+    if (open && live) {
+      bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+    }
+  }, [text, open, live]);
+
+  if (!text) return null;
+
+  return (
+    <div className="mb-[11px] overflow-hidden border-[3px] border-line bg-card shadow-hard-sm" style={{ borderRadius: 7 }}>
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left"
+      >
+        <ChevronDown
+          size={12}
+          className={`text-ink-2 transition-transform ${open ? "" : "-rotate-90"}`}
+        />
+        <span className="text-[13px] font-medium text-ink">Raisonnement</span>
+        {live && (
+          <span className="flex items-center gap-1 text-[12px] text-accent">
+            <span className="h-2 w-2 animate-pulse border-2 border-line bg-accent" />
+            en cours…
+          </span>
+        )}
+        <span className="ml-auto text-[12px] text-muted-3">
+          {open ? "réduire" : "afficher"}
+        </span>
+      </button>
+      {open && (
+        <div
+          ref={bodyRef}
+          className="scr max-h-[200px] min-h-[60px] resize-y overflow-auto whitespace-pre-wrap border-t-2 border-line-soft bg-card-deep px-3 py-2 text-[12.5px] leading-relaxed text-on-dark-2"
+        >
+          {text}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function ShellConfirm({
   command,
   onApprove,
@@ -258,27 +307,27 @@ function ShellConfirm({
   onReject: () => void;
 }) {
   return (
-    <div className="ml-[43px] overflow-hidden rounded-[11px] border border-[#4a3a2a] bg-card-deep">
-      <div className="flex items-center gap-2 border-b border-line-soft px-[13px] py-2.5">
-        <span className="font-mono text-[12.5px] font-semibold text-warn">
-          run_shell
-        </span>
-        <span className="text-xs text-muted-2">· commande sensible à valider</span>
+    <div className="ml-[46px] overflow-hidden border-[3px] border-line bg-card shadow-hard" style={{ borderRadius: 7 }}>
+      <div className="flex items-center gap-2 border-b-2 border-line px-3 py-2.5">
+        <span className="text-[14px] text-accent">run_shell</span>
+        <span className="text-[13px] text-muted-2">· commande sensible à valider</span>
       </div>
-      <div className="px-[13px] py-3">
-        <pre className="m-0 mb-3 overflow-auto whitespace-pre-wrap rounded-lg bg-sunken px-3 py-2.5 font-mono text-[12px] text-ink-2">
+      <div className="px-3 py-3">
+        <pre className="m-0 mb-3 overflow-auto whitespace-pre-wrap border-2 border-line bg-card-deep px-3 py-2.5 text-[12.5px] text-on-dark">
           $ {command}
         </pre>
         <div className="flex items-center gap-2">
           <button
             onClick={onApprove}
-            className="flex h-[30px] items-center gap-1.5 rounded-lg bg-accent px-3.5 text-[12.5px] font-bold text-[#1f1b16]"
+            className="flex h-[32px] items-center gap-1.5 border-[3px] border-line bg-card-deep px-3.5 text-[13px] text-white shadow-hard-accent"
+            style={{ borderRadius: 7 }}
           >
             Approuver &amp; exécuter
           </button>
           <button
             onClick={onReject}
-            className="flex h-[30px] items-center rounded-lg border border-line-strong px-3.5 text-[12.5px] font-semibold text-ink-3"
+            className="flex h-[32px] items-center border-[3px] border-line bg-card px-3.5 text-[13px] text-ink-2"
+            style={{ borderRadius: 7 }}
           >
             Refuser
           </button>
@@ -290,7 +339,7 @@ function ShellConfirm({
 
 function Chip({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-[25px] items-center gap-1.5 rounded-[7px] border border-line-strong bg-card-soft px-[9px] text-[11.5px] text-ink-3">
+    <div className="flex h-7 items-center gap-1.5 border-2 border-line bg-card px-2.5 text-[13px] text-ink-2">
       {children}
     </div>
   );
diff --git a/frontend/src/panels/LeftPanel.tsx b/frontend/src/panels/LeftPanel.tsx
index cccafa8..0032c9c 100644
--- a/frontend/src/panels/LeftPanel.tsx
+++ b/frontend/src/panels/LeftPanel.tsx
@@ -22,24 +22,22 @@ export function LeftPanel() {
   }, [refreshSessions, refreshFiles]);
 
   return (
-    <div className="flex w-[268px] flex-none flex-col border-r border-line-soft bg-panel">
+    <div className="flex w-[280px] flex-none flex-col border-r-[3px] border-line bg-panel">
       {/* Historique */}
       <div className="flex items-center justify-between px-4 pb-2.5 pt-4">
-        <span className="text-[11px] font-bold uppercase tracking-[.07em] text-label">
-          Historique
-        </span>
+        <span className="font-pixel text-[10px] text-label">HISTORIQUE</span>
         <button
           onClick={newSession}
-          className="flex cursor-pointer items-center gap-1 text-xs font-semibold text-accent"
+          className="flex cursor-pointer items-center gap-1 text-[13px] text-accent"
         >
           <PlusIcon />
           Nouvelle
         </button>
       </div>
 
-      <div className="scr flex max-h-[45%] flex-col gap-0.5 overflow-auto px-2.5">
+      <div className="scr flex max-h-[45%] flex-col gap-2 overflow-auto px-3 py-1">
         {sessions.length === 0 && (
-          <div className="px-3 py-3 text-xs text-muted-3">
+          <div className="px-1 py-2 text-xs text-muted-2">
             Aucune session. Lance une conversation ci-dessous.
           </div>
         )}
@@ -49,17 +47,15 @@ export function LeftPanel() {
             <div
               key={s.id}
               onClick={() => openSession(s.id)}
-              className={`group relative cursor-pointer rounded-[9px] px-3 py-[9px] ${
-                active ? "bg-[#252019]" : "hover:bg-[#221e18]"
+              className={`group cursor-pointer border-[3px] border-line px-3 py-2.5 ${
+                active ? "bg-card-deep shadow-hard-accent" : "bg-card"
               }`}
+              style={{ borderRadius: 7 }}
             >
-              {active && (
-                <div className="absolute bottom-[9px] left-0 top-[9px] w-[3px] rounded bg-accent" />
-              )}
               <div className="flex items-center gap-1">
                 <div
-                  className={`flex-1 truncate text-[13px] ${
-                    active ? "font-semibold text-ink" : "font-medium text-ink-3"
+                  className={`flex-1 truncate text-[14px] leading-tight ${
+                    active ? "text-white" : "text-ink-2"
                   }`}
                 >
                   {s.title}
@@ -69,13 +65,15 @@ export function LeftPanel() {
                     e.stopPropagation();
                     removeSession(s.id);
                   }}
-                  className="hidden text-muted-3 hover:text-warn group-hover:block"
+                  className={`hidden group-hover:block ${
+                    active ? "text-on-dark-2 hover:text-accent" : "text-muted-3 hover:text-warn"
+                  }`}
                   title="Supprimer"
                 >
                   ×
                 </button>
               </div>
-              <div className="mt-[3px] font-mono text-[10.5px] text-muted-3">
+              <div className="mt-1 text-[13px] text-muted-3">
                 {relTime(s.updated_at)} · {s.message_count ?? 0} message
                 {(s.message_count ?? 0) > 1 ? "s" : ""}
               </div>
@@ -84,19 +82,17 @@ export function LeftPanel() {
         })}
       </div>
 
-      <div className="mx-4 my-3.5 h-px bg-line-soft" />
+      <div className="mx-0 my-4 h-[3px] bg-line" />
 
       {/* Fichiers */}
       <div className="flex items-center justify-between px-4 pb-2">
-        <span className="text-[11px] font-bold uppercase tracking-[.07em] text-label">
-          Fichiers
-        </span>
-        <span className="font-mono text-[10.5px] text-muted-4">workspace/</span>
+        <span className="font-pixel text-[10px] text-label">FICHIERS</span>
+        <span className="text-[13px] text-muted-3">workspace/</span>
       </div>
 
-      <div className="scr flex-1 overflow-auto px-2.5 pb-3.5 font-mono text-xs">
+      <div className="scr flex-1 overflow-auto px-3 pb-3.5 text-[14px]">
         {fileTree.length === 0 ? (
-          <div className="px-2 py-4 text-center text-muted-3">
+          <div className="px-2 py-4 text-center text-muted-2">
             Aucun fichier pour l'instant.
             <br />
             L'agent créera des fichiers ici.
@@ -110,41 +106,39 @@ export function LeftPanel() {
 }
 
 function FileTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
-  const openPreview = useStore((s) => s.openPreview);
+  const { openPreview, previewPath } = useStore();
   return (
     <>
-      {nodes.map((n) => (
-        <div key={n.path}>
-          <div
-            onClick={() => n.type === "file" && openPreview(n.path)}
-            className={`flex items-center gap-2 rounded-[7px] px-2 py-[5px] ${
-              n.type === "file"
-                ? "cursor-pointer text-ink-2 hover:bg-[#221e18]"
-                : "text-muted"
-            }`}
-            style={{ paddingLeft: 8 + depth * 14 }}
-          >
-            {n.type === "dir" ? (
-              <svg
-                width="11"
-                height="11"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2.4"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            ) : (
-              <span className="h-1.5 w-1.5 rounded-[1.5px] bg-accent" />
-            )}
-            <span className="truncate">{n.name}</span>
+      {nodes.map((n) => {
+        const active = n.type === "file" && n.path === previewPath;
+        return (
+          <div key={n.path}>
+            <div
+              onClick={() => n.type === "file" && openPreview(n.path)}
+              className={`mb-[3px] flex items-center gap-2 px-2 py-[5px] ${
+                n.type === "file"
+                  ? active
+                    ? "cursor-pointer border-2 border-line bg-card-deep text-white"
+                    : "cursor-pointer text-ink-2 hover:bg-base"
+                  : "text-muted"
+              }`}
+              style={{ paddingLeft: 8 + depth * 14 }}
+            >
+              {n.type === "dir" ? (
+                <span className="text-muted-2">▾</span>
+              ) : (
+                <span
+                  className={`h-2 w-2 border-2 ${
+                    active ? "border-white bg-accent" : "border-line bg-muted-2"
+                  }`}
+                />
+              )}
+              <span className="truncate">{n.name}</span>
+            </div>
+            {n.children && <FileTree nodes={n.children} depth={depth + 1} />}
           </div>
-          {n.children && <FileTree nodes={n.children} depth={depth + 1} />}
-        </div>
-      ))}
+        );
+      })}
     </>
   );
 }
diff --git a/frontend/src/panels/PreviewPanel.tsx b/frontend/src/panels/PreviewPanel.tsx
index acca8e3..b7664b6 100644
--- a/frontend/src/panels/PreviewPanel.tsx
+++ b/frontend/src/panels/PreviewPanel.tsx
@@ -18,29 +18,28 @@ export function PreviewPanel() {
   ];
 
   return (
-    <div className="flex w-[452px] flex-none flex-col border-l border-line-soft bg-panel">
+    <div className="flex w-[452px] flex-none flex-col border-l-[3px] border-line bg-panel">
       {/* Onglets */}
-      <div className="flex h-[42px] flex-none items-center gap-1 border-b border-line-soft px-3.5 pr-2">
-        <div className="flex gap-0.5">
-          <Tab active={tab === "preview"} onClick={() => setTab("preview")}>
-            Aperçu
-          </Tab>
-          <Tab active={tab === "code"} onClick={() => setTab("code")}>
-            Code
-          </Tab>
-          <Tab active={tab === "logs"} onClick={() => setTab("logs")}>
-            Logs
-            <span className="ml-1.5 rounded-[5px] bg-line-strong px-1.5 py-px font-mono text-[10px] text-muted">
-              {logs.length}
-            </span>
-          </Tab>
-        </div>
+      <div className="flex h-[46px] flex-none items-center gap-1.5 border-b-[3px] border-line bg-base px-3">
+        <Tab active={tab === "preview"} onClick={() => setTab("preview")}>
+          Aperçu
+        </Tab>
+        <Tab active={tab === "code"} onClick={() => setTab("code")}>
+          Code
+        </Tab>
+        <Tab active={tab === "logs"} onClick={() => setTab("logs")}>
+          Logs
+          <span className="font-pixel ml-1.5 border-2 border-line bg-accent px-1 py-0.5 text-[8px] text-white">
+            {logs.length}
+          </span>
+        </Tab>
       </div>
 
       {/* URL bar */}
-      <div className="flex flex-none items-center gap-2 px-3.5 py-[9px]">
-        <div className="flex h-[30px] flex-1 items-center gap-2 rounded-lg border border-line bg-sunken px-[11px]">
-          <span className="truncate font-mono text-[11.5px] text-muted-3">
+      <div className="flex flex-none items-center gap-2 px-3 py-2.5">
+        <div className="flex h-8 flex-1 items-center gap-2 border-[3px] border-line bg-card px-[11px]">
+          <span className="text-[13px]">🔒</span>
+          <span className="truncate text-[13px] text-muted-2">
             {previewPath ? `workspace/${previewPath}` : "workspace/"}
           </span>
         </div>
@@ -48,25 +47,23 @@ export function PreviewPanel() {
 
       {/* Onglet Logs (fond sombre) */}
       {tab === "logs" ? (
-        <div className="scr mx-3.5 mb-3.5 flex-1 overflow-auto rounded-xl border border-line bg-sunken p-3 font-mono text-[11.5px]">
+        <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-muted-3">
+            <div className="py-10 text-center text-on-dark-3">
               Aucune activité d'outil pour cette session.
             </div>
           ) : (
             logs.map((l, i) => (
               <div
                 key={i}
-                className="flex items-center gap-2 border-b border-line-soft py-[7px] last:border-0"
+                className="flex items-center gap-2 border-b-2 border-chrome-2 py-[7px] last:border-0"
               >
                 <span
                   className={
-                    l.status === "error"
-                      ? "text-warn"
-                      : l.status === "pending"
-                      ? "text-warn"
+                    l.status === "error" || l.status === "pending"
+                      ? "text-accent"
                       : l.status === "running"
-                      ? "text-muted"
+                      ? "text-on-dark-2"
                       : "text-ok"
                   }
                 >
@@ -78,42 +75,42 @@ export function PreviewPanel() {
                     ? "…"
                     : "✓"}
                 </span>
-                <span className="text-ink-2">{l.name}</span>
-                <span className="flex-1 truncate text-muted-3">
+                <span className="text-on-dark">{l.name}</span>
+                <span className="flex-1 truncate text-on-dark-3">
                   {(l.args?.path as string) ??
                     (l.args?.query as string) ??
                     (l.args?.command as string) ??
                     ""}
                 </span>
-                <span className="text-muted-3">{l.summary}</span>
+                <span className="text-on-dark-3">{l.summary}</span>
               </div>
             ))
           )}
         </div>
       ) : (
         /* Viewport Aperçu / Code (fond clair) */
-        <div className="scr mx-3.5 mb-3.5 flex-1 overflow-auto rounded-xl border border-line bg-[#faf6ef]">
+        <div className="scr mx-3 mb-3 flex-1 overflow-auto border-[3px] border-line bg-[#faf6ef] shadow-hard">
           {!previewPath ? (
-          <Empty>
-            L'aperçu s'affichera ici dès que l'agent générera un fichier (clique
-            aussi un fichier à gauche).
-          </Empty>
-        ) : tab === "code" ? (
-          <pre className="m-0 whitespace-pre-wrap p-4 font-mono text-[11.5px] leading-relaxed text-[#2a2018]">
-            {previewContent}
-          </pre>
-        ) : isHtml ? (
-          <iframe
-            title="aperçu"
-            srcDoc={previewContent}
-            className="h-full w-full border-0 bg-white"
-            // allow-scripts : sans ça, le JS de la page générée ne s'exécute pas
-            // (animations, canvas…). On garde une origine opaque (pas
-            // d'allow-same-origin) pour que le script ne puisse pas atteindre Loki.
-            sandbox="allow-scripts"
-          />
+            <Empty>
+              L'aperçu s'affichera ici dès que l'agent générera un fichier (clique
+              aussi un fichier à gauche).
+            </Empty>
+          ) : tab === "code" ? (
+            <pre className="m-0 whitespace-pre-wrap p-4 text-[12px] leading-relaxed text-[#2a2018]">
+              {previewContent}
+            </pre>
+          ) : isHtml ? (
+            <iframe
+              title="aperçu"
+              srcDoc={previewContent}
+              className="h-full w-full border-0 bg-white"
+              // allow-scripts : sans ça, le JS de la page générée ne s'exécute pas
+              // (animations, canvas…). On garde une origine opaque (pas
+              // d'allow-same-origin) pour que le script ne puisse pas atteindre Loki.
+              sandbox="allow-scripts"
+            />
           ) : (
-            <pre className="m-0 whitespace-pre-wrap p-4 font-mono text-[11.5px] leading-relaxed text-[#2a2018]">
+            <pre className="m-0 whitespace-pre-wrap p-4 text-[12px] leading-relaxed text-[#2a2018]">
               {previewContent}
             </pre>
           )}
@@ -126,8 +123,8 @@ export function PreviewPanel() {
 function Empty({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
-      <div className="font-mono text-[11px] text-[#a98b63]">[ aucun aperçu ]</div>
-      <div className="max-w-[240px] text-xs text-[#8a7a66]">{children}</div>
+      <div className="font-pixel text-[10px] text-[#a98b63]">AUCUN APERÇU</div>
+      <div className="max-w-[240px] text-[13px] text-[#8a7a66]">{children}</div>
     </div>
   );
 }
@@ -144,10 +141,8 @@ function Tab({
   return (
     <button
       onClick={onClick}
-      className={`flex h-7 items-center rounded-lg px-[13px] text-[12.5px] ${
-        active
-          ? "bg-[#252019] font-semibold text-ink"
-          : "font-medium text-muted-2"
+      className={`flex h-[30px] items-center border-[3px] border-line px-[13px] text-[13px] ${
+        active ? "bg-card-deep text-white" : "bg-card text-muted"
       }`}
     >
       {children}
diff --git a/frontend/src/panels/SettingsView.tsx b/frontend/src/panels/SettingsView.tsx
index e570a7c..e3b1d53 100644
--- a/frontend/src/panels/SettingsView.tsx
+++ b/frontend/src/panels/SettingsView.tsx
@@ -13,7 +13,7 @@ const TOOL_DESC: Record<string, string> = {
 };
 const SENSITIVE = new Set(["run_shell"]);
 
-/** Vue Configuration (Frame 2) — Modèle & génération, outils, invite système. */
+/** Vue Configuration — Modèle & génération, outils, invite système. */
 export function SettingsView() {
   const {
     models,
@@ -27,7 +27,6 @@ export function SettingsView() {
     updateConfig,
   } = useStore();
 
-  // Brouillon local édité, synchronisé depuis la config serveur.
   const [draft, setDraft] = useState<AgentConfig | null>(config);
   const [saved, setSaved] = useState(false);
 
@@ -76,47 +75,50 @@ export function SettingsView() {
     : 0;
 
   return (
-    <div className="scr flex-1 overflow-auto px-[30px] py-[26px]">
+    <div className="scr flex-1 overflow-auto bg-base px-[30px] py-[26px]">
       <div className="mx-auto max-w-[1000px]">
         {/* En-tête */}
         <div className="mb-[22px] flex items-end justify-between">
           <div>
-            <div className="text-xl font-bold tracking-tight">
-              Modèle &amp; génération
+            <div className="font-pixel text-[13px] text-ink">
+              MODÈLE &amp; GÉNÉRATION
             </div>
-            <div className="mt-1 text-[13px] text-muted-2">
+            <div className="mt-2 text-[14px] text-muted-2">
               Choisis le modèle local et règle son comportement.
             </div>
           </div>
           <div className="flex items-center gap-3">
-            <div className="flex items-center gap-1.5 font-mono text-[11.5px] text-ok">
-              <span className="h-1.5 w-1.5 rounded-full bg-ok" />
+            <div className="flex items-center gap-1.5 text-[13px] text-ok">
+              <span className="h-2 w-2 border-2 border-line bg-ok" />
               {status?.connected ? "Ollama connecté" : "Ollama déconnecté"}
             </div>
             <button
               onClick={save}
               disabled={!dirty}
-              className="flex h-[30px] items-center gap-1.5 rounded-lg bg-accent px-3.5 text-[12.5px] font-bold text-[#1f1b16] disabled:opacity-40"
+              className="flex h-[34px] items-center gap-1.5 border-[3px] border-line bg-accent px-4 text-[14px] text-white shadow-accent-soft disabled:opacity-40"
+              style={{ borderRadius: 7 }}
             >
-              {saved ? "Enregistré ✓" : dirty ? "Enregistrer" : "À jour"}
+              {saved ? "✓ ENREGISTRÉ" : dirty ? "ENREGISTRER" : "À JOUR"}
             </button>
           </div>
         </div>
 
         {!draft ? (
-          <div className="py-20 text-center text-muted-3">
+          <div className="py-20 text-center text-muted-2">
             Chargement de la configuration…
           </div>
         ) : (
           <>
-            <div className="grid grid-cols-2 items-start gap-5">
+            <div className="grid grid-cols-2 items-start gap-[18px]">
               {/* Modèle Ollama */}
-              <div className="rounded-card border border-line bg-card p-[18px]">
+              <Card>
                 <div className="mb-3.5 flex items-center justify-between">
-                  <div className="text-sm font-bold">Modèle Ollama</div>
+                  <div className="font-pixel text-[11px] text-ink">
+                    MODÈLE OLLAMA
+                  </div>
                   <button
                     onClick={refreshModels}
-                    className="flex h-[26px] items-center gap-1.5 rounded-[7px] border border-line-strong bg-base px-2.5 text-[11px] text-muted"
+                    className="flex h-7 items-center gap-1.5 border-2 border-line bg-card-soft px-2.5 text-[13px] text-muted-2"
                   >
                     <RefreshIcon size={12} />
                     Actualiser
@@ -125,7 +127,7 @@ export function SettingsView() {
 
                 <div className="flex flex-col gap-2">
                   {models.length === 0 && (
-                    <div className="rounded-[11px] border border-line bg-base p-4 text-center text-xs text-muted-3">
+                    <div className="border-2 border-line bg-base p-4 text-center text-[13px] text-muted-2">
                       Aucun modèle installé. Télécharge-en un ci-dessous.
                     </div>
                   )}
@@ -135,33 +137,33 @@ export function SettingsView() {
                       <button
                         key={m.name}
                         onClick={() => setSelectedModel(m.name)}
-                        className="flex items-center gap-3 rounded-[11px] border p-3 text-left"
-                        style={{
-                          background: on ? "rgba(240,161,92,.10)" : "#1a1714",
-                          borderColor: on ? "rgba(240,161,92,.40)" : "#2c2720",
-                        }}
+                        className={`flex items-center gap-3 border-[3px] border-line p-3 text-left ${
+                          on ? "bg-card-deep" : "bg-card-soft"
+                        }`}
                       >
                         <span
-                          className="flex h-[18px] w-[18px] items-center justify-center rounded-full border-2"
-                          style={{ borderColor: on ? "#f0a15c" : "#4a443b" }}
+                          className={`flex h-[18px] w-[18px] flex-none items-center justify-center border-[3px] ${
+                            on ? "border-accent" : "border-muted-3"
+                          }`}
                         >
-                          {on && <span className="h-2 w-2 rounded-full bg-accent" />}
+                          {on && <span className="h-2 w-2 bg-accent" />}
                         </span>
                         <div className="flex-1">
                           <div className="flex items-center gap-2">
-                            <span className="font-mono text-[13px] font-semibold text-ink">
+                            <span
+                              className={`text-[14px] ${on ? "text-white" : "text-ink"}`}
+                            >
                               {m.name}
                             </span>
                             {m.name === status?.default_model && (
-                              <span
-                                className="rounded-[5px] px-1.5 py-px text-[10px] font-bold text-accent"
-                                style={{ background: "rgba(240,161,92,.14)" }}
-                              >
-                                PAR DÉFAUT
+                              <span className="font-pixel border-2 border-white bg-accent px-1.5 py-0.5 text-[7px] text-white">
+                                DÉFAUT
                               </span>
                             )}
                           </div>
-                          <div className="mt-[3px] font-mono text-[10.5px] text-muted-2">
+                          <div
+                            className={`mt-1 text-[13px] ${on ? "text-on-dark-2" : "text-muted-2"}`}
+                          >
                             {[
                               m.size_go ? `${m.size_go} Go` : null,
                               m.quantization,
@@ -177,21 +179,21 @@ export function SettingsView() {
                   })}
                 </div>
 
-                <div className="my-4 h-px bg-line" />
+                <div className="my-4 h-[3px] bg-line" />
 
-                <div className="mb-2.5 text-[11px] font-bold uppercase tracking-[.05em] text-label">
-                  Télécharger un modèle
+                <div className="font-pixel mb-2.5 text-[10px] text-label">
+                  TÉLÉCHARGER
                 </div>
                 <div className="mb-3 flex gap-2">
                   <input
                     value={pullName}
                     onChange={(e) => setPullName(e.target.value)}
                     placeholder="gemma2:9b"
-                    className="h-[34px] flex-1 rounded-[9px] border border-line-strong bg-base px-3 font-mono text-xs text-ink outline-none placeholder:text-muted-3"
+                    className="h-9 flex-1 border-[3px] border-line bg-card-soft px-3 text-[13px] text-ink outline-none placeholder:text-muted-3"
                   />
                   <button
                     onClick={doPull}
-                    className="flex h-[34px] items-center gap-1.5 rounded-[9px] border border-line-strong bg-[#2a251f] px-3.5 text-[12.5px] font-semibold text-[#e7ddcd]"
+                    className="flex h-9 items-center gap-1.5 border-[3px] border-line bg-card-deep px-3.5 text-[13px] text-white"
                   >
                     <DownloadIcon />
                     Récupérer
@@ -199,32 +201,28 @@ export function SettingsView() {
                 </div>
 
                 {pullStatus && (
-                  <div className="rounded-[10px] border border-line bg-base p-3">
+                  <div className="border-[3px] border-line bg-card-soft p-3">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="font-mono text-xs text-ink-2">
-                        {pullName}
-                      </span>
-                      <span className="font-mono text-[11px] text-accent">
+                      <span className="text-[13px] text-ink-2">{pullName}</span>
+                      <span className="text-[13px] text-accent">
                         {pullStatus} {pullPct ? `· ${pullPct}%` : ""}
                       </span>
                     </div>
-                    <div className="h-1.5 overflow-hidden rounded bg-line">
-                      <div
-                        className="h-full rounded bg-accent-grad transition-all"
+                    <div className="flex h-3.5 gap-px border-2 border-line bg-card p-px">
+                      <span
+                        className="bg-accent transition-all"
                         style={{ width: `${pullPct}%` }}
                       />
                     </div>
                   </div>
                 )}
-              </div>
+              </Card>
 
               {/* Génération + Outils */}
-              <div className="flex flex-col gap-5">
-                <div className="rounded-card border border-line bg-card p-[18px]">
-                  <div className="mb-1 text-sm font-bold">Génération</div>
-                  <div className="mb-4 text-[11.5px] text-muted-2">
-                    Profil enregistré pour <b>{selectedModel || "ce modèle"}</b>.
-                    Le contexte détermine directement la taille du cache KV.
+              <div className="flex flex-col gap-[18px]">
+                <Card>
+                  <div className="font-pixel mb-4 text-[11px] text-ink">
+                    GÉNÉRATION
                   </div>
 
                   <Slider
@@ -291,17 +289,16 @@ export function SettingsView() {
                     onChange={(v) => set("num_batch", Math.round(v))}
                     last
                   />
-                  <div className="mt-3 rounded-lg border border-line-soft bg-base px-3 py-2 text-[11px] leading-relaxed text-muted-2">
+                  <div className="mt-3 border-2 border-line bg-card-soft px-3 py-2 text-[12px] leading-relaxed text-muted-2">
                     La précision KV (<code>f16</code>/<code>q8_0</code>) est un
                     réglage global du serveur Ollama et nécessite son redémarrage.
-                    Les valeurs ci-dessus sont, elles, propres à chaque modèle.
                   </div>
-                </div>
+                </Card>
 
-                <div className="rounded-card border border-line bg-card p-[18px]">
+                <Card>
                   <div className="mb-3.5 flex items-center justify-between">
-                    <div className="text-sm font-bold">Outils de l'agent</div>
-                    <span className="font-mono text-[11px] text-muted-2">
+                    <div className="font-pixel text-[11px] text-ink">OUTILS</div>
+                    <span className="text-[13px] text-muted-2">
                       {activeTools} / {availableTools.length} actifs
                     </span>
                   </div>
@@ -310,68 +307,47 @@ export function SettingsView() {
                     return (
                       <div
                         key={name}
-                        className={`flex items-center gap-3 py-[9px] ${
-                          i > 0 ? "border-t border-line-soft" : ""
+                        className={`flex items-center gap-3 py-2 ${
+                          i > 0 ? "border-t-2 border-line-soft" : ""
                         }`}
                       >
-                        <span className="w-32 flex-none font-mono text-[12.5px] text-ink-2">
+                        <span
+                          className={`w-32 flex-none text-[14px] ${on ? "text-ink" : "text-muted-3"}`}
+                        >
                           {name}
                         </span>
-                        <span className="flex-1 text-xs text-muted-2">
+                        <span className="flex-1 text-[13px] text-muted-2">
                           {TOOL_DESC[name] ?? ""}
                           {SENSITIVE.has(name) && (
-                            <span className="text-warn"> · sensible</span>
+                            <span className="text-accent"> · sensible</span>
                           )}
                         </span>
-                        <button
-                          onClick={() =>
-                            set("tools", { ...draft.tools, [name]: !on })
-                          }
-                          className="relative h-5 w-[34px] rounded-full transition-colors"
-                          style={{ background: on ? "#f0a15c" : "#3a342c" }}
-                        >
-                          <span
-                            className="absolute top-0.5 h-4 w-4 rounded-full transition-all"
-                            style={{
-                              background: on ? "#1f1b16" : "#6f675c",
-                              left: on ? 16 : 2,
-                            }}
-                          />
-                        </button>
+                        <Toggle on={on} onClick={() => set("tools", { ...draft.tools, [name]: !on })} />
                       </div>
                     );
                   })}
                   {draft.tools.run_shell && (
-                    <div className="mt-2 flex items-center gap-3 rounded-[10px] border border-line-soft bg-base px-3 py-2.5">
-                      <span className="flex-1 text-xs text-ink-3">
+                    <div className="mt-2 flex items-center gap-3 border-2 border-line bg-base px-3 py-2.5">
+                      <span className="flex-1 text-[13px] text-ink-2">
                         Demander une validation avant chaque commande shell
                       </span>
-                      <button
+                      <Toggle
+                        on={draft.confirm_shell}
                         onClick={() => set("confirm_shell", !draft.confirm_shell)}
-                        className="relative h-5 w-[34px] rounded-full transition-colors"
-                        style={{
-                          background: draft.confirm_shell ? "#f0a15c" : "#3a342c",
-                        }}
-                      >
-                        <span
-                          className="absolute top-0.5 h-4 w-4 rounded-full transition-all"
-                          style={{
-                            background: draft.confirm_shell ? "#1f1b16" : "#6f675c",
-                            left: draft.confirm_shell ? 16 : 2,
-                          }}
-                        />
-                      </button>
+                      />
                     </div>
                   )}
-                </div>
+                </Card>
               </div>
             </div>
 
             {/* Invite système */}
-            <div className="mt-5 rounded-card border border-line bg-card p-[18px]">
+            <Card className="mt-[18px]">
               <div className="mb-3 flex items-center justify-between">
-                <div className="text-sm font-bold">Invite système</div>
-                <span className="font-mono text-[11px] text-muted-2">
+                <div className="font-pixel text-[11px] text-ink">
+                  INVITE SYSTÈME
+                </div>
+                <span className="text-[13px] text-muted-2">
                   {draft.system_prompt.length} caractères
                 </span>
               </div>
@@ -379,9 +355,9 @@ export function SettingsView() {
                 value={draft.system_prompt}
                 onChange={(e) => set("system_prompt", e.target.value)}
                 rows={6}
-                className="scr w-full resize-y rounded-[10px] border border-line bg-sunken p-4 font-mono text-[12.5px] leading-[1.7] text-ink-3 outline-none focus:border-line-strong"
+                className="scr w-full resize-y border-[3px] border-line bg-card-deep p-4 text-[13px] leading-[1.6] text-on-dark outline-none"
               />
-            </div>
+            </Card>
           </>
         )}
       </div>
@@ -389,6 +365,40 @@ export function SettingsView() {
   );
 }
 
+function Card({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`border-[3px] border-line bg-card p-4 shadow-hard-lg ${className}`}
+      style={{ borderRadius: 9 }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`relative h-5 w-[38px] flex-none ${
+        on ? "bg-card-deep" : "border-2 border-line bg-base"
+      }`}
+    >
+      <span
+        className={`absolute h-3.5 w-3.5 ${
+          on ? "right-0.5 top-0.5 bg-accent" : "left-0.5 top-[3px] bg-muted-3"
+        }`}
+      />
+    </button>
+  );
+}
+
 function Slider({
   label,
   value,
@@ -410,25 +420,20 @@ function Slider({
 }) {
   const pct = ((value - min) / (max - min)) * 100;
   return (
-    <div className={last ? "" : "mb-4"}>
-      <div className="mb-2 flex items-center justify-between">
+    <div className={last ? "" : "mb-[15px]"}>
+      <div className="mb-[7px] flex items-center justify-between">
         <span className="text-[13px] text-ink-2">{label}</span>
-        <span className="font-mono text-xs font-semibold text-accent">
-          {fmt(value)}
-        </span>
+        <span className="text-[13px] text-accent">{fmt(value)}</span>
       </div>
-      <div className="relative h-4">
-        {/* Piste + remplissage + pouce (visuel fidèle) */}
-        <div className="absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded bg-line" />
+      <div className="relative h-[14px] border-2 border-line bg-card">
         <div
-          className="absolute top-1/2 h-1.5 -translate-y-1/2 rounded bg-accent"
+          className="absolute left-0 top-0 bottom-0 bg-line"
           style={{ width: `${pct}%` }}
         />
         <div
-          className="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-[3px] border-card bg-accent"
+          className="absolute top-1/2 h-5 w-4 -translate-x-1/2 -translate-y-1/2 border-[3px] border-line bg-accent"
           style={{ left: `${pct}%` }}
         />
-        {/* Input réel transparent par-dessus */}
         <input
           type="range"
           min={min}
diff --git a/frontend/src/store/useStore.ts b/frontend/src/store/useStore.ts
index 090494b..d23361f 100644
--- a/frontend/src/store/useStore.ts
+++ b/frontend/src/store/useStore.ts
@@ -32,6 +32,7 @@ interface LokiState {
   messages: Message[];
   streaming: boolean;
   streamContent: string; // réponse de l'agent en cours de frappe
+  streamThinking: string; // raisonnement de l'agent en cours
   streamStatus: string;
   streamNotice: string | null;
   streamTools: ToolCall[]; // appels d'outils de la réponse en cours
@@ -73,6 +74,7 @@ export const useStore = create<LokiState>((set, get) => ({
   messages: [],
   streaming: false,
   streamContent: "",
+  streamThinking: "",
   streamStatus: "",
   streamNotice: null,
   streamTools: [],
@@ -250,6 +252,7 @@ export const useStore = create<LokiState>((set, get) => ({
       messages: [...get().messages, userMsg],
       streaming: true,
       streamContent: "",
+      streamThinking: "",
       streamStatus: "Connexion à Ollama…",
       streamNotice: null,
       streamTools: [],
@@ -260,6 +263,7 @@ export const useStore = create<LokiState>((set, get) => ({
       { session_id: sid, content, model: get().selectedModel || undefined },
       {
         onToken: (t) => set({ streamContent: get().streamContent + t }),
+        onThinking: (t) => set({ streamThinking: get().streamThinking + t }),
         onStatus: (message) => set({ streamStatus: message }),
         onNotice: (message) => set({ streamNotice: message }),
         onToolCall: (call) =>
@@ -289,6 +293,7 @@ export const useStore = create<LokiState>((set, get) => ({
           set({
             streaming: false,
             streamContent: "",
+            streamThinking: "",
             streamStatus: "",
             streamNotice: null,
             streamTools: [],
@@ -310,6 +315,7 @@ export const useStore = create<LokiState>((set, get) => ({
           set({
             streaming: false,
             streamContent: "",
+            streamThinking: "",
             streamStatus: "",
             streamNotice: null,
             streamTools: [],
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index fab225f..232ffb4 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,8 +1,9 @@
 import type { Config } from "tailwindcss";
 
 /**
- * Système de design « Loki » — extrait fidèlement du visuel Atelier_Agent.
- * Thème sombre chaleureux (café / ambre).
+ * Système de design « Loki » — thème néo-brutaliste clair.
+ * Bordures noires épaisses, ombres dures décalées, accent orange,
+ * police pixel (Press Start 2P) pour les libellés, DM Mono pour le corps.
  */
 export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
@@ -10,48 +11,60 @@ export default {
     extend: {
       colors: {
         // Fonds
-        base: "#1a1714",
-        bar: "#1d1a15",
-        panel: "#1c1814",
-        sunken: "#161310",
+        base: "#ececef", // contenu principal
+        bar: "#18181b", // chrome sombre (barres)
+        panel: "#fafafa", // panneaux latéraux
+        sunken: "#18181b", // encarts sombres (code, invite système)
         // Surfaces / cartes
-        card: "#211d18",
-        "card-soft": "#221e18",
-        "card-deep": "#1f1b16",
+        card: "#ffffff",
+        "card-soft": "#fafafa",
+        "card-deep": "#18181b",
         // Bordures
-        line: "#2c2720",
-        "line-soft": "#262219",
-        "line-strong": "#322d26",
-        // Accent ambre
-        accent: "#f0a15c",
-        "accent-1": "#f4ad6c",
-        "accent-2": "#df7c4c",
+        line: "#18181b", // bordure noire signature
+        "line-soft": "#e4e4e7", // séparateur clair
+        "line-strong": "#18181b",
+        // Accent orange
+        accent: "#ff5436",
+        "accent-1": "#ff6b50",
+        "accent-2": "#e23e22",
         // Statuts
-        ok: "#86c79a",
-        info: "#5b8fb0",
-        warn: "#c98b5b",
-        // Textes
-        ink: "#efe9df",
-        "ink-2": "#cfc5b6",
-        "ink-3": "#bdb3a4",
-        muted: "#9a9082",
-        "muted-2": "#8a8175",
-        "muted-3": "#766d60",
-        "muted-4": "#6a6256",
-        label: "#7a7164",
+        ok: "#22c55e",
+        info: "#3b82f6",
+        warn: "#dc2626",
+        // Textes (sombres sur fond clair)
+        ink: "#18181b",
+        "ink-2": "#27272a",
+        "ink-3": "#3f3f46",
+        muted: "#52525b",
+        "muted-2": "#71717a",
+        "muted-3": "#a1a1aa",
+        "muted-4": "#a1a1aa",
+        label: "#52525b",
+        // Teintes claires utiles sur le chrome sombre
+        "chrome-2": "#27272a",
+        "chrome-3": "#3f3f46",
+        "on-dark": "#e4e4e7",
+        "on-dark-2": "#a1a1aa",
+        "on-dark-3": "#71717a",
       },
       fontFamily: {
-        sans: ['"Hanken Grotesk"', "system-ui", "sans-serif"],
-        mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
+        sans: ['"DM Mono"', "ui-monospace", "monospace"],
+        mono: ['"DM Mono"', "ui-monospace", "monospace"],
+        pixel: ['"Press Start 2P"', "ui-monospace", "monospace"],
       },
       borderRadius: {
-        card: "14px",
+        card: "9px",
       },
       boxShadow: {
-        frame: "0 24px 60px rgba(0,0,0,.35)",
+        "hard-sm": "3px 3px 0 #18181b",
+        hard: "4px 4px 0 #18181b",
+        "hard-lg": "7px 7px 0 #18181b",
+        "hard-accent": "3px 3px 0 #ff5436",
+        "accent-soft": "3px 3px 0 rgba(255,84,54,.4)",
+        frame: "4px 4px 0 #18181b",
       },
       backgroundImage: {
-        "accent-grad": "linear-gradient(140deg, #f4ad6c, #df7c4c)",
+        "accent-grad": "linear-gradient(140deg, #ff6b50, #e23e22)",
       },
     },
   },