tuiboard 0.12.0 → 0.13.1

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,21 +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
-                  session={session}
-                  cursor={isActive() && i() === agentRow()}
+                  indicators={props.store.agentIndicators}
+                  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/Modal.tsx

@@ -24,6 +24,7 @@ import { AGENDA_WIDTH } from "~/ui/layout";
 import { formatHm } from "~/store/timeline";
 import { HARNESS } from "~/store/agents";
 import { HARNESS_COLOR } from "~/ui/AgentRow";
+import { herdrPlace } from "~/store/herdr";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
@@ -936,6 +937,27 @@ function AgentDetailModal(props: { store: TuiStore; modal: Extract<NonNullable<T
               <span style={{ fg: T.textDim }}>status    </span>
               <span style={{ fg: T.text }}>{s().status}</span>
             </text>
+            <Show when={s().herdr}>
+              {(h: () => NonNullable<ReturnType<typeof s>["herdr"]>) => (
+                <>
+                  <text>
+                    <span style={{ fg: T.textDim }}>herdr     </span>
+                    <span style={{ fg: T.accent }}>{herdrPlace(h())}</span>
+                    <span style={{ fg: T.textDim }}>
+                      {"  "}pane {h().paneId} · {h().status} · matched by {h().matchedBy}
+                    </span>
+                  </text>
+                  <Show when={h().matchedBy === "cwd"}>
+                    <text wrapMode="word">
+                      <span style={{ fg: T.textDim }}>
+                        {"          "}herdr doesn't report which {h().agent} session this pane is on — run
+                        `herdr integration install {h().agent}` for an exact match.
+                      </span>
+                    </text>
+                  </Show>
+                </>
+              )}
+            </Show>
             <text>
               <span style={{ fg: T.textDim }}>cwd       </span>
               <span style={{ fg: T.text }}>{s().cwd}</span>
@@ -1126,7 +1148,8 @@ const HELP_SECTIONS: HelpSection[] = [
     emoji: "🤖",
     title: "Agents zone",
     rows: [
-      ["Enter", "Open (resume) the selected session in a new terminal tab/window"],
+      ["Enter", "Open (resume) the selected session in a new terminal tab/window — or go to it if it's open in herdr"],
+      ["H", "herdr: go to the session, or resume it in a new tab of its project's workspace"],
       ["c", "Copy a 'cd + resume' command for the session"],
       ["o", "Session detail (harness, model, cwd, branch, last prompts, resume cmd)"],
       ["f", "Filter by harness: all → cc Claude Code → cx Codex → oc OpenCode → pi Pi"],

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,22 +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>