add dedicated usage page in sidebar

Author: charlesvien

packages/core/src/billing/spendAnalysisFormat.test.ts

@@ -1,5 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { formatTokens } from "./spendAnalysisFormat";
+import {
+  formatTokens,
+  type SpendAnalysisWindow,
+  windowToDateFrom,
+  windowToDays,
+} from "./spendAnalysisFormat";
 
 describe("formatTokens", () => {
   it.each([
@@ -15,3 +20,23 @@ describe("formatTokens", () => {
     expect(formatTokens(input)).toBe(expected);
   });
 });
+
+describe("windowToDateFrom", () => {
+  it.each<[SpendAnalysisWindow, string]>([
+    ["7d", "-7d"],
+    ["30d", "-30d"],
+    ["90d", "-90d"],
+  ])("maps %s to %s", (window, expected) => {
+    expect(windowToDateFrom(window)).toBe(expected);
+  });
+});
+
+describe("windowToDays", () => {
+  it.each<[SpendAnalysisWindow, number]>([
+    ["7d", 7],
+    ["30d", 30],
+    ["90d", 90],
+  ])("maps %s to %d", (window, expected) => {
+    expect(windowToDays(window)).toBe(expected);
+  });
+});

packages/core/src/billing/spendAnalysisFormat.ts

@@ -12,6 +12,16 @@ export function formatTokens(n: number): string {
   return n.toString();
 }
 
+export type SpendAnalysisWindow = "7d" | "30d" | "90d";
+
+export function windowToDateFrom(window: SpendAnalysisWindow): string {
+  return `-${window}`;
+}
+
+export function windowToDays(window: SpendAnalysisWindow): number {
+  return Number.parseInt(window, 10);
+}
+
 export function windowDays(fromIso: string, toIso: string): number {
   const fromMs = new Date(fromIso).getTime();
   const toMs = new Date(toIso).getTime();

packages/shared/src/analytics-events.ts

@@ -626,6 +626,15 @@ export interface InboxReportScrolledProperties {
   time_since_open_ms: number;
 }
 
+export interface UsageViewedProperties {
+  is_pro: boolean;
+  /** Monthly bucket percent (0-100), null when usage is unavailable. */
+  sustained_used_percent: number | null;
+  /** Daily bucket percent (0-100), null when usage is unavailable. */
+  burst_used_percent: number | null;
+  spend_analysis_window_days: number;
+}
+
 export interface SpendAnalysisTaskOpenedProperties {
   /** Total LLM spend in USD across all products for the analysed window. */
   total_cost_usd: number;
@@ -1129,7 +1138,8 @@ export const ANALYTICS_EVENTS = {
   SCOUT_CHAT_STARTED: "Scout chat started",
   SCOUT_ACTION: "Scout action",
 
-  // Spend analysis events
+  // Usage and spend analysis events
+  USAGE_VIEWED: "Usage viewed",
   SPEND_ANALYSIS_TASK_OPENED: "Spend analysis task opened",
 
   // Prompt history events
@@ -1281,7 +1291,8 @@ export type EventPropertyMap = {
   [ANALYTICS_EVENTS.SCOUT_CHAT_STARTED]: ScoutChatStartedProperties;
   [ANALYTICS_EVENTS.SCOUT_ACTION]: ScoutActionProperties;
 
-  // Spend analysis events
+  // Usage and spend analysis events
+  [ANALYTICS_EVENTS.USAGE_VIEWED]: UsageViewedProperties;
   [ANALYTICS_EVENTS.SPEND_ANALYSIS_TASK_OPENED]: SpendAnalysisTaskOpenedProperties;
 
   // Prompt history events

packages/shared/src/flags.ts

@@ -1,4 +1,5 @@
 export const BILLING_FLAG = "posthog-code-billing";
+export const SPEND_ANALYSIS_FLAG = "posthog-code-spend-analysis";
 export const EXPERIMENT_SUGGESTIONS_FLAG =
   "posthog-code-experiment-suggestions";
 export const SYNC_CLOUD_TASKS_FLAG = "posthog-code-sync-cloud-tasks";

packages/ui/src/features/billing/UsageMeter.tsx

@@ -0,0 +1,40 @@
+import { formatResetTime } from "@posthog/core/billing/usageDisplay";
+import type { UsageBucket } from "@posthog/core/usage/schemas";
+import { Flex, Progress, Text } from "@radix-ui/themes";
+
+interface UsageMeterProps {
+  label: string;
+  bucket: UsageBucket;
+  color?: "red";
+}
+
+export function UsageMeter({ label, bucket, color }: UsageMeterProps) {
+  const percentage = bucket.used_percent;
+
+  const borderColor = color === "red" ? "var(--red-7)" : "var(--gray-5)";
+
+  return (
+    <Flex
+      direction="column"
+      gap="3"
+      p="4"
+      style={{
+        border: `1px solid ${borderColor}`,
+      }}
+      className="rounded-(--radius-3)"
+    >
+      <Flex align="center" justify="between">
+        <Text className="font-medium text-sm">{label}</Text>
+        <Text className="font-medium text-sm">{percentage.toFixed(2)}%</Text>
+      </Flex>
+      <Progress
+        value={percentage}
+        size="2"
+        color={color === "red" ? "red" : undefined}
+      />
+      <Text className="text-(--gray-9) text-[13px]">
+        {bucket.exceeded ? "Limit exceeded" : formatResetTime(bucket.reset_at)}
+      </Text>
+    </Flex>
+  );
+}

packages/ui/src/features/billing/useSpendAnalysis.ts

@@ -4,20 +4,18 @@ import {
   Info,
   WarningCircle,
 } from "@phosphor-icons/react";
-import {
-  formatResetTime,
-  PRO_USAGE_MULTIPLIER,
-} from "@posthog/core/billing/usageDisplay";
-import type { UsageBucket } from "@posthog/core/usage/schemas";
+import { PRO_USAGE_MULTIPLIER } from "@posthog/core/billing/usageDisplay";
 import { PLAN_PRO_ALPHA } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { useAuthStateValue } from "@posthog/ui/features/auth/store";
 import { useSwitchOrgMutation } from "@posthog/ui/features/auth/useAuthMutations";
 import { useSeatStore } from "@posthog/ui/features/billing/seatStore";
-import { TokenSpendAnalysisBanner } from "@posthog/ui/features/billing/TokenSpendAnalysisBanner";
+import { UsageMeter } from "@posthog/ui/features/billing/UsageMeter";
 import { useSeat } from "@posthog/ui/features/billing/useSeat";
 import { useUsage } from "@posthog/ui/features/billing/useUsage";
-import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { closeSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
+import { useSpendAnalysisEnabled } from "@posthog/ui/features/usage/useSpendAnalysisEnabled";
+import { navigateToUsage } from "@posthog/ui/router/navigationBridge";
 import { track } from "@posthog/ui/shell/analytics";
 import { logger } from "@posthog/ui/shell/logger";
 import { getBillingUrl, getPostHogUrl } from "@posthog/ui/utils/urls";
@@ -27,16 +25,13 @@ import {
   Callout,
   Dialog,
   Flex,
-  Progress,
   Spinner,
   Text,
 } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
 
 const log = logger.scope("plan-usage");
 
-const SPEND_ANALYSIS_FLAG = "posthog-code-spend-analysis";
-
 export function PlanUsageSettings() {
   const {
     seat,
@@ -85,8 +80,7 @@ export function PlanUsageSettings() {
     ? (getPostHogUrl(redirectUrl, cloudRegion) ?? billingUrl)
     : null;
   const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
-  const spendAnalysisEnabled =
-    useFeatureFlag(SPEND_ANALYSIS_FLAG) || import.meta.env.DEV;
+  const spendAnalysisEnabled = useSpendAnalysisEnabled();
 
   const isAlpha = orgSeat?.plan_key === PLAN_PRO_ALPHA;
   const {
@@ -185,8 +179,6 @@ export function PlanUsageSettings() {
         </Callout.Root>
       )}
 
-      {spendAnalysisEnabled && <TokenSpendAnalysisBanner />}
-
       {hasBetterPlanElsewhere && seat?.organization_name && (
         <Callout.Root color="blue" size="1">
           <Callout.Icon>
@@ -330,7 +322,22 @@ export function PlanUsageSettings() {
       )}
 
       <Flex direction="column" gap="3">
-        <Text className="font-medium text-(--gray-9) text-sm">Usage</Text>
+        <Flex align="center" justify="between">
+          <Text className="font-medium text-(--gray-9) text-sm">Usage</Text>
+          {spendAnalysisEnabled && (
+            <Button
+              size="1"
+              variant="ghost"
+              onClick={() => {
+                // Leave settings first so back from /usage skips the settings route.
+                closeSettings();
+                navigateToUsage();
+              }}
+            >
+              View usage & spend analysis
+            </Button>
+          )}
+        </Flex>
         {usageLoading ? (
           <Flex
             align="center"
@@ -448,43 +455,6 @@ export function PlanUsageSettings() {
   );
 }
 
-interface UsageMeterProps {
-  label: string;
-  bucket: UsageBucket;
-  color?: "red";
-}
-
-function UsageMeter({ label, bucket, color }: UsageMeterProps) {
-  const percentage = bucket.used_percent;
-
-  const borderColor = color === "red" ? "var(--red-7)" : "var(--gray-5)";
-
-  return (
-    <Flex
-      direction="column"
-      gap="3"
-      p="4"
-      style={{
-        border: `1px solid ${borderColor}`,
-      }}
-      className="rounded-(--radius-3)"
-    >
-      <Flex align="center" justify="between">
-        <Text className="font-medium text-sm">{label}</Text>
-        <Text className="font-medium text-sm">{percentage.toFixed(2)}%</Text>
-      </Flex>
-      <Progress
-        value={percentage}
-        size="2"
-        color={color === "red" ? "red" : undefined}
-      />
-      <Text className="text-(--gray-9) text-[13px]">
-        {bucket.exceeded ? "Limit exceeded" : formatResetTime(bucket.reset_at)}
-      </Text>
-    </Flex>
-  );
-}
-
 interface PlanCardProps {
   name: string;
   price: string;

packages/ui/src/features/settings/sections/PlanUsageSettings.tsx

@@ -4,13 +4,15 @@ import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFla
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
+import { useSpendAnalysisEnabled } from "@posthog/ui/features/usage/useSpendAnalysisEnabled";
 import {
   navigateToAgents,
   navigateToCommandCenter,
   navigateToHome,
   navigateToInbox,
   navigateToMcpServers,
   navigateToSkills,
+  navigateToUsage,
   navigateToWebsiteCommandCenter,
   navigateToWebsiteHome,
   navigateToWebsiteMcpServers,
@@ -29,6 +31,7 @@ import { McpServersItem } from "./items/McpServersItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { SearchItem } from "./items/SearchItem";
 import { SkillsItem } from "./items/SkillsItem";
+import { UsageItem } from "./items/UsageItem";
 
 const SIDEBAR_INBOX_REFETCH_INTERVAL_MS = 60_000;
 
@@ -46,18 +49,19 @@ interface SidebarNavSectionProps {
 // state, badge count, and click handler is wired here — so it can be dropped
 // into either layout. In the Channels space, destinations with a /website
 // mirror (Home, Skills, MCP servers, Command Center) stay in that space;
-// Inbox, Agents and New task have no mirror yet and jump back to Code. Search
-// opens the command menu in place.
+// Inbox, Agents, Usage and New task have no mirror yet and jump back to Code.
+// Search opens the command menu in place.
 export function SidebarNavSection({
   commandCenterActiveCount: providedActiveCount,
 }: SidebarNavSectionProps = {}) {
   const view = useAppView();
   const homeTabEnabled = useFeatureFlag(HOME_TAB_FLAG);
+  const usageEnabled = useSpendAnalysisEnabled();
 
   // When this section renders inside the Channels space, the destinations that
   // have a /website mirror stay in that space; everything else (and the whole
-  // section in the Code space) uses the canonical routes. Inbox, Agents and New
-  // task have no mirror yet, so they intentionally jump back to Code.
+  // section in the Code space) uses the canonical routes. Inbox, Agents, Usage
+  // and New task have no mirror yet, so they intentionally jump back to Code.
   const inChannels = useRouterState({
     select: (s) => s.location.pathname.startsWith("/website"),
   });
@@ -82,6 +86,7 @@ export function SidebarNavSection({
   const isCommandCenterActive = view.type === "command-center";
   const isSkillsActive = view.type === "skills";
   const isMcpServersActive = view.type === "mcp-servers";
+  const isUsageActive = view.type === "usage";
 
   // Open pull requests in the inbox — the main CTA, and the same count the inbox
   // Pull requests tab shows, so the badge and the tab always agree.
@@ -152,6 +157,12 @@ export function SidebarNavSection({
         <McpServersItem isActive={isMcpServersActive} onClick={goMcpServers} />
       </Box>
 
+      {usageEnabled && (
+        <Box>
+          <UsageItem isActive={isUsageActive} onClick={navigateToUsage} />
+        </Box>
+      )}
+
       <Box mb="2">
         <CommandCenterItem
           isActive={isCommandCenterActive}