@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/status-bar.tsx

@@ -1,313 +0,0 @@
-import { getFreebuffModel } from '@anvil/common/constants/freebuff-models'
-import { TextAttributes } from '@opentui/core'
-import React, { useEffect, useState } from 'react'
-
-import { Button } from './button'
-import { ScrollToBottomButton } from './scroll-to-bottom-button'
-import { ShimmerText } from './shimmer-text'
-import { TerminalThinkingOrb } from './terminal-thinking-orb'
-
-import { useFreebuffSessionProgress } from '../hooks/use-freebuff-session-progress'
-import { useTheme } from '../hooks/use-theme'
-import { formatElapsedTime } from '../utils/format-elapsed-time'
-import {
-  FREEBUFF_COUNTDOWN_VISIBLE_MS,
-  formatFreebuffSessionCountdown,
-  formatFreebuffSessionRemaining,
-} from '../utils/freebuff-session-display'
-
-import type { FreebuffSessionResponse } from '../types/freebuff-session'
-import type { StatusIndicatorState } from '../utils/status-indicator-state'
-
-/** A small status-bar action button with hover-bold styling. */
-const StatusActionButton = ({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode
-  onClick: () => void
-}) => {
-  const theme = useTheme()
-  const [hovered, setHovered] = useState(false)
-
-  return (
-    <Button
-      style={{ paddingLeft: 1, paddingRight: 1 }}
-      onClick={onClick}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-    >
-      <text>
-        <span
-          fg={theme.secondary}
-          attributes={hovered ? TextAttributes.BOLD : TextAttributes.NONE}
-        >
-          {children}
-        </span>
-      </text>
-    </Button>
-  )
-}
-
-const SHIMMER_INTERVAL_MS = 160
-
-interface StatusBarProps {
-  timerStartTime: number | null
-  isAtBottom: boolean
-  scrollToLatest: () => void
-  statusIndicatorState: StatusIndicatorState
-  onStop?: () => void
-  onEndSession?: () => void
-  freebuffSession: FreebuffSessionResponse | null
-}
-
-export const StatusBar = ({
-  timerStartTime,
-  isAtBottom,
-  scrollToLatest,
-  statusIndicatorState,
-  onStop,
-  onEndSession,
-  freebuffSession,
-}: StatusBarProps) => {
-  const theme = useTheme()
-  const [elapsedSeconds, setElapsedSeconds] = useState(0)
-
-  // Show timer when actively working (streaming or waiting for response) or paused (ask_user)
-  // This uses statusIndicatorState as the single source of truth for "is the LLM working?"
-  const shouldShowTimer =
-    statusIndicatorState?.kind === 'waiting' ||
-    statusIndicatorState?.kind === 'streaming' ||
-    statusIndicatorState?.kind === 'paused'
-
-  useEffect(() => {
-    if (!timerStartTime || !shouldShowTimer) {
-      setElapsedSeconds(0)
-      return
-    }
-
-    // When paused, don't update the timer - just keep the frozen value
-    if (statusIndicatorState?.kind === 'paused') {
-      // Calculate current elapsed time once and freeze it
-      const now = Date.now()
-      const elapsed = Math.floor((now - timerStartTime) / 1000)
-      setElapsedSeconds(elapsed)
-      return
-    }
-
-    const updateElapsed = () => {
-      const now = Date.now()
-      const elapsed = Math.floor((now - timerStartTime) / 1000)
-      setElapsedSeconds(elapsed)
-    }
-
-    updateElapsed()
-    const interval = setInterval(updateElapsed, 1000)
-
-    return () => clearInterval(interval)
-  }, [timerStartTime, shouldShowTimer, statusIndicatorState?.kind])
-
-  const sessionProgress = useFreebuffSessionProgress(freebuffSession)
-  const isUnlimited =
-    freebuffSession?.status === 'active' && !freebuffSession.rateLimit
-
-  const renderStatusIndicator = () => {
-    switch (statusIndicatorState.kind) {
-      case 'ctrlC':
-        return <span fg={theme.secondary}>Press Ctrl-C again to exit</span>
-
-      case 'clipboard':
-        // Use green color for feedback success messages
-        const isFeedbackSuccess =
-          statusIndicatorState.message.includes('Feedback sent')
-        return (
-          <span fg={isFeedbackSuccess ? theme.success : theme.primary}>
-            {statusIndicatorState.message}
-          </span>
-        )
-
-      case 'reconnected':
-        return <span fg={theme.success}>Back online</span>
-
-      case 'retrying':
-        return (
-          <span>
-            <TerminalThinkingOrb state="retrying" variant="spark" color={theme.warning} />{' '}
-            <ShimmerText text="hiccup — retrying..." primaryColor={theme.warning} />
-          </span>
-        )
-
-      case 'capacityWait':
-        return (
-          <span>
-            <TerminalThinkingOrb state="waiting" variant="spark" color={theme.warning} />{' '}
-            <ShimmerText
-              text="peak traffic — you're in line, starting soon..."
-              primaryColor={theme.warning}
-            />
-          </span>
-        )
-
-      case 'connecting':
-        return (
-          <span>
-            <TerminalThinkingOrb state="connecting" variant="spark" />{' '}
-            <ShimmerText text="dialing in..." />
-          </span>
-        )
-
-      case 'waiting':
-        return (
-          <span>
-            <TerminalThinkingOrb state="waiting" variant="spark" />{' '}
-            <ShimmerText
-              text="warming up..."
-              interval={SHIMMER_INTERVAL_MS}
-              primaryColor={theme.secondary}
-            />
-          </span>
-        )
-
-      case 'streaming':
-        return (
-          <span>
-            <TerminalThinkingOrb state="working" variant="spark" />{' '}
-            <ShimmerText
-              text="on it..."
-              interval={SHIMMER_INTERVAL_MS}
-              primaryColor={theme.secondary}
-            />
-          </span>
-        )
-
-      case 'paused':
-        return null
-
-      case 'idle':
-        if (sessionProgress !== null) {
-          const isUrgent =
-            sessionProgress.remainingMs < FREEBUFF_COUNTDOWN_VISIBLE_MS
-          const modelName =
-            freebuffSession?.status === 'active'
-              ? getFreebuffModel(freebuffSession.model).displayName
-              : null
-          return (
-            <span
-              fg={
-                isUnlimited
-                  ? theme.secondary
-                  : isUrgent
-                    ? theme.warning
-                    : theme.secondary
-              }
-            >
-              {modelName ? `${modelName} · ` : ''}
-              {isUnlimited
-                ? 'unlimited'
-                : formatFreebuffSessionRemaining(sessionProgress.remainingMs)}
-            </span>
-          )
-        }
-        return null
-    }
-  }
-
-  const renderElapsedTime = () => {
-    if (!shouldShowTimer || elapsedSeconds === 0) {
-      return null
-    }
-
-    return (
-      <span fg={theme.secondary}>
-        worked for {formatElapsedTime(elapsedSeconds)}
-      </span>
-    )
-  }
-
-  const statusIndicatorContent = renderStatusIndicator()
-  const elapsedTimeContent = renderElapsedTime()
-
-  // Show gray background when there's status indicator, timer, or when the
-  // freebuff session fill is visible (otherwise the fill would float over
-  // transparent space).
-  const hasContent =
-    statusIndicatorContent || elapsedTimeContent || sessionProgress !== null
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingLeft: 1,
-        paddingRight: 1,
-        gap: 1,
-        backgroundColor: hasContent ? theme.surface : 'transparent',
-      }}
-    >
-      {sessionProgress !== null && (
-        <box
-          style={{
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            bottom: 0,
-            // Fill anchors left and shrinks as time passes — the draining
-            // bar is the countdown; no separate numeric readout needed.
-            width: `${sessionProgress.fraction * 100}%`,
-            backgroundColor: theme.surfaceHover,
-          }}
-        />
-      )}
-      <box
-        style={{
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: 0,
-        }}
-      >
-        <text style={{ wrapMode: 'none' }}>{statusIndicatorContent}</text>
-      </box>
-
-      <box style={{ flexShrink: 0 }}>
-        {!isAtBottom && <ScrollToBottomButton onClick={scrollToLatest} />}
-      </box>
-
-      <box
-        style={{
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: 0,
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          gap: 1,
-        }}
-      >
-        <text style={{ wrapMode: 'none' }}>{elapsedTimeContent}</text>
-        {onStop &&
-          (statusIndicatorState.kind === 'waiting' ||
-            statusIndicatorState.kind === 'streaming') && (
-            <StatusActionButton onClick={onStop}>■ Esc</StatusActionButton>
-          )}
-        {onEndSession &&
-          statusIndicatorState.kind === 'idle' &&
-          freebuffSession?.status === 'active' && (
-            <StatusActionButton onClick={onEndSession}>
-              ✕ End session
-            </StatusActionButton>
-          )}
-        {sessionProgress !== null &&
-          sessionProgress.remainingMs < FREEBUFF_COUNTDOWN_VISIBLE_MS &&
-          statusIndicatorState.kind !== 'idle' &&
-          !isUnlimited && (
-            <text style={{ wrapMode: 'none' }}>
-              <span fg={theme.warning} attributes={TextAttributes.BOLD}>
-                {formatFreebuffSessionCountdown(sessionProgress.remainingMs)}
-              </span>
-            </text>
-          )}
-      </box>
-    </box>
-  )
-}

package/src/components/subscription-limit-banner.tsx

@@ -1,206 +0,0 @@
-import { SUBSCRIPTION_TIERS } from '@anvil/common/constants/subscription-plans'
-import { IS_FREEBUFF } from '../utils/constants'
-import { safeOpen } from '../utils/open-url'
-import React from 'react'
-
-import { Button } from './button'
-import { ProgressBar } from './progress-bar'
-import { useSubscriptionQuery } from '../hooks/use-subscription-query'
-import { useTheme } from '../hooks/use-theme'
-import { useUpdatePreference } from '../hooks/use-update-preference'
-import { useUsageQuery } from '../hooks/use-usage-query'
-import { WEBSITE_URL } from '../login/constants'
-import { useChatStore } from '../state/chat-store'
-import { formatResetTime } from '../utils/time-format'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-export const SubscriptionLimitBanner = () => {
-  if (IS_FREEBUFF) return null
-
-  const setInputMode = useChatStore((state) => state.setInputMode)
-  const theme = useTheme()
-
-  const { data: subscriptionData } = useSubscriptionQuery({
-    refetchInterval: 15 * 1000,
-  })
-
-  const { data: usageData } = useUsageQuery({
-    enabled: true,
-    refetchInterval: 30 * 1000,
-  })
-
-  const rateLimit = subscriptionData?.hasSubscription ? subscriptionData.rateLimit : undefined
-  const remainingBalance = usageData?.remainingBalance ?? 0
-  const hasAlaCarteCredits = remainingBalance > 0
-
-  // Determine if user can upgrade (not on highest tier)
-  const maxTier = Math.max(...Object.keys(SUBSCRIPTION_TIERS).map(Number))
-  const currentTier = subscriptionData?.hasSubscription ? subscriptionData.subscription.tier : 0
-  const canUpgrade = currentTier < maxTier
-
-  const fallbackToALaCarte = subscriptionData?.fallbackToALaCarte ?? false
-  const updatePreference = useUpdatePreference()
-
-  const handleToggleFallbackToALaCarte = () => {
-    updatePreference.mutate({ fallbackToALaCarte: !fallbackToALaCarte })
-  }
-
-  if (!subscriptionData || !rateLimit?.limited) {
-    return null
-  }
-
-  const { reason, weeklyPercentUsed, weeklyResetsAt: weeklyResetsAtStr, blockResetsAt: blockResetsAtStr } = rateLimit
-  const isWeeklyLimit = reason === 'weekly_limit'
-  const isBlockExhausted = reason === 'block_exhausted'
-  const weeklyRemaining = 100 - weeklyPercentUsed
-  const weeklyResetsAt = weeklyResetsAtStr ? new Date(weeklyResetsAtStr) : null
-  const blockResetsAt = blockResetsAtStr ? new Date(blockResetsAtStr) : null
-
-  const handleContinueWithCredits = () => {
-    setInputMode('default')
-  }
-
-  const handleBuyCredits = () => {
-    safeOpen(WEBSITE_URL + '/usage')
-  }
-
-  const handleUpgrade = () => {
-    safeOpen(WEBSITE_URL + '/subscribe')
-  }
-
-  const borderColor = isWeeklyLimit ? theme.error : theme.warning
-
-  return (
-    <box
-      style={{
-        width: '100%',
-        borderStyle: 'single',
-        borderColor,
-        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,
-        }}
-      >
-        {isWeeklyLimit ? (
-          <>
-            <text style={{ fg: theme.error, marginBottom: 1 }}>
-              🛑 Weekly limit reached
-            </text>
-            <text style={{ fg: theme.muted }}>
-              You've used all {rateLimit.weeklyLimit.toLocaleString()} credits for this week.
-            </text>
-            {weeklyResetsAt && (
-              <text style={{ fg: theme.muted }}>
-                Weekly usage resets in {formatResetTime(weeklyResetsAt)}
-              </text>
-            )}
-          </>
-        ) : isBlockExhausted ? (
-          <>
-            <text style={{ fg: theme.warning, marginBottom: 1 }}>
-              5 hour limit reached
-            </text>
-            {blockResetsAt && (
-              <text style={{ fg: theme.muted }}>
-                New session starts in {formatResetTime(blockResetsAt)}
-              </text>
-            )}
-          </>
-        ) : (
-          <text style={{ fg: theme.warning }}>
-            Subscription limit reached
-          </text>
-        )}
-
-        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1, marginTop: 0 }}>
-          <text style={{ fg: theme.muted }}>Weekly:</text>
-          <ProgressBar value={weeklyRemaining} width={12} showPercentage={false} />
-          <text style={{ fg: theme.muted }}>{weeklyPercentUsed}% used</text>
-        </box>
-
-        {hasAlaCarteCredits ? (
-          <box style={{ flexDirection: 'column', gap: 1, marginTop: 1 }}>
-            {fallbackToALaCarte ? (
-              <>
-                <text style={{ fg: theme.muted }}>
-                  ✓ Credit spending enabled. You can continue using your credits.
-                </text>
-                <box style={{ flexDirection: 'row', gap: 2 }}>
-                  <Button onClick={handleContinueWithCredits}>
-                    <text style={{ fg: theme.background, bg: theme.foreground }}>
-                      {' '}Continue with credits ({remainingBalance.toLocaleString()}){' '}
-                    </text>
-                  </Button>
-                  {canUpgrade ? (
-                    <Button onClick={handleUpgrade}>
-                      <text style={{ fg: theme.background, bg: theme.foreground }}>{' '}Upgrade Plan ↗{' '}</text>
-                    </Button>
-                  ) : (
-                    <Button onClick={handleBuyCredits}>
-                      <text style={{ fg: theme.background, bg: theme.muted }}>{' '}Buy Credits ↗{' '}</text>
-                    </Button>
-                  )}
-                </box>
-                <Button onClick={handleToggleFallbackToALaCarte} disabled={updatePreference.isPending}>
-                  <text style={{ fg: theme.muted }}>
-                    {updatePreference.isPending ? '[updating...]' : '[disable credit spending]'}
-                  </text>
-                </Button>
-              </>
-            ) : (
-              <>
-                <text style={{ fg: theme.warning }}>
-                  Credit spending is disabled. Enable it to continue.
-                </text>
-                <box style={{ flexDirection: 'row', gap: 2 }}>
-                  <Button onClick={handleToggleFallbackToALaCarte} disabled={updatePreference.isPending}>
-                    <text style={{ fg: theme.background, bg: theme.foreground }}>
-                      {updatePreference.isPending ? ' Enabling... ' : ' Enable Credit Spending '}
-                    </text>
-                  </Button>
-                  {canUpgrade ? (
-                    <Button onClick={handleUpgrade}>
-                      <text style={{ fg: theme.background, bg: theme.muted }}>{' '}Upgrade Plan ↗{' '}</text>
-                    </Button>
-                  ) : (
-                    <Button onClick={handleBuyCredits}>
-                      <text style={{ fg: theme.background, bg: theme.muted }}>{' '}Buy Credits ↗{' '}</text>
-                    </Button>
-                  )}
-                </box>
-                <text style={{ fg: theme.muted }}>
-                  You have {remainingBalance.toLocaleString()} credits available.
-                </text>
-              </>
-            )}
-          </box>
-        ) : (
-          <box style={{ flexDirection: 'row', gap: 2, marginTop: 1 }}>
-            <text style={{ fg: theme.muted }}>No a-la-carte credits available.</text>
-            {canUpgrade ? (
-              <Button onClick={handleUpgrade}>
-                <text style={{ fg: theme.background, bg: theme.muted }}>{' '}Upgrade Plan ↗{' '}</text>
-              </Button>
-            ) : (
-              <Button onClick={handleBuyCredits}>
-                <text style={{ fg: theme.background, bg: theme.muted }}>{' '}Buy Credits ↗{' '}</text>
-              </Button>
-            )}
-          </box>
-        )}
-      </box>
-    </box>
-  )
-}

package/src/components/suggested-prompts.tsx

@@ -1,184 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { useCallback, useState } from 'react'
-
-import { Button } from './button'
-import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
-import { useTheme } from '../hooks/use-theme'
-
-/** Minimum terminal width to reveal the full prompt preview on hover */
-const MIN_WIDTH_FOR_DESCRIPTION = 80
-/** Gap between the label column and the hover preview so they never touch */
-const LABEL_DESCRIPTION_GAP = 2
-
-export interface SuggestedPrompt {
-  /** Short text shown on the chip */
-  label: string
-  /** Full prompt submitted to the agent when clicked */
-  prompt: string
-}
-
-/** Metadata passed alongside the prompt when a suggestion is chosen */
-export interface SuggestedPromptSelection {
-  label: string
-  index: number
-}
-
-/**
- * First-time onboarding prompts. Kept short and broadly useful so a brand-new
- * user can get a feel for what the agent does with a single click.
- */
-export const DEFAULT_SUGGESTED_PROMPTS: SuggestedPrompt[] = [
-  {
-    label: 'Explain this codebase',
-    prompt:
-      'Give me a high-level overview of how this codebase is structured and what the main parts do.',
-  },
-  {
-    label: 'Find opportunities to refactor',
-    prompt:
-      'Look through my codebase for opportunities to refactor and simplify, and suggest the highest-impact ones.',
-  },
-  {
-    label: 'Improve my test coverage',
-    prompt:
-      'Analyze my test coverage and tell me where adding tests would have the most impact.',
-  },
-]
-
-interface SuggestedPromptLineProps {
-  prompt: SuggestedPrompt
-  index: number
-  isHovered: boolean
-  onSelect: (prompt: string, selection: SuggestedPromptSelection) => void
-  onHover: (label: string | null) => void
-  /** Fixed width of the label column so hover previews align across rows */
-  labelColumnWidth: number
-}
-
-const SuggestedPromptLine = ({
-  prompt,
-  index,
-  isHovered,
-  onSelect,
-  onHover,
-  labelColumnWidth,
-}: SuggestedPromptLineProps) => {
-  const theme = useTheme()
-  const { terminalWidth } = useTerminalDimensions()
-
-  const handleClick = useCallback(
-    () => onSelect(prompt.prompt, { label: prompt.label, index }),
-    [onSelect, prompt.prompt, prompt.label, index],
-  )
-  const handleMouseOver = useCallback(
-    () => onHover(prompt.label),
-    [onHover, prompt.label],
-  )
-  const handleMouseOut = useCallback(() => onHover(null), [onHover])
-
-  const iconColor = isHovered ? theme.primary : theme.muted
-  const labelColor = isHovered ? theme.primary : theme.foreground
-
-  // On hover, reveal the full prompt that will be sent so the short chip label
-  // doesn't hide what actually happens. Only when there's room for it.
-  const showDescription =
-    isHovered && terminalWidth >= MIN_WIDTH_FOR_DESCRIPTION
-  const labelLength = '→ '.length + prompt.label.length
-  const paddingSpaces = showDescription
-    ? ' '.repeat(Math.max(0, labelColumnWidth - labelLength))
-    : ''
-  const truncatedPrompt = showDescription
-    ? (() => {
-        const availableWidth = Math.max(0, terminalWidth - labelColumnWidth - 4)
-        return prompt.prompt.length > availableWidth
-          ? prompt.prompt.slice(0, availableWidth - 1) + '…'
-          : prompt.prompt
-      })()
-    : ''
-
-  return (
-    <box style={{ flexDirection: 'row', width: '100%' }}>
-      {/* Only the label itself is clickable */}
-      <Button
-        onClick={handleClick}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        style={{
-          flexShrink: 0,
-          flexGrow: 0,
-          backgroundColor: isHovered ? theme.surface : undefined,
-        }}
-      >
-        <text style={{ wrapMode: 'none' }}>
-          <span fg={iconColor}>→</span>
-          <span
-            fg={labelColor}
-            attributes={isHovered ? TextAttributes.BOLD : undefined}
-          >
-            {' '}
-            {prompt.label}
-          </span>
-        </text>
-      </Button>
-      {/* Non-clickable preview of the full prompt, aligned via padding */}
-      {showDescription && (
-        <box style={{ flexGrow: 1 }}>
-          <text style={{ wrapMode: 'none' }}>
-            <span fg={theme.muted} attributes={TextAttributes.ITALIC}>
-              {paddingSpaces}
-              {truncatedPrompt}
-            </span>
-          </text>
-        </box>
-      )}
-    </box>
-  )
-}
-
-interface SuggestedPromptsProps {
-  onSelect: (prompt: string, selection: SuggestedPromptSelection) => void
-  /** Limit the number of suggestions shown (e.g. on short terminals) */
-  maxItems?: number
-  prompts?: SuggestedPrompt[]
-}
-
-/**
- * A small block of clickable starter prompts shown to first-time users on an
- * empty chat, just above the input box. Clicking one submits it immediately.
- */
-export const SuggestedPrompts = ({
-  onSelect,
-  maxItems,
-  prompts = DEFAULT_SUGGESTED_PROMPTS,
-}: SuggestedPromptsProps) => {
-  const theme = useTheme()
-  const [hoveredLabel, setHoveredLabel] = useState<string | null>(null)
-
-  const items =
-    maxItems != null ? prompts.slice(0, Math.max(0, maxItems)) : prompts
-
-  if (items.length === 0) return null
-
-  // Shared label-column width so the hover previews line up across rows, plus
-  // a gap so the preview never touches even the longest label.
-  const labelColumnWidth =
-    Math.max(...items.map((p) => '→ '.length + p.label.length)) +
-    LABEL_DESCRIPTION_GAP
-
-  return (
-    <box style={{ flexDirection: 'column', paddingLeft: 1, paddingBottom: 1 }}>
-      <text style={{ fg: theme.muted }}>Try one of these:</text>
-      {items.map((prompt, index) => (
-        <SuggestedPromptLine
-          key={prompt.label}
-          prompt={prompt}
-          index={index}
-          isHovered={hoveredLabel === prompt.label}
-          onSelect={onSelect}
-          onHover={setHoveredLabel}
-          labelColumnWidth={labelColumnWidth}
-        />
-      ))}
-    </box>
-  )
-}