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({