termcast 1.3.21 → 1.3.25

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

@@ -7,8 +7,10 @@ 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 { FileAutocomplete } from './file-autocomplete'
+import { FileAutocompleteDialog } from './file-autocomplete'
 import { useFormNavigationHelpers } from './use-form-navigation'
+import { useDialog } from 'termcast/src/internal/dialog'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface FilePickerProps extends FormItemProps<string[]> {
   /**
@@ -52,6 +54,7 @@ const FilePickerField = ({
   props,
   isFocused,
   setFocusedField,
+  isFormLoading,
 }: {
   field: any
   fieldState: any
@@ -59,12 +62,40 @@ const FilePickerField = ({
   props: FilePickerProps
   isFocused: boolean
   setFocusedField: (id: string) => void
+  isFormLoading: boolean
 }): any => {
   const isInFocus = useIsInFocus()
-  const [showAutocomplete, setShowAutocomplete] = React.useState(false)
-  const [searchTrigger, setSearchTrigger] = React.useState(0)
   const inputRef = React.useRef<TextareaRenderable>(null)
-  const anchorRef = React.useRef<any>(null)
+  const dialog = useDialog()
+
+  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}
+      />
+    )
+  }
 
   // Handle Enter key and left arrow for removing last file
   useKeyboard((evt) => {
@@ -86,12 +117,11 @@ const FilePickerField = ({
     if (evt.name === 'return') {
       const inputValue = inputRef.current?.plainText || ''
       // If input is empty, show files in current directory
-      if (!inputValue && !showAutocomplete) {
-        setShowAutocomplete(true)
-        setSearchTrigger((n) => n + 1)
+      if (!inputValue) {
+        showAutocomplete()
       }
-      // If autocomplete is not visible and input has value, add the path
-      else if (inputValue.trim() && !showAutocomplete) {
+      // If input has value, add the path directly
+      else if (inputValue.trim()) {
         const currentFiles = field.value || []
         const newFiles =
           props.allowMultipleSelection !== false
@@ -106,37 +136,30 @@ const FilePickerField = ({
     }
   })
 
-  const handleSelectFile = (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('')
-    setShowAutocomplete(false)
-  }
-
   const selectedFiles = field.value || []
 
   return (
     <box flexDirection='column'>
-      <WithLeftBorder withDiamond isFocused={isFocused}>
-        <text
-          fg={isFocused ? Theme.primary : Theme.text}
+      <WithLeftBorder withDiamond isFocused={isFocused} isLoading={isFormLoading}>
+        <box
           onMouseDown={() => {
             setFocusedField(props.id)
           }}
         >
-          {props.title || 'File Path'}
-        </text>
+          <LoadingText
+            isLoading={isFocused && isFormLoading}
+            color={isFocused ? Theme.primary : Theme.text}
+          >
+            {props.title || 'File Path'}
+          </LoadingText>
+        </box>
       </WithLeftBorder>
       <WithLeftBorder isFocused={isFocused}>
-        <box flexDirection='column' ref={anchorRef}>
+        <box flexDirection='column'>
           <textarea
             ref={inputRef}
             height={1}
+            wrapMode='none'
             keyBindings={[
               { name: 'return', action: 'submit' },
               { name: 'linefeed', action: 'submit' },
@@ -148,10 +171,7 @@ const FilePickerField = ({
             onContentChange={() => {
               const value = inputRef.current?.plainText || ''
               if (value && isFocused) {
-                setShowAutocomplete(true)
-                setSearchTrigger((n) => n + 1)
-              } else if (!value) {
-                setShowAutocomplete(false)
+                showAutocomplete()
               }
             }}
           />
@@ -179,24 +199,14 @@ const FilePickerField = ({
           <text fg={Theme.textMuted}>{props.info}</text>
         </WithLeftBorder>
       )}
-      <FileAutocomplete
-        onSelect={handleSelectFile}
-        visible={showAutocomplete}
-        onVisibilityChange={setShowAutocomplete}
-        inputRef={inputRef}
-        anchorRef={anchorRef}
-        searchTrigger={searchTrigger}
-        canChooseFiles={props.canChooseFiles}
-        canChooseDirectories={props.canChooseDirectories}
-        initialDirectory={props.initialDirectory}
-      />
     </box>
   ) as React.ReactElement
 }
 
 export const FilePicker = (props: FilePickerProps): any => {
   const { control } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
@@ -236,6 +246,7 @@ export const FilePicker = (props: FilePickerProps): any => {
               props={props}
               isFocused={isFocused}
               setFocusedField={setFocusedField}
+              isFormLoading={focusContext.isLoading}
             />
           </box>
         ) as React.ReactElement

package/src/components/form/form-end.tsx

@@ -1,6 +1,27 @@
-import React from 'react'
+import React, { useState, useLayoutEffect } from 'react'
 import { Theme } from 'termcast/src/theme'
+import { useFocusContext, useFormScrollContext } from './index'
 
 export const FormEnd = (): any => {
-  return <text fg={Theme.text}>└</text>
+  const { focusedField } = useFocusContext()
+  const scrollContext = useFormScrollContext()
+  const [isLastFieldFocused, setIsLastFieldFocused] = useState(false)
+
+  useLayoutEffect(() => {
+    if (!scrollContext || !focusedField) {
+      setIsLastFieldFocused(false)
+      return
+    }
+    const descendants = Object.values(scrollContext.descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.id)
+      .sort((a, b) => a.index - b.index)
+    if (descendants.length === 0) {
+      setIsLastFieldFocused(false)
+      return
+    }
+    const lastField = descendants[descendants.length - 1]
+    setIsLastFieldFocused(lastField.props?.id === focusedField)
+  }, [focusedField])
+
+  return <text fg={isLastFieldFocused ? Theme.accent : Theme.text}>└</text>
 }

package/src/components/form/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useLayoutEffect,
   useRef,
+  useEffect,
 } from 'react'
 import { useKeyboard } from '@opentui/react'
 import { useForm, FormProvider } from 'react-hook-form'
@@ -12,6 +13,7 @@ import { logger } from 'termcast/src/logger'
 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 {
   TextAttributes,
   ScrollBoxRenderable,
@@ -33,7 +35,10 @@ import {
   FormValues_2,
   FormProps_2,
   FormItemProps_2,
+  LinkAccessoryProps,
 } from './types'
+import { LoadingBar } from 'termcast/src/components/loading-bar'
+import { useNavigationPending } from 'termcast/src/internal/navigation'
 import { FORM_MAX_WIDTH } from './description'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
@@ -67,10 +72,11 @@ export const useFormScrollContext = () => {
   return useContext(FormScrollContext)
 }
 
-// Context for managing focused field
+// Context for managing focused field and loading state
 interface FocusContextValue {
   focusedField: string | null
   setFocusedField: (id: string | null) => void
+  isLoading: boolean
 }
 
 const FocusContext = createContext<FocusContextValue | null>(null)
@@ -96,9 +102,29 @@ export const useFormSubmit = () => {
 }
 
 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,
@@ -107,16 +133,7 @@ function FormFooter(): any {
         flexDirection: 'row',
       }}
     >
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>ctrl ↵</text>
-      <text fg={Theme.textMuted}> submit</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}↑↓
-      </text>
-      <text fg={Theme.textMuted}> navigate</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-          {'   '}^k
-      </text>
-      <text fg={Theme.textMuted}> actions</text>
+      {content}
     </box>
   )
 }
@@ -171,19 +188,30 @@ interface FormType {
   FilePicker: (props: FilePickerProps) => any
   Separator: () => any
   Description: (props: DescriptionProps) => any
+  LinkAccessory: (props: LinkAccessoryProps) => any
 }
 
 export const Form: FormType = ((props) => {
+  const { navigationTitle, isLoading, searchBarAccessory } = props
   const methods = useForm<FormValues>({
     // defaultValues: {},
     // mode: 'onChange',
   })
 
   const [focusedField, setFocusedFieldRaw] = useState<string | null>(null)
+  const navigationPending = useNavigationPending()
 
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useFormFieldDescendants()
 
+  // Helper to get sorted field IDs
+  const getFieldIds = () => {
+    return Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.id)
+      .sort((a, b) => a.index - b.index)
+      .map((item) => item.props!.id)
+  }
+
   const scrollToField = (fieldId: string) => {
     const scrollBox = scrollBoxRef.current
     if (!scrollBox) return
@@ -197,17 +225,13 @@ export const Form: FormType = ((props) => {
 
     const contentY = scrollBox.content?.y || 0
     const viewportHeight = scrollBox.viewport?.height || 10
-    const currentScrollTop = scrollBox.scrollTop || 0
 
     // Access current position from the BoxRenderable ref
     const itemTop = elementRef.y - contentY
-    const itemBottom = itemTop + elementRef.height
 
-    if (itemTop < currentScrollTop) {
-      scrollBox.scrollTo(itemTop)
-    } else if (itemBottom > currentScrollTop + viewportHeight) {
-      scrollBox.scrollTo(itemBottom - viewportHeight)
-    }
+    // Scroll so the top of the item is centered in the viewport
+    const targetScrollTop = itemTop - viewportHeight / 2
+    scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
   const setFocusedField = (id: string | null) => {
@@ -217,30 +241,82 @@ export const Form: FormType = ((props) => {
     }
   }
 
-  // Auto-focus first field after children have registered as descendants
-  useLayoutEffect(() => {
-    const descendants = Object.values(descendantsContext.map.current)
-      .filter((item) => item.index !== -1 && item.props?.id)
-      .sort((a, b) => a.index - b.index)
-    
-    if (descendants.length > 0) {
-      const firstId = descendants[0].props!.id
-      logger.log(`focusing `, firstId)
-      setFocusedFieldRaw(firstId)
-    } else {
-      logger.log(`no fields to focus in form`)
+  // Focus first field helper
+  const focusFirstField = () => {
+    const fieldIds = getFieldIds()
+    if (fieldIds.length > 0) {
+      logger.log(`focusing first field:`, fieldIds[0])
+      setFocusedField(fieldIds[0])
+      return true
     }
-  }, [])
+    return false
+  }
+
+  // Focus last field helper
+  const focusLastField = () => {
+    const fieldIds = getFieldIds()
+    if (fieldIds.length > 0) {
+      logger.log(`focusing last field:`, fieldIds[fieldIds.length - 1])
+      setFocusedField(fieldIds[fieldIds.length - 1])
+      return true
+    }
+    return false
+  }
+
+  // Auto-focus first field when descendants become available
+  // Runs on every render until a field is focused (handles async loading)
+  useEffect(() => {
+    if (focusedField) return
+
+    const fieldIds = getFieldIds()
+    if (fieldIds.length > 0) {
+      logger.log(`auto-focusing first field:`, fieldIds[0])
+      setFocusedFieldRaw(fieldIds[0])
+    }
+  })
 
   // Get focus state and dialog
   const inFocus = useIsInFocus()
   const dialog = useDialog()
 
-  // Handle action keys and page scrolling
+  // Handle action keys, tab navigation, and page scrolling
   useKeyboard((evt) => {
     // Only handle keyboard events when form is in focus
     if (!inFocus) return
 
+    // Tab navigation at Form level - handles case when no field is focused
+    // or navigates between fields
+    if (evt.name === 'tab') {
+      if (!focusedField) {
+        // No field focused yet - focus first or last based on shift
+        if (evt.shift) {
+          focusLastField()
+        } else {
+          focusFirstField()
+        }
+      } else {
+        // A field is focused - navigate to next/previous
+        const fieldIds = getFieldIds()
+        const currentIndex = fieldIds.indexOf(focusedField)
+        if (evt.shift) {
+          // Shift+Tab - go to previous
+          if (currentIndex > 0) {
+            setFocusedField(fieldIds[currentIndex - 1])
+          } else {
+            setFocusedField(fieldIds[fieldIds.length - 1])
+          }
+        } else {
+          // Tab - go to next
+          if (currentIndex < fieldIds.length - 1) {
+            setFocusedField(fieldIds[currentIndex + 1])
+          } else {
+            setFocusedField(fieldIds[0])
+          }
+        }
+      }
+      return
+    }
+
     // Page up/down scrolling
     if (evt.name === 'pageup' || evt.name === 'pagedown') {
       const scrollBox = scrollBoxRef.current
@@ -259,7 +335,7 @@ export const Form: FormType = ((props) => {
     }
 
     if (evt.name === 'k' && evt.ctrl && props.actions) {
-      // Ctrl+K shows actions
+      // Ctrl+K shows actions (always show sheet)
       dialog.push(
         <FormSubmitContext.Provider value={submitContextValue}>
           {props.actions}
@@ -267,7 +343,8 @@ export const Form: FormType = ((props) => {
         'bottom-right',
       )
     } else if (evt.name === 'return' && evt.ctrl && props.actions) {
-      // Ctrl+Return shows actions (form submit shortcut)
+      // Ctrl+Return executes first action directly
+      useStore.setState({ shouldAutoExecuteFirstAction: true })
       dialog.push(
         <FormSubmitContext.Provider value={submitContextValue}>
           {props.actions}
@@ -275,7 +352,8 @@ export const Form: FormType = ((props) => {
         'bottom-right',
       )
     } else if (evt.name === 'return' && evt.meta && props.actions) {
-      // Cmd+Return also shows actions (consistent with List)
+      // Cmd+Return also executes first action directly
+      useStore.setState({ shouldAutoExecuteFirstAction: true })
       dialog.push(
         <FormSubmitContext.Provider value={submitContextValue}>
           {props.actions}
@@ -298,9 +376,9 @@ export const Form: FormType = ((props) => {
     <FormProvider {...methods}>
       <FormSubmitContext.Provider value={submitContextValue}>
         <FormScrollContext.Provider value={scrollContextValue}>
-          <FocusContext.Provider value={{ focusedField, setFocusedField }}>
+          <FocusContext.Provider value={{ focusedField, setFocusedField, isLoading: isLoading || false }}>
             <box flexDirection='row' flexGrow={1} justifyContent='center'>
-              <box flexDirection='column'>
+              <box flexGrow={0} flexDirection='column'>
                 <ScrollBox
                   ref={scrollBoxRef}
                   flexGrow={1}
@@ -308,15 +386,40 @@ export const Form: FormType = ((props) => {
                     rootOptions: {
                       maxWidth: FORM_MAX_WIDTH,
                     },
+
                     contentOptions: {
                       justifyContent: 'center',
                     },
                   }}
                 >
-                  <FormFieldDescendantsProvider value={descendantsContext}>
-                    {props.children}
-                    <FormEnd />
-                  </FormFieldDescendantsProvider>
+                  {/* Navigation header with title, loading bar, and accessory */}
+
+                  {/*<box
+                    border={false}
+                    style={{
+                      flexShrink: 0,
+                      flexDirection: 'row',
+                      paddingBottom: 1,
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      gap: 3,
+                    }}
+                  >
+                    <box overflow='hidden'>
+                      <LoadingBar
+                        title={navigationTitle || ''}
+                        isLoading={isLoading || navigationPending}
+                      />
+                    </box>
+                    {searchBarAccessory}
+                  </box>*/}
+
+                  <box>
+                    <FormFieldDescendantsProvider value={descendantsContext}>
+                      {props.children}
+                      <FormEnd />
+                    </FormFieldDescendantsProvider>
+                  </box>
                 </ScrollBox>
                 <FormFooter />
               </box>
@@ -351,3 +454,27 @@ Form.TagPicker = TagPicker
 Form.FilePicker = FilePicker
 Form.Separator = Separator
 Form.Description = Description
+
+// LinkAccessory component - shows a link in the navigation bar
+function LinkAccessory(props: LinkAccessoryProps): any {
+  return (
+    <box
+      style={{
+        flexShrink: 0,
+        maxWidth: '50%',
+        overflow: 'hidden',
+        paddingRight: 1,
+      }}
+    >
+      <text
+        fg={Theme.textMuted}
+        attributes={TextAttributes.UNDERLINE}
+        wrapMode='none'
+      >
+        {props.text}
+      </text>
+    </box>
+  )
+}
+
+Form.LinkAccessory = LinkAccessory

package/src/components/form/password-field.tsx

@@ -6,6 +6,7 @@ import { FormItemProps, FormItemRef } from './types'
 import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface PasswordFieldProps extends FormItemProps<string> {
   placeholder?: string
@@ -15,7 +16,8 @@ export type PasswordFieldRef = FormItemRef
 
 export const PasswordField = (props: PasswordFieldProps): any => {
   const { control } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
   const elementRef = useRef<BoxRenderable>(null)
   const realValueRef = useRef(props.defaultValue || props.value || '')
@@ -38,15 +40,19 @@ export const PasswordField = (props: PasswordFieldProps): any => {
 
         return (
           <box ref={elementRef} flexDirection="column">
-            <WithLeftBorder withDiamond isFocused={isFocused}>
-              <text
-                fg={isFocused ? Theme.primary : Theme.text}
+            <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
+              <box
                 onMouseDown={() => {
                   setFocusedField(props.id)
                 }}
               >
-                {props.title}
-              </text>
+                <LoadingText
+                  isLoading={isFocused && focusContext.isLoading}
+                  color={isFocused ? Theme.primary : Theme.text}
+                >
+                  {props.title || ''}
+                </LoadingText>
+              </box>
             </WithLeftBorder>
             <WithLeftBorder isFocused={isFocused}>
               <input

package/src/components/form/text-area.tsx

@@ -7,6 +7,7 @@ import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { createTextareaFormRef } from './form-ref'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface TextAreaProps extends FormItemProps<string> {
   placeholder?: string
@@ -17,7 +18,8 @@ export type TextAreaRef = FormItemRef
 
 export const TextArea = (props: TextAreaProps): any => {
   const { register, formState } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
 
   const elementRef = useRef<BoxRenderable>(null)
@@ -58,21 +60,26 @@ export const TextArea = (props: TextAreaProps): any => {
 
   return (
     <box ref={elementRef} flexDirection="column">
-      <WithLeftBorder withDiamond isFocused={isFocused}>
-        <text
-          fg={isFocused ? Theme.primary : Theme.text}
+      <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
+        <box
           onMouseDown={() => {
             setFocusedField(props.id)
           }}
         >
-          {props.title}
-        </text>
+          <LoadingText
+            isLoading={isFocused && focusContext.isLoading}
+            color={isFocused ? Theme.primary : Theme.text}
+          >
+            {props.title || ''}
+          </LoadingText>
+        </box>
       </WithLeftBorder>
 
       <WithLeftBorder isFocused={isFocused}>
         <box flexGrow={1}>
           <textarea
             ref={handleRef}
+            wrapMode='none'
             initialValue={props.defaultValue || props.value || ''}
             onContentChange={handleContentChange}
             minHeight={4}