termcast 1.3.48 → 1.3.49

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

@@ -0,0 +1,200 @@
+// E2E tests for Detail view with markdown tables.
+// Verifies our custom TableRenderable renders borderless tables
+// with header background and alternating row stripes.
+// Also tests two tables side by side in a Row component.
+
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  const dbSuffix = `simple-detail-table-${process.pid}-${Date.now()}`
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-detail-table.tsx'],
+    cols: 80,
+    rows: 50,
+    env: {
+      TERMCAST_DB_SUFFIX: dbSuffix,
+    },
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('markdown tables render with borderless layout', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Server Status') && text.includes('API Gateway') && text.includes('max_connections')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      Server Status
+
+      Active Services
+
+      Service      Status   Uptime  Memory
+      API Gateway  Running  14d 3h  256MB
+      Auth Server  Running  14d 3h  128MB
+      Worker Pool  Running  7d 12h  512MB
+      Cache Layer  Stopped  -       0MB
+
+      Configuration
+
+      Key              Value      Description
+      max_connections  1000       Maximum concurrent connections
+      timeout_ms       5000       Request timeout in ms
+      retry_count      3          Number of retry attempts
+      log_level        info       Logging verbosity
+      region           us-east-1  Deployment region
+
+      The system is operating normally.
+
+      Region      Latency                  Endpoint     RPS
+      us-east-1   12ms                     /api/auth    1200
+      eu-west-1   45ms                     /api/data    3400
+      ap-south-1  89ms                     /api/health  500
+
+
+      esc go back   ^k actions                             powered by termcast.app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Headers
+  expect(text).toContain('Server Status')
+  expect(text).toContain('Active Services')
+  expect(text).toContain('Configuration')
+  // Table header cells
+  expect(text).toContain('Service')
+  expect(text).toContain('Status')
+  expect(text).toContain('Uptime')
+  // Table data cells
+  expect(text).toContain('API Gateway')
+  expect(text).toContain('Running')
+  expect(text).toContain('Worker Pool')
+  expect(text).toContain('Cache Layer')
+  // Second table
+  expect(text).toContain('max_connections')
+  expect(text).toContain('timeout_ms')
+  expect(text).toContain('us-east-1')
+  // Prose below tables
+  expect(text).toContain('operating normally')
+}, 30000)
+
+test('table headers have distinct background color', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Service') && text.includes('API Gateway'),
+    timeout: 10000,
+  })
+
+  // Header cells should use inverted heading colors (heading fg becomes bg)
+  // The default nerv theme heading fg is orange (#e89500), so header bg should be orange
+  const headerBgText = await session.text({
+    only: { background: '#e89500' },
+    timeout: 5000,
+  })
+
+  expect(headerBgText).toContain('Service')
+  expect(headerBgText).toContain('Status')
+}, 30000)
+
+test('two tables render side by side in a Row', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('us-east-1') && text.includes('/api/auth')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      Server Status
+
+      Active Services
+
+      Service      Status   Uptime  Memory
+      API Gateway  Running  14d 3h  256MB
+      Auth Server  Running  14d 3h  128MB
+      Worker Pool  Running  7d 12h  512MB
+      Cache Layer  Stopped  -       0MB
+
+      Configuration
+
+      Key              Value      Description
+      max_connections  1000       Maximum concurrent connections
+      timeout_ms       5000       Request timeout in ms
+      retry_count      3          Number of retry attempts
+      log_level        info       Logging verbosity
+      region           us-east-1  Deployment region
+
+      The system is operating normally.
+
+      Region      Latency                  Endpoint     RPS
+      us-east-1   12ms                     /api/auth    1200
+      eu-west-1   45ms                     /api/data    3400
+      ap-south-1  89ms                     /api/health  500
+
+
+      esc go back   ^k actions                             powered by termcast.app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Left table
+  expect(text).toContain('Region')
+  expect(text).toContain('Latency')
+  expect(text).toContain('us-east-1')
+  expect(text).toContain('12ms')
+  // Right table
+  expect(text).toContain('Endpoint')
+  expect(text).toContain('RPS')
+  expect(text).toContain('/api/auth')
+  expect(text).toContain('3400')
+}, 30000)

package/src/examples/simple-graph.tsx

@@ -0,0 +1,51 @@
+// Example: Graph component showing stock price data in a Detail view.
+// Demonstrates line chart with braille rendering, multiple series,
+// Y-axis labels, and X-axis date labels.
+
+import { Detail, Graph, Color } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+// 30 days of AAPL stock price (simulated)
+const prices = [
+  150.2, 152.1, 148.7, 155.3, 162.8, 158.4, 156.1,
+  160.5, 163.2, 167.8, 165.4, 170.1, 172.5, 169.3,
+  174.8, 178.2, 175.6, 180.1, 183.4, 179.8, 185.2,
+  188.6, 186.3, 190.1, 187.5, 192.8, 195.3, 193.7,
+  198.1, 201.4,
+]
+
+// Volume data (in hundreds, to keep scale reasonable)
+const volume = [
+  12, 8, 15, 22, 45, 18, 10,
+  14, 16, 25, 12, 20, 18, 11,
+  30, 35, 15, 28, 32, 14, 38,
+  42, 20, 35, 18, 40, 45, 22,
+  48, 55,
+]
+
+const days = Array.from({ length: 30 }, (_, i) => {
+  return String(i + 1).padStart(2, '0')
+})
+
+// Show labels every 5 days
+const xLabels = days.filter((_, i) => i % 5 === 0)
+
+function SimpleGraph() {
+  return (
+    <Detail
+      markdown={`# AAPL Stock - 30 Day\n\nPrice range: $${Math.min(...prices).toFixed(2)} - $${Math.max(...prices).toFixed(2)}`}
+      metadata={
+        <Graph
+          height={15}
+          xLabels={xLabels}
+          yTicks={6}
+          yFormat={(v) => v.toFixed(1)}
+        >
+          <Graph.Line data={prices} color={Color.Orange} title="Price" />
+        </Graph>
+      }
+    />
+  )
+}
+
+renderWithProviders(<SimpleGraph />)

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

@@ -0,0 +1,124 @@
+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-graph.tsx'],
+    cols: 80,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('graph renders with braille characters and axis labels', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      // Wait for graph to render - should have braille chars and axis labels
+      return text.includes('AAPL') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      AAPL Stock - 30 Day
+
+      Price range: $148.70 - $201.40
+      204.0│                                                                  ⢀
+           │                                                               ⢀⣴⣾⣿
+           │                                                         ⢀⣠⣴⣦⣄⣠⣿⣿⣿⣿
+      192.4│                                                    ⣠⣀  ⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                                              ⣠⣴⣿⣶⣤⣾⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                                       ⢀⣠⣴⣄ ⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      180.8│                                  ⣠⣀ ⢀⣴⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                               ⢀⣴⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      169.3│                         ⣠⣴⣾⣶⣤⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                   ⢀⣴⣦⣄⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │        ⢀⣄       ⣀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      157.7│       ⢀⣾⣿⣿⣦⣀  ⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │      ⢀⣾⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │⣀⣤⣶⣤⡀⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      146.1│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+            01          06           11            16           21           26
+
+
+      esc go back   ^k actions                             powered by termcast.app
+
+
+
+    "
+  `)
+
+  // Should contain the markdown title
+  expect(text).toContain('AAPL')
+  // Should contain Y-axis separator
+  expect(text).toContain('│')
+  // Should contain braille characters (U+2800 block)
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+  // Should contain X-axis labels
+  expect(text).toContain('01')
+  expect(text).toContain('26')
+  // Should contain Y-axis values
+  expect(text).toContain('204.0')
+  expect(text).toContain('146.1')
+}, 30000)
+
+test('graph renders at different terminal sizes', async () => {
+  // Close existing session and start a smaller one
+  session?.close()
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-graph.tsx'],
+    cols: 50,
+    rows: 24,
+  })
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('AAPL') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+                                                   █
+                                                   █
+      AAPL Stock - 30 Day                          █
+
+      Price range: $148.70 - $201.40
+      204.0│                                   ⢀
+           │                                  ⣠⣿
+           │                              ⢀⣤⣦⣰⣿⣿
+      192.4│                           ⢀⣄ ⣾⣿⣿⣿⣿⣿
+           │                        ⢀⣾⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿
+           │                     ⢠⣦ ⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      180.8│                  ⣠⡀⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                 ⣼⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      169.3│             ⢀⣾⣦⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │          ⢀⣦⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │     ⡄   ⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      157.7│    ⣼⣿⣄ ⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+
+
+      esc go back   ^k actions
+
+    "
+  `)
+
+  // Graph should still render with braille
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+  expect(text).toContain('│')
+}, 30000)

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

@@ -148,7 +148,7 @@ test('grid navigation and display', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
@@ -533,7 +533,7 @@ test('grid mouse interaction', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
@@ -584,7 +584,7 @@ test('grid mouse interaction', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │

package/src/examples/simple-list-search.vitest.tsx

@@ -0,0 +1,65 @@
+// E2E test: search text persists across push/pop navigation.
+// When user types a search query, pushes a detail view (Enter), then pops back (Esc),
+// the search text and filtered results should be restored.
+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-list-search.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('search text persists after push and pop', async () => {
+  // Wait for initial render
+  await session.text({
+    waitFor: (text) => {
+      return /search items/i.test(text) && text.includes('First Item')
+    },
+  })
+
+  // Type "apple" to filter to the Apple item
+  await session.type('apple')
+
+  const afterSearch = await session.text({
+    waitFor: (text) => {
+      return text.includes('apple') && text.includes('Apple')
+    },
+  })
+  expect(afterSearch).toContain('apple')
+  expect(afterSearch).toContain('›Apple')
+
+  // Press Enter to push the Detail view (Apple has a "View Details" action)
+  await session.press('enter')
+
+  const detailView = await session.text({
+    waitFor: (text) => {
+      return text.includes('First Item') || text.includes('Apple')
+    },
+  })
+  // Should be in the detail view now
+  expect(detailView).toContain('go back')
+
+  // Press Esc to pop back to the list
+  await session.press('escape')
+
+  const afterPop = await session.text({
+    waitFor: (text) => {
+      return text.includes('apple')
+    },
+  })
+
+  // Search text "apple" should be restored
+  expect(afterPop).toContain('apple')
+  // The filtered result should still show Apple
+  expect(afterPop).toContain('Apple')
+}, 15000)

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

@@ -306,7 +306,7 @@ test('navigation with actions panel', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
@@ -339,7 +339,7 @@ test('navigation with actions panel', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
@@ -450,7 +450,7 @@ test('navigation with actions panel', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
-      │   See Console Logs                                             │
+      │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │

package/src/examples/simple-table-wrap.tsx

@@ -0,0 +1,55 @@
+// Example: Table component with wrapText enabled for long prose content.
+// Demonstrates that cells can wrap to multiple lines when wrapText is true,
+// versus the default single-line truncation.
+
+import { renderWithProviders } from '../utils'
+import { Table } from 'termcast/src/components/table'
+
+function SimpleTableWrap() {
+  return (
+    <box flexDirection="column" paddingTop={1} paddingLeft={2} paddingRight={2}>
+      <text>Wrapping Table</text>
+      <box height={1} />
+      <Table
+        wrapText
+        headers={['Feature', 'Description']}
+        rows={[
+          [
+            'OAuth Proxy',
+            'Handles the full OAuth authorization code flow including PKCE verification, token exchange, and refresh. The proxy keeps client secrets server-side so CLI tools never need to store them locally.',
+          ],
+          [
+            'Hot Reload',
+            'Watches source files for changes and rebuilds the extension bundle automatically. The TUI updates in place without losing navigation state or scroll position.',
+          ],
+          [
+            'Compiled Mode',
+            'Extensions can be compiled into standalone binaries that embed the package.json and all command components. No filesystem paths are hardcoded, making the binary fully portable.',
+          ],
+        ]}
+      />
+      <box height={1} />
+      <text>Non-wrapping Table (default)</text>
+      <box height={1} />
+      <Table
+        headers={['Feature', 'Description']}
+        rows={[
+          [
+            'OAuth Proxy',
+            'Handles the full OAuth authorization code flow including PKCE verification, token exchange, and refresh. The proxy keeps client secrets server-side so CLI tools never need to store them locally.',
+          ],
+          [
+            'Hot Reload',
+            'Watches source files for changes and rebuilds the extension bundle automatically. The TUI updates in place without losing navigation state or scroll position.',
+          ],
+          [
+            'Compiled Mode',
+            'Extensions can be compiled into standalone binaries that embed the package.json and all command components. No filesystem paths are hardcoded, making the binary fully portable.',
+          ],
+        ]}
+      />
+    </box>
+  )
+}
+
+renderWithProviders(<SimpleTableWrap />)

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

@@ -0,0 +1,91 @@
+// E2E tests for Table component with wrapText.
+// Verifies that long cell text wraps to multiple lines when wrapText is true
+// and truncates to single lines when false (default).
+
+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-table-wrap.tsx'],
+    cols: 80,
+    rows: 50,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('wrapText table shows full prose across multiple lines', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Wrapping Table') && text.includes('OAuth Proxy') && text.includes('Non-wrapping')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+        Wrapping Table
+
+        Feature                             Description
+        OAuth Proxy                         Handles the full OAuth
+                                            authorization code flow including
+                                            PKCE verification, token exchange,
+                                            and refresh. The proxy keeps client
+                                            secrets server-side so CLI tools
+                                            never need to store them locally.
+
+        Hot Reload                          Watches source files for changes
+                                            and rebuilds the extension bundle
+                                            automatically. The TUI updates in
+                                            place without losing navigation
+                                            state or scroll position.
+        Compiled Mode                       Extensions can be compiled into
+                                            standalone binaries that embed the
+                                            package.json and all command
+                                            components. No filesystem paths are
+                                            hardcoded, making the binary fully
+                                            portable.
+
+        Non-wrapping Table (default)
+
+        Feature      Description
+        OAuth Proxy  Handles the full OAuth authorization code flow including
+        Hot Reload   Watches source files for changes and rebuilds the extension
+        Compiled ModeExtensions can be compiled into standalone binaries that
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Wrapping table should show the full long text
+  expect(text).toContain('OAuth Proxy')
+  expect(text).toContain('PKCE verification')
+  expect(text).toContain('Hot Reload')
+  expect(text).toContain('Compiled Mode')
+  expect(text).toContain('portable')
+}, 30000)

package/src/examples/store.vitest.tsx

@@ -58,7 +58,7 @@ test('Store extension - searching for spiceblow shows Database', async () => {
 
 
 
-       ↵ view details   ↑↓ navigate   ^k actions              powered by termcast
+       ↵ view details   ↑↓ navigate   ^k actions          powered by termcast.app