Skip to content

Commit cb7bac4

Browse files
pallyoungpallyoung
committed
style(workspace): add token trend chrome
1 parent 6eaab76 commit cb7bac4

4 files changed

Lines changed: 131 additions & 0 deletions

File tree

‎packages/web/src/locales/en.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,17 @@
252252
"missing": "Missing",
253253
"unsupported": "Unsupported",
254254
"error": "Error"
255+
},
256+
"token_trend": {
257+
"title": "Token Trend",
258+
"subtitle": "Current project · Last 24 hours",
259+
"loading": "Loading token trend...",
260+
"empty": "No token data in the last 24 hours.",
261+
"error": "Token trend unavailable.",
262+
"total": "Total {value}",
263+
"peak": "Peak {value}/h",
264+
"sessions": "{count} sessions",
265+
"chart_label": "Token consumption trend for the current project over the last 24 hours"
255266
}
256267
},
257268
"skills": {

‎packages/web/src/locales/zh.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,17 @@
252252
"missing": "缺失",
253253
"unsupported": "不支持",
254254
"error": "错误"
255+
},
256+
"token_trend": {
257+
"title": "Token 消耗趋势",
258+
"subtitle": "当前项目 · 最近 24 小时",
259+
"loading": "正在加载 token 趋势...",
260+
"empty": "最近 24 小时暂无 token 数据。",
261+
"error": "Token 趋势暂不可用。",
262+
"total": "总量 {value}",
263+
"peak": "峰值 {value}/h",
264+
"sessions": "{count} 个会话",
265+
"chart_label": "当前项目最近 24 小时 Token 消耗趋势图"
255266
}
256267
},
257268
"skills": {

‎packages/web/src/styles/components.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14812,6 +14812,87 @@ body.is-dragging-pane .session-action-btn-drag {
1481214812
margin-top: 0;
1481314813
}
1481414814

14815+
.workspace-agent-instructions__token-trend {
14816+
display: flex;
14817+
min-width: 0;
14818+
flex-direction: column;
14819+
gap: var(--gap-tight);
14820+
padding: var(--sp-2);
14821+
overflow: hidden;
14822+
border: 1px solid var(--component-mix-border-default-84pct-transparent);
14823+
border-radius: var(--radius-md);
14824+
background:
14825+
linear-gradient(
14826+
180deg,
14827+
color-mix(in srgb, var(--status-success-fg) 5%, transparent),
14828+
transparent 56%
14829+
),
14830+
var(--surface-panel);
14831+
}
14832+
14833+
.workspace-agent-instructions__token-trend-header {
14834+
display: flex;
14835+
min-width: 0;
14836+
align-items: flex-start;
14837+
justify-content: space-between;
14838+
gap: var(--gap-tight);
14839+
}
14840+
14841+
.workspace-agent-instructions__token-trend-title {
14842+
margin: 0;
14843+
color: var(--text-primary);
14844+
font-size: var(--type-body-5-size);
14845+
line-height: var(--type-body-5-line-height);
14846+
font-weight: var(--type-body-6-weight);
14847+
}
14848+
14849+
.workspace-agent-instructions__token-trend-subtitle {
14850+
margin: 2px 0 0;
14851+
color: var(--text-tertiary);
14852+
font-size: var(--type-body-6-size);
14853+
line-height: var(--type-body-6-line-height);
14854+
}
14855+
14856+
.workspace-agent-instructions__token-trend-total {
14857+
flex: 0 0 auto;
14858+
color: var(--status-success-fg);
14859+
font-size: var(--type-body-5-size);
14860+
line-height: var(--type-body-5-line-height);
14861+
font-weight: var(--type-body-6-weight);
14862+
white-space: nowrap;
14863+
}
14864+
14865+
.workspace-agent-instructions__token-trend-skeleton,
14866+
.workspace-agent-instructions__token-trend-state {
14867+
display: flex;
14868+
min-height: 56px;
14869+
align-items: center;
14870+
margin: 0;
14871+
color: var(--text-secondary);
14872+
font-size: var(--type-body-6-size);
14873+
line-height: var(--type-body-6-line-height);
14874+
}
14875+
14876+
.workspace-agent-instructions__token-trend-skeleton {
14877+
color: var(--text-tertiary);
14878+
}
14879+
14880+
.workspace-agent-instructions__token-trend-chart {
14881+
min-width: 0;
14882+
height: 96px;
14883+
}
14884+
14885+
.workspace-agent-instructions__token-trend-footer {
14886+
display: flex;
14887+
min-width: 0;
14888+
flex-wrap: wrap;
14889+
justify-content: space-between;
14890+
gap: var(--gap-compact);
14891+
color: var(--text-tertiary);
14892+
font-size: var(--type-body-6-size);
14893+
line-height: var(--type-body-6-line-height);
14894+
}
14895+
1481514896
.workspace-agent-instructions__group {
1481614897
display: flex;
1481714898
min-width: 0;
@@ -18290,6 +18371,10 @@ body.is-dragging-pane .session-action-btn-drag {
1829018371
gap: 8px;
1829118372
}
1829218373

18374+
.mobile-sheet--files .workspace-agent-instructions__token-trend-chart {
18375+
height: 84px;
18376+
}
18377+
1829318378
.mobile-sheet--files .workspace-agent-instructions__status {
1829418379
gap: 6px;
1829518380
}

‎packages/web/src/styles/components.theme.test.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3512,6 +3512,18 @@ describe("components.css theme-sensitive surfaces", () => {
35123512
const agentInstructionsStatusPill = getLastRuleBlock(
35133513
".workspace-agent-instructions__status-pill"
35143514
);
3515+
const agentInstructionsTokenTrend = getLastRuleBlock(
3516+
".workspace-agent-instructions__token-trend"
3517+
);
3518+
const agentInstructionsTokenTrendHeader = getLastRuleBlock(
3519+
".workspace-agent-instructions__token-trend-header"
3520+
);
3521+
const agentInstructionsTokenTrendChart = getLastRuleBlock(
3522+
".workspace-agent-instructions__token-trend-chart"
3523+
);
3524+
const agentInstructionsTokenTrendState = getLastRuleBlock(
3525+
".workspace-agent-instructions__token-trend-state"
3526+
);
35153527

35163528
expect(sidebarRowSelected).toContain("--workspace-sidebar-selected-border");
35173529
expect(sidebarRowSelected).toContain("--workspace-sidebar-selected-bg");
@@ -3672,6 +3684,18 @@ describe("components.css theme-sensitive surfaces", () => {
36723684
expect(agentInstructionsStatusPill).toContain("display: inline-flex");
36733685
expect(agentInstructionsStatusPill).toContain("align-items: center");
36743686
expect(agentInstructionsStatusPill).toContain("color: var(--text-primary)");
3687+
expect(agentInstructionsTokenTrend).toContain("border: 1px solid");
3688+
expect(agentInstructionsTokenTrend).toContain(
3689+
"var(--component-mix-border-default-84pct-transparent)"
3690+
);
3691+
expect(agentInstructionsTokenTrend).toContain("border-radius: var(--radius-md)");
3692+
expect(agentInstructionsTokenTrend).toContain("background:");
3693+
expect(agentInstructionsTokenTrend).toContain("var(--surface-panel)");
3694+
expect(agentInstructionsTokenTrendHeader).toContain("display: flex");
3695+
expect(agentInstructionsTokenTrendHeader).toContain("justify-content: space-between");
3696+
expect(agentInstructionsTokenTrendChart).toContain("height: 96px");
3697+
expect(agentInstructionsTokenTrendChart).toContain("min-width: 0");
3698+
expect(agentInstructionsTokenTrendState).toContain("color: var(--text-secondary)");
36753699
});
36763700

36773701
it("keeps the desktop git panel and command palette on tighter tool-surface chrome", () => {

0 commit comments

Comments
 (0)