feat(tui): resolve action state priority (#37373)

packages/tui/src/routes/session/composer/shell-tab.tsx

@@ -1,6 +1,6 @@
 import { createMemo, For, Show, createEffect, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { TextAttributes, RGBA, ScrollBoxRenderable } from "@opentui/core"
+import { TextAttributes, ScrollBoxRenderable } from "@opentui/core"
 import { useData } from "../../../context/data"
 import { useLocation } from "../../../context/location"
 import { useClient } from "../../../context/client"
@@ -105,11 +105,11 @@ export function ShellTab(props: { sessionID: string }) {
                   flexDirection="row"
                   paddingLeft={1}
                   paddingRight={1}
-                  backgroundColor={active() ? themeV2.background.action.primary("selected") : RGBA.fromInts(0, 0, 0, 0)}
+                  backgroundColor={themeV2.background.action.primary({ focused: active() })}
                   onMouseOver={() => setStore("selected", index())}
                 >
                   <text
-                    fg={themeV2.text.action.primary(active() ? "focused" : "default")}
+                    fg={themeV2.text.action.primary({ focused: active() })}
                     attributes={active() ? TextAttributes.BOLD : undefined}
                     wrapMode="none"
                   >

packages/tui/src/routes/session/composer/subagents-tab.tsx

@@ -1,6 +1,6 @@
 import { createMemo, For, Show, createEffect, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { TextAttributes, RGBA, ScrollBoxRenderable } from "@opentui/core"
+import { TextAttributes, ScrollBoxRenderable } from "@opentui/core"
 import { useRoute, useRouteData } from "../../../context/route"
 import { useData } from "../../../context/data"
 import { useClient } from "../../../context/client"
@@ -216,7 +216,7 @@ export function SubagentsTab(props: { sessionID: string }) {
                   flexDirection="row"
                   paddingLeft={1}
                   paddingRight={1}
-                  backgroundColor={themeV2.background.action.primary(active() ? "focused" : "default")}
+                  backgroundColor={themeV2.background.action.primary({ focused: active(), selected: entry.current })}
                   onMouseOver={() => setStore("selected", index())}
                   onMouseUp={() => {
                     setStore("selected", index())
@@ -225,9 +225,7 @@ export function SubagentsTab(props: { sessionID: string }) {
                 >
                   <box flexGrow={1} minWidth={0} flexDirection="row">
                     <text
-                      fg={themeV2.text.action.primary(
-                        active() ? "focused" : entry.current ? "selected" : "default",
-                      )}
+                      fg={themeV2.text.action.primary({ focused: active(), selected: entry.current })}
                       attributes={active() ? TextAttributes.BOLD : undefined}
                       wrapMode="none"
                     >
@@ -235,7 +233,14 @@ export function SubagentsTab(props: { sessionID: string }) {
                     </text>
                   </box>
                   <Show when={status()}>
-                    <text fg={active() ? themeV2.text.action.primary() : themeV2.text.subdued()} wrapMode="none">
+                    <text
+                      fg={
+                        active()
+                          ? themeV2.text.action.primary({ focused: active(), selected: entry.current })
+                          : themeV2.text.subdued()
+                      }
+                      wrapMode="none"
+                    >
                       {status()}
                     </text>
                   </Show>

packages/tui/src/theme/v2/component.ts

@@ -1,7 +1,6 @@
 import type { RGBA } from "@opentui/core"
 import type { Accessor } from "solid-js"
 import type {
-  ActionState,
   ActionVariant,
   FormfieldState,
   ResolvedActionState,
@@ -9,6 +8,9 @@ import type {
   ResolvedThemeView,
   HueStep,
 } from "./index"
+import { ActionState } from "./schema"
+
+export type ActionStates = Partial<Record<ActionState, boolean>>
 
 export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
   const textAction = actions((variant, state) => current().text.action[variant][state])
@@ -121,7 +123,10 @@ export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
 }
 
 function actions(get: (variant: ActionVariant, state: ResolvedActionState) => RGBA) {
-  const action = (variant: ActionVariant) => (state: ActionState | "default" = "default") => get(variant, state)
+  const action = (variant: ActionVariant) => (states: ActionState | "default" | ActionStates = "default") => {
+    if (typeof states === "string") return get(variant, states)
+    return get(variant, ActionState.literals.find((state) => states[state]) ?? "default")
+  }
   const primary = action("primary")
   return Object.assign(primary, {
     primary,

packages/tui/src/theme/v2/schema.ts

@@ -12,7 +12,7 @@ export type HueAlias = Schema.Schema.Type<typeof HueAlias>
 export const ActionVariant = Schema.Literals(["primary", "secondary", "destructive"])
 export type ActionVariant = Schema.Schema.Type<typeof ActionVariant>
 
-export const ActionState = Schema.Literals(["focused", "pressed", "selected", "disabled"])
+export const ActionState = Schema.Literals(["disabled", "pressed", "focused", "selected"])
 export type ActionState = Schema.Schema.Type<typeof ActionState>
 export type ActionStateKey = `$${ActionState}`