BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show context usage as circular progress

Browse Source 
Replaces static context icons with live circular progress indicators
Applies consistent context progress in desktop, mobile, VS Code, and mini-chat headers
Keeps usage coloring tied to existing status thresholds
This commit is contained in:
Bohdan Triapitsyn
2026-06-16 14:34:02 +03:00
parent 3ba93c111e
commit f3aff42b8a
5 changed files with 101 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/apps/MobileApp.tsx
+55 -5
View File
@@ -26,7 +26,7 @@ import { opencodeClient } from '@/lib/opencode/client';
import type { ProjectEntry, RuntimeAPIs } from '@/lib/api/types';
import { useI18n } from '@/lib/i18n';
import { resolveProjectForDirectory, resolveProjectForSessionDirectory } from '@/lib/projectResolution';
import { formatQuotaResetLabel, formatQuotaValueLabel, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
import { clampPercent, formatQuotaResetLabel, formatQuotaValueLabel, formatWindowLabel, QUOTA_PROVIDERS, resolveUsageTone } from '@/lib/quota';
import { getDisplayModelName } from '@/lib/quota/model-families';
import { runtimeFetch } from '@/lib/runtime-fetch';
import { sessionEvents } from '@/lib/sessionEvents';
@@ -144,14 +144,61 @@ const getWindowValueClass = (window: UsageWindow): string => {
return 'text-foreground';
};
const ContextProgressIcon: React.FC<{ percentage: number }> = ({ percentage }) => {
const progressPct = clampPercent(percentage) ?? 0;
const tone = resolveUsageTone(percentage);
const progressColor = tone === 'critical'
? 'var(--status-error)'
: tone === 'warn'
? 'var(--status-warning)'
: 'var(--status-success)';
const size = 18;
const stroke = 3;
const radius = (size - stroke) / 2;
const circumference = 2 * Math.PI * radius;
return (
<svg
viewBox={`0 0 ${size} ${size}`}
className="size-[18px] -rotate-90"
role="progressbar"
aria-valuenow={Math.round(progressPct)}
aria-valuemin={0}
aria-valuemax={100}
>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="var(--interactive-border)"
strokeWidth={stroke}
/>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke={progressColor}
strokeWidth={stroke}
strokeLinecap="round"
strokeDasharray={circumference}
strokeDashoffset={circumference * (1 - progressPct / 100)}
className="transition-[stroke-dashoffset,stroke] duration-300"
/>
</svg>
);
};
const MetadataRow: React.FC<{
icon: IconName;
icon?: IconName;
iconNode?: React.ReactNode;
label: string;
children: React.ReactNode;
}> = ({ icon, label, children }) => (
}> = ({ icon, iconNode, label, children }) => (
<div className="flex min-w-0 items-center gap-3 rounded-xl px-2.5 py-2.5">
<span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
<Icon name={icon} className="size-[18px]" />
{iconNode ?? (icon ? <Icon name={icon} className="size-[18px]" /> : null)}
</span>
<span className="shrink-0 typography-ui-label text-muted-foreground">{label}</span>
<span className="min-w-0 flex-1 truncate text-right typography-ui-label font-medium text-foreground">
@@ -244,7 +291,10 @@ const SessionMetadataOverlay: React.FC<{
{branchLabel}
</MetadataRow>
{contextDisplay ? (
<MetadataRow icon="pie-chart" label={t('mobile.header.metadata.context')}>
<MetadataRow
iconNode={<ContextProgressIcon percentage={contextDisplay.percentage} />}
label={t('mobile.header.metadata.context')}
>
<span className="inline-flex items-baseline gap-1.5 tabular-nums">
<span className={cn('font-semibold', contextDisplay.colorClass)}>{contextDisplay.percentage.toFixed(1)}%</span>
<span className="text-muted-foreground">{contextDisplay.tokens}</span>
packages/ui/src/components/layout/Header.tsx
+1 -1
View File
@@ -2203,7 +2203,7 @@ export const Header: React.FC<HeaderProps> = ({
pressed={isContextPanelActive}
className={!showMiniChatHeaderAction ? 'mr-3.5' : ''}
valueClassName="typography-ui-label font-medium leading-none text-foreground"
percentIconClassName="h-5 w-5"
percentIconClassName="h-4.5 w-4.5"
/>
) : null}
{desktopChangesPanelAction}
packages/ui/src/components/layout/VSCodeLayout.tsx
+1 -1
View File
@@ -1018,7 +1018,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
valueClassName="font-semibold leading-none"
hideIcon
showPercentIcon
percentIconClassName="h-5 w-5"
percentIconClassName="h-4.5 w-4.5"
/>
)}
</div>
packages/ui/src/components/mini-chat/MiniChatLayout.tsx
+1 -1
View File
@@ -293,7 +293,7 @@ const MiniChatHeader: React.FC<{ mode: MiniChatMode }> = ({ mode }) => {
valueClassName="font-semibold leading-none"
hideIcon
showPercentIcon
percentIconClassName="h-5 w-5"
percentIconClassName="h-4.5 w-4.5"
/>
) : null}
<Button
packages/ui/src/components/ui/ContextUsageDisplay.tsx
+43 -4
View File
@@ -4,6 +4,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
import { clampPercent, resolveUsageTone } from '@/lib/quota';
interface ContextUsageDisplayProps {
totalTokens: number;
@@ -41,6 +42,13 @@ export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
const { t } = useI18n();
const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState(false);
const colorPct = typeof colorPercentage === 'number' ? colorPercentage : percentage;
const progressPct = clampPercent(percentage) ?? 0;
const progressTone = resolveUsageTone(colorPct);
const progressColor = progressTone === 'critical'
? 'var(--status-error)'
: progressTone === 'warn'
? 'var(--status-warning)'
: 'var(--status-success)';
const formatTokens = (tokens: number) => {
if (tokens >= 1_000_000) {
@@ -58,6 +66,12 @@ export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
return 'text-status-success';
};
const circularProgressSize = 20;
const circularProgressStroke = 3;
const circularProgressRadius = (circularProgressSize - circularProgressStroke) / 2;
const circularProgressCircumference = 2 * Math.PI * circularProgressRadius;
const circularProgressOffset = circularProgressCircumference * (1 - progressPct / 100);
const safeOutputLimit = typeof outputLimit === 'number' ? Math.max(outputLimit, 0) : 0;
const tooltipLines = [
t('contextUsage.tooltip.usedTokens', { tokens: formatTokens(totalTokens) }),
@@ -73,10 +87,35 @@ export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
<span className={cn('font-medium inline-flex items-center gap-1.5', valueClassName)}>
{showPercentIcon ? (
<>
<Icon name="donut-chart-fill"
className={cn('h-3.5 w-3.5', percentIconClassName, getPercentageColor(colorPct))}
aria-hidden="true"
/>
<svg
viewBox={`0 0 ${circularProgressSize} ${circularProgressSize}`}
className={cn('h-3.5 w-3.5 -rotate-90', percentIconClassName)}
role="progressbar"
aria-valuenow={Math.round(progressPct)}
aria-valuemin={0}
aria-valuemax={100}
>
<circle
cx={circularProgressSize / 2}
cy={circularProgressSize / 2}
r={circularProgressRadius}
fill="none"
stroke="var(--interactive-border)"
strokeWidth={circularProgressStroke}
/>
<circle
cx={circularProgressSize / 2}
cy={circularProgressSize / 2}
r={circularProgressRadius}
fill="none"
stroke={progressColor}
strokeWidth={circularProgressStroke}
strokeLinecap="round"
strokeDasharray={circularProgressCircumference}
strokeDashoffset={circularProgressOffset}
className="transition-[stroke-dashoffset,stroke] duration-300"
/>
</svg>
<span className="text-foreground">{Math.min(percentage, 999).toFixed(1)}%</span>
</>
) : (