@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/button.tsx

@@ -1,66 +0,0 @@
-import { memo, useRef } from 'react'
-
-import { makeTextUnselectable } from './clickable'
-
-import type { ReactNode } from 'react'
-
-interface ButtonProps {
-  onClick?: (e?: unknown) => void | Promise<unknown>
-  onMouseOver?: () => void
-  onMouseOut?: () => void
-  style?: Record<string, unknown>
-  children?: ReactNode
-  // pass-through for box host props
-  [key: string]: unknown
-}
-
-/**
- * A button component with proper click detection and non-selectable text.
- *
- * Key behavior:
- * - All nested `<text>`/`<span>` children are made `selectable={false}` via `makeTextUnselectable`
- * - Uses mouseDown/mouseUp tracking so hover or stray mouse events don't trigger clicks
- *
- * When to use:
- * - Use `Button` for standard button-like interactions (primary choice for clickable controls)
- * - Use {@link Clickable} when you need direct control over mouse events but still want
- *   non-selectable text for an interactive region.
- */
-export const Button = memo(function Button({ onClick, onMouseOver, onMouseOut, style, children, ...rest }: ButtonProps) {
-  const processedChildren = makeTextUnselectable(children)
-
-  // Track whether mouse down occurred on this element to implement proper click detection
-  // This prevents hover from triggering clicks in some terminals
-  const mouseDownRef = useRef(false)
-
-  const handleMouseDown = () => {
-    mouseDownRef.current = true
-  }
-
-  const handleMouseUp = (e?: unknown) => {
-    // Only trigger click if mouse down happened on this element
-    if (mouseDownRef.current && onClick) {
-      onClick(e)
-    }
-    mouseDownRef.current = false
-  }
-
-  const handleMouseOut = () => {
-    // Reset mouse down state when leaving the element
-    mouseDownRef.current = false
-    onMouseOut?.()
-  }
-
-  return (
-    <box
-      {...rest}
-      style={style}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseOver={onMouseOver}
-      onMouseOut={handleMouseOut}
-    >
-      {processedChildren}
-    </box>
-  )
-})

package/src/components/chat-header.tsx

@@ -1,77 +0,0 @@
-import { memo, useState } from 'react'
-
-import { useLogo } from '../hooks/use-logo'
-import { useSheenAnimation } from '../hooks/use-sheen-animation'
-import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
-import { useTheme } from '../hooks/use-theme'
-import { IS_FREEBUFF } from '../utils/constants'
-import { openFileAtPath } from '../utils/open-file'
-import { formatCwd } from '../utils/path-helpers'
-import { getLogoAccentColor, getLogoBlockColor } from '../utils/theme-system'
-import { TerminalLink } from './terminal-link'
-
-export const ChatHeader = memo(function ChatHeader({
-  projectRoot,
-  animationEnabled,
-}: {
-  projectRoot: string
-  animationEnabled: boolean
-}) {
-  const { contentMaxWidth, terminalWidth } = useTerminalDimensions()
-  const theme = useTheme()
-  const [sheenPosition, setSheenPosition] = useState(0)
-  const blockColor = getLogoBlockColor(theme.name)
-  const accentColor = getLogoAccentColor(theme.name)
-
-  const { applySheenToChar } = useSheenAnimation({
-    enabled: animationEnabled,
-    logoColor: theme.foreground,
-    accentColor,
-    blockColor,
-    terminalWidth,
-    sheenPosition,
-    setSheenPosition,
-  })
-
-  const { component: logoComponent } = useLogo({
-    availableWidth: contentMaxWidth,
-    accentColor,
-    blockColor,
-    applySheenToChar,
-  })
-
-  return (
-    <box
-      style={{
-        flexDirection: 'column',
-        gap: 0,
-        paddingLeft: 1,
-        paddingRight: 1,
-      }}
-    >
-      <box
-        style={{
-          flexDirection: 'column',
-          marginBottom: 1,
-          marginTop: 2,
-        }}
-      >
-        {logoComponent}
-      </box>
-      <text style={{ wrapMode: 'word', marginBottom: 1, fg: theme.foreground }}>
-        {IS_FREEBUFF ? 'Freebuff' : 'Anvil'} will run commands on your behalf
-        to help you build.
-      </text>
-      <text style={{ wrapMode: 'word', marginBottom: 1, fg: theme.foreground }}>
-        Directory{' '}
-        <TerminalLink
-          text={formatCwd(projectRoot)}
-          color={theme.muted}
-          inline={true}
-          underlineOnHover={true}
-          onActivate={() => openFileAtPath(projectRoot)}
-        />
-      </text>
-    </box>
-  )
-})

package/src/components/chat-history-screen.tsx

@@ -1,413 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { Button } from './button'
-import { MultilineInput } from './multiline-input'
-import { SelectableList } from './selectable-list'
-import { useSearchableList } from '../hooks/use-searchable-list'
-import { useTerminalLayout } from '../hooks/use-terminal-layout'
-import { useTheme } from '../hooks/use-theme'
-import {
-  deleteChatSession,
-  formatRelativeTime,
-  getAllChats,
-} from '../utils/chat-history'
-import { isPlainEnterKey } from '../utils/terminal-enter-detection'
-
-import type { SelectableListItem } from './selectable-list'
-
-const LAYOUT = {
-  CONTENT_PADDING: 4,
-  COMPACT_MODE_THRESHOLD: 20, // Hide header when terminal height is below this
-  NARROW_WIDTH_THRESHOLD: 70, // Hide buttons when terminal width is below this
-  MAIN_CONTENT_PADDING: 2,
-  INITIAL_CHATS: 25, // Load this many immediately for fast display
-  BACKGROUND_CHATS: 475, // Load this many more in the background for search
-  MAX_RENDERED_CHATS: 100, // Only render this many in the list
-  TIME_COL_WIDTH: 12, // e.g., "2 hours ago"
-  MSGS_COL_WIDTH: 8, // e.g., "99 msgs"
-  DELETE_COL_WIDTH: 6, // e.g., "[×]" + marginRight
-  GAP_WIDTH: 3, // gap between columns
-} as const
-
-interface ChatHistoryScreenProps {
-  onSelectChat: (chatId: string) => void
-  onCancel: () => void
-  onNewChat: () => void
-}
-
-export const ChatHistoryScreen: React.FC<ChatHistoryScreenProps> = ({
-  onSelectChat,
-  onCancel,
-  onNewChat,
-}) => {
-  const theme = useTheme()
-  const { terminalWidth, terminalHeight } = useTerminalLayout()
-
-  // Layout calculations - use full width
-  const contentWidth = terminalWidth - LAYOUT.CONTENT_PADDING
-
-  // Two-phase loading: load initial chats immediately, then more in background
-  const [chats, setChats] = useState(() => getAllChats(LAYOUT.INITIAL_CHATS))
-  const [statusMessage, setStatusMessage] = useState<string | null>(null)
-
-  // Load more chats in the background after initial render
-  useEffect(() => {
-    // Use setTimeout to defer the expensive loading to after first paint
-    const timer = setTimeout(() => {
-      setChats(getAllChats(LAYOUT.INITIAL_CHATS + LAYOUT.BACKGROUND_CHATS))
-    }, 0)
-    return () => clearTimeout(timer)
-  }, [])
-
-  const handleDeleteChat = useCallback((chatId: string) => {
-    const deleted = deleteChatSession(chatId)
-    if (deleted) {
-      setChats((prev) => prev.filter((chat) => chat.chatId !== chatId))
-      setStatusMessage('Chat deleted')
-      return
-    }
-
-    setStatusMessage('Could not delete chat')
-  }, [])
-
-  // Calculate available width for the prompt text (last column, variable width)
-  // Format: "[time]   [msgs]   [prompt...] [×]"
-  // reservedWidth accounts for: time col, msgs col, delete button area,
-  // 2 gaps between columns, list border (2), scrollbar (1), and button padding (2)
-  const reservedWidth =
-    LAYOUT.TIME_COL_WIDTH +
-    LAYOUT.MSGS_COL_WIDTH +
-    LAYOUT.DELETE_COL_WIDTH +
-    LAYOUT.GAP_WIDTH * 2 +
-    5 // border + scrollbar + button padding
-  const maxPromptWidth = Math.max(20, contentWidth - reservedWidth)
-
-  // Truncate text to fit single line
-  const truncateText = (text: string, maxLen: number): string => {
-    const singleLine = text.replace(/\n/g, ' ').trim()
-    if (singleLine.length <= maxLen) return singleLine
-    return singleLine.slice(0, maxLen - 1) + '…'
-  }
-
-  // Pad text to fixed width (right-pad with spaces)
-  const padRight = (text: string, width: number): string => {
-    // Use Array.from to count code points so emoji/wide chars don't break padding
-    const len = Array.from(text).length
-    if (len >= width) return text
-    return text + ' '.repeat(width - len)
-  }
-
-  // Convert chats to SelectableListItem format with aligned columns
-  // Order: time | message count | prompt
-  const chatItems: SelectableListItem[] = useMemo(
-    () =>
-      chats.map((chat) => {
-        const time = padRight(
-          formatRelativeTime(chat.timestamp),
-          LAYOUT.TIME_COL_WIDTH,
-        )
-        const msgs = padRight(
-          chat.unreadable ? '—' : `${chat.messageCount} msgs`,
-          LAYOUT.MSGS_COL_WIDTH,
-        )
-        const prompt = padRight(
-          truncateText(chat.lastPrompt, maxPromptWidth),
-          maxPromptWidth,
-        )
-
-        return {
-          id: chat.chatId,
-          // Combine all columns into label for correct display order: time | msgs | prompt
-          // The full prompt is kept in secondary for search filtering
-          label: `${time}${' '.repeat(LAYOUT.GAP_WIDTH)}${msgs}${' '.repeat(LAYOUT.GAP_WIDTH)}${prompt}`,
-          icon: undefined,
-          secondary: chat.lastPrompt, // Keep original prompt for search
-          hideSecondary: true, // Don't display secondary, only use for filtering
-        }
-      }),
-    [chats, maxPromptWidth],
-  )
-
-  // Custom filter function that searches the original prompt (stored in secondary)
-  const filterByPrompt = useCallback(
-    (item: SelectableListItem, query: string) =>
-      (item.secondary ?? '').toLowerCase().includes(query.toLowerCase()),
-    [],
-  )
-
-  // Search filtering and focus management
-  const {
-    searchQuery,
-    setSearchQuery,
-    focusedIndex,
-    setFocusedIndex,
-    filteredItems,
-    handleFocusChange,
-  } = useSearchableList({
-    items: chatItems,
-    filterFn: filterByPrompt,
-  })
-
-  const isCompactMode = terminalHeight < LAYOUT.COMPACT_MODE_THRESHOLD
-  const isNarrowWidth = terminalWidth < LAYOUT.NARROW_WIDTH_THRESHOLD
-
-  // No need to calculate listHeight - let flexbox handle it naturally
-
-  // Unreadable chats (corrupt chat-messages.json) can be deleted but not resumed
-  const unreadableChatIds = useMemo(
-    () => new Set(chats.filter((chat) => chat.unreadable).map((c) => c.chatId)),
-    [chats],
-  )
-
-  // Handle chat selection
-  const selectChat = useCallback(
-    (chatId: string) => {
-      if (unreadableChatIds.has(chatId)) {
-        setStatusMessage("Chat file is corrupted and can't be opened")
-        return
-      }
-      onSelectChat(chatId)
-    },
-    [onSelectChat, unreadableChatIds],
-  )
-
-  const handleChatSelect = useCallback(
-    (item: SelectableListItem) => {
-      selectChat(item.id)
-    },
-    [selectChat],
-  )
-
-  const handleChatDelete = useCallback(
-    (item: SelectableListItem) => {
-      handleDeleteChat(item.id)
-    },
-    [handleDeleteChat],
-  )
-
-  // Handle keyboard input
-  const handleKeyIntercept = useCallback(
-    (key: {
-      name?: string
-      sequence?: string
-      shift?: boolean
-      ctrl?: boolean
-      meta?: boolean
-      option?: boolean
-    }) => {
-      if (key.name === 'escape') {
-        if (searchQuery.length > 0) {
-          setSearchQuery('')
-        } else {
-          onCancel()
-        }
-        return true
-      }
-      if (key.name === 'up') {
-        setFocusedIndex((prev) => Math.max(0, prev - 1))
-        return true
-      }
-      if (key.name === 'down') {
-        const maxIndex =
-          Math.min(filteredItems.length, LAYOUT.MAX_RENDERED_CHATS) - 1
-        setFocusedIndex((prev) => Math.min(maxIndex, prev + 1))
-        return true
-      }
-      if (isPlainEnterKey(key)) {
-        const focused = filteredItems[focusedIndex]
-        if (focused) {
-          selectChat(focused.id)
-        }
-        return true
-      }
-      if (key.name === 'c' && key.ctrl) {
-        onCancel()
-        return true
-      }
-      return false
-    },
-    [
-      searchQuery,
-      setSearchQuery,
-      setFocusedIndex,
-      filteredItems,
-      focusedIndex,
-      selectChat,
-      onCancel,
-    ],
-  )
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        height: '100%',
-        backgroundColor: theme.surface,
-        padding: 0,
-        flexDirection: 'column',
-      }}
-    >
-      {/* Main content area */}
-      <box
-        style={{
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          width: '100%',
-          paddingLeft: 2,
-          paddingRight: 2,
-          paddingTop: isCompactMode ? 0 : 1,
-          paddingBottom: 0,
-          gap: 0,
-          flexGrow: 1,
-          flexShrink: 1,
-        }}
-      >
-        {/* Title */}
-        {!isCompactMode && (
-          <box
-            style={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              marginBottom: 1,
-              marginTop: 1,
-              flexShrink: 0,
-            }}
-          >
-            <text
-              style={{ fg: theme.foreground, attributes: TextAttributes.BOLD }}
-            >
-              Select a chat to resume
-            </text>
-          </box>
-        )}
-
-        {/* Search input */}
-        <box
-          style={{
-            width: contentWidth,
-            flexShrink: 0,
-            marginBottom: 0,
-          }}
-        >
-          <MultilineInput
-            value={searchQuery}
-            onChange={({ text }) => setSearchQuery(text)}
-            onSubmit={() => {}}
-            onPaste={() => {}}
-            onKeyIntercept={handleKeyIntercept}
-            placeholder="Search chats..."
-            focused={true}
-            maxHeight={1}
-            minHeight={1}
-            cursorPosition={searchQuery.length}
-          />
-        </box>
-
-        {/* Chat list - grows to fill remaining space */}
-        <box
-          style={{
-            flexDirection: 'column',
-            width: contentWidth,
-            borderStyle: 'single',
-            borderColor: theme.muted,
-            flexGrow: 1,
-            flexShrink: 1,
-            overflow: 'hidden',
-          }}
-          border={['top', 'bottom', 'left', 'right']}
-        >
-          <SelectableList
-            items={filteredItems.slice(0, LAYOUT.MAX_RENDERED_CHATS)}
-            focusedIndex={focusedIndex}
-            onSelect={handleChatSelect}
-            actionLabel="[×]"
-            onAction={handleChatDelete}
-            onFocusChange={handleFocusChange}
-            emptyMessage={
-              chats.length === 0
-                ? 'No chat history yet'
-                : searchQuery
-                  ? 'No matching chats'
-                  : 'No chats found'
-            }
-          />
-        </box>
-      </box>
-
-      {/* Bottom bar */}
-      <box
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          paddingTop: 0,
-          paddingBottom: 0,
-          borderStyle: 'single',
-          borderColor: theme.border,
-          flexShrink: 0,
-          backgroundColor: theme.surface,
-        }}
-        border={['top']}
-      >
-        <box
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: contentWidth,
-          }}
-        >
-          {/* Help text */}
-          <box style={{ flexGrow: 1, flexShrink: 1 }}>
-            <text style={{ fg: theme.muted }}>
-              ↑↓ navigate · Enter select · Click [×] to remove · Esc cancel
-            </text>
-            {statusMessage && (
-              <text style={{ fg: theme.muted }}>
-                {' · '}
-                {statusMessage}
-              </text>
-            )}
-          </box>
-
-          {/* Buttons - hidden on narrow screens */}
-          {!isNarrowWidth && (
-            <box style={{ flexDirection: 'row', gap: 1 }}>
-              <Button
-                onClick={onNewChat}
-                style={{
-                  paddingLeft: 2,
-                  paddingRight: 2,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                  borderStyle: 'single',
-                  borderColor: theme.primary,
-                }}
-                border={['top', 'bottom', 'left', 'right']}
-              >
-                <text style={{ fg: theme.primary }}>New Chat</text>
-              </Button>
-              <Button
-                onClick={onCancel}
-                style={{
-                  paddingLeft: 2,
-                  paddingRight: 2,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                  borderStyle: 'single',
-                  borderColor: theme.muted,
-                }}
-                border={['top', 'bottom', 'left', 'right']}
-              >
-                <text style={{ fg: theme.muted }}>Cancel</text>
-              </Button>
-            </box>
-          )}
-        </box>
-      </box>
-    </box>
-  )
-}