gate loops behind posthog-desktop-loops flag

Author: charlesvien

packages/shared/src/flags.ts

@@ -15,6 +15,8 @@ export const DISCOVERY_RUN_FLAG = "posthog-code-discovery-run";
 // Gates the entire canvas feature: the app rail's Channels space, the /website
 // routes, channels and dashboards.
 export const PROJECT_BLUEBIRD_FLAG = "project-bluebird";
+// Gates the Loops feature: the sidebar Loops space and the per-channel Loops tab.
+export const LOOPS_FLAG = "posthog-desktop-loops";
 export const TASKS_PREWARM_SANDBOX_FLAG = "tasks-prewarm-sandbox";
 export const GLM_MODEL_FLAG = "posthog-code-glm-model";
 /** Spoken narration (agent speaks via the `speak` tool). Gated for a staged rollout. */

packages/ui/src/features/canvas/components/ChannelTabs.tsx

@@ -1,9 +1,12 @@
 import { Button, cn } from "@posthog/quill";
+import { LOOPS_FLAG } from "@posthog/shared";
 import { CHANNEL_SECTIONS } from "@posthog/ui/features/canvas/channelSections";
 import { ChannelPinnedMenu } from "@posthog/ui/features/canvas/components/ChannelPinnedMenu";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { Link, useRouterState } from "@tanstack/react-router";
 
 const TABS = CHANNEL_SECTIONS.map((s) => ({
+  key: s.key,
   label: s.label,
   to: `/website/$channelId/${s.key}` as const,
 }));
@@ -13,10 +16,12 @@ const TABS = CHANNEL_SECTIONS.map((s) => ({
 // codebase's convention) rather than Link's activeProps.
 export function ChannelTabs({ channelId }: { channelId: string }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV);
+  const tabs = loopsEnabled ? TABS : TABS.filter((tab) => tab.key !== "loops");
 
   return (
     <nav className="flex items-center gap-px">
-      {TABS.map((tab) => {
+      {tabs.map((tab) => {
         const href = tab.to.replace("$channelId", channelId);
         const active = pathname === href;
         return (

packages/ui/src/features/sidebar/components/SidebarNavSection.tsx

@@ -1,6 +1,6 @@
 import { HashIcon } from "@phosphor-icons/react";
 import { Badge, Switch } from "@posthog/quill";
-import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
+import { LOOPS_FLAG, PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { HOME_TAB_FLAG } from "@posthog/shared/constants";
 import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
@@ -62,6 +62,9 @@ export function SidebarNavSection({
 }: SidebarNavSectionProps = {}) {
   const view = useAppView();
   const homeTabEnabled = useFeatureFlag(HOME_TAB_FLAG);
+  // Loops stays behind posthog-desktop-loops; default on in dev so local builds
+  // keep the nav item. Also gates the per-channel Loops tab (see ChannelTabs).
+  const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV);
   // Channels stay behind project-bluebird: the "Enable channels" nav row (and
   // the Canvas row it reveals) only appear where the canvas backend is wired.
   const bluebirdEnabled = useFeatureFlag(
@@ -164,9 +167,11 @@ export function SidebarNavSection({
         <AgentsItem isActive={isAgentsActive} onClick={navigateToAgents} />
       </Box>
 
-      <Box>
-        <LoopsItem isActive={isLoopsActive} onClick={navigateToLoops} />
-      </Box>
+      {loopsEnabled ? (
+        <Box>
+          <LoopsItem isActive={isLoopsActive} onClick={navigateToLoops} />
+        </Box>
+      ) : null}
 
       <Box>
         <SkillsItem isActive={isSkillsActive} onClick={goSkills} />