termcast 1.3.50 → 1.3.52

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 />)

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

@@ -0,0 +1,72 @@
+// E2E tests for ProgressBar example.
+// Verifies ProgressBar in List.Item.Detail.Metadata updates per selected item.
+
+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-progress-bar.tsx'],
+    cols: 80,
+    rows: 24,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('progress bars render in detail metadata and update on selection', async () => {
+  const initial = await session.text({
+    waitFor: (text) => {
+      return text.includes('OpenAI account') && text.includes('37% used')
+    },
+    timeout: 10000,
+  })
+
+  expect(initial).toMatchInlineSnapshot(`
+    "
+
+
+       ProgressBar Metadata ─────────────────────────────────────────────────────
+
+       > Search...
+
+      ›OpenAI account default workspace     │ Current session
+       Anthropic account research workspace │ █████████░░░░░░░░░░░░░░░░ 37% used
+       Google account sandbox workspace     │ Resets 9pm (Asia/Bangkok)
+                                            │
+                                            │ Current week (all models)
+                                            │ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 7% used
+                                            │ Resets Feb 27, 1pm (Asia/Bangkok)
+                                            │
+       ↑↓ navigate   ^k actions             │
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  expect(initial).toContain('37% used')
+  expect(initial).toContain('7% used')
+
+  await session.press('down')
+
+  const second = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Anthropic account') && text.includes('82% used')
+    },
+    timeout: 10000,
+  })
+
+  expect(second).toContain('46% used')
+  expect(second).toContain('Europe/Rome')
+}, 30000)

package/src/examples/table-edge-cases.vitest.tsx

@@ -86,6 +86,7 @@ test('inline formatting table renders all rows', async () => {
       Done.
 
 
+      esc go back   ^k actions                             powered by termcast.app
 
 
 
@@ -106,7 +107,6 @@ test('inline formatting table renders all rows', async () => {
 
 
 
-      esc go back   ^k actions                             powered by termcast.app
 
     "
   `)

package/src/index.tsx

@@ -45,6 +45,10 @@ export type {
   ActionPanelSectionProps,
 } from 'termcast/src/components/actions'
 
+// Core UI Components - Markdown
+export { Markdown } from 'termcast/src/components/markdown'
+export type { MarkdownProps } from 'termcast/src/components/markdown'
+
 // Core UI Components - Detail
 export { Detail } from 'termcast/src/components/detail'
 export type {
@@ -82,6 +86,21 @@ export type {
   BarGraphSeriesProps,
 } from 'termcast/src/components/bar-graph'
 
+// Core UI Components - CalendarHeatmap
+export { CalendarHeatmap, Heatmap } from 'termcast/src/components/heatmap'
+export type {
+  CalendarHeatmapProps,
+  CalendarHeatmapData,
+  CalendarHeatmapCellChar,
+  HeatmapProps,
+  HeatmapData,
+  HeatmapCellChar,
+} from 'termcast/src/components/heatmap'
+
+// Core UI Components - ProgressBar
+export { ProgressBar } from 'termcast/src/components/progress-bar'
+export type { ProgressBarProps } from 'termcast/src/components/progress-bar'
+
 // Form Components
 import {
   Form as FormComponent,

package/src/internal/date-picker-widget.tsx

@@ -377,7 +377,6 @@ export function DatePickerWidget({
             enableColors && focus === 'year' ? Theme.primary : undefined,
           marginBottom: 0,
         }}
-        onMouseDown={() => setFocus('year')}
       >
         <box
           style={{
@@ -387,11 +386,17 @@ export function DatePickerWidget({
             width: headerWidth,
           }}
         >
-          <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>←</text>
-          <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>
-            {String(y)}
-          </text>
-          <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>→</text>
+          <box onMouseDown={() => { changeYear(-1); setFocus('year') }}>
+            <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>←</text>
+          </box>
+          <box onMouseDown={() => { setFocus('year') }}>
+            <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>
+              {String(y)}
+            </text>
+          </box>
+          <box onMouseDown={() => { changeYear(+1); setFocus('year') }}>
+            <text fg={focus === 'year' ? Theme.text : Theme.textMuted}>→</text>
+          </box>
         </box>
       </box>
 
@@ -404,7 +409,6 @@ export function DatePickerWidget({
             enableColors && focus === 'month' ? Theme.primary : undefined,
           marginBottom: 1,
         }}
-        onMouseDown={() => setFocus('month')}
       >
         <box
           style={{
@@ -414,11 +418,17 @@ export function DatePickerWidget({
             width: headerWidth,
           }}
         >
-          <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>←</text>
-          <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>
-            {MONTHS[m]}
-          </text>
-          <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>→</text>
+          <box onMouseDown={() => { changeMonth(-1); setFocus('month') }}>
+            <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>←</text>
+          </box>
+          <box onMouseDown={() => { setFocus('month') }}>
+            <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>
+              {MONTHS[m]}
+            </text>
+          </box>
+          <box onMouseDown={() => { changeMonth(+1); setFocus('month') }}>
+            <text fg={focus === 'month' ? Theme.text : Theme.textMuted}>→</text>
+          </box>
         </box>
       </box>
 
@@ -485,6 +495,7 @@ export function DatePickerWidget({
                       setSelected(d)
                       setFocus('grid')
                       ensureVisibleFor(d)
+                      onChange?.(d)
                     }}
                   >
                     <text

package/src/internal/navigation.tsx

@@ -13,6 +13,7 @@ import { CommonProps } from 'termcast/src/utils'
 import { useStore, type NavigationStackItem } from 'termcast/src/state'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { logger } from '../logger'
+import { isAppMode } from '../apis/environment'
 
 interface Navigation {
   push: (element: ReactNode, onPop?: () => void) => void
@@ -172,8 +173,12 @@ export function NavigationProvider(props: NavigationProviderProps): any {
           activeSearchInputRef.setText('')
           return
         }
-        // At root with no dialogs and no search text - exit the CLI
-        renderer.destroy()
+        // At root with no dialogs and no search text - exit the CLI.
+        // In app mode (standalone desktop app), ESC at root is a no-op
+        // since destroying the renderer would kill the entire application.
+        if (!isAppMode()) {
+          renderer.destroy()
+        }
       }
     }
   })

package/src/internal/providers.tsx

@@ -86,6 +86,7 @@ class ErrorBoundaryClass extends Component<
   constructor(props: { children: ReactNode }) {
     super(props)
     this.state = { hasError: false, error: null }
+    this.reset = this.reset.bind(this)
   }
 
   static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
@@ -100,22 +101,45 @@ class ErrorBoundaryClass extends Component<
     })
   }
 
+  reset(): void {
+    // Clear navigation and dialog stacks so the app returns to the root view
+    // instead of re-rendering the same crashed component
+    useStore.setState({
+      navigationStack: [],
+      dialogStack: [],
+      toast: null,
+      toastWithPrimaryAction: false,
+      showActionsDialog: false,
+    })
+    this.setState({ hasError: false, error: null })
+  }
+
   render(): any {
     if (this.state.hasError) {
-      return <ErrorDisplay error={this.state.error} />
+      return <ErrorDisplay error={this.state.error} onRetry={this.reset} />
     }
 
     return this.props.children
   }
 }
 
-function ErrorDisplay({ error }: { error: Error | null }): any {
+function ErrorDisplay({ error, onRetry }: { error: Error | null; onRetry: () => void }): any {
   const theme = useTheme()
+
+  useKeyboard((evt) => {
+    if (evt.name === 'return') {
+      onRetry()
+    }
+  })
+
   return (
-    <box padding={2}>
+    <box padding={2} flexDirection="column" gap={1}>
       <text fg={theme.error} wrapMode='none'>
         {error?.stack}
       </text>
+      <text fg={theme.textMuted}>
+        Press Enter to retry
+      </text>
     </box>
   )
 }
@@ -125,6 +149,7 @@ const ErrorBoundary = ErrorBoundaryClass as any
 export function TermcastProvider(props: ProvidersProps): any {
   const theme = useTheme()
   const renderer = useRenderer()
+
   useKeyboard((key) => {
     if (!renderer) return
     if (key.ctrl && key.name === 'd') {
@@ -136,6 +161,26 @@ export function TermcastProvider(props: ProvidersProps): any {
     }
   })
 
+  // Cmd+C (super+c): if there's an active selection, copy it to clipboard and clear.
+  // Otherwise let the key propagate to the TUI for other handlers.
+  // In standalone apps, WezTerm forwards Cmd+C via SendKey so it arrives as super modifier.
+  useKeyboard((key) => {
+    if (!renderer) return
+    if (key.super && key.name === 'c') {
+      if (renderer.hasSelection) {
+        const selection = renderer.getSelection()
+        if (selection) {
+          const text = selection.getSelectedText()
+          if (text) {
+            Clipboard.copy(text)
+            renderer.clearSelection()
+            key.stopPropagation()
+          }
+        }
+      }
+    }
+  })
+
   return (
     <ErrorBoundary>
       <Suspense fallback={<LoadingFallback />}>

package/src/logger.tsx

@@ -66,7 +66,12 @@ process.on('uncaughtException', (error: Error) => {
   } else {
     logger.error('Uncaught Exception:', serialize(error))
   }
-  process.exit(1)
+  // In app mode, don't exit on uncaught exceptions — the error boundary
+  // will catch React errors, and crashing the whole app is worse than
+  // a broken screen the user can recover from.
+  if (process.env.TERMCAST_APP_MODE !== '1') {
+    process.exit(1)
+  }
 })
 
 process.on('unhandledRejection', async (reason: any, promise: Promise<any>) => {