@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/chat-input-bar.tsx

@@ -1,523 +0,0 @@
-import {
-  isShallowScanRoot,
-  SHALLOW_SCAN_MAX_DEPTH,
-} from '@anvil/common/project-file-tree'
-import React from 'react'
-
-import { AgentModeToggle } from './agent-mode-toggle'
-import { Button } from './button'
-import { ClickableTitleBox } from './clickable-title-box'
-import { MultipleChoiceForm } from './ask-user'
-import { FeedbackContainer } from './feedback-container'
-import { InputModeBanner } from './input-mode-banner'
-import { MultilineInput, type MultilineInputHandle } from './multiline-input'
-import { OutOfCreditsBanner } from './out-of-credits-banner'
-import { PublishContainer } from './publish-container'
-import { SuggestionMenu, type SuggestionItem } from './suggestion-menu'
-import { useAskUserBridge } from '../hooks/use-ask-user-bridge'
-import { useEvent } from '../hooks/use-event'
-import { tryGetProjectRoot } from '../project-files'
-import { useChatStore } from '../state/chat-store'
-import { shouldInterceptChatInputKey } from '../utils/chat-input-key-intercept'
-import { getInputModeConfig } from '../utils/input-modes'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-import type { useTheme } from '../hooks/use-theme'
-import type { InputValue } from '../types/store'
-import type { AgentMode } from '../utils/constants'
-import type { MouseEvent } from '@opentui/core'
-
-type Theme = ReturnType<typeof useTheme>
-
-interface ChatInputBarProps {
-  // Input state
-  inputValue: string
-  cursorPosition: number
-  setInputValue: (
-    value: InputValue | ((prev: InputValue) => InputValue),
-  ) => void
-  inputFocused: boolean
-  inputRef: React.MutableRefObject<MultilineInputHandle | null>
-  inputPlaceholder: string
-  lastEditDueToNav: boolean
-
-  // Agent mode
-  agentMode: AgentMode
-  toggleAgentMode: () => void
-  setAgentMode: (mode: AgentMode) => void
-
-  // Suggestion menus
-  hasSlashSuggestions: boolean
-  hasMentionSuggestions: boolean
-  hasSuggestionMenu: boolean
-  slashSuggestionItems: SuggestionItem[]
-  agentSuggestionItems: SuggestionItem[]
-  fileSuggestionItems: SuggestionItem[]
-  slashSelectedIndex: number
-  agentSelectedIndex: number
-  onSlashItemClick?: (index: number) => void
-  onMentionItemClick?: (index: number) => void
-
-  // Layout
-  theme: Theme
-  terminalHeight: number
-  separatorWidth: number
-  shouldCenterInputVertically: boolean
-  inputBoxTitle: string | undefined
-  onQueuePreviewClick?: () => void
-  isCompactHeight: boolean
-  isNarrowWidth: boolean
-
-  // Feedback mode
-  feedbackMode: boolean
-  handleExitFeedback: () => void
-
-  // Publish mode
-  publishMode: boolean
-  handleExitPublish: () => void
-  handlePublish: (agentIds: string[]) => Promise<void>
-
-  // Handlers
-  handleSubmit: () => Promise<void>
-  onPaste: (fallbackText?: string) => void
-  onInterruptStream: () => void
-}
-
-export const ChatInputBar = ({
-  inputValue,
-  cursorPosition,
-  setInputValue,
-  inputFocused,
-  inputRef,
-  inputPlaceholder,
-  lastEditDueToNav,
-  agentMode,
-  toggleAgentMode,
-  setAgentMode,
-  hasSlashSuggestions,
-  hasMentionSuggestions,
-  hasSuggestionMenu,
-  slashSuggestionItems,
-  agentSuggestionItems,
-  fileSuggestionItems,
-  slashSelectedIndex,
-  agentSelectedIndex,
-  onSlashItemClick,
-  onMentionItemClick,
-  theme,
-  terminalHeight,
-  separatorWidth,
-  shouldCenterInputVertically,
-  inputBoxTitle,
-  onQueuePreviewClick,
-  isCompactHeight,
-  isNarrowWidth,
-  feedbackMode,
-  handleExitFeedback,
-  publishMode,
-  handleExitPublish,
-  handlePublish,
-  handleSubmit,
-  onPaste,
-  onInterruptStream,
-}: ChatInputBarProps) => {
-  const inputMode = useChatStore((state) => state.inputMode)
-  const setInputMode = useChatStore((state) => state.setInputMode)
-
-  const modeConfig = getInputModeConfig(inputMode)
-  const askUserState = useChatStore((state) => state.askUserState)
-  const hasAnyPreview = hasSuggestionMenu
-
-  // In the home directory (or an ancestor) the file tree is only scanned a few
-  // levels deep, so tell the user why deeper files don't show up.
-  const mentionMenuFooter = isShallowScanRoot(tryGetProjectRoot())
-    ? `Files shown up to ${SHALLOW_SCAN_MAX_DEPTH} levels deep — open a project folder for full results`
-    : undefined
-
-  // Increase menu size on larger screen heights
-  const normalModeMaxVisible = terminalHeight > 35 ? 15 : 10
-  const { submitAnswers, skip } = useAskUserBridge()
-  const [askUserTitle] = React.useState(' Some questions for you ')
-
-  // Shared key intercept handler for suggestion menu navigation and history navigation
-  const handleKeyIntercept = useEvent(
-    (key: {
-      name?: string
-      sequence?: string
-      shift?: boolean
-      ctrl?: boolean
-      meta?: boolean
-      option?: boolean
-    }) => {
-      return shouldInterceptChatInputKey(key, {
-        hasSlashSuggestions,
-        hasMentionSuggestions,
-        lastEditDueToNav,
-        cursorPosition,
-        inputLength: inputValue.length,
-      })
-    },
-  )
-
-  if (feedbackMode) {
-    return (
-      <FeedbackContainer
-        inputRef={inputRef}
-        onExitFeedback={handleExitFeedback}
-        width={separatorWidth}
-      />
-    )
-  }
-
-  if (publishMode) {
-    return (
-      <PublishContainer
-        inputRef={inputRef}
-        onExitPublish={handleExitPublish}
-        onPublish={handlePublish}
-        width={separatorWidth}
-      />
-    )
-  }
-
-  // Out of credits mode: replace entire input with out-of-credits banner
-  if (inputMode === 'outOfCredits') {
-    return <OutOfCreditsBanner />
-  }
-
-  // Subscription limit mode: show only the limit banner (no input box)
-  if (inputMode === 'subscriptionLimit') {
-    return <InputModeBanner />
-  }
-
-  // Handle input changes with special mode entry detection
-  const handleInputChange = (value: InputValue) => {
-    // Detect entering bash mode: user typed exactly '!' when in default mode
-    if (inputMode === 'default' && value.text === '!') {
-      // Enter bash mode and clear input
-      setInputMode('bash')
-      setInputValue({
-        text: '',
-        cursorPosition: 0,
-        lastEditDueToNav: value.lastEditDueToNav,
-      })
-      return
-    }
-
-    // Normal input handling
-    setInputValue(value)
-  }
-
-  const handleFormSubmit = (
-    answers: { question: string; answer: string }[],
-  ) => {
-    if (!askUserState) return
-
-    // Convert accordion-style answers to the format expected by submitAnswers
-    const formattedAnswers = askUserState.questions.map((q, idx) => {
-      const answerObj = answers[idx]
-      if (!answerObj || answerObj.answer === 'Skipped') {
-        return { questionIndex: idx }
-      }
-
-      // For multi-select questions, always use selectedOptions array format
-      if (q.multiSelect) {
-        // Split by ', ' to get individual options (even if just one)
-        const selectedOptions = answerObj.answer.split(', ').filter(Boolean)
-
-        // Check if all selected options match known options (not "other" text)
-        const allMatchKnownOptions = selectedOptions.every((selected) =>
-          q.options.some((opt) => {
-            const label = typeof opt === 'string' ? opt : opt.label
-            return label === selected
-          }),
-        )
-
-        if (allMatchKnownOptions && selectedOptions.length > 0) {
-          return {
-            questionIndex: idx,
-            selectedOptions,
-          }
-        }
-
-        // Otherwise it's an "other" text answer for multi-select
-        return {
-          questionIndex: idx,
-          otherText: answerObj.answer,
-        }
-      }
-
-      // For single-select questions, check if the answer matches one of the options
-      const matchingOptionIndex = q.options.findIndex((opt) => {
-        const label = typeof opt === 'string' ? opt : opt.label
-        return label === answerObj.answer
-      })
-
-      if (matchingOptionIndex >= 0) {
-        return {
-          questionIndex: idx,
-          selectedOption: answerObj.answer,
-        }
-      }
-
-      // Otherwise it's an "other" text answer
-      return {
-        questionIndex: idx,
-        otherText: answerObj.answer,
-      }
-    })
-
-    submitAnswers(formattedAnswers)
-  }
-
-  const handleFormSkip = () => {
-    if (!askUserState) return
-    skip()
-    onInterruptStream()
-  }
-
-  const effectivePlaceholder =
-    inputMode === 'default' ? inputPlaceholder : modeConfig.placeholder
-  const borderColor = theme[modeConfig.color]
-
-  if (askUserState) {
-    return (
-      <box
-        title={askUserTitle}
-        titleAlignment="center"
-        style={{
-          width: '100%',
-          borderStyle: 'single',
-          borderColor: theme.primary,
-          customBorderChars: BORDER_CHARS,
-        }}
-      >
-        <MultipleChoiceForm
-          questions={askUserState.questions}
-          onSubmit={handleFormSubmit}
-          onSkip={handleFormSkip}
-        />
-      </box>
-    )
-  }
-
-  // Compact mode: no border, minimal chrome, supports menus and multiline
-  if (isCompactHeight) {
-    const compactMaxHeight = Math.floor(terminalHeight / 2)
-    return (
-      <>
-        {hasSlashSuggestions ? (
-          <SuggestionMenu
-            items={slashSuggestionItems}
-            selectedIndex={slashSelectedIndex}
-            maxVisible={5}
-            prefix="/"
-            onItemClick={onSlashItemClick}
-          />
-        ) : null}
-        {hasMentionSuggestions ? (
-          <SuggestionMenu
-            items={[...agentSuggestionItems, ...fileSuggestionItems]}
-            selectedIndex={agentSelectedIndex}
-            maxVisible={5}
-            prefix="@"
-            onItemClick={onMentionItemClick}
-            footer={mentionMenuFooter}
-          />
-        ) : null}
-        {inputBoxTitle && onQueuePreviewClick && (
-          <Button
-            onClick={(event) => {
-              if ((event as MouseEvent | undefined)?.button === 0) {
-                onQueuePreviewClick()
-              }
-            }}
-            style={{
-              width: '100%',
-              height: 1,
-              paddingLeft: 1,
-              paddingRight: 1,
-              backgroundColor: theme.surface,
-              overflow: 'hidden',
-            }}
-          >
-            <text style={{ fg: theme.muted, wrapMode: 'none' }}>
-              {inputBoxTitle.trim()}
-            </text>
-          </Button>
-        )}
-        <box
-          style={{
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-            width: '100%',
-            paddingLeft: 1,
-            paddingRight: 1,
-            backgroundColor: theme.surface,
-          }}
-        >
-          {modeConfig.label && (
-            <box style={{ flexShrink: 0, paddingRight: 1 }}>
-              <text>
-                <span
-                  bg={theme.info}
-                  fg={theme.background}
-                >{` ${modeConfig.label} `}</span>
-              </text>
-            </box>
-          )}
-          {modeConfig.icon && (
-            <box
-              style={{
-                flexShrink: 0,
-                paddingRight: 1,
-              }}
-            >
-              <text style={{ fg: theme[modeConfig.color] }}>
-                {modeConfig.icon}
-              </text>
-            </box>
-          )}
-          {/* In default modes the compact box has no border or label, so it can
-              read as a passive status line. A prompt arrow signals that it's
-              a focusable input — costs no extra height. */}
-          {!modeConfig.label && !modeConfig.icon && (
-            <box style={{ flexShrink: 0 }}>
-              <text style={{ fg: theme.primary }}>❯</text>
-            </box>
-          )}
-          <MultilineInput
-            value={inputValue}
-            onChange={handleInputChange}
-            onSubmit={handleSubmit}
-            onPaste={onPaste}
-            onKeyIntercept={handleKeyIntercept}
-            placeholder={effectivePlaceholder}
-            focused={inputFocused && !feedbackMode}
-            maxHeight={compactMaxHeight}
-            ref={inputRef}
-            cursorPosition={cursorPosition}
-          />
-        </box>
-        <InputModeBanner />
-      </>
-    )
-  }
-
-  return (
-    <>
-      <ClickableTitleBox
-        title={inputBoxTitle}
-        titleAlignment="center"
-        onTitleClick={onQueuePreviewClick}
-        style={{
-          width: '100%',
-          borderStyle: 'single',
-          borderColor,
-          customBorderChars: BORDER_CHARS,
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 0,
-          paddingBottom: 0,
-          flexDirection: 'column',
-          gap: hasAnyPreview ? 1 : 0,
-        }}
-      >
-        {hasSlashSuggestions ? (
-          <SuggestionMenu
-            items={slashSuggestionItems}
-            selectedIndex={slashSelectedIndex}
-            maxVisible={normalModeMaxVisible}
-            prefix="/"
-            onItemClick={onSlashItemClick}
-          />
-        ) : null}
-        {hasMentionSuggestions ? (
-          <SuggestionMenu
-            items={[...agentSuggestionItems, ...fileSuggestionItems]}
-            selectedIndex={agentSelectedIndex}
-            maxVisible={normalModeMaxVisible}
-            prefix="@"
-            onItemClick={onMentionItemClick}
-            footer={mentionMenuFooter}
-          />
-        ) : null}
-        <box
-          style={{
-            flexDirection: 'column',
-            justifyContent: shouldCenterInputVertically
-              ? 'center'
-              : 'flex-start',
-            minHeight: shouldCenterInputVertically ? 3 : undefined,
-            gap: 0,
-          }}
-        >
-          <box
-            style={{
-              flexDirection: 'row',
-              alignItems: shouldCenterInputVertically ? 'center' : 'flex-start',
-              width: '100%',
-            }}
-          >
-            {modeConfig.label && (
-              <box style={{ flexShrink: 0, paddingRight: 1 }}>
-                <text>
-                  <span
-                    bg={theme.info}
-                    fg={theme.background}
-                  >{` ${modeConfig.label} `}</span>
-                </text>
-              </box>
-            )}
-            {modeConfig.icon && (
-              <box
-                style={{
-                  flexShrink: 0,
-                  paddingRight: 1,
-                }}
-              >
-                <text style={{ fg: theme[modeConfig.color] }}>
-                  {modeConfig.icon}
-                </text>
-              </box>
-            )}
-            {!modeConfig.label && !modeConfig.icon && (
-              <box style={{ flexShrink: 0, paddingRight: 1 }}>
-                <text style={{ fg: theme.primary }}>❯</text>
-              </box>
-            )}
-            <box style={{ flexGrow: 1, minWidth: 0 }}>
-              <MultilineInput
-                value={inputValue}
-                onChange={handleInputChange}
-                onSubmit={handleSubmit}
-                onPaste={onPaste}
-                onKeyIntercept={handleKeyIntercept}
-                placeholder={effectivePlaceholder}
-                focused={inputFocused && !feedbackMode}
-                maxHeight={Math.floor(terminalHeight / 2)}
-                ref={inputRef}
-                cursorPosition={cursorPosition}
-              />
-            </box>
-            {modeConfig.showAgentModeToggle && !isNarrowWidth && (
-              <box
-                style={{
-                  flexShrink: 0,
-                  paddingLeft: 2,
-                }}
-              >
-                <AgentModeToggle
-                  mode={agentMode}
-                  onToggle={toggleAgentMode}
-                  onSelectMode={setAgentMode}
-                />
-              </box>
-            )}
-          </box>
-        </box>
-      </ClickableTitleBox>
-      <InputModeBanner />
-    </>
-  )
-}

package/src/components/clickable-title-box.tsx

@@ -1,66 +0,0 @@
-import React, { memo, useRef } from 'react'
-
-import type { BoxRenderable, MouseEvent } from '@opentui/core'
-import type { ReactNode } from 'react'
-
-interface ClickableTitleBoxProps {
-  title?: string
-  onTitleClick?: () => void
-  style?: Record<string, unknown>
-  children?: ReactNode
-  [key: string]: unknown
-}
-
-/** A normal OpenTUI box whose top-border title behaves like a button. */
-export const ClickableTitleBox = memo(function ClickableTitleBox({
-  title,
-  onTitleClick,
-  style,
-  children,
-  ...rest
-}: ClickableTitleBoxProps) {
-  const boxRef = useRef<BoxRenderable | null>(null)
-  const titlePressedRef = useRef(false)
-
-  const isTitleHit = (event: MouseEvent) => {
-    const box = boxRef.current
-    return Boolean(
-      title &&
-      onTitleClick &&
-      box &&
-      event.button === 0 &&
-      event.target === box &&
-      event.y === box.screenY,
-    )
-  }
-
-  const handleMouseDown = (event: MouseEvent) => {
-    titlePressedRef.current = isTitleHit(event)
-    if (titlePressedRef.current) event.stopPropagation()
-  }
-
-  const handleMouseUp = (event: MouseEvent) => {
-    const clicked = titlePressedRef.current && isTitleHit(event)
-    titlePressedRef.current = false
-    if (!clicked) return
-
-    event.stopPropagation()
-    onTitleClick?.()
-  }
-
-  return (
-    <box
-      {...rest}
-      ref={boxRef}
-      title={title}
-      style={style}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseOut={() => {
-        titlePressedRef.current = false
-      }}
-    >
-      {children}
-    </box>
-  )
-})

package/src/components/clickable.tsx

@@ -1,119 +0,0 @@
-import React, { cloneElement, isValidElement, memo } from 'react'
-
-import type { ReactElement, ReactNode } from 'react'
-
-/**
- * Makes all text content within a React node tree non-selectable.
- *
- * This is important for interactive elements (buttons, clickable boxes) because
- * text inside them should not be selectable when the user clicks - it creates
- * a poor UX where text gets highlighted during interactions.
- *
- * Handles both `<text>` and `<span>` OpenTUI elements by adding `selectable={false}`.
- *
- * @example
- * ```tsx
- * // Use this when building custom interactive components
- * const processedChildren = makeTextUnselectable(children)
- * return <box onMouseDown={handleClick}>{processedChildren}</box>
- * ```
- */
-export function makeTextUnselectable(node: ReactNode): ReactNode {
-  if (node === null || node === undefined || typeof node === 'boolean') return node
-  if (typeof node === 'string' || typeof node === 'number') return node
-
-  if (Array.isArray(node)) {
-    return node.map((child, idx) => <React.Fragment key={idx}>{makeTextUnselectable(child)}</React.Fragment>)
-  }
-
-  if (!isValidElement(node)) return node
-
-  const el = node as ReactElement<{ children?: ReactNode; [key: string]: unknown }>
-  const type = el.type
-
-  // Ensure text and span nodes are not selectable
-  if (typeof type === 'string' && (type === 'text' || type === 'span')) {
-    const nextProps = { ...el.props, selectable: false }
-    const nextChildren = el.props.children ? makeTextUnselectable(el.props.children) : el.props.children
-    return cloneElement(el, nextProps, nextChildren)
-  }
-
-  // Recurse into other host elements and components' children
-  const nextChildren = el.props.children ? makeTextUnselectable(el.props.children) : el.props.children
-  return cloneElement(el, el.props, nextChildren)
-}
-
-interface ClickableProps {
-  /** Element type to render: 'box' (default) or 'text' */
-  as?: 'box' | 'text'
-  onMouseDown?: (e?: unknown) => void
-  onMouseUp?: (e?: unknown) => void
-  onMouseOver?: () => void
-  onMouseOut?: () => void
-  style?: Record<string, unknown>
-  children?: ReactNode
-  // pass-through for host element props
-  [key: string]: unknown
-}
-
-/**
- * A wrapper component for any interactive/clickable area in the CLI.
- *
- * **Why use this instead of raw `<box>` or `<text>` with mouse handlers?**
- *
- * This component automatically makes all text content non-selectable, which is
- * essential for good UX - users shouldn't accidentally select text when clicking
- * interactive elements.
- *
- * **The `as` prop:**
- * - `as="box"` (default) - Renders a `<box>` element for layout containers
- * - `as="text"` - Renders a `<text>` element for inline clickable text
- *
- * **When to use `Clickable` vs `Button`:**
- * - Use `Button` for actual button-like interactions (has click-on-mouseup logic)
- * - Use `Clickable` for simpler interactive areas where you need direct mouse event control
- *
- * @example
- * ```tsx
- * // Default: renders <box>
- * <Clickable onMouseDown={handleClick}>
- *   <text>Click me</text>
- * </Clickable>
- *
- * // For inline text: renders <text>
- * <Clickable as="text" onMouseDown={handleCopy}>
- *   <span>⎘ copy</span>
- * </Clickable>
- * ```
- */
-export const Clickable = memo(function Clickable({
-  as = 'box',
-  onMouseDown,
-  onMouseUp,
-  onMouseOver,
-  onMouseOut,
-  style,
-  children,
-  ...rest
-}: ClickableProps) {
-  const sharedProps = {
-    ...rest,
-    style,
-    onMouseDown,
-    onMouseUp,
-    onMouseOver,
-    onMouseOut,
-  }
-
-  if (as === 'text') {
-    return (
-      <text {...sharedProps} selectable={false}>
-        {children}
-      </text>
-    )
-  }
-
-  // Default: box with processed children
-  const processedChildren = makeTextUnselectable(children)
-  return <box {...sharedProps}>{processedChildren}</box>
-})