@alumbwe/anvil 1.0.18 → 1.0.20

package/src/components/session-ended-banner.tsx

@@ -0,0 +1,226 @@
+import {
+  FALLBACK_ANVIL_MODEL_ID,
+  isAnvilPremiumModelId,
+  SUPPORTED_ANVIL_MODELS,
+  type AnvilModelOption,
+} from '@anvil/common/constants/anvil-models'
+import { getRateLimitsByModel } from '@anvil/common/types/anvil-session'
+import { TextAttributes } from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
+import React, { useCallback, useState } from 'react'
+
+import { Button } from './button'
+import {
+  refreshAnvilSession,
+  returnToAnvilLanding,
+} from '../hooks/use-anvil-session'
+import { useTheme } from '../hooks/use-theme'
+import { useAnvilModelStore } from '../state/anvil-model-store'
+import { useAnvilSessionStore } from '../state/anvil-session-store'
+import { formatSessionUnits } from '../utils/format-session-units'
+import { isPlainEnterKey } from '../utils/terminal-enter-detection'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+import type { KeyEvent } from '@opentui/core'
+
+interface SessionEndedBannerProps {
+  /** True while an agent request is still streaming under the server-side
+   *  grace window. Swaps the Enter-to-rejoin affordance for a "let it
+   *  finish" hint so the user doesn't abort their in-flight work. */
+  isStreaming: boolean
+}
+
+/**
+ * Replaces the chat input when the anvil session has ended. Captures
+ * Enter to start a new same-chat session. Esc returns to model selection
+ * once no in-flight work needs the global stream-interrupt handler.
+ */
+export const SessionEndedBanner: React.FC<SessionEndedBannerProps> = ({
+  isStreaming,
+}) => {
+  const theme = useTheme()
+  const [pendingAction, setPendingAction] = useState<
+    'landing' | 'same-chat' | null
+  >(null)
+
+  // All premium models share one daily pool; the server replicates the same
+  // snapshot under each premium model id, so the first entry has the right
+  // count.
+  const premiumQuota = useAnvilSessionStore(
+    (s) => Object.values(getRateLimitsByModel(s.session) ?? {})[0] ?? null,
+  )
+  const isQuotaExhausted = premiumQuota
+    ? premiumQuota.recentCount >= premiumQuota.limit
+    : false
+  const accessTier = useAnvilSessionStore((s) =>
+    s.session && 'accessTier' in s.session ? s.session.accessTier : 'full',
+  )
+  const quotaLabel = accessTier === 'limited' ? 'sessions' : 'premium sessions'
+  const bannerTitle = premiumQuota
+    ? `Session ended  ·  ${formatSessionUnits(premiumQuota.recentCount)} of ${premiumQuota.limit} ${quotaLabel} used today`
+    : 'Session ended'
+  const landingButtonLabel = 'Change model'
+  const landingPendingLabel = 'Opening model selection…'
+
+  // With the shared premium pool spent, rejoining on the still-selected
+  // premium model would be rejected server-side and dead-end on the terminal
+  // rate-limited screen. Continue on the unlimited fallback (DeepSeek V4
+  // Flash) instead — the same flip the landing picker's recommendation makes.
+  // Limited tier is excluded: its models all share the one exhausted pool, so
+  // there is nothing to flip to.
+  const selectedModel = useAnvilModelStore((s) => s.selectedModel)
+  const continueOnFallback =
+    isQuotaExhausted &&
+    accessTier !== 'limited' &&
+    isAnvilPremiumModelId(selectedModel)
+  const fallbackModel: AnvilModelOption | undefined =
+    SUPPORTED_ANVIL_MODELS.find((m) => m.id === FALLBACK_ANVIL_MODEL_ID)
+  const fallbackModelName = fallbackModel?.displayName ?? 'DeepSeek V4 Flash'
+  // Remind the user of the fallback's data-collection policy before they
+  // continue on it — the landing picker shows this caveat on the model row,
+  // but this banner is a one-keypress continue, so surface it here too.
+  const fallbackWarning = fallbackModel?.warning
+
+  // While a request is still streaming, restart is disabled: it would
+  // unmount <Chat> and abort the in-flight agent run. The promise is "we
+  // let the agent finish" — honoring that means Enter does nothing until
+  // the stream ends or the user hits Esc.
+  const canRestart = !isStreaming && pendingAction === null
+  const pickNewModel = useCallback(() => {
+    if (!canRestart) return
+    setPendingAction('landing')
+    // Drop back to the landing picker (status: 'none') so the user picks a
+    // model and hits Enter again to commit, instead of silently starting a
+    // new session. app.tsx swaps us into <AnvilLandingScreen> on the
+    // transition, unmounting this banner — no need to clear the pending state on
+    // success.
+    returnToAnvilLanding({ resetChat: true }).catch(() =>
+      setPendingAction(null),
+    )
+  }, [canRestart])
+
+  const startSameChatSession = useCallback(() => {
+    if (!canRestart) return
+    setPendingAction('same-chat')
+    if (continueOnFallback) {
+      // In-memory flip only (like the server-driven model flips): today's
+      // exhausted pool must not overwrite the user's saved preference. The
+      // rejoin POST reads the store at tick time, so it picks this up.
+      useAnvilModelStore
+        .getState()
+        .setSelectedModel(FALLBACK_ANVIL_MODEL_ID)
+    }
+    // Re-POST with the currently selected model and keep the chat/run state
+    // intact so the next prompt continues the same conversation.
+    refreshAnvilSession().catch(() => setPendingAction(null))
+  }, [canRestart, continueOnFallback])
+
+  useKeyboard(
+    useCallback(
+      (key: KeyEvent) => {
+        if (!canRestart) return
+        if (isPlainEnterKey(key)) {
+          key.preventDefault?.()
+          startSameChatSession()
+          return
+        }
+        if (key.name === 'escape') {
+          key.preventDefault?.()
+          pickNewModel()
+        }
+      },
+      [startSameChatSession, pickNewModel, canRestart],
+    ),
+  )
+
+  return (
+    <box
+      title={bannerTitle}
+      titleAlignment="center"
+      style={{
+        width: '100%',
+        borderStyle: 'single',
+        // Amber border doubles as the "you've hit the cap" signal now that
+        // the quota count lives in the title (which can't carry per-char
+        // color); muted otherwise.
+        borderColor: isQuotaExhausted ? theme.secondary : theme.muted,
+        customBorderChars: BORDER_CHARS,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexDirection: 'column',
+        gap: 0,
+      }}
+    >
+      {isStreaming ? (
+        <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+          Agent is wrapping up. Rejoin the wait room after it's finished.
+        </text>
+      ) : (
+        <box
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 2,
+          }}
+        >
+          <Button onClick={startSameChatSession}>
+            <text
+              style={{
+                fg:
+                  pendingAction === 'same-chat'
+                    ? theme.muted
+                    : theme.foreground,
+              }}
+              attributes={TextAttributes.BOLD}
+            >
+              {pendingAction === 'same-chat'
+                ? 'Starting…'
+                : continueOnFallback
+                  ? `Press Enter to continue with ${fallbackModelName}`
+                  : 'Press Enter to continue in a new session'}
+            </text>
+          </Button>
+          <box style={{ flexGrow: 1 }} />
+          <Button
+            onClick={pickNewModel}
+            style={{
+              borderStyle: 'single',
+              borderColor:
+                pendingAction === 'landing' ? theme.muted : theme.border,
+              customBorderChars: BORDER_CHARS,
+              paddingLeft: 1,
+              paddingRight: 1,
+            }}
+            border={['top', 'bottom', 'left', 'right']}
+          >
+            <text
+              style={{
+                fg:
+                  pendingAction === 'landing'
+                    ? theme.muted
+                    : theme.foreground,
+              }}
+            >
+              {pendingAction === 'landing' ? (
+                landingPendingLabel
+              ) : (
+                <>
+                  {landingButtonLabel}
+                  <span fg={theme.muted}>{'   Esc'}</span>
+                </>
+              )}
+            </text>
+          </Button>
+        </box>
+      )}
+      {!isStreaming && continueOnFallback && fallbackWarning && (
+        <text style={{ fg: theme.secondary, wrapMode: 'word' }}>
+          {`${fallbackModelName} ${fallbackWarning.toLowerCase()}.`}
+        </text>
+      )}
+    </box>
+  )
+}

package/src/components/shimmer-text.tsx

@@ -0,0 +1,248 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(max, Math.max(min, value))
+
+const normalizeHex = (hex: string): string | null => {
+  const trimmed = hex.trim()
+  const withoutHash = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed
+  if (withoutHash.length === 3) {
+    return withoutHash
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+  if (withoutHash.length === 6) {
+    return withoutHash
+  }
+  return null
+}
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  const normalized = normalizeHex(hex)
+  if (!normalized) return null
+  const r = parseInt(normalized.slice(0, 2), 16) / 255
+  const g = parseInt(normalized.slice(2, 4), 16) / 255
+  const b = parseInt(normalized.slice(4, 6), 16) / 255
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null
+  return { r, g, b }
+}
+
+const rgbToHsl = (
+  r: number,
+  g: number,
+  b: number,
+): { h: number; s: number; l: number } => {
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  let h = 0
+  let s = 0
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      default:
+        h = (r - g) / d + 4
+    }
+    h /= 6
+  }
+
+  return { h, s, l }
+}
+
+const hueToRgb = (p: number, q: number, t: number): number => {
+  let temp = t
+  if (temp < 0) temp += 1
+  if (temp > 1) temp -= 1
+  if (temp < 1 / 6) return p + (q - p) * 6 * temp
+  if (temp < 1 / 2) return q
+  if (temp < 2 / 3) return p + (q - p) * (2 / 3 - temp) * 6
+  return p
+}
+
+const hslToRgb = (
+  h: number,
+  s: number,
+  l: number,
+): { r: number; g: number; b: number } => {
+  if (s === 0) {
+    return { r: l, g: l, b: l }
+  }
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+
+  return {
+    r: hueToRgb(p, q, h + 1 / 3),
+    g: hueToRgb(p, q, h),
+    b: hueToRgb(p, q, h - 1 / 3),
+  }
+}
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  const toHex = (value: number) =>
+    Math.round(clamp(value, 0, 1) * 255)
+      .toString(16)
+      .padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+const generatePaletteFromPrimary = (
+  primaryColor: string,
+  size: number,
+  fallbackColor: string,
+): string[] => {
+  const baseRgb = hexToRgb(primaryColor)
+  if (!baseRgb) {
+    // If we can't parse the color, return a simple palette using the fallback
+    return Array.from({ length: size }, () => fallbackColor)
+  }
+
+  const { h, s, l } = rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)
+  const palette: string[] = []
+  const paletteSize = Math.max(6, Math.min(24, size))
+  const lightnessRange = 0.22
+
+  for (let i = 0; i < paletteSize; i++) {
+    const ratio = paletteSize === 1 ? 0.5 : i / (paletteSize - 1)
+    const offset = (0.5 - ratio) * 2 * lightnessRange
+    const adjustedLightness = clamp(l + offset, 0.08, 0.92)
+    // Keep full saturation for vibrant colors, only vary lightness
+    const adjustedSaturation = s
+    const { r, g, b } = hslToRgb(h, adjustedSaturation, adjustedLightness)
+    palette.push(rgbToHex(r, g, b))
+  }
+
+  return palette
+}
+
+export const ShimmerText = ({
+  text,
+  interval = 180,
+  colors,
+  primaryColor,
+}: {
+  text: string
+  interval?: number
+  colors?: string[]
+  primaryColor?: string
+}) => {
+  const theme = useTheme()
+  const [pulse, setPulse] = useState<number>(0)
+  const chars = text.split('')
+  const numChars = chars.length
+
+  useEffect(() => {
+    const pulseInterval = setInterval(() => {
+      setPulse((prev) => (prev + 1) % numChars)
+    }, interval)
+
+    return () => clearInterval(pulseInterval)
+  }, [interval, numChars])
+
+  const generateColors = (length: number, colorPalette: string[]): string[] => {
+    if (length === 0) return []
+    if (colorPalette.length === 0) {
+      return Array.from({ length }, () => theme.muted)
+    }
+    if (colorPalette.length === 1) {
+      return Array.from({ length }, () => colorPalette[0])
+    }
+    const generatedColors: string[] = []
+    for (let i = 0; i < length; i++) {
+      const ratio = length === 1 ? 0 : i / (length - 1)
+      const colorIndex = Math.min(
+        colorPalette.length - 1,
+        Math.floor(ratio * (colorPalette.length - 1)),
+      )
+      generatedColors.push(colorPalette[colorIndex])
+    }
+    return generatedColors
+  }
+
+  const palette = useMemo(() => {
+    if (colors && colors.length > 0) {
+      return colors
+    }
+    if (primaryColor) {
+      const paletteSize = Math.max(8, Math.min(20, Math.ceil(numChars * 1.5)))
+      return generatePaletteFromPrimary(primaryColor, paletteSize, theme.muted)
+    }
+    // Use theme shimmer color as default
+    const paletteSize = Math.max(8, Math.min(20, Math.ceil(numChars * 1.5)))
+    return generatePaletteFromPrimary(theme.info, paletteSize, theme.muted)
+  }, [colors, primaryColor, numChars, theme.info, theme.muted])
+
+  const generateAttributes = (length: number): number[] => {
+    const attributes: number[] = []
+    for (let i = 0; i < length; i++) {
+      const ratio = length <= 1 ? 0 : i / (length - 1)
+      if (ratio < 0.23) {
+        attributes.push(TextAttributes.BOLD)
+      } else if (ratio < 0.69) {
+        attributes.push(TextAttributes.NONE)
+      } else {
+        attributes.push(TextAttributes.DIM)
+      }
+    }
+    return attributes
+  }
+
+  const generatedColors = useMemo(
+    () => generateColors(numChars, palette),
+    [numChars, palette],
+  )
+  const attributes = useMemo(() => generateAttributes(numChars), [numChars])
+
+  const parts: { text: string; color: string; attr: number }[] = []
+  let currentColor = generatedColors[0]
+  let currentAttr = attributes[0]
+  let currentText = ''
+
+  chars.forEach((char, index) => {
+    const phase = (pulse - index + numChars) % numChars
+    const charColor = generatedColors[phase]
+    const charAttr = attributes[phase]
+
+    if (charColor === currentColor && charAttr === currentAttr) {
+      currentText += char
+    } else {
+      if (currentText) {
+        parts.push({
+          text: currentText,
+          color: currentColor,
+          attr: currentAttr,
+        })
+      }
+      currentText = char
+      currentColor = charColor
+      currentAttr = charAttr
+    }
+  })
+
+  if (currentText) {
+    parts.push({ text: currentText, color: currentColor, attr: currentAttr })
+  }
+
+  return (
+    <>
+      {parts.map((part, index) => (
+        <span key={index} fg={part.color} attributes={part.attr}>
+          {part.text}
+        </span>
+      ))}
+    </>
+  )
+}