termcast 1.3.50 → 1.3.51

package/src/components/list.tsx

@@ -4,7 +4,7 @@ import {
   TextAttributes,
   TextareaRenderable,
 } from '@opentui/core'
-import { useKeyboard, flushSync, useRenderer } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import React, {
     ReactElement,
     ReactNode,
@@ -21,9 +21,10 @@ import { LoadingBar } from 'termcast/src/components/loading-bar'
 import { LoadingText } from 'termcast/src/components/loading-text'
 import { Spinner } from 'termcast/src/components/spinner'
 import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
-import { Footer } from 'termcast/src/components/footer'
+import { Footer, Hoverable } from 'termcast/src/components/footer'
 import { createDescendants } from 'termcast/src/descendants'
 import { useStore } from 'termcast/src/state'
+import { showToast, Toast } from 'termcast/src/apis/toast'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useNavigationPending } from 'termcast/src/internal/navigation'
@@ -33,8 +34,8 @@ import { ScrollBox } from 'termcast/src/internal/scrollbox'
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getIconEmoji, getIconValue } from 'termcast/src/components/icon'
 import { ActionPanel, matchesShortcut } from 'termcast/src/components/actions'
-import { useTheme, markdownSyntaxStyle } from 'termcast/src/theme'
-import { createMarkdownRenderNode } from 'termcast/src/markdown-utils'
+import { getInteractiveHoverBackground, useTheme } from 'termcast/src/theme'
+import { Markdown } from 'termcast/src/components/markdown'
 import { CommonProps } from 'termcast/src/utils'
 
 export { Color }
@@ -78,20 +79,32 @@ interface ActionsInterface {
 function ListFooter(): any {
   const theme = useTheme()
   const firstActionTitle = useStore((s) => s.firstActionTitle)
+  const dropdownFooterLabel = useStore((s) => s.dropdownFooterLabel)
+  const dropdownTooltip = useStore((s) => s.dropdownTooltip)
   const hasToast = useStore((s) => s.toast !== null)
   const listContext = useContext(ListContext)
   const isShowingDetail = listContext?.isShowingDetail ?? false
   const hasDropdown = listContext?.hasDropdown ?? false
+  const isDropdownOpen = listContext?.isDropdownOpen ?? false
+  const openDropdownIfClosed = () => {
+    if (!isDropdownOpen) {
+      listContext?.openDropdown()
+    }
+  }
 
   const content = hasToast ? null : (
     <box style={{ flexDirection: 'row', gap: 3, flexShrink: 0 }}>
       {firstActionTitle && (
-        <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
+        <Hoverable
+          onMouseDown={() => {
+            useStore.setState({ shouldAutoExecuteFirstAction: true })
+          }}
+        >
           <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             ↵
           </text>
           <text flexShrink={0} fg={theme.textMuted}>{firstActionTitle.toLowerCase()}</text>
-        </box>
+        </Hoverable>
       )}
       <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
         <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
@@ -99,20 +112,26 @@ function ListFooter(): any {
         </text>
         <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
+      <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>
+      </Hoverable>
       {hasDropdown && (
-        <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
+        <Hoverable onMouseDown={openDropdownIfClosed}>
           <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             ^p
           </text>
-          <text flexShrink={0} fg={theme.textMuted}>dropdown</text>
-        </box>
+          <text flexShrink={0} fg={theme.textMuted}>
+            {(dropdownTooltip || dropdownFooterLabel || 'dropdown').toLowerCase()}
+          </text>
+        </Hoverable>
       )}
-      <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
-        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
-          ^k
-        </text>
-        <text flexShrink={0} fg={theme.textMuted}>actions</text>
-      </box>
     </box>
   )
 
@@ -337,6 +356,8 @@ export interface ListProps
   children?: ReactNode
   onSelectionChange?: (id: string | null) => void
   searchBarAccessory?: ReactElement<DropdownProps> | null
+  /** Custom ReactNode rendered on the right edge of the search bar row, after the dropdown if present. */
+  logo?: ReactNode
   searchText?: string
   enableFiltering?: boolean
   searchBarPlaceholder?: string
@@ -752,7 +773,23 @@ function ListItemRow(props: {
   const accessoryTagWidths = listCtx?.accessoryTagWidths
   const isRelaxed = spacingMode === 'relaxed'
   const { title, subtitle, icon, iconColor, accessories, active, ref } = props
+  const hoverBackgroundColor = getInteractiveHoverBackground(theme)
   const [isHovered, setIsHovered] = useState(false)
+  const handleMouseMove = () => {
+    setIsHovered(true)
+    // Select item on hover
+    if (!active && props.index !== undefined && props.index !== -1 && listCtx?.setSelectedIndex) {
+      listCtx.setSelectedIndex(props.index)
+    }
+  }
+
+  const handleMouseDown = () => {
+    props.onMouseDown?.()
+  }
+
+  const handleMouseOut = () => {
+    setIsHovered(false)
+  }
 
   const accessoryElements: ReactNode[] = []
   if (accessories) {
@@ -851,20 +888,16 @@ function ListItemRow(props: {
           backgroundColor: active
             ? theme.primary
             : isHovered
-              ? theme.backgroundPanel
+              ? hoverBackgroundColor
               : undefined,
           paddingLeft: 0,
           paddingRight: 1,
           marginBottom: 1,
         }}
         border={false}
-        onMouseMove={() => {
-          setIsHovered(true)
-        }}
-        onMouseOut={() => {
-          setIsHovered(false)
-        }}
-        onMouseDown={props.onMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseOut={handleMouseOut}
+        onMouseDown={handleMouseDown}
       >
         {/* Line 1: marker + icon + title + accessories */}
         <box style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 1 }}>
@@ -920,20 +953,16 @@ function ListItemRow(props: {
         backgroundColor: active
           ? theme.primary
           : isHovered
-            ? theme.backgroundPanel
+            ? hoverBackgroundColor
             : undefined,
         paddingLeft: 0,
         paddingRight: 1,
         gap: 1,
       }}
       border={false}
-      onMouseMove={() => {
-        setIsHovered(true)
-      }}
-      onMouseOut={() => {
-        setIsHovered(false)
-      }}
-      onMouseDown={props.onMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseOut={handleMouseOut}
+      onMouseDown={handleMouseDown}
     >
       <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }}>
         <box style={{ flexDirection: 'row', flexShrink: 0 }}>
@@ -987,6 +1016,7 @@ export const List: ListType = (props) => {
     isShowingDetail,
     selectedItemId,
     searchBarAccessory,
+    logo,
     spacingMode = 'default',
     accessoryTagsLayout,
     throttle,
@@ -1410,7 +1440,7 @@ export const List: ListType = (props) => {
         <box style={{ flexDirection: 'column', flexGrow: 1 }}>
           {/* Cannot mount focused actions here - would need to be handled differently */}
 
-          {navigationTitle && (
+          {(navigationTitle || (logo && searchBarAccessory)) && (
             <box
               border={false}
               style={{
@@ -1419,12 +1449,25 @@ export const List: ListType = (props) => {
                 paddingLeft: 1,
                 paddingRight: 1,
                 overflow: 'hidden',
+                flexDirection: 'row',
+                alignItems: 'center',
               }}
             >
-              <LoadingBar
-                title={navigationTitle}
-                isLoading={isLoading || navigationPending}
-              />
+              {navigationTitle ? (
+                <box flexGrow={1} flexShrink={1} overflow='hidden'>
+                  <LoadingBar
+                    title={navigationTitle}
+                    isLoading={isLoading || navigationPending}
+                  />
+                </box>
+              ) : (
+                <box flexGrow={1} />
+              )}
+              {logo ? (
+                <box flexShrink={0} paddingLeft={1}>
+                  {logo}
+                </box>
+              ) : null}
             </box>
           )}
 
@@ -1473,6 +1516,11 @@ export const List: ListType = (props) => {
                 />
               </box>
               {searchBarAccessory}
+              {!navigationTitle && !searchBarAccessory && logo ? (
+                <box flexShrink={0} paddingLeft={2}>
+                  {logo}
+                </box>
+              ) : null}
             </box>
           </box>
 
@@ -1649,18 +1697,19 @@ const ListItem: ListItemType = (props) => {
   // Don't render if not visible
   if (!isVisible) return null
 
-  // Handle mouse click on item
+  // Handle mouse click on item — always select and execute first action.
+  // flushSync ensures React commits the new selectedIndex before Zustand
+  // triggers auto-execute, so ActionPanel picks up the clicked item's actions.
   const handleMouseDown = () => {
     if (listContext && index !== -1) {
-      // If clicking on already selected item, show actions (like pressing Enter)
-      if (isActive) {
-        // Show actions dialog via portal
-        if (props.actions) {
-          useStore.setState({ showActionsDialog: true })
-        }
-      } else if (listContext.setSelectedIndex) {
-        // Otherwise just select the item
-        listContext.setSelectedIndex(index)
+      if (!isActive && listContext.setSelectedIndex) {
+        const setIdx = listContext.setSelectedIndex
+        flushSync(() => {
+          setIdx(index)
+        })
+      }
+      if (props.actions) {
+        useStore.setState({ shouldAutoExecuteFirstAction: true })
       }
     }
   }
@@ -1706,17 +1755,7 @@ const ListItem: ListItemType = (props) => {
   )
 }
 
-// Renders markdown with link URL stripping via renderNode for list detail panel.
-function ListMarkdownContent({ markdown }: { markdown: string }): any {
-  const renderer = useRenderer()
-  const renderNode = React.useMemo(() => {
-    return createMarkdownRenderNode(renderer)
-  }, [renderer])
 
-  return (
-    <markdown content={markdown} syntaxStyle={markdownSyntaxStyle} conceal renderNode={renderNode} />
-  )
-}
 
 const ListItemDetail: ListItemDetailType = (props) => {
   const theme = useTheme()
@@ -1747,7 +1786,7 @@ const ListItemDetail: ListItemDetailType = (props) => {
       >
         <box gap={1} style={{ flexDirection: 'column' }}>
           {markdown && markdown.trim().length > 0 && (
-            <ListMarkdownContent markdown={markdown} />
+            <Markdown content={markdown} />
           )}
           {metadata}
         </box>
@@ -1807,6 +1846,7 @@ ListItem.Detail = ListItemDetail
 const ListDropdown: ListDropdownType = (props) => {
   const theme = useTheme()
   const listContext = useContext(ListContext)
+  const hoverBackgroundColor = getInteractiveHoverBackground(theme)
   const [isHovered, setIsHovered] = useState(false)
 
   // If not inside a List, just render nothing (for type safety)
@@ -1815,6 +1855,11 @@ const ListDropdown: ListDropdownType = (props) => {
   }
 
   const { isDropdownOpen, setIsDropdownOpen } = listContext
+
+  const setDropdownSelection = (props: { value: string; title: string }) => {
+    setDropdownState({ value: props.value, title: props.title })
+    useStore.setState({ dropdownFooterLabel: props.title || 'dropdown' })
+  }
   // Store both value and title together
   const [dropdownState, setDropdownState] = useState<{
     value: string
@@ -1827,6 +1872,11 @@ const ListDropdown: ListDropdownType = (props) => {
   const dialog = useDialog()
   const inFocus = useIsInFocus()
 
+  // Store dropdown tooltip in zustand for footer display
+  useLayoutEffect(() => {
+    useStore.setState({ dropdownTooltip: props.tooltip || '' })
+  }, [props.tooltip])
+
   // Update value and find its title
   useLayoutEffect(() => {
     const valueToUse =
@@ -1840,12 +1890,17 @@ const ListDropdown: ListDropdownType = (props) => {
 
       if (items.length > 0) {
         const firstItem = items[0].props as DropdownItemDescendant
-        setDropdownState({ value: firstItem.value, title: firstItem.title })
+        setDropdownSelection({ value: firstItem.value, title: firstItem.title })
         return
       }
     }
 
-    if (!valueToUse) return
+    if (!valueToUse) {
+      useStore.setState({
+        dropdownFooterLabel: dropdownState.title || 'dropdown',
+      })
+      return
+    }
 
     // Try to find the title for this value
     let title = valueToUse
@@ -1859,8 +1914,11 @@ const ListDropdown: ListDropdownType = (props) => {
 
     // Only update if something changed
     if (dropdownState.value !== valueToUse || dropdownState.title !== title) {
-      setDropdownState({ value: valueToUse, title })
+      setDropdownSelection({ value: valueToUse, title })
+      return
     }
+
+    useStore.setState({ dropdownFooterLabel: title || 'dropdown' })
   }, [props.value]) // Run when props.value changes and on mount
 
   const dropdownContextValue = useMemo<DropdownContextValue>(
@@ -1889,7 +1947,7 @@ const ListDropdown: ListDropdownType = (props) => {
                   break
                 }
               }
-              setDropdownState({ value: newValue, title })
+              setDropdownSelection({ value: newValue, title })
               setIsDropdownOpen(false)
               dialog.clear()
               if (props.onChange) {
@@ -1912,6 +1970,11 @@ const ListDropdown: ListDropdownType = (props) => {
 
   // Display the title from our state
   const displayValue = dropdownState.title || 'All'
+  const openDropdownIfClosed = () => {
+    if (!isDropdownOpen) {
+      listContext.openDropdown()
+    }
+  }
 
   return (
     <DropdownDescendantsProvider value={descendantsContext}>
@@ -1926,27 +1989,25 @@ const ListDropdown: ListDropdownType = (props) => {
             // minWidth: value.length + 4,
             flexDirection: 'row',
             flexShrink: 0,
-            backgroundColor: isHovered ? theme.backgroundPanel : undefined,
+            backgroundColor: isHovered ? hoverBackgroundColor : undefined,
           }}
           onMouseMove={() => setIsHovered(true)}
           onMouseOut={() => setIsHovered(false)}
-          onMouseDown={() => {
-            // Open dropdown when clicked
-            if (!isDropdownOpen) {
-              listContext.openDropdown()
-            }
-          }}
+          onMouseDown={openDropdownIfClosed}
         >
           {/*<text >^p </text>*/}
           {listContext.isLoading ? (
-            <LoadingText isLoading color={isHovered ? theme.text : theme.textMuted}>
-              {displayValue || 'Loading...'}
-            </LoadingText>
+            <box onMouseDown={openDropdownIfClosed}>
+              <LoadingText isLoading color={isHovered ? theme.text : theme.textMuted}>
+                {displayValue || 'Loading...'}
+              </LoadingText>
+            </box>
           ) : (
             <text
               flexShrink={0}
               fg={isHovered ? theme.text : theme.textMuted}
               selectable={false}
+              onMouseDown={openDropdownIfClosed}
             >
               {displayValue}
             </text>
@@ -1955,6 +2016,7 @@ const ListDropdown: ListDropdownType = (props) => {
             flexShrink={0}
             fg={isHovered ? theme.text : theme.textMuted}
             selectable={false}
+            onMouseDown={openDropdownIfClosed}
           >
             {' '}
             ▾
@@ -1967,6 +2029,7 @@ const ListDropdown: ListDropdownType = (props) => {
 
 ListDropdown.Item = (props) => {
   const theme = useTheme()
+  const hoverBackgroundColor = getInteractiveHoverBackground(theme)
   const dropdownContext = useContext(DropdownContext)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -2032,7 +2095,7 @@ ListDropdown.Item = (props) => {
           backgroundColor: isActive
             ? theme.primary
             : isHovered
-              ? theme.backgroundPanel
+              ? hoverBackgroundColor
               : undefined,
           paddingLeft: isActive ? 0 : 1,
           paddingRight: 1,

package/src/components/markdown.tsx

@@ -0,0 +1,30 @@
+// Standalone Markdown component for rendering themed markdown in terminal UI.
+// Wraps opentui's <markdown> element with termcast's custom renderNode hook
+// (link URL stripping, borderless tables, OSC 8 hyperlinks) and automatic
+// theme-aware syntax highlighting. Accepts BoxProps so it can be composed
+// with Row, CalendarHeatmap, Graph, etc.
+
+import { useMemo } from 'react'
+import { useRenderer } from '@opentui/react'
+import type { BoxProps } from '@opentui/react'
+import { markdownSyntaxStyle } from 'termcast/src/theme'
+import { createMarkdownRenderNode } from 'termcast/src/markdown-utils'
+
+export interface MarkdownProps extends BoxProps {
+  content: string
+}
+
+function Markdown({ content, children, ...boxProps }: MarkdownProps): any {
+  const renderer = useRenderer()
+  const renderNode = useMemo(() => {
+    return createMarkdownRenderNode(renderer)
+  }, [renderer])
+
+  return (
+    <box {...boxProps}>
+      <markdown content={content} syntaxStyle={markdownSyntaxStyle} conceal renderNode={renderNode} />
+    </box>
+  )
+}
+
+export { Markdown }

package/src/components/metadata.tsx

@@ -13,6 +13,7 @@ import { TextAttributes } from '@opentui/core'
 import { useTheme } from 'termcast/src/theme'
 import { Color, resolveColor } from 'termcast/src/colors'
 import type { ImageLike } from 'termcast/src/components/image'
+import { openInBrowser } from 'termcast/src/action-utils'
 
 interface MetadataConfig {
   /**
@@ -174,8 +175,14 @@ const MetadataLink = (props: LinkProps): any => {
       <text flexShrink={0} fg={theme.textMuted} style={{ minWidth: config.titleMinWidth }}>
         {props.title}:{' '}
       </text>
-      <text fg={theme.accent} attributes={TextAttributes.UNDERLINE}>
-        {props.text}
+      <text
+        fg={theme.accent}
+        attributes={TextAttributes.UNDERLINE}
+        onMouseDown={() => {
+          void openInBrowser(props.target)
+        }}
+      >
+        <a href={props.target}>{props.text}</a>
       </text>
     </box>
   )

package/src/components/progress-bar.tsx

@@ -0,0 +1,112 @@
+/**
+ * ProgressBar component for rendering usage/progress rows in terminal UIs.
+ *
+ * Layout:
+ * - title row
+ * - bar + percentage row (bar grows to fill available width)
+ * - optional muted label row
+ */
+
+import React from 'react'
+import { TextAttributes } from '@opentui/core'
+import type { BoxProps } from '@opentui/react'
+import { useTheme } from 'termcast/src/theme'
+import { Color, resolveColor } from 'termcast/src/colors'
+
+export interface ProgressBarProps extends BoxProps {
+  /** Main title shown above the bar */
+  title: string
+  /** Current progress value */
+  value: number
+  /** Maximum value used to calculate percentage (default: 100) */
+  maxValue?: number
+  /** Optional muted label below the bar */
+  label?: string
+  /** Show percentage text at end of bar row (default: true) */
+  showPercentage?: boolean
+  /** Optional suffix after percentage text (e.g. "used") */
+  percentageSuffix?: string
+  /** Optional color override for filled segment */
+  color?: Color.ColorLike
+  /** Optional color override for track segment */
+  trackColor?: Color.ColorLike
+  /** Optional formatter for percentage value */
+  formatPercentage?: (percentage: number) => string
+  /** Character used for the filled portion of the bar (default: '█') */
+  barCharacter?: string
+  /** Character used for the empty/track portion of the bar (default: '░') */
+  trackCharacter?: string
+}
+
+function clamp({ value, min, max }: { value: number; min: number; max: number }): number {
+  if (value < min) {
+    return min
+  }
+  if (value > max) {
+    return max
+  }
+  return value
+}
+
+function ProgressBar(props: ProgressBarProps): any {
+  const theme = useTheme()
+  const {
+    title,
+    value,
+    maxValue = 100,
+    label,
+    showPercentage = true,
+    percentageSuffix,
+    color,
+    trackColor,
+    formatPercentage,
+    barCharacter = '█',
+    trackCharacter = '░',
+    ...rest
+  } = props
+
+  const safeMaxValue = Number.isFinite(maxValue) && maxValue > 0 ? maxValue : 1
+  const safeValue = Number.isFinite(value) ? value : 0
+  const rawPercentage = (safeValue / safeMaxValue) * 100
+  const clampedPercentage = clamp({ value: rawPercentage, min: 0, max: 100 })
+
+  const filledGrow = clampedPercentage
+  const trackGrow = 100 - clampedPercentage
+
+  const filledColor = resolveColor(color) || theme.accent
+  const resolvedTrackColor = resolveColor(trackColor) || theme.conceal
+
+  const formattedPercentage = formatPercentage
+    ? formatPercentage(clampedPercentage)
+    : `${Math.round(clampedPercentage)}%`
+
+  const percentageText = percentageSuffix
+    ? `${formattedPercentage} ${percentageSuffix}`
+    : formattedPercentage
+
+  return (
+    <box flexDirection="column" width="100%" {...rest}>
+      <text fg={theme.text} attributes={TextAttributes.BOLD}>{title}</text>
+      <box flexDirection="row" alignItems="center" width="100%" gap={1}>
+        <box flexDirection="row" flexGrow={1} overflow="hidden">
+          {filledGrow > 0 && (
+            <box flexGrow={filledGrow} flexBasis={0} flexShrink={1} overflow="hidden">
+              <text fg={filledColor} wrapMode="none">{barCharacter.repeat(300)}</text>
+            </box>
+          )}
+          {trackGrow > 0 && (
+            <box flexGrow={trackGrow} flexBasis={0} flexShrink={1} overflow="hidden">
+              <text fg={resolvedTrackColor} wrapMode="none">{trackCharacter.repeat(300)}</text>
+            </box>
+          )}
+        </box>
+        {showPercentage && (
+          <text fg={theme.text} wrapMode="none" flexShrink={0}>{percentageText}</text>
+        )}
+      </box>
+      {label && <text fg={theme.textMuted}>{label}</text>}
+    </box>
+  )
+}
+
+export { ProgressBar }