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

fix: stabilize v2 runtime behavior

Browse source
This commit is contained in:
Dax Raad 2026-06-26 20:56:36 -04:00
commit 655adbf46e
35 changed files with 742 additions and 425 deletions
Download patch file Download diff file Expand all files Collapse all files

53
packages/tui/src/app.tsx
View file

@ -135,6 +135,7 @@ const appBindingCommands = [
export type TuiInput = {
client: OpencodeClient
reload?: () => Promise<OpencodeClient>
args: Args
config: TuiConfig.Resolved
onSnapshot?: () => Promise<string[]>
@ -289,7 +290,7 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
>
<TuiConfigProvider config={input.config}>
<PluginRuntimeProvider value={pluginRuntime}>
<SDKProvider client={input.client}>
<SDKProvider client={input.client} reload={input.reload}>
<ProjectProvider>
<SyncProvider>
<DataProvider>
@ -360,6 +361,7 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
const keymap = useOpencodeKeymap()
const event = useEvent()
const sdk = useSDK()
const reload = sdk.reload
const toast = useToast()
const themeState = useTheme()
const { theme, mode, setMode, locked, lock, unlock } = themeState
@ -744,6 +746,33 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
},
category: "System",
},
...(reload
? [
{
name: "server.reload",
title: "Reload server",
slashName: "reload",
slashAliases: ["restart"],
run: async () => {
dialog.clear()
toast.show({
variant: "info",
message: "Reloading server...",
duration: 30000,
})
await reload()
.then(() =>
toast.show({
variant: "success",
message: "Server reloaded",
}),
)
.catch(toast.error)
},
category: "System",
},
]
: []),
{
name: "theme.switch",
title: "Switch theme",
@ -940,16 +969,16 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
event.on("tui.command.execute", (evt, { workspace }) => {
if (workspace !== project.workspace.current()) return
keymap.dispatchCommand(evt.properties.command)
keymap.dispatchCommand(evt.data.command)
})
event.on("tui.toast.show", (evt, { workspace }) => {
if (workspace !== project.workspace.current()) return
toast.show({
title: evt.properties.title,
message: evt.properties.message,
variant: evt.properties.variant,
duration: evt.properties.duration,
title: evt.data.title,
message: evt.data.message,
variant: evt.data.variant,
duration: evt.data.duration,
})
})
@ -957,12 +986,12 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
if (workspace !== project.workspace.current()) return
route.navigate({
type: "session",
sessionID: evt.properties.sessionID,
sessionID: evt.data.sessionID,
})
})
event.on("session.deleted", (evt) => {
if (route.data.type === "session" && route.data.sessionID === evt.properties.info.id) {
if (route.data.type === "session" && route.data.sessionID === evt.data.info.id) {
route.navigate({ type: "home" })
toast.show({
variant: "info",
@ -973,7 +1002,7 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
event.on("session.error", (evt, { workspace }) => {
if (workspace !== project.workspace.current()) return
const error = evt.properties.error
const error = evt.data.error
if (error && typeof error === "object" && error.name === "MessageAbortedError") return
const message = errorMessage(error)
@ -986,7 +1015,7 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
event.on("installation.update-available", async (evt) => {
console.log("installation.update-available", evt)
const version = evt.properties.version
const version = evt.data.version
const skipped = kv.get("skipped_version")
if (skipped && !isVersionGreater(version, skipped)) return
@ -1085,8 +1114,8 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
<Show when={!startup.skipInitialLoading}>
<StartupLoading ready={ready} />
</Show>
<Show when={data.connection.status() === "reconnecting"}>
<Reconnecting attempt={data.connection.attempt()} error={data.connection.error()} />
<Show when={sdk.connection.status() === "reconnecting"}>
<Reconnecting attempt={sdk.connection.attempt()} error={sdk.connection.error()} />
</Show>
</box>
)

15
packages/tui/src/component/prompt/index.tsx
View file

@ -158,6 +158,12 @@ export function Prompt(props: PromptProps) {
const dialog = useDialog()
const toast = useToast()
const status = createMemo(() => data.session.status(props.sessionID ?? ""))
const activeSubagents = createMemo(() =>
data.session
.list()
.filter((session) => session.parentID === props.sessionID && data.session.status(session.id) === "running")
.length,
)
const history = usePromptHistory()
const stash = usePromptStash()
const keymap = useOpencodeKeymap()
@ -235,7 +241,7 @@ export function Prompt(props: PromptProps) {
event.on("tui.prompt.append", (evt, { workspace }) => {
if (workspace !== project.workspace.current()) return
if (!input || input.isDestroyed) return
input.insertText(evt.properties.text)
input.insertText(evt.data.text)
setTimeout(() => {
// setTimeout is a workaround and needs to be addressed properly
if (!input || input.isDestroyed) return
@ -1534,6 +1540,13 @@ export function Prompt(props: PromptProps) {
<spinner color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
</Show>
</box>
<Show when={activeSubagents()}>
{(count) => (
<Spinner color={theme.textMuted}>
{count()} active subagent{count() === 1 ? "" : "s"}
</Spinner>
)}
</Show>
<text fg={store.interrupt > 0 ? theme.primary : theme.text}>
esc{" "}
<span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>

82
packages/tui/src/context/data.tsx
View file

@ -21,15 +21,10 @@ import type {
import { createStore, produce } from "solid-js/store"
import { createSimpleContext } from "./helper"
import { useSDK } from "./sdk"
import { createSignal, onCleanup, onMount } from "solid-js"
import { createGlobalEmitter } from "@solid-primitives/event-bus"
import { createSignal, onCleanup } from "solid-js"
export type DataConnectionStatus = "connecting" | "connected" | "reconnecting"
export type DataSessionStatus = "idle" | "running"
export type DataEvent = V2Event
type DataEventMap = { [T in DataEvent["type"]]: Extract<DataEvent, { type: T }> }
type LocationData = {
agent?: AgentV2Info[]
command?: CommandV2Info[]
@ -41,11 +36,6 @@ type LocationData = {
}
type Data = {
connection: {
status: DataConnectionStatus
attempt: number
error?: string
}
session: {
info: Record<string, SessionV2Info>
status: Record<string, DataSessionStatus>
@ -71,10 +61,6 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
name: "Data",
init: () => {
const [store, setStore] = createStore<Data>({
connection: {
status: "connecting",
attempt: 0,
},
session: {
info: {},
status: {},
@ -89,7 +75,6 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
})
const sdk = useSDK()
const events = createGlobalEmitter<DataEventMap>()
const [defaultLocation, setDefaultLocation] = createSignal<LocationRef>({
directory: process.cwd(),
})
@ -151,6 +136,9 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
function handleEvent(event: V2Event) {
switch (event.type) {
case "session.created":
void result.session.refresh(event.data.sessionID)
break
case "catalog.updated":
void Promise.all([
result.location.model.refresh(event.location),
@ -477,21 +465,20 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
])
break
}
events.emit(event.type, event)
}
const result = {
on: events.on,
listen: events.listen,
on: sdk.event.on,
listen: sdk.event.listen,
connection: {
status() {
return store.connection.status
return sdk.connection.status()
},
attempt() {
return store.connection.attempt
return sdk.connection.attempt()
},
error() {
return store.connection.error
return sdk.connection.error()
},
},
session: {
@ -687,52 +674,13 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
console.error("Failed to refresh default location data", failure.reason)
}
onMount(() => {
const controller = new AbortController()
onCleanup(() => controller.abort())
void (async () => {
while (!controller.signal.aborted) {
const error = await (async () => {
const events = await sdk.client.v2.event.subscribe({
signal: controller.signal,
sseMaxRetryAttempts: 0,
throwOnError: true,
})
const stream = events.stream[Symbol.asyncIterator]()
const first = await stream.next()
if (first.done) return new Error("Event stream disconnected")
setStore("connection", { status: "connected", attempt: 0, error: undefined })
handleEvent(first.value)
await bootstrap()
while (!controller.signal.aborted) {
const event = await stream.next()
if (event.done) return new Error("Event stream disconnected")
handleEvent(event.value)
}
})().catch((error) => error)
if (controller.signal.aborted) return
setStore("connection", {
status: "reconnecting",
attempt: store.connection.status === "connected" ? 1 : store.connection.attempt + 1,
error: error instanceof Error ? error.message : String(error),
})
await wait(250, controller.signal)
}
})()
})
onCleanup(
sdk.event.listen(({ details }) => {
handleEvent(details)
if (details.type === "server.connected") void bootstrap()
}),
)
return result
},
})
function wait(delay: number, signal: AbortSignal) {
return new Promise<void>((resolve) => {
const timer = setTimeout(done, delay)
signal.addEventListener("abort", done, { once: true })
function done() {
clearTimeout(timer)
signal.removeEventListener("abort", done)
resolve()
}
})
}

24
packages/tui/src/context/event.ts
View file

@ -1,31 +1,27 @@
import type { Event } from "@opencode-ai/sdk/v2"
import type { V2Event } from "@opencode-ai/sdk/v2"
import { useSDK } from "./sdk"
type EventMetadata = {
directory: string
directory: string | undefined
workspace: string | undefined
}
export function useEvent() {
const sdk = useSDK()
function subscribe(handler: (event: Event, metadata: EventMetadata) => void) {
return sdk.event.on("event", (event) => {
if (event.payload.type === "sync") {
return
}
handler(event.payload, { directory: event.directory, workspace: event.workspace })
function subscribe(handler: (event: V2Event, metadata: EventMetadata) => void) {
return sdk.event.listen(({ details }) => {
if (details.type === "server.connected") return
handler(details, { directory: details.location?.directory, workspace: details.location?.workspaceID })
})
}
function on<T extends Event["type"]>(
function on<T extends V2Event["type"]>(
type: T,
handler: (event: Extract<Event, { type: T }>, metadata: EventMetadata) => void,
handler: (event: Extract<V2Event, { type: T }>, metadata: EventMetadata) => void,
) {
return subscribe((event: Event, metadata: EventMetadata) => {
if (event.type !== type) return
handler(event as Extract<Event, { type: T }>, metadata)
return sdk.event.on(type, (event) => {
handler(event, { directory: event.location?.directory, workspace: event.location?.workspaceID })
})
}

2
packages/tui/src/context/local.tsx
View file

@ -474,7 +474,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
}
event.on("session.deleted", (evt) => {
prune(evt.properties.info.id)
prune(evt.data.info.id)
})
return {

12
packages/tui/src/context/project.tsx
View file

@ -1,4 +1,4 @@
import { batch } from "solid-js"
import { batch, onCleanup } from "solid-js"
import type { Path, Workspace } from "@opencode-ai/sdk/v2"
import { createStore, reconcile } from "solid-js/store"
import { createSimpleContext } from "./helper"
@ -67,11 +67,11 @@ export const { use: useProject, provider: ProjectProvider } = createSimpleContex
})
}
sdk.event.on("event", (event) => {
if (event.payload.type === "workspace.status") {
setStore("workspace", "status", event.payload.properties.workspaceID, event.payload.properties.status)
}
})
onCleanup(
sdk.event.on("workspace.status", (event) => {
setStore("workspace", "status", event.data.workspaceID, event.data.status)
}),
)
return {
data: store,

194
packages/tui/src/context/sdk.tsx
View file

@ -1,89 +1,145 @@
import type { GlobalEvent, OpencodeClient } from "@opencode-ai/sdk/v2"
import { Flag } from "@opencode-ai/core/flag/flag"
import type { OpencodeClient, V2Event } from "@opencode-ai/sdk/v2"
import { createGlobalEmitter } from "@solid-primitives/event-bus"
import { onCleanup, onMount } from "solid-js"
import { createStore } from "solid-js/store"
import { createSimpleContext } from "./helper"
import { batch, onCleanup, onMount } from "solid-js"
export type SDKConnectionStatus = "connecting" | "connected" | "reconnecting"
type SDKEventMap = { [Type in V2Event["type"]]: Extract<V2Event, { type: Type }> }
const connectTimeout = 2_000
export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
name: "SDK",
init: (props: { client: OpencodeClient }) => {
init: (props: { client: OpencodeClient; reload?: () => Promise<OpencodeClient> }) => {
const abort = new AbortController()
const handlers = new Set<(event: GlobalEvent) => void>()
const emitter = {
emit(_type: "event", event: GlobalEvent) {
for (const handler of handlers) handler(event)
},
on(_type: "event", handler: (event: GlobalEvent) => void) {
handlers.add(handler)
return () => {
handlers.delete(handler)
}
},
}
let client = props.client
const events = createGlobalEmitter<SDKEventMap>()
const [connection, setConnection] = createStore<{
status: SDKConnectionStatus
attempt: number
error?: string
}>({
status: "connecting",
attempt: 0,
})
let stream: AbortController | undefined
let pending: Promise<void> | undefined
let queue: GlobalEvent[] = []
let timer: Timer | undefined
let last = 0
const retryDelay = 1000
const maxRetryDelay = 30000
const flush = () => {
if (queue.length === 0) return
const events = queue
queue = []
timer = undefined
last = Date.now()
batch(() => {
for (const event of events) emitter.emit("event", event)
function start() {
stream?.abort()
const controller = new AbortController()
const current = client
let connected!: () => void
const ready = new Promise<void>((resolve) => {
connected = resolve
})
}
const handleEvent = (event: GlobalEvent) => {
queue.push(event)
const elapsed = Date.now() - last
if (timer) return
if (elapsed < 16) {
timer = setTimeout(flush, 16)
return
}
flush()
}
onMount(() => {
stream = controller
void (async () => {
let attempt = 0
while (!abort.signal.aborted) {
const events = await props.client.global.event({
signal: abort.signal,
sseMaxRetryAttempts: 0,
})
if (Flag.OPENCODE_EXPERIMENTAL_WORKSPACES) await props.client.sync.start().catch(() => {})
for await (const event of events.stream) {
if (abort.signal.aborted) break
handleEvent(event)
}
if (timer) clearTimeout(timer)
if (queue.length > 0) flush()
while (!abort.signal.aborted && !controller.signal.aborted) {
const connection = new AbortController()
const cancel = () => connection.abort(controller.signal.reason)
const timeout = setTimeout(() => connection.abort(new Error("Timed out connecting to server")), connectTimeout)
controller.signal.addEventListener("abort", cancel, { once: true })
const error = await (async () => {
const response = await current.v2.event.subscribe({
signal: connection.signal,
sseMaxRetryAttempts: 0,
throwOnError: true,
})
const iterator = response.stream[Symbol.asyncIterator]()
const first = await iterator.next()
if (abort.signal.aborted || controller.signal.aborted) return
if (first.done)
return connection.signal.reason instanceof Error
? connection.signal.reason
: new Error("Event stream disconnected")
clearTimeout(timeout)
attempt = 0
setConnection({ status: "connected", attempt: 0, error: undefined })
events.emit(first.value.type, first.value)
connected()
while (!abort.signal.aborted && !controller.signal.aborted) {
const event = await iterator.next()
if (abort.signal.aborted || controller.signal.aborted) return
if (event.done) return new Error("Event stream disconnected")
events.emit(event.value.type, event.value)
}
})()
.catch((error) => error)
.finally(() => {
clearTimeout(timeout)
controller.signal.removeEventListener("abort", cancel)
})
if (abort.signal.aborted || controller.signal.aborted) return
attempt += 1
if (abort.signal.aborted) break
await new Promise((resolve) =>
setTimeout(resolve, Math.min(retryDelay * 2 ** (attempt - 1), maxRetryDelay)),
)
setConnection({
status: "reconnecting",
attempt,
error: error instanceof Error ? error.message : String(error),
})
await wait(250, controller.signal)
}
})().catch(() => {})
})
})()
return ready
}
const reload = props.reload
? () => {
if (pending) return pending
pending = Promise.resolve()
.then(props.reload)
.then(async (next) => {
client = next
if (!abort.signal.aborted) await start()
})
.finally(() => {
pending = undefined
})
return pending
}
: undefined
onMount(() => void start())
onCleanup(() => {
abort.abort()
if (timer) clearTimeout(timer)
handlers.clear()
stream?.abort()
events.clear()
})
return {
client: props.client,
event: emitter,
get client() {
return client
},
event: {
on: events.on,
listen: events.listen,
},
connection: {
status() {
return connection.status
},
attempt() {
return connection.attempt
},
error() {
return connection.error
},
},
reload,
}
},
})
function wait(delay: number, signal: AbortSignal) {
return new Promise<void>((resolve) => {
const timer = setTimeout(done, delay)
signal.addEventListener("abort", done, { once: true })
function done() {
clearTimeout(timer)
signal.removeEventListener("abort", done)
resolve()
}
})
}

44
packages/tui/src/feature-plugins/system/notifications.ts
View file

@ -1,10 +1,10 @@
import type { Event } from "@opencode-ai/sdk/v2"
import type { V2Event } from "@opencode-ai/sdk/v2"
import type { TuiAttentionSoundName, TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
import type { BuiltinTuiPlugin } from "../builtins"
const id = "internal:notifications"
type SessionError = Extract<Event, { type: "session.error" }>["properties"]["error"]
type SessionError = Extract<V2Event, { type: "session.error" }>["data"]["error"]
function notify(api: TuiPluginApi, sessionID: string | undefined, message: string, sound: TuiAttentionSoundName) {
const session = sessionID ? api.state.session.get(sessionID) : undefined
@ -33,27 +33,27 @@ const tui: TuiPlugin = async (api) => {
const permissions = new Set<string>()
api.event.on("question.asked", (event) => {
if (questions.has(event.properties.id)) return
questions.add(event.properties.id)
notify(api, event.properties.sessionID, "Question needs input", "question")
if (questions.has(event.data.id)) return
questions.add(event.data.id)
notify(api, event.data.sessionID, "Question needs input", "question")
})
api.event.on("question.replied", (event) => {
questions.delete(event.properties.requestID)
questions.delete(event.data.requestID)
})
api.event.on("question.rejected", (event) => {
questions.delete(event.properties.requestID)
questions.delete(event.data.requestID)
})
api.event.on("permission.asked", (event) => {
if (permissions.has(event.properties.id)) return
permissions.add(event.properties.id)
notify(api, event.properties.sessionID, "Permission needs input", "permission")
if (permissions.has(event.data.id)) return
permissions.add(event.data.id)
notify(api, event.data.sessionID, "Permission needs input", "permission")
})
api.event.on("permission.replied", (event) => {
permissions.delete(event.properties.requestID)
permissions.delete(event.data.requestID)
})
const started = (sessionID: string) => {
@ -74,18 +74,18 @@ const tui: TuiPlugin = async (api) => {
notify(api, sessionID, "Session done", session?.parentID ? "subagent_done" : "done")
}
api.event.on("session.next.prompted", (event) => started(event.properties.sessionID))
api.event.on("session.next.shell.started", (event) => started(event.properties.sessionID))
api.event.on("session.next.step.started", (event) => started(event.properties.sessionID))
api.event.on("session.next.retried", (event) => started(event.properties.sessionID))
api.event.on("session.next.compaction.started", (event) => started(event.properties.sessionID))
api.event.on("session.next.shell.ended", (event) => ended(event.properties.sessionID))
api.event.on("session.next.prompted", (event) => started(event.data.sessionID))
api.event.on("session.next.shell.started", (event) => started(event.data.sessionID))
api.event.on("session.next.step.started", (event) => started(event.data.sessionID))
api.event.on("session.next.retried", (event) => started(event.data.sessionID))
api.event.on("session.next.compaction.started", (event) => started(event.data.sessionID))
api.event.on("session.next.shell.ended", (event) => ended(event.data.sessionID))
api.event.on("session.next.step.ended", (event) => {
if (event.properties.finish === "tool-calls") return
ended(event.properties.sessionID)
if (event.data.finish === "tool-calls") return
ended(event.data.sessionID)
})
api.event.on("session.next.step.failed", (event) => {
const sessionID = event.properties.sessionID
const sessionID = event.data.sessionID
if (!active.has(sessionID)) return
errored.add(sessionID)
notify(api, sessionID, "Session error", "error")
@ -93,11 +93,11 @@ const tui: TuiPlugin = async (api) => {
})
api.event.on("session.error", (event) => {
const sessionID = event.properties.sessionID
const sessionID = event.data.sessionID
if (!sessionID) return
if (!active.has(sessionID)) return
errored.add(sessionID)
notify(api, sessionID, sessionErrorMessage(event.properties.error), "error")
notify(api, sessionID, sessionErrorMessage(event.data.error), "error")
})
}

65
packages/tui/src/routes/session/index.tsx
View file

@ -1091,32 +1091,15 @@ function AssistantFooter(props: { message: SessionMessageAssistant }) {
props.message.time.completed ? props.message.time.completed - props.message.time.created : 0,
)
return (
<>
<Show when={props.message.error}>
<box
border={["left"]}
paddingTop={1}
paddingBottom={1}
paddingLeft={2}
backgroundColor={theme.backgroundPanel}
customBorderChars={SplitBorder.customBorderChars}
borderColor={theme.error}
>
<text fg={theme.textMuted}>{errorMessage(props.message.error)}</text>
</box>
</Show>
<box paddingLeft={3} marginTop={props.message.error ? 1 : 0}>
<text>
<span style={{ fg: props.message.error ? theme.textMuted : local.agent.color(props.message.agent) }}>
{Locale.titlecase(props.message.agent)}
</span>
<span style={{ fg: theme.textMuted }}> · {model()}</span>
<Show when={duration()}>
<span style={{ fg: theme.textMuted }}> · {Locale.duration(duration())}</span>
</Show>
</text>
</box>
</>
<box paddingLeft={3}>
<text>
<span style={{ fg: local.agent.color(props.message.agent) }}>{Locale.titlecase(props.message.agent)}</span>
<span style={{ fg: theme.textMuted }}> · {model()}</span>
<Show when={duration()}>
<span style={{ fg: theme.textMuted }}> · {Locale.duration(duration())}</span>
</Show>
</text>
</box>
)
}
@ -1868,13 +1851,19 @@ function Shell(props: ToolProps) {
const color = createMemo(() => (permission() ? theme.warning : theme.text))
const isRunning = createMemo(() => props.part.state.status === "running")
const command = createMemo(() => stringValue(props.input.command))
const output = createMemo(() => stripAnsi(stringValue(props.metadata.output)?.trim() ?? ""))
const output = createMemo(() => {
if (props.part.state.status === "pending") return ""
const content = props.part.state.content[0]
return stripAnsi(content?.type === "text" ? content.text.trim() : "")
})
const [expanded, setExpanded] = createSignal(false)
const maxLines = 10
const maxChars = createMemo(() => maxLines * Math.max(20, ctx.width - 6))
const collapsed = createMemo(() => collapseToolOutput(output(), maxLines, maxChars()))
const input = createMemo(() => (command() ? `$ ${command()}` : ""))
const content = createMemo(() => [input(), output()].filter(Boolean).join("\n\n"))
const collapsed = createMemo(() => collapseToolOutput(content(), maxLines, maxChars()))
const limited = createMemo(() => {
if (expanded() || !collapsed().overflow) return output()
if (expanded() || !collapsed().overflow) return content()
return collapsed().output
})
@ -1882,13 +1871,21 @@ function Shell(props: ToolProps) {
<BlockTool part={props.part} onClick={collapsed().overflow ? () => setExpanded((prev) => !prev) : undefined}>
<box gap={1}>
<Show when={command()} fallback={<Spinner color={color()}>Writing command...</Spinner>}>
<Show when={isRunning()} fallback={<text fg={permission() ? theme.warning : theme.textMuted}>$ {command()}</text>}>
<Spinner color={color()}>{command()}</Spinner>
<Show
when={isRunning()}
fallback={
<text>
<span style={{ fg: theme.text }}>{limited().slice(0, input().length)}</span>
<span style={{ fg: theme.textMuted }}>{limited().slice(input().length)}</span>
</text>
}
>
<Spinner color={color()}>
<span style={{ fg: theme.text }}>{limited().slice(0, input().length)}</span>
<span style={{ fg: theme.textMuted }}>{limited().slice(input().length)}</span>
</Spinner>
</Show>
</Show>
<Show when={output()}>
<text fg={theme.text}>{limited()}</text>
</Show>
<Show when={collapsed().overflow}>
<text fg={theme.textMuted}>{expanded() ? "Click to collapse" : "Click to expand"}</text>
</Show>

5
packages/tui/src/routes/session/rows.ts
View file

@ -145,6 +145,7 @@ export function createSessionRows(sessionID: Accessor<string>) {
export function reduceSessionRows(messages: SessionMessage[]) {
return messages.reduce<SessionRow[]>((rows, message) => {
if (message.type !== "assistant") {
completePrevious(rows)
rows.push({ type: "message", messageID: message.id })
return rows
}
@ -152,8 +153,10 @@ export function reduceSessionRows(messages: SessionMessage[]) {
if ((part.type === "text" || part.type === "reasoning") && !part.text.trim()) return
append(rows, { messageID: message.id, partID: part.id }, part)
})
if ((message.finish && !["tool-calls", "unknown"].includes(message.finish)) || message.error)
if ((message.finish && !["tool-calls", "unknown"].includes(message.finish)) || message.error) {
completePrevious(rows)
rows.push({ type: "assistant-footer", messageID: message.id })
}
return rows
}, [])
}

6
packages/tui/src/util/collapse-tool-output.ts
View file

@ -4,7 +4,9 @@ export function collapseToolOutput(output: string, maxLines: number, maxChars: n
return { output, overflow: false }
}
const preview = lines.slice(0, maxLines).join("\n")
const visible = lines.slice(0, maxLines)
if (lines.length > maxLines && visible.length > 0) visible[visible.length - 1] += "…"
const preview = visible.join("\n")
if (Array.from(preview).length > maxChars) {
return {
output:
@ -15,5 +17,5 @@ export function collapseToolOutput(output: string, maxLines: number, maxChars: n
}
}
return { output: [...lines.slice(0, maxLines), "…"].join("\n"), overflow: true }
return { output: preview, overflow: true }
}