294 lines
10 KiB
TypeScript
294 lines
10 KiB
TypeScript
/**
|
|
* SessionContextHeader - Header component with title, help tooltip, and token stats.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import {
|
|
COLOR_BORDER,
|
|
COLOR_BORDER_SUBTLE,
|
|
COLOR_SURFACE_OVERLAY,
|
|
COLOR_TEXT,
|
|
COLOR_TEXT_MUTED,
|
|
COLOR_TEXT_SECONDARY,
|
|
} from '@renderer/constants/cssVariables';
|
|
import { formatCostUsd } from '@shared/utils/costFormatting';
|
|
import { ArrowDownWideNarrow, FileText, LayoutList, X } from 'lucide-react';
|
|
|
|
import { formatTokens } from '../utils/formatting';
|
|
|
|
import { SessionContextHelpTooltip } from './SessionContextHelpTooltip';
|
|
|
|
import type { ContextViewMode } from '../types';
|
|
import type { ContextPhaseInfo } from '@renderer/types/contextInjection';
|
|
import type { SessionMetrics } from '@shared/types';
|
|
import type { DerivedContextMetrics } from '@shared/utils/contextMetrics';
|
|
|
|
interface SessionContextHeaderProps {
|
|
injectionCount: number;
|
|
totalTokens: number;
|
|
contextMetrics?: DerivedContextMetrics;
|
|
sessionMetrics?: SessionMetrics;
|
|
subagentCostUsd?: number;
|
|
onClose?: () => void;
|
|
onViewReport?: () => void;
|
|
phaseInfo?: ContextPhaseInfo;
|
|
selectedPhase: number | null;
|
|
onPhaseChange: (phase: number | null) => void;
|
|
viewMode: ContextViewMode;
|
|
onViewModeChange: (mode: ContextViewMode) => void;
|
|
}
|
|
|
|
export const SessionContextHeader = ({
|
|
injectionCount,
|
|
totalTokens,
|
|
contextMetrics,
|
|
sessionMetrics,
|
|
subagentCostUsd,
|
|
onClose,
|
|
onViewReport,
|
|
phaseInfo,
|
|
selectedPhase,
|
|
onPhaseChange,
|
|
viewMode,
|
|
onViewModeChange,
|
|
}: Readonly<SessionContextHeaderProps>): React.ReactElement => {
|
|
const { t } = useAppTranslation('common');
|
|
|
|
const formatPercentLabel = (percent: number | null, suffix: string): string | null => {
|
|
if (percent === null) {
|
|
return null;
|
|
}
|
|
return `${percent.toFixed(1)}% ${suffix}`;
|
|
};
|
|
|
|
const renderMetricValue = (
|
|
label: string,
|
|
tokens: number | null,
|
|
percentLabel: string | null,
|
|
options?: {
|
|
approximate?: boolean;
|
|
unavailableLabel?: string;
|
|
}
|
|
): React.ReactElement => (
|
|
<div
|
|
className="flex items-center justify-between gap-3 rounded px-2 py-1.5"
|
|
style={{ backgroundColor: COLOR_SURFACE_OVERLAY }}
|
|
>
|
|
<span style={{ color: COLOR_TEXT_MUTED }}>{label}</span>
|
|
<div className="text-right">
|
|
<div className="font-medium tabular-nums" style={{ color: COLOR_TEXT_SECONDARY }}>
|
|
{tokens === null
|
|
? (options?.unavailableLabel ?? t('sessionContext.metrics.unavailable'))
|
|
: `${options?.approximate ? '~' : ''}${formatTokens(tokens)}`}
|
|
</div>
|
|
{percentLabel && (
|
|
<div className="text-[10px] tabular-nums" style={{ color: COLOR_TEXT_MUTED }}>
|
|
{percentLabel}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const codexTelemetryUnavailable =
|
|
contextMetrics?.providerId === 'codex' && contextMetrics.promptInputSource === 'unavailable';
|
|
|
|
return (
|
|
<div className="shrink-0 px-4 py-3" style={{ borderBottom: `1px solid ${COLOR_BORDER}` }}>
|
|
{/* Title row */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<FileText size={16} style={{ color: COLOR_TEXT_SECONDARY }} />
|
|
<h2 className="text-sm font-semibold" style={{ color: COLOR_TEXT }}>
|
|
{t('sessionContext.header.title')}
|
|
</h2>
|
|
<span
|
|
className="rounded px-1.5 py-0.5 text-xs"
|
|
style={{
|
|
backgroundColor: COLOR_SURFACE_OVERLAY,
|
|
color: COLOR_TEXT_SECONDARY,
|
|
}}
|
|
>
|
|
{injectionCount}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<SessionContextHelpTooltip />
|
|
{onClose && (
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded p-1 transition-colors hover:bg-white/10"
|
|
style={{ color: COLOR_TEXT_SECONDARY }}
|
|
aria-label={t('sessionContext.header.closePanel')}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Primary metrics */}
|
|
<div
|
|
className="mt-2 space-y-1.5 pt-2 text-xs"
|
|
style={{ borderTop: `1px solid ${COLOR_BORDER_SUBTLE}` }}
|
|
>
|
|
{renderMetricValue(
|
|
t('sessionContext.metrics.contextUsed'),
|
|
contextMetrics?.contextUsedTokens ?? null,
|
|
formatPercentLabel(
|
|
contextMetrics?.contextUsedPercentOfContextWindow ?? null,
|
|
t('sessionContext.metrics.ofContext')
|
|
)
|
|
)}
|
|
{renderMetricValue(
|
|
t('sessionContext.metrics.promptInput'),
|
|
contextMetrics?.promptInputTokens ?? null,
|
|
formatPercentLabel(
|
|
contextMetrics?.promptInputPercentOfContextWindow ?? null,
|
|
t('sessionContext.metrics.ofContext')
|
|
)
|
|
)}
|
|
{renderMetricValue(
|
|
t('sessionContext.metrics.visibleContext'),
|
|
totalTokens,
|
|
formatPercentLabel(
|
|
contextMetrics?.visibleContextPercentOfPromptInput ?? null,
|
|
t('sessionContext.metrics.ofPrompt')
|
|
),
|
|
{ approximate: true }
|
|
)}
|
|
</div>
|
|
|
|
{codexTelemetryUnavailable && (
|
|
<div
|
|
className="mt-2 rounded px-2 py-1.5 text-[10px]"
|
|
style={{
|
|
border: `1px solid ${COLOR_BORDER_SUBTLE}`,
|
|
color: COLOR_TEXT_MUTED,
|
|
}}
|
|
>
|
|
{t('sessionContext.metrics.codexTelemetryUnavailable')}
|
|
</div>
|
|
)}
|
|
|
|
{/* Session Metrics Breakdown */}
|
|
{sessionMetrics && (
|
|
<div
|
|
className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 pt-2 text-[10px]"
|
|
style={{ borderTop: `1px solid ${COLOR_BORDER_SUBTLE}` }}
|
|
>
|
|
{/* Cost */}
|
|
{sessionMetrics.costUsd !== undefined && sessionMetrics.costUsd > 0 && (
|
|
<div className="col-span-2">
|
|
<span style={{ color: COLOR_TEXT_MUTED }}>
|
|
{t('sessionContext.metrics.sessionCost')}{' '}
|
|
</span>
|
|
<span className="font-medium tabular-nums" style={{ color: COLOR_TEXT_SECONDARY }}>
|
|
{formatCostUsd(sessionMetrics.costUsd + (subagentCostUsd ?? 0))}
|
|
</span>
|
|
{subagentCostUsd !== undefined && subagentCostUsd > 0 && (
|
|
<span style={{ color: COLOR_TEXT_MUTED }}>
|
|
{' ('}
|
|
{formatCostUsd(sessionMetrics.costUsd)}
|
|
{` ${t('sessionContext.metrics.parentPlus')} `}
|
|
{formatCostUsd(subagentCostUsd)}
|
|
{` ${t('sessionContext.metrics.subagents')}`}
|
|
{onViewReport && (
|
|
<>
|
|
{' · '}
|
|
<button
|
|
onClick={onViewReport}
|
|
className="underline"
|
|
style={{ color: COLOR_TEXT_SECONDARY }}
|
|
>
|
|
{t('sessionContext.metrics.details')}
|
|
</button>
|
|
</>
|
|
)}
|
|
{')'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Phase selector - only shown when compactions exist */}
|
|
{phaseInfo && phaseInfo.phases.length > 1 && (
|
|
<div
|
|
className="mt-2 flex flex-wrap items-center gap-1 pt-2"
|
|
style={{ borderTop: `1px solid ${COLOR_BORDER_SUBTLE}` }}
|
|
>
|
|
<span className="mr-1 text-[10px]" style={{ color: COLOR_TEXT_MUTED }}>
|
|
{t('sessionContext.header.phase')}
|
|
</span>
|
|
{phaseInfo.phases.map((phase) => (
|
|
<button
|
|
key={phase.phaseNumber}
|
|
onClick={() =>
|
|
onPhaseChange(phase.phaseNumber === selectedPhase ? null : phase.phaseNumber)
|
|
}
|
|
className="rounded px-1.5 py-0.5 text-[10px] transition-colors"
|
|
style={{
|
|
backgroundColor:
|
|
selectedPhase === phase.phaseNumber
|
|
? 'rgba(99, 102, 241, 0.2)'
|
|
: COLOR_SURFACE_OVERLAY,
|
|
color: selectedPhase === phase.phaseNumber ? '#818cf8' : COLOR_TEXT_MUTED,
|
|
}}
|
|
>
|
|
{phase.phaseNumber}
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={() => onPhaseChange(null)}
|
|
className="rounded px-1.5 py-0.5 text-[10px] transition-colors"
|
|
style={{
|
|
backgroundColor:
|
|
selectedPhase === null ? 'rgba(99, 102, 241, 0.2)' : COLOR_SURFACE_OVERLAY,
|
|
color: selectedPhase === null ? '#818cf8' : COLOR_TEXT_MUTED,
|
|
}}
|
|
>
|
|
{t('sessionContext.header.current')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* View mode toggle */}
|
|
<div
|
|
className="mt-2 flex items-center gap-1 pt-2"
|
|
style={{ borderTop: `1px solid ${COLOR_BORDER_SUBTLE}` }}
|
|
>
|
|
<span className="mr-1 text-[10px]" style={{ color: COLOR_TEXT_MUTED }}>
|
|
{t('sessionContext.header.view')}
|
|
</span>
|
|
<button
|
|
onClick={() => onViewModeChange('category')}
|
|
className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors"
|
|
style={{
|
|
backgroundColor:
|
|
viewMode === 'category' ? 'rgba(99, 102, 241, 0.2)' : COLOR_SURFACE_OVERLAY,
|
|
color: viewMode === 'category' ? '#818cf8' : COLOR_TEXT_MUTED,
|
|
}}
|
|
>
|
|
<LayoutList size={10} />
|
|
{t('sessionContext.header.category')}
|
|
</button>
|
|
<button
|
|
onClick={() => onViewModeChange('ranked')}
|
|
className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors"
|
|
style={{
|
|
backgroundColor:
|
|
viewMode === 'ranked' ? 'rgba(99, 102, 241, 0.2)' : COLOR_SURFACE_OVERLAY,
|
|
color: viewMode === 'ranked' ? '#818cf8' : COLOR_TEXT_MUTED,
|
|
}}
|
|
>
|
|
<ArrowDownWideNarrow size={10} />
|
|
{t('sessionContext.header.bySize')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|