feat(accounts): refine card quota interactions

Author: linhay

frontend/src/features/accounts/components/AccountDetailPrimitives.tsx

@@ -15,15 +15,21 @@ const toneClassNames: Record<AccountDetailTone, string> = {
 };
 
 const sectionDensityClassNames: Record<AccountDetailSectionDensity, string> = {
-  standard: 'gap-4 py-5',
-  dense: 'gap-3 py-4',
-  hero: 'gap-5 py-6',
+  standard: 'gap-3 py-4',
+  dense: 'gap-2.5 py-3',
+  hero: 'gap-4 py-5',
 };
 
 const cardSectionDensityClassNames: Record<AccountDetailSectionDensity, string> = {
-  standard: 'gap-3 p-4',
-  dense: 'gap-3 p-3',
-  hero: 'gap-4 p-5',
+  standard: 'gap-2.5 p-3',
+  dense: 'gap-2 p-2.5',
+  hero: 'gap-3 p-4',
+};
+
+const sectionBodyDensityClassNames: Record<AccountDetailSectionDensity, string> = {
+  standard: 'space-y-3',
+  dense: 'space-y-2.5',
+  hero: 'space-y-4',
 };
 
 interface AccountDetailSectionProps {
@@ -58,26 +64,26 @@ export function AccountDetailSectionHeader({
   return (
     <div
       data-account-detail-section-header="standard"
-      className={`flex min-w-0 flex-col gap-3 border-b border-dashed border-[var(--border-color)] pb-3 sm:flex-row sm:items-start sm:justify-between ${className}`}
+      className={`flex min-w-0 flex-col gap-2 border-b border-dashed border-[var(--border-color)] pb-2 sm:flex-row sm:items-start sm:justify-between ${className}`}
     >
-      <div className="min-w-0 space-y-1.5">
+      <div className="min-w-0 space-y-1">
         {eyebrow ? (
-          <div className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-[0.22em] text-[var(--text-muted)]">
+          <div className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-[0.18em] text-[var(--text-muted)]">
             {eyebrow}
           </div>
         ) : null}
         {title ? (
-          <h3 className="text-[length:var(--font-size-ui-sm)] font-black uppercase italic leading-tight tracking-[0.08em] text-[var(--text-primary)]">
+          <h3 className="text-[length:var(--font-size-ui-xs)] font-black uppercase italic leading-snug tracking-[0.06em] text-[var(--text-primary)]">
             {title}
           </h3>
         ) : null}
         {meta ? (
-          <div className="break-words font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-[0.12em] text-[var(--text-muted)]">
+          <div className="break-words font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-[0.08em] text-[var(--text-muted)]">
             {meta}
           </div>
         ) : null}
       </div>
-      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-1.5">{actions}</div> : null}
     </div>
   );
 }
@@ -122,7 +128,7 @@ export function AccountDetailSection({
           actions={actions}
         />
       ) : null}
-      <div className="min-w-0 space-y-4">
+      <div data-account-detail-section-body="compact" className={`min-w-0 ${sectionBodyDensityClassNames[density]}`}>
         {children}
       </div>
     </section>

frontend/src/features/accounts/components/CardSections.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { MouseEvent } from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import type { ApiFormat, BillingDisplay } from '../../../types';
 import type { AccountRecord, QuotaDisplay, QuotaWindowDisplay, Translator } from '../model/types';
 import type { AccountUsageSummary } from '../model/accountUsage';
@@ -220,18 +220,37 @@ export function QuotaBars({ quotaDisplay, t }: QuotaBarsProps) {
   const refreshing = quotaDisplay.refreshing === true;
   const hasTokenProgress = windows.some(hasQuotaTokenProgress);
 
-  const handleToggleDisplayMode = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
+  const toggleDisplayMode = () => {
     if (!hasTokenProgress) return;
     setDisplayMode((current) => current === 'percent' ? 'tokens' : 'percent');
   };
 
+  const handleToggleDisplayMode = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    toggleDisplayMode();
+  };
+
+  const handleToggleDisplayModeKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    event.stopPropagation();
+    toggleDisplayMode();
+  };
+
   return (
-    <div
-      className="grid gap-2.5 border-b border-dashed border-[var(--border-color)] px-4 py-3"
+    <section
+      className={`grid gap-2.5 border-b border-dashed border-[var(--border-color)] px-4 py-3 ${
+        hasTokenProgress ? 'cursor-pointer transition-colors hover:bg-[var(--bg-surface)]' : ''
+      }`}
       aria-busy={refreshing}
+      aria-pressed={hasTokenProgress ? displayMode === 'tokens' : undefined}
+      role={hasTokenProgress ? 'button' : undefined}
+      tabIndex={hasTokenProgress ? 0 : undefined}
       data-quota-refreshing={refreshing ? 'true' : undefined}
       data-quota-display-mode={displayMode}
+      data-account-card-ignore-click={hasTokenProgress ? 'true' : undefined}
+      onClick={hasTokenProgress ? handleToggleDisplayMode : undefined}
+      onKeyDown={hasTokenProgress ? handleToggleDisplayModeKeyDown : undefined}
     >
       {windows.map((window) => {
         const resetTime = formatQuotaResetDisplayWithUnix(window.resetLabel, window.resetAtUnix);
@@ -253,21 +272,9 @@ export function QuotaBars({ quotaDisplay, t }: QuotaBarsProps) {
               <div className="min-w-0 truncate font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.12em] text-[var(--text-muted)]">
                 {window.label}
               </div>
-              {hasTokenProgress ? (
-                <button
-                  type="button"
-                  className="shrink-0 cursor-pointer text-right font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.08em] text-[var(--text-primary)] hover:underline"
-                  aria-pressed={displayMode === 'tokens'}
-                  title={`${formatQuotaPercent(window)} / ${formatQuotaTokenProgress(window)}`}
-                  onClick={handleToggleDisplayMode}
-                >
-                  {valueLabel}
-                </button>
-              ) : (
-                <div className="shrink-0 text-right font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.08em] text-[var(--text-primary)]">
-                  {valueLabel}
-                </div>
-              )}
+              <div className="shrink-0 text-right font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.08em] text-[var(--text-primary)]">
+                {valueLabel}
+              </div>
             </div>
             <div className="grid min-w-0 gap-1">
               <div
@@ -299,7 +306,7 @@ export function QuotaBars({ quotaDisplay, t }: QuotaBarsProps) {
           </div>
         );
       })}
-    </div>
+    </section>
   );
 }
 

frontend/src/features/accounts/tests/accountCardLayout.test.mjs

@@ -81,7 +81,7 @@ test('quota rows keep label and percentage together above the progress bar', asy
   const styleSource = await readFile(new URL('../../../style.css', import.meta.url), 'utf8');
 
   assert.match(source, /account-card-quota-heading/);
-  assert.match(source, /className="grid gap-2\.5 border-b/);
+  assert.match(source, /className=\{`grid gap-2\.5 border-b border-dashed/);
   assert.match(source, /className="account-card-quota-row grid min-w-0 gap-1\.5"/);
   assert.doesNotMatch(styleSource, /\.account-card-quota-row\s*\{[^}]*grid-template-columns:\s*4\.25rem/s);
 });
@@ -91,7 +91,12 @@ test('quota bars can toggle from percent to token progress when token counts exi
 
   assert.match(source, /useState<QuotaBarsDisplayMode>\('percent'\)/);
   assert.match(source, /data-quota-display-mode=\{displayMode\}/);
+  assert.match(source, /onClick=\{hasTokenProgress \? handleToggleDisplayMode : undefined\}/);
+  assert.match(source, /onKeyDown=\{hasTokenProgress \? handleToggleDisplayModeKeyDown : undefined\}/);
+  assert.match(source, /role=\{hasTokenProgress \? 'button' : undefined\}/);
+  assert.match(source, /data-account-card-ignore-click=\{hasTokenProgress \? 'true' : undefined\}/);
   assert.match(source, /setDisplayMode\(\(current\) => current === 'percent' \? 'tokens' : 'percent'\)/);
   assert.match(source, /formatQuotaTokenProgress\(window\)/);
   assert.match(source, /event\.stopPropagation\(\)/);
+  assert.doesNotMatch(source, /<button[\s\S]*handleToggleDisplayMode[\s\S]*<\/button>/);
 });

frontend/src/features/design-system/storyCatalog.test.mjs

@@ -327,6 +327,8 @@ test('account detail modules expose design-system anatomy and runtime states', a
   assert.match(primitivesSource, /AccountDetailModuleStackLayout/);
   assert.match(primitivesSource, /AccountDetailSectionHeader/);
   assert.match(primitivesSource, /data-account-detail-section-header="standard"/);
+  assert.match(primitivesSource, /data-account-detail-section-body="compact"/);
+  assert.doesNotMatch(primitivesSource, /<div className="min-w-0 space-y-4">/);
   assert.match(primitivesSource, /AccountDetailOverviewGrid/);
   assert.match(primitivesSource, /data-account-detail-overview-grid="runtime-evidence"/);
   assert.match(primitivesSource, /data-account-detail-overview-equal-height="true"/);

frontend/src/types.ts

@@ -46,6 +46,7 @@ export interface BillingDisplay {
   balances: { currency: string; totalBalance: string; grantedBalance: string; toppedUpBalance: string }[];
 }
 export type CredentialSource = 'auth-file' | 'api-key';
+export type AccountPlanType = 'free' | 'plus' | 'pro';
 
 export type ApiFormat = 'anthropic' | 'openai_chat' | 'openai_responses' | 'gemini_native';