@tokentop/ttop 0.6.1 → 0.7.0

package/src/tui/views/Dashboard.tsx

@@ -60,12 +60,6 @@ export function Dashboard() {
   const cardRefs = useRef<(BoxRenderable | null)[]>([]);
   const inputRef = useRef<InputRenderable>(null);
 
-  useEffect(() => {
-    if (isInitialized) {
-      refreshAllProviders();
-    }
-  }, [isInitialized]);
-
   const getMaxUsage = useCallback((state: ProviderState) => {
     if (!state.usage?.limits) return 0;
 

package/src/tui/views/RealTimeDashboard.tsx

@@ -1,6 +1,15 @@
 import type { ScrollBoxRenderable } from "@opentui/core";
 import { useTerminalDimensions } from "@opentui/react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { notificationBus } from "@/plugins/notification-bus.ts";
 import { classifyProviderError } from "@/utils/error-category.ts";
 import { HelpOverlay } from "../components/HelpOverlay.tsx";
@@ -20,6 +29,7 @@ import { useDashboardKeyboard } from "../hooks/useDashboardKeyboard.ts";
 import type { SortDirection, SortField } from "../types/sort.ts";
 import { SORT_FIELDS } from "../types/sort.ts";
 import { getProviderColor } from "../utils/providerColor.ts";
+import { computeScrollOffset } from "../utils/scrollFollow.ts";
 
 export function RealTimeDashboard() {
   const colors = useColors();
@@ -77,7 +87,13 @@ export function RealTimeDashboard() {
   const { showDrawer, isOpen: showSessionDrawer } = useDrawer();
 
   const [showHelp, setShowHelp] = useState(false);
-  const [selectedRow, setSelectedRow] = useState(0);
+  // Cursor and scroll offset share one state so batched j-presses advance
+  // both in lockstep — see setSelectedRow below.
+  const [nav, setNav] = useState<{ selectedRow: number; scrollOffset: number }>({
+    selectedRow: 0,
+    scrollOffset: 0,
+  });
+  const { selectedRow, scrollOffset } = nav;
   const [focusedPanel, setFocusedPanel] = useState<"sessions" | "sidebar" | "limits">("sessions");
   const [sidebarCollapsed, setSidebarCollapsed] = useState(config.display.sidebarCollapsed);
   const [filterQuery, setFilterQuery] = useState("");
@@ -86,12 +102,7 @@ export function RealTimeDashboard() {
   const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
   const [showSortOverlay, setShowSortOverlay] = useState(false);
   const [pendingG, setPendingG] = useState(false);
-  const scrollOffsetRef = useRef(0);
   const selectedSessionIdRef = useRef<string | null>(null);
-  const setScrollOffset = useCallback((val: number) => {
-    scrollOffsetRef.current = val;
-    sessionsScrollboxRef.current?.scrollTo(val);
-  }, []);
   const [limitSelectedIndex, setLimitSelectedIndex] = useState(0);
   const [driverDimension, setDriverDimension] = useState<DriverDimension>("model");
   const [selectedDriverIndex, setSelectedDriverIndex] = useState(0);
@@ -102,6 +113,32 @@ export function RealTimeDashboard() {
 
   const sessionsScrollboxRef = useRef<ScrollBoxRenderable>(null);
 
+  const visibleRowsRef = useRef(visibleRows);
+  visibleRowsRef.current = visibleRows;
+  const sessionsLengthRef = useRef(0);
+
+  const setSelectedRow = useCallback<Dispatch<SetStateAction<number>>>((arg) => {
+    setNav((prev) => {
+      const next = typeof arg === "function" ? arg(prev.selectedRow) : arg;
+      const clamped = Math.max(0, next);
+      const newOffset = computeScrollOffset(
+        clamped,
+        prev.scrollOffset,
+        visibleRowsRef.current,
+        sessionsLengthRef.current,
+      );
+      if (clamped === prev.selectedRow && newOffset === prev.scrollOffset) return prev;
+      return { selectedRow: clamped, scrollOffset: newOffset };
+    });
+  }, []);
+
+  const setScrollOffset = useCallback((val: number) => {
+    setNav((prev) => {
+      if (val === prev.scrollOffset) return prev;
+      return { ...prev, scrollOffset: val };
+    });
+  }, []);
+
   const configuredProviders = useMemo(() => {
     return Array.from(providers.values())
       .filter((p) => p.configured)
@@ -123,7 +160,9 @@ export function RealTimeDashboard() {
   );
 
   const baseFilteredSessions = useMemo(() => {
-    let result = [...agentSessions];
+    if (windowMs === null && !filterQuery) return agentSessions;
+
+    let result = agentSessions;
 
     if (windowMs !== null) {
       const cutoff = Date.now() - windowMs;
@@ -255,8 +294,12 @@ export function RealTimeDashboard() {
     return result;
   }, [baseFilteredSessions, activeDriverFilter, driverDimension, sortField, sortDirection]);
 
-  // Stabilize selection across re-sorts: track selected session by ID
-  // so the highlight follows the same session when live data causes reordering.
+  sessionsLengthRef.current = processedSessions.length;
+
+  // A keypress and a refresh tick can batch into one render; if they do,
+  // `prev` may be the user's new row while `selectedSessionIdRef` is still
+  // the session they moved *from*. Trusting `prev` when it resolves to a
+  // valid session prevents a snap-back bounce.
   useLayoutEffect(() => {
     if (processedSessions.length === 0) {
       setSelectedRow(0);
@@ -265,24 +308,40 @@ export function RealTimeDashboard() {
       return;
     }
 
-    if (selectedSessionIdRef.current) {
-      const newIndex = processedSessions.findIndex(
-        (s) => s.sessionId === selectedSessionIdRef.current,
-      );
-      if (newIndex !== -1) {
-        setSelectedRow(newIndex);
-        return;
+    setSelectedRow((prev) => {
+      const currentSession = processedSessions[prev];
+
+      if (currentSession) {
+        if (currentSession.sessionId === selectedSessionIdRef.current) {
+          return prev;
+        }
+        if (selectedSessionIdRef.current) {
+          const trackedIndex = processedSessions.findIndex(
+            (s) => s.sessionId === selectedSessionIdRef.current,
+          );
+          if (trackedIndex !== -1 && trackedIndex !== prev) {
+            return trackedIndex;
+          }
+        }
+        selectedSessionIdRef.current = currentSession.sessionId;
+        return prev;
+      }
+
+      if (selectedSessionIdRef.current) {
+        const trackedIndex = processedSessions.findIndex(
+          (s) => s.sessionId === selectedSessionIdRef.current,
+        );
+        if (trackedIndex !== -1) return trackedIndex;
+        selectedSessionIdRef.current = null;
       }
-      // Tracked session was filtered out — fall through to clamp
-      selectedSessionIdRef.current = null;
-    }
 
-    // Clamp to valid range (functional update avoids selectedRow in deps)
-    setSelectedRow((prev) => Math.min(prev, processedSessions.length - 1));
+      const clamped = Math.min(prev, processedSessions.length - 1);
+      selectedSessionIdRef.current = processedSessions[clamped]?.sessionId ?? null;
+      return clamped;
+    });
   }, [processedSessions, setScrollOffset]);
 
-  // Record which session the user selected (runs after navigation and stabilization)
-  useEffect(() => {
+  useLayoutEffect(() => {
     const session = processedSessions[selectedRow];
     if (session) {
       selectedSessionIdRef.current = session.sessionId;
@@ -290,19 +349,22 @@ export function RealTimeDashboard() {
   }, [selectedRow, processedSessions]);
 
   useLayoutEffect(() => {
-    if (!sessionsScrollboxRef.current || processedSessions.length === 0) return;
-
-    let newOffset = scrollOffsetRef.current;
-
-    if (selectedRow < newOffset) {
-      newOffset = selectedRow;
-    } else if (selectedRow >= newOffset + visibleRows) {
-      newOffset = selectedRow - visibleRows + 1;
-    }
+    if (processedSessions.length === 0) return;
+    setNav((prev) => {
+      const newOffset = computeScrollOffset(
+        prev.selectedRow,
+        prev.scrollOffset,
+        visibleRows,
+        processedSessions.length,
+      );
+      if (newOffset === prev.scrollOffset) return prev;
+      return { ...prev, scrollOffset: newOffset };
+    });
+  }, [processedSessions.length, visibleRows]);
 
-    scrollOffsetRef.current = newOffset;
-    sessionsScrollboxRef.current.scrollTo(newOffset);
-  }, [selectedRow, processedSessions.length, visibleRows]);
+  useLayoutEffect(() => {
+    sessionsScrollboxRef.current?.scrollTo(scrollOffset);
+  }, [scrollOffset]);
 
   const openSessionDrawer = useCallback(() => {
     const session = processedSessions[selectedRow];
@@ -325,7 +387,7 @@ export function RealTimeDashboard() {
       sortField,
       sortDirection,
       pendingG,
-      scrollOffset: scrollOffsetRef.current,
+      scrollOffset,
       limitSelectedIndex,
       providerCount: configuredProviders.length,
       driverDimension,
@@ -409,7 +471,10 @@ export function RealTimeDashboard() {
     }
   };
 
-  const activeCount = agentSessions.filter((s) => s.status === "active").length;
+  const activeCount = useMemo(
+    () => agentSessions.reduce((n, s) => (s.status === "active" ? n + 1 : n), 0),
+    [agentSessions],
+  );
 
   return (
     <box flexDirection="column" flexGrow={1} padding={1} gap={1} overflow="hidden">
@@ -491,6 +556,8 @@ export function RealTimeDashboard() {
           ref={sessionsScrollboxRef}
           sessions={processedSessions}
           selectedRow={selectedRow}
+          scrollOffset={scrollOffset}
+          visibleRows={visibleRows}
           isLoading={isLoading}
           isFiltering={isFiltering}
           filterQuery={filterQuery}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.6.1"; // x-release-please-version
+export const VERSION = "0.7.0"; // x-release-please-version