termcast 1.4.1 → 1.6.0

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

@@ -27,18 +27,18 @@ afterEach(() => {
 test('ctrl+r shortcut should trigger Refresh action directly', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   const initial = await session.text()
-  expect(initial).toContain('Refresh count: 0')
+  expect(initial).toContain('nt: 0')
 
   // Press ctrl+r directly to trigger Refresh action
   await session.press(['ctrl', 'r'])
 
   // Wait for the refresh to take effect
   const afterCtrlR = await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
   expect(afterCtrlR).toMatchInlineSnapshot(`
@@ -49,7 +49,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
        > Search...
 
-      ›Refresh count: 1 Press ctrl+r to refresh (shortcut) or Enter the
+      ›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   :vim
     "
   `)
 }, 30000)
@@ -69,7 +69,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 test('action shortcut is displayed in action panel', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Open action panel with ctrl+k
@@ -85,6 +85,7 @@ test('action shortcut is displayed in action panel', async () => {
   expect(actionsPanel).toMatchInlineSnapshot(`
     "
 
+
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -102,38 +103,37 @@ test('action shortcut is displayed in action panel', async () => {
       │                                                                │
       │                                                                │
       │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │"
+      │   ↵ select   ↑↓ navigate                                       │"
   `)
 }, 30000)
 
 test('action works via Enter (auto-execute first action)', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Press Enter to auto-execute first action (Refresh)
   await session.press('return')
 
   const afterEnter = await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
 
-  expect(afterEnter).toContain('Refresh count: 1')
+  expect(afterEnter).toContain('nt: 1')
 }, 30000)
 
 test('ctrl+x shortcut should trigger Reset action directly', async () => {
   // Wait for list to render and increment once via Enter
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Increment via Enter first
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
 
@@ -142,27 +142,27 @@ test('ctrl+x shortcut should trigger Reset action directly', async () => {
 
   // Wait for the reset to take effect
   const afterCtrlX = await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
     timeout: 5000,
   })
-  expect(afterCtrlX).toContain('Refresh count: 0')
+  expect(afterCtrlX).toContain('nt: 0')
 }, 30000)
 
 test('alt+d shortcut should trigger Double action directly', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Increment twice via Enter to get count=2
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 2/.test(text),
+    waitFor: (text) => /nt: 2/.test(text),
     timeout: 5000,
   })
 
@@ -171,8 +171,8 @@ test('alt+d shortcut should trigger Double action directly', async () => {
 
   // Wait for the double to take effect
   const afterAltD = await session.text({
-    waitFor: (text) => /Refresh count: 4/.test(text),
+    waitFor: (text) => /nt: 4/.test(text),
     timeout: 5000,
   })
-  expect(afterAltD).toContain('Refresh count: 4')
+  expect(afterAltD).toContain('nt: 4')
 }, 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.tsx

@@ -151,7 +151,7 @@ function BarGraphWeeklyExample() {
           <List.Item.Detail
             metadata={
               <List.Item.Detail.Metadata>
-                <BarGraph height={10} labels={manyColsLabels}>
+                <BarGraph height={10} labels={manyColsLabels} barWidth={1}>
                   {manyColsSeries.map((s, i) => {
                     return <BarGraph.Series key={i} data={s.data} title={s.title} />
                   })}
@@ -261,4 +261,4 @@ function BarGraphWeeklyExample() {
   )
 }
 
-renderWithProviders(<BarGraphWeeklyExample />)
+void renderWithProviders(<BarGraphWeeklyExample />)

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

@@ -1,5 +1,5 @@
 // E2E tests for BarGraph vertical stacked bar chart.
-// Bar segments are filled with █ chars so they show in text snapshots.
+// Bar segments use █ (full block) chars for solid, gap-free columns.
 
 import { test, expect, afterEach, beforeEach } from 'vitest'
 import { launchTerminal, Session } from 'tuistory/src'
@@ -22,7 +22,7 @@ afterEach(() => {
 test('bar graph renders bars, labels, and legend', async () => {
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('Mon') && text.includes('Sat') && text.includes('Direct')
+      return text.includes('Mon') && text.includes('Direct') && text.includes('0.0│')
     },
     timeout: 10000,
   })
@@ -35,47 +35,47 @@ test('bar graph renders bars, labels, and legend', async () => {
 
        > Search...
 
-      ›Weekly Traffic 3 channels across 6 d │                 ███
-       Revenue by Region EMEA / APAC / Amer │ ███ ███         ███ ███
-       Server Load CPU / Memory / IO        │ ███ ███         ███ ███
-       Many Columns (20) Overflow test with │ ███ ███ ███     ███ ███
-       Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███
-       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
-       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ 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 │
 
     "
   `)
 
   expect(text).toContain('Mon')
-  expect(text).toContain('Sat')
   expect(text).toContain('Direct')
+  expect(text).toContain('0.0│')
   expect(text).toContain('█')
 }, 30000)
 
 test('many columns (20) clips with overflow hidden', async () => {
-  await session.text({ waitFor: (t) => t.includes('Many Columns'), timeout: 10000 })
+  await session.text({ waitFor: (t) => t.includes('(20)'), timeout: 10000 })
   // Navigate: Weekly Traffic, Revenue, Server Load, Many Columns = 3 downs
   session.sendKey('down')
   session.sendKey('down')
   session.sendKey('down')
 
   await session.text({
-    waitFor: (t) => t.includes('›Many Columns'),
+    waitFor: (t) => t.includes('›Many') && t.includes('(20)'),
     timeout: 10000,
   })
   await session.waitIdle()
@@ -83,16 +83,16 @@ 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 Columns')
+  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('D1')
+  expect(text).toContain('D')
   expect(text).toContain('█')
 }, 30000)
 
-test('many series (8) legend clips on one line', async () => {
+test('many series (8) bottom legend clips on one row', async () => {
   await session.text({ waitFor: (t) => t.includes('Many Series'), timeout: 10000 })
   // Navigate: Weekly, Revenue, Server, Many Columns, Many Series = 4 downs
   session.sendKey('down')
@@ -113,39 +113,40 @@ test('many series (8) legend clips on one line', async () => {
 
        > Search...
 
-       Weekly Traffic 3 channels across 6 d │ ███ ███ ███     ███ ███
-       Revenue by Region EMEA / APAC / Amer │ ███ ███ ███ ███ ███ ███
-       Server Load CPU / Memory / IO        │ ███ ███ ███ ███ ███ ███
-       Many Columns (20) Overflow test with │ ███ ███ ███ ███ ███ ███
-      ›Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███
-       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
-       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ 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   :vim      │
 
     "
   `)
 
-  // First series visible in legend
+  // Bottom legend is a single clipped row by default.
   expect(text).toContain('Series 1')
+  expect(text).toContain('Series 3')
   expect(text).toContain('█')
 }, 30000)
 
 test('long labels truncated by overflow hidden', async () => {
-  await session.text({ waitFor: (t) => t.includes('Long Labels'), 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')
@@ -154,7 +155,7 @@ test('long labels truncated by overflow hidden', async () => {
   session.sendKey('down')
 
   const text = await session.text({
-    waitFor: (t) => t.includes('›Long Labels'),
+    waitFor: (t) => t.includes('›Long Label') || t.includes('›Lon...bels'),
     timeout: 10000,
   })
 
@@ -166,33 +167,33 @@ test('long labels truncated by overflow hidden', async () => {
 
        > Search...
 
-       Weekly Traffic 3 channels across 6 d │                 ███
-       Revenue by Region EMEA / APAC / Amer │ ███             ███ ███
-       Server Load CPU / Memory / IO        │ ███ ███         ███ ███
-       Many Columns (20) Overflow test with │ ███ ███         ███ ███
-       Many Series (8) Legend overflow test │ ███ ███ ███     ███ ███
-      ›Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
-       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ ███ ███
-                                            │ Mon Tue Wed Thu Fri Sat
-       ↑↓ navigate   ^k actions   :vim      │ ■ Views ■ Clicks
-
-
-
-
-
-
-
-
-
-
-
+       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
+                                            │ ■ Views  ■ Clicks
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions   :vim      │
 
     "
   `)
 
-  expect(text).toContain('Long Labels')
+  expect(text).toContain('Labels wide')
   expect(text).toContain('█')
 }, 30000)
 
@@ -219,31 +220,31 @@ test('side-by-side bar graphs in a Row', async () => {
 
        > Search...
 
-       Weekly Traffic 3 channels across 6 d │                 █
-       Revenue by Region EMEA / APAC / Amer │ ███ ███         █ ███
-       Server Load CPU / Memory / IO        │ ███ ███         █ ███ ███
-       Many Columns (20) Overflow test with │ ███ ███ ███     █ ███ ███ ███ ███
-       Many Series (8) Legend overflow test │ ███ ███ ███ ███ █ ███ ███ ███ ███
-       Long Labels Labels wider than bar co │ ███ ███ ███ ███ █ ███ ███ ███ ███
-      ›Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ █ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ █ ███ ███ ███ ███
-                                            │ ███ ███ ███ ███ █ ███ ███ ███ ███
-                                            │ Mon Tue Wed Thu F Mon Tue Wed Thu
-       ↵ open detail   ↑↓ navigate   ^k act │ ■ Direct ■ Organi ■ Direct ■ Organ
-
-
-
-
-
-
-
-
-
-
-
+       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
+                                            │ ■ Direct  ■ Organ ■ Direct  ■ Orga
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↵ open detail   ↑↓ navigate   ^k act │
 
     "
   `)
 
-  expect(text).toContain('Mon')
+  expect(text).toContain('Direct')
 }, 30000)

package/src/examples/charts-showcase-bargraph.tsx

@@ -0,0 +1,103 @@
+// Showcase: BarGraph vertical stacked bar chart inside a Detail view.
+// Recreates a monthly model spend chart with stacked per-day usage.
+
+import { BarGraph, Detail } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const labels = Array.from({ length: 30 }, (_, i) => {
+  const day = i + 1
+  if (day % 2 === 0) {
+    return ''
+  }
+  return String(day).padStart(2, '0')
+})
+
+const emptyMonth = Array.from({ length: 30 }, () => 0)
+
+function withSpend(points: Record<number, number>): number[] {
+  return emptyMonth.map((_, i) => points[i + 1] || 0)
+}
+
+const modelSpend = [
+  {
+    title: 'deepseek-v4-flash (go)',
+    color: '#b5bb69',
+    data: withSpend({ 21: 0.6, 25: 1.05, 26: 1.3, 27: 1.9, 28: 0.55, 29: 0.8, 30: 1.1 }),
+  },
+  {
+    title: 'deepseek-v4-pro (go)',
+    color: '#8f59b5',
+    data: withSpend({ 25: 0.12 }),
+  },
+  {
+    title: 'kimi-k2.6 (go)',
+    color: '#64b86a',
+    data: withSpend({ 22: 3.25, 23: 1.65, 24: 2.2, 25: 2.05 }),
+  },
+  {
+    title: 'mimo-v2-omni (go)',
+    color: '#aaa25f',
+    data: withSpend({ 25: 0.12, 26: 0.15 }),
+  },
+  {
+    title: 'mimo-v2-pro (go)',
+    color: '#5ba895',
+    data: withSpend({ 16: 1.5, 17: 0.75, 21: 2.5 }),
+  },
+  {
+    title: 'minimax-m2.7 (go)',
+    color: '#6c6cb8',
+    data: withSpend({ 20: 5 }),
+  },
+  {
+    title: 'qwen3.6-plus (go)',
+    color: '#b07a5c',
+    data: withSpend({ 17: 2.65, 18: 6.55, 19: 3.15 }),
+  },
+]
+
+function ChartsShowcaseBarGraph() {
+  return (
+    <Detail
+      navigationTitle="Model Spend"
+      markdown="# Model Spend\n\nApril 2026 usage by model and API key."
+      metadata={
+        <Detail.Metadata>
+          <box flexDirection="row" gap={2} paddingBottom={1}>
+            <box border borderColor="#2a2a2a" paddingLeft={2} paddingRight={2} height={3} justifyContent="center">
+              <text>‹  April 2026  ›</text>
+            </box>
+            <box border borderColor="#2d5fa8" paddingLeft={2} paddingRight={2} height={3} justifyContent="center">
+              <text>All Models⌄</text>
+            </box>
+            <box border borderColor="#2a2a2a" paddingLeft={2} paddingRight={2} height={3} justifyContent="center">
+              <text>All Keys⌄</text>
+            </box>
+          </box>
+          <box border borderColor="#2a2a2a" paddingTop={2} paddingLeft={2} paddingRight={2} paddingBottom={1}>
+            <BarGraph
+              height={24}
+              labels={labels}
+              barGap={1}
+              yFormat={(value) => `$${value.toFixed(0)}`}
+              showLegend
+            >
+              {modelSpend.map((series) => {
+                return (
+                  <BarGraph.Series
+                    key={series.title}
+                    color={series.color}
+                    data={series.data}
+                    title={series.title}
+                  />
+                )
+              })}
+            </BarGraph>
+          </box>
+        </Detail.Metadata>
+      }
+    />
+  )
+}
+
+void renderWithProviders(<ChartsShowcaseBarGraph />)