@alumbwe/anvil 1.0.0

package/src/components/collapse-button.tsx

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

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

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

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

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

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