Phase 1-2 : socle Loki, design system et connexion Ollama

- Scaffold full-stack : backend FastAPI + frontend React/Vite/TS/Tailwind
- Design system fidèle au thème (palette ambre/café, JetBrains Mono, tokens Tailwind)
- Layout 3 panneaux : activity bar, historique/fichiers, chat, aperçu
- Connexion Ollama : statut live, liste des modèles, pull avec progression SSE, sélecteur de modèle
- Vue Configuration (Frame 2) : modèles, génération, outils, invite système
- Dockerfile multi-stage + docker-compose (Ollama externe par défaut, profil ollama optionnel)

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

.env.example

@@ -0,0 +1,16 @@
+# ── Loki — configuration ────────────────────────────────────────────────
+# Hôte Ollama. En Docker, host.docker.internal pointe vers la machine hôte.
+# En local (hors Docker), utilise http://localhost:11434
+OLLAMA_HOST=http://host.docker.internal:11434
+
+# Modèle sélectionné par défaut au démarrage
+DEFAULT_MODEL=llama3.1:8b
+
+# Dossier de travail de l'agent (monté en volume dans le conteneur)
+WORKSPACE_DIR=/workspace
+
+# Base SQLite (sessions, messages, config)
+DATA_DIR=/data
+
+# Port exposé par l'application
+PORT=8080

.gitignore

@@ -0,0 +1,27 @@
+# Python
+__pycache__/
+*.pyc
+.venv/
+venv/
+*.egg-info/
+
+# Node
+node_modules/
+frontend/dist/
+.vite/
+
+# Data & workspace (runtime)
+data/*.db
+data/*.sqlite3
+workspace/*
+!workspace/.gitkeep
+
+# Env / IDE
+.env
+.env.local
+.DS_Store
+.idea/
+.vscode/
+
+# TS build cache
+frontend/tsconfig.tsbuildinfo

Dockerfile

@@ -0,0 +1,30 @@
+# ── Étape 1 : build du frontend ─────────────────────────────────────────
+FROM node:20-alpine AS frontend
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# ── Étape 2 : runtime backend (sert aussi le front statique) ────────────
+FROM python:3.12-slim AS runtime
+WORKDIR /app
+
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    WORKSPACE_DIR=/workspace \
+    DATA_DIR=/data \
+    PORT=8080
+
+COPY backend/requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./backend/
+# Frontend compilé servi en statique par FastAPI
+COPY --from=frontend /app/frontend/dist ./backend/static
+
+RUN mkdir -p /workspace /data
+
+EXPOSE 8080
+WORKDIR /app/backend
+CMD ["sh", "-c", "uvicorn app.main:app --host 0.0.0.0 --port ${PORT}"]

README.md

@@ -0,0 +1,84 @@
+# Loki — Agent IA local sur Ollama
+
+Loki est un atelier d'agent IA **100 % local**, conçu pour se connecter à
+[Ollama](https://ollama.com) et travailler en mode agentique : un tchat, des
+outils (lecture/écriture de fichiers, aperçu HTML en direct…) et un workspace
+de fichiers. Pensé pour un déploiement **Docker** simple.
+
+Le thème visuel (« atelier café », sombre et chaleureux, accent ambre) est
+décliné fidèlement depuis la maquette d'origine.
+
+## Architecture
+
+```
+Frontend (React + Vite + TS + Tailwind)
+        │ HTTP + SSE
+Backend (FastAPI, Python)
+   ├── /api/status, /api/models, /api/models/pull   (Ollama)
+   │   (chat agentique & outils : phases suivantes)
+        │ httpx                     │ volume
+     Ollama (:11434)            /workspace + /data (SQLite)
+```
+
+Un seul conteneur : le backend FastAPI sert l'API **et** le frontend compilé.
+Loki se connecte à un **Ollama existant** via `OLLAMA_HOST`.
+
+## Démarrage rapide (Docker)
+
+```bash
+cp .env.example .env          # ajuste OLLAMA_HOST si besoin
+docker compose up --build
+```
+
+Application disponible sur http://localhost:8080
+
+> **Ollama** : par défaut Loki vise `http://host.docker.internal:11434`
+> (un Ollama installé sur la machine hôte). Pour embarquer Ollama dans la
+> stack : `docker compose --profile ollama up` puis règle
+> `OLLAMA_HOST=http://ollama:11434`.
+
+## Développement (sans Docker)
+
+**Backend**
+```bash
+cd backend
+pip install -r requirements.txt
+OLLAMA_HOST=http://localhost:11434 uvicorn app.main:app --reload --port 8080
+```
+
+**Frontend** (proxy `/api` → `:8080`)
+```bash
+cd frontend
+npm install
+npm run dev        # http://localhost:5173
+```
+
+## Configuration (variables d'environnement)
+
+| Variable        | Défaut                              | Rôle                          |
+| --------------- | ----------------------------------- | ----------------------------- |
+| `OLLAMA_HOST`   | `http://host.docker.internal:11434` | URL de l'instance Ollama      |
+| `DEFAULT_MODEL` | `llama3.1:8b`                        | Modèle sélectionné au démarrage |
+| `WORKSPACE_DIR` | `/workspace`                        | Dossier de travail de l'agent |
+| `DATA_DIR`      | `/data`                             | Base SQLite (sessions)        |
+| `PORT`          | `8080`                              | Port exposé                   |
+
+## Feuille de route
+
+- [x] **Phase 1** — Socle + design system fidèle au thème, layout 3 panneaux
+- [x] **Phase 2** — Connexion Ollama : statut, liste des modèles, pull avec progression, sélecteur
+- [ ] **Phase 3** — Chat streaming (SSE) + persistance des sessions (SQLite)
+- [ ] **Phase 4** — Boucle agentique & outils fichiers (read/write/list)
+- [ ] **Phase 5** — Aperçu HTML live + onglets Code/Logs + arborescence
+- [ ] **Phase 6** — Configuration complète (génération, toggles d'outils, invite système)
+- [ ] **Phase 7** — Outils avancés (web_search, run_shell confirmé, html_preview)
+- [ ] **Phase 8** — Hardening & documentation Docker
+
+## Structure
+
+```
+backend/   FastAPI : routes Ollama, client httpx, config
+frontend/  React : design system (tailwind.config), panneaux, store Zustand
+workspace/ fichiers créés par l'agent (monté en volume)
+data/      base SQLite (monté en volume)
+```

backend/app/config.py

@@ -0,0 +1,17 @@
+"""Configuration de l'application, chargée depuis l'environnement."""
+from pydantic_settings import BaseSettings, SettingsConfigDict
+
+
+class Settings(BaseSettings):
+    """Réglages globaux de Loki (surchargés par variables d'environnement)."""
+
+    ollama_host: str = "http://host.docker.internal:11434"
+    default_model: str = "llama3.1:8b"
+    workspace_dir: str = "/workspace"
+    data_dir: str = "/data"
+    port: int = 8080
+
+    model_config = SettingsConfigDict(env_file=".env", extra="ignore")
+
+
+settings = Settings()

backend/app/main.py

@@ -0,0 +1,49 @@
+"""Point d'entrée FastAPI de Loki.
+
+Sert l'API (/api/*) et, en production, le frontend React compilé (static/).
+"""
+from __future__ import annotations
+
+import os
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+from .config import settings
+from .routes import models
+
+app = FastAPI(title="Loki", description="Agent IA local sur Ollama")
+
+# En dev, le front tourne sur Vite (5173). On autorise le CORS large ;
+# en prod le front est servi par le même origin, donc sans impact.
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(models.router)
+
+
+@app.get("/api/health")
+async def health() -> dict:
+    return {"status": "ok", "service": "loki"}
+
+
+# ── Service du frontend compilé (présent uniquement en image Docker) ─────
+_STATIC_DIR = os.path.join(os.path.dirname(__file__), "..", "static")
+if os.path.isdir(_STATIC_DIR):
+    app.mount(
+        "/assets",
+        StaticFiles(directory=os.path.join(_STATIC_DIR, "assets")),
+        name="assets",
+    )
+
+    @app.get("/{full_path:path}")
+    async def spa_fallback(full_path: str):
+        """Renvoie index.html pour toutes les routes (SPA React)."""
+        index = os.path.join(_STATIC_DIR, "index.html")
+        return FileResponse(index)

backend/app/ollama_client.py

@@ -0,0 +1,73 @@
+"""Client HTTP léger pour l'API Ollama.
+
+On utilise httpx directement (plutôt que le SDK) pour garder le contrôle
+total sur le streaming et n'embarquer aucune dépendance superflue.
+"""
+from __future__ import annotations
+
+import json
+from typing import AsyncIterator
+
+import httpx
+
+from .config import settings
+
+
+class OllamaClient:
+    """Enveloppe asynchrone autour de l'API REST d'Ollama."""
+
+    def __init__(self, host: str | None = None) -> None:
+        self.host = (host or settings.ollama_host).rstrip("/")
+
+    async def ping(self) -> dict:
+        """Vérifie la connexion et renvoie la version d'Ollama."""
+        async with httpx.AsyncClient(timeout=5.0) as client:
+            resp = await client.get(f"{self.host}/api/version")
+            resp.raise_for_status()
+            return resp.json()
+
+    async def list_models(self) -> list[dict]:
+        """Liste les modèles installés localement (/api/tags)."""
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            resp = await client.get(f"{self.host}/api/tags")
+            resp.raise_for_status()
+            return resp.json().get("models", [])
+
+    async def pull_model(self, name: str) -> AsyncIterator[dict]:
+        """Télécharge un modèle en streamant la progression (/api/pull)."""
+        async with httpx.AsyncClient(timeout=None) as client:
+            async with client.stream(
+                "POST", f"{self.host}/api/pull", json={"name": name}
+            ) as resp:
+                resp.raise_for_status()
+                async for line in resp.aiter_lines():
+                    if line.strip():
+                        yield json.loads(line)
+
+    async def chat(
+        self,
+        model: str,
+        messages: list[dict],
+        *,
+        tools: list[dict] | None = None,
+        options: dict | None = None,
+        stream: bool = True,
+    ) -> AsyncIterator[dict]:
+        """Conversation avec le modèle, en streaming token par token."""
+        payload: dict = {"model": model, "messages": messages, "stream": stream}
+        if tools:
+            payload["tools"] = tools
+        if options:
+            payload["options"] = options
+
+        async with httpx.AsyncClient(timeout=None) as client:
+            async with client.stream(
+                "POST", f"{self.host}/api/chat", json=payload
+            ) as resp:
+                resp.raise_for_status()
+                async for line in resp.aiter_lines():
+                    if line.strip():
+                        yield json.loads(line)
+
+
+ollama = OllamaClient()

backend/app/routes/models.py

@@ -0,0 +1,77 @@
+"""Routes liées à Ollama : statut de connexion, modèles, téléchargement."""
+from __future__ import annotations
+
+import json
+
+import httpx
+from fastapi import APIRouter
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+
+from ..config import settings
+from ..ollama_client import ollama
+
+router = APIRouter(prefix="/api", tags=["ollama"])
+
+
+@router.get("/status")
+async def status() -> dict:
+    """État de la connexion Ollama (point vert/rouge de la barre supérieure)."""
+    try:
+        version = await ollama.ping()
+        return {
+            "connected": True,
+            "host": ollama.host,
+            "version": version.get("version"),
+            "default_model": settings.default_model,
+        }
+    except (httpx.HTTPError, OSError) as exc:
+        return {
+            "connected": False,
+            "host": ollama.host,
+            "error": str(exc),
+            "default_model": settings.default_model,
+        }
+
+
+@router.get("/models")
+async def list_models() -> dict:
+    """Modèles installés localement, formatés pour le sélecteur de l'UI."""
+    try:
+        raw = await ollama.list_models()
+    except (httpx.HTTPError, OSError):
+        return {"models": []}
+
+    models = []
+    for m in raw:
+        details = m.get("details", {})
+        size_go = round(m.get("size", 0) / 1_000_000_000, 1)
+        models.append(
+            {
+                "name": m.get("name"),
+                "size_go": size_go,
+                "parameter_size": details.get("parameter_size"),
+                "quantization": details.get("quantization_level"),
+                "family": details.get("family"),
+            }
+        )
+    return {"models": models, "default": settings.default_model}
+
+
+class PullRequest(BaseModel):
+    name: str
+
+
+@router.post("/models/pull")
+async def pull_model(req: PullRequest) -> StreamingResponse:
+    """Télécharge un modèle en streamant la progression (SSE)."""
+
+    async def event_stream():
+        try:
+            async for chunk in ollama.pull_model(req.name):
+                yield f"data: {json.dumps(chunk)}\n\n"
+        except (httpx.HTTPError, OSError) as exc:
+            yield f"data: {json.dumps({'error': str(exc)})}\n\n"
+        yield "data: [DONE]\n\n"
+
+    return StreamingResponse(event_stream(), media_type="text/event-stream")

backend/requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+httpx==0.28.1
+pydantic==2.10.4
+pydantic-settings==2.7.1

docker-compose.yml

@@ -0,0 +1,36 @@
+services:
+  loki:
+    build: .
+    container_name: loki
+    ports:
+      - "${PORT:-8080}:8080"
+    environment:
+      - OLLAMA_HOST=${OLLAMA_HOST:-http://host.docker.internal:11434}
+      - DEFAULT_MODEL=${DEFAULT_MODEL:-llama3.1:8b}
+      - WORKSPACE_DIR=/workspace
+      - DATA_DIR=/data
+      - PORT=8080
+    volumes:
+      - ./workspace:/workspace
+      - ./data:/data
+    extra_hosts:
+      # Permet d'atteindre un Ollama installé sur la machine hôte
+      - "host.docker.internal:host-gateway"
+    restart: unless-stopped
+
+  # ── Ollama optionnel ──────────────────────────────────────────────────
+  # Par défaut, Loki se connecte à un Ollama déjà présent sur l'hôte.
+  # Pour embarquer Ollama dans la stack, lance :  docker compose --profile ollama up
+  # et règle OLLAMA_HOST=http://ollama:11434
+  ollama:
+    image: ollama/ollama:latest
+    container_name: loki-ollama
+    profiles: ["ollama"]
+    ports:
+      - "11434:11434"
+    volumes:
+      - ollama-models:/root/.ollama
+    restart: unless-stopped
+
+volumes:
+  ollama-models:

frontend/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <title>Loki — Agent local</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "loki-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { ActivityBar, type View } from "./components/ActivityBar";
+import { TopBar } from "./components/TopBar";
+import { LeftPanel } from "./panels/LeftPanel";
+import { ChatPanel } from "./panels/ChatPanel";
+import { PreviewPanel } from "./panels/PreviewPanel";
+import { SettingsView } from "./panels/SettingsView";
+import { useStore } from "./store/useStore";
+
+export default function App() {
+  const [view, setView] = useState<View>("chat");
+  const { refreshStatus, refreshModels } = useStore();
+
+  // Au démarrage : statut Ollama + liste des modèles. Poll du statut.
+  useEffect(() => {
+    refreshStatus();
+    refreshModels();
+    const id = setInterval(refreshStatus, 10000);
+    return () => clearInterval(id);
+  }, [refreshStatus, refreshModels]);
+
+  return (
+    <div className="flex h-full flex-col bg-base text-ink">
+      <TopBar />
+      <div className="flex min-h-0 flex-1">
+        <ActivityBar active={view} onChange={setView} />
+
+        {view === "settings" ? (
+          <SettingsView />
+        ) : (
+          <>
+            <LeftPanel />
+            <ChatPanel />
+            <PreviewPanel />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/api/client.ts

@@ -0,0 +1,69 @@
+/** Petit client API typé pour le backend Loki. */
+
+export interface OllamaStatus {
+  connected: boolean;
+  host: string;
+  version?: string;
+  error?: string;
+  default_model: string;
+}
+
+export interface OllamaModel {
+  name: string;
+  size_go: number;
+  parameter_size?: string;
+  quantization?: string;
+  family?: string;
+}
+
+export async function getStatus(): Promise<OllamaStatus> {
+  const res = await fetch("/api/status");
+  return res.json();
+}
+
+export async function getModels(): Promise<{
+  models: OllamaModel[];
+  default: string;
+}> {
+  const res = await fetch("/api/models");
+  return res.json();
+}
+
+/** Télécharge un modèle en streamant la progression via SSE. */
+export async function pullModel(
+  name: string,
+  onProgress: (status: string, percent: number) => void
+): Promise<void> {
+  const res = await fetch("/api/models/pull", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name }),
+  });
+  if (!res.body) 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 lines = buffer.split("\n\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      const data = line.replace(/^data: /, "").trim();
+      if (!data || data === "[DONE]") continue;
+      try {
+        const chunk = JSON.parse(data);
+        const percent =
+          chunk.total && chunk.completed
+            ? Math.round((chunk.completed / chunk.total) * 100)
+            : 0;
+        onProgress(chunk.status ?? "", percent);
+      } catch {
+        /* ligne partielle, ignorée */
+      }
+    }
+  }
+}

frontend/src/components/ActivityBar.tsx

@@ -0,0 +1,71 @@
+import {
+  ChatIcon,
+  ClockIcon,
+  FilesIcon,
+  NodesIcon,
+  SettingsIcon,
+} from "./Icon";
+
+export type View = "chat" | "history" | "files" | "tools" | "settings";
+
+const items: { id: View; icon: React.ReactNode }[] = [
+  { id: "chat", icon: <ChatIcon /> },
+  { id: "history", icon: <ClockIcon /> },
+  { id: "files", icon: <FilesIcon /> },
+  { id: "tools", icon: <NodesIcon /> },
+];
+
+/** Barre d'activité verticale (56px) à gauche. */
+export function ActivityBar({
+  active,
+  onChange,
+}: {
+  active: View;
+  onChange: (v: View) => void;
+}) {
+  return (
+    <div className="flex w-14 flex-none flex-col items-center gap-1 border-r border-line-soft bg-sunken py-3">
+      {items.map((it) => {
+        const on = active === it.id;
+        return (
+          <button
+            key={it.id}
+            onClick={() => onChange(it.id)}
+            className={`relative flex h-10 w-10 items-center justify-center rounded-[10px] ${
+              on ? "text-accent" : "text-muted-3 hover:text-ink-3"
+            }`}
+            style={on ? { background: "rgba(240,161,92,.14)" } : undefined}
+          >
+            {on && (
+              <span className="absolute left-[-12px] top-[11px] h-[18px] w-[3px] rounded bg-accent" />
+            )}
+            {it.icon}
+          </button>
+        );
+      })}
+
+      <div className="flex-1" />
+
+      <button
+        onClick={() => onChange("settings")}
+        className={`relative flex h-10 w-10 items-center justify-center rounded-[10px] ${
+          active === "settings" ? "text-accent" : "text-muted-3 hover:text-ink-3"
+        }`}
+        style={
+          active === "settings"
+            ? { background: "rgba(240,161,92,.14)" }
+            : undefined
+        }
+      >
+        {active === "settings" && (
+          <span className="absolute left-[-12px] top-[11px] h-[18px] w-[3px] rounded bg-accent" />
+        )}
+        <SettingsIcon />
+      </button>
+
+      <div className="mt-1 flex h-[30px] w-[30px] items-center justify-center rounded-full bg-[#3a332b] text-xs font-semibold text-ink-2">
+        M
+      </div>
+    </div>
+  );
+}

frontend/src/components/Icon.tsx

@@ -0,0 +1,104 @@
+/** Icônes SVG (style line, stroke) reprises du visuel. */
+type Props = { size?: number; className?: string };
+
+const base = (size: number, className?: string) => ({
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.7,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+  className,
+});
+
+export const ChatIcon = ({ size = 19, className }: Props) => (
+  <svg {...base(size, className)}>
+    <path d="M4 6h16v10H10l-4 3v-3H4z" />
+  </svg>
+);
+
+export const ClockIcon = ({ size = 19, className }: Props) => (
+  <svg {...base(size, className)}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V12l3 1.8" />
+  </svg>
+);
+
+export const FilesIcon = ({ size = 19, className }: Props) => (
+  <svg {...base(size, className)}>
+    <path d="M4 7h6l2 2h8v9H4z" />
+  </svg>
+);
+
+export const NodesIcon = ({ size = 19, className }: Props) => (
+  <svg {...base(size, className)}>
+    <circle cx="7" cy="7" r="2.4" />
+    <circle cx="17" cy="7" r="2.4" />
+    <circle cx="7" cy="17" r="2.4" />
+    <circle cx="17" cy="17" r="2.4" />
+  </svg>
+);
+
+export const SettingsIcon = ({ size = 18, className }: Props) => (
+  <svg {...base(size, className)}>
+    <line x1="4" y1="8" x2="20" y2="8" />
+    <line x1="4" y1="13" x2="20" y2="13" />
+    <line x1="4" y1="18" x2="20" y2="18" />
+  </svg>
+);
+
+export const ChevronDown = ({ size = 13, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={2}>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export const PlusIcon = ({ size = 13, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={2.2}>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+export const RefreshIcon = ({ size = 15, className }: Props) => (
+  <svg {...base(size, className)}>
+    <path d="M21 12a9 9 0 1 1-3-6.7M21 4v4h-4" />
+  </svg>
+);
+
+export const SendIcon = ({ size = 15, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={2.2}>
+    <path d="M5 12h14M13 6l6 6-6 6" />
+  </svg>
+);
+
+export const ClipIcon = ({ size = 16, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={1.8}>
+    <path d="M21 11.5 12 20a5 5 0 0 1-7-7l8.5-8.5a3.5 3.5 0 0 1 5 5L10 16" />
+  </svg>
+);
+
+export const DownloadIcon = ({ size = 14, className }: Props) => (
+  <svg {...base(size, className)} strokeWidth={1.9}>
+    <path d="M12 4v11m0 0 4-4m-4 4-4-4M5 20h14" />
+  </svg>
+);
+
+/** Logo Loki : carré dégradé + losange interne. */
+export const LokiMark = ({ size = 26 }: { size?: number }) => (
+  <div
+    className="flex items-center justify-center rounded-lg bg-accent-grad"
+    style={{ width: size, height: size }}
+  >
+    <div
+      className="bg-base"
+      style={{
+        width: size * 0.3,
+        height: size * 0.3,
+        borderRadius: 2,
+        transform: "rotate(45deg)",
+      }}
+    />
+  </div>
+);

frontend/src/components/ModelSelector.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+import { useStore } from "../store/useStore";
+import { ChevronDown } from "./Icon";
+
+/** Sélecteur de modèle Ollama (chip de la barre supérieure). */
+export function ModelSelector() {
+  const { models, selectedModel, setSelectedModel } = useStore();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex h-7 items-center gap-2 rounded-lg border border-line-strong bg-[#2a251f] px-[11px]"
+      >
+        <span className="h-1.5 w-1.5 rounded-full bg-accent" />
+        <span className="font-mono text-xs font-medium text-[#e7ddcd]">
+          {selectedModel || "—"}
+        </span>
+        <ChevronDown size={12} className="text-muted-2" />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-9 z-20 w-64 rounded-lg border border-line bg-card p-1 shadow-frame">
+          {models.length === 0 && (
+            <div className="px-3 py-2 text-xs text-muted-3">
+              Aucun modèle installé
+            </div>
+          )}
+          {models.map((m) => (
+            <button
+              key={m.name}
+              onClick={() => {
+                setSelectedModel(m.name);
+                setOpen(false);
+              }}
+              className={`flex w-full items-center gap-2 rounded-md px-2 py-2 text-left hover:bg-[#252019] ${
+                m.name === selectedModel ? "bg-[#252019]" : ""
+              }`}
+            >
+              <span
+                className={`h-1.5 w-1.5 rounded-full ${
+                  m.name === selectedModel ? "bg-accent" : "bg-muted-3"
+                }`}
+              />
+              <span className="flex-1 font-mono text-xs text-ink-2">
+                {m.name}
+              </span>
+              {m.size_go > 0 && (
+                <span className="font-mono text-[10px] text-muted-3">
+                  {m.size_go} Go
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/TopBar.tsx

@@ -0,0 +1,55 @@
+import { useStore } from "../store/useStore";
+import { ChevronDown, LokiMark } from "./Icon";
+import { ModelSelector } from "./ModelSelector";
+
+/** Barre supérieure : logo, fil d'Ariane, statut Ollama, sélecteur de modèle. */
+export function TopBar() {
+  const status = useStore((s) => s.status);
+  const connected = status?.connected ?? false;
+
+  return (
+    <div className="flex h-12 flex-none items-center gap-3.5 border-b border-line-strong bg-bar px-4">
+      <div className="flex items-center gap-2.5">
+        <LokiMark />
+        <div className="text-[15px] font-bold tracking-tight">Loki</div>
+        <div className="pt-px font-mono text-[11px] text-muted-3">
+          agent local
+        </div>
+      </div>
+
+      <div className="h-5 w-px bg-line-strong" />
+
+      <div className="flex items-center gap-2 text-[13px] font-medium text-ink-2">
+        <span>Nouvelle session</span>
+        <ChevronDown className="text-muted-3" />
+      </div>
+
+      <div className="flex-1" />
+
+      {/* Statut Ollama */}
+      <div
+        className="flex h-7 items-center gap-2 rounded-lg border border-line-strong bg-card-soft px-[11px]"
+        title={connected ? status?.host : status?.error}
+      >
+        <span
+          className={`h-[7px] w-[7px] rounded-full ${
+            connected ? "bg-ok" : "bg-warn"
+          }`}
+          style={
+            connected
+              ? { boxShadow: "0 0 0 3px rgba(134,199,154,.16)" }
+              : undefined
+          }
+        />
+        <span className="text-xs font-medium text-ink-3">Ollama</span>
+        <span className="font-mono text-[11px] text-muted-3">
+          {connected
+            ? status?.host.replace(/^https?:\/\//, "")
+            : "déconnecté"}
+        </span>
+      </div>
+
+      <ModelSelector />
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: #1a1714;
+  color: #efe9df;
+  font-family: "Hanken Grotesk", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Barres de défilement fidèles au visuel */
+.scr::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+.scr::-webkit-scrollbar-thumb {
+  background: #3a342c;
+  border-radius: 6px;
+}
+.scr::-webkit-scrollbar-track {
+  background: transparent;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/panels/ChatPanel.tsx

@@ -0,0 +1,83 @@
+import { useStore } from "../store/useStore";
+import { ClipIcon, LokiMark, SendIcon } from "../components/Icon";
+
+/** Panneau central : barre de contexte, fil de conversation, composer. */
+export function ChatPanel() {
+  const selectedModel = useStore((s) => s.selectedModel);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col bg-base">
+      {/* Barre de contexte */}
+      <div className="flex h-[42px] flex-none items-center gap-2 border-b border-line-soft px-[18px]">
+        <Chip>Invite système</Chip>
+        <Chip>
+          <span className="h-1.5 w-1.5 rounded-full bg-ok" />0 outil actif
+        </Chip>
+        <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>
+      </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.
+          </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>
+        </div>
+      </div>
+
+      {/* Composer */}
+      <div className="flex-none border-t border-line-soft px-7 pb-[18px] pt-3.5">
+        <div className="mx-auto max-w-[680px]">
+          <div className="rounded-[14px] border border-line-strong bg-card-soft p-[13px]">
+            <textarea
+              rows={1}
+              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"
+            />
+            <div className="mt-1.5 flex items-center gap-2">
+              <button className="flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-line-strong text-muted-2">
+                <ClipIcon />
+              </button>
+              <div className="flex h-[30px] items-center gap-1.5 rounded-lg border border-line-strong px-2.5 font-mono text-[11.5px] text-muted">
+                <span className="h-1.5 w-1.5 rounded-full bg-accent" />
+                {selectedModel || "—"}
+              </div>
+              <div className="flex-1" />
+              <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>
+            </div>
+          </div>
+        </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">
+      {children}
+    </div>
+  );
+}

frontend/src/panels/LeftPanel.tsx

@@ -0,0 +1,62 @@
+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() {
+  return (
+    <div className="flex w-[268px] flex-none flex-col border-r border-line-soft bg-panel">
+      {/* Historique */}
+      <div className="flex items-center justify-between px-4 pb-2.5 pt-4">
+        <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">
+          <PlusIcon />
+          Nouvelle
+        </span>
+      </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>
+        ))}
+      </div>
+
+      <div className="mx-4 my-3.5 h-px bg-line-soft" />
+
+      {/* Fichiers */}
+      <div className="flex items-center justify-between px-4 pb-2">
+        <span className="text-[11px] font-bold uppercase tracking-[.07em] text-label">
+          Fichiers
+        </span>
+        <span className="font-mono text-[10.5px] text-muted-4">workspace/</span>
+      </div>
+
+      <div className="scr flex-1 overflow-auto px-2.5 pb-3.5 font-mono text-xs">
+        <div className="px-2 py-4 text-center text-muted-3">
+          Aucun fichier pour l'instant.
+          <br />
+          L'agent créera des fichiers ici.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/panels/PreviewPanel.tsx

@@ -0,0 +1,61 @@
+/** Panneau droit : onglets Aperçu / Code / Logs + zone d'aperçu. */
+export function PreviewPanel() {
+  return (
+    <div className="flex w-[452px] flex-none flex-col border-l border-line-soft bg-panel">
+      {/* Onglets */}
+      <div className="flex h-[42px] flex-none items-center gap-1 border-b border-line-soft px-3.5 pr-2">
+        <div className="flex gap-0.5">
+          <Tab active>Aperçu</Tab>
+          <Tab>Code</Tab>
+          <Tab>
+            Logs
+            <span className="ml-1.5 rounded-[5px] bg-line-strong px-1.5 py-px font-mono text-[10px] text-muted">
+              0
+            </span>
+          </Tab>
+        </div>
+      </div>
+
+      {/* URL bar */}
+      <div className="flex flex-none items-center gap-2 px-3.5 py-[9px]">
+        <div className="flex h-[30px] flex-1 items-center gap-2 rounded-lg border border-line bg-sunken px-[11px]">
+          <span className="font-mono text-[11.5px] text-muted-3">
+            workspace/
+          </span>
+        </div>
+      </div>
+
+      {/* Viewport */}
+      <div className="scr mx-3.5 mb-3.5 flex-1 overflow-auto rounded-xl border border-line bg-[#faf6ef]">
+        <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
+          <div className="font-mono text-[11px] text-[#a98b63]">
+            [ aucun aperçu ]
+          </div>
+          <div className="max-w-[240px] text-xs text-[#8a7a66]">
+            L'aperçu HTML s'affichera ici dès que l'agent générera une page.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Tab({
+  children,
+  active,
+}: {
+  children: React.ReactNode;
+  active?: boolean;
+}) {
+  return (
+    <div
+      className={`flex h-7 items-center rounded-lg px-[13px] text-[12.5px] ${
+        active
+          ? "bg-[#252019] font-semibold text-ink"
+          : "font-medium text-muted-2"
+      }`}
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/panels/SettingsView.tsx

@@ -0,0 +1,273 @@
+import { useState } from "react";
+import { useStore } from "../store/useStore";
+import { pullModel } from "../api/client";
+import { DownloadIcon, RefreshIcon } from "../components/Icon";
+
+/** Vue Configuration (Frame 2) — Modèle & génération, outils, invite système. */
+export function SettingsView() {
+  const { models, selectedModel, setSelectedModel, refreshModels, status } =
+    useStore();
+
+  const [pullName, setPullName] = useState("");
+  const [pullStatus, setPullStatus] = useState<string | null>(null);
+  const [pullPct, setPullPct] = useState(0);
+
+  const doPull = async () => {
+    if (!pullName.trim()) return;
+    setPullStatus("démarrage…");
+    setPullPct(0);
+    try {
+      await pullModel(pullName.trim(), (s, p) => {
+        setPullStatus(s);
+        if (p) setPullPct(p);
+      });
+      setPullStatus("terminé");
+      await refreshModels();
+    } catch {
+      setPullStatus("échec");
+    }
+  };
+
+  return (
+    <div className="scr flex-1 overflow-auto px-[30px] py-[26px]">
+      <div className="mx-auto max-w-[1000px]">
+        {/* En-tête */}
+        <div className="mb-[22px] flex items-end justify-between">
+          <div>
+            <div className="text-xl font-bold tracking-tight">
+              Modèle &amp; génération
+            </div>
+            <div className="mt-1 text-[13px] text-muted-2">
+              Choisis le modèle local et règle son comportement.
+            </div>
+          </div>
+          <div className="flex items-center gap-1.5 font-mono text-[11.5px] text-ok">
+            <span className="h-1.5 w-1.5 rounded-full bg-ok" />
+            {status?.connected ? "Ollama connecté" : "Ollama déconnecté"}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 items-start gap-5">
+          {/* Modèle Ollama */}
+          <div className="rounded-card border border-line bg-card p-[18px]">
+            <div className="mb-3.5 flex items-center justify-between">
+              <div className="text-sm font-bold">Modèle Ollama</div>
+              <button
+                onClick={refreshModels}
+                className="flex h-[26px] items-center gap-1.5 rounded-[7px] border border-line-strong bg-base px-2.5 text-[11px] text-muted"
+              >
+                <RefreshIcon size={12} />
+                Actualiser
+              </button>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              {models.length === 0 && (
+                <div className="rounded-[11px] border border-line bg-base p-4 text-center text-xs text-muted-3">
+                  Aucun modèle installé. Télécharge-en un ci-dessous.
+                </div>
+              )}
+              {models.map((m) => {
+                const on = m.name === selectedModel;
+                return (
+                  <button
+                    key={m.name}
+                    onClick={() => setSelectedModel(m.name)}
+                    className="flex items-center gap-3 rounded-[11px] border p-3 text-left"
+                    style={{
+                      background: on ? "rgba(240,161,92,.10)" : "#1a1714",
+                      borderColor: on ? "rgba(240,161,92,.40)" : "#2c2720",
+                    }}
+                  >
+                    <span
+                      className="flex h-[18px] w-[18px] items-center justify-center rounded-full border-2"
+                      style={{ borderColor: on ? "#f0a15c" : "#4a443b" }}
+                    >
+                      {on && (
+                        <span className="h-2 w-2 rounded-full bg-accent" />
+                      )}
+                    </span>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-[13px] font-semibold text-ink">
+                          {m.name}
+                        </span>
+                        {m.name === status?.default_model && (
+                          <span
+                            className="rounded-[5px] px-1.5 py-px text-[10px] font-bold text-accent"
+                            style={{ background: "rgba(240,161,92,.14)" }}
+                          >
+                            PAR DÉFAUT
+                          </span>
+                        )}
+                      </div>
+                      <div className="mt-[3px] font-mono text-[10.5px] text-muted-2">
+                        {[
+                          m.size_go ? `${m.size_go} Go` : null,
+                          m.quantization,
+                          m.parameter_size,
+                          m.family,
+                        ]
+                          .filter(Boolean)
+                          .join(" · ")}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="my-4 h-px bg-line" />
+
+            <div className="mb-2.5 text-[11px] font-bold uppercase tracking-[.05em] text-label">
+              Télécharger un modèle
+            </div>
+            <div className="mb-3 flex gap-2">
+              <input
+                value={pullName}
+                onChange={(e) => setPullName(e.target.value)}
+                placeholder="gemma2:9b"
+                className="h-[34px] flex-1 rounded-[9px] border border-line-strong bg-base px-3 font-mono text-xs text-ink outline-none placeholder:text-muted-3"
+              />
+              <button
+                onClick={doPull}
+                className="flex h-[34px] items-center gap-1.5 rounded-[9px] border border-line-strong bg-[#2a251f] px-3.5 text-[12.5px] font-semibold text-[#e7ddcd]"
+              >
+                <DownloadIcon />
+                Récupérer
+              </button>
+            </div>
+
+            {pullStatus && (
+              <div className="rounded-[10px] border border-line bg-base p-3">
+                <div className="mb-2 flex items-center justify-between">
+                  <span className="font-mono text-xs text-ink-2">
+                    {pullName}
+                  </span>
+                  <span className="font-mono text-[11px] text-accent">
+                    {pullStatus} {pullPct ? `· ${pullPct}%` : ""}
+                  </span>
+                </div>
+                <div className="h-1.5 overflow-hidden rounded bg-line">
+                  <div
+                    className="h-full rounded bg-accent-grad transition-all"
+                    style={{ width: `${pullPct}%` }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Génération + Outils */}
+          <div className="flex flex-col gap-5">
+            <div className="rounded-card border border-line bg-card p-[18px]">
+              <div className="mb-4 text-sm font-bold">Génération</div>
+              <Slider label="Température" value="0.7" pct={35} />
+              <Slider label="Top-P" value="0.90" pct={90} />
+              <Slider label="Top-K" value="40" pct={40} />
+              <Slider label="Jetons max" value="2048" pct={25} last />
+            </div>
+
+            <div className="rounded-card border border-line bg-card p-[18px]">
+              <div className="mb-3.5 flex items-center justify-between">
+                <div className="text-sm font-bold">Outils de l'agent</div>
+                <span className="font-mono text-[11px] text-muted-2">
+                  bientôt
+                </span>
+              </div>
+              {[
+                ["read_file", "Lire un fichier du projet", true],
+                ["write_file", "Créer / modifier un fichier", true],
+                ["list_dir", "Lister un répertoire", true],
+                ["html_preview", "Aperçu HTML en direct", true],
+                ["web_search", "Recherche web", false],
+                ["run_shell", "Exécuter une commande · sensible", false],
+              ].map(([name, desc, on], i) => (
+                <div
+                  key={name as string}
+                  className={`flex items-center gap-3 py-[9px] ${
+                    i > 0 ? "border-t border-line-soft" : ""
+                  }`}
+                >
+                  <span className="w-32 flex-none font-mono text-[12.5px] text-ink-2">
+                    {name}
+                  </span>
+                  <span className="flex-1 text-xs text-muted-2">{desc}</span>
+                  <span
+                    className="relative h-5 w-[34px] rounded-full"
+                    style={{ background: on ? "#f0a15c" : "#3a342c" }}
+                  >
+                    <span
+                      className="absolute top-0.5 h-4 w-4 rounded-full"
+                      style={{
+                        background: on ? "#1f1b16" : "#6f675c",
+                        left: on ? "auto" : "2px",
+                        right: on ? "2px" : "auto",
+                      }}
+                    />
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Invite système */}
+        <div className="mt-5 rounded-card border border-line bg-card p-[18px]">
+          <div className="mb-3 flex items-center justify-between">
+            <div className="text-sm font-bold">Invite système</div>
+            <span className="font-mono text-[11px] text-muted-2">
+              éditeur à venir
+            </span>
+          </div>
+          <div className="rounded-[10px] border border-line bg-sunken p-4 font-mono text-[12.5px] leading-[1.7] text-ink-3">
+            <span className="text-ok"># Rôle</span>
+            <br />
+            Tu es un assistant de développement local. Tu travailles dans le
+            dossier <span className="text-accent">workspace/</span> et tu écris
+            du code clair, commenté en français.
+            <br />
+            <br />
+            <span className="text-ok"># Règles</span>
+            <br />
+            — Demande confirmation avant toute commande shell.
+            <br />— Après chaque écriture de fichier, propose un aperçu.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Slider({
+  label,
+  value,
+  pct,
+  last,
+}: {
+  label: string;
+  value: string;
+  pct: number;
+  last?: boolean;
+}) {
+  return (
+    <div className={last ? "" : "mb-4"}>
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[13px] text-ink-2">{label}</span>
+        <span className="font-mono text-xs font-semibold text-accent">
+          {value}
+        </span>
+      </div>
+      <div className="relative h-1.5 rounded bg-line">
+        <div
+          className="absolute left-0 top-0 h-1.5 rounded bg-accent"
+          style={{ width: `${pct}%` }}
+        />
+        <div
+          className="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-[3px] border-card bg-accent"
+          style={{ left: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/store/useStore.ts

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import {
+  getModels,
+  getStatus,
+  type OllamaModel,
+  type OllamaStatus,
+} from "../api/client";
+
+interface LokiState {
+  status: OllamaStatus | null;
+  models: OllamaModel[];
+  selectedModel: string;
+  loadingModels: boolean;
+
+  setSelectedModel: (name: string) => void;
+  refreshStatus: () => Promise<void>;
+  refreshModels: () => Promise<void>;
+}
+
+export const useStore = create<LokiState>((set, get) => ({
+  status: null,
+  models: [],
+  selectedModel: "",
+  loadingModels: false,
+
+  setSelectedModel: (name) => set({ selectedModel: name }),
+
+  refreshStatus: async () => {
+    try {
+      const status = await getStatus();
+      set({ status });
+      if (!get().selectedModel && status.default_model) {
+        set({ selectedModel: status.default_model });
+      }
+    } catch {
+      set({ status: { connected: false, host: "", default_model: "" } });
+    }
+  },
+
+  refreshModels: async () => {
+    set({ loadingModels: true });
+    try {
+      const { models, default: def } = await getModels();
+      set({ models });
+      if (!get().selectedModel && def) set({ selectedModel: def });
+    } finally {
+      set({ loadingModels: false });
+    }
+  },
+}));

frontend/tailwind.config.ts

@@ -0,0 +1,59 @@
+import type { Config } from "tailwindcss";
+
+/**
+ * Système de design « Loki » — extrait fidèlement du visuel Atelier_Agent.
+ * Thème sombre chaleureux (café / ambre).
+ */
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        // Fonds
+        base: "#1a1714",
+        bar: "#1d1a15",
+        panel: "#1c1814",
+        sunken: "#161310",
+        // Surfaces / cartes
+        card: "#211d18",
+        "card-soft": "#221e18",
+        "card-deep": "#1f1b16",
+        // Bordures
+        line: "#2c2720",
+        "line-soft": "#262219",
+        "line-strong": "#322d26",
+        // Accent ambre
+        accent: "#f0a15c",
+        "accent-1": "#f4ad6c",
+        "accent-2": "#df7c4c",
+        // Statuts
+        ok: "#86c79a",
+        info: "#5b8fb0",
+        warn: "#c98b5b",
+        // Textes
+        ink: "#efe9df",
+        "ink-2": "#cfc5b6",
+        "ink-3": "#bdb3a4",
+        muted: "#9a9082",
+        "muted-2": "#8a8175",
+        "muted-3": "#766d60",
+        "muted-4": "#6a6256",
+        label: "#7a7164",
+      },
+      fontFamily: {
+        sans: ['"Hanken Grotesk"', "system-ui", "sans-serif"],
+        mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
+      },
+      borderRadius: {
+        card: "14px",
+      },
+      boxShadow: {
+        frame: "0 24px 60px rgba(0,0,0,.35)",
+      },
+      backgroundImage: {
+        "accent-grad": "linear-gradient(140deg, #f4ad6c, #df7c4c)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

frontend/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// En dev, on proxifie /api vers le backend FastAPI (port 8080).
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:8080",
+    },
+  },
+});