opencode-session-bar 1.0.0 → 1.1.1

package/index.tsx

@@ -1,16 +1,28 @@
 /** @jsxImportSource @opentui/solid */
-import { createResource, createSignal, For, Show } from "solid-js"
+import { createResource, createSignal, For, Show, onMount, onCleanup } from "solid-js"
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
+import type { KeyEvent } from "@opentui/core"
 
 function View(props: { api: TuiPluginApi; sessionID: string }) {
   const theme = () => props.api.theme.current
   const [deleting, setDeleting] = createSignal<Set<string>>(new Set())
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+  const [listFocused, setListFocused] = createSignal(false)
+  const [boxRef, setBoxRef] = createSignal<any>()
 
-    const [sessions, { refetch }] = createResource(async () => {
+  const [sessions, { refetch }] = createResource(async () => {
     const res = await props.api.client.session.list()
     return (res.data ?? []) as Array<{ id: string; title: string; time: { created: number; updated: number } }>
   })
 
+  const sorted = () => (sessions() ?? [])
+    .slice()
+    .sort((a, b) => b.time.updated - a.time.updated)
+
+  function trunc(s: string, n: number): string {
+    return s.length > n ? s.slice(0, n) + "…" : s
+  }
+
   async function handleSwitch(id: string) {
     props.api.route.navigate("session", { sessionID: id })
   }
@@ -27,9 +39,45 @@ function View(props: { api: TuiPluginApi; sessionID: string }) {
     }
   }
 
-  const sorted = () => (sessions() ?? [])
-    .slice()
-    .sort((a, b) => b.time.updated - a.time.updated)
+  function handleKeyDown(e: KeyEvent) {
+    const list = sorted()
+    if (!list.length) return
+
+    if (e.name === "down" || e.name === "j") {
+      e.preventDefault()
+      setSelectedIndex(i => Math.min(i + 1, list.length - 1))
+    } else if (e.name === "up" || e.name === "k") {
+      e.preventDefault()
+      setSelectedIndex(i => Math.max(i - 1, 0))
+    } else if (e.name === "enter" || e.name === "space") {
+      e.preventDefault()
+      const s = list[selectedIndex()]
+      if (s && s.id !== props.sessionID) handleSwitch(s.id)
+    } else if (e.name === "escape") {
+      e.preventDefault()
+      setListFocused(false)
+      boxRef()?.blur()
+    }
+  }
+
+  function focusList() {
+    setListFocused(true)
+    boxRef()?.focus()
+    const list = sorted()
+    const idx = list.findIndex(s => s.id === props.sessionID)
+    if (idx >= 0) setSelectedIndex(idx)
+  }
+
+  onMount(() => {
+    const dispose = props.api.command?.register(() => [{
+      title: "Session Bar: Focus List",
+      value: "session-bar:focus",
+      category: "Session Bar",
+      keybind: "ctrl+s",
+      onSelect: focusList,
+    }])
+    onCleanup(() => dispose?.())
+  })
 
   return (
     <box>
@@ -37,34 +85,43 @@ function View(props: { api: TuiPluginApi; sessionID: string }) {
       <Show when={sessions.loading}>
         <text fg={theme().textMuted}>loading...</text>
       </Show>
-      <For each={sorted()}>
-        {(session) => {
-          const active = session.id === props.sessionID
-          const isDeleting = deleting().has(session.id)
-          return (
-            <box flexDirection="row" gap={1}>
-              <text
-                fg={active ? theme().accent : theme().text}
-                attributes={{ bold: active }}
-                onMouseDown={() => !active && handleSwitch(session.id)}
-              >
-                {active ? ">" : " "} {session.title}
-              </text>
-              <Show when={!isDeleting}>
+      <box
+        ref={setBoxRef}
+        focusable
+        focused={listFocused()}
+        onKeyDown={handleKeyDown}
+      >
+        <For each={sorted()}>
+          {(session, i) => {
+            const active = session.id === props.sessionID
+            const isDeleting = deleting().has(session.id)
+            const isSelected = listFocused() && selectedIndex() === i()
+            return (
+              <box flexDirection="row" justifyContent="space-between">
                 <text
-                  fg={theme().textMuted}
-                  onMouseDown={() => handleDelete(session.id)}
+                  fg={active ? theme().accent : theme().text}
+                  attributes={{ bold: active, inverse: isSelected }}
+                  wrapMode="none"
+                  onMouseDown={() => !active && handleSwitch(session.id)}
                 >
-                  [x]
+                  {active ? ">" : " "} {trunc(session.title, 30)}
                 </text>
-              </Show>
-              <Show when={isDeleting}>
-                <text fg={theme().textMuted}>...</text>
-              </Show>
-            </box>
-          )
-        }}
-      </For>
+                <Show when={!isDeleting}>
+                  <text
+                    fg={theme().textMuted}
+                    onMouseDown={() => handleDelete(session.id)}
+                  >
+                    [x]
+                  </text>
+                </Show>
+                <Show when={isDeleting}>
+                  <text fg={theme().textMuted}>...</text>
+                </Show>
+              </box>
+            )
+          }}
+        </For>
+      </box>
     </box>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-session-bar",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "OpenCode TUI sidebar plugin — list all sessions with quick switch and delete",
   "type": "module",
   "exports": {