Tweak to model selection design

Author: jahooma

cli/src/components/freebuff-model-selector.tsx

@@ -7,7 +7,6 @@ import {
   DEFAULT_FREEBUFF_MODEL_ID,
   FALLBACK_FREEBUFF_MODEL_ID,
   FREEBUFF_MODELS,
-  FREEBUFF_PREMIUM_SESSION_LIMIT,
   getFreebuffDeploymentAvailabilityLabel,
   isFreebuffModelAvailable,
   isFreebuffPremiumModelId,
@@ -39,11 +38,12 @@ const FREEBUFF_MODEL_SELECTOR_MODEL_IDS = FREEBUFF_MODEL_SELECTOR_MODELS.map(
   (model) => model.id,
 )
 
-// Section grouping: premium models share one quota pool (header carries the
-// 0/5 counter); the unlimited model has none. Putting the tier on a section
-// header lets each row drop its redundant "Premium"/"Unlimited" chip. Empty
-// sections are filtered out so a model set with no premium (or no unlimited)
-// entries doesn't render an orphan header.
+// Section grouping: premium models share one quota pool, unlimited has none.
+// Putting the tier on a section header lets each row drop its redundant
+// "Premium"/"Unlimited" chip. The shared 0/5 counter lives in the page title
+// (rendered by the parent), not the section header — this picker is purely a
+// list of choices grouped by tier. Empty sections are filtered so a model set
+// with no premium (or no unlimited) entries doesn't render an orphan header.
 type Section = {
   key: 'premium' | 'unlimited'
   label: string
@@ -69,10 +69,6 @@ const SECTIONS: readonly Section[] = (
   ] satisfies readonly Section[]
 ).filter((section) => section.models.length > 0)
 
-function formatSessionUnits(units: number): string {
-  return Number.isInteger(units) ? String(units) : units.toFixed(1)
-}
-
 /**
  * Dual-purpose model picker:
  *   - Pre-chat landing (session 'none'): user hasn't joined any queue. Picking
@@ -136,18 +132,6 @@ export const FreebuffModelSelector: React.FC = () => {
       ? session.rateLimitsByModel
       : undefined
 
-  // All premium models share one quota pool: the server replicates the same
-  // snapshot under each premium model id, so any entry has the right count.
-  // Grab the first one (or 0 when the user has no usage and the map is
-  // absent) so the section header can render the single shared counter.
-  const sharedPremiumUsed = useMemo(
-    () =>
-      rateLimitsByModel
-        ? (Object.values(rateLimitsByModel)[0]?.recentCount ?? 0)
-        : 0,
-    [rateLimitsByModel],
-  )
-
   const BUTTON_CHROME = 4 // 2 border + 2 padding
   const NAME_GAP = 2 // spaces between name column and details column
 
@@ -366,11 +350,6 @@ export const FreebuffModelSelector: React.FC = () => {
     )
   }
 
-  // Counter goes amber-ish (theme.secondary) when the pool is exhausted so
-  // the limit reads as "you've hit it" rather than just another count.
-  const premiumExhausted = sharedPremiumUsed >= FREEBUFF_PREMIUM_SESSION_LIMIT
-  const counterColor = premiumExhausted ? theme.secondary : theme.muted
-
   return (
     <box
       style={{
@@ -389,16 +368,7 @@ export const FreebuffModelSelector: React.FC = () => {
             marginTop: sectionIdx === 0 ? 0 : 1,
           }}
         >
-          <text style={{ wrapMode: 'word' }}>
-            <span fg={theme.muted}>{section.label}</span>
-            {section.key === 'premium' && (
-              <span fg={counterColor}>
-                {'  ·  '}
-                {formatSessionUnits(sharedPremiumUsed)} /{' '}
-                {FREEBUFF_PREMIUM_SESSION_LIMIT} used today
-              </span>
-            )}
-          </text>
+          <text style={{ fg: theme.muted }}>{section.label}</text>
           {section.models.map(renderModelButton)}
         </box>
       ))}

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

@@ -16,6 +16,7 @@ import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { useTheme } from '../hooks/use-theme'
 import { exitFreebuffCleanly } from '../utils/freebuff-exit'
 import { getLogoAccentColor, getLogoBlockColor } from '../utils/theme-system'
+import { FREEBUFF_PREMIUM_SESSION_LIMIT } from '@codebuff/common/constants/freebuff-models'
 
 import type { FreebuffSessionResponse } from '../types/freebuff-session'
 import type { FreebuffIpPrivacySignal } from '@codebuff/common/types/freebuff-session'
@@ -263,6 +264,23 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
   // 'queued' (waiting room) or straight to 'active' (chat) if no wait.
   const isLanding = session?.status === 'none'
 
+  // Premium quota counter for the title line. All premium models share one
+  // pool; the server replicates the same snapshot under each premium model
+  // id, so any entry has the right count. Renders amber when exhausted so
+  // the limit reads as "you've hit it" rather than just another count.
+  const rateLimitsByModel =
+    session && 'rateLimitsByModel' in session
+      ? session.rateLimitsByModel
+      : undefined
+  const sharedPremiumUsed = rateLimitsByModel
+    ? (Object.values(rateLimitsByModel)[0]?.recentCount ?? 0)
+    : 0
+  const premiumLeft = Math.max(
+    0,
+    FREEBUFF_PREMIUM_SESSION_LIMIT - sharedPremiumUsed,
+  )
+  const premiumLeftColor = premiumLeft === 0 ? theme.secondary : theme.muted
+
   return (
     <box
       style={{
@@ -344,11 +362,14 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
                 gap: 0,
               }}
             >
-              <text
-                style={{ fg: theme.foreground, marginBottom: 1 }}
-                attributes={TextAttributes.BOLD}
-              >
-                Pick a model to start
+              <text style={{ marginBottom: 1, wrapMode: 'word' }}>
+                <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+                  Pick a model to start
+                </span>
+                <span fg={premiumLeftColor}>
+                  {'  ·  '}
+                  {premiumLeft} premium left today
+                </span>
               </text>
               <FreebuffModelSelector />
             </box>