polish(settings): lift every surface to the 使用统计 bar — DataTable primitive, dense health/permission rows, dialect cleanup by jackwener · Pull Request #1274 · apache/maka

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener · 2026-07-20T12:05:40Z

Campaign PR (goal: 其他的部分也要打磨和深度的优化&美化). One audit + two fix waves, accumulated on one branch.

The root fix

#1252's table language was deliberately page-local (single consumer). It now has multiple consumers → promoted to the DataTable primitive in @maka/ui (typed columns: numeric/grow; scoped th; hairline separators; tabular-nums right-aligned numerics). 使用统计 became a thin wrapper — pixel-faithful (class-identity preserved verbatim + new primitive-level tests).

Surfaces converged

健康: bespoke tall signal blocks → dense hairline Item rows in one card; status exception-only (Healthy/Unknown neutral, Error red + Blocks-sending chip); meta single-line tabular-nums. Redundant gray intro banner (repeating the page title) → SectionHeader with badge/timestamp/refresh in the action slot.
权限与能力: bespoke capability blocks + nested gray dl → dense rows with structured secondary lines; a11y names and diagnostics collapse preserved; the OS-row status stripe removed (fix(desktop): status-color restraint — expected states stop shouting green #651). Same intro-banner cleanup.
关于/数据: the .settingsAboutPrivacy brand-blue callout dialect (third parallel callout language) killed — both sites onto SectionHeader + Alert; CSS deleted.
模型: ProvidersPanel section headers onto SectionHeader (counts in the tabular slot, aria-labelledby kept).
Minors: search-modal pre-search hint → EmptyState; 开放网关 5-tile strip no longer orphans the fifth tile.

Process notes

Wave 1's sandbox couldn't produce pixel captures — it deliberately shipped only structurally-verifiable items and mapped the rest; wave 2 verified direct-CDP first, then shipped the visual redesigns with light+dark before/after evidence (maintainer-accepted).
One triage correction caught at merge: a gateway-contract failure earlier labeled pre-existing was actually a missed re-pin from the wave-1 class rename (aria semantics were intact; only the pinned class name changed) — fixed here with the corrected record.
Deferred with reasons: per-tab fixture captures need a VisualSmokeState initial-tab field (core type surgery — documented, not forced).

Gates (merged tree)

desktop 2751/2751 · ui 202/202 · typecheck · check-dead-css · knip ×2 · a11y/copy/console · alignment auditor all fixtures clean. ~10 contracts re-pinned across waves, none deleted. Audited AT-BAR surfaces (命令面板/定时任务/每日回顾/模型列表/连接详情) left untouched.

Promote the #1252 hairline table recipe out of usage-settings-page into a shared DataTable primitive (@maka/ui) now that it has health + permission consumers. The primitive owns the table markup: muted+medium scoped col headers, first-cell-as-scoped-row-header, hairline row separators, right-aligned tabular-nums numeric columns, and one grow column that absorbs slack while the rest size to content on one line. UsageStatsTable becomes a thin wrapper: it keeps the usage-local empty-tab routing (EmptyState icon+copy) that a table primitive deliberately omits, and delegates the non-empty branch to <DataTable>. Rendering is pixel-identical — every utility class and the settingsUsageTable pin class are preserved. Re-pin: the moved table markup is now guarded by packages/ui data-table.test (renderToStaticMarkup); settings-usage-contract's stats-table assertions follow the split — keep the wrapper's typed-column + EmptyState signature, assert delegation to <DataTable>, and forbid a hand-rolled <table>.

The uppercase brand-blue h3 + brand-deep tinted card was a fourth section- header voice, used by 关于's privacy card AND (confusingly) 数据's 配置导入导出 header — the reason 数据's export section wore a blue header. Converge both onto the sanctioned language: - 关于 privacy → SectionHeader (as=h3) + Alert variant=passive holding the privacy points (a quiet 'just so you know' callout; matches the passive Alert language already on the data page's backup notice). - 数据 config → SectionHeader (as=h3, configHelp as subtitle) over the form controls, no card chrome (it's a form, not a callout). Widen SectionHeader's `as` to accept h3 (a section under a page h2). Delete the .settingsAboutPrivacy CSS block (incl. the green ::marker) for neutral gap containers. Re-pin radius-converge (drop the stale selector) and settings-app-info (name now scopes at the section) contracts.

- search-modal: route the pre-search guidance line through the shared EmptyState inline primitive instead of a bare <p>, so the 'start typing' hint uses the sanctioned empty-state language (keeps the placeholder pin class so layout is unchanged). - open-gateway: the posture strip has five metric tiles but reused the four-column .settingsUsageSummary grid, orphaning the fifth on a second row. Give it .settingsGatewaySummary — 5-up on wide, clean 3-up (3 + 2) wrap when the pane narrows.

Each OS-permission row already shows its state as a Badge; the left-edge status stripe (amber on 等待授权, red on 已拒绝) was a redundant second status channel, and the amber stripe read as a standing alarm on an expected waiting state. Remove both stripe rules and the now-orphaned position:relative anchor; the row's Chip/text is the single state signal (the denied icon tint stays as the one exception accent).

The 已连接 and 添加新连接 section titles were a bespoke flex header (bold h3 + muted help + far-right count) — a fourth section-header dialect. Converge both onto the shared SectionHeader primitive: title + subtitle, and the connection count rides SectionHeader's count slot (tabular-nums baked in). Extend SectionHeader with an optional titleId so the catalog section keeps its aria-labelledby link. Delete the .providerRootHeader CSS family. Re-pin: tabular-nums-converge (drop the removed selector, add a SectionHeader primitive pin) and provider-navigation (catalog title now on SectionHeader via titleId).

…de1b8cd63d4

…ge rows Polish wave (wave 2) — kill the bordered-block dialect on the Health and Permission Center pages and the redundant gray intro banners. - Item 2 (健康): HealthSignalRow bordered blocks -> shared Item row primitive inside one hairline card; prose message + detail keep stacked secondary lines, status is a squared Chip (exception-only color via its tone scale), send/capability blockers are exception Chips. Meta on one tabular-nums line. Deleted the bespoke .settingsHealthSignalRow* CSS. - Item 3 (权限): CapabilityRow bordered blocks -> dense hairline-divided rows in one card matching the OS permission list above; the nested gray boxed .settingsCapabilityLayers dl becomes structured secondary lines (no nested surface). readiness Badge -> Chip. Kept the dl + aria-label and the diagnostics collapse. - Item 5: the second gray-banner PageHeader on each page (.settingsHealthIntro / .settingsPermissionIntro) restating the page title -> SectionHeader; unique subtitle kept, badge/timestamp/refresh moved into the action slot, banner chrome dropped. Re-pins: radius-converge SELECTOR_TIER drops the retired .settingsHealthIntro/.settingsPermissionIntro/.settingsCapabilityRow radius entries and adds the new .settingsCapabilityList/.settingsHealthSignalList card entries. roadmap-cleanup + capability-audit contracts unchanged. Verified light+dark via direct CDP over settings-health / settings-permissions. Gates: desktop main + @maka/ui suites, full typecheck, check-dead-css, audit-alignment (settings-permissions clean) all green.

…ySummary Wave 1 renamed the tile strip class (fixing the 4+1 orphan grid) and kept role=group + aria-label, but the network-gateway contract's regexes pinned the old settingsUsageSummary class name — the one re-pin the wave missed. Also corrects the earlier triage: the failure was branch-caused, not pre-existing on main.

jackwener added 8 commits July 20, 2026 18:09

Merge remote-tracking branch 'origin/main' into worktree-agent-a3c642…
6d74a25
…de1b8cd63d4