feat(sideshow-term): support sidebar mouse selection (#29)

Author: benvinegar

CHANGELOG.md

@@ -20,8 +20,9 @@ All notable user-visible changes to this project are documented in this file.
 
 - `sideshow-term watch` now starts a local server in the background when needed,
   and bare `sideshow-term` opens the watcher. Terminal servers default to port
-  4243, with `--port` for choosing another local port. `sideshow-term serve`
-  remains for explicit server-only use.
+  4243, with `--port` for choosing another local port. The watcher supports
+  mouse input for clicking sidebar snippets and wheel-scrolling content.
+  `sideshow-term serve` remains for explicit server-only use.
 - Snippets are now "surfaces" throughout the API: `/api/surfaces`, `surface-*`
   SSE events, and comments keyed by `surfaceId`. The old snippet endpoints and
   the `publish_snippet`/`update_snippet` tools remain as back-compat aliases, so

sideshow-term/README.md

@@ -61,7 +61,7 @@ the CLI shells out to Bun for `watch` and `render`.
 
 ```
 sideshow-term [--port N]                    open the live TUI viewer, starting a local server if needed
-sideshow-term watch [--port N] [--no-serve] open the live TUI viewer (Bun)
+sideshow-term watch [--port N] [--no-serve] open the live TUI viewer (Bun; keyboard + mouse)
 sideshow-term serve [--port N]              start only the server (REST + SSE + MCP)
 sideshow-term render <file|-> [--width N]   preview STML to plain text (Bun)
 sideshow-term publish <file|-> [--title …]  publish an STML snippet

sideshow-term/src/watch.ts

@@ -47,7 +47,7 @@ async function api<T>(path: string): Promise<T | null> {
 }
 
 async function main() {
-  const renderer = await createCliRenderer({ exitOnCtrlC: true, targetFps: 30 });
+  const renderer = await createCliRenderer({ exitOnCtrlC: true, targetFps: 30, useMouse: true });
 
   // --- static layout ---
   const rootCol = new BoxRenderable(renderer, {
@@ -93,7 +93,7 @@ async function main() {
   main.add(scroll);
 
   const footer = new TextRenderable(renderer, {
-    content: "↑/↓ select   [ / ] scroll   r refresh   q quit",
+    content: "↑/↓ select   click sidebar   [ / ] scroll   wheel scroll   r refresh   q quit",
     paddingLeft: 1,
     height: 1,
     fg: muted,
@@ -134,6 +134,12 @@ async function main() {
     for (const child of node.getChildren().slice()) node.remove(child.id);
   }
 
+  function selectSnippet(id: string) {
+    selectedId = id;
+    renderSidebar();
+    void showSelected();
+  }
+
   function renderSidebar() {
     clearChildren(sidebar);
     if (flat.length === 0) {
@@ -154,6 +160,14 @@ async function main() {
             content: label,
             fg: selected ? heading : undefined,
             bg: selected ? (resolveColor("subtle") ?? undefined) : undefined,
+            height: 1,
+            width: "100%",
+            selectable: false,
+            onMouseUp(event) {
+              if (event.button !== 0) return;
+              event.stopPropagation();
+              selectSnippet(snip.id);
+            },
           }),
         );
       }
@@ -195,9 +209,7 @@ async function main() {
     if (flat.length === 0) return;
     const cur = selectedIndex();
     const next = Math.max(0, Math.min(flat.length - 1, (cur < 0 ? 0 : cur) + delta));
-    selectedId = flat[next].id;
-    renderSidebar();
-    void showSelected();
+    selectSnippet(flat[next].id);
   }
 
   renderer.keyInput.on("keypress", (key) => {