fix(tui): restore running and unread status hue aliases (#49907)

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

@@ -120,7 +120,7 @@ const glowTextColor = (base: RGBA, glow: RGBA, index: number, width: number, lev
   tint(base, glow, 0.12 * unreadGlowIntensity(index, width) * level)
 
 function tabFeedbackColor(status: SessionTabsStatus, theme: ReturnType<typeof useTheme>) {
-  if (status.attention) return theme.hue.interactive[200]
+  if (status.attention) return theme.hue.accent[200]
   if (status.unread === "error") return theme.text.feedback.error.base
   return undefined
 }
@@ -528,8 +528,8 @@ function VerticalSessionTabs(props: {
   const compact = createMemo(() => width() < SESSION_TABS_COMPACT_BREAKPOINT)
   const tooltipWidth = () => Math.min(54, dimensions().width - width())
   const stride = () => (compact() ? 2 : 3)
-  const unreadColor = () => theme.hue.interactive[200]
-  const activeNumber = () => theme.hue.accent[200]
+  const unreadColor = () => theme.hue.accent[200]
+  const activeNumber = () => theme.hue.interactive[200]
   const idleNumber = () => tint(theme.text.formfield.base, background(), 0.55)
   const separatorUpperPulseColor = createMemo(() => tint(background(), theme.text.base, 0.04))
   const separatorLowerPulseColor = createMemo(() => tint(background(), theme.text.base, 0.05))
@@ -1291,8 +1291,8 @@ function HorizontalSessionTabs(props: {
   onCleanup(clearCloseHold)
   // A captured drag ends with a synthetic up on its drop target; do not turn that into a click.
   let suppressClick = false
-  const unreadColor = () => theme.hue.interactive[200]
-  const activeNumber = () => theme.hue.accent[200]
+  const unreadColor = () => theme.hue.accent[200]
+  const activeNumber = () => theme.hue.interactive[200]
   const idleNumber = () => tint(theme.text.formfield.base, theme.background.base, 0.55)
   const newTab = () => tabs.newTab?.() ?? false
   const activeID = createMemo(() => (newTab() ? NEW_SESSION_TAB.sessionID : tabs.current()))

packages/tui/src/feature-plugins/prompt/btw.tsx

@@ -32,7 +32,7 @@ export default Plugin.define({
         return (
           <Show when={pending() > 0}>
             <box flexShrink={0}>
-              <Spinner color={theme.hue.accent[200]}>/btw</Spinner>
+              <Spinner color={theme.hue.interactive[200]}>/btw</Spinner>
             </box>
           </Show>
         )

packages/tui/src/feature-plugins/system/storybook/one-cell-spinner.tsx

@@ -181,7 +181,7 @@ function OneCellSpinnerStory(props: { context: Plugin.Context }) {
                               animations={animations()}
                               paused={paused()}
                               glow={glow()}
-                              color={theme.hue.accent[200]}
+                              color={theme.hue.interactive[200]}
                             />
                           </box>
                         )}
@@ -236,7 +236,7 @@ function OneCellSpinnerStory(props: { context: Plugin.Context }) {
                     animations={animations()}
                     paused={paused()}
                     glow={glow()}
-                    color={theme.hue.accent[200]}
+                    color={theme.hue.interactive[200]}
                   />
                   <text fg={theme.text.base}> esc stop</text>
                 </box>

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

@@ -284,10 +284,10 @@ function SessionTabsStory(props: { context: Plugin.Context }) {
       { text: "", color: theme.text.base },
     )
     if (status.attention === "question")
-      lines.push({ text: "? Which approach should I take?", color: theme.hue.interactive[200] })
+      lines.push({ text: "? Which approach should I take?", color: theme.hue.accent[200] })
     else if (status.attention === "permission")
-      lines.push({ text: "! Waiting for permission to run the command", color: theme.hue.interactive[200] })
-    else if (status.busy) lines.push({ text: "● Working…", color: theme.hue.accent[200] })
+      lines.push({ text: "! Waiting for permission to run the command", color: theme.hue.accent[200] })
+    else if (status.busy) lines.push({ text: "● Working…", color: theme.hue.interactive[200] })
     else if (outcome === "failed")
       lines.push({
         text: `✗ bun run test failed — 3 tests failing in ${file}`,

packages/tui/src/mini/theme.ts

@@ -142,9 +142,9 @@ function map(
       formfieldFocusedBg: exact(theme.background.formfield.focused),
       formfieldFocusedText: exact(theme.text.formfield.focused),
       selection: exact(theme.text.formfield.selected),
-      running: exact(theme.hue.accent[200]),
-      question: exact(theme.hue.interactive[200]),
-      permission: exact(theme.hue.interactive[200]),
+      running: exact(theme.hue.interactive[200]),
+      question: exact(theme.hue.accent[200]),
+      permission: exact(theme.hue.accent[200]),
       success: exact(theme.text.feedback.success.base),
       link: exact(theme.markdown.link),
       categorical: dedupeWith(

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

@@ -139,7 +139,7 @@ for (const orientation of ["horizontal", "vertical"] as const) {
             .captureSpans()
             .lines.flatMap((line) => line.spans)
             .find((span) => span.text.trim() === (attention === "question" ? "?" : "!"))?.fg
-        expect(indicatorColor()?.toInts()).toEqual(theme.hue.interactive[200].toInts())
+        expect(indicatorColor()?.toInts()).toEqual(theme.hue.accent[200].toInts())
         const glow = () => {
           const colors = app
             .captureSpans()
@@ -156,7 +156,7 @@ for (const orientation of ["horizontal", "vertical"] as const) {
         expect(full).toBeGreaterThan(0)
         setActive("first")
         await app.renderOnce()
-        expect(indicatorColor()?.toInts()).toEqual(theme.hue.interactive[200].toInts())
+        expect(indicatorColor()?.toInts()).toEqual(theme.hue.accent[200].toInts())
         const dim = glow()
         expect(dim).toBeGreaterThan(0)
         expect(dim).toBeLessThan(full)
@@ -172,7 +172,7 @@ for (const orientation of ["horizontal", "vertical"] as const) {
           .lines.flatMap((line) => line.spans)
           .find((span) => span.text.trim() === glyph)?.fg
         expect(color?.toInts()).toEqual(
-          (unread === "error" ? theme.text.feedback.error.base : theme.hue.interactive[200]).toInts(),
+          (unread === "error" ? theme.text.feedback.error.base : theme.hue.accent[200]).toInts(),
         )
         await app.mockMouse.click(1, orientation === "vertical" ? 1 : 0)
         await app.renderOnce()

packages/tui/test/mini/theme.test.ts

@@ -90,9 +90,9 @@ function expectFooter(actual: RunTheme, theme: ResolvedTheme) {
     formfieldFocusedBg: theme.background.formfield.focused,
     formfieldFocusedText: theme.text.formfield.focused,
     selection: theme.text.formfield.selected,
-    running: theme.hue.accent[200],
-    question: theme.hue.interactive[200],
-    permission: theme.hue.interactive[200],
+    running: theme.hue.interactive[200],
+    question: theme.hue.accent[200],
+    permission: theme.hue.accent[200],
     success: theme.text.feedback.success.base,
     link: theme.markdown.link,
     shade: theme.background.raised.base,