@alumbwe/anvil 1.0.19 → 1.0.20

package/src/components/feedback-input-mode.tsx

@@ -0,0 +1,344 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useRef, useState } from 'react'
+
+import { Button } from './button'
+import { MultilineInput, type MultilineInputHandle } from './multiline-input'
+import { Separator } from './separator'
+import { useTheme } from '../hooks/use-theme'
+import { useChatStore } from '../state/chat-store'
+import { IS_ANVIL } from '../utils/constants'
+import { createTextPasteHandler } from '../utils/strings'
+import { isPlainEnterKey } from '../utils/terminal-enter-detection'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+import type { FeedbackCategory } from '@anvil/common/constants/feedback'
+
+type CategoryHighlightKey = 'success' | 'error' | 'warning' | 'info'
+
+type CategoryOption = {
+  id: FeedbackCategory
+  label: string
+  shortLabel: string
+  highlightKey: CategoryHighlightKey
+  placeholder: string
+}
+
+const CATEGORY_OPTIONS = [
+  {
+    id: 'good_result',
+    label: 'Good result',
+    shortLabel: 'Good',
+    highlightKey: 'success',
+    placeholder:
+      'What did you like? (e.g., "Fast and accurate", "Great explanation")',
+  },
+  {
+    id: 'bad_result',
+    label: 'Bad result',
+    shortLabel: 'Bad',
+    highlightKey: 'error',
+    placeholder:
+      'What went wrong? (e.g., "Incorrect changes", "Missed the requirement")',
+  },
+  {
+    id: 'app_bug',
+    label: 'App bug',
+    shortLabel: 'Bug',
+    highlightKey: 'warning',
+    placeholder: IS_ANVIL
+      ? 'Report a problem with Anvil (crashes, errors, UI issues, etc.)'
+      : 'Report a problem with Anvil (crashes, errors, UI issues, etc.)',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+    shortLabel: 'Other',
+    highlightKey: 'info',
+    placeholder: 'Tell us more (what happened, what you expected)...',
+  },
+] as const satisfies readonly CategoryOption[]
+
+// Compile-time exhaustiveness: ensures every FeedbackCategory has a CATEGORY_OPTIONS entry.
+// If a new category is added to FEEDBACK_CATEGORIES, TypeScript will error here until
+// a corresponding entry is added to CATEGORY_OPTIONS above.
+type CoveredCategories = (typeof CATEGORY_OPTIONS)[number]['id']
+type _AssertAllCategoriesCovered = [FeedbackCategory] extends [CoveredCategories] ? true : never
+const _exhaustiveCheck: _AssertAllCategoriesCovered = true
+void _exhaustiveCheck
+
+const FEEDBACK_CONTAINER_HORIZONTAL_INSET = 4 // border + padding on each side
+const CATEGORY_BUTTON_EXTRA_WIDTH = 6 // indicator + padding + border
+const CATEGORY_BUTTON_GAP_WIDTH = 1
+
+const calculateCategoryRowWidth = (labels: readonly string[]): number =>
+  labels.reduce((total, label, idx) => {
+    const buttonWidth = label.length + CATEGORY_BUTTON_EXTRA_WIDTH
+    const gapWidth = idx === 0 ? 0 : CATEGORY_BUTTON_GAP_WIDTH
+    return total + buttonWidth + gapWidth
+  }, 0)
+
+const FULL_CATEGORY_ROW_WIDTH = calculateCategoryRowWidth(
+  CATEGORY_OPTIONS.map((opt) => opt.label),
+)
+
+interface FeedbackTextSectionProps {
+  value: string
+  cursor: number
+  onChange: (text: string) => void
+  onCursorChange: (cursor: number) => void
+  onSubmit: () => void
+  placeholder: string
+  inputRef?: React.MutableRefObject<MultilineInputHandle | null>
+  width: number
+  isSubmitting?: boolean
+}
+
+const FeedbackTextSection: React.FC<FeedbackTextSectionProps> = ({
+  value,
+  cursor,
+  onChange,
+  onCursorChange,
+  onSubmit,
+  placeholder,
+  inputRef,
+  width,
+  isSubmitting = false,
+}) => {
+  const inputFocused = useChatStore((state) => state.inputFocused)
+
+  return (
+    <>
+      {/* Top separator */}
+      <Separator width={width} widthOffset={4} />
+
+      {/* Feedback input */}
+      <box style={{ paddingTop: 0, paddingBottom: 0 }}>
+        <MultilineInput
+          value={value}
+          onChange={({ text, cursorPosition }) => {
+            onChange(text)
+            onCursorChange(cursorPosition)
+          }}
+          onSubmit={onSubmit}
+          onKeyIntercept={(key) => {
+            if (!isPlainEnterKey(key)) return false
+            // Just add newline on Enter
+            const newText = value.slice(0, cursor) + '\n' + value.slice(cursor)
+            onChange(newText)
+            onCursorChange(cursor + 1)
+            return true
+          }}
+          onPaste={createTextPasteHandler(value, cursor, ({ text, cursorPosition }) => {
+            onChange(text)
+            onCursorChange(cursorPosition)
+          })}
+          placeholder={placeholder}
+          focused={inputFocused && !isSubmitting}
+          maxHeight={5}
+          minHeight={3}
+          ref={inputRef}
+          cursorPosition={cursor}
+        />
+      </box>
+
+      {/* Bottom separator */}
+      <Separator width={width} widthOffset={4} />
+    </>
+  )
+}
+
+interface FeedbackInputModeProps {
+  value: string
+  cursor: number
+  feedbackCategory: FeedbackCategory
+  onChange: (text: string) => void
+  onCursorChange: (cursor: number) => void
+  onCategoryChange: (category: FeedbackCategory) => void
+  onSubmit: () => void
+  onCancel: () => void
+  inputRef?: React.MutableRefObject<any>
+  width: number
+  footerMessage?: string | null
+  isSubmitting?: boolean
+}
+
+export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
+  value,
+  cursor,
+  feedbackCategory,
+  onChange,
+  onCursorChange,
+  onCategoryChange,
+  onSubmit,
+  onCancel,
+  inputRef: externalInputRef,
+  width,
+  footerMessage,
+  isSubmitting = false,
+}) => {
+  const theme = useTheme()
+  const internalInputRef = useRef<MultilineInputHandle | null>(null)
+  const inputRef = externalInputRef || internalInputRef
+  const canSubmit = value.trim().length > 0 && !isSubmitting
+  const [closeButtonHovered, setCloseButtonHovered] = useState(false)
+  const availableWidth = Math.max(
+    0,
+    width - FEEDBACK_CONTAINER_HORIZONTAL_INSET,
+  )
+  const shouldUseShortLabels = FULL_CATEGORY_ROW_WIDTH > availableWidth
+
+  // Keyboard shortcuts are handled by useChatKeyboard in chat.tsx
+
+  return (
+    <box
+      border
+      borderStyle="single"
+      borderColor={theme.primary}
+      customBorderChars={BORDER_CHARS}
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
+      }}
+    >
+      {/* Header: helper text + close X */}
+      <box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginTop: 1,
+        }}
+      >
+        <text style={{ wrapMode: 'none', marginLeft: 1, marginRight: 1 }}>
+          <span fg={theme.secondary}>
+            Share your feedback — thanks for helping us improve!
+          </span>
+        </text>
+        <box
+          style={{ paddingRight: 1 }}
+          onMouseDown={onCancel}
+          onMouseOver={() => setCloseButtonHovered(true)}
+          onMouseOut={() => setCloseButtonHovered(false)}
+        >
+          <text style={{ wrapMode: 'none' }} selectable={false}>
+            <span fg={closeButtonHovered ? theme.foreground : theme.secondary}>
+              [x]
+            </span>
+          </text>
+        </box>
+      </box>
+
+      {/* Category buttons */}
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: 1,
+          paddingTop: 0,
+          paddingBottom: 0,
+        }}
+      >
+        {CATEGORY_OPTIONS.map((option) => {
+          const optionHighlight = theme[option.highlightKey]
+          const isSelected = feedbackCategory === option.id
+          const label = shouldUseShortLabels ? option.shortLabel : option.label
+          return (
+            <Button
+              key={option.id}
+              onClick={() => onCategoryChange(option.id)}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 1,
+                paddingLeft: 1,
+                paddingRight: 1,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderStyle: 'single',
+                borderColor: isSelected ? optionHighlight : theme.border,
+                customBorderChars: BORDER_CHARS,
+                backgroundColor: 'transparent',
+              }}
+            >
+              <text style={{ wrapMode: 'none' }}>
+                <span fg={isSelected ? optionHighlight : theme.muted}>
+                  {isSelected ? '◉' : '◯'}
+                </span>
+                <span fg={isSelected ? theme.foreground : theme.secondary}>
+                  {' '}
+                  {label}
+                </span>
+              </text>
+            </Button>
+          )
+        })}
+      </box>
+
+      {/* Feedback text section with separators */}
+      <FeedbackTextSection
+        value={value}
+        cursor={cursor}
+        onChange={isSubmitting ? () => {} : onChange}
+        onCursorChange={isSubmitting ? () => {} : onCursorChange}
+        onSubmit={onSubmit}
+        placeholder={
+          isSubmitting
+            ? 'Sending feedback...'
+            : CATEGORY_OPTIONS.find((opt) => opt.id === feedbackCategory)
+                ?.placeholder ||
+              'Tell us more (what happened, what you expected)...'
+        }
+        inputRef={inputRef}
+        width={width}
+        isSubmitting={isSubmitting}
+      />
+
+      {/* Footer with auto-attached info and submit button */}
+      <box
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingTop: 0,
+          paddingBottom: 0,
+          gap: 2,
+        }}
+      >
+        <text style={{ wrapMode: 'none' }}>
+          <span fg={theme.muted}>
+            {footerMessage || 'Session details are auto-attached'}
+          </span>
+        </text>
+        <Button
+          onClick={() => {
+            if (canSubmit) onSubmit()
+          }}
+          style={{
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            borderStyle: 'single',
+            borderColor: canSubmit ? theme.foreground : theme.border,
+            customBorderChars: BORDER_CHARS,
+            backgroundColor: 'transparent',
+          }}
+        >
+          <text
+            style={{ wrapMode: 'none' }}
+            attributes={
+              canSubmit ? undefined : TextAttributes.DIM | TextAttributes.ITALIC
+            }
+          >
+            <span fg={canSubmit ? theme.foreground : theme.muted}>
+              {isSubmitting ? 'SENDING...' : 'SUBMIT'}
+            </span>
+          </text>
+        </Button>
+      </box>
+    </box>
+  )
+}

package/src/components/file-attachment-card.tsx

@@ -0,0 +1,98 @@
+import { AttachmentCard } from './attachment-card'
+import { useTheme } from '../hooks/use-theme'
+
+import type { FileAttachment } from '../types/chat'
+import type { PendingFileAttachment } from '../types/store'
+
+const FILE_CARD_WIDTH = 20
+const MAX_FILENAME_LENGTH = 16
+
+const FILE_ICON_LINES = [
+  '   ┌───╮',
+  '   │ ≡ │',
+  '   └───╯',
+]
+
+const FOLDER_ICON_LINES = [
+  '  ╭──╮   ',
+  '  │  ╰──╮',
+  '  ╰─────╯',
+]
+
+const truncateFilename = (filename: string): string => {
+  if (filename.length <= MAX_FILENAME_LENGTH) return filename
+  // Find extension — ignore leading dot (dotfiles like .gitignore)
+  const lastDot = filename.lastIndexOf('.')
+  const hasExtension = lastDot > 0
+  const ext = hasExtension ? filename.slice(lastDot) : ''
+  const baseName = hasExtension ? filename.slice(0, lastDot) : filename
+  const maxBaseLength = MAX_FILENAME_LENGTH - ext.length - 1 // -1 for ellipsis
+  if (maxBaseLength <= 0) return filename.slice(0, MAX_FILENAME_LENGTH - 1) + '…'
+  return baseName.slice(0, maxBaseLength) + '…' + ext
+}
+
+interface FileAttachmentCardProps {
+  attachment: PendingFileAttachment | FileAttachment
+  onRemove?: () => void
+  showRemoveButton?: boolean
+}
+
+export const FileAttachmentCard = ({
+  attachment,
+  onRemove,
+  showRemoveButton = true,
+}: FileAttachmentCardProps) => {
+  const theme = useTheme()
+  const iconLines = attachment.isDirectory ? FOLDER_ICON_LINES : FILE_ICON_LINES
+  const truncatedName = truncateFilename(attachment.filename)
+  const status = 'status' in attachment ? attachment.status : undefined
+
+  return (
+    <AttachmentCard
+      width={FILE_CARD_WIDTH}
+      onRemove={onRemove}
+      showRemoveButton={showRemoveButton}
+    >
+      {/* ASCII art icon area */}
+      <box
+        style={{
+          height: 3,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <text style={{ fg: theme.info }}>
+          {iconLines.join('\n')}
+        </text>
+      </box>
+
+      {/* Filename and note */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'column',
+        }}
+      >
+        <text
+          style={{
+            fg: theme.foreground,
+            wrapMode: 'none',
+          }}
+        >
+          {truncatedName}
+        </text>
+        {(status === 'processing' || attachment.note) && (
+          <text
+            style={{
+              fg: status === 'error' ? theme.error : theme.muted,
+              wrapMode: 'none',
+            }}
+          >
+            {status === 'processing' ? 'reading…' : attachment.note}
+          </text>
+        )}
+      </box>
+    </AttachmentCard>
+  )
+}

package/src/components/grid-layout.tsx

@@ -0,0 +1,80 @@
+import React, { memo, type ReactNode } from 'react'
+
+import { useGridLayout } from '../hooks/use-grid-layout'
+import { MIN_COLUMN_WIDTH } from '../utils/layout-helpers'
+
+export interface GridLayoutProps<T> {
+  items: T[]
+  availableWidth: number
+  getItemKey: (item: T) => string
+  renderItem: (item: T, index: number, columnWidth: number) => ReactNode
+  footer?: ReactNode
+  marginTop?: number
+}
+
+function GridLayoutInner<T>({
+  items,
+  availableWidth,
+  getItemKey,
+  renderItem,
+  footer,
+  marginTop = 0,
+}: GridLayoutProps<T>): ReactNode {
+  const { columns, columnWidth, columnGroups } = useGridLayout(items, availableWidth)
+
+  if (items.length === 0) return null
+
+  // Unified structure for both single and multi-column layouts
+  // Using a consistent DOM structure prevents reconciliation issues during resize transitions
+  const isMultiColumn = columns > 1
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: isMultiColumn ? 1 : 0,
+        width: '100%',
+        marginTop,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: isMultiColumn ? 1 : 0,
+          width: '100%',
+          alignItems: 'flex-start',
+        }}
+      >
+        {columnGroups.map((columnItems, colIdx) => {
+          const columnKey = columnItems[0]
+            ? getItemKey(columnItems[0])
+            : `col-${colIdx}`
+          return (
+            <box
+              key={columnKey}
+              style={{
+                flexDirection: 'column',
+                gap: 0,
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 0,
+                // Use MIN_COLUMN_WIDTH instead of 0 to prevent columns from collapsing
+                // to zero during resize transitions (prevents 2→1 column transition bug)
+                minWidth: MIN_COLUMN_WIDTH,
+              }}
+            >
+              {columnItems.map((item, idx) => (
+                <box key={getItemKey(item)} style={{ width: '100%' }}>
+                  {renderItem(item, idx, columnWidth)}
+                </box>
+              ))}
+            </box>
+          )
+        })}
+      </box>
+      {footer}
+    </box>
+  )
+}
+
+export const GridLayout = memo(GridLayoutInner) as typeof GridLayoutInner

package/src/components/help-banner.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+
+import { BottomBanner } from './bottom-banner'
+import { useSubscriptionQuery } from '../hooks/use-subscription-query'
+import { useTheme } from '../hooks/use-theme'
+import { IS_ANVIL } from '../utils/constants'
+import { useChatStore } from '../state/chat-store'
+
+const HELP_TIMEOUT = 60 * 1000 // 60 seconds
+
+/** Section header component for consistent styling */
+const SectionHeader = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme()
+  return <text style={{ fg: theme.muted }}>{children}</text>
+}
+
+/** Keyboard shortcut item */
+const Shortcut = ({
+  keys,
+  action,
+}: {
+  keys: string
+  action: string
+}) => {
+  const theme = useTheme()
+  return (
+    <box style={{ flexDirection: 'row', gap: 1 }}>
+      <text style={{ fg: theme.foreground }}>{keys}</text>
+      <text style={{ fg: theme.muted }}>{action}</text>
+    </box>
+  )
+}
+
+/** Help banner showing keyboard shortcuts and tips in an organized layout. */
+export const HelpBanner = () => {
+  const setInputMode = useChatStore((state) => state.setInputMode)
+  const theme = useTheme()
+  const { data: subscriptionData } = useSubscriptionQuery()
+  const hasSubscription = subscriptionData?.hasSubscription ?? false
+
+  // Auto-hide after timeout
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setInputMode('default')
+    }, HELP_TIMEOUT)
+    return () => clearTimeout(timer)
+  }, [setInputMode])
+
+  return (
+    <BottomBanner
+      borderColorKey="info"
+      onClose={() => setInputMode('default')}
+    >
+      <box style={{ flexDirection: 'column', gap: 1, flexGrow: 1 }}>
+        {/* Shortcuts Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Shortcuts</SectionHeader>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 2, paddingLeft: 2 }}>
+            <Shortcut keys="Ctrl+C / Esc" action="stop" />
+            <Shortcut keys="Ctrl+J / Opt+Enter" action="newline" />
+            <Shortcut keys="↑↓" action="history" />
+            <Shortcut keys="Ctrl+T" action="collapse/expand agents" />
+            <Shortcut keys="Ctrl+Q" action="edit queued messages" />
+          </box>
+        </box>
+
+        {/* Features Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Features</SectionHeader>
+          <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 2, paddingLeft: 2 }}>
+            <Shortcut keys="/" action="commands" />
+            <Shortcut keys="@files" action="mention" />
+            <Shortcut keys="@agents" action="use agent" />
+            <Shortcut keys="!bash" action="run command" />
+          </box>
+        </box>
+
+        {/* Tips Section */}
+        <box style={{ flexDirection: 'column', gap: 0 }}>
+          <SectionHeader>Tips</SectionHeader>
+          <box style={{ flexDirection: 'column', paddingLeft: 2 }}>
+            {IS_ANVIL && (
+              <text style={{ fg: theme.muted }}>
+                Try workflow: /interview → /plan → implement → /review
+              </text>
+            )}
+            <text style={{ fg: theme.muted }}>
+              Use @ to reference agents to spawn or files to read
+            </text>
+            <text style={{ fg: theme.muted }}>
+              Drag to select text — it copies automatically (or click ⎘ on a
+              message)
+            </text>
+            <text style={{ fg: theme.muted }}>
+              Esc to cancel the current response
+            </text>
+          </box>
+        </box>
+
+        {/* Credits Section — hidden in Anvil */}
+        {!IS_ANVIL && (
+          <box style={{ flexDirection: 'column', gap: 0 }}>
+            <SectionHeader>Credits</SectionHeader>
+            <box style={{ flexDirection: 'column', paddingLeft: 2 }}>
+              <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1 }}>
+                <text style={{ fg: theme.foreground }}>1 credit = 1 cent</text>
+                <text style={{ fg: theme.muted }}>·</text>
+                <text style={{ fg: theme.foreground }}>/subscribe</text>
+                <text style={{ fg: theme.muted }}>·</text>
+                <text style={{ fg: theme.foreground }}>/usage</text>
+                {!hasSubscription && (
+                  <>
+                    <text style={{ fg: theme.muted }}>·</text>
+                    <text style={{ fg: theme.foreground }}>/ads:enable</text>
+                  </>
+                )}
+              </box>
+              <text style={{ fg: theme.muted }}>
+                Subscribe for the best credit rates — /subscribe
+              </text>
+            </box>
+          </box>
+        )}
+      </box>
+    </BottomBanner>
+  )
+}

package/src/components/highlighted-text.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+interface HighlightedSubsequenceTextProps {
+  text: string
+  indices?: number[] | null
+  color: string
+  highlightColor: string
+}
+
+export const HighlightedSubsequenceText = ({
+  text,
+  indices,
+  color,
+  highlightColor,
+}: HighlightedSubsequenceTextProps) => {
+  if (!indices || indices.length === 0) {
+    return <span fg={color}>{text}</span>
+  }
+
+  const parts: React.ReactNode[] = []
+  const highlightSet = new Set(indices)
+  let currentSegment = ''
+  let isHighlighted = false
+
+  for (let i = 0; i < text.length; i++) {
+    const shouldHighlight = highlightSet.has(i)
+
+    if (shouldHighlight !== isHighlighted) {
+      if (currentSegment) {
+        parts.push(
+          <span key={parts.length} fg={isHighlighted ? highlightColor : color}>
+            {currentSegment}
+          </span>,
+        )
+      }
+      currentSegment = text[i]
+      isHighlighted = shouldHighlight
+    } else {
+      currentSegment += text[i]
+    }
+  }
+
+  if (currentSegment) {
+    parts.push(
+      <span key={parts.length} fg={isHighlighted ? highlightColor : color}>
+        {currentSegment}
+      </span>,
+    )
+  }
+
+  return <>{parts}</>
+}