Skip to content

feat(ui): Anthropic-inspired warm aesthetic + starter cards + BYOK badge#25

Merged
hqhq1025 merged 9 commits intomainfrom
wt/uiux-anthropic
Apr 18, 2026
Merged

feat(ui): Anthropic-inspired warm aesthetic + starter cards + BYOK badge#25
hqhq1025 merged 9 commits intomainfrom
wt/uiux-anthropic

Conversation

@hqhq1025
Copy link
Copy Markdown
Collaborator

Summary

  • packages/ui tokens migrated to warm cream + terracotta accent in oklch (replaces hex values, keeps all existing token names for back-compat)
  • Fonts switched to Fraunces Variable (serif display, OFL), Geist Variable (sans body, OFL), JetBrains Mono Variable (mono/tabular numerals, OFL) — all installed via @fontsource-variable/*, bundled as woff2
  • EmptyState: replaced chip row with editorial serif heading "Design with intent." + 2×2 starter prompt cards with hover lift + accent border
  • TopBar: added ByokBadge shell — 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 copy
  • index.css: h1/h2/h3 now use var(--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

  • All token names preserved (--color-background, --color-accent, etc.) — only values changed
  • Dark mode fully covered in .dark {} block with warm dark tones (not blue-black)
  • No any, TypeScript strict passes
  • 40/40 unit tests pass, lint clean (6 pre-existing warnings in untouched files)

Test plan

  • pnpm dev — verify cream background, Fraunces heading in EmptyState, Geist body text
  • EmptyState: 2×2 starter cards visible, hover shows translateY(-2px) + accent border
  • TopBar: BYOK badge shows after onboarding (provider + model + $0.00 mock)
  • Dark mode toggle — verify warm dark palette (not cold blue-black)
  • Sidebar textarea shows new placeholder copy
  • pnpm -r typecheck — all pass
  • pnpm lint — no new errors
  • pnpm -r test — 40 tests pass

Size impact

Three @fontsource-variable packages 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.

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/ui tokens — 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.md and docs/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'"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add or extend component tests for ByokBadge rendering behavior (configured vs unconfigured provider/model) to reduce regression risk for this new branch logic.

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 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')}>
  • [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. Evidence apps/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. Evidence apps/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.md and docs/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.',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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."
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New branch logic in ByokBadge needs coverage for configured/unconfigured states and locale text rendering. Please add a focused component test.

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 in CLAUDE.md. Evidence apps/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 (ByokBadge visibility + localized starter prompt callback), leaving regression risk for i18n and conditional rendering. Evidence apps/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.md and docs/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."
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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", () => {
  // ...
});

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 from packages/ui tokens. Evidence apps/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 (ByokBadge conditional render + starter prompt callback wiring), leaving regression risk for i18n and visibility logic. Evidence apps/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.md and docs/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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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))}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 () => {
  // ...
})

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 from packages/ui tokens. Evidence apps/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/ui at 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.ts now has side effects and component re-exports, so this import is broader than intended. Evidence apps/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.md and docs/PRINCIPLES.md: Not found in repo/docs.

Testing

  • Not run (automation)
  • Missing coverage for new behavior in this diff (suggest adding Vitest tests for ByokBadge visibility/labels and starter-card callback wiring in EmptyState).

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">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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)]">

Comment thread apps/desktop/src/renderer/src/main.tsx Outdated
@@ -1,4 +1,5 @@
import { initI18n } from '@open-codesign/i18n';
import '@open-codesign/ui';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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';

@hqhq1025 hqhq1025 force-pushed the wt/uiux-anthropic branch from cc75447 to 4c1f38e Compare April 18, 2026 16:42
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. Evidence apps/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.md and docs/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 ByokBadge visibility/label mapping and EmptyState starter-card callback wiring).

open-codesign Bot

Comment thread apps/desktop/src/renderer/src/main.tsx Outdated
@@ -1,4 +1,5 @@
import { initI18n } from '@open-codesign/i18n';
import '@open-codesign/ui';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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';

@hqhq1025 hqhq1025 force-pushed the wt/uiux-anthropic branch from 97dc674 to 453ebdc Compare April 18, 2026 18:03
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:2 and packages/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.md in this checkout, so those docs could not be revalidated here.

Testing

  • Not run (automation).
  • Coverage gap: no new Vitest/Playwright tests for TopBar/EmptyState UI behavior introduced in this diff.

open-codesign Bot

@@ -1,4 +1,5 @@
import { initI18n } from '@open-codesign/i18n';
import '@open-codesign/ui/fonts';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

hqhq1025 added a commit that referenced this pull request Apr 18, 2026
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]>
@hqhq1025 hqhq1025 force-pushed the wt/uiux-anthropic branch from 453ebdc to 93481e1 Compare April 18, 2026 18:30
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.md in this checkout.

Testing

  • Not run (automation).
  • Coverage gap: UI behavior introduced in this PR (ByokBadge, EmptyState starter-card interactions, tokenized style regressions in Sidebar) 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]>
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]>
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]>
@hqhq1025 hqhq1025 force-pushed the wt/uiux-anthropic branch from 93481e1 to c551761 Compare April 18, 2026 18:36
@hqhq1025 hqhq1025 merged commit 269658d into main Apr 18, 2026
6 checks passed
@hqhq1025 hqhq1025 deleted the wt/uiux-anthropic branch April 18, 2026 18:39
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ByokBadge behavior and EmptyState starter-card interactions.

Testing

  • Not run (automation).
  • Suggested: add Vitest coverage for ByokBadge rendering conditions and model-label formatting, plus Playwright checks for EmptyState starter-card click-to-prompt flow in both locales.

open-codesign Bot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant