"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { formatTokenCount } from "./UsageWidget.js";
/**
 * Inline timeline card shown when context summarization occurs mid-conversation.
 *
 * Renders as a compact system-event divider in the {@link MessageThread},
 * positioned chronologically between messages based on the event timestamp.
 *
 * Shows:
 * - "Context compacted" header with compression icon
 * - Token reduction (before -> after) and compression percentage
 * - Duration, model, and cost when available (native harness)
 * - For Cursor harness (model/duration unavailable): "Detected context compaction"
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @see {@link useContextWindow} - data source for summarization events
 * @see {@link SummarizationBadge} - sidebar aggregate widget (complementary)
 */
export const SummarizationCard = memo(function SummarizationCard({ event, className, }) {
    const reduction = Math.round(event.compressionRatio * 100);
    const isInferred = !event.model;
    return (_jsxs("div", { role: "status", "aria-label": "Context compacted", className: cn("mx-4 flex items-center gap-3 rounded-md border border-border/50", "bg-muted/30 px-3 py-2", className), children: [_jsx(CompactionIcon, {}), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-baseline gap-1.5 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: isInferred ? "Detected context compaction" : "Context compacted" }), event.timestamp && (_jsx("time", { dateTime: event.timestamp, className: "ml-auto tabular-nums text-muted-foreground/70", children: formatTime(event.timestamp) }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground/80", children: [_jsxs("span", { children: [formatTokenCount(event.tokensBefore), " \u2192 ", formatTokenCount(event.tokensAfter), " tokens"] }), _jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsxs("span", { children: [reduction, "% reduction"] }), event.durationMs > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { children: formatDuration(event.durationMs) })] })), event.model && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { children: event.model })] })), event.costUsd > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsxs("span", { children: ["$", event.costUsd < 0.01 ? event.costUsd.toFixed(4) : event.costUsd.toFixed(2)] })] }))] })] })] }));
});
function formatTime(iso) {
    try {
        return new Date(iso).toLocaleTimeString(undefined, {
            hour: "2-digit",
            minute: "2-digit",
        });
    }
    catch {
        return iso;
    }
}
function formatDuration(ms) {
    if (ms < 1000)
        return `${ms}ms`;
    return `${(ms / 1000).toFixed(1)}s`;
}
function CompactionIcon() {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 text-muted-foreground/70", "aria-hidden": "true", children: [_jsx("path", { d: "M4 2v4l4-2-4-2zM12 14v-4l-4 2 4 2z" }), _jsx("path", { d: "M4 8h8" })] }));
}
//# sourceMappingURL=SummarizationCard.js.map