Skip to content

Commit abe41c6

Browse files
linhaylinhay
committed
feat(codex): improve live session readability
1 parent 0efb2c7 commit abe41c6

3 files changed

Lines changed: 43 additions & 29 deletions

File tree

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function SessionDetail({
3434
if (!session) {
3535
return (
3636
<div className="grid w-full place-items-center border-2 border-[var(--border-color)] bg-[var(--bg-main)] p-6 shadow-[6px_6px_0_var(--shadow-color)]">
37-
<div className="max-w-sm text-center font-bold text-[var(--text-muted)]">
37+
<div className="max-w-sm text-center text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">
3838
{t('codex_live_sessions.no_running_sessions')}
3939
</div>
4040
</div>
@@ -51,14 +51,14 @@ export function SessionDetail({
5151
<StatusBadge status={session.status} t={t} />
5252
{session.fallbackInferred ? <span className="badge-swiss">{t('codex_live_sessions.inferred')}</span> : null}
5353
</div>
54-
<h3 className="mt-3 truncate font-mono text-[length:var(--font-size-ui-4xl)] font-black tracking-normal text-[var(--text-primary)]">
54+
<h3 className="mt-3 truncate font-mono text-[length:var(--font-size-ui-5xl)] font-black tracking-normal text-[var(--text-primary)]">
5555
{request?.requestID || session.lastRequestID || session.sessionID}
5656
</h3>
57-
<p className="mt-1 truncate text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">
57+
<p className="mt-1 truncate text-[length:var(--font-size-ui-lg)] font-bold text-[var(--text-muted)]">
5858
{session.model} · {session.downstreamTransport} → {session.upstreamTransport}
5959
</p>
6060
</div>
61-
<div className="grid grid-cols-2 gap-2 text-right font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase text-[var(--text-muted)]">
61+
<div className="grid grid-cols-2 gap-2 text-right font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase text-[var(--text-muted)]">
6262
<span>{t('codex_live_sessions.duration')}</span>
6363
<span className="text-[var(--text-primary)]">{formatDuration(session.durationMs)}</span>
6464
<span>{t('codex_live_sessions.requests')}</span>
@@ -89,23 +89,23 @@ function TransportLane({ events, t }: { events: readonly CodexLiveTimelineEvent[
8989

9090
return (
9191
<div className="grid gap-3">
92-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
92+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
9393
{t('codex_live_sessions.transport_lane')}
9494
</div>
9595
<div className="grid gap-2 xl:grid-cols-4">
9696
{laneItems.map(([lane, label]) => (
9797
<div key={lane} className="min-h-[86px] border border-[color:color-mix(in_srgb,var(--border-color)_55%,transparent)] bg-[var(--bg-surface)] p-3">
98-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase text-[var(--text-primary)]">
98+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase text-[var(--text-primary)]">
9999
{label}
100100
</div>
101101
<div className="mt-2 grid gap-1">
102102
{lanes[lane].length === 0 ? (
103-
<span className="text-[length:var(--font-size-ui-xs)] font-bold text-[var(--text-muted)]">{t('codex_live_sessions.no_event')}</span>
103+
<span className="text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">{t('codex_live_sessions.no_event')}</span>
104104
) : (
105105
lanes[lane].slice(0, 2).map((event) => (
106106
<div key={event.id} className="grid grid-cols-[8px_1fr] gap-2">
107107
<span className={`mt-1 h-2 w-2 ${severityDotClass(event.severity)}`} />
108-
<span className="min-w-0 truncate text-[length:var(--font-size-ui-xs)] font-bold text-[var(--text-muted)]">
108+
<span className="min-w-0 truncate text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">
109109
{event.kind}
110110
</span>
111111
</div>
@@ -138,12 +138,12 @@ function TimingMetrics({ request, t }: { request?: CodexLiveRequest; t: Translat
138138

139139
return (
140140
<div className="border-2 border-[var(--border-color)] bg-[var(--bg-surface)] p-3">
141-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
141+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
142142
{t('codex_live_sessions.timing')}
143143
</div>
144144
<div className="mt-3 grid gap-x-5 gap-y-2 md:grid-cols-3 xl:grid-cols-4">
145145
{metrics.map(([label, value]) => (
146-
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 font-mono text-[length:var(--font-size-ui-xs)] uppercase">
146+
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 font-mono text-[length:var(--font-size-ui-sm)] uppercase">
147147
<span className="font-black text-[var(--text-muted)]">{label}</span>
148148
<span className="truncate font-black text-[var(--text-primary)]">{value}</span>
149149
</div>
@@ -174,12 +174,12 @@ function AccountCard({ session, request, t }: { session: CodexLiveSession; reque
174174

175175
return (
176176
<div className="border-2 border-[var(--border-color)] bg-[var(--bg-surface)] p-3">
177-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
177+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
178178
{t('codex_live_sessions.account_routing')}
179179
</div>
180180
<div className="mt-3 grid gap-x-5 gap-y-2 md:grid-cols-2">
181181
{accountRows.map(([label, value]) => (
182-
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 text-[length:var(--font-size-ui-xs)]">
182+
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 text-[length:var(--font-size-ui-sm)]">
183183
<span className="shrink-0 font-mono font-black uppercase text-[var(--text-muted)]">{label}</span>
184184
<span className="truncate font-mono font-bold text-[var(--text-primary)]">{value}</span>
185185
</div>
@@ -200,7 +200,7 @@ function AccountCard({ session, request, t }: { session: CodexLiveSession; reque
200200

201201
{usage != null ? (
202202
<div className="mt-4">
203-
<div className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
203+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
204204
{t('codex_live_sessions.token_usage')}
205205
</div>
206206
<div className="mt-2 grid grid-cols-4 gap-x-3 gap-y-1">
@@ -219,10 +219,10 @@ function AccountCard({ session, request, t }: { session: CodexLiveSession; reque
219219
function UsageStat({ label, value }: { label: string; value: number }) {
220220
return (
221221
<div className="text-center">
222-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-bold text-[var(--text-primary)]">
222+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-primary)]">
223223
{value.toLocaleString()}
224224
</div>
225-
<div className="font-mono text-[length:var(--font-size-ui-2xs)] font-black uppercase text-[var(--text-muted)]">
225+
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase text-[var(--text-muted)]">
226226
{label}
227227
</div>
228228
</div>
@@ -257,12 +257,12 @@ function SessionCard({ session, request, t }: { session: CodexLiveSession; reque
257257

258258
return (
259259
<div className="border-2 border-[var(--border-color)] bg-[var(--bg-surface)] p-3">
260-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
260+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
261261
{t('codex_live_sessions.local_session')}
262262
</div>
263263
<div className="mt-3 grid gap-x-5 gap-y-2 md:grid-cols-2">
264264
{rows.map(([label, value]) => (
265-
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 text-[length:var(--font-size-ui-xs)]">
265+
<div key={label} className="flex min-w-0 justify-between gap-3 border-b border-[color:color-mix(in_srgb,var(--border-color)_30%,transparent)] py-1 text-[length:var(--font-size-ui-sm)]">
266266
<span className="shrink-0 font-mono font-black uppercase text-[var(--text-muted)]">{label}</span>
267267
<span className="truncate font-mono font-bold text-[var(--text-primary)]">{value}</span>
268268
</div>
@@ -275,17 +275,17 @@ function SessionCard({ session, request, t }: { session: CodexLiveSession; reque
275275
function Timeline({ events, t }: { events: readonly CodexLiveTimelineEvent[]; t: Translate }) {
276276
return (
277277
<div className="grid gap-3">
278-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
278+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
279279
{t('codex_live_sessions.request_timeline')}
280280
</div>
281281
<div className="divide-y-2 divide-[var(--border-color)] border-2 border-[var(--border-color)]">
282282
{events.map((event) => (
283283
<div key={event.id} className="grid gap-3 p-3 md:grid-cols-[5.2rem_8rem_1fr]">
284-
<span className="font-mono text-[length:var(--font-size-ui-xs)] font-black text-[var(--text-muted)]">{event.at}</span>
285-
<span className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase text-[var(--text-primary)]">
284+
<span className="font-mono text-[length:var(--font-size-ui-sm)] font-black text-[var(--text-muted)]">{event.at}</span>
285+
<span className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase text-[var(--text-primary)]">
286286
{event.lane}.{event.kind}
287287
</span>
288-
<span className="min-w-0 text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">{event.label}</span>
288+
<span className="min-w-0 text-[length:var(--font-size-ui-lg)] font-bold text-[var(--text-muted)]">{event.label}</span>
289289
</div>
290290
))}
291291
</div>
@@ -296,10 +296,10 @@ function Timeline({ events, t }: { events: readonly CodexLiveTimelineEvent[]; t:
296296
function DiagnosticSummary({ diagnostic, t }: { diagnostic: string; t: Translate }) {
297297
return (
298298
<div className="grid gap-3">
299-
<div className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
299+
<div className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em] text-[var(--text-muted)]">
300300
{t('codex_live_sessions.redacted_diagnostic')}
301301
</div>
302-
<SnippetPre className="max-h-[260px] border-2 border-[var(--border-color)] !bg-[var(--bg-surface)]">
302+
<SnippetPre className="max-h-[260px] border-2 border-[var(--border-color)] !bg-[var(--bg-surface)] !text-[length:var(--font-size-ui-sm)]">
303303
{diagnostic}
304304
</SnippetPre>
305305
</div>
@@ -316,7 +316,7 @@ function StatusBadge({ status, t }: { status: CodexLiveSessionStatus; t: Transla
316316
? 'bg-[color-mix(in_srgb,var(--color-success)_12%,var(--bg-main))]'
317317
: 'bg-[var(--bg-surface)]';
318318
return (
319-
<span className={`shrink-0 border-2 border-[var(--border-color)] px-2 py-1 font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase ${tone}`}>
319+
<span className={`shrink-0 border-2 border-[var(--border-color)] px-2 py-1 font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase ${tone}`}>
320320
{t(statusLabelKeys[status])}
321321
</span>
322322
);

‎frontend/src/features/codex-live-sessions/components/CodexLiveSessionFeed.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ export function SessionFeed({
2626
className="grid gap-1 border-b-2 border-[var(--border-color)] px-4 py-3 md:grid-cols-[1fr_auto] md:items-end"
2727
>
2828
<div>
29-
<h3 className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-[0.16em]">
29+
<h3 className="font-mono text-[length:var(--font-size-ui-3xl)] font-black uppercase tracking-[0.16em]">
3030
{t('codex_live_sessions.session_feed')}
3131
</h3>
32-
<p className="mt-1 text-[length:var(--font-size-ui-xs)] font-bold text-[var(--text-muted)]">
32+
<p className="mt-1 text-[length:var(--font-size-ui-sm)] font-bold text-[var(--text-muted)]">
3333
{t('codex_live_sessions.session_feed_hint')}
3434
</p>
3535
</div>
36-
<span className="font-mono text-[length:var(--font-size-ui-xs)] font-black uppercase text-[var(--text-muted)]">
36+
<span className="font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase text-[var(--text-muted)]">
3737
{sessions.length} {t('codex_live_sessions.rows')}
3838
</span>
3939
</div>
@@ -95,10 +95,10 @@ function SessionRow({
9595
}`}
9696
>
9797
<div className="min-w-0">
98-
<div className="truncate font-mono text-[length:var(--font-size-ui-sm)] font-black leading-snug text-[var(--text-primary)]">
98+
<div className="truncate font-mono text-[length:var(--font-size-ui-2xl)] font-black leading-snug text-[var(--text-primary)]">
9999
{summary.sessionProjectLabel}
100100
</div>
101-
<div className="truncate font-mono text-[length:var(--font-size-ui-xs)] font-bold leading-snug text-[var(--text-muted)]">
101+
<div className="truncate font-mono text-[length:var(--font-size-ui-sm)] font-bold leading-snug text-[var(--text-muted)]">
102102
{summary.accountTransportLabel}
103103
</div>
104104
</div>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import test from 'node:test';
22
import assert from 'node:assert/strict';
3+
import { readFile } from 'node:fs/promises';
34

45
import {
56
buildCodexLiveDiagnosticSummary,
@@ -269,6 +270,19 @@ test('mapBackendCodexLiveSessionsSnapshot normalizes live Wails snapshot for the
269270
assert.equal(snapshot.sessions[0].recentEvents[0].severity, 'info');
270271
});
271272

273+
test('codex live session surfaces use larger typography tokens for the dense workbench', async () => {
274+
const detailSource = await readFile(new URL('./components/CodexLiveSessionDetail.tsx', import.meta.url), 'utf8');
275+
const feedSource = await readFile(new URL('./components/CodexLiveSessionFeed.tsx', import.meta.url), 'utf8');
276+
277+
assert.match(detailSource, /font-size-ui-5xl/);
278+
assert.match(detailSource, /font-size-ui-lg/);
279+
assert.match(detailSource, /font-size-ui-sm/);
280+
assert.match(detailSource, /!text-\[length:var\(--font-size-ui-sm\)\]/);
281+
assert.match(feedSource, /font-size-ui-3xl/);
282+
assert.match(feedSource, /font-size-ui-2xl/);
283+
assert.match(feedSource, /font-size-ui-sm/);
284+
});
285+
272286
test('desktop live sessions state never promotes preview rows to cache', () => {
273287
const initial = buildCodexLiveSessionsInitialSnapshot({ browserMode: false, sidecarReady: true });
274288

0 commit comments

Comments
 (0)