termcast 1.4.1 → 1.6.0

package/src/examples/simple-candle-chart.vitest.tsx

@@ -39,27 +39,27 @@ test('candle chart renders in list detail with axes', async () => {
        > Search markets...
 
        Watchlist                                      │ $74,678│                           │
-      ›BTC Bitcoin                                    │        │                          ▌▌▖│
-       ETH Ethereum                                   │        │                          ▌│▘▌▖│
-       SOL Solana                                     │ $70,438│       │             │    ▌  │▘▘▌
-       XRP XRP                                        │        │      ▖▖▖▖           ▌▌ ▖▖▌     ▌││
-       DOGE Dogecoin                                  │        │      ▌││▌▖▖    ▖▖│││▌▘▌▌│      ▘▘▘▌
-       BNB BNB                                        │ $66,197│▖▖   │▌  ▘▘▘▌▖▖▌▘▌▖▌▌▌ ▘▘
+      ›BTC Bitcoin                      $67,641 -0.2% │        │                          ▌▌▖│
+       ETH Ethereum                      $1,971 -0.3% │        │                          ▌│▘▌▖│
+       SOL Solana                        $83.31 -0.4% │ $70,438│       │             │    ▌  │▘▘▌
+       XRP XRP                            $1.36 -0.4% │        │      ▖▖▖▖           ▌▌ ▖▖▌     ▌││
+       DOGE Dogecoin                    $0.0901 -0.5% │        │      ▌││▌▖▖    ▖▖│││▌▘▌▌│      ▘▘▘▌
+       BNB BNB                             $622 -0.3% │ $66,197│▖▖   │▌  ▘▘▘▌▖▖▌▘▌▖▌▌▌ ▘▘
                                                       │        ││▌▖ │▌▘     ▘▘▌▌  ▘▘▘▘
        Mixed Components                               │        │ │▌▌▘▘        ▘▘
-       BTC - Candles Real BTC/USD hourly candles      │ $61,957│  ││
-       ETH - Candle + Line Candles plus closing line  │         12d        8d         4d         Now
-       SOL - Candle + Volume Candles plus volume spli │
-       BTC vs ETH Side-by-side crypto leaders         │ Price:    $67,641
-       DOGE - Candle + Line Low-priced asset formatti │
+       BTC - CandlesReal BTC/US...rly candles $67,641 │ $61,957│  ││
+       ETH - C...e + LineCandles p...sing line $1,971 │         12d        8d         4d         Now
+       SOL - Ca... + Volum Candles ...me split $83.31 │
+       BTC vs ETH Side-by-side crypto leaders $67,641 │ Price:    $67,641
+       DOGE - ...e + LineLow-pric...ormatting $0.0901 │
                                                       │ Change:   -0.2%
                                                       │
                                                       │ Category: Store of Value
                                                       │
                                                       │ ────────────────────────────────────────────
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions   :vi │ BTC-USD Hourly OHLC
-
+                                                      │ BTC-USD Hourly OHLC
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
     "
   `)
@@ -128,7 +128,7 @@ test('candle + line overlay (mixed components)', async () => {
   }
 
   const text = await session.text({
-    waitFor: (t) => t.includes('›ETH - Candle + Line') && t.includes('closing line'),
+    waitFor: (t) => t.includes('›ETH') && t.includes('Line') && t.includes('Price:  $1,971'),
     timeout: 10000,
   })
 
@@ -141,19 +141,19 @@ test('candle + line overlay (mixed components)', async () => {
        > Search markets...
 
        Watchlist                                      │ $2,220│                            │
-       BTC Bitcoin                                    │       │       │                   ▌▌▖▖
-       ETH Ethereum                                   │ $2,073│       ▖▖▖ │         ▖▖   ▖▌▘▘▌▖▖▖
-       SOL Solana                                     │       │      │▌│▘▌▌▌    ▖▖  ▌▘▌││▌│  │││▌
-       XRP XRP                                        │       │     │▌▘  │ ▌▖  ▖▌▘▌▖▌ ▌▌▘▘      ▌▌▘▘
-       DOGE Dogecoin                                  │ $1,927│▖▖   ▖▌     │▘▌▖▌  │││  │
-       BNB BNB                                        │       │▘▘▌▖▌▘│       ▘▘
+       BTC Bitcoin                      $67,641 -0.2% │       │       │                   ▌▌▖▖
+       ETH Ethereum                      $1,971 -0.3% │ $2,073│       ▖▖▖ │         ▖▖   ▖▌▘▘▌▖▖▖
+       SOL Solana                        $83.31 -0.4% │       │      │▌│▘▌▌▌    ▖▖  ▌▘▌││▌│  │││▌
+       XRP XRP                            $1.36 -0.4% │       │     │▌▘  │ ▌▖  ▖▌▘▌▖▌ ▌▌▘▘      ▌▌▘▘
+       DOGE Dogecoin                    $0.0901 -0.5% │ $1,927│▖▖   ▖▌     │▘▌▖▌  │││  │
+       BNB BNB                             $622 -0.3% │       │▘▘▌▖▌▘│       ▘▘
                                                       │ $1,780│  ▘▘
        Mixed Components                               │        12d        8d          4d         Now
-       BTC - Candles Real BTC/USD hourly candles      │
-      ›ETH - Candle + Line Candles plus closing line  │ $2,197│                           ⢠⣆⣠⡀
-       SOL - Candle + Volume Candles plus volume spli │       │       ⣴⣤⣤ ⣀         ⢠⣀   ⢠⣿⣿⣿⣷⣶⣦⡀
-       BTC vs ETH Side-by-side crypto leaders         │ $1,997│      ⢰⣿⣿⣿⣿⣿⣇   ⣠⣷⣴⣄⣀⢸⣿⣶⣠⣤⣼⣿⣿⣿⣿⣿⣿⣧⣤⣤⣤
-       DOGE - Candle + Line Low-priced asset formatti │       │⣶⡄   ⣦⣾⣿⣿⣿⣿⣿⣿⣶⣶⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       BTC - CandlesReal BTC/US...rly candles $67,641 │
+      ›ETH - C...e + LineCandles p...sing line $1,971 │ $2,197│                           ⢠⣆⣠⡀
+       SOL - Ca... + Volum Candles ...me split $83.31 │       │       ⣴⣤⣤ ⣀         ⢠⣀   ⢠⣿⣿⣿⣷⣶⣦⡀
+       BTC vs ETH Side-by-side crypto leaders $67,641 │ $1,997│      ⢰⣿⣿⣿⣿⣿⣇   ⣠⣷⣴⣄⣀⢸⣿⣶⣠⣤⣼⣿⣿⣿⣿⣿⣿⣧⣤⣤⣤
+       DOGE - ...e + LineLow-pric...ormatting $0.0901 │       │⣶⡄   ⣦⣾⣿⣿⣿⣿⣿⣿⣶⣶⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
                                                       │ $1,797│⣿⣿⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
                                                       │        12d        8d          4d         Now
                                                       │
@@ -166,7 +166,8 @@ test('candle + line overlay (mixed components)', async () => {
     "
   `)
 
-  expect(text).toContain('Candle + Line')
+  expect(text).toContain('›ETH')
+  expect(text).toContain('Line')
 }, 30000)
 
 test('candle + volume bar chart (mixed components)', async () => {
@@ -177,7 +178,7 @@ test('candle + volume bar chart (mixed components)', async () => {
   }
 
   const text = await session.text({
-    waitFor: (t) => t.includes('›SOL - Candle + Volume') && t.includes('half'),
+    waitFor: (t) => t.includes('›SOL') && t.includes('Second half'),
     timeout: 10000,
   })
 
@@ -190,32 +191,33 @@ test('candle + volume bar chart (mixed components)', async () => {
        > Search markets...
 
        Watchlist                                      │ $95.03│                           ││
-       BTC Bitcoin                                    │       │       │             │     ▖▖▖▖
-       ETH Ethereum                                   │ $88.26│       ▌▌▖ ││    │   ▖▖   ▌▘▘▘▌▌▌│
-       SOL Solana                                     │       │      ▖▌│▘▌▌▌   │▌▌▖▖▌▘▌▖▌▘     ▘▌│││
-       XRP XRP                                        │       │     │▌   │ ▌▖│ ▌▘▘▘▌▌ ▘▘││      ▘▘▘▌
-       DOGE Dogecoin                                  │ $81.48│▖▖   ▌▘     │▘▌▌▘  │
-       BNB BNB                                        │       │▘▘▌▖▌▘        ▘▘
+       BTC Bitcoin                      $67,641 -0.2% │       │       │             │     ▖▖▖▖
+       ETH Ethereum                      $1,971 -0.3% │ $88.26│       ▌▌▖ ││    │   ▖▖   ▌▘▘▘▌▌▌│
+       SOL Solana                        $83.31 -0.4% │       │      ▖▌│▘▌▌▌   │▌▌▖▖▌▘▌▖▌▘     ▘▌│││
+       XRP XRP                            $1.36 -0.4% │       │     │▌   │ ▌▖│ ▌▘▘▘▌▌ ▘▘││      ▘▘▘▌
+       DOGE Dogecoin                    $0.0901 -0.5% │ $81.48│▖▖   ▌▘     │▘▌▌▘  │
+       BNB BNB                             $622 -0.3% │       │▘▘▌▖▌▘        ▘▘
                                                       │ $74.71│  ▘▘│
        Mixed Components                               │        12d        8d          4d         Now
-       BTC - Candles Real BTC/USD hourly candles      │
-       ETH - Candle + Line Candles plus closing line  │   ┌Second half: 95.3%┐
-      ›SOL - Candle + Volume Candles plus volume spli │
-       BTC vs ETH Side-by-side crypto leaders         │
-       DOGE - Candle + Line Low-priced asset formatti │ ────────────────────────────────────────────
+       BTC - CandlesReal BTC/US...rly candles $67,641 │
+       ETH - C...e + LineCandles p...sing line $1,971 │   ┌Second half: 95.3%┐
+      ›SOL - Ca... + Volum Candles ...me split $83.31 │
+       BTC vs ETH Side-by-side crypto leaders $67,641 │
+       DOGE - ...e + LineLow-pric...ormatting $0.0901 │ ────────────────────────────────────────────
                                                       │
                                                       │ Price:  $83.31
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions   :vi │ Change: -0.4%
-
-
-
-
+                                                      │ Change: -0.4%
+                                                      │
+                                                      │
+                                                      │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
     "
   `)
 
-  expect(text).toContain('Candle + Volume')
+  expect(text).toContain('›SOL')
+  expect(text).toContain('Second half')
 }, 30000)
 
 test('side-by-side candle charts in Row', async () => {
@@ -239,28 +241,28 @@ test('side-by-side candle charts in Row', async () => {
        > Search markets...
 
        Watchlist                                      │ $74,678│          ││   $2,220│          │
-       BTC Bitcoin                                    │        │          ▌▌         │  │       ││
-       ETH Ethereum                                   │        │  │     │ ▌▘▌        │  ▖▖│   │ ▌▌▖
-       SOL Solana                                     │        │  ▖▖    ││▌ ▌│       │  ▌▘▌ ││││▌│▌
-       XRP XRP                                        │ $68,318│  ▌▘▌ ││▌▘▘ ▘▘ $2,000│  ▌│▌ ▌▌▌▌▌ ▘▘
-       DOGE Dogecoin                                  │        │▖ ▌│▌▖▌▘▘│           ││ ▌ ▘▌▌│││
-       BNB BNB                                        │        │▌▌▘  ▘▘              │▌▖▌  ││
+       BTC Bitcoin                      $67,641 -0.2% │        │          ▌▌         │  │       ││
+       ETH Ethereum                      $1,971 -0.3% │        │  │     │ ▌▘▌        │  ▖▖│   │ ▌▌▖
+       SOL Solana                        $83.31 -0.4% │        │  ▖▖    ││▌ ▌│       │  ▌▘▌ ││││▌│▌
+       XRP XRP                            $1.36 -0.4% │ $68,318│  ▌▘▌ ││▌▘▘ ▘▘ $2,000│  ▌│▌ ▌▌▌▌▌ ▘▘
+       DOGE Dogecoin                    $0.0901 -0.5% │        │▖ ▌│▌▖▌▘▘│           ││ ▌ ▘▌▌│││
+       BNB BNB                             $622 -0.3% │        │▌▌▘  ▘▘              │▌▖▌  ││
                                                       │ $61,957│ │   │         $1,780│││
        Mixed Components                               │         30d        Now        30d        Now
-       BTC - Candles Real BTC/USD hourly candles      │
-       ETH - Candle + Line Candles plus closing line  │ ────────────────────────────────────────────
-       SOL - Candle + Volume Candles plus volume spli │
-      ›BTC vs ETH Side-by-side crypto leaders         │ Price:  $67,641
-       DOGE - Candle + Line Low-priced asset formatti │
+       BTC - CandlesReal BTC/US...rly candles $67,641 │
+       ETH - C...e + LineCandles p...sing line $1,971 │ ────────────────────────────────────────────
+       SOL - Ca... + Volum Candles ...me split $83.31 │
+      ›BTC vs ETH Side-by-side crypto leaders $67,641 │ Price:  $67,641
+       DOGE - ...e + LineLow-pric...ormatting $0.0901 │
                                                       │ Change: -0.2%
                                                       │
                                                       │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
        ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
-
-
-
-
     "
   `)
 

package/src/examples/simple-dotted-line-graph.tsx

@@ -0,0 +1,53 @@
+// Example: DottedLineGraph showing metric dashboard lines without box borders.
+
+import { Color, DottedLineGraph, Markdown } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const minutes = Array.from({ length: 60 }, (_, index) => {
+  if (index < 25) return 18
+  if (index < 35) return 74 + (index % 3) * 4
+  if (index < 57) return 20
+  return 66
+})
+
+const memory = Array.from({ length: 60 }, (_, index) => {
+  if (index < 24) return 34
+  if (index < 40) return 58 + (index % 5) * 3
+  return 36
+})
+
+const requests2xx = Array.from({ length: 60 }, (_, index) => {
+  if (index < 42) return 52
+  if (index < 56) return 43
+  return 63
+})
+
+const requests5xx = Array.from({ length: 60 }, (_, index) => {
+  if (index < 12) return 24
+  if (index < 45) return 30
+  return 28
+})
+
+function SimpleDottedLineGraph() {
+  return (
+    <>
+      <Markdown content="## Dotted metrics" />
+      <Markdown content="Metric-style dotted lines with braille subcell movement." />
+      <DottedLineGraph
+        height={12}
+        xLabels={['7:28 AM', '7:43 AM', '7:58 AM', '8:13 AM', '8:28 AM']}
+        yRange={[0, 100]}
+        yTicks={4}
+        yFormat={(value) => `${value.toFixed(0)}%`}
+        dotSpacing={4}
+      >
+        <DottedLineGraph.Series data={minutes} color={Color.Blue} title="CPU" />
+        <DottedLineGraph.Series data={memory} color={Color.Purple} title="Memory" />
+        <DottedLineGraph.Series data={requests2xx} color={Color.Green} title="2xx" />
+        <DottedLineGraph.Series data={requests5xx} color={Color.Red} title="5xx" />
+      </DottedLineGraph>
+    </>
+  )
+}
+
+void renderWithProviders(<SimpleDottedLineGraph />)

package/src/examples/simple-dotted-line-graph.vitest.tsx

@@ -0,0 +1,62 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-dotted-line-graph.tsx'],
+    cols: 90,
+    rows: 28,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('dotted line graph renders metric lines and legend', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Dotted metrics') && text.includes('CPU') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+      Dotted metrics
+      Metric-style dotted lines with braille subcell movement.
+      100%│
+          │
+          │                                  ⠄⠈⢀ ⠄⠈⢀ ⠠⠈⢀ ⠠
+          │                                ⠠ ⠁  ⠁ ⠠ ⠁   ⠁⠰      ⠄
+       67%│                                ⠈⠊ ⠠ ⠂⠁ ⠂ ⠠⠐ ⠁ ⠂ ⠄⠐ ⠁⠐                      ⠐ ⡃⠃⠘
+          │⡀⢀⢀ ⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡀⢀⢀ ⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡀⢀⢁⠈⡁⢀ ⡀⡀⢀ ⡁⢀⢀ ⡀⢀⠂⡁⡀⢀ ⡀⡐⢀ ⡀                   ⠁⢀
+          │                                ⠁⠈             ⠐      ⠂  ⢄⢀ ⡀⢀ ⡀⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡈ ⡀
+       33%│⡀⢀⢀ ⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡀⢀⢀ ⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡀⢈ ⠁             ⠐      ⠰ ⠄⠠⠠ ⠄⠠ ⠄⠄⠠ ⠄⠄⠠ ⠄⠠⠠ ⠄⠠⡀⠄⠄⠠
+          │                ⠐⠐ ⠂⠐ ⠂⠂⠐ ⠂⠐⠐ ⠂⠐⠐⠁⠂⠐ ⠂⠂⠐ ⠂⠐⠐ ⠂⠐⠐⠂⠂⠐ ⠂⠂⠐ ⠂⠐⠐ ⠂⠠ ⠄⠄⠠ ⠄⠄⠠ ⠄⠠⠠ ⠄⢠ ⠄⠄⠠
+          │⡁⢈⢈ ⡁⢈ ⡁⡁⢈ ⡁⢈⢈ ⡁⢀⢀ ⡀⢀ ⡀⡀⢀ ⡀⢀⢀ ⡀⢀⢈               ⠆⠄⠠ ⠄⠄⠠ ⠄⠠⠠ ⠄⠠ ⠄⠄⠠ ⠄⠄⠠ ⠄⠠⠠ ⠄⠠
+          │
+        0%│
+           7:28 AM          7:43 AM             7:58 AM             8:13 AM          8:28 AM
+           ● CPU  ● Memory  ● 2xx  ● 5xx
+
+
+
+
+
+
+
+
+
+    "
+  `)
+  expect(text).toContain('Dotted metrics')
+  expect(text).toContain('CPU')
+  expect(text).toContain('8:28 AM')
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+}, 30000)

package/src/examples/simple-grid.vitest.tsx

@@ -228,7 +228,7 @@ test('grid search functionality', async () => {
        🚀 Rocket
        ⭐ Star
        🌙 Moon
-       ☀ Sun
+       ☀️ Sun
 
 
        ↵ show details   ↑↓ navigate   ^k actions   :vim
@@ -268,7 +268,7 @@ test('grid search functionality', async () => {
        🚀 Rocket
        ⭐ Star
        🌙 Moon
-       ☀ Sun
+       ☀️ Sun
 
 
        ↵ show details   ↑↓ navigate   ^k actions   :vim
@@ -342,7 +342,7 @@ test('grid search functionality', async () => {
        🚀 Rocket
        ⭐ Star
        🌙 Moon
-       ☀ Sun
+       ☀️ Sun
 
 
        ↵ show details   ↑↓ navigate   ^k actions   :vim
@@ -535,7 +535,7 @@ test('grid mouse interaction', async () => {
        🚀 Rocket
       ›⭐ Star
        🌙 Moon
-       ☀ Sun
+       ☀️ Sun
 
 
 

package/src/examples/simple-heatmap.vitest.tsx

@@ -36,12 +36,12 @@ test('renders calendar heatmaps with various color combinations', async () => {
       Calendar Heatmap Color Showcase
 
 
+      Each heatmap demonstrates a different color combination.
+      Data has a late-fall gap to show that empty weeks are skipped.
+      Last heatmap renders multi-year data to verify width truncation.
 
-
-
-
-
-
+      Long history — 5 years of daily data in purple. Months that don't fit the
+      terminal width are truncated from the left.
 
       May      Jun        Jul      Aug        Sep      Oct      Nov
       ◼ ◼   ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼    ◼ ◼ ◼ ◼    ◼ ◼ ◼  ◼ ◼   ◼  ◼ ◼ ◼   ◼
@@ -53,8 +53,8 @@ test('renders calendar heatmaps with various color combinations', async () => {
       ◼   ◼ ◼  ◼ ◼ ◼   ◼  ◼ ◼ ◼    ◼ ◼ ◼ ◼    ◼ ◼ ◼ ◼  ◼   ◼ ◼  ◼ ◼   ◼
                                                        Less   ◼ ◼ ■ ■ More
 
-
-
+      Journal — summer + winter entries in green, with a fall gap between the two
+      ranges.
 
       Jun        Jul      Aug        Sep  Jan      Feb
       ◼ ◼ ◼ ◼    ◼ ◼ ◼ ◼    ◼ ◼ ◼ ◼  ◼      ◼ ◼ ◼  ◼   ◼
@@ -66,14 +66,14 @@ test('renders calendar heatmaps with various color combinations', async () => {
       ◼ ◼ ◼   ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼       ◼ ◼ ◼ ◼    ◼
                                       Less   ◼ ◼ ■ ■ More
 
-
-
+      Recent activity — last 150 days in red, showing the sine-wave pattern clearly.
 
       Se Oct      Nov        Dec      Jan      Feb
          ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼    ◼ ◼ ◼ ◼    ◼ ◼ ◼  ◼ ◼   ◼
          ■ ◼ ◼ ◼  ■ ■ ■ ◼ ◼  ◼ ■ ■ ◼  ◼ ◼ ■ ■  ■ ◼ ◼ ■  Mon
          ■ ◼ ◼ ◼  ■ ■ ■ ◼ ◼  ■ ■ ■ ◼  ◼ ◼ ■ ■  ◼ ◼ ◼ ■
       ■  ■ ◼ ◼ ◼  ■ ■ ■ ◼ ◼  ■ ■ ■ ◼  ◼ ◼ ■ ■  ◼ ◼ ◼ ■  Wed
+      ■  ■ ◼ ◼ ◼  ■ ■ ◼ ◼ ◼  ■ ■ ■ ◼  ◼ ◼ ■ ■  ◼ ◼ ◼ ■
 
 
       esc go back   ^k actions                                     powered by termcast.app

package/src/examples/simple-histogram.tsx

@@ -0,0 +1,90 @@
+// Example: Histogram component showing action distribution from an AI coding session.
+// Replicates the horizontal distribution table with colored dots, counts, percentages,
+// and bar visualization.
+
+import React from 'react'
+import { List, Histogram, Color } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+// ── Data ─────────────────────────────────────────────────────────────
+
+interface SessionData {
+  title: string
+  subtitle: string
+  actions: Array<{ label: string; value: number; color?: Color.ColorLike }>
+}
+
+const sessions: SessionData[] = [
+  {
+    title: 'Session: refactor(dataset)',
+    subtitle: '257 steps · 47m 12s wall · 5.4M tokens',
+    actions: [
+      { label: 'user', value: 5, color: Color.Orange },
+      { label: 'think', value: 13, color: Color.SecondaryText },
+      { label: 'read', value: 44, color: '#00CCCC' },
+      { label: 'edit', value: 108, color: Color.Purple },
+      { label: 'bash', value: 64, color: Color.Yellow },
+      { label: 'write', value: 17, color: Color.Green },
+      { label: 'grep/glob', value: 6, color: Color.Blue },
+    ],
+  },
+  {
+    title: 'Session: add dark mode',
+    subtitle: '89 steps · 12m 30s wall · 1.2M tokens',
+    actions: [
+      { label: 'user', value: 8 },
+      { label: 'think', value: 20 },
+      { label: 'read', value: 15 },
+      { label: 'edit', value: 30 },
+      { label: 'bash', value: 12 },
+      { label: 'write', value: 4 },
+    ],
+  },
+  {
+    title: 'Session: fix auth bug',
+    subtitle: '42 steps · 5m 18s wall · 800K tokens',
+    actions: [
+      { label: 'think', value: 10 },
+      { label: 'read', value: 8 },
+      { label: 'edit', value: 15 },
+      { label: 'bash', value: 7 },
+      { label: 'grep/glob', value: 2 },
+    ],
+  },
+]
+
+// ── Component ────────────────────────────────────────────────────────
+
+function HistogramExample() {
+  return (
+    <List navigationTitle="Histogram Showcase" isShowingDetail={true}>
+      {sessions.map((session) => (
+        <List.Item
+          key={session.title}
+          title={session.title}
+          subtitle={session.subtitle}
+          detail={
+            <List.Item.Detail
+              metadata={
+                <List.Item.Detail.Metadata>
+                  <Histogram maxBarWidth={30}>
+                    {session.actions.map((action) => (
+                      <Histogram.Item
+                        key={action.label}
+                        label={action.label}
+                        value={action.value}
+                        color={action.color}
+                      />
+                    ))}
+                  </Histogram>
+                </List.Item.Detail.Metadata>
+              }
+            />
+          }
+        />
+      ))}
+    </List>
+  )
+}
+
+renderWithProviders(<HistogramExample />)