feature: sessions sidebar

README.md

@@ -89,6 +89,25 @@ This is used internally and can be invoked using `@general` in messages.
 
 Learn more about [agents](https://opencode.ai/docs/agents).
 
+### Sessions Sidebar
+
+A NERDTree-style sidebar for managing sessions. Toggle with `ctrl+n`.
+
+| Key | Action |
+| --- | --- |
+| `j/k` or `↑/↓` | Move cursor |
+| `Enter` or `o` | Open session / Toggle expand |
+| `O` | Expand all children |
+| `x` | Collapse parent |
+| `X` | Collapse all |
+| `p` | Go to parent |
+| `g/G` | Jump to top/bottom |
+| `n` | New session |
+| `r` | Rename session |
+| `d` | Delete session |
+| `?` | Show help |
+| `q` or `Esc` | Close sidebar |
+
 ### Documentation
 
 For more info on how to configure OpenCode [**head over to our docs**](https://opencode.ai/docs).

packages/opencode/script/build.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env bun
 
-import solidPlugin from "../node_modules/@opentui/solid/scripts/solid-plugin"
+import solidPlugin from "@opentui/solid/bun-plugin"
 import path from "path"
 import fs from "fs"
 import { $ } from "bun"

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

@@ -22,6 +22,7 @@ import { KeybindProvider } from "@tui/context/keybind"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { Home } from "@tui/routes/home"
 import { Session } from "@tui/routes/session"
+import { SessionsSidebar } from "@tui/routes/session/sidebar-sessions"
 import { PromptHistoryProvider } from "./component/prompt/history"
 import { DialogAlert } from "./ui/dialog-alert"
 import { ToastProvider, useToast } from "./ui/toast"
@@ -178,6 +179,7 @@ function App() {
   const promptRef = usePromptRef()
 
   const [terminalTitleEnabled, setTerminalTitleEnabled] = createSignal(kv.get("terminal_title_enabled", true))
+  const [sessionsSidebarVisible, setSessionsSidebarVisible] = createSignal(false)
 
   createEffect(() => {
     console.log(JSON.stringify(route.data))
@@ -280,6 +282,16 @@ function App() {
         dialog.clear()
       },
     },
+    {
+      title: sessionsSidebarVisible() ? "Hide sessions" : "Show sessions",
+      value: "session.sessions_sidebar.toggle",
+      keybind: "sessions_sidebar_toggle",
+      category: "Session",
+      onSelect: (dialog) => {
+        setSessionsSidebarVisible((prev) => !prev)
+        dialog.clear()
+      },
+    },
     {
       title: "Switch model",
       value: "model.list",
@@ -631,14 +643,21 @@ function App() {
         }
       }}
     >
-      <Switch>
-        <Match when={route.data.type === "home"}>
-          <Home />
-        </Match>
-        <Match when={route.data.type === "session"}>
-          <Session />
-        </Match>
-      </Switch>
+      <box flexDirection="row" flexGrow={1}>
+        <Show when={sessionsSidebarVisible()}>
+          <SessionsSidebar onClose={() => setSessionsSidebarVisible(false)} />
+        </Show>
+        <box flexGrow={1}>
+          <Switch>
+            <Match when={route.data.type === "home"}>
+              <Home />
+            </Match>
+            <Match when={route.data.type === "session"}>
+              <Session />
+            </Match>
+          </Switch>
+        </box>
+      </box>
     </box>
   )
 }

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

@@ -468,9 +468,8 @@ export function Autocomplete(props: {
       onKeyDown(e: KeyEvent) {
         if (store.visible) {
           const name = e.name?.toLowerCase()
-          const ctrlOnly = e.ctrl && !e.meta && !e.shift
-          const isNavUp = name === "up" || (ctrlOnly && name === "p")
-          const isNavDown = name === "down" || (ctrlOnly && name === "n")
+          const isNavUp = name === "up"
+          const isNavDown = name === "down"
 
           if (isNavUp) {
             move(-1)