Animation Smorgasbord (#15637)

Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

packages/ui/src/components/session-turn.tsx

@@ -1,4 +1,5 @@
 import { AssistantMessage, type FileDiff, Message as MessageType, Part as PartType } from "@opencode-ai/sdk/v2/client"
+import type { SessionStatus } from "@opencode-ai/sdk/v2"
 import { useData } from "../context"
 import { useFileComponent } from "../context/file"
 
@@ -15,6 +16,7 @@ import { DiffChanges } from "./diff-changes"
 import { Icon } from "./icon"
 import { TextShimmer } from "./text-shimmer"
 import { SessionRetry } from "./session-retry"
+import { TextReveal } from "./text-reveal"
 import { createAutoScroll } from "../hooks"
 import { useI18n } from "../context/i18n"
 
@@ -142,6 +144,9 @@ export function SessionTurn(
     showReasoningSummaries?: boolean
     shellToolDefaultOpen?: boolean
     editToolDefaultOpen?: boolean
+    active?: boolean
+    queued?: boolean
+    status?: SessionStatus
     onUserInteracted?: () => void
     classes?: {
       root?: string
@@ -187,6 +192,7 @@ export function SessionTurn(
   })
 
   const pending = createMemo(() => {
+    if (typeof props.active === "boolean" && typeof props.queued === "boolean") return
     const messages = allMessages() ?? emptyMessages
     return messages.findLast(
       (item): item is AssistantMessage => item.role === "assistant" && typeof item.time.completed !== "number",
@@ -204,6 +210,7 @@ export function SessionTurn(
   })
 
   const active = createMemo(() => {
+    if (typeof props.active === "boolean") return props.active
     const msg = message()
     const parent = pendingUser()
     if (!msg || !parent) return false
@@ -211,6 +218,7 @@ export function SessionTurn(
   })
 
   const queued = createMemo(() => {
+    if (typeof props.queued === "boolean") return props.queued
     const id = message()?.id
     if (!id) return false
     if (!pendingUser()) return false
@@ -305,7 +313,11 @@ export function SessionTurn(
     return unwrap(String(msg))
   })
 
-  const status = createMemo(() => data.store.session_status[props.sessionID] ?? idle)
+  const status = createMemo(() => {
+    if (props.status !== undefined) return props.status
+    if (typeof props.active === "boolean" && !props.active) return idle
+    return data.store.session_status[props.sessionID] ?? idle
+  })
   const working = createMemo(() => status().type !== "idle" && active())
   const showReasoningSummaries = createMemo(() => props.showReasoningSummaries ?? true)
 
@@ -410,8 +422,13 @@ export function SessionTurn(
                 <Show when={showThinking()}>
                   <div data-slot="session-turn-thinking">
                     <TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
-                    <Show when={!showReasoningSummaries() && reasoningHeading()}>
-                      {(text) => <span data-slot="session-turn-thinking-heading">{text()}</span>}
+                    <Show when={!showReasoningSummaries()}>
+                      <TextReveal
+                        text={reasoningHeading()}
+                        class="session-turn-thinking-heading"
+                        travel={25}
+                        duration={700}
+                      />
                     </Show>
                   </div>
                 </Show>