fix(desktop): Settings UI polish — compact provider cards, accent stripe, dashed add-card by hqhq1025 · Pull Request #45 · OpenCoworkAI/open-codesign

hqhq1025 · 2026-04-18T18:52:09Z

Why

Follow-up to #28. The full-page Settings landed but the visual rhythm is rough: the active provider card looks like an alert, the BYOK chip clogs the TopBar, and the add-provider affordance hides in the header.

Changes

ProviderCard compact layout — label, "当前" pill, masked key, baseUrl now share one row instead of stacking; card height drops by ~half.
Active card aesthetic — replace the full --color-accent-soft brown wash with a 3px left accent stripe + a much subtler --color-accent-tint background (new token via color-mix). No more "alert" feel.
"当前" pill — outlined (border + accent text + transparent bg) instead of filled, so it reads cleanly on the tinted card.
Add-provider ghost card — dashed button at the end of the provider list, in addition to the header button. Surfaces the action where users naturally look.
Theme cards (Appearance) — same stripe + tint convention, so active surfaces are consistent across the page.
Sidebar nav — active item gets a 3px left accent stripe; nav still typographically minimal but with system-menu weight.
Header alignment — title and "+ 添加服务" share min-h-8 so they sit on the same baseline.
TopBar BYOK chip — model slug hidden by default, revealed on hover via group-hover. Frees TopBar real estate without losing data.

Token

Added --color-accent-tint (light + dark) in packages/ui/src/tokens.css — color-mix of accent into surface so the tint stays semantic instead of hardcoded brown.

PRINCIPLES §5b

Compatibility: no API/IPC/schema changes
Upgradeability: token-driven; future theme tweaks update the tint automatically
No bloat: no new deps, +55/-47 LOC across 3 files
Elegance: more surface for content, less brown wash, single-row metadata

Verify

pnpm typecheck — 0 errors
pnpm lint — 0 errors
pnpm -r test -- --run — all green (Settings.test.ts unaffected; only visual code changed)

Closes (none — visual polish from user feedback)

github-actions

Findings

[Major] BYOK model becomes inaccessible without hover — the model label is wrapped in hidden group-hover:inline, so keyboard-only and touch users cannot reveal it, which removes critical provider/model context in TopBar. Evidence apps/desktop/src/renderer/src/components/TopBar.tsx:44
Suggested fix:
```

 ·
 {modelLabel}

```
[Major] New hardcoded spacing/sizing values violate the UI token constraint — this diff introduces raw Tailwind scale/arbitrary sizes (px-3, py-2.5, h-10, before:w-[3px], etc.) instead of token-based values, conflicting with the project rule that UI values must come from packages/ui tokens. Evidence apps/desktop/src/renderer/src/components/Settings.tsx:474
Suggested fix:
```
className="rounded-[var(--radius-lg)] border px-[var(--space-3)] py-[var(--space-2_5)] transition-colors"
// and for stripe width
// tokens.css
// --size-accent-stripe: 3px;
// usage: before:w-[var(--size-accent-stripe)]
```

Summary

Review mode: initial
2 issues found on modified lines. docs/VISION.md and docs/PRINCIPLES.md were referenced in instructions but are not present in this checkout (Not found in repo/docs), so policy alignment was checked against CLAUDE.md and the hard constraints in this prompt.

Testing

Not run (automation)
Suggested coverage: add/extend apps/desktop/src/renderer/src/components/Settings.test.ts and TopBar tests for non-hover visibility and tokenized class usage regressions.

open-codesign Bot

github-actions · 2026-04-18T18:54:56Z

        {providerLabel}
-        <span className="mx-[var(--space-1)] text-[var(--color-border-strong)]">·</span>
-        <span className="text-[var(--color-text-muted)]">{modelLabel}</span>
+        <span className="hidden group-hover:inline">


[Major] Model visibility is hover-only here (hidden group-hover:inline), so keyboard-only and touch users cannot access active model context.

Suggested fix:

 · {modelLabel}

github-actions · 2026-04-18T18:54:56Z

-            ? 'border-[var(--color-accent)] bg-[var(--color-accent-soft)]'
-            : 'border-[var(--color-border)] bg-[var(--color-surface)]'
-      }`}
+      className={`rounded-[var(--radius-lg)] border px-3 py-2.5 transition-colors ${stateClass}`}


[Major] This introduces raw spacing values (px-3 py-2.5) instead of tokenized values, which conflicts with the project UI-token constraint. Similar new literals appear in this diff (h-10, before:w-[3px]).

Suggested fix:

className="rounded-[var(--radius-lg)] border px-[var(--space-3)] py-[var(--space-2_5)] transition-colors"

/* packages/ui/src/tokens.css */ --size-accent-stripe: 3px;

before:w-[var(--size-accent-stripe)]

Show short model label (last segment after '/') always, expand to full slug on hover. Previous behavior hid the entire model behind group-hover, making provider/model context invisible to keyboard and touch users. Addresses Codex Major review on PR #45.

github-actions

Findings

[Major] Newly added hardcoded spacing/sizing values break the token-only UI rule — the diff introduces raw Tailwind scale/arbitrary values (px-3, py-2.5, h-10, before:w-[3px]) instead of token variables from packages/ui, which violates the project hard constraint and risks CI failures. Evidence apps/desktop/src/renderer/src/components/Settings.tsx:474, apps/desktop/src/renderer/src/components/Settings.tsx:767, apps/desktop/src/renderer/src/components/Settings.tsx:1203
Suggested fix:
```
// Settings.tsx
className={`rounded-[var(--radius-lg)] border px-[var(--space-3)] py-[var(--space-2_5)] transition-colors ${stateClass}`}
className="w-full ... h-[var(--size-control-md)] ..."

// tab accent stripe
className="... before:w-[var(--size-accent-stripe)] ..."
```
```
/* packages/ui/src/tokens.css */
--size-accent-stripe: 3px;
```

Summary

Review mode: follow-up after new commits
1 major issue found in added/modified lines.
Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md in this checkout.
Residual risk: this PR changes visual states but includes no updated Vitest/Playwright coverage for these UI state transitions.

Testing

Not run (automation)

open-codesign Bot

github-actions · 2026-04-18T19:07:09Z

-            ? 'border-[var(--color-accent)] bg-[var(--color-accent-soft)]'
-            : 'border-[var(--color-border)] bg-[var(--color-surface)]'
-      }`}
+      className={`rounded-[var(--radius-lg)] border px-3 py-2.5 transition-colors ${stateClass}`}


This newly added class uses hardcoded spacing (px-3 py-2.5) instead of token vars, which conflicts with the token-only UI constraint.

Suggested minimal change:

className={`rounded-[var(--radius-lg)] border px-[var(--space-3)] py-[var(--space-2_5)] transition-colors ${stateClass}`}

Token discipline pass on the three onboarding screens — all raw px sizes swapped for the equivalent token utility, label/heading recipes aligned across the flow, motion-safe variants applied to hover translates, and chip control sized to --size-control-sm for visual rhythm with the input. - index.tsx Stepper: drop raw text-[11px], use --text-2xs + --tracking-label; add screen-reader step count, motion-safe transition. - Welcome: title bumped to --text-xl with --tracking-heading; subtitle/captions on token recipe; PathButton hover translate gated by motion-safe + active state for press feedback. - ChooseModel: heading/description on shared recipe; ModelPicker chips bumped to h-[var(--size-control-sm)] (32 px) so the chip row matches the 40 px input rhythm; chips carry aria-pressed; cost/baseUrl notes on --text-xs / --leading-ui. No new strings, no new tokens, no layout/visual restructuring — the purpose is to align this surface with the same recipes Settings #45 and the chain-rewrite #46 already converged on, so dark-mode + zh-CN behave predictably. PRINCIPLES: - Compatibility: render-only changes, no schema/IPC touch. - Upgradeability: tokens centralize for future theme work. - No bloat: -8 LOC net. - Elegance: removes raw-px inconsistencies the audit doc flagged. Signed-off-by: hqhq1025 <[email protected]>

…ripe Tightens Settings page visual density and reduces the "alert-like" brown wash that made active provider cards feel heavy. - ProviderCard: collapse header into a single row (label, pill, masked key, baseUrl all flow on one line) so the card height roughly halves. - Active card: replace full bg-accent-soft fill with a 3px left accent stripe over a subtle accent tint (new --color-accent-tint token via color-mix). - "Active" pill: outlined (border + accent text + transparent bg) instead of filled, raising contrast on the tinted card and feeling lighter. - Add-provider affordance: dashed ghost button at the end of the list surfaces "+ 添加服务" inline next to existing cards. - Theme cards (AppearanceTab) follow the same stripe + tint convention so active surfaces stay consistent across the page. - Sidebar nav: active item gets a left accent stripe + slightly larger pad, giving it system-menu weight without changing typography. - Header: tighter min-h alignment between section title and add-button. - TopBar BYOK chip: model slug hidden by default, revealed on hover — frees TopBar real estate without losing information. Signed-off-by: hqhq1025 <[email protected]>

Show short model label (last segment after '/') always, expand to full slug on hover. Previous behavior hid the entire model behind group-hover, making provider/model context invisible to keyboard and touch users. Addresses Codex Major review on PR #45. Signed-off-by: hqhq1025 <[email protected]>

Address Codex Major: Settings.tsx introduced raw Tailwind scale and arbitrary values (px-3, py-2.5, h-10, before:w-[3px], etc.) that violate the token-only UI rule. Convert all newly added spacing/ sizing values to var(--space-*)/var(--size-*) lookups, and add a new --size-accent-stripe token for the 3px accent bar reused by the active provider card, theme card, and settings tab. Signed-off-by: hqhq1025 <[email protected]>

github-actions

Findings

No blocker/major/minor findings identified on the added/modified lines in this revision.

Summary

Review mode: follow-up after new commits
No new issues found in the latest diff; previously flagged token hardcoding is addressed in this head.
Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md in this checkout.
Residual risk: this PR changes multiple interactive UI states (provider card state, tab active indicator, BYOK label behavior) without accompanying Vitest/Playwright coverage updates.

Testing

Not run (automation)
Suggested coverage additions: renderer unit tests for ByokBadge short/full label behavior and Playwright visual/assertion checks for Settings active/error state classes.

open-codesign Bot

Token discipline pass on the three onboarding screens — all raw px sizes swapped for the equivalent token utility, label/heading recipes aligned across the flow, motion-safe variants applied to hover translates, and chip control sized to --size-control-sm for visual rhythm with the input. - index.tsx Stepper: drop raw text-[11px], use --text-2xs + --tracking-label; add screen-reader step count, motion-safe transition. - Welcome: title bumped to --text-xl with --tracking-heading; subtitle/captions on token recipe; PathButton hover translate gated by motion-safe + active state for press feedback. - ChooseModel: heading/description on shared recipe; ModelPicker chips bumped to h-[var(--size-control-sm)] (32 px) so the chip row matches the 40 px input rhythm; chips carry aria-pressed; cost/baseUrl notes on --text-xs / --leading-ui. No new strings, no new tokens, no layout/visual restructuring — the purpose is to align this surface with the same recipes Settings #45 and the chain-rewrite #46 already converged on, so dark-mode + zh-CN behave predictably. PRINCIPLES: - Compatibility: render-only changes, no schema/IPC touch. - Upgradeability: tokens centralize for future theme work. - No bloat: -8 LOC net. - Elegance: removes raw-px inconsistencies the audit doc flagged. Signed-off-by: hqhq1025 <[email protected]>

…ipe, dashed add-card (#45) * fix(desktop): Settings UI polish — compact provider cards + accent stripe Tightens Settings page visual density and reduces the "alert-like" brown wash that made active provider cards feel heavy. - ProviderCard: collapse header into a single row (label, pill, masked key, baseUrl all flow on one line) so the card height roughly halves. - Active card: replace full bg-accent-soft fill with a 3px left accent stripe over a subtle accent tint (new --color-accent-tint token via color-mix). - "Active" pill: outlined (border + accent text + transparent bg) instead of filled, raising contrast on the tinted card and feeling lighter. - Add-provider affordance: dashed ghost button at the end of the list surfaces "+ 添加服务" inline next to existing cards. - Theme cards (AppearanceTab) follow the same stripe + tint convention so active surfaces stay consistent across the page. - Sidebar nav: active item gets a left accent stripe + slightly larger pad, giving it system-menu weight without changing typography. - Header: tighter min-h alignment between section title and add-button. - TopBar BYOK chip: model slug hidden by default, revealed on hover — frees TopBar real estate without losing information. Signed-off-by: hqhq1025 <[email protected]> * fix(topbar): keep BYOK model slug accessible without hover Show short model label (last segment after '/') always, expand to full slug on hover. Previous behavior hid the entire model behind group-hover, making provider/model context invisible to keyboard and touch users. Addresses Codex Major review on PR #45. Signed-off-by: hqhq1025 <[email protected]> * fix(desktop): replace hardcoded spacing/sizing with ui tokens Address Codex Major: Settings.tsx introduced raw Tailwind scale and arbitrary values (px-3, py-2.5, h-10, before:w-[3px], etc.) that violate the token-only UI rule. Convert all newly added spacing/ sizing values to var(--space-*)/var(--size-*) lookups, and add a new --size-accent-stripe token for the 3px accent bar reused by the active provider card, theme card, and settings tab. Signed-off-by: hqhq1025 <[email protected]> --------- Signed-off-by: hqhq1025 <[email protected]>

github-actions Bot reviewed Apr 18, 2026

View reviewed changes

hqhq1025 mentioned this pull request Apr 18, 2026

fix(desktop): polish onboarding (Welcome / PasteKey / ChooseModel) #48

Closed

4 tasks

hqhq1025 added 3 commits April 19, 2026 03:19

hqhq1025 force-pushed the wt/settings-polish branch from 9494559 to 4bbe5e6 Compare April 18, 2026 19:22

github-actions Bot reviewed Apr 18, 2026

View reviewed changes

hqhq1025 merged commit d3d04f0 into main Apr 18, 2026
6 checks passed

hqhq1025 deleted the wt/settings-polish branch April 18, 2026 19:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(desktop): Settings UI polish — compact provider cards, accent stripe, dashed add-card#45

fix(desktop): Settings UI polish — compact provider cards, accent stripe, dashed add-card#45
hqhq1025 merged 3 commits intomainfrom
wt/settings-polish

hqhq1025 commented Apr 18, 2026

Uh oh!

github-actions Bot left a comment

Uh oh!

github-actions Bot Apr 18, 2026

Uh oh!

github-actions Bot Apr 18, 2026

Uh oh!

github-actions Bot left a comment

Uh oh!

github-actions Bot Apr 18, 2026

Uh oh!

github-actions Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

hqhq1025 commented Apr 18, 2026

Why

Changes

Token

PRINCIPLES §5b

Verify

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Apr 18, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Apr 18, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Apr 18, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant