Hermes
4f5fde34a3
- New visual identity: solid dark cards, purple accent, iOS-like feel - Session replay: newest messages first, message input with send button - Chat proxy route for sending messages to sessions - systemd user service with deploy script - All pages restyled: Pulse, Memory, History, Skills, Cron, Soul, Config
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useMemory } from "@/lib/hooks";
|
|
|
|
function Bar({ label, usage }: { label: string; usage: string }) {
|
|
const pctMatch = usage.match(/(\d+)%/);
|
|
const pct = pctMatch ? parseInt(pctMatch[1]) : 0;
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[12px] w-12" style={{ color: "var(--text-2)" }}>{label}</span>
|
|
<div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
|
|
<div
|
|
className="h-full rounded-full transition-all"
|
|
style={{
|
|
width: pct + "%",
|
|
background: pct > 85 ? "#ff3b30" : "var(--accent)",
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className="text-[11px] font-mono w-10 text-right" style={{ color: "var(--text-3)" }}>
|
|
{pct}%
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MemorySnapshotCard() {
|
|
const { data } = useMemory();
|
|
const mem = data?.targets?.find((t) => t.target === "memory");
|
|
const usr = data?.targets?.find((t) => t.target === "user");
|
|
|
|
return (
|
|
<Link href="/memory">
|
|
<div className="card card-hover p-4 space-y-2 transition-colors">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[13px] font-medium" style={{ color: "var(--text-1)" }}>Memory</span>
|
|
<span className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
|
{(mem?.entry_count || 0) + (usr?.entry_count || 0)} entries
|
|
</span>
|
|
</div>
|
|
{mem && <Bar label="Agent" usage={mem.usage} />}
|
|
{usr && <Bar label="User" usage={usr.usage} />}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|