fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackwener merged 4 commits into from
Jul 19, 2026
Merged

fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components #1252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66a4f11
feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …
jackwener Jul 19, 2026
a715eed
test(settings): re-pin usage dashboard contract to the restyled struc…
jackwener Jul 19, 2026
1fa1dbc
test(visual-smoke): seed rich usage traffic + cover settings-usage in…
jackwener Jul 19, 2026
a992ede
Merge remote-tracking branch 'origin/main' into usage-merge
jackwener Jul 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions apps/desktop/src/main/__tests__/card-converge-contract.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
*
* The usage stats table is NOT on a public Table primitive: with only one HTML
* <table> consumer it was premature abstraction (PR9 review P3), so
* SimpleStatsTable keeps its styles inline in usage-settings-page. The table
* a11y semantics (aria-label + scope) are locked in settings-usage-contract.
* UsageStatsTable keeps its styles inline in usage-settings-page (shared across
* all five usage tabs). The table a11y semantics (aria-label + scope) and
* per-column alignment are locked in settings-usage-contract.
*/

import { strict as assert } from 'node:assert';
Expand Down
271 changes: 170 additions & 101 deletions apps/desktop/src/main/__tests__/settings-usage-contract.test.ts
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 10 additions & 1 deletion apps/desktop/src/main/visual-smoke-fixture.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
writePlanReminders,
writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
const now = input.now ?? VISUAL_SMOKE_NOW;
await rm(input.workspaceRoot, { recursive: true, force: true });
await mkdir(input.workspaceRoot, { recursive: true });
await writeSettings(input.workspaceRoot);
await writeSettings(input.workspaceRoot, input.fixture.scenario);
if (input.fixture.scenario === 'first-run') return;
await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
if (input.fixture.scenario === 'module-mcp') {
await seedMcpFixture(input.workspaceRoot);
}
// Settings → 使用统计: seed extra model + tool traffic so the request log,
// provider / model / tool aggregates render real content in the capture.
// Scenario-gated so no other fixture's sidebar or usage totals shift.
if (input.fixture.scenario === 'settings-usage') {
for (const seed of usageStatsSessions(now)) {
await writeSession(input.workspaceRoot, seed.header, seed.messages);
}
}
}
13 changes: 12 additions & 1 deletion apps/desktop/src/main/visual-smoke/scenarios-settings.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
workspaceRoot: string,
scenario?: VisualSmokeScenario,
): Promise<void> {
// PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
// `1886c41b`): the fixture previously seeded a placeholder
// Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
const settings = createDefaultSettings();
settings.personalization.displayName = '';
settings.appearance.theme = 'auto';
// Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
// which sits outside the real-time 24h/7天/30天 windows the store derives
// from Date.now(). Default the usage view to 全部 + details-on so the
// capture shows the populated request log and stats tables deterministically.
if (scenario === 'settings-usage') {
settings.usage.range = 'all';
settings.usage.showDetails = true;
}
await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down
198 changes: 198 additions & 0 deletions apps/desktop/src/main/visual-smoke/scenarios-usage.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
turnId: string;
minutesAgo: number;
model: string;
usage: {
input: number;
output: number;
cacheRead?: number;
cacheMissInput?: number;
cacheCreation?: number;
reasoning?: number;
costUsd: number;
};
tools: Array<{
id: string;
toolName: string;
displayName: string;
durationMs: number;
isError?: boolean;
}>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
const turnTs = now - spec.minutesAgo * 60_000;
const messages: StoredMessage[] = [
{
type: 'user',
id: `${spec.turnId}-user`,
turnId: spec.turnId,
ts: turnTs - 30_000,
text: '继续这轮工作，并汇总一次用量。',
},
];
spec.tools.forEach((tool, index) => {
const callTs = turnTs - 24_000 + index * 3_000;
messages.push({
type: 'tool_call',
id: tool.id,
turnId: spec.turnId,
ts: callTs,
toolName: tool.toolName,
displayName: tool.displayName,
args: {},
});
messages.push({
type: 'tool_result',
id: `${tool.id}-result`,
turnId: spec.turnId,
ts: callTs + tool.durationMs,
toolUseId: tool.id,
isError: tool.isError ?? false,
durationMs: tool.durationMs,
content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
});
});
messages.push({
type: 'assistant',
id: `${spec.turnId}-assistant`,
turnId: spec.turnId,
ts: turnTs,
text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
modelId: spec.model,
});
messages.push({
type: 'token_usage',
id: `${spec.turnId}-usage`,
turnId: spec.turnId,
ts: turnTs + 100,
input: spec.usage.input,
output: spec.usage.output,
...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
costUsd: spec.usage.costUsd,
});
return messages;
}

function usageSession(
now: number,
input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
return header({
id: input.id,
name: input.name,
connection: input.connection,
model: input.model,
now,
lastMessageAt: now - input.minutesAgo * 60_000,
});
}

export function usageStatsSessions(
now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
return [
{
header: usageSession(now, {
id: 'visual-smoke-usage-glm',
name: '用量样本 · GLM 工作区',
connection: 'zai-live',
model: 'glm-5.1',
minutesAgo: 40,
}),
messages: [
...usageTurnMessages(now, {
turnId: 'usage-glm-1',
minutesAgo: 45,
model: 'glm-5.1',
usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
tools: [
{ id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
{ id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
{ id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
],
}),
...usageTurnMessages(now, {
turnId: 'usage-glm-2',
minutesAgo: 38,
model: 'glm-5.1-air',
usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
tools: [
{ id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
{ id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
],
}),
],
},
{
header: usageSession(now, {
id: 'visual-smoke-usage-claude',
name: '用量样本 · Claude 中继',
connection: 'relay-fallback',
model: 'claude-sonnet-4.5',
minutesAgo: 28,
}),
messages: [
...usageTurnMessages(now, {
turnId: 'usage-claude-1',
minutesAgo: 30,
model: 'claude-sonnet-4.5',
usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
tools: [
{ id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
{ id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
],
}),
...usageTurnMessages(now, {
turnId: 'usage-claude-2',
minutesAgo: 24,
model: 'claude-haiku-4.5',
usage: { input: 1500, output: 300, costUsd: 0.0021 },
tools: [
{ id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
],
}),
],
},
{
header: usageSession(now, {
id: 'visual-smoke-usage-gpt',
name: '用量样本 · GPT 备用',
connection: 'needs-reauth',
model: 'gpt-5.1-mini',
minutesAgo: 16,
}),
messages: [
...usageTurnMessages(now, {
turnId: 'usage-gpt-1',
minutesAgo: 18,
model: 'gpt-5.1-mini',
usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
tools: [
{ id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
{ id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
],
}),
],
},
];
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components#1252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 4 commits into

from

Jul 19, 2026
 Merged


fix(usage): deep restyle of 使用统计 detail area — house tabs, real tables, per-tab components
#1252
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
66a4f11

feat(settings): restyle 使用统计 detail — house tabs, aligned range row, …


jackwener Jul 19, 2026
a715eed

test(settings): re-pin usage dashboard contract to the restyled struc…


jackwener Jul 19, 2026
1fa1dbc

test(visual-smoke): seed rich usage traffic + cover settings-usage in…


jackwener Jul 19, 2026
a992ede

Merge remote-tracking branch 'origin/main' into usage-merge


jackwener Jul 19, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 3 additions & 2 deletions
apps/desktop/src/main/__tests__/card-converge-contract.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,9 @@
 *
 * The usage stats table is NOT on a public Table primitive: with only one HTML
 * <table> consumer it was premature abstraction (PR9 review P3), so
 * SimpleStatsTable keeps its styles inline in usage-settings-page. The table
 * a11y semantics (aria-label + scope) are locked in settings-usage-contract.
 * UsageStatsTable keeps its styles inline in usage-settings-page (shared across
 * all five usage tabs). The table a11y semantics (aria-label + scope) and
 * per-column alignment are locked in settings-usage-contract.
 */

import { strict as assert } from 'node:assert';
Expand Down

271 changes: 170 additions & 101 deletions
apps/desktop/src/main/__tests__/settings-usage-contract.test.ts

View file


Open in desktop


Large diffs are not rendered by default.


11 changes: 10 additions & 1 deletion
apps/desktop/src/main/visual-smoke-fixture.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,6 +65,7 @@ import {
 writePlanReminders,
 writeSettings,
} from './visual-smoke/scenarios-settings.js';
import { usageStatsSessions } from './visual-smoke/scenarios-usage.js';

const VISUAL_SMOKE_SCENARIOS = new Set<VisualSmokeScenario>([
 'all',
Expand DownExpand Up@@ -606,7 +607,7 @@ export async function seedVisualSmokeFixture(input: {
 const now = input.now ?? VISUAL_SMOKE_NOW;
 await rm(input.workspaceRoot, { recursive: true, force: true });
 await mkdir(input.workspaceRoot, { recursive: true });
 await writeSettings(input.workspaceRoot);
 await writeSettings(input.workspaceRoot, input.fixture.scenario);
 if (input.fixture.scenario === 'first-run') return;
 await writeConnections(input.workspaceRoot, now, input.fixture.scenario);
 for (const slug of ['zai-live', 'relay-fallback', 'empty-fetched', 'needs-reauth', 'broken-provider']) {
Expand DownExpand Up@@ -686,4 +687,12 @@ export async function seedVisualSmokeFixture(input: {
 if (input.fixture.scenario === 'module-mcp') {
 await seedMcpFixture(input.workspaceRoot);
 }
 // Settings → 使用统计: seed extra model + tool traffic so the request log,
 // provider / model / tool aggregates render real content in the capture.
 // Scenario-gated so no other fixture's sidebar or usage totals shift.
 if (input.fixture.scenario === 'settings-usage') {
 for (const seed of usageStatsSessions(now)) {
 await writeSession(input.workspaceRoot, seed.header, seed.messages);
 }
 }
}

13 changes: 12 additions & 1 deletion
apps/desktop/src/main/visual-smoke/scenarios-settings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,10 @@ import type {
import { createDefaultSettings } from '@maka/core/settings';
import { writeJson } from './seed-helpers.js';

export async function writeSettings(workspaceRoot: string): Promise<void> {
export async function writeSettings(
 workspaceRoot: string,
 scenario?: VisualSmokeScenario,
): Promise<void> {
 // PR-SIDEBAR-IA-0 Phase 3 P0 fixup v2 (kenji `08be08d8` + WAWQAQ
 // `1886c41b`): the fixture previously seeded a placeholder
 // Chinese personal name for screenshot baselines, but a real
Expand All@@ -26,6 +29,14 @@ export async function writeSettings(workspaceRoot: string): Promise<void> {
 const settings = createDefaultSettings();
 settings.personalization.displayName = '';
 settings.appearance.theme = 'auto';
 // Settings → 使用统计: the seeded traffic uses the fixed visual-smoke clock,
 // which sits outside the real-time 24h/7天/30天 windows the store derives
 // from Date.now(). Default the usage view to 全部 + details-on so the
 // capture shows the populated request log and stats tables deterministically.
 if (scenario === 'settings-usage') {
 settings.usage.range = 'all';
 settings.usage.showDetails = true;
 }
 await writeJson(join(workspaceRoot, 'settings.json'), settings);
}

Expand Down

198 changes: 198 additions & 0 deletions
apps/desktop/src/main/visual-smoke/scenarios-usage.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import type { SessionHeader, StoredMessage } from '@maka/core';
import { header } from './seed-helpers.js';

// Settings → 使用统计 fixture. `usageStats` aggregates `token_usage` + tool
// messages across ALL sessions in the workspace, so the settings-usage capture
// only shows real tables if the seed contains enough varied traffic. These
// sessions are gated to the `settings-usage` scenario so no other capture is
// disturbed; every value is a literal keyed off the fixed `now`, so the tables
// render deterministically.
//
// The shape below intentionally spreads across:
// - 3 providers (zai-live / relay-fallback / needs-reauth) → 供应商统计
// - 5 models (glm / claude / gpt families) → 模型统计
// - 6 tools with 2 failures → 工具统计 (exercises the error column)
// - a dozen request-log rows mixing model + tool + success/error → 请求日志

interface UsageTurnSpec {
 turnId: string;
 minutesAgo: number;
 model: string;
 usage: {
 input: number;
 output: number;
 cacheRead?: number;
 cacheMissInput?: number;
 cacheCreation?: number;
 reasoning?: number;
 costUsd: number;
 };
 tools: Array<{
 id: string;
 toolName: string;
 displayName: string;
 durationMs: number;
 isError?: boolean;
 }>;
}

function usageTurnMessages(now: number, spec: UsageTurnSpec): StoredMessage[] {
 const turnTs = now - spec.minutesAgo * 60_000;
 const messages: StoredMessage[] = [
 {
 type: 'user',
 id: `${spec.turnId}-user`,
 turnId: spec.turnId,
 ts: turnTs - 30_000,
 text: '继续这轮工作，并汇总一次用量。',
 },
 ];
 spec.tools.forEach((tool, index) => {
 const callTs = turnTs - 24_000 + index * 3_000;
 messages.push({
 type: 'tool_call',
 id: tool.id,
 turnId: spec.turnId,
 ts: callTs,
 toolName: tool.toolName,
 displayName: tool.displayName,
 args: {},
 });
 messages.push({
 type: 'tool_result',
 id: `${tool.id}-result`,
 turnId: spec.turnId,
 ts: callTs + tool.durationMs,
 toolUseId: tool.id,
 isError: tool.isError ?? false,
 durationMs: tool.durationMs,
 content: { kind: 'text', text: tool.isError ? '调用失败（fixture）' : '调用完成（fixture）' },
 });
 });
 messages.push({
 type: 'assistant',
 id: `${spec.turnId}-assistant`,
 turnId: spec.turnId,
 ts: turnTs,
 text: '这一轮的模型请求与工具调用已完成，用量已并入统计。',
 modelId: spec.model,
 });
 messages.push({
 type: 'token_usage',
 id: `${spec.turnId}-usage`,
 turnId: spec.turnId,
 ts: turnTs + 100,
 input: spec.usage.input,
 output: spec.usage.output,
 ...(spec.usage.cacheRead !== undefined ? { cacheRead: spec.usage.cacheRead } : {}),
 ...(spec.usage.cacheMissInput !== undefined ? { cacheMissInput: spec.usage.cacheMissInput } : {}),
 ...(spec.usage.cacheCreation !== undefined ? { cacheCreation: spec.usage.cacheCreation } : {}),
 ...(spec.usage.reasoning !== undefined ? { reasoning: spec.usage.reasoning } : {}),
 costUsd: spec.usage.costUsd,
 });
 return messages;
}

function usageSession(
 now: number,
 input: { id: string; name: string; connection: string; model: string; minutesAgo: number },
): SessionHeader {
 return header({
 id: input.id,
 name: input.name,
 connection: input.connection,
 model: input.model,
 now,
 lastMessageAt: now - input.minutesAgo * 60_000,
 });
}

export function usageStatsSessions(
 now: number,
): Array<{ header: SessionHeader; messages: StoredMessage[] }> {
 return [
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-glm',
 name: '用量样本 · GLM 工作区',
 connection: 'zai-live',
 model: 'glm-5.1',
 minutesAgo: 40,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-1',
 minutesAgo: 45,
 model: 'glm-5.1',
 usage: { input: 4820, output: 1240, cacheRead: 3200, cacheMissInput: 1620, cacheCreation: 640, reasoning: 210, costUsd: 0.0186 },
 tools: [
 { id: 'usage-glm-1-bash', toolName: 'Bash', displayName: '运行测试', durationMs: 8_240 },
 { id: 'usage-glm-1-read', toolName: 'Read', displayName: '读取源码', durationMs: 1_120 },
 { id: 'usage-glm-1-grep', toolName: 'Grep', displayName: '检索用法', durationMs: 640 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-glm-2',
 minutesAgo: 38,
 model: 'glm-5.1-air',
 usage: { input: 2110, output: 560, cacheMissInput: 2110, costUsd: 0.0071 },
 tools: [
 { id: 'usage-glm-2-edit', toolName: 'Edit', displayName: '修改文件', durationMs: 980 },
 { id: 'usage-glm-2-write', toolName: 'Write', displayName: '写入文件', durationMs: 1_460, isError: true },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-claude',
 name: '用量样本 · Claude 中继',
 connection: 'relay-fallback',
 model: 'claude-sonnet-4.5',
 minutesAgo: 28,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-1',
 minutesAgo: 30,
 model: 'claude-sonnet-4.5',
 usage: { input: 6400, output: 2050, cacheRead: 5100, cacheCreation: 1300, reasoning: 880, costUsd: 0.0642 },
 tools: [
 { id: 'usage-claude-1-search', toolName: 'WebSearch', displayName: '联网检索', durationMs: 3_050 },
 { id: 'usage-claude-1-read', toolName: 'Read', displayName: '读取文档', durationMs: 900 },
 ],
 }),
 ...usageTurnMessages(now, {
 turnId: 'usage-claude-2',
 minutesAgo: 24,
 model: 'claude-haiku-4.5',
 usage: { input: 1500, output: 300, costUsd: 0.0021 },
 tools: [
 { id: 'usage-claude-2-bash', toolName: 'Bash', displayName: '构建 renderer', durationMs: 5_200 },
 ],
 }),
 ],
 },
 {
 header: usageSession(now, {
 id: 'visual-smoke-usage-gpt',
 name: '用量样本 · GPT 备用',
 connection: 'needs-reauth',
 model: 'gpt-5.1-mini',
 minutesAgo: 16,
 }),
 messages: [
 ...usageTurnMessages(now, {
 turnId: 'usage-gpt-1',
 minutesAgo: 18,
 model: 'gpt-5.1-mini',
 usage: { input: 3300, output: 900, cacheRead: 1200, costUsd: 0.0125 },
 tools: [
 { id: 'usage-gpt-1-bash', toolName: 'Bash', displayName: '生成截图', durationMs: 6_400 },
 { id: 'usage-gpt-1-grep', toolName: 'Grep', displayName: '扫描目录', durationMs: 720, isError: true },
 ],
 }),
 ],
 },
 ];
}
Loading
Loading