termcast 1.3.50 → 1.3.52

package/src/cli.tsx

@@ -17,6 +17,8 @@ import './globals'
 import { startDevMode, triggerRebuild } from './extensions/dev'
 import { compileExtension } from './compile'
 import { releaseExtension } from './release'
+import { buildApp } from './app'
+import { themeNames } from './themes'
 import { runHomeCommand } from './extensions/home'
 import { showToast, Toast } from './apis/toast'
 import packageJson from '../package.json'
@@ -257,6 +259,109 @@ cli
     }
   })
 
+cli
+  .command(
+    'app build [path]',
+    'Build a standalone desktop app from a termcast extension (macOS .app or Windows folder)',
+  )
+  .option('--name <name>', 'App display name (default: package.json title)')
+  .option('--icon <path>', 'Custom icon PNG path (default: extension icon or bundled default)')
+  .option('--bundle-id <id>', 'macOS bundle identifier (default: com.termcast.{name})')
+  .option('--release', 'Upload the app zip to the latest GitHub release')
+  .option('--entry <file>', 'Custom entry file (instead of auto-generated one)')
+  .option('--platform <platform>', 'Target platform: darwin or win32 (default: current OS)')
+  .option('--arch <arch>', 'Target architecture: arm64 or x64 (default: current machine)')
+  .option('--no-installer', 'Skip NSIS installer generation on Windows')
+  .option('--font <family>', 'Font family name (e.g. "Inter Mono", "Fira Code")')
+  .option('--font-dir <path>', 'Directory of .ttf/.otf files to bundle (auto-detects fonts/ in extension)')
+  .option('--font-size <size>', 'Font size in points (default: 14)')
+  .option('--line-height <height>', 'Line height multiplier (default: 1.2)')
+  .option('--theme <name>', 'Default theme name (default: nerv)')
+  .action(
+    async (
+      extensionPath: string,
+      options: {
+        name?: string
+        icon?: string
+        bundleId?: string
+        release?: boolean
+        entry?: string
+        platform?: string
+        arch?: string
+        installer?: boolean
+        font?: string
+        fontDir?: string
+        fontSize?: string
+        lineHeight?: string
+        theme?: string
+      },
+    ) => {
+      extensionPath = path.resolve(extensionPath || process.cwd())
+
+      if (options.arch && options.arch !== 'arm64' && options.arch !== 'x64') {
+        console.error(`Invalid --arch "${options.arch}". Must be "arm64" or "x64".`)
+        process.exit(1)
+      }
+      if (options.platform && options.platform !== 'darwin' && options.platform !== 'win32') {
+        console.error(`Invalid --platform "${options.platform}". Must be "darwin" or "win32".`)
+        process.exit(1)
+      }
+
+      const fontSize = options.fontSize ? parseFloat(options.fontSize) : undefined
+      if (fontSize !== undefined && !Number.isFinite(fontSize)) {
+        console.error(`Invalid --font-size "${options.fontSize}". Must be a number.`)
+        process.exit(1)
+      }
+      const lineHeight = options.lineHeight ? parseFloat(options.lineHeight) : undefined
+      if (lineHeight !== undefined && !Number.isFinite(lineHeight)) {
+        console.error(`Invalid --line-height "${options.lineHeight}". Must be a number.`)
+        process.exit(1)
+      }
+
+      if (options.theme && !themeNames.includes(options.theme)) {
+        console.error(`Invalid --theme "${options.theme}". Available themes: ${themeNames.join(', ')}`)
+        process.exit(1)
+      }
+
+      try {
+        const result = await buildApp({
+          extensionPath,
+          name: options.name,
+          icon: options.icon,
+          bundleId: options.bundleId,
+          release: options.release,
+          entry: options.entry,
+          platform: options.platform as 'darwin' | 'win32' | undefined,
+          arch: options.arch as 'arm64' | 'x64' | undefined,
+          // goke parses --no-installer as installer:false
+          noInstaller: options.installer === false,
+          fontFamily: options.font,
+          fontDir: options.fontDir,
+          fontSize,
+          lineHeight,
+          theme: options.theme,
+        })
+
+        const resolvedPlatform = options.platform || process.platform
+        console.log(`\nApp built: ${result.appPath}`)
+        if (resolvedPlatform === 'win32') {
+          if (result.installerPath) {
+            console.log(`Installer: ${result.installerPath}`)
+            console.log(`Distribute the installer .exe. Users double-click to install.`)
+          } else {
+            console.log(`Distribute the folder as a zip. Users run: ${result.appName}.exe`)
+          }
+        } else {
+          console.log(`Run it with: open "${result.appPath}"`)
+        }
+        process.exit(0)
+      } catch (error) {
+        console.error('App build failed:', error instanceof Error ? error.message : error)
+        process.exit(1)
+      }
+    },
+  )
+
 cli
   .command(
     'raycast-pr <prNumber>',

package/src/compile.tsx

@@ -6,13 +6,16 @@ import { getCommandsWithFiles } from './package-json'
 import { swiftLoaderPlugin } from './swift-loader'
 
 // compile.tsx lives at termcast/src/compile.tsx, so __dirname is termcast/src/
+// When running from dist/, __dirname is termcast/dist/ — always resolve to src/index.tsx
+// so the plugin works both in dev and from the published package.
 const termcastRoot = path.resolve(__dirname, '..')
+const termcastEntry = path.join(termcastRoot, 'src', 'index.tsx')
 
 const raycastAliasPlugin: BunPlugin = {
   name: 'raycast-to-termcast',
   setup(build) {
     build.onResolve({ filter: /@raycast\/api/ }, () => ({
-      path: path.join(__dirname, 'index.tsx'),
+      path: termcastEntry,
     }))
     build.onResolve({ filter: /@raycast\/utils/ }, () => ({
       path: require.resolve('@termcast/utils'),
@@ -20,7 +23,7 @@ const raycastAliasPlugin: BunPlugin = {
     // termcast and termcast/* — resolve directly from the package source
     build.onResolve({ filter: /^termcast/ }, (args) => ({
       path: args.path === 'termcast'
-        ? path.join(__dirname, 'index.tsx')
+        ? termcastEntry
         : require.resolve(args.path, { paths: [termcastRoot] }),
     }))
     build.onResolve({ filter: /^react(\/|$)/ }, (args) => ({

package/src/components/actions.tsx

@@ -700,12 +700,13 @@ function formatShortcut(
 /**
  * Check if a keyboard event matches an action shortcut.
  * Handles modifier mapping:
- * - 'cmd' maps to ctrl (terminals can't intercept cmd)
+ * - 'cmd' maps to ctrl, super, or hyper (ctrl in normal terminals,
+ *   super/hyper in standalone apps where WezTerm forwards Cmd via kitty protocol)
  * - 'alt'/'opt' checks evt.meta (opentui uses meta for alt on Linux/Windows)
  *   and evt.option (opentui uses option for alt on macOS)
  */
 export function matchesShortcut(
-  evt: { name: string; ctrl?: boolean; alt?: boolean; shift?: boolean; meta?: boolean; option?: boolean },
+  evt: { name: string; ctrl?: boolean; alt?: boolean; shift?: boolean; meta?: boolean; option?: boolean; super?: boolean; hyper?: boolean },
   shortcut: { modifiers?: KeyboardKeyModifier[]; key: KeyboardKeyEquivalent },
 ): boolean {
   // Check key name matches (case-insensitive)
@@ -715,10 +716,12 @@ export function matchesShortcut(
 
   const modifiers = shortcut.modifiers || []
 
-  // Map cmd to ctrl (terminals can't intercept cmd)
-  const needsCtrl = modifiers.some((m) =>
+  // Map cmd to ctrl, super, or hyper. In normal terminals cmd arrives as ctrl.
+  // In standalone apps WezTerm forwards Cmd as super via kitty protocol.
+  const needsCmd = modifiers.some((m) =>
     ['cmd', 'ctrl', 'control'].includes(m.toLowerCase()),
   )
+  const hasCmd = Boolean(evt.ctrl || evt.super || evt.hyper)
   // alt/opt in shortcuts - opentui uses meta (Linux/Windows) or option (macOS) for alt key
   const needsAlt = modifiers.some((m) =>
     ['alt', 'opt', 'option'].includes(m.toLowerCase()),
@@ -726,14 +729,14 @@ export function matchesShortcut(
   const needsShift = modifiers.includes('shift')
 
   // Check all required modifiers are pressed
-  if (needsCtrl && !evt.ctrl) return false
+  if (needsCmd && !hasCmd) return false
   // For alt, check both meta and option (opentui platform differences)
   const hasAlt = evt.alt || evt.meta || evt.option
   if (needsAlt && !hasAlt) return false
   if (needsShift && !evt.shift) return false
 
   // Check no extra modifiers are pressed (excluding ones that match)
-  if (evt.ctrl && !needsCtrl) return false
+  if (hasCmd && !needsCmd) return false
   if (hasAlt && !needsAlt) return false
   if (evt.shift && !needsShift) return false
 

package/src/components/detail.tsx

@@ -1,18 +1,19 @@
 import React, { ReactNode, useMemo, ReactElement } from 'react'
 import { TextAttributes } from '@opentui/core'
-import { useKeyboard, useTerminalDimensions, useRenderer } from '@opentui/react'
-import { useTheme, markdownSyntaxStyle } from 'termcast/src/theme'
+import { useKeyboard, useTerminalDimensions } from '@opentui/react'
+import { useTheme } from 'termcast/src/theme'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { ActionPanel, Action } from 'termcast/src/components/actions'
-import { Footer } from 'termcast/src/components/footer'
+import { Footer, Hoverable } from 'termcast/src/components/footer'
 
 import { useDialog } from 'termcast/src/internal/dialog'
+import { useNavigation } from 'termcast/src/internal/navigation'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
 import { useStore } from 'termcast/src/state'
 import { Offscreen } from 'termcast/src/internal/offscreen'
 import { Metadata, MetadataContext, extractTitleLengths, defaultConfig } from 'termcast/src/components/metadata'
 import type { LabelProps, SeparatorProps, LinkProps, TagListProps, TagListItemProps, MetadataConfig } from 'termcast/src/components/metadata'
-import { createMarkdownRenderNode } from 'termcast/src/markdown-utils'
+import { Markdown } from 'termcast/src/components/markdown'
 
 interface ActionsInterface {
   actions?: ReactNode
@@ -101,36 +102,54 @@ DetailMetadata.TagList = Metadata.TagList
 function DetailFooter({
   hasActions,
   firstActionTitle,
+  onGoBack,
 }: {
   hasActions?: boolean
   firstActionTitle?: string
+  onGoBack?: () => void
 }): any {
   const theme = useTheme()
 
   return (
     <Footer paddingLeft={0} paddingRight={0}>
       <box style={{ flexDirection: 'row', gap: 3 }}>
-        <box style={{ flexDirection: 'row', gap: 1 }}>
+        <Hoverable
+          onMouseDown={() => {
+            // Defer pop so opentui finishes its mouse event walk before
+            // React unmounts the component tree (avoids Yoga WASM crash)
+            queueMicrotask(() => {
+              onGoBack?.()
+            })
+          }}
+        >
           <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             esc
           </text>
           <text flexShrink={0} fg={theme.textMuted}>go back</text>
-        </box>
+        </Hoverable>
         {hasActions && (
-          <box style={{ flexDirection: 'row', gap: 1 }}>
+          <Hoverable
+            onMouseDown={() => {
+              useStore.setState({ showActionsDialog: true })
+            }}
+          >
             <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
               ^k
             </text>
             <text flexShrink={0} fg={theme.textMuted}>actions</text>
-          </box>
+          </Hoverable>
         )}
         {hasActions && firstActionTitle && (
-          <box style={{ flexDirection: 'row', gap: 1 }}>
+          <Hoverable
+            onMouseDown={() => {
+              useStore.setState({ shouldAutoExecuteFirstAction: true })
+            }}
+          >
             <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
               ↵
             </text>
             <text flexShrink={0} fg={theme.textMuted}>{firstActionTitle}</text>
-          </box>
+          </Hoverable>
         )}
       </box>
     </Footer>
@@ -170,23 +189,13 @@ function getFirstActionTitle(actions: ReactNode): string | undefined {
   return firstTitle
 }
 
-// Renders markdown with link URL stripping via renderNode.
-// Links show only their title text (bold, primary) with click-to-open.
-function MarkdownContent({ markdown }: { markdown: string }): any {
-  const renderer = useRenderer()
-  const renderNode = useMemo(() => {
-    return createMarkdownRenderNode(renderer)
-  }, [renderer])
 
-  return (
-    <markdown content={markdown} syntaxStyle={markdownSyntaxStyle} conceal renderNode={renderNode} />
-  )
-}
 
 const Detail: DetailType = (props) => {
   const { actions } = props
   const dialog = useDialog()
   const inFocus = useIsInFocus()
+  const navigation = useNavigation()
 
   const firstActionTitle = useMemo(() => {
     return actions ? getFirstActionTitle(actions) : undefined
@@ -195,7 +204,7 @@ const Detail: DetailType = (props) => {
   useKeyboard((evt) => {
     if (!inFocus) return
 
-    if (evt.name === 'k' && evt.ctrl) {
+    if (evt.name === 'k' && (evt.ctrl || evt.super)) {
       // Always open — built-in actions (Change Theme, etc.) are always available
       useStore.setState({ showActionsDialog: true })
     } else if (evt.name === 'return' && actions) {
@@ -224,7 +233,7 @@ const Detail: DetailType = (props) => {
         }}
       >
         {props.markdown && (
-          <MarkdownContent markdown={props.markdown} />
+          <Markdown content={props.markdown} />
         )}
         {props.metadata}
       </box>
@@ -237,6 +246,7 @@ const Detail: DetailType = (props) => {
       <DetailFooter
         hasActions={true}
         firstActionTitle={firstActionTitle}
+        onGoBack={navigation.pop}
       />
       {/* Always mount ActionPanel offscreen so built-in actions are available */}
       <Offscreen>{actions || <ActionPanel />}</Offscreen>

package/src/components/dropdown.tsx

@@ -14,7 +14,7 @@ import {
   ScrollBoxRenderable,
   TextareaRenderable,
 } from '@opentui/core'
-import { useTheme } from 'termcast/src/theme'
+import { getInteractiveHoverBackground, useTheme } from 'termcast/src/theme'
 import { getIconValue } from 'termcast/src/components/icon'
 import { logger } from 'termcast/src/logger'
 import { useStore } from 'termcast/src/state'
@@ -441,6 +441,7 @@ function ItemOption(props: {
   elementRef?: React.Ref<any>
 }) {
   const theme = useTheme()
+  const hoverBackgroundColor = getInteractiveHoverBackground(theme)
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -451,7 +452,7 @@ function ItemOption(props: {
         backgroundColor: props.active
           ? theme.primary
           : isHovered
-            ? theme.backgroundPanel
+            ? hoverBackgroundColor
             : undefined,
         paddingLeft: props.active ? 0 : 1,
         paddingRight: 1,

package/src/components/footer.tsx

@@ -13,6 +13,32 @@ import {
 } from 'termcast/src/state'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 
+interface HoverableProps {
+  children: ReactNode
+  onMouseDown?: () => void
+  flexShrink?: number
+}
+
+// Clickable box that shows a subtle background on hover.
+// Keeps hover state local to each label for minimal re-renders.
+export function Hoverable({ children, onMouseDown, flexShrink = 0 }: HoverableProps): any {
+  const [isHovered, setIsHovered] = useState(false)
+  const theme = useTheme()
+  return (
+    <box
+      flexDirection='row'
+      gap={1}
+      flexShrink={flexShrink}
+      backgroundColor={isHovered ? theme.backgroundElement : undefined}
+      onMouseMove={() => { setIsHovered(true) }}
+      onMouseOut={() => { setIsHovered(false) }}
+      onMouseDown={onMouseDown}
+    >
+      {children}
+    </box>
+  )
+}
+
 interface FooterProps {
   children?: ReactNode
   paddingLeft?: number
@@ -117,6 +143,7 @@ function ToastInline({ toast }: { toast: ToastData }): any {
       overflow='hidden'
       height={1}
       backgroundColor={toastBg}
+      onMouseDown={() => { toast.onHide() }}
     >
       {/* Title box */}
       <box
@@ -125,6 +152,7 @@ function ToastInline({ toast }: { toast: ToastData }): any {
         paddingRight={1}
         overflow='hidden'
         height={1}
+        onMouseDown={() => { toast.onHide() }}
       >
         <text flexShrink={0} fg={toastFg} wrapMode='none'>
           {getIcon()}{' '}
@@ -147,6 +175,7 @@ function ToastInline({ toast }: { toast: ToastData }): any {
         flexDirection='row'
         overflow='hidden'
         height={1}
+        onMouseDown={() => { toast.onHide() }}
       >
         <text fg={toastFg} flexShrink={1} wrapMode='none'>
           {toast.message || ''}
@@ -160,12 +189,14 @@ function ToastInline({ toast }: { toast: ToastData }): any {
         flexShrink={0}
         overflow='hidden'
         height={1}
+        onMouseDown={() => { toast.onHide() }}
       >
         {toast.primaryAction?.title && (
           <box
             flexShrink={0}
             flexDirection='row'
-            onMouseDown={() => {
+            onMouseDown={(evt) => {
+              evt.stopPropagation()
               toast.primaryAction?.onAction()
             }}
           >
@@ -186,7 +217,8 @@ function ToastInline({ toast }: { toast: ToastData }): any {
           <box
             flexShrink={0}
             flexDirection='row'
-            onMouseDown={() => {
+            onMouseDown={(evt) => {
+              evt.stopPropagation()
               toast.secondaryAction?.onAction()
             }}
           >
@@ -244,21 +276,22 @@ export function Footer({
             {children}
           </box>
           {showPoweredBy && (
-            <box flexDirection='row' gap={1} flexShrink={0}>
+            <Hoverable
+              onMouseDown={() => {
+                openInBrowser('https://termcast.app')
+              }}
+            >
               <text flexShrink={0} fg={theme.textMuted}>
                 powered by
               </text>
               <text
                 flexShrink={0}
-                onMouseDown={() => {
-                  openInBrowser('https://termcast.app')
-                }}
                 fg={theme.textMuted}
                 attributes={TextAttributes.BOLD}
               >
                 termcast.app
               </text>
-            </box>
+            </Hoverable>
           )}
         </>
       )}

package/src/components/form/checkbox.tsx

@@ -59,19 +59,10 @@ export const Checkbox = (props: CheckboxProps): any => {
       defaultValue={props.defaultValue || props.value || false}
       render={({ field, fieldState, formState }) => {
         return (
-          <box ref={elementRef} flexDirection='column'>
+          <box ref={elementRef} flexDirection='column' onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }); handleToggle() }}>
             <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
               <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
-                <box
-                  onMouseDown={() => {
-                    // Always focus the field when clicked
-                    if (!isFocused) {
-                      setFocusedField(props.id)
-                    }
-                    // Always toggle the value when clicked
-                    handleToggle()
-                  }}
-                >
+                <box>
                   <LoadingText
                     isLoading={isFocused && focusContext.isLoading}
                     color={isFocused ? theme.primary : theme.text}
@@ -83,12 +74,6 @@ export const Checkbox = (props: CheckboxProps): any => {
               <text
                 fg={isFocused ? theme.accent : theme.text}
                 selectable={false}
-                onMouseDown={() => {
-                  if (!isFocused) {
-                    setFocusedField(props.id)
-                  }
-                  handleToggle()
-                }}
               >
                 {field.value ? '●' : '○'} {props.label}
               </text>

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

@@ -55,12 +55,12 @@ const DatePickerComponent = (props: DatePickerProps): any => {
       defaultValue={props.defaultValue || props.value || null}
       render={({ field, fieldState, formState }) => {
         return (
-          <box ref={elementRef} flexDirection='column'>
+          <box ref={elementRef} flexDirection='column' onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
             <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
               <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
                 <box
                   onMouseDown={() => {
-                    setFocusedField(props.id)
+                    setFocusedField(props.id, { skipScroll: true })
                   }}
                 >
                   <LoadingText

package/src/components/form/description.tsx

@@ -39,7 +39,7 @@ export const Description = (props: DescriptionProps): any => {
       flexDirection='column'
       maxWidth={FORM_MAX_WIDTH}
       onMouseDown={() => {
-        focusContext.setFocusedField(id)
+        focusContext.setFocusedField(id, { skipScroll: true })
       }}
     >
       <WithLeftBorder isFocused={isFocused} paddingBottom={1}>

package/src/components/form/dropdown.tsx

@@ -268,6 +268,11 @@ const DropdownContent = ({
     const item = descendantsContext.committedMap[descendantId]
     const title = item?.props?.title || value
 
+    // Sync focusedIndex so keyboard nav continues from clicked item
+    if (item && item.index !== -1) {
+      setFocusedIndex(item.index)
+    }
+
     if (props.hasMultipleSelection) {
       const currentValues = Array.isArray(field.value) ? [...field.value] : []
       const index = currentValues.indexOf(value)
@@ -350,6 +355,20 @@ const DropdownContent = ({
       }
     }
 
+    if (itemCount === 0) {
+      if (evt.name === 'down') {
+        navigateToNext()
+        evt.stopPropagation()
+        return
+      }
+
+      if (evt.name === 'up') {
+        navigateToPrevious()
+        evt.stopPropagation()
+        return
+      }
+    }
+
     // Type-ahead search
     if (
       evt.name.length === 1 &&
@@ -428,12 +447,12 @@ const DropdownContent = ({
   return (
     <FormDropdownDescendantsProvider value={descendantsContext}>
       <FormDropdownContext.Provider value={contextValue}>
-        <box ref={elementRef} flexDirection='column'>
+        <box ref={elementRef} flexDirection='column' onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
           <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
             <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
               <box
                 onMouseDown={() => {
-                  setFocusedField(props.id)
+                  setFocusedField(props.id, { skipScroll: true })
                 }}
               >
                 <LoadingText
@@ -448,7 +467,7 @@ const DropdownContent = ({
               fg={selectedTitles.length > 0 ? theme.text : theme.textMuted}
               selectable={false}
               onMouseDown={() => {
-                setFocusedField(props.id)
+                setFocusedField(props.id, { skipScroll: true })
               }}
             >
               {selectedTitles.length > 0

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

@@ -62,7 +62,7 @@ const FilePickerField = ({
   formState: any
   props: FilePickerProps
   isFocused: boolean
-  setFocusedField: (id: string) => void
+  setFocusedField: (id: string, opts?: { skipScroll?: boolean }) => void
   isFormLoading: boolean
 }): any => {
   const theme = useTheme()
@@ -86,6 +86,7 @@ const FilePickerField = ({
   }, [])
 
   const dialog = useDialog()
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
 
   // Create store once for sharing state with dialog
   const [store] = React.useState(() => createFileAutocompleteStore())
@@ -129,6 +130,18 @@ const FilePickerField = ({
     if (!isFocused || !isInFocus) return
     if (dialog.stack.length > 0) return // Let autocomplete handle keys
 
+    if (evt.name === 'up') {
+      navigateToPrevious()
+      evt.stopPropagation()
+      return
+    }
+
+    if (evt.name === 'down') {
+      navigateToNext()
+      evt.stopPropagation()
+      return
+    }
+
     // Left arrow removes last selected file when input is empty
     if (evt.name === 'left') {
       const inputValue = inputRef.current?.plainText || ''
@@ -173,10 +186,10 @@ const FilePickerField = ({
         <TitleIndicator isFocused={isFocused} isLoading={isFormLoading}>
           <box
             onMouseDown={() => {
-              setFocusedField(props.id)
-            }}
-          >
-            <LoadingText
+                  setFocusedField(props.id, { skipScroll: true })
+                }}
+              >
+                <LoadingText
               isLoading={isFocused && isFormLoading}
               color={isFocused ? theme.primary : theme.text}
             >
@@ -197,7 +210,7 @@ const FilePickerField = ({
             placeholder={props.placeholder || 'Enter file path...'}
             focused={isFocused}
             showCursor={dialog.stack.length === 0}
-            onMouseDown={() => setFocusedField(props.id)}
+            onMouseDown={() => setFocusedField(props.id, { skipScroll: true })}
             onContentChange={() => {
               const value = inputRef.current?.plainText || ''
               store.setState({ filter: value })
@@ -209,9 +222,19 @@ const FilePickerField = ({
           {selectedFiles.length > 0 && (
             <box flexDirection='column' marginTop={1}>
               <text fg={theme.textMuted}>Selected files:</text>
-              {selectedFiles.map((file: string, index: number) => (
-                <text key={index} fg={theme.text}>
-                  • {file}
+              {selectedFiles.map((file: string, idx: number) => (
+                <text
+                  key={idx}
+                  fg={theme.text}
+                  onMouseDown={() => {
+                    const newFiles = selectedFiles.filter((_: string, i: number) => i !== idx)
+                    field.onChange(newFiles)
+                    if (props.onChange) {
+                      props.onChange(newFiles)
+                    }
+                  }}
+                >
+                  • {file} ✕
                 </text>
               ))}
             </box>
@@ -252,7 +275,7 @@ export const FilePicker = (props: FilePickerProps): any => {
       defaultValue={props.defaultValue || props.value || []}
       render={(renderProps) => {
         return (
-          <box ref={elementRef} flexDirection='column'>
+          <box ref={elementRef} flexDirection='column' onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
             <FilePickerField
               {...renderProps}
               props={props}