claude-bot/EJClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[codex] Improve mobile dashboard UX (#19)

Browse Source 
* feat(dashboard): improve mobile control plane UX

* fix(dashboard): improve mobile nav accessibility

* feat(dashboard): add mobile drawer and usage glance cards

* feat(dashboard): add compact usage matrix and i18n

* fix(dashboard): make usage-first console layout

* fix(dashboard): remove chrome and group usage rows
This commit is contained in:
Eyejoker
2026-04-26 21:29:13 +09:00
committed by GitHub
parent 5ba607644f
commit 646bc34372
8 changed files with 2374 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/unified-dashboard.test.ts
View File

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
import type { UsageRow } from './dashboard-usage-rows.js';
import {
buildWebUsageRowsForSnapshot,
formatStatusHeader,
renderUsageTable,
summarizeWatcherTasks,
@@ -107,3 +108,94 @@ describe('renderUsageTable', () => {
expect(lines).toEqual(['_조회 불가_']);
});
});
describe('buildWebUsageRowsForSnapshot', () => {
it('keeps real Claude and Kimi rows ahead of Codex rows for web snapshots', () => {
const rows = buildWebUsageRowsForSnapshot({
serviceAgentType: 'claude-code',
claudeAccounts: [
{
index: 0,
masked: 'claude-1',
isActive: true,
isRateLimited: false,
usage: {
five_hour: {
utilization: 0.2,
resets_at: '2026-04-26T12:00:00.000Z',
},
seven_day: {
utilization: 0.4,
resets_at: '2026-04-27T12:00:00.000Z',
},
},
},
{
index: 1,
masked: 'claude-2',
isActive: false,
isRateLimited: false,
usage: {
five_hour: {
utilization: 0.3,
resets_at: '2026-04-26T12:00:00.000Z',
},
seven_day: {
utilization: 0.5,
resets_at: '2026-04-27T12:00:00.000Z',
},
},
},
],
kimiUsage: {
fiveHour: { pct: 18, resetTime: '2026-04-26T12:00:00.000Z' },
weekly: { pct: 29, resetTime: '2026-04-27T12:00:00.000Z' },
},
codexRows: [
{
name: 'Codex1',
h5pct: 25,
h5reset: '1h',
d7pct: 35,
d7reset: '2d',
},
],
});
const names = rows.map((row) => row.name);
expect(names[0]).toMatch(/^Claude1/);
expect(names[1]).toMatch(/^Claude2/);
expect(names[2]).toMatch(/^Kimi/);
expect(names[3]).toBe('Codex1');
});
it('does not invent Claude or Kimi rows for codex-only services', () => {
const rows = buildWebUsageRowsForSnapshot({
serviceAgentType: 'codex',
claudeAccounts: [
{
index: 0,
masked: 'claude-1',
isActive: true,
isRateLimited: false,
usage: null,
},
],
kimiUsage: {
fiveHour: { pct: 18, resetTime: '2026-04-26T12:00:00.000Z' },
weekly: { pct: 29, resetTime: '2026-04-27T12:00:00.000Z' },
},
codexRows: [
{
name: 'Codex1',
h5pct: 25,
h5reset: '1h',
d7pct: 35,
d7reset: '2d',
},
],
});
expect(rows.map((row) => row.name)).toEqual(['Codex1']);
});
});

55
src/unified-dashboard.ts
View File

@@ -17,7 +17,11 @@ import {
CODEX_WARMUP_CONFIG,
getMoaConfig,
} from './config.js';
import { fetchKimiUsage, buildKimiUsageRows } from './kimi-usage.js';
import {
fetchKimiUsage,
buildKimiUsageRows,
type KimiUsageData,
} from './kimi-usage.js';
import { getGlobalFailoverInfo } from './service-routing.js';
import {
fetchAllClaudeUsage,
@@ -93,7 +97,7 @@ const RENDERER_USAGE_REFRESH_MS = 30_000;
let statusMessageId: string | null = null;
let cachedUsageContent = '';
let cachedClaudeAccounts: ClaudeAccountUsage[] = [];
let cachedKimiUsage: import('./kimi-usage.js').KimiUsageData | null = null;
let cachedKimiUsage: KimiUsageData | null = null;
let usageUpdateInProgress = false;
let channelMetaCache = new Map<string, ChannelMeta>();
let channelMetaLastRefresh = 0;
@@ -102,6 +106,8 @@ let dashboardUpdateLogged = false;
let cachedCodexUsageRows: UsageRow[] = [];
/** Codex service only: ISO timestamp of last successful usage fetch. */
let codexUsageFetchedAt: string | null = null;
/** Renderer service only: ISO timestamp of last successful Claude/Kimi usage render. */
let rendererUsageFetchedAt: string | null = null;
export interface WatcherTaskSummary {
active: number;
@@ -231,9 +237,47 @@ function formatRoomName(
return base;
}
export function buildWebUsageRowsForSnapshot(args: {
serviceAgentType: AgentType;
claudeAccounts: ClaudeAccountUsage[];
kimiUsage: KimiUsageData | null;
codexRows: UsageRow[];
}): UsageRow[] {
const rows: UsageRow[] = [];
if (args.serviceAgentType === 'claude-code') {
rows.push(...buildClaudeUsageRows(args.claudeAccounts));
rows.push(...buildKimiUsageRows(args.kimiUsage));
}
rows.push(...args.codexRows);
return rows;
}
function buildUsageSnapshotRows(opts: UnifiedDashboardOptions): {
rows: UsageRow[];
fetchedAt: string | null;
} {
const rows = buildWebUsageRowsForSnapshot({
serviceAgentType: opts.serviceAgentType,
claudeAccounts: cachedClaudeAccounts,
kimiUsage: cachedKimiUsage,
codexRows: cachedCodexUsageRows,
});
const fetchedAt =
[rendererUsageFetchedAt, codexUsageFetchedAt]
.filter((value): value is string => !!value)
.sort()
.at(-1) ?? null;
return { rows, fetchedAt };
}
function writeLocalStatusSnapshot(opts: UnifiedDashboardOptions): void {
const groups = opts.roomBindings();
const statuses = opts.queue.getStatuses(Object.keys(groups));
const usageSnapshot = buildUsageSnapshotRows(opts);
writeStatusSnapshot({
serviceId: opts.serviceId,
@@ -267,8 +311,10 @@ function writeLocalStatusSnapshot(opts: UnifiedDashboardOptions): void {
pendingMessages: boolean;
pendingTasks: number;
}>,
...(cachedCodexUsageRows.length > 0 && { usageRows: cachedCodexUsageRows }),
...(codexUsageFetchedAt && { usageRowsFetchedAt: codexUsageFetchedAt }),
...(usageSnapshot.rows.length > 0 && { usageRows: usageSnapshot.rows }),
...(usageSnapshot.fetchedAt && {
usageRowsFetchedAt: usageSnapshot.fetchedAt,
}),
});
}
@@ -647,6 +693,7 @@ async function refreshUsageCache(): Promise<void> {
usageUpdateInProgress = true;
try {
cachedUsageContent = await buildUsageContent();
rendererUsageFetchedAt = new Date().toISOString();
} catch (err) {
logger.warn({ err }, 'Failed to build usage content');
} finally {

77
src/web-dashboard-data.test.ts
View File

@@ -94,6 +94,83 @@ describe('web dashboard data', () => {
expect(overview.usage.rows).toHaveLength(1);
});
it('deduplicates full usage rows from renderer and codex snapshots', () => {
const snapshots: StatusSnapshot[] = [
{
serviceId: 'codex-main',
agentType: 'codex',
assistantName: 'Codex',
updatedAt: '2026-04-26T04:59:00.000Z',
entries: [],
usageRowsFetchedAt: '2026-04-26T04:59:00.000Z',
usageRows: [
{
name: 'Codex1',
h5pct: 20,
h5reset: '1h',
d7pct: 30,
d7reset: '2d',
},
{
name: 'Codex2',
h5pct: 15,
h5reset: '1h',
d7pct: 18,
d7reset: '2d',
},
],
},
{
serviceId: 'claude-main',
agentType: 'claude-code',
assistantName: 'Claude',
updatedAt: '2026-04-26T05:00:00.000Z',
entries: [],
usageRowsFetchedAt: '2026-04-26T05:00:00.000Z',
usageRows: [
{
name: 'Claude1 Max',
h5pct: 66,
h5reset: '2h',
d7pct: 40,
d7reset: '4d',
},
{
name: 'Kimi',
h5pct: 10,
h5reset: '3h',
d7pct: 12,
d7reset: '5d',
},
{
name: 'Codex1',
h5pct: 25,
h5reset: '55m',
d7pct: 35,
d7reset: '2d',
},
],
},
];
const overview = buildWebDashboardOverview({
now: '2026-04-26T05:01:00.000Z',
snapshots,
tasks: [],
});
expect(overview.usage.rows.map((row) => row.name)).toEqual([
'Claude1 Max',
'Kimi',
'Codex1',
'Codex2',
]);
expect(
overview.usage.rows.filter((row) => row.name === 'Codex1'),
).toHaveLength(1);
expect(overview.usage.fetchedAt).toBe('2026-04-26T05:00:00.000Z');
});
it('does not expose full scheduled task prompts through API payloads', () => {
const sanitized = sanitizeScheduledTask(
makeTask({

24
src/web-dashboard-data.ts
View File

@@ -76,6 +76,26 @@ function buildPromptPreview(prompt: string): string {
return truncateText(redactSensitiveText(prompt).replace(/\s+/g, ' ').trim());
}
function collectUsageRows(snapshots: StatusSnapshot[]): UsageRowSnapshot[] {
const rows: UsageRowSnapshot[] = [];
const seen = new Set<string>();
const sortedSnapshots = [...snapshots].sort((a, b) =>
(b.usageRowsFetchedAt ?? b.updatedAt).localeCompare(
a.usageRowsFetchedAt ?? a.updatedAt,
),
);
for (const snapshot of sortedSnapshots) {
for (const row of snapshot.usageRows ?? []) {
if (seen.has(row.name)) continue;
seen.add(row.name);
rows.push(row);
}
}
return rows;
}
export function sanitizeScheduledTask(
task: ScheduledTask,
): SanitizedScheduledTask {
@@ -162,9 +182,7 @@ export function buildWebDashboardOverview(args: {
}
}
const usageRows = args.snapshots.flatMap(
(snapshot) => snapshot.usageRows ?? [],
);
const usageRows = collectUsageRows(args.snapshots);
const usageFetchedAt =
args.snapshots
.map((snapshot) => snapshot.usageRowsFetchedAt)

53
src/web-dashboard-server.test.ts
View File

@@ -37,6 +37,59 @@ describe('web dashboard server handler', () => {
expect(body.tasks.total).toBe(0);
});
it('serves full Claude, Kimi, and Codex usage rows through overview JSON', async () => {
const handler = createWebDashboardHandler({
readStatusSnapshots: () => [
{
serviceId: 'renderer',
agentType: 'claude-code',
assistantName: 'Claude',
updatedAt: '2026-04-26T11:59:00.000Z',
entries: [],
usageRowsFetchedAt: '2026-04-26T11:59:00.000Z',
usageRows: [
{
name: 'Claude1 Max',
h5pct: 66,
h5reset: '2h',
d7pct: 40,
d7reset: '4d',
},
{
name: 'Kimi',
h5pct: 10,
h5reset: '3h',
d7pct: 12,
d7reset: '5d',
},
{
name: 'Codex1',
h5pct: 25,
h5reset: '55m',
d7pct: 35,
d7reset: '2d',
},
],
},
],
getTasks: () => [],
});
const overview = await handler(
new Request('http://localhost/api/overview'),
);
expect(overview.status).toBe(200);
const body = (await overview.json()) as {
usage: { rows: Array<{ name: string }> };
};
expect(body.usage.rows.map((row) => row.name)).toEqual([
'Claude1 Max',
'Kimi',
'Codex1',
]);
});
it('serves Vite static assets and falls back to index for SPA routes', async () => {
const staticDir = fs.mkdtempSync(
path.join(os.tmpdir(), 'ejclaw-dashboard-'),