fix: avoid live session overview layout shift

Author: linhay

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

@@ -94,7 +94,7 @@ test('account cards skip unsupported quota placeholder modules when telemetry is
   assert.doesNotMatch(source, /UnsupportedQuotaPlaceholder/);
   assert.match(source, /<QuotaBars quotaDisplay=\{resolvedQuotaDisplay\} t=\{t\} \/>/);
   assert.match(source, /<BillingBalance billing=\{billing\} \/>/);
-  assert.match(source, /<RateLimitGuard rateLimitStatus=\{rateLimitStatus\} usageSummary=\{usageSummary\} t=\{t\} \/>/);
+  assert.match(source, /<RateLimitGuard rateLimitStatus=\{rateLimitStatus\} usageSummary=\{usageSummary\} refreshing=\{rateLimitRefreshing \|\| usageRefreshing\} t=\{t\} \/>/);
 });
 
 test('quota bars surface stale runtime error reason on cards and details', async () => {
@@ -136,7 +136,7 @@ test('full attribution cards do not render the retired traffic metrics module',
   assert.doesNotMatch(sectionsSource, /buildTrafficCurveState|AccountTrafficFlowState|TrafficChart|TrafficSummary/);
   assert.doesNotMatch(cardSource, /TrafficMetricsModule|TrafficSection|UsageMetrics/);
   assert.match(cardSource, /<QuotaBars quotaDisplay=\{resolvedQuotaDisplay\} t=\{t\} \/>/);
-  assert.match(cardSource, /<RateLimitGuard rateLimitStatus=\{rateLimitStatus\} usageSummary=\{usageSummary\} t=\{t\} \/>/);
+  assert.match(cardSource, /<RateLimitGuard rateLimitStatus=\{rateLimitStatus\} usageSummary=\{usageSummary\} refreshing=\{rateLimitRefreshing \|\| usageRefreshing\} t=\{t\} \/>/);
 });
 
 test('account card footer actions use a solid top divider with two equal columns', async () => {

frontend/src/features/codex-live-sessions/components/CodexLiveSessionDetail.tsx

@@ -152,7 +152,7 @@ function SessionOverview({
   return (
     <section className="grid min-w-0 gap-5" data-codex-live-overview="true">
       <div
-        className="grid min-w-0 gap-3 lg:grid-cols-[minmax(0,1.25fr)_minmax(9rem,0.65fr)_minmax(9rem,0.65fr)_minmax(9rem,0.65fr)]"
+        className="relative grid min-w-0 gap-3 lg:grid-cols-[minmax(0,1.25fr)_minmax(9rem,0.65fr)_minmax(9rem,0.65fr)_minmax(9rem,0.65fr)]"
         data-codex-overview-summary-cards="true"
       >
         <section className="grid min-h-[5.75rem] min-w-0 content-between border border-[color:color-mix(in_srgb,var(--border-color)_28%,transparent)] bg-[var(--bg-main)] p-2.5" data-codex-overview-card="identity">
@@ -186,14 +186,7 @@ function SessionOverview({
           secondaryValue={`${summary.errorSessions} ${t('codex_live_sessions.summary_failed')}`}
           accent={summary.errorSessions > 0 ? 'danger' : summary.degradedSessions > 0 ? 'warning' : 'neutral'}
         />
-        {loading || errorMessage ? (
-          <div className="flex min-h-8 items-center justify-between gap-3 border border-dashed border-[color:color-mix(in_srgb,var(--border-color)_35%,transparent)] px-3 py-1.5 font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase lg:col-span-4">
-            <span className="text-[var(--text-muted)]">
-              {loading ? t('codex_live_sessions.detail_loading') : t('codex_live_sessions.detail_stale')}
-            </span>
-            {errorMessage ? <span className="min-w-0 truncate text-right text-[var(--color-status-warning)]">{errorMessage}</span> : null}
-          </div>
-        ) : null}
+        <OverviewStatusNotice loading={loading} errorMessage={errorMessage} t={t} />
       </div>
 
       <OverviewTimingTrend
@@ -214,6 +207,26 @@ function SessionOverview({
   );
 }
 
+function OverviewStatusNotice({ loading, errorMessage, t }: { loading?: boolean; errorMessage?: string; t: Translate }) {
+  if (!loading && !errorMessage) {
+    return null;
+  }
+
+  return (
+    <div
+      className="pointer-events-none absolute right-0 top-[calc(100%+0.5rem)] z-10 flex max-w-[min(32rem,100%)] items-center gap-3 bg-[var(--bg-main)] px-2.5 py-1 font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase shadow-[0_0_0_1px_color-mix(in_srgb,var(--border-color)_28%,transparent),3px_3px_0_color-mix(in_srgb,var(--shadow-color)_42%,transparent)]"
+      data-codex-overview-status-overlay="true"
+      role="status"
+      aria-live="polite"
+    >
+      <span className="shrink-0 text-[var(--text-muted)]">
+        {loading ? t('codex_live_sessions.detail_loading') : t('codex_live_sessions.detail_stale')}
+      </span>
+      {errorMessage ? <span className="min-w-0 truncate text-right text-[var(--color-status-warning)]">{errorMessage}</span> : null}
+    </div>
+  );
+}
+
 function OverviewSummaryCard({
   label,
   primaryValue,

frontend/src/features/codex-live-sessions/model.test.mjs

@@ -1100,6 +1100,20 @@ test('codex live session detail header uses request timing trend chart', async (
   assert.doesNotMatch(detailSource, /font-size-ui-5xl/);
 });
 
+test('codex live overview loading notice does not push the timing trend down', async () => {
+  const detailSource = await readFile(new URL('./components/CodexLiveSessionDetail.tsx', import.meta.url), 'utf8');
+  const overviewSource = detailSource.slice(
+    detailSource.indexOf('function SessionOverview('),
+    detailSource.indexOf('function OverviewTimingTrend('),
+  );
+
+  assert.match(overviewSource, /<OverviewStatusNotice loading=\{loading\} errorMessage=\{errorMessage\} t=\{t\} \/>/);
+  assert.match(overviewSource, /data-codex-overview-status-overlay="true"/);
+  assert.match(overviewSource, /absolute right-0 top-\[calc\(100%\+0\.5rem\)\]/);
+  assert.doesNotMatch(overviewSource, /loading \|\| errorMessage \? \(\s*<div className="flex min-h-8 items-center justify-between gap-3 border border-dashed/);
+  assert.doesNotMatch(overviewSource, /lg:col-span-4/);
+});
+
 test('codex live sessions feature splits row snapshot polling from detail history loading', async () => {
   const featureSource = await readFile(new URL('./CodexLiveSessionsFeature.tsx', import.meta.url), 'utf8');