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/provider-usage/card.tsx

@@ -22,7 +22,7 @@ function ProviderUsageIcon({ iconKey, size, color = "" }: ProviderUsageIconProps
 
 const ThemedProviderUsageIcon = withUnistyles(ProviderUsageIcon);
 
-const foregroundIconColor = (theme: Theme) => ({ color: theme.colors.foreground });
+const mutedIconColor = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 
 function statusText(usage: ProviderUsage): string | null {
   if (usage.status === "available") return null;
@@ -65,11 +65,7 @@ export function ProviderUsageCard({
   return (
     <View style={containerStyle}>
       <View style={styles.header}>
-        <ThemedProviderUsageIcon
-          iconKey={usage.providerId}
-          size={16}
-          uniProps={foregroundIconColor}
-        />
+        <ThemedProviderUsageIcon iconKey={usage.providerId} size={14} uniProps={mutedIconColor} />
         <Text style={styles.name} numberOfLines={1}>
           {usage.displayName}
         </Text>
@@ -129,11 +125,12 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[3],
   },
   containerPadded: {
+    gap: theme.spacing[4],
     paddingVertical: theme.spacing[4],
     paddingHorizontal: theme.spacing[4],
   },
   containerCompact: {
-    gap: theme.spacing[2],
+    gap: theme.spacing[3],
   },
   header: {
     flexDirection: "row",
@@ -143,7 +140,7 @@ const styles = StyleSheet.create((theme) => ({
   name: {
     flexShrink: 1,
     color: theme.colors.foreground,
-    fontSize: theme.fontSize.base,
+    fontSize: theme.fontSize.sm,
   },
   headerSpacer: {
     flex: 1,
@@ -170,7 +167,7 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
   },
   bars: {
-    gap: theme.spacing[2],
+    gap: theme.spacing[3],
   },
   details: {
     gap: theme.spacing[1],

packages/app/src/provider-usage/tooltip-section.tsx

@@ -54,9 +54,13 @@ export function ProviderUsageTooltipSection({
 
 const styles = StyleSheet.create((theme) => ({
   divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: theme.colors.border,
-    marginVertical: theme.spacing[1] + 1,
+    height: 1,
+    // Same token the popover draws its own outline with, so the rule reads as the
+    // popover's edge. `border` is invisible here (equals the popover background).
+    backgroundColor: theme.colors.borderAccent,
+    marginVertical: theme.spacing[2],
+    // Cancel the tooltip content's horizontal padding so the rule spans edge to edge.
+    marginHorizontal: -theme.spacing[2],
   },
   detail: {
     color: theme.colors.foregroundMuted,