tuiboard 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.13.1] - 2026-09-17
+
+### Fixed
+- **Agents list stays in order when sessions move** (#52). A new session
+  appearing on top could show twice, leave blank rows, or draw rows in the
+  wrong order past the panel border; the lists now keep one stable row per
+  position. The cursor also stays on the session you selected while the list
+  reorders, instead of silently landing on another one (so Enter, `H` and `c`
+  act on the session you picked).
+- **`--view=agents` / `--view=timeline` / `--view=board` start on their own
+  zone** (#54), so the cursor and keys work right away instead of acting on
+  the hidden planner.
+
 ## [0.13.0] - 2026-09-17
 
 tuiboard and [herdr](https://herdr.dev) now work as one: the Agents zone shows
@@ -474,6 +487,7 @@ First public release on npm. This entry captures the full feature set at launch.
 
 Built with [OpenTUI](https://opentui.com) + SolidJS on Bun.
 
+[0.13.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.13.1
 [0.13.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.13.0
 [0.12.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.12.0
 [0.11.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "Terminal kanban for markdown task boards, with optional Today/Tomorrow planner, 24h agenda + calendar overlay, and a live view of your coding-agent sessions (Claude Code, Codex, OpenCode, Pi). Use only the panels you want.",
   "type": "module",
   "license": "MIT",

package/src/app.tsx

@@ -148,6 +148,11 @@ if (view === "planner") {
   store.setActiveZone("planner");
   store.setZoomed(true);
 }
+// The single-zone views show one zone; keys must act on it. Without this the
+// planner (the default landing zone above) stayed active behind them.
+if (view === "agents" || view === "timeline" || view === "board") {
+  store.setActiveZone(view);
+}
 
 // ─── App shell ──────────────────────────────────────────────────────────────
 

package/src/ui/AgentsBar.tsx

@@ -8,9 +8,10 @@
  * visible. Clicking a row sets activeZone + agent cursor.
  */
 
-import { For, Show, createEffect, createMemo } from "solid-js";
+import { Index, Show, createEffect, createMemo } from "solid-js";
 
 import { AgentRow } from "~/ui/AgentRow";
+import { useStickyAgentCursor } from "~/ui/agent-cursor";
 import { T } from "~/ui/glyphs";
 import { HARNESS } from "~/store/agents";
 import type { TuiStore } from "~/store/index";
@@ -42,6 +43,7 @@ export function AgentsBar(props: AgentsBarProps) {
   };
 
   let scrollBoxRef: ScrollBoxLike | undefined;
+  useStickyAgentCursor(props.store, allShown);
 
   // Keep the cursor row visible as j/k moves it (mouse wheel scrolls freely
   // via the scrollbox itself). setTimeout(0) waits for layout to commit.
@@ -96,22 +98,23 @@ export function AgentsBar(props: AgentsBarProps) {
             scrollbarOptions: { visible: false },
           }}
         >
-          <For each={allShown()}>
+          {/* <Index>: stable rows by position — see AgentsOnly (#52). */}
+          <Index each={allShown()}>
             {(session, i) => (
-              <box id={agentRowId(i())}>
+              <box id={agentRowId(i)}>
                 <AgentRow
                   indicators={props.store.agentIndicators}
-                  session={session}
-                  cursor={isActive() && i() === agentRow()}
+                  session={session()}
+                  cursor={isActive() && i === agentRow()}
                   nameMaxChars={48}
                   onClick={() => {
                     props.store.setActiveZone("agents");
-                    props.store.setCursor(0, i());
+                    props.store.setCursor(0, i);
                   }}
                 />
               </box>
             )}
-          </For>
+          </Index>
         </scrollbox>
       </Show>
     </box>

package/src/ui/agent-cursor.ts

@@ -0,0 +1,49 @@
+/**
+ * Keep the Agents cursor on the same session while the list reorders.
+ *
+ * The cursor is a row index (`ui.row`), and sessions move all the time —
+ * sorted by recency, a new one lands on top, a working one climbs. Without
+ * this, the highlighted row silently became a different session and Enter /
+ * H / c acted on it. Call once inside the component that renders the list.
+ */
+
+import { createEffect } from "solid-js";
+
+import type { AgentSession } from "~/store/agents";
+import type { TuiStore } from "~/store/index";
+
+/** Pure decision, for tests: where the cursor should be after a change. */
+export function followSelection(
+  prev: { list: readonly AgentSession[] | undefined; row: number; id: string | undefined },
+  list: readonly AgentSession[],
+  row: number,
+): number {
+  // Only a list change (not a keypress) may move the cursor.
+  if (list === prev.list || row !== prev.row || !prev.id) return row;
+  if (list[row]?.sessionId === prev.id) return row;
+  const idx = list.findIndex((s) => s.sessionId === prev.id);
+  return idx >= 0 ? idx : Math.min(row, Math.max(0, list.length - 1));
+}
+
+export function useStickyAgentCursor(store: TuiStore, list: () => readonly AgentSession[]): void {
+  const prev: { list: readonly AgentSession[] | undefined; row: number; id: string | undefined } = {
+    list: undefined,
+    row: -1,
+    id: undefined,
+  };
+  createEffect(() => {
+    const items = list();
+    const row = store.state.ui.row;
+    // `ui.row` belongs to whichever zone is active.
+    if (store.state.ui.activeZone !== "agents") {
+      prev.list = undefined;
+      prev.id = undefined;
+      return;
+    }
+    const next = followSelection(prev, items, row);
+    prev.list = items;
+    prev.row = next;
+    prev.id = items[next]?.sessionId;
+    if (next !== row) store.setCursor(0, next);
+  });
+}

package/src/views/AgentsOnly.tsx

@@ -5,9 +5,10 @@
  * scrollChildIntoView (same trick used in BoardView for active columns).
  */
 
-import { For, Show, createEffect, createMemo } from "solid-js";
+import { Index, Show, createEffect, createMemo } from "solid-js";
 
 import { AgentRow } from "~/ui/AgentRow";
+import { useStickyAgentCursor } from "~/ui/agent-cursor";
 import { T } from "~/ui/glyphs";
 import { HARNESS } from "~/store/agents";
 import type { TuiStore } from "~/store/index";
@@ -16,10 +17,9 @@ interface ScrollBoxLike {
   scrollChildIntoView(id: string): void;
 }
 
-function rowId(sessionId: string): string {
-  // Sanitize sessionId for use as an OpenTUI box id. UUIDs are already safe
-  // (alphanumeric + dashes), but defensive belt-and-braces doesn't hurt.
-  return `tuiboard-agent-${sessionId.replace(/[^a-zA-Z0-9]/g, "_")}`;
+/** Rows are keyed by position (see the <Index> below), and so are their ids. */
+function rowId(index: number): string {
+  return `tuiboard-agent-card-${index}`;
 }
 
 export function AgentsOnly(props: { store: TuiStore }) {
@@ -29,17 +29,17 @@ export function AgentsOnly(props: { store: TuiStore }) {
   const filter = () => props.store.state.ui.agentsFilter;
   const filterTag = () => (filter() === "all" ? "" : ` · ${HARNESS[filter() as keyof typeof HARNESS].code}`);
   let scrollBoxRef: ScrollBoxLike | undefined;
+  useStickyAgentCursor(props.store, sessions);
 
   // Auto-scroll the list so the active row is visible. setTimeout(0) waits
   // for OpenTUI to finish layout before requesting scroll.
   createEffect(() => {
     const row = agentRow();
     if (!isActive() || !scrollBoxRef) return;
-    const target = sessions()[row];
-    if (!target) return;
+    if (row >= sessions().length) return;
     setTimeout(() => {
       try {
-        scrollBoxRef?.scrollChildIntoView(rowId(target.sessionId));
+        scrollBoxRef?.scrollChildIntoView(rowId(row));
       } catch {
         // Child not mounted yet — harmless.
       }
@@ -85,23 +85,29 @@ export function AgentsOnly(props: { store: TuiStore }) {
               scrollbarOptions: { visible: false },
             }}
           >
-            <For each={sessions()}>
+            {/*
+              <Index>, not <For>: one stable row per position whose data
+              updates in place. Sessions are re-created on every refresh and
+              reorder by recency, and moving children inside OpenTUI's
+              scrollbox left stale/duplicate rows on screen (#52).
+            */}
+            <Index each={sessions()}>
               {(session, i) => (
-                <box id={rowId(session.sessionId)}>
+                <box id={rowId(i)}>
                   <AgentRow
-                    session={session}
-                    cursor={isActive() && i() === agentRow()}
+                    session={session()}
+                    cursor={isActive() && i === agentRow()}
                     nameMaxChars={120}
                     variant="card"
                     indicators={props.store.agentIndicators}
                     onClick={() => {
                       props.store.setActiveZone("agents");
-                      props.store.setCursor(0, i());
+                      props.store.setCursor(0, i);
                     }}
                   />
                 </box>
               )}
-            </For>
+            </Index>
           </scrollbox>
         </Show>
       </box>