@jx0/jmux 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx0/jmux",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "The terminal workspace for agentic development",
   "type": "module",
   "bin": {

package/src/__tests__/sidebar.test.ts

@@ -235,4 +235,125 @@ describe("Sidebar", () => {
     }
     expect(found).toBe(true);
   });
+
+  test("scrolls to show active session when it overflows", () => {
+    // Height 10 = 2 header rows + 8 viewport rows
+    // Each session = 2 rows + 1 spacer = 3 rows, so 8 rows fits ~2.6 sessions
+    const sidebar = new Sidebar(SIDEBAR_WIDTH, 10);
+    sidebar.updateSessions(
+      makeSessions([
+        { name: "a" },
+        { name: "b" },
+        { name: "c" },
+        { name: "d" },
+      ]),
+    );
+    // Activate last session and scroll to it
+    sidebar.setActiveSession("$3");
+    sidebar.scrollToActive();
+    const grid = sidebar.getGrid();
+    // "d" should be visible somewhere in the grid
+    let found = false;
+    for (let r = 2; r < 10; r++) {
+      const text = Array.from(
+        { length: SIDEBAR_WIDTH },
+        (_, i) => grid.cells[r][i].char,
+      ).join("");
+      if (text.includes("d")) {
+        found = true;
+        break;
+      }
+    }
+    expect(found).toBe(true);
+  });
+
+  test("scrollBy moves viewport and clamps to bounds", () => {
+    const sidebar = new Sidebar(SIDEBAR_WIDTH, 10);
+    sidebar.updateSessions(
+      makeSessions([
+        { name: "a" },
+        { name: "b" },
+        { name: "c" },
+        { name: "d" },
+      ]),
+    );
+    // First session visible at start
+    let grid = sidebar.getGrid();
+    const row2 = Array.from(
+      { length: SIDEBAR_WIDTH },
+      (_, i) => grid.cells[2][i].char,
+    ).join("");
+    expect(row2).toContain("a");
+
+    // Scroll down
+    sidebar.scrollBy(3);
+    grid = sidebar.getGrid();
+    // "a" should no longer be on row 2
+    const row2After = Array.from(
+      { length: SIDEBAR_WIDTH },
+      (_, i) => grid.cells[2][i].char,
+    ).join("");
+    expect(row2After).not.toContain("a");
+
+    // Scroll way past the top — should clamp to 0
+    sidebar.scrollBy(-100);
+    grid = sidebar.getGrid();
+    const row2Reset = Array.from(
+      { length: SIDEBAR_WIDTH },
+      (_, i) => grid.cells[2][i].char,
+    ).join("");
+    expect(row2Reset).toContain("a");
+  });
+
+  test("shows scroll indicators when content overflows", () => {
+    const sidebar = new Sidebar(SIDEBAR_WIDTH, 10);
+    sidebar.updateSessions(
+      makeSessions([
+        { name: "a" },
+        { name: "b" },
+        { name: "c" },
+        { name: "d" },
+      ]),
+    );
+    // At top: should show down indicator but not up
+    let grid = sidebar.getGrid();
+    expect(grid.cells[2][SIDEBAR_WIDTH - 1].char).not.toBe("\u25b2");
+    expect(grid.cells[9][SIDEBAR_WIDTH - 1].char).toBe("\u25bc");
+
+    // Scroll to middle: should show both
+    sidebar.scrollBy(3);
+    grid = sidebar.getGrid();
+    expect(grid.cells[2][SIDEBAR_WIDTH - 1].char).toBe("\u25b2");
+  });
+
+  test("scrollToActive snaps back after manual scroll", () => {
+    const sidebar = new Sidebar(SIDEBAR_WIDTH, 10);
+    sidebar.updateSessions(
+      makeSessions([
+        { name: "a" },
+        { name: "b" },
+        { name: "c" },
+        { name: "d" },
+      ]),
+    );
+    sidebar.setActiveSession("$0"); // "a" is active
+    // Scroll away from active session
+    sidebar.scrollBy(6);
+    // Snap back
+    sidebar.scrollToActive();
+    const grid = sidebar.getGrid();
+    // "a" should be visible
+    let found = false;
+    for (let r = 2; r < 10; r++) {
+      const text = Array.from(
+        { length: SIDEBAR_WIDTH },
+        (_, i) => grid.cells[r][i].char,
+      ).join("");
+      if (text.includes("a")) {
+        found = true;
+        break;
+      }
+    }
+    expect(found).toBe(true);
+  });
 });

package/src/input-router.ts

@@ -33,6 +33,7 @@ export interface InputRouterOptions {
   sidebarCols: number;
   onPtyData: (data: string) => void;
   onSidebarClick: (row: number) => void;
+  onSidebarScroll?: (delta: number) => void;
   onSessionPrev?: () => void;
   onSessionNext?: () => void;
 }
@@ -65,6 +66,12 @@ export class InputRouter {
     const mouse = parseSgrMouse(data);
     if (mouse && this.sidebarVisible) {
       if (mouse.x <= this.opts.sidebarCols) {
+        // Wheel events: button 64 = up, 65 = down
+        if ((mouse.button & 64) !== 0) {
+          const delta = (mouse.button & 1) ? 3 : -3;
+          this.opts.onSidebarScroll?.(delta);
+          return;
+        }
         // Click in sidebar region (ignore drags — button bit 5 = motion)
         if (!mouse.release && (mouse.button & 32) === 0) {
           this.opts.onSidebarClick(mouse.y - 1); // 0-indexed row

package/src/main.ts

@@ -12,7 +12,7 @@ import { homedir } from "os";
 
 // --- CLI commands (run and exit before TUI) ---
 
-const VERSION = "0.3.3";
+const VERSION = "0.3.4";
 
 const HELP = `jmux — a persistent session sidebar for tmux
 
@@ -255,6 +255,7 @@ async function switchSession(sessionId: string): Promise<void> {
     sidebar.setActivity(sessionId, false);
     currentSessionId = sessionId;
     sidebar.setActiveSession(sessionId);
+    sidebar.scrollToActive();
     renderFrame();
 
     // Clear attention flag if set
@@ -298,6 +299,10 @@ const inputRouter = new InputRouter(
       const session = sidebar.getSessionByRow(row);
       if (session) switchSession(session.id);
     },
+    onSidebarScroll: (delta) => {
+      sidebar.scrollBy(delta);
+      scheduleRender();
+    },
     onSessionPrev: () => switchByOffset(-1),
     onSessionNext: () => switchByOffset(1),
   },

package/src/sidebar.ts

@@ -145,6 +145,10 @@ function buildRenderPlan(sessions: SessionInfo[]): {
   return { items, displayOrder };
 }
 
+function itemHeight(item: RenderItem): number {
+  return item.type === "session" ? 2 : 1;
+}
+
 // --- Sidebar class ---
 
 export class Sidebar {
@@ -152,9 +156,11 @@ export class Sidebar {
   private height: number;
   private sessions: SessionInfo[] = [];
   private activeSessionId: string | null = null;
+  private items: RenderItem[] = [];
   private displayOrder: number[] = [];
   private rowToSessionIndex = new Map<number, number>();
   private activitySet = new Set<string>();
+  private scrollOffset = 0;
 
   constructor(width: number, height: number) {
     this.width = width;
@@ -163,8 +169,10 @@ export class Sidebar {
 
   updateSessions(sessions: SessionInfo[]): void {
     this.sessions = sessions;
-    const { displayOrder } = buildRenderPlan(sessions);
+    const { items, displayOrder } = buildRenderPlan(sessions);
+    this.items = items;
     this.displayOrder = displayOrder;
+    this.clampScroll();
   }
 
   setActiveSession(id: string): void {
@@ -194,6 +202,41 @@ export class Sidebar {
   resize(width: number, height: number): void {
     this.width = width;
     this.height = height;
+    this.clampScroll();
+  }
+
+  scrollBy(delta: number): void {
+    this.scrollOffset += delta;
+    this.clampScroll();
+  }
+
+  scrollToActive(): void {
+    if (!this.activeSessionId) return;
+    const viewportHeight = this.height - HEADER_ROWS;
+    let vRow = 0;
+    for (const item of this.items) {
+      const h = itemHeight(item);
+      if (item.type === "session") {
+        const session = this.sessions[item.sessionIndex];
+        if (session?.id === this.activeSessionId) {
+          if (vRow < this.scrollOffset) {
+            this.scrollOffset = vRow;
+          } else if (vRow + h > this.scrollOffset + viewportHeight) {
+            this.scrollOffset = vRow + h - viewportHeight;
+          }
+          this.clampScroll();
+          return;
+        }
+      }
+      vRow += h;
+    }
+  }
+
+  private clampScroll(): void {
+    const totalRows = this.items.reduce((sum, item) => sum + itemHeight(item), 0);
+    const viewportHeight = this.height - HEADER_ROWS;
+    const maxOffset = Math.max(0, totalRows - viewportHeight);
+    this.scrollOffset = Math.max(0, Math.min(maxOffset, this.scrollOffset));
   }
 
   getGrid(): CellGrid {
@@ -204,152 +247,134 @@ export class Sidebar {
     writeString(grid, 0, 1, "jmux", { ...ACCENT_ATTRS, bold: true });
     writeString(grid, 1, 0, "\u2500".repeat(this.width), DIM_ATTRS);
 
-    const { items } = buildRenderPlan(this.sessions);
-    let row = HEADER_ROWS;
+    const viewportHeight = this.height - HEADER_ROWS;
+    let vRow = 0;
+    let totalRows = 0;
 
-    for (const item of items) {
-      if (row >= this.height) break;
+    for (const item of this.items) {
+      const h = itemHeight(item);
+      const screenRow = HEADER_ROWS + vRow - this.scrollOffset;
 
-      if (item.type === "group-header") {
-        let label = item.label;
-        if (label.length > this.width - 2) {
-          label = label.slice(0, this.width - 3) + "\u2026";
-        }
-        writeString(grid, row, 1, label, GROUP_HEADER_ATTRS);
-        row++;
+      // Skip items entirely above viewport
+      if (screenRow + h <= HEADER_ROWS) {
+        vRow += h;
+        totalRows += h;
         continue;
       }
-
-      if (item.type === "spacer") {
-        row++;
+      // Track total rows even after viewport
+      if (screenRow >= this.height) {
+        vRow += h;
+        totalRows += h;
         continue;
       }
 
-      const sessionIdx = item.sessionIndex;
-      const session = this.sessions[sessionIdx];
-      if (!session) continue;
-
-      const nameRow = row;
-      const isActive = session.id === this.activeSessionId;
-      const hasActivity = this.activitySet.has(session.id);
-
-      if (item.grouped) {
-        // Grouped: two rows — name + window count, then subdirectory + branch
-        const detailRow = row + 1;
-
-        this.rowToSessionIndex.set(nameRow, sessionIdx);
-        if (detailRow < this.height) {
-          this.rowToSessionIndex.set(detailRow, sessionIdx);
-        }
-
-        if (isActive) {
-          writeString(grid, nameRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
-          if (detailRow < this.height) {
-            writeString(grid, detailRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
-          }
+      if (item.type === "group-header") {
+        let label = item.label;
+        if (label.length > this.width - 2) {
+          label = label.slice(0, this.width - 3) + "\u2026";
         }
+        writeString(grid, screenRow, 1, label, GROUP_HEADER_ATTRS);
+      } else if (item.type === "spacer") {
+        // nothing to render
+      } else {
+        this.renderSession(grid, screenRow, item);
+      }
 
-        if (session.attention) {
-          writeString(grid, nameRow, 1, "!", ATTENTION_ATTRS);
-        } else if (hasActivity) {
-          writeString(grid, nameRow, 1, "\u25CF", ACTIVITY_ATTRS);
-        }
+      vRow += h;
+      totalRows += h;
+    }
 
-        const windowCountStr = `${session.windowCount}w`;
-        const windowCountCol = this.width - windowCountStr.length - 1;
-        const nameStart = 3;
-        const nameMaxLen = windowCountCol - 1 - nameStart;
-        let displayName = session.name;
-        if (displayName.length > nameMaxLen) {
-          displayName = displayName.slice(0, nameMaxLen - 1) + "\u2026";
-        }
+    // Scroll indicators
+    if (this.scrollOffset > 0) {
+      writeString(grid, HEADER_ROWS, this.width - 1, "\u25b2", DIM_ATTRS);
+    }
+    if (this.scrollOffset + viewportHeight < totalRows) {
+      writeString(grid, this.height - 1, this.width - 1, "\u25bc", DIM_ATTRS);
+    }
 
-        const nameAttrs: CellAttrs = isActive
-          ? { ...ACTIVE_NAME_ATTRS }
-          : { ...INACTIVE_NAME_ATTRS };
-        writeString(grid, nameRow, nameStart, displayName, nameAttrs);
+    return grid;
+  }
 
-        if (windowCountCol > nameStart) {
-          writeString(grid, nameRow, windowCountCol, windowCountStr, DIM_ATTRS);
-        }
+  private renderSession(
+    grid: CellGrid,
+    nameRow: number,
+    item: Extract<RenderItem, { type: "session" }>,
+  ): void {
+    const sessionIdx = item.sessionIndex;
+    const session = this.sessions[sessionIdx];
+    if (!session) return;
+
+    const detailRow = nameRow + 1;
+    const isActive = session.id === this.activeSessionId;
+    const hasActivity = this.activitySet.has(session.id);
+
+    // Map rows to session for click handling
+    this.rowToSessionIndex.set(nameRow, sessionIdx);
+    if (detailRow < this.height) {
+      this.rowToSessionIndex.set(detailRow, sessionIdx);
+    }
 
-        // Detail line: branch name
-        if (detailRow < this.height && session.gitBranch) {
-          const detailStart = 3;
-          const maxLen = this.width - detailStart - 1;
-          let branch = session.gitBranch;
-          if (branch.length > maxLen) {
-            branch = branch.slice(0, maxLen - 1) + "\u2026";
-          }
-          writeString(grid, detailRow, detailStart, branch, DIM_ATTRS);
-        }
+    // Active marker
+    if (isActive) {
+      writeString(grid, nameRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
+      writeString(grid, detailRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
+    }
 
-        row += 2;
-      } else {
-        // Ungrouped: two rows (name + detail)
-        const detailRow = row + 1;
+    // Indicator
+    if (session.attention) {
+      writeString(grid, nameRow, 1, "!", ATTENTION_ATTRS);
+    } else if (hasActivity) {
+      writeString(grid, nameRow, 1, "\u25CF", ACTIVITY_ATTRS);
+    }
 
-        this.rowToSessionIndex.set(nameRow, sessionIdx);
-        if (detailRow < this.height) {
-          this.rowToSessionIndex.set(detailRow, sessionIdx);
-        }
+    // Name row: name + window count
+    const windowCountStr = `${session.windowCount}w`;
+    const windowCountCol = this.width - windowCountStr.length - 1;
+    const nameStart = 3;
+    const nameMaxLen = windowCountCol - 1 - nameStart;
+    let displayName = session.name;
+    if (displayName.length > nameMaxLen) {
+      displayName = displayName.slice(0, nameMaxLen - 1) + "\u2026";
+    }
 
-        if (isActive) {
-          writeString(grid, nameRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
-          if (detailRow < this.height) {
-            writeString(grid, detailRow, 0, "\u258e", ACTIVE_MARKER_ATTRS);
-          }
-        }
+    const nameAttrs: CellAttrs = isActive
+      ? { ...ACTIVE_NAME_ATTRS }
+      : { ...INACTIVE_NAME_ATTRS };
+    writeString(grid, nameRow, nameStart, displayName, nameAttrs);
 
-        if (session.attention) {
-          writeString(grid, nameRow, 1, "!", ATTENTION_ATTRS);
-        } else if (hasActivity) {
-          writeString(grid, nameRow, 1, "\u25CF", ACTIVITY_ATTRS);
-        }
+    if (windowCountCol > nameStart) {
+      writeString(grid, nameRow, windowCountCol, windowCountStr, DIM_ATTRS);
+    }
 
-        const windowCountStr = `${session.windowCount}w`;
-        const windowCountCol = this.width - windowCountStr.length - 1;
-        const nameStart = 3;
-        const nameMaxLen = windowCountCol - 1 - nameStart;
-        let displayName = session.name;
-        if (displayName.length > nameMaxLen) {
-          displayName = displayName.slice(0, nameMaxLen - 1) + "\u2026";
+    // Detail line
+    if (item.grouped) {
+      if (session.gitBranch) {
+        const detailStart = 3;
+        const maxLen = this.width - detailStart - 1;
+        let branch = session.gitBranch;
+        if (branch.length > maxLen) {
+          branch = branch.slice(0, maxLen - 1) + "\u2026";
         }
-
-        const nameAttrs: CellAttrs = isActive
-          ? { ...ACTIVE_NAME_ATTRS }
-          : { ...INACTIVE_NAME_ATTRS };
-        writeString(grid, nameRow, nameStart, displayName, nameAttrs);
-
-        if (windowCountCol > nameStart) {
-          writeString(grid, nameRow, windowCountCol, windowCountStr, DIM_ATTRS);
+        writeString(grid, detailRow, detailStart, branch, DIM_ATTRS);
+      }
+    } else {
+      const detailStart = 3;
+      let branchCols = 0;
+      if (session.gitBranch) {
+        const branchCol = this.width - session.gitBranch.length - 1;
+        if (branchCol > detailStart + 1) {
+          writeString(grid, detailRow, branchCol, session.gitBranch, DIM_ATTRS);
+          branchCols = session.gitBranch.length + 2;
         }
-
-        // Detail line
-        if (detailRow < this.height) {
-          const detailStart = 3;
-          let branchCols = 0;
-          if (session.gitBranch) {
-            const branchCol = this.width - session.gitBranch.length - 1;
-            if (branchCol > detailStart + 1) {
-              writeString(grid, detailRow, branchCol, session.gitBranch, DIM_ATTRS);
-              branchCols = session.gitBranch.length + 2;
-            }
-          }
-          if (session.directory !== undefined) {
-            const dirMaxLen = this.width - detailStart - branchCols - 1;
-            let displayDir = session.directory;
-            if (displayDir.length > dirMaxLen) {
-              displayDir = displayDir.slice(0, dirMaxLen - 1) + "\u2026";
-            }
-            writeString(grid, detailRow, detailStart, displayDir, DIM_ATTRS);
-          }
+      }
+      if (session.directory !== undefined) {
+        const dirMaxLen = this.width - detailStart - branchCols - 1;
+        let displayDir = session.directory;
+        if (displayDir.length > dirMaxLen) {
+          displayDir = displayDir.slice(0, dirMaxLen - 1) + "\u2026";
         }
-
-        row += 2;
+        writeString(grid, detailRow, detailStart, displayDir, DIM_ATTRS);
       }
     }
-
-    return grid;
   }
 }