feat(tui): [EXPERIMENTAL] Vim-style window system with extensible plugin views

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -2,7 +2,7 @@ import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentu
 import { Clipboard } from "@tui/util/clipboard"
 import { TextAttributes } from "@opentui/core"
 import { RouteProvider, useRoute } from "@tui/context/route"
-import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
+import { createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
 import { Installation } from "@/installation"
 import { Global } from "@/global"
 import { Flag } from "@/flag/flag"
@@ -20,9 +20,12 @@ import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command
 import { DialogAgent } from "@tui/component/dialog-agent"
 import { DialogSessionList } from "@tui/component/dialog-session-list"
 import { KeybindProvider } from "@tui/context/keybind"
+import { LayoutProvider, useLayout } from "@tui/context/layout"
+import { WindowCommandsProvider } from "@tui/context/window-commands"
+import { RouteLayoutBridgeProvider } from "@tui/context/route-layout-bridge"
+import { LayoutRenderer } from "@tui/layout/renderer"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
-import { Home } from "@tui/routes/home"
-import { Session } from "@tui/routes/session"
+
 import { PromptHistoryProvider } from "./component/prompt/history"
 import { PromptStashProvider } from "./component/prompt/stash"
 import { DialogAlert } from "./ui/dialog-alert"
@@ -121,17 +124,23 @@ export function tui(input: { url: string; args: Args; onExit?: () => Promise<voi
                           <ThemeProvider mode={mode}>
                             <LocalProvider>
                               <KeybindProvider>
-                                <PromptStashProvider>
-                                  <DialogProvider>
-                                    <CommandProvider>
-                                      <PromptHistoryProvider>
-                                        <PromptRefProvider>
-                                          <App />
-                                        </PromptRefProvider>
-                                      </PromptHistoryProvider>
-                                    </CommandProvider>
-                                  </DialogProvider>
-                                </PromptStashProvider>
+                                <LayoutProvider>
+                                  <RouteLayoutBridgeProvider>
+                                    <WindowCommandsProvider>
+                                      <PromptStashProvider>
+                                        <DialogProvider>
+                                          <CommandProvider>
+                                            <PromptHistoryProvider>
+                                              <PromptRefProvider>
+                                                <App />
+                                              </PromptRefProvider>
+                                            </PromptHistoryProvider>
+                                          </CommandProvider>
+                                        </DialogProvider>
+                                      </PromptStashProvider>
+                                    </WindowCommandsProvider>
+                                  </RouteLayoutBridgeProvider>
+                                </LayoutProvider>
                               </KeybindProvider>
                             </LocalProvider>
                           </ThemeProvider>
@@ -178,6 +187,7 @@ function App() {
   const sync = useSync()
   const exit = useExit()
   const promptRef = usePromptRef()
+  const layout = useLayout()
 
   // Wire up console copy-to-clipboard via opentui's onCopySelection callback
   renderer.console.onCopySelection = async (text: string) => {
@@ -236,10 +246,7 @@ function App() {
         local.model.set({ providerID, modelID }, { recent: true })
       }
       if (args.sessionID) {
-        route.navigate({
-          type: "session",
-          sessionID: args.sessionID,
-        })
+        layout.navigateFocusedWindow(`session:${args.sessionID}`)
       }
     })
   })
@@ -253,7 +260,7 @@ function App() {
       .find((x) => x.parentID === undefined)?.id
     if (match) {
       continued = true
-      route.navigate({ type: "session", sessionID: match })
+      layout.navigateFocusedWindow(`session:${match}`)
     }
   })
 
@@ -290,6 +297,7 @@ function App() {
         const current = promptRef.current
         // Don't require focus - if there's any text, preserve it
         const currentPrompt = current?.current?.input ? current.current : undefined
+        layout.navigateFocusedWindow("home")
         route.navigate({
           type: "home",
           initialPrompt: currentPrompt,
@@ -528,7 +536,7 @@ function App() {
 
   sdk.event.on(SessionApi.Event.Deleted.type, (evt) => {
     if (route.data.type === "session" && route.data.sessionID === evt.properties.info.id) {
-      route.navigate({ type: "home" })
+      layout.navigateFocusedWindow("home")
       toast.show({
         variant: "info",
         message: "The current session was deleted",
@@ -599,14 +607,7 @@ function App() {
         }
       }}
     >
-      <Switch>
-        <Match when={route.data.type === "home"}>
-          <Home />
-        </Match>
-        <Match when={route.data.type === "session"}>
-          <Session />
-        </Match>
-      </Switch>
+      <LayoutRenderer />
     </box>
   )
 }

packages/opencode/src/cli/cmd/tui/component/dialog-session-list.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "../context/theme"
 import { useSDK } from "../context/sdk"
 import { DialogSessionRename } from "./dialog-session-rename"
 import { useKV } from "../context/kv"
+import { useLayout } from "../context/layout"
 import "opentui-spinner/solid"
 
 export function DialogSessionList() {
@@ -18,6 +19,7 @@ export function DialogSessionList() {
   const route = useRoute()
   const sdk = useSDK()
   const kv = useKV()
+  const layout = useLayout()
 
   const [toDelete, setToDelete] = createSignal<string>()
 
@@ -74,10 +76,8 @@ export function DialogSessionList() {
         setToDelete(undefined)
       }}
       onSelect={(option) => {
-        route.navigate({
-          type: "session",
-          sessionID: option.value,
-        })
+        // Update window view (layout system handles route sync via bridge)
+        layout.navigateFocusedWindow(`session:${option.value}`)
         dialog.clear()
       }}
       keybind={[

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -30,6 +30,9 @@ import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
 import { DialogAlert } from "../../ui/dialog-alert"
 import { useToast } from "../../ui/toast"
 import { useKV } from "../../context/kv"
+import { useWindowID } from "../../context/window-id"
+import { WindowFocusRegistry } from "../../window-focus-registry"
+import { useLayout } from "../../context/layout"
 
 export type PromptProps = {
   sessionID?: string
@@ -126,6 +129,8 @@ export function Prompt(props: PromptProps) {
   const renderer = useRenderer()
   const { theme, syntax } = useTheme()
   const kv = useKV()
+  const windowID = useWindowID()
+  const layout = useLayout()
 
   function promptModelWarning() {
     toast.show({
@@ -350,6 +355,11 @@ export function Prompt(props: PromptProps) {
 
   onMount(() => {
     promptPartTypeId = input.extmarks.registerType("prompt-part")
+    // Register with window focus system if in a window context
+    if (windowID) {
+      const unregister = WindowFocusRegistry.register(windowID, { focus: () => input.focus() })
+      onCleanup(unregister)
+    }
   })
 
   function restoreExtmarksFromParts(parts: PromptInfo["parts"]) {
@@ -522,6 +532,14 @@ export function Prompt(props: PromptProps) {
     if (props.disabled) return
     if (autocomplete?.visible) return
     if (!store.prompt.input) return
+    if (autocomplete?.visible) {
+      toast.show({ message: "DEBUG: blocked by autocomplete", variant: "error", duration: 3000 })
+      return
+    }
+    if (!store.prompt.input) {
+      toast.show({ message: "DEBUG: blocked by empty input", variant: "error", duration: 3000 })
+      return
+    }
     const trimmed = store.prompt.input.trim()
     if (trimmed === "exit" || trimmed === "quit" || trimmed === ":q") {
       exit()
@@ -623,14 +641,21 @@ export function Prompt(props: PromptProps) {
     setStore("extmarkToPartIndex", new Map())
     props.onSubmit?.()
 
-    // temporary hack to make sure the message is sent
-    if (!props.sessionID)
+    // Navigate to the new session after submission
+    if (!props.sessionID) {
       setTimeout(() => {
-        route.navigate({
-          type: "session",
-          sessionID,
-        })
+        if (windowID) {
+          // Multi-window mode: update this window's view
+          layout.navigateFocusedWindow(`session:${sessionID}`)
+        } else {
+          // Single-window mode: use route navigation
+          route.navigate({
+            type: "session",
+            sessionID,
+          })
+        }
       }, 50)
+    }
     input.clear()
   }
   const exit = useExit()