termcast 1.3.47 → 1.3.49

package/src/components/list.tsx

@@ -132,23 +132,62 @@ function CurrentItemActionsOffscreen(props: {
   const descendantsMap = useListDescendantsRerender()
 
   // Get current item's actions
-  const items = Object.values(descendantsMap)
-    .filter((item) => item.index !== -1)
-    .sort((a, b) => a.index - b.index)
-
-  const currentItem = items.find((item) => item.index === props.selectedIndex)
+  const currentItem = Object.values(descendantsMap)
+    .find((item) => item.index === props.selectedIndex)
   const actions = currentItem?.props?.actions ?? props.fallbackActions ?? null
 
-  // Clear first action title when there are no actions
+  const hasExtensionActions = !!actions
+
+  // Clear firstActionTitle when no extension actions exist, so the footer
+  // doesn't show "↵ change theme..." for built-in actions — Enter should only
+  // auto-execute extension-provided actions, not built-in ones like Change Theme.
+  // This runs after ActionPanel's own layoutEffect which would set it to the
+  // first built-in action title.
   useLayoutEffect(() => {
-    if (!actions) {
+    if (!hasExtensionActions) {
       useStore.setState({ firstActionTitle: '' })
     }
-  }, [actions])
+  })
 
-  if (!actions) return null
+  // Always mount ActionPanel offscreen so built-in actions (Change Theme, etc.)
+  // are available via ctrl+k even when extension provides no actions
+  return <Offscreen>{actions || <ActionPanel />}</Offscreen>
+}
+
+/**
+ * Reads the selected item's detail directly from committed descendants map.
+ * useDescendantsRerender now notifies on every commit (not just structural changes),
+ * so committedMap always has fresh props including detail.
+ */
+function CurrentItemDetail(props: {
+  selectedIndex: number
+  isShowingDetail?: boolean
+}): any {
+  const theme = useTheme()
+  const descendantsMap = useListDescendantsRerender()
 
-  return <Offscreen>{actions}</Offscreen>
+  if (!props.isShowingDetail) return null
+
+  const currentItem = Object.values(descendantsMap)
+    .find((item) => item.index === props.selectedIndex)
+  const detail = currentItem?.props?.detail ?? null
+
+  if (!detail) return null
+
+  return (
+    <box
+      style={{
+        width: '50%',
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+      border={['left']}
+      borderStyle='single'
+      borderColor={theme.border}
+    >
+      {detail}
+    </box>
+  )
 }
 
 interface NavigationChildInterface {
@@ -208,9 +247,11 @@ export type ItemAccessory =
   | {
       tag?:
         | string
+        | null
         | {
             value: string
             color?: Color.ColorLike
+            key?: string
           }
     }
   | {
@@ -302,11 +343,58 @@ export interface ListProps
   selectedItemId?: string
   isShowingDetail?: boolean
   /**
-   * Controls the vertical spacing of list items.
-   * - 'default': Single-line items with title and subtitle on same row
-   * - 'relaxed': Two-line items with title on first row, subtitle below, and padding between items
-   */
+    * Controls the vertical spacing of list items.
+    * - 'default': Single-line items with title and subtitle on same row
+    * - 'relaxed': Two-line items with title on first row, subtitle below, and padding between items
+    */
   spacingMode?: ListSpacingMode
+  /**
+   * Fixed column widths (in terminal characters) for tag accessories,
+   * enabling table-like alignment across all list items.
+   *
+   * Each number in the array defines the display width for the Nth tag
+   * in each item's accessories array. Tags are left-aligned within their
+   * column using `padEnd`. Non-tag accessories (`text`, `date`) are not
+   * affected and render with their natural width.
+   *
+   * **Requirements:**
+   * - All items should have the same number of tag accessories in the
+   *   same order. Use `{ tag: null }` as a placeholder for missing tags
+   *   to preserve column alignment.
+   * - Each width should be at least the length of the longest tag value
+   *   at that position. Tags render as plain text (no brackets added).
+   * - The array length should match the number of tag positions.
+   *
+   * **Example:**
+   * ```tsx
+   * // Widths: comments max "12 comments"=11, status max "In Progress"=11, priority max "P3"=2
+   * <List accessoryTagsLayout={[11, 11, 2]}>
+   *   <List.Item
+   *     title="Fix login bug"
+   *     accessories={[
+   *       { tag: { value: '3 comments', key: 'comments' } },
+   *       { tag: { value: 'Open', color: Color.Green, key: 'status' } },
+   *       { tag: { value: 'P1', color: Color.Red, key: 'priority' } },
+   *       { date: new Date() },
+   *     ]}
+   *   />
+   *   <List.Item
+   *     title="Refactor auth"
+   *     accessories={[
+   *       { tag: { value: '7 comments', key: 'comments' } },
+   *       { tag: { value: 'Closed', color: Color.Purple, key: 'status' } },
+   *       { tag: null },  // placeholder for missing priority column
+   *       { date: new Date() },
+   *     ]}
+   *   />
+   * </List>
+   *
+   * // Renders as:
+   * // Fix login bug     3 comments  Open           P1 1d
+   * // Refactor auth     7 comments  Closed            2w
+   * ```
+   */
+  accessoryTagsLayout?: number[]
 }
 
 interface ListType {
@@ -370,12 +458,12 @@ interface ListContextValue {
   setSelectedIndex?: (index: number) => void
   searchText: string
   isFiltering: boolean
-  setCurrentDetail?: (detail: ReactNode) => void
   isShowingDetail?: boolean
   customEmptyViewRef: React.MutableRefObject<boolean>
   isLoading?: boolean
   hasDropdown?: boolean
   spacingMode: ListSpacingMode
+  accessoryTagWidths?: number[]
 }
 
 const ListContext = createContext<ListContextValue | undefined>(undefined)
@@ -405,6 +493,16 @@ function shouldItemBeVisible(
   return searchableText.includes(needle)
 }
 
+// Get the foreground color for a tag accessory (used in both auto and table modes)
+function getTagColor(tag: ItemAccessory, theme: ReturnType<typeof useTheme>, active: boolean): string | undefined {
+  if (active) return theme.background
+  if ('tag' in tag && tag.tag) {
+    const tagColor = typeof tag.tag === 'object' ? tag.tag?.color : undefined
+    return resolveColor(tagColor) || theme.warning
+  }
+  return undefined
+}
+
 // Create descendants for List items
 interface ListItemDescendant {
   id?: string
@@ -651,12 +749,14 @@ function ListItemRow(props: {
   const theme = useTheme()
   const listCtx = useContext(ListContext)
   const spacingMode = listCtx?.spacingMode ?? 'default'
+  const accessoryTagWidths = listCtx?.accessoryTagWidths
   const isRelaxed = spacingMode === 'relaxed'
   const { title, subtitle, icon, iconColor, accessories, active, ref } = props
   const [isHovered, setIsHovered] = useState(false)
 
   const accessoryElements: ReactNode[] = []
   if (accessories) {
+    let tagIndex = 0
     accessories.forEach((accessory) => {
       if ('text' in accessory && accessory.text) {
         const textValue =
@@ -678,25 +778,35 @@ function ListItemRow(props: {
           )
         }
       }
-      if ('tag' in accessory && accessory.tag) {
+      if ('tag' in accessory) {
+        const colWidth = accessoryTagWidths?.[tagIndex]
         const tagValue =
           typeof accessory.tag === 'string'
             ? accessory.tag
             : accessory.tag?.value
-        const tagColor =
-          typeof accessory.tag === 'object' ? accessory.tag?.color : undefined
         if (tagValue) {
+          const tagColor = getTagColor(accessory, theme, !!active)
+          const displayText = tagValue
+          const padded = colWidth ? displayText.padEnd(colWidth) : displayText
           accessoryElements.push(
             <text
-              key={`tag-${tagValue}`}
+              key={`tag-${tagIndex}`}
               flexShrink={0}
-              fg={active ? theme.background : resolveColor(tagColor) || theme.warning}
+              fg={tagColor}
               wrapMode="none"
             >
-              [{tagValue}]
+              {padded}
+            </text>,
+          )
+        } else if (colWidth) {
+          // Null/empty tag → empty space placeholder to preserve column alignment
+          accessoryElements.push(
+            <text key={`tag-empty-${tagIndex}`} flexShrink={0} wrapMode="none">
+              {' '.repeat(colWidth)}
             </text>,
           )
         }
+        tagIndex++
       }
       if ('date' in accessory && accessory.date) {
         const dateValue =
@@ -722,6 +832,7 @@ function ListItemRow(props: {
         }
       }
     })
+
   }
 
   // Calculate subtitle indentation to align with title start
@@ -877,6 +988,8 @@ export const List: ListType = (props) => {
     selectedItemId,
     searchBarAccessory,
     spacingMode = 'default',
+    accessoryTagsLayout,
+    throttle,
     ...otherProps
   } = props
 
@@ -886,15 +999,29 @@ export const List: ListType = (props) => {
     const currentItem = stack[stack.length - 1]
     return currentItem?.selectedListIndex
   })
-  const [internalSearchText, setInternalSearchText] = useState('')
+  const currentStackSearchText = useStore((state) => {
+    const stack = state.navigationStack
+    const currentItem = stack[stack.length - 1]
+    return currentItem?.searchText
+  })
+  const [internalSearchText, setInternalSearchText] = useState(
+    () => currentStackSearchText ?? '',
+  )
   const [selectedIndex, setSelectedIndex] = useState<number>(() => {
     return currentStackSelectedListIndex ?? 0
   })
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const [currentDetail, setCurrentDetail] = useState<ReactNode>(null)
 
   const inputRef = useRef<TextareaRenderable>(null)
   const customEmptyViewRef = useRef(false)
+  const throttleTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  useEffect(() => {
+    return () => {
+      if (throttleTimeoutRef.current) {
+        clearTimeout(throttleTimeoutRef.current)
+      }
+    }
+  }, [])
 
   // Ref callback that registers the textarea in global state for ESC handling
   const setInputRef = useCallback((node: TextareaRenderable | null) => {
@@ -984,6 +1111,28 @@ export const List: ListType = (props) => {
     })
   }
 
+  // Persist search text in the navigation stack item so it survives push/pop.
+  // Same pattern as persistSelectedIndexInCurrentNavigationItem.
+  const persistSearchTextInCurrentNavigationItem = (text: string) => {
+    useStore.setState((state) => {
+      const stack = state.navigationStack
+      const currentIndex = stack.length - 1
+      const currentItem = stack[currentIndex]
+      if (!currentItem) {
+        return {}
+      }
+      if (currentItem.searchText === text) {
+        return {}
+      }
+      const nextStack = [...stack]
+      nextStack[currentIndex] = {
+        ...currentItem,
+        searchText: text,
+      }
+      return { navigationStack: nextStack }
+    })
+  }
+
   const setSelectedIndexWithPersistence = (index: number) => {
     setSelectedIndex(index)
     persistSelectedIndexInCurrentNavigationItem(index)
@@ -1037,23 +1186,16 @@ export const List: ListType = (props) => {
       setSelectedIndex: setSelectedIndexWithPersistence,
       searchText,
       isFiltering: isFilteringEnabled,
-      setCurrentDetail,
       isShowingDetail,
       customEmptyViewRef,
       isLoading,
       hasDropdown: !!searchBarAccessory,
       spacingMode,
+      accessoryTagWidths: accessoryTagsLayout,
     }),
-    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory, spacingMode],
+    [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory, spacingMode, accessoryTagsLayout],
   )
 
-  // Clear detail when detail view is hidden (before paint to avoid flash)
-  useLayoutEffect(() => {
-    if (!isShowingDetail) {
-      setCurrentDetail(null)
-    }
-  }, [isShowingDetail])
-
   // Handle selectedItemId prop changes (before paint to avoid flash)
   useLayoutEffect(() => {
     // Only update selection if selectedItemId is explicitly provided
@@ -1220,11 +1362,9 @@ export const List: ListType = (props) => {
     const currentItem = items.find((item) => item.index === selectedIndex)
 
     // Handle Ctrl+K to show actions dialog via portal
+    // Always open — built-in actions (Change Theme, etc.) are always available
     if (evt.name === 'k' && evt.ctrl) {
-      const hasActions = currentItem?.props?.actions || props.actions
-      if (hasActions) {
-        useStore.setState({ showActionsDialog: true })
-      }
+      useStore.setState({ showActionsDialog: true })
       return
     }
 
@@ -1243,14 +1383,25 @@ export const List: ListType = (props) => {
   const handleSearchChange = (newValue: string) => {
     if (!inFocus) return
 
-    // Always call onSearchTextChange if provided
-    if (onSearchTextChange) {
-      onSearchTextChange(newValue)
-    }
-
+    // Always update internal state immediately so the textarea and filtering
+    // stay responsive even when throttle delays the parent callback
     if (controlledSearchText === undefined) {
       setInternalSearchText(newValue)
     }
+    persistSearchTextInCurrentNavigationItem(newValue)
+
+    if (onSearchTextChange) {
+      if (throttle) {
+        if (throttleTimeoutRef.current) {
+          clearTimeout(throttleTimeoutRef.current)
+        }
+        throttleTimeoutRef.current = setTimeout(() => {
+          onSearchTextChange(newValue)
+        }, 300)
+      } else {
+        onSearchTextChange(newValue)
+      }
+    }
   }
 
   return (
@@ -1363,21 +1514,10 @@ export const List: ListType = (props) => {
             </box>
 
             {/* Detail panel on the right */}
-            {isShowingDetail && currentDetail && (
-              <box
-                style={{
-                  marginTop: 1,
-                  width: '50%',
-                  paddingLeft: 1,
-                  paddingRight: 1,
-                }}
-                border={['left']}
-                borderStyle='single'
-                borderColor={theme.border}
-              >
-                {currentDetail}
-              </box>
-            )}
+            <CurrentItemDetail
+              selectedIndex={selectedIndex}
+              isShowingDetail={isShowingDetail}
+            />
           </box>
         </box>
       </ListDescendantsProvider>
@@ -1388,28 +1528,14 @@ export const List: ListType = (props) => {
 
 // Wrapper component that only renders children when no visible items exist
 function ShowOnNoItems(props: { children: ReactNode; isCustomEmptyView?: boolean }): any {
-  // Subscribe to re-render when items are added/removed
-  void useListDescendantsRerender()
-  // Get live map ref for reading in useLayoutEffect
-  const map = useListDescendantsMap()
+  const descendantsMap = useListDescendantsRerender()
   const listContext = useContext(ListContext)
-  const [hasVisibleItems, setHasVisibleItems] = useState(true)
-
-  // We must check visibility in useLayoutEffect because:
-  // 1. map.current is cleared by reset() during render, so it's empty if read during render
-  // 2. committedMap is stale - it's a snapshot from the previous render cycle and doesn't
-  //    reflect prop changes like 'visible' (only tracks which items exist, not their props)
-  // 3. Items register in their own useLayoutEffect, so map.current is only populated after
-  //    all items' layout effects have run
-  useLayoutEffect(() => {
-    const items = Object.values(map.current)
-      .filter((item) => item.index !== -1 && item.props?.visible !== false)
-    // For default empty view, also check if custom empty view exists
-    const hasCustomEmptyView = !props.isCustomEmptyView && (listContext?.customEmptyViewRef.current ?? false)
-    setHasVisibleItems(items.length > 0 || hasCustomEmptyView)
-  })
 
-  if (hasVisibleItems) return null
+  const hasVisibleItems = Object.values(descendantsMap)
+    .some((item) => item.index !== -1 && item.props?.visible !== false)
+  const hasCustomEmptyView = !props.isCustomEmptyView && (listContext?.customEmptyViewRef.current ?? false)
+
+  if (hasVisibleItems || hasCustomEmptyView) return null
 
   return props.children
 }
@@ -1520,13 +1646,6 @@ const ListItem: ListItemType = (props) => {
   const selectedIndex = listContext?.selectedIndex ?? 0
   const isActive = index === selectedIndex
 
-  // Update detail when this item becomes active or detail prop changes (before paint)
-  useLayoutEffect(() => {
-    if (isActive && listContext?.isShowingDetail && listContext?.setCurrentDetail) {
-      listContext.setCurrentDetail(props.detail || null)
-    }
-  }, [isActive, props.detail, listContext?.isShowingDetail, listContext?.setCurrentDetail])
-
   // Don't render if not visible
   if (!isVisible) return null
 
@@ -1627,19 +1746,10 @@ const ListItemDetail: ListItemDetailType = (props) => {
         }}
       >
         <box gap={1} style={{ flexDirection: 'column' }}>
-          {markdown && (
+          {markdown && markdown.trim().length > 0 && (
             <ListMarkdownContent markdown={markdown} />
           )}
-          {metadata && (
-            <box
-              style={{ paddingTop: 1 }}
-              // border={['top']}
-              // borderStyle='single'
-              // borderColor={theme.border}
-            >
-              {metadata}
-            </box>
-          )}
+          {metadata}
         </box>
       </ScrollBox>
     </box>
@@ -1665,13 +1775,13 @@ const ListItemDetailMetadata = (props: MetadataProps) => {
   const listDetailMetadataConfig: MetadataConfig = {
     maxValueLen: 20,
     titleMinWidth: computedTitleWidth,
-    paddingBottom: 1, // Use integer to avoid inconsistent rounding
+    paddingBottom: 0,
     separatorWidth: 200, // Will be clipped by overflow: hidden
   }
 
   return (
     <MetadataContext.Provider value={listDetailMetadataConfig}>
-      <box style={{ flexDirection: 'column' }}>
+      <box gap={1} style={{ flexDirection: 'column' }}>
         {props.children}
       </box>
     </MetadataContext.Provider>
@@ -1812,7 +1922,6 @@ const ListDropdown: ListDropdownType = (props) => {
         <box
           key={dropdownState.value}
           style={{
-            paddingTop: 1,
             paddingLeft: 2,
             // minWidth: value.length + 4,
             flexDirection: 'row',
@@ -2069,10 +2178,9 @@ function EmptyViewContent(props: EmptyViewProps): any {
     if (!inFocus) return
 
     // Handle Ctrl+K to show actions dialog via portal
+    // Always open — built-in actions (Change Theme, etc.) are always available
     if (evt.name === 'k' && evt.ctrl) {
-      if (props.actions) {
-        useStore.setState({ showActionsDialog: true })
-      }
+      useStore.setState({ showActionsDialog: true })
       return
     }
 
@@ -2113,8 +2221,8 @@ function EmptyViewContent(props: EmptyViewProps): any {
           {props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
         </text>
       )}
-      {/* Render actions offscreen to capture them */}
-      {props.actions && <Offscreen>{props.actions}</Offscreen>}
+      {/* Always mount ActionPanel offscreen so built-in actions are available */}
+      <Offscreen>{props.actions || <ActionPanel />}</Offscreen>
     </box>
   )
 }

package/src/components/loading-bar.tsx

@@ -79,7 +79,7 @@ export function LoadingBar(props: LoadingBarProps): any {
   const getCharacterColor = (index: number): string => {
     if (!isLoading) {
       // When not loading, use default theme colors
-      return index < title.length ? theme.text : '#626262'
+      return index < title.length ? theme.text : theme.border
     }
 
     // Title text stays static when loading, only animate the bar
@@ -96,8 +96,8 @@ export function LoadingBar(props: LoadingBarProps): any {
       return waveColors[distance]
     }
 
-    // Default muted color for characters outside the wave (xterm 241)
-    return '#626262'
+    // Default muted color for characters outside the wave
+    return theme.border
   }
 
   return (

package/src/components/loading-text.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { colord } from 'colord'
 import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
+import { useTheme } from 'termcast/src/theme'
 
 interface LoadingTextProps {
   children: string
   isLoading?: boolean
-  color: string
+  color?: string
 }
 
 /**
@@ -21,7 +22,8 @@ function generateWaveColors(baseColor: string): string[] {
 }
 
 export function LoadingText(props: LoadingTextProps): any {
-  const { children, isLoading = false, color = '#FFC000' } = props
+  const theme = useTheme()
+  const { children, isLoading = false, color = theme.primary } = props
   const tick = useAnimationTick(isLoading ? TICK_DIVISORS.LOADING_TEXT : 0)
 
   const characters = children.split('')

package/src/components/metadata.tsx

@@ -35,7 +35,7 @@ interface MetadataConfig {
 const defaultConfig: MetadataConfig = {
   maxValueLen: 20,
   titleMinWidth: 12,
-  paddingBottom: 1,
+  paddingBottom: 0,
   separatorWidth: 30,
 }
 
@@ -255,7 +255,7 @@ const Metadata: MetadataType = (props) => {
 
   return (
     <MetadataContext.Provider value={config}>
-      <box style={{ flexDirection: 'column' }}>{props.children}</box>
+      <box gap={1} style={{ flexDirection: 'column' }}>{props.children}</box>
     </MetadataContext.Provider>
   )
 }

package/src/components/row.tsx

@@ -0,0 +1,31 @@
+// Row component - horizontal layout container that distributes space evenly.
+// Wraps each child in a flex-grow box so they split available width equally.
+// Useful for placing multiple graphs or detail panels side by side.
+
+import { BoxProps } from '@opentui/react'
+import React, { ReactNode } from 'react'
+
+export interface RowProps extends BoxProps {
+  /** Gap between children in columns (default: 1) */
+  gap?: number
+
+  children: ReactNode
+}
+
+function Row(props: RowProps): any {
+  const { gap = 1, children, ...rest } = props
+  return (
+    <box flexDirection="row" gap={gap} width="100%" {...rest}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        return (
+          <box flexGrow={1} flexBasis={0} flexShrink={1}>
+            {child}
+          </box>
+        )
+      })}
+    </box>
+  )
+}
+
+export { Row }