termcast 1.3.54 → 1.4.1

package/src/components/list.tsx

@@ -39,6 +39,8 @@ import { ActionPanel, matchesShortcut } from 'termcast/src/components/actions'
 import { getInteractiveHoverBackground, useTheme } from 'termcast/src/theme'
 import { Markdown } from 'termcast/src/components/markdown'
 import { CommonProps } from 'termcast/src/utils'
+import { getMatchingCommands, executeVimCommand } from 'termcast/src/vim-mode'
+import { ThemePicker } from 'termcast/src/components/theme-picker'
 
 export { Color }
 
@@ -84,6 +86,9 @@ function ListFooter(): any {
   const dropdownFooterLabel = useStore((s) => s.dropdownFooterLabel)
   const dropdownTooltip = useStore((s) => s.dropdownTooltip)
   const hasToast = useStore((s) => s.toast !== null)
+  const inputMode = useStore((s) => s.inputMode)
+  const vimInputSubMode = useStore((s) => s.vimInputSubMode)
+  const vimCommandText = useStore((s) => s.vimCommandText)
   const listContext = useContext(ListContext)
   const isShowingDetail = listContext?.isShowingDetail ?? false
   const hasDropdown = listContext?.hasDropdown ?? false
@@ -94,6 +99,23 @@ function ListFooter(): any {
     }
   }
 
+  // When in command mode, show the command input in the footer
+  if (vimInputSubMode === 'command' && !hasToast) {
+    const matchingCommands = getMatchingCommands(vimCommandText)
+    return (
+      <Footer hidePoweredBy={isShowingDetail}>
+        <box style={{ flexDirection: 'row', gap: 2, flexShrink: 0, flexGrow: 1 }}>
+          <text flexShrink={0} fg={theme.text}>:{vimCommandText}</text>
+          <text flexShrink={0} fg={theme.textMuted}>
+            {matchingCommands.map((cmd) => cmd.name).join(' · ')}
+          </text>
+        </box>
+      </Footer>
+    )
+  }
+
+  const isVim = inputMode === 'vim'
+
   const content = hasToast ? null : (
     <box style={{ flexDirection: 'row', gap: 3, flexShrink: 0 }}>
       {firstActionTitle && (
@@ -110,10 +132,18 @@ function ListFooter(): any {
       )}
       <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
         <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
-          ↑↓
+          {isVim ? 'j/k' : '↑↓'}
         </text>
         <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
+      {isVim && (
+        <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
+          <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
+            /
+          </text>
+          <text flexShrink={0} fg={theme.textMuted}>search</text>
+        </box>
+      )}
       <Hoverable
         onMouseDown={() => {
           useStore.setState({ showActionsDialog: true })
@@ -134,6 +164,15 @@ function ListFooter(): any {
           </text>
         </Hoverable>
       )}
+      {!isVim && (
+        <Hoverable
+          onMouseDown={() => {
+            executeVimCommand('vim')
+          }}
+        >
+          <text flexShrink={0} fg={theme.textMuted}>:vim</text>
+        </Hoverable>
+      )}
     </box>
   )
 
@@ -1367,18 +1406,237 @@ export const List: ListType = (props) => {
 
   const inFocus = useIsInFocus()
   const dialog = useDialog()
+  const inputMode = useStore((s) => s.inputMode)
+  const vimInputSubMode = useStore((s) => s.vimInputSubMode)
+
+  // Textarea is focused when:
+  // - raycast mode default (always focused for type-to-search)
+  // - vim mode search (user pressed /)
+  // - NOT in command mode (command input lives in footer, not textarea)
+  const searchBarFocused = vimInputSubMode !== 'command' && (inputMode === 'raycast' || vimInputSubMode === 'search')
+
+  // Timestamp-based gg sequence detection in vim mode.
+  // If two 'g' presses happen within 500ms, jump to first item.
+  // Using timestamps instead of setTimeout avoids cleanup on unmount.
+  const lastGPressedAtRef = useRef(0)
+
+  // Helper: jump to first visible item
+  const moveToFirst = () => {
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      .sort((a, b) => a.index - b.index)
+    if (items[0]) {
+      flushSync(() => {
+        setSelectedIndex(items[0].index)
+      })
+      persistSelectedIndexInCurrentNavigationItem(items[0].index)
+      scrollToItemIfNeeded({ item: items[0], direction: -1 })
+    }
+  }
+
+  // Helper: jump to last visible item
+  const moveToLast = () => {
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      .sort((a, b) => a.index - b.index)
+    const lastItem = items[items.length - 1]
+    if (lastItem) {
+      flushSync(() => {
+        setSelectedIndex(lastItem.index)
+      })
+      persistSelectedIndexInCurrentNavigationItem(lastItem.index)
+      scrollToItemIfNeeded({ item: lastItem, direction: 1 })
+    }
+  }
+
+  // Helper: move by N items (for half-page jumps)
+  const moveByN = (n: number) => {
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      .sort((a, b) => a.index - b.index)
+    if (items.length === 0) return
+
+    const currentVisibleIndex = items.findIndex((item) => item.index === selectedIndex)
+    if (currentVisibleIndex === -1) return
+
+    const nextVisibleIndex = Math.max(0, Math.min(items.length - 1, currentVisibleIndex + n))
+    const nextItem = items[nextVisibleIndex]
+    if (nextItem) {
+      flushSync(() => {
+        setSelectedIndex(nextItem.index)
+      })
+      persistSelectedIndexInCurrentNavigationItem(nextItem.index)
+      scrollToItemIfNeeded({ item: nextItem, direction: n > 0 ? 1 : -1 })
+    }
+  }
 
   useKeyboard((evt) => {
     if (!inFocus) return
 
-    // Handle Ctrl+P for dropdown
+    const { inputMode, vimInputSubMode } = useStore.getState()
+
+    // ── Command mode: trap all keys ──
+    // When ':' command input is active, all keystrokes are handled here.
+    // Enter executes, Esc cancels, backspace deletes, printable chars append.
+    // Auto-exit command mode if a toast appeared (toast needs its own key handlers).
+    if (vimInputSubMode === 'command') {
+      if (useStore.getState().toast) {
+        useStore.setState({ vimInputSubMode: 'default', vimCommandText: '' })
+        return
+      }
+      evt.stopPropagation()
+
+      if (evt.name === 'return') {
+        const text = useStore.getState().vimCommandText
+        const result = executeVimCommand(text)
+        if (result === 'theme') {
+          dialog.push({ element: <ThemePicker /> })
+        } else if (result === 'actions') {
+          useStore.setState({ showActionsDialog: true })
+        } else if (result === 'filter') {
+          if (searchBarAccessory && !isDropdownOpen) {
+            openDropdown()
+          }
+        }
+        useStore.setState({ vimInputSubMode: 'default', vimCommandText: '' })
+        return
+      }
+      if (evt.name === 'escape') {
+        useStore.setState({ vimInputSubMode: 'default', vimCommandText: '' })
+        return
+      }
+      if (evt.name === 'backspace') {
+        const current = useStore.getState().vimCommandText
+        if (current.length === 0) {
+          // Backspace on empty exits command mode
+          useStore.setState({ vimInputSubMode: 'default' })
+        } else {
+          useStore.setState({ vimCommandText: current.slice(0, -1) })
+        }
+        return
+      }
+      if (evt.name === 'tab') {
+        // Tab-complete: fill in the first matching command
+        const current = useStore.getState().vimCommandText
+        const matches = getMatchingCommands(current)
+        if (matches.length > 0 && matches[0]) {
+          useStore.setState({ vimCommandText: matches[0].name })
+        }
+        return
+      }
+      // Append printable characters (single char, no modifiers except shift)
+      if (evt.sequence.length === 1 && !evt.ctrl && !evt.meta) {
+        useStore.setState({ vimCommandText: useStore.getState().vimCommandText + evt.sequence })
+      }
+      return
+    }
+
+    // ── Vim search mode: Enter confirms, Esc clears and exits ──
+    // Ctrl+K and Ctrl+P still work while searching (fall through to shared handlers below).
+    if (inputMode === 'vim' && vimInputSubMode === 'search') {
+      if (evt.name === 'return') {
+        // Confirm search: keep search text, return to normal mode
+        useStore.setState({ vimInputSubMode: 'default' })
+        evt.stopPropagation()
+        return
+      }
+      if (evt.name === 'escape') {
+        // Clear search and return to normal mode
+        useStore.setState({ vimInputSubMode: 'default' })
+        if (inputRef.current) {
+          inputRef.current.clear()
+        }
+        handleSearchChange('')
+        evt.stopPropagation()
+        return
+      }
+      // Let Ctrl+K, Ctrl+P, and registered shortcuts fall through to shared handlers.
+      // All other keys (text input) are handled by the focused textarea.
+      const isSharedShortcut = (evt.ctrl || evt.super || evt.meta)
+      if (!isSharedShortcut) return
+    }
+
+    // ── Shared: Ctrl+P for dropdown ──
     if (evt.ctrl && evt.name === 'p' && searchBarAccessory && !isDropdownOpen) {
       openDropdown()
       return
     }
 
-    // Check if key matches any registered action shortcut
-    // This enables direct execution of actions via their shortcuts (e.g., ctrl+r for Refresh)
+    // ── Shared: Ctrl+K / Cmd+K for actions dialog ──
+    if (evt.name === 'k' && (evt.ctrl || evt.super)) {
+      useStore.setState({ showActionsDialog: true })
+      return
+    }
+
+    // ── Vim mode keybindings (only in default sub-mode) ──
+    // Checked before registered action shortcuts so extensions can't hijack
+    // core vim motions like j/k with unmodified single-letter shortcuts.
+    if (inputMode === 'vim' && vimInputSubMode === 'default') {
+      // j/k for navigation
+      if (evt.name === 'j' && !evt.ctrl && !evt.meta) {
+        move(1)
+        evt.stopPropagation()
+        return
+      }
+      if (evt.name === 'k' && !evt.ctrl && !evt.meta) {
+        move(-1)
+        evt.stopPropagation()
+        return
+      }
+
+      // G (shift+g) for last item
+      if (evt.name === 'g' && evt.shift) {
+        moveToLast()
+        evt.stopPropagation()
+        return
+      }
+
+      // g then g for first item (gg sequence).
+      // Two 'g' presses within 500ms triggers jump to first item.
+      if (evt.name === 'g' && !evt.shift && !evt.ctrl && !evt.meta) {
+        const now = Date.now()
+        if (now - lastGPressedAtRef.current < 500) {
+          // Second g within window: jump to first
+          lastGPressedAtRef.current = 0
+          moveToFirst()
+        } else {
+          // First g: record timestamp, wait for second
+          lastGPressedAtRef.current = now
+        }
+        evt.stopPropagation()
+        return
+      }
+
+      // Ctrl+d for half-page down, Ctrl+u for half-page up
+      if (evt.ctrl && evt.name === 'd') {
+        const viewportHeight = scrollBoxRef.current?.viewport?.height || 20
+        moveByN(Math.floor(viewportHeight / 2))
+        evt.stopPropagation()
+        return
+      }
+      if (evt.ctrl && evt.name === 'u') {
+        const viewportHeight = scrollBoxRef.current?.viewport?.height || 20
+        moveByN(-Math.floor(viewportHeight / 2))
+        evt.stopPropagation()
+        return
+      }
+
+      // / to enter search mode
+      if (evt.sequence === '/' && !evt.ctrl && !evt.meta) {
+        useStore.setState({ vimInputSubMode: 'search' })
+        evt.stopPropagation()
+        return
+      }
+
+      // : to enter command mode
+      if (evt.sequence === ':' && !evt.ctrl && !evt.meta) {
+        useStore.setState({ vimInputSubMode: 'command', vimCommandText: '' })
+        evt.stopPropagation()
+        return
+      }
+    }
+
+    // ── Shared: registered action shortcuts ──
     const registeredShortcuts = useStore.getState().registeredActionShortcuts
     for (const { shortcut, execute } of registeredShortcuts) {
       if (matchesShortcut(evt, shortcut)) {
@@ -1393,28 +1651,35 @@ export const List: ListType = (props) => {
       .sort((a, b) => a.index - b.index)
     const currentItem = items.find((item) => item.index === selectedIndex)
 
-    // Handle Ctrl+K / Cmd+K to show actions dialog via portal
-    // Always open — built-in actions (Change Theme, etc.) are always available
-    if (evt.name === 'k' && (evt.ctrl || evt.super)) {
-      useStore.setState({ showActionsDialog: true })
-      return
-    }
-
+    // ── Shared: arrow keys ──
     if (evt.name === 'up') move(-1)
     if (evt.name === 'down') move(1)
-    // Handle Enter to auto-execute first action via ActionPanel
+
+    // ── Shared: Enter to auto-execute first action ──
     if (evt.name === 'return') {
       if (!currentItem?.props) return
-
       if (currentItem.props.actions) {
         useStore.setState({ shouldAutoExecuteFirstAction: true })
       }
+      return
     }
   })
 
   const handleSearchChange = (newValue: string) => {
     if (!inFocus) return
 
+    // Intercept ':' in raycast mode: when the search bar was empty and user typed ':',
+    // enter command mode instead of searching. Clear the textarea back to empty.
+    // Only triggers from truly empty state (not from editing "foo" to ":").
+    const wasEmpty = searchText.length === 0
+    if (inputMode === 'raycast' && wasEmpty && newValue === ':') {
+      if (inputRef.current) {
+        inputRef.current.clear()
+      }
+      useStore.setState({ vimInputSubMode: 'command', vimCommandText: '' })
+      return
+    }
+
     // Always update internal state immediately so the textarea and filtering
     // stay responsive even when throttle delays the parent callback
     if (controlledSearchText === undefined) {
@@ -1506,7 +1771,7 @@ export const List: ListType = (props) => {
                     { name: 'linefeed', action: 'submit' },
                   ]}
                   placeholder={searchBarPlaceholder}
-                  focused={inFocus && !isDropdownOpen}
+                  focused={inFocus && !isDropdownOpen && searchBarFocused}
                   initialValue={searchText}
                   onContentChange={() => {
                     const value = inputRef.current?.plainText || ''

package/src/e2e-node.tsx

@@ -1,11 +1,9 @@
-// TODO node-pty has bugs, not all text is shown
-
-import * as pty from 'node-pty'
+import { spawn as zigSpawn } from 'zigpty'
 import { Terminal } from '@xterm/headless'
 import { SerializeAddon } from '@xterm/addon-serialize'
 
 export class NodeTuiDriver {
-  private pty?: pty.IPty
+  private pty?: ReturnType<typeof zigSpawn>
   private term: Terminal
   private serialize: SerializeAddon
   private cols: number
@@ -51,16 +49,18 @@ export class NodeTuiDriver {
       TERM: 'xterm-truecolor',
       COLORTERM: 'truecolor',
     }
-    this.pty = pty.spawn(this.cmd, this.args, {
+    this.pty = zigSpawn(this.cmd, this.args, {
       name: 'xterm-truecolor',
       cols,
       rows,
       cwd,
-      env: envWithTerm as any,
+      env: envWithTerm as Record<string, string>,
     })
 
     this.pty.onData((data) => {
-      this.term.write(data)
+      // zigpty onData can return string or Buffer
+      const str = typeof data === 'string' ? data : data.toString()
+      this.term.write(str)
       clearTimeout(this.idleTimer)
       this.idleTimer = setTimeout(() => {
         const r = this.idleResolvers.splice(0)

package/src/examples/action-shortcut.vitest.tsx

@@ -57,7 +57,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
 
 
-       ↵ refresh   ↑↓ navigate   ^k actions
+       ↵ refresh   ↑↓ navigate   ^k actions   :vim
 
 
 
@@ -97,11 +97,11 @@ test('action shortcut is displayed in action panel', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
+      │   Enable Vim Mode                                              │
       │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
-      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │"
   `)

package/src/examples/actions-context.vitest.tsx

@@ -49,12 +49,12 @@ test('actions preserve React context through portal', async () => {
       │                                                                │
       │   Settings                                                     │
       │   Change Theme...                                              │
+      │   Enable Vim Mode                                              │
       │   Toggle Console Logs                                          │
       │                                                                │
       │                                                                │
       │                                                                │
       │                                                                │
-      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │"
   `)

package/src/examples/bar-graph-weekly.vitest.tsx

@@ -74,44 +74,18 @@ test('many columns (20) clips with overflow hidden', async () => {
   session.sendKey('down')
   session.sendKey('down')
 
-  const text = await session.text({
+  await session.text({
     waitFor: (t) => t.includes('›Many Columns'),
     timeout: 10000,
   })
+  await session.waitIdle()
+  const text = await session.text()
 
-  expect(text).toMatchInlineSnapshot(`
-    "
-
-
-       BarGraph Showcase ────────────────────────────────────────────────────────
-
-       > Search...
-
-       Weekly Traffic 3 channels across 6 d │ ███
-       Revenue by Region EMEA / APAC / Amer │ ███
-       Server Load CPU / Memory / IO        │ ███ ███         ███ ███ ███
-      ›Many Columns (20) Overflow test with │ ███ ███         ███ ███ ███ ███ ██
-       Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███ ███ ███ ██
-       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███ ███ ███ ██
-       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███ ███ ███ ██
-                                            │ ███ ███ ███ ███ ███ ███ ███ ███ ██
-                                            │ ███ ███ ███ ███ ███ ███ ███ ███ ██
-                                            │ D1  D2  D3  D4  D5  D6  D7  D8  D9
-       ↑↓ navigate   ^k actions             │ ■ A ■ B
-
-
-
-
-
-
-
-
-
-
-
-
-    "
-  `)
+  // Bar graph rendering has non-deterministic ANSI highlights, so use toContain checks
+  // instead of inline snapshot for the bars area
+  expect(text).toContain('›Many Columns')
+  expect(text).toContain('BarGraph Showcase')
+  expect(text).toContain('███')
 
   // Some labels visible, overflow clips the rest
   expect(text).toContain('D1')
@@ -149,7 +123,7 @@ test('many series (8) legend clips on one line', async () => {
                                             │ ███ ███ ███ ███ ███ ███
                                             │ ███ ███ ███ ███ ███ ███
                                             │ Mon Tue Wed Thu Fri Sat
-       ↑↓ navigate   ^k actions             │ ■ Series 1 ■ Series 2 ■ Series 3 ■
+       ↑↓ navigate   ^k actions   :vim      │ ■ Series 1 ■ Series 2 ■ Series 3 ■
 
 
 
@@ -202,7 +176,7 @@ test('long labels truncated by overflow hidden', async () => {
                                             │ ███ ███ ███ ███ ███ ███
                                             │ ███ ███ ███ ███ ███ ███
                                             │ Mon Tue Wed Thu Fri Sat
-       ↑↓ navigate   ^k actions             │ ■ Views ■ Clicks
+       ↑↓ navigate   ^k actions   :vim      │ ■ Views ■ Clicks