termcast 1.3.48 → 1.3.50

package/src/examples/graph-multi-series.tsx

@@ -0,0 +1,36 @@
+// Example: Graph with multiple series - stock price and moving average.
+// Demonstrates multi-series rendering with different colors.
+
+import { Detail, Graph, Color } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+// 20 days of price data
+const prices = [
+  150, 155, 148, 162, 158, 165, 170, 168, 175, 180,
+  178, 185, 190, 188, 195, 192, 198, 202, 200, 208,
+]
+
+// Simple moving average (5-day window)
+const sma: number[] = prices.map((_, i) => {
+  if (i < 4) return prices[i]!
+  const window = prices.slice(i - 4, i + 1)
+  return window.reduce((sum, v) => sum + v, 0) / window.length
+})
+
+const xLabels = ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20']
+
+function GraphMultiSeries() {
+  return (
+    <Detail
+      markdown="# Multi-Series Chart"
+      metadata={
+        <Graph height={12} xLabels={xLabels} yTicks={5}>
+          <Graph.Line data={prices} color={Color.Orange} title="Price" />
+          <Graph.Line data={sma} color={Color.Blue} title="SMA(5)" />
+        </Graph>
+      }
+    />
+  )
+}
+
+renderWithProviders(<GraphMultiSeries />)

package/src/examples/graph-multi-series.vitest.tsx

@@ -0,0 +1,89 @@
+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/graph-multi-series.tsx'],
+    cols: 70,
+    rows: 24,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('multi-series graph renders both lines', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Multi-Series') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      Multi-Series Chart
+      211.0│                                                        ⣠
+           │                                                 ⢀⣠⣄⣀ ⣠⣾⣿
+           │                                         ⢀⡀   ⢀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿
+      194.5│                                   ⢀⣀⡀ ⣠⣴⣿⣿⣷⣦⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                                ⢀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                          ⣀⣤⣀ ⣠⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      178.0│                       ⢀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │                ⢀⣤⣶⣤⣄⣠⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      161.5│         ⣀    ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │        ⣼⣿⣿⣶⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+           │⣀⣤⣶⣷⣤⡀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      145.0│⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+            Day 1       Day 5        Day 10        Day 15      Day 20
+
+
+      esc go back   ^k actions
+
+
+    "
+  `)
+
+  // Should contain braille characters
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+  // Y-axis separator
+  expect(text).toContain('│')
+  // Title
+  expect(text).toContain('Multi-Series')
+  // X-axis labels
+  expect(text).toContain('Day 1')
+  expect(text).toContain('Day 20')
+}, 30000)
+
+test('multi-series uses different colors per series', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Multi-Series') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Check that orange-colored braille chars exist (price series uses Color.Orange = #FF9F43)
+  const orangeText = await session.text({
+    only: { foreground: '#ff9f43' },
+    timeout: 5000,
+  })
+
+  // Check that blue-colored braille chars exist (SMA series uses Color.Blue = #5CB8FF)
+  const blueText = await session.text({
+    only: { foreground: '#5cb8ff' },
+    timeout: 5000,
+  })
+
+  // Both series should produce braille output
+  expect(orangeText).toMatch(/[\u2800-\u28FF]/)
+  expect(blueText).toMatch(/[\u2800-\u28FF]/)
+}, 30000)

package/src/examples/graph-polymarket.tsx

@@ -0,0 +1,182 @@
+// Example: Polymarket-style prediction market UI.
+// List of markets with odds graphs in the side detail panel.
+// Each market shows a probability line chart over time.
+
+import React from 'react'
+import { Action, ActionPanel, List, Color, Graph } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+interface Market {
+  id: string
+  title: string
+  category: string
+  currentOdds: number // 0-100 percentage for "Yes"
+  volume: string
+  endDate: string
+  // 30 data points of odds history (0-100)
+  oddsHistory: number[]
+}
+
+// Generate slightly noisy trend data
+function generateOdds({ start, end, volatility = 5 }: { start: number; end: number; volatility?: number }): number[] {
+  const points = 30
+  const result: number[] = []
+  let current = start
+  const step = (end - start) / (points - 1)
+  for (let i = 0; i < points; i++) {
+    const noise = (Math.sin(i * 1.7) + Math.cos(i * 0.8)) * volatility
+    current = start + step * i + noise
+    result.push(Math.max(1, Math.min(99, Math.round(current * 10) / 10)))
+  }
+  // Ensure last point matches target
+  result[points - 1] = end
+  return result
+}
+
+const markets: Market[] = [
+  {
+    id: 'btc-100k',
+    title: 'Bitcoin above $100k by EOY',
+    category: 'Crypto',
+    currentOdds: 72,
+    volume: '$4.2M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 45, end: 72, volatility: 8 }),
+  },
+  {
+    id: 'eth-merge',
+    title: 'ETH above $5k by Q2 2026',
+    category: 'Crypto',
+    currentOdds: 38,
+    volume: '$1.8M',
+    endDate: 'Jun 30, 2026',
+    oddsHistory: generateOdds({ start: 55, end: 38, volatility: 6 }),
+  },
+  {
+    id: 'fed-rate',
+    title: 'Fed cuts rates below 4%',
+    category: 'Economics',
+    currentOdds: 61,
+    volume: '$8.1M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 40, end: 61, volatility: 4 }),
+  },
+  {
+    id: 'sp500-6k',
+    title: 'S&P 500 reaches 6,000',
+    category: 'Markets',
+    currentOdds: 55,
+    volume: '$3.5M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 35, end: 55, volatility: 7 }),
+  },
+  {
+    id: 'trump-pardon',
+    title: 'Presidential pardon for SBF',
+    category: 'Politics',
+    currentOdds: 8,
+    volume: '$920K',
+    endDate: 'Jan 20, 2027',
+    oddsHistory: generateOdds({ start: 15, end: 8, volatility: 3 }),
+  },
+  {
+    id: 'ai-agi',
+    title: 'AGI announced by major lab',
+    category: 'Tech',
+    currentOdds: 12,
+    volume: '$2.1M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 5, end: 12, volatility: 3 }),
+  },
+  {
+    id: 'sol-flip-eth',
+    title: 'Solana flips Ethereum market cap',
+    category: 'Crypto',
+    currentOdds: 18,
+    volume: '$1.4M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 8, end: 18, volatility: 5 }),
+  },
+  {
+    id: 'recession-2026',
+    title: 'US enters recession in 2026',
+    category: 'Economics',
+    currentOdds: 28,
+    volume: '$5.7M',
+    endDate: 'Dec 31, 2026',
+    oddsHistory: generateOdds({ start: 20, end: 28, volatility: 4 }),
+  },
+]
+
+const xLabels = ['30d', '20d', '10d', 'Now']
+
+function oddsColor(odds: number): Color.ColorLike {
+  if (odds >= 65) return Color.Green
+  if (odds >= 40) return Color.Yellow
+  return Color.Red
+}
+
+function PolymarketExample() {
+  return (
+    <List
+      navigationTitle="Polymarket"
+      searchBarPlaceholder="Search markets..."
+      isShowingDetail={true}
+    >
+      <List.Section title="Trending Markets">
+        {markets.map((market) => {
+          return (
+            <List.Item
+              key={market.id}
+              id={market.id}
+              title={market.title}
+              subtitle={market.category}
+              accessories={[
+                { text: { value: `${market.currentOdds}%`, color: oddsColor(market.currentOdds) } },
+              ]}
+              detail={
+                <List.Item.Detail
+                  metadata={
+                    <List.Item.Detail.Metadata>
+                      <Graph
+                        height={8}
+                        xLabels={xLabels}
+                        yRange={[0, 100]}
+                        yTicks={3}
+                        variant="area"
+                        yFormat={(v) => `${v.toFixed(0)}%`}
+                      >
+                        <Graph.Line
+                          data={market.oddsHistory}
+                          color={oddsColor(market.currentOdds)}
+                          title="Yes"
+                        />
+                      </Graph>
+                      <List.Item.Detail.Metadata.Label
+                        title="Odds"
+                        text={{ value: `${market.currentOdds}% Yes`, color: oddsColor(market.currentOdds) }}
+                      />
+                      <List.Item.Detail.Metadata.Label title="Volume" text={market.volume} />
+                      <List.Item.Detail.Metadata.Label title="Ends" text={market.endDate} />
+                      <List.Item.Detail.Metadata.Separator />
+                      <List.Item.Detail.Metadata.Label title="Probability (30d)" />
+
+                    </List.Item.Detail.Metadata>
+                  }
+                />
+              }
+              actions={
+                <ActionPanel>
+                  <Action title="Buy Yes" onAction={() => {}} />
+                  <Action title="Buy No" onAction={() => {}} />
+                </ActionPanel>
+              }
+            />
+          )
+        })}
+      </List.Section>
+    </List>
+  )
+}
+
+renderWithProviders(<PolymarketExample />)

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

@@ -0,0 +1,130 @@
+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/graph-polymarket.tsx'],
+    cols: 100,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('polymarket list with graph detail renders correctly', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Polymarket') && text.includes('│') && text.includes('Bitcoin')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Polymarket ───────────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Trending Markets                               │ 100%│
+      ›Bitcoin above $100k by EOY Crypto              │     │                              ⣠⣀
+       ETH above $5k by Q2 2026 Crypto                │     │          ⢠⣀       ⢀⣴⣷⡀      ⣰⣿⣿⣷⣀⣤⣴⣦⢀⣴
+       Fed cuts rates below 4% Economics              │     │⣠⣴⡀   ⢀  ⢠⣿⣿⣷⡀ ⣀⣤⣀⣀⣾⣿⣿⣿⣶⣴⣿⣿⣶⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       S&P 500 reaches 6,000 Markets                  │  50%│⣿⣿⣷⣄⢀⣴⣿⣿⣾⣿⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Presidential pardon for SBF Politics           │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       AGI announced by major lab Tech                │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Solana flips Ethereum market cap Crypto        │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       US enters recession in 2026 Economics          │      30d         20d         10d         Now
+                                                      │
+                                                      │ Odds:   72% Yes
+                                                      │
+                                                      │ Volume: $4.2M
+                                                      │
+                                                      │ Ends:   Dec 31, 2026
+                                                      │
+                                                      │ ────────────────────────────────────────────
+                                                      │
+       ↵ buy yes   ↑↓ navigate   ^k actions           │ Probability (30d)
+
+
+
+
+    "
+  `)
+
+  // Market list visible
+  expect(text).toContain('Bitcoin')
+  expect(text).toContain('Polymarket')
+  // Detail panel with graph
+  expect(text).toContain('│')
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+  // Metadata labels
+  expect(text).toContain('Odds')
+  expect(text).toContain('Volume')
+}, 30000)
+
+test('navigating to different market updates the graph', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Bitcoin') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Navigate down to second market (ETH)
+  await session.press('down')
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('›ETH')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Polymarket ───────────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Trending Markets                               │ 100%│
+       Bitcoin above $100k by EOY Crypto              │     │
+      ›ETH above $5k by Q2 2026 Crypto                │     │ ⣀
+       Fed cuts rates below 4% Economics              │     │⣿⣿⣆   ⢀⡀ ⣀⣾⣶⣄      ⢀⣤⣦        ⢀⡀
+       S&P 500 reaches 6,000 Markets                  │  50%│⣿⣿⣿⣷⣴⣾⣿⣿⣿⣿⣿⣿⣿⣦⣤⣶⣷⣦⣤⣿⣿⣿⣷⣤⣀⣤⣤⣀⢀⣴⣿⣿⣧ ⣀⣀⡀ ⢀
+       Presidential pardon for SBF Politics           │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣴⣿
+       AGI announced by major lab Tech                │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Solana flips Ethereum market cap Crypto        │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       US enters recession in 2026 Economics          │      30d         20d         10d         Now
+                                                      │
+                                                      │ Odds:   38% Yes
+                                                      │
+                                                      │ Volume: $1.8M
+                                                      │
+                                                      │ Ends:   Jun 30, 2026
+                                                      │
+                                                      │ ────────────────────────────────────────────
+                                                      │
+       ↵ buy yes   ↑↓ navigate   ^k actions           │ Probability (30d)
+
+
+
+
+    "
+  `)
+
+  // Second market selected
+  expect(text).toContain('›ETH')
+  // Detail should update
+  expect(text).toContain('Volume')
+  // Graph still renders
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+}, 30000)