gate loop creation at the project cap

Author: charlesvien

packages/api-client/src/loops.ts

@@ -239,6 +239,13 @@ export namespace LoopSchemas {
     next: string | null;
     previous: string | null;
     results: Array<Loop>;
+    /** Hard cap on non-deleted loops per project. Read this rather than hardcoding a
+     * number: the backend is authoritative, so raising it there reflects here on the
+     * next list. Creating beyond the cap returns a 429 `loop_safety_limit`. */
+    max_loops_per_team: number;
+    /** Current non-deleted, user-facing loops in this project, counted against
+     * `max_loops_per_team`. At or above the cap, creation is blocked. */
+    total_loop_count: number;
   };
 
   export type LoopRun = {

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

@@ -12,7 +12,7 @@ import {
 } from "../../loops/components/LoopFallbacks";
 import { LoopRow } from "../../loops/components/LoopRow";
 import { LoopsEmptyState } from "../../loops/components/LoopsEmptyState";
-import { useLoops } from "../../loops/hooks/useLoops";
+import { useLoopLimits, useLoops } from "../../loops/hooks/useLoops";
 import { useLoopDraftStore } from "../../loops/loopDraftStore";
 import { defaultLoopContextOutputs } from "../../loops/loopFormTypes";
 import { useChannels } from "../hooks/useChannels";
@@ -43,6 +43,11 @@ function contextQuickStarts(name: string): { label: string; prompt: string }[] {
  * this context. `channelId` is the desktop folder id, matching `context_target.folder_id`. */
 export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
   const { data: loops, isLoading, isError } = useLoops();
+  const limits = useLoopLimits();
+  const limitReason =
+    limits?.atLimit === true
+      ? `You've reached the limit of ${limits.max} loops for this project. Delete one to add another.`
+      : null;
   const { channels } = useChannels();
   const channel = channels.find((c) => c.id === channelId);
   const contextName = channel?.name ?? channelId;
@@ -103,7 +108,14 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
                 keeps its context.md or a canvas up to date.
               </Text>
             </Flex>
-            <Button variant="soft" color="gray" size="2" onClick={startBlank}>
+            <Button
+              variant="soft"
+              color="gray"
+              size="2"
+              onClick={startBlank}
+              disabled={limitReason != null}
+              disabledReason={limitReason}
+            >
               <PlusIcon size={14} />
               Create manually
             </Button>
@@ -143,6 +155,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
             context={{ folderId: channelId, name: contextName }}
             placeholder={`What should #${contextName} keep an eye on?`}
             quickStarts={contextQuickStarts(contextName)}
+            disabledReason={limitReason}
           />
         </Flex>
       </div>

packages/ui/src/features/loops/components/LoopBuilderComposer.tsx

@@ -11,26 +11,30 @@ const DEFAULT_EXAMPLES = [
 
 /** The "describe what you want and an agent builds it" prompt box. Passing `context` attaches
  * the built loop to it. `quickStarts` replaces the generic example chips above the box with
- * labeled starters (each fills the box for the user to finish). */
+ * labeled starters (each fills the box for the user to finish). `disabledReason`, when set, blocks
+ * the whole composer and shows that reason instead of the helper text (e.g. the project loop cap). */
 export function LoopBuilderComposer({
   context,
   placeholder = "What do you want automated?",
   quickStarts,
+  disabledReason,
 }: {
   context?: { folderId: string; name: string };
   placeholder?: string;
   quickStarts?: { label: string; prompt: string }[];
+  disabledReason?: string | null;
 }) {
   const [prompt, setPrompt] = useState("");
   const { runTask, isRunning } = useLoopBuilderTask(context);
 
+  const blocked = Boolean(disabledReason);
   const chips =
     quickStarts ??
     DEFAULT_EXAMPLES.map((example) => ({ label: example, prompt: example }));
 
   const start = () => {
     const text = prompt.trim();
-    if (!text || isRunning) return;
+    if (!text || isRunning || blocked) return;
     void runTask(text);
   };
 
@@ -41,7 +45,7 @@ export function LoopBuilderComposer({
           <button
             key={chip.label}
             type="button"
-            disabled={isRunning}
+            disabled={isRunning || blocked}
             onClick={() => setPrompt(chip.prompt)}
             className="rounded-full border border-gray-5 bg-gray-2 px-3 py-1 text-gray-11 text-xs transition-colors hover:border-gray-7 hover:bg-gray-3 disabled:opacity-60"
           >
@@ -57,7 +61,7 @@ export function LoopBuilderComposer({
         <textarea
           value={prompt}
           rows={2}
-          disabled={isRunning}
+          disabled={isRunning || blocked}
           placeholder={placeholder}
           className="w-full resize-none bg-transparent text-[13px] text-gray-12 leading-relaxed outline-none placeholder:text-gray-9 disabled:opacity-60"
           onChange={(e) => setPrompt(e.target.value)}
@@ -73,16 +77,18 @@ export function LoopBuilderComposer({
           }}
         />
         <Flex align="center" justify="between" gap="3">
-          <Text className="text-[11px] text-gray-9">
-            An agent builds the loop with you, then creates it on your
-            confirmation
+          <Text
+            className={`text-[11px] ${blocked ? "text-(--amber-11)" : "text-gray-9"}`}
+          >
+            {disabledReason ??
+              "An agent builds the loop with you, then creates it on your confirmation"}
           </Text>
           <IconButton
             variant="solid"
             size="1"
             aria-label="Build loop with an agent"
             loading={isRunning}
-            disabled={!prompt.trim() || isRunning}
+            disabled={!prompt.trim() || isRunning || blocked}
             onClick={start}
           >
             <ArrowUpIcon size={13} weight="bold" />

packages/ui/src/features/loops/components/LoopsListView.tsx

@@ -4,7 +4,7 @@ import { Button } from "@posthog/ui/primitives/Button";
 import { navigateToNewLoop } from "@posthog/ui/router/navigationBridge";
 import { Flex, Heading, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
-import { useLoops } from "../hooks/useLoops";
+import { useLoopLimits, useLoops } from "../hooks/useLoops";
 import { useLoopDraftStore } from "../loopDraftStore";
 import type { LoopTemplate } from "../loopTemplates";
 import { LoopBuilderComposer } from "./LoopBuilderComposer";
@@ -13,8 +13,17 @@ import { LoopRow } from "./LoopRow";
 import { LoopsEmptyState } from "./LoopsEmptyState";
 import { LoopTemplatesSection } from "./LoopTemplatesSection";
 
+/** Copy shown when the project is at its loop cap. `max` comes from the backend so the number
+ * never drifts from the limit the server actually enforces. */
+function loopLimitReason(max: number): string {
+  return `You've reached the limit of ${max} loops for this project. Delete one to add another.`;
+}
+
 export function LoopsListView() {
   const { data: loops, isLoading, isError, error } = useLoops();
+  const limits = useLoopLimits();
+  const limitReason =
+    limits?.atLimit === true ? loopLimitReason(limits.max) : null;
 
   const headerContent = useMemo(
     () => (
@@ -78,7 +87,14 @@ export function LoopsListView() {
                 the laptop!
               </Text>
             </Flex>
-            <Button variant="soft" color="gray" size="2" onClick={startBlank}>
+            <Button
+              variant="soft"
+              color="gray"
+              size="2"
+              onClick={startBlank}
+              disabled={limitReason != null}
+              disabledReason={limitReason}
+            >
               <PlusIcon size={14} />
               Create manually
             </Button>
@@ -120,7 +136,7 @@ export function LoopsListView() {
           gap="2"
           className="mx-auto w-full max-w-5xl px-8 pb-6"
         >
-          <LoopBuilderComposer />
+          <LoopBuilderComposer disabledReason={limitReason} />
         </Flex>
       </div>
     </Flex>

packages/ui/src/features/loops/hooks/useLoops.ts

@@ -2,24 +2,55 @@ import { type LoopSchemas, listLoops } from "@posthog/api-client/loops";
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
 import { useQuery } from "@tanstack/react-query";
 import { loopsKeys } from "./loopsKeys";
-import { useLoopsClient } from "./useLoopsClient";
+import { type LoopsApiClient, useLoopsClient } from "./useLoopsClient";
 
 const LOOPS_LIST_LIMIT = 100;
 
-export function useLoops() {
-  const loopsClient = useLoopsClient();
-
-  return useQuery<LoopSchemas.Loop[]>({
+/** Shared query for the loops list page. Both `useLoops` (the loop rows) and `useLoopLimits`
+ * (the per-project cap) read from this single fetch via `select`, so the cap the backend serves
+ * stays in lockstep with the list and there's no second request. */
+function loopsPageQueryOptions(loopsClient: LoopsApiClient | null) {
+  return {
     queryKey: loopsKeys.list(loopsClient?.projectId ?? null),
-    queryFn: async () => {
+    queryFn: async (): Promise<LoopSchemas.PaginatedLoopList> => {
       if (!loopsClient) throw new Error("Not authenticated");
-      const page = await listLoops(loopsClient.client, loopsClient.projectId, {
+      return listLoops(loopsClient.client, loopsClient.projectId, {
         limit: LOOPS_LIST_LIMIT,
       });
-      return page.results;
     },
     enabled: !!loopsClient,
     staleTime: 30_000,
     meta: AUTH_SCOPED_QUERY_META,
+  };
+}
+
+export function useLoops() {
+  const loopsClient = useLoopsClient();
+  return useQuery({
+    ...loopsPageQueryOptions(loopsClient),
+    select: (page: LoopSchemas.PaginatedLoopList) => page.results,
+  });
+}
+
+/** The per-project loop cap, straight from the backend so the frontend never hardcodes it. */
+export interface LoopLimits {
+  /** Hard cap on non-deleted loops in this project. */
+  max: number;
+  /** Current non-deleted loops counted against `max`. */
+  used: number;
+  /** True when creating another loop would be rejected with a 429. */
+  atLimit: boolean;
+}
+
+export function useLoopLimits(): LoopLimits | null {
+  const loopsClient = useLoopsClient();
+  const { data } = useQuery({
+    ...loopsPageQueryOptions(loopsClient),
+    select: (page: LoopSchemas.PaginatedLoopList): LoopLimits => ({
+      max: page.max_loops_per_team,
+      used: page.total_loop_count,
+      atLimit: page.total_loop_count >= page.max_loops_per_team,
+    }),
   });
+  return data ?? null;
 }