Polish context window usage card and meter

Calm the usage popover and settings card: smaller, muted provider logo
and name, more space between the header and the usage bars.

The popover divider used the `border` token, which equals the popover
background in dark themes and was invisible. Switch it to `borderAccent`
(the token the popover outlines itself with) and span it edge to edge.

Shrink the context meter ring and, while a session is active but usage
hasn't arrived yet, render a track-only ring in the final footprint so
the real ring fades in without shifting siblings. Agents that never
report usage still render nothing.

packages/app/src/composer/index.tsx

@@ -209,8 +209,10 @@ function renderContextWindowMeter(
   showPercentage: boolean,
   serverId: string,
   provider: string | null,
+  pending: boolean,
 ): ReactElement | null {
-  if (contextWindowMaxTokens === null || contextWindowUsedTokens === null) {
+  const hasData = contextWindowMaxTokens !== null && contextWindowUsedTokens !== null;
+  if (!hasData && !pending) {
     return null;
   }
   return (
@@ -221,6 +223,7 @@ function renderContextWindowMeter(
       showPercentage={showPercentage}
       serverId={serverId}
       provider={provider}
+      pending={pending}
     />
   );
 }
@@ -1642,6 +1645,9 @@ export function Composer({
     agentState.contextWindowUsedTokens,
   );
 
+  const contextWindowPending =
+    agentState.status === "initializing" || agentState.status === "running";
+
   const contextWindowMeter = useMemo(
     () =>
       renderContextWindowMeter(
@@ -1651,6 +1657,7 @@ export function Composer({
         isCompactLayout,
         serverId,
         agentState.provider,
+        contextWindowPending,
       ),
     [
       contextWindowMaxTokens,
@@ -1659,6 +1666,7 @@ export function Composer({
       isCompactLayout,
       serverId,
       agentState.provider,
+      contextWindowPending,
     ],
   );
   const { beforeVoiceContent, footerInlineContent } = useMemo(