@alumbwe/anvil 1.0.0

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

@@ -0,0 +1,523 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,119 @@
+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>
+})