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}
/>
+
+ {billingEnabled && !inChannels && (
+
+
+
+ )}
);
}
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..67cc3a0b2f
--- /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 (
+ }
+ label="Plan & usage"
+ isActive={isActive}
+ onClick={onClick}
+ />
+ );
+}