Phase 3 : chat streaming SSE et persistance des sessions

Backend :
- db.py : SQLite (sessions + messages), schéma et CRUD
- routes/sessions.py : créer/lister/ouvrir/renommer/supprimer une session
- routes/chat.py : POST /api/chat, relais token par token depuis Ollama (SSE),
  persistance des messages, titrage auto de la session au 1er message
- main.py : lifespan -> init_db, montage des nouvelles routes

Frontend :
- api/client.ts : APIs sessions + streamChat (parsing SSE event/data)
- store : sessions, messages, état de streaming, envoi optimiste
- ChatPanel : fil de conversation réel, bulles user/agent, curseur de frappe
- LeftPanel : historique réel (ouvrir/supprimer, horodatage relatif)

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

frontend/src/api/client.ts

@@ -29,6 +29,99 @@ export async function getModels(): Promise<{
   return res.json();
 }
 
+export interface Session {
+  id: string;
+  title: string;
+  model?: string;
+  created_at: number;
+  updated_at: number;
+  message_count?: number;
+}
+
+export interface Message {
+  id: string;
+  session_id: string;
+  role: "user" | "assistant";
+  content: string;
+  model?: string;
+  created_at: number;
+}
+
+export async function listSessions(): Promise<Session[]> {
+  const res = await fetch("/api/sessions");
+  return (await res.json()).sessions;
+}
+
+export async function createSession(model?: string): Promise<Session> {
+  const res = await fetch("/api/sessions", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ title: "Nouvelle session", model }),
+  });
+  return res.json();
+}
+
+export async function getSession(
+  id: string
+): Promise<{ session: Session; messages: Message[] }> {
+  const res = await fetch(`/api/sessions/${id}`);
+  return res.json();
+}
+
+export async function deleteSession(id: string): Promise<void> {
+  await fetch(`/api/sessions/${id}`, { method: "DELETE" });
+}
+
+/** 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 },
+  handlers: {
+    onToken: (t: string) => void;
+    onDone: (full: string) => void;
+    onError: (msg: string) => void;
+  }
+): Promise<void> {
+  const res = await fetch("/api/chat", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!res.body) {
+    handlers.onError("pas de flux de réponse");
+    return;
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const events = buffer.split("\n\n");
+    buffer = events.pop() ?? "";
+
+    for (const block of events) {
+      let event = "message";
+      let data = "";
+      for (const line of block.split("\n")) {
+        if (line.startsWith("event: ")) event = line.slice(7).trim();
+        else if (line.startsWith("data: ")) data += line.slice(6);
+      }
+      if (!data) continue;
+      try {
+        const payload = JSON.parse(data);
+        if (event === "token") handlers.onToken(payload.content);
+        else if (event === "done") handlers.onDone(payload.content);
+        else if (event === "error") handlers.onError(payload.message);
+      } catch {
+        /* bloc partiel */
+      }
+    }
+  }
+}
+
 /** Télécharge un modèle en streamant la progression via SSE. */
 export async function pullModel(
   name: string,

frontend/src/panels/ChatPanel.tsx

@@ -1,9 +1,41 @@
+import { useEffect, useRef, useState } from "react";
 import { useStore } from "../store/useStore";
 import { ClipIcon, LokiMark, SendIcon } from "../components/Icon";
+import type { Message } from "../api/client";
 
 /** Panneau central : barre de contexte, fil de conversation, composer. */
 export function ChatPanel() {
-  const selectedModel = useStore((s) => s.selectedModel);
+  const {
+    selectedModel,
+    messages,
+    streaming,
+    streamContent,
+    sendMessage,
+    currentSessionId,
+  } = useStore();
+
+  const [draft, setDraft] = useState("");
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll vers le bas à chaque token / message.
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [messages, streamContent]);
+
+  const submit = () => {
+    if (!draft.trim() || streaming) return;
+    sendMessage(draft);
+    setDraft("");
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  const empty = messages.length === 0 && !streaming;
 
   return (
     <div className="flex min-w-0 flex-1 flex-col bg-base">
@@ -16,29 +48,47 @@ export function ChatPanel() {
         <Chip>
           Température <b className="font-semibold text-[#e7ddcd]">0.7</b>
         </Chip>
-        <Chip>
-          Contexte
-          <span className="h-[5px] w-[46px] overflow-hidden rounded bg-line-strong">
-            <span className="block h-full w-0 bg-accent" />
-          </span>
-          <span className="font-mono text-[10.5px] text-muted-2">0/128K</span>
-        </Chip>
         <div className="flex-1" />
-        <span className="font-mono text-[11px] text-muted-4">≈ 0 jeton</span>
+        <span className="font-mono text-[11px] text-muted-4">
+          {currentSessionId
+            ? `${messages.length} message${messages.length > 1 ? "s" : ""}`
+            : "aucune session"}
+        </span>
       </div>
 
-      {/* Messages (vide pour l'instant — phase 3) */}
-      <div className="scr flex-1 overflow-auto px-7 py-6">
-        <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.
+      {/* Messages */}
+      <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.
+            </div>
           </div>
-          <div className="max-w-[360px] text-sm leading-relaxed text-muted">
-            Décris une tâche à l'agent. Il pourra lire et écrire des fichiers
-            dans le workspace, et te montrer un aperçu en direct.
+        ) : (
+          <div className="mx-auto flex max-w-[680px] flex-col gap-[22px]">
+            {messages.map((m) => (
+              <Bubble key={m.id} msg={m} />
+            ))}
+            {streaming && (
+              <Bubble
+                msg={{
+                  id: "stream",
+                  session_id: "",
+                  role: "assistant",
+                  content: streamContent,
+                  model: selectedModel,
+                  created_at: Date.now() / 1000,
+                }}
+                pending
+              />
+            )}
           </div>
-        </div>
+        )}
       </div>
 
       {/* Composer */}
@@ -47,6 +97,9 @@ export function ChatPanel() {
           <div className="rounded-[14px] border border-line-strong bg-card-soft p-[13px]">
             <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"
             />
@@ -62,9 +115,13 @@ export function ChatPanel() {
               <span className="font-mono text-[10.5px] text-muted-4">
                 ⏎ envoyer · ⇧⏎ ligne
               </span>
-              <button className="flex h-[34px] items-center gap-1.5 rounded-[9px] bg-accent px-4 text-[13px] font-bold text-[#1f1b16]">
-                Envoyer
-                <SendIcon />
+              <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"
+              >
+                {streaming ? "…" : "Envoyer"}
+                {!streaming && <SendIcon />}
               </button>
             </div>
           </div>
@@ -74,6 +131,58 @@ export function ChatPanel() {
   );
 }
 
+function Bubble({ msg, pending }: { msg: Message; pending?: boolean }) {
+  const time = new Date(msg.created_at * 1000).toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  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">
+          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>
+          </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">
+            {msg.content}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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>
+      <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">
+            {msg.model ? `${msg.model} · ` : ""}
+            {time}
+          </span>
+        </div>
+        <div className="text-sm leading-[1.65] text-ink-2 whitespace-pre-wrap">
+          {msg.content}
+          {pending && (
+            <span className="ml-0.5 inline-block h-3.5 w-[7px] animate-pulse bg-accent align-middle" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 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">

frontend/src/panels/LeftPanel.tsx

@@ -1,11 +1,22 @@
+import { useEffect } from "react";
+import { useStore } from "../store/useStore";
 import { PlusIcon } from "../components/Icon";
 
-const sessions = [
-  { title: "Nouvelle session", meta: "à l'instant · 0 message", active: true },
-];
-
 /** Panneau gauche : historique des sessions + arborescence de fichiers. */
 export function LeftPanel() {
+  const {
+    sessions,
+    currentSessionId,
+    refreshSessions,
+    newSession,
+    openSession,
+    removeSession,
+  } = useStore();
+
+  useEffect(() => {
+    refreshSessions();
+  }, [refreshSessions]);
+
   return (
     <div className="flex w-[268px] flex-none flex-col border-r border-line-soft bg-panel">
       {/* Historique */}
@@ -13,31 +24,60 @@ export function LeftPanel() {
         <span className="text-[11px] font-bold uppercase tracking-[.07em] text-label">
           Historique
         </span>
-        <span className="flex cursor-pointer items-center gap-1 text-xs font-semibold text-accent">
+        <button
+          onClick={newSession}
+          className="flex cursor-pointer items-center gap-1 text-xs font-semibold text-accent"
+        >
           <PlusIcon />
           Nouvelle
-        </span>
+        </button>
       </div>
 
-      <div className="flex flex-col gap-0.5 px-2.5">
-        {sessions.map((s, i) => (
-          <div
-            key={i}
-            className={`relative cursor-pointer rounded-[9px] px-3 py-[9px] ${
-              s.active ? "bg-[#252019]" : ""
-            }`}
-          >
-            {s.active && (
-              <div className="absolute bottom-[9px] left-0 top-[9px] w-[3px] rounded bg-accent" />
-            )}
-            <div className="truncate text-[13px] font-semibold text-ink">
-              {s.title}
-            </div>
-            <div className="mt-[3px] font-mono text-[10.5px] text-muted-3">
-              {s.meta}
-            </div>
+      <div className="scr flex max-h-[45%] flex-col gap-0.5 overflow-auto px-2.5">
+        {sessions.length === 0 && (
+          <div className="px-3 py-3 text-xs text-muted-3">
+            Aucune session. Lance une conversation ci-dessous.
           </div>
-        ))}
+        )}
+        {sessions.map((s) => {
+          const active = s.id === currentSessionId;
+          return (
+            <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]"
+              }`}
+            >
+              {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"
+                  }`}
+                >
+                  {s.title}
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeSession(s.id);
+                  }}
+                  className="hidden text-muted-3 hover:text-warn group-hover:block"
+                  title="Supprimer"
+                >
+                  ×
+                </button>
+              </div>
+              <div className="mt-[3px] font-mono text-[10.5px] text-muted-3">
+                {relTime(s.updated_at)} · {s.message_count ?? 0} message
+                {(s.message_count ?? 0) > 1 ? "s" : ""}
+              </div>
+            </div>
+          );
+        })}
       </div>
 
       <div className="mx-4 my-3.5 h-px bg-line-soft" />
@@ -60,3 +100,11 @@ export function LeftPanel() {
     </div>
   );
 }
+
+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/store/useStore.ts

@@ -1,9 +1,16 @@
 import { create } from "zustand";
 import {
+  createSession,
+  deleteSession,
   getModels,
+  getSession,
   getStatus,
+  listSessions,
+  streamChat,
+  type Message,
   type OllamaModel,
   type OllamaStatus,
+  type Session,
 } from "../api/client";
 
 interface LokiState {
@@ -12,9 +19,21 @@ interface LokiState {
   selectedModel: string;
   loadingModels: boolean;
 
+  sessions: Session[];
+  currentSessionId: string | null;
+  messages: Message[];
+  streaming: boolean;
+  streamContent: string; // réponse de l'agent en cours de frappe
+
   setSelectedModel: (name: string) => void;
   refreshStatus: () => Promise<void>;
   refreshModels: () => Promise<void>;
+
+  refreshSessions: () => Promise<void>;
+  newSession: () => Promise<void>;
+  openSession: (id: string) => Promise<void>;
+  removeSession: (id: string) => Promise<void>;
+  sendMessage: (content: string) => Promise<void>;
 }
 
 export const useStore = create<LokiState>((set, get) => ({
@@ -23,6 +42,12 @@ export const useStore = create<LokiState>((set, get) => ({
   selectedModel: "",
   loadingModels: false,
 
+  sessions: [],
+  currentSessionId: null,
+  messages: [],
+  streaming: false,
+  streamContent: "",
+
   setSelectedModel: (name) => set({ selectedModel: name }),
 
   refreshStatus: async () => {
@@ -47,4 +72,83 @@ export const useStore = create<LokiState>((set, get) => ({
       set({ loadingModels: false });
     }
   },
+
+  refreshSessions: async () => {
+    const sessions = await listSessions();
+    set({ sessions });
+  },
+
+  newSession: async () => {
+    const s = await createSession(get().selectedModel || undefined);
+    set({ currentSessionId: s.id, messages: [], streamContent: "" });
+    await get().refreshSessions();
+  },
+
+  openSession: async (id) => {
+    const { messages } = await getSession(id);
+    set({ currentSessionId: id, messages, streamContent: "" });
+  },
+
+  removeSession: async (id) => {
+    await deleteSession(id);
+    if (get().currentSessionId === id) {
+      set({ currentSessionId: null, messages: [] });
+    }
+    await get().refreshSessions();
+  },
+
+  sendMessage: async (content) => {
+    if (get().streaming) return;
+    content = content.trim();
+    if (!content) return;
+
+    // Crée une session à la volée si aucune n'est ouverte.
+    let sid = get().currentSessionId;
+    if (!sid) {
+      const s = await createSession(get().selectedModel || undefined);
+      sid = s.id;
+      set({ currentSessionId: s.id });
+    }
+
+    // Affichage optimiste du message utilisateur.
+    const userMsg: Message = {
+      id: `tmp-${Date.now()}`,
+      session_id: sid,
+      role: "user",
+      content,
+      created_at: Date.now() / 1000,
+    };
+    set({
+      messages: [...get().messages, userMsg],
+      streaming: true,
+      streamContent: "",
+    });
+
+    await streamChat(
+      { session_id: sid, content, model: get().selectedModel || undefined },
+      {
+        onToken: (t) => set({ streamContent: get().streamContent + t }),
+        onDone: async () => {
+          set({ streaming: false, streamContent: "" });
+          // Recharge depuis la base pour récupérer les ids/horodatages réels.
+          if (get().currentSessionId === sid) await get().openSession(sid!);
+          await get().refreshSessions();
+        },
+        onError: (msg) => {
+          const errMsg: Message = {
+            id: `err-${Date.now()}`,
+            session_id: sid!,
+            role: "assistant",
+            content: `⚠️ Erreur : ${msg}`,
+            created_at: Date.now() / 1000,
+          };
+          set({
+            streaming: false,
+            streamContent: "",
+            messages: [...get().messages, errMsg],
+          });
+        },
+      }
+    );
+  },
 }));