Hermes
517583d1c4
- Mobile-first PWA with dark glassmorphic theme - Pulse: status card, recent sessions, memory snapshot - Memory: view/edit agent + user memory with usage bars - History: session list, platform filter, search, session replay - TanStack Query hooks for all Hermes WebAPI endpoints - Bottom tab navigation, safe-area support
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { MessageSquare } from "lucide-react";
|
|
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
|
|
import type { Session } from "@/lib/types";
|
|
|
|
export function SessionCard({ session }: { session: Session }) {
|
|
const tokens = session.input_tokens + session.output_tokens;
|
|
const title = session.title || `Session ${session.id.slice(0, 8)}`;
|
|
|
|
return (
|
|
<Link href={`/history/${session.id}`}>
|
|
<div className="glass glass-hover p-4 transition-all">
|
|
<div className="flex items-start justify-between gap-2 mb-2">
|
|
<span className="text-sm font-medium text-zinc-200 line-clamp-1 flex-1">
|
|
{title}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 font-medium ${platformBadgeClass(session.source)}`}
|
|
>
|
|
{session.source}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-zinc-500">
|
|
<span className="flex items-center gap-1">
|
|
<MessageSquare size={12} />
|
|
{session.message_count}
|
|
</span>
|
|
{tokens > 0 && <span>{formatTokens(tokens)} tok</span>}
|
|
<span className="ml-auto">{timeAgo(session.started_at)}</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|