Navigation : Discussion + discussions récentes, Fichiers passe en onglet

Le remaniement précédent avait supprimé le panneau de sessions, et avec
lui le seul bouton pour démarrer une discussion.

- « Demander » devient « Discussion », avec en dessous le bouton
  « + Nouvelle discussion » et les 5 discussions les plus récentes,
  cliquables (point accent sur celle qui travaille).
- « Fichiers » quitte la barre latérale pour devenir un onglet du
  panneau droit, à côté de Code. L'arborescence est extraite en
  composant FileTree réutilisable.
- Nettoyage du code devenu mort : LeftPanel, FilesView, WorkspaceTree,
  formatSize et la vue « files ».

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

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { TopBar } from "./components/TopBar";
 import { ChatPanel } from "./panels/ChatPanel";
 import { PreviewPanel } from "./panels/PreviewPanel";
 import { SettingsView } from "./panels/SettingsView";
-import { FilesView, HistoryView, ToolsView } from "./panels/ActivityViews";
+import { HistoryView, ToolsView } from "./panels/ActivityViews";
 import { useStore } from "./store/useStore";
 
 export default function App() {
@@ -65,12 +65,6 @@ export default function App() {
           </>
         )}
         {view === "history" && <HistoryView onOpen={() => setView("chat")} />}
-        {view === "files" && (
-          <>
-            <FilesView />
-            <PreviewPanel />
-          </>
-        )}
         {view === "tools" && <ToolsView onSettings={() => setView("settings")} />}
         {view === "settings" && <SettingsView />}
       </div>

frontend/src/components/FileTree.tsx

@@ -0,0 +1,79 @@
+import { useStore } from "../store/useStore";
+import { downloadFile, type FileNode } from "../api/client";
+import { DownloadIcon, TrashIcon } from "./Icon";
+
+/** Arborescence du workspace : ouvrir dans l'aperçu, télécharger, supprimer. */
+export function FileTree({
+  nodes,
+  depth = 0,
+}: {
+  nodes: FileNode[];
+  depth?: number;
+}) {
+  const { openPreview, previewPath, removeFile, currentProject } = useStore();
+
+  const confirmDelete = (n: FileNode) => {
+    const msg =
+      n.type === "dir"
+        ? `Supprimer le dossier ${n.path} et tout son contenu ?`
+        : `Supprimer ${n.path} ?`;
+    if (window.confirm(msg)) void removeFile(n.path);
+  };
+
+  return (
+    <>
+      {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={`group mb-[2px] flex items-center gap-2 rounded-card px-2 py-[5px] text-[13.5px] ${
+                n.type === "file"
+                  ? active
+                    ? "cursor-pointer border border-accent-line bg-accent-ghost text-ink"
+                    : "cursor-pointer border border-transparent text-ink-3 hover:bg-accent-ghost"
+                  : "text-muted-2"
+              }`}
+              style={{ paddingLeft: 8 + depth * 14 }}
+            >
+              {n.type === "dir" ? (
+                <span className="text-muted-3">▾</span>
+              ) : (
+                <span
+                  className={`h-1.5 w-1.5 rounded-sm ${
+                    active ? "bg-accent" : "bg-muted-3"
+                  }`}
+                />
+              )}
+              <span className="min-w-0 flex-1 truncate">{n.name}</span>
+              {n.type === "file" && (
+                <button
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    downloadFile(n.path, currentProject());
+                  }}
+                  className="hidden flex-none text-muted-3 hover:text-accent group-hover:block"
+                  title={`Télécharger ${n.name}`}
+                >
+                  <DownloadIcon size={13} />
+                </button>
+              )}
+              <button
+                onClick={(event) => {
+                  event.stopPropagation();
+                  confirmDelete(n);
+                }}
+                className="hidden flex-none text-muted-3 hover:text-warn group-hover:block"
+                title={`Supprimer ${n.name}`}
+              >
+                <TrashIcon size={13} />
+              </button>
+            </div>
+            {n.children && <FileTree nodes={n.children} depth={depth + 1} />}
+          </div>
+        );
+      })}
+    </>
+  );
+}

frontend/src/components/Sidebar.tsx

@@ -2,21 +2,25 @@ import { useStore } from "../store/useStore";
 import {
   ChatIcon,
   ClockIcon,
-  FilesIcon,
   LokiMark,
   NodesIcon,
+  PlusIcon,
   SettingsIcon,
 } from "./Icon";
 
-export type View = "chat" | "history" | "files" | "tools" | "settings";
+export type View = "chat" | "history" | "tools" | "settings";
 
+// Les fichiers ne sont plus une vue : ils vivent dans l'onglet « Fichiers »
+// du panneau droit, à côté de Code.
 const NAV: { id: View; label: string; icon: React.ReactNode }[] = [
-  { id: "chat", label: "Demander", icon: <ChatIcon /> },
+  { id: "chat", label: "Discussion", icon: <ChatIcon /> },
   { id: "history", label: "Historique", icon: <ClockIcon /> },
-  { id: "files", label: "Fichiers", icon: <FilesIcon /> },
   { id: "tools", label: "Outils", icon: <NodesIcon /> },
 ];
 
+/** Nombre de discussions récentes listées sous « Discussion ». */
+const RECENT = 5;
+
 /** Barre latérale (264 px) : marque, navigation, état Ollama, compte. */
 export function Sidebar({
   active,
@@ -25,8 +29,28 @@ export function Sidebar({
   active: View;
   onChange: (v: View) => void;
 }) {
-  const { status, selectedModel, systemStats } = useStore();
+  const {
+    status,
+    selectedModel,
+    systemStats,
+    sessions,
+    currentSessionId,
+    streamingSessionId,
+    newSession,
+    openSession,
+  } = useStore();
   const gpu = systemStats?.gpu ?? null;
+  const recent = sessions.slice(0, RECENT);
+
+  const startChat = () => {
+    void newSession();
+    onChange("chat");
+  };
+
+  const pick = (id: string) => {
+    void openSession(id);
+    onChange("chat");
+  };
 
   return (
     <aside className="flex w-[264px] flex-none flex-col border-r border-line bg-panel px-3.5 py-4">
@@ -42,7 +66,48 @@ export function Sidebar({
       <div className="mx-1.5 mb-3.5 h-px bg-line" />
 
       <nav className="flex flex-col gap-[3px]">
-        {NAV.map((it) => (
+        <NavItem
+          id="chat"
+          label={NAV[0].label}
+          icon={NAV[0].icon}
+          active={active === "chat"}
+          onClick={() => onChange("chat")}
+        />
+
+        {/* Discussions récentes, directement sous « Discussion ». */}
+        <div className="mb-1 ml-2 flex flex-col gap-px border-l border-line pl-2">
+          <button
+            onClick={startChat}
+            className="flex items-center gap-1.5 rounded-card px-2 py-1.5 text-left text-[13px] text-accent hover:bg-accent-ghost"
+          >
+            <PlusIcon />
+            Nouvelle discussion
+          </button>
+          {recent.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => pick(s.id)}
+              title={s.title}
+              className={`flex items-center gap-1.5 truncate rounded-card px-2 py-1.5 text-left text-[13px] ${
+                s.id === currentSessionId
+                  ? "bg-accent-ghost text-ink"
+                  : "text-muted hover:bg-accent-ghost hover:text-ink"
+              }`}
+            >
+              <span className="min-w-0 flex-1 truncate">{s.title}</span>
+              {s.id === streamingSessionId && (
+                <span className="h-1.5 w-1.5 flex-none rounded-full bg-accent" />
+              )}
+            </button>
+          ))}
+          {recent.length === 0 && (
+            <span className="px-2 py-1.5 text-[12.5px] text-muted-3">
+              Aucune discussion
+            </span>
+          )}
+        </div>
+
+        {NAV.slice(1).map((it) => (
           <NavItem
             key={it.id}
             {...it}

frontend/src/panels/ActivityViews.tsx

@@ -1,6 +1,4 @@
 import { useEffect } from "react";
-import { downloadFile, type FileNode } from "../api/client";
-import { DownloadIcon, TrashIcon } from "../components/Icon";
 import { useStore } from "../store/useStore";
 
 export function HistoryView({ onOpen }: { onOpen: () => void }) {
@@ -44,77 +42,6 @@ export function HistoryView({ onOpen }: { onOpen: () => void }) {
   );
 }
 
-export function FilesView() {
-  const { fileTree, refreshFiles } = useStore();
-
-  useEffect(() => {
-    refreshFiles();
-  }, [refreshFiles]);
-
-  return (
-    <Page title="Fichiers" subtitle="Workspace créé et modifié par l’agent.">
-      <div className="border border-line bg-panel p-3 shadow-hard">
-        {fileTree.length ? <WorkspaceTree nodes={fileTree} depth={0} /> : <Empty text="Le workspace est vide." />}
-      </div>
-    </Page>
-  );
-}
-
-function WorkspaceTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
-  const { openPreview, previewPath, removeFile, currentProject } = useStore();
-  const confirmDelete = (node: FileNode) => {
-    const msg =
-      node.type === "dir"
-        ? `Supprimer le dossier ${node.path} et tout son contenu ?`
-        : `Supprimer ${node.path} ?`;
-    if (window.confirm(msg)) void removeFile(node.path);
-  };
-  return (
-    <>
-      {nodes.map((node) => (
-        <div key={node.path}>
-          <div
-            className={`mb-1 flex items-center gap-2 border px-3 py-2 ${
-              node.path === previewPath
-                ? "border-accent bg-card-deep text-ink"
-                : "border-line bg-card text-ink-2"
-            }`}
-            style={{ marginLeft: depth * 18 }}
-          >
-            <button
-              onClick={() => node.type === "file" && openPreview(node.path)}
-              className="flex min-w-0 flex-1 items-center gap-2 text-left"
-            >
-              <span>{node.type === "dir" ? "▾" : "▪"}</span>
-              <span className="truncate">{node.name}</span>
-              {node.size !== undefined && (
-                <span className="ml-auto text-[11px] text-muted-2">{formatSize(node.size)}</span>
-              )}
-            </button>
-            {node.type === "file" && (
-              <button
-                onClick={() => downloadFile(node.path, currentProject())}
-                className="flex items-center gap-1 border border-line bg-base px-2 py-1 text-[11px] text-accent"
-                title={`Télécharger ${node.name}`}
-              >
-                <DownloadIcon size={12} /> Télécharger
-              </button>
-            )}
-            <button
-              onClick={() => confirmDelete(node)}
-              className="flex items-center gap-1 border border-line bg-base px-2 py-1 text-[11px] text-warn"
-              title={`Supprimer ${node.name}`}
-            >
-              <TrashIcon size={12} /> Supprimer
-            </button>
-          </div>
-          {node.children && <WorkspaceTree nodes={node.children} depth={depth + 1} />}
-        </div>
-      ))}
-    </>
-  );
-}
-
 export function ToolsView({ onSettings }: { onSettings: () => void }) {
   const { config, availableTools, refreshConfig, selectedModel } = useStore();
 
@@ -165,8 +92,3 @@ function Empty({ text }: { text: string }) {
   return <div className="border border-line bg-card p-8 text-center text-muted-2">{text}</div>;
 }
 
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} o`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} Ko`;
-  return `${(bytes / 1024 / 1024).toFixed(1)} Mo`;
-}

frontend/src/panels/LeftPanel.tsx

@@ -1,185 +0,0 @@
-import { useEffect } from "react";
-import { useStore } from "../store/useStore";
-import { DownloadIcon, PlusIcon, TrashIcon } from "../components/Icon";
-import { downloadFile, type FileNode } from "../api/client";
-import { relTime } from "../lib/time";
-
-/** Panneau gauche : historique des sessions + arborescence de fichiers. */
-export function LeftPanel() {
-  const {
-    sessions,
-    currentSessionId,
-    streamingSessionId,
-    refreshSessions,
-    refreshFiles,
-    fileTree,
-    newSession,
-    openSession,
-    removeSession,
-  } = useStore();
-
-  useEffect(() => {
-    refreshSessions();
-    refreshFiles();
-  }, [refreshSessions, refreshFiles]);
-
-  return (
-    <div className="flex w-[280px] flex-none flex-col border-r border-line bg-panel">
-      {/* Historique */}
-      <div className="flex items-center justify-between px-4 pb-2.5 pt-4">
-        <span className="font-pixel text-[10px] text-label">HISTORIQUE</span>
-        <button
-          onClick={newSession}
-          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-2 overflow-auto px-3 py-1">
-        {sessions.length === 0 && (
-          <div className="px-1 py-2 text-xs text-muted-2">
-            Aucune session. Lance une conversation ci-dessous.
-          </div>
-        )}
-        {sessions.map((s) => {
-          const active = s.id === currentSessionId;
-          const working = s.id === streamingSessionId;
-          return (
-            <div
-              key={s.id}
-              onClick={() => openSession(s.id)}
-              className={`group cursor-pointer border border-line px-3 py-2.5 ${
-                active ? "bg-card-deep shadow-hard-accent" : "bg-card"
-              }`}
-              style={{ borderRadius: 7 }}
-            >
-              <div className="flex items-center gap-1">
-                <div
-                  className={`flex-1 truncate text-[14px] leading-tight ${
-                    active ? "text-ink" : "text-ink-2"
-                  }`}
-                >
-                  {s.title}
-                </div>
-                {working && (
-                  <span
-                    className="flex-none border border-line bg-accent px-1.5 py-0.5 text-[10px] leading-none text-white"
-                    title="Session en cours de travail"
-                  >
-                    EN COURS
-                  </span>
-                )}
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeSession(s.id);
-                  }}
-                  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-1 text-[13px] text-muted-3">
-                {relTime(s.updated_at)} · {s.message_count ?? 0} message
-                {(s.message_count ?? 0) > 1 ? "s" : ""}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="mx-0 my-4 h-px bg-line" />
-
-      {/* Fichiers */}
-      <div className="flex items-center justify-between px-4 pb-2">
-        <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-3 pb-3.5 text-[14px]">
-        {fileTree.length === 0 ? (
-          <div className="px-2 py-4 text-center text-muted-2">
-            Aucun fichier pour l'instant.
-            <br />
-            L'agent créera des fichiers ici.
-          </div>
-        ) : (
-          <FileTree nodes={fileTree} depth={0} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function FileTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
-  const { openPreview, previewPath, removeFile, currentProject } = useStore();
-  const confirmDelete = (n: FileNode) => {
-    const msg =
-      n.type === "dir"
-        ? `Supprimer le dossier ${n.path} et tout son contenu ?`
-        : `Supprimer ${n.path} ?`;
-    if (window.confirm(msg)) void removeFile(n.path);
-  };
-  return (
-    <>
-      {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={`group mb-[3px] flex items-center gap-2 px-2 py-[5px] ${
-                n.type === "file"
-                  ? active
-                    ? "cursor-pointer border border-line bg-card-deep text-ink"
-                    : "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 ${
-                    active ? "border-white bg-accent" : "border-line bg-muted-2"
-                  }`}
-                />
-              )}
-              <span className="min-w-0 flex-1 truncate">{n.name}</span>
-              {n.type === "file" && (
-                <button
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    downloadFile(n.path, currentProject());
-                  }}
-                  className="hidden flex-none text-muted-2 hover:text-accent group-hover:block"
-                  title={`Télécharger ${n.name}`}
-                >
-                  <DownloadIcon size={13} />
-                </button>
-              )}
-              <button
-                onClick={(event) => {
-                  event.stopPropagation();
-                  confirmDelete(n);
-                }}
-                className="hidden flex-none text-muted-2 hover:text-warn group-hover:block"
-                title={`Supprimer ${n.name}`}
-              >
-                <TrashIcon size={13} />
-              </button>
-            </div>
-            {n.children && <FileTree nodes={n.children} depth={depth + 1} />}
-          </div>
-        );
-      })}
-    </>
-  );
-}
-

frontend/src/panels/PreviewPanel.tsx

@@ -9,10 +9,11 @@ import {
   type ToolCall,
 } from "../api/client";
 import { DownloadIcon, TrashIcon } from "../components/Icon";
+import { FileTree } from "../components/FileTree";
 
-type TabId = "preview" | "code" | "logs" | "git";
+type TabId = "preview" | "code" | "files" | "logs" | "git";
 
-/** Panneau droit : onglets Aperçu / Code / Logs. */
+/** Panneau droit : onglets Aperçu / Code / Fichiers / Logs / Git. */
 export function PreviewPanel() {
   const { previewPath, previewContent, messages, streamTools, removeFile } =
     useStore();
@@ -104,6 +105,9 @@ export function PreviewPanel() {
         <Tab active={tab === "code"} onClick={() => setTab("code")}>
           Code
         </Tab>
+        <Tab active={tab === "files"} onClick={() => setTab("files")}>
+          Fichiers
+        </Tab>
         <Tab active={tab === "logs"} onClick={() => setTab("logs")}>
           Logs
           <span className="font-pixel ml-1.5 border border-line bg-accent px-1 py-0.5 text-[8px] text-white">
@@ -160,6 +164,8 @@ export function PreviewPanel() {
       {/* Onglet Git */}
       {tab === "git" ? (
         <GitPanel />
+      ) : tab === "files" ? (
+        <FilesTab />
       ) : /* Onglet Logs (fond sombre) */
       tab === "logs" ? (
         <div className="scr mx-3 mb-3 flex-1 overflow-auto border border-line bg-card-deep p-3 text-[12.5px]">
@@ -236,6 +242,29 @@ export function PreviewPanel() {
 }
 
 /** Onglet Git : historique des commits, diff colorisé, retour arrière. */
+/** Onglet Fichiers : arborescence du workspace, à côté de Code. */
+function FilesTab() {
+  const { fileTree, refreshFiles } = useStore();
+
+  useEffect(() => {
+    refreshFiles();
+  }, [refreshFiles]);
+
+  return (
+    <div className="scr mx-3 mb-3 flex-1 overflow-auto rounded-card border border-line bg-panel p-2">
+      {fileTree.length === 0 ? (
+        <div className="px-2 py-8 text-center text-[13px] text-muted-2">
+          Le workspace est vide.
+          <br />
+          L'agent créera des fichiers ici.
+        </div>
+      ) : (
+        <FileTree nodes={fileTree} />
+      )}
+    </div>
+  );
+}
+
 function GitPanel() {
   const refreshFiles = useStore((s) => s.refreshFiles);
   const currentProject = useStore((s) => s.currentProject);