feat(tui): show pending command resolution

packages/tui/src/component/prompt/index.tsx

@@ -54,6 +54,7 @@ import { readLocalAttachment } from "./local-attachment"
 import { useData } from "../../context/data"
 import { useLocation } from "../../context/location"
 import { contextUsage } from "../../util/session"
+import { usePromptRef } from "../../context/prompt"
 
 registerOpencodeSpinner()
 
@@ -157,6 +158,7 @@ export function Prompt(props: PromptProps) {
   const tuiConfig = useTuiConfig()
   const dialog = useDialog()
   const toast = useToast()
+  const promptRef = usePromptRef()
   const status = createMemo(() => data.session.status(props.sessionID ?? ""))
   const activeSubagents = createMemo(() => {
     if (!props.sessionID) return 0
@@ -1029,16 +1031,18 @@ export function Prompt(props: PromptProps) {
       const restOfInput = firstLineEnd === -1 ? "" : inputText.slice(firstLineEnd + 1)
       const args = firstLineArgs.join(" ") + (restOfInput ? "\n" + restOfInput : "")
 
-      void sdk.api.session
-        .command({
-          sessionID,
-          command: command.slice(1),
-          arguments: args,
-          agent: agent.id,
-          model: { providerID: selectedModel.providerID, id: selectedModel.modelID, variant },
-          files: store.prompt.files,
-          agents: store.prompt.agents,
-        })
+      void promptRef.command
+        .track(() =>
+          sdk.api.session.command({
+            sessionID,
+            command: command.slice(1),
+            arguments: args,
+            agent: agent.id,
+            model: { providerID: selectedModel.providerID, id: selectedModel.modelID, variant },
+            files: store.prompt.files,
+            agents: store.prompt.agents,
+          }),
+        )
         .catch((error) => {
           toast.show({ title: "Failed to run command", message: errorMessage(error), variant: "error" })
         })
@@ -1492,6 +1496,11 @@ export function Prompt(props: PromptProps) {
         </box>
         <box width="100%" flexDirection="row" justifyContent="space-between">
           <Switch>
+            <Match when={promptRef.command.pending}>
+              <box paddingLeft={3}>
+                <Spinner color={theme.accent}>Resolving command...</Spinner>
+              </box>
+            </Match>
             <Match when={status() === "running"}>
               <box flexDirection="row" gap={1} flexGrow={1} justifyContent="flex-start">
                 <box marginLeft={1}>

packages/tui/src/context/prompt.tsx

@@ -1,10 +1,13 @@
 import { createSimpleContext } from "./helper"
 import type { PromptRef } from "../component/prompt"
+import { createSignal } from "solid-js"
 
 export const { use: usePromptRef, provider: PromptRefProvider } = createSimpleContext({
   name: "PromptRef",
   init: () => {
     let current: PromptRef | undefined
+    let commandID = 0
+    const [commands, setCommands] = createSignal<number[]>([])
 
     return {
       get current() {
@@ -13,6 +16,20 @@ export const { use: usePromptRef, provider: PromptRefProvider } = createSimpleCo
       set(ref: PromptRef | undefined) {
         current = ref
       },
+      command: {
+        get pending() {
+          return commands().length > 0
+        },
+        async track<T>(request: () => Promise<T>) {
+          const id = commandID++
+          setCommands((commands) => [...commands, id])
+          try {
+            return await request()
+          } finally {
+            setCommands((commands) => commands.filter((command) => command !== id))
+          }
+        },
+      },
     }
   },
 })