@brimveyn/aimux 1.9.0 → 1.9.1

package/src/ui/components/git/diff-renderer/use-diff-preparation.ts

@@ -0,0 +1,240 @@
+import type { ThemedToken } from 'shiki'
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import type { DiffSegment } from './build-rows'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { getHighlightsTokens, getParsedPayload } from '../../../../state/types'
+import { type HighlightPatch, tokenizeSegment } from './highlight'
+import { prepareDiff, type PreparedParsedDiff } from './prepare-diff'
+
+export interface DiffPreparation {
+  file: PreparedParsedDiff['file']
+  filetype: string | null
+  firstChangeOffset: number
+  highlights: { add: ThemedToken[][]; del: ThemedToken[][] }
+  preparing: boolean
+  ready: boolean
+  requestSegmentHighlights: (segments: readonly DiffSegment[]) => void
+  segments: DiffSegment[]
+}
+
+const EMPTY_HIGHLIGHTS = { add: [] as ThemedToken[][], del: [] as ThemedToken[][] }
+const EMPTY_PARSED: PreparedParsedDiff = {
+  file: null,
+  filetype: null,
+  firstChangeOffset: -1,
+  segments: [],
+}
+const MAX_HIGHLIGHT_SEGMENTS_PER_PASS = 8
+
+function applyHighlightPatches(
+  source: { add: ThemedToken[][]; del: ThemedToken[][] },
+  add: readonly HighlightPatch[],
+  del: readonly HighlightPatch[]
+): { add: ThemedToken[][]; del: ThemedToken[][] } {
+  const nextAdd = [...source.add]
+  const nextDel = [...source.del]
+  for (const patch of add) {
+    for (let i = 0; i < patch.tokens.length; i++) nextAdd[patch.start + i] = patch.tokens[i] ?? []
+  }
+  for (const patch of del) {
+    for (let i = 0; i < patch.tokens.length; i++) nextDel[patch.start + i] = patch.tokens[i] ?? []
+  }
+  return { add: nextAdd, del: nextDel }
+}
+
+function segmentHasHighlights(
+  segment: DiffSegment,
+  highlights: { add: ThemedToken[][]; del: ThemedToken[][] }
+): boolean {
+  if (segment.kind === 'context') {
+    for (let i = 0; i < segment.count; i++) {
+      if (!highlights.add[segment.addStart + i] || !highlights.del[segment.delStart + i])
+        return false
+    }
+    return true
+  }
+  if (segment.kind === 'change') {
+    for (let i = 0; i < segment.additions; i++) {
+      if (!highlights.add[segment.addStart + i]) return false
+    }
+    for (let i = 0; i < segment.deletions; i++) {
+      if (!highlights.del[segment.delStart + i]) return false
+    }
+    return true
+  }
+  return true
+}
+
+export function useDiffPreparation(
+  cacheKey: string,
+  diff: string,
+  path: string,
+  themeId: string
+): DiffPreparation {
+  const requestOwner = `${cacheKey}|${themeId}|${diff}`
+  const cachedParsed = useAppStore((s) => s.gitMode.parsedFiles[cacheKey])
+  const highlightKey = `${cacheKey}|${themeId}`
+  const cachedHighlights = useAppStore((s) => s.gitMode.highlights[highlightKey])
+
+  const [preparing, setPreparing] = useState(false)
+  const [localParsed, setLocalParsed] = useState<PreparedParsedDiff | null>(null)
+  const [localHighlights, setLocalHighlights] = useState(EMPTY_HIGHLIGHTS)
+  const [localHash, setLocalHash] = useState<string | null>(null)
+  const completedSegmentsRef = useRef(new Set<string>())
+  const currentOwnerRef = useRef(requestOwner)
+  const pendingSegmentsRef = useRef(new Set<string>())
+  const requestVersionRef = useRef(0)
+  const localOwnerMatches = currentOwnerRef.current === requestOwner
+
+  const parsed = useMemo(() => {
+    return (
+      getParsedPayload<PreparedParsedDiff>(cachedParsed) ??
+      (localOwnerMatches ? localParsed : null) ??
+      EMPTY_PARSED
+    )
+  }, [cachedParsed, localOwnerMatches, localParsed])
+
+  const highlights = useMemo(() => {
+    const cached = getHighlightsTokens(cachedHighlights)
+    if (cached && cachedHighlights?.hash === cachedParsed?.hash) return cached
+    return localOwnerMatches ? localHighlights : EMPTY_HIGHLIGHTS
+  }, [cachedHighlights, cachedParsed, localHighlights, localOwnerMatches])
+
+  const ready = !!parsed.file
+
+  useLayoutEffect(() => {
+    currentOwnerRef.current = requestOwner
+    requestVersionRef.current += 1
+    completedSegmentsRef.current.clear()
+    pendingSegmentsRef.current.clear()
+    setLocalParsed(null)
+    setLocalHighlights(EMPTY_HIGHLIGHTS)
+    setLocalHash(null)
+    setPreparing(false)
+  }, [cacheKey, diff, path, requestOwner, themeId])
+
+  useEffect(() => {
+    if (cachedParsed) return
+
+    const controller = new AbortController()
+    const owner = requestOwner
+    const version = requestVersionRef.current
+    setPreparing(true)
+    void prepareDiff(diff, path, { signal: controller.signal })
+      .then((result) => {
+        if (
+          controller.signal.aborted ||
+          requestVersionRef.current !== version ||
+          currentOwnerRef.current !== owner
+        ) {
+          return
+        }
+        setLocalParsed(result.parsed)
+        setLocalHighlights(result.highlights)
+        setLocalHash(result.hash)
+        dispatchGlobal({
+          file: result.parsed,
+          hash: result.hash,
+          key: cacheKey,
+          type: 'git-mode-set-parsed',
+        })
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (
+          !controller.signal.aborted &&
+          requestVersionRef.current === version &&
+          currentOwnerRef.current === owner
+        ) {
+          setPreparing(false)
+        }
+      })
+
+    return () => {
+      controller.abort()
+    }
+  }, [cacheKey, cachedParsed, diff, path, requestOwner, themeId])
+
+  const requestSegmentHighlights = useCallback(
+    (segments: readonly DiffSegment[]) => {
+      const file = parsed.file
+      const filetype = parsed.filetype
+      if (!file || !filetype) return
+      const owner = requestOwner
+      const version = requestVersionRef.current
+      const activeHash = cachedParsed?.hash ?? (localOwnerMatches ? localHash : null)
+      if (!activeHash) return
+      const next = segments.filter(
+        (segment) =>
+          (segment.kind === 'context' || segment.kind === 'change') &&
+          !completedSegmentsRef.current.has(segment.id) &&
+          !pendingSegmentsRef.current.has(segment.id) &&
+          !segmentHasHighlights(segment, highlights)
+      )
+      const queue = next.slice(0, MAX_HIGHLIGHT_SEGMENTS_PER_PASS)
+      if (queue.length === 0) return
+      for (const segment of queue) pendingSegmentsRef.current.add(segment.id)
+      void (async () => {
+        const add: HighlightPatch[] = []
+        const del: HighlightPatch[] = []
+        try {
+          for (const segment of queue) {
+            if (requestVersionRef.current !== version || currentOwnerRef.current !== owner) return
+            const patch = await tokenizeSegment(file, segment, filetype)
+            add.push(...patch.add)
+            del.push(...patch.del)
+          }
+        } finally {
+          if (requestVersionRef.current === version && currentOwnerRef.current === owner) {
+            for (const segment of queue) {
+              pendingSegmentsRef.current.delete(segment.id)
+              completedSegmentsRef.current.add(segment.id)
+            }
+          }
+        }
+        if (
+          requestVersionRef.current !== version ||
+          currentOwnerRef.current !== owner ||
+          (add.length === 0 && del.length === 0)
+        ) {
+          return
+        }
+        setLocalHighlights((current) => applyHighlightPatches(current, add, del))
+        dispatchGlobal({
+          add,
+          del,
+          hash: activeHash,
+          key: cacheKey,
+          themeId,
+          type: 'git-mode-merge-highlights',
+        })
+      })()
+    },
+    [
+      cacheKey,
+      cachedParsed?.hash,
+      highlights,
+      localHash,
+      localOwnerMatches,
+      parsed.file,
+      parsed.filetype,
+      requestOwner,
+      themeId,
+    ]
+  )
+
+  return {
+    file: parsed.file,
+    filetype: parsed.filetype,
+    firstChangeOffset: parsed.firstChangeOffset,
+    highlights,
+    preparing,
+    ready,
+    requestSegmentHighlights,
+    segments: parsed.segments,
+  }
+}

package/src/ui/components/git/diff-renderer/use-segment-virtualization.ts

@@ -0,0 +1,95 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import type { DiffSegment } from './build-rows'
+
+interface VirtualizedSegment<T extends DiffSegment> {
+  bottomSpacer: number
+  topSpacer: number
+  totalHeight: number
+  visible: T[]
+}
+
+interface Options<T extends DiffSegment> {
+  estimateHeight: (segment: T) => number
+  overscan: number
+  scrollRef: React.RefObject<ScrollBoxRenderable | null>
+  segments: readonly T[]
+  version: number
+}
+
+interface ViewportState {
+  height: number
+  scrollTop: number
+}
+
+function sameViewport(a: ViewportState, b: ViewportState): boolean {
+  return a.height === b.height && a.scrollTop === b.scrollTop
+}
+
+export function useSegmentVirtualization<T extends DiffSegment>({
+  estimateHeight,
+  overscan,
+  scrollRef,
+  segments,
+  version,
+}: Options<T>): VirtualizedSegment<T> {
+  const [viewport, setViewport] = useState<ViewportState>({ height: 0, scrollTop: 0 })
+  const estimateHeightRef = useRef(estimateHeight)
+
+  useEffect(() => {
+    estimateHeightRef.current = estimateHeight
+  }, [estimateHeight])
+
+  useEffect(() => {
+    let frame = 0
+    const tick = (): void => {
+      const node = scrollRef.current
+      const next = {
+        height: Math.max(1, node?.viewport.height ?? 0),
+        scrollTop: Math.max(0, node?.scrollTop ?? 0),
+      }
+      setViewport((prev) => (sameViewport(prev, next) ? prev : next))
+      frame = requestAnimationFrame(tick)
+    }
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [scrollRef])
+
+  return useMemo(() => {
+    void version
+    if (segments.length === 0) {
+      return { bottomSpacer: 0, topSpacer: 0, totalHeight: 0, visible: [] }
+    }
+    const topTarget = Math.max(0, viewport.scrollTop - overscan)
+    const bottomTarget = viewport.scrollTop + viewport.height + overscan
+    let totalHeight = 0
+    let topSpacer = 0
+    let start = 0
+    while (start < segments.length) {
+      const height = estimateHeightRef.current(segments[start] as T)
+      if (totalHeight + height > topTarget) break
+      topSpacer += height
+      totalHeight += height
+      start += 1
+    }
+    let end = start
+    while (end < segments.length && totalHeight < bottomTarget) {
+      totalHeight += estimateHeightRef.current(segments[end] as T)
+      end += 1
+    }
+    let bottomSpacer = 0
+    for (let i = end; i < segments.length; i++) {
+      bottomSpacer += estimateHeightRef.current(segments[i] as T)
+    }
+    totalHeight = topSpacer + bottomSpacer
+    for (let i = start; i < end; i++) totalHeight += estimateHeightRef.current(segments[i] as T)
+    return {
+      bottomSpacer,
+      topSpacer,
+      totalHeight,
+      visible: segments.slice(start, end) as T[],
+    }
+  }, [overscan, segments, version, viewport])
+}

package/src/ui/components/{git-panel.tsx → git/git-panel.tsx}

@@ -9,11 +9,15 @@ import type {
   GitPaneDiffCountConfig,
   GitPanelState,
   GitPanePathConfig,
-} from '../../state/types'
+} from '../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
-import { getCurrentTokens, getTransparent, useTokens, useTransparent } from '../theme'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
+import {
+  buildGitTreeRows,
+  type GitTreeFileRow,
+  type GitTreeFolderRow,
+} from '../../../state/git-tree'
+import { getCurrentTokens, getTransparent, useTokens, useTransparent } from '../../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -344,7 +348,7 @@ export const GitPanel = memo(function GitPanel({
   }, [selectedEntryKey, tree.visibleRows])
 
   return (
-    <box flexDirection="column" flexGrow={1} gap={0}>
+    <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden" gap={0}>
       {hasRemoteTracking ? (
         <text fg={t.muted}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}

package/src/ui/components/{git-view.tsx → git/git-view.tsx}

@@ -1,17 +1,17 @@
 import { useTerminalDimensions } from '@opentui/react'
 import { memo, useEffect, useRef } from 'react'
 
-import type { DiffData, GitDiffView } from '../../state/types'
-import type { ThemeId } from '../themes'
+import type { DiffData, GitDiffView } from '../../../state/types'
+import type { ThemeId } from '../../themes'
 
-import { diffHash } from '../../git/diff-hash'
-import { fetchDiff } from '../../git/git-diff'
-import { useGitPanelPolling } from '../../git/git-poller'
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal } from '../../state/dispatch-ref'
-import { getSelectedGitFile, gitFileKey } from '../../state/git-tree'
-import { setGitDiffScroller } from '../git-view-controls'
-import { useBg, useTokens } from '../theme'
+import { diffHash } from '../../../git/diff-hash'
+import { fetchDiff } from '../../../git/git-diff'
+import { useGitPanelPolling } from '../../../git/git-poller'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { getSelectedGitFile, gitFileKey } from '../../../state/git-tree'
+import { setGitDiffScroller } from '../../git-view-controls'
+import { useBg, useTokens } from '../../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
 import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
@@ -107,6 +107,7 @@ interface GitViewProps {
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   const t = useTokens()
   const sidebarBg = useBg('elevated')
+  const actionBg = useBg('selected')
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -206,7 +207,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   }
 
   return (
-    <box flexDirection="column" flexGrow={1}>
+    <box flexDirection="column" flexGrow={1} overflow="hidden">
       <box flexDirection="row" flexGrow={1}>
         <box
           width={fileBarWidth}
@@ -214,25 +215,28 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           backgroundColor={sidebarBg}
           padding={0}
           gap={0}
+          overflow="hidden"
         >
-          <text fg={t.palette.primary}>
-            <strong>aimux · git</strong>
-          </text>
-          {gitPanel.branch ? (
-            <box flexDirection="row">
-              <text fg={t.palette.primary}>{'\u{e702}'} </text>
-              <text fg={t.muted}>{gitPanel.branch}</text>
-            </box>
-          ) : null}
-          {gitMode.headOffset > 0 ? (
-            <box flexDirection="row" gap={1}>
-              <text fg={t.palette.warning}>
-                <strong>HEAD~{gitMode.headOffset}</strong>
-              </text>
-              <text fg={t.muted}>[ newer · ] older</text>
-            </box>
-          ) : null}
-          <text fg={t.hover}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
+          <box flexDirection="column" flexShrink={0}>
+            <text fg={t.palette.primary}>
+              <strong>aimux · git</strong>
+            </text>
+            {gitPanel.branch ? (
+              <box flexDirection="row">
+                <text fg={t.palette.primary}>{'\u{e702}'} </text>
+                <text fg={t.muted}>{gitPanel.branch}</text>
+              </box>
+            ) : null}
+            {gitMode.headOffset > 0 ? (
+              <box flexDirection="row" gap={1}>
+                <text fg={t.palette.warning}>
+                  <strong>HEAD~{gitMode.headOffset}</strong>
+                </text>
+                <text fg={t.muted}>[ newer · ] older</text>
+              </box>
+            ) : null}
+            <text fg={t.hover}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
+          </box>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
             compact={gitPane.treeCompaction}
@@ -243,14 +247,43 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
             selectedEntryKey={gitMode.selectedEntryKey}
           />
         </box>
-        <DiffStage
-          diff={diff}
-          diffKey={selectedDiffKey}
-          diffRef={diffRef}
-          loading={loading}
-          themeId={themeId}
-          view={gitMode.diffView}
-        />
+        <box flexDirection="column" flexGrow={1} overflow="hidden">
+          <box
+            flexDirection="row"
+            alignItems="center"
+            paddingLeft={1}
+            paddingRight={1}
+            backgroundColor={sidebarBg}
+          >
+            <box flexGrow={1}>
+              <text fg={selectedFile ? t.palette.ink : t.muted}>
+                {selectedFile ? selectedFile.path : 'Diff'}
+              </text>
+            </box>
+            <box
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={actionBg}
+              onMouseDown={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                dispatchGlobal({ type: 'exit-git-mode' })
+              }}
+            >
+              <text fg={t.palette.ink}>
+                <strong>Exit diff</strong>
+              </text>
+            </box>
+          </box>
+          <DiffStage
+            diff={diff}
+            diffKey={selectedDiffKey}
+            diffRef={diffRef}
+            loading={loading}
+            themeId={themeId}
+            view={gitMode.diffView}
+          />
+        </box>
       </box>
       {footerNode ? (
         <box paddingLeft={1} paddingRight={1} backgroundColor={sidebarBg} flexDirection="column">

package/src/ui/components/{git-pane-context-menu.ts → git/pane/git-pane-context-menu.ts}

@@ -1,5 +1,5 @@
-import type { GitPaneMode, GitPanePosition, GitPaneState } from '../../state/types'
-import type { ContextMenuItem } from '../context-menu/controller'
+import type { GitPaneMode, GitPanePosition, GitPaneState } from '../../../../state/types'
+import type { ContextMenuItem } from '../../../context-menu/controller'
 
 const GIT_PANE_MENU_OPTIONS: Array<{
   label: string

package/src/ui/components/{git-pane-widget.tsx → git/pane/git-pane-widget.tsx}

@@ -1,10 +1,10 @@
 import { memo, useRef } from 'react'
 
-import type { GitPanelState } from '../../state/types'
+import type { GitPanelState } from '../../../../state/types'
 
-import { useGitPanelPolling } from '../../git/git-poller'
-import { useAppStore } from '../../state/app-store'
-import { GitPanel } from './git-panel'
+import { useGitPanelPolling } from '../../../../git/git-poller'
+import { useAppStore } from '../../../../state/app-store'
+import { GitPanel } from '../git-panel'
 
 interface GitPaneWidgetProps {
   pollingEnabled: boolean

package/src/ui/components/{session-bar.tsx → layout/session-bar.tsx}

@@ -2,18 +2,22 @@ import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import { useMemo, useRef, useState } from 'react'
 
-import type { SessionRecord, SessionStatus } from '../../state/types'
+import type { SessionRecord, SessionStatus } from '../../../state/types'
 
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 // eslint-disable-next-line no-duplicate-imports
-import { IDLE_SESSION_STATUS } from '../../state/types'
-import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { useBg, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
+import { IDLE_SESSION_STATUS } from '../../../state/types'
+import { useBusySpinner } from '../../hooks/use-busy-spinner'
+import { moveIdToIdPosition, orderSessionsForDisplay } from '../../session-ordering'
+import { useBg, useTokens } from '../../theme'
+import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
-export function SessionBar() {
+interface SessionBarProps {
+  forceVisible?: boolean
+}
+
+export function SessionBar({ forceVisible = false }: SessionBarProps) {
   const t = useTokens()
   const headerBg = useBg('elevated')
   const sessions = useAppStore((s) => s.sessions)
@@ -27,7 +31,7 @@ export function SessionBar() {
   const chipRefs = useRef(new Map<string, BoxRenderable>())
 
   const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
-  if (!bar.visible || ordered.length === 0) return null
+  if ((!bar.visible && !forceVisible) || ordered.length === 0) return null
 
   const visibleSessions =
     dragOrder !== null
@@ -103,6 +107,7 @@ export function SessionBar() {
     <box
       width="100%"
       flexDirection="row"
+      flexShrink={0}
       paddingLeft={1}
       paddingRight={1}
       backgroundColor={headerBg}
@@ -205,6 +210,7 @@ function SessionChip({
   const idleColor = t.palette.success
   const workingColor = t.palette.primary
   const waitingColor = t.palette.warning
+  const [hovered, setHovered] = useState(false)
 
   return (
     <ContextMenuBox
@@ -214,6 +220,8 @@ function SessionChip({
       paddingRight={1}
       backgroundColor={bgColor}
       rightClickMenu={rightClickMenu}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
       onMouseDown={(e) => {
         e.preventDefault()
         onMouseDown(e)
@@ -247,9 +255,24 @@ function SessionChip({
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>
-      <text fg={t.hover} selectable={false}>
-        {' '}
-      </text>
+      {hovered ? (
+        <box
+          paddingLeft={1}
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
+          }}
+        >
+          <text fg={t.muted} selectable={false}>
+            ×
+          </text>
+        </box>
+      ) : (
+        <text fg={t.hover} selectable={false}>
+          {' '}
+        </text>
+      )}
     </ContextMenuBox>
   )
 }

package/src/ui/components/{sidebar-group-metadata.ts → layout/sidebar/sidebar-group-metadata.ts}

@@ -1,6 +1,6 @@
-import type { TabSession } from '../../state/types'
+import type { TabSession } from '../../../../state/types'
 
-import { allLeafIds, type LayoutNode } from '../../state/layout-tree'
+import { allLeafIds, type LayoutNode } from '../../../../state/layout-tree'
 
 export interface TabGroupInfo {
   inLayout: boolean

package/src/ui/components/{sidebar.tsx → layout/sidebar/sidebar.tsx}

@@ -5,12 +5,12 @@ import {
 } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal } from '../../state/dispatch-ref'
-import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
-import { buildGitPaneContextMenu } from './git-pane-context-menu'
-import { GitPaneWidget } from './git-pane-widget'
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { getCurrentTokens, type ThemeTokens, useBg, useTokens } 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'

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

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 
-import type { TabSession } from '../../state/types'
+import type { TabSession } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { getCurrentTokens, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useBusySpinner } from '../../../hooks/use-busy-spinner'
+import { getCurrentTokens, useTokens } from '../../../theme'
+import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 
 interface TabItemProps {
   id?: string