termcast 1.3.32 → 1.3.34

package/src/index.tsx

@@ -97,11 +97,13 @@ export type {
 // Icons and Images
 export { Icon, getIconEmoji, getIconShape, IconComponent } from 'termcast/src/components/icon'
 export { Image, ImageMask } from 'termcast/src/components/image'
+export type { ImageType } from 'termcast/src/components/image'
 export type {
   ImageProps,
   ImageSource,
   FileIcon,
   ImageLike,
+  ImageFallback,
 } from 'termcast/src/components/image'
 
 // Alerts
@@ -208,7 +210,7 @@ export type { PreferenceValues } from 'termcast/src/apis/preferences'
 export type { CommonProps } from 'termcast/src/utils'
 
 // Theme
-export { Theme } from 'termcast/src/theme'
+export { useTheme } from 'termcast/src/theme'
 
 // Logger
 export { logger } from 'termcast/src/logger'

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

@@ -1,6 +1,6 @@
 import { useKeyboard } from '@opentui/react'
 import { useMemo, useState, useRef } from 'react'
-import Theme from '../theme'
+import { useTheme } from '../theme'
 
 // ----- Helpers -----
 type Focus = 'year' | 'month' | 'grid'
@@ -76,6 +76,7 @@ export function DatePickerWidget({
   onFirstRowUpKey?: () => void
   onLastRowDownKey?: () => void
 }) {
+  const Theme = useTheme()
   const today = useMemo(() => new Date(), [])
   const [focus, setFocus] = useState<Focus>('grid') // can be "year" | "month" | "grid"
   const [selected, setSelected] = useState<Date>(initialValue || new Date()) // focused day

package/src/internal/dialog.tsx

@@ -1,6 +1,6 @@
 import { useKeyboard } from '@opentui/react'
-import React, { type ReactNode, useRef, useContext } from 'react'
-import { Theme } from 'termcast/src/theme'
+import React, { type ReactNode, useRef, useContext, useCallback } from 'react'
+import { useTheme } from 'termcast/src/theme'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { CommonProps } from 'termcast/src/utils'
 import { useStore, type DialogPosition } from 'termcast/src/state'
@@ -20,6 +20,7 @@ export function Dialog({
   position = 'center',
   onClickOutside,
 }: DialogProps): any {
+  const theme = useTheme()
   const inFocus = useIsInFocus()
   const clickedInsideDialog = useRef(false)
 
@@ -69,7 +70,7 @@ export function Dialog({
       alignItems={positionStyles.alignItems}
       justifyContent={positionStyles.justifyContent}
       padding={positionStyles.padding}
-      // backgroundColor={Theme.background}
+      // backgroundColor={theme.background}
       onMouseDown={handleBackdropClick}
     >
       <box
@@ -77,8 +78,8 @@ export function Dialog({
         borderStyle='rounded'
         width={76}
         maxWidth='95%'
-        backgroundColor={Theme.backgroundPanel}
-        borderColor={Theme.accent}
+        backgroundColor={theme.backgroundPanel}
+        borderColor={theme.accent}
         paddingTop={1}
         onMouseDown={handleDialogClick}
       >
@@ -94,13 +95,34 @@ interface DialogProviderProps {
 
 export function DialogProvider(props: DialogProviderProps): any {
   const dialogStack = useStore((state) => state.dialogStack)
+  const showActionsDialog = useStore((state) => state.showActionsDialog)
   const inFocus = useIsInFocus()
 
   useKeyboard((evt) => {
     if (!inFocus) return
     if (evt.name === 'escape') {
       const state = useStore.getState()
+      
+      // Handle actions dialog first
+      if (state.showActionsDialog) {
+        // Check if there's a search input with text that should be cleared first
+        const activeSearchInputRef = state.activeSearchInputRef
+        if (activeSearchInputRef && activeSearchInputRef.plainText) {
+          activeSearchInputRef.setText('')
+          return
+        }
+        useStore.setState({ showActionsDialog: false })
+        return
+      }
+      
       if (state.dialogStack.length > 0) {
+        // Check if there's a search input with text that should be cleared first
+        const activeSearchInputRef = state.activeSearchInputRef
+        if (activeSearchInputRef && activeSearchInputRef.plainText) {
+          // Clear the search text instead of closing dialog
+          activeSearchInputRef.setText('')
+          return
+        }
         useStore.setState({
           dialogStack: state.dialogStack.slice(0, -1),
         })
@@ -108,8 +130,8 @@ 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
+  // Children lose focus only when there's a dialog or actions dialog
+  const childrenInFocus = !dialogStack?.length && !showActionsDialog
 
   return (
     <>
@@ -119,38 +141,88 @@ export function DialogProvider(props: DialogProviderProps): any {
   )
 }
 
+/**
+ * DialogOverlay renders dialog stack items and provides a portal target for
+ * ActionPanel. The portal target is always mounted so ActionPanel can use
+ * createPortal to render its Dropdown here while keeping its React context
+ * (FormSubmitContext, NavigationContext, etc.) from the original tree.
+ */
 export function DialogOverlay(): any {
   const dialogStack = useStore((state) => state.dialogStack)
+  const showActionsDialog = useStore((state) => state.showActionsDialog)
   const navContext = useContext(NavigationContext)
+  const theme = useTheme()
+
+  const setActionsPortalTargetRef = useCallback((node: any) => {
+    if (!node) {
+      useStore.setState({ actionsPortalTarget: null })
+      return
+    }
+
+    useStore.setState({ actionsPortalTarget: node })
 
-  if (dialogStack.length === 0) {
+    return () => {
+      if (useStore.getState().actionsPortalTarget === node) {
+        useStore.setState({ actionsPortalTarget: null })
+      }
+    }
+  }, [])
+
+  if (dialogStack.length === 0 && !showActionsDialog) {
     return null
   }
 
-  // Only render the topmost dialog
   const topIndex = dialogStack.length - 1
-  const item = dialogStack[topIndex]
+  const item = topIndex >= 0 ? dialogStack[topIndex] : undefined
 
   return (
-    <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),
-              })
-            }
-          }}
+    <>
+      {showActionsDialog && (
+        <box
+          position='absolute'
+          width='100%'
+          height='100%'
+          flexDirection='column'
+          backgroundColor={theme.background}
         >
-          <NavigationContext.Provider value={navContext}>
-            {item.element}
-          </NavigationContext.Provider>
-        </Dialog>
-      </InFocus>
-    </box>
+          <InFocus inFocus={true}>
+            <Dialog
+              position='center'
+              onClickOutside={() => {
+                useStore.setState({ showActionsDialog: false })
+              }}
+            >
+              <box
+                ref={setActionsPortalTargetRef}
+                flexDirection='column'
+                flexGrow={1}
+              />
+            </Dialog>
+          </InFocus>
+        </box>
+      )}
+      {item && (
+        <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>
+      )}
+    </>
   )
 }
 

package/src/internal/navigation.tsx

@@ -165,7 +165,14 @@ export function NavigationProvider(props: NavigationProviderProps): any {
         )
         pop()
       } else {
-        // At root with no dialogs - exit the CLI
+        // At root - check if there's a search input with text that should be cleared first
+        const activeSearchInputRef = useStore.getState().activeSearchInputRef
+        if (activeSearchInputRef && activeSearchInputRef.plainText) {
+          // Clear the search text instead of exiting
+          activeSearchInputRef.setText('')
+          return
+        }
+        // At root with no dialogs and no search text - exit the CLI
         renderer.destroy()
       }
     }

package/src/internal/offscreen.tsx

@@ -13,3 +13,13 @@ export function Offscreen({ children }: { children: ReactNode }): any {
     </OffscreenContext.Provider>
   )
 }
+
+// Resets the offscreen context to false. Used by portals that render content
+// from an offscreen tree into a visible overlay area.
+export function Onscreen({ children }: { children: ReactNode }): any {
+  return (
+    <OffscreenContext.Provider value={false}>
+      {children}
+    </OffscreenContext.Provider>
+  )
+}

package/src/internal/providers.tsx

@@ -8,15 +8,16 @@ import { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { DialogProvider, DialogOverlay } from 'termcast/src/internal/dialog'
 import { NavigationProvider } from 'termcast/src/internal/navigation'
-import { CommonProps } from 'termcast/src/utils'
+import { CommonProps, termcastMaxContentWidth } from 'termcast/src/utils'
 import { Cache } from 'termcast/src/apis/cache'
 import { logger } from 'termcast/src/logger'
-import { Theme, initializeTheme } from 'termcast/src/theme'
+import { useTheme, initializeTheme } from 'termcast/src/theme'
 import { useStore } from 'termcast/src/state'
-import { useTerminalDimensions } from '@opentui/react'
+import { useKeyboard, useRenderer } from '@opentui/react'
 import { initializeErrorHandlers } from 'termcast/src/internal/error-handler'
 
 import { InFocus } from './focus-context'
+import { Clipboard } from '../apis/clipboard'
 
 // Initialize error handlers at module load time
 initializeErrorHandlers()
@@ -99,9 +100,12 @@ class ErrorBoundaryClass extends Component<
 }
 
 function ErrorDisplay({ error }: { error: Error | null }): any {
+  const theme = useTheme()
   return (
     <box padding={2}>
-      <text fg={Theme.error} wrapMode='none'>{error?.stack}</text>
+      <text fg={theme.error} wrapMode='none'>
+        {error?.stack}
+      </text>
     </box>
   )
 }
@@ -109,7 +113,18 @@ function ErrorDisplay({ error }: { error: Error | null }): any {
 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') {
+      renderer.console.onCopySelection = (text: any) => {
+        Clipboard.copy(text)
+      }
+      renderer?.toggleDebugOverlay()
+      renderer?.console.toggle()
+    }
+  })
 
   return (
     <ErrorBoundary>
@@ -124,15 +139,26 @@ export function TermcastProvider(props: ProvidersProps): any {
           <box
             minHeight={'100%'}
             justifyContent='flex-start'
-            backgroundColor={Theme.background}
+            backgroundColor={theme.background}
+            width='100%'
+            flexGrow={1}
+            alignItems='center'
             // borderColor={Theme.border}
             // fg={Theme.text}
           >
-            <box padding={2}>
+            <box
+              padding={2}
+              width='100%'
+              maxWidth={termcastMaxContentWidth}
+              // flexShrink={1}
+              // flexGrow={1}
+            >
               <DialogProvider>
                 {/* NavigationProvider must be last to ensure parent providers remain in the tree when navigation changes */}
                 <NavigationProvider overlay={<DialogOverlay />}>
-                  <box>{props.children}</box>
+                  <box width='100%' flexGrow={1} flexShrink={1}>
+                    {props.children}
+                  </box>
                 </NavigationProvider>
               </DialogProvider>
             </box>

package/src/internal/scrollbox.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Theme from '../theme'
+import { useTheme } from '../theme'
 import { MacOSScrollAccel } from '@opentui/core'
 import { ScrollBoxProps } from '@opentui/react'
 
@@ -13,6 +13,8 @@ export function ScrollBox({
   ref,
   ...props
 }: ScrollBoxProps): any {
+  const theme = useTheme()
+
   return (
     <scrollbox
       ref={ref}
@@ -41,7 +43,7 @@ export function ScrollBox({
           // visible: true,
           // showArrows: true,
           trackOptions: {
-            foregroundColor: Theme.textMuted,
+            foregroundColor: theme.textMuted,
 
             // backgroundColor: '#414868',
           },

package/src/logger.tsx

@@ -25,18 +25,21 @@ export const logger = {
     const formattedMessages = messages.map(serialize).join(' ')
     const logEntry = `[${timestamp}] ${formattedMessages}\n`
     fs.appendFileSync(LOG_FILE, logEntry)
+    console.log(...messages)
   },
   error: (...messages: any[]) => {
     const timestamp = new Date().toISOString()
     const formattedMessages = messages.map(serialize).join(' ')
     const logEntry = `[${timestamp}] ERROR: ${formattedMessages}\n`
     fs.appendFileSync(LOG_FILE, logEntry)
+    console.error(...messages)
   },
   warn: (...messages: any[]) => {
     const timestamp = new Date().toISOString()
     const formattedMessages = messages.map(serialize).join(' ')
     const logEntry = `[${timestamp}] WARN: ${formattedMessages}\n`
     fs.appendFileSync(LOG_FILE, logEntry)
+    console.warn(...messages)
   },
   trace: (...messages: any[]) => {
     const timestamp = new Date().toISOString()
@@ -51,6 +54,7 @@ export const logger = {
     const formattedMessages = messages.map(serialize).join(' ')
     const logEntry = `[${timestamp}] TRACE: ${formattedMessages}\n${stack}\n`
     fs.appendFileSync(LOG_FILE, logEntry)
+    console.trace(...messages)
   },
 }
 

package/src/preload.tsx

@@ -2,31 +2,19 @@ import { plugin } from 'bun'
 import path from 'node:path'
 import { logger } from './logger'
 
+// Path to our forked raycast-utils with termcast OAuth proxy URLs
+const RAYCAST_UTILS_PATH = path.resolve(__dirname, '../../raycast-utils/src/index.ts')
+
 plugin({
   name: 'alias-raycast-to-termcast',
   setup(build) {
-    build.onResolve({ filter: /@raycast\/api/ }, () => {
+    // Redirect @raycast/api to termcast
+    build.onResolve({ filter: /^@raycast\/api$/ }, () => {
       return {
         path: require.resolve('termcast'),
       }
     })
-    // build.onResolve({ filter: /@raycast\/utils/ }, (args) => {
-    //     return {
-    //         path: require.resolve('@raycast/utils', {
-    //             paths: [args.importer],
-    //         }),
 
-    //     }
-    // })
-    // build.onLoad({ filter: /@raycast\/utils/ }, (args) => {
-    //     const filePath = require
-    //         .resolve(args.path.replace('file:', ''))
-    //         .replace('file:', '')
-    //     return {
-    //         contents: require('fs').readFileSync(filePath, 'utf8'),
 
-    //         loader: 'js',
-    //     }
-    // })
   },
 })

package/src/state.tsx

@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import { type ReactNode } from 'react'
+import type { TextareaRenderable } from '@opentui/core'
 import type { RaycastPackageJson } from './package-json'
 
 // Toast action keyboard shortcuts (ctrl+t for primary, ctrl+g for secondary)
@@ -62,8 +63,15 @@ interface AppState {
   shouldAutoExecuteFirstAction: boolean
   // First action title for footer display (set by offscreen ActionPanel)
   firstActionTitle: string
+  // Flag to show actions dialog via portal
+  showActionsDialog: boolean
+  // Portal target node for rendering ActionPanel dialog in the overlay area.
+  // Set by DialogOverlay, consumed by ActionPanel via createPortal.
+  actionsPortalTarget: any
   // Theme state
   currentThemeName: string
+  // Active search input ref - used to clear search before exiting on ESC
+  activeSearchInputRef: TextareaRenderable | null
 }
 
 export const useStore = create<AppState>(() => ({
@@ -86,6 +94,10 @@ export const useStore = create<AppState>(() => ({
   // Actions state
   shouldAutoExecuteFirstAction: false,
   firstActionTitle: '',
+  showActionsDialog: false,
+  actionsPortalTarget: null,
   // Theme state
   currentThemeName: 'termcast',
+  // Active search input ref
+  activeSearchInputRef: null,
 }))

package/src/theme.tsx

@@ -41,14 +41,11 @@ export function initializeTheme(): void {
   useStore.setState({ currentThemeName: themeName })
 }
 
-// Proxy-based Theme object that reads from zustand state
-export const Theme: ResolvedTheme = new Proxy({} as ResolvedTheme, {
-  get(_, prop: string) {
-    const themeName = useStore.getState().currentThemeName
-    const resolved = getResolvedTheme(themeName)
-    return resolved[prop as keyof ResolvedTheme]
-  },
-})
+// Reactive hook for theme - use this in React components
+export function useTheme(): ResolvedTheme {
+  const themeName = useStore((state) => state.currentThemeName)
+  return getResolvedTheme(themeName)
+}
 
 export function getMarkdownSyntaxStyle(): SyntaxStyle {
   const themeName = useStore.getState().currentThemeName
@@ -84,4 +81,4 @@ export const markdownSyntaxStyle = new Proxy({} as SyntaxStyle, {
   },
 })
 
-export default Theme
+

package/src/utils/run-command.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
-import { cac } from 'cac'
+import { goke } from 'goke'
 import { useStore } from 'termcast/src/state'
 import { showToast, Toast } from 'termcast/src/apis/toast'
 import { LocalStorage } from 'termcast/src/apis/localstorage'
 import { CommandArguments } from 'termcast/src/components/command-arguments'
 import { ExtensionPreferences } from 'termcast/src/components/extension-preferences'
-import type { RaycastArgument, RaycastPackageJson } from 'termcast/src/package-json'
+import type {
+  RaycastArgument,
+  RaycastPackageJson,
+} from 'termcast/src/package-json'
 import type { LaunchProps } from 'termcast/src/apis/environment'
 import { logger } from '../logger'
 
@@ -25,14 +28,16 @@ export interface ParsedExtensionArgs {
  * Parse CLI args to extract command name and help flag.
  * @param skipArgv - Number of subcommand args to skip (e.g. 1 for "dev" in "termcast dev")
  */
-export function parseExtensionArgs({ skipArgv = 0 }: { skipArgv?: number } = {}): ParsedExtensionArgs {
-  // Build argv for cac: keep first 2 (binary + script), skip subcommand args, keep the rest
+export function parseExtensionArgs({
+  skipArgv = 0,
+}: { skipArgv?: number } = {}): ParsedExtensionArgs {
+  // Build argv for goke: keep first 2 (binary + script), skip subcommand args, keep the rest
   const argv = [
     process.argv[0],
     process.argv[1],
     ...process.argv.slice(2 + skipArgv),
   ]
-  const parsed = cac().parse(argv, { run: false })
+  const parsed = goke().parse(argv, { run: false })
   return {
     commandName: parsed.args[0] as string | undefined,
     showHelp: Boolean(parsed.options.help || parsed.options.h),
@@ -183,9 +188,26 @@ export async function runCommand(options: RunCommandOptions): Promise<void> {
     const devRebuildCount = state.devRebuildCount + 1
     useStore.setState({ devRebuildCount })
     const importPath = `${bundledPath}?rebuild=${devRebuildCount}`
-    // logger.log(`importing ${importPath}`)
-    const module = await import(importPath)
-    CommandComponent = module.default
+    logger.log(`importing ${importPath}`)
+    try {
+      const module = await import(importPath)
+      CommandComponent = module.default
+    } catch (error) {
+      logger.error('Failed to import command module:', {
+        importPath,
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      })
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to load command',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Unknown error ' + String(error).slice(0, 300),
+      })
+      return
+    }
 
     if (!CommandComponent) {
       await showToast({
@@ -230,7 +252,9 @@ export async function runCommand(options: RunCommandOptions): Promise<void> {
   }
 
   // For view commands, push the component
+  logger.log('pushing WrappedComponent')
   push(<CommandComponent {...launchProps} />)
+  logger.log('pushed WrappedComponent')
 }
 
 async function checkRequiredPreferences({

package/src/utils.tsx

@@ -19,9 +19,12 @@ export async function renderWithProviders(element: ReactNode): Promise<void> {
       process.exit(0)
     },
   })
+
   createRoot(renderer).render(<TermcastProvider>{element}</TermcastProvider>)
 }
 
+export const termcastMaxContentWidth = 140
+
 export type CommonProps = {
   key?: any
 }
@@ -41,29 +44,61 @@ export function sleep(ms: number): Promise<void> {
 }
 
 export async function getApplications(path?: PathLike): Promise<Application[]> {
-  // TODO: Implement system call to get applications
-  // For now, return common applications
-  const apps: Application[] = [
-    {
-      name: 'Finder',
-      localizedName: 'Finder',
-      path: '/System/Library/CoreServices/Finder.app',
-      bundleId: 'com.apple.finder',
-    },
-    {
-      name: 'Terminal',
-      localizedName: 'Terminal',
-      path: '/System/Applications/Utilities/Terminal.app',
-      bundleId: 'com.apple.Terminal',
-    },
-    {
-      name: 'Visual Studio Code',
-      localizedName: 'Visual Studio Code',
-      path: '/Applications/Visual Studio Code.app',
-      bundleId: 'com.microsoft.VSCode',
-    },
-  ]
-  return Promise.resolve(apps)
+  if (process.platform !== 'darwin') {
+    // Windows/Linux: return empty for now
+    return []
+  }
+
+  const { execSync } = await import('node:child_process')
+  const plist = await import('simple-plist')
+
+  const apps: Application[] = []
+
+  try {
+    // Use mdfind (Spotlight) to find all .app bundles
+    // This is much faster than scanning directories manually
+    const appPaths = execSync(
+      'mdfind "kMDItemContentType == \'com.apple.application-bundle\'" 2>/dev/null || find /Applications /System/Applications -name "*.app" -maxdepth 3 2>/dev/null',
+      { encoding: 'utf-8', maxBuffer: 50 * 1024 * 1024 },
+    )
+      .trim()
+      .split('\n')
+      .filter((p) => p && p.endsWith('.app'))
+
+    for (const appPath of appPaths) {
+      try {
+        const infoPlistPath = `${appPath}/Contents/Info.plist`
+
+        if (!fs.existsSync(infoPlistPath)) {
+          continue
+        }
+
+        const plistData = plist.default.readFileSync(infoPlistPath) as Record<
+          string,
+          unknown
+        >
+        const bundleId = plistData.CFBundleIdentifier as string | undefined
+        const name = (plistData.CFBundleName ||
+          plistData.CFBundleDisplayName ||
+          appPath.split('/').pop()?.replace('.app', '')) as string
+        const localizedName = (plistData.CFBundleDisplayName || name) as string
+
+        apps.push({
+          name,
+          localizedName,
+          path: appPath,
+          bundleId,
+        })
+      } catch {
+        // Skip apps with unreadable plist files
+        continue
+      }
+    }
+  } catch (error) {
+    logger.error('Failed to get applications:', error)
+  }
+
+  return apps
 }
 
 export async function getDefaultApplication(