perf: fix model reload thrash and cut time-to-first-token

Ollama reloaded the chat model mid-message because plan/summary/router
calls sent divergent runner options (no num_ctx/num_batch) and omitted
keep_alive — the main cause of perceived slowness.

- share one keep-alive httpx.AsyncClient for all Ollama calls
- unify runner options (runner_options) + keep_alive on every model
  call, embeddings included
- drop the blocking LLM routing fallback (pure lexical heuristic)
- run RAG recall + plan + code-model pick in parallel inside the SSE
  stream, after the start event
- RAG cosine scoring off the event loop; cache /api/tags 30s and
  nvidia-smi 5s; frontend polls 2s->5s, warm poll backoff, dedup
  config fetch

feat: working session menu in TopBar (switch/create/rename/delete)
feat: workspace file deletion (DELETE /api/files + UI trash buttons)
docs: recommended Ollama env vars (KEEP_ALIVE, MAX_LOADED_MODELS...)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -14,27 +14,29 @@ export default function App() {
     refreshStatus,
     refreshSystemStats,
     refreshModels,
-    refreshConfig,
     refreshLoadedModels,
+    refreshSessions,
   } = useStore();
 
-  // Au démarrage : statut Ollama + modèles + config. Poll du statut, des stats
-  // système et des modèles chargés en VRAM (indicateur de préchargement).
+  // Au démarrage : statut Ollama + modèles + sessions. La config est chargée
+  // par setSelectedModel (via refreshModels) — pas de double fetch. Poll du
+  // statut, des stats système (5 s, apparié au cache GPU serveur) et des
+  // modèles chargés en VRAM (indicateur de préchargement).
   useEffect(() => {
     refreshStatus();
     refreshSystemStats();
     refreshModels();
-    refreshConfig();
     refreshLoadedModels();
+    refreshSessions();
     const statusId = setInterval(refreshStatus, 10000);
-    const statsId = setInterval(refreshSystemStats, 2000);
+    const statsId = setInterval(refreshSystemStats, 5000);
     const loadedId = setInterval(refreshLoadedModels, 8000);
     return () => {
       clearInterval(statusId);
       clearInterval(statsId);
       clearInterval(loadedId);
     };
-  }, [refreshStatus, refreshSystemStats, refreshModels, refreshConfig, refreshLoadedModels]);
+  }, [refreshStatus, refreshSystemStats, refreshModels, refreshLoadedModels, refreshSessions]);
 
   return (
     <div className="flex h-full flex-col bg-base text-ink">

frontend/src/api/client.ts

@@ -158,7 +158,11 @@ export async function warmModel(
     throw await apiError(res, `préchargement refusé (${res.status})`);
   }
 
-  for (let attempt = 0; attempt < 300; attempt++) {
+  // Backoff progressif : réactif au début (modèle déjà chargé), espacé ensuite
+  // pour ne pas marteler l'API pendant un long chargement.
+  const deadline = Date.now() + 10 * 60 * 1000;
+  let delay = 1000;
+  while (Date.now() < deadline) {
     const statusRes = await fetch(
       `/api/models/warm/status?name=${encodeURIComponent(name)}`,
       { cache: "no-store" }
@@ -171,7 +175,8 @@ export async function warmModel(
     if (status.state === "error") {
       throw new Error(status.error ?? "préchargement impossible");
     }
-    await wait(2000);
+    await wait(delay);
+    delay = Math.min(delay * 1.5, 5000);
   }
   throw new Error("préchargement toujours en cours après 10 minutes");
 }
@@ -405,6 +410,15 @@ export async function fileContent(path: string): Promise<string> {
   return (await res.json()).content;
 }
 
+export async function deleteFile(path: string): Promise<void> {
+  const res = await fetch(`/api/files?path=${encodeURIComponent(path)}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) {
+    throw await apiError(res, `suppression impossible (${res.status})`);
+  }
+}
+
 export function downloadFile(path: string): void {
   const link = document.createElement("a");
   link.href = `/api/files/download?path=${encodeURIComponent(path)}`;
@@ -439,6 +453,17 @@ export async function deleteSession(id: string): Promise<void> {
   await fetch(`/api/sessions/${id}`, { method: "DELETE" });
 }
 
+export async function renameSession(id: string, title: string): Promise<void> {
+  const res = await fetch(`/api/sessions/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ title }),
+  });
+  if (!res.ok) {
+    throw await apiError(res, `renommage impossible (${res.status})`);
+  }
+}
+
 /** Envoie un message et streame la réponse de l'agent via SSE. */
 export async function streamChat(
   body: { session_id: string; content: string; model?: string; mode?: string },

frontend/src/components/Icon.tsx

@@ -85,6 +85,12 @@ export const DownloadIcon = ({ size = 14, className }: Props) => (
   </svg>
 );
 
+export const TrashIcon = ({ size = 14, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={1.9}>
+    <path d="M4 7h16M10 7V5h4v2M9 7l.8 13h4.4L15 7M6.5 7l.7 13h9.6l.7-13" />
+  </svg>
+);
+
 export const CopyIcon = ({ size = 14, className }: Props) => (
   <svg {...base(size, className)} strokeWidth={1.7}>
     <rect x="9" y="9" width="11" height="11" rx="2" />

frontend/src/components/SessionMenu.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from "react";
+import { useStore } from "../store/useStore";
+import { ChevronDown, PlusIcon, TrashIcon } from "./Icon";
+import { relTime } from "../lib/time";
+
+/** Sélecteur de session de la barre supérieure : titre courant + menu déroulant
+ *  (nouvelle session, liste, renommage inline, suppression). */
+export function SessionMenu() {
+  const {
+    sessions,
+    currentSessionId,
+    streamingSessionId,
+    newSession,
+    openSession,
+    removeSession,
+    renameSession,
+  } = useStore();
+  const [open, setOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const current = sessions.find((s) => s.id === currentSessionId);
+
+  // Fermeture au clic extérieur + Escape.
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setEditingId(null);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setEditingId(null);
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const commitRename = async (id: string) => {
+    const title = draft.trim();
+    setEditingId(null);
+    if (title) await renameSession(id, title);
+  };
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex cursor-pointer items-center gap-2 text-[13px] text-on-dark hover:text-white"
+        title="Sessions"
+      >
+        <span className="max-w-[220px] truncate">
+          {current?.title ?? "Nouvelle session"}
+        </span>
+        <ChevronDown className="text-on-dark-3" />
+      </button>
+
+      {open && (
+        <div
+          className="absolute left-0 top-[calc(100%+9px)] z-30 w-[300px] border-[3px] border-line bg-chrome-2 shadow-hard"
+          style={{ borderRadius: 7 }}
+        >
+          <button
+            onClick={async () => {
+              setOpen(false);
+              await newSession();
+            }}
+            className="flex w-full cursor-pointer items-center gap-2 border-b-[3px] border-chrome-3 px-3 py-2.5 text-[13px] font-bold text-accent hover:bg-chrome-3"
+          >
+            <PlusIcon />
+            Nouvelle session
+          </button>
+
+          <div className="scr max-h-[320px] overflow-auto">
+            {sessions.length === 0 && (
+              <div className="px-3 py-4 text-center text-[12px] text-on-dark-3">
+                Aucune session enregistrée.
+              </div>
+            )}
+            {sessions.map((s) => {
+              const active = s.id === currentSessionId;
+              const working = s.id === streamingSessionId;
+              return (
+                <div
+                  key={s.id}
+                  onClick={() => {
+                    if (editingId === s.id) return;
+                    setOpen(false);
+                    void openSession(s.id);
+                  }}
+                  className={`group cursor-pointer border-b-2 border-chrome-3 px-3 py-2 last:border-b-0 ${
+                    active ? "bg-chrome-3" : "hover:bg-chrome-3"
+                  }`}
+                >
+                  <div className="flex items-center gap-1.5">
+                    {editingId === s.id ? (
+                      <input
+                        autoFocus
+                        value={draft}
+                        onChange={(e) => setDraft(e.target.value)}
+                        onClick={(e) => e.stopPropagation()}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") void commitRename(s.id);
+                          if (e.key === "Escape") {
+                            e.stopPropagation();
+                            setEditingId(null);
+                          }
+                        }}
+                        onBlur={() => setEditingId(null)}
+                        className="min-w-0 flex-1 border-2 border-line bg-card-deep px-1.5 py-0.5 text-[13px] text-white outline-none"
+                      />
+                    ) : (
+                      <span
+                        className={`min-w-0 flex-1 truncate text-[13px] ${
+                          active ? "text-white" : "text-on-dark"
+                        }`}
+                      >
+                        {s.title}
+                      </span>
+                    )}
+                    {working && (
+                      <span
+                        className="flex-none border-2 border-line bg-accent px-1 py-0.5 text-[9px] leading-none text-white"
+                        title="Session en cours de travail"
+                      >
+                        EN COURS
+                      </span>
+                    )}
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setEditingId(s.id);
+                        setDraft(s.title);
+                      }}
+                      className="hidden flex-none text-[11px] text-on-dark-3 hover:text-white group-hover:block"
+                      title="Renommer la session"
+                    >
+                      ✎
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (window.confirm("Supprimer cette session ?")) {
+                          void removeSession(s.id);
+                        }
+                      }}
+                      className="hidden flex-none text-on-dark-3 hover:text-accent group-hover:block"
+                      title="Supprimer la session"
+                    >
+                      <TrashIcon size={12} />
+                    </button>
+                  </div>
+                  <div className="mt-0.5 text-[11px] text-on-dark-3">
+                    {relTime(s.updated_at)} · {s.message_count ?? 0} message
+                    {(s.message_count ?? 0) > 1 ? "s" : ""}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/TopBar.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
 import { useStore } from "../store/useStore";
 import { getVersion } from "../api/client";
-import { ChevronDown, LokiMark } from "./Icon";
+import { LokiMark } from "./Icon";
 import { ModelSelector } from "./ModelSelector";
+import { SessionMenu } from "./SessionMenu";
 
 /** Barre supérieure sombre : logo, fil d'Ariane, statut Ollama, sélecteur. */
 export function TopBar() {
@@ -33,10 +34,7 @@ export function TopBar() {
 
       <div className="h-6 w-[3px] bg-chrome-3" />
 
-      <div className="flex items-center gap-2 text-[13px] text-on-dark">
-        <span>Nouvelle session</span>
-        <ChevronDown className="text-on-dark-3" />
-      </div>
+      <SessionMenu />
 
       <div className="flex-1" />
 

frontend/src/lib/time.ts

@@ -0,0 +1,8 @@
+/** Date relative courte en français (« il y a 5 min »). */
+export function relTime(ts: number): string {
+  const diff = Date.now() / 1000 - ts;
+  if (diff < 60) return "à l'instant";
+  if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`;
+  if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`;
+  return `il y a ${Math.floor(diff / 86400)} j`;
+}

frontend/src/panels/ActivityViews.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { downloadFile, type FileNode } from "../api/client";
-import { DownloadIcon } from "../components/Icon";
+import { DownloadIcon, TrashIcon } from "../components/Icon";
 import { useStore } from "../store/useStore";
 
 export function HistoryView({ onOpen }: { onOpen: () => void }) {
@@ -61,7 +61,14 @@ export function FilesView() {
 }
 
 function WorkspaceTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
-  const { openPreview, previewPath } = useStore();
+  const { openPreview, previewPath, removeFile } = 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) => (
@@ -93,6 +100,13 @@ function WorkspaceTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
                 <DownloadIcon size={12} /> Télécharger
               </button>
             )}
+            <button
+              onClick={() => confirmDelete(node)}
+              className="flex items-center gap-1 border-2 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>

frontend/src/panels/LeftPanel.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import { useStore } from "../store/useStore";
-import { DownloadIcon, PlusIcon } from "../components/Icon";
+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() {
@@ -116,7 +117,14 @@ export function LeftPanel() {
 }
 
 function FileTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
-  const { openPreview, previewPath } = useStore();
+  const { openPreview, previewPath, removeFile } = 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) => {
@@ -156,6 +164,16 @@ function FileTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
                   <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>
@@ -165,10 +183,3 @@ function FileTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) {
   );
 }
 
-function relTime(ts: number): string {
-  const diff = Date.now() / 1000 - ts;
-  if (diff < 60) return "à l'instant";
-  if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`;
-  if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`;
-  return `il y a ${Math.floor(diff / 86400)} j`;
-}

frontend/src/panels/PreviewPanel.tsx

@@ -8,13 +8,14 @@ import {
   type GitCommit,
   type ToolCall,
 } from "../api/client";
-import { DownloadIcon } from "../components/Icon";
+import { DownloadIcon, TrashIcon } from "../components/Icon";
 
 type TabId = "preview" | "code" | "logs" | "git";
 
 /** Panneau droit : onglets Aperçu / Code / Logs. */
 export function PreviewPanel() {
-  const { previewPath, previewContent, messages, streamTools } = useStore();
+  const { previewPath, previewContent, messages, streamTools, removeFile } =
+    useStore();
   const [tab, setTab] = useState<TabId>("preview");
   const [width, setWidth] = useState(() => {
     const saved = Number(window.localStorage.getItem("loki.preview.width"));
@@ -95,14 +96,28 @@ export function PreviewPanel() {
           </span>
         </div>
         {previewPath && (
-          <button
-            onClick={() => downloadFile(previewPath)}
-            className="flex h-8 items-center gap-1.5 border-[3px] border-line bg-card px-2.5 text-[12px] text-accent"
-            title={`Télécharger ${previewPath}`}
-          >
-            <DownloadIcon size={13} />
-            Télécharger
-          </button>
+          <>
+            <button
+              onClick={() => downloadFile(previewPath)}
+              className="flex h-8 items-center gap-1.5 border-[3px] border-line bg-card px-2.5 text-[12px] text-accent"
+              title={`Télécharger ${previewPath}`}
+            >
+              <DownloadIcon size={13} />
+              Télécharger
+            </button>
+            <button
+              onClick={() => {
+                if (window.confirm(`Supprimer ${previewPath} ?`)) {
+                  void removeFile(previewPath);
+                }
+              }}
+              className="flex h-8 items-center gap-1.5 border-[3px] border-line bg-card px-2.5 text-[12px] text-warn"
+              title={`Supprimer ${previewPath}`}
+            >
+              <TrashIcon size={13} />
+              Supprimer
+            </button>
+          </>
         )}
       </div>
 

frontend/src/store/useStore.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import {
   createSession,
+  deleteFile,
   deleteSession,
   getConfig,
   getModels,
@@ -12,6 +13,7 @@ import {
   fileContent,
   listFiles,
   listSessions,
+  renameSession as apiRenameSession,
   runShell,
   saveConfig,
   streamChat,
@@ -73,6 +75,8 @@ interface LokiState {
   newSession: () => Promise<void>;
   openSession: (id: string) => Promise<void>;
   removeSession: (id: string) => Promise<void>;
+  renameSession: (id: string, title: string) => Promise<void>;
+  removeFile: (path: string) => Promise<void>;
   sendMessage: (content: string) => Promise<void>;
   stopStreaming: () => void;
 
@@ -278,6 +282,23 @@ export const useStore = create<LokiState>((set, get) => ({
     await get().refreshSessions();
   },
 
+  renameSession: async (id, title) => {
+    const clean = title.trim();
+    if (!clean) return;
+    await apiRenameSession(id, clean);
+    await get().refreshSessions();
+  },
+
+  removeFile: async (path) => {
+    await deleteFile(path);
+    // Ferme l'aperçu si le fichier supprimé (ou son dossier) y est affiché.
+    const preview = get().previewPath;
+    if (preview && (preview === path || preview.startsWith(path + "/"))) {
+      set({ previewPath: null, previewContent: "" });
+    }
+    await get().refreshFiles();
+  },
+
   stopStreaming: () => {
     activeStreamController?.abort();
     activeStreamController = null;
@@ -403,10 +424,15 @@ export const useStore = create<LokiState>((set, get) => ({
             streamNotice: null,
             streamTools: [],
           });
-          // Recharge depuis la base + l'arborescence (fichiers créés par l'agent).
-          if (get().currentSessionId === sid) await get().openSession(sid!);
-          await get().refreshSessions();
-          await get().refreshFiles();
+          // Recharge depuis la base + l'arborescence (fichiers créés par
+          // l'agent) — trois requêtes indépendantes, en parallèle.
+          await Promise.all([
+            get().currentSessionId === sid
+              ? get().openSession(sid!)
+              : Promise.resolve(),
+            get().refreshSessions(),
+            get().refreshFiles(),
+          ]);
           if (writtenHtml) await get().openPreview(writtenHtml.args.path as string);
         },
         onError: (msg) => {