feat: analytics parity — tool cost, date ranges, budgets, query explorer, replay, snapshots (v2.4.0)
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.
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* @file SnapshotSettings.tsx
|
||||
* @description Settings → Snapshots: every frozen session (`GET
|
||||
* /api/snapshots`), each with Open, Copy link and a confirmed Delete — the
|
||||
* buttons and the same actions on a right-click menu. Snapshots survive Clear
|
||||
* Data, so this is the one place they go away.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ExternalLink, ShieldCheck, Trash2 } from "lucide-react";
|
||||
import { api } from "../../lib/api";
|
||||
import { formatDateTime } from "../../lib/format";
|
||||
import type { SessionSnapshotInfo } from "../../lib/types";
|
||||
import { ConfirmModal } from "../ConfirmModal";
|
||||
import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
|
||||
import { CopyButton } from "../event-views/primitives";
|
||||
import { snapshotUrl } from "../SnapshotButton";
|
||||
import { SettingsSection } from "./SettingsRow";
|
||||
|
||||
export function SnapshotSettings() {
|
||||
const { t } = useTranslation("settings");
|
||||
const [items, setItems] = useState<SessionSnapshotInfo[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState<SessionSnapshotInfo | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const ctx = useContextMenu<SessionSnapshotInfo>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const load = useCallback(() => {
|
||||
api.snapshots
|
||||
.list()
|
||||
.then((r) => setItems(r.snapshots))
|
||||
.catch((err) => setError(err instanceof Error ? err.message : String(err)));
|
||||
}, []);
|
||||
useEffect(load, [load]);
|
||||
|
||||
const remove = async () => {
|
||||
if (!deleting) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.snapshots.remove(deleting.id);
|
||||
setItems((xs) => xs?.filter((x) => x.id !== deleting.id) ?? null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
setDeleting(null);
|
||||
}
|
||||
};
|
||||
const pick = (fn: (s: SessionSnapshotInfo) => void) => () => {
|
||||
const s = ctx.menu?.item;
|
||||
ctx.close();
|
||||
if (s) fn(s);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsSection title={t("snapshots.title")} description={t("snapshots.description")}>
|
||||
{error && (
|
||||
<p role="alert" className="py-2 text-xs text-status-danger">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{items?.length === 0 && <p className="py-2 text-sm text-fg-muted">{t("snapshots.empty")}</p>}
|
||||
{items && items.length > 0 && (
|
||||
<ul className="divide-y divide-border/60" data-testid="snapshot-list">
|
||||
{items.map((s) => (
|
||||
<li
|
||||
key={s.id}
|
||||
onContextMenu={(e) => ctx.open(e, s)}
|
||||
className="flex items-center gap-3 py-2.5"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm text-fg-secondary">
|
||||
{s.session_name || s.session_id.slice(0, 8)}
|
||||
</p>
|
||||
<p className="flex items-center gap-2 text-[11px] text-fg-muted">
|
||||
<span>{formatDateTime(s.created_at)}</span>
|
||||
<span>· {t("snapshots.events", { n: s.event_count ?? 0 })}</span>
|
||||
{s.redacted && (
|
||||
<span
|
||||
className="inline-flex items-center gap-0.5"
|
||||
title={t("snapshots.redacted")}
|
||||
>
|
||||
<ShieldCheck className="h-3 w-3" />
|
||||
{t("snapshots.redacted")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to={`/snapshot/${s.token}`}
|
||||
className="btn-ghost text-xs"
|
||||
title={t("snapshots.open")}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
<CopyButton text={snapshotUrl(s.token)} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleting(s)}
|
||||
className="btn-ghost text-xs text-status-danger"
|
||||
title={t("snapshots.delete")}
|
||||
aria-label={t("snapshots.delete")}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{ctx.menu && (
|
||||
<ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="snapshot-menu">
|
||||
<MenuItem onSelect={pick((s) => navigate(`/snapshot/${s.token}`))}>
|
||||
{t("snapshots.open")}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onSelect={pick((s) => void navigator.clipboard?.writeText(snapshotUrl(s.token)))}
|
||||
>
|
||||
{t("snapshots.copyLink")}
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem danger onSelect={pick(setDeleting)}>
|
||||
{t("snapshots.delete")}
|
||||
</MenuItem>
|
||||
</ContextMenu>
|
||||
)}
|
||||
<ConfirmModal
|
||||
open={deleting !== null}
|
||||
title={t("snapshots.deleteTitle")}
|
||||
message={t("snapshots.deleteBody")}
|
||||
confirmLabel={t("snapshots.delete")}
|
||||
cancelLabel={t("snapshots.cancel")}
|
||||
busy={busy}
|
||||
onConfirm={() => void remove()}
|
||||
onCancel={() => setDeleting(null)}
|
||||
/>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user