termcast 1.3.30 → 1.3.32

package/src/extensions/dev.tsx

@@ -1,5 +1,10 @@
+// CRITICAL: Import react-refresh-init FIRST before @opentui/react!
+// This ensures the devtools hook exists and can intercept injectIntoDevTools calls
+import { RefreshRuntime, hasRefreshCapability, getRendererInternals } from './react-refresh-init'
+
 import fs from 'node:fs'
 import path from 'node:path'
+import os from 'node:os'
 import React from 'react'
 import { createRoot } from '@opentui/react'
 import { createCliRenderer } from '@opentui/core'
@@ -9,6 +14,8 @@ import { useNavigation } from 'termcast/src/internal/navigation'
 import { TermcastProvider } from 'termcast/src/internal/providers'
 import { showToast, Toast } from 'termcast/src/apis/toast'
 import { Icon } from 'termcast'
+import { Theme } from 'termcast/src/theme'
+import { logger } from '../logger'
 import { getCommandsWithFiles, CommandWithFile, RaycastPackageJson } from '../package-json'
 import { buildExtensionCommands } from '../build'
 import {
@@ -18,9 +25,17 @@ import {
   handleHelpFlag,
 } from '../utils/run-command'
 
+function CommandLoadError({ error }: { error: Error }): any {
+  return (
+    <box padding={2}>
+      <text fg={Theme.error} wrapMode='none'>{error.stack}</text>
+    </box>
+  )
+}
+
 interface BundledCommand extends CommandWithFile {
   bundledPath: string
-  Component?: (props: any) => any
+  loadComponent?: () => Promise<(props: any) => any>
 }
 
 function ExtensionCommandsList({
@@ -32,19 +47,17 @@ function ExtensionCommandsList({
   commands: BundledCommand[]
   skipArgv?: number
 }): any {
-  const { push } = useNavigation()
+  const { push, replace } = useNavigation()
+  const [loadError, setLoadError] = React.useState<Error | null>(null)
 
   const visibleCommands = commands.filter((cmd) => cmd.mode !== 'menu-bar')
+  const isSingleCommand = visibleCommands.length === 1
 
-  const handleCommandSelect = async (command: BundledCommand) => {
+  const handleCommandSelect = async (command: BundledCommand, useReplace = false) => {
     clearCommandArguments()
 
-    if (!command.bundledPath && !command.Component) {
-      await showToast({
-        style: Toast.Style.Failure,
-        title: 'Command not built',
-        message: `Command ${command.name} was not built successfully`,
-      })
+    if (!command.bundledPath && !command.loadComponent) {
+      setLoadError(new Error(`Command ${command.name} was not built successfully`))
       return
     }
 
@@ -54,15 +67,12 @@ function ExtensionCommandsList({
         extensionName: packageJson.name,
         packageJson,
         bundledPath: command.bundledPath,
-        Component: command.Component,
-        push,
+        loadComponent: command.loadComponent,
+        push: useReplace ? replace : push,
+        replace,
       })
     } catch (error: any) {
-      await showToast({
-        style: Toast.Style.Failure,
-        title: 'Failed to load command',
-        message: error.message || String(error),
-      })
+      setLoadError(error)
     }
   }
 
@@ -75,7 +85,8 @@ function ExtensionCommandsList({
       if (commandName) {
         const command = visibleCommands.find((cmd) => cmd.name === commandName)
         if (command) {
-          handleCommandSelect(command)
+          // Use replace so ESC at root exits instead of going back to command list
+          handleCommandSelect(command, true)
         } else {
           showToast({
             style: Toast.Style.Failure,
@@ -87,12 +98,18 @@ function ExtensionCommandsList({
       }
     }
 
-    if (visibleCommands.length === 1) {
-      handleCommandSelect(visibleCommands[0])
+    if (isSingleCommand) {
+      // Use replace so ESC at root exits instead of going back to command list
+      handleCommandSelect(visibleCommands[0], true)
     }
   }, [])
 
-  if (visibleCommands.length === 1) {
+  // Show error screen for single command that failed to load
+  if (loadError) {
+    return <CommandLoadError error={loadError} />
+  }
+
+  if (isSingleCommand) {
     return null
   }
 
@@ -113,7 +130,7 @@ function ExtensionCommandsList({
             }
             accessories={[
               { text: command.mode },
-              ...(command.bundledPath
+              ...(command.bundledPath || command.loadComponent
                 ? []
                 : [
                     {
@@ -178,11 +195,12 @@ export async function startDevMode({
   // Parse the package.json to get extension metadata
   const { packageJson } = getCommandsWithFiles({ packageJsonPath })
 
-  // Build and set initial devElement
+  // Build and set initial devElement with hot reload support
   const { commands } = await buildExtensionCommands({
     extensionPath: resolvedPath,
     format: 'esm',
     target: 'bun',
+    hotReload: true,
   })
 
   // Handle --help before rendering
@@ -209,9 +227,9 @@ export async function startDevMode({
 
   function App(): any {
     const devElement = useStore((state) => state.devElement)
-    const devRebuildCount = useStore((state) => state.devRebuildCount)
-
-    return <TermcastProvider key={String(devRebuildCount)}>{devElement}</TermcastProvider>
+    // REMOVED: key={devRebuildCount} - we want to preserve the React tree!
+    // React Refresh will update components in-place without remounting
+    return <TermcastProvider>{devElement}</TermcastProvider>
   }
 
   const renderer = await createCliRenderer({
@@ -230,7 +248,7 @@ export async function startCompiledExtension({
   packageJson: RaycastPackageJson
   compiledCommands: Array<{
     name: string
-    Component: (props: any) => any
+    loadComponent: () => Promise<(props: any) => any>
   }>
   skipArgv?: number
 }): Promise<void> {
@@ -248,7 +266,7 @@ export async function startCompiledExtension({
       filePath: '',
       exists: true,
       bundledPath: '',
-      Component: compiled.Component,
+      loadComponent: compiled.loadComponent,
     }
   })
 
@@ -263,9 +281,13 @@ export async function startCompiledExtension({
     skipArgv,
   })
 
+  // For compiled extensions, use ~/.termcast/compiled/{name} as extensionPath
+  // This is where data.db and cache will be stored
+  const compiledExtensionPath = path.join(os.homedir(), '.termcast', 'compiled', packageJson.name)
+
   useStore.setState({
     ...useStore.getInitialState(),
-    extensionPath: '', // No filesystem path for compiled extensions
+    extensionPath: compiledExtensionPath,
     extensionPackageJson: packageJson,
     devElement: (
       <ExtensionCommandsList packageJson={packageJson} commands={commands} skipArgv={skipArgv} />
@@ -296,28 +318,47 @@ export async function triggerRebuild({
       extensionPath,
       format: 'esm',
       target: 'bun',
+      hotReload: true,
     })
 
     // Re-parse package.json in case it changed
     const packageJsonPath = path.join(extensionPath, 'package.json')
     const { packageJson } = getCommandsWithFiles({ packageJsonPath })
 
-    // Update the devElement with new commands and increment rebuild count
     const state = useStore.getState()
+    const newRebuildCount = state.devRebuildCount + 1
+
+    // Re-import all command modules with cache bust
+    // This triggers $RefreshReg$ calls which register new component versions
+    // TODO maybe we can skip importing all command modules here. only the one being used instead
+    for (const cmd of commands) {
+      if (cmd.bundledPath) {
+        try {
+          await import(`${cmd.bundledPath}?v=${newRebuildCount}`)
+        } catch (err) {
+          logger.error(`Failed to reimport ${cmd.name}:`, err)
+        }
+      }
+    }
 
+    // Trigger React Refresh - this updates components in-place!
+    // The reconciler will find all fibers using updated "families"
+    // and schedule re-renders with the new implementations
+    RefreshRuntime.performReactRefresh()
+
+    // Update state WITHOUT resetting navigation/dialog stacks
     useStore.setState({
       extensionPackageJson: packageJson,
+      devRebuildCount: newRebuildCount,
       devElement: (
         <ExtensionCommandsList
           packageJson={packageJson}
           commands={commands}
         />
       ),
-      devRebuildCount: state.devRebuildCount + 1,
-      navigationStack: [], // Reset navigation so NavigationProvider re-initializes with new devElement
-      dialogStack: [], // Clear any open dialogs/toasts on rebuild
-      toast: null,
     })
+
+    // TODO show a green dot in the corner to notify HMR happened
   } catch (error: any) {
     await showToast({
       style: Toast.Style.Failure,

package/src/extensions/dev.vitest.tsx

@@ -30,18 +30,20 @@ test('dev command shows extension commands list', async () => {
     "
 
 
-     Simple Test Extension ────────────────────────────────
+       Simple Test Extension ────────────────────────────────
 
-     Search commands...
+       > Search commands...
 
-     Commands                                              ▲
-    ›List Items Displays a simple list with some ite view  ▀
-     Search Items Search and filter through a list o view
-     Google Oauth                                    view
-     usePromise Demo Shows how to use the usePromise view  ▼
+       Commands                                              ▲
+      ›List Items Displays a simple list with some ite view  ▀
+       Search Items Search and filter through a list o view
+       Google Oauth                                    view
+       usePromise Demo Shows how to use the usePromise view  ▼
 
 
-     ↵ run command  ↑↓ navigate  ^k actions"
+       ↵ run command   ↑↓ navigate   ^k actions
+
+    "
   `)
 }, 30000)
 
@@ -63,18 +65,20 @@ test('selecting command with arguments shows arguments form', async () => {
     "
 
 
-     Simple Test Extension ────────────────────────────────
+       Simple Test Extension ────────────────────────────────
 
-     Search commands...
+       > Search commands...
 
-     usePromise Demo Shows how to use the usePromise view  ▲
-     Show State Shows the current application state  view
-    ›With Arguments Demonstrates command arguments ( view
-     Quick Action Copies current timestamp to cli no-view  ▄
-                                                           ▼
+       usePromise Demo Shows how to use the usePromise view  ▲
+       Show State Shows the current application state  view
+      ›With Arguments Demonstrates command arguments ( view
+       Quick Action Copies current timestamp to cli no-view  ▀
+       Throw Error Command that throws an error at roo view  ▼
 
 
-     ↵ run command  ↑↓ navigate  ^k actions"
+       ↵ run command   ↑↓ navigate   ^k actions
+
+    "
   `)
 
   // Select the command to show arguments form (enter opens action panel, enter again runs)
@@ -91,19 +95,20 @@ test('selecting command with arguments shows arguments form', async () => {
     "
 
 
-    ■  With Arguments                                      █
-    │  Enter the arguments to run this command.
-    │
-    ◇  Search query
-    │  Search query
-    │
-    ◇  Secret key
-    │  Secret key
-    ◇  Category
-    │  Category
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+      ■  With Arguments                                      ▀
+      │  Enter the arguments to run this command.
+      │
+      ◇  Search query
+      │  Search query
+      │
+      ◇  Secret key
+
+
+       ctrl ↵ submit   tab navigate   ^k actions
+
+    "
   `)
 }, 30000)
 
@@ -135,19 +140,20 @@ test('can fill arguments and run command', async () => {
     "
 
 
-    ■  With Arguments                                      █
-    │  Enter the arguments to run this command.
-    │
-    ◇  Search query
-    │  Search query
-    │
-    ◇  Secret key
-    │  Secret key
-    ◇  Category
-    │  Category
 
 
-     ctrl ↵ submit   tab navigate   ^k actions"
+      ■  With Arguments                                      ▀
+      │  Enter the arguments to run this command.
+      │
+      ◇  Search query
+      │  Search query
+      │
+      ◇  Secret key
+
+
+       ctrl ↵ submit   tab navigate   ^k actions
+
+    "
   `)
 
   // Submit the form with Alt+Enter (opens action panel), then Enter (selects submit)
@@ -164,20 +170,20 @@ test('can fill arguments and run command', async () => {
     "
 
 
-     Command Arguments Demo ───────────────────────────────
+       Command Arguments Demo ───────────────────────────────
 
-     Search...
+       > Search...
 
-     Received Arguments
-    ›▼ Search Query (empty)
-     ▼ Secret Key (empty)
-     ▼ Category (empty)
+       Received Arguments
+      ›▼ Search Query (empty)
+       ▼ Secret Key (empty)
+       ▼ Category (empty)
 
 
-                    ┌───────────────────────┐
-                    │ ✓ Copied to Clipboard │
-                    │   (empty)             │
-                    └───────────────────────┘"
+
+       ✓ Copied to Clipboard  (empty)
+
+    "
   `)
 }, 30000)
 
@@ -201,24 +207,28 @@ test('can run simple view command without arguments', async () => {
     "
 
 
-     List Items ───────────────────────────────────────────
+       List Items ───────────────────────────────────────────
 
-     Search...
+       > Search...
 
-     Items                                                 ▲
-    ›▲ First Item This is the first item                   █
-     ▲ Second Item This is the second item                 █
-     ▲ Third Item This is the third item                   ▀
-     ▲ Fourth Item This is the fourth item
-     ▲ Fifth Item This is the fifth item                   ▼
-                    ┌───────────────────────┐
-                    │ ✓ Copied to Clipboard │
-                    │   First Item          │
-                    └───────────────────────┘"
+       Items                                                 ▲
+      ›▲ First Item This is the first item                   █
+       ▲ Second Item This is the second item
+       ▲ Third Item This is the third item
+       ▲ Fourth Item This is the fourth item                 ▼
+
+
+       ✓ Copied to Clipboard  First Item
+
+    "
   `)
 }, 30000)
 
 test('hot reload updates TUI when source file changes', async () => {
+  // This test verifies that React Refresh hot reload is working.
+  // When a source file changes, the component content should update in-place
+  // without needing to manually exit and re-enter the command.
+
   const hotReloadFixtureDir = path.resolve(__dirname, '../../fixtures/hot-reload-extension')
   const sourceFilePath = path.join(hotReloadFixtureDir, 'src/detail-view.tsx')
   const fs = await import('node:fs')
@@ -260,29 +270,112 @@ test('hot reload updates TUI when source file changes', async () => {
     const newContent = originalContent.replace('MARKER_VALUE', `UPDATED_${randomNumber}`)
     fs.writeFileSync(sourceFilePath, newContent)
 
-    // Wait for rebuild - navigation resets to commands list
+    // Wait for rebuild toast to appear
+    await hotReloadSession.waitIdle()
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+
+    const afterReloadSnapshot = await hotReloadSession.text()
+
+    // React Refresh is working! The component content IS updated in-place.
+    // The new content (UPDATED_xxx) should be visible, old content (MARKER_VALUE) should NOT be visible.
+    expect(afterReloadSnapshot).toContain(`UPDATED_${randomNumber}`) // New content IS visible
+    expect(afterReloadSnapshot).not.toContain('MARKER_VALUE') // Old content NOT visible
+  } finally {
+    // Restore original content
+    fs.writeFileSync(sourceFilePath, originalContent)
+    hotReloadSession?.close()
+  }
+}, 60000)
+
+test('hot reload with navigation - preserves navigation and updates content', async () => {
+  // This test verifies React Refresh works with navigation:
+  // 1. Navigation stack is preserved (we stay on detail view)
+  // 2. Component content IS updated (new code runs)
+  // 3. Component state is preserved if hook signature unchanged
+
+  const hotReloadFixtureDir = path.resolve(__dirname, '../../fixtures/hot-reload-extension')
+  const sourceFilePath = path.join(hotReloadFixtureDir, 'src/list-with-navigation.tsx')
+  const fs = await import('node:fs')
+
+  // Read original content to restore later
+  const originalContent = fs.readFileSync(sourceFilePath, 'utf-8')
+
+  // Start a new session for this test
+  const hotReloadSession = await launchTerminal({
+    command: 'bun',
+    args: ['src/cli.tsx', 'dev', hotReloadFixtureDir],
+    cols: 70,
+    rows: 20,
+  })
+
+  try {
+    // Wait for the extension to load
     await hotReloadSession.text({
-      waitFor: (text) => /Hot Reload Test/i.test(text) && /Detail View/i.test(text),
-      timeout: 5000,
+      waitFor: (text) => /Hot Reload Test/i.test(text) && /List With Navigation/i.test(text),
+      timeout: 10000,
     })
+
+    // Navigate to "List With Navigation" command (second item)
+    await hotReloadSession.press('down')
     await hotReloadSession.waitIdle()
 
-    // Run the command again to see updated content
+    // Run the command (enter opens action panel, enter again runs)
     await hotReloadSession.press('enter')
     await hotReloadSession.press('enter')
     await hotReloadSession.waitIdle()
 
-    // Wait for the updated content
+    // Wait for the list to show OR the detail view (enter might auto-execute first action)
     await hotReloadSession.text({
-      waitFor: (text) => text.includes(`UPDATED_${randomNumber}`),
+      waitFor: (text) => /Item One/i.test(text),
       timeout: 10000,
     })
 
-    const updatedSnapshot = await hotReloadSession.text()
-    expect(updatedSnapshot).toContain(`UPDATED_${randomNumber}`)
+    // Check if we're on the list or already on detail view
+    let currentSnapshot = await hotReloadSession.text()
+    
+    if (currentSnapshot.includes('Click to see details')) {
+      // We're on the list - push to detail view
+      await hotReloadSession.press('enter')
+      await hotReloadSession.waitIdle()
+      
+      // Wait for the detail view with the marker
+      await hotReloadSession.text({
+        waitFor: (text) => /NAV_MARKER_VALUE/i.test(text) && /Item One Details/i.test(text),
+        timeout: 10000,
+      })
+    }
+    // else: we're already on the detail view (auto-executed)
+
+    const detailSnapshot = await hotReloadSession.text()
+    expect(detailSnapshot).toContain('Item One Details')
+    expect(detailSnapshot).toContain('NAV_MARKER_VALUE')
+    expect(detailSnapshot).toContain('Counter: 0')
+
+    // Generate a random number for the update
+    const randomNumber = Math.floor(Math.random() * 1000000)
+
+    // Update the source file with the random number
+    const newContent = originalContent.replace('NAV_MARKER_VALUE', `UPDATED_NAV_${randomNumber}`)
+    fs.writeFileSync(sourceFilePath, newContent)
+
+    // Wait for rebuild to complete
+    await hotReloadSession.waitIdle()
+    await new Promise((resolve) => setTimeout(resolve, 4000)) // Give rebuild time
+
+    const afterReloadSnapshot = await hotReloadSession.text()
+
+    // React Refresh is working:
+    // - Navigation is preserved (still on detail view)
+    // - Content IS updated (new marker value visible)
+    // - State should be preserved if hook signature unchanged
+
+    expect(afterReloadSnapshot).toContain('Item One Details')
+    expect(afterReloadSnapshot).toContain(`UPDATED_NAV_${randomNumber}`) // New content IS visible
+    expect(afterReloadSnapshot).not.toContain('NAV_MARKER_VALUE') // Old content NOT visible
+    expect(afterReloadSnapshot).toContain('Counter: 0') // State preserved (hook signature unchanged)
   } finally {
     // Restore original content
     fs.writeFileSync(sourceFilePath, originalContent)
     hotReloadSession?.close()
   }
-}, 60000)
+}, 90000)

package/src/extensions/home.tsx

@@ -18,7 +18,7 @@ interface ExtensionCommand {
   extensionDir?: string
   command: any
   bundledPath?: string
-  Component?: () => any
+  loadComponent?: () => Promise<(props: any) => any>
   packageJson?: any
 }
 
@@ -34,7 +34,7 @@ const builtinExtensions: ExtensionCommand[] = [
       mode: 'view',
       icon: 'Store',
     },
-    Component: Store,
+    loadComponent: async () => Store,
   },
 ]
 
@@ -45,22 +45,21 @@ function ExtensionsList({
   allCommands: ExtensionCommand[]
   initialSearchQuery?: string
 }): any {
-  const { push } = useNavigation()
+  const { push, replace } = useNavigation()
   const [searchText, setSearchText] = React.useState(initialSearchQuery)
 
   const handleCommandSelect = async (item: ExtensionCommand) => {
     clearCommandArguments()
 
-
-
     try {
       await runCommand({
         command: item.command,
         extensionName: item.extensionName,
         packageJson: item.packageJson,
         bundledPath: item.bundledPath,
-        Component: item.Component,
+        loadComponent: item.loadComponent,
         push,
+        replace,
       })
     } catch (error: any) {
       await showToast({

package/src/extensions/react-refresh-init.tsx

@@ -0,0 +1,59 @@
+// This module MUST be imported before @opentui/react to ensure the devtools
+// hook exists before the reconciler tries to call injectIntoDevTools()
+
+// Store captured renderer internals for manual refresh triggering
+let capturedRendererInternals: any = null
+let RefreshRuntime: typeof import('react-refresh/runtime') | null = null
+
+// Initialize React Refresh BEFORE any React rendering
+// This must happen before @opentui/react is loaded
+function initializeReactRefresh() {
+  if (!RefreshRuntime) {
+    return
+  }
+
+  // Inject into the global devtools hook
+  // This sets up __REACT_DEVTOOLS_GLOBAL_HOOK__ which the reconciler uses
+  RefreshRuntime.injectIntoGlobalHook(globalThis)
+
+  const hook = (globalThis as any).__REACT_DEVTOOLS_GLOBAL_HOOK__
+  if (hook) {
+    // Intercept the inject call to capture renderer internals
+    // This is called by react-reconciler when injectIntoDevTools is called
+    const originalInject = hook.inject
+    hook.inject = (renderer: any) => {
+      // Capture the renderer internals - we need scheduleRefresh
+      capturedRendererInternals = renderer
+      // Call the original inject
+      return originalInject.call(hook, renderer)
+    }
+  }
+
+  // Set up the globals that the babel transform expects
+  // These are called by the transformed code to register components
+  ;(globalThis as any).$RefreshReg$ = (type: any, id: string) => {
+    RefreshRuntime.register(type, id)
+  }
+  ;(globalThis as any).$RefreshSig$ = () => {
+    return RefreshRuntime.createSignatureFunctionForTransform()
+  }
+}
+
+// Only load react-refresh in non-production
+if (process.env.NODE_ENV !== 'production') {
+  // Dynamic import to avoid bundling in production
+  RefreshRuntime = require('react-refresh/runtime')
+  initializeReactRefresh()
+}
+
+// Get captured renderer internals
+export function getRendererInternals() {
+  return capturedRendererInternals
+}
+
+// Check if we have a valid renderer with refresh capabilities
+export function hasRefreshCapability() {
+  return !!(capturedRendererInternals?.scheduleRefresh)
+}
+
+export { RefreshRuntime }

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

@@ -471,7 +471,7 @@ export function DatePickerWidget({
                         enableColors && isCursor
                           ? Theme.primary
                           : isValue
-                            ? Theme.selectedMuted
+                            ? Theme.secondary
                             : enableColors && isToday
                               ? Theme.backgroundPanel
                               : undefined,