termcast 1.3.9

package/src/internal/error-handler.tsx

@@ -0,0 +1,32 @@
+import { showFailureToast } from 'termcast/src/apis/toast'
+import { logger } from 'termcast/src/logger'
+
+let initialized = false
+
+export function initializeErrorHandlers(): void {
+  if (initialized) return
+  initialized = true
+
+  process.on('unhandledRejection', (reason) => {
+    const err = reason instanceof Error ? reason : new Error(String(reason))
+    logger.error('Unhandled rejection:', err)
+    showFailureToast(err, {
+      title: 'Unhandled Promise Rejection',
+    }).catch((toastErr) => {
+      logger.error('Failed to show toast for unhandled rejection:', toastErr)
+    })
+  })
+
+  process.on('uncaughtException', (err) => {
+    logger.error('Uncaught exception:', err)
+    showFailureToast(err, {
+      title: 'Uncaught Exception',
+    }).catch((toastErr) => {
+      logger.error('Failed to show toast for uncaught exception:', toastErr)
+    })
+  })
+
+  process.on('uncaughtExceptionMonitor', (err, origin) => {
+    logger.error(`Uncaught exception from ${origin}:`, err)
+  })
+}

package/src/internal/focus-context.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, useContext, ReactNode } from 'react'
+import { CommonProps } from 'termcast/src/utils'
+
+interface FocusContextValue {
+  inFocus: boolean
+}
+
+const FocusContext = createContext<FocusContextValue>({ inFocus: true })
+
+interface InFocusProps extends CommonProps {
+  children: ReactNode
+  inFocus: boolean
+}
+
+export function InFocus({ children, inFocus }: InFocusProps): any {
+  const value = React.useMemo(() => ({ inFocus }), [inFocus])
+  return <FocusContext.Provider value={value}>{children}</FocusContext.Provider>
+}
+
+export function useIsInFocus(): boolean {
+  const context = useContext(FocusContext)
+  return context.inFocus
+}

package/src/internal/navigation.tsx

@@ -0,0 +1,149 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  startTransition,
+  useTransition,
+} from 'react'
+import { useKeyboard } from '@opentui/react'
+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'
+
+interface Navigation {
+  push: (element: ReactNode, onPop?: () => void) => void
+  pop: () => void
+}
+
+interface NavigationContextType {
+  navigation: Navigation
+  stack: NavigationStackItem[]
+  isPending: boolean
+}
+
+const NavigationContext = createContext<NavigationContextType | undefined>(
+  undefined,
+)
+
+interface NavigationProviderProps extends CommonProps {
+  children: ReactNode
+}
+
+export function NavigationProvider(props: NavigationProviderProps): any {
+  const stack = useStore((state) => state.navigationStack)
+  const [isPending, startNavigationTransition] = useTransition()
+
+  // Initialize stack with children if empty
+  useLayoutEffect(() => {
+    if (stack.length === 0) {
+      useStore.setState({
+        navigationStack: [{ element: props.children }],
+      })
+    }
+  }, [])
+
+  const push = useCallback((element: any, onPop?: () => void) => {
+    if (!element) {
+      throw new Error(`cannot push falsy value ${element}`)
+    }
+
+    logger.log(
+      'pushing',
+      (element as any)?.type?.name || (element as any)?.type,
+    )
+
+    const currentStack = useStore.getState().navigationStack
+    startNavigationTransition(() => {
+      useStore.setState({
+        navigationStack: [...currentStack, { element, onPop }],
+        dialogStack: [],
+      })
+    })
+  }, [])
+
+  const pop = useCallback(() => {
+    const currentStack = useStore.getState().navigationStack
+    if (currentStack.length <= 1) return
+
+    const newStack = currentStack.slice(0, -1)
+    const poppedItem = currentStack[currentStack.length - 1]
+    if (poppedItem?.onPop) {
+      poppedItem.onPop()
+    }
+
+    startNavigationTransition(() => {
+      useStore.setState({ navigationStack: newStack })
+    })
+  }, [])
+
+  const navigation = React.useMemo(
+    () => ({
+      push,
+      pop,
+    }),
+    [push, pop],
+  )
+
+  const value = React.useMemo(
+    () => ({
+      navigation,
+      stack: stack.length > 0 ? stack : [{ element: props.children }],
+      isPending,
+    }),
+    [navigation, stack, props.children, isPending],
+  )
+
+  const inFocus = useIsInFocus()
+
+  // Handle ESC key to pop navigation
+  useKeyboard((evt) => {
+    if (!inFocus) return
+    if (evt.name === 'escape' && stack.length > 1) {
+      logger.log(
+        'popping navigation',
+        stack.length - 1,
+        'stack:',
+        stack.map((item) => (item.element as any).type.name),
+      )
+      pop()
+    }
+  })
+
+  const currentItem =
+    stack.length > 0 ? stack[stack.length - 1] : { element: props.children }
+
+  return (
+    <NavigationContext.Provider value={value}>
+      {React.cloneElement(currentItem?.element as React.ReactElement, {
+        key: stack.length,
+      })}
+    </NavigationContext.Provider>
+  )
+}
+
+export function useNavigation(): Navigation {
+  const context = useContext(NavigationContext)
+  if (!context) {
+    throw new Error('useNavigation must be used within a NavigationProvider')
+  }
+  return context.navigation
+}
+
+export function useNavigationPending(): boolean {
+  const context = useContext(NavigationContext)
+  return context?.isPending || false
+}
+
+interface NavigationContainerProps extends CommonProps {
+  children: ReactNode
+}
+
+export function NavigationContainer({
+  children,
+}: NavigationContainerProps): any {
+  return <NavigationProvider>{children}</NavigationProvider>
+}

package/src/internal/providers.tsx

@@ -0,0 +1,430 @@
+import React, {
+  Component,
+  Suspense,
+  type ReactNode,
+  type ErrorInfo,
+} from 'react'
+import { QueryClient } from '@tanstack/react-query'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { DialogProvider } from 'termcast/src/internal/dialog'
+import { NavigationProvider } from 'termcast/src/internal/navigation'
+import { CommonProps } from 'termcast/src/utils'
+import { Cache } from 'termcast/src/apis/cache'
+import { logger } from 'termcast/src/logger'
+import { Theme } from 'termcast/src/theme'
+import { useKeyboard } from '@opentui/react'
+import { TextAttributes } from '@opentui/core'
+import { useStore } from 'termcast/src/state'
+import * as fs from 'fs'
+import * as path from 'path'
+import { exec } from 'child_process'
+import dedent from 'string-dedent'
+import { initializeErrorHandlers } from 'termcast/src/internal/error-handler'
+
+// Initialize error handlers at module load time
+initializeErrorHandlers()
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      retry: 2,
+    },
+  },
+})
+
+// Create a custom persister using the Cache class
+const queryCache = new Cache({ namespace: 'tanstack-query' })
+
+const persister = {
+  persistClient: async (client: any) => {
+    const serialized = JSON.stringify(client)
+    queryCache.set('query-client-data', serialized)
+  },
+  restoreClient: async () => {
+    const data = queryCache.get('query-client-data')
+    return data ? JSON.parse(data) : undefined
+  },
+  removeClient: async () => {
+    queryCache.remove('query-client-data')
+  },
+}
+
+interface ProvidersProps extends CommonProps {
+  children: ReactNode
+}
+
+function LoadingFallback(): any {
+  return (
+    <box padding={2}>
+      <text>Loading suspense...</text>
+    </box>
+  )
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+class ErrorBoundaryClass extends Component<
+  { children: ReactNode },
+  ErrorBoundaryState
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props)
+    this.state = { hasError: false, error: null }
+
+    this.openGitHubIssue = this.openGitHubIssue.bind(this)
+    this.getRecentLogs = this.getRecentLogs.bind(this)
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    logger.error('ErrorBoundary caught error:', {
+      message: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    })
+  }
+
+  getRecentLogs(): string {
+    const LOG_FILE = path.join(process.cwd(), 'app.log')
+    try {
+      if (fs.existsSync(LOG_FILE)) {
+        const content = fs.readFileSync(LOG_FILE, 'utf-8')
+        const lines = content.split('\n').filter((line) => line.trim())
+        // Get last 200 lines
+        const recentLines = lines.slice(-200)
+        return recentLines.join('\n')
+      }
+    } catch (err) {
+      logger.error('Failed to read log file:', err)
+    }
+    return 'No logs available'
+  }
+
+  openGitHubIssue(): void {
+    const error = this.state.error
+    if (!error) return
+
+    const logs = this.getRecentLogs()
+
+    // Get navigation stack information for body
+    const navigationStack = useStore.getState().navigationStack
+    const navigationInfo = navigationStack
+      .map((item, index) => {
+        const element = item.element as any
+        const componentName =
+          element?.type?.displayName ||
+          element?.type?.name ||
+          element?.type ||
+          'Unknown'
+        return `${index + 1}. ${componentName}`
+      })
+      .join('\n')
+
+    // Get current extension/command info
+    const extensionPackageJson = useStore.getState().extensionPackageJson
+    const currentCommandName = useStore.getState().currentCommandName
+    const extensionPath = useStore.getState().extensionPath
+
+    const extensionName =
+      extensionPackageJson?.name ||
+      (extensionPath ? path.basename(extensionPath) : null)
+
+    let contextInfo = ''
+    let titlePrefix = ''
+
+    if (extensionName) {
+      contextInfo = `Extension: ${extensionName}`
+      titlePrefix = `\`${extensionName}\``
+      if (currentCommandName) {
+        contextInfo += ` | Command: ${currentCommandName}`
+        titlePrefix += ` > \`${currentCommandName}\``
+      }
+    }
+
+    const title = encodeURIComponent(
+      titlePrefix ? `${titlePrefix}: ${error.message}` : error.message,
+    )
+
+    const MAX_URL_LENGTH = 4096
+    const baseUrl = 'https://github.com/remorses/termcast/issues/new?title='
+    const titlePart = `${baseUrl}${title}&body=`
+
+    // Calculate how much space we have for the body
+    const availableBodyLength = MAX_URL_LENGTH - titlePart.length
+
+    // Always create a minimal body
+    const minimalBody = dedent`
+      ## Error Details
+
+      **Message:** ${error.message}
+      **Context:** ${contextInfo || 'No extension loaded'}
+      **Navigation:** \`${navigationStack
+        .map((item) => {
+          const element = item.element as any
+          return (
+            element?.type?.displayName ||
+            element?.type?.name ||
+            element?.type ||
+            'Unknown'
+          )
+        })
+        .join(' > ')}\`
+
+      ## Stack Trace
+
+      \`\`\`\`
+      ${error.stack || 'No stack trace available'}
+      \`\`\`\`
+
+      ## Environment
+
+      - Platform: ${process.platform}
+      - Node Version: ${process.version}
+      - Date: ${new Date().toISOString()}
+    `
+
+    let body = encodeURIComponent(minimalBody)
+
+    // If still too long, just truncate it
+    if (body.length > availableBodyLength) {
+      body = body.substring(0, availableBodyLength)
+    }
+
+    const url = `${titlePart}${body}`
+
+    // Open in browser
+    const openCmd =
+      process.platform === 'darwin'
+        ? 'open'
+        : process.platform === 'win32'
+          ? 'start'
+          : 'xdg-open'
+
+    exec(`${openCmd} "${url}"`, (err) => {
+      if (err) {
+        logger.error('Failed to open browser:', err)
+      }
+    })
+  }
+
+  render(): any {
+    if (this.state.hasError) {
+      return (
+        <ErrorDisplay
+          error={this.state.error}
+          onOpenIssue={this.openGitHubIssue}
+          getRecentLogs={this.getRecentLogs}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+function ErrorDisplay({
+  error,
+  onOpenIssue,
+  getRecentLogs,
+}: {
+  error: Error | null
+  onOpenIssue: () => void
+  getRecentLogs: () => string
+}): any {
+  const [isHovered, setIsHovered] = React.useState(false)
+  const [showLogs, setShowLogs] = React.useState(false)
+  const [focusedIndex, setFocusedIndex] = React.useState(0) // 0 = issue button, 1+ = stack trace lines
+
+  // Parse stack trace to get file paths with line numbers
+  const stackLines = React.useMemo(() => {
+    if (!error?.stack) return []
+
+    const lines = error.stack.split('\n')
+    const parsedLines: Array<{ text: string; file?: string; line?: number }> =
+      []
+
+    for (const line of lines) {
+      // Match file paths with line:column format
+      // Common patterns: "at file:///path/to/file.ts:123:45" or "at /path/to/file.ts:123:45"
+      const match = line.match(
+        /at\s+(?:.*?\s+\()?(?:file:\/\/)?([^:\s]+(?:\.tsx?|\.jsx?)):(\d+)(?::\d+)?/,
+      )
+
+      if (match) {
+        parsedLines.push({
+          text: line,
+          file: match[1],
+          line: parseInt(match[2], 10),
+        })
+      } else {
+        parsedLines.push({ text: line })
+      }
+    }
+
+    return parsedLines
+  }, [error?.stack])
+
+  // Count of focusable stack lines (those with file paths)
+  const focusableStackLines = stackLines.filter((line) => line.file).length
+
+  useKeyboard(async (evt) => {
+    if (evt.name === 'down') {
+      setFocusedIndex((prev) => {
+        const maxIndex = focusableStackLines // 0 for button + focusable stack lines
+        return Math.min(prev + 1, maxIndex)
+      })
+    } else if (evt.name === 'up') {
+      setFocusedIndex((prev) => Math.max(prev - 1, 0))
+    } else if (evt.name === 'return') {
+      if (focusedIndex === 0) {
+        // Issue button is focused
+        onOpenIssue()
+      } else {
+        // Stack trace line is focused - copy file path to clipboard
+        let currentFocusableIndex = 0
+        for (const line of stackLines) {
+          if (line.file) {
+            currentFocusableIndex++
+            if (currentFocusableIndex === focusedIndex) {
+              const filePathWithLine = `${line.file}:${line.line}`
+              const { Clipboard } = await import(
+                'termcast/src/apis/clipboard'
+              )
+              await Clipboard.copy(filePathWithLine)
+              logger.log(`📋 Copied to clipboard: ${filePathWithLine}`)
+              break
+            }
+          }
+        }
+      }
+    }
+  })
+
+  return (
+    <box padding={2} flexDirection='column' gap={1}>
+      <text fg={Theme.error} attributes={TextAttributes.BOLD}>
+        ⚠️ An error occurred
+      </text>
+
+      <text fg={Theme.error}>
+        {error?.message || 'An unexpected error occurred'}
+      </text>
+
+      <box
+        paddingLeft={1}
+        paddingRight={1}
+        borderStyle='rounded'
+        border={true}
+        borderColor={
+          focusedIndex === 0
+            ? Theme.highlight
+            : isHovered
+              ? Theme.highlight
+              : Theme.border
+        }
+        backgroundColor={
+          focusedIndex === 0
+            ? Theme.backgroundPanel
+            : isHovered
+              ? Theme.backgroundPanel
+              : undefined
+        }
+        onMouseMove={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+        onMouseDown={onOpenIssue}
+        marginTop={1}
+      >
+        <text>
+          {focusedIndex === 0 ? '▶ ' : '  '}📝 Press Enter or click to report
+          on GitHub
+        </text>
+      </box>
+
+      <box flexDirection='column' marginTop={1}>
+        <text fg={Theme.textMuted} attributes={TextAttributes.BOLD}>
+          Stack Trace:
+        </text>
+        {stackLines.map((line, index) => {
+          let currentFocusableIndex = 0
+          let isFocused = false
+
+          // Determine if this line is focused
+          if (line.file) {
+            currentFocusableIndex = stackLines
+              .slice(0, index + 1)
+              .filter((l) => l.file).length
+            isFocused = focusedIndex === currentFocusableIndex
+          }
+
+          return (
+            <box
+              key={index}
+              backgroundColor={isFocused ? Theme.backgroundPanel : undefined}
+            >
+              <text fg={isFocused ? Theme.highlight : Theme.error}>
+                {isFocused ? '▶ ' : '  '}
+                {line.text}
+              </text>
+            </box>
+          )
+        })}
+      </box>
+
+      <box marginTop={1} onMouseDown={() => setShowLogs(!showLogs)}>
+        <text fg={Theme.textMuted} attributes={TextAttributes.UNDERLINE}>
+          {showLogs ? '▼' : '▶'} Toggle logs (last 200 lines)
+        </text>
+      </box>
+
+      {showLogs && (
+        <box flexDirection='column' marginTop={1}>
+          <text fg={Theme.textMuted} attributes={TextAttributes.BOLD}>
+            Recent Logs:
+          </text>
+          <box
+            padding={1}
+            borderStyle='single'
+            border={true}
+            borderColor={Theme.border}
+            maxHeight={20}
+          >
+            <text fg={Theme.textMuted}>{getRecentLogs()}</text>
+          </box>
+        </box>
+      )}
+    </box>
+  )
+}
+
+const ErrorBoundary = ErrorBoundaryClass as any
+
+export function Providers(props: ProvidersProps): any {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<LoadingFallback />}>
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{
+            persister,
+            maxAge: 1000 * 60 * 60 * 24, // 24 hours
+          }}
+        >
+          <DialogProvider>
+            <box padding={2}>
+              {/* NavigationProvider must be last to ensure parent providers remain in the tree when navigation changes */}
+              <NavigationProvider>{props.children}</NavigationProvider>
+            </box>
+          </DialogProvider>
+        </PersistQueryClientProvider>
+      </Suspense>
+    </ErrorBoundary>
+  )
+}