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

fix(tui): prevent duplicate renderable IDs (#32110)

Browse source
This commit is contained in:
Sebastian 2026-06-13 00:51:32 +02:00 • committed by GitHub
commit fff0ec294c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 98 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/opencode/src/cli/cmd/run/footer.command.tsx
View file

@ -202,7 +202,6 @@ function match<T extends PanelEntry>(query: string, entries: T[]) {
}
function PanelShell(props: {
id: string
title: string
countVisible?: boolean
query: string
@ -279,7 +278,7 @@ function PanelShell(props: {
</>
)
return (
<box id={props.id} width="100%" flexDirection="column" border={false} backgroundColor="transparent" flexShrink={0}>
<box width="100%" flexDirection="column" border={false} backgroundColor="transparent" flexShrink={0}>
{minimal() ? (
<box width="100%" flexDirection="column" border={false} backgroundColor="transparent" flexShrink={0}>
{content}
@ -299,7 +298,6 @@ function PanelShell(props: {
)}
{minimal() ? (
<box
id={`${props.id}-bottom`}
width="100%"
height={1}
border={false}
@ -317,7 +315,6 @@ function PanelShell(props: {
</box>
) : (
<box
id={`${props.id}-bottom`}
width="100%"
height={1}
border={["left"]}
@ -549,7 +546,6 @@ export function RunCommandMenuBody(props: {
return (
<PanelShell
id="run-direct-footer-command-panel"
title="Commands"
countVisible={false}
query={query()}
@ -565,7 +561,6 @@ export function RunCommandMenuBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-command-list"
theme={props.theme}
items={items}
selected={menu.selected}
@ -649,7 +644,6 @@ export function RunSubagentSelectBody(props: {
return (
<PanelShell
id="run-direct-footer-subagent-panel"
title="Select subagent"
query={query()}
count={items().length}
@ -664,7 +658,6 @@ export function RunSubagentSelectBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-subagent-list"
theme={props.theme}
items={items}
selected={menu.selected}
@ -748,7 +741,6 @@ export function RunQueuedPromptSelectBody(props: {
return (
<PanelShell
id="run-direct-footer-queued-panel"
title="Queued prompts"
query={query()}
count={items().length}
@ -763,7 +755,6 @@ export function RunQueuedPromptSelectBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-queued-list"
theme={props.theme}
items={items}
selected={menu.selected}
@ -827,7 +818,6 @@ export function RunSkillSelectBody(props: {
return (
<PanelShell
id="run-direct-footer-skill-panel"
title="Skills"
query={query()}
count={items().length}
@ -842,7 +832,6 @@ export function RunSkillSelectBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-skill-list"
theme={props.theme}
items={items}
selected={menu.selected}
@ -927,7 +916,6 @@ export function RunVariantSelectBody(props: {
return (
<PanelShell
id="run-direct-footer-variant-panel"
title="Select variant"
query={query()}
count={items().length}
@ -942,7 +930,6 @@ export function RunVariantSelectBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-variant-list"
theme={props.theme}
items={items}
selected={menu.selected}
@ -1050,7 +1037,6 @@ export function RunModelSelectBody(props: {
return (
<PanelShell
id="run-direct-footer-model-panel"
title="Select model"
query={query()}
count={items().length}
@ -1065,7 +1051,6 @@ export function RunModelSelectBody(props: {
chrome="minimal"
>
<RunFooterMenu
id="run-direct-footer-model-list"
theme={props.theme}
items={items}
selected={menu.selected}

2
packages/opencode/src/cli/cmd/run/footer.menu.tsx
View file

@ -115,7 +115,6 @@ export function createFooterMenuState(input: { count: Accessor<number>; limit?:
}
export function RunFooterMenu(props: {
id?: string
theme: Accessor<RunFooterTheme>
items: Accessor<RunFooterMenuItem[]>
selected: Accessor<number>
@ -226,7 +225,6 @@ export function RunFooterMenu(props: {
}
return (
<box
id={props.id ?? "run-direct-footer-menu"}
width="100%"
height={props.rows()}
backgroundColor={props.background ? props.theme().shade : transparent}

5
packages/opencode/src/cli/cmd/run/footer.permission.tsx
View file

@ -96,7 +96,6 @@ export function RejectField(props: {
return (
<textarea
id="run-direct-footer-permission-reject"
width="100%"
minHeight={1}
maxHeight={3}
@ -259,14 +258,12 @@ export function RunPermissionBody(props: {
return (
<box
id="run-direct-footer-permission-body"
width="100%"
height="100%"
flexDirection="column"
backgroundColor={props.theme.surface}
>
<box
id="run-direct-footer-permission-head"
flexDirection="column"
gap={1}
paddingLeft={1}
@ -303,7 +300,6 @@ export function RunPermissionBody(props: {
fallback={
<box width="100%" flexGrow={1} flexShrink={1} justifyContent="flex-end">
<box
id="run-direct-footer-permission-reject-bar"
flexDirection={narrow() ? "column" : "row"}
flexShrink={0}
backgroundColor={props.theme.line}
@ -433,7 +429,6 @@ export function RunPermissionBody(props: {
</box>
<box
id="run-direct-footer-permission-actions"
flexDirection={narrow() ? "column" : "row"}
flexShrink={0}
backgroundColor={props.theme.pane}

5
packages/opencode/src/cli/cmd/run/footer.prompt.tsx
View file

@ -250,10 +250,9 @@ export function RunPromptBody(props: {
})
return (
<box id="run-direct-footer-prompt" width="100%">
<box id="run-direct-footer-input-shell" paddingTop={1} paddingBottom={1} paddingRight={2}>
<box width="100%">
<box paddingTop={1} paddingBottom={1} paddingRight={2}>
<textarea
id="run-direct-footer-composer"
width="100%"
minHeight={TEXTAREA_MIN_ROWS}
maxHeight={TEXTAREA_MAX_ROWS}

11
packages/opencode/src/cli/cmd/run/footer.question.tsx
View file

@ -268,9 +268,8 @@ export function RunQuestionBody(props: {
})
return (
<box id="run-direct-footer-question-body" width="100%" height="100%" flexDirection="column">
<box width="100%" height="100%" flexDirection="column">
<box
id="run-direct-footer-question-panel"
flexDirection="column"
gap={1}
paddingLeft={1}
@ -281,14 +280,13 @@ export function RunQuestionBody(props: {
backgroundColor={props.theme.surface}
>
<Show when={!single()}>
<box id="run-direct-footer-question-tabs" flexDirection="row" gap={1} paddingLeft={1} flexShrink={0}>
<box flexDirection="row" gap={1} paddingLeft={1} flexShrink={0}>
<For each={props.request.questions}>
{(item, index) => {
const active = () => state().tab === index()
const answered = () => (state().answers[index()]?.length ?? 0) > 0
return (
<box
id={`run-direct-footer-question-tab-${index()}`}
paddingLeft={1}
paddingRight={1}
backgroundColor={active() ? props.theme.highlight : props.theme.surface}
@ -304,7 +302,6 @@ export function RunQuestionBody(props: {
}}
</For>
<box
id="run-direct-footer-question-tab-confirm"
paddingLeft={1}
paddingRight={1}
backgroundColor={confirm() ? props.theme.highlight : props.theme.surface}
@ -382,7 +379,6 @@ export function RunQuestionBody(props: {
const hit = () => state().answers[state().tab]?.includes(item.label) ?? false
return (
<box
id={`run-direct-footer-question-option-${index()}`}
flexDirection="column"
gap={0}
onMouseOver={() => {
@ -428,7 +424,6 @@ export function RunQuestionBody(props: {
<Show when={questionCustom(props.request, state())}>
<box
id="run-direct-footer-question-option-custom"
flexDirection="column"
gap={0}
onMouseOver={() => {
@ -480,7 +475,6 @@ export function RunQuestionBody(props: {
>
<box paddingLeft={3}>
<textarea
id="run-direct-footer-question-custom"
width="100%"
minHeight={1}
maxHeight={4}
@ -518,7 +512,6 @@ export function RunQuestionBody(props: {
</box>
<box
id="run-direct-footer-question-actions"
flexDirection={narrow() ? "column" : "row"}
flexShrink={0}
gap={1}

1
packages/opencode/src/cli/cmd/run/footer.subagent.tsx
View file

@ -120,7 +120,6 @@ export function RunFooterSubagentBody(props: {
return (
<box
id="run-direct-footer-subagent"
width="100%"
height="100%"
flexDirection="column"

19
packages/opencode/src/cli/cmd/run/footer.view.tsx
View file

@ -621,7 +621,6 @@ export function RunFooterView(props: RunFooterViewProps) {
return (
<box
id="run-direct-footer-shell"
width="100%"
height="100%"
border={false}
@ -631,7 +630,7 @@ export function RunFooterView(props: RunFooterViewProps) {
padding={0}
>
<Show when={panel() || inspecting()}>
<box id="run-direct-footer-panel-spacer" width="100%" height={1} flexShrink={0} backgroundColor="transparent" />
<box width="100%" height={1} flexShrink={0} backgroundColor="transparent" />
</Show>
<Show
@ -641,7 +640,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<For each={[promptView()]}>
{() => (
<box
id="run-direct-footer-composer-frame"
width="100%"
flexShrink={0}
border={panel() || prompt() ? false : ["left"]}
@ -656,7 +654,6 @@ export function RunFooterView(props: RunFooterViewProps) {
}
>
<box
id="run-direct-footer-composer-area"
width="100%"
flexGrow={1}
paddingLeft={0}
@ -666,7 +663,7 @@ export function RunFooterView(props: RunFooterViewProps) {
backgroundColor={panel() || prompt() ? "transparent" : theme().surface}
gap={0}
>
<box id="run-direct-footer-body" width="100%" flexGrow={1} flexShrink={1} flexDirection="column">
<box width="100%" flexGrow={1} flexShrink={1} flexDirection="column">
<Switch>
<Match when={active().type === "prompt" && route().type === "composer"}>
<RunPromptBody
@ -804,7 +801,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<Show when={!panel() && menu()}>
<RunFooterMenu
id="run-direct-footer-complete"
theme={theme}
items={composer.options}
selected={composer.selected}
@ -818,7 +814,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<Show when={!panel() && !menu()}>
<box
id="run-direct-footer-statusline"
width="100%"
height={1}
flexDirection="row"
@ -827,7 +822,6 @@ export function RunFooterView(props: RunFooterViewProps) {
backgroundColor={statuslineBackground()}
>
<box
id="run-direct-footer-statusline-mode"
paddingLeft={1}
paddingRight={1}
backgroundColor={theme().statusAccent}
@ -839,7 +833,6 @@ export function RunFooterView(props: RunFooterViewProps) {
</box>
<box
id="run-direct-footer-statusline-main"
flexDirection="row"
gap={1}
flexGrow={1}
@ -850,13 +843,12 @@ export function RunFooterView(props: RunFooterViewProps) {
backgroundColor="transparent"
>
<Show when={busy() && !exiting()}>
<box id="run-direct-footer-status-spinner" flexShrink={0}>
<box flexShrink={0}>
<spinner color={spin().color} frames={spin().frames} interval={40} />
</box>
</Show>
<text
id="run-direct-footer-statusline-text"
fg={statusColor()}
wrapMode="none"
truncate
@ -874,7 +866,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<Show when={activityMeta().length > 0}>
<box
id="run-direct-footer-statusline-meta"
paddingRight={1}
backgroundColor="transparent"
flexShrink={1}
@ -888,7 +879,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<Show when={responsive().statusline.showModel && modelStatus()}>
{(info) => (
<box
id="run-direct-footer-statusline-model"
paddingRight={1}
backgroundColor="transparent"
flexShrink={0}
@ -913,7 +903,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<For each={contextHints()}>
{(hint, index) => (
<box
id={`run-direct-footer-statusline-${hint.kind}`}
paddingRight={1}
backgroundColor="transparent"
flexShrink={0}
@ -933,7 +922,6 @@ export function RunFooterView(props: RunFooterViewProps) {
<Show when={commandHint()}>
{(hint) => (
<box
id="run-direct-footer-statusline-hint"
paddingRight={1}
backgroundColor="transparent"
flexShrink={0}
@ -955,7 +943,6 @@ export function RunFooterView(props: RunFooterViewProps) {
}
>
<box
id="run-direct-footer-subagent-frame"
width="100%"
flexGrow={1}
flexShrink={1}

6
packages/opencode/src/cli/cmd/run/scrollback.surface.ts
View file

@ -34,8 +34,6 @@ type ActiveEntry = {
rendered: boolean
}
let nextId = 0
function commitMarkdownBlocks(input: {
surface: ScrollbackSurface
renderable: MarkdownRenderable
@ -152,12 +150,10 @@ export class RunScrollbackStream {
const surface = this.renderer.createScrollbackSurface({
startOnNewLine: entryFlags(commit).startOnNewLine,
})
const id = `run-scrollback-entry-${nextId++}`
const style = entryLook(commit, this.theme.entry)
const renderable =
body.type === "text"
? new TextRenderable(surface.renderContext, {
id,
content: "",
width: "100%",
wrapMode: "word",
@ -166,7 +162,6 @@ export class RunScrollbackStream {
})
: body.type === "code"
? new CodeRenderable(surface.renderContext, {
id,
content: "",
filetype: body.filetype,
syntaxStyle: entrySyntax(commit, this.theme),
@ -178,7 +173,6 @@ export class RunScrollbackStream {
treeSitterClient: this.treeSitterClient,
})
: new MarkdownRenderable(surface.renderContext, {
id,
content: "",
syntaxStyle: entrySyntax(commit, this.theme),
width: "100%",

1
packages/opencode/src/cli/cmd/run/scrollback.writer.tsx
View file

@ -322,7 +322,6 @@ export function entryWriter(input: {
export function spacerWriter(): ScrollbackWriter {
return (ctx: ScrollbackRenderContext) => ({
root: new TextRenderable(ctx.renderContext, {
id: "run-scrollback-spacer",
width: Math.max(1, Math.trunc(ctx.width)),
height: 1,
content: "",

4
packages/opencode/src/cli/cmd/run/splash.ts
View file

@ -45,8 +45,6 @@ type Cell = {
mark: "text" | "full" | "mix" | "top"
}
let id = 0
function cells(line: string): Cell[] {
const list: Cell[] = []
for (const char of line) {
@ -117,7 +115,6 @@ function write(
root.add(
new TextRenderable(ctx.renderContext, {
id: `run-direct-splash-line-${id++}`,
position: "absolute",
left: line.left,
top: line.top,
@ -246,7 +243,6 @@ function build(input: SplashWriterInput, kind: "entry" | "exit", ctx: Scrollback
}
const root = new BoxRenderable(ctx.renderContext, {
id: `run-direct-splash-${kind}-${id++}`,
position: "absolute",
left: 0,
top: 0,

70
packages/opencode/test/cli/run/footer.view.test.tsx
View file

@ -1,6 +1,6 @@
/** @jsxImportSource @opentui/solid */
import { expect, test } from "bun:test"
import { RGBA, type BoxRenderable } from "@opentui/core"
import { BoxRenderable, RGBA, type RootRenderable } from "@opentui/core"
import { testRender, useRenderer } from "@opentui/solid"
import { createSignal } from "solid-js"
import { createDefaultOpenTuiKeymap } from "@opentui/keymap/opentui"
@ -248,6 +248,45 @@ function expectPaletteList(list: BoxRenderable, selectedIndex: number) {
)
}
function child(root: BoxRenderable | RootRenderable, index: number) {
return root.getChildren()[index] as BoxRenderable
}
function boxPath(root: BoxRenderable | RootRenderable, name: string): BoxRenderable[] | undefined {
for (const item of root.getChildren()) {
if (item.constructor.name === name) return root instanceof BoxRenderable ? [root] : []
if (!(item instanceof BoxRenderable)) continue
const path = boxPath(item, name)
if (path) return root instanceof BoxRenderable ? [root, ...path] : path
}
}
function footerComposerFrame(root: BoxRenderable | RootRenderable) {
return boxPath(root, "TextareaRenderable")!.at(-5)!
}
function footerStatusline(root: BoxRenderable | RootRenderable) {
const status = (RUN_THEME_FALLBACK.footer.status as RGBA).toInts()
const accent = (RUN_THEME_FALLBACK.footer.statusAccent as RGBA).toInts()
const boxes = root.getChildren().filter((item): item is BoxRenderable => item instanceof BoxRenderable)
for (const box of boxes) {
const first = box.getChildren().find((item): item is BoxRenderable => item instanceof BoxRenderable)
if (
box.backgroundColor?.toInts().every((value, index) => value === status[index]) &&
first?.backgroundColor?.toInts().every((value, index) => value === accent[index])
)
return box
boxes.push(...box.getChildren().filter((item): item is BoxRenderable => item instanceof BoxRenderable))
}
throw new Error("Footer statusline not found")
}
function panelMenu(root: BoxRenderable | RootRenderable) {
const panel = child(child(root, 0), 0)
const content = child(panel, 0)
return child(content.getChildren().at(-1) as BoxRenderable, 0)
}
test("direct footer composer area does not adopt footer surface", async () => {
const surface = RGBA.fromHex("#123456")
const [theme, setTheme] = createSignal(RUN_THEME_FALLBACK)
@ -255,7 +294,7 @@ test("direct footer composer area does not adopt footer surface", async () => {
try {
await app.renderOnce()
const area = app.renderer.root.findDescendantById("run-direct-footer-composer-area") as BoxRenderable
const area = child(footerComposerFrame(app.renderer.root), 0)
expect(area.backgroundColor.toInts()).not.toEqual(surface.toInts())
setTheme({
@ -588,7 +627,7 @@ test("direct subagent panel renders active subagents", async () => {
try {
await app.renderOnce()
const frame = app.captureCharFrame()
const list = app.renderer.root.findDescendantById("run-direct-footer-subagent-list") as BoxRenderable
const list = panelMenu(app.renderer.root)
expect(frame).toContain("Select subagent")
expect(frame).toContain("Inspect auth flow")
@ -626,7 +665,7 @@ test("direct queued prompt panel renders pending prompt actions", async () => {
try {
await app.renderOnce()
const frame = app.captureCharFrame()
const list = app.renderer.root.findDescendantById("run-direct-footer-queued-list") as BoxRenderable
const list = panelMenu(app.renderer.root)
expect(frame).toContain("Queued prompts")
expect(frame).toContain("fix the auth test")
@ -648,12 +687,12 @@ test.skip("direct footer recreates the frame across command panel transitions",
await app.renderOnce()
for (let index = 0; index < 3; index++) {
const composerFrame = app.renderer.root.findDescendantById("run-direct-footer-composer-frame") as BoxRenderable
const composerFrame = footerComposerFrame(app.renderer.root)
app.mockInput.pressKey("p", { ctrl: true })
await app.renderOnce()
expect(app.captureCharFrame()).toContain("Commands")
expect(app.renderer.root.findDescendantById("run-direct-footer-composer-frame")).not.toBe(composerFrame)
expect(footerComposerFrame(app.renderer.root)).not.toBe(composerFrame)
app.mockInput.pressKey("c", { ctrl: true })
await app.renderOnce()
expect(app.captureCharFrame()).not.toContain("Commands")
@ -952,13 +991,14 @@ test("direct footer shows editable prompts and additional queued work while runn
const transparent = RGBA.fromValues(0, 0, 0, 0).toInts()
const tinted = (RUN_THEME_FALLBACK.footer.status as RGBA).toInts()
const accent = (RUN_THEME_FALLBACK.footer.statusAccent as RGBA).toInts()
const statusline = app.renderer.root.findDescendantById("run-direct-footer-statusline") as BoxRenderable
const mode = app.renderer.root.findDescendantById("run-direct-footer-statusline-mode") as BoxRenderable
const main = app.renderer.root.findDescendantById("run-direct-footer-statusline-main") as BoxRenderable
const spinner = app.renderer.root.findDescendantById("run-direct-footer-status-spinner")
const model = app.renderer.root.findDescendantById("run-direct-footer-statusline-model") as BoxRenderable
const queued = app.renderer.root.findDescendantById("run-direct-footer-statusline-queued") as BoxRenderable
const hint = app.renderer.root.findDescendantById("run-direct-footer-statusline-hint") as BoxRenderable
const statusline = footerStatusline(app.renderer.root)
const statusItems = statusline.getChildren().filter((item): item is BoxRenderable => item instanceof BoxRenderable)
const mode = statusItems[0]
const main = statusItems[1]
const spinner = main.getChildren()[0]
const model = statusItems[2]
const queued = statusItems[3]
const hint = statusItems.at(-1)!
expect(spinner).toBeDefined()
expect(frame).toContain("a-model-name-long-enough-to-force-responsive-truncation")
@ -1276,7 +1316,7 @@ test("direct model panel renders current model selector", async () => {
try {
await app.renderOnce()
const frame = app.captureCharFrame()
const list = app.renderer.root.findDescendantById("run-direct-footer-model-list") as BoxRenderable
const list = panelMenu(app.renderer.root)
expect(frame).toContain("Select model")
expect(frame).toContain("Search")
@ -1319,7 +1359,7 @@ test("direct variant panel renders current variant selector", async () => {
try {
await app.renderOnce()
const frame = app.captureCharFrame()
const list = app.renderer.root.findDescendantById("run-direct-footer-variant-list") as BoxRenderable
const list = panelMenu(app.renderer.root)
expect(frame).toContain("Select variant")
expect(frame).toContain("Default")