From 8119cfe0d75cfc21b0c2492dbc1bc6cc1c6434ea Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Wed, 22 Jul 2026 10:59:43 -0400
Subject: [PATCH 1/3] feat(loops): edit instructions inline on loop detail

Pull instructions out of the config panel into its own box that's
editable in place. Click into the textarea to edit, saves on blur via
the existing PATCH; Escape reverts. Removes the round-trip through the
full edit wizard just to tweak the prompt.

Generated-By: PostHog Code
Task-Id: 8a18478b-2989-4a7c-93f6-c54d3db955f0
---
 .../loops/components/LoopDetailView.tsx       | 75 +++++++++++++++++--
 1 file changed, 68 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index f16b8b85bf..e189d83eeb 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -9,8 +9,8 @@ import {
   navigateToEditLoop,
   navigateToLoops,
 } from "@posthog/ui/router/navigationBridge";
-import { AlertDialog, Flex, Text } from "@radix-ui/themes";
-import { useState } from "react";
+import { AlertDialog, Flex, Text, TextArea } from "@radix-ui/themes";
+import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {
   useDeleteLoop,
@@ -165,6 +165,8 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
 
         <ConfigSummarySection loop={loop} />
 
+        <InstructionsSection loop={loop} />
+
         <Flex direction="column" gap="2">
           <Flex align="center" gap="2">
             <Text className="font-medium text-[13px] text-gray-12">
@@ -278,13 +280,72 @@ function ConfigSummarySection({ loop }: { loop: LoopSchemas.Loop }) {
             </Flex>
           )}
         </SummaryRow>
+      </Flex>
+    </Flex>
+  );
+}
 
-        <SummaryRow label="Instructions">
-          <pre className="max-h-[200px] overflow-auto whitespace-pre-wrap text-[12px] text-gray-12 [font-family:var(--font-mono)]">
-            {loop.instructions}
-          </pre>
-        </SummaryRow>
+function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
+  const updateLoop = useUpdateLoop(loop.id);
+  const [draft, setDraft] = useState(loop.instructions);
+  // Escape reverts and blurs; skip the resulting onBlur save.
+  const skipCommit = useRef(false);
+
+  // Keep the box in sync when the loop is refetched or updated elsewhere.
+  useEffect(() => {
+    setDraft(loop.instructions);
+  }, [loop.instructions]);
+
+  const commit = () => {
+    if (skipCommit.current) {
+      skipCommit.current = false;
+      return;
+    }
+    const trimmed = draft.trim();
+    if (!trimmed) {
+      setDraft(loop.instructions);
+      return;
+    }
+    if (trimmed === loop.instructions.trim() || updateLoop.isPending) return;
+    updateLoop.mutate(
+      { instructions: trimmed },
+      {
+        onSuccess: () => toast.success("Instructions updated"),
+        onError: (error) => {
+          setDraft(loop.instructions);
+          toast.error("Failed to update instructions", {
+            description: error.message,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Flex direction="column" gap="3">
+      <Flex align="center" gap="2">
+        <Text className="font-medium text-[13px] text-gray-12">
+          Instructions
+        </Text>
+        {updateLoop.isPending ? (
+          <Text className="text-[11px] text-gray-10">Saving…</Text>
+        ) : null}
       </Flex>
+      <TextArea
+        value={draft}
+        disabled={updateLoop.isPending}
+        aria-label="Loop instructions"
+        className="min-h-[200px] text-[12.5px] leading-relaxed"
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            skipCommit.current = true;
+            setDraft(loop.instructions);
+            e.currentTarget.blur();
+          }
+        }}
+      />
     </Flex>
   );
 }

From 7cbeb4f9c6a9e434fe02f4217f8f0cf9cbd0fd09 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Wed, 22 Jul 2026 11:13:25 -0400
Subject: [PATCH 2/3] fix(loops): align inline editor with quill

Generated-By: PostHog Code
Task-Id: e5c17bb5-1f87-40c7-9891-0fa72f3e63a9
---
 .../loops/components/LoopDetailView.tsx       | 149 ++++++++++--------
 1 file changed, 82 insertions(+), 67 deletions(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index e189d83eeb..d84e128183 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -1,16 +1,26 @@
 import { ArrowLeftIcon, RepeatIcon } from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
-import { Switch } from "@posthog/quill";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Badge,
+  Button,
+  Switch,
+  Textarea,
+} from "@posthog/quill";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
-import { Badge } from "@posthog/ui/primitives/Badge";
-import { Button } from "@posthog/ui/primitives/Button";
 import { toast } from "@posthog/ui/primitives/toast";
 import {
   navigateToEditLoop,
   navigateToLoops,
 } from "@posthog/ui/router/navigationBridge";
-import { AlertDialog, Flex, Text, TextArea } from "@radix-ui/themes";
-import { useEffect, useRef, useState } from "react";
+import { Flex, Text } from "@radix-ui/themes";
+import { useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
 import {
   useDeleteLoop,
@@ -101,24 +111,25 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
     <div className="mx-auto w-full max-w-5xl px-8 py-6">
       <Flex direction="column" gap="5">
         <Flex direction="column" gap="3">
-          <button
-            type="button"
+          <Button
+            variant="link-muted"
+            size="xs"
             onClick={navigateToLoops}
-            className="flex w-fit items-center gap-1.5 border-none bg-transparent p-0 text-[12px] text-gray-11 no-underline hover:text-gray-12"
+            className="w-fit px-0"
           >
             <ArrowLeftIcon size={13} />
             Loops
-          </button>
+          </Button>
 
           <Flex align="center" justify="between" gap="3" wrap="wrap">
             <Flex align="center" gap="2" wrap="wrap">
               <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
                 {loop.name}
               </Text>
-              <Badge color={loopStatusColor(loop)}>
+              <Badge variant={loopStatusBadgeVariant(loop)}>
                 {loopStatusLabel(loop)}
               </Badge>
-              <Badge color="gray">{loop.visibility}</Badge>
+              <Badge>{loop.visibility}</Badge>
             </Flex>
             <Flex align="center" gap="2">
               <Switch
@@ -128,9 +139,8 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
                 onCheckedChange={handleToggleEnabled}
               />
               <Button
-                variant="soft"
-                color="gray"
-                size="1"
+                variant="outline"
+                size="xs"
                 loading={runLoop.isPending}
                 disabled={runLoop.isPending}
                 onClick={handleRunNow}
@@ -138,17 +148,15 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
                 Run now
               </Button>
               <Button
-                variant="soft"
-                color="gray"
-                size="1"
+                variant="outline"
+                size="xs"
                 onClick={() => navigateToEditLoop(loop.id)}
               >
                 Edit
               </Button>
               <Button
-                variant="soft"
-                color="red"
-                size="1"
+                variant="destructive"
+                size="xs"
                 onClick={() => setDeleteOpen(true)}
               >
                 Delete
@@ -203,41 +211,51 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
         </Flex>
       </Flex>
 
-      <AlertDialog.Root open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <AlertDialog.Content maxWidth="420px" size="1">
-          <AlertDialog.Title className="text-sm">Delete loop</AlertDialog.Title>
-          <AlertDialog.Description className="text-[13px]">
-            <Text color="gray" className="text-[13px]">
-              Permanently delete{" "}
-              <Text className="font-medium text-[13px]">{loop.name}</Text>? This
-              stops every trigger and cannot be undone.
-            </Text>
-          </AlertDialog.Description>
-          <Flex justify="end" gap="3" mt="3">
-            <AlertDialog.Cancel>
-              <Button variant="soft" color="gray" size="1">
-                Cancel
-              </Button>
-            </AlertDialog.Cancel>
-            <AlertDialog.Action>
-              <Button
-                variant="solid"
-                color="red"
-                size="1"
-                loading={deleteLoop.isPending}
-                disabled={deleteLoop.isPending}
-                onClick={handleDelete}
-              >
-                Delete
-              </Button>
-            </AlertDialog.Action>
-          </Flex>
-        </AlertDialog.Content>
-      </AlertDialog.Root>
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete loop</AlertDialogTitle>
+            <AlertDialogDescription>
+              <Text color="gray" className="text-[13px]">
+                Permanently delete{" "}
+                <Text className="font-medium text-[13px]">{loop.name}</Text>?
+                This stops every trigger and cannot be undone.
+              </Text>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose
+              render={
+                <Button variant="outline" size="sm">
+                  Cancel
+                </Button>
+              }
+            />
+            <Button
+              variant="destructive"
+              size="sm"
+              loading={deleteLoop.isPending}
+              disabled={deleteLoop.isPending}
+              onClick={handleDelete}
+            >
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
 
+function loopStatusBadgeVariant(
+  loop: LoopSchemas.Loop,
+): "default" | "destructive" | "success" {
+  const color = loopStatusColor(loop);
+  if (color === "green") return "success";
+  if (color === "red") return "destructive";
+  return "default";
+}
+
 function ConfigSummarySection({ loop }: { loop: LoopSchemas.Loop }) {
   return (
     <Flex direction="column" gap="3">
@@ -287,23 +305,18 @@ function ConfigSummarySection({ loop }: { loop: LoopSchemas.Loop }) {
 
 function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
   const updateLoop = useUpdateLoop(loop.id);
-  const [draft, setDraft] = useState(loop.instructions);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   // Escape reverts and blurs; skip the resulting onBlur save.
   const skipCommit = useRef(false);
 
-  // Keep the box in sync when the loop is refetched or updated elsewhere.
-  useEffect(() => {
-    setDraft(loop.instructions);
-  }, [loop.instructions]);
-
-  const commit = () => {
+  const commit = (value: string) => {
     if (skipCommit.current) {
       skipCommit.current = false;
       return;
     }
-    const trimmed = draft.trim();
+    const trimmed = value.trim();
     if (!trimmed) {
-      setDraft(loop.instructions);
+      if (textareaRef.current) textareaRef.current.value = loop.instructions;
       return;
     }
     if (trimmed === loop.instructions.trim() || updateLoop.isPending) return;
@@ -312,7 +325,8 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
       {
         onSuccess: () => toast.success("Instructions updated"),
         onError: (error) => {
-          setDraft(loop.instructions);
+          if (textareaRef.current)
+            textareaRef.current.value = loop.instructions;
           toast.error("Failed to update instructions", {
             description: error.message,
           });
@@ -331,17 +345,18 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
           <Text className="text-[11px] text-gray-10">Saving…</Text>
         ) : null}
       </Flex>
-      <TextArea
-        value={draft}
+      <Textarea
+        key={loop.instructions}
+        ref={textareaRef}
+        defaultValue={loop.instructions}
         disabled={updateLoop.isPending}
         aria-label="Loop instructions"
-        className="min-h-[200px] text-[12.5px] leading-relaxed"
-        onChange={(e) => setDraft(e.target.value)}
-        onBlur={commit}
+        className="min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
+        onBlur={(e) => commit(e.currentTarget.value)}
         onKeyDown={(e) => {
           if (e.key === "Escape") {
             skipCommit.current = true;
-            setDraft(loop.instructions);
+            e.currentTarget.value = loop.instructions;
             e.currentTarget.blur();
           }
         }}

From 1cafb41b3d2f2ca4a5db0a850817d7aabb05d515 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Wed, 22 Jul 2026 11:20:11 -0400
Subject: [PATCH 3/3] fix(loops): preserve instruction drafts

Generated-By: PostHog Code
Task-Id: e5c17bb5-1f87-40c7-9891-0fa72f3e63a9
---
 .../loops/components/LoopDetailView.tsx       | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index d84e128183..8318a684cf 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -305,7 +305,7 @@ function ConfigSummarySection({ loop }: { loop: LoopSchemas.Loop }) {
 
 function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
   const updateLoop = useUpdateLoop(loop.id);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [draft, setDraft] = useState<string | null>(null);
   // Escape reverts and blurs; skip the resulting onBlur save.
   const skipCommit = useRef(false);
 
@@ -316,17 +316,23 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
     }
     const trimmed = value.trim();
     if (!trimmed) {
-      if (textareaRef.current) textareaRef.current.value = loop.instructions;
+      setDraft(null);
+      return;
+    }
+    if (updateLoop.isPending) return;
+    if (trimmed === loop.instructions.trim()) {
+      setDraft(null);
       return;
     }
-    if (trimmed === loop.instructions.trim() || updateLoop.isPending) return;
     updateLoop.mutate(
       { instructions: trimmed },
       {
-        onSuccess: () => toast.success("Instructions updated"),
+        onSuccess: () => {
+          setDraft(null);
+          toast.success("Instructions updated");
+        },
         onError: (error) => {
-          if (textareaRef.current)
-            textareaRef.current.value = loop.instructions;
+          setDraft(null);
           toast.error("Failed to update instructions", {
             description: error.message,
           });
@@ -346,17 +352,16 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
         ) : null}
       </Flex>
       <Textarea
-        key={loop.instructions}
-        ref={textareaRef}
-        defaultValue={loop.instructions}
+        value={draft ?? loop.instructions}
         disabled={updateLoop.isPending}
         aria-label="Loop instructions"
         className="min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
+        onChange={(e) => setDraft(e.currentTarget.value)}
         onBlur={(e) => commit(e.currentTarget.value)}
         onKeyDown={(e) => {
           if (e.key === "Escape") {
             skipCommit.current = true;
-            e.currentTarget.value = loop.instructions;
+            setDraft(null);
             e.currentTarget.blur();
           }
         }}