@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/queue-panel.tsx

@@ -1,310 +0,0 @@
-import { pluralize } from '@anvil/common/util/string'
-import { useKeyboard } from '@opentui/react'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { Button } from './button'
-import { ClickableTitleBox } from './clickable-title-box'
-import { MultilineInput } from './multiline-input'
-import { useTheme } from '../hooks/use-theme'
-import { truncateToSingleLinePreview } from '../utils/agent-display'
-import { clamp } from '../utils/math'
-import { resolveQueuePanelAction } from '../utils/queue-panel-actions'
-import { createPasteHandler } from '../utils/strings'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-import type { QueuedMessage } from '../hooks/use-message-queue'
-import type { KeyEvent, MouseEvent } from '@opentui/core'
-
-interface QueuePanelProps {
-  queuedMessages: QueuedMessage[]
-  /** Each returns false when the message has already left the queue — it
-   *  started running, and the panel has to say so rather than look applied. */
-  onEdit: (id: string, content: string) => boolean
-  onDelete: (id: string) => boolean
-  onMove: (id: string, toIndex: number) => boolean
-  onClose: () => void
-  /** Width of the surrounding chat chrome, so rows truncate on the same
-   *  column the composer wraps on. */
-  width: number
-  /** Rows to show before the list starts scrolling around the selection. */
-  maxVisibleRows?: number
-}
-
-const DEFAULT_MAX_VISIBLE_ROWS = 8
-const TOO_LATE = 'That message already started running.'
-
-/** Keep the selected row inside the window even when the list scrolls past it. */
-function windowStart(
-  selectedIndex: number,
-  total: number,
-  visible: number,
-): number {
-  if (total <= visible) return 0
-  return clamp(selectedIndex - Math.floor(visible / 2), 0, total - visible)
-}
-
-export const QueuePanel: React.FC<QueuePanelProps> = ({
-  queuedMessages,
-  onEdit,
-  onDelete,
-  onMove,
-  onClose,
-  width,
-  maxVisibleRows = DEFAULT_MAX_VISIBLE_ROWS,
-}) => {
-  const theme = useTheme()
-
-  // Selection tracks the message, not the slot, so it rides along when the
-  // list is reordered underneath the cursor.
-  const [selectedId, setSelectedId] = useState<string | null>(
-    queuedMessages[0]?.id ?? null,
-  )
-  const [editingId, setEditingId] = useState<string | null>(null)
-  const [draft, setDraft] = useState({ text: '', cursorPosition: 0 })
-  const [notice, setNotice] = useState<string | null>(null)
-
-  const beginEdit = useCallback((message: QueuedMessage) => {
-    setSelectedId(message.id)
-    setEditingId(message.id)
-    setDraft({
-      text: message.content,
-      cursorPosition: message.content.length,
-    })
-  }, [])
-
-  // A message leaves the queue two ways: the user deletes it, which moves the
-  // cursor explicitly below, or the agent starts running it — and it can only
-  // ever start the one at the head, so falling back to row 0 lands the cursor
-  // exactly where that message used to be.
-  const selectedIndex = Math.max(
-    0,
-    queuedMessages.findIndex((message) => message.id === selectedId),
-  )
-  const selected = queuedMessages[selectedIndex]
-
-  // Nothing left to manage: hand the composer back rather than leave an empty
-  // box for the user to dismiss.
-  useEffect(() => {
-    if (queuedMessages.length === 0) onClose()
-  }, [queuedMessages.length, onClose])
-
-  // An edit in flight on a message that just started running can no longer
-  // land, so drop back to the list instead of writing into nothing.
-  const editingExists = queuedMessages.some(
-    (message) => message.id === editingId,
-  )
-  useEffect(() => {
-    if (editingId && !editingExists) {
-      setEditingId(null)
-      setNotice(`${TOO_LATE} Your edit was not applied.`)
-    }
-  }, [editingId, editingExists])
-
-  const commitEdit = useCallback(() => {
-    if (!editingId) return
-    const next = draft.text.trim()
-    setEditingId(null)
-
-    // Emptying the prompt deletes the message, but only when that leaves
-    // nothing to send. A message queued for its attachments alone already has
-    // an empty prompt, so opening and closing it must not destroy it.
-    const keepsAttachments = queuedMessages.some(
-      (message) => message.id === editingId && message.attachments.length > 0,
-    )
-    const applied =
-      next || keepsAttachments ? onEdit(editingId, next) : onDelete(editingId)
-    if (!applied) setNotice(TOO_LATE)
-  }, [editingId, draft.text, queuedMessages, onEdit, onDelete])
-
-  const handleKey = useCallback(
-    (key: KeyEvent) => {
-      const action = resolveQueuePanelAction(key, {
-        editing: editingId !== null,
-      })
-      if (action.type === 'none') return
-      // Any deliberate action supersedes the last complaint.
-      setNotice(null)
-
-      switch (action.type) {
-        case 'cancel-edit':
-          setEditingId(null)
-          return
-        case 'close':
-          onClose()
-          return
-        case 'select': {
-          const to = clamp(
-            selectedIndex + action.delta,
-            0,
-            queuedMessages.length - 1,
-          )
-          setSelectedId(queuedMessages[to]?.id ?? null)
-          return
-        }
-        case 'move':
-          // onMove clamps, so the edges need no guard here.
-          if (selected) onMove(selected.id, selectedIndex + action.delta)
-          return
-        case 'move-to-top':
-          if (selected) onMove(selected.id, 0)
-          return
-        case 'edit':
-          if (selected) beginEdit(selected)
-          return
-        case 'delete': {
-          if (!selected) return
-          // Leave the cursor on whatever fills the vacated row.
-          const successor =
-            queuedMessages[selectedIndex + 1] ??
-            queuedMessages[selectedIndex - 1]
-          if (onDelete(selected.id)) setSelectedId(successor?.id ?? null)
-          else setNotice(TOO_LATE)
-          return
-        }
-      }
-    },
-    [
-      editingId,
-      beginEdit,
-      onClose,
-      onDelete,
-      onMove,
-      queuedMessages,
-      selected,
-      selectedIndex,
-    ],
-  )
-
-  useKeyboard(handleKey)
-
-  const pasteIntoDraft = useMemo(
-    () =>
-      createPasteHandler({
-        text: draft.text,
-        cursorPosition: draft.cursorPosition,
-        onChange: (value) =>
-          setDraft({
-            text: value.text,
-            cursorPosition: value.cursorPosition,
-          }),
-      }),
-    [draft.text, draft.cursorPosition],
-  )
-
-  // A row must fit one line or it wraps and the list stops being scannable.
-  // Budget: two border columns, two padding columns, then the "❯ 12. " prefix
-  // (cursor + number + dot + space).
-  const numberWidth = String(queuedMessages.length).length
-  const promptWidth = Math.max(10, width - 8 - numberWidth)
-  const position = (index: number) =>
-    `${String(index + 1).padStart(numberWidth)}.`
-
-  const editing = editingId !== null
-  const start = windowStart(
-    selectedIndex,
-    queuedMessages.length,
-    maxVisibleRows,
-  )
-  const visible = queuedMessages.slice(start, start + maxVisibleRows)
-  const hiddenBelow = queuedMessages.length - (start + visible.length)
-
-  return (
-    <ClickableTitleBox
-      title={` ▾ Queue — ${pluralize(queuedMessages.length, 'message')} `}
-      titleAlignment="center"
-      onTitleClick={editing ? undefined : onClose}
-      style={{
-        width: '100%',
-        borderStyle: 'single',
-        borderColor: theme.border,
-        customBorderChars: BORDER_CHARS,
-        paddingLeft: 1,
-        paddingRight: 1,
-        flexDirection: 'column',
-      }}
-    >
-      {editing ? (
-        // Editing takes over the panel: the composer it opens is up to five
-        // lines tall, and stacking that under the whole list can outgrow a
-        // short terminal.
-        <>
-          <text style={{ fg: theme.info }}>
-            {`❯ ${position(selectedIndex)} editing`}
-          </text>
-          <MultilineInput
-            value={draft.text}
-            cursorPosition={draft.cursorPosition}
-            onChange={(value) =>
-              setDraft({
-                text: value.text,
-                cursorPosition: value.cursorPosition,
-              })
-            }
-            onSubmit={commitEdit}
-            onPaste={pasteIntoDraft}
-            focused
-            maxHeight={5}
-          />
-        </>
-      ) : (
-        <>
-          {start > 0 && (
-            <text style={{ fg: theme.muted }}>{`  ↑ ${start} more`}</text>
-          )}
-
-          {visible.map((message, offset) => {
-            const index = start + offset
-            const isSelected = index === selectedIndex
-            const attachments = message.attachments.length
-            const suffix = attachments > 0 ? ` 📎${attachments}` : ''
-            const body =
-              truncateToSingleLinePreview(
-                message.content,
-                promptWidth - suffix.length,
-              ) ?? ''
-
-            return (
-              <Button
-                key={message.id}
-                onClick={(event) => {
-                  if ((event as MouseEvent | undefined)?.button === 0) {
-                    beginEdit(message)
-                  }
-                }}
-                onMouseOver={() => setSelectedId(message.id)}
-                style={{
-                  width: '100%',
-                  height: 1,
-                  backgroundColor: isSelected ? theme.surface : undefined,
-                }}
-              >
-                <text
-                  style={{
-                    fg: isSelected ? theme.info : theme.foreground,
-                    wrapMode: 'none',
-                  }}
-                >
-                  {isSelected ? '❯ ' : '  '}
-                  {position(index)} {body}
-                  {suffix}
-                </text>
-              </Button>
-            )
-          })}
-
-          {hiddenBelow > 0 && (
-            <text style={{ fg: theme.muted }}>{`  ↓ ${hiddenBelow} more`}</text>
-          )}
-        </>
-      )}
-
-      {notice && <text style={{ fg: theme.warning }}>{notice}</text>}
-
-      <text style={{ fg: theme.muted }}>
-        {editing
-          ? 'Enter save · Esc cancel · emptying it deletes'
-          : 'click a row to edit · ⇧↑↓ reorder · d delete · esc close'}
-      </text>
-    </ClickableTitleBox>
-  )
-}

package/src/components/raised-pill.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import stringWidth from 'string-width'
-
-import { Button } from './button'
-
-type PillSegment = {
-  text: string
-  fg?: string
-  attr?: number
-}
-
-interface RaisedPillProps {
-  segments: PillSegment[]
-  frameColor: string
-  textColor: string
-  fillColor?: string
-  padding?: number
-  onPress?: () => void
-  style?: Record<string, unknown>
-}
-
-const buildHorizontal = (length: number): string => {
-  if (length <= 0) return ''
-  return '─'.repeat(length)
-}
-
-export const RaisedPill = ({
-  segments,
-  frameColor,
-  textColor,
-  fillColor,
-  padding = 2,
-  onPress,
-  style,
-}: RaisedPillProps): React.ReactNode => {
-  const leftRightPadding =
-    padding > 0
-      ? [{ text: ' '.repeat(padding), fg: textColor }]
-      : []
-
-  const normalizedSegments: Array<{
-    text: string
-    fg?: string
-    attr?: number
-  }> = [
-    ...leftRightPadding,
-    ...segments.map((segment) => ({
-      text: segment.text,
-      fg: segment.fg ?? textColor,
-      attr: segment.attr,
-    })),
-    ...leftRightPadding,
-  ]
-
-  const contentText = normalizedSegments.map((segment) => segment.text).join('')
-  const contentWidth = Math.max(0, stringWidth(contentText))
-  const horizontal = buildHorizontal(contentWidth)
-
-  return (
-    <Button
-      style={{
-        flexDirection: 'column',
-        gap: 0,
-        backgroundColor: 'transparent',
-        ...style,
-      }}
-      onClick={onPress}
-    >
-      <text>
-        <span fg={frameColor}>{`╭${horizontal}╮`}</span>
-      </text>
-      <text>
-        <span fg={frameColor}>
-          │
-        </span>
-        {normalizedSegments.map((segment, idx) => (
-          <span
-            key={idx}
-            fg={segment.fg}
-            bg={fillColor ?? 'transparent'}
-            attributes={segment.attr}
-          >
-            {segment.text}
-          </span>
-        ))}
-        <span fg={frameColor}>
-          │
-        </span>
-      </text>
-      <text>
-        <span fg={frameColor}>{`╰${horizontal}╯`}</span>
-      </text>
-    </Button>
-  )
-}

package/src/components/renderers/plan-box.tsx

@@ -1,59 +0,0 @@
-import { memo } from 'react'
-
-import { useTheme } from '../../hooks/use-theme'
-import { renderMarkdown, type MarkdownPalette } from '../../utils/markdown-renderer'
-import { BORDER_CHARS } from '../../utils/ui-constants'
-import { BuildModeButtons } from '../build-mode-buttons'
-
-interface PlanBoxProps {
-  planContent: string
-  availableWidth: number
-  markdownPalette: MarkdownPalette
-  onBuildFast: () => void
-  onBuildMax: () => void
-  onBuildLite: () => void
-}
-
-export const PlanBox = memo(
-  ({
-    planContent,
-    availableWidth,
-    markdownPalette,
-    onBuildFast,
-    onBuildMax,
-    onBuildLite,
-  }: PlanBoxProps) => {
-    const theme = useTheme()
-
-    return (
-      <box
-        style={{
-          flexDirection: 'column',
-          gap: 1,
-          width: '100%',
-          borderStyle: 'single',
-          borderColor: theme.secondary,
-          customBorderChars: BORDER_CHARS,
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 0,
-          paddingBottom: 1,
-        }}
-      >
-        <text style={{ wrapMode: 'word', fg: theme.foreground }}>
-          {renderMarkdown(planContent, {
-            codeBlockWidth: Math.max(10, availableWidth - 8),
-            palette: markdownPalette,
-          })}
-        </text>
-        <BuildModeButtons
-          theme={theme}
-          onBuildFast={onBuildFast}
-          onBuildMax={onBuildMax}
-          onBuildLite={onBuildLite}
-        />
-      </box>
-    )
-  },
-)
-

package/src/components/review-screen.tsx

@@ -1,112 +0,0 @@
-import { useKeyboard } from '@opentui/react'
-import React, { useCallback, useState } from 'react'
-
-import { buildReviewPrompt } from '../commands/prompt-builders'
-import { useTheme } from '../hooks/use-theme'
-import { isPlainEnterKey } from '../utils/terminal-enter-detection'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-import type { KeyEvent } from '@opentui/core'
-
-interface ReviewOption {
-  id: string
-  label: string
-}
-
-const REVIEW_OPTIONS: ReviewOption[] = [
-  { id: 'conversation', label: 'Changes this conversation' },
-  { id: 'uncommitted', label: 'Uncommitted changes' },
-  { id: 'branch', label: 'This branch vs main' },
-  { id: 'custom', label: 'Custom...' },
-]
-
-interface ReviewScreenProps {
-  onSelectOption: (reviewText: string) => void
-  onCustom: () => void
-  onCancel: () => void
-}
-
-export const ReviewScreen: React.FC<ReviewScreenProps> = ({
-  onSelectOption,
-  onCustom,
-  onCancel,
-}) => {
-  const theme = useTheme()
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  const handleSelect = useCallback(
-    (option: ReviewOption) => {
-      if (option.id === 'custom') {
-        onCustom()
-        return
-      }
-
-      const scope = option.id as 'conversation' | 'uncommitted' | 'branch'
-      const reviewText = buildReviewPrompt(scope)
-      onSelectOption(reviewText)
-    },
-    [onSelectOption, onCustom],
-  )
-
-  useKeyboard(
-    useCallback(
-      (key: KeyEvent) => {
-        if (key.name === 'up') {
-          setSelectedIndex((prev) => Math.max(0, prev - 1))
-          return
-        }
-        if (key.name === 'down') {
-          setSelectedIndex((prev) => Math.min(REVIEW_OPTIONS.length - 1, prev + 1))
-          return
-        }
-        if (isPlainEnterKey(key)) {
-          const option = REVIEW_OPTIONS[selectedIndex]
-          if (option) {
-            handleSelect(option)
-          }
-          return
-        }
-        if (key.name === 'escape') {
-          onCancel()
-          return
-        }
-      },
-      [selectedIndex, handleSelect, onCancel],
-    ),
-  )
-
-  return (
-    <box
-      title=" Review "
-      titleAlignment="center"
-      style={{
-        width: '100%',
-        borderStyle: 'single',
-        borderColor: theme.border,
-        customBorderChars: BORDER_CHARS,
-        paddingLeft: 1,
-        paddingRight: 1,
-        flexDirection: 'column',
-      }}
-    >
-      {REVIEW_OPTIONS.map((option, index) => {
-        const isSelected = index === selectedIndex
-        return (
-          <text
-            key={option.id}
-            style={{
-              fg: isSelected ? theme.info : theme.foreground,
-              bg: isSelected ? theme.surface : undefined,
-            }}
-          >
-            {isSelected ? '❯ ' : '  '}
-            {option.label}
-          </text>
-        )
-      })}
-      <text style={{ fg: theme.muted }}>
-        ↑↓ navigate · Enter select · Esc cancel
-      </text>
-    </box>
-  )
-}

package/src/components/scroll-to-bottom-button.tsx

@@ -1,34 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { useState } from 'react'
-
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-
-interface ScrollToBottomButtonProps {
-  onClick: () => void
-}
-
-export const ScrollToBottomButton = ({
-  onClick,
-}: ScrollToBottomButtonProps) => {
-  const theme = useTheme()
-  const [hovered, setHovered] = useState(false)
-
-  return (
-    <Button
-      style={{ paddingLeft: 2, paddingRight: 2 }}
-      onClick={onClick}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-    >
-      <text>
-        <span
-          fg={theme.info}
-          attributes={hovered ? TextAttributes.BOLD : TextAttributes.DIM}
-        >
-          {hovered ? '↓ Scroll to bottom ↓' : '↓'}
-        </span>
-      </text>
-    </Button>
-  )
-}