Hermes
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Puzzle, Timer, Sparkles, Settings, MessageCircle } from "lucide-react";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { StatusCard } from "@/components/StatusCard";
|
|
import { StatsCard } from "@/components/StatsCard";
|
|
import { SessionCard } from "@/components/SessionCard";
|
|
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
|
|
import { PlatformBreakdown } from "@/components/PlatformBreakdown";
|
|
import { useSessions } from "@/lib/hooks";
|
|
import { usePullToRefresh } from "@/lib/usePullToRefresh";
|
|
|
|
const QUICK_LINKS = [
|
|
{ href: "/skills", label: "Skills", icon: Puzzle },
|
|
{ href: "/cron", label: "Cron", icon: Timer },
|
|
{ href: "/soul", label: "Soul", icon: Sparkles },
|
|
{ href: "/config", label: "Config", icon: Settings },
|
|
] as const;
|
|
|
|
export default function PulsePage() {
|
|
const qc = useQueryClient();
|
|
const { data: sessionsData, isLoading } = useSessions(8);
|
|
|
|
usePullToRefresh(() => { qc.invalidateQueries(); });
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<StatusCard />
|
|
<StatsCard />
|
|
<MemorySnapshotCard />
|
|
<PlatformBreakdown />
|
|
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{QUICK_LINKS.map(({ href, label, icon: Icon }) => (
|
|
<Link key={href} href={href}>
|
|
<div className="card card-hover p-3 flex flex-col items-center gap-1 transition-colors">
|
|
<Icon size={18} style={{ color: "var(--accent)" }} />
|
|
<span className="text-[11px]" style={{ color: "var(--text-2)" }}>{label}</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="section-label mb-2">Recent</div>
|
|
{isLoading ? (
|
|
<div className="space-y-1">
|
|
{[...Array(3)].map((_, i) => (
|
|
<div key={i} className="py-3 animate-pulse">
|
|
<div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
|
|
<div className="h-3 rounded w-1/2" style={{ background: "var(--bg-raised)" }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{sessionsData?.items?.map((s) => (
|
|
<SessionCard key={s.id} session={s} />
|
|
))}
|
|
{sessionsData?.items?.length === 0 && (
|
|
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
|
|
No sessions yet
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick chat FAB */}
|
|
<Link
|
|
href="/history/new"
|
|
className="fixed right-5 z-40 flex items-center justify-center w-14 h-14 rounded-full shadow-lg active:scale-90 transition-transform"
|
|
style={{ background: "var(--accent)", bottom: "calc(5.5rem + var(--safe-bottom))" }}
|
|
>
|
|
<MessageCircle size={22} color="white" />
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|