trunk-merge/pr-3886/26725976-7319-4764-9930-ad68ae2627c6

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 ? (
+        <NavIcon
+          icon={
+            <RepeatIcon
+              size={16}
+              weight={view.type === "loops" ? "fill" : "regular"}
+            />
+          }
+          label="Loops"
+          isActive={view.type === "loops"}
+          onClick={withTrack("loops", navigateToLoops)}
+        />
+      ) : null}
+      <NavIcon
+        icon={<SlidersHorizontal size={16} />}
+        label="Configure"
+        isActive={false}
+        onClick={withTrack("configure", () => openSettings("agents"))}
+      />
     </div>
   );
 }

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

@@ -27,13 +27,16 @@ 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";
 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 }) {
           <Button
             variant="link-muted"
             size="sm"
-            onClick={navigateToLoops}
+            onClick={() => {
+              if (hasLoopListOrigin && canGoBackInHistory()) {
+                goBackInHistory();
+                return;
+              }
+              navigateToLoops();
+            }}
             className="w-fit px-0"
           >
             <ArrowLeftIcon size={15} />
-            Loops
+            Back
           </Button>
 
           <Flex align="center" justify="between" gap="3" wrap="wrap">

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">