fix(app): align usage with sidebar reports

packages/app/src/components/context-window-meter.tsx

@@ -3,7 +3,6 @@ import Svg, { Circle } from "react-native-svg";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { ContextWindowUsageTooltip } from "@/usage/context-window-section";
 import { formatContextPercentage, formatTokenCount } from "./context-window-meter.utils";
 
 interface ContextWindowMeterProps {
@@ -11,8 +10,6 @@ interface ContextWindowMeterProps {
   usedTokens: number | null;
   totalCostUsd?: number | null;
   showPercentage?: boolean;
-  serverId?: string;
-  agentId?: string;
   /** Reserve the meter footprint and show a loading ring while usage is pending. */
   pending?: boolean;
   /** Optional glyph envelope for icon-toolbar alignment. */
@@ -98,8 +95,6 @@ export function ContextWindowMeter({
   usedTokens,
   totalCostUsd,
   showPercentage = false,
-  serverId,
-  agentId,
   pending = false,
   glyphSize,
 }: ContextWindowMeterProps) {
@@ -207,9 +202,6 @@ export function ContextWindowMeter({
               {t("contextWindow.sessionCost", { cost: formattedSessionCost })}
             </Text>
           ) : null}
-          {serverId && agentId ? (
-            <ContextWindowUsageTooltip serverId={serverId} agentId={agentId} />
-          ) : null}
         </View>
       </TooltipContent>
     </Tooltip>

packages/app/src/composer/index.tsx

@@ -283,8 +283,6 @@ function renderContextWindowMeter(
   contextWindowUsedTokens: number | null,
   totalCostUsd: number | null,
   showPercentage: boolean,
-  serverId: string,
-  agentId: string,
   pending: boolean,
   glyphSize: number,
 ): ReactElement | null {
@@ -298,8 +296,6 @@ function renderContextWindowMeter(
       usedTokens={contextWindowUsedTokens}
       totalCostUsd={totalCostUsd}
       showPercentage={showPercentage}
-      serverId={serverId}
-      agentId={agentId}
       pending={pending}
       glyphSize={glyphSize}
     />
@@ -2094,8 +2090,6 @@ function ComposerContentImpl({
         contextWindowUsedTokens,
         agentState.totalCostUsd,
         isCompactLayout,
-        serverId,
-        agentId,
         contextWindowPending,
         contextWindowMeterGlyphSize,
       ),
@@ -2104,28 +2098,13 @@ function ComposerContentImpl({
       contextWindowUsedTokens,
       agentState.totalCostUsd,
       isCompactLayout,
-      serverId,
-      agentId,
       contextWindowPending,
       contextWindowMeterGlyphSize,
     ],
   );
   const { beforeVoiceContent, compactContextWindowContent } = useMemo(
-    () => {
-      const placement = resolveContextWindowPlacement(contextWindowMeter, hasAgent, isCompactLayout);
-      return {
-        ...placement,
-        beforeVoiceContent: (
-          <>
-            {placement.beforeVoiceContent}
-            {hasAgent && !isCompactLayout ? (
-              <UsageComposerPill serverId={serverId} agentId={agentId} />
-            ) : null}
-          </>
-        ),
-      };
-    },
-    [agentId, contextWindowMeter, hasAgent, isCompactLayout, serverId],
+    () => resolveContextWindowPlacement(contextWindowMeter, hasAgent, isCompactLayout),
+    [contextWindowMeter, hasAgent, isCompactLayout],
   );
 
   const hasGithubAttachment = useMemo(

packages/app/src/usage/context-window-section.tsx

@@ -1,34 +0,0 @@
-import { View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-import { UsageCard } from "./card";
-import { useUsagePreferences } from "./display";
-import { useAgentUsage } from "./queries";
-
-/** The active agent's usage inside its context-window tooltip. */
-export function ContextWindowUsageTooltip({
-  serverId,
-  agentId,
-}: {
-  serverId: string;
-  agentId: string;
-}) {
-  const { entry } = useAgentUsage(serverId, agentId);
-  const { display } = useUsagePreferences();
-  if (!entry) return null;
-
-  return (
-    <>
-      <View style={styles.divider} />
-      <UsageCard serverId={serverId} entry={entry} display={display} compact />
-    </>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  divider: {
-    height: 1,
-    backgroundColor: theme.colors.borderAccent,
-    marginVertical: theme.spacing[2],
-    marginHorizontal: -theme.spacing[2],
-  },
-}));

packages/app/src/usage/format.ts

@@ -29,7 +29,11 @@ export function formatPct(value: number, locale?: string): string {
 }
 
 /** A localized percentage that says whether it is used or remaining. */
-export function formatDisplayPct(value: number, displayAs: UsageDisplayAs, locale?: string): string {
+export function formatDisplayPct(
+  value: number,
+  displayAs: UsageDisplayAs,
+  locale?: string,
+): string {
   const percentage = formatPct(value, locale);
   return displayAs === "used"
     ? i18n.t("providerUsage.values.used", { percentage })

packages/app/src/usage/window-bar.tsx

@@ -48,8 +48,6 @@ export function UsageWindowBar({
   const isAtRisk = window.runsOutAt != null && window.shortfallPct != null;
   const relativeTime = isAtRisk ? window.runsOutAt : window.resetsAt;
   useRelativeTimeTick(relativeTime != null);
-  const relativeTime = isAtRisk ? window.runsOutAt : window.resetsAt;
-  useRelativeTimeTick(relativeTime != null);
   const trailing = isAtRisk
     ? formatRunsOutLabel(window.runsOutAt)
     : formatResetLabel(window.resetsAt);