termcast 1.5.0 → 1.7.0

package/src/components/horizontal-bar-graph.tsx

@@ -6,10 +6,12 @@
  * colored series rows and percentages.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { BoxProps } from '@opentui/react'
+import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getThemePalette, useTheme } from 'termcast/src/theme'
+import { ChartTooltip, useChartTooltip, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 export interface HorizontalBarGraphSeriesProps {
   /** One value per row/category position. */
@@ -97,6 +99,8 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
   } = props
 
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   const seriesList = useMemo<Array<{ data: number[]; color: string; title?: string }>>(() => {
     const childArray = React.Children.toArray(children)
@@ -189,7 +193,8 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
   const chartHeight = headerHeight + visibleRows.length
 
   return (
-    <box flexDirection="column" width="100%" flexShrink={0} {...rest}>
+    <box ref={containerRef} flexDirection="column" width="100%" flexShrink={0} {...rest} onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
       {showHeader && (
         <>
           <box flexDirection="row" height={1} flexShrink={0}>
@@ -238,7 +243,22 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
                     }
                     const series = seriesList[seriesIndex]!
                     return (
-                      <box key={seriesIndex} flexGrow={value} flexBasis={0} flexShrink={1} overflow="hidden">
+                      <box
+                        key={seriesIndex}
+                        flexGrow={value}
+                        flexBasis={0}
+                        flexShrink={1}
+                        overflow="hidden"
+                        onMouseMove={(evt: OpenTUIMouseEvent) => {
+                          const label = row.label
+                          const seriesTitle = series.title || `#${seriesIndex + 1}`
+                          showTooltip({
+                            x: evt.x,
+                            y: evt.y,
+                            lines: [label, formatTooltipLine(seriesTitle, value)],
+                          })
+                        }}
+                      >
                         <box position="absolute" width="100%" height="100%" overflow="hidden">
                           <text fg={series.color} wrapMode="none">{barCharacter.repeat(200)}</text>
                         </box>
@@ -246,7 +266,7 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
                     )
                   })}
                   {maxTotal > row.total && (
-                    <box flexGrow={maxTotal - row.total} flexBasis={0} flexShrink={1} />
+                    <box flexGrow={maxTotal - row.total} flexBasis={0} flexShrink={1} onMouseMove={hideTooltip} />
                   )}
                 </box>
               </box>

package/src/components/list.tsx

@@ -6,7 +6,7 @@ import {
   TextareaRenderable,
 } from '@opentui/core'
 import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
-import { useKeyboard, flushSync } from '@opentui/react'
+import { useKeyboard, flushSync, useTerminalDimensions } from '@opentui/react'
 import React, {
     ReactElement,
     ReactNode,
@@ -164,15 +164,7 @@ function ListFooter(): any {
           </text>
         </Hoverable>
       )}
-      {!isVim && (
-        <Hoverable
-          onMouseDown={() => {
-            executeVimCommand('vim')
-          }}
-        >
-          <text flexShrink={0} fg={theme.textMuted}>:vim</text>
-        </Hoverable>
-      )}
+
     </box>
   )
 
@@ -225,8 +217,17 @@ function CurrentItemDetail(props: {
 }): any {
   const theme = useTheme()
   const descendantsMap = useListDescendantsRerender()
-
-  if (!props.isShowingDetail) return null
+  const boxRef = React.useRef<BoxRenderable>(null)
+  // Grow-only height ratchet: once the detail panel reaches a certain height,
+  // it never shrinks below that. This prevents the footer from jumping up
+  // when navigating from a tall detail to a short one.
+  const maxHeightRef = React.useRef(0)
+
+  if (!props.isShowingDetail) {
+    // Reset ratchet when detail is hidden so next show starts fresh
+    maxHeightRef.current = 0
+    return null
+  }
 
   const currentItem = Object.values(descendantsMap)
     .find((item) => item.index === props.selectedIndex)
@@ -236,6 +237,14 @@ function CurrentItemDetail(props: {
 
   return (
     <box
+      ref={boxRef}
+      minHeight={maxHeightRef.current || undefined}
+      onSizeChange={() => {
+        const h = boxRef.current?.height ?? 0
+        if (h > maxHeightRef.current) {
+          maxHeightRef.current = h
+        }
+      }}
       style={{
         width: '50%',
         paddingLeft: 1,
@@ -406,6 +415,13 @@ export interface ListProps
   searchBarPlaceholder?: string
   selectedItemId?: string
   isShowingDetail?: boolean
+  /**
+   * Minimum terminal width in columns required to show the detail panel.
+   * When the terminal is narrower than this value, the detail panel is
+   * automatically hidden even if `isShowingDetail` is true.
+   * @default 80
+   */
+  detailMinWidth?: number
   /**
     * Controls the vertical spacing of list items.
     * - 'default': Single-line items with title and subtitle on same row
@@ -1060,6 +1076,7 @@ export const List: ListType = (props) => {
     isLoading,
     navigationTitle,
     isShowingDetail,
+    detailMinWidth = 80,
     selectedItemId,
     searchBarAccessory,
     logo,
@@ -1070,6 +1087,9 @@ export const List: ListType = (props) => {
   } = props
 
   const theme = useTheme()
+  const { width: terminalWidth } = useTerminalDimensions()
+  const effectiveIsShowingDetail = isShowingDetail && terminalWidth >= detailMinWidth
+
   const currentStackSelectedListIndex = useStore((state) => {
     const stack = state.navigationStack
     const currentItem = stack[stack.length - 1]
@@ -1262,14 +1282,14 @@ export const List: ListType = (props) => {
       setSelectedIndex: setSelectedIndexWithPersistence,
       searchText,
       isFiltering: isFilteringEnabled,
-      isShowingDetail,
+      isShowingDetail: effectiveIsShowingDetail,
       customEmptyViewRef,
       isLoading,
       hasDropdown: !!searchBarAccessory,
       spacingMode,
       accessoryTagWidths: accessoryTagsLayout,
     }),
-    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory, spacingMode, accessoryTagsLayout],
+    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, effectiveIsShowingDetail, isLoading, searchBarAccessory, spacingMode, accessoryTagsLayout],
   )
 
   // Handle selectedItemId prop changes (before paint to avoid flash)
@@ -1356,6 +1376,46 @@ export const List: ListType = (props) => {
     }
   }
 
+  // Trigger pagination when the user mouse-scrolls near the bottom of the list.
+  // Only fires on scroll-down so scrolling up near the bottom doesn't spuriously
+  // re-trigger onLoadMore. Uses queueMicrotask because opentui calls onMouseScroll
+  // before ScrollBox.onMouseEvent updates scrollTop in the same call stack;
+  // a microtask runs after the synchronous handler chain finishes.
+  const checkScrollPagination = (event: OpenTUIMouseEvent) => {
+    if (event.scroll?.direction !== 'down') return
+
+    queueMicrotask(() => {
+      const scrollBox = scrollBoxRef.current
+      if (!scrollBox || !props.pagination?.hasMore) return
+
+      // Reset pagination lock when new items arrive (same logic as in move())
+      const items = Object.values(descendantsContext.map.current)
+        .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      if (items.length !== prevItemCountRef.current) {
+        prevItemCountRef.current = items.length
+        paginationCalledRef.current = false
+      }
+
+      if (paginationCalledRef.current) return
+
+      const scrollTop = scrollBox.scrollTop || 0
+      const viewportHeight = scrollBox.viewport?.height || 0
+      const contentHeight = scrollBox.scrollHeight || 0
+
+      // Nothing to paginate if content fits in viewport
+      if (contentHeight <= viewportHeight) return
+
+      // Trigger when within 20% of the bottom (or 3 rows, whichever is larger)
+      const threshold = Math.max(3, Math.floor(viewportHeight * 0.2))
+      const distanceFromBottom = contentHeight - (scrollTop + viewportHeight)
+
+      if (distanceFromBottom <= threshold) {
+        paginationCalledRef.current = true
+        props.pagination.onLoadMore()
+      }
+    })
+  }
+
   const move = (direction: -1 | 1) => {
     // Get all visible items
     const items = Object.values(descendantsContext.map.current)
@@ -1612,7 +1672,8 @@ export const List: ListType = (props) => {
         return
       }
 
-      // Ctrl+d for half-page down, Ctrl+u for half-page up
+      // Ctrl+d / Ctrl+u for half-page down/up
+      // Ctrl+f / Ctrl+b for full-page down/up
       if (evt.ctrl && evt.name === 'd') {
         const viewportHeight = scrollBoxRef.current?.viewport?.height || 20
         moveByN(Math.floor(viewportHeight / 2))
@@ -1625,6 +1686,18 @@ export const List: ListType = (props) => {
         evt.stopPropagation()
         return
       }
+      if (evt.ctrl && evt.name === 'f') {
+        const viewportHeight = scrollBoxRef.current?.viewport?.height || 20
+        moveByN(viewportHeight)
+        evt.stopPropagation()
+        return
+      }
+      if (evt.ctrl && evt.name === 'b') {
+        const viewportHeight = scrollBoxRef.current?.viewport?.height || 20
+        moveByN(-viewportHeight)
+        evt.stopPropagation()
+        return
+      }
 
       // / to enter search mode
       if (evt.sequence === '/' && !evt.ctrl && !evt.meta) {
@@ -1799,14 +1872,15 @@ export const List: ListType = (props) => {
           {/* Main content area with optional detail view */}
           <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1 }}>
             {/* List content - render children which will register themselves */}
-            <box style={{ width: isShowingDetail ? '50%' : '100%', flexGrow: 1, flexShrink: 1, flexDirection: 'column' }}>
+            <box style={{ width: effectiveIsShowingDetail ? '50%' : '100%', flexGrow: 1, flexShrink: 1, flexDirection: 'column' }}>
               {/* Scrollable list items */}
               <ScrollBox
                 ref={scrollBoxRef}
                 focused={false}
                 flexGrow={1}
                 flexShrink={1}
-                minHeight={6}
+                minHeight={10}
+                onMouseScroll={checkScrollPagination}
                 style={{
                   rootOptions: {
                     backgroundColor: undefined,
@@ -1836,7 +1910,7 @@ export const List: ListType = (props) => {
             {/* Detail panel on the right */}
             <CurrentItemDetail
               selectedIndex={selectedIndex}
-              isShowingDetail={isShowingDetail}
+              isShowingDetail={effectiveIsShowingDetail}
             />
           </box>
         </box>
@@ -1990,8 +2064,7 @@ const ListItem: ListItemType = (props) => {
     }
   }
 
-  // Don't show accessories if we're showing detail
-  const showAccessories = !props.detail && props.accessories
+  const showAccessories = Boolean(props.accessories)
 
   // Get icon string and color from props.icon (can be string or object with value/tintColor)
   const { iconValue, iconColor } = (() => {

package/src/examples/action-shortcut.vitest.tsx

@@ -49,7 +49,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
        > Search...
 
-      ›Refre...nt: 1Press ctrl+r to refresh ...nter then select Refresh
+      ›Refres...unt: 1Press ctrl+r to refresh...ter then select Refresh
 
 
 
@@ -57,11 +57,11 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
 
 
-       ↵ refresh   ↑↓ navigate   ^k actions   :vim
 
 
 
 
+       ↵ refresh   ↑↓ navigate   ^k actions
     "
   `)
 }, 30000)
@@ -85,6 +85,7 @@ test('action shortcut is displayed in action panel', async () => {
   expect(actionsPanel).toMatchInlineSnapshot(`
     "
 
+
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -102,8 +103,7 @@ test('action shortcut is displayed in action panel', async () => {
       │                                                                │
       │                                                                │
       │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │"
+      │   ↵ select   ↑↓ navigate                                       │"
   `)
 }, 30000)
 

package/src/examples/actions-context.vitest.tsx

@@ -38,6 +38,7 @@ test('actions preserve React context through portal', async () => {
   expect(actionsPanel).toMatchInlineSnapshot(`
     "
 
+
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -55,8 +56,7 @@ test('actions preserve React context through portal', async () => {
       │                                                                │
       │                                                                │
       │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │"
+      │   ↵ select   ↑↓ navigate                                       │"
   `)
 
   // Select "Show Counter" (first action, already selected)

package/src/examples/bar-graph-weekly.vitest.tsx

@@ -1,5 +1,5 @@
 // E2E tests for BarGraph vertical stacked bar chart.
-// Bar segments use ▃ chars so they show in text snapshots without filling cells.
+// Bar segments use █ (full block) chars for solid, gap-free columns.
 
 import { test, expect, afterEach, beforeEach } from 'vitest'
 import { launchTerminal, Session } from 'tuistory/src'
@@ -35,28 +35,28 @@ test('bar graph renders bars, labels, and legend', async () => {
 
        > Search...
 
-      ›Weekl...affic3 channels...oss 6 days │ 110.0│                ▃▃▃
-       Revenu... Regio EMEA / A... Americas │      │▃▃▃ ▃▃▃         ▃▃▃ ▃▃▃
-       Server Load CPU / Memory / IO        │  82.5│▃▃▃ ▃▃▃         ▃▃▃ ▃▃▃
-       Many ...s (20)Overflow ...th 20 bars │      │▃▃▃ ▃▃▃ ▃▃▃     ▃▃▃ ▃▃▃
-       Many Series (8) Legend overflow test │  55.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Lon...belsLabels wide... bar columns │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Week 1 vs Week 2 Two graphs in a Row │  27.5│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │   0.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │       Mon Tue Wed Thu Fri Sat
-       ↵ open detail   ↑↓ navigate   ^k act │ ■ Direct  ■ Organic  ■ Referral
-
-
-
-
-
-
-
-
-
-
-
+      ›Weekly Traffi 3 channel...oss 6 days │ 110.0│                ██
+       Revenue by Regio EMEA / A...Americas │      │██  ██          ██  ██
+       Server Load CPU / Memory / IO        │  82.5│██  ██          ██  ██
+       Many C...ns (20)Overflow...h 20 bars │      │██  ██  ██      ██  ██
+       Many Series (8) Legend overflow test │  55.0│██  ██  ██  ██  ██  ██
+       Long Label Labels wide...bar columns │      │██  ██  ██  ██  ██  ██
+       Week 1 vs Week 2 Two graphs in a Row │  27.5│██  ██  ██  ██  ██  ██
+                                            │      │██  ██  ██  ██  ██  ██
+                                            │   0.0│██  ██  ██  ██  ██  ██
+                                            │       Mon Tue Wed Thu FriSat
+                                            │ ■ Direct  ■ Organic  ■ Referral
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↵ open detail   ↑↓ navigate   ^k act │
 
     "
   `)
@@ -64,7 +64,7 @@ test('bar graph renders bars, labels, and legend', async () => {
   expect(text).toContain('Mon')
   expect(text).toContain('Direct')
   expect(text).toContain('0.0│')
-  expect(text).toContain('▃')
+  expect(text).toContain('█')
 }, 30000)
 
 test('many columns (20) clips with overflow hidden', async () => {
@@ -75,7 +75,7 @@ test('many columns (20) clips with overflow hidden', async () => {
   session.sendKey('down')
 
   await session.text({
-    waitFor: (t) => t.includes('›Many ...s (20)'),
+    waitFor: (t) => t.includes('›Many') && t.includes('(20)'),
     timeout: 10000,
   })
   await session.waitIdle()
@@ -83,13 +83,13 @@ test('many columns (20) clips with overflow hidden', async () => {
 
   // Bar graph rendering has non-deterministic ANSI highlights, so use toContain checks
   // instead of inline snapshot for the bars area
-  expect(text).toContain('›Many ...s (20)')
+  expect(text).toContain('›Many')
   expect(text).toContain('BarGraph Showcase')
-  expect(text).toContain('▃')
+  expect(text).toContain('█')
 
   // Some labels visible, overflow clips the rest
   expect(text).toContain('D')
-  expect(text).toContain('▃')
+  expect(text).toContain('█')
 }, 30000)
 
 test('many series (8) bottom legend clips on one row', async () => {
@@ -113,28 +113,28 @@ test('many series (8) bottom legend clips on one row', async () => {
 
        > Search...
 
-       Weekl...affic3 channels...oss 6 days │ 328.0│▃▃▃ ▃▃▃ ▃▃▃     ▃▃▃ ▃▃▃
-       Revenu... Regio EMEA / A... Americas │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Server Load CPU / Memory / IO        │ 246.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Many ...s (20)Overflow ...th 20 bars │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-      ›Many Series (8) Legend overflow test │ 164.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Lon...belsLabels wide... bar columns │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Week 1 vs Week 2 Two graphs in a Row │  82.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │      │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │   0.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │       Mon Tue Wed Thu Fri Sat
-       ↑↓ navigate   ^k actions   :vim      │ ■ Series 1  ■ Series 2  ■ Series 3
-
-
-
-
-
-
-
-
-
-
-
+       Weekly Traffi 3 channel...oss 6 days │ 328.0│██  ██  ██      ██  ██
+       Revenue by Regio EMEA / A...Americas │      │██  ██  ██  ██  ██  ██
+       Server Load CPU / Memory / IO        │ 246.0│██  ██  ██  ██  ██  ██
+       Many C...ns (20)Overflow...h 20 bars │      │██  ██  ██  ██  ██  ██
+      ›Many Series (8) Legend overflow test │ 164.0│██  ██  ██  ██  ██  ██
+       Long Label Labels wide...bar columns │      │██  ██  ██  ██  ██  ██
+       Week 1 vs Week 2 Two graphs in a Row │  82.0│██  ██  ██  ██  ██  ██
+                                            │      │██  ██  ██  ██  ██  ██
+                                            │   0.0│██  ██  ██  ██  ██  ██
+                                            │       Mon Tue Wed Thu FriSat
+                                            │ ■ Series 1  ■ Series 2  ■ Series 3
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions             │
 
     "
   `)
@@ -142,11 +142,11 @@ test('many series (8) bottom legend clips on one row', async () => {
   // Bottom legend is a single clipped row by default.
   expect(text).toContain('Series 1')
   expect(text).toContain('Series 3')
-  expect(text).toContain('▃')
+  expect(text).toContain('█')
 }, 30000)
 
 test('long labels truncated by overflow hidden', async () => {
-  await session.text({ waitFor: (t) => t.includes('Lon...bels'), timeout: 10000 })
+  await session.text({ waitFor: (t) => t.includes('Labels wide'), timeout: 10000 })
   // Navigate: Weekly, Revenue, Server, Many Columns, Many Series, Long Labels = 5 downs
   session.sendKey('down')
   session.sendKey('down')
@@ -155,7 +155,7 @@ test('long labels truncated by overflow hidden', async () => {
   session.sendKey('down')
 
   const text = await session.text({
-    waitFor: (t) => t.includes('›Lon...bels'),
+    waitFor: (t) => t.includes('›Long Label') || t.includes('›Lon...bels'),
     timeout: 10000,
   })
 
@@ -167,34 +167,34 @@ test('long labels truncated by overflow hidden', async () => {
 
        > Search...
 
-       Weekl...affic3 channels...oss 6 days │ 75.0│                ▃▃▃
-       Revenu... Regio EMEA / A... Americas │     │▃▃▃             ▃▃▃ ▃▃▃
-       Server Load CPU / Memory / IO        │ 56.3│▃▃▃ ▃▃▃         ▃▃▃ ▃▃▃
-       Many ...s (20)Overflow ...th 20 bars │     │▃▃▃ ▃▃▃         ▃▃▃ ▃▃▃
-       Many Series (8) Legend overflow test │ 37.5│▃▃▃ ▃▃▃ ▃▃▃     ▃▃▃ ▃▃▃
-      ›Lon...belsLabels wide... bar columns │     │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-       Week 1 vs Week 2 Two graphs in a Row │ 18.8│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │     │▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
-                                            │  0.0│▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃ ▃▃▃
+       Weekly Traffi 3 channel...oss 6 days │ 75.0│                ██
+       Revenue by Regio EMEA / A...Americas │     │██              ██  ██
+       Server Load CPU / Memory / IO        │ 56.3│██  ██          ██  ██
+       Many C...ns (20)Overflow...h 20 bars │     │██  ██          ██  ██
+       Many Series (8) Legend overflow test │ 37.5│██  ██  ██      ██  ██
+      ›Long Label Labels wide...bar columns │     │██  ██  ██  ██  ██  ██
+       Week 1 vs Week 2 Two graphs in a Row │ 18.8│██  ██  ██  ██  ██  ██
+                                            │     │██  ██  ██  ██  ██  ██
+                                            │  0.0│██  ██  ██  ██  ██  ██
                                             │      Monday   Thursday
-       ↑↓ navigate   ^k actions   :vim      │ ■ Views  ■ Clicks
-
-
-
-
-
-
-
-
-
-
-
+                                            │ ■ Views  ■ Clicks
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions             │
 
     "
   `)
 
-  expect(text).toContain('›Lon...bels')
-  expect(text).toContain('▃')
+  expect(text).toContain('Labels wide')
+  expect(text).toContain('█')
 }, 30000)
 
 test('side-by-side bar graphs in a Row', async () => {
@@ -220,28 +220,28 @@ test('side-by-side bar graphs in a Row', async () => {
 
        > Search...
 
-       Weekl...affic3 channels...oss 6 days │ 110.0│            130.0│
-       Revenu... Regio EMEA / A... Americas │      │▃▃▃ ▃▃▃          │▃▃▃
-       Server Load CPU / Memory / IO        │  82.5│▃▃▃ ▃▃▃      97.5│▃▃▃ ▃▃▃
-       Many ...s (20)Overflow ...th 20 bars │      │▃▃▃ ▃▃▃ ▃▃▃      │▃▃▃ ▃▃▃ ▃▃
-       Many Series (8) Legend overflow test │  55.0│▃▃▃ ▃▃▃ ▃▃▃  65.0│▃▃▃ ▃▃▃ ▃▃
-       Lon...belsLabels wide... bar columns │      │▃▃▃ ▃▃▃ ▃▃▃      │▃▃▃ ▃▃▃ ▃▃
-      ›Week 1 vs Week 2 Two graphs in a Row │  27.5│▃▃▃ ▃▃▃ ▃▃▃  32.5│▃▃▃ ▃▃▃ ▃▃
-                                            │      │▃▃▃ ▃▃▃ ▃▃▃      │▃▃▃ ▃▃▃ ▃▃
-                                            │   0.0│▃▃▃ ▃▃▃ ▃▃▃   0.0│▃▃▃ ▃▃▃ ▃▃
+       Weekly Traffi 3 channel...oss 6 days │ 110.0│            130.0│
+       Revenue by Regio EMEA / A...Americas │      │██  ██           │██
+       Server Load CPU / Memory / IO        │  82.5│██  ██       97.5│██  ██
+       Many C...ns (20)Overflow...h 20 bars │      │██  ██  ██       │██  ██  ██
+       Many Series (8) Legend overflow test │  55.0│██  ██  ██   65.0│██  ██  ██
+       Long Label Labels wide...bar columns │      │██  ██  ██       │██  ██  ██
+      ›Week 1 vs Week 2 Two graphs in a Row │  27.5│██  ██  ██   32.5│██  ██  ██
+                                            │      │██  ██  ██       │██  ██  ██
+                                            │   0.0│██  ██  ██    0.0│██  ██  ██
                                             │       Mon Tue Wed       Mon Tue We
-       ↵ open detail   ↑↓ navigate   ^k act │ ■ Direct  ■ Organ ■ Direct  ■ Orga
-
-
-
-
-
-
-
-
-
-
-
+                                            │ ■ Direct  ■ Organ ■ Direct  ■ Orga
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↵ open detail   ↑↓ navigate   ^k act │
 
     "
   `)