@alumbwe/anvil 1.0.0

package/src/components/out-of-credits-banner.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react'
+import { isDirectDeepSeekMode } from '@anvil/common/constants/deepseek-direct'
+import { IS_FREEBUFF } from '../utils/constants'
+
+import { ShimmerText } from './shimmer-text'
+import { getActivityQueryData } from '../hooks/use-activity-query'
+import { useTheme } from '../hooks/use-theme'
+import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
+import { useChatStore } from '../state/chat-store'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+const CREDIT_POLL_INTERVAL = 5 * 1000 // Poll every 5 seconds
+
+// Track credits restored state globally so keyboard handler can access it
+let creditsRestoredGlobal = false
+
+export const areCreditsRestored = () => creditsRestoredGlobal
+
+export const OutOfCreditsBanner = () => {
+  // Direct-to-DeepSeek mode has no Anvil credits system; the Anvil out-of-
+  // credits flow (usage polling + buy-credits link) does not apply.
+  if (IS_FREEBUFF || isDirectDeepSeekMode()) return null
+
+  const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
+  const [creditsRestored, setCreditsRestored] = useState(false)
+
+  const { data: apiData } = useUsageQuery({
+    enabled: true,
+    refetchInterval: CREDIT_POLL_INTERVAL,
+  })
+
+  // Get cached data for immediate display
+  const cachedUsageData = getActivityQueryData<{
+    type: 'usage-response'
+    usage: number
+    remainingBalance: number | null
+    balanceBreakdown?: { free: number; paid: number; ad?: number }
+    next_quota_reset: string | null
+  }>(usageQueryKeys.current())
+
+  const theme = useTheme()
+  const activeData = apiData || cachedUsageData
+  const remainingBalance = activeData?.remainingBalance ?? 0
+
+  // Track if we've confirmed the zero-balance state to avoid false positives from stale cache
+  const [confirmedZeroBalance, setConfirmedZeroBalance] = useState(false)
+
+  // Reset global flag when component mounts (handles re-entry to out-of-credits mode)
+  useEffect(() => {
+    creditsRestoredGlobal = false
+  }, [])
+
+  // Confirm zero balance on first fetch to avoid race condition with cached data
+  useEffect(() => {
+    if (apiData && !confirmedZeroBalance) {
+      if ((apiData.remainingBalance ?? 0) <= 0) {
+        setConfirmedZeroBalance(true)
+      }
+    }
+  }, [apiData, confirmedZeroBalance])
+
+  // Check if credits have been restored - show celebratory message
+  useEffect(() => {
+    // Only check for restoration after we've confirmed zero balance
+    if (!confirmedZeroBalance || remainingBalance <= 0 || creditsRestored) {
+      return
+    }
+    
+    // Credits restored! Show the success state
+    setCreditsRestored(true)
+    creditsRestoredGlobal = true
+  }, [remainingBalance, creditsRestored, confirmedZeroBalance])
+
+  // Build stats text
+  const statsText = activeData
+    ? `Session: ${sessionCreditsUsed.toLocaleString()} credits used · Balance: ${remainingBalance.toLocaleString()} credits`
+    : `Session: ${sessionCreditsUsed.toLocaleString()} credits used`
+
+  // Show celebratory success state when credits are restored
+  if (creditsRestored) {
+    return (
+      <box
+        style={{
+          width: '100%',
+          borderStyle: 'single',
+          borderColor: theme.success,
+          customBorderChars: BORDER_CHARS,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 0,
+          paddingBottom: 0,
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        <box
+          style={{
+            flexDirection: 'column',
+            justifyContent: 'center',
+            minHeight: 3,
+            gap: 0,
+          }}
+        >
+          <text style={{ fg: theme.success }}>
+            <ShimmerText 
+              text="✨ Credits acquired! ✨" 
+              primaryColor={theme.success}
+              interval={120}
+            />
+          </text>
+          <text style={{ fg: theme.muted }}>
+            Balance: {remainingBalance.toLocaleString()} credits
+          </text>
+          <text style={{ fg: theme.foreground }}>
+            Press Enter to continue
+          </text>
+        </box>
+      </box>
+    )
+  }
+
+  return (
+    <box
+      style={{
+        width: '100%',
+        borderStyle: 'single',
+        borderColor: theme.warning,
+        customBorderChars: BORDER_CHARS,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexDirection: 'column',
+        gap: 0,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'column',
+          justifyContent: 'center',
+          minHeight: 3,
+          gap: 0,
+        }}
+      >
+        <text style={{ fg: theme.warning }}>
+          Out of credits
+        </text>
+        <text style={{ fg: theme.muted }}>
+          {statsText}
+        </text>
+        <text style={{ fg: theme.muted }}>
+          Note: Some credits are needed even with a Claude subscription for other model usage.
+        </text>
+        <text style={{ fg: theme.foreground }}>
+          Press Enter to buy more credits
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/components/pending-attachments-banner.tsx

@@ -0,0 +1,116 @@
+import { BottomBanner } from './bottom-banner'
+import { FileAttachmentCard } from './file-attachment-card'
+import { ImageCard } from './image-card'
+import { TextAttachmentCard } from './text-attachment-card'
+import { useTheme } from '../hooks/use-theme'
+import { useChatStore } from '../state/chat-store'
+
+import type {
+  PendingFileAttachment,
+  PendingImageAttachment,
+  PendingTextAttachment,
+} from '../types/store'
+
+/**
+ * Combined banner for both image and text attachments.
+ * Displays all attachments in a single horizontal row.
+ */
+export const PendingAttachmentsBanner = () => {
+  const theme = useTheme()
+  const pendingAttachments = useChatStore((state) => state.pendingAttachments)
+  const removePendingAttachment = useChatStore(
+    (state) => state.removePendingAttachment,
+  )
+
+  // Split and categorize attachments
+  const pendingImages = pendingAttachments.filter(
+    (a): a is PendingImageAttachment => a.kind === 'image',
+  )
+  const pendingTextAttachments = pendingAttachments.filter(
+    (a): a is PendingTextAttachment => a.kind === 'text',
+  )
+  const pendingFileAttachments = pendingAttachments.filter(
+    (a): a is PendingFileAttachment => a.kind === 'file',
+  )
+
+  // Separate error messages from actual images
+  const errorImages: PendingImageAttachment[] = []
+  const validImages: PendingImageAttachment[] = []
+  for (const img of pendingImages) {
+    if (img.status === 'error') {
+      errorImages.push(img)
+    } else {
+      validImages.push(img)
+    }
+  }
+
+  const hasValidImages = validImages.length > 0
+  const hasTextAttachments = pendingTextAttachments.length > 0
+  const hasFileAttachments = pendingFileAttachments.length > 0
+  const hasErrorsOnly = errorImages.length > 0 && !hasValidImages && !hasTextAttachments && !hasFileAttachments
+
+  // Nothing to show
+  if (!hasValidImages && !hasTextAttachments && !hasFileAttachments && errorImages.length === 0) {
+    return null
+  }
+
+  // If we only have errors (no valid attachments), show just the error messages
+  if (hasErrorsOnly) {
+    return (
+      <BottomBanner borderColorKey="error">
+        {errorImages.map((image, index) => (
+          <text key={`${image.path}-${index}`} style={{ fg: theme.error }}>
+            {image.note} ({image.filename})
+          </text>
+        ))}
+      </BottomBanner>
+    )
+  }
+
+  return (
+    <BottomBanner borderColorKey="imageCardBorder">
+      {/* Error messages shown above the attachments */}
+      {errorImages.map((image, index) => (
+        <text key={`error-${image.path}-${index}`} style={{ fg: theme.error }}>
+          {image.note} ({image.filename})
+        </text>
+      ))}
+
+      {/* All attachment cards in a horizontal row */}
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: 1,
+          flexWrap: 'wrap',
+        }}
+      >
+        {/* Image cards */}
+        {validImages.map((image, index) => (
+          <ImageCard
+            key={`img-${image.path}-${index}`}
+            image={image}
+            onRemove={() => removePendingAttachment(image.path)}
+          />
+        ))}
+
+        {/* Text attachment cards */}
+        {pendingTextAttachments.map((attachment) => (
+          <TextAttachmentCard
+            key={attachment.id}
+            attachment={attachment}
+            onRemove={() => removePendingAttachment(attachment.id)}
+          />
+        ))}
+
+        {/* File/folder attachment cards */}
+        {pendingFileAttachments.map((attachment) => (
+          <FileAttachmentCard
+            key={attachment.id}
+            attachment={attachment}
+            onRemove={() => removePendingAttachment(attachment.path)}
+          />
+        ))}
+      </box>
+    </BottomBanner>
+  )
+}

package/src/components/pending-bash-message.tsx

@@ -0,0 +1,59 @@
+import { TextAttributes } from '@opentui/core'
+
+import { TerminalCommandDisplay } from './terminal-command-display'
+import { useTheme } from '../hooks/use-theme'
+import { DASHED_BORDER_CHARS } from '../utils/ui-constants'
+
+import type { PendingBashMessage as PendingBashMessageType } from '../types/store'
+
+interface PendingBashMessageProps {
+  message: PendingBashMessageType
+}
+
+export const PendingBashMessage = ({
+  message,
+}: PendingBashMessageProps) => {
+  const theme = useTheme()
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        width: '100%',
+        gap: 0,
+        paddingBottom: 1,
+      }}
+    >
+      {/* Ghost message container with dashed border */}
+      <box
+        style={{
+          flexDirection: 'column',
+          width: '100%',
+          borderStyle: 'single',
+          borderColor: theme.muted,
+          customBorderChars: DASHED_BORDER_CHARS,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 0,
+          paddingBottom: 0,
+          gap: 0,
+        }}
+      >
+        {/* Command output using shared component */}
+        <TerminalCommandDisplay
+          command={message.command}
+          output={message.stdout || message.stderr || null}
+          expandable={false}
+          maxVisibleLines={10}
+          isRunning={message.isRunning}
+          cwd={message.cwd}
+        />
+
+        {/* Note about pending status */}
+        <text fg={theme.muted} attributes={TextAttributes.ITALIC}>
+          Will be added to chat history when it completes
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/components/progress-bar.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+
+interface ProgressBarProps {
+  /** Value from 0 to 100 */
+  value: number
+  /** Width in characters (default: 20) */
+  width?: number
+  /** Optional label to show before the bar */
+  label?: string
+  /** Show percentage text after the bar */
+  showPercentage?: boolean
+}
+
+/**
+ * Get color based on progress percentage - muted for normal, warning/error when low
+ */
+const getProgressColor = (
+  value: number,
+  theme: {
+    primary: string
+    foreground: string
+    warning: string
+    error: string
+  },
+): string => {
+  if (value <= 10) return theme.error
+  if (value <= 25) return theme.warning
+  return theme.foreground
+}
+
+/**
+ * Get color for the filled portion of the bar
+ * Uses muted color for healthy capacity (>25%) to avoid drawing attention,
+ * warning/error colors only when running low
+ */
+const getBarColor = (
+  value: number,
+  theme: { muted: string; warning: string; error: string },
+): string => {
+  if (value <= 10) return theme.error
+  if (value <= 25) return theme.warning
+  return theme.muted
+}
+
+/**
+ * Terminal progress bar component
+ * Uses block characters for visual display
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value,
+  width = 20,
+  label,
+  showPercentage = true,
+}) => {
+  const theme = useTheme()
+  const clampedValue = Math.max(0, Math.min(100, value))
+  const filledWidth = Math.round((clampedValue / 100) * width)
+  const emptyWidth = width - filledWidth
+
+  const filledChar = '█'
+  const emptyChar = '░'
+
+  const filled = filledChar.repeat(filledWidth)
+  const empty = emptyChar.repeat(emptyWidth)
+
+  const barColor = getBarColor(clampedValue, theme)
+  const textColor = getProgressColor(clampedValue, theme)
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
+      {label && <text style={{ fg: theme.muted }}>{label} </text>}
+      <text style={{ fg: barColor }}>{filled}</text>
+      {emptyWidth > 0 && <text style={{ fg: theme.muted }}>{empty}</text>}
+      {showPercentage && (
+        <text style={{ fg: textColor }}> {Math.round(clampedValue)}%</text>
+      )}
+    </box>
+  )
+}