From 78149301d07a7558c81f53a9a65f7150beeba5c7 Mon Sep 17 00:00:00 2001
From: Brendan Allan <git@brendonovich.dev>
Date: Sat, 22 Aug 2026 18:33:29 +0800
Subject: [PATCH 1/3] feat(app): fade the background move hint

---
 .../src/session/timeline/message-timeline.tsx | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/session/timeline/message-timeline.tsx b/packages/app/src/session/timeline/message-timeline.tsx
index 92196e86744c..f435d1f1575b 100644
--- a/packages/app/src/session/timeline/message-timeline.tsx
+++ b/packages/app/src/session/timeline/message-timeline.tsx
@@ -1,4 +1,5 @@
 import { createEffect, createMemo, createSignal, For, on, Show, type Accessor } from "solid-js"
+import createPresence from "solid-presence"
 import { createStore } from "solid-js/store"
 import type { SessionUserActions } from "@opencode-ai/session-ui/actions"
 import { Badge } from "@opencode-ai/ui/badge"
@@ -65,6 +66,32 @@ export function BackgroundMoveHint(props: { keybind?: string[] }) {
   )
 }
 
+function BackgroundMoveHintRow(props: { show: boolean; centered: boolean; padding: string }) {
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  const presence = createPresence({ show: () => props.show, element: () => ref() ?? null })
+  return (
+    <Show when={presence.present()}>
+      <div
+        classList={{
+          "min-w-0 w-full max-w-full": true,
+          "md:max-w-200 2xl:max-w-[1000px] md:mx-auto": props.centered,
+        }}
+      >
+        {/* both directions are gated on data-visible because animate-in and animate-out both write the
+            animation shorthand, and presence only detects the exit when the animation name changes */}
+        <div
+          ref={setRef}
+          data-visible={props.show}
+          class="duration-150 data-[visible=true]:animate-in data-[visible=true]:fade-in data-[visible=false]:animate-out data-[visible=false]:fade-out data-[visible=false]:fill-mode-forwards motion-reduce:animate-none"
+          classList={{ [`flex h-10 items-start pt-4 ${props.padding}`]: true }}
+        >
+          <BackgroundMoveHint />
+        </div>
+      </div>
+    </Show>
+  )
+}
+
 export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)
@@ -474,18 +501,7 @@ function MessageTimelineView(
       renderRow={(row, onSizeChange) => (
         <>
           <rowRenderer.Row row={row} onSizeChange={onSizeChange} />
-          <Show when={backgroundHint(row())}>
-            <div
-              classList={{
-                "min-w-0 w-full max-w-full": true,
-                "md:max-w-200 2xl:max-w-[1000px] md:mx-auto": props.centered,
-              }}
-            >
-              <div class={`flex h-10 items-start pt-4 ${turnPadding()}`}>
-                <BackgroundMoveHint />
-              </div>
-            </div>
-          </Show>
+          <BackgroundMoveHintRow show={backgroundHint(row())} centered={props.centered} padding={turnPadding()} />
         </>
       )}
       header={

From 891da72edf1d130a85e8000392a56c55ef5d5879 Mon Sep 17 00:00:00 2001
From: Brendan Allan <git@brendonovich.dev>
Date: Sat, 22 Aug 2026 19:34:33 +0800
Subject: [PATCH 2/3] fix(session-ui): keep background shell shimmer active

---
 packages/session-ui/src/tools/tool-renderer.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index dd760589691b..f70a30e6b72b 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -1251,7 +1251,10 @@ ToolRegistry.register({
           <div data-slot="basic-tool-tool-info-structured">
             <div data-slot="basic-tool-tool-info-main">
               <span data-slot="basic-tool-tool-title">
-                <TextShimmer text={i18n.t("ui.tool.shell")} active={streaming()} />
+                <TextShimmer
+                  text={i18n.t("ui.tool.shell")}
+                  active={streaming() || props.status === "running" || props.metadata.status === "running"}
+                />
               </span>
               <Show when={!open()}>
                 <Show

From 0bb00f6967966c3ebab6b8f580612e66c6a1886d Mon Sep 17 00:00:00 2001
From: Brendan Allan <git@brendonovich.dev>
Date: Sat, 22 Aug 2026 19:41:44 +0800
Subject: [PATCH 3/3] fix(app): skip background hint mount animation

---
 .../src/session/timeline/message-timeline.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/session/timeline/message-timeline.tsx b/packages/app/src/session/timeline/message-timeline.tsx
index f435d1f1575b..1d8c84106da8 100644
--- a/packages/app/src/session/timeline/message-timeline.tsx
+++ b/packages/app/src/session/timeline/message-timeline.tsx
@@ -68,7 +68,11 @@ export function BackgroundMoveHint(props: { keybind?: string[] }) {
 
 function BackgroundMoveHintRow(props: { show: boolean; centered: boolean; padding: string }) {
   const [ref, setRef] = createSignal<HTMLDivElement>()
-  const presence = createPresence({ show: () => props.show, element: () => ref() ?? null })
+  const visibility = createMemo<{ show: boolean; animate: boolean }>(
+    (previous) => ({ show: props.show, animate: previous.animate || previous.show !== props.show }),
+    { show: props.show, animate: false },
+  )
+  const presence = createPresence({ show: () => visibility().show, element: () => ref() ?? null })
   return (
     <Show when={presence.present()}>
       <div
@@ -77,13 +81,14 @@ function BackgroundMoveHintRow(props: { show: boolean; centered: boolean; paddin
           "md:max-w-200 2xl:max-w-[1000px] md:mx-auto": props.centered,
         }}
       >
-        {/* both directions are gated on data-visible because animate-in and animate-out both write the
-            animation shorthand, and presence only detects the exit when the animation name changes */}
         <div
           ref={setRef}
-          data-visible={props.show}
-          class="duration-150 data-[visible=true]:animate-in data-[visible=true]:fade-in data-[visible=false]:animate-out data-[visible=false]:fade-out data-[visible=false]:fill-mode-forwards motion-reduce:animate-none"
-          classList={{ [`flex h-10 items-start pt-4 ${props.padding}`]: true }}
+          class="duration-150 motion-reduce:animate-none"
+          classList={{
+            [`flex h-10 items-start pt-4 ${props.padding}`]: true,
+            "animate-in fade-in": visibility().animate && visibility().show,
+            "animate-out fade-out fill-mode-forwards": visibility().animate && !visibility().show,
+          }}
         >
           <BackgroundMoveHint />
         </div>