feat(app): fade the background move hint (#44109)

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,37 @@ export function BackgroundMoveHint(props: { keybind?: string[] }) {
   )
 }
 
+function BackgroundMoveHintRow(props: { show: boolean; centered: boolean; padding: string }) {
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  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
+        classList={{
+          "min-w-0 w-full max-w-full": true,
+          "md:max-w-200 2xl:max-w-[1000px] md:mx-auto": props.centered,
+        }}
+      >
+        <div
+          ref={setRef}
+          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>
+      </div>
+    </Show>
+  )
+}
+
 export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)
@@ -474,18 +506,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={

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