@alumbwe/anvil 1.0.0

package/src/components/message-block.tsx

@@ -0,0 +1,346 @@
+import { TextAttributes } from '@opentui/core'
+import { memo, useState } from 'react'
+
+import { BlocksRenderer } from './blocks/blocks-renderer'
+import { UserContentWithCopyButton } from './blocks/user-content-copy'
+import { Button } from './button'
+import { FileAttachmentCard } from './file-attachment-card'
+import { ImageCard } from './image-card'
+import { MessageFooter } from './message-footer'
+import { TextAttachmentCard } from './text-attachment-card'
+import { UserErrorBanner } from './user-error-banner'
+import { ValidationErrorPopover } from './validation-error-popover'
+import { useTheme } from '../hooks/use-theme'
+import { useWhyDidYouUpdateById } from '../hooks/use-why-did-you-update'
+import { getCliEnv } from '../utils/env'
+import { type MarkdownPalette } from '../utils/markdown-renderer'
+import { formatCwd } from '../utils/path-helpers'
+
+import type { FeedbackCategory } from '@anvil/common/constants/feedback'
+
+import type {
+  ContentBlock,
+  FileAttachment,
+  ImageAttachment,
+  TextAttachment,
+  ChatMessageMetadata,
+} from '../types/chat'
+import type { ThemeColor } from '../types/theme-system'
+
+interface MessageBlockProps {
+  messageId: string
+  blocks?: ContentBlock[]
+  content: string
+  isUser: boolean
+  isAi: boolean
+  isLoading: boolean
+  timestamp: string
+  isComplete?: boolean
+  completionTime?: string
+  credits?: number
+  timerStartTime: number | null
+  textColor?: ThemeColor
+  timestampColor: string
+  markdownOptions: { codeBlockWidth: number; palette: MarkdownPalette }
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  onFeedback?: (messageId: string) => void
+  onCloseFeedback?: () => void
+  validationErrors?: Array<{ id: string; message: string }>
+  /** Runtime error to display in UI but NOT send to LLM */
+  userError?: string
+  onOpenFeedback?: (options?: {
+    category?: FeedbackCategory
+    footerMessage?: string
+    errors?: Array<{ id: string; message: string }>
+  }) => void
+  attachments?: ImageAttachment[]
+  textAttachments?: TextAttachment[]
+  fileAttachments?: FileAttachment[]
+  metadata?: ChatMessageMetadata
+  isLastMessage?: boolean
+}
+
+const MessageAttachments = memo(({
+  imageAttachments,
+  textAttachments,
+  fileAttachments,
+}: {
+  imageAttachments: ImageAttachment[]
+  textAttachments: TextAttachment[]
+  fileAttachments: FileAttachment[]
+}) => {
+  if (imageAttachments.length === 0 && textAttachments.length === 0 && fileAttachments.length === 0) {
+    return null
+  }
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        gap: 1,
+        flexWrap: 'wrap',
+      }}
+    >
+      {imageAttachments.map((attachment) => (
+        <ImageCard
+          key={attachment.path}
+          image={attachment}
+          showRemoveButton={false}
+        />
+      ))}
+      {textAttachments.map((attachment) => (
+        <TextAttachmentCard
+          key={attachment.id}
+          attachment={attachment}
+          showRemoveButton={false}
+        />
+      ))}
+      {fileAttachments.map((attachment) => (
+        <FileAttachmentCard
+          key={attachment.path}
+          attachment={attachment}
+          showRemoveButton={false}
+        />
+      ))}
+    </box>
+  )
+})
+
+export const MessageBlock = memo(({
+  messageId,
+  blocks,
+  content,
+  isUser,
+  isAi,
+  isLoading,
+  timestamp,
+  isComplete,
+  completionTime,
+  credits,
+  timerStartTime,
+  textColor,
+  timestampColor,
+  markdownOptions,
+  availableWidth,
+  markdownPalette,
+  onToggleCollapsed,
+  onBuildFast,
+  onBuildMax,
+  onBuildLite,
+  onFeedback,
+  onCloseFeedback,
+  validationErrors,
+  userError,
+  onOpenFeedback,
+  attachments,
+  textAttachments,
+  fileAttachments,
+  metadata,
+  isLastMessage,
+}: MessageBlockProps) => {
+  const [showValidationPopover, setShowValidationPopover] = useState(false)
+
+  const bashCwd = metadata?.bashCwd ? formatCwd(metadata.bashCwd) : undefined
+
+  useWhyDidYouUpdateById(
+    'MessageBlock',
+    messageId,
+    {
+      messageId,
+      blocks,
+      content,
+      isUser,
+      isAi,
+      isLoading,
+      timestamp,
+      isComplete,
+      completionTime,
+      credits,
+      timerStartTime,
+      textColor,
+      timestampColor,
+      markdownOptions,
+      availableWidth,
+      markdownPalette,
+      onToggleCollapsed,
+      onBuildFast,
+      onBuildMax,
+      onBuildLite,
+      onFeedback,
+      onCloseFeedback,
+      validationErrors,
+      onOpenFeedback,
+      metadata,
+      isLastMessage,
+    },
+    {
+      logLevel: 'debug',
+      enabled: getCliEnv().ANVIL_PERF_TEST === 'true',
+    },
+  )
+
+  const theme = useTheme()
+  const resolvedTextColor = textColor ?? theme.foreground
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
+      {/* User message timestamp with error indicator (non-bash commands) */}
+      {isUser && !bashCwd && (
+        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
+          <text
+            attributes={TextAttributes.DIM}
+            style={{
+              wrapMode: 'none',
+              fg: timestampColor,
+            }}
+          >
+            {`[${timestamp}]`}
+          </text>
+
+          {validationErrors && validationErrors.length > 0 && (
+            <Button
+              onClick={() => setShowValidationPopover(!showValidationPopover)}
+            >
+              <text
+                style={{
+                  fg: theme.error,
+                  wrapMode: 'none',
+                }}
+              >
+                [!]
+              </text>
+            </Button>
+          )}
+        </box>
+      )}
+
+      {/* Bash command metadata header (timestamp + cwd) - copy button moved inline */}
+      {bashCwd && (
+        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
+          <text
+            attributes={TextAttributes.DIM}
+            style={{
+              wrapMode: 'none',
+              fg: timestampColor,
+            }}
+          >
+            {`[${timestamp}]`}
+          </text>
+          <text
+            attributes={TextAttributes.DIM}
+            style={{
+              wrapMode: 'none',
+              fg: theme.muted,
+            }}
+          >
+            •
+          </text>
+          <text
+            attributes={TextAttributes.DIM}
+            style={{
+              wrapMode: 'word',
+              fg: theme.muted,
+            }}
+          >
+            {bashCwd}
+          </text>
+        </box>
+      )}
+
+      {/* Show validation popover below timestamp when expanded */}
+      {isUser &&
+        !bashCwd &&
+        validationErrors &&
+        validationErrors.length > 0 &&
+        showValidationPopover && (
+          <box style={{ paddingTop: 1, paddingBottom: 1 }}>
+            <ValidationErrorPopover
+              errors={validationErrors}
+              onOpenFeedback={onOpenFeedback}
+              onClose={() => setShowValidationPopover(false)}
+            />
+          </box>
+        )}
+
+      <box style={{ flexDirection: 'column', gap: 1, width: '100%' }}>
+        {blocks ? (
+          <box
+            style={{
+              flexDirection: 'column',
+              gap: 1,
+              width: '100%',
+            }}
+          >
+            <BlocksRenderer
+              sourceBlocks={blocks}
+              messageId={messageId}
+              isLoading={isLoading}
+              isComplete={isComplete}
+              isUser={isUser}
+              textColor={resolvedTextColor}
+              availableWidth={availableWidth}
+              markdownPalette={markdownPalette}
+              onToggleCollapsed={onToggleCollapsed}
+              onBuildFast={onBuildFast}
+              onBuildMax={onBuildMax}
+              onBuildLite={onBuildLite}
+              isLastMessage={isLastMessage}
+              contentToCopy={isUser ? content : undefined}
+            />
+          </box>
+        ) : (
+          <UserContentWithCopyButton
+            content={content}
+            messageId={messageId}
+            isLoading={isLoading}
+            isComplete={isComplete}
+            isUser={isUser}
+            textColor={resolvedTextColor}
+            codeBlockWidth={markdownOptions.codeBlockWidth}
+            palette={markdownOptions.palette}
+            showCopyButton={isUser}
+          />
+        )}
+        {/* Show attachments for user messages */}
+        {isUser &&
+          ((attachments && attachments.length > 0) ||
+            (textAttachments && textAttachments.length > 0) ||
+            (fileAttachments && fileAttachments.length > 0)) && (
+            <MessageAttachments
+              imageAttachments={attachments ?? []}
+              textAttachments={textAttachments ?? []}
+              fileAttachments={fileAttachments ?? []}
+            />
+          )}
+      </box>
+
+      {/* Display runtime error banner for AI messages */}
+      {isAi && userError && <UserErrorBanner error={userError} />}
+
+      {isAi && (
+        <MessageFooter
+          messageId={messageId}
+          blocks={blocks}
+          content={content}
+          isLoading={isLoading}
+          isComplete={isComplete}
+          completionTime={completionTime}
+          credits={credits}
+          timerStartTime={timerStartTime}
+          onFeedback={onFeedback}
+          onCloseFeedback={onCloseFeedback}
+        />
+      )}
+    </box>
+  )
+})

package/src/components/message-footer.tsx

@@ -0,0 +1,258 @@
+import { SUBSCRIPTION_DISPLAY_NAME } from '@anvil/common/constants/subscription-plans'
+import { IS_FREEBUFF } from '../utils/constants'
+import { pluralize } from '@anvil/common/util/string'
+import { TextAttributes } from '@opentui/core'
+import React, { useCallback, useMemo } from 'react'
+
+import { CopyButton } from './copy-button'
+import { ElapsedTimer } from './elapsed-timer'
+import { FeedbackIconButton } from './feedback-icon-button'
+import { useSubscriptionQuery } from '../hooks/use-subscription-query'
+import {
+  getBlockPercentRemaining,
+  isCoveredBySubscription,
+} from '../utils/subscription'
+import { useTheme } from '../hooks/use-theme'
+import {
+  useFeedbackStore,
+  selectIsFeedbackOpenForMessage,
+  selectHasSubmittedFeedback,
+  selectMessageFeedbackCategory,
+} from '../state/feedback-store'
+
+import type { ContentBlock, TextContentBlock } from '../types/chat'
+
+interface MessageFooterProps {
+  messageId: string
+  blocks?: ContentBlock[]
+  content: string
+  isLoading: boolean
+  isComplete?: boolean
+  completionTime?: string
+  credits?: number
+  timerStartTime: number | null
+  onFeedback?: (messageId: string) => void
+  onCloseFeedback?: () => void
+}
+
+export const MessageFooter: React.FC<MessageFooterProps> = ({
+  messageId,
+  blocks,
+  content,
+  isLoading,
+  isComplete,
+  completionTime,
+  credits,
+  timerStartTime,
+  onFeedback,
+  onCloseFeedback,
+}) => {
+  const theme = useTheme()
+
+  // Memoize selectors to prevent new function references on every render
+  const selectIsFeedbackOpenMemo = useMemo(
+    () => selectIsFeedbackOpenForMessage(messageId),
+    [messageId],
+  )
+  const selectHasSubmittedFeedbackMemo = useMemo(
+    () => selectHasSubmittedFeedback(messageId),
+    [messageId],
+  )
+  const selectMessageFeedbackCategoryMemo = useMemo(
+    () => selectMessageFeedbackCategory(messageId),
+    [messageId],
+  )
+
+  const isFeedbackOpen = useFeedbackStore(selectIsFeedbackOpenMemo)
+  const hasSubmittedFeedback = useFeedbackStore(selectHasSubmittedFeedbackMemo)
+  const selectedFeedbackCategory = useFeedbackStore(
+    selectMessageFeedbackCategoryMemo,
+  )
+
+  const shouldShowLoadingTimer = isLoading && !isComplete
+  const shouldShowCompletionFooter = isComplete
+  const canRequestFeedback = shouldShowCompletionFooter && !hasSubmittedFeedback
+  const isGoodOrBadSelection =
+    selectedFeedbackCategory === 'good_result' ||
+    selectedFeedbackCategory === 'bad_result'
+  const shouldShowSubmittedFeedbackState =
+    shouldShowCompletionFooter && hasSubmittedFeedback && isGoodOrBadSelection
+  const shouldRenderFeedbackButton =
+    Boolean(onFeedback) &&
+    (canRequestFeedback || shouldShowSubmittedFeedbackState)
+
+  const handleFeedbackOpen = useCallback(() => {
+    if (!canRequestFeedback || !onFeedback) return
+    onFeedback(messageId)
+  }, [canRequestFeedback, onFeedback, messageId])
+
+  const handleFeedbackClose = useCallback(() => {
+    if (!canRequestFeedback) return
+    onCloseFeedback?.()
+  }, [canRequestFeedback, onCloseFeedback])
+
+  // Build text from content and text blocks for copy button
+  const textToCopy = [
+    content,
+    ...(blocks || [])
+      .filter((b): b is TextContentBlock => b.type === 'text')
+      .map((b) => b.content),
+  ]
+    .filter(Boolean)
+    .join('\n\n')
+    .trim()
+
+  // Loading timer
+  if (shouldShowLoadingTimer) {
+    return (
+      <text
+        attributes={TextAttributes.DIM}
+        style={{
+          wrapMode: 'none',
+          marginTop: 0,
+          marginBottom: 0,
+          alignSelf: 'flex-end',
+        }}
+      >
+        <ElapsedTimer
+          startTime={timerStartTime}
+          attributes={TextAttributes.DIM}
+        />
+      </text>
+    )
+  }
+
+  // Completion footer
+  if (!shouldShowCompletionFooter) {
+    return null
+  }
+
+  const footerItems: { key: string; node: React.ReactNode }[] = []
+
+  // Add copy button first if there's content to copy
+  if (textToCopy.length > 0) {
+    footerItems.push({
+      key: 'copy',
+      node: (
+        <CopyButton
+          textToCopy={textToCopy}
+          leadingSpace={false}
+          style={{ wrapMode: 'none' }}
+        />
+      ),
+    })
+  }
+
+  if (completionTime) {
+    footerItems.push({
+      key: 'time',
+      node: (
+        <text
+          attributes={TextAttributes.DIM}
+          style={{
+            wrapMode: 'none',
+            fg: theme.secondary,
+            marginTop: 0,
+            marginBottom: 0,
+          }}
+        >
+          worked for {completionTime}
+        </text>
+      ),
+    })
+  }
+  if (typeof credits === 'number' && credits > 0 && !IS_FREEBUFF) {
+    footerItems.push({
+      key: 'credits',
+      node: <CreditsOrSubscriptionIndicator credits={credits} />,
+    })
+  }
+  if (shouldRenderFeedbackButton) {
+    footerItems.push({
+      key: 'feedback',
+      node: (
+        <FeedbackIconButton
+          onClick={handleFeedbackOpen}
+          onClose={handleFeedbackClose}
+          isOpen={canRequestFeedback ? isFeedbackOpen : false}
+          messageId={messageId}
+          selectedCategory={selectedFeedbackCategory}
+          hasSubmittedFeedback={hasSubmittedFeedback}
+        />
+      ),
+    })
+  }
+
+  if (footerItems.length === 0) {
+    return null
+  }
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-end',
+        gap: 1,
+      }}
+    >
+      {footerItems.map((item, idx) => (
+        <React.Fragment key={item.key}>
+          {idx > 0 && (
+            <text
+              attributes={TextAttributes.DIM}
+              style={{
+                wrapMode: 'none',
+                fg: theme.muted,
+                marginTop: 0,
+                marginBottom: 0,
+              }}
+            >
+              •
+            </text>
+          )}
+          {item.node}
+        </React.Fragment>
+      ))}
+    </box>
+  )
+}
+
+const CreditsOrSubscriptionIndicator: React.FC<{ credits: number }> = ({ credits }) => {
+  const theme = useTheme()
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: false,
+    refetchOnActivity: false,
+    pauseWhenIdle: false,
+  })
+
+  const blockPercentRemaining = useMemo(
+    () => getBlockPercentRemaining(subscriptionData),
+    [subscriptionData],
+  )
+
+  const showSubscriptionIndicator = isCoveredBySubscription(subscriptionData)
+
+  if (showSubscriptionIndicator) {
+    const label = (blockPercentRemaining ?? 0) < 20
+      ? `✓ ${SUBSCRIPTION_DISPLAY_NAME} (${blockPercentRemaining}% left)`
+      : `✓ ${SUBSCRIPTION_DISPLAY_NAME}`
+    return (
+      <text
+        attributes={TextAttributes.DIM}
+        style={{ wrapMode: 'none', fg: theme.success, marginTop: 0, marginBottom: 0 }}
+      >
+        {label}
+      </text>
+    )
+  }
+
+  return (
+    <text
+      attributes={TextAttributes.DIM}
+      style={{ wrapMode: 'none', fg: theme.secondary, marginTop: 0, marginBottom: 0 }}
+    >
+      {pluralize(credits, 'credit')}
+    </text>
+  )
+}