termcast 1.3.30 → 1.3.32

package/src/internal/dialog.tsx

@@ -1,30 +1,11 @@
-import { useKeyboard, useTerminalDimensions } from '@opentui/react'
+import { useKeyboard } from '@opentui/react'
 import React, { type ReactNode, useRef, useContext } from 'react'
 import { Theme } from 'termcast/src/theme'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { CommonProps } from 'termcast/src/utils'
-import {
-  useStore,
-  type DialogPosition,
-  type DialogStackItem,
-} from 'termcast/src/state'
-import { logger } from '../logger'
-import { ToastOverlay } from 'termcast/src/apis/toast'
-import { NavigationContext } from 'termcast/src/internal/navigation'
+import { useStore, type DialogPosition } from 'termcast/src/state'
 
-const Border = {
-  topLeft: '┏',
-  topRight: '┓',
-  bottomLeft: '',
-  bottomRight: '',
-  horizontal: '━',
-  vertical: '┃',
-  topT: '+',
-  bottomT: '+',
-  leftT: '+',
-  rightT: '+',
-  cross: '+',
-}
+import { NavigationContext } from 'termcast/src/internal/navigation'
 
 export type { DialogPosition } from 'termcast/src/state'
 
@@ -39,7 +20,6 @@ export function Dialog({
   position = 'center',
   onClickOutside,
 }: DialogProps): any {
-  const dimensions = useTerminalDimensions()
   const inFocus = useIsInFocus()
   const clickedInsideDialog = useRef(false)
 
@@ -61,30 +41,20 @@ export function Dialog({
         return {
           alignItems: 'flex-end' as const,
           justifyContent: 'flex-start' as const,
-          paddingTop: 2,
-          paddingRight: 2,
-          paddingBottom: undefined,
-          paddingLeft: undefined,
+          padding: 2,
         }
       case 'bottom-right':
-      // TODO show in center for now. easier to read
-      // return {
-      //   alignItems: 'flex-end' as const,
-      //   justifyContent: 'flex-end' as const,
-      //   paddingTop: undefined,
-      //   paddingBottom: 2,
-      //   paddingRight: 2,
-      //   paddingLeft: undefined
-      // }
+        return {
+          alignItems: 'flex-end' as const,
+          justifyContent: 'flex-end' as const,
+          padding: 2,
+        }
       case 'center':
       default:
         return {
           alignItems: 'center' as const,
-          justifyContent: 'flex-start' as const,
-          paddingTop: Math.floor(dimensions.height / 4),
-          paddingBottom: undefined,
-          paddingLeft: undefined,
-          paddingRight: undefined,
+          justifyContent: 'center' as const,
+          padding: 0,
         }
     }
   }
@@ -94,26 +64,21 @@ export function Dialog({
   return (
     <box
       border={false}
-      width={dimensions.width}
-      height={dimensions.height}
+      flexGrow={1}
+      left={-2}
       alignItems={positionStyles.alignItems}
       justifyContent={positionStyles.justifyContent}
-      position='absolute'
-      paddingTop={positionStyles.paddingTop}
-      paddingBottom={positionStyles.paddingBottom}
-      paddingLeft={positionStyles.paddingLeft}
-      paddingRight={positionStyles.paddingRight}
-      left={0}
-      top={0}
+      padding={positionStyles.padding}
+      // backgroundColor={Theme.background}
       onMouseDown={handleBackdropClick}
     >
       <box
         border
-        customBorderChars={Border}
+        borderStyle='rounded'
         width={76}
-        maxWidth={dimensions.width - 2}
+        maxWidth='95%'
         backgroundColor={Theme.backgroundPanel}
-        borderColor={Theme.border}
+        borderColor={Theme.accent}
         paddingTop={1}
         onMouseDown={handleDialogClick}
       >
@@ -143,12 +108,13 @@ export function DialogProvider(props: DialogProviderProps): any {
     }
   })
 
+  // Children lose focus only when there's a dialog (toast uses unique shortcuts so no focus stealing needed)
+  const childrenInFocus = !dialogStack?.length
+
   return (
     <>
-      <InFocus inFocus={!dialogStack?.length}>{props.children}</InFocus>
-      <InFocus inFocus={false}>
-        <ToastOverlay />
-      </InFocus>
+      <InFocus inFocus={childrenInFocus}>{props.children}</InFocus>
+
     </>
   )
 }
@@ -161,31 +127,29 @@ export function DialogOverlay(): any {
     return null
   }
 
+  // Only render the topmost dialog
+  const topIndex = dialogStack.length - 1
+  const item = dialogStack[topIndex]
+
   return (
-    <box position='absolute'>
-      {dialogStack.map((item, index) => {
-        const isLastItem = index === dialogStack.length - 1
-        return (
-          <InFocus key={'dialog' + String(index)} inFocus={isLastItem}>
-            <Dialog
-              position={item.position}
-              onClickOutside={() => {
-                if (!isLastItem) return
-                const state = useStore.getState()
-                if (state.dialogStack.length > 0) {
-                  useStore.setState({
-                    dialogStack: state.dialogStack.slice(0, -1),
-                  })
-                }
-              }}
-            >
-              <NavigationContext.Provider value={navContext}>
-                {item.element}
-              </NavigationContext.Provider>
-            </Dialog>
-          </InFocus>
-        )
-      })}
+    <box position='absolute' width='100%' height='100%' flexDirection='column'>
+      <InFocus inFocus={true}>
+        <Dialog
+          position={item.position}
+          onClickOutside={() => {
+            const state = useStore.getState()
+            if (state.dialogStack.length > 0) {
+              useStore.setState({
+                dialogStack: state.dialogStack.slice(0, -1),
+              })
+            }
+          }}
+        >
+          <NavigationContext.Provider value={navContext}>
+            {item.element}
+          </NavigationContext.Provider>
+        </Dialog>
+      </InFocus>
     </box>
   )
 }
@@ -193,13 +157,24 @@ export function DialogOverlay(): any {
 export function useDialog() {
   const dialogStack = useStore((state) => state.dialogStack)
 
-  const pushDialog = (element: ReactNode, position?: DialogPosition) => {
+  const pushDialog = (args: {
+    element: ReactNode
+    position?: DialogPosition
+    type?: 'actions'
+  }) => {
     const state = useStore.getState()
     useStore.setState({
-      dialogStack: [...state.dialogStack, { element, position }],
+      dialogStack: [
+        ...state.dialogStack,
+        { element: args.element, position: args.position, type: args.type },
+      ],
     })
   }
 
+  const pushActions = (element: ReactNode, position: DialogPosition='center') => {
+    pushDialog({ element, position, type: 'actions' })
+  }
+
   const clearDialogs = () => {
     useStore.setState({ dialogStack: [] })
   }
@@ -210,6 +185,7 @@ export function useDialog() {
 
   return {
     push: pushDialog,
+    pushActions,
     clear: clearDialogs,
     replace: replaceDialog,
     stack: dialogStack,

package/src/internal/navigation.tsx

@@ -16,6 +16,7 @@ import { logger } from '../logger'
 
 interface Navigation {
   push: (element: ReactNode, onPop?: () => void) => void
+  replace: (element: ReactNode, onPop?: () => void) => void
   pop: () => void
   popToRoot: () => void
 }
@@ -26,9 +27,9 @@ interface NavigationContextType {
   isPending: boolean
 }
 
-export const NavigationContext = createContext<NavigationContextType | undefined>(
-  undefined,
-)
+export const NavigationContext = createContext<
+  NavigationContextType | undefined
+>(undefined)
 
 interface NavigationProviderProps extends CommonProps {
   children: ReactNode
@@ -63,6 +64,34 @@ export function NavigationProvider(props: NavigationProviderProps): any {
       useStore.setState({
         navigationStack: [...currentStack, { element, onPop }],
         dialogStack: [],
+        toast: null,
+        toastWithPrimaryAction: false,
+      })
+    })
+  }, [])
+
+  const replace = useCallback((element: any, onPop?: () => void) => {
+    if (!element) {
+      throw new Error(`cannot replace with falsy value ${element}`)
+    }
+
+    logger.log(
+      'replacing',
+      (element as any)?.type?.name || (element as any)?.type,
+    )
+
+    const currentStack = useStore.getState().navigationStack
+    const newStack =
+      currentStack.length > 0
+        ? [...currentStack.slice(0, -1), { element, onPop }]
+        : [{ element, onPop }]
+
+    startNavigationTransition(() => {
+      useStore.setState({
+        navigationStack: newStack,
+        dialogStack: [],
+        toast: null,
+        toastWithPrimaryAction: false,
       })
     })
   }, [])
@@ -101,10 +130,11 @@ export function NavigationProvider(props: NavigationProviderProps): any {
   const navigation = React.useMemo(
     () => ({
       push,
+      replace,
       pop,
       popToRoot,
     }),
-    [push, pop, popToRoot],
+    [push, replace, pop, popToRoot],
   )
 
   const value = React.useMemo(
@@ -123,6 +153,9 @@ export function NavigationProvider(props: NavigationProviderProps): any {
   useKeyboard((evt) => {
     if (!inFocus) return
     if (evt.name === 'escape') {
+      // If there's a toast visible, let toast handle escape first
+      if (useStore.getState().toast) return
+
       if (stack.length > 1) {
         logger.log(
           'popping navigation',

package/src/internal/providers.tsx

@@ -11,19 +11,19 @@ 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 { Theme, initializeTheme } from 'termcast/src/theme'
 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 { useTerminalDimensions } from '@opentui/react'
 import { initializeErrorHandlers } from 'termcast/src/internal/error-handler'
 
+import { InFocus } from './focus-context'
+
 // Initialize error handlers at module load time
 initializeErrorHandlers()
 
+// Initialize theme from persisted storage
+initializeTheme()
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -75,9 +75,6 @@ class ErrorBoundaryClass extends Component<
   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> {
@@ -92,314 +89,19 @@ class ErrorBoundaryClass extends Component<
     })
   }
 
-  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 <ErrorDisplay error={this.state.error} />
     }
 
     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
-            }
-          }
-        }
-      }
-    }
-  })
-
+function ErrorDisplay({ error }: { error: Error | null }): any {
   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 padding={2}>
+      <text fg={Theme.error} wrapMode='none'>{error?.stack}</text>
     </box>
   )
 }
@@ -407,6 +109,8 @@ function ErrorDisplay({
 const ErrorBoundary = ErrorBoundaryClass as any
 
 export function TermcastProvider(props: ProvidersProps): any {
+
+
   return (
     <ErrorBoundary>
       <Suspense fallback={<LoadingFallback />}>
@@ -417,14 +121,22 @@ export function TermcastProvider(props: ProvidersProps): any {
             maxAge: 1000 * 60 * 60 * 24, // 24 hours
           }}
         >
-          <DialogProvider>
+          <box
+            minHeight={'100%'}
+            justifyContent='flex-start'
+            backgroundColor={Theme.background}
+            // borderColor={Theme.border}
+            // fg={Theme.text}
+          >
             <box padding={2}>
-              {/* NavigationProvider must be last to ensure parent providers remain in the tree when navigation changes */}
-              <NavigationProvider overlay={<DialogOverlay />}>
-                {props.children}
-              </NavigationProvider>
+              <DialogProvider>
+                {/* NavigationProvider must be last to ensure parent providers remain in the tree when navigation changes */}
+                <NavigationProvider overlay={<DialogOverlay />}>
+                  <box>{props.children}</box>
+                </NavigationProvider>
+              </DialogProvider>
             </box>
-          </DialogProvider>
+          </box>
         </PersistQueryClientProvider>
       </Suspense>
     </ErrorBoundary>

package/src/internal/scrollbox.tsx

@@ -34,6 +34,7 @@ export function ScrollBox({
         },
         contentOptions: {
           flexShrink: 0,
+          minHeight: 0, // let the scrollbox shrink with content
           ...(style?.contentOptions || {}),
         },
         scrollbarOptions: {