termcast 1.3.50 → 1.3.51

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>) => {

package/src/state.tsx

@@ -1,8 +1,11 @@
+import fs from 'node:fs'
 import { create } from 'zustand'
 import { type ReactNode } from 'react'
 import type { TextareaRenderable } from '@opentui/core'
 import type { RaycastPackageJson } from './package-json'
 import type { KeyboardKeyEquivalent, KeyboardKeyModifier } from 'termcast/src/keyboard'
+import { getResolvedTheme } from './themes'
+import { logger } from './logger'
 
 // Registered action shortcuts for global keyboard handling
 // Stored by ActionPanel, consumed by List/Detail/Form keyboard handlers
@@ -73,6 +76,10 @@ interface AppState {
   shouldAutoExecuteFirstAction: boolean
   // First action title for footer display (set by offscreen ActionPanel)
   firstActionTitle: string
+  // Selected List.Dropdown item title shown in List footer (^p label)
+  dropdownFooterLabel: string
+  // List.Dropdown tooltip shown in footer as ^p label (preferred over dropdownFooterLabel)
+  dropdownTooltip: string
   // Flag to show actions dialog via portal
   showActionsDialog: boolean
   // Portal target node for rendering ActionPanel dialog in the overlay area.
@@ -107,12 +114,41 @@ export const useStore = create<AppState>(() => ({
   // Actions state
   shouldAutoExecuteFirstAction: false,
   firstActionTitle: '',
+  dropdownFooterLabel: '',
+  dropdownTooltip: '',
   showActionsDialog: false,
   actionsPortalTarget: null,
-  // Theme state
-  currentThemeName: 'nerv',
+  // Theme state — TERMCAST_DEFAULT_THEME env var is set by the app launcher
+  currentThemeName: process.env.TERMCAST_DEFAULT_THEME || 'nerv',
   // Active search input ref
   activeSearchInputRef: null,
   // Registered action shortcuts
   registeredActionShortcuts: [],
 }))
+
+// Sync WezTerm's window background with the active termcast theme.
+// When the theme changes, rewrite the background color in wezterm.lua.
+// WezTerm auto-reloads the config on file change, updating the window edges/padding.
+// The config path is passed from the launcher via TERMCAST_WEZTERM_CONFIG env var.
+const weztermConfigPath = process.env.TERMCAST_WEZTERM_CONFIG
+if (weztermConfigPath) {
+  useStore.subscribe((state, prevState) => {
+    if (state.currentThemeName === prevState.currentThemeName) {
+      return
+    }
+    try {
+      const theme = getResolvedTheme(state.currentThemeName)
+      const content = fs.readFileSync(weztermConfigPath, 'utf-8')
+      // Replace the background hex in: config.colors = { background = '#xxxxxx' }
+      const updated = content.replace(
+        /background\s*=\s*'#[0-9a-fA-F]{6}'/,
+        `background = '${theme.background}'`,
+      )
+      if (updated !== content) {
+        fs.writeFileSync(weztermConfigPath, updated)
+      }
+    } catch (e) {
+      logger.log('Failed to update wezterm config background:', e)
+    }
+  })
+}

package/src/theme.tsx

@@ -28,7 +28,8 @@ export function loadPersistedTheme(): string {
   } catch {
     // Ignore errors on load
   }
-  return defaultThemeName
+  // TERMCAST_DEFAULT_THEME is set by the app launcher to override the default theme
+  return process.env.TERMCAST_DEFAULT_THEME || defaultThemeName
 }
 
 export function persistTheme(name: string): void {
@@ -58,6 +59,30 @@ export function getMarkdownSyntaxStyle(): SyntaxStyle {
   return SyntaxStyle.fromStyles(getSyntaxTheme(themeName))
 }
 
+// Resolve a visible but subtle hover background for interactive rows.
+// Some themes map background and backgroundPanel to the same value.
+export function getInteractiveHoverBackground(theme: ResolvedTheme): string {
+  const normalize = (color: string): string => {
+    return color.toLowerCase()
+  }
+  const background = normalize(theme.background)
+
+  if (normalize(theme.backgroundElement) !== background) {
+    return theme.backgroundElement
+  }
+  if (normalize(theme.backgroundPanel) !== background) {
+    return theme.backgroundPanel
+  }
+  if (normalize(theme.borderSubtle) !== background) {
+    return theme.borderSubtle
+  }
+  if (normalize(theme.border) !== background) {
+    return theme.border
+  }
+
+  return theme.primary
+}
+
 // Shared color palette for all chart components (Graph, BarChart, BarGraph).
 // Order: accent, info, success, warning, error, secondary, primary (cycles with %).
 export function getThemePalette(theme: ResolvedTheme): string[] {
@@ -80,4 +105,3 @@ export const markdownSyntaxStyle = new Proxy({} as SyntaxStyle, {
   },
 })
 
-

package/src/utils.tsx

@@ -14,6 +14,7 @@ import {
 import { logger } from './logger'
 import { useStore } from './state'
 import { initializeTheme } from './theme'
+import { isAppMode } from './apis/environment'
 
 export interface RenderWithProvidersOptions {
   extensionName?: string
@@ -59,7 +60,11 @@ export async function renderWithProviders(
 
   const renderer = await createCliRenderer({
     onDestroy: () => {
-      process.exit(0)
+      // In app mode, destroying the renderer should not kill the process.
+      // The app launcher manages the process lifecycle.
+      if (!isAppMode()) {
+        process.exit(0)
+      }
     },
   })