fix(tui): flash tabs on prompt admission (#39702)

packages/tui/src/component/session-tabs.tsx

@@ -283,6 +283,7 @@ export function SessionTabs(props: { controller?: SessionTabsController; animati
               <TabPulse
                 enabled={animations()}
                 active={status().busy && !status().attention}
+                promptPulse={status().promptPulse}
                 complete={status().complete && !status().attention}
                 glow={glows()}
                 breathe={status().attention}

packages/tui/src/component/tab-pulse.tsx

@@ -4,6 +4,7 @@ import { extend } from "@opentui/solid"
 type TabPulseOptions = RenderableOptions<TabPulseRenderable> & {
   enabled?: boolean
   active?: boolean
+  promptPulse?: number
   complete?: boolean
   glow?: boolean
   breathe?: boolean
@@ -28,6 +29,7 @@ const COMPLETION_OPACITY = 0.18
 const EDGE_FLASH_DURATION = 800
 const EDGE_FLASH_ATTACK = 0.1
 const EDGE_FLASH_OPACITY = 0.1
+const PROMPT_FLASH_SCALE = 2
 const GLOW_IGNITION_DURATION = 600
 const GLOW_IGNITION_PEAK = 1.5
 const GLOW_IGNITION_ATTACK = 0.3
@@ -102,6 +104,11 @@ class Envelope {
     this.scale = scale
   }
 
+  restart(scale = 1) {
+    this.clock = 0
+    this.scale = scale
+  }
+
   stop() {
     this.clock = undefined
   }
@@ -127,6 +134,7 @@ const envelopeActive = (envelope: Envelope) => envelope.active
 class TabPulseRenderable extends Renderable {
   private _enabled: boolean
   private _active: boolean
+  private _promptPulse: number
   private _complete: boolean
   private _glow: boolean
   private _breathe: boolean
@@ -154,6 +162,7 @@ class TabPulseRenderable extends Renderable {
     super(ctx, { ...options, height: 1, live: enabled && active })
     this._enabled = enabled
     this._active = active
+    this._promptPulse = options.promptPulse ?? 0
     this._complete = options.complete ?? false
     this._glow = options.glow ?? false
     this._breathe = options.breathe ?? false
@@ -222,6 +231,15 @@ class TabPulseRenderable extends Renderable {
     this.requestRender()
   }
 
+  set promptPulse(value: number) {
+    if (value === this._promptPulse) return
+    this._promptPulse = value
+    if (!this._enabled) return
+    this.edgeFlash.restart(PROMPT_FLASH_SCALE)
+    this.live = true
+    this.requestRender()
+  }
+
   set complete(value: boolean) {
     if (value === this._complete) return
     this._complete = value
@@ -368,6 +386,7 @@ extend({ tab_pulse: TabPulseRenderable })
 export function TabPulse(props: {
   enabled?: boolean
   active: boolean
+  promptPulse?: number
   complete?: boolean
   glow?: boolean
   breathe?: boolean
@@ -385,6 +404,7 @@ export function TabPulse(props: {
       width="100%"
       enabled={props.enabled ?? true}
       active={props.active}
+      promptPulse={props.promptPulse ?? 0}
       complete={props.complete ?? false}
       glow={props.glow ?? false}
       breathe={props.breathe ?? false}

packages/tui/src/context/session-tabs.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { isDeepEqual } from "remeda"
 import { createSimpleContext } from "./helper"
 import { useClient } from "./client"
@@ -55,6 +55,7 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
       key: "sessionID",
     })
     const fallback = empty()
+    const [promptPulses, setPromptPulses] = createSignal<Record<string, number>>({})
     let history: SessionTabHistory = { entries: [], index: -1 }
 
     function state() {
@@ -77,6 +78,7 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
       const family = members.length > 0 ? members : [session]
       return {
         unread: state().unread[session],
+        promptPulse: promptPulses()[session] ?? 0,
         attention: family.some(
           (id) => (data.session.permission.list(id)?.length ?? 0) > 0 || (data.session.form.list(id)?.length ?? 0) > 0,
         ),
@@ -176,6 +178,14 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
     onCleanup(event.on("session.execution.succeeded", (evt) => markUnread(evt.data.sessionID, "activity")))
     onCleanup(event.on("session.execution.interrupted", (evt) => markUnread(evt.data.sessionID, "activity")))
     onCleanup(event.on("session.execution.failed", (evt) => markUnread(evt.data.sessionID, "error")))
+    onCleanup(
+      event.on("session.input.admitted", (evt) => {
+        if (!enabled() || evt.data.input.type !== "user") return
+        const sessionID = root(evt.data.sessionID)
+        if (current() === sessionID || !state().tabs.some((tab) => tab.sessionID === sessionID)) return
+        setPromptPulses((pulses) => ({ ...pulses, [sessionID]: (pulses[sessionID] ?? 0) + 1 }))
+      }),
+    )
     onCleanup(
       event.on("session.error", (evt) => {
         if (evt.data.sessionID) markUnread(evt.data.sessionID, "error")
@@ -201,6 +211,12 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
         draft.tabs = closeSessionTab(draft.tabs, target).tabs
         delete draft.unread[target]
       })
+      setPromptPulses((pulses) => {
+        if (pulses[target] === undefined) return pulses
+        const next = { ...pulses }
+        delete next[target]
+        return next
+      })
       if (selected) route.navigate(next ? { type: "session", sessionID: next } : { type: "home" })
     }
 

packages/tui/src/feature-plugins/system/storybook/session-tabs.tsx

@@ -23,7 +23,7 @@ const FIXTURE_TABS = [
   { sessionID: "fixture-12", title: "Prepare review" },
 ]
 
-const EMPTY_STATUS: FixtureStatus = { unread: undefined, attention: false, busy: false }
+const EMPTY_STATUS: FixtureStatus = { unread: undefined, promptPulse: 0, attention: false, busy: false }
 const RUN_DURATION = 1_800
 const RESUME_DURATION = 900