/**
* dashboard-client/src/components/VectorStoreCard.tsx — Vector Store (session) card.
*
* 9 fields: Checkpoints, Original (dropped), Kept (summaries), Freed,
* Injected, Recall Relevance %, Storage Dedup %, Collapsed, Last ID.
* Plus a compression meter bar (green ≥90%, yellow ≥60%, red <60%).
*
* NOTE: dedupHitRate, storageDedupRate, compressionPct, dedupPct are
* 0–1 fractions at runtime (despite contract saying 0–100).
* Tooltips copied verbatim from html.ts.
*/
import type React from "react";
import { fmtPctFromFraction } from "../utils/format";
export interface VectorStoreCardProps {
checkpointCount: number;
/** Original tokens dropped into compaction (session). */
tokensIn: number;
/** Kept summary tokens (session). */
tokensOut: number;
/** Tokens freed = dropped − kept (session). */
tokensFreed: number;
/** Recall injection count. */
injectedCount: number;
/** Recall relevance — 0–1 fraction. */
dedupHitRate: number;
/** Storage dedup rate — 0–1 fraction. */
storageDedupRate: number;
/** Duplicate chunks collapsed. */
dedupCollapsed: number;
/** Last checkpoint ID or null. */
lastCheckpointId: string | null;
/** Session compression ratio — 0–1 fraction. */
compressionPct: number;
/** Session dedup contribution — 0–1 fraction. */
dedupPct: number;
}
/** Compression meter colour class (inverse of context: high = good). */
function compressClass(sp: number): string {
if (sp >= 0.9) return "meter-green";
if (sp >= 0.6) return "meter-yellow";
return "meter-red";
}
/** Stat row with optional tooltip. */
function StatRow({
label,
value,
title,
}: {
label: string;
value: string | number;
title?: string;
}): React.ReactElement {
return (
{label}
{value}
);
}
export function VectorStoreCard(
props: VectorStoreCardProps,
): React.ReactElement {
const sp = props.compressionPct;
const barCls = compressClass(sp);
const barWidth = Math.max(sp * 100, 0.5);
const compressSub = `${fmtPctFromFraction(sp)} tokens saved · dedup: ${fmtPctFromFraction(props.dedupPct)}`;
return (
);
}