vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-25 09:13:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

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
parent f8470404e3
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"
export function DialogDebug() {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const dialog = useDialog()
const route = useRoute()
const local = useLocal()
@ -54,10 +54,10 @@ export function DialogDebug() {
return (
<box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
<box flexDirection="row" justifyContent="space-between">
<text fg={theme.text} attributes={TextAttributes.BOLD}>
<text fg={themeV2.text()} attributes={TextAttributes.BOLD}>
Debug
</text>
<text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
<text fg={themeV2.text.subdued()} onMouseUp={() => dialog.clear()}>
esc
</text>
</box>
@ -67,10 +67,10 @@ export function DialogDebug() {
<For each={entries()}>
{(entry) => (
<box flexDirection="row" gap={1}>
<text flexShrink={0} fg={theme.textMuted}>
<text flexShrink={0} fg={themeV2.text.subdued()}>
{entry.label.padEnd(10)}
</text>
<text fg={theme.text} wrapMode="word">
<text fg={themeV2.text()} wrapMode="word">
{entry.value}
</text>
</box>
@ -78,12 +78,12 @@ export function DialogDebug() {
</For>
</box>
<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}>
<span style={{ fg: copied() ? theme.success : theme.text }}>
<span style={{ fg: copied() ? themeV2.text.feedback.success() : themeV2.text() }}>
<b>{copied() ? "✓ copied" : "copy"}</b>{" "}
</span>
<span style={{ fg: theme.textMuted }}>enter</span>
<span style={{ fg: themeV2.text.subdued() }}>enter</span>
</text>
</box>
</box>

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

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

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

@ -10,9 +10,9 @@ registerOpencodeSpinner()
export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const config = useConfig().data
const color = () => props.color ?? theme.textMuted
const color = () => props.color ?? themeV2.text.subdued()
return (
<Show
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 }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const msg = createMemo(() => props.context.data.session.message.list(props.sessionID))
const session = createMemo(() => props.context.data.session.get(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 (
<box>
<text fg={theme.text}>
<text fg={themeV2.text()}>
<b>Context</b>
</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) => (
<>
<text fg={theme.textMuted}>{value().tokens.toLocaleString()} tokens</text>
<text fg={themeV2.text.subdued()}>{value().tokens.toLocaleString()} tokens</text>
<Show when={value().percent !== undefined}>
<text fg={theme.textMuted}>{value().percent}% used</text>
<text fg={themeV2.text.subdued()}>{value().percent}% used</text>
</Show>
</>
)}
</Show>
<text fg={theme.textMuted}>{money.format(cost())} spent</text>
<text fg={themeV2.text.subdued()}>{money.format(cost())} spent</text>
</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"
function View(props: { context: Plugin.Context }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const paths = useTuiPaths()
const directory = createMemo(() =>
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({

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"
function View() {
const { theme } = useTheme()
const { themeV2 } = useTheme()
return (
<box>
<text fg={theme.text}>
<text fg={themeV2.text()}>
<b>LSP</b>
</text>
<text fg={theme.textMuted}>LSP status unavailable</text>
<text fg={themeV2.text.subdued()}>LSP status unavailable</text>
</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 }) {
const [open, setOpen] = createSignal(true)
const { theme } = useTheme()
const { themeV2 } = useTheme()
const session = createMemo(() => props.context.data.session.get(props.sessionID))
const list = createMemo(() => props.context.data.location.mcp.server.list(session()?.location) ?? [])
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) => {
if (status === "connected") return theme.success
if (status === "failed") return theme.error
if (status === "disabled") return theme.textMuted
if (status === "needs_auth") return theme.warning
if (status === "needs_client_registration") return theme.error
return theme.textMuted
if (status === "connected") return themeV2.text.feedback.success()
if (status === "failed") return themeV2.text.feedback.error()
if (status === "disabled") return themeV2.text.subdued()
if (status === "needs_auth") return themeV2.text.feedback.warning()
if (status === "needs_client_registration") return themeV2.text.feedback.error()
return themeV2.text.subdued()
}
return (
@ -32,12 +32,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
<box>
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
<Show when={list().length > 2}>
<text fg={theme.text}>{open() ? "▼" : "▶"}</text>
<text fg={themeV2.text()}>{open() ? "▼" : "▶"}</text>
</Show>
<text fg={theme.text}>
<text fg={themeV2.text()}>
<b>MCP</b>
<Show when={!open()}>
<span style={{ fg: theme.textMuted }}>
<span style={{ fg: themeV2.text.subdued() }}>
{" "}
({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
</span>
@ -56,9 +56,9 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
>
•
</text>
<text fg={theme.text} wrapMode="word">
<text fg={themeV2.text()} wrapMode="word">
{item.name}{" "}
<span style={{ fg: theme.textMuted }}>
<span style={{ fg: themeV2.text.subdued() }}>
<Switch fallback={item.status.status}>
<Match when={item.status.status === "connected"}>Connected</Match>
<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 }) {
const group = usePanelGroup()
const { theme } = useTheme()
const { themeV2 } = useTheme()
const [local, boxProps] = splitProps(props, ["border"])
const border = local.border ?? "start"
const borderProps =
@ -38,7 +38,7 @@ export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { bo
? {}
: {
border: panelBorderSides(group?.axis ?? "y", border),
borderColor: theme.border,
borderColor: themeV2.border(),
}
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 }) {
const group = usePanelGroup()
const { theme } = useTheme()
const color = () => props.color ?? theme.border
const { themeV2 } = useTheme()
const color = () => props.color ?? themeV2.border()
const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
if (axis() === "y") {
return (