@alumbwe/anvil 1.0.0 → 1.0.1

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

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

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

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

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