fix(tui): keep exact-fit tab titles stationary (#42073)

packages/core/test/snapshot.test.ts

@@ -143,47 +143,44 @@ describe("Snapshot", () => {
     ),
   )
 
-  testEffect(Layer.empty).live(
-    "isolates snapshot indexes by canonical Git worktree",
-    () =>
-      Effect.acquireUseRelease(
-        Effect.promise(() => tmpdir()),
-        (tmp) =>
-          Effect.gen(function* () {
-            const project = path.join(tmp.path, "project")
-            const linked = path.join(tmp.path, "linked")
-            yield* Effect.promise(async () => {
-              await fs.mkdir(project)
-              await fs.writeFile(path.join(project, "tracked.txt"), "main\n")
-              await initGit(project, true)
-              await $`git -c core.fsmonitor=false worktree add --detach ${linked} HEAD`.cwd(project).quiet()
-            })
+  testEffect(Layer.empty).live("isolates snapshot indexes by canonical Git worktree", () =>
+    Effect.acquireUseRelease(
+      Effect.promise(() => tmpdir()),
+      (tmp) =>
+        Effect.gen(function* () {
+          const project = path.join(tmp.path, "project")
+          const linked = path.join(tmp.path, "linked")
+          yield* Effect.promise(async () => {
+            await fs.mkdir(project)
+            await fs.writeFile(path.join(project, "tracked.txt"), "main\n")
+            await initGit(project, true)
+            await $`git -c core.fsmonitor=false worktree add --detach ${linked} HEAD`.cwd(project).quiet()
+          })
 
-            const capture = (directory: string) =>
-              Effect.gen(function* () {
-                const snapshot = yield* Snapshot.Service
-                return yield* snapshot.capture()
-              }).pipe(Effect.provide(snapshotLayer(tmp.path, directory)))
-            expect(yield* capture(project)).toBeDefined()
-            expect(yield* capture(linked)).toBeDefined()
+          const capture = (directory: string) =>
+            Effect.gen(function* () {
+              const snapshot = yield* Snapshot.Service
+              return yield* snapshot.capture()
+            }).pipe(Effect.provide(snapshotLayer(tmp.path, directory)))
+          expect(yield* capture(project)).toBeDefined()
+          expect(yield* capture(linked)).toBeDefined()
 
-            const projectID = yield* Effect.gen(function* () {
-              return (yield* Location.Service).project.id
-            }).pipe(
-              Effect.provide(
-                AppNodeBuilder.build(Location.boundNode(Location.Ref.make({ directory: AbsolutePath.make(project) }))),
-              ),
-            )
-            expect(
-              yield* Effect.promise(() => fs.stat(path.join(tmp.path, "snapshot", projectID, Hash.fast(project)))),
-            ).toBeDefined()
-            expect(
-              yield* Effect.promise(() => fs.stat(path.join(tmp.path, "snapshot", projectID, Hash.fast(linked)))),
-            ).toBeDefined()
-          }),
-        (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
-      ),
-    { timeout: 15_000 },
+          const projectID = yield* Effect.gen(function* () {
+            return (yield* Location.Service).project.id
+          }).pipe(
+            Effect.provide(
+              AppNodeBuilder.build(Location.boundNode(Location.Ref.make({ directory: AbsolutePath.make(project) }))),
+            ),
+          )
+          expect(
+            yield* Effect.promise(() => fs.stat(path.join(tmp.path, "snapshot", projectID, Hash.fast(project)))),
+          ).toBeDefined()
+          expect(
+            yield* Effect.promise(() => fs.stat(path.join(tmp.path, "snapshot", projectID, Hash.fast(linked)))),
+          ).toBeDefined()
+        }),
+      (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
+    ),
   )
 })
 

packages/core/test/tool-shell.test.ts

@@ -387,63 +387,57 @@ describe("ShellTool", () => {
     ),
   )
 
-  it.live(
-    "approves an explicit external workdir before shell execution",
-    () =>
-      Effect.acquireUseRelease(
-        Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
-        ([active, outside]) => {
-          reset()
-          return withSession(active.path, (registry) =>
-            executeTool(registry, call({ command: cwdCommand, workdir: outside.path })),
-          ).pipe(
-            Effect.andThen(
-              Effect.sync(() => {
-                expect(assertions.map((item) => item.action)).toEqual(["external_directory", "shell"])
-                expect(assertions[0]).toMatchObject({
-                  resources: [path.join(realpathSync(outside.path), "*").replaceAll("\\", "/")],
-                })
-              }),
-            ),
-          )
-        },
-        ([active, outside]) =>
-          Effect.promise(() =>
-            Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
+  it.live("approves an explicit external workdir before shell execution", () =>
+    Effect.acquireUseRelease(
+      Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
+      ([active, outside]) => {
+        reset()
+        return withSession(active.path, (registry) =>
+          executeTool(registry, call({ command: cwdCommand, workdir: outside.path })),
+        ).pipe(
+          Effect.andThen(
+            Effect.sync(() => {
+              expect(assertions.map((item) => item.action)).toEqual(["external_directory", "shell"])
+              expect(assertions[0]).toMatchObject({
+                resources: [path.join(realpathSync(outside.path), "*").replaceAll("\\", "/")],
+              })
+            }),
           ),
-      ),
-    { timeout: 15_000 },
+        )
+      },
+      ([active, outside]) =>
+        Effect.promise(() =>
+          Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
+        ),
+    ),
   )
 
-  it.live(
-    "approves an external directory used by a directory-change command",
-    () =>
-      Effect.acquireUseRelease(
-        Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
-        ([active, outside]) => {
-          reset()
-          const command = isWindows
-            ? `Set-Location -LiteralPath '${outside.path}'; (Get-Location).Path`
-            : `cd '${outside.path}' && pwd`
-          return withSession(active.path, (registry) =>
-            executeTool(registry, call({ command }, "call-external-cd")),
-          ).pipe(
-            Effect.andThen(
-              Effect.sync(() => {
-                expect(assertions.map((item) => item.action)).toEqual(["external_directory", "shell"])
-                expect(assertions[0]).toMatchObject({
-                  resources: [path.join(realpathSync(outside.path), "*").replaceAll("\\", "/")],
-                })
-              }),
-            ),
-          )
-        },
-        ([active, outside]) =>
-          Effect.promise(() =>
-            Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
+  it.live("approves an external directory used by a directory-change command", () =>
+    Effect.acquireUseRelease(
+      Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
+      ([active, outside]) => {
+        reset()
+        const command = isWindows
+          ? `Set-Location -LiteralPath '${outside.path}'; (Get-Location).Path`
+          : `cd '${outside.path}' && pwd`
+        return withSession(active.path, (registry) =>
+          executeTool(registry, call({ command }, "call-external-cd")),
+        ).pipe(
+          Effect.andThen(
+            Effect.sync(() => {
+              expect(assertions.map((item) => item.action)).toEqual(["external_directory", "shell"])
+              expect(assertions[0]).toMatchObject({
+                resources: [path.join(realpathSync(outside.path), "*").replaceAll("\\", "/")],
+              })
+            }),
           ),
-      ),
-    { timeout: 15_000 },
+        )
+      },
+      ([active, outside]) =>
+        Effect.promise(() =>
+          Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
+        ),
+    ),
   )
 
   it.live("approves an expanded external home directory", () =>
@@ -465,31 +459,28 @@ describe("ShellTool", () => {
     ),
   )
 
-  it.live(
-    "does not execute after external-directory or shell denial",
-    () =>
-      Effect.acquireUseRelease(
-        Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
-        ([active, outside]) =>
-          Effect.gen(function* () {
-            reset()
-            denyAction = "external_directory"
-            yield* withSession(active.path, (registry) =>
-              executeTool(registry, call({ command: cwdCommand, workdir: outside.path })),
-            )
-            expect(assertions.map((item) => item.action)).toEqual(["external_directory"])
+  it.live("does not execute after external-directory or shell denial", () =>
+    Effect.acquireUseRelease(
+      Effect.promise(() => Promise.all([tmpdir(), tmpdir()])),
+      ([active, outside]) =>
+        Effect.gen(function* () {
+          reset()
+          denyAction = "external_directory"
+          yield* withSession(active.path, (registry) =>
+            executeTool(registry, call({ command: cwdCommand, workdir: outside.path })),
+          )
+          expect(assertions.map((item) => item.action)).toEqual(["external_directory"])
 
-            reset()
-            denyAction = "shell"
-            yield* withSession(active.path, (registry) => executeTool(registry, call({ command: cwdCommand })))
-            expect(assertions.map((item) => item.action)).toEqual(["shell"])
-          }),
-        ([active, outside]) =>
-          Effect.promise(() =>
-            Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
-          ),
-      ),
-    { timeout: 15_000 },
+          reset()
+          denyAction = "shell"
+          yield* withSession(active.path, (registry) => executeTool(registry, call({ command: cwdCommand })))
+          expect(assertions.map((item) => item.action)).toEqual(["shell"])
+        }),
+      ([active, outside]) =>
+        Effect.promise(() =>
+          Promise.all([active[Symbol.asyncDispose](), outside[Symbol.asyncDispose]()]).then(() => undefined),
+        ),
+    ),
   )
 
   it.live("keeps non-zero exits useful", () =>
@@ -628,7 +619,7 @@ describe("ShellTool", () => {
         },
         (tmp) => Effect.promise(() => tmp[Symbol.asyncDispose]().then(() => undefined)),
       ),
-    { timeout: 15_000 },
+    { timeout: 10_000 },
   )
 
   it.live(
@@ -639,7 +630,7 @@ describe("ShellTool", () => {
         (tmp) => {
           reset()
           return withSession(tmp.path, (registry) =>
-            executeTool(registry, call({ command: timeoutOutputCommand, timeout: isWindows ? 3_000 : 500 })),
+            executeTool(registry, call({ command: timeoutOutputCommand, timeout: isWindows ? 3_000 : 50 })),
           ).pipe(
             Effect.andThen((settled) =>
               Effect.sync(() => {

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

@@ -23,7 +23,7 @@ import { TabPulse, unreadGlowIntensity } from "./tab-pulse"
 import { tint } from "../theme/color"
 import { SESSION_SIDEBAR_WIDTH } from "../ui/layout"
 import { projectName } from "../util/project"
-import { marqueeCycleWidth, marqueeText } from "../util/marquee"
+import { marqueeCycleWidth, marqueeOverflows, marqueeText } from "../util/marquee"
 
 // A long title fades out over its last cells instead of cutting hard.
 const FADE_WIDTH = 4
@@ -85,7 +85,7 @@ function createMarquee(animations: () => boolean) {
       returning = false
       return scroll()
     }
-    if (stringWidth(title) <= width) return
+    if (!marqueeOverflows(title, width)) return
     cycleWidth = marqueeCycleWidth(title)
     setActive(sessionID)
     setOffset(0)
@@ -258,7 +258,8 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                 return value ? data.project.get(value.projectID) : undefined
               })
               const numberWidth = () => 2
-              const titleWidth = () => Math.max(1, width() - numberWidth() - 2 - (hovered() === tab.sessionID ? 1 : 0))
+              const restingTitleWidth = () => Math.max(1, width() - numberWidth() - 2)
+              const titleWidth = () => Math.max(1, restingTitleWidth() - (hovered() === tab.sessionID ? 1 : 0))
               const title = () => tab.title ?? "Untitled session"
               const scrolling = () => marquee.active() === tab.sessionID && marquee.offset() > 0
               const visibleTitle = createMemo(() =>
@@ -267,7 +268,9 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                   : Locale.takeWidth(title(), titleWidth()),
               )
               const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle()))
-              const titleFades = createMemo(() => stringWidth(title()) >= titleWidth() && titleWidth() > FADE_WIDTH)
+              const titleFades = createMemo(
+                () => marqueeOverflows(title(), restingTitleWidth()) && titleWidth() > FADE_WIDTH,
+              )
               const detail = createMemo(() => {
                 const value = session()
                 return Locale.takeWidth(projectName(project(), value?.location.directory) ?? "", titleWidth())
@@ -349,10 +352,10 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                   position="relative"
                   flexDirection="column"
                   backgroundColor={background()}
-                  onMouseOver={() => marquee.enter(tab.sessionID, title(), titleWidth())}
+                  onMouseOver={() => marquee.enter(tab.sessionID, title(), restingTitleWidth())}
                   onMouseOut={() => marquee.leave(tab.sessionID)}
                   onMouseDown={() => {
-                    marquee.enter(tab.sessionID, title(), titleWidth())
+                    marquee.enter(tab.sessionID, title(), restingTitleWidth())
                     setDragging(tab.sessionID)
                   }}
                   onMouseUp={release}
@@ -759,8 +762,8 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
           // Shortcut labels stay one cell wide: 1-9, 0 for ten, then a neutral dot.
           const numberWidth = () => 2
           // Hovering reveals the close mark, so the title's right bound shifts left of it.
-          const availableTitleWidth = () =>
-            Math.max(1, width() - 1 - numberWidth() - (hovered() === tab.sessionID ? 2 : 0))
+          const restingTitleWidth = () => Math.max(1, width() - 1 - numberWidth())
+          const availableTitleWidth = () => Math.max(1, restingTitleWidth() - (hovered() === tab.sessionID ? 2 : 0))
           const scrolling = () => marquee.active() === tab.sessionID && marquee.offset() > 0
           const visibleTitle = createMemo(() =>
             scrolling()
@@ -769,7 +772,7 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
           )
           const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle()))
           const titleFades = createMemo(
-            () => stringWidth(title()) >= availableTitleWidth() && availableTitleWidth() > FADE_WIDTH,
+            () => marqueeOverflows(title(), restingTitleWidth()) && availableTitleWidth() > FADE_WIDTH,
           )
           const foreground = () => {
             if (hovered() === tab.sessionID) return theme.text.default
@@ -820,10 +823,10 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
               position="relative"
               flexDirection="row"
               backgroundColor={background()}
-              onMouseOver={() => marquee.enter(tab.sessionID, title(), availableTitleWidth())}
+              onMouseOver={() => marquee.enter(tab.sessionID, title(), restingTitleWidth())}
               onMouseOut={() => marquee.leave(tab.sessionID)}
               onMouseDown={() => {
-                marquee.enter(tab.sessionID, title(), availableTitleWidth())
+                marquee.enter(tab.sessionID, title(), restingTitleWidth())
                 setDragging(tab.sessionID)
               }}
               onMouseUp={release}

packages/tui/src/util/marquee.ts

@@ -7,6 +7,10 @@ export function marqueeCycleWidth(value: string) {
   return stringWidth(value + GAP)
 }
 
+export function marqueeOverflows(value: string, width: number) {
+  return stringWidth(value) > width
+}
+
 export function marqueeText(value: string, width: number, offset: number) {
   if (width <= 0) return ""
   if (stringWidth(value) <= width || offset <= 0) return Locale.takeWidth(value, width)

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

@@ -1,6 +1,10 @@
+/** @jsxImportSource @opentui/solid */
 import { expect, test } from "bun:test"
 import { RGBA } from "@opentui/core"
+import { testRender } from "@opentui/solid"
+import { createSignal } from "solid-js"
 import {
+  TabPulse,
   blendTabPulseColor,
   completionPulseOpacity,
   glowIgnitionLevel,
@@ -8,6 +12,50 @@ import {
 } from "../../src/component/tab-pulse"
 import { tint } from "../../src/theme/color"
 
+test("a prompt pulse restarts the neutral edge flash while the tab remains busy", async () => {
+  const background = RGBA.fromHex("#101010")
+  const flash = RGBA.fromHex("#f0f0f0")
+  const [promptPulse, setPromptPulse] = createSignal(0)
+  const app = await testRender(
+    () => (
+      <box width={8} height={1} backgroundColor={background}>
+        <TabPulse
+          active={true}
+          promptPulse={promptPulse()}
+          color={background}
+          flashColor={flash}
+          backgroundColor={background}
+        />
+      </box>
+    ),
+    { width: 8, height: 1 },
+  )
+
+  const firstBackground = () => app.captureSpans().lines[0]?.spans[0]?.bg
+
+  try {
+    await app.renderOnce()
+    expect(firstBackground()?.equals(background)).toBeTrue()
+
+    setPromptPulse(1)
+    await Bun.sleep(80)
+    await app.renderOnce()
+    expect(firstBackground()?.equals(background)).toBeFalse()
+    expect(firstBackground()?.r ?? 0).toBeGreaterThan(0.17)
+
+    await Bun.sleep(800)
+    await app.renderOnce()
+    expect(firstBackground()?.equals(background)).toBeTrue()
+
+    setPromptPulse(2)
+    await Bun.sleep(80)
+    await app.renderOnce()
+    expect(firstBackground()?.equals(background)).toBeFalse()
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
 test("completion pulse rises quickly and fades over the remaining duration", () => {
   expect(completionPulseOpacity(0)).toBe(0)
   expect(completionPulseOpacity(0.06)).toBeCloseTo(0.5)

packages/tui/test/util/marquee.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { marqueeCycleWidth, marqueeText } from "../../src/util/marquee"
+import { marqueeCycleWidth, marqueeOverflows, marqueeText } from "../../src/util/marquee"
 import { stringWidth } from "../../src/util/string-width"
 
 describe("marquee text", () => {
@@ -7,6 +7,11 @@ describe("marquee text", () => {
     expect(marqueeText("Short", 10, 8)).toBe("Short")
   })
 
+  test("does not classify an exact fit as overflow", () => {
+    expect(marqueeOverflows("Exact fit", 9)).toBe(false)
+    expect(marqueeOverflows("Exact fit", 8)).toBe(true)
+  })
+
   test("starts clipped and scrolls through a long title", () => {
     expect(marqueeText("A long session title", 8, 0)).toBe("A long s")
     expect(marqueeText("A long session title", 8, 2)).toBe("long ses")