nntrivi2001
4aae61297f
Analytics parity phases 2–7 (docs/plans/analytics-parity/), built on
138e706 and ported onto v2.3.1:
- Cost by AI tool (?tool= on cost/analytics/stats/workflows, by_tool,
Codex fast/priority and flex tiers, agenthub_cost_usd_total{tool,model})
- Date ranges (from/to) on cost/analytics/workflows; Analytics range select
with Today / This week (Monday) / This month (1st) / 7d / 30d / 90d / All /
Custom; workflow filters carried into workflow-stats.js (read worker)
- Budgets and cost alerts as alert rule types (alert_rules rebuilt without
its rule_type CHECK), GET /api/budgets/status, rule preview, spend pace,
status-bar budget chip; rules stay editable in place
- Query Explorer (/query, allowlisted sort, CSV/JSON export) and scheduled
reports (report_definitions/report_runs, Settings → Reports)
- Session Replay tab and immutable snapshots (session_snapshots, /snapshot/:token)
- Remote Codex sync, push ingest with a hashed token, privacy redaction and
ignored folders (Settings → Data), Cursor sessions (no cost)
- Read-only MCP server, statusline, Grafana/Prometheus files
Also: resizable sidebar, pet run/wave animations, the workspace home keeps a
half-typed prompt, and the pre-commit hook runs only the related tests for a
small commit.
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
/**
|
|
* @file SnapshotButton.tsx
|
|
* @description The session analysis page's **Snapshot** action: confirms with a
|
|
* "redact file paths" choice, freezes the session through `POST
|
|
* /api/snapshots`, copies the `/snapshot/<token>` link and offers it inline.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Camera } from "lucide-react";
|
|
import { api } from "../lib/api";
|
|
import { ConfirmModal } from "./ConfirmModal";
|
|
import { Checkbox } from "./Checkbox";
|
|
import { CopyButton } from "./event-views/primitives";
|
|
|
|
export function snapshotUrl(token: string): string {
|
|
return `${window.location.origin}/snapshot/${token}`;
|
|
}
|
|
|
|
export function SnapshotButton({ sessionId }: { sessionId: string }) {
|
|
const { t } = useTranslation("sessions");
|
|
const [open, setOpen] = useState(false);
|
|
const [redact, setRedact] = useState(true);
|
|
const [busy, setBusy] = useState(false);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const create = async () => {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
|
|
setToken(snapshot.token);
|
|
navigator.clipboard?.writeText(snapshotUrl(snapshot.token)).catch(() => undefined);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setBusy(false);
|
|
setOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-end gap-1">
|
|
{token && (
|
|
<span className="inline-flex items-center gap-1 text-xs text-fg-secondary">
|
|
<Link to={`/snapshot/${token}`} className="text-accent hover:underline">
|
|
{t("snapshot.open")}
|
|
</Link>
|
|
<CopyButton text={snapshotUrl(token)} />
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
title={t("snapshot.hint")}
|
|
className="btn-ghost text-xs"
|
|
>
|
|
<Camera className="h-4 w-4" />
|
|
{t("snapshot.create")}
|
|
</button>
|
|
{error && (
|
|
<p role="alert" className="basis-full text-right text-[11px] text-status-danger">
|
|
{error}
|
|
</p>
|
|
)}
|
|
<ConfirmModal
|
|
open={open}
|
|
title={t("snapshot.title")}
|
|
message={t("snapshot.body")}
|
|
confirmLabel={t("snapshot.confirm")}
|
|
cancelLabel={t("snapshot.cancel")}
|
|
destructive={false}
|
|
busy={busy}
|
|
onConfirm={() => void create()}
|
|
onCancel={() => setOpen(false)}
|
|
>
|
|
<Checkbox checked={redact} onChange={setRedact} label={t("snapshot.redactPaths")} />
|
|
</ConfirmModal>
|
|
</div>
|
|
);
|
|
}
|