From 482beb43306c1dcf6b48f5ec6e0306ee6c793209 Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Tue, 28 Jul 2026 10:59:18 -0400
Subject: [PATCH 1/4] Fix loop back navigation from channels

Generated-By: PostHog Code
Task-Id: 3e0a680c-b843-46f6-ba7e-7898c06bcdb8
---
 .../canvas/components/WebsiteChannelLoops.tsx |  2 +-
 .../loops/components/LoopDetailView.tsx       | 15 ++++++++++-
 .../src/features/loops/components/LoopRow.tsx |  6 +++++
 .../src/features/loops/loopBackTarget.test.ts | 20 +++++++++++++++
 .../ui/src/features/loops/loopBackTarget.ts   | 25 +++++++++++++++++++
 5 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/features/loops/loopBackTarget.test.ts
 create mode 100644 packages/ui/src/features/loops/loopBackTarget.ts

diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
index a27711078c..73db51bf30 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
@@ -139,7 +139,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               </Text>
               <Flex direction="column" gap="2">
                 {attachedLoops.map((loop) => (
-                  <LoopRow key={loop.id} loop={loop} />
+                  <LoopRow key={loop.id} loop={loop} channelId={channelId} />
                 ))}
               </Flex>
             </Flex>
diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index ff8685713f..a3f8c0e9c0 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -34,6 +34,7 @@ import { track } from "@posthog/ui/shell/analytics";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { Flex, Text } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {
@@ -47,6 +48,7 @@ import {
   buildLoopEnabledToggledProps,
   buildLoopViewedProps,
 } from "../loopAnalytics";
+import { useLoopBackTarget } from "../loopBackTarget";
 import {
   describeTrigger,
   loopFireBlockedMessage,
@@ -62,6 +64,8 @@ import { LoopLoadError } from "./LoopFallbacks";
 import { LoopRunRow } from "./LoopRunRow";
 
 export function LoopDetailView({ loopId }: { loopId: string }) {
+  const navigate = useNavigate();
+  const backTarget = useLoopBackTarget();
   const { data: loop, isLoading, isError } = useLoop(loopId);
   const updateLoop = useUpdateLoop(loopId);
   const deleteLoop = useDeleteLoop();
@@ -207,7 +211,16 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
           <Button
             variant="link-muted"
             size="sm"
-            onClick={navigateToLoops}
+            onClick={() => {
+              if (backTarget) {
+                void navigate({
+                  to: "/website/$channelId/loops",
+                  params: { channelId: backTarget.channelId },
+                });
+                return;
+              }
+              navigateToLoops();
+            }}
             className="w-fit px-0"
           >
             <ArrowLeftIcon size={15} />
diff --git a/packages/ui/src/features/loops/components/LoopRow.tsx b/packages/ui/src/features/loops/components/LoopRow.tsx
index 2b53b2f4a2..af66eeeeec 100644
--- a/packages/ui/src/features/loops/components/LoopRow.tsx
+++ b/packages/ui/src/features/loops/components/LoopRow.tsx
@@ -18,12 +18,14 @@ export function LoopRow({
   creatorLoading = false,
   creatorError = false,
   creatorLookupComplete = true,
+  channelId,
 }: {
   loop: LoopSchemas.Loop;
   creator?: UserBasic;
   creatorLoading?: boolean;
   creatorError?: boolean;
   creatorLookupComplete?: boolean;
+  channelId?: string;
 }) {
   const description = loop.description.trim();
 
@@ -55,6 +57,10 @@ export function LoopRow({
     <Link
       to="/code/loops/$loopId"
       params={{ loopId: loop.id }}
+      state={(previous) => ({
+        ...previous,
+        loopBackTarget: channelId ? { channelId } : undefined,
+      })}
       className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
     >
       <Flex align="center" gap="3" className="min-w-0">
diff --git a/packages/ui/src/features/loops/loopBackTarget.test.ts b/packages/ui/src/features/loops/loopBackTarget.test.ts
new file mode 100644
index 0000000000..e23767b237
--- /dev/null
+++ b/packages/ui/src/features/loops/loopBackTarget.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { asLoopBackTarget } from "./loopBackTarget";
+
+describe("asLoopBackTarget", () => {
+  it.each([
+    [undefined],
+    [null],
+    [{}],
+    [{ channelId: "" }],
+    [{ channelId: 42 }],
+  ])("rejects an invalid history target", (target) => {
+    expect(asLoopBackTarget(target)).toBeNull();
+  });
+
+  it("accepts a channel origin", () => {
+    expect(asLoopBackTarget({ channelId: "channel-1" })).toEqual({
+      channelId: "channel-1",
+    });
+  });
+});
diff --git a/packages/ui/src/features/loops/loopBackTarget.ts b/packages/ui/src/features/loops/loopBackTarget.ts
new file mode 100644
index 0000000000..3268220687
--- /dev/null
+++ b/packages/ui/src/features/loops/loopBackTarget.ts
@@ -0,0 +1,25 @@
+import { useLocation } from "@tanstack/react-router";
+
+export interface LoopBackTarget {
+  channelId: string;
+}
+
+declare module "@tanstack/react-router" {
+  interface HistoryState {
+    loopBackTarget?: LoopBackTarget;
+  }
+}
+
+export function asLoopBackTarget(value: unknown): LoopBackTarget | null {
+  if (!value || typeof value !== "object") return null;
+  const { channelId } = value as Record<string, unknown>;
+  if (typeof channelId !== "string" || channelId.length === 0) return null;
+  return { channelId };
+}
+
+export function useLoopBackTarget(): LoopBackTarget | null {
+  const target = useLocation({
+    select: (location) => location.state.loopBackTarget,
+  });
+  return asLoopBackTarget(target);
+}

From c8189df5b2ef808efa58ded274efe76865c1072c Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Tue, 28 Jul 2026 11:01:43 -0400
Subject: [PATCH 2/4] Use history for loop back navigation

Generated-By: PostHog Code
Task-Id: 3e0a680c-b843-46f6-ba7e-7898c06bcdb8
---
 .../canvas/components/WebsiteChannelLoops.tsx |  2 +-
 .../loops/components/LoopDetailView.tsx       | 15 ++++-------
 .../src/features/loops/components/LoopRow.tsx |  6 -----
 .../src/features/loops/loopBackTarget.test.ts | 20 ---------------
 .../ui/src/features/loops/loopBackTarget.ts   | 25 -------------------
 5 files changed, 6 insertions(+), 62 deletions(-)
 delete mode 100644 packages/ui/src/features/loops/loopBackTarget.test.ts
 delete mode 100644 packages/ui/src/features/loops/loopBackTarget.ts

diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
index 73db51bf30..a27711078c 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx
@@ -139,7 +139,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               </Text>
               <Flex direction="column" gap="2">
                 {attachedLoops.map((loop) => (
-                  <LoopRow key={loop.id} loop={loop} channelId={channelId} />
+                  <LoopRow key={loop.id} loop={loop} />
                 ))}
               </Flex>
             </Flex>
diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index a3f8c0e9c0..51edebd28f 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -27,6 +27,8 @@ import { TimezoneTimestamp } from "@posthog/ui/primitives/TimezoneTimestamp";
 import { systemTimezone } from "@posthog/ui/primitives/timezone";
 import { toast } from "@posthog/ui/primitives/toast";
 import {
+  canGoBackInHistory,
+  goBackInHistory,
   navigateToEditLoop,
   navigateToLoops,
 } from "@posthog/ui/router/navigationBridge";
@@ -34,7 +36,6 @@ import { track } from "@posthog/ui/shell/analytics";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { Flex, Text } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {
@@ -48,7 +49,6 @@ import {
   buildLoopEnabledToggledProps,
   buildLoopViewedProps,
 } from "../loopAnalytics";
-import { useLoopBackTarget } from "../loopBackTarget";
 import {
   describeTrigger,
   loopFireBlockedMessage,
@@ -64,8 +64,6 @@ import { LoopLoadError } from "./LoopFallbacks";
 import { LoopRunRow } from "./LoopRunRow";
 
 export function LoopDetailView({ loopId }: { loopId: string }) {
-  const navigate = useNavigate();
-  const backTarget = useLoopBackTarget();
   const { data: loop, isLoading, isError } = useLoop(loopId);
   const updateLoop = useUpdateLoop(loopId);
   const deleteLoop = useDeleteLoop();
@@ -212,11 +210,8 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
             variant="link-muted"
             size="sm"
             onClick={() => {
-              if (backTarget) {
-                void navigate({
-                  to: "/website/$channelId/loops",
-                  params: { channelId: backTarget.channelId },
-                });
+              if (canGoBackInHistory()) {
+                goBackInHistory();
                 return;
               }
               navigateToLoops();
@@ -224,7 +219,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
             className="w-fit px-0"
           >
             <ArrowLeftIcon size={15} />
-            Loops
+            Back
           </Button>
 
           <Flex align="center" justify="between" gap="3" wrap="wrap">
diff --git a/packages/ui/src/features/loops/components/LoopRow.tsx b/packages/ui/src/features/loops/components/LoopRow.tsx
index af66eeeeec..2b53b2f4a2 100644
--- a/packages/ui/src/features/loops/components/LoopRow.tsx
+++ b/packages/ui/src/features/loops/components/LoopRow.tsx
@@ -18,14 +18,12 @@ export function LoopRow({
   creatorLoading = false,
   creatorError = false,
   creatorLookupComplete = true,
-  channelId,
 }: {
   loop: LoopSchemas.Loop;
   creator?: UserBasic;
   creatorLoading?: boolean;
   creatorError?: boolean;
   creatorLookupComplete?: boolean;
-  channelId?: string;
 }) {
   const description = loop.description.trim();
 
@@ -57,10 +55,6 @@ export function LoopRow({
     <Link
       to="/code/loops/$loopId"
       params={{ loopId: loop.id }}
-      state={(previous) => ({
-        ...previous,
-        loopBackTarget: channelId ? { channelId } : undefined,
-      })}
       className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
     >
       <Flex align="center" gap="3" className="min-w-0">
diff --git a/packages/ui/src/features/loops/loopBackTarget.test.ts b/packages/ui/src/features/loops/loopBackTarget.test.ts
deleted file mode 100644
index e23767b237..0000000000
--- a/packages/ui/src/features/loops/loopBackTarget.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { asLoopBackTarget } from "./loopBackTarget";
-
-describe("asLoopBackTarget", () => {
-  it.each([
-    [undefined],
-    [null],
-    [{}],
-    [{ channelId: "" }],
-    [{ channelId: 42 }],
-  ])("rejects an invalid history target", (target) => {
-    expect(asLoopBackTarget(target)).toBeNull();
-  });
-
-  it("accepts a channel origin", () => {
-    expect(asLoopBackTarget({ channelId: "channel-1" })).toEqual({
-      channelId: "channel-1",
-    });
-  });
-});
diff --git a/packages/ui/src/features/loops/loopBackTarget.ts b/packages/ui/src/features/loops/loopBackTarget.ts
deleted file mode 100644
index 3268220687..0000000000
--- a/packages/ui/src/features/loops/loopBackTarget.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useLocation } from "@tanstack/react-router";
-
-export interface LoopBackTarget {
-  channelId: string;
-}
-
-declare module "@tanstack/react-router" {
-  interface HistoryState {
-    loopBackTarget?: LoopBackTarget;
-  }
-}
-
-export function asLoopBackTarget(value: unknown): LoopBackTarget | null {
-  if (!value || typeof value !== "object") return null;
-  const { channelId } = value as Record<string, unknown>;
-  if (typeof channelId !== "string" || channelId.length === 0) return null;
-  return { channelId };
-}
-
-export function useLoopBackTarget(): LoopBackTarget | null {
-  const target = useLocation({
-    select: (location) => location.state.loopBackTarget,
-  });
-  return asLoopBackTarget(target);
-}

From 65db0dcc6e7ed8be747130bff9082e00d490c6dd Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Tue, 28 Jul 2026 11:11:35 -0400
Subject: [PATCH 3/4] Handle direct loop detail navigation safely

Generated-By: PostHog Code
Task-Id: f4cc7312-bef8-46af-86a7-84a19118d770
---
 .../ui/src/features/loops/components/LoopDetailView.tsx    | 6 +++++-
 packages/ui/src/features/loops/components/LoopRow.tsx      | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index 51edebd28f..fc9665c972 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -35,6 +35,7 @@ import {
 import { track } from "@posthog/ui/shell/analytics";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { Flex, Text } from "@radix-ui/themes";
+import { useLocation } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
@@ -64,6 +65,9 @@ import { LoopLoadError } from "./LoopFallbacks";
 import { LoopRunRow } from "./LoopRunRow";
 
 export function LoopDetailView({ loopId }: { loopId: string }) {
+  const hasLoopListOrigin = useLocation({
+    select: (location) => location.state.loopListOrigin === true,
+  });
   const { data: loop, isLoading, isError } = useLoop(loopId);
   const updateLoop = useUpdateLoop(loopId);
   const deleteLoop = useDeleteLoop();
@@ -210,7 +214,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
             variant="link-muted"
             size="sm"
             onClick={() => {
-              if (canGoBackInHistory()) {
+              if (hasLoopListOrigin && canGoBackInHistory()) {
                 goBackInHistory();
                 return;
               }
diff --git a/packages/ui/src/features/loops/components/LoopRow.tsx b/packages/ui/src/features/loops/components/LoopRow.tsx
index 2b53b2f4a2..4f2c4f4bab 100644
--- a/packages/ui/src/features/loops/components/LoopRow.tsx
+++ b/packages/ui/src/features/loops/components/LoopRow.tsx
@@ -12,6 +12,12 @@ import {
   summarizeNotificationDestinations,
 } from "../loopDisplay";
 
+declare module "@tanstack/react-router" {
+  interface HistoryState {
+    loopListOrigin?: boolean;
+  }
+}
+
 export function LoopRow({
   loop,
   creator,
@@ -55,6 +61,7 @@ export function LoopRow({
     <Link
       to="/code/loops/$loopId"
       params={{ loopId: loop.id }}
+      state={{ loopListOrigin: true }}
       className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
     >
       <Flex align="center" gap="3" className="min-w-0">

From c174cc79c56ae708517999b7e9cd53282c26f6bf Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Tue, 28 Jul 2026 12:25:04 -0400
Subject: [PATCH 4/4] Fix loop detail import ordering

Generated-By: PostHog Code
Task-Id: f4cc7312-bef8-46af-86a7-84a19118d770
---
 packages/ui/src/features/loops/components/LoopDetailView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index fc9665c972..48abf2c7cc 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -35,8 +35,8 @@ import {
 import { track } from "@posthog/ui/shell/analytics";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { Flex, Text } from "@radix-ui/themes";
-import { useLocation } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
+import { useLocation } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {