Improve waiting room screen

Author: jahooma

cli/src/components/waiting-room-screen.tsx

@@ -3,6 +3,7 @@ import { useKeyboard, useRenderer } from '@opentui/react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { AdBanner } from './ad-banner'
+import { Button } from './button'
 import { ChoiceAdBanner } from './choice-ad-banner'
 import { ShimmerText } from './shimmer-text'
 import { endFreebuffSessionBestEffort } from '../hooks/use-freebuff-session'
@@ -74,26 +75,41 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
   })
 
   // Always enable ads in the waiting room — this is where monetization lives.
-  const { ad, adData, recordImpression } = useGravityAd({ enabled: true })
+  // forceStart bypasses the "wait for first user message" gate inside the hook,
+  // which would otherwise block ads here since no conversation exists yet.
+  const { ad, adData, recordImpression } = useGravityAd({
+    enabled: true,
+    forceStart: true,
+  })
+
+  // Release the seat + flush analytics before exit. Used by both Ctrl+C and
+  // the top-right X button so they always do the same cleanup.
+  const handleExit = useCallback(() => {
+    const cleanup = Promise.allSettled([
+      flushAnalytics(),
+      endFreebuffSessionBestEffort(),
+    ])
+    withTimeout(cleanup, EXIT_CLEANUP_TIMEOUT_MS, undefined).finally(() => {
+      process.exit(0)
+    })
+  }, [])
 
   // Ctrl+C exits. Stdin is in raw mode, so SIGINT never fires — the key comes
-  // through as a normal OpenTUI key event. Release the seat before exit so
-  // the next user in line doesn't have to wait for server-side expiry.
+  // through as a normal OpenTUI key event.
   useKeyboard(
-    useCallback((key: KeyEvent) => {
-      if (key.ctrl && key.name === 'c') {
-        key.preventDefault?.()
-        const cleanup = Promise.allSettled([
-          flushAnalytics(),
-          endFreebuffSessionBestEffort(),
-        ])
-        withTimeout(cleanup, EXIT_CLEANUP_TIMEOUT_MS, undefined).finally(() => {
-          process.exit(0)
-        })
-      }
-    }, []),
+    useCallback(
+      (key: KeyEvent) => {
+        if (key.ctrl && key.name === 'c') {
+          key.preventDefault?.()
+          handleExit()
+        }
+      },
+      [handleExit],
+    ),
   )
 
+  const [exitHover, setExitHover] = useState(false)
+
   // Elapsed-in-queue timer. Starts from `queuedAt` so it keeps ticking even if
   // the user wanders away and comes back.
   const queuedAtMs = useMemo(() => {
@@ -118,14 +134,45 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
         backgroundColor: theme.background,
       }}
     >
+      {/* Top-right exit affordance so mouse users have a clear way out even
+          when they don't know Ctrl+C works. width: '100%' is required for
+          justifyContent: 'flex-end' to actually push the X to the right. */}
+      <box
+        style={{
+          width: '100%',
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          paddingTop: 1,
+          paddingRight: 2,
+          flexShrink: 0,
+        }}
+      >
+        <Button
+          onClick={handleExit}
+          onMouseOver={() => setExitHover(true)}
+          onMouseOut={() => setExitHover(false)}
+          style={{ paddingLeft: 1, paddingRight: 1 }}
+        >
+          <text
+            style={{ fg: exitHover ? theme.foreground : theme.muted }}
+            attributes={exitHover ? TextAttributes.BOLD : TextAttributes.NONE}
+          >
+            ✕
+          </text>
+        </Button>
+      </box>
+
       <box
         style={{
           flexGrow: 1,
           flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'center',
+          // flex-end so the logo + title + info clump sits just above the ad,
+          // matching how chat anchors its header/messages to the input bar.
+          justifyContent: 'flex-end',
           paddingLeft: 2,
           paddingRight: 2,
+          paddingBottom: 1,
           gap: 1,
         }}
       >
@@ -165,9 +212,16 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
                 }}
               >
                 {session.position === 1 ? (
-                  <text style={{ fg: theme.primary, alignSelf: 'flex-start' }}>
-                    <ShimmerText text="Next in line" />
-                  </text>
+                  <>
+                    <text style={{ fg: theme.primary, alignSelf: 'flex-start' }}>
+                      <ShimmerText text="Next in line" />
+                    </text>
+                    <text style={{ fg: theme.muted, alignSelf: 'flex-start' }}>
+                      {session.queueDepth === 1
+                        ? 'just you in line right now'
+                        : `${session.queueDepth} people in line`}
+                    </text>
+                  </>
                 ) : (
                   <text style={{ fg: theme.foreground, alignSelf: 'flex-start' }}>
                     <span fg={theme.muted}>Position </span>

cli/src/hooks/use-gravity-ad.ts

@@ -96,8 +96,14 @@ function nextFromChoiceCache(ctrl: GravityController): AdResponse[] | null {
  *
  * Activity is tracked via the global activity-tracker module.
  */
-export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState => {
+export const useGravityAd = (options?: {
+  enabled?: boolean
+  /** Skip the "wait for first user message" gate. Used by the freebuff
+   *  waiting room, which has no conversation but still needs ads. */
+  forceStart?: boolean
+}): GravityAdState => {
   const enabled = options?.enabled ?? true
+  const forceStart = options?.forceStart ?? false
   const [ad, setAd] = useState<AdResponse | null>(null)
   const [adData, setAdData] = useState<AdData | null>(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -115,9 +121,12 @@ export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState =>
   const shouldHideAds = !enabled || (isVeryCompactHeight && !isFreeMode)
 
   // Use Zustand selector instead of manual subscription - only rerenders when value changes
-  const hasUserMessaged = useChatStore((s) =>
+  const hasUserMessagedStore = useChatStore((s) =>
     s.messages.some((m) => m.variant === 'user'),
   )
+  // forceStart lets callers (e.g. the waiting room) opt out of the
+  // "wait for the first user message" gate.
+  const shouldStart = forceStart || hasUserMessagedStore
 
   // Single consolidated controller ref
   const ctrlRef = useRef<GravityController>({
@@ -358,9 +367,9 @@ export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState =>
     })
   }, [])
 
-  // Start rotation when user sends first message
+  // Start rotation when user sends first message (or immediately if forced).
   useEffect(() => {
-    if (!hasUserMessaged || !getAdsEnabled() || shouldHideAds) return
+    if (!shouldStart || !getAdsEnabled() || shouldHideAds) return
 
     setIsLoading(true)
 
@@ -390,10 +399,10 @@ export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState =>
       clearInterval(id)
       ctrlRef.current.intervalId = null
     }
-  }, [hasUserMessaged, shouldHideAds])
+  }, [shouldStart, shouldHideAds])
 
   // Don't return ad when ads should be hidden
-  const visible = hasUserMessaged && !shouldHideAds
+  const visible = shouldStart && !shouldHideAds
   return {
     ad: visible ? ad : null,
     adData: visible ? adData : null,