From 5623b4f5ffe63d3075d669f9b320677465136218 Mon Sep 17 00:00:00 2001
From: Roberto Freitas <54923863+robertoecf@users.noreply.github.com>
Date: Sun, 5 Jul 2026 22:19:35 -0300
Subject: [PATCH 1/2] feat(sidebar): add Billing & usage shortcut to the nav
 section

Plan & usage is only reachable by opening Settings and scanning the
category list. Add a sidebar item below Command Center that opens
Settings at plan-usage directly, highlighted while that route is
active. Gated by the existing billing flag, and hidden in the
Channels space (settings have no /website mirror).

Generated-By: PostHog Code
Task-Id: 7264767a-3409-47d1-8a94-507c8bdef292
---
 .../sidebar/components/SidebarNavSection.tsx  | 17 ++++++++++++++++-
 .../sidebar/components/items/BillingItem.tsx  | 19 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/features/sidebar/components/items/BillingItem.tsx

diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
index 211d722d96..ade19748ad 100644
--- a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
@@ -1,7 +1,8 @@
-import { HOME_TAB_FLAG } from "@posthog/shared/constants";
+import { BILLING_FLAG, HOME_TAB_FLAG } from "@posthog/shared/constants";
 import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
+import { openSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import {
@@ -22,6 +23,7 @@ import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore";
 import { Box, Flex } from "@radix-ui/themes";
 import { useRouterState } from "@tanstack/react-router";
 import { AgentsItem } from "./items/AgentsItem";
+import { BillingItem } from "./items/BillingItem";
 import { CommandCenterItem } from "./items/CommandCenterItem";
 import { HomeItem } from "./items/HomeItem";
 import { InboxItem } from "./items/InboxItem";
@@ -53,6 +55,7 @@ export function SidebarNavSection({
 }: SidebarNavSectionProps = {}) {
   const view = useAppView();
   const homeTabEnabled = useFeatureFlag(HOME_TAB_FLAG);
+  const billingEnabled = useFeatureFlag(BILLING_FLAG);
 
   // When this section renders inside the Channels space, the destinations that
   // have a /website mirror stay in that space; everything else (and the whole
@@ -68,6 +71,7 @@ export function SidebarNavSection({
   const goMcpServers = inChannels
     ? navigateToWebsiteMcpServers
     : navigateToMcpServers;
+  const goBilling = () => openSettings("plan-usage");
   const goCommandCenter = inChannels
     ? navigateToWebsiteCommandCenter
     : navigateToCommandCenter;
@@ -80,6 +84,11 @@ export function SidebarNavSection({
   const isInboxActive = view.type === "inbox";
   const isAgentsActive = view.type === "agents";
   const isCommandCenterActive = view.type === "command-center";
+  // Billing opens the Plan & usage settings page, which has no AppView of its
+  // own: derive the highlight straight from the settings route.
+  const isBillingActive = useRouterState({
+    select: (s) => s.location.pathname.startsWith("/settings/plan-usage"),
+  });
   const isSkillsActive = view.type === "skills";
   const isMcpServersActive = view.type === "mcp-servers";
 
@@ -159,6 +168,12 @@ export function SidebarNavSection({
           activeCount={commandCenterActiveCount}
         />
       </Box>
+
+      {billingEnabled && !inChannels && (
+        <Box>
+          <BillingItem isActive={isBillingActive} onClick={goBilling} />
+        </Box>
+      )}
     </Flex>
   );
 }
diff --git a/packages/ui/src/features/sidebar/components/items/BillingItem.tsx b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx
new file mode 100644
index 0000000000..9c64d7563a
--- /dev/null
+++ b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx
@@ -0,0 +1,19 @@
+import { CreditCard } from "@phosphor-icons/react";
+import { SidebarItem } from "../SidebarItem";
+
+interface BillingItemProps {
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export function BillingItem({ isActive, onClick }: BillingItemProps) {
+  return (
+    <SidebarItem
+      depth={0}
+      icon={<CreditCard size={16} weight={isActive ? "fill" : "regular"} />}
+      label="Billing & usage"
+      isActive={isActive}
+      onClick={onClick}
+    />
+  );
+}

From 9ed3fe2f714177aa2a6403651118c69fb5f9ca13 Mon Sep 17 00:00:00 2001
From: Roberto Freitas <54923863+robertoecf@users.noreply.github.com>
Date: Sun, 5 Jul 2026 23:02:01 -0300
Subject: [PATCH 2/2] Update
 packages/ui/src/features/sidebar/components/items/BillingItem.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 .../ui/src/features/sidebar/components/items/BillingItem.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/features/sidebar/components/items/BillingItem.tsx b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx
index 9c64d7563a..67cc3a0b2f 100644
--- a/packages/ui/src/features/sidebar/components/items/BillingItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx
@@ -11,7 +11,7 @@ export function BillingItem({ isActive, onClick }: BillingItemProps) {
     <SidebarItem
       depth={0}
       icon={<CreditCard size={16} weight={isActive ? "fill" : "regular"} />}
-      label="Billing & usage"
+      label="Plan & usage"
       isActive={isActive}
       onClick={onClick}
     />