termcast 1.3.49 → 1.3.51

package/src/examples/list-with-dropdown.vitest.tsx

@@ -33,7 +33,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
 
        > Search...                                                All ▾
 
@@ -49,7 +49,7 @@ test('list with dropdown navigation', async () => {
        Apple Juice Juice
 
 
-       ↑↓ navigate   ^p dropdown   ^k actions
+       ↑↓ navigate   ^k actions   ^p select drink type
 
 
 
@@ -69,7 +69,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Select Drink Type                                      esc   │
@@ -103,7 +103,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Select Drink Type                                      esc   │
@@ -135,7 +135,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Select Drink Type                                      esc   │
@@ -167,7 +167,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Select Drink Type                                      esc   │
@@ -203,7 +203,7 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
 
        > Search...                                               Wine ▾
 
@@ -215,7 +215,7 @@ test('list with dropdown navigation', async () => {
 
 
 
-       ↑↓ navigate   ^p dropdown   ^k actions
+       ↑↓ navigate   ^k actions   ^p select drink type
 
 
 
@@ -253,7 +253,7 @@ test('small screen: dropdown accessory wastes vertical space', async () => {
       "
 
 
-         Search Beers ─────────────────────────────────────────
+         Search Beers ────────────────────────────────── ◆ Acme
 
          > Search...                                      All ▾
 
@@ -265,7 +265,7 @@ test('small screen: dropdown accessory wastes vertical space', async () => {
          Pinot Noir Wine
 
 
-         ↑↓ navigate   ^p dropdown   ^k actions"
+         ↑↓ navigate   ^k actions   ^p select drink type"
     `)
   } finally {
     smallSession.close()
@@ -292,7 +292,7 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Select Drink Type                                      esc   │
@@ -334,7 +334,7 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
 
        > Search...                                                All ▾
 
@@ -370,7 +370,7 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
 
        > Search...                                               Wine ▾
 
@@ -382,7 +382,7 @@ test('list with dropdown search and filter', async () => {
 
 
 
-       ↑↓ navigate   ^p dropdown   ^k actions
+       ↑↓ navigate   ^k actions   ^p select drink type
 
 
 
@@ -406,7 +406,7 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+       Search Beers ──────────────────────────────────────────── ◆ Acme
 
        > pinot                                                   Wine ▾
 
@@ -418,7 +418,7 @@ test('list with dropdown search and filter', async () => {
 
 
 
-       ↑↓ navigate   ^p dropdown   ^k actions
+       ↑↓ navigate   ^k actions   ^p select drink type
 
 
 

package/src/examples/list-with-sections.vitest.tsx

@@ -334,67 +334,79 @@ test('list click functionality', async () => {
     },
   })
 
-  // Click on "Banana" item (visible in initial view)
+  // Click on "Banana" — should immediately execute first action (navigate to detail)
   await session.click('Banana', { first: true })
 
-  const afterClickBananaSnapshot = await session.text()
-  expect(afterClickBananaSnapshot).toMatchInlineSnapshot(`
+  const afterClickBanana = await session.text()
+  expect(afterClickBanana).toMatchInlineSnapshot(`
     "
 
 
-       Simple List Example ────────────────────────────────────────────
 
-       > Search items...
 
-       Fruits
-       Apple Red and sweet                                Fresh Popular
-      ›Banana Yellow and nutritious                                Ripe
-       Orange Citrus and juicy                                    Fresh
-       Grape Sweet clusters                                    Seasonal
-       Mango Tropical delight                                  Imported
-       Pineapple Sweet and tangy
-       Strawberry Red and sweet                                 Popular
+      Banana
 
+      A yellow tropical fruit that's nutritious and energy-rich.
 
+      Benefits
+
+      - High in potassium
+      - Natural energy booster
+      - Aids digestion
+
+
+
+      esc go back   ^k actions
 
-       ↵ view details   ↑↓ navigate   ^k actions
 
     "
   `)
+  expect(afterClickBanana).toContain('Banana')
+  expect(afterClickBanana).toContain('go back')
 
-  // Click on "Apple" item
+  // Go back to list
+  await session.press('escape')
+  await session.text({ waitFor: (text) => /search/i.test(text) })
+
+  // Click on "Apple" — should also immediately execute (Apple has actions)
   await session.click('Apple', { first: true })
 
-  const afterClickAppleSnapshot = await session.text()
-  expect(afterClickAppleSnapshot).toMatchInlineSnapshot(`
+  const afterClickApple = await session.text()
+  expect(afterClickApple).toMatchInlineSnapshot(`
     "
 
 
-       Simple List Example ────────────────────────────────────────────
 
-       > Search items...
 
-       Fruits
-      ›Apple Red and sweet                                Fresh Popular
-       Banana Yellow and nutritious                                Ripe
-       Orange Citrus and juicy                                    Fresh
-       Grape Sweet clusters                                    Seasonal
-       Mango Tropical delight                                  Imported
-       Pineapple Sweet and tangy
-       Strawberry Red and sweet                                 Popular
+      Apple
 
+      A delicious red fruit that's sweet and crunchy.
 
+      Nutrition Facts
+
+      - High in fiber
+      - Rich in antioxidants
+      - Good source of vitamin C
+
+
+
+      esc go back   ^k actions
 
-       ↵ view details   ↑↓ navigate   ^k actions
 
     "
   `)
+  expect(afterClickApple).toContain('Apple')
+  expect(afterClickApple).toContain('go back')
+
+  // Go back to list
+  await session.press('escape')
+  await session.text({ waitFor: (text) => /search/i.test(text) })
 
-  // Click on "Grape" item (visible in initial view)
+  // Click on "Grape" — no actions, should just select
   await session.click('Grape', { first: true })
 
-  const afterClickGrapeSnapshot = await session.text()
-  expect(afterClickGrapeSnapshot).toMatchInlineSnapshot(`
+  const afterClickGrape = await session.text()
+  expect(afterClickGrape).toMatchInlineSnapshot(`
     "
 
 
@@ -417,7 +429,8 @@ test('list click functionality', async () => {
 
     "
   `)
-}, 10000)
+  expect(afterClickGrape).toContain('Grape')
+}, 15000)
 
 test('list actions panel with ctrl+k', async () => {
   await session.text({

package/src/examples/simple-detail-table.vitest.tsx

@@ -66,7 +66,6 @@ test('markdown tables render with borderless layout', async () => {
       ap-south-1  89ms                     /api/health  500
 
 
-      esc go back   ^k actions                             powered by termcast.app
 
 
 
@@ -83,6 +82,7 @@ test('markdown tables render with borderless layout', async () => {
 
 
 
+      esc go back   ^k actions                             powered by termcast.app
 
     "
   `)
@@ -166,7 +166,6 @@ test('two tables render side by side in a Row', async () => {
       ap-south-1  89ms                     /api/health  500
 
 
-      esc go back   ^k actions                             powered by termcast.app
 
 
 
@@ -183,6 +182,7 @@ test('two tables render side by side in a Row', async () => {
 
 
 
+      esc go back   ^k actions                             powered by termcast.app
 
     "
   `)

package/src/examples/simple-file-picker.vitest.tsx

@@ -271,7 +271,7 @@ test('selecting first item with enter adds it to the list', async () => {
       │  Enter file path...
       │
       │  Selected files:
-      │  • /Users/morse/Documents/GitHub/termcast/termcast/src
+      │  • /Users/morse/Documents/GitHub/termcast/termcast/src ✕
       │  Choose a folder for output
       │
       ◇  Select Single File

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

@@ -522,30 +522,27 @@ test('grid mouse interaction', async () => {
        Simple Grid Example ────────────────────────────────────────────
 
        > Search items...
-      ╭────────────────────────────────────────────────────────────────╮
-      │                                                                │
-      │   Actions                                                esc   │
-      │                                                                │
-      │   > Search actions...                                          │
-      │                                                                │
-      │  ›Show Details                                                 │
-      │   Copy Emoji                                             ⌃C    │
-      │                                                                │
-      │   Settings                                                     │
-      │   Change Theme...                                              │
-      │   Toggle Console Logs                                          │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │
-      ╰────────────────────────────────────────────────────────────────╯"
-  `)
 
-  // Close the actions panel first
-  await session.press('esc')
+
+       Animals
+       🐕 Dog
+       🐱 Cat
+       🐰 Rabbit
+
+       Others
+       🏠 House
+       🚗 Car
+       🚀 Rocket
+      ›⭐ Star
+       🌙 Moon
+       ☀ Sun
+
+
+
+       ↵ show details   ↑↓ navigate   ^k actions
+
+    "
+  `)
 
   // Navigate back up to make Apple visible.
   // Grid is implemented via List, which uses edge-triggered pagination.
@@ -562,36 +559,13 @@ test('grid mouse interaction', async () => {
     timeout: 5000,
   })
 
-  // Click on "Apple" to go back to first section
+  // Click on "Apple" - it's already selected (first item after scrolling up),
+  // so clicking executes the first action (Show Details) which logs to console.
+  // Verify no actions dialog opened (unlike old behavior).
   await session.click('Apple', { first: true })
 
   const afterClickAppleSnapshot = await session.text()
-  expect(afterClickAppleSnapshot).toMatchInlineSnapshot(`
-    "
-
-
-       Simple Grid Example ────────────────────────────────────────────
-
-       > Search items...
-      ╭────────────────────────────────────────────────────────────────╮
-      │                                                                │
-      │   Actions                                                esc   │
-      │                                                                │
-      │   > Search actions...                                          │
-      │                                                                │
-      │  ›Show Details                                                 │
-      │   Copy Emoji                                             ⌃C    │
-      │                                                                │
-      │   Settings                                                     │
-      │   Change Theme...                                              │
-      │   Toggle Console Logs                                          │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │
-      ╰────────────────────────────────────────────────────────────────╯"
-  `)
-}, 10000)
+  // Apple should still be selected, no actions dialog visible
+  expect(afterClickAppleSnapshot).toContain('›🍎 Apple')
+  expect(afterClickAppleSnapshot).not.toContain('Actions')
+}, 30000)

package/src/examples/simple-heatmap.tsx

@@ -0,0 +1,63 @@
+// Example: CalendarHeatmap component showcase with various color combinations.
+// Shows month splits, width-based truncation, and different color palettes.
+// Demonstrates Markdown component interleaved with Heatmaps for descriptions.
+
+import { CalendarHeatmap, Color, Detail, Markdown } from 'termcast'
+import type { CalendarHeatmapData } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+function createRangeData(start: Date, dayCount: number, offset: number): CalendarHeatmapData[] {
+  return Array.from({ length: dayCount }, (_, index) => {
+    const date = new Date(start)
+    date.setDate(start.getDate() + index)
+
+    const dayOfWeek = date.getDay()
+    const weekendPenalty = dayOfWeek === 0 || dayOfWeek === 6 ? 0.35 : 1
+    const wave = (Math.sin((index + offset) / 6) + 1) / 2
+    const value = Math.round((1 + wave * 7) * weekendPenalty)
+
+    return {
+      date,
+      value,
+    }
+  })
+}
+
+const summerData = createRangeData(new Date(2025, 5, 1), 110, 0)
+const winterData = createRangeData(new Date(2026, 0, 5), 45, 31)
+const longHistoryData = createRangeData(new Date(2021, 0, 1), 1800, 13)
+const recentData = createRangeData(new Date(2025, 9, 1), 150, 7)
+const shortBurst = createRangeData(new Date(2025, 8, 1), 180, 3)
+const journalData = [...summerData, ...winterData]
+
+function SimpleHeatmap() {
+  return (
+    <Detail
+      markdown={[
+        '# 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.',
+      ].join('\n')}
+      metadata={
+        <Detail.Metadata>
+          <Markdown content="**Long history** — 5 years of daily data in purple. Months that don't fit the terminal width are truncated from the left." />
+          <CalendarHeatmap data={longHistoryData} color={Color.Purple} />
+          <Markdown content="**Journal** — summer + winter entries in green, with a fall gap between the two ranges." />
+          <CalendarHeatmap data={journalData} color={Color.Green} />
+          <Markdown content="**Recent activity** — last 150 days in red, showing the sine-wave pattern clearly." />
+          <CalendarHeatmap data={recentData} color={Color.Red} />
+          <Markdown content="**Short burst** — 180 days in blue on a purple empty background." />
+          <CalendarHeatmap data={shortBurst} color={Color.Blue} emptyColor={Color.Purple} />
+          <Markdown content="**Warm tones** — orange cells on magenta empty, same journal data." />
+          <CalendarHeatmap data={journalData} color={Color.Orange} emptyColor={Color.Magenta} />
+          <Markdown content="**Yellow on blue** — high-contrast palette for the recent data set." />
+          <CalendarHeatmap data={recentData} color={Color.Yellow} emptyColor={Color.Blue} />
+        </Detail.Metadata>
+      }
+    />
+  )
+}
+
+renderWithProviders(<SimpleHeatmap />)

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

@@ -0,0 +1,88 @@
+// E2E tests for CalendarHeatmap with normal and overflow data ranges.
+// Verifies month truncation does not overflow terminal width.
+
+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-heatmap.tsx'],
+    cols: 88,
+    rows: 50,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('renders calendar heatmaps with various color combinations', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Calendar Heatmap Color Showcase') && text.includes('Less')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+                                                                                         █
+
+      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
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  Mon
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  Wed
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  Fri
+      ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼
+                                                       Less ◼ ◼ ◼ ◼ ◼ More
+
+      Journal — summer + winter entries in green, with a fall gap between the two
+      ranges.
+
+      Jun        Jul      Aug        Sep  Jan      Feb
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼  Mon
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼  Wed
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼  Fri
+      ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼
+                                      Less ◼ ◼ ◼ ◼ ◼ More
+
+      Recent activity — last 150 days in red, showing the sine-wave pattern clearly.
+
+      Se Oct      Nov        Dec      Jan      Feb
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  Mon
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  Wed
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼
+      ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  ◼ ◼ ◼ ◼  Fri
+
+
+      esc go back   ^k actions                                     powered by termcast.app
+
+    "
+  `)
+
+  const maxLineLength = text.split('\n').reduce((maxLength, line) => {
+    return Math.max(maxLength, line.length)
+  }, 0)
+  expect(maxLineLength).toBeLessThanOrEqual(88)
+}, 30000)

package/src/examples/simple-progress-bar.tsx

@@ -0,0 +1,82 @@
+// Example: ProgressBar rendered inside List.Item.Detail.Metadata.
+// Shows usage-style rows with title, bar+percentage in one line, and reset labels.
+
+import React from 'react'
+import { List, ProgressBar } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+interface UsageItem {
+  title: string
+  subtitle: string
+  sessionUsage: number
+  sessionReset: string
+  weekUsage: number
+  weekReset: string
+}
+
+const usageItems: UsageItem[] = [
+  {
+    title: 'OpenAI account',
+    subtitle: 'default workspace',
+    sessionUsage: 37,
+    sessionReset: 'Resets 9pm (Asia/Bangkok)',
+    weekUsage: 7,
+    weekReset: 'Resets Feb 27, 1pm (Asia/Bangkok)',
+  },
+  {
+    title: 'Anthropic account',
+    subtitle: 'research workspace',
+    sessionUsage: 82,
+    sessionReset: 'Resets 11pm (Europe/Rome)',
+    weekUsage: 46,
+    weekReset: 'Resets Mar 1, 9am (Europe/Rome)',
+  },
+  {
+    title: 'Google account',
+    subtitle: 'sandbox workspace',
+    sessionUsage: 15,
+    sessionReset: 'Resets 6pm (America/New_York)',
+    weekUsage: 24,
+    weekReset: 'Resets Mar 3, 8am (America/New_York)',
+  },
+]
+
+function SimpleProgressBar() {
+  return (
+    <List navigationTitle="ProgressBar Metadata" isShowingDetail={true}>
+      {usageItems.map((item) => {
+        return (
+          <List.Item
+            key={item.title}
+            title={item.title}
+            subtitle={item.subtitle}
+            detail={
+              <List.Item.Detail
+                metadata={
+                  <List.Item.Detail.Metadata>
+                    <ProgressBar
+                      title="Current session"
+                      value={item.sessionUsage}
+                      percentageSuffix="used"
+                      label={item.sessionReset}
+                    />
+                    <ProgressBar
+                      title="Current week (all models)"
+                      value={item.weekUsage}
+                      percentageSuffix="used"
+                      label={item.weekReset}
+                      barCharacter="▁"
+                      trackCharacter="▁"
+                    />
+                  </List.Item.Detail.Metadata>
+                }
+              />
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}
+
+renderWithProviders(<SimpleProgressBar />)