@alumbwe/anvil 1.0.19 → 1.0.20

package/src/components/status-bar.tsx

@@ -0,0 +1,313 @@
+import { getAnvilModel } from '@anvil/common/constants/anvil-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 { useAnvilSessionProgress } from '../hooks/use-anvil-session-progress'
+import { useTheme } from '../hooks/use-theme'
+import { formatElapsedTime } from '../utils/format-elapsed-time'
+import {
+  ANVIL_COUNTDOWN_VISIBLE_MS,
+  formatAnvilSessionCountdown,
+  formatAnvilSessionRemaining,
+} from '../utils/anvil-session-display'
+
+import type { AnvilSessionResponse } from '../types/anvil-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
+  anvilSession: AnvilSessionResponse | null
+}
+
+export const StatusBar = ({
+  timerStartTime,
+  isAtBottom,
+  scrollToLatest,
+  statusIndicatorState,
+  onStop,
+  onEndSession,
+  anvilSession,
+}: 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 = useAnvilSessionProgress(anvilSession)
+  const isUnlimited =
+    anvilSession?.status === 'active' && !anvilSession.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 < ANVIL_COUNTDOWN_VISIBLE_MS
+          const modelName =
+            anvilSession?.status === 'active'
+              ? getAnvilModel(anvilSession.model).displayName
+              : null
+          return (
+            <span
+              fg={
+                isUnlimited
+                  ? theme.secondary
+                  : isUrgent
+                    ? theme.warning
+                    : theme.secondary
+              }
+            >
+              {modelName ? `${modelName} · ` : ''}
+              {isUnlimited
+                ? 'unlimited'
+                : formatAnvilSessionRemaining(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
+  // anvil 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' &&
+          anvilSession?.status === 'active' && (
+            <StatusActionButton onClick={onEndSession}>
+              ✕ End session
+            </StatusActionButton>
+          )}
+        {sessionProgress !== null &&
+          sessionProgress.remainingMs < ANVIL_COUNTDOWN_VISIBLE_MS &&
+          statusIndicatorState.kind !== 'idle' &&
+          !isUnlimited && (
+            <text style={{ wrapMode: 'none' }}>
+              <span fg={theme.warning} attributes={TextAttributes.BOLD}>
+                {formatAnvilSessionCountdown(sessionProgress.remainingMs)}
+              </span>
+            </text>
+          )}
+      </box>
+    </box>
+  )
+}

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

@@ -0,0 +1,206 @@
+import { SUBSCRIPTION_TIERS } from '@anvil/common/constants/subscription-plans'
+import { IS_ANVIL } 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_ANVIL) 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

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