mirror of
https://github.com/R0m1k3/Loki.git
synced 2026-10-16 19:59:56 +02:00
Claude
b3835e7977
Remaniement de la navigation selon « Loki App.dc.html » : le rail d'icônes de 60 px et le panneau de sessions laissent place à UNE barre latérale de 264 px — marque, navigation libellée (Demander, Historique, Fichiers, Outils), section Configuration, état Ollama avec jauge VRAM et carte de compte. La marque quitte la barre supérieure, qui ne garde que le contexte de la conversation. Les sessions restent accessibles par le sélecteur de la barre supérieure, et les fichiers par la vue Fichiers. Performance : l'inventaire du workspace n'est plus injecté à CHAQUE message, seulement quand la demande touche au code ou qu'un travail de code est en cours. Un simple « bonjour » partait avec des milliers de jetons de contexte, d'où une longue phase de traitement avant le premier jeton. L'attente avant le premier jeton affiche désormais le modèle en cours de chargement et le temps écoulé, au lieu de rester figée sur « Connexion à Ollama… » sans distinguer lenteur et blocage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useStore } from "../store/useStore";
|
|
import { getVersion } from "../api/client";
|
|
import { SessionMenu } from "./SessionMenu";
|
|
|
|
/** Barre supérieure : conversation courante, ressources, statut Ollama. */
|
|
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">
|
|
{/* La marque vit désormais dans la barre latérale : on ne garde ici que
|
|
le contexte de la conversation en cours. */}
|
|
<SessionMenu />
|
|
{version && version !== "dev" && (
|
|
<span
|
|
className="text-[12px] text-muted-3"
|
|
title={`build ${version}`}
|
|
>
|
|
{version.slice(0, 7)}
|
|
</span>
|
|
)}
|
|
|
|
<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>
|
|
);
|
|
}
|