fix(loops): restore loops registry in personal space

Generated-By: PostHog Code
Task-Id: 0b782cef-7a2c-4061-b4ac-3c2908a096ba

Author: dmarticus

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

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@posthog/ui/features/canvas/hooks/useChannels", () => ({
+  useChannels: () => ({
+    channels: [{ id: "personal-space", name: "me", path: "/me" }],
+    isLoading: false,
+  }),
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelsLayout", () => ({
+  useChannelsLayout: () => true,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelHeader", () => ({
+  ChannelHeader: () => null,
+}));
+vi.mock("@posthog/ui/hooks/useSetHeaderContent", () => ({
+  useSetHeaderContent: () => {},
+}));
+vi.mock("@posthog/ui/router/navigationBridge", () => ({
+  navigateToNewLoop: vi.fn(),
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useOrgMembers", () => ({
+  useOrgMembers: () => ({
+    members: [],
+    isLoading: false,
+    isError: false,
+    isComplete: true,
+  }),
+}));
+vi.mock("@posthog/ui/features/loops/hooks/useLoops", () => ({
+  useLoops: () => ({ data: [], isLoading: false, isError: false }),
+  useLoopLimits: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopBuilderComposer", () => ({
+  LoopBuilderComposer: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopFallbacks", () => ({
+  LoopsEmptyNotice: () => null,
+  LoopsSkeleton: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopRow", () => ({
+  LoopRow: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopsEmptyState", () => ({
+  LoopsEmptyState: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopTemplatesSection", () => ({
+  LoopTemplatesSection: () => null,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useTaskChannels", () => ({
+  PERSONAL_CHANNEL_NAME: "me",
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopsListView", () => ({
+  LoopsListView: () => <div>Project loops registry</div>,
+}));
+
+import { WebsiteChannelLoops } from "./WebsiteChannelLoops";
+
+describe("WebsiteChannelLoops", () => {
+  it("shows the project loops registry in the Personal space", () => {
+    render(<WebsiteChannelLoops channelId="personal-space" />);
+
+    expect(screen.getByText("Project loops registry")).toBeInTheDocument();
+  });
+});

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

@@ -22,6 +22,7 @@ import {
 } from "../../loops/components/LoopFallbacks";
 import { LoopRow } from "../../loops/components/LoopRow";
 import { LoopsEmptyState } from "../../loops/components/LoopsEmptyState";
+import { LoopsListView } from "../../loops/components/LoopsListView";
 import { LoopTemplatesSection } from "../../loops/components/LoopTemplatesSection";
 import { useLoopLimits, useLoops } from "../../loops/hooks/useLoops";
 import { useLoopDraftStore } from "../../loops/loopDraftStore";
@@ -56,17 +57,39 @@ function contextQuickStarts(name: string): { label: string; prompt: string }[] {
  * composer pinned at the bottom), but the build surface is tuned to automations that feed
  * this context. `channelId` is the desktop folder id, matching `context_target.folder_id`. */
 export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
+  const { channels } = useChannels();
+  const channel = channels.find((candidate) => candidate.id === channelId);
+
+  // The Personal space is the project-level home for loops in the spaces
+  // layout. API-created and other unattached loops have no context_target, so
+  // rendering the space-scoped list here incorrectly produces the global
+  // "Create your first loop" empty state while those loops already exist.
+  if (channel?.name === PERSONAL_CHANNEL_NAME) {
+    return <LoopsListView />;
+  }
+
+  return (
+    <SpaceAttachedLoops
+      channelId={channelId}
+      contextName={channel?.name ?? channelId}
+    />
+  );
+}
+
+function SpaceAttachedLoops({
+  channelId,
+  contextName,
+}: {
+  channelId: string;
+  contextName: string;
+}) {
   const { data: loops, isLoading, isError } = useLoops();
   const spacesLayout = useChannelsLayout();
   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;
-  const isPersonal = contextName === PERSONAL_CHANNEL_NAME;
 
   useSetHeaderContent(
     useMemo(
@@ -113,7 +136,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
     navigateToNewLoop();
   };
 
-  const title = isPersonal ? "Loops" : `Automate #${contextName}`;
+  const title = `Automate #${contextName}`;
   const description =
     "Put your work on autopilot. Loops run on a schedule, on an API call, or when something happens on GitHub. You can finally close the laptop!";
   const createButton = (
@@ -214,9 +237,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               </Flex>
             </Flex>
           ) : (
-            <LoopsEmptyState
-              contextName={isPersonal ? undefined : contextName}
-            />
+            <LoopsEmptyState contextName={contextName} />
           )}
 
           <LoopTemplatesSection onSelect={startFromTemplate} />