From 823bc20427f3b95ab71ab3adefa04140104e9ce4 Mon Sep 17 00:00:00 2001 From: "opencode-agent[bot]" <219766164+opencode-agent[bot]@users.noreply.github.com> Date: Mon, 13 Jul 2026 10:15:30 -0400 Subject: [PATCH] fix(tui): use gray list highlights (#36669) Co-authored-by: Dax Raad --- packages/tui/src/component/prompt/autocomplete.tsx | 8 ++++---- .../feature-plugins/system/diff-viewer-file-tree.tsx | 8 ++++---- .../tui/src/routes/session/composer/shell-tab.tsx | 9 ++++----- .../tui/src/routes/session/composer/subagents-tab.tsx | 11 +++++------ packages/tui/src/ui/dialog-select.tsx | 9 ++++----- 5 files changed, 21 insertions(+), 24 deletions(-) diff --git a/packages/tui/src/component/prompt/autocomplete.tsx b/packages/tui/src/component/prompt/autocomplete.tsx index 3f018278800..6623b0506c4 100644 --- a/packages/tui/src/component/prompt/autocomplete.tsx +++ b/packages/tui/src/component/prompt/autocomplete.tsx @@ -13,7 +13,7 @@ import { getScrollAcceleration } from "../../util/scroll" import { useTuiPaths } from "../../context/runtime" import { useConfig } from "../../config" import { useLocation } from "../../context/location" -import { useTheme, selectedForeground } from "../../context/theme" +import { useTheme } from "../../context/theme" import { SplitBorder } from "../../ui/border" import { useTerminalDimensions } from "@opentui/solid" import { Locale } from "../../util/locale" @@ -746,7 +746,7 @@ export function Autocomplete(props: { { setStore("input", "mouse") @@ -761,11 +761,11 @@ export function Autocomplete(props: { }} onMouseUp={() => select()} > - + {option().display} - + {" " + option().description?.trimStart()} diff --git a/packages/tui/src/feature-plugins/system/diff-viewer-file-tree.tsx b/packages/tui/src/feature-plugins/system/diff-viewer-file-tree.tsx index cb15eaa5034..5ce93bd60dd 100644 --- a/packages/tui/src/feature-plugins/system/diff-viewer-file-tree.tsx +++ b/packages/tui/src/feature-plugins/system/diff-viewer-file-tree.tsx @@ -82,17 +82,17 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) { props.onRowClick?.(row)} > - + {prefix()} diff --git a/packages/tui/src/routes/session/composer/shell-tab.tsx b/packages/tui/src/routes/session/composer/shell-tab.tsx index 90e90a17855..166bc780efe 100644 --- a/packages/tui/src/routes/session/composer/shell-tab.tsx +++ b/packages/tui/src/routes/session/composer/shell-tab.tsx @@ -1,10 +1,10 @@ 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 { useSDK } from "../../../context/sdk" -import { useTheme, selectedForeground } from "../../../context/theme" +import { useTheme } from "../../../context/theme" import { useBindings, useCommandShortcut } from "../../../keymap" import { useComposerTab } from "./index" @@ -13,7 +13,6 @@ export function ShellTab(props: { sessionID: string }) { const location = useLocation() const sdk = useSDK() const { theme } = useTheme() - const fg = selectedForeground(theme) const composer = useComposerTab() const killHint = useCommandShortcut("composer.shell.kill") @@ -114,11 +113,11 @@ export function ShellTab(props: { sessionID: string }) { flexDirection="row" paddingLeft={1} paddingRight={1} - backgroundColor={active() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)} + backgroundColor={active() ? theme.backgroundElement : undefined} onMouseOver={() => setStore("selected", index())} > diff --git a/packages/tui/src/routes/session/composer/subagents-tab.tsx b/packages/tui/src/routes/session/composer/subagents-tab.tsx index 70dde6dc957..ab3995c9870 100644 --- a/packages/tui/src/routes/session/composer/subagents-tab.tsx +++ b/packages/tui/src/routes/session/composer/subagents-tab.tsx @@ -1,10 +1,10 @@ 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 { useSDK } from "../../../context/sdk" -import { useTheme, selectedForeground } from "../../../context/theme" +import { useTheme } from "../../../context/theme" import { Locale } from "../../../util/locale" import { useBindings, useCommandShortcut } from "../../../keymap" import { useComposerTab } from "./index" @@ -22,7 +22,6 @@ export function SubagentsTab(props: { sessionID: string }) { const data = useData() const sdk = useSDK() const { theme } = useTheme() - const fg = selectedForeground(theme) const navigate = useRoute().navigate const composer = useComposerTab() const interruptHint = useCommandShortcut("composer.subagent.interrupt") @@ -215,7 +214,7 @@ export function SubagentsTab(props: { sessionID: string }) { flexDirection="row" paddingLeft={1} paddingRight={1} - backgroundColor={active() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)} + backgroundColor={active() ? theme.backgroundElement : undefined} onMouseOver={() => setStore("selected", index())} onMouseUp={() => { setStore("selected", index()) @@ -224,7 +223,7 @@ export function SubagentsTab(props: { sessionID: string }) { > @@ -232,7 +231,7 @@ export function SubagentsTab(props: { sessionID: string }) { - + {status()} diff --git a/packages/tui/src/ui/dialog-select.tsx b/packages/tui/src/ui/dialog-select.tsx index 78563bcb86e..7fe1555d967 100644 --- a/packages/tui/src/ui/dialog-select.tsx +++ b/packages/tui/src/ui/dialog-select.tsx @@ -674,7 +674,7 @@ export function DialogSelect(props: DialogSelectProps) { active() ? actionFocused() ? theme.backgroundElement - : (option.bg ?? theme.primary) + : (option.bg ?? theme.backgroundElement) : RGBA.fromInts(0, 0, 0, 0) } > @@ -749,9 +749,8 @@ function Option(props: { onMouseOver?: () => void }) { const { theme } = useTheme() - const fg = selectedForeground(theme) const text = createMemo(() => { - if (props.active && !props.muted) return fg + if (props.active && !props.muted) return theme.text if (props.muted && (props.active || props.current)) return theme.textMuted if (props.current) return theme.primary return theme.text @@ -784,12 +783,12 @@ function Option(props: { ? Locale.truncateLeft(props.title, props.titleWidth ?? 61) : Locale.truncate(props.title, props.titleWidth ?? 61))} - {props.description} + {props.description} - {props.footer} + {props.footer}