feat(ui): Anthropic-inspired warm aesthetic + starter cards + BYOK badge#25
feat(ui): Anthropic-inspired warm aesthetic + starter cards + BYOK badge#25
Conversation
There was a problem hiding this comment.
Findings
-
[Blocker] Hardcoded English copy breaks i18n flow and regresses localized UX — this replaces translation keys with literal strings in user-facing UI, so non-English users will see untranslated content. Evidence:
apps/desktop/src/renderer/src/components/Sidebar.tsx:202,apps/desktop/src/renderer/src/components/TopBar.tsx:37,apps/desktop/src/renderer/src/preview/EmptyState.tsx:12
Suggested fix:import { useT } from '@open-codesign/i18n'; const t = useT(); placeholder={t('chat.placeholder')} title={t('topbar.byok.title')} <Tooltip label={t('topbar.byok.spendingTooltip')}> // starter labels/prompts from i18n keys, e.g. t('demos.pitchDeck.title')
-
[Major] New badge styles introduce hardcoded spacing/font sizes instead of
packages/uitokens — this violates the project UI constraint and makes future token-driven theming inconsistent. Evidence:apps/desktop/src/renderer/src/components/TopBar.tsx:36,apps/desktop/src/renderer/src/components/TopBar.tsx:40,apps/desktop/src/renderer/src/components/TopBar.tsx:51
Suggested fix:<div className="... px-[var(--space-3)] py-[var(--space-1)] ..."> <span className="text-[var(--font-size-body-xs)] ...">...</span> <span className="w-[1px] h-[var(--space-3)] ..." aria-hidden="true" /> <span className="text-[var(--font-size-body-xs)] ...">...</span> </div>
-
[Minor] No test updates for newly introduced rendering logic and copy paths — this adds new conditional UI behavior (
ByokBadge) and starter-card interactions without corresponding Vitest coverage, increasing regression risk. Evidence:apps/desktop/src/renderer/src/components/TopBar.tsx:13,apps/desktop/src/renderer/src/preview/EmptyState.tsx:10
Suggested fix:// TopBar.test.tsx it('shows BYOK badge when provider/model are configured', () => { // arrange store with provider+model and assert badge text is rendered }); // EmptyState.test.tsx it('calls onPickStarter with selected starter prompt', async () => { // click starter card and assert callback payload });
Summary
- Review mode: initial
- 3 issues found in changed lines: 1 blocker (i18n regression), 1 major (token constraint violation), 1 minor (missing tests for new behavior).
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs (per this checkout), so their latest internal guidance could not be re-validated here.
Testing
- Not run (automation)
open-codesign Bot
| }} | ||
| onKeyDown={handleKeyDown} | ||
| placeholder={t('chat.placeholder')} | ||
| placeholder="Describe a design… try 'Pitch deck for a fintech startup'" |
There was a problem hiding this comment.
Hardcoded placeholder text bypasses i18n keys and regresses localization. Please route this through chat.placeholder (or equivalent localized key).
|
|
||
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" |
There was a problem hiding this comment.
New badge uses hardcoded spacing/font sizes (px-2.5, py-1, text-[11px]). Project constraint requires token-backed UI values; replace with var(--space-) and var(--font-size-) tokens.
| const t = useT(); | ||
| const STARTER_CARDS: StarterCard[] = [ | ||
| { | ||
| label: 'Landing page for an AI startup', |
There was a problem hiding this comment.
Starter labels/prompts are hardcoded English literals. This removes localization support and duplicates content outside i18n resources; prefer translation keys for label and prompt text.
| const noDragStyle = { WebkitAppRegion: 'no-drag' } as CSSProperties; | ||
|
|
||
| // Shell badge — mock data. Full cost accounting tracked separately. | ||
| function ByokBadge() { |
There was a problem hiding this comment.
Please add or extend component tests for ByokBadge rendering behavior (configured vs unconfigured provider/model) to reduce regression risk for this new branch logic.
There was a problem hiding this comment.
Findings
-
[Blocker] Starter prompts are now hardcoded English strings, which regresses localized generation behavior for non-English users and bypasses i18n prompt resources. Evidence
apps/desktop/src/renderer/src/preview/EmptyState.tsx:16.
Suggested fix:interface StarterCard { labelKey: string; promptKey: string; } const STARTER_CARDS: StarterCard[] = [ { labelKey: 'emptyState.starters.landing', promptKey: 'emptyState.prompts.landing' }, // ... ]; onClick={() => onPickStarter(t(card.promptKey))}
-
[Major] BYOK badge still contains hardcoded English UI copy (
title, tooltip label), so Chinese locale users will see untranslated text. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:38,apps/desktop/src/renderer/src/components/TopBar.tsx:50.
Suggested fix:<div title={t('topbar.byokTitle')}> <Tooltip label={t('topbar.byokSpendTooltip')}>
-
[Major] BYOK badge uses hardcoded spacing/sizing values instead of UI tokens (
px-2.5,py-1,text-[11px],h-3,ml-1), violating the token-only UI constraint. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:37,apps/desktop/src/renderer/src/components/TopBar.tsx:41,apps/desktop/src/renderer/src/components/TopBar.tsx:47,apps/desktop/src/renderer/src/components/TopBar.tsx:57.
Suggested fix:className="... px-[var(--space-3)] py-[var(--space-1)] ..." className="text-[var(--font-size-body-xs)] ..." <span className="w-[1px] h-[var(--space-3)] ..." /> <span className="ml-[var(--space-1)] ..." />
-
[Minor] New rendering branches were added (
ByokBadge, starter-card prompt wiring) without corresponding tests, leaving regression risk for visibility/localization/callback behavior. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:13,apps/desktop/src/renderer/src/preview/EmptyState.tsx:12.
Suggested fix:it('renders BYOK badge only when provider and model are configured', () => { // assert hidden when missing config, visible when present }); it('uses localized starter prompt text when starter card is clicked', async () => { // assert onPickStarter receives localized prompt from i18n key });
Summary
- Review mode: follow-up after new commits
- 4 issues found in changed lines: 1 blocker, 2 major, 1 minor.
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs.
Testing
- Not run (automation)
open-codesign Bot
| { | ||
| labelKey: 'emptyState.starters.landing', | ||
| prompt: | ||
| 'Design a modern marketing landing page for an AI startup. Include a bold hero section with tagline, three feature cards, social proof section, and a primary CTA. Use a warm neutral palette with confident typography.', |
There was a problem hiding this comment.
Hardcoded English starter prompt text regresses locale-specific prompt behavior. Please source prompts from i18n keys and pass t(promptKey) into onPickStarter.
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" | ||
| title="BYOK — bring-your-own-key. Full usage tracking coming soon." |
There was a problem hiding this comment.
This title string is hardcoded English. Please move it to i18n (e.g. topbar.byokTitle) so non-English locales are translated.
|
|
||
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" |
There was a problem hiding this comment.
This badge still uses hardcoded spacing/font sizing (px-2.5, py-1) instead of token vars. Please replace with var(--space-*)/var(--font-size-*) token-backed values.
| const noDragStyle = { WebkitAppRegion: 'no-drag' } as CSSProperties; | ||
|
|
||
| // Shell badge — mock data. Full cost accounting tracked separately. | ||
| function ByokBadge() { |
There was a problem hiding this comment.
New branch logic in ByokBadge needs coverage for configured/unconfigured states and locale text rendering. Please add a focused component test.
There was a problem hiding this comment.
Findings
-
[Major] BYOK badge still ships untranslated English UI copy, which causes locale inconsistency in non-English sessions. Evidence
apps/desktop/src/renderer/src/components/TopBar.tsx:38,apps/desktop/src/renderer/src/components/TopBar.tsx:50.
Suggested fix:<div title={t('topbar.byokTitle')}> <Tooltip label={t('topbar.byokSpendTooltip')}>
-
[Blocker] New BYOK badge uses hardcoded sizing/spacing values (
px-2.5,py-1,text-[11px],mx-1,h-3,ml-1) in app code, which violates the token-only UI constraint inCLAUDE.md. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:37,apps/desktop/src/renderer/src/components/TopBar.tsx:41,apps/desktop/src/renderer/src/components/TopBar.tsx:43,apps/desktop/src/renderer/src/components/TopBar.tsx:47,apps/desktop/src/renderer/src/components/TopBar.tsx:57.
Suggested fix:className="... px-[var(--space-3)] py-[var(--space-1)] ..." className="text-[var(--font-size-body-xs)] ..." <span className="mx-[var(--space-1)] ...">·</span> <span className="w-px h-[var(--space-3)] ..." aria-hidden="true" /> <span className="ml-[var(--space-1)] ...">{t('topbar.spendThisWeek')}</span>
-
[Minor] New behavior paths were added without focused tests (
ByokBadgevisibility + localized starter prompt callback), leaving regression risk for i18n and conditional rendering. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:13,apps/desktop/src/renderer/src/preview/EmptyState.tsx:56.
Suggested fix:it('renders BYOK badge only when provider and model are configured', () => { // assert hidden when provider/model missing, visible otherwise }); it('passes localized starter prompt text on card click', async () => { // assert onPickStarter receives t(starterPrompts.*) });
Summary
- Review mode: follow-up after new commits
- 3 issues found in changed lines: 1 blocker, 1 major, 1 minor.
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs.
Testing
- Not run (automation)
open-codesign Bot
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" | ||
| title="BYOK — bring-your-own-key. Full usage tracking coming soon." |
There was a problem hiding this comment.
This tooltip/title copy is hardcoded English. Please move both strings to i18n keys so Chinese locale stays fully translated.
<div title={t("topbar.byokTitle")}>
<Tooltip label={t("topbar.byokSpendTooltip")}>|
|
||
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" |
There was a problem hiding this comment.
Hardcoded UI values here (px-2.5, py-1) violate the token-only UI rule. Please use var(--space-*)/var(--font-size-*) tokens consistently.
className="... px-[var(--space-3)] py-[var(--space-1)] ..."| const noDragStyle = { WebkitAppRegion: 'no-drag' } as CSSProperties; | ||
|
|
||
| // Shell badge — mock data. Full cost accounting tracked separately. | ||
| function ByokBadge() { |
There was a problem hiding this comment.
New ByokBadge branch logic currently has no focused test coverage. Please add a component test for hidden/visible states based on store config and locale rendering expectations.
it("renders BYOK badge only when provider and model are configured", () => {
// ...
});There was a problem hiding this comment.
Findings
-
[Blocker] Token-only UI constraint is still violated by newly introduced hardcoded spacing/size values (
px-2.5,py-1,text-[11px],mx-1,h-3,ml-1,hover:-translate-y-[2px]) in new UI code, which conflicts with the project rule that UI values must come frompackages/uitokens. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:37,apps/desktop/src/renderer/src/components/TopBar.tsx:41,apps/desktop/src/renderer/src/components/TopBar.tsx:43,apps/desktop/src/renderer/src/components/TopBar.tsx:47,apps/desktop/src/renderer/src/components/TopBar.tsx:57,apps/desktop/src/renderer/src/preview/EmptyState.tsx:63.
Suggested fix:className="... px-[var(--space-3)] py-[var(--space-1)] ..." className="text-[var(--font-size-body-xs)] ..." <span className="mx-[var(--space-1)] ...">·</span> <span className="w-px h-[var(--space-3)] ..." aria-hidden="true" /> <span className="ml-[var(--space-1)] ...">{t('topbar.spendThisWeek')}</span> // In EmptyState: className="... hover:-translate-y-[var(--space-0_5)] ..."
-
[Minor] New behavior branches are still untested (
ByokBadgeconditional render + starter prompt callback wiring), leaving regression risk for i18n and visibility logic. Evidenceapps/desktop/src/renderer/src/components/TopBar.tsx:20,apps/desktop/src/renderer/src/preview/EmptyState.tsx:56.
Suggested fix:it('renders BYOK badge only when provider and model are configured', () => { // assert hidden when provider/model missing, visible otherwise }); it('passes localized starter prompt to onPickStarter', async () => { // click starter card and assert callback received t(starterPrompts.*) });
Summary
- Review mode: follow-up after new commits
- 2 issues found in changed lines: 1 blocker, 1 minor.
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs.
Testing
- Not run (automation)
open-codesign Bot
|
|
||
| return ( | ||
| <div | ||
| className="flex items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 select-none" |
There was a problem hiding this comment.
Token-only UI rule is still violated here by hardcoded values (px-2.5, py-1, plus nearby text-[11px]/h-3/ml-1). Please switch to var(--space-*) and var(--font-size-*) tokens.
className="... px-[var(--space-3)] py-[var(--space-1)] text-[var(--font-size-body-xs)] ..."| type="button" | ||
| onClick={() => onPickStarter(t(`demos.${starterId}.prompt`))} | ||
| className="px-3 py-1.5 rounded-[var(--radius-full)] text-[var(--text-xs)] font-medium bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] transition-colors" | ||
| onClick={() => onPickStarter(t(card.promptKey))} |
There was a problem hiding this comment.
New starter-card behavior should be covered with focused tests: assert each card passes localized starterPrompts.* text to onPickStarter, and BYOK badge visibility logic remains correct.
it('passes localized starter prompt to onPickStarter', async () => {
// ...
})There was a problem hiding this comment.
Findings
-
[Blocker] Token-only UI constraint is violated by newly added hardcoded spacing utilities in
EmptyState(px-8,py-12,gap-8,space-y-3,gap-3). This introduces non-token UI values in changed lines and conflicts with the project rule that UI values must come frompackages/uitokens. Evidenceapps/desktop/src/renderer/src/preview/EmptyState.tsx:35,apps/desktop/src/renderer/src/preview/EmptyState.tsx:36,apps/desktop/src/renderer/src/preview/EmptyState.tsx:38,apps/desktop/src/renderer/src/preview/EmptyState.tsx:51.
Suggested fix:<div className="h-full flex items-center justify-center px-[var(--space-8)] py-[var(--space-12)]"> <div className="w-full max-w-xl flex flex-col items-center gap-[var(--space-8)]"> <div className="text-center space-y-[var(--space-3)]"> ... <div className="w-full grid grid-cols-2 gap-[var(--space-3)]">
-
[Major] Importing
@open-codesign/uiat app bootstrap to load fonts pulls the package root module graph instead of a font-only entrypoint, which increases initial renderer work and bundle surface on startup.packages/ui/src/index.tsnow has side effects and component re-exports, so this import is broader than intended. Evidenceapps/desktop/src/renderer/src/main.tsx:2,packages/ui/src/index.ts:2.
Suggested fix:// packages/ui/package.json { "exports": { ".": "./src/index.ts", "./fonts": "./src/fonts.ts", "./tokens.css": "./src/tokens.css", "./preset": "./src/preset.ts" } } // apps/desktop/src/renderer/src/main.tsx import '@open-codesign/ui/fonts';
Summary
- Review mode: follow-up after new commits
- 2 issues found in changed lines: 1 blocker, 1 major.
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs.
Testing
- Not run (automation)
- Missing coverage for new behavior in this diff (suggest adding Vitest tests for
ByokBadgevisibility/labels and starter-card callback wiring inEmptyState).
open-codesign Bot
| <div className="relative w-20 h-20 rounded-full bg-[var(--color-surface)] border border-[var(--color-border)] flex items-center justify-center shadow-[var(--shadow-card)]"> | ||
| <Sparkles className="w-8 h-8 text-[var(--color-accent)]" /> | ||
| </div> | ||
| <div className="h-full flex items-center justify-center px-8 py-12"> |
There was a problem hiding this comment.
[Blocker] New hardcoded spacing utilities (px-8, py-12, plus nearby gap-8 / space-y-3 / gap-3) violate the token-only UI rule for changed lines. Please switch these to var(--space-*) tokens.
<div className="h-full flex items-center justify-center px-[var(--space-8)] py-[var(--space-12)]">
<div className="w-full max-w-xl flex flex-col items-center gap-[var(--space-8)]">| @@ -1,4 +1,5 @@ | |||
| import { initI18n } from '@open-codesign/i18n'; | |||
| import '@open-codesign/ui'; | |||
There was a problem hiding this comment.
[Major] Importing @open-codesign/ui here for side effects loads the UI package root module graph (components + side effects), not just fonts. Please expose a dedicated ./fonts export and import that directly to keep startup lean.
// main.tsx
import '@open-codesign/ui/fonts';cc75447 to
4c1f38e
Compare
There was a problem hiding this comment.
Findings
- [Major] Renderer bootstrap imports the package root (
@open-codesign/ui) only for side effects, which pulls the root UI module graph at startup instead of a font-only entrypoint. This increases initial bundle surface and startup work on the hot path. Evidenceapps/desktop/src/renderer/src/main.tsx:2,packages/ui/src/index.ts:1
Suggested fix:// packages/ui/package.json { "exports": { ".": "./src/index.ts", "./fonts": "./src/fonts.ts", "./tokens.css": "./src/tokens.css", "./preset": "./src/preset.ts" } } // apps/desktop/src/renderer/src/main.tsx import '@open-codesign/ui/fonts';
Summary
- Review mode: follow-up after new commits
- 1 issue found in changed lines (Major).
docs/VISION.mdanddocs/PRINCIPLES.md: Not found in repo/docs.- Residual risk: no evidence in this diff of install-size measurement after adding three font packages.
Testing
- Not run (automation)
- Missing coverage for new UI behavior in changed files (suggest Vitest coverage for
ByokBadgevisibility/label mapping andEmptyStatestarter-card callback wiring).
open-codesign Bot
| @@ -1,4 +1,5 @@ | |||
| import { initI18n } from '@open-codesign/i18n'; | |||
| import '@open-codesign/ui'; | |||
There was a problem hiding this comment.
[Major] main.tsx imports @open-codesign/ui for side effects, which loads the UI package root module graph instead of only font side effects. Please add a dedicated ./fonts export and import that directly from bootstrap.
// main.tsx
import '@open-codesign/ui/fonts';97dc674 to
453ebdc
Compare
There was a problem hiding this comment.
Findings
- [Minor] Duplicate font side-effect loading path increases maintenance risk and can create redundant CSS/font side-effects in bundling pipelines, evidence
apps/desktop/src/renderer/src/main.tsx:2andpackages/ui/src/index.ts:2.
Suggested fix:// packages/ui/src/index.ts // remove implicit global side effect from package root export { Button } from './components/Button'; // ... // apps/desktop/src/renderer/src/main.tsx // keep one explicit app-level import import '@open-codesign/ui/fonts';
Summary
- Review mode: follow-up after new commits
- 1 minor issue found in modified lines.
- Constraint checks on this diff: no direct provider SDK imports found, UI tokens usage is substantially improved, production dependency count remains within the stated budget (26 <= 30).
- Not found in repo/docs:
docs/VISION.md,docs/PRINCIPLES.mdin this checkout, so those docs could not be revalidated here.
Testing
- Not run (automation).
- Coverage gap: no new Vitest/Playwright tests for
TopBar/EmptyStateUI behavior introduced in this diff.
open-codesign Bot
| @@ -1,4 +1,5 @@ | |||
| import { initI18n } from '@open-codesign/i18n'; | |||
| import '@open-codesign/ui/fonts'; | |||
There was a problem hiding this comment.
@open-codesign/ui/fonts is now imported here, while @open-codesign/ui root also imports ./fonts (packages/ui/src/index.ts). Keeping a single import path avoids duplicate side-effect ownership and bundling ambiguity.
Codex review on PR #25 flagged duplicate font side-effect loading: both `@open-codesign/ui` (via `index.ts`) and `@open-codesign/ui/fonts` imported the variable font side-effects, risking redundant CSS injection and adding maintenance overhead. Drop the implicit `import './fonts'` from the `ui` package barrel and keep the explicit `@open-codesign/ui/fonts` entry in the renderer's `main.tsx` as the single load point. Also clean up rebase fallout against origin/main: - merge duplicate `topbar` blocks in en.json and zh-CN.json - format Sidebar.tsx - replace pre-existing non-null assertions in store.ts and the generation-stage test with proper null checks (biome lint). Signed-off-by: hqhq1025 <[email protected]>
453ebdc to
93481e1
Compare
There was a problem hiding this comment.
Findings
- No blocking/major/minor issues found in the added/modified lines of this diff.
Summary
- Review mode: follow-up after new commits
- No issues found in modified lines for correctness, security, regressions, or hard-constraint compliance.
- Not found in repo/docs:
docs/VISION.md,docs/PRINCIPLES.mdin this checkout.
Testing
- Not run (automation).
- Coverage gap: UI behavior introduced in this PR (
ByokBadge,EmptyStatestarter-card interactions, tokenized style regressions inSidebar) still lacks targeted Vitest/Playwright assertions in this diff.
open-codesign Bot
…alette + starter cards) - packages/ui tokens: migrate to oklch warm cream palette + terracotta accent - Fonts: add Fraunces (serif display), Geist (sans body), JetBrains Mono via @fontsource-variable - EmptyState: replace chip row with editorial heading + 2×2 starter prompt cards w/ hover lift - TopBar: add ByokBadge shell (provider·model + $0.00 this week, mock data) - Sidebar: update textarea placeholder to Anthropic-tone copy - index.css: add h1/h2/h3 display font rule Signed-off-by: hqhq1025 <[email protected]>
Replace hard-coded English strings in Sidebar textarea placeholder, EmptyState heading/subline/starters, and TopBar ByokBadge with t() calls. Add chat.placeholderRich, emptyState.*, and topbar.spendThisWeek keys to both en.json and zh-CN.json. Signed-off-by: hqhq1025 <[email protected]>
Add starterPrompts namespace to en and zh-CN locale files so the actual prompt text injected into the textarea matches the active language. EmptyState now resolves prompts via t(card.promptKey) instead of holding hardcoded English strings. Signed-off-by: hqhq1025 <[email protected]>
Add topbar.byokTitle and topbar.spendTooltip keys (en + zh-CN) and replace the two remaining hard-coded English strings in ByokBadge (title attribute and Tooltip label) with t() calls. Signed-off-by: hqhq1025 <[email protected]>
Replace all hardcoded Tailwind literals in TopBar, EmptyState, and Sidebar with CSS custom property tokens. Add missing tokens to packages/ui/src/tokens.css: --space-0_5, --space-1_5, --space-2_5, --text-2xs, --leading-snug, --duration-faster, --size-icon-xs, --size-icon-sm, --size-icon-md, --size-input-height. Verification grep for text-[Npx], h-N , w-N , translate-y-[Npx] returns 0 matches across all three component files. Signed-off-by: hqhq1025 <[email protected]>
Signed-off-by: hqhq1025 <[email protected]>
Address codex blocker: replace remaining raw Tailwind spacing/size utilities in Sidebar and TopBar with packages/ui tokens. Add new tokens for titlebar height/pad-left, chip max-width, and hover/press scale factors so every UI value flows through the design system. Signed-off-by: hqhq1025 <[email protected]>
…package root Signed-off-by: hqhq1025 <[email protected]>
Codex review on PR #25 flagged duplicate font side-effect loading: both `@open-codesign/ui` (via `index.ts`) and `@open-codesign/ui/fonts` imported the variable font side-effects, risking redundant CSS injection and adding maintenance overhead. Drop the implicit `import './fonts'` from the `ui` package barrel and keep the explicit `@open-codesign/ui/fonts` entry in the renderer's `main.tsx` as the single load point. Also clean up rebase fallout against origin/main: - merge duplicate `topbar` blocks in en.json and zh-CN.json - format Sidebar.tsx - replace pre-existing non-null assertions in store.ts and the generation-stage test with proper null checks (biome lint). Signed-off-by: hqhq1025 <[email protected]>
93481e1 to
c551761
Compare
There was a problem hiding this comment.
Findings
- No blocking/major/minor issues found in added/modified lines of this diff.
Summary
- Review mode: follow-up after new commits
- No issues found in modified lines for correctness, security (OWASP Top 10), regressions, data-loss risk, performance, maintainability, or hard-constraint compliance.
- Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md.
- Residual risk: no tests were added in this diff for new
ByokBadgebehavior andEmptyStatestarter-card interactions.
Testing
- Not run (automation).
- Suggested: add Vitest coverage for
ByokBadgerendering conditions and model-label formatting, plus Playwright checks forEmptyStatestarter-card click-to-prompt flow in both locales.
open-codesign Bot
Summary
packages/uitokens migrated to warm cream + terracotta accent in oklch (replaces hex values, keeps all existing token names for back-compat)@fontsource-variable/*, bundled as woff2EmptyState: replaced chip row with editorial serif heading "Design with intent." + 2×2 starter prompt cards with hover lift + accent borderTopBar: addedByokBadgeshell — provider + model chip and "$0.00 this week" in tabular mono numerals (mock data; full cost accounting is a separate PR)Sidebar: updated textarea placeholder to Anthropic-tone copyindex.css: h1/h2/h3 now usevar(--font-display)(Fraunces)Why
The current UI uses a generic blue-grey palette and Inter — indistinguishable from any SaaS app. This PR establishes the "Editorial warmth meets technical precision" visual thesis: warm cream background, serif display type (analogous to Tiempos/Fraunces), and a warm terracotta accent — all consistent with Anthropic's Claude Design visual language.
Compatibility
--color-background,--color-accent, etc.) — only values changed.dark {}block with warm dark tones (not blue-black)any, TypeScript strict passesTest plan
pnpm dev— verify cream background, Fraunces heading in EmptyState, Geist body textpnpm -r typecheck— all passpnpm lint— no new errorspnpm -r test— 40 tests passSize impact
Three
@fontsource-variablepackages add ~3 woff2 files each (~25–30 KB per font in variable format). Total font bundle delta: ~90 KB — within the 100 KB incremental budget stated in the task spec.