import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { estimateModelCostUsd } from '@agi-cli/sdk/browser';
import { DollarSign, MessageSquare, GitBranch, ArrowUpRight, Share2, ExternalLink, RefreshCw, } from 'lucide-react';
import { StopButton } from '../chat/StopButton';
import { useParentSession } from '../../hooks/useBranch';
import { useShareStatus } from '../../hooks/useShareStatus';
import { ProviderLogo } from '../common/ProviderLogo';
export function LeanHeader({ session, isVisible, isGenerating, onNavigateToSession, }) {
    const { data: parentData } = useParentSession(session.sessionType === 'branch' ? session.id : undefined);
    const { data: shareStatus } = useShareStatus(session.id);
    const estimatedCost = useMemo(() => {
        const inputTokens = session.totalInputTokens || 0;
        const outputTokens = session.totalOutputTokens || 0;
        const cachedInputTokens = session.totalCachedTokens || 0;
        const cacheCreationInputTokens = session.totalCacheCreationTokens || 0;
        return (estimateModelCostUsd(session.provider, session.model, {
            inputTokens,
            outputTokens,
            cachedInputTokens,
            cacheCreationInputTokens,
        }) ?? 0);
    }, [
        session.provider,
        session.model,
        session.totalInputTokens,
        session.totalOutputTokens,
        session.totalCachedTokens,
        session.totalCacheCreationTokens,
    ]);
    const formatCompactNumber = (num) => {
        if (num >= 1000000)
            return `${(num / 1000000).toFixed(1)}M`;
        if (num >= 1000)
            return `${(num / 1000).toFixed(1)}K`;
        return num.toString();
    };
    const contextTokens = session.currentContextTokens || 0;
    const isBranch = session.sessionType === 'branch';
    const parentSession = parentData?.parent;
    return (_jsx("div", { className: `absolute top-0 left-0 right-0 h-14 border-b border-border bg-background/95 backdrop-blur-sm z-10 transition-transform duration-200 ${isVisible ? 'translate-y-0' : '-translate-y-full'}`, children: _jsxs("div", { className: "h-full px-6 flex items-center justify-between gap-4 text-sm", children: [_jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-2 text-muted-foreground", children: [isBranch ? (_jsx(GitBranch, { className: "w-4 h-4 flex-shrink-0 text-violet-500" })) : (_jsx(MessageSquare, { className: "w-4 h-4 flex-shrink-0" })), _jsx("span", { className: "text-foreground font-medium truncate", children: session.title || 'Untitled Session' }), shareStatus?.shared && (_jsxs("a", { href: shareStatus.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1 px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors text-xs font-medium flex-shrink-0", children: [_jsx(Share2, { className: "h-3 w-3" }), shareStatus.pendingMessages &&
                                    shareStatus.pendingMessages > 0 ? (_jsxs("span", { className: "flex items-center gap-0.5 text-amber-600 dark:text-amber-400", children: [_jsx(RefreshCw, { className: "h-2.5 w-2.5" }), shareStatus.pendingMessages] })) : (_jsx(ExternalLink, { className: "h-2.5 w-2.5 opacity-60" }))] })), isBranch && parentSession && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground hidden sm:inline", children: "from" }), _jsxs("button", { type: "button", onClick: () => onNavigateToSession?.(parentSession.id), className: "text-primary hover:underline flex items-center gap-0.5 truncate max-w-32", title: parentSession.title ||
                                        `Session ${parentSession.id.slice(0, 8)}`, children: [_jsx("span", { className: "truncate", children: parentSession.title ||
                                                `Session ${parentSession.id.slice(0, 8)}` }), _jsx(ArrowUpRight, { className: "h-3 w-3 flex-shrink-0" })] })] }))] }), _jsxs("div", { className: "flex-shrink-0 flex items-center gap-5 text-muted-foreground", children: [isGenerating && _jsx(StopButton, { sessionId: session.id }), _jsx("div", { className: "flex items-center gap-3", children: _jsxs("div", { className: "flex items-center gap-1", title: `Current context window: ${contextTokens.toLocaleString()} tokens`, children: [_jsx("span", { className: "text-xs opacity-70", children: "ctx" }), _jsx("span", { className: "text-foreground font-medium", children: formatCompactNumber(contextTokens) })] }) }), estimatedCost > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(DollarSign, { className: "w-4 h-4" }), _jsx("span", { className: "text-foreground font-medium", children: estimatedCost.toFixed(4) })] })), _jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [_jsx(ProviderLogo, { provider: session.provider, size: 16 }), _jsx("span", { className: "font-medium text-foreground truncate max-w-40", children: session.model })] })] })] }) }));
}
//# sourceMappingURL=LeanHeader.js.map