feat(tui): finalize btw side-query command with caching, global shortcut, centering, layout and fallback fixes

Author: Integralist

packages/opencode/src/command/index.ts

@@ -46,6 +46,7 @@ export function hints(template: string) {
 exportconstDefault={
 INIT: "init",
 REVIEW: "review",
+BTW: "btw",
 }asconst
 
 exportinterfaceInterface{
@@ -86,6 +87,15 @@ const layer = Layer.effect(
 subtask: true,
 hints: hints(PROMPT_REVIEW),
 }
+commands[Default.BTW]={
+name: Default.BTW,
+description: "ask a quick, side question without cluttering history",
+source: "command",
+gettemplate(){
+return"$ARGUMENTS"
+},
+hints: ["$ARGUMENTS"],
+}
 
 for(const[name,command]ofObject.entries(cfg.command??{})){
 commands[name]={

packages/tui/src/component/dialog-btw.tsx

@@ -0,0 +1,375 @@
+import{ScrollBoxRenderable,TextAttributes}from"@opentui/core"
+import{useTheme}from"../context/theme"
+import{useDialog}from"../ui/dialog"
+import{useSync}from"../context/sync"
+import{useSDK}from"../context/sdk"
+import{useTuiConfig}from"../config"
+import{getScrollAcceleration}from"../util/scroll"
+import{Spinner}from"./spinner"
+import{createMemo,createSignal,onMount,For,Show,onCleanup}from"solid-js"
+import{useBindings}from"../keymap"
+import{useLocal}from"../context/local"
+
+exporttypeDialogBtwProps={
+question?: string
+sessionIDOverride?: string
+parentSessionID?: string
+}
+
+// Persistent states for /btw
+const[lastBtwState,setLastBtwState]=createSignal<{
+question: string
+sessionID: string
+interrupted?: boolean
+modelLabel?: string
+}|null>(null)
+
+const[isBtwVisible,setIsBtwVisible]=createSignal(false)
+
+export{lastBtwState,isBtwVisible}
+
+exportfunctiontoggleBtwDialog(dialog: ReturnType<typeofuseDialog>,parentSessionID?: string){
+if(isBtwVisible()){
+dialog.clear()
+}else{
+constcurrent=lastBtwState()
+dialog.replace(()=>(
+<DialogBtw
+question={current?.question}
+sessionIDOverride={current?.sessionID}
+parentSessionID={parentSessionID}
+/>
+))
+}
+}
+
+exportfunctionDialogBtw(props: DialogBtwProps){
+constdialog=useDialog()
+constsync=useSync()
+constsdk=useSDK()
+const{ theme }=useTheme()
+consttuiConfig=useTuiConfig()
+constscrollAcceleration=createMemo(()=>getScrollAcceleration(tuiConfig))
+
+const[sessionID,setSessionID]=createSignal<string>("")
+const[error,setError]=createSignal<string>("")
+const[loading,setLoading]=createSignal(true)
+constisInterrupted=createMemo(()=>!!lastBtwState()?.interrupted)
+const[modelLabel,setModelLabel]=createSignal<string>("")
+constlocal=useLocal()
+letscrollBox: ScrollBoxRenderable|undefined
+
+onMount(async()=>{
+dialog.setSize("large")
+dialog.setCenter(true)
+setIsBtwVisible(true)
+
+onCleanup(()=>{
+setIsBtwVisible(false)
+})
+
+if(props.sessionIDOverride){
+setSessionID(props.sessionIDOverride)
+setModelLabel(lastBtwState()?.modelLabel||"")
+setLoading(false)
+return
+}
+
+if(!props.question){
+setLoading(false)
+return
+}
+
+try{
+// 1. Find the current session to inherit directory & workspace
+constparentSession=props.parentSessionID ? sync.session.get(props.parentSessionID) : undefined
+constdirectory=parentSession?.directory
+constworkspaceID=parentSession?.workspaceID
+
+// We will find a suitable agent and model
+constcurrentModel=local.model.current()
+constagentName=parentSession?.agent??local.agent.current()?.name??"opencode"
+constmodel=parentSession?.model??(currentModel ? {
+providerID: currentModel.providerID,
+id: currentModel.modelID,
+variant: local.model.variant.current(),
+} : {
+providerID: "opencode",
+id: "gemini-2.5-flash",
+})
+
+constlabel=`${model.id}${model.variant ? ` (${model.variant})` : ""}`
+setModelLabel(label)
+
+// Initialize global state early so it can be marked interrupted even before session creation
+setLastBtwState({
+question: props.question,
+sessionID: "",
+interrupted: false,
+modelLabel: label,
+})
+
+// 2. Create the child/side-session
+constres=awaitsdk.client.session.create({
+ directory,
+workspace: workspaceID,
+agent: agentName,
+parentID: props.parentSessionID,
+model: {
+providerID: model.providerID,
+id: model.id,
+variant: model.variant,
+},
+})
+
+if(res.error){
+setError("Failed to create side query session: "+JSON.stringify(res.error))
+setLoading(false)
+return
+}
+
+if(lastBtwState()?.interrupted){
+// The user pressed ESC before the session was even fully created.
+// Abort the newly created session and don't proceed with prompting.
+sdk.client.session.abort({sessionID: res.data.id}).catch(()=>{})
+setLastBtwState(prev=>prev ? { ...prev,sessionID: res.data.id} : null)
+setLoading(false)
+return
+}
+
+constnewSessionID=res.data.id
+setSessionID(newSessionID)
+
+// Update global/last BTW state with the real sessionID!
+setLastBtwState(prev=>prev ? { ...prev,sessionID: newSessionID} : null)
+
+// 3. Send the prompt to stream response!
+awaitsdk.client.session.prompt({
+sessionID: newSessionID,
+agent: agentName,
+model: {
+providerID: model.providerID,
+modelID: model.id,
+},
+variant: model.variant,
+parts: [
+{
+type: "text",
+text: props.question,
+}
+],
+},{throwOnError: true})
+
+setLoading(false)
+}catch(e: any){
+setError(e.message||String(e))
+setLoading(false)
+}
+})
+
+// Get assistant messages & parts reactively
+constmessages=createMemo(()=>{
+constsId=sessionID()
+if(!sId)return[]
+returnsync.data.message[sId]??[]
+})
+
+constassistantMessageText=createMemo(()=>{
+constmsgs=messages()
+constassistantMsgs=msgs.filter(m=>m.role==="assistant")
+letfullText=""
+for(constmsgofassistantMsgs){
+constparts=sync.data.part[msg.id]??[]
+for(constpartofparts){
+if(part.type==="text"){
+fullText+=part.text
+}
+}
+}
+returnfullText
+})
+
+// Check if AI is currently streaming/generating response
+constisStreaming=createMemo(()=>{
+constsId=sessionID()
+if(!sId)return!props.sessionIDOverride
+conststatus=sync.data.session_status[sId]
+returnstatus?.type==="busy"||(assistantMessageText()===""&&!props.sessionIDOverride)
+})
+
+// Scroll bindings for the dialog so user can read with keys!
+useBindings(()=>({
+priority: 100,
+bindings: [
+{
+key: "escape",
+desc: "Interrupt and close BTW Side Query",
+group: "Dialog",
+cmd: ()=>{
+conststreaming=isStreaming()
+setLastBtwState(prev=>prev ? { ...prev,interrupted: prev.interrupted||streaming} : null)
+if(sessionID()){
+sdk.client.session.abort({sessionID: sessionID()}).catch(()=>{})
+}
+dialog.clear()
+},
+},
+{
+key: "ctrl+b",
+desc: "Hide BTW Side Query (Keep running)",
+group: "Dialog",
+cmd: ()=>dialog.clear(),
+},
+{
+key: "up",
+desc: "Scroll up",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(-1),
+},
+{
+key: "down",
+desc: "Scroll down",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(1),
+},
+{
+key: "k",
+desc: "Scroll up",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(-1),
+},
+{
+key: "j",
+desc: "Scroll down",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(1),
+},
+{
+key: "pageup",
+desc: "Scroll page up",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(-10),
+},
+{
+key: "pagedown",
+desc: "Scroll page down",
+group: "Dialog",
+cmd: ()=>scrollBox?.scrollBy(10),
+},
+]
+}))
+
+return(
+<boxpaddingLeft={2}paddingRight={2}gap={1}minHeight={15}>
+{/* Header */}
+<boxflexDirection="row"justifyContent="space-between"border={["bottom"]}borderColor={theme.border}paddingBottom={1}>
+<boxflexDirection="row"gap={1}alignItems="flex-end">
+<textattributes={TextAttributes.BOLD}fg={theme.accent}>
+ [BTW]
+</text>
+<textattributes={TextAttributes.BOLD}fg={theme.text}>
+ Quick Side Query
+</text>
+<Showwhen={modelLabel()}>
+<boxpaddingLeft={2}>
+<textfg={theme.textMuted}attributes={TextAttributes.DIM}>
+ Agent: {modelLabel()}
+</text>
+</box>
+</Show>
+</box>
+<textfg={theme.textMuted}onMouseUp={()=>dialog.clear()}>
+ esc to close
+</text>
+</box>
+
+{/* Guide screen when no query exists */}
+<Showwhen={!props.question&&!props.sessionIDOverride&&!lastBtwState()}>
+<boxpadding={2}gap={1}flexGrow={1}justifyContent="center"alignItems="center">
+<textfg={theme.textMuted}wrapMode="word"attributes={TextAttributes.ITALIC}>
+ No previous side query.
+</text>
+<textfg={theme.textMuted}wrapMode="word">
+ Type "/btw &lt;question&gt;" in the main input to ask one!
+</text>
+</box>
+</Show>
+
+{/* Question panel */}
+<Showwhen={props.question||props.sessionIDOverride||lastBtwState()}>
+<boxpaddingLeft={1}paddingRight={1}paddingTop={1}paddingBottom={1}backgroundColor={theme.backgroundElement}>
+<textfg={theme.textMuted}attributes={TextAttributes.ITALIC}wrapMode="word">
+ Q: {props.question??lastBtwState()?.question}
+</text>
+</box>
+</Show>
+
+{/* Response content */}
+<Showwhen={error()}>
+<boxpadding={1}>
+<textfg={theme.error}wrapMode="word">{error()}</text>
+</box>
+</Show>
+
+<Showwhen={!error()&&(props.question||props.sessionIDOverride||lastBtwState())}>
+<boxflexGrow={1}minHeight={10}maxHeight={25}>
+<scrollbox
+ref={(r: ScrollBoxRenderable)=>(scrollBox=r)}
+scrollAcceleration={scrollAcceleration()}
+stickyScroll={true}
+stickyStart="bottom"
+flexGrow={1}
+viewportOptions={{
+paddingRight: 1,
+}}
+verticalScrollbarOptions={{
+visible: true,
+trackOptions: {
+backgroundColor: theme.backgroundElement,
+foregroundColor: theme.borderActive,
+},
+}}
+>
+<Showwhen={loading()||isStreaming()}>
+<boxflexDirection="row"gap={1}padding={1}>
+<Spinner/>
+<textfg={theme.textMuted}>{assistantMessageText() ? "Streaming response..." : "Thinking..."}</text>
+</box>
+</Show>
+<Showwhen={assistantMessageText()}>
+<boxpaddingLeft={1}paddingRight={1}>
+<textfg={theme.text}wrapMode="word">
+{assistantMessageText()}
+</text>
+</box>
+</Show>
+</scrollbox>
+</box>
+</Show>
+
+{/* Interrupted message */}
+<Showwhen={isInterrupted()}>
+<boxpaddingLeft={1}paddingRight={1}paddingBottom={1}>
+<textfg={theme.error}attributes={TextAttributes.BOLD}>
+ Agent stream cancelled
+</text>
+</box>
+</Show>
+
+{/* Footer */}
+<boxflexDirection="column"border={["top"]}borderColor={theme.border}paddingTop={1}paddingBottom={1}gap={1}>
+<boxflexDirection="row"justifyContent="space-between">
+<textfg={theme.textMuted}>Use ↑/↓ or j/k to scroll</text>
+<box
+paddingLeft={3}
+paddingRight={3}
+backgroundColor={theme.primary}
+onMouseUp={()=>dialog.clear()}
+>
+<textfg={theme.selectedListItemText}>Close</text>
+</box>
+</box>
+</box>
+</box>
+)
+}