termcast 1.3.30 → 1.3.32

package/src/components/form/file-autocomplete.tsx

@@ -1,71 +1,90 @@
 import React, { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Theme } from 'termcast/src/theme'
-import { TextareaRenderable } from '@opentui/core'
-import { listAllFiles } from '../../utils/file-system'
+import { searchFiles, parsePath } from '../../utils/file-system'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { createStore, useStore } from 'zustand'
+import os from 'os'
+
+const homedir = os.homedir()
+
+interface FileAutocompleteState {
+  filter: string
+}
+
+/**
+ * Creates a local zustand store for sharing state between FilePicker and FileAutocompleteDialog.
+ * This is necessary because dialog.push() freezes props at creation time - props won't update.
+ * Using zustand allows the dialog to subscribe to state changes reactively.
+ */
+export function createFileAutocompleteStore() {
+  return createStore<FileAutocompleteState>(() => ({
+    filter: '',
+  }))
+}
+
+export type FileAutocompleteStore = ReturnType<typeof createFileAutocompleteStore>
 
 export interface FileAutocompleteDialogProps {
+  /**
+   * NOTE: Do not pass frequently-changing values as props here.
+   * dialog.push() freezes props at creation time - they won't update.
+   * Use the `store` prop for reactive state instead.
+   */
+  store: FileAutocompleteStore
   onSelect: (path: string) => void
   onClose: () => void
-  inputRef: React.RefObject<TextareaRenderable | null>
+  onNavigate: (path: string) => void
   canChooseFiles?: boolean
   canChooseDirectories?: boolean
   initialDirectory?: string
 }
 
-function fuzzyMatch(text: string, query: string): boolean {
-  if (!query) return true
-  const lowerText = text.toLowerCase()
-  const lowerQuery = query.toLowerCase()
-  
-  let queryIndex = 0
-  for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
-    if (lowerText[i] === lowerQuery[queryIndex]) {
-      queryIndex++
-    }
-  }
-  return queryIndex === lowerQuery.length
-}
-
 export const FileAutocompleteDialog = ({
+  store,
   onSelect,
   onClose,
-  inputRef,
+  onNavigate,
   canChooseFiles = true,
   canChooseDirectories = false,
   initialDirectory,
 }: FileAutocompleteDialogProps): any => {
   const [selectedIndex, setSelectedIndex] = useState(0)
-  const [filter, setFilter] = useState(() => inputRef.current?.plainText || '')
   const isInFocus = useIsInFocus()
+  
+  // Subscribe to filter from zustand store (reactive)
+  const filter = useStore(store, (s) => s.filter)
+  
+  // Reset selection when filter changes
+  const prevFilterRef = React.useRef(filter)
+  if (prevFilterRef.current !== filter) {
+    prevFilterRef.current = filter
+    setSelectedIndex(0)
+  }
 
-  const { data: allFiles = [], isLoading } = useQuery({
-    queryKey: ['file-list', initialDirectory, canChooseFiles, canChooseDirectories],
+  // Parse the filter to extract base path and prefix
+  // When filter is empty, use initialDirectory with empty prefix to show all files
+  const { basePath, prefix } = filter
+    ? parsePath(filter)
+    : { basePath: initialDirectory || '.', prefix: '' }
+
+  const { data: files = [], isLoading } = useQuery({
+    queryKey: ['file-search', basePath, prefix, canChooseFiles],
     queryFn: async () => {
-      // Always include directories in the listing, filter afterwards
-      const files = await listAllFiles({
-        basePath: initialDirectory || '.',
-        maxDepth: 4,
-        maxFiles: 500,
-        includeDirectories: true,
-      })
+      const items = await searchFiles(basePath, prefix)
       
-      // Filter based on canChooseFiles/canChooseDirectories
-      return files.filter((f) => {
-        const isDir = f.endsWith('/')
-        if (isDir) {
-          return canChooseDirectories
+      // Always show directories for navigation, filter files based on canChooseFiles
+      return items.filter((item) => {
+        if (item.isDirectory) {
+          return true
         }
         return canChooseFiles
       })
     },
   })
 
-  // Filter files based on current input
-  const filteredFiles = allFiles.filter((file) => fuzzyMatch(file, filter))
-  const visibleFiles = filteredFiles.slice(0, 10)
+  const visibleFiles = files.slice(0, 10)
 
   useKeyboard((evt) => {
     if (!isInFocus) return
@@ -77,32 +96,33 @@ export const FileAutocompleteDialog = ({
     } else if (evt.name === 'return' || evt.name === 'tab') {
       const selected = visibleFiles[selectedIndex]
       if (selected) {
-        const path = selected.endsWith('/') ? selected.slice(0, -1) : selected
-        inputRef.current?.setText(path)
-        onSelect(path)
-        onClose()
-      }
-    } else if (evt.name === 'backspace') {
-      if (filter.length > 0) {
-        const newFilter = filter.slice(0, -1)
-        setFilter(newFilter)
-        setSelectedIndex(0)
+        if (selected.isDirectory) {
+          if (canChooseDirectories) {
+            // Select directory
+            onSelect(selected.path)
+            onClose()
+          } else {
+            // Navigate into directory
+            onNavigate(selected.path + '/')
+          }
+        } else {
+          // Select file
+          onSelect(selected.path)
+          onClose()
+        }
       }
-    } else if (evt.name && evt.name.length === 1 && !evt.ctrl && !evt.meta) {
-      // Single character input
-      const newFilter = filter + evt.name
-      setFilter(newFilter)
-      setSelectedIndex(0)
     }
   })
 
   const hintText = '↑↓ navigate  ⏎/tab select  esc close'
 
   return (
-    <box flexDirection='column' paddingLeft={1} paddingRight={1}>
+    <box flexDirection='column' paddingLeft={1} paddingRight={1} overflow='hidden'>
       <box flexDirection='row'>
-        <text fg={Theme.textMuted}>Filter: </text>
-        <text fg={Theme.primary}>{filter || '(type to filter)'}</text>
+        <text fg={Theme.textMuted} wrapMode='none'>Filter: </text>
+        <text fg={Theme.primary} wrapMode='none'>
+          {filter ? filter.replace(homedir, '~') : '(type to filter)'}
+        </text>
       </box>
       <box height={1} />
       {isLoading ? (
@@ -111,23 +131,23 @@ export const FileAutocompleteDialog = ({
         <text fg={Theme.textMuted}>No files found</text>
       ) : (
         <>
-          {visibleFiles.map((file, index) => {
-            const isDir = file.endsWith('/')
-            const icon = isDir ? '📁 ' : '📄 '
+          {visibleFiles.map((item, index) => {
+            const icon = item.isDirectory ? '▫ ' : '▪ '
             return (
               <text
-                key={file}
+                key={item.path}
                 fg={index === selectedIndex ? Theme.background : Theme.text}
                 bg={index === selectedIndex ? Theme.primary : Theme.backgroundPanel}
+                wrapMode='none'
               >
-                {' '}{icon}{file}
+                {' '}{icon}{item.name}{item.isDirectory ? '/' : ''}
               </text>
             )
           })}
         </>
       )}
       <box height={1} />
-      <text fg={Theme.textMuted}>{hintText}</text>
+      <text fg={Theme.textMuted} wrapMode='none'>{hintText}</text>
     </box>
   )
 }

package/src/components/form/file-picker.tsx

@@ -7,7 +7,7 @@ import { useFormContext, Controller } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
-import { FileAutocompleteDialog } from './file-autocomplete'
+import { FileAutocompleteDialog, createFileAutocompleteStore } from './file-autocomplete'
 import { useFormNavigationHelpers } from './use-form-navigation'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -68,38 +68,47 @@ const FilePickerField = ({
   const inputRef = React.useRef<TextareaRenderable>(null)
   const dialog = useDialog()
 
+  // Create store once for sharing state with dialog
+  const [store] = React.useState(() => createFileAutocompleteStore())
+
   const showAutocomplete = () => {
     if (dialog.stack.length > 0) return
 
-    const handleSelect = (path: string) => {
-      const currentFiles = field.value || []
-      const newFiles =
-        props.allowMultipleSelection !== false ? [...currentFiles, path] : [path]
-      field.onChange(newFiles)
-      if (props.onChange) {
-        props.onChange(newFiles)
-      }
-      inputRef.current?.setText('')
-      dialog.clear()
-    }
-
-    dialog.push(
-      <FileAutocompleteDialog
-        onSelect={handleSelect}
-        onClose={() => {
-          dialog.clear()
-        }}
-        inputRef={inputRef}
-        canChooseFiles={props.canChooseFiles}
-        canChooseDirectories={props.canChooseDirectories}
-        initialDirectory={props.initialDirectory}
-      />
-    )
+    dialog.push({
+      element: (
+        <FileAutocompleteDialog
+          store={store}
+          onSelect={(path) => {
+            const currentFiles = field.value || []
+            const newFiles =
+              props.allowMultipleSelection !== false ? [...currentFiles, path] : [path]
+            field.onChange(newFiles)
+            if (props.onChange) {
+              props.onChange(newFiles)
+            }
+            inputRef.current?.setText('')
+            store.setState({ filter: '' })
+            dialog.clear()
+          }}
+          onNavigate={(path) => {
+            inputRef.current?.setText(path)
+            store.setState({ filter: path })
+          }}
+          onClose={() => {
+            dialog.clear()
+          }}
+          canChooseFiles={props.canChooseFiles}
+          canChooseDirectories={props.canChooseDirectories}
+          initialDirectory={props.initialDirectory}
+        />
+      ),
+    })
   }
 
   // Handle Enter key and left arrow for removing last file
   useKeyboard((evt) => {
     if (!isFocused || !isInFocus) return
+    if (dialog.stack.length > 0) return // Let autocomplete handle keys
 
     // Left arrow removes last selected file when input is empty
     if (evt.name === 'left') {
@@ -132,6 +141,7 @@ const FilePickerField = ({
           props.onChange(newFiles)
         }
         inputRef.current?.setText('')
+        store.setState({ filter: '' })
       }
     }
   })
@@ -167,9 +177,11 @@ const FilePickerField = ({
             initialValue=""
             placeholder={props.placeholder || 'Enter file path...'}
             focused={isFocused}
+            showCursor={dialog.stack.length === 0}
             onMouseDown={() => setFocusedField(props.id)}
             onContentChange={() => {
               const value = inputRef.current?.plainText || ''
+              store.setState({ filter: value })
               if (value && isFocused) {
                 showAutocomplete()
               }

package/src/components/form/index.tsx

@@ -14,6 +14,7 @@ import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { Theme } from 'termcast/src/theme'
 import { useStore } from 'termcast/src/state'
+import { Footer } from 'termcast/src/components/footer'
 import {
   TextAttributes,
   ScrollBoxRenderable,
@@ -105,37 +106,29 @@ function FormFooter(): any {
   const hasToast = useStore((s) => s.toast !== null)
 
   const content = hasToast ? null : (
-    <>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        ctrl ↵
-      </text>
-      <text fg={Theme.textMuted}> submit</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}tab
-      </text>
-      <text fg={Theme.textMuted}> navigate</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}^k
-      </text>
-      <text fg={Theme.textMuted}> actions</text>
-    </>
-  )
-
-  return (
-    <box
-      border={false}
-      height={1}
-      style={{
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 1,
-        marginTop: 1,
-        flexDirection: 'row',
-      }}
-    >
-      {content}
+    <box style={{ flexDirection: 'row', gap: 3 }}>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ctrl ↵
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>submit</text>
+      </box>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          tab
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+      </box>
+      <box style={{ flexDirection: 'row', gap: 1 }}>
+        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+          ^k
+        </text>
+        <text flexShrink={0} fg={Theme.textMuted}>actions</text>
+      </box>
     </box>
   )
+
+  return <Footer>{content}</Footer>
 }
 
 import type { TextFieldProps, TextFieldRef } from './text-field'
@@ -334,31 +327,31 @@ export const Form: FormType = ((props) => {
       return
     }
 
-    if (evt.name === 'k' && evt.ctrl && props.actions) {
-      // Ctrl+K shows actions (always show sheet)
-      dialog.push(
+    if (evt.name === 'k' && evt.ctrl) {
+      // Ctrl+K shows actions (always show panel, even without actions)
+      dialog.pushActions(
         <FormSubmitContext.Provider value={submitContextValue}>
-          {props.actions}
+          {props.actions || <ActionPanel />}
         </FormSubmitContext.Provider>,
-        'bottom-right',
+        'center',
       )
     } else if (evt.name === 'return' && evt.ctrl && props.actions) {
       // Ctrl+Return executes first action directly
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.push(
+      dialog.pushActions(
         <FormSubmitContext.Provider value={submitContextValue}>
           {props.actions}
         </FormSubmitContext.Provider>,
-        'bottom-right',
+        'center',
       )
     } else if (evt.name === 'return' && evt.meta && props.actions) {
       // Cmd+Return also executes first action directly
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.push(
+      dialog.pushActions(
         <FormSubmitContext.Provider value={submitContextValue}>
           {props.actions}
         </FormSubmitContext.Provider>,
-        'bottom-right',
+        'center',
       )
     }
   })
@@ -376,12 +369,23 @@ export const Form: FormType = ((props) => {
     <FormProvider {...methods}>
       <FormSubmitContext.Provider value={submitContextValue}>
         <FormScrollContext.Provider value={scrollContextValue}>
-          <FocusContext.Provider value={{ focusedField, setFocusedField, isLoading: isLoading || false }}>
-            <box flexDirection='row' flexGrow={1} justifyContent='center'>
+          <FocusContext.Provider
+            value={{
+              focusedField,
+              setFocusedField,
+              isLoading: isLoading || false,
+            }}
+          >
+            <box
+              flexDirection='row'
+              flexGrow={1}
+              paddingTop={2}
+              justifyContent='center'
+            >
               <box flexGrow={0} flexDirection='column'>
                 <ScrollBox
                   ref={scrollBoxRef}
-                  flexGrow={1}
+                  // flexGrow={1}
                   style={{
                     rootOptions: {
                       maxWidth: FORM_MAX_WIDTH,

package/src/components/form/with-left-border.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { TextAttributes } from '@opentui/core'
 import { Theme } from 'termcast/src/theme'
 import { colord } from 'colord'
+import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
 
 const spinnerFrames = [
   { char: ' ', color: Theme.accent },
@@ -11,18 +11,8 @@ const spinnerFrames = [
 ]
 
 function Spinner(): any {
-  const [index, setIndex] = React.useState(0)
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setIndex((i) => (i + 1) % spinnerFrames.length)
-    }, 200)
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
-
-  const frame = spinnerFrames[index]
+  const tick = useAnimationTick(TICK_DIVISORS.SPINNER)
+  const frame = spinnerFrames[tick % spinnerFrames.length]
   return (
     <text flexShrink={0} fg={frame.color}>
       <b>{frame.char}</b>
@@ -75,7 +65,7 @@ export const WithLeftBorder = ({
       paddingLeft={paddingLeft}
       border={['left']}
       // borderStyle={isFocused ? 'heavy' : 'single'}
-      borderColor={isFocused ? Theme.accent : undefined}
+      borderColor={isFocused ? Theme.accent : Theme.text}
       flexShrink={0}
       flexDirection='row'
     >