Hermes
50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ChevronRight } 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 || "Untitled session";
|
|
const cost = session.estimated_cost_usd;
|
|
|
|
return (
|
|
<Link href={`/history/${session.id}`}>
|
|
<div className="flex items-center gap-3 py-3 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[14px] text-[var(--text-1)] truncate">{title}</div>
|
|
<div className="flex items-center gap-2 mt-0.5 flex-wrap">
|
|
<span className={`badge ${platformBadgeClass(session.source)}`}>
|
|
{session.source}
|
|
</span>
|
|
<span className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
|
{session.message_count} msgs
|
|
</span>
|
|
{session.model && (
|
|
<span className="text-[11px] font-mono" style={{ color: "var(--text-3)" }}>
|
|
{session.model.split("/").pop()?.replace("claude-", "").slice(0, 12)}
|
|
</span>
|
|
)}
|
|
{tokens > 0 && (
|
|
<span className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
|
{formatTokens(tokens)}
|
|
</span>
|
|
)}
|
|
{cost != null && cost > 0 && (
|
|
<span className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
|
${cost.toFixed(2)}
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] ml-auto" style={{ color: !session.ended_at ? "var(--accent)" : "var(--text-3)" }}>
|
|
{timeAgo(session.started_at, !session.ended_at)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ChevronRight size={16} style={{ color: "var(--text-3)" }} />
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|