@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/collapse-button.tsx

@@ -1,34 +0,0 @@
-import { memo } from 'react'
-
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-
-import type { CSSProperties } from 'react'
-
-interface CollapseButtonProps {
-  onClick: () => void
-  style?: CSSProperties
-}
-
-/**
- * Reusable collapse button with '▴ collapse' text
- * Styled with theme.secondary color, aligned to the right by default
- */
-export const CollapseButton = memo(({ onClick, style }: CollapseButtonProps) => {
-  const theme = useTheme()
-
-  return (
-    <Button
-      style={{
-        alignSelf: 'flex-end',
-        marginTop: 0,
-        ...style,
-      }}
-      onClick={onClick}
-    >
-      <text fg={theme.secondary} style={{ wrapMode: 'none' }}>
-        ▴ collapse
-      </text>
-    </Button>
-  )
-})

package/src/components/copy-button.tsx

@@ -1,203 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React, { useCallback, useState } from 'react'
-
-import { Clickable } from './clickable'
-import { useTheme } from '../hooks/use-theme'
-import { useTimeout } from '../hooks/use-timeout'
-import { copyTextToClipboard } from '../utils/clipboard'
-
-import type { ReactNode } from 'react'
-
-// ============================================================================
-// Exported constants and utilities for testing
-// ============================================================================
-
-/** Time in ms before the "copied" state resets */
-export const COPIED_RESET_DELAY_MS = 2000
-
-/**
- * The copy-and-confirm state machine: copies `text` to the clipboard and flips
- * `isCopied` true for {@link COPIED_RESET_DELAY_MS} before resetting. Lifted out
- * of {@link CopyButton} so callers that render their own button (and may fire
- * the copy from elsewhere, e.g. keyboard navigation) can share the same
- * lifecycle instead of re-implementing it.
- */
-export function useCopyToClipboard(text: string): {
-  isCopied: boolean
-  copy: () => void
-} {
-  const { setTimeout } = useTimeout()
-  const [isCopied, setIsCopied] = useState(false)
-
-  const copy = useCallback(() => {
-    void (async () => {
-      try {
-        await copyTextToClipboard(text, { suppressGlobalMessage: true })
-        setIsCopied(true)
-        setTimeout(
-          'reset-copied',
-          () => setIsCopied(false),
-          COPIED_RESET_DELAY_MS,
-        )
-      } catch (_error) {
-        // Error is already logged and displayed by copyTextToClipboard.
-      }
-    })()
-  }, [text, setTimeout])
-
-  return { isCopied, copy }
-}
-
-/** Icon shown in collapsed state */
-export const COPY_ICON_COLLAPSED = '⎘'
-/** Text shown when hovering */
-export const COPY_ICON_EXPANDED = '[⎘ copy]'
-/** Text shown after copying */
-export const COPY_ICON_COPIED = '[✔ copied]'
-
-/**
- * Get the text to display for the copy icon based on state.
- * Exported for testing.
- */
-export const getCopyIconText = (
-  isCopied: boolean,
-  isHovered: boolean,
-  leadingSpace: boolean,
-): string => {
-  const space = leadingSpace ? ' ' : ''
-  if (isCopied) return `${space}${COPY_ICON_COPIED}`
-  if (isHovered) return `${space}${COPY_ICON_EXPANDED}`
-  return `${space}${COPY_ICON_COLLAPSED}`
-}
-
-/**
- * State transition handlers for the copy button.
- * Exported for testing - these are the pure logic functions
- * that determine how state changes in response to user actions.
- */
-export const copyButtonHandlers = {
-  /** Handle mouse entering the button */
-  handleMouseOver: (isCopied: boolean): boolean => {
-    // Don't show hover state while showing "copied" feedback
-    return !isCopied
-  },
-
-  /** Handle mouse leaving the button - always clears hover */
-  handleMouseOut: (): boolean => {
-    return false
-  },
-
-  /** Handle copy action - returns new state */
-  handleCopy: (): { isCopied: boolean; isHovered: boolean } => {
-    return { isCopied: true, isHovered: false }
-  },
-}
-
-// ============================================================================
-// Internal component
-// ============================================================================
-
-interface CopyIconProps {
-  isCopied: boolean
-  isHovered: boolean
-  leadingSpace: boolean
-}
-
-/**
- * Internal presentational component for the copy icon.
- * Displays a dimmed icon that expands on hover and changes to a checkmark when copied.
- */
-const CopyIcon: React.FC<CopyIconProps> = ({
-  isCopied,
-  isHovered,
-  leadingSpace,
-}) => {
-  const theme = useTheme()
-  const text = getCopyIconText(isCopied, isHovered, leadingSpace)
-
-  if (isCopied) {
-    return <span fg="green">{text}</span>
-  }
-
-  if (isHovered) {
-    return <span fg={theme.foreground}>{text}</span>
-  }
-
-  return (
-    <span fg={theme.muted} attributes={TextAttributes.DIM}>
-      {text}
-    </span>
-  )
-}
-
-interface CopyButtonProps {
-  /** The text to copy to clipboard when clicked */
-  textToCopy: string
-  /** Optional content to display before the copy icon */
-  children?: ReactNode
-  /** Whether to include a leading space before the icon (default: true) */
-  leadingSpace?: boolean
-  /** Style props passed to the underlying Clickable */
-  style?: Record<string, unknown>
-}
-
-/**
- * A clickable copy button that copies text to clipboard.
- *
- * Can be used standalone (just the icon) or with children (content + trailing icon).
- *
- * @example
- * ```tsx
- * // Standalone copy button
- * <CopyButton textToCopy="some text" leadingSpace={false} />
- *
- * // With content (icon appears after children)
- * <CopyButton textToCopy={content} style={{ wrapMode: 'word' }}>
- *   <span>Content to display</span>
- * </CopyButton>
- * ```
- */
-export const CopyButton: React.FC<CopyButtonProps> = ({
-  textToCopy,
-  children,
-  leadingSpace = true,
-  style,
-}) => {
-  const { isCopied, copy } = useCopyToClipboard(textToCopy)
-  const [isHovered, setIsHovered] = useState(false)
-
-  const handleCopy = () => {
-    // copyButtonHandlers.handleCopy() encodes "clear hover on copy"; the copied
-    // flag + reset timer now live in useCopyToClipboard.
-    setIsHovered(copyButtonHandlers.handleCopy().isHovered)
-    copy()
-  }
-
-  const handleMouseOver = () => {
-    const shouldHover = copyButtonHandlers.handleMouseOver(isCopied)
-    if (shouldHover) {
-      setIsHovered(true)
-    }
-  }
-
-  const handleMouseOut = () => {
-    setIsHovered(copyButtonHandlers.handleMouseOut())
-  }
-
-  return (
-    <Clickable
-      as="text"
-      style={style}
-      onMouseDown={handleCopy}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-    >
-      {children}
-      <CopyIcon
-        isCopied={isCopied}
-        isHovered={isHovered}
-        leadingSpace={leadingSpace}
-      />
-    </Clickable>
-  )
-}

package/src/components/elapsed-timer.tsx

@@ -1,55 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { useTheme } from '../hooks/use-theme'
-import { formatElapsedTime } from '../utils/format-elapsed-time'
-
-interface ElapsedTimerProps {
-  startTime: number | null
-  suffix?: string
-  attributes?: number
-}
-
-/**
- * Self-contained timer component that updates every second.
- * Only this component re-renders, not its parents.
- */
-export const ElapsedTimer = ({
-  startTime,
-  suffix = '',
-  attributes,
-}: ElapsedTimerProps) => {
-  const theme = useTheme()
-  const [elapsedSeconds, setElapsedSeconds] = useState<number>(() =>
-    startTime ? Math.floor((Date.now() - startTime) / 1000) : 0,
-  )
-
-  useEffect(() => {
-    if (!startTime) {
-      setElapsedSeconds(0)
-      return
-    }
-
-    const updateElapsed = () => {
-      const elapsed = Math.floor((Date.now() - startTime) / 1000)
-      setElapsedSeconds(elapsed)
-    }
-
-    // Update immediately
-    updateElapsed()
-
-    // Then update every second
-    const interval = setInterval(updateElapsed, 1000)
-
-    return () => clearInterval(interval)
-  }, [startTime])
-
-  if (!startTime || elapsedSeconds === 0) {
-    return null
-  }
-
-  return (
-    <span fg={theme.secondary} attributes={attributes}>
-      {formatElapsedTime(elapsedSeconds)}{suffix}
-    </span>
-  )
-}

package/src/components/error-boundary.tsx

@@ -1,55 +0,0 @@
-import { memo, type ReactNode } from 'react'
-
-interface ErrorBoundaryPlaceholderProps {
-  children: ReactNode
-  fallback: ReactNode
-  componentName?: string
-}
-
-/**
- * **WARNING: This component does NOT catch render errors.**
- * 
- * This is a placeholder/passthrough component that exists for structural purposes.
- * OpenTUI's JSX types don't support React class components, which are required
- * for true error boundary functionality.
- * 
- * For actual error catching in render functions, use `withErrorFallback()` instead.
- * 
- * @example
- * // Use withErrorFallback for catching render errors:
- * const safeContent = withErrorFallback(
- *   () => riskyRenderFunction(),
- *   <FallbackComponent />,
- *   'MyComponent'
- * )
- */
-export const ErrorBoundaryPlaceholder = memo(
-  ({ children }: ErrorBoundaryPlaceholderProps) => {
-    // This component does NOT catch errors - it's a passthrough.
-    // Use withErrorFallback() for actual error catching.
-    return <>{children}</>
-  },
-)
-
-/**
- * @deprecated Use `ErrorBoundaryPlaceholder` instead. This alias exists for backward
- * compatibility but the name is misleading since it doesn't actually catch errors.
- */
-export const ErrorBoundary = ErrorBoundaryPlaceholder
-
-/**
- * Helper to safely render content with error handling.
- * Use this when you need to catch render errors in a functional context.
- */
-export function withErrorFallback<T>(
-  renderFn: () => T,
-  fallback: T,
-  componentName?: string,
-): T {
-  try {
-    return renderFn()
-  } catch (error) {
-    console.error(`[${componentName ?? 'withErrorFallback'}] Error caught:`, error)
-    return fallback
-  }
-}

package/src/components/feedback-container.tsx

@@ -1,181 +0,0 @@
-import React, { useCallback, useEffect } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-
-import { FeedbackInputMode } from './feedback-input-mode'
-import { useChatStore } from '../state/chat-store'
-import { useFeedbackStore } from '../state/feedback-store'
-import { showClipboardMessage } from '../utils/clipboard'
-import { getApiClient } from '../utils/anvil-api'
-import { buildFeedbackPayload, buildMessageContext } from '../utils/feedback-helpers'
-import { resolveFeedbackSubmission } from '../utils/feedback-submission'
-import { logger } from '../utils/logger'
-
-interface FeedbackContainerProps {
-  inputRef: React.MutableRefObject<any>
-  onExitFeedback?: () => void
-  width: number
-}
-
-export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
-  inputRef,
-  onExitFeedback,
-  width,
-}) => {
-  const {
-    feedbackMode,
-    feedbackText,
-    feedbackCursor,
-    feedbackCategory,
-    feedbackMessageId,
-    feedbackFooterMessage,
-    isSubmitting,
-    errors,
-    setFeedbackText,
-    setFeedbackCursor,
-    setFeedbackCategory,
-  } = useFeedbackStore(
-    useShallow((state) => ({
-      feedbackMode: state.feedbackMode,
-      feedbackText: state.feedbackText,
-      feedbackCursor: state.feedbackCursor,
-      feedbackCategory: state.feedbackCategory,
-      feedbackMessageId: state.feedbackMessageId,
-      feedbackFooterMessage: state.feedbackFooterMessage,
-      isSubmitting: state.isSubmitting,
-      errors: state.errors,
-      setFeedbackText: state.setFeedbackText,
-      setFeedbackCursor: state.setFeedbackCursor,
-      setFeedbackCategory: state.setFeedbackCategory,
-    })),
-  )
-
-  const { messages, agentMode, sessionCreditsUsed } = useChatStore(
-    useShallow((state) => ({
-      messages: state.messages,
-      agentMode: state.agentMode,
-      sessionCreditsUsed: state.sessionCreditsUsed,
-    })),
-  )
-
-  const handleFeedbackSubmit = useCallback(() => {
-    const store = useFeedbackStore.getState()
-    if (store.isSubmitting) return
-
-    const { clientFeedbackId } = store
-    if (!clientFeedbackId) return
-
-    const text = feedbackText.trim()
-    if (!text) {
-      return
-    }
-
-    store.setIsSubmitting(true)
-
-    const { target, recentMessages } = buildMessageContext(messages, feedbackMessageId)
-    const payload = buildFeedbackPayload({
-      text,
-      feedbackCategory,
-      feedbackMessageId,
-      target,
-      recentMessages,
-      agentMode,
-      sessionCreditsUsed,
-      errors,
-      clientFeedbackId,
-    })
-
-    const submittedMessageId = feedbackMessageId
-    const submittedCategory = feedbackCategory
-    const submittedClientFeedbackId = clientFeedbackId
-
-    getApiClient()
-      .feedback(payload)
-      .then((response) => {
-        const store = useFeedbackStore.getState()
-        const { isCurrentSubmission, shouldSettleSubmission } = resolveFeedbackSubmission(
-          store.clientFeedbackId,
-          submittedClientFeedbackId,
-        )
-
-        if (!response.ok) {
-          logger.warn(
-            { status: response.status, error: response.error },
-            'Feedback API returned error',
-          )
-          if (!shouldSettleSubmission) return
-          store.setIsSubmitting(false)
-          showClipboardMessage('Feedback failed to send', { durationMs: 5000 })
-          return
-        }
-
-        if (submittedMessageId) {
-          store.markMessageFeedbackSubmitted(submittedMessageId, submittedCategory)
-        }
-
-        if (isCurrentSubmission) {
-          store.resetFeedbackForm()
-          store.closeFeedback()
-          store.setIsSubmitting(false)
-          if (onExitFeedback) onExitFeedback()
-        } else if (shouldSettleSubmission) {
-          store.setIsSubmitting(false)
-        }
-
-        if (shouldSettleSubmission) {
-          showClipboardMessage('Feedback sent!', { durationMs: 5000 })
-        }
-      })
-      .catch((error: unknown) => {
-        logger.warn({ error }, 'Failed to submit feedback to API')
-        const store = useFeedbackStore.getState()
-        if (!resolveFeedbackSubmission(store.clientFeedbackId, submittedClientFeedbackId).shouldSettleSubmission) {
-          return
-        }
-        store.setIsSubmitting(false)
-        showClipboardMessage('Feedback failed to send', { durationMs: 5000 })
-      })
-  }, [
-    feedbackText,
-    feedbackMessageId,
-    feedbackCategory,
-    errors,
-    messages,
-    agentMode,
-    sessionCreditsUsed,
-    onExitFeedback,
-  ])
-
-  const handleFeedbackCancel = useCallback(() => {
-    useFeedbackStore.getState().closeFeedback()
-    if (onExitFeedback) {
-      onExitFeedback()
-    }
-  }, [onExitFeedback])
-
-  useEffect(() => {
-    if (feedbackMode && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [feedbackMode, inputRef])
-
-  if (!feedbackMode) {
-    return null
-  }
-
-  return (
-    <FeedbackInputMode
-      value={feedbackText}
-      cursor={feedbackCursor}
-      onChange={setFeedbackText}
-      onCursorChange={setFeedbackCursor}
-      onSubmit={handleFeedbackSubmit}
-      onCancel={handleFeedbackCancel}
-      feedbackCategory={feedbackCategory}
-      onCategoryChange={setFeedbackCategory}
-      inputRef={inputRef}
-      width={width}
-      footerMessage={feedbackFooterMessage}
-      isSubmitting={isSubmitting}
-    />
-  )
-}

package/src/components/feedback-icon-button.tsx

@@ -1,89 +0,0 @@
-import { AnalyticsEvent } from '@anvil/common/constants/analytics-events'
-import { TextAttributes } from '@opentui/core'
-import React, { useRef } from 'react'
-
-import { useHoverToggle } from './agent-mode-toggle'
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-import { logger } from '../utils/logger'
-
-interface FeedbackIconButtonProps {
-  onClick: () => void
-  onClose: () => void
-  isOpen?: boolean
-  messageId?: string
-  selectedCategory?: string
-  hasSubmittedFeedback?: boolean
-}
-
-export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({
-  onClick,
-  onClose,
-  isOpen,
-  messageId,
-  selectedCategory,
-  hasSubmittedFeedback = false,
-}) => {
-  const theme = useTheme()
-  const hover = useHoverToggle()
-  const hoveredOnceRef = useRef(false)
-  const handleClick = () => {
-    const action = isOpen ? onClose : onClick
-    action()
-  }
-
-  const handleMouseOver = () => {
-    if (hasSubmittedFeedback) return
-    hover.clearCloseTimer()
-    hover.scheduleOpen()
-    if (!hoveredOnceRef.current) {
-      hoveredOnceRef.current = true
-      logger.info(
-        {
-          eventId: AnalyticsEvent.FEEDBACK_BUTTON_HOVERED,
-          messageId,
-          source: 'cli',
-        },
-        'Feedback button hovered',
-      )
-    }
-  }
-  const handleMouseOut = () => {
-    if (hasSubmittedFeedback) return
-    hover.scheduleClose()
-  }
-
-  const symbolsByCategory: Record<string, string> = {
-    good_result: '▲▽', // Good selected - filled up, outlined down
-    bad_result: '△▼', // Bad selected - outlined up, filled down
-  }
-  const textCollapsed = symbolsByCategory[selectedCategory || ''] || '△▽'
-  const textExpanded = '[how was this?]'
-
-  return (
-    <Button
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingLeft: 0,
-        paddingRight: 0,
-      }}
-      onClick={handleClick}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-    >
-      <text
-        style={{
-          wrapMode: 'none',
-          fg: hover.isOpen || isOpen ? theme.foreground : theme.muted,
-        }}
-      >
-        {hover.isOpen || isOpen ? (
-          textExpanded
-        ) : (
-          <span attributes={TextAttributes.DIM}>{textCollapsed}</span>
-        )}
-      </text>
-    </Button>
-  )
-}