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/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`;
+}