ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(tui): migrate leaf views to V2 themes (#37510)

Browse source
This commit is contained in:
James Long 2026-07-17 11:19:03 -04:00 • committed by GitHub
commit d67e035c18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 46 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/tui/src/component/dialog-debug.tsx
View file

@ -11,7 +11,7 @@ import { useToast } from "../ui/toast"
import { describeOS, describeTerminal } from "../util/system" import { describeOS, describeTerminal } from "../util/system"
export function DialogDebug() { export function DialogDebug() {
const { theme } = useTheme() const { themeV2 } = useTheme()
const dialog = useDialog() const dialog = useDialog()
const route = useRoute() const route = useRoute()
const local = useLocal() const local = useLocal()
@ -54,10 +54,10 @@ export function DialogDebug() {
return ( return (
<box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}> <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
<box flexDirection="row" justifyContent="space-between"> <box flexDirection="row" justifyContent="space-between">
<text fg={theme.text} attributes={TextAttributes.BOLD}> <text fg={themeV2.text()} attributes={TextAttributes.BOLD}>
Debug Debug
</text> </text>
<text fg={theme.textMuted} onMouseUp={() => dialog.clear()}> <text fg={themeV2.text.subdued()} onMouseUp={() => dialog.clear()}>
esc esc
</text> </text>
</box> </box>
@ -67,10 +67,10 @@ export function DialogDebug() {
<For each={entries()}> <For each={entries()}>
{(entry) => ( {(entry) => (
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text flexShrink={0} fg={theme.textMuted}> <text flexShrink={0} fg={themeV2.text.subdued()}>
{entry.label.padEnd(10)} {entry.label.padEnd(10)}
</text> </text>
<text fg={theme.text} wrapMode="word"> <text fg={themeV2.text()} wrapMode="word">
{entry.value} {entry.value}
</text> </text>
</box> </box>
@ -78,12 +78,12 @@ export function DialogDebug() {
</For> </For>
</box> </box>
<box flexDirection="row" justifyContent="space-between"> <box flexDirection="row" justifyContent="space-between">
<text fg={theme.textMuted}>Share this when reporting an issue.</text> <text fg={themeV2.text.subdued()}>Share this when reporting an issue.</text>
<text onMouseUp={copy}> <text onMouseUp={copy}>
<span style={{ fg: copied() ? theme.success : theme.text }}> <span style={{ fg: copied() ? themeV2.text.feedback.success() : themeV2.text() }}>
<b>{copied() ? "✓ copied" : "copy"}</b>{" "} <b>{copied() ? "✓ copied" : "copy"}</b>{" "}
</span> </span>
<span style={{ fg: theme.textMuted }}>enter</span> <span style={{ fg: themeV2.text.subdued() }}>enter</span>
</text> </text>
</box> </box>
</box> </box>

14
packages/tui/src/component/dialog-skill.tsx
View file

@ -15,7 +15,7 @@ export type DialogSkillProps = {
export function DialogSkill(props: DialogSkillProps) { export function DialogSkill(props: DialogSkillProps) {
const dialog = useDialog() const dialog = useDialog()
const data = useData() const data = useData()
const { theme } = useTheme() const { themeV2 } = useTheme()
dialog.setSize("large") dialog.setSize("large")
const [loadError, setLoadError] = createSignal<unknown>() const [loadError, setLoadError] = createSignal<unknown>()
@ -63,29 +63,29 @@ export function DialogSkill(props: DialogSkillProps) {
<Switch <Switch
fallback={ fallback={
<box paddingLeft={4} paddingRight={4} paddingTop={1}> <box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>No skills available</text> <text fg={themeV2.text.subdued()}>No skills available</text>
</box> </box>
} }
> >
<Match when={showError()}> <Match when={showError()}>
<box paddingLeft={4} paddingRight={4} paddingTop={1}> <box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.error} attributes={TextAttributes.BOLD}> <text fg={themeV2.text.feedback.error()} attributes={TextAttributes.BOLD}>
Could not load skills Could not load skills
</text> </text>
<text fg={theme.textMuted}>{errorMessage(loadError())}</text> <text fg={themeV2.text.subdued()}>{errorMessage(loadError())}</text>
<text fg={theme.textMuted}>Close and reopen Skills to try again.</text> <text fg={themeV2.text.subdued()}>Close and reopen Skills to try again.</text>
</box> </box>
</Match> </Match>
<Match when={skills.loading}> <Match when={skills.loading}>
<box paddingLeft={4} paddingRight={4} paddingTop={1}> <box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>Loading skills…</text> <text fg={themeV2.text.subdued()}>Loading skills…</text>
</box> </box>
</Match> </Match>
</Switch> </Switch>
} }
noMatchView={ noMatchView={
<box paddingLeft={4} paddingRight={4} paddingTop={1}> <box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>No skills found</text> <text fg={themeV2.text.subdued()}>No skills found</text>
</box> </box>
} }
/> />

4
packages/tui/src/component/spinner.tsx
View file

@ -10,9 +10,9 @@ registerOpencodeSpinner()
export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
export function Spinner(props: { children?: JSX.Element; color?: RGBA }) { export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
const { theme } = useTheme() const { themeV2 } = useTheme()
const config = useConfig().data const config = useConfig().data
const color = () => props.color ?? theme.textMuted const color = () => props.color ?? themeV2.text.subdued()
return ( return (
<Show <Show
when={config.animations ?? true} when={config.animations ?? true}

12
packages/tui/src/feature-plugins/sidebar/context.tsx
View file

@ -9,7 +9,7 @@ const money = new Intl.NumberFormat("en-US", {
}) })
function View(props: { context: Plugin.Context; sessionID: string }) { function View(props: { context: Plugin.Context; sessionID: string }) {
const { theme } = useTheme() const { themeV2 } = useTheme()
const msg = createMemo(() => props.context.data.session.message.list(props.sessionID)) const msg = createMemo(() => props.context.data.session.message.list(props.sessionID))
const session = createMemo(() => props.context.data.session.get(props.sessionID)) const session = createMemo(() => props.context.data.session.get(props.sessionID))
const cost = createMemo(() => props.context.data.session.cost(props.sessionID)) const cost = createMemo(() => props.context.data.session.cost(props.sessionID))
@ -20,20 +20,20 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
return ( return (
<box> <box>
<text fg={theme.text}> <text fg={themeV2.text()}>
<b>Context</b> <b>Context</b>
</text> </text>
<Show when={state()} fallback={<text fg={theme.textMuted}>Not measured</text>}> <Show when={state()} fallback={<text fg={themeV2.text.subdued()}>Not measured</text>}>
{(value) => ( {(value) => (
<> <>
<text fg={theme.textMuted}>{value().tokens.toLocaleString()} tokens</text> <text fg={themeV2.text.subdued()}>{value().tokens.toLocaleString()} tokens</text>
<Show when={value().percent !== undefined}> <Show when={value().percent !== undefined}>
<text fg={theme.textMuted}>{value().percent}% used</text> <text fg={themeV2.text.subdued()}>{value().percent}% used</text>
</Show> </Show>
</> </>
)} )}
</Show> </Show>
<text fg={theme.textMuted}>{money.format(cost())} spent</text> <text fg={themeV2.text.subdued()}>{money.format(cost())} spent</text>
</box> </box>
) )
} }

6
packages/tui/src/feature-plugins/sidebar/footer.tsx
View file

@ -6,12 +6,14 @@ import { abbreviateHome } from "../../runtime"
import { FilePath } from "../../ui/file-path" import { FilePath } from "../../ui/file-path"
function View(props: { context: Plugin.Context }) { function View(props: { context: Plugin.Context }) {
const { theme } = useTheme() const { themeV2 } = useTheme()
const paths = useTuiPaths() const paths = useTuiPaths()
const directory = createMemo(() => const directory = createMemo(() =>
props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined, props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
) )
return <Show when={directory()}>{(value) => <FilePath value={value()} maxWidth={38} fg={theme.textMuted} />}</Show> return (
<Show when={directory()}>{(value) => <FilePath value={value()} maxWidth={38} fg={themeV2.text.subdued()} />}</Show>
)
} }
export default Plugin.define({ export default Plugin.define({

6
packages/tui/src/feature-plugins/sidebar/lsp.tsx
View file

@ -2,13 +2,13 @@ import { Plugin } from "@opencode-ai/plugin/v2/tui"
import { useTheme } from "../../context/theme" import { useTheme } from "../../context/theme"
function View() { function View() {
const { theme } = useTheme() const { themeV2 } = useTheme()
return ( return (
<box> <box>
<text fg={theme.text}> <text fg={themeV2.text()}>
<b>LSP</b> <b>LSP</b>
</text> </text>
<text fg={theme.textMuted}>LSP status unavailable</text> <text fg={themeV2.text.subdued()}>LSP status unavailable</text>
</box> </box>
) )
} }

24
packages/tui/src/feature-plugins/sidebar/mcp.tsx
View file

@ -4,7 +4,7 @@ import { useTheme } from "../../context/theme"
function View(props: { context: Plugin.Context; sessionID: string }) { function View(props: { context: Plugin.Context; sessionID: string }) {
const [open, setOpen] = createSignal(true) const [open, setOpen] = createSignal(true)
const { theme } = useTheme() const { themeV2 } = useTheme()
const session = createMemo(() => props.context.data.session.get(props.sessionID)) const session = createMemo(() => props.context.data.session.get(props.sessionID))
const list = createMemo(() => props.context.data.location.mcp.server.list(session()?.location) ?? []) const list = createMemo(() => props.context.data.location.mcp.server.list(session()?.location) ?? [])
const on = createMemo(() => list().filter((item) => item.status.status === "connected").length) const on = createMemo(() => list().filter((item) => item.status.status === "connected").length)
@ -19,12 +19,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
) )
const dot = (status: string) => { const dot = (status: string) => {
if (status === "connected") return theme.success if (status === "connected") return themeV2.text.feedback.success()
if (status === "failed") return theme.error if (status === "failed") return themeV2.text.feedback.error()
if (status === "disabled") return theme.textMuted if (status === "disabled") return themeV2.text.subdued()
if (status === "needs_auth") return theme.warning if (status === "needs_auth") return themeV2.text.feedback.warning()
if (status === "needs_client_registration") return theme.error if (status === "needs_client_registration") return themeV2.text.feedback.error()
return theme.textMuted return themeV2.text.subdued()
} }
return ( return (
@ -32,12 +32,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
<box> <box>
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}> <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
<Show when={list().length > 2}> <Show when={list().length > 2}>
<text fg={theme.text}>{open() ? "▼" : "▶"}</text> <text fg={themeV2.text()}>{open() ? "▼" : "▶"}</text>
</Show> </Show>
<text fg={theme.text}> <text fg={themeV2.text()}>
<b>MCP</b> <b>MCP</b>
<Show when={!open()}> <Show when={!open()}>
<span style={{ fg: theme.textMuted }}> <span style={{ fg: themeV2.text.subdued() }}>
{" "} {" "}
({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""}) ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
</span> </span>
@ -56,9 +56,9 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
> >
• •
</text> </text>
<text fg={theme.text} wrapMode="word"> <text fg={themeV2.text()} wrapMode="word">
{item.name}{" "} {item.name}{" "}
<span style={{ fg: theme.textMuted }}> <span style={{ fg: themeV2.text.subdued() }}>
<Switch fallback={item.status.status}> <Switch fallback={item.status.status}>
<Match when={item.status.status === "connected"}>Connected</Match> <Match when={item.status.status === "connected"}>Connected</Match>
<Match when={item.status.status === "failed"}> <Match when={item.status.status === "failed"}>

8
packages/tui/src/feature-plugins/system/diff-viewer-ui.tsx
View file

@ -30,7 +30,7 @@ export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis })
export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) { export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) {
const group = usePanelGroup() const group = usePanelGroup()
const { theme } = useTheme() const { themeV2 } = useTheme()
const [local, boxProps] = splitProps(props, ["border"]) const [local, boxProps] = splitProps(props, ["border"])
const border = local.border ?? "start" const border = local.border ?? "start"
const borderProps = const borderProps =
@ -38,7 +38,7 @@ export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { bo
? {} ? {}
: { : {
border: panelBorderSides(group?.axis ?? "y", border), border: panelBorderSides(group?.axis ?? "y", border),
borderColor: theme.border, borderColor: themeV2.border(),
} }
return ( return (
@ -59,8 +59,8 @@ function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): Bor
export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) { export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
const group = usePanelGroup() const group = usePanelGroup()
const { theme } = useTheme() const { themeV2 } = useTheme()
const color = () => props.color ?? theme.border const color = () => props.color ?? themeV2.border()
const axis = () => props.axis ?? crossAxis(group?.axis ?? "y") const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
if (axis() === "y") { if (axis() === "y") {
return ( return (