termcast 1.3.9 → 1.3.16

package/src/components/detail.tsx

@@ -1,13 +1,14 @@
 import React, { ReactNode, useMemo, ReactElement } from 'react'
 import { TextAttributes } from '@opentui/core'
 import { useKeyboard } from '@opentui/react'
-import { Theme } from 'termcast/src/theme'
+import { Theme, markdownSyntaxStyle } from 'termcast/src/theme'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { ActionPanel, Action } from 'termcast/src/components/actions'
 import { Image } from 'termcast/src/components/list'
-import { Color } from 'termcast/src/colors'
-import { useStore } from 'termcast/src/state'
+import { Color, resolveColor } from 'termcast/src/colors'
+
 import { useDialog } from 'termcast/src/internal/dialog'
+import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 interface ActionsInterface {
   actions?: ReactNode
@@ -39,7 +40,7 @@ interface LabelProps {
     | string
     | {
         value: string
-        color?: Color | null
+        color?: Color.ColorLike | null
       }
 }
 
@@ -84,7 +85,7 @@ const DetailMetadataLabel = (props: LabelProps): any => {
       <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
         {props.title}:
       </text>
-      <text fg={textColor || Theme.text}>{textValue || '—'}</text>
+      <text fg={resolveColor(textColor) || Theme.text}>{textValue || '—'}</text>
     </box>
   )
 }
@@ -125,7 +126,7 @@ const DetailMetadataTagListItem = (props: TagListItemProps): any => {
 
   return (
     <text
-      fg={props.color || Theme.text}
+      fg={resolveColor(props.color) || Theme.text}
       style={{
         paddingRight: 1,
         paddingLeft: props.icon ? 1 : 0,
@@ -172,10 +173,11 @@ const DetailMetadata: DetailMetadataType = (props) => {
     <box
       style={{
         flexDirection: 'column',
-        paddingTop: 2,
-        paddingLeft: 2,
-        paddingRight: 2,
+        paddingTop: 1,
       }}
+      border={['top']}
+      borderStyle='single'
+      borderColor={Theme.border}
     >
       {props.children}
     </box>
@@ -194,24 +196,6 @@ function DetailFooter({
   hasActions?: boolean
   firstActionTitle?: string
 }): any {
-  const toast = useStore((state) => state.toast)
-
-  if (toast) {
-    return (
-      <box
-        border={false}
-        style={{
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 1,
-          marginTop: 1,
-        }}
-      >
-        {toast}
-      </box>
-    )
-  }
-
   return (
     <box
       border={false}
@@ -285,17 +269,10 @@ const Detail: DetailType = (props) => {
   const dialog = useDialog()
   const inFocus = useIsInFocus()
 
-  const markdownLines = useMemo(() => {
-    if (!props.markdown) return []
-    // TODO: Implement proper markdown parsing
-    return props.markdown.split('\n')
-  }, [props.markdown])
-
   const firstActionTitle = useMemo(() => {
     return actions ? getFirstActionTitle(actions) : undefined
   }, [actions])
 
-  // Handle Ctrl+K and Return to show actions
   useKeyboard((evt) => {
     if (!inFocus) return
 
@@ -307,43 +284,34 @@ const Detail: DetailType = (props) => {
   })
 
   const content = (
-    <box
+    <ScrollBox
+      focused={true}
+      flexGrow={1}
+      flexShrink={1}
       style={{
-        flexDirection: 'row',
-        flexGrow: 1,
-        width: '100%',
+        rootOptions: {
+          backgroundColor: undefined,
+        },
+
       }}
     >
       <box
         style={{
-          flexGrow: 1,
           flexDirection: 'column',
           paddingTop: 2,
-          // paddingLeft: 2,
-          paddingRight: props.metadata ? 1 : 2,
+          paddingRight: 2,
         }}
       >
-        {markdownLines.map((line, index) => (
-          <text key={index} fg={Theme.text}>
-            {line || ' '}
-          </text>
-        ))}
+        {props.markdown && (
+          <code content={props.markdown} conceal filetype="markdown" syntaxStyle={markdownSyntaxStyle} drawUnstyledText={false} />
+        )}
+        {props.metadata}
       </box>
-      {props.metadata && (
-        <box
-          style={{
-            flexShrink: 0,
-            width: 40,
-          }}
-        >
-          {props.metadata}
-        </box>
-      )}
-    </box>
+    </ScrollBox>
   )
 
   return (
-    <box style={{ flexDirection: 'column', height: '100%' }}>
+    <box style={{ flexDirection: 'column', height: '100%', flexGrow: 1 }}>
       {content}
       <DetailFooter
         hasActions={!!actions}

package/src/components/dropdown.tsx

@@ -8,12 +8,17 @@ import React, {
   useContext,
 } from 'react'
 import { useKeyboard } from '@opentui/react'
-import { TextAttributes } from '@opentui/core'
+import {
+  TextAttributes,
+  ScrollBoxRenderable,
+  TextareaRenderable,
+} from '@opentui/core'
 import { Theme } from 'termcast/src/theme'
 import { logger } from 'termcast/src/logger'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { CommonProps } from 'termcast/src/utils'
 import { createDescendants } from 'termcast/src/descendants'
+import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 // SearchBarInterface provides the common search bar props
 interface SearchBarInterface {
@@ -41,6 +46,7 @@ export interface DropdownItemProps extends CommonProps {
 
   keywords?: string[]
   label?: string
+  color?: string
 }
 
 export interface DropdownSectionProps extends CommonProps {
@@ -53,6 +59,7 @@ interface DropdownItemDescendant {
   value: string
   title: string
   hidden?: boolean
+  elementRef?: { y: number; height: number } | null
 }
 
 const {
@@ -70,6 +77,7 @@ interface DropdownContextValue {
   setSelectedIndex?: (index: number) => void
   currentValue?: string
   onChange?: (value: string) => void
+  scrollBoxRef?: React.RefObject<ScrollBoxRenderable | null>
 }
 
 const DropdownContext = createContext<DropdownContextValue>({
@@ -100,15 +108,45 @@ const Dropdown: DropdownType = (props) => {
   } = props
 
   const [selected, setSelected] = useState(0)
-  const [searchText, setSearchText] = useState('')
+  const [searchText, setSearchTextState] = useState('')
   const [currentValue, setCurrentValue] = useState<string | undefined>(
     value || defaultValue,
   )
-  const inputRef = useRef<any>(null)
+  const inputRef = useRef<TextareaRenderable>(null)
   const lastSearchTextRef = useRef('')
   const throttleTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useDropdownDescendants()
 
+  // Update textarea and reset selection - single source of truth is the ref
+  const setSearchText = (text: string) => {
+    inputRef.current?.setText(text)
+    setSearchTextState(text)
+    setSelected(0)
+  }
+
+  const scrollToItem = (item: { props?: DropdownItemDescendant }) => {
+    const scrollBox = scrollBoxRef.current
+    const elementRef = item.props?.elementRef
+    if (!scrollBox || !elementRef) return
+
+    const contentY = scrollBox.content?.y || 0
+    const viewportHeight = scrollBox.viewport?.height || 10
+    const currentScrollTop = scrollBox.scrollTop || 0
+
+    const itemTop = elementRef.y - contentY
+    const itemBottom = itemTop + elementRef.height
+
+    const visibleTop = currentScrollTop
+    const visibleBottom = currentScrollTop + viewportHeight
+
+    if (itemTop < visibleTop) {
+      scrollBox.scrollTo(itemTop)
+    } else if (itemBottom > visibleBottom) {
+      scrollBox.scrollTo(itemBottom - viewportHeight)
+    }
+  }
+
   // Create context value for children
   const contextValue = useMemo<DropdownContextValue>(
     () => ({
@@ -119,6 +157,7 @@ const Dropdown: DropdownType = (props) => {
       setSelectedIndex: setSelected,
       currentValue,
       onChange: (value: string) => selectItem(value),
+      scrollBoxRef,
     }),
     [searchText, filtering, selected, currentValue],
   )
@@ -130,16 +169,13 @@ const Dropdown: DropdownType = (props) => {
     }
   }, [value])
 
-  // Reset selected index when search changes
-  useEffect(() => {
-    setSelected(0)
-  }, [searchText])
-
-  // Handle search text change with throttling
+  // Handle search text change from textarea - called by onContentChange
   const handleSearchTextChange = (text: string) => {
     if (!inFocus) return
 
-    setSearchText(text)
+    // Update state for context and reset selection
+    setSearchTextState(text)
+    setSelected(0)
 
     if (onSearchTextChange) {
       if (throttle) {
@@ -157,15 +193,31 @@ const Dropdown: DropdownType = (props) => {
 
   const move = (direction: -1 | 1) => {
     const items = Object.values(descendantsContext.map.current)
-      .filter((item: any) => item.index !== -1)
+      .filter((item: any) => item.index !== -1 && !item.props?.hidden)
       .sort((a: any, b: any) => a.index - b.index)
 
     if (items.length === 0) return
 
-    let next = selected + direction
-    if (next < 0) next = items.length - 1
-    if (next >= items.length) next = 0
-    setSelected(next)
+    let currentVisibleIndex = items.findIndex(
+      (item) => item.index === selected,
+    )
+    if (currentVisibleIndex === -1) {
+      if (items[0]) {
+        setSelected(items[0].index)
+        scrollToItem(items[0])
+      }
+      return
+    }
+
+    let nextVisibleIndex = currentVisibleIndex + direction
+    if (nextVisibleIndex < 0) nextVisibleIndex = items.length - 1
+    if (nextVisibleIndex >= items.length) nextVisibleIndex = 0
+
+    const nextItem = items[nextVisibleIndex]
+    if (nextItem) {
+      setSelected(nextItem.index)
+      scrollToItem(nextItem)
+    }
   }
 
   const selectItem = (itemValue: string) => {
@@ -220,22 +272,46 @@ const Dropdown: DropdownType = (props) => {
                 <text fg={Theme.textMuted}>esc</text>
               </box>
               <box style={{ paddingTop: 1, paddingBottom: 1 }}>
-                <input
+                <textarea
                   ref={inputRef}
-                  onInput={(value) => handleSearchTextChange(value)}
+                  height={1}
+                  keyBindings={[
+                    { name: 'return', action: 'submit' },
+                    { name: 'linefeed', action: 'submit' },
+                  ]}
+                  onContentChange={() => {
+                    const value = inputRef.current?.plainText || ''
+                    handleSearchTextChange(value)
+                  }}
                   placeholder={placeholder}
                   focused={inFocus}
-                  value={searchText}
+                  initialValue=""
                   focusedBackgroundColor={Theme.backgroundPanel}
                   cursorColor={Theme.primary}
                   focusedTextColor={Theme.textMuted}
                 />
               </box>
             </box>
-            <box style={{ paddingBottom: 1 }}>
+            <ScrollBox
+              ref={scrollBoxRef}
+              focused={false}
+              flexGrow={1}
+              flexShrink={1}
+              style={{
+                rootOptions: {
+                  backgroundColor: undefined,
+                  maxHeight: 10,
+                },
+                scrollbarOptions: {
+
+                  showArrows: false,
+
+                },
+              }}
+            >
               {/* Render children - they will register as descendants and render themselves */}
               {children}
-            </box>
+            </ScrollBox>
           </box>
           <box
             border={false}
@@ -268,13 +344,16 @@ function ItemOption(props: {
   active?: boolean
   current?: boolean
   label?: string
+  color?: string
   onMouseDown?: () => void
   onMouseMove?: () => void
+  elementRef?: React.Ref<any>
 }) {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
     <box
+      ref={props.elementRef}
       style={{
         flexDirection: 'row',
         backgroundColor: props.active
@@ -312,9 +391,11 @@ function ItemOption(props: {
           fg={
             props.active
               ? Theme.background
-              : props.current
-                ? Theme.primary
-                : Theme.text
+              : props.color
+                ? props.color
+                : props.current
+                  ? Theme.primary
+                  : Theme.text
           }
           attributes={props.active ? TextAttributes.BOLD : undefined}
           selectable={false}
@@ -337,6 +418,7 @@ function ItemOption(props: {
 
 const DropdownItem: (props: DropdownItemProps) => any = (props) => {
   const context = useContext(DropdownContext)
+  const elementRef = useRef<{ y: number; height: number } | null>(null)
   if (!context) return null
 
   const { searchText, filtering, currentSection, selectedIndex, currentValue } =
@@ -358,6 +440,7 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
     value: props.value,
     title: props.title,
     hidden: shouldHide,
+    elementRef: elementRef.current,
   })
 
   // Don't render if hidden
@@ -394,8 +477,10 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
       active={isActive}
       current={isCurrent}
       label={props.label}
+      color={props.color}
       onMouseMove={handleMouseMove}
       onMouseDown={handleMouseDown}
+      elementRef={elementRef}
     />
   )
 }

package/src/components/extension-preferences.tsx

@@ -1,7 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import fs from 'node:fs'
 import path from 'node:path'
-import { Form, showToast, Toast, ActionPanel, Action } from 'termcast'
+import { useQuery } from '@tanstack/react-query'
+import { Form } from './form'
+import { showToast, Toast } from '../apis/toast'
+import { ActionPanel, Action } from './actions'
 import { LocalStorage } from 'termcast/src/apis/localstorage'
 import { useNavigation } from 'termcast/src/internal/navigation'
 import { logger } from 'termcast/src/logger'
@@ -37,15 +40,12 @@ export function ExtensionPreferences({
   commandName,
   onSubmit,
 }: ExtensionPreferencesProps): any {
-  const [preferences, setPreferences] = useState<PreferenceManifest[]>([])
-  const [savedValues, setSavedValues] = useState<Record<string, any>>({})
-  const [isLoading, setIsLoading] = useState(true)
   const { pop } = useNavigation()
 
-  useEffect(() => {
-    const loadPreferences = async () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['extension-preferences', extensionName, commandName],
+    queryFn: async () => {
       try {
-        // Get extension package.json to read preference manifest
         const storeDir = getStoreDirectory()
         const extensionDir = path.join(storeDir, extensionName)
         const packageJsonPath = path.join(extensionDir, 'package.json')
@@ -58,11 +58,9 @@ export function ExtensionPreferences({
           fs.readFileSync(packageJsonPath, 'utf-8'),
         )
 
-        // Get preferences based on whether this is for a command or extension
         let prefsToUse: PreferenceManifest[] = []
 
         if (commandName) {
-          // Look for command-specific preferences
           const command = packageJson.commands?.find(
             (cmd) => cmd.name === commandName,
           )
@@ -70,40 +68,38 @@ export function ExtensionPreferences({
             prefsToUse = command.preferences || []
           }
         } else {
-          // Get extension preferences (shared across all commands)
           prefsToUse = packageJson.preferences || []
         }
 
-        // Load saved values from LocalStorage
         const preferencesKey = commandName
           ? `preferences.${extensionName}.${commandName}`
           : `preferences.${extensionName}`
         const saved = await LocalStorage.getItem(preferencesKey)
 
+        let savedValues: Record<string, any> = {}
         if (saved && typeof saved === 'string') {
           try {
-            const parsed = JSON.parse(saved)
-            setSavedValues(parsed)
+            savedValues = JSON.parse(saved)
           } catch (e) {
             logger.error('Failed to parse saved preferences:', e)
           }
         }
 
-        setPreferences(prefsToUse)
+        return { preferences: prefsToUse, savedValues }
       } catch (error) {
         logger.error(`Failed to load preferences for ${extensionName}:`, error)
-        await showToast({
+        showToast({
           style: Toast.Style.Failure,
           title: 'Failed to load preferences',
           message: String(error),
         })
-      } finally {
-        setIsLoading(false)
+        return { preferences: [], savedValues: {} }
       }
-    }
+    },
+  })
 
-    loadPreferences()
-  }, [extensionName])
+  const preferences = data?.preferences ?? []
+  const savedValues = data?.savedValues ?? {}
 
   const handleSubmit = async (values: Record<string, any>) => {
     try {
@@ -235,27 +231,51 @@ export function ExtensionPreferences({
               </Form.Dropdown>
             )
 
-          // TODO: Implement file and directory pickers and appPicker
           case 'file':
+            return (
+              <Form.FilePicker
+                key={pref.name}
+                id={pref.name}
+                title={pref.title}
+                placeholder={pref.placeholder || 'Select a file'}
+                defaultValue={defaultValue ? [defaultValue] : []}
+                info={pref.description}
+                allowMultipleSelection={false}
+                canChooseFiles={true}
+                canChooseDirectories={false}
+                storeValue
+              />
+            )
+
           case 'directory':
+            return (
+              <Form.FilePicker
+                key={pref.name}
+                id={pref.name}
+                title={pref.title}
+                placeholder={pref.placeholder || 'Select a folder'}
+                defaultValue={defaultValue ? [defaultValue] : []}
+                info={pref.description}
+                allowMultipleSelection={false}
+                canChooseFiles={false}
+                canChooseDirectories={true}
+                storeValue
+              />
+            )
+
           case 'appPicker':
             return (
-              <Form.TextField
+              <Form.FilePicker
                 key={pref.name}
                 id={pref.name}
                 title={pref.title}
-                placeholder={
-                  pref.type === 'file'
-                    ? 'Enter file path'
-                    : pref.type === 'directory'
-                      ? 'Enter directory path'
-                      : 'Enter application name'
-                }
-                defaultValue={defaultValue}
-                info={
-                  pref.description ||
-                  `Select a ${pref.type.replace('appPicker', 'application')}`
-                }
+                placeholder={pref.placeholder || 'Select an application'}
+                defaultValue={defaultValue ? [defaultValue] : []}
+                info={pref.description || 'Select an application'}
+                allowMultipleSelection={false}
+                canChooseFiles={true}
+                canChooseDirectories={false}
+                initialDirectory='/Applications'
                 storeValue
               />
             )

package/src/components/form/checkbox.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { TextAttributes } from '@opentui/core'
+import React, { useRef } from 'react'
+import { TextAttributes, BoxRenderable } from '@opentui/core'
 import { useKeyboard } from '@opentui/react'
 import { useFormContext, Controller } from 'react-hook-form'
-import { useFocusContext } from './index'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
 import { logger } from 'termcast/src/logger'
 import { Theme } from 'termcast/src/theme'
@@ -22,6 +22,14 @@ export const Checkbox = (props: CheckboxProps): any => {
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
+  const elementRef = useRef<BoxRenderable>(null)
+
+  // Register as form field descendant for scroll support
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
+
   // Use form navigation hook
   useFormNavigation(props.id)
   const handleToggle = () => {
@@ -48,10 +56,10 @@ export const Checkbox = (props: CheckboxProps): any => {
       defaultValue={props.defaultValue || props.value || false}
       render={({ field, fieldState, formState }) => {
         return (
-          <box flexDirection='column'>
+          <box ref={elementRef} flexDirection='column'>
             <WithLeftBorder withDiamond isFocused={isFocused}>
               <text
-                fg={Theme.text}
+                fg={isFocused ? Theme.primary : Theme.text}
                 onMouseDown={() => {
                   // Always focus the field when clicked
                   if (!isFocused) {