Phases 5 & 8 : onglet Logs, durcissement Docker et documentation

Phase 5 (fin) :
- PreviewPanel : onglet Logs (journal d'activité des outils de la session,
  compteur dynamique, statuts ✓/✕/⏸/…)

Phase 8 :
- .dockerignore
- Dockerfile : utilisateur non-root (uid 10001), HEALTHCHECK via curl, dossiers
  de runtime détenus par l'utilisateur
- docker-compose : healthcheck, variable SEARX_URL optionnelle
- .env.example : SEARX_URL
- README : sections Utilisation, Outils de l'agent, Sécurité (confinement,
  validation run_shell, non-root) ; feuille de route complète

Validation : config docker compose OK ; build d'image non exécutable ici
(démon Docker absent de l'environnement).

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

frontend/src/panels/PreviewPanel.tsx

@@ -1,15 +1,22 @@
 import { useState } from "react";
 import { useStore } from "../store/useStore";
+import type { ToolCall } from "../api/client";
 
-type TabId = "preview" | "code";
+type TabId = "preview" | "code" | "logs";
 
-/** Panneau droit : onglets Aperçu / Code + rendu du fichier sélectionné. */
+/** Panneau droit : onglets Aperçu / Code / Logs. */
 export function PreviewPanel() {
-  const { previewPath, previewContent } = useStore();
+  const { previewPath, previewContent, messages, streamTools } = useStore();
   const [tab, setTab] = useState<TabId>("preview");
 
   const isHtml = previewPath ? /\.html?$/.test(previewPath) : false;
 
+  // Journal d'activité : tous les appels d'outils de la session + en cours.
+  const logs: ToolCall[] = [
+    ...messages.flatMap((m) => m.meta?.tools ?? []),
+    ...streamTools,
+  ];
+
   return (
     <div className="flex w-[452px] flex-none flex-col border-l border-line-soft bg-panel">
       {/* Onglets */}
@@ -21,6 +28,12 @@ export function PreviewPanel() {
           <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>
 
@@ -33,9 +46,54 @@ export function PreviewPanel() {
         </div>
       </div>
 
-      {/* Viewport */}
-      <div className="scr mx-3.5 mb-3.5 flex-1 overflow-auto rounded-xl border border-line bg-[#faf6ef]">
-        {!previewPath ? (
+      {/* 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]">
+          {logs.length === 0 ? (
+            <div className="py-10 text-center text-muted-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"
+              >
+                <span
+                  className={
+                    l.status === "error"
+                      ? "text-warn"
+                      : l.status === "pending"
+                      ? "text-warn"
+                      : l.status === "running"
+                      ? "text-muted"
+                      : "text-ok"
+                  }
+                >
+                  {l.status === "error"
+                    ? "✕"
+                    : l.status === "pending"
+                    ? "⏸"
+                    : l.status === "running"
+                    ? "…"
+                    : "✓"}
+                </span>
+                <span className="text-ink-2">{l.name}</span>
+                <span className="flex-1 truncate text-muted-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>
+              </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]">
+          {!previewPath ? (
           <Empty>
             L'aperçu s'affichera ici dès que l'agent générera un fichier (clique
             aussi un fichier à gauche).
@@ -51,12 +109,13 @@ export function PreviewPanel() {
             className="h-full w-full border-0 bg-white"
             sandbox="allow-same-origin"
           />
-        ) : (
-          <pre className="m-0 whitespace-pre-wrap p-4 font-mono text-[11.5px] leading-relaxed text-[#2a2018]">
-            {previewContent}
-          </pre>
-        )}
-      </div>
+          ) : (
+            <pre className="m-0 whitespace-pre-wrap p-4 font-mono text-[11.5px] leading-relaxed text-[#2a2018]">
+              {previewContent}
+            </pre>
+          )}
+        </div>
+      )}
     </div>
   );
 }