@alumbwe/anvil 1.0.0

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

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

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

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

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

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

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