mirror of
https://github.com/R0m1k3/Loki.git
synced 2026-10-11 17:26:57 +02:00
Claude
7615bcfbbb
Reprend les jetons de « Loki App.dc.html » : fond gris froid #f7f8fa, surfaces blanches, accent bleu ardoise #2f4a7a (au lieu de l'orange), filets 1 px #e3e6eb (au lieu des bordures noires 3 px) et ombres douces diffuses (au lieu des ombres dures décalées). - tailwind.config.ts : les NOMS de jetons sont conservés, seules leurs valeurs basculent — toute l'interface suit sans réécrire les composants. Les jetons historiquement sombres (card-deep, on-dark…) deviennent la surface sélectionnée claire et son encre. - Police unique Inter ; l'ex-« font-pixel » devient le kicker de la maquette (petites capitales espacées de 0.14em), donc les libellés existants suivent sans modification. - Conversion mécanique des filets 3 px / 2 px vers 1 px, séparateurs épais affinés, logo et avatar refaits selon la maquette (carré teinté à filet accent), couleurs « papier » de l'aperçu passées en jetons. - Texte blanc corrigé partout où il reposait sur une surface devenue claire ; conservé sur les fonds accent/warn où il reste lisible. Vérifié au rendu : body #f7f8fa, encre #1c2536, surface #ffffff, Inter ; plus aucune trace d'orange, de noir #18181b ni d'ombre dure. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useStore } from "../store/useStore";
|
|
import { getVersion } from "../api/client";
|
|
import { LokiMark } from "./Icon";
|
|
import { SessionMenu } from "./SessionMenu";
|
|
|
|
/** Barre supérieure sombre : logo, fil d'Ariane, statut Ollama, sélecteur. */
|
|
export function TopBar() {
|
|
const status = useStore((s) => s.status);
|
|
const stats = useStore((s) => s.systemStats);
|
|
const connected = status?.connected ?? false;
|
|
const [version, setVersion] = useState("");
|
|
|
|
useEffect(() => {
|
|
getVersion().then(setVersion);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex h-[54px] flex-none items-center gap-3.5 border-b border-line bg-bar px-4">
|
|
<div className="flex items-center gap-2.5">
|
|
<LokiMark />
|
|
<div className="font-pixel text-[14px] text-ink">LOKI</div>
|
|
<div
|
|
className="text-[13px] leading-none text-on-dark-2"
|
|
title={version ? `build ${version}` : undefined}
|
|
>
|
|
agent local
|
|
{version && version !== "dev" && (
|
|
<span className="ml-1.5 text-on-dark-3">· {version.slice(0, 7)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-6 w-[3px] bg-chrome-3" />
|
|
|
|
<SessionMenu />
|
|
|
|
<div className="flex-1" />
|
|
|
|
{/* Stats système temps réel : CPU, RAM, GPU/VRAM */}
|
|
{stats && (
|
|
<div className="flex h-8 items-center gap-2.5 border border-chrome-3 bg-chrome-2 px-[11px] text-[13px] text-on-dark">
|
|
<span>CPU {stats.cpu_pct.toFixed(0)}%</span>
|
|
<span className="text-on-dark-3">·</span>
|
|
<span>RAM {stats.ram_pct.toFixed(0)}%</span>
|
|
{stats.gpu && (
|
|
<>
|
|
<span className="text-on-dark-3">·</span>
|
|
<span>GPU {stats.gpu.util_pct.toFixed(0)}%</span>
|
|
<span className="text-on-dark-3">
|
|
VRAM {(stats.gpu.vram_used_mb / 1024).toFixed(1)}/
|
|
{(stats.gpu.vram_total_mb / 1024).toFixed(1)}G
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Statut Ollama */}
|
|
<div
|
|
className="flex h-8 items-center gap-2 border border-chrome-3 bg-chrome-2 px-[11px]"
|
|
title={connected ? status?.host : status?.error}
|
|
>
|
|
<span
|
|
className={`h-[11px] w-[11px] border border-line ${
|
|
connected ? "bg-ok" : "bg-warn"
|
|
}`}
|
|
/>
|
|
<span className="text-[13px] text-on-dark">Ollama</span>
|
|
<span className="text-[13px] text-on-dark-3">
|
|
{connected ? status?.host.replace(/^https?:\/\//, "") : "déconnecté"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|