From 0d9d0b72b35570cfcd5ab956365ff09b1c504d0d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 20 Oct 2026 22:00:12 -0700
Subject: [PATCH 1/7] feat(web): show automation messages as compact timeline
 rows

Automation prompts are long, repeated runbooks that dominated the thread
as full user bubbles. Render them as a work-log style row labeled with the
scheduled task title (falling back to the prompt's first line) that expands
to the full prompt, a link to the automation, and a copy button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/chat/MessagesTimeline.tsx  | 89 ++++++++++++++-----
 1 file changed, 68 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 1e591b5683638..11dd4f2e8a173 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -40,6 +40,8 @@ import { useAtomValue } from "@effect/atom-react";
 import { environmentThreadDetails } from "../../state/threads";
 import { resolveUserMessagePresentation } from "@t3tools/client-runtime/user-message";
 import { Link } from "@tanstack/react-router";
+import { useEnvironmentQuery } from "../../state/query";
+import { serverEnvironment } from "../../state/server";
 import { canForkProjectedAssistantItem } from "@t3tools/client-runtime/state/thread-workflows";
 import { notificationChildThreadId } from "@t3tools/client-runtime/state/thread-execution";
 import { replaceComposerContextReferences } from "@t3tools/shared/composerContextReferences";
@@ -150,6 +152,7 @@ import {
   Code2Icon,
   XIcon,
   ZapIcon,
+  CalendarClockIcon,
   RotateCcwIcon,
 } from "lucide-react";
 import { ChevronDown, ChevronRight, Link as LinkIconNode } from "lucide";
@@ -2155,11 +2158,75 @@ function UserMessageRow({ row }: { row: Extract<TimelineRow, { kind: "message" }
       environmentId={ctx.activeThreadEnvironmentId}
       onOpenThread={(threadId) => ctx.onOpenThread(ThreadId.make(threadId))}
     />
+  ) : resolveUserMessagePresentation(row.message).attribution === "automation" ? (
+    <AutomationMessageRow row={row} />
   ) : (
     <UserTimelineRow row={row} />
   );
 }
 
+/** Automation prompts are long, repeated runbooks; a work-log row keeps them out of the way. */
+function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
+  const ctx = use(TimelineRowCtx);
+  const [expanded, setExpanded] = useState(false);
+  const revealRef = findRevealRef(() => setExpanded(true));
+  const { text, scheduledTaskId } = resolveUserMessagePresentation(row.message);
+  const tasksQuery = useEnvironmentQuery(
+    scheduledTaskId
+      ? serverEnvironment.scheduledTasksLive({
+          environmentId: ctx.activeThreadEnvironmentId,
+          input: {},
+        })
+      : null,
+  );
+  const taskTitle = tasksQuery.data?.tasks.find((task) => task.id === scheduledTaskId)?.title;
+  const summary = taskTitle ?? text.trim().split(/\r?\n/, 1)[0] ?? "";
+
+  return (
+    <WorkLogBlock>
+      <div ref={revealRef} data-user-message-attribution="automation">
+        <WorkLogButton
+          aria-expanded={expanded}
+          data-scroll-anchor-ignore
+          onClick={() => setExpanded((value) => !value)}
+          icon={<CalendarClockIcon className="size-4 shrink-0 stroke-2 text-icon-muted" />}
+          label={
+            <span className="flex min-w-0 gap-1.5">
+              <span className="shrink-0">Automation</span>
+              <span className="min-w-0 truncate text-foreground">{summary}</span>
+            </span>
+          }
+          trailing={
+            <TimelineRowTimestamp
+              createdAt={row.message.createdAt}
+              timestampFormat={ctx.timestampFormat}
+            />
+          }
+        />
+        {expanded ? (
+          <WorkLogDetails>
+            <div data-thread-find-text="true">
+              <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
+            </div>
+            <div className="flex items-center gap-2">
+              {scheduledTaskId ? (
+                <Link
+                  to="/settings/scheduled-tasks"
+                  search={{ environmentId: ctx.activeThreadEnvironmentId, taskId: scheduledTaskId }}
+                  className="rounded-sm text-xs text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                >
+                  Open automation
+                </Link>
+              ) : null}
+              <MessageCopyButton text={text} variant="ghost" />
+            </div>
+          </WorkLogDetails>
+        ) : null}
+      </div>
+    </WorkLogBlock>
+  );
+}
+
 function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
   const { onImageExpand, onFileOpen } = ctx;
@@ -2292,27 +2359,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
 
   return (
     <div className="group flex flex-col items-end gap-1">
-      {userMessage.attribution === "automation" ? (
-        <p
-          className="me-1 text-2xs text-muted-foreground/70"
-          data-user-message-attribution="automation"
-        >
-          {userMessage.scheduledTaskId ? (
-            <Link
-              to="/settings/scheduled-tasks"
-              search={{
-                environmentId: ctx.activeThreadEnvironmentId,
-                taskId: userMessage.scheduledTaskId,
-              }}
-              className="rounded-sm hover:text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
-            >
-              Sent by automation
-            </Link>
-          ) : (
-            "Sent by automation"
-          )}
-        </p>
-      ) : userMessage.attribution === "t3code" ? (
+      {userMessage.attribution === "t3code" ? (
         <p
           className="me-1 text-2xs text-muted-foreground/70"
           data-user-message-attribution="t3code"

From ea032799677df0e45155d46a4dbbf9c80b32b38d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 05:11:26 +0000
Subject: [PATCH 2/7] test(web): takeover tests for automation timeline rows

These are the takeover's tests for the automation work-log row: the
title/first-line summary with the automation link and copy, ordinary
messages unchanged, find revealing a folded prompt, and edit-from-here
staying available. The last two fail on the current implementation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../chat/MessagesTimeline.browser.test.tsx    | 100 +++++++++++++++++-
 1 file changed, 96 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
index df846a5e7bf5a..bebd8c6329123 100644
--- a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
@@ -1,4 +1,4 @@
-import { EnvironmentId, MessageId } from "@t3tools/contracts";
+import { EnvironmentId, MessageId, RunId, ScheduledTaskId } from "@t3tools/contracts";
 import type { LegendListRef } from "@legendapp/list/react";
 import { createRef, type ComponentProps, type ReactElement } from "react";
 import { describe, expect, it, vi } from "vite-plus/test";
@@ -9,13 +9,16 @@ import { act, render } from "../../../test/render";
 import { MessagesTimeline, remarkThoughtPreview } from "./MessagesTimeline";
 import { parseMarkdownWithMath } from "@t3tools/shared/markdownMath";
 
-const pullRequestQuery = vi.hoisted(() => ({ error: "Pull request not found" }));
+const environmentQuery = vi.hoisted(() => ({
+  error: "Pull request not found",
+  data: null as unknown,
+}));
 vi.mock(import("~/state/query"), async (original) => ({
   ...(await original()),
   useEnvironmentQuery: (() => ({
-    data: null,
+    data: environmentQuery.data,
     dataUpdatedAt: 0,
-    error: pullRequestQuery.error,
+    error: environmentQuery.error,
     failure: null,
     isPending: false,
     isSuccess: false,
@@ -116,6 +119,13 @@ async function click(element: HTMLElement) {
   await act(async () => element.click());
 }
 
+function setup({ scheduledTasks = [] as ReadonlyArray<{ id: string; title: string }> } = {}) {
+  environmentQuery.data = { tasks: scheduledTasks };
+}
+
+const TASK_ID = ScheduledTaskId.make("task-1");
+const AUTOMATION_PROMPT = "Triage the inbox\n\nLabel every new issue and close duplicates.";
+
 describe("MessagesTimeline messages", () => {
   it("preserves XML-like tags and comparisons in user messages as text", async () => {
     const source = [
@@ -163,6 +173,88 @@ describe("MessagesTimeline messages", () => {
   });
 });
 
+describe("MessagesTimeline automation prompts", () => {
+  it("folds an automation prompt into a work-log row titled by its task", async () => {
+    setup({ scheduledTasks: [{ id: TASK_ID, title: "Nightly triage" }] });
+    await using screen = await renderTimeline([
+      message(AUTOMATION_PROMPT, { scheduledTaskId: TASK_ID }),
+    ]);
+    const row = screen.button(/^Automation/);
+    expect(row.textContent).toContain("Nightly triage");
+    expect(row.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.text()).not.toContain("close duplicates");
+
+    await click(row);
+    expect(screen.text()).toContain("Label every new issue and close duplicates.");
+    const link = [...screen.container.querySelectorAll("a")].find(
+      (anchor) => anchor.textContent === "Open automation",
+    );
+    expect(link?.getAttribute("href")).toContain(`taskId=${TASK_ID}`);
+    expect(screen.buttons(/copy/i)).not.toHaveLength(0);
+  });
+
+  it("falls back to the prompt's first line without a task title", async () => {
+    setup();
+    await using screen = await renderTimeline([
+      message(AUTOMATION_PROMPT, { scheduledTaskId: TASK_ID }),
+    ]);
+    expect(screen.button(/^Automation/).textContent).toContain("Triage the inbox");
+  });
+
+  it("leaves ordinary user messages as full bubbles", async () => {
+    setup();
+    await using screen = await renderTimeline([message(AUTOMATION_PROMPT)]);
+    expect(screen.buttons(/^Automation/)).toHaveLength(0);
+    expect(screen.text()).toContain("Label every new issue and close duplicates.");
+  });
+
+  it("opens a folded automation prompt when find selects text inside it", async () => {
+    setup();
+    await using screen = await renderTimeline(
+      [message(AUTOMATION_PROMPT, { scheduledTaskId: TASK_ID })],
+      {
+        findExpanded: true,
+        findQuery: "duplicates",
+        activeFindMatch: { entryId: "entry-message-1", runId: null, occurrence: 0 },
+      },
+    );
+    await vi.waitFor(() =>
+      expect(screen.button(/^Automation/).getAttribute("aria-expanded")).toBe("true"),
+    );
+  });
+
+  it("keeps edit-from-here on automation prompts", async () => {
+    setup();
+    const runId = RunId.make("run-1");
+    await using screen = await renderTimeline(
+      [
+        message(
+          AUTOMATION_PROMPT,
+          { scheduledTaskId: TASK_ID, runId, inputIntent: "turn_start" },
+          "user-1",
+        ),
+        message("Done", { role: "assistant", runId }, "assistant-1"),
+      ],
+      {
+        supportsConversationRollback: true,
+        threadStartCheckpointReady: true,
+        turnDiffSummaries: [
+          {
+            runId,
+            checkpointTurnCount: 1,
+            checkpointRef: "checkpoint-1" as never,
+            status: "ready",
+            files: [],
+            assistantMessageId: MessageId.make("assistant-1"),
+            completedAt: CREATED_AT,
+          },
+        ],
+      },
+    );
+    expect(screen.buttons("Edit from here")).toHaveLength(1);
+  });
+});
+
 describe("compact reasoning math", () => {
   it("keeps formulas while flattening compact reasoning previews", () => {
     const tree = parseMarkdownWithMath("## Reasoning\n\nUse **norm** $|x|$ and \\[x^2\\]");

From 6905e21ce5154854a088fd25e42c7ba870e8086b Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 05:15:06 +0000
Subject: [PATCH 3/7] fix(web): keep find, edit-from-here and steer state on
 automation rows

A folded automation prompt now stays mounted but hidden while find is
open, with the reveal listener on the hidden fold, so find can select
text inside it. The row keeps the actions the message bubble had:
edit-from-here, the steer marker, a failed or rejected status, and
copy prompt link.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/chat/MessagesTimeline.tsx  | 104 ++++++++++++------
 1 file changed, 72 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 11dd4f2e8a173..00c535009f14e 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2182,28 +2182,51 @@ function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "mess
   const taskTitle = tasksQuery.data?.tasks.find((task) => task.id === scheduledTaskId)?.title;
   const summary = taskTitle ?? text.trim().split(/\r?\n/, 1)[0] ?? "";
 
+  const revertTurnCount = row.revertTurnCount;
+  const promptLink = promptLinkFor(text);
+  // Find reads the DOM, so a folded prompt stays mounted but hidden while find is open.
+  const bodyMounted = expanded || ctx.findActive;
+
   return (
     <WorkLogBlock>
-      <div ref={revealRef} data-user-message-attribution="automation">
-        <WorkLogButton
-          aria-expanded={expanded}
-          data-scroll-anchor-ignore
-          onClick={() => setExpanded((value) => !value)}
-          icon={<CalendarClockIcon className="size-4 shrink-0 stroke-2 text-icon-muted" />}
-          label={
-            <span className="flex min-w-0 gap-1.5">
-              <span className="shrink-0">Automation</span>
-              <span className="min-w-0 truncate text-foreground">{summary}</span>
-            </span>
-          }
-          trailing={
-            <TimelineRowTimestamp
-              createdAt={row.message.createdAt}
-              timestampFormat={ctx.timestampFormat}
-            />
-          }
-        />
-        {expanded ? (
+      <div
+        className="group flex min-w-0 items-center gap-1"
+        data-user-message-attribution="automation"
+      >
+        <div className="min-w-0 flex-1">
+          <WorkLogButton
+            aria-expanded={expanded}
+            data-scroll-anchor-ignore
+            onClick={() => setExpanded((value) => !value)}
+            icon={<CalendarClockIcon className="size-4 shrink-0 stroke-2 text-icon-muted" />}
+            label={
+              <span className="flex min-w-0 gap-1.5">
+                <span className="shrink-0">Automation</span>
+                <span className="min-w-0 truncate text-foreground">{summary}</span>
+              </span>
+            }
+            trailing={
+              <TimelineRowTimestamp
+                createdAt={row.message.createdAt}
+                timestampFormat={ctx.timestampFormat}
+              />
+            }
+          />
+        </div>
+        {row.message.inputIntent === "steer" ||
+        row.message.inputIntent === "promoted_queued_to_steer" ? (
+          <UserMessageIntentMarker intent={row.message.inputIntent} />
+        ) : null}
+        <UserMessageProjectedStatus row={row} />
+        {typeof revertTurnCount === "number" && (
+          <div className="opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
+            <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+          </div>
+        )}
+      </div>
+      {bodyMounted ? (
+        // `beforematch` does not bubble, so the reveal listener sits on the hidden fold itself.
+        <div ref={revealRef} hidden={!expanded}>
           <WorkLogDetails>
             <div data-thread-find-text="true">
               <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
@@ -2219,14 +2242,40 @@ function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "mess
                 </Link>
               ) : null}
               <MessageCopyButton text={text} variant="ghost" />
+              {promptLink !== null && (
+                <MessageCopyButton
+                  text={promptLink}
+                  label="Copy prompt link"
+                  icon={LinkIconNode}
+                  variant="ghost"
+                />
+              )}
             </div>
           </WorkLogDetails>
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </WorkLogBlock>
   );
 }
 
+function UserMessageProjectedStatus({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
+  const status = row.projectedItem?.item.status;
+  if (
+    status === undefined ||
+    status === "completed" ||
+    status === "pending" ||
+    status === "waiting"
+  )
+    return null;
+  return (
+    <div className="me-1 flex items-center gap-1.5">
+      <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-3xs font-medium text-destructive">
+        {status}
+      </span>
+    </div>
+  );
+}
+
 function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
   const { onImageExpand, onFileOpen } = ctx;
@@ -2501,16 +2550,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           />
         </div>
       </div>
-      {row.projectedItem &&
-      row.projectedItem.item.status !== "completed" &&
-      row.projectedItem.item.status !== "pending" &&
-      row.projectedItem.item.status !== "waiting" ? (
-        <div className="me-1 flex items-center gap-1.5">
-          <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-3xs font-medium text-destructive">
-            {row.projectedItem.item.status}
-          </span>
-        </div>
-      ) : null}
+      <UserMessageProjectedStatus row={row} />
       <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
         <div className="flex shrink-0 items-center gap-2">
           <Tooltip>

From c088ecb5052249c16e648bb64bc6fb61b089c6a8 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 05:23:10 +0000
Subject: [PATCH 4/7] fix(web): reveal long automation prompts during find

---
 .../chat/MessagesTimeline.browser.test.tsx    | 25 ++++++++++++-------
 .../src/components/chat/MessagesTimeline.tsx  |  2 +-
 apps/web/src/components/chat/WorkLog.tsx      |  7 +++++-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
index bebd8c6329123..025c0c686a052 100644
--- a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
@@ -8,6 +8,7 @@ import "~/index.css";
 import { act, render } from "../../../test/render";
 import { MessagesTimeline, remarkThoughtPreview } from "./MessagesTimeline";
 import { parseMarkdownWithMath } from "@t3tools/shared/markdownMath";
+import { collectThreadFindRanges } from "./threadFindHighlights";
 
 const environmentQuery = vi.hoisted(() => ({
   error: "Pull request not found",
@@ -208,19 +209,25 @@ describe("MessagesTimeline automation prompts", () => {
     expect(screen.text()).toContain("Label every new issue and close duplicates.");
   });
 
-  it("opens a folded automation prompt when find selects text inside it", async () => {
+  it("reveals a find match beyond the folded automation prompt's initial viewport", async () => {
     setup();
-    await using screen = await renderTimeline(
-      [message(AUTOMATION_PROMPT, { scheduledTaskId: TASK_ID })],
-      {
-        findExpanded: true,
-        findQuery: "duplicates",
-        activeFindMatch: { entryId: "entry-message-1", runId: null, occurrence: 0 },
-      },
-    );
+    const prompt = `${"Inspect the next item.\n\n".repeat(16)}Close duplicates.`;
+    await using screen = await renderTimeline([message(prompt, { scheduledTaskId: TASK_ID })], {
+      findExpanded: true,
+      findQuery: "duplicates",
+      activeFindMatch: { entryId: "entry-message-1", runId: null, occurrence: 0 },
+    });
     await vi.waitFor(() =>
       expect(screen.button(/^Automation/).getAttribute("aria-expanded")).toBe("true"),
     );
+    const { range } = collectThreadFindRanges(screen.container, "duplicates")[0]!;
+    const details = screen.container.querySelector("[data-thread-find-text]")!.parentElement!;
+    expect(range.getBoundingClientRect().top - details.getBoundingClientRect().top).toBeGreaterThan(
+      384,
+    );
+    expect(range.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+      details.getBoundingClientRect().bottom,
+    );
   });
 
   it("keeps edit-from-here on automation prompts", async () => {
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 00c535009f14e..4cf580211a068 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2227,7 +2227,7 @@ function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "mess
       {bodyMounted ? (
         // `beforematch` does not bubble, so the reveal listener sits on the hidden fold itself.
         <div ref={revealRef} hidden={!expanded}>
-          <WorkLogDetails>
+          <WorkLogDetails scrollable={!ctx.findActive}>
             <div data-thread-find-text="true">
               <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
             </div>
diff --git a/apps/web/src/components/chat/WorkLog.tsx b/apps/web/src/components/chat/WorkLog.tsx
index 28f5f46bcfaf5..23fcbbd7e0f6a 100644
--- a/apps/web/src/components/chat/WorkLog.tsx
+++ b/apps/web/src/components/chat/WorkLog.tsx
@@ -131,11 +131,13 @@ export function WorkLogDetails({
   children,
   kind = "text",
   followLive = false,
+  scrollable = true,
 }: {
   children: ReactNode;
   kind?: "text" | "panel" | "media";
 
   followLive?: boolean;
+  scrollable?: boolean;
 }) {
   const scrollerRef = useRef<HTMLDivElement>(null);
   const atLiveEdgeRef = useRef(true);
@@ -157,7 +159,10 @@ export function WorkLogDetails({
       className={cn(
         "cursor-auto",
         kind === "text"
-          ? "ms-7 flex max-h-96 flex-col gap-3 overflow-auto px-0.5 py-1 select-text"
+          ? cn(
+              "ms-7 flex flex-col gap-3 px-0.5 py-1 select-text",
+              scrollable && "max-h-96 overflow-auto",
+            )
           : kind === "panel"
             ? "mt-0.5 mb-1.5 pb-2"
             : "mt-1",

From c44fc9a2be9cc72824234346c0d977a95e1feccc Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 10:57:46 -0700
Subject: [PATCH 5/7] feat(mobile): show automation messages as compact
 timeline rows

Automation prompts render as a collapsed work-log row (task title or the
prompt's first line, plus the time) instead of a full user bubble. Tapping
it shows the prompt with copy and Open automation, matching web.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/mobile/src/components/ui/AppSymbol.tsx   |   2 +
 .../src/features/threads/ThreadFeed.tsx       | 141 +++++++++++++++++-
 2 files changed, 137 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/components/ui/AppSymbol.tsx b/apps/mobile/src/components/ui/AppSymbol.tsx
index 7e5e95da3beb5..16a0f55d0a7fc 100644
--- a/apps/mobile/src/components/ui/AppSymbol.tsx
+++ b/apps/mobile/src/components/ui/AppSymbol.tsx
@@ -9,6 +9,7 @@ import IconAlertCircle from "@tabler/icons-react-native/IconAlertCircle";
 import IconAlertTriangle from "@tabler/icons-react-native/IconAlertTriangle";
 import IconApps from "@tabler/icons-react-native/IconApps";
 import IconArchive from "@tabler/icons-react-native/IconArchive";
+import IconCalendarClock from "@tabler/icons-react-native/IconCalendarClock";
 import IconArrowBackUp from "@tabler/icons-react-native/IconArrowBackUp";
 import IconArrowDown from "@tabler/icons-react-native/IconArrowDown";
 import IconArrowForwardUp from "@tabler/icons-react-native/IconArrowForwardUp";
@@ -178,6 +179,7 @@ const ANDROID_ICON_BY_SF_SYMBOL = {
   "circle.dashed": IconCircleDashed,
   "circle.inset.filled": IconCircleDot,
   "circle.dashed.inset.filled": IconCircleDot,
+  "calendar.badge.clock": IconCalendarClock,
   clock: IconClock,
   timer: IconClock,
   ticket: IconTicket,
diff --git a/apps/mobile/src/features/threads/ThreadFeed.tsx b/apps/mobile/src/features/threads/ThreadFeed.tsx
index 77729684a792e..04fb601bd53d8 100644
--- a/apps/mobile/src/features/threads/ThreadFeed.tsx
+++ b/apps/mobile/src/features/threads/ThreadFeed.tsx
@@ -40,6 +40,7 @@ import {
   type MessageId,
   type OrchestrationV2ProjectedTurnItem,
   type RunId,
+  type ScheduledTaskId,
 } from "@t3tools/contracts";
 import { renderAssistantCitationsAsText } from "@t3tools/shared/assistantCitations";
 import { encodeComposerContextFragment } from "@t3tools/shared/composerContextClipboard";
@@ -213,6 +214,7 @@ import {
   ThreadWorkLog,
   WORK_GROUP_TOGGLE_HEIGHT,
 } from "./thread-work-log";
+import { WorkLogIconSlot, WorkLogLabel, WorkLogPressable } from "./work-log-layout";
 import { appendPendingThreadMessages, type PendingThreadFeedEntry } from "./pending-thread-feed";
 import type { QueuedThreadMessage } from "../../state/thread-outbox-model";
 import { resolveThreadFeedFixedItemSize } from "./thread-feed-item-size";
@@ -236,6 +238,8 @@ import {
 } from "@t3tools/client-runtime/workspace-basename-lookup";
 import { useLiveThreadLinkLabels } from "../../state/entities";
 import { useThreadSelection } from "../../state/use-thread-selection";
+import { useEnvironmentQuery } from "../../state/query";
+import { serverEnvironment } from "../../state/server";
 import { composerDocumentAttachmentRecord } from "../../lib/composerContext";
 import * as Option from "effect/Option";
 import { appAtomRegistry } from "../../state/atom-registry";
@@ -983,6 +987,110 @@ function AgentMessageAttribution(props: {
   );
 }
 
+/** Automation prompts are long, repeated runbooks; a work-log row keeps them out of the way. */
+function ThreadAutomationMessageRow(props: {
+  readonly environmentId: EnvironmentId;
+  readonly text: string;
+  readonly context?: OrchestrationMessageContext;
+  readonly scheduledTaskId: ScheduledTaskId | undefined;
+  readonly timestampLabel: string;
+  readonly expanded: boolean;
+  readonly onToggle: () => void;
+  readonly rowSizing: ReturnType<typeof deriveThreadWorkLogSizing>;
+  readonly iconSubtleColor: ColorValue;
+  readonly markdownStyles: MarkdownStyleSet;
+  readonly reviewCommentColors: ReviewCommentColors;
+  readonly skills?: ReadonlyArray<SelectableMarkdownSkill>;
+  readonly linkHandlers: MarkdownLinkHandlers;
+  readonly renderImage: MarkdownImageRenderer;
+}) {
+  const navigation = useNavigation();
+  const tasks = useEnvironmentQuery(
+    props.scheduledTaskId
+      ? serverEnvironment.scheduledTasksLive({ environmentId: props.environmentId, input: {} })
+      : null,
+  );
+  const taskTitle = tasks.data?.tasks.find((task) => task.id === props.scheduledTaskId)?.title;
+  const summary = taskTitle ?? props.text.trim().split(/\r?\n/, 1)[0] ?? "";
+
+  return (
+    <View className="mb-1 px-1">
+      <WorkLogPressable
+        rowSizing={props.rowSizing}
+        accessibilityRole="button"
+        accessibilityLabel={`Automation: ${summary}`}
+        accessibilityHint={`Double tap to ${props.expanded ? "hide" : "show"} the prompt.`}
+        accessibilityState={{ expanded: props.expanded }}
+        onPress={() => {
+          void Haptics.selectionAsync();
+          props.onToggle();
+        }}
+      >
+        <WorkLogIconSlot>
+          <SymbolView
+            name="calendar.badge.clock"
+            size={14}
+            weight="medium"
+            tintColor={props.iconSubtleColor}
+            type="monochrome"
+          />
+        </WorkLogIconSlot>
+        <WorkLogLabel>
+          Automation <Text className="text-foreground">{summary}</Text>
+        </WorkLogLabel>
+        <Text className="shrink-0 text-xs tabular-nums text-foreground-subtle">
+          {props.timestampLabel}
+        </Text>
+        <View className="h-4 w-4 items-center justify-center">
+          <ThreadDisclosureChevron
+            expanded={props.expanded}
+            collapsedDirection="down"
+            size={11}
+            tintColor={props.iconSubtleColor}
+          />
+        </View>
+      </WorkLogPressable>
+      {props.expanded ? (
+        <View className="ml-7 gap-1 pb-1 pt-0.5">
+          <UserMessageContent
+            text={renderAssistantCitationsAsText(props.text)}
+            environmentId={props.environmentId}
+            context={props.context}
+            markdownStyles={props.markdownStyles}
+            reviewCommentColors={props.reviewCommentColors}
+            skills={props.skills}
+            linkHandlers={props.linkHandlers}
+            renderImage={props.renderImage}
+          />
+          <View className="flex-row items-center gap-2">
+            {props.scheduledTaskId ? (
+              <Pressable
+                accessibilityRole="link"
+                hitSlop={6}
+                onPress={() =>
+                  navigation.navigate("SettingsSheet", {
+                    screen: "SettingsContent",
+                    params: { screen: "SettingsScheduledTasks" },
+                  })
+                }
+              >
+                <Text className="font-t3-medium text-xs text-foreground-secondary">
+                  Open automation
+                </Text>
+              </Pressable>
+            ) : null}
+            <UserMessageCopyButton
+              text={props.text}
+              onCopy={undefined}
+              tintColor={props.iconSubtleColor}
+            />
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
 function renderFeedEntry(
   info: { item: PendingThreadFeedEntry; index: number },
   props: Pick<
@@ -1200,6 +1308,27 @@ function renderFeedEntry(
         />
       );
     }
+    if (isUser && presentation.attribution === "automation") {
+      const rowId = `automation:${message.id}`;
+      return (
+        <ThreadAutomationMessageRow
+          environmentId={props.environmentId}
+          text={presentation.text}
+          context={message.context}
+          scheduledTaskId={presentation.scheduledTaskId}
+          timestampLabel={timestampLabel}
+          expanded={props.expandedWorkRows[rowId] ?? false}
+          onToggle={() => props.onToggleWorkRow(rowId, entry.id)}
+          rowSizing={props.workRowSizing}
+          iconSubtleColor={iconSubtleColor}
+          markdownStyles={markdownStyles.assistant}
+          reviewCommentColors={props.reviewCommentColors}
+          skills={props.skills}
+          linkHandlers={props.markdownLinkHandlers}
+          renderImage={props.renderMarkdownImage}
+        />
+      );
+    }
     if (isUser) {
       const enterAnimated = isFreshTimestamp(message.createdAt);
       const intentBadge = resolveUserMessageIntentBadge(message.inputIntent);
@@ -1221,11 +1350,7 @@ function renderFeedEntry(
           className="mb-5 items-end"
           {...(enterAnimated ? { entering: FadeInUp.duration(220) } : {})}
         >
-          {presentation.attribution === "automation" ? (
-            <Text className="mb-1 pr-1 font-t3-medium text-2xs text-foreground-muted opacity-60">
-              Sent by automation
-            </Text>
-          ) : presentation.attribution === "t3code" ? (
+          {presentation.attribution === "t3code" ? (
             <Text className="mb-1 pr-1 font-t3-medium text-2xs text-foreground-muted opacity-60">
               Sent by T3 Code
             </Text>
@@ -2739,7 +2864,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
             viewabilityConfig={THREAD_MEDIA_VIEWABILITY_CONFIG}
             keyExtractor={(entry) => entry.id}
             getItemType={(entry) =>
-              entry.type === "message" ? `message:${entry.message.role}` : entry.type
+              entry.type !== "message"
+                ? entry.type
+                : resolveUserMessagePresentation(entry.message).attribution === "automation"
+                  ? "message:automation"
+                  : `message:${entry.message.role}`
             }
             getFixedItemSize={getFixedItemSize}
             // Virtualized rows must move with their measurements. Native layout

From dd07c40d6a489f762a0e5e845799ef0f05a0b738 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 11:19:44 -0700
Subject: [PATCH 6/7] fix: keep automation messages right-aligned as folded
 user bubbles

An automation prompt is still a user message, so it sits on the right as a
one-line bubble and expands in place instead of rendering as a work-log row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/features/threads/ThreadFeed.tsx       | 140 ++++++++++--------
 .../chat/MessagesTimeline.browser.test.tsx    |   4 +-
 .../src/components/chat/MessagesTimeline.tsx  | 131 ++++++++--------
 apps/web/src/components/chat/WorkLog.tsx      |   7 +-
 4 files changed, 149 insertions(+), 133 deletions(-)

diff --git a/apps/mobile/src/features/threads/ThreadFeed.tsx b/apps/mobile/src/features/threads/ThreadFeed.tsx
index 04fb601bd53d8..f272b01452acf 100644
--- a/apps/mobile/src/features/threads/ThreadFeed.tsx
+++ b/apps/mobile/src/features/threads/ThreadFeed.tsx
@@ -214,7 +214,6 @@ import {
   ThreadWorkLog,
   WORK_GROUP_TOGGLE_HEIGHT,
 } from "./thread-work-log";
-import { WorkLogIconSlot, WorkLogLabel, WorkLogPressable } from "./work-log-layout";
 import { appendPendingThreadMessages, type PendingThreadFeedEntry } from "./pending-thread-feed";
 import type { QueuedThreadMessage } from "../../state/thread-outbox-model";
 import { resolveThreadFeedFixedItemSize } from "./thread-feed-item-size";
@@ -987,7 +986,7 @@ function AgentMessageAttribution(props: {
   );
 }
 
-/** Automation prompts are long, repeated runbooks; a work-log row keeps them out of the way. */
+/** Automation prompts are long, repeated runbooks; a folded bubble keeps them out of the way. */
 function ThreadAutomationMessageRow(props: {
   readonly environmentId: EnvironmentId;
   readonly text: string;
@@ -996,7 +995,9 @@ function ThreadAutomationMessageRow(props: {
   readonly timestampLabel: string;
   readonly expanded: boolean;
   readonly onToggle: () => void;
-  readonly rowSizing: ReturnType<typeof deriveThreadWorkLogSizing>;
+  readonly bubbleColor: ColorValue;
+  readonly bubbleMaxWidth: number | "85%";
+  readonly contentMaxWidth: number;
   readonly iconSubtleColor: ColorValue;
   readonly markdownStyles: MarkdownStyleSet;
   readonly reviewCommentColors: ReviewCommentColors;
@@ -1014,79 +1015,90 @@ function ThreadAutomationMessageRow(props: {
   const summary = taskTitle ?? props.text.trim().split(/\r?\n/, 1)[0] ?? "";
 
   return (
-    <View className="mb-1 px-1">
-      <WorkLogPressable
-        rowSizing={props.rowSizing}
-        accessibilityRole="button"
-        accessibilityLabel={`Automation: ${summary}`}
-        accessibilityHint={`Double tap to ${props.expanded ? "hide" : "show"} the prompt.`}
-        accessibilityState={{ expanded: props.expanded }}
-        onPress={() => {
-          void Haptics.selectionAsync();
-          props.onToggle();
+    <View className="mb-5 items-end">
+      <View
+        className="min-w-0 rounded-[20px]"
+        style={{
+          backgroundColor: props.bubbleColor,
+          maxWidth: props.bubbleMaxWidth,
+          ...(props.expanded ? { width: props.bubbleMaxWidth } : null),
         }}
       >
-        <WorkLogIconSlot>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Automation: ${summary}`}
+          accessibilityHint={`Double tap to ${props.expanded ? "hide" : "show"} the prompt.`}
+          accessibilityState={{ expanded: props.expanded }}
+          hitSlop={4}
+          className="min-h-10 flex-row items-center gap-1.5 px-3.5 py-2"
+          onPress={() => {
+            void Haptics.selectionAsync();
+            props.onToggle();
+          }}
+        >
           <SymbolView
             name="calendar.badge.clock"
             size={14}
             weight="medium"
-            tintColor={props.iconSubtleColor}
+            tintColorClassName="accent-user-bubble-foreground-muted"
             type="monochrome"
           />
-        </WorkLogIconSlot>
-        <WorkLogLabel>
-          Automation <Text className="text-foreground">{summary}</Text>
-        </WorkLogLabel>
-        <Text className="shrink-0 text-xs tabular-nums text-foreground-subtle">
-          {props.timestampLabel}
-        </Text>
-        <View className="h-4 w-4 items-center justify-center">
+          <Text className="font-t3-medium text-sm text-user-bubble-foreground-muted">
+            Automation
+          </Text>
+          <Text numberOfLines={1} className="min-w-0 shrink text-sm text-user-bubble-foreground">
+            {summary}
+          </Text>
           <ThreadDisclosureChevron
             expanded={props.expanded}
             collapsedDirection="down"
             size={11}
             tintColor={props.iconSubtleColor}
           />
-        </View>
-      </WorkLogPressable>
-      {props.expanded ? (
-        <View className="ml-7 gap-1 pb-1 pt-0.5">
-          <UserMessageContent
-            text={renderAssistantCitationsAsText(props.text)}
-            environmentId={props.environmentId}
-            context={props.context}
-            markdownStyles={props.markdownStyles}
-            reviewCommentColors={props.reviewCommentColors}
-            skills={props.skills}
-            linkHandlers={props.linkHandlers}
-            renderImage={props.renderImage}
-          />
-          <View className="flex-row items-center gap-2">
-            {props.scheduledTaskId ? (
-              <Pressable
-                accessibilityRole="link"
-                hitSlop={6}
-                onPress={() =>
-                  navigation.navigate("SettingsSheet", {
-                    screen: "SettingsContent",
-                    params: { screen: "SettingsScheduledTasks" },
-                  })
-                }
-              >
-                <Text className="font-t3-medium text-xs text-foreground-secondary">
-                  Open automation
-                </Text>
-              </Pressable>
-            ) : null}
-            <UserMessageCopyButton
-              text={props.text}
-              onCopy={undefined}
-              tintColor={props.iconSubtleColor}
-            />
+        </Pressable>
+        {props.expanded ? (
+          <View className="px-3.5 pb-2.5">
+            <MarkdownImageAvailableWidthContext value={props.contentMaxWidth}>
+              <UserMessageContent
+                text={renderAssistantCitationsAsText(props.text)}
+                environmentId={props.environmentId}
+                context={props.context}
+                markdownStyles={props.markdownStyles}
+                reviewCommentColors={props.reviewCommentColors}
+                skills={props.skills}
+                linkHandlers={props.linkHandlers}
+                renderImage={props.renderImage}
+              />
+            </MarkdownImageAvailableWidthContext>
           </View>
-        </View>
-      ) : null}
+        ) : null}
+      </View>
+      <View className="mt-1 flex-row items-center justify-end gap-2 pr-0.5">
+        {props.scheduledTaskId ? (
+          <Pressable
+            accessibilityRole="link"
+            hitSlop={6}
+            onPress={() =>
+              navigation.navigate("SettingsSheet", {
+                screen: "SettingsContent",
+                params: { screen: "SettingsScheduledTasks" },
+              })
+            }
+          >
+            <Text className="font-t3-medium text-xs text-foreground-secondary">
+              Open automation
+            </Text>
+          </Pressable>
+        ) : null}
+        <Text className="font-t3-medium text-xs tabular-nums text-foreground-secondary">
+          {props.timestampLabel}
+        </Text>
+        <UserMessageCopyButton
+          text={props.text}
+          onCopy={undefined}
+          tintColor={props.iconSubtleColor}
+        />
+      </View>
     </View>
   );
 }
@@ -1319,9 +1331,11 @@ function renderFeedEntry(
           timestampLabel={timestampLabel}
           expanded={props.expandedWorkRows[rowId] ?? false}
           onToggle={() => props.onToggleWorkRow(rowId, entry.id)}
-          rowSizing={props.workRowSizing}
+          bubbleColor={userBubbleColor}
+          bubbleMaxWidth={props.duoColumns ? "85%" : props.userBubbleMaxWidth}
+          contentMaxWidth={props.userBubbleMaxWidth - USER_BUBBLE_HORIZONTAL_PADDING * 2}
           iconSubtleColor={iconSubtleColor}
-          markdownStyles={markdownStyles.assistant}
+          markdownStyles={markdownStyles.user}
           reviewCommentColors={props.reviewCommentColors}
           skills={props.skills}
           linkHandlers={props.markdownLinkHandlers}
diff --git a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
index 025c0c686a052..37e64f1e8b41f 100644
--- a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
@@ -175,7 +175,7 @@ describe("MessagesTimeline messages", () => {
 });
 
 describe("MessagesTimeline automation prompts", () => {
-  it("folds an automation prompt into a work-log row titled by its task", async () => {
+  it("folds an automation prompt into a bubble titled by its task", async () => {
     setup({ scheduledTasks: [{ id: TASK_ID, title: "Nightly triage" }] });
     await using screen = await renderTimeline([
       message(AUTOMATION_PROMPT, { scheduledTaskId: TASK_ID }),
@@ -221,7 +221,7 @@ describe("MessagesTimeline automation prompts", () => {
       expect(screen.button(/^Automation/).getAttribute("aria-expanded")).toBe("true"),
     );
     const { range } = collectThreadFindRanges(screen.container, "duplicates")[0]!;
-    const details = screen.container.querySelector("[data-thread-find-text]")!.parentElement!;
+    const details = screen.container.querySelector("[data-thread-find-text]")!;
     expect(range.getBoundingClientRect().top - details.getBoundingClientRect().top).toBeGreaterThan(
       384,
     );
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 4cf580211a068..8cc77f66bf6b0 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2165,7 +2165,7 @@ function UserMessageRow({ row }: { row: Extract<TimelineRow, { kind: "message" }
   );
 }
 
-/** Automation prompts are long, repeated runbooks; a work-log row keeps them out of the way. */
+/** Automation prompts are long, repeated runbooks; a folded bubble keeps them out of the way. */
 function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
   const [expanded, setExpanded] = useState(false);
@@ -2188,73 +2188,80 @@ function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "mess
   const bodyMounted = expanded || ctx.findActive;
 
   return (
-    <WorkLogBlock>
+    <div className="group flex flex-col items-end gap-1" data-user-message-attribution="automation">
+      {row.message.inputIntent === "steer" ||
+      row.message.inputIntent === "promoted_queued_to_steer" ? (
+        <UserMessageIntentMarker intent={row.message.inputIntent} />
+      ) : null}
       <div
-        className="group flex min-w-0 items-center gap-1"
-        data-user-message-attribution="automation"
+        className={cn(
+          "min-w-0 max-w-[80%] rounded-2xl bg-message text-message-foreground",
+          expanded && "w-full",
+        )}
       >
-        <div className="min-w-0 flex-1">
-          <WorkLogButton
-            aria-expanded={expanded}
-            data-scroll-anchor-ignore
-            onClick={() => setExpanded((value) => !value)}
-            icon={<CalendarClockIcon className="size-4 shrink-0 stroke-2 text-icon-muted" />}
-            label={
-              <span className="flex min-w-0 gap-1.5">
-                <span className="shrink-0">Automation</span>
-                <span className="min-w-0 truncate text-foreground">{summary}</span>
-              </span>
-            }
-            trailing={
-              <TimelineRowTimestamp
-                createdAt={row.message.createdAt}
-                timestampFormat={ctx.timestampFormat}
-              />
-            }
+        <button
+          type="button"
+          aria-expanded={expanded}
+          data-scroll-anchor-ignore
+          onClick={() => setExpanded((value) => !value)}
+          className="flex w-full min-w-0 items-center gap-1.5 rounded-2xl px-3 py-2 text-left text-sm focus-visible:outline-2 focus-visible:outline-ring"
+        >
+          <CalendarClockIcon className="size-4 shrink-0 stroke-2 text-muted-foreground" />
+          <span className="shrink-0 text-muted-foreground">Automation</span>
+          <span className="min-w-0 flex-1 truncate">{summary}</span>
+          <ChevronDownIcon
+            className={cn(
+              "size-3.5 shrink-0 text-muted-foreground transition-transform",
+              expanded && "rotate-180",
+            )}
           />
-        </div>
-        {row.message.inputIntent === "steer" ||
-        row.message.inputIntent === "promoted_queued_to_steer" ? (
-          <UserMessageIntentMarker intent={row.message.inputIntent} />
-        ) : null}
-        <UserMessageProjectedStatus row={row} />
-        {typeof revertTurnCount === "number" && (
-          <div className="opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
-            <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+        </button>
+        {bodyMounted ? (
+          // `beforematch` does not bubble, so the reveal listener sits on the hidden fold itself.
+          <div
+            ref={revealRef}
+            hidden={!expanded}
+            className={cn("px-3 pb-3", !ctx.findActive && "max-h-96 overflow-auto")}
+            data-thread-find-text="true"
+          >
+            <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
           </div>
-        )}
+        ) : null}
       </div>
-      {bodyMounted ? (
-        // `beforematch` does not bubble, so the reveal listener sits on the hidden fold itself.
-        <div ref={revealRef} hidden={!expanded}>
-          <WorkLogDetails scrollable={!ctx.findActive}>
-            <div data-thread-find-text="true">
-              <UserMessageBody text={text} skills={ctx.skills} markdownCwd={ctx.markdownCwd} />
-            </div>
-            <div className="flex items-center gap-2">
-              {scheduledTaskId ? (
-                <Link
-                  to="/settings/scheduled-tasks"
-                  search={{ environmentId: ctx.activeThreadEnvironmentId, taskId: scheduledTaskId }}
-                  className="rounded-sm text-xs text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
-                >
-                  Open automation
-                </Link>
-              ) : null}
-              <MessageCopyButton text={text} variant="ghost" />
-              {promptLink !== null && (
-                <MessageCopyButton
-                  text={promptLink}
-                  label="Copy prompt link"
-                  icon={LinkIconNode}
-                  variant="ghost"
-                />
-              )}
-            </div>
-          </WorkLogDetails>
+      <UserMessageProjectedStatus row={row} />
+      <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
+        <div className="flex shrink-0 items-center gap-2">
+          {scheduledTaskId ? (
+            <Link
+              to="/settings/scheduled-tasks"
+              search={{ environmentId: ctx.activeThreadEnvironmentId, taskId: scheduledTaskId }}
+              className="rounded-sm text-xs text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+            >
+              Open automation
+            </Link>
+          ) : null}
+          <TimelineRowTimestamp
+            createdAt={row.message.createdAt}
+            timestampFormat={ctx.timestampFormat}
+            alwaysVisible
+          />
+          <div className="flex items-center gap-0.5">
+            {typeof revertTurnCount === "number" && (
+              <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+            )}
+            <MessageCopyButton text={text} variant="ghost" />
+            {promptLink !== null && (
+              <MessageCopyButton
+                text={promptLink}
+                label="Copy prompt link"
+                icon={LinkIconNode}
+                variant="ghost"
+              />
+            )}
+          </div>
         </div>
-      ) : null}
-    </WorkLogBlock>
+      </div>
+    </div>
   );
 }
 
diff --git a/apps/web/src/components/chat/WorkLog.tsx b/apps/web/src/components/chat/WorkLog.tsx
index 23fcbbd7e0f6a..28f5f46bcfaf5 100644
--- a/apps/web/src/components/chat/WorkLog.tsx
+++ b/apps/web/src/components/chat/WorkLog.tsx
@@ -131,13 +131,11 @@ export function WorkLogDetails({
   children,
   kind = "text",
   followLive = false,
-  scrollable = true,
 }: {
   children: ReactNode;
   kind?: "text" | "panel" | "media";
 
   followLive?: boolean;
-  scrollable?: boolean;
 }) {
   const scrollerRef = useRef<HTMLDivElement>(null);
   const atLiveEdgeRef = useRef(true);
@@ -159,10 +157,7 @@ export function WorkLogDetails({
       className={cn(
         "cursor-auto",
         kind === "text"
-          ? cn(
-              "ms-7 flex flex-col gap-3 px-0.5 py-1 select-text",
-              scrollable && "max-h-96 overflow-auto",
-            )
+          ? "ms-7 flex max-h-96 flex-col gap-3 overflow-auto px-0.5 py-1 select-text"
           : kind === "panel"
             ? "mt-0.5 mb-1.5 pb-2"
             : "mt-1",

From 8c51f7c5f225a952660d92f50e80588be041232d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 21 Oct 2026 11:28:45 -0700
Subject: [PATCH 7/7] fix: drop the action row under collapsed automation
 bubbles

Copy, Edit from here and Open automation only appear once the prompt is
expanded, so a collapsed bubble no longer leaves an empty row under it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/features/threads/ThreadFeed.tsx       | 54 ++++++++--------
 .../chat/MessagesTimeline.browser.test.tsx    |  4 +-
 .../src/components/chat/MessagesTimeline.tsx  | 62 ++++++++++---------
 3 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/apps/mobile/src/features/threads/ThreadFeed.tsx b/apps/mobile/src/features/threads/ThreadFeed.tsx
index f272b01452acf..8c07123dd3ae8 100644
--- a/apps/mobile/src/features/threads/ThreadFeed.tsx
+++ b/apps/mobile/src/features/threads/ThreadFeed.tsx
@@ -1073,32 +1073,34 @@ function ThreadAutomationMessageRow(props: {
           </View>
         ) : null}
       </View>
-      <View className="mt-1 flex-row items-center justify-end gap-2 pr-0.5">
-        {props.scheduledTaskId ? (
-          <Pressable
-            accessibilityRole="link"
-            hitSlop={6}
-            onPress={() =>
-              navigation.navigate("SettingsSheet", {
-                screen: "SettingsContent",
-                params: { screen: "SettingsScheduledTasks" },
-              })
-            }
-          >
-            <Text className="font-t3-medium text-xs text-foreground-secondary">
-              Open automation
-            </Text>
-          </Pressable>
-        ) : null}
-        <Text className="font-t3-medium text-xs tabular-nums text-foreground-secondary">
-          {props.timestampLabel}
-        </Text>
-        <UserMessageCopyButton
-          text={props.text}
-          onCopy={undefined}
-          tintColor={props.iconSubtleColor}
-        />
-      </View>
+      {props.expanded ? (
+        <View className="mt-1 flex-row items-center justify-end gap-2 pr-0.5">
+          {props.scheduledTaskId ? (
+            <Pressable
+              accessibilityRole="link"
+              hitSlop={6}
+              onPress={() =>
+                navigation.navigate("SettingsSheet", {
+                  screen: "SettingsContent",
+                  params: { screen: "SettingsScheduledTasks" },
+                })
+              }
+            >
+              <Text className="font-t3-medium text-xs text-foreground-secondary">
+                Open automation
+              </Text>
+            </Pressable>
+          ) : null}
+          <Text className="font-t3-medium text-xs tabular-nums text-foreground-secondary">
+            {props.timestampLabel}
+          </Text>
+          <UserMessageCopyButton
+            text={props.text}
+            onCopy={undefined}
+            tintColor={props.iconSubtleColor}
+          />
+        </View>
+      ) : null}
     </View>
   );
 }
diff --git a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
index 37e64f1e8b41f..447a18ffd1b7e 100644
--- a/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.browser.test.tsx
@@ -230,7 +230,7 @@ describe("MessagesTimeline automation prompts", () => {
     );
   });
 
-  it("keeps edit-from-here on automation prompts", async () => {
+  it("shows edit-from-here once an automation prompt is expanded", async () => {
     setup();
     const runId = RunId.make("run-1");
     await using screen = await renderTimeline(
@@ -258,6 +258,8 @@ describe("MessagesTimeline automation prompts", () => {
         ],
       },
     );
+    expect(screen.buttons("Edit from here")).toHaveLength(0);
+    await click(screen.button(/^Automation/));
     expect(screen.buttons("Edit from here")).toHaveLength(1);
   });
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 8cc77f66bf6b0..ce07df36ca87f 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2229,38 +2229,40 @@ function AutomationMessageRow({ row }: { row: Extract<TimelineRow, { kind: "mess
         ) : null}
       </div>
       <UserMessageProjectedStatus row={row} />
-      <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
-        <div className="flex shrink-0 items-center gap-2">
-          {scheduledTaskId ? (
-            <Link
-              to="/settings/scheduled-tasks"
-              search={{ environmentId: ctx.activeThreadEnvironmentId, taskId: scheduledTaskId }}
-              className="rounded-sm text-xs text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
-            >
-              Open automation
-            </Link>
-          ) : null}
-          <TimelineRowTimestamp
-            createdAt={row.message.createdAt}
-            timestampFormat={ctx.timestampFormat}
-            alwaysVisible
-          />
-          <div className="flex items-center gap-0.5">
-            {typeof revertTurnCount === "number" && (
-              <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
-            )}
-            <MessageCopyButton text={text} variant="ghost" />
-            {promptLink !== null && (
-              <MessageCopyButton
-                text={promptLink}
-                label="Copy prompt link"
-                icon={LinkIconNode}
-                variant="ghost"
-              />
-            )}
+      {expanded ? (
+        <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
+          <div className="flex shrink-0 items-center gap-2">
+            {scheduledTaskId ? (
+              <Link
+                to="/settings/scheduled-tasks"
+                search={{ environmentId: ctx.activeThreadEnvironmentId, taskId: scheduledTaskId }}
+                className="rounded-sm text-xs text-muted-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+              >
+                Open automation
+              </Link>
+            ) : null}
+            <TimelineRowTimestamp
+              createdAt={row.message.createdAt}
+              timestampFormat={ctx.timestampFormat}
+              alwaysVisible
+            />
+            <div className="flex items-center gap-0.5">
+              {typeof revertTurnCount === "number" && (
+                <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+              )}
+              <MessageCopyButton text={text} variant="ghost" />
+              {promptLink !== null && (
+                <MessageCopyButton
+                  text={promptLink}
+                  label="Copy prompt link"
+                  icon={LinkIconNode}
+                  variant="ghost"
+                />
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      ) : null}
     </div>
   );
 }