mirror of
https://github.com/R0m1k3/Loki.git
synced 2026-10-11 17:26:57 +02:00
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:
34 files changed
+4343
No files matched your search
@@ -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>
|
||||
Generated
+2810
File diff suppressed because it is too large.
Load diff
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 & 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>
|
||||
);
|
||||
}
|
||||
@@ -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 });
|
||||
}
|
||||
},
|
||||
}));
|
||||
@@ -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;
|
||||
@@ -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"]
|
||||
}
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user