@alumbwe/anvil 1.0.0

package/src/components/freebuff-referral-banner.tsx

@@ -0,0 +1,604 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Button } from './button'
+import { useCopyToClipboard } from './copy-button'
+import { FREEBUFF_GLM_V52_MODEL_ID } from '@anvil/common/constants/freebuff-models'
+import { REFERRAL_CLI_DAILY_SESSION_BONUS_CAP } from '@anvil/common/constants/freebuff-referral-tiers'
+import { pluralize } from '@anvil/common/util/string'
+
+import { startFreebuffSession } from '../hooks/use-freebuff-session'
+import { useNow } from '../hooks/use-now'
+import { useTheme } from '../hooks/use-theme'
+import { LOGIN_WEBSITE_URL } from '../login/constants'
+import { formatFreebuffPremiumResetCountdown } from '../utils/freebuff-premium-reset'
+import { safeOpen } from '../utils/open-url'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+import type { FreebuffAccessTier } from '@anvil/common/constants/freebuff-models'
+import type {
+  FreebuffGlmPromo,
+  FreebuffReferralInfo,
+} from '@anvil/common/types/freebuff-session'
+
+/** Build a friend's share link from the referral code. Points at the
+ *  /get-started page (CLI install walkthrough + hero + FAQs) rather than the
+ *  bare landing page; the `?ref=` code is still captured into the attribution
+ *  cookie there via the root layout's ReferralCodeCapture. When we know the
+ *  inviter's name we pass `?referrer=` too so the page greets the friend with
+ *  "X invited you to try Freebuff!". */
+function referralLink(code: string, referrerName: string | null): string {
+  const params = new URLSearchParams({ ref: code })
+  if (referrerName) params.set('referrer', referrerName)
+  return `${LOGIN_WEBSITE_URL}/get-started?${params.toString()}`
+}
+
+/** The referral tab and status section, not the broader Earn landing state. */
+const EARN_URL = `${LOGIN_WEBSITE_URL}/earn?tab=referrals#referral-status`
+const DASHBOARD_LABEL = 'Open referral status ↵'
+// Two columns of leading space separate the label from the copy control beside
+// it (the row itself has no gap), and they stay put in every state so keyboard
+// navigation never shifts the rest of the action row.
+const DASHBOARD_GUTTER = '  '
+const DASHBOARD_BUTTON_WIDTH = DASHBOARD_LABEL.length + DASHBOARD_GUTTER.length
+
+/** The temporary promo still needs its deadline even though the standing
+ * bounty pitch is already covered elsewhere in the picker and Earn page. */
+function BountyPromoLine({
+  theme,
+  promo,
+}: {
+  theme: ReturnType<typeof useTheme>
+  promo?: FreebuffGlmPromo
+}) {
+  if (!promo) return null
+  return (
+    <text style={{ wrapMode: 'word' }}>
+      <span fg={theme.success ?? theme.foreground}>
+        ✦ Promo: earn a bounty, spend up to {promo.dailySessions} a day
+      </span>
+      <span fg={theme.muted}> (ends {formatPromoEnd(promo.endsAt)})</span>
+    </text>
+  )
+}
+
+function DashboardButton({
+  theme,
+  focused,
+  onOpen,
+}: {
+  theme: ReturnType<typeof useTheme>
+  focused: boolean
+  onOpen: () => void
+}) {
+  // Focus is shown by the accent color alone, like the inline copy control it
+  // sits next to. A leading marker would have to eat the gutter that keeps the
+  // two labels apart, so a focused dashboard link ran flush into "Copy invite
+  // link" and read as overlapping it.
+  return (
+    <Button onClick={onOpen}>
+      <text style={{ wrapMode: 'word' }}>
+        <span
+          fg={focused ? theme.primary : theme.secondary}
+          attributes={focused ? TextAttributes.BOLD : TextAttributes.NONE}
+        >
+          {DASHBOARD_GUTTER}
+          {DASHBOARD_LABEL}
+        </span>
+      </text>
+    </Button>
+  )
+}
+
+/** Short, local date for the promo's end. The server sends the instant; every
+ * surface formats it, so none of them can drift from the real window. */
+function formatPromoEnd(endsAt: string): string {
+  const at = new Date(endsAt)
+  return Number.isNaN(at.getTime())
+    ? 'soon'
+    : at.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+// Navigation ids for the banner's keyboard-focusable buttons. The model
+// selector owns the landing keyboard handler and appends these after its rows.
+const COPY_FOCUS_ID = '__freebuff_referral_copy__'
+const GLM_FOCUS_ID = '__freebuff_referral_glm__'
+/** Opens the Earn page — bounties to claim, referrals to track, balance to
+ *  read. The CLI can open a browser (`safeOpen`), so this is a real button
+ *  rather than a URL the user has to select and paste. */
+const DASHBOARD_FOCUS_ID = '__freebuff_referral_dashboard__'
+const BUTTON_HORIZONTAL_CHROME = 6 // two border + four padding columns
+
+export interface FreebuffReferralFocusTarget {
+  id: string
+  activate: () => void
+}
+
+/** Below this menu width, the model action and referral/dashboard action group
+ * no longer fit beside each other. */
+const shouldStackFreebuffReferralActions = (width: number): boolean =>
+  width < 70
+
+const firstLabelThatFits = (
+  availableWidth: number,
+  labels: readonly string[],
+  chrome: number = BUTTON_HORIZONTAL_CHROME,
+): string =>
+  labels.find((label) => label.length + chrome <= availableWidth) ??
+  labels.at(-1)!
+
+/**
+ * A "copy invite link" control, in one of two weights. Flips to an accent
+ * "✔ Copied!" confirmation for a couple seconds after a successful copy in
+ * both. Presentational: the copy action and copied flag are owned by the
+ * banner so the same action can be fired by keyboard navigation from the
+ * model picker.
+ *
+ *   - 'bordered' — a rounded box that reads as a button. Used inside the
+ *     unlocked GLM card, where it sits beside the "Use GLM 5.2 ↵" button and
+ *     has to match it.
+ *   - 'inline' — no box; focus/hover shown by color alone, exactly like the
+ *     picker's "See all N models" toggle. Used in the two LOCKED states,
+ *     which render on the landing screen directly under the recommended card:
+ *     a second bordered box there competes with the hero for the eye, and the
+ *     hero is what Enter actually does. Sits one row down (like the toggle) so
+ *     whitespace, not a border, separates it from the pitch above — and rests
+ *     at `foreground` rather than `muted`, since unlike the toggle it is
+ *     adjacent to muted body copy it must not blend into.
+ */
+const CopyInviteLinkButton: React.FC<{
+  isCopied: boolean
+  focused: boolean
+  onCopy: () => void
+  availableWidth: number
+  labels?: readonly string[]
+  variant?: 'bordered' | 'inline'
+}> = ({
+  isCopied,
+  focused,
+  onCopy,
+  availableWidth,
+  labels = ['⎘ Copy invite link', '⎘ Copy link', '⎘ Copy'],
+  variant = 'bordered',
+}) => {
+  const theme = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+  const inline = variant === 'inline'
+  // Borderless labels spend no columns on chrome, so they fit at widths the
+  // boxed variant would have had to abbreviate at.
+  const chrome = inline ? 0 : BUTTON_HORIZONTAL_CHROME
+  const label = firstLabelThatFits(availableWidth, labels, chrome)
+  const copiedLabel = firstLabelThatFits(
+    availableWidth,
+    ['✔ Copied!', '✔'],
+    chrome,
+  )
+  const highlighted = isCopied || focused || isHovered
+
+  if (inline) {
+    return (
+      <Button
+        id={COPY_FOCUS_ID}
+        onClick={onCopy}
+        onMouseOver={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+        style={{ flexShrink: 0 }}
+      >
+        <text style={{ wrapMode: 'none' }}>
+          <span
+            fg={highlighted ? theme.primary : theme.foreground}
+            attributes={
+              isCopied || focused ? TextAttributes.BOLD : TextAttributes.NONE
+            }
+          >
+            {isCopied ? copiedLabel : label}
+          </span>
+        </text>
+      </Button>
+    )
+  }
+
+  // Keyboard focus and mouse hover share the highlighted look; a keyboard-
+  // focused row gets the brighter accent border so it matches the picker's
+  // focused-row treatment above it.
+  const borderColor = isCopied
+    ? theme.primary
+    : focused
+      ? theme.primary
+      : isHovered
+        ? theme.foreground
+        : theme.border
+  const fg = isCopied
+    ? theme.primary
+    : focused || isHovered
+      ? theme.foreground
+      : theme.muted
+
+  return (
+    <Button
+      id={COPY_FOCUS_ID}
+      onClick={onCopy}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseOut={() => setIsHovered(false)}
+      border
+      borderStyle="rounded"
+      borderColor={borderColor}
+      customBorderChars={BORDER_CHARS}
+      style={{
+        paddingLeft: 2,
+        paddingRight: 2,
+        backgroundColor: 'transparent',
+        // Hug the label and never let a width-constrained row squash the
+        // bordered box (which would clip the label and mangle the border).
+        flexShrink: 0,
+      }}
+    >
+      <text style={{ wrapMode: 'none' }}>
+        <span fg={fg}>{isCopied ? copiedLabel : label}</span>
+      </text>
+    </Button>
+  )
+}
+
+/**
+ * Advertises the "invite friends" reward on the landing model screen. The
+ * reward — and the presentation — depends on the session's access tier:
+ *
+ *   - LIMITED tier: referrals earn a daily free-session bonus (not GLM). One
+ *     quiet muted line ("refer friends → more sessions per day") + the inline
+ *     copy control, so it advertises the perk without crowding the picker.
+ *   - FULL tier, UNLOCKED (you have GLM sessions today): a flashy accent-
+ *     bordered card with your remaining sessions and a prominent "Use GLM 5.2 ↵"
+ *     launch button, so the reward feels earned and inviting.
+ *   - FULL tier, LOCKED (no GLM sessions yet): a single quiet muted line
+ *     inviting referrals.
+ *
+ * Both LOCKED states render on the landing screen under the recommended model
+ * card, so their copy control is borderless — the hero card stays the only
+ * bordered element there. The UNLOCKED card is a screen of its own making: the
+ * reward is earned, so it gets a box and boxed buttons.
+ *
+ * Every locked-state pitch is sized to fit its tier's card width on ONE line
+ * (the banner wraps at `buttonOuterWidth`, not the terminal width) and ends
+ * in a colon that hands off to the inline copy control below it. Now that the
+ * control is borderless it no longer announces itself as a button, so the
+ * colon is what carries the eye down to it. The one exception is the
+ * limited-tier at-cap line: referring more earns nothing there, so it ends
+ * flat rather than pointing at an action that would not pay off.
+ *
+ * Renders nothing unless the server attached a `referral` block, so
+ * pre-referral-code users never see it.
+ */
+interface FreebuffReferralBannerProps {
+  width: number
+  referral: FreebuffReferralInfo
+  /** A live GLM promo, or undefined. Undefined is the ordinary state. */
+  glmPromo?: FreebuffGlmPromo
+  accessTier: FreebuffAccessTier
+  focusedId: string
+  onFocusTargetsChange: (targets: FreebuffReferralFocusTarget[]) => void
+}
+
+export const FreebuffReferralBanner: React.FC<FreebuffReferralBannerProps> = ({
+  width,
+  referral,
+  glmPromo,
+  accessTier,
+  focusedId,
+  onFocusTargetsChange,
+}) => {
+  const theme = useTheme()
+  const now = useNow(60_000)
+  const [joining, setJoining] = useState(false)
+  const joiningRef = useRef(false)
+  const [glmHovered, setGlmHovered] = useState(false)
+  const copyFocused = focusedId === COPY_FOCUS_ID
+  const glmFocused = focusedId === GLM_FOCUS_ID
+  const dashboardFocused = focusedId === DASHBOARD_FOCUS_ID
+
+  const useGlm = useCallback(() => {
+    if (joiningRef.current) return
+    joiningRef.current = true
+    setJoining(true)
+    startFreebuffSession(FREEBUFF_GLM_V52_MODEL_ID).finally(() => {
+      joiningRef.current = false
+      setJoining(false)
+    })
+  }, [])
+
+  const link = referralLink(referral.code, referral.referrerName)
+  const { isCopied, copy } = useCopyToClipboard(link)
+
+  // Register this banner's buttons as keyboard focus targets so the model
+  // selector's arrow navigation flows from "see all models" into them (and
+  // wraps back up). Locked states show copy then dashboard; the unlocked card
+  // leads with "Use GLM 5.2", then copy and dashboard.
+  // A limited-tier user can now hold GLM sessions too — bounty grants are
+  // redeemable in every region — so the unlocked card is keyed on the balance
+  // alone rather than on the tier.
+  const isLocked = (referral.weeklySessionsRemaining ?? 0) <= 0
+  const openDashboard = useCallback(() => {
+    void safeOpen(EARN_URL)
+  }, [])
+  const lockedReferralActions = (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 0,
+        marginTop: 1,
+        flexShrink: 0,
+      }}
+    >
+      <CopyInviteLinkButton
+        isCopied={isCopied}
+        focused={copyFocused}
+        onCopy={copy}
+        availableWidth={Math.max(0, width - DASHBOARD_BUTTON_WIDTH)}
+        variant="inline"
+      />
+      <DashboardButton
+        theme={theme}
+        focused={dashboardFocused}
+        onOpen={openDashboard}
+      />
+    </box>
+  )
+
+  useEffect(() => {
+    onFocusTargetsChange(
+      isLocked
+        ? [
+            { id: COPY_FOCUS_ID, activate: copy },
+            { id: DASHBOARD_FOCUS_ID, activate: openDashboard },
+          ]
+        : [
+            { id: GLM_FOCUS_ID, activate: useGlm },
+            { id: COPY_FOCUS_ID, activate: copy },
+            { id: DASHBOARD_FOCUS_ID, activate: openDashboard },
+          ],
+    )
+    return () => onFocusTargetsChange([])
+  }, [isLocked, copy, useGlm, openDashboard, onFocusTargetsChange])
+
+  const { qualifiedCount, githubLinked } = referral
+
+  // LIMITED tier: referrals earn a daily free-session bonus, not GLM. Keep it
+  // quiet — one line advertising the perk + the share button below it, with the
+  // earned bonus (capped) shown as progress. `qualifiedCount` is the capped
+  // bonus sessions/day already earned.
+  // ...unless they hold bounty-earned GLM sessions, which fall through to the
+  // shared unlocked card below.
+  if (accessTier === 'limited' && isLocked) {
+    const atCap = qualifiedCount >= REFERRAL_CLI_DAILY_SESSION_BONUS_CAP
+    return (
+      <box
+        style={{
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: 0,
+          marginTop: 1,
+          // Never let a height-starved landing column squash the banner — that
+          // would draw the copy control on top of the pitch line above it.
+          flexShrink: 0,
+        }}
+      >
+        <text style={{ wrapMode: 'word' }}>
+          <span fg={theme.muted}>✦ </span>
+          {qualifiedCount > 0 ? (
+            <>
+              <span fg={theme.foreground}>
+                +{pluralize(qualifiedCount, 'session')}/day
+              </span>
+              <span fg={theme.muted}>
+                {' '}
+                from referrals
+                {atCap
+                  ? ''
+                  : ` · refer more (${qualifiedCount}/${REFERRAL_CLI_DAILY_SESSION_BONUS_CAP}):`}
+              </span>
+            </>
+          ) : (
+            <span fg={theme.muted}>
+              Refer friends to unlock more free sessions per day:
+            </span>
+          )}
+        </text>
+        {lockedReferralActions}
+        <BountyPromoLine theme={theme} promo={glmPromo} />
+      </box>
+    )
+  }
+
+  // FULL tier: GLM 5.2 reward. The GLM-only fields are always present on a
+  // full-tier block from the server; default defensively for the wire type.
+  const weeklySessionsRemaining = referral.weeklySessionsRemaining ?? 0
+  const resetsIn = formatFreebuffPremiumResetCountdown(
+    referral.resetAt ? new Date(referral.resetAt) : new Date(now),
+    now,
+    {
+      withDays: true,
+    },
+  )
+
+  // NOT USABLE: keep it quiet — one line that advertises the reward, with the
+  // share link as a clearly-clickable button below it. Message adapts to *why*
+  // it's locked — no referrals yet vs. today's sessions already spent.
+  if (weeklySessionsRemaining <= 0) {
+    return (
+      <box
+        style={{
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: 0,
+          marginTop: 1,
+          // Never let a height-starved landing column squash the banner — that
+          // would draw the copy control on top of the pitch line above it.
+          flexShrink: 0,
+        }}
+      >
+        <text style={{ wrapMode: 'word' }}>
+          <span fg={theme.muted}>✦ </span>
+          {qualifiedCount > 0 ? (
+            <>
+              <span fg={theme.foreground}>GLM 5.2</span>
+              <span fg={theme.muted}>
+                {' '}
+                refills in {resetsIn} · refer more ({qualifiedCount} earned):
+              </span>
+            </>
+          ) : (
+            <>
+              <span fg={theme.muted}>Refer friends → </span>
+              <span fg={theme.foreground}>GLM 5.2</span>
+              <span fg={theme.muted}>, top open-source model:</span>
+            </>
+          )}
+        </text>
+        {lockedReferralActions}
+        <BountyPromoLine theme={theme} promo={glmPromo} />
+      </box>
+    )
+  }
+
+  // USABLE: flashy accent card. Round the (possibly fractional) remaining up to
+  // whole sessions for a clean count — an early-ended session leaves a fraction
+  // that the user can still spend, so never show 0 here.
+  const sessionsLeft = Math.max(1, Math.ceil(weeklySessionsRemaining))
+  const stackActions = shouldStackFreebuffReferralActions(width)
+  const actionRowWidth = width - 4 // card border + horizontal padding
+  const glmLabel = firstLabelThatFits(actionRowWidth, [
+    '▶ Use GLM 5.2 ↵',
+    '▶ GLM 5.2',
+    '▶ GLM',
+  ])
+  const inviteAvailableWidth = stackActions
+    ? actionRowWidth - DASHBOARD_BUTTON_WIDTH
+    : actionRowWidth -
+      (glmLabel.length + BUTTON_HORIZONTAL_CHROME) -
+      2 -
+      DASHBOARD_BUTTON_WIDTH
+  // No "max earned" state: the reward is uncapped, so inviting always adds
+  // another daily session.
+  const inviteLabels = [
+    `⎘ Invite for +1/day (${qualifiedCount} earned)`,
+    '⎘ Invite +1/day',
+    '⎘ Invite',
+  ]
+  const githubLabel =
+    actionRowWidth >=
+    'Signed up with Google? Connect GitHub to qualify ↗'.length
+      ? 'Signed up with Google? Connect GitHub to qualify ↗'
+      : 'Connect GitHub to qualify ↗'
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 0,
+        paddingLeft: 1,
+        paddingRight: 1,
+        borderStyle: 'rounded',
+        borderColor: theme.muted,
+        marginTop: 1,
+        width,
+        // Never let a height-starved landing column squash the card — that
+        // would draw the bordered action buttons on top of the status line.
+        flexShrink: 0,
+      }}
+      border={['top', 'bottom', 'left', 'right']}
+      title=" ✦ GLM 5.2 unlocked "
+      titleAlignment="left"
+    >
+      <text style={{ wrapMode: 'word' }}>
+        <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+          {pluralize(sessionsLeft, 'session')}
+        </span>
+        <span fg={theme.foreground}> available today</span>
+        <span fg={theme.muted}> · resets in {resetsIn}</span>
+      </text>
+
+      <box
+        style={{
+          flexDirection: stackActions ? 'column' : 'row',
+          alignItems: stackActions ? 'flex-start' : 'center',
+          gap: stackActions ? 0 : 2,
+        }}
+      >
+        <Button
+          id={GLM_FOCUS_ID}
+          onClick={useGlm}
+          onMouseOver={() => setGlmHovered(true)}
+          onMouseOut={() => setGlmHovered(false)}
+          border
+          borderStyle="rounded"
+          // Standard button treatment: muted border at rest, green when
+          // keyboard-focused, brighter on hover — same scheme as the
+          // "Copy invite link" button below it.
+          borderColor={
+            glmFocused
+              ? theme.primary
+              : glmHovered
+                ? theme.foreground
+                : theme.border
+          }
+          customBorderChars={BORDER_CHARS}
+          style={{
+            paddingLeft: 2,
+            paddingRight: 2,
+            backgroundColor: 'transparent',
+          }}
+        >
+          <text style={{ wrapMode: 'none' }}>
+            <span
+              fg={
+                joining
+                  ? theme.muted
+                  : glmFocused || glmHovered
+                    ? theme.foreground
+                    : theme.muted
+              }
+              attributes={TextAttributes.BOLD}
+            >
+              {joining ? 'Starting…' : glmLabel}
+            </span>
+          </text>
+        </Button>
+        <box
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 0,
+            flexShrink: 0,
+          }}
+        >
+          <CopyInviteLinkButton
+            isCopied={isCopied}
+            focused={copyFocused}
+            onCopy={copy}
+            availableWidth={inviteAvailableWidth}
+            labels={inviteLabels}
+          />
+          <DashboardButton
+            theme={theme}
+            focused={dashboardFocused}
+            onOpen={openDashboard}
+          />
+        </box>
+      </box>
+
+      <BountyPromoLine theme={theme} promo={glmPromo} />
+
+      {!githubLinked && (
+        <Button
+          onClick={() => void safeOpen(`${LOGIN_WEBSITE_URL}/web/settings`)}
+        >
+          <text style={{ wrapMode: 'word' }}>
+            <span fg={theme.secondary}>{githubLabel}</span>
+          </text>
+        </Button>
+      )}
+    </box>
+  )
+}

package/src/components/freebuff-superseded-screen.tsx

@@ -0,0 +1,62 @@
+import { TextAttributes } from '@opentui/core'
+import React from 'react'
+
+import { useFreebuffCtrlCExit } from '../hooks/use-freebuff-ctrl-c-exit'
+import { useLogo } from '../hooks/use-logo'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+import { getLogoAccentColor, getLogoBlockColor } from '../utils/theme-system'
+
+/**
+ * Terminal state shown after a 409 session_superseded response. Another CLI on
+ * the same account rotated our instance id and we've stopped polling — the
+ * user needs to close the other instance and restart.
+ */
+export const FreebuffSupersededScreen: React.FC = () => {
+  const theme = useTheme()
+  const { contentMaxWidth } = useTerminalDimensions()
+  const blockColor = getLogoBlockColor(theme.name)
+  const accentColor = getLogoAccentColor(theme.name)
+  const { component: logoComponent } = useLogo({
+    availableWidth: contentMaxWidth,
+    accentColor,
+    blockColor,
+  })
+
+  useFreebuffCtrlCExit()
+
+  return (
+    <box
+      style={{
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+        backgroundColor: theme.background,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: 2,
+        paddingRight: 2,
+        gap: 1,
+      }}
+    >
+      <box style={{ marginBottom: 1 }}>{logoComponent}</box>
+      <text
+        style={{ fg: theme.foreground, marginBottom: 1 }}
+        attributes={TextAttributes.BOLD}
+      >
+        Another freebuff instance took over this account.
+      </text>
+      <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+        Only one CLI per account can be active at a time.
+      </text>
+      <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+        Close the other instance, then restart freebuff here.
+      </text>
+      <box style={{ marginTop: 1 }}>
+        <text style={{ fg: theme.muted }}>
+          Press <span fg={theme.primary}>Ctrl+C</span> to exit.
+        </text>
+      </box>
+    </box>
+  )
+}