diff --git a/packages/ui/src/features/canvas/components/ChannelNav.tsx b/packages/ui/src/features/canvas/components/ChannelNav.tsx
index c95247fa7a..5089bd5fbd 100644
--- a/packages/ui/src/features/canvas/components/ChannelNav.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelNav.tsx
@@ -1,5 +1,12 @@
-import { BellIcon, EnvelopeSimple, Lightning } from "@phosphor-icons/react";
+import {
+ BellIcon,
+ EnvelopeSimple,
+ Lightning,
+ RepeatIcon,
+ SlidersHorizontal,
+} from "@phosphor-icons/react";
import { cn } from "@posthog/quill";
+import { LOOPS_FLAG } from "@posthog/shared";
import {
ANALYTICS_EVENTS,
type SidebarNavItem,
@@ -10,12 +17,15 @@ import {
SHORTCUTS,
} from "@posthog/ui/features/command/keyboard-shortcuts";
import { useCommandCenterActiveCount } from "@posthog/ui/features/command-center/useCommandCenterActiveCount";
+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 { CountBadge } from "@posthog/ui/primitives/CountBadge";
import { Tooltip } from "@posthog/ui/primitives/Tooltip";
import {
navigateToActivity,
navigateToInbox,
+ navigateToLoops,
navigateToWebsiteCommandCenter,
} from "@posthog/ui/router/navigationBridge";
import { useAppView } from "@posthog/ui/router/useAppView";
@@ -64,6 +74,7 @@ function NavIcon({
export function ChannelNav() {
const view = useAppView();
+ const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV);
const { counts } = useInboxAllReports({
ignoreFilters: true,
@@ -118,6 +129,25 @@ export function ChannelNav() {
/>
}
/>
+ {loopsEnabled ? (
+
+ }
+ label="Loops"
+ isActive={view.type === "loops"}
+ onClick={withTrack("loops", navigateToLoops)}
+ />
+ ) : null}
+ }
+ label="Configure"
+ isActive={false}
+ onClick={withTrack("configure", () => openSettings("agents"))}
+ />
);
}
diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index ff8685713f..48abf2c7cc 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,6 +36,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 { useLocation } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";
import { useLoop } from "../hooks/useLoop";
import {
@@ -62,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();
@@ -207,11 +213,17 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
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({