@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/tools/web-search.tsx

@@ -1,33 +0,0 @@
-import { SimpleToolCallItem } from './tool-call-item'
-import { defineToolComponent } from './types'
-
-import type { ChatTheme } from '../../types/theme-system'
-import type { ToolRenderConfig } from './types'
-
-/**
- * UI component for web_search tool.
- * Displays the search query in a compact format.
- */
-export const WebSearchComponent = defineToolComponent({
-  toolName: 'web_search',
-
-  render(toolBlock, theme): ToolRenderConfig {
-    const input = toolBlock.input as { query?: string } | undefined
-
-    const query = typeof input?.query === 'string' ? input.query.trim() : ''
-
-    if (!query) {
-      return { content: null }
-    }
-
-    return {
-      content: (
-        <SimpleToolCallItem
-          name="Web Search"
-          description={query}
-          descriptionColor={theme.muted}
-        />
-      ),
-    }
-  },
-})

package/src/components/tools/write-file.tsx

@@ -1,16 +0,0 @@
-import { StrReplaceComponent } from './str-replace'
-import { defineToolComponent } from './types'
-
-import type { ToolRenderConfig } from './types'
-
-// Reuse the extraction and rendering logic from str-replace by delegating
-
-export const WriteFileComponent = defineToolComponent({
-  toolName: 'write_file',
-
-  render(toolBlock, theme, options): ToolRenderConfig {
-    // Call the str_replace renderer with the same block shape
-    // since both tools share identical UI and output structure.
-    return StrReplaceComponent.render(toolBlock as any, theme, options)
-  },
-})

package/src/components/tools/write-todos.tsx

@@ -1,95 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-
-import { defineToolComponent } from './types'
-import { useTheme } from '../../hooks/use-theme'
-
-import type { ToolRenderConfig } from './types'
-
-interface WriteTodosItemProps {
-  todos: Array<{ task: string; completed: boolean }>
-}
-
-const WriteTodosItem = ({ todos }: WriteTodosItemProps) => {
-  const theme = useTheme()
-  const bulletChar = '• '
-
-  return (
-    <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
-      {/* Header line */}
-      <box
-        style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}
-      >
-        <text style={{ wrapMode: 'word' }}>
-          <span fg={theme.foreground}>{bulletChar}</span>
-          <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
-            TODOs
-          </span>
-        </text>
-      </box>
-
-      {/* Todo items */}
-      {todos.map((todo, index) => (
-        <box
-          key={`todo-${index}`}
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            paddingLeft: 2,
-          }}
-        >
-          <text style={{ wrapMode: 'word' }}>
-            {todo.completed ? (
-              <>
-                <span fg={theme.success}>✓  </span>
-                <span
-                  fg={theme.muted}
-                  attributes={TextAttributes.STRIKETHROUGH}
-                >
-                  {todo.task}
-                </span>
-              </>
-            ) : (
-              <>
-                <span fg={theme.foreground}>☐  </span>
-                <span fg={theme.foreground}>{todo.task}</span>
-              </>
-            )}
-          </text>
-        </box>
-      ))}
-    </box>
-  )
-}
-
-/**
- * UI component for write_todos tool.
- * Displays todos with checkboxes for incomplete items and checkmarks for completed items.
- */
-export const WriteTodosComponent = defineToolComponent({
-  toolName: 'write_todos',
-
-  render(toolBlock): ToolRenderConfig {
-    const { input } = toolBlock
-
-    // Extract todos from input
-    let todos: Array<{ task: string; completed: boolean }> = []
-
-    if (Array.isArray(input?.todos)) {
-      todos = input.todos.filter(
-        (todo: any) =>
-          typeof todo === 'object' &&
-          typeof todo.task === 'string' &&
-          typeof todo.completed === 'boolean',
-      )
-    }
-
-    if (todos.length === 0) {
-      return { content: null }
-    }
-
-    return {
-      content: <WriteTodosItem todos={todos} />,
-    }
-  },
-})

package/src/components/top-banner.tsx

@@ -1,178 +0,0 @@
-import React from 'react'
-
-import { Button } from './button'
-import { TerminalLink } from './terminal-link'
-import { useTheme } from '../hooks/use-theme'
-import { useChatStore } from '../state/chat-store'
-import { IS_FREEBUFF } from '../utils/constants'
-import type { TopBannerType } from '../types/store'
-import { formatCwd } from '../utils/path-helpers'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-import type { ChatTheme } from '../types/theme-system'
-import type { ThemeColorKey, InputMode } from '../utils/input-modes'
-
-type BannerContentParams = {
-  gitRoot?: string | null
-  onSwitchToGitRoot?: () => void
-  textColor: string
-  theme: ChatTheme
-}
-
-type BannerConfig = {
-  /** Theme color key for the border */
-  borderColorKey: ThemeColorKey
-  /** Theme color key for text */
-  textColorKey: ThemeColorKey
-  /** Banner content */
-  content: React.ReactNode | ((params: BannerContentParams) => React.ReactNode)
-  /** Layout style for content */
-  layout?: 'text' | 'custom'
-  /** Input mode to reset to when closing, if currently in a related mode */
-  relatedInputMode?: InputMode
-}
-
-/**
- * Registry mapping top banner types to their configurations.
- *
- * To add a new top banner:
- * 1. Add the type to TopBannerType in chat-store.ts
- * 2. Add the configuration here
- */
-const TOP_BANNER_REGISTRY: Record<NonNullable<TopBannerType>, BannerConfig> = {
-  homeDir: {
-    borderColorKey: 'warning',
-    textColorKey: 'foreground',
-    relatedInputMode: 'homeDir',
-    content:
-      'You are currently in your home directory.\nSelect a project folder to get started, or choose "Start here".',
-  },
-  gitRoot: {
-    borderColorKey: 'warning',
-    textColorKey: 'foreground',
-    layout: 'custom',
-    content: ({ gitRoot, onSwitchToGitRoot, textColor }) => {
-      const displayGitRoot = gitRoot ? formatCwd(gitRoot) : 'git root'
-      return (
-        <>
-          <text style={{ wrapMode: 'word', fg: textColor }}>
-            You started {IS_FREEBUFF ? 'Freebuff' : 'Anvil'} in a subdirectory of a git repo.
-          </text>
-          {gitRoot && onSwitchToGitRoot ? (
-            <TerminalLink
-              text={`Switch to git root (${displayGitRoot})`}
-              onActivate={onSwitchToGitRoot}
-              underlineOnHover={true}
-              lineWrap={true}
-              containerStyle={{ alignItems: 'flex-start' }}
-            />
-          ) : null}
-        </>
-      )
-    },
-  },
-}
-
-/**
- * Centralized component for rendering top banners.
- * Handles all banner types with consistent styling and behavior.
- */
-export const TopBanner = ({
-  gitRoot,
-  onSwitchToGitRoot,
-}: {
-  gitRoot?: string | null
-  onSwitchToGitRoot?: () => void
-}) => {
-  const theme = useTheme()
-  const activeTopBanner = useChatStore((state) => state.activeTopBanner)
-  const closeTopBanner = useChatStore((state) => state.closeTopBanner)
-  const inputMode = useChatStore((state) => state.inputMode)
-  const setInputMode = useChatStore((state) => state.setInputMode)
-
-  if (!activeTopBanner) {
-    return null
-  }
-
-  const config = TOP_BANNER_REGISTRY[activeTopBanner]
-  if (!config) {
-    return null
-  }
-
-  const handleClose = () => {
-    closeTopBanner()
-    // Reset input mode if it's related to this banner
-    if (config.relatedInputMode && inputMode === config.relatedInputMode) {
-      setInputMode('default')
-    }
-  }
-
-  const themeRecord = theme as unknown as Record<string, string>
-  const borderColor = themeRecord[config.borderColorKey]
-  const textColor = themeRecord[config.textColorKey]
-  const contentParams: BannerContentParams = {
-    gitRoot,
-    onSwitchToGitRoot,
-    textColor,
-    theme,
-  }
-  const content =
-    typeof config.content === 'function'
-      ? config.content(contentParams)
-      : config.content
-
-  if (!content) {
-    return null
-  }
-
-  const contentNode =
-    config.layout === 'custom' ? (
-      <box
-        style={{
-          flexDirection: 'column',
-          flexShrink: 1,
-          marginRight: 3,
-        }}
-      >
-        {content}
-      </box>
-    ) : (
-      <text
-        style={{
-          fg: textColor,
-          wrapMode: 'word',
-          flexShrink: 1,
-          marginRight: 3,
-        }}
-      >
-        {content}
-      </text>
-    )
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        borderStyle: 'single',
-        borderColor: borderColor,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 0,
-        paddingBottom: 0,
-        marginTop: 0,
-        marginBottom: 0,
-        flexShrink: 0,
-      }}
-      border={['top', 'bottom', 'left', 'right']}
-      customBorderChars={BORDER_CHARS}
-    >
-      {contentNode}
-      <Button onClick={handleClose}>
-        <text style={{ fg: borderColor }}>x</text>
-      </Button>
-    </box>
-  )
-}

package/src/components/usage-banner.tsx

@@ -1,244 +0,0 @@
-import { IS_FREEBUFF } from '../utils/constants'
-import { TextAttributes } from '@opentui/core'
-import { safeOpen } from '../utils/open-url'
-import React, { useEffect, useMemo } from 'react'
-
-import { BottomBanner } from './bottom-banner'
-import { Button } from './button'
-import { ProgressBar } from './progress-bar'
-import { getActivityQueryData } from '../hooks/use-activity-query'
-import { useSubscriptionQuery } from '../hooks/use-subscription-query'
-import { useTheme } from '../hooks/use-theme'
-import { useUpdatePreference } from '../hooks/use-update-preference'
-import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
-import { WEBSITE_URL } from '../login/constants'
-import { useChatStore } from '../state/chat-store'
-import { formatResetTime, formatResetTimeLong } from '../utils/time-format'
-import {
-  getBannerColorLevel,
-  generateLoadingBannerText,
-} from '../utils/usage-banner-state'
-
-
-const MANUAL_SHOW_TIMEOUT = 60 * 1000 // 1 minute
-const USAGE_POLL_INTERVAL = 30 * 1000 // 30 seconds
-
-/**
- * Format the renewal date for display
- */
-const formatRenewalDate = (dateStr: string | null): string => {
-  if (!dateStr) return ''
-  const resetDate = new Date(dateStr)
-  const today = new Date()
-  const isToday = resetDate.toDateString() === today.toDateString()
-  return isToday
-    ? resetDate.toLocaleString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-    })
-    : resetDate.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    })
-}
-
-export const UsageBanner = ({ showTime }: { showTime: number }) => {
-  if (IS_FREEBUFF) return null
-
-  const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
-  const setInputMode = useChatStore((state) => state.setInputMode)
-
-  // Fetch subscription data
-  const { data: subscriptionData, isLoading: isSubscriptionLoading } = useSubscriptionQuery({
-    refetchInterval: 30 * 1000,
-  })
-
-  const {
-    data: apiData,
-    isLoading,
-    isFetching,
-  } = useUsageQuery({
-    enabled: true,
-    refetchInterval: USAGE_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())
-
-  // Auto-hide after timeout
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setInputMode('default')
-    }, MANUAL_SHOW_TIMEOUT)
-    return () => clearTimeout(timer)
-  }, [showTime, setInputMode])
-
-  const theme = useTheme()
-
-  const activeData = apiData || cachedUsageData
-  const isLoadingData = isLoading || isFetching
-
-  // Show loading state immediately when banner is opened but data isn't ready
-  if (!activeData) {
-    return (
-      <BottomBanner
-        borderColorKey="muted"
-        text={generateLoadingBannerText(sessionCreditsUsed)}
-        onClose={() => setInputMode('default')}
-      />
-    )
-  }
-
-  const colorLevel = getBannerColorLevel(activeData.remainingBalance)
-  const renewalDate = activeData.next_quota_reset ? formatRenewalDate(activeData.next_quota_reset) : null
-
-  const activeSubscription = subscriptionData?.hasSubscription ? subscriptionData : null
-  const { rateLimit, subscription: subscriptionInfo, displayName } = activeSubscription ?? {}
-
-  return (
-    <BottomBanner
-      borderColorKey={isLoadingData ? 'muted' : colorLevel}
-      onClose={() => setInputMode('default')}
-    >
-      <box style={{ flexDirection: 'column', gap: 0 }}>
-        {activeSubscription && (
-          <SubscriptionUsageSection
-            displayName={displayName}
-            subscriptionInfo={subscriptionInfo}
-            rateLimit={rateLimit}
-            isLoading={isSubscriptionLoading}
-            fallbackToALaCarte={activeSubscription.fallbackToALaCarte ?? false}
-          />
-        )}
-
-        {/* Anvil credits section - structured layout */}
-        <Button
-          onClick={() => {
-            safeOpen(WEBSITE_URL + '/usage')
-          }}
-        >
-          <box style={{ flexDirection: 'column', gap: 0 }}>
-            {/* Main stats row */}
-            <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
-              <text style={{ fg: theme.muted }}>Session:</text>
-              <text style={{ fg: theme.foreground }}>{sessionCreditsUsed.toLocaleString()} credits</text>
-              <text style={{ fg: theme.muted }}>·</text>
-              <text style={{ fg: theme.muted }}>Remaining:</text>
-              {isLoadingData ? (
-                <text style={{ fg: theme.muted }}>...</text>
-              ) : (
-                <text style={{ fg: theme.foreground }}>
-                  {activeData.remainingBalance?.toLocaleString() ?? '?'} credits
-                </text>
-              )}
-
-              {!activeSubscription && renewalDate && (
-                <>
-                  <text style={{ fg: theme.muted }}>· Cycle:</text>
-                  <text style={{ fg: theme.foreground }}>{renewalDate}</text>
-                </>
-              )}
-            </box>
-            {/* See more link */}
-            <text style={{ fg: theme.muted }}>See more on {WEBSITE_URL} ↗</text>
-          </box>
-        </Button>
-      </box>
-    </BottomBanner>
-  )
-}
-
-interface SubscriptionUsageSectionProps {
-  displayName?: string
-  subscriptionInfo?: { tier: number }
-  rateLimit?: {
-    blockLimit?: number
-    blockUsed?: number
-    blockResetsAt?: string
-    weeklyPercentUsed: number
-    weeklyResetsAt: string
-  }
-  isLoading: boolean
-  fallbackToALaCarte: boolean
-}
-
-const SubscriptionUsageSection: React.FC<SubscriptionUsageSectionProps> = ({
-  displayName,
-  subscriptionInfo,
-  rateLimit,
-  isLoading,
-  fallbackToALaCarte,
-}) => {
-  const theme = useTheme()
-  const updatePreference = useUpdatePreference()
-
-  const handleToggleFallbackToALaCarte = () => {
-    updatePreference.mutate({ fallbackToALaCarte: !fallbackToALaCarte })
-  }
-
-  const blockPercent = useMemo(() => {
-    if (rateLimit?.blockLimit == null || rateLimit.blockUsed == null) return 100
-    return Math.max(0, 100 - Math.round((rateLimit.blockUsed / rateLimit.blockLimit) * 100))
-  }, [rateLimit?.blockLimit, rateLimit?.blockUsed])
-
-  const weeklyPercent = rateLimit ? 100 - rateLimit.weeklyPercentUsed : 100
-
-  return (
-    <box style={{ flexDirection: 'column', marginBottom: 1 }}>
-      <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text style={{ fg: theme.foreground }}>
-          💪 {displayName ?? 'Strong'} subscription
-        </text>
-        {subscriptionInfo?.tier && (
-          <text style={{ fg: theme.muted }}>${subscriptionInfo.tier}/mo</text>
-        )}
-      </box>
-      {isLoading ? (
-        <text style={{ fg: theme.muted }}>Loading subscription data...</text>
-      ) : rateLimit ? (
-        <box style={{ flexDirection: 'column', gap: 0 }}>
-          <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
-            <text style={{ fg: theme.muted }}>{`5-hour limit ${`${blockPercent}%`.padStart(4)} `}</text>
-            <ProgressBar value={blockPercent} width={12} showPercentage={false} />
-            <text style={{ fg: theme.muted }}>
-              {rateLimit.blockResetsAt
-                ? ` resets in ${formatResetTime(new Date(rateLimit.blockResetsAt))}`
-                : ''}
-            </text>
-          </box>
-          <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
-            <text style={{ fg: theme.muted }}>{`Weekly limit ${`${weeklyPercent}%`.padStart(4)} `}</text>
-            <ProgressBar value={weeklyPercent} width={12} showPercentage={false} />
-            <text style={{ fg: theme.muted }}>
-              {` resets in ${formatResetTimeLong(rateLimit.weeklyResetsAt)}`}
-            </text>
-          </box>
-        </box>
-      ) : null}
-      <box style={{ flexDirection: 'column', gap: 0, marginTop: 1 }}>
-        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-          <text style={{ fg: theme.muted }}>Credit spending:</text>
-          <text style={{ fg: fallbackToALaCarte ? theme.foreground : theme.warning }}>
-            {fallbackToALaCarte ? 'enabled' : 'disabled'}
-          </text>
-          <Button onClick={handleToggleFallbackToALaCarte} disabled={updatePreference.isPending}>
-            <text style={{ fg: theme.muted, attributes: TextAttributes.UNDERLINE }}>
-              {updatePreference.isPending ? '[updating...]' : `[${fallbackToALaCarte ? 'disable' : 'enable'}]`}
-            </text>
-          </Button>
-        </box>
-        <text style={{ fg: theme.muted }}>
-          {fallbackToALaCarte
-            ? 'Your credits will be used when subscription limits are reached.'
-            : 'Credits will NOT be spent when subscription limits are reached. Enable to use credits.'}
-        </text>
-      </box>
-    </box>
-  )
-}

package/src/components/user-error-banner.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-import { useTheme } from '../hooks/use-theme'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-interface UserErrorBannerProps {
-  error: string
-  title?: string
-}
-
-/** Displays runtime errors in the UI (not sent to LLM). */
-export const UserErrorBanner = React.memo(function UserErrorBanner({
-  error,
-  title,
-}: UserErrorBannerProps) {
-  const theme = useTheme()
-
-  // Handle empty and whitespace-only errors
-  const trimmedError = error.trim()
-  if (!trimmedError) {
-    return null
-  }
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        borderStyle: 'single',
-        borderColor: theme.error,
-        customBorderChars: BORDER_CHARS,
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 0,
-        paddingBottom: 0,
-        flexDirection: 'column',
-        gap: 0,
-        marginTop: 1,
-      }}
-    >
-      <box
-        style={{
-          flexDirection: 'column',
-          justifyContent: 'center',
-          gap: 0,
-        }}
-      >
-        <text style={{ fg: theme.error, wrapMode: 'word' }}>
-          {title ?? 'Error'}
-        </text>
-        <text style={{ fg: theme.foreground, wrapMode: 'word' }}>
-          {error}
-        </text>
-      </box>
-    </box>
-  )
-})