From ab0316eb57af410b088538c62ba83b82847eea62 Mon Sep 17 00:00:00 2001
From: Matt Pua <matthewpua@gmail.com>
Date: Mon, 27 Jul 2026 13:16:09 -0400
Subject: [PATCH 1/3] Allow inline loop metadata editing

Generated-By: PostHog Code
Task-Id: beb0b035-943b-4a49-a2e4-04b47c3cbf07
---
 .../loops/components/LoopDetailView.tsx       | 175 ++++++++++++++++--
 1 file changed, 164 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index ff8685713f..061f8d526e 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -1,4 +1,8 @@
-import { ArrowLeftIcon, RepeatIcon } from "@phosphor-icons/react";
+import {
+  ArrowLeftIcon,
+  PencilSimpleIcon,
+  RepeatIcon,
+} from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
 import { isUploadableSkillSource } from "@posthog/core/message-editor/skillTags";
 import { useHostTRPC } from "@posthog/host-router/react";
@@ -32,7 +36,7 @@ import {
 } 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 { Flex, Text, TextField } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { useLoop } from "../hooks/useLoop";
@@ -215,10 +219,8 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
           </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>
+            <Flex align="center" gap="2" wrap="wrap" className="min-w-0">
+              <EditableLoopTitle loop={loop} />
               <Badge variant={loopStatusBadgeVariant(loop)}>
                 {loopStatusLabel(loop)}
               </Badge>
@@ -257,11 +259,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
             </Flex>
           </Flex>
 
-          {loop.description.trim() ? (
-            <Text className="max-w-3xl text-[12.5px] text-gray-11 leading-snug">
-              {loop.description}
-            </Text>
-          ) : null}
+          <EditableLoopDescription loop={loop} />
 
           <PausedNotice loop={loop} />
         </Flex>
@@ -347,6 +345,161 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
   );
 }
 
+function EditableLoopTitle({ loop }: { loop: LoopSchemas.Loop }) {
+  const updateLoop = useUpdateLoop(loop.id);
+  const [draft, setDraft] = useState<string | null>(null);
+  const skipCommit = useRef(false);
+
+  const commit = (value: string) => {
+    if (skipCommit.current) {
+      skipCommit.current = false;
+      return;
+    }
+    const name = value.trim();
+    if (!name || name === loop.name.trim()) {
+      setDraft(null);
+      return;
+    }
+    updateLoop.mutate(
+      { name },
+      {
+        onSuccess: () => {
+          setDraft(null);
+          toast.success("Loop title updated");
+        },
+        onError: (error) => {
+          setDraft(null);
+          toast.error("Failed to update loop title", {
+            description: error.message,
+          });
+        },
+      },
+    );
+  };
+
+  if (draft === null) {
+    return (
+      <button
+        type="button"
+        className="group flex min-w-0 items-center gap-1 rounded-(--radius-1) px-1 py-0.5 text-left hover:bg-(--gray-3)"
+        aria-label="Edit loop title"
+        onClick={() => setDraft(loop.name)}
+      >
+        <Text className="truncate font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
+          {loop.name}
+        </Text>
+        <PencilSimpleIcon
+          size={14}
+          className="shrink-0 text-gray-9 opacity-0 group-hover:opacity-100"
+        />
+      </button>
+    );
+  }
+
+  return (
+    <TextField.Root
+      value={draft}
+      disabled={updateLoop.isPending}
+      autoFocus
+      aria-label="Loop title"
+      className="min-w-64 font-bold text-[18px]"
+      onChange={(event) => setDraft(event.currentTarget.value)}
+      onBlur={(event) => commit(event.currentTarget.value)}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          skipCommit.current = true;
+          setDraft(null);
+          event.currentTarget.blur();
+        } else if (event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      }}
+    />
+  );
+}
+
+function EditableLoopDescription({ loop }: { loop: LoopSchemas.Loop }) {
+  const updateLoop = useUpdateLoop(loop.id);
+  const [draft, setDraft] = useState<string | null>(null);
+  const skipCommit = useRef(false);
+
+  const commit = (value: string) => {
+    if (skipCommit.current) {
+      skipCommit.current = false;
+      return;
+    }
+    const description = value.trim();
+    if (description === loop.description.trim()) {
+      setDraft(null);
+      return;
+    }
+    updateLoop.mutate(
+      { description },
+      {
+        onSuccess: () => {
+          setDraft(null);
+          toast.success("Loop description updated");
+        },
+        onError: (error) => {
+          setDraft(null);
+          toast.error("Failed to update loop description", {
+            description: error.message,
+          });
+        },
+      },
+    );
+  };
+
+  if (draft === null) {
+    return (
+      <button
+        type="button"
+        className="group flex max-w-3xl items-center gap-1 rounded-(--radius-1) px-1 py-0.5 text-left hover:bg-(--gray-3)"
+        aria-label="Edit loop description"
+        onClick={() => setDraft(loop.description)}
+      >
+        <Text
+          className={
+            loop.description.trim()
+              ? "text-[12.5px] text-gray-11 leading-snug"
+              : "text-[12.5px] text-gray-9 leading-snug"
+          }
+        >
+          {loop.description.trim() || "Add a description"}
+        </Text>
+        <PencilSimpleIcon
+          size={12}
+          className="shrink-0 text-gray-9 opacity-0 group-hover:opacity-100"
+        />
+      </button>
+    );
+  }
+
+  return (
+    <Textarea
+      value={draft}
+      disabled={updateLoop.isPending}
+      autoFocus
+      aria-label="Loop description"
+      placeholder="Add a description"
+      className="max-w-3xl text-[12.5px] leading-snug"
+      onChange={(event) => setDraft(event.currentTarget.value)}
+      onBlur={(event) => commit(event.currentTarget.value)}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          skipCommit.current = true;
+          setDraft(null);
+          event.currentTarget.blur();
+        } else if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      }}
+    />
+  );
+}
+
 function loopStatusBadgeVariant(
   loop: LoopSchemas.Loop,
 ): "default" | "destructive" | "success" {

From 22579b4c98026192903881738e50a69927401045 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Mon, 27 Jul 2026 13:37:26 -0400
Subject: [PATCH 2/3] fix: widen inline loop title input

Match the display typography and give the edit field room so long
titles are not clipped.

Generated-By: PostHog Code
Task-Id: beb0b035-943b-4a49-a2e4-04b47c3cbf07
---
 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 061f8d526e..f3fdd3c5cf 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -402,7 +402,7 @@ function EditableLoopTitle({ loop }: { loop: LoopSchemas.Loop }) {
       disabled={updateLoop.isPending}
       autoFocus
       aria-label="Loop title"
-      className="min-w-64 font-bold text-[18px]"
+      className="w-full min-w-72 max-w-2xl flex-1 font-bold text-[22px] tracking-tight"
       onChange={(event) => setDraft(event.currentTarget.value)}
       onBlur={(event) => commit(event.currentTarget.value)}
       onKeyDown={(event) => {

From 0f774795655fad865e69ee05be0e402e74b48264 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Mon, 27 Jul 2026 13:46:38 -0400
Subject: [PATCH 3/3] refactor: extract useInlineEdit for loop inline editing

QA pass on the inline title/description editors:

- Extract the triplicated save-on-blur state machine (title,
  description, instructions) into useInlineEdit, closing the drift
  where the new editors lacked the isPending guard.
- Description Enter now inserts a newline instead of committing,
  matching the instructions textarea; single-line title still
  commits on Enter.
- Add title tooltip for truncated names.
- Bump empty-description placeholder to the gray-10 muted-text token.
- Cover the hook with tests.

Generated-By: PostHog Code
Task-Id: beb0b035-943b-4a49-a2e4-04b47c3cbf07
---
 .../loops/components/LoopDetailView.tsx       | 214 +++++++-----------
 .../loops/hooks/useInlineEdit.test.ts         | 126 +++++++++++
 .../src/features/loops/hooks/useInlineEdit.ts |  85 +++++++
 3 files changed, 288 insertions(+), 137 deletions(-)
 create mode 100644 packages/ui/src/features/loops/hooks/useInlineEdit.test.ts
 create mode 100644 packages/ui/src/features/loops/hooks/useInlineEdit.ts

diff --git a/packages/ui/src/features/loops/components/LoopDetailView.tsx b/packages/ui/src/features/loops/components/LoopDetailView.tsx
index f3fdd3c5cf..e1ed412ef5 100644
--- a/packages/ui/src/features/loops/components/LoopDetailView.tsx
+++ b/packages/ui/src/features/loops/components/LoopDetailView.tsx
@@ -39,6 +39,7 @@ import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { Flex, Text, TextField } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
+import { useInlineEdit } from "../hooks/useInlineEdit";
 import { useLoop } from "../hooks/useLoop";
 import {
   useDeleteLoop,
@@ -347,45 +348,40 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
 
 function EditableLoopTitle({ loop }: { loop: LoopSchemas.Loop }) {
   const updateLoop = useUpdateLoop(loop.id);
-  const [draft, setDraft] = useState<string | null>(null);
-  const skipCommit = useRef(false);
-
-  const commit = (value: string) => {
-    if (skipCommit.current) {
-      skipCommit.current = false;
-      return;
-    }
-    const name = value.trim();
-    if (!name || name === loop.name.trim()) {
-      setDraft(null);
-      return;
-    }
-    updateLoop.mutate(
-      { name },
-      {
-        onSuccess: () => {
-          setDraft(null);
-          toast.success("Loop title updated");
+  const edit = useInlineEdit({
+    current: loop.name,
+    isPending: updateLoop.isPending,
+    commitOnEnter: "enter",
+    onCommit: (name, { reset }) =>
+      updateLoop.mutate(
+        { name },
+        {
+          onSuccess: () => {
+            reset();
+            toast.success("Loop title updated");
+          },
+          onError: (error) => {
+            reset();
+            toast.error("Failed to update loop title", {
+              description: error.message,
+            });
+          },
         },
-        onError: (error) => {
-          setDraft(null);
-          toast.error("Failed to update loop title", {
-            description: error.message,
-          });
-        },
-      },
-    );
-  };
+      ),
+  });
 
-  if (draft === null) {
+  if (!edit.isEditing) {
     return (
       <button
         type="button"
         className="group flex min-w-0 items-center gap-1 rounded-(--radius-1) px-1 py-0.5 text-left hover:bg-(--gray-3)"
         aria-label="Edit loop title"
-        onClick={() => setDraft(loop.name)}
+        onClick={edit.startEditing}
       >
-        <Text className="truncate font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
+        <Text
+          className="truncate font-bold text-[22px] text-gray-12 leading-tight tracking-tight"
+          title={loop.name}
+        >
           {loop.name}
         </Text>
         <PencilSimpleIcon
@@ -398,75 +394,53 @@ function EditableLoopTitle({ loop }: { loop: LoopSchemas.Loop }) {
 
   return (
     <TextField.Root
-      value={draft}
+      value={edit.draft ?? ""}
       disabled={updateLoop.isPending}
       autoFocus
       aria-label="Loop title"
       className="w-full min-w-72 max-w-2xl flex-1 font-bold text-[22px] tracking-tight"
-      onChange={(event) => setDraft(event.currentTarget.value)}
-      onBlur={(event) => commit(event.currentTarget.value)}
-      onKeyDown={(event) => {
-        if (event.key === "Escape") {
-          skipCommit.current = true;
-          setDraft(null);
-          event.currentTarget.blur();
-        } else if (event.key === "Enter") {
-          event.preventDefault();
-          event.currentTarget.blur();
-        }
-      }}
+      {...edit.inputProps}
     />
   );
 }
 
 function EditableLoopDescription({ loop }: { loop: LoopSchemas.Loop }) {
   const updateLoop = useUpdateLoop(loop.id);
-  const [draft, setDraft] = useState<string | null>(null);
-  const skipCommit = useRef(false);
-
-  const commit = (value: string) => {
-    if (skipCommit.current) {
-      skipCommit.current = false;
-      return;
-    }
-    const description = value.trim();
-    if (description === loop.description.trim()) {
-      setDraft(null);
-      return;
-    }
-    updateLoop.mutate(
-      { description },
-      {
-        onSuccess: () => {
-          setDraft(null);
-          toast.success("Loop description updated");
-        },
-        onError: (error) => {
-          setDraft(null);
-          toast.error("Failed to update loop description", {
-            description: error.message,
-          });
+  const edit = useInlineEdit({
+    current: loop.description,
+    isPending: updateLoop.isPending,
+    allowEmpty: true,
+    onCommit: (description, { reset }) =>
+      updateLoop.mutate(
+        { description },
+        {
+          onSuccess: () => {
+            reset();
+            toast.success("Loop description updated");
+          },
+          onError: (error) => {
+            reset();
+            toast.error("Failed to update loop description", {
+              description: error.message,
+            });
+          },
         },
-      },
-    );
-  };
+      ),
+  });
 
-  if (draft === null) {
+  if (!edit.isEditing) {
+    const hasDescription = loop.description.trim();
     return (
       <button
         type="button"
         className="group flex max-w-3xl items-center gap-1 rounded-(--radius-1) px-1 py-0.5 text-left hover:bg-(--gray-3)"
         aria-label="Edit loop description"
-        onClick={() => setDraft(loop.description)}
+        onClick={edit.startEditing}
       >
         <Text
-          className={
-            loop.description.trim()
-              ? "text-[12.5px] text-gray-11 leading-snug"
-              : "text-[12.5px] text-gray-9 leading-snug"
-          }
+          className={`text-[12.5px] leading-snug ${hasDescription ? "text-gray-11" : "text-gray-10"}`}
         >
-          {loop.description.trim() || "Add a description"}
+          {hasDescription || "Add a description"}
         </Text>
         <PencilSimpleIcon
           size={12}
@@ -478,24 +452,13 @@ function EditableLoopDescription({ loop }: { loop: LoopSchemas.Loop }) {
 
   return (
     <Textarea
-      value={draft}
+      value={edit.draft ?? ""}
       disabled={updateLoop.isPending}
       autoFocus
       aria-label="Loop description"
       placeholder="Add a description"
       className="max-w-3xl text-[12.5px] leading-snug"
-      onChange={(event) => setDraft(event.currentTarget.value)}
-      onBlur={(event) => commit(event.currentTarget.value)}
-      onKeyDown={(event) => {
-        if (event.key === "Escape") {
-          skipCommit.current = true;
-          setDraft(null);
-          event.currentTarget.blur();
-        } else if (event.key === "Enter" && !event.shiftKey) {
-          event.preventDefault();
-          event.currentTarget.blur();
-        }
-      }}
+      {...edit.inputProps}
     />
   );
 }
@@ -716,41 +679,26 @@ function LoopSkillSummary({ loop }: { loop: LoopSchemas.Loop }) {
 function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
   const updateLoop = useUpdateLoop(loop.id);
   const primarySkill = primaryLoopSkillBundle(loop);
-  const [draft, setDraft] = useState<string | null>(null);
-  // Escape reverts and blurs; skip the resulting onBlur save.
-  const skipCommit = useRef(false);
-
-  const commit = (value: string) => {
-    if (skipCommit.current) {
-      skipCommit.current = false;
-      return;
-    }
-    const trimmed = value.trim();
-    if (!trimmed) {
-      setDraft(null);
-      return;
-    }
-    if (updateLoop.isPending) return;
-    if (trimmed === loop.instructions.trim()) {
-      setDraft(null);
-      return;
-    }
-    updateLoop.mutate(
-      { instructions: trimmed },
-      {
-        onSuccess: () => {
-          setDraft(null);
-          toast.success("Instructions updated");
-        },
-        onError: (error) => {
-          setDraft(null);
-          toast.error("Failed to update instructions", {
-            description: error.message,
-          });
+  const edit = useInlineEdit({
+    current: loop.instructions,
+    isPending: updateLoop.isPending,
+    onCommit: (instructions, { reset }) =>
+      updateLoop.mutate(
+        { instructions },
+        {
+          onSuccess: () => {
+            reset();
+            toast.success("Instructions updated");
+          },
+          onError: (error) => {
+            reset();
+            toast.error("Failed to update instructions", {
+              description: error.message,
+            });
+          },
         },
-      },
-    );
-  };
+      ),
+  });
 
   return (
     <Flex direction="column" gap="3">
@@ -763,19 +711,11 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
         ) : null}
       </Flex>
       <Textarea
-        value={draft ?? loop.instructions}
+        value={edit.draft ?? loop.instructions}
         disabled={updateLoop.isPending}
         aria-label="Loop instructions"
         className="max-h-[400px] 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;
-            setDraft(null);
-            e.currentTarget.blur();
-          }
-        }}
+        {...edit.inputProps}
       />
       {primarySkill ? (
         <Text className="text-[11px] text-gray-10 leading-snug">
diff --git a/packages/ui/src/features/loops/hooks/useInlineEdit.test.ts b/packages/ui/src/features/loops/hooks/useInlineEdit.test.ts
new file mode 100644
index 0000000000..9498c95baf
--- /dev/null
+++ b/packages/ui/src/features/loops/hooks/useInlineEdit.test.ts
@@ -0,0 +1,126 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { type InlineEditOptions, useInlineEdit } from "./useInlineEdit";
+
+function setup(overrides: Partial<InlineEditOptions> = {}) {
+  const onCommit = vi.fn();
+  const view = renderHook((props: InlineEditOptions) => useInlineEdit(props), {
+    initialProps: {
+      current: "hello",
+      isPending: false,
+      onCommit,
+      ...overrides,
+    },
+  });
+  return { onCommit, view };
+}
+
+function blur(value: string) {
+  return {
+    currentTarget: { value },
+  } as React.FocusEvent<HTMLInputElement>;
+}
+
+function keyDown(key: string, opts: { shiftKey?: boolean } = {}) {
+  const blurFn = vi.fn();
+  const preventDefault = vi.fn();
+  return {
+    event: {
+      key,
+      shiftKey: opts.shiftKey ?? false,
+      preventDefault,
+      currentTarget: { blur: blurFn },
+    } as unknown as React.KeyboardEvent<HTMLElement>,
+    blurFn,
+    preventDefault,
+  };
+}
+
+describe("useInlineEdit", () => {
+  it("enters and exits edit mode", () => {
+    const { view } = setup();
+    expect(view.result.current.isEditing).toBe(false);
+    act(() => view.result.current.startEditing());
+    expect(view.result.current.isEditing).toBe(true);
+    expect(view.result.current.draft).toBe("hello");
+    act(() => view.result.current.reset());
+    expect(view.result.current.isEditing).toBe(false);
+  });
+
+  it("commits a changed value on blur", () => {
+    const { onCommit, view } = setup();
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onChange(blur("world")));
+    act(() => view.result.current.inputProps.onBlur(blur("world")));
+    expect(onCommit).toHaveBeenCalledWith("world", expect.anything());
+  });
+
+  it("does not commit an unchanged value", () => {
+    const { onCommit, view } = setup();
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onBlur(blur("  hello  ")));
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(view.result.current.isEditing).toBe(false);
+  });
+
+  it("rejects an empty value when allowEmpty is false", () => {
+    const { onCommit, view } = setup();
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onBlur(blur("   ")));
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(view.result.current.isEditing).toBe(false);
+  });
+
+  it("commits an empty value when allowEmpty is true", () => {
+    const { onCommit, view } = setup({ current: "note", allowEmpty: true });
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onBlur(blur("   ")));
+    expect(onCommit).toHaveBeenCalledWith("", expect.anything());
+  });
+
+  it("does not commit while a save is pending", () => {
+    const { onCommit, view } = setup({ isPending: true });
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onBlur(blur("world")));
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("Escape reverts and skips the resulting blur save", () => {
+    const { onCommit, view } = setup();
+    act(() => view.result.current.startEditing());
+    act(() => view.result.current.inputProps.onChange(blur("world")));
+
+    const escapeKey = keyDown("Escape");
+    act(() => view.result.current.inputProps.onKeyDown(escapeKey.event));
+    expect(escapeKey.blurFn).toHaveBeenCalled();
+    expect(view.result.current.isEditing).toBe(false);
+
+    act(() => view.result.current.inputProps.onBlur(blur("world")));
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("commits on Enter only when configured", () => {
+    const never = keyDown("Enter");
+    const { view: neverView } = setup({ commitOnEnter: "never" });
+    act(() => neverView.result.current.inputProps.onKeyDown(never.event));
+    expect(never.blurFn).not.toHaveBeenCalled();
+
+    const enter = keyDown("Enter");
+    const { view: enterView } = setup({ commitOnEnter: "enter" });
+    act(() => enterView.result.current.inputProps.onKeyDown(enter.event));
+    expect(enter.preventDefault).toHaveBeenCalled();
+    expect(enter.blurFn).toHaveBeenCalled();
+  });
+
+  it("Shift+Enter inserts a newline when commitOnEnter is enter-no-shift", () => {
+    const shift = keyDown("Enter", { shiftKey: true });
+    const { view } = setup({ commitOnEnter: "enter-no-shift" });
+    act(() => view.result.current.inputProps.onKeyDown(shift.event));
+    expect(shift.blurFn).not.toHaveBeenCalled();
+
+    const plain = keyDown("Enter");
+    const { view: plainView } = setup({ commitOnEnter: "enter-no-shift" });
+    act(() => plainView.result.current.inputProps.onKeyDown(plain.event));
+    expect(plain.blurFn).toHaveBeenCalled();
+  });
+});
diff --git a/packages/ui/src/features/loops/hooks/useInlineEdit.ts b/packages/ui/src/features/loops/hooks/useInlineEdit.ts
new file mode 100644
index 0000000000..c3f5922856
--- /dev/null
+++ b/packages/ui/src/features/loops/hooks/useInlineEdit.ts
@@ -0,0 +1,85 @@
+import { useRef, useState } from "react";
+
+type CommitOnEnter = "never" | "enter" | "enter-no-shift";
+
+export type InlineEditOptions = {
+  current: string;
+  isPending: boolean;
+  allowEmpty?: boolean;
+  commitOnEnter?: CommitOnEnter;
+  onCommit: (value: string, controls: { reset: () => void }) => void;
+};
+
+export type InlineEdit = {
+  draft: string | null;
+  isEditing: boolean;
+  startEditing: () => void;
+  reset: () => void;
+  inputProps: {
+    onChange: (
+      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => void;
+    onBlur: (
+      event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+  };
+};
+
+export function useInlineEdit({
+  current,
+  isPending,
+  allowEmpty = false,
+  commitOnEnter = "never",
+  onCommit,
+}: InlineEditOptions): InlineEdit {
+  const [draft, setDraft] = useState<string | null>(null);
+  // Escape reverts and blurs; skip the resulting onBlur save.
+  const skipCommit = useRef(false);
+  const reset = () => setDraft(null);
+
+  const commit = (value: string) => {
+    if (skipCommit.current) {
+      skipCommit.current = false;
+      return;
+    }
+    if (isPending) return;
+    const trimmed = value.trim();
+    if (!trimmed && !allowEmpty) {
+      reset();
+      return;
+    }
+    if (trimmed === current.trim()) {
+      reset();
+      return;
+    }
+    onCommit(trimmed, { reset });
+  };
+
+  const commitsOnEnter = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (commitOnEnter === "enter") return true;
+    if (commitOnEnter === "enter-no-shift") return !event.shiftKey;
+    return false;
+  };
+
+  return {
+    draft,
+    isEditing: draft !== null,
+    startEditing: () => setDraft(current),
+    reset,
+    inputProps: {
+      onChange: (event) => setDraft(event.currentTarget.value),
+      onBlur: (event) => commit(event.currentTarget.value),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          skipCommit.current = true;
+          setDraft(null);
+          event.currentTarget.blur();
+        } else if (event.key === "Enter" && commitsOnEnter(event)) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      },
+    },
+  };
+}