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
This commit is contained in:
MichaelandClaude Opus 4.8 committed 2026-06-29 16:51:25 +00:00
commit 3ad37ae2c7
34 files changed
+4343

No files matched your search

+18
View File
@@ -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>
+2810
View File
File diff suppressed because it is too large. Load diff
+26
View File
@@ -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"
}
}
+6
View File
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
+40
View File
@@ -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>
);
}
+69
View File
@@ -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 */
}
}
}
}
+71
View File
@@ -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>
);
}
+104
View File
@@ -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>
);
+69
View File
@@ -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>
);
}
+55
View File
@@ -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>
);
}
+30
View File
@@ -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;
}
+10
View File
@@ -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>
);
+83
View File
@@ -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>
);
}
+62
View File
@@ -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>
);
}
+61
View File
@@ -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>
);
}
+273
View File
@@ -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>
);
}
+50
View File
@@ -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 });
}
},
}));
+59
View File
@@ -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;
+20
View File
@@ -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"]
}
+13
View File
@@ -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",
},
},
});