feat: show context usage as circular progress

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

packages/ui/src/components/layout/Header.tsx

@@ -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

@@ -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>