AgentHub/client/src/pages/SnapshotView.tsx

/**
 * @file SnapshotView.tsx
 * @description The read-only page `/snapshot/:token`: a session as it was frozen
 * by `POST /api/snapshots` — header, SessionOverview fed the frozen stats, the
 * agents, and the Replay / Timeline tabs over the frozen events. Nothing here
 * reads live data.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Bot, Camera, Clock, DollarSign, Film, List, ShieldCheck } from "lucide-react";
import { api } from "../lib/api";
import type { AgentInfo } from "../lib/event-grouping";
import { formatDateTime, fmtCostFull } from "../lib/format";
import type { SessionSnapshotInfo, SessionSnapshotPayload } from "../lib/types";
import { SessionOverview } from "../components/SessionOverview";
import { AgentCard } from "../components/AgentCard";
import { EventTimeline } from "../components/EventTimeline";
import { EventReplay } from "../components/EventReplay";
import { SessionStatusBadge } from "../components/StatusBadge";
import { Skeleton } from "../components/Skeleton";

type Tab = "overview" | "replay" | "timeline";

export function SnapshotView() {
  const { token = "" } = useParams<{ token: string }>();
  const { t } = useTranslation("sessions");
  const [data, setData] = useState<{
    snapshot: SessionSnapshotInfo;
    payload: SessionSnapshotPayload;
  } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [tab, setTab] = useState<Tab>("overview");

  useEffect(() => {
    let live = true;
    setData(null);
    setError(null);
    api.snapshots
      .get(token)
      .then((r) => live && setData(r))
      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
    return () => {
      live = false;
    };
  }, [token]);

  const payload = data?.payload;
  const agentInfoById = useMemo(() => {
    const map = new Map<string, AgentInfo>();
    for (const a of payload?.agents ?? []) map.set(a.id, a);
    return map;
  }, [payload]);
  const sessionNameById = useMemo(() => {
    const s = payload?.session;
    return new Map(s ? [[s.id, s.name?.trim() || `Session ${s.id.slice(0, 8)}`]] : []);
  }, [payload]);

  if (error) {
    return (
      <div className="py-20 text-center">
        <p className="mb-2 text-status-danger">{t("snapshot.notFound")}</p>
        <p className="text-xs text-fg-muted">{error}</p>
      </div>
    );
  }
  if (!payload) {
    return (
      <div className="space-y-4" aria-busy="true">
        <Skeleton className="h-6 w-64" />
        <Skeleton className="h-24 w-full" />
      </div>
    );
  }

  const { session, agents, events, stats, cost } = payload;
  const tabs: { id: Tab; label: string; Icon: typeof Bot }[] = [
    { id: "overview", label: `${t("detail.agents")} (${agents.length})`, Icon: Bot },
    { id: "replay", label: t("replay.tab"), Icon: Film },
    { id: "timeline", label: t("snapshot.timeline", { n: events.length }), Icon: List },
  ];

  return (
    <div className="animate-fade-in space-y-6">
      <div className="flex items-start gap-3 rounded-lg border border-accent/30 bg-accent/10 px-4 py-2.5 text-sm">
        <Camera className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
        <div className="min-w-0 flex-1">
          <div className="font-medium text-fg-primary">
            {t("snapshot.banner", { date: formatDateTime(payload.captured_at) })}
          </div>
          <div className="text-[11px] text-fg-muted">{t("snapshot.bannerBody")}</div>
        </div>
        {payload.redacted.file_paths && (
          <span className="inline-flex items-center gap-1 text-[11px] text-fg-secondary">
            <ShieldCheck className="h-3.5 w-3.5" />
            {t("snapshot.redacted")}
          </span>
        )}
        <Link to={`/sessions/${session.id}`} className="text-[11px] text-accent hover:underline">
          {t("snapshot.openLive")}
        </Link>
      </div>

      <div>
        <div className="mb-2 flex items-center gap-3">
          <h2 className="text-xl font-semibold text-fg-primary">
            {session.name || `${t("defaultName")}${session.id.slice(0, 8)}`}
          </h2>
          <SessionStatusBadge status={session.status} />
        </div>
        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
          <span className="rounded bg-surface-2 px-2 py-1 font-mono text-xs text-fg-muted">
            {session.id.slice(0, 16)}
          </span>
          <span className="inline-flex items-center gap-1.5 rounded bg-surface-2 px-2 py-1 text-xs text-fg-secondary">
            <Clock className="h-3 w-3 text-fg-muted" />
            {formatDateTime(session.started_at)}
          </span>
          {cost.total_cost > 0 && (
            <span className="inline-flex items-center gap-1.5 rounded bg-status-success/10 px-2 py-1 text-xs font-medium text-status-success">
              <DollarSign className="h-3 w-3" />
              {fmtCostFull(cost.total_cost).slice(1)}
            </span>
          )}
        </div>
      </div>

      <div className="flex items-center gap-1 border-b border-border">
        {tabs.map(({ id, label, Icon }) => (
          <button
            key={id}
            type="button"
            onClick={() => setTab(id)}
            className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
              tab === id
                ? "border-violet-500 text-violet-700 dark:text-violet-400"
                : "border-transparent text-fg-muted hover:text-fg-secondary"
            }`}
          >
            <Icon className="h-4 w-4" />
            {label}
          </button>
        ))}
      </div>

      {tab === "overview" && (
        <div>
          {/* Frozen: its duration ends at the capture, not at "now". */}
          <SessionOverview
            session={{ ...session, ended_at: session.ended_at ?? payload.captured_at }}
            agents={agents}
            stats={stats}
          />
          <div className="space-y-2">
            {[...agents]
              .sort((a, b) => (a.started_at || "").localeCompare(b.started_at || ""))
              .map((a) => (
                <AgentCard
                  key={a.id}
                  agent={a}
                  session={{ ...session, cost: cost.total_cost }}
                  // Without a handler the card opens the LIVE session.
                  onClick={() => undefined}
                />
              ))}
          </div>
        </div>
      )}
      {tab === "replay" && (
        <EventReplay
          events={events}
          agentInfoById={agentInfoById}
          sessionNameById={sessionNameById}
        />
      )}
      {tab === "timeline" &&
        (events.length === 0 ? (
          <p className="text-sm text-fg-muted">{t("detail.noEvents")}</p>
        ) : (
          <EventTimeline
            events={[...events].reverse()}
            agentInfoById={agentInfoById}
            sessionNameById={sessionNameById}
            fallbackCwd={session.cwd}
          />
        ))}
    </div>
  );
}