@brimveyn/aimux 1.13.2 → 1.14.1

package/src/ui/components/layout/sidebar/sidebar.tsx

@@ -1,34 +1,16 @@
-import type {
-  BoxRenderable,
-  MouseEvent as OtuiMouseEvent,
-  ScrollBoxRenderable,
-} from '@opentui/core'
+import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import { memo, type ReactNode, useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 
-import type { BranchDivergence } from '../../../../state/types'
-
-import { useWorktreeDivergencePolling } from '../../../../git/worktree-divergence-poller'
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
-import {
-  getActiveWorktree,
-  getRenderedTabWorktreeId,
-  getSessionProjectPath,
-  getWorktreeColor,
-  orderTabsByWorktree,
-} from '../../../../state/session-worktrees'
-import { getCurrentTheme, type ResolvedTuiTheme, useTheme } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { buildGitPaneContextMenu } from '../../git/pane/git-pane-context-menu'
 import { GitPaneWidget } from '../../git/pane/git-pane-widget'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
-import { buildTabGroupInfo } from './sidebar-group-metadata'
-import { TabItem } from './tab-item'
-import { useSidebarAutoScroll } from './use-sidebar-auto-scroll'
-import { useSidebarBranch } from './use-sidebar-branch'
+import { WorkspaceList } from './workspace-list'
 
 interface SidebarProps {
-  onTabActivate?: (tabId: string) => void
   onResizeDrag?: (event: OtuiMouseEvent) => boolean
   onResizeDragEnd?: () => void
   onEmbeddedGitResizeStart?: (info: {
@@ -38,314 +20,9 @@ interface SidebarProps {
   }) => void
 }
 
-const GUTTER_START = '╭'
-const GUTTER_MIDDLE = '├'
-const GUTTER_END = '╰'
-const GUTTER_PAD = '│'
 const RESIZE_HANDLE = '─'
-const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
-
-// Left accent strip + trailing space for a worktree group header.
-const WORKTREE_STRIP = '▍ '
-
-// Compact "↑ahead ↓behind" label for a worktree group header; empty when the
-// branch is level with its base (or divergence isn't known yet).
-function formatDivergence(divergence: BranchDivergence | undefined): string {
-  if (divergence == null) return ''
-  const parts: string[] = []
-  if (divergence.ahead > 0) parts.push(`↑${divergence.ahead}`)
-  if (divergence.behind > 0) parts.push(`↓${divergence.behind}`)
-  return parts.join(' ')
-}
-
-// Fit a worktree label into `max` columns, ellipsizing when it would overflow.
-// Branch names are ASCII, so character count tracks rendered column width.
-function truncateLabel(label: string, max: number): string {
-  if (max <= 0) return ''
-  if (label.length <= max) return label
-  if (max === 1) return '…'
-  return `${label.slice(0, max - 1)}…`
-}
-
-function getRowBackground({
-  alternate,
-  isActive,
-  t,
-}: {
-  isActive: boolean
-  alternate: boolean
-  t: ResolvedTuiTheme
-}): string | undefined {
-  if (isActive) return t.backgroundElement
-  if (alternate) return t.backgroundPanel
-  return t.backgroundPanel
-}
-
-const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: number }) {
-  const t = useTheme()
-  const currentSessionId = useAppStore((s) => s.currentSessionId)
-  const sessions = useAppStore((s) => s.sessions)
-  const currentSession =
-    currentSessionId != null && currentSessionId !== ''
-      ? sessions.find((s) => s.id === currentSessionId)
-      : undefined
-  const activeWorktree = getActiveWorktree(currentSession)
-  const projectPath = getSessionProjectPath(currentSession)
-  const branch = useSidebarBranch(projectPath)
-
-  const handleNewAssistant = useCallback((e: OtuiMouseEvent) => {
-    e.stopPropagation()
-    dispatchGlobal({ type: 'open-new-tab-modal' })
-  }, [])
-
-  return (
-    <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={t.text} selectable={false}>
-        <strong>aimux</strong>
-      </text>
-      <text fg={t.text} selectable={false}>
-        {currentSession ? currentSession.name : 'No workspace selected'}
-      </text>
-      {(branch != null && branch !== '') || activeWorktree ? (
-        <box flexDirection="row">
-          <text fg={t.text} selectable={false}>
-            {'\u{e702}'}{' '}
-          </text>
-          <text fg={t.text} selectable={false}>
-            {branch ?? activeWorktree?.branch ?? activeWorktree?.name}
-          </text>
-          {activeWorktree?.source === 'aimux-temp' ? (
-            <text fg={t.textMuted} selectable={false}>
-              {' '}
-              tmp
-            </text>
-          ) : null}
-        </box>
-      ) : null}
-      <box
-        flexDirection="row"
-        paddingY={1}
-        backgroundColor={t.backgroundPanel}
-        justifyContent="center"
-        marginTop={1}
-        onMouseDown={handleNewAssistant}
-      >
-        <text fg={t.text} selectable={false}>
-          + New assistant
-        </text>
-      </box>
-      <text fg={t.textMuted} selectable={false}>
-        {'·'.repeat(Math.max(0, contentWidth - 2))}
-      </text>
-    </box>
-  )
-})
-
-function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
-  const t = getCurrentTheme()
-  return (
-    <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={t.border} selectable={false}>
-        {/* oxlint-disable-next-line no-nested-ternary */}
-        {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
-      </text>
-      <text fg={t.border} selectable={false}>
-        {isGroupEnd ? GUTTER_END : GUTTER_PAD}
-      </text>
-    </box>
-  )
-}
-
-const TabRowButton = memo(function TabRowButton({
-  backgroundColor,
-  children,
-  onActivate,
-  tabId,
-}: {
-  tabId: string
-  backgroundColor: string | undefined
-  onActivate?: (tabId: string) => void
-  children: ReactNode
-}) {
-  const handleMouseDown = useCallback(
-    (event: OtuiMouseEvent) => {
-      event.stopPropagation()
-      onActivate?.(tabId)
-    },
-    [onActivate, tabId]
-  )
-  return (
-    <box backgroundColor={backgroundColor} flexDirection="row" onMouseDown={handleMouseDown}>
-      {children}
-    </box>
-  )
-})
-
-interface TabsBodyProps {
-  onTabActivate?: (tabId: string) => void
-  contentWidth: number
-}
-
-const TabsBody = memo(function TabsBody({ contentWidth, onTabActivate }: TabsBodyProps) {
-  const t = useTheme()
-  const tabs = useAppStore((s) => s.tabs)
-  const activeTabId = useAppStore((s) => s.activeTabId)
-  const focusMode = useAppStore((s) => s.focusMode)
-  const layoutTrees = useAppStore((s) => s.layoutTrees)
-  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
-  const currentSessionId = useAppStore((s) => s.currentSessionId)
-  const sessions = useAppStore((s) => s.sessions)
-  const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
-  const currentSession =
-    currentSessionId != null && currentSessionId !== ''
-      ? sessions.find((s) => s.id === currentSessionId)
-      : undefined
-  const worktrees = useMemo(() => currentSession?.worktrees ?? [], [currentSession?.worktrees])
-  const worktreeById = useMemo(
-    () => new Map(worktrees.map((worktree) => [worktree.id, worktree])),
-    [worktrees]
-  )
-  const groupedTabs = useMemo(() => {
-    return orderTabsByWorktree(tabs, currentSession)
-  }, [currentSession, tabs])
-  const showWorktreeSeparators = useMemo(() => {
-    const ids = new Set<string>()
-    for (const tab of groupedTabs) {
-      ids.add(getRenderedTabWorktreeId(tab, worktrees))
-    }
-    const activeWorktreeId =
-      currentSession?.activeWorktreeId ?? getActiveWorktree(currentSession)?.id
-    if (activeWorktreeId != null && activeWorktreeId !== '') ids.add(activeWorktreeId)
-    return ids.size >= 2
-  }, [currentSession, groupedTabs, worktrees])
-
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-  const activeIndex = groupedTabs.findIndex((tab) => tab.id === activeTabId)
-  const tabGroupInfo = useMemo(
-    () => buildTabGroupInfo(layoutTrees, groupedTabs),
-    [layoutTrees, groupedTabs]
-  )
-
-  useSidebarAutoScroll({
-    activeIndex,
-    activeTabId,
-    scrollRef,
-    tabCount: groupedTabs.length,
-    visible: sidebarVisible,
-  })
-
-  return (
-    <scrollbox
-      paddingTop={0}
-      ref={scrollRef}
-      flexGrow={1}
-      scrollY
-      viewportCulling
-      contentOptions={COLUMN_CONTENT_OPTIONS}
-    >
-      {tabs.length === 0 ? (
-        <box paddingTop={1}>
-          <text fg={t.textMuted} selectable={false}>
-            No tabs yet. Press Ctrl+n.
-          </text>
-        </box>
-      ) : (
-        groupedTabs.map((tab, index) => {
-          const isActive = tab.id === activeTabId
-          const alternate = index % 2 === 1
-          const info = tabGroupInfo.get(tab.id)
-          const inLayout = !!(info?.inLayout === true)
-          const inGroup = info ? index >= info.groupStart && index <= info.groupEnd : false
-          const isGroupStart = info ? index === info.groupStart : false
-          const isGroupEnd = info ? index === info.groupEnd : false
-          const isGroupMiddle = inGroup && !isGroupStart && !isGroupEnd
-          const tabOwnWorktree =
-            tab.worktreeId != null && tab.worktreeId !== ''
-              ? worktreeById.get(tab.worktreeId)
-              : undefined
-          let tabWorktree = tabOwnWorktree
-          if (!tabWorktree && worktrees.length > 1) {
-            tabWorktree = worktrees[0]
-          }
-          // A tab's worktree can be moved when it has a branch (squash needs one,
-          // so not the primary) and there's at least one other worktree to land in.
-          const moveWorktreeId =
-            tabOwnWorktree?.branch != null && tabOwnWorktree.branch !== '' && worktrees.length > 1
-              ? tabOwnWorktree.id
-              : undefined
-          const prevTab = groupedTabs[index - 1]
-          const startsWorktreeGroup =
-            !prevTab ||
-            getRenderedTabWorktreeId(prevTab, worktrees) !==
-              getRenderedTabWorktreeId(tab, worktrees)
-          const worktreeColor = tabWorktree
-            ? (tabWorktree.color ?? getWorktreeColor(tabWorktree.id))
-            : t.textMuted
-          const worktreeLabel = tabWorktree?.branch ?? tabWorktree?.name ?? 'main'
-          const aheadBehind = formatDivergence(
-            tabWorktree != null ? worktreeDivergence[tabWorktree.id] : undefined
-          )
-          const aheadBehindText = aheadBehind === '' ? '' : ` ${aheadBehind}`
-          // Reserve room for the strip, the ahead/behind chip and a 1-col gap so
-          // the header never wraps; the divider fills whatever remains (min 0).
-          const labelBudget = Math.max(
-            0,
-            contentWidth - WORKTREE_STRIP.length - aheadBehindText.length - 1
-          )
-          const headerLabel = truncateLabel(worktreeLabel, labelBudget)
 
-          return (
-            <box key={tab.id} flexDirection="column">
-              {showWorktreeSeparators && startsWorktreeGroup ? (
-                <box flexDirection="row" overflow="hidden" paddingTop={index === 0 ? 0 : 1}>
-                  <text selectable={false} wrapMode="none" flexShrink={0}>
-                    <span fg={worktreeColor}>
-                      {WORKTREE_STRIP}
-                      {headerLabel}
-                    </span>
-                    {aheadBehindText !== '' ? (
-                      <span fg={t.textMuted}>{aheadBehindText}</span>
-                    ) : null}
-                  </text>
-                  <box flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden">
-                    <text fg={t.textMuted} selectable={false} wrapMode="none">
-                      {' '}
-                      {'─'.repeat(contentWidth)}
-                    </text>
-                  </box>
-                </box>
-              ) : null}
-              <TabRowButton
-                tabId={tab.id}
-                onActivate={onTabActivate}
-                backgroundColor={getRowBackground({ alternate, isActive, t })}
-              >
-                {inGroup ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd) : null}
-                <box flexGrow={1}>
-                  <TabItem
-                    id={`sidebar-tab-${tab.id}`}
-                    tab={tab}
-                    active={isActive}
-                    focused={focusMode === 'navigation'}
-                    inLayout={inLayout}
-                    moveWorktreeId={moveWorktreeId}
-                  />
-                </box>
-              </TabRowButton>
-            </box>
-          )
-        })
-      )}
-    </scrollbox>
-  )
-})
-
-export function Sidebar({
-  onEmbeddedGitResizeStart,
-  onResizeDrag,
-  onResizeDragEnd,
-  onTabActivate,
-}: SidebarProps) {
+export function Sidebar({ onEmbeddedGitResizeStart, onResizeDrag, onResizeDragEnd }: SidebarProps) {
   const t = useTheme()
   const sidebarBg = t.background
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
@@ -353,7 +30,6 @@ export function Sidebar({
   const gitPane = useAppStore((s) => s.gitPane)
   const focusMode = useAppStore((s) => s.focusMode)
   const bodyRef = useRef<BoxRenderable | null>(null)
-  useWorktreeDivergencePolling(sidebarVisible)
 
   const handleSidebarMouseDown = useCallback(() => {
     if (focusMode === 'terminal-input') {
@@ -418,15 +94,10 @@ export function Sidebar({
     }
   )
 
-  // flex-grow scaled by 100 (integer preferred); tabs gets (1-ratio), git gets ratio.
-  const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
+  // flex-grow scaled by 100 (integer preferred); workspace list gets (1-ratio), git gets ratio.
+  const listGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
 
-  const separator = (
-    <text fg={t.textMuted} selectable={false}>
-      {'·'.repeat(Math.max(0, contentWidth - 2))}
-    </text>
-  )
   const gitBody = gitEmbedded ? (
     <ContextMenuBox
       flexDirection="column"
@@ -462,7 +133,6 @@ export function Sidebar({
     >
       <box flexDirection="row" width={sidebarWidth} flexGrow={1} overflow="hidden">
         <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
-          <SidebarTop contentWidth={contentWidth} />
           <box ref={bodyRef} flexDirection="column" flexGrow={1} overflow="hidden">
             {gitOnTop ? (
               <>
@@ -472,12 +142,12 @@ export function Sidebar({
             ) : null}
             <box
               flexDirection="column"
-              flexGrow={tabsGrow}
+              flexGrow={listGrow}
               flexShrink={1}
               flexBasis={0}
               overflow="hidden"
             >
-              <TabsBody onTabActivate={onTabActivate} contentWidth={contentWidth} />
+              <WorkspaceList contentWidth={contentWidth} />
             </box>
             {gitOnBottom ? (
               <>
@@ -486,7 +156,6 @@ export function Sidebar({
               </>
             ) : null}
           </box>
-          {!gitEmbedded ? separator : null}
         </box>
       </box>
     </ContextMenuBox>

package/src/ui/components/layout/sidebar/tab-item.tsx

@@ -17,6 +17,10 @@ interface TabItemProps {
   inLayout?: boolean
   /** When set, this tab's worktree can be moved — adds a "Move worktree" entry. */
   moveWorktreeId?: string
+  /** 1-based position in the visible tab list — rendered as `[N]` and matches Leader+N. */
+  indexLabel?: string
+  /** Render the close × unconditionally instead of only on hover. */
+  alwaysShowClose?: boolean
 }
 
 function getStatusColor(status: TabSession['status']): string {
@@ -50,31 +54,34 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
   return inLayout ? t.textMuted : t.textMuted
 }
 
-function BusyIndicator() {
+function BusyGlyph() {
   const t = useTheme()
   const frame = useBusySpinner()
   return (
     <text fg={t.primary} selectable={false}>
-      {frame} working
+      {' '}
+      {frame}
     </text>
   )
 }
 
-function WaitingIndicator() {
+function WaitingGlyph() {
   const t = useTheme()
   return (
     <text fg={t.warning} selectable={false}>
-      ? waiting
+      {' '}
+      ?
     </text>
   )
 }
 
-function ActivityIndicator({ tab }: { tab: TabSession }) {
+function ActivityGlyph({ tab }: { tab: TabSession }) {
   const t = useTheme()
   if (tab.status === 'error') {
     return (
       <text fg={t.error} selectable={false}>
-        ✗ error
+        {' '}
+        ✗
       </text>
     )
   }
@@ -82,37 +89,48 @@ function ActivityIndicator({ tab }: { tab: TabSession }) {
   if (tab.status === 'disconnected') {
     return (
       <text fg={t.warning} selectable={false}>
-        ⏸ restore
+        {' '}
+        ⏸
       </text>
     )
   }
 
   if (tab.activity === 'working') {
-    return <BusyIndicator />
+    return <BusyGlyph />
   }
 
   if (tab.activity === 'waiting-input') {
-    return <WaitingIndicator />
+    return <WaitingGlyph />
   }
 
   if (tab.activity === 'idle') {
     return (
       <text fg={t.success} selectable={false}>
-        ● idle
+        {' '}
+        ●
       </text>
     )
   }
 
   return (
     <text fg={getStatusColor(tab.status)} selectable={false}>
-      {tab.status}
+      {' '}
+      ·
     </text>
   )
 }
 
-export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }: TabItemProps) {
+export function TabItem({
+  active,
+  alwaysShowClose,
+  focused,
+  id,
+  indexLabel,
+  inLayout,
+  moveWorktreeId,
+  tab,
+}: TabItemProps) {
   const t = useTheme()
-  const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
   const indicatorColor = getIndicatorColor(active, focused, isInLayout)
@@ -135,21 +153,19 @@ export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }:
         },
       ],
       [
-        'Move up',
+        'Move left',
         () => {
           dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
           dispatchGlobal({ delta: -1, type: 'reorder-active-tab' })
         },
       ],
       [
-        'Move down',
+        'Move right',
         () => {
           dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
           dispatchGlobal({ delta: 1, type: 'reorder-active-tab' })
         },
       ],
-      // Move this tab's worktree into another one. Opened from here it overlays
-      // the normal view (no git mode) since the open action doesn't touch focus.
       ...(moveWorktreeId != null && moveWorktreeId !== ''
         ? [
             [
@@ -181,38 +197,31 @@ export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }:
       id={id}
       paddingLeft={1}
       paddingRight={1}
-      paddingTop={0}
-      paddingBottom={0}
-      flexDirection="column"
-      gap={0}
+      flexDirection="row"
+      alignItems="center"
       rightClickMenu={rightClickMenu}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
     >
-      <box flexDirection="row" alignItems="center">
-        <text fg={indicatorColor} selectable={false}>
-          {indicator}{' '}
+      <text fg={indicatorColor} selectable={false}>
+        {indicator}{' '}
+      </text>
+      {indexLabel != null && indexLabel !== '' ? (
+        <text fg={t.textMuted} selectable={false} wrapMode="none">
+          {indexLabel}{' '}
         </text>
-        <box flexGrow={1}>
-          <text fg={active ? t.text : t.textMuted} selectable={false}>
-            {tab.title}
+      ) : null}
+      <text fg={active ? t.text : t.textMuted} selectable={false} wrapMode="none">
+        {tab.title}
+      </text>
+      <ActivityGlyph tab={tab} />
+      {alwaysShowClose === true || hovered ? (
+        <box paddingLeft={1} onMouseDown={handleCloseMouseDown}>
+          <text fg={t.textMuted} selectable={false}>
+            ×
           </text>
         </box>
-        {hovered ? (
-          <box onMouseDown={handleCloseMouseDown}>
-            <text fg={t.textMuted} selectable={false}>
-              ×
-            </text>
-          </box>
-        ) : null}
-      </box>
-      <box flexDirection="row">
-        <text fg={t.textMuted} selectable={false}>
-          {' '}
-          {label}{' '}
-        </text>
-        <ActivityIndicator tab={tab} />
-      </box>
+      ) : null}
     </ContextMenuBox>
   )
 }

package/src/ui/components/layout/sidebar/use-sidebar-auto-scroll.ts

@@ -1,63 +1,20 @@
 import type { ScrollBoxRenderable } from '@opentui/core'
 
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 
-import { getSidebarScrollTarget } from './sidebar-scroll'
-
-interface UseSidebarAutoScrollOptions {
+interface Options {
   scrollRef: React.RefObject<ScrollBoxRenderable | null>
   visible: boolean
-  activeTabId: string | null
-  activeIndex: number
-  tabCount: number
+  /** Full id of the active row to bring into view (workspace OR worktree). */
+  activeRowId: string | null
 }
 
-export function useSidebarAutoScroll({
-  activeIndex,
-  activeTabId,
-  scrollRef,
-  tabCount,
-  visible,
-}: UseSidebarAutoScrollOptions): void {
-  const previousActiveIndexRef = useRef(-1)
-  const previousVisibilityRef = useRef(visible)
-
+export function useSidebarAutoScroll({ activeRowId, scrollRef, visible }: Options): void {
   useEffect(() => {
-    if (!visible) {
-      previousVisibilityRef.current = false
-      previousActiveIndexRef.current = activeIndex
-      return
-    }
-
+    if (!visible) return
+    if (activeRowId == null || activeRowId === '') return
     const scrollbox = scrollRef.current
-    if (!scrollbox) {
-      previousVisibilityRef.current = visible
-      previousActiveIndexRef.current = activeIndex
-      return
-    }
-
-    if (!previousVisibilityRef.current && activeTabId != null && activeTabId !== '') {
-      scrollbox.scrollChildIntoView(`sidebar-tab-${activeTabId}`)
-      previousVisibilityRef.current = true
-      previousActiveIndexRef.current = activeIndex
-      return
-    }
-
-    const scrollTarget = getSidebarScrollTarget({
-      nextActiveIndex: activeIndex,
-      previousActiveIndex: previousActiveIndexRef.current,
-      tabCount,
-    })
-
-    if (scrollTarget === 'top') {
-      scrollbox.scrollTo({ x: 0, y: 0 })
-    } else if (scrollTarget === 'bottom') {
-      scrollbox.scrollTo({ x: 0, y: scrollbox.scrollHeight })
-    } else if (scrollTarget === 'active-item' && activeTabId != null && activeTabId !== '') {
-      scrollbox.scrollChildIntoView(`sidebar-tab-${activeTabId}`)
-    }
-
-    previousVisibilityRef.current = visible
-    previousActiveIndexRef.current = activeIndex
-  }, [activeIndex, activeTabId, scrollRef, tabCount, visible])
+    if (!scrollbox) return
+    scrollbox.scrollChildIntoView(activeRowId)
+  }, [activeRowId, scrollRef, visible])
 }