feat(tui): show spinner in hidden tab number slot

packages/tui/src/component/dialog-config.tsx

@@ -126,6 +126,15 @@ export const settings: Setting[] = [
     values: ["horizontal", "vertical"],
     keywords: ["sidebar", "orientation", "left"],
   },
+  {
+    title: "Shortcut numbers",
+    category: "Tabs",
+    path: ["tabs", "numbers"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+    keywords: ["keys", "numeric", "labels"],
+  },
   {
     title: "Layout",
     category: "Diffs",

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

@@ -38,6 +38,7 @@ import { projectName } from "../util/project"
 import { marqueeCycleWidth, marqueeOverflows, marqueeTextParts } from "../util/marquee"
 import { useDialog } from "../ui/dialog"
 import { DialogSessionRename } from "./dialog-session-rename"
+import { Spinner } from "./spinner"
 
 // A long title fades out over its last cells instead of cutting hard.
 const FADE_WIDTH = 4
@@ -658,14 +659,23 @@ function VerticalSessionTabs(props: { controller?: SessionTabsController; animat
                       onLevel={setSweepLevel}
                     />
                     <box zIndex={1} width="100%" flexDirection="row" paddingLeft={1} paddingRight={1}>
-                      <text
-                        width={numberWidth()}
-                        fg={numberColor()}
-                        selectable={false}
-                        attributes={selected() ? TextAttributes.BOLD : undefined}
+                      <Show
+                        when={!config.tabs.numbers && runs()}
+                        fallback={
+                          <text
+                            width={numberWidth()}
+                            fg={numberColor()}
+                            selectable={false}
+                            attributes={selected() ? TextAttributes.BOLD : undefined}
+                          >
+                            {config.tabs.numbers ? sessionTabShortcutLabel(index()) : ""}
+                          </text>
+                        }
                       >
-                        {sessionTabShortcutLabel(index())}
-                      </text>
+                        <box width={numberWidth()}>
+                          <Spinner color={numberColor()} />
+                        </box>
+                      </Show>
                       <text
                         width={titleWidth()}
                         fg={foreground()}
@@ -1144,9 +1154,22 @@ function HorizontalSessionTabs(props: { controller?: SessionTabsController; anim
                 <text width={1} selectable={false}>
                   {" "}
                 </text>
-                <text width={numberWidth()} fg={numberColor()} selectable={false} attributes={bold()}>
-                  {tab === NEW_SESSION_TAB ? "+" : sessionTabShortcutLabel(tabNumber() - 1)}
-                </text>
+                <Show
+                  when={tab !== NEW_SESSION_TAB && !config.tabs.numbers && runs()}
+                  fallback={
+                    <text width={numberWidth()} fg={numberColor()} selectable={false} attributes={bold()}>
+                      {tab === NEW_SESSION_TAB
+                        ? "+"
+                        : config.tabs.numbers
+                          ? sessionTabShortcutLabel(tabNumber() - 1)
+                          : ""}
+                    </text>
+                  }
+                >
+                  <box width={numberWidth()}>
+                    <Spinner color={numberColor()} />
+                  </box>
+                </Show>
                 <text
                   width={availableTitleWidth()}
                   fg={foreground()}

packages/tui/src/config/index.tsx

@@ -153,6 +153,9 @@ export const Info = Schema.Struct({
       layout: Schema.optional(Schema.Literals(["horizontal", "vertical"])).annotate({
         description: "Show tabs in a horizontal strip or vertical sidebar",
       }),
+      numbers: Schema.optional(Schema.Boolean).annotate({
+        description: "Show numeric shortcuts beside session tabs",
+      }),
     }),
   ).annotate({ description: "Tab strip settings" }),
   mini: Schema.optional(
@@ -224,6 +227,7 @@ export type Resolved = Omit<Info, "attention" | "cursor" | "keybinds" | "leader"
     enabled: boolean
     scope: "global" | "cwd"
     layout: "horizontal" | "vertical"
+    numbers: boolean
   }
 }
 
@@ -269,6 +273,7 @@ export function resolve(input: Info, options: { terminalSuspend: boolean }): Res
       enabled: input.tabs?.enabled ?? true,
       scope: input.tabs?.scope ?? "cwd",
       layout: input.tabs?.layout ?? "horizontal",
+      numbers: input.tabs?.numbers ?? false,
     },
   }
 }

packages/tui/test/component/session-tabs-mouse.test.tsx

@@ -22,12 +22,12 @@ test("releasing a transcript selection over tab controls does not activate them"
     close() {},
     move() {},
     add: () => setAdded((value) => value + 1),
-    status: () => EMPTY_SESSION_TAB_STATUS,
+    status: () => ({ ...EMPTY_SESSION_TAB_STATUS, busy: true }),
   } satisfies SessionTabsController
   const app = await testRender(
     () => (
       <TestTuiContexts>
-        <ConfigProvider config={createTuiResolvedConfig({ tabs: { enabled: true } })}>
+        <ConfigProvider config={createTuiResolvedConfig({ animations: false, tabs: { enabled: true } })}>
           <ThemeProvider mode="dark" source={emptyThemeSource}>
             <box flexDirection="column">
               <SessionTabs controller={controller} animations={false} />
@@ -43,6 +43,8 @@ test("releasing a transcript selection over tab controls does not activate them"
   try {
     app.renderer.start()
     await app.waitForFrame((frame) => frame.includes("Second"))
+    expect(app.captureCharFrame()).not.toContain("1 First")
+    expect(app.captureCharFrame()).toContain("⋯ First")
     await app.mockMouse.pressDown(5, 1)
     await app.mockMouse.release(40, 0)
     expect(active()).toBe("first")

packages/tui/test/config-v2.test.tsx

@@ -20,11 +20,12 @@ test("validates mini replay settings", () => {
 test("validates the session tabs setting", () => {
   const decode = Schema.decodeUnknownSync(Info)
 
-  expect(decode({ tabs: { enabled: true, layout: "vertical" } })).toEqual({
-    tabs: { enabled: true, layout: "vertical" },
+  expect(decode({ tabs: { enabled: true, layout: "vertical", numbers: true } })).toEqual({
+    tabs: { enabled: true, layout: "vertical", numbers: true },
   })
   expect(() => decode({ tabs: { layout: true } })).toThrow()
   expect(() => decode({ tabs: { enabled: "on" } })).toThrow()
+  expect(() => decode({ tabs: { numbers: "on" } })).toThrow()
   expect(decode({ prompt: { image_preview: true } })).toEqual({ prompt: { image_preview: true } })
   expect(decode({ session: { image_preview: true } })).toEqual({ session: { image_preview: true } })
   expect(decode({ session: { new_location: "inherit" } })).toEqual({ session: { new_location: "inherit" } })
@@ -48,7 +49,7 @@ test("resolves nested config and keybind defaults", () => {
   expect(config.scroll).toEqual({ speed: 2, acceleration: true })
   expect(config.diffs).toEqual({ view: "split" })
   expect(config.debug).toEqual({ devtools: true })
-  expect(config.tabs).toEqual({ enabled: true, scope: "cwd", layout: "horizontal" })
+  expect(config.tabs).toEqual({ enabled: true, scope: "cwd", layout: "horizontal", numbers: false })
   expect(config.session.new_location).toBe("launch")
 })
 
@@ -56,6 +57,7 @@ test("shows resolved tab defaults in settings", () => {
   expect(settings.find((setting) => setting.path.join(".") === "tabs.enabled")?.default).toBe(true)
   expect(settings.find((setting) => setting.path.join(".") === "tabs.scope")?.default).toBe("cwd")
   expect(settings.find((setting) => setting.path.join(".") === "tabs.layout")?.default).toBe("horizontal")
+  expect(settings.find((setting) => setting.path.join(".") === "tabs.numbers")?.default).toBe(false)
 })
 
 test("shows the new session location default in settings", () => {