Skip to content

feat(ui): font hierarchy redesign per #300#306

Merged
Astro-Han merged 11 commits into
devfrom
claude/font-hierarchy
Apr 28, 2026
Merged

feat(ui): font hierarchy redesign per #300#306
Astro-Han merged 11 commits into
devfrom
claude/font-hierarchy

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Apr 28, 2026

Copy link
Copy Markdown
Owner

Summary

Implements #300 with full γ' scope. Renames misleading .text-12-* utilities to .text-13-* so class names match rendered px, cleans up 7 dead utility classes (50+ callsites), redesigns sidebar active-state typography via existing .active class hook, restructures the empty state with a 28px headline + bottom skill chips, and aligns the light/dark bg palette with neutral ChatGPT-style tones (sidebar sunken vs main in both modes; settings page flattened — single content surface, no group cards or vertical dividers).

Design proposal and acceptance criteria: #300 (comment)

Spin-off (not in this PR): #303 sidebar indicator dot icon redesign.

Test plan

  • grep -rE 'text-(10|11|12|18)-(regular|medium|mono)' packages/app/src packages/ui/src returns 0 hits
  • bun --cwd packages/app run typecheck passes
  • bun --cwd packages/app run test:unit 597 / 597 pass
  • dev:desktop dark — sidebar active state visible; group headers readable; empty state shows 28px h1 + 3 chips below composer; chip selected state visible; bg palette aligned (#181818 sidebar / #212121 main / #303030 composer)
  • dev:desktop light — same checks pass; sidebar #F9F9F9 / main #FFFFFF
  • Titlebar bg matches sidebar (Tailwind utility override fixed)
  • CI: ci.yml + desktop-smoke.yml pass on PR

Summary by CodeRabbit

  • Style
    • Enhanced text readability throughout the application by increasing typography sizing across dialogs, settings, sidebar, and message components.
    • Updated the color palette with refined background and surface colors for improved visual consistency.
    • Refined UI layout in session creation view and sidebar for better spacing and appearance.
    • Removed visual borders from settings tabs sidebar.

- Add --font-size-2x-large: 28px token
- Add .text-13-regular/medium/mono blocks (verbatim copies of .text-12-* awaiting rename)
- Add .text-16-regular and .text-28-regular for empty-state and composer banner

Refs #300
…ered px

Class names now match the px value they render at (--font-size-small = 13px).
Mass-renamed 81 callsites across packages/app and packages/ui.
Auto-resolves 19 previously-dead .text-13-* callsites and 1 dead .text-16-regular callsite (20 total auto-resolutions).

Refs #300
- text-10-regular (1 site, image filename overlay) -> text-13-regular
- text-11-regular (15 sites) -> text-13-regular
- text-11-medium (6 sites) -> text-13-medium
- text-18-medium (1 site, settings page h1) -> text-16-medium

Acceptance: grep -rE 'text-(10|11|12|18)-(regular|medium|mono)' returns 0 hits.

Refs #300
- Inactive session title: text-13-regular text-text-base
- Active session title: text-13-medium text-text-strong via [.active_&] modifier
  (reuses .active class from @solidjs/router <A>; no prop drilling)
- Group header padding: pt-3 pb-1 -> pt-2 pb-0.5 across Pinned/All/project
- Drop font-mono from project group header

Refs #300
- h1: text-20-medium -> text-28-regular
- Remove subtitle <p>
- Composer moved directly under h1 (mt-12)
- Skill cards moved below composer; reshaped from large pill grid (px-6 py-3, text-14-medium, surface-base bg) to small flat chips (h-9 px-3.5, text-13-regular, transparent bg)
- aria-pressed selected state uses surface-interactive-weak fill so it remains visible against the new transparent default
- Reassurance line typography preserved; spacing tightened to mt-6

Refs #300
…g tests

The string is no longer rendered in the JSX (#300 empty-state redesign
removed the subtitle line) but the key remains required by:
- packages/app/src/i18n/parity.test.ts
- packages/app/src/i18n/zh-branding.test.ts

A protective comment prevents future cleanup passes from removing it.

Refs #300
- Chip height 36px -> 28px (h-9 -> h-7), padding tightened
- Border radius full -> rounded-xl (chip squarer than composer 26px)
- Inter-chip gap 8px -> 12px (more breathing)
- Icon stripped of brand color, uses uniform text-icon-weak
- Drop reassurance line "Files and conversations stay on your computer"

Refs #300
Old palette was warm-cream (light) and cool-blue (dark) with sidebar
showing lighter than main in dark mode. New palette aligns with neutral
ChatGPT-style tones where sidebar is one shade darker than main in both
modes — a more conventional "sunken sidebar" treatment.

Light:
- main bg: warm #FAF9F7 -> pure #FFFFFF
- sidebar bg: warm #FAF9F9 -> neutral #F9F9F9
- titlebar shell tokens aligned to sidebar color
- Removed top-of-titlebar 16% white-mix gradient (caused dark mode hot spot)

Dark:
- main bg: cool blue #191C23 -> neutral #212121
- sidebar bg: lighter #23252A -> darker #181818 (sidebar now sunken vs main)
- composer/popover surface (raised-stronger-non-alpha): #303030 (per spec)
- Other dark surfaces lifted slightly for control visibility (#2A2A2A)
- border-weak-base bumped #2F323A -> #3A3A3A for divider visibility

Side fix: titlebar.tsx had Tailwind utility bg-background-base inline,
which (being in @layer utilities) overrode the dedicated CSS rule.
Removed inline class so titlebar bg now correctly inherits from index.css.

Refs #300
Settings page had three layered visual containers: main bg, group cards
(surface-base + radius), and a vertical border between tabs-list and
content. After bg palette alignment all surfaces sit at the same shade,
so the cards and divider were redundant decoration.

- Drop card bg + radius from SettingsList (inherits parent bg, rows alone)
- Drop border-right from tabs-list in settings variant (tabs-list and
  content visually merge, distinguished by layout width only)

Result: settings is now flat — sidebar (#181818) | settings region
(#212121), no sub-card visual layering.

Refs #300
@Astro-Han Astro-Han added enhancement New feature or request P2 Medium priority ui Design system and user interface labels Apr 28, 2026
@coderabbitai

coderabbitai Bot commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 45 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: c90928b2-8917-4e53-8fbe-2ed52702bd79

📥 Commits

Reviewing files that changed from the base of the PR and between 056451f and f613e14.

📒 Files selected for processing (2)
  • packages/app/e2e/app/home.spec.ts
  • packages/app/index.html
📝 Walkthrough

Walkthrough

This PR updates typography utility classes across the application, renaming text-12-* utilities to text-13-*, adding text-16-regular and text-28-regular classes, and updating numerous component styles. Additional changes include theme color palette adjustments for PawWork (desktop and sidebar colors), removal of background styling from titlebar, sidebar typography and spacing refinements, and minor layout adjustments to the new session view.

Changes

Cohort / File(s) Summary
Typography Utilities Core
packages/ui/src/styles/theme.css, packages/ui/src/styles/utilities.css
Added --font-size-2x-large (28px) custom property; renamed text-12-* selectors to text-13-* and added text-16-regular and text-28-regular typography utilities with updated line-height/letter-spacing.
Component Typography Updates (App)
packages/app/src/app.tsx, packages/app/src/components/dialog-*.tsx, packages/app/src/components/model-tooltip.tsx, packages/app/src/components/prompt-input.tsx, packages/app/src/components/prompt-input/*.tsx, packages/app/src/components/session/session-*.tsx, packages/app/src/components/settings-*.tsx, packages/app/src/components/status-popover-body.tsx, packages/app/src/components/file-tree.tsx
Updated CSS class references from text-1[12]-* to text-13-* across dialog, tooltip, input, session, settings, and component UI elements to align with new typography scale.
Page & Layout Typography Updates
packages/app/src/pages/home.tsx, packages/app/src/pages/layout.tsx, packages/app/src/pages/layout/pawwork-sidebar.tsx, packages/app/src/pages/layout/sidebar-*.tsx, packages/app/src/pages/session/composer/session-permission-dock.tsx, packages/app/src/pages/session/files-tab.tsx, packages/app/src/pages/session/message-timeline.tsx, packages/app/src/pages/session/session-side-panel.tsx
Updated typography classes and adjusted spacing/padding in sidebar headers, session titles, and layout descriptions; refined padding values (pt-3→pt-2, mt-3→mt-2) and added active-state styling for text elements.
Session New View Layout & Styling
packages/app/src/components/session/session-new-view.tsx
Increased header title from text-20-medium to text-28-regular, removed subtitle and reassurance text, repositioned composer before skill cards, converted grid layout to flex-wrap, and simplified skill card button styling by removing fixed icon sizing and class usage.
Theme & Desktop Shell Styling
packages/app/src/index.css, packages/ui/src/theme/themes/pawwork.json
Updated desktop shell CSS custom properties with new background/surface hex values for light/dark modes; simplified macOS titlebar background to solid var(--shell-surface-raised); updated PawWork theme overrides with grayscale background scheme for dark mode and added background-strong/background-stronger overrides.
UI Component CSS Comments
packages/ui/src/components/accordion.css, packages/ui/src/components/button.css, packages/ui/src/components/checkbox.css, packages/ui/src/components/collapsible.css, packages/ui/src/components/icon-button.css, packages/ui/src/components/keybind.css, packages/ui/src/components/select.css, packages/ui/src/components/tag.css, packages/ui/src/components/text-field.css, packages/ui/src/components/tooltip.css
Updated inline CSS documentation comments from text-1[12]-* to text-13-* notations without changing actual style properties.
UI Component Functional Updates
packages/ui/src/components/file-search.tsx, packages/ui/src/components/message-part.tsx
Updated match counter and metadata text from text-1[12]-regular to text-13-regular; removed right border from vertical settings tab list.
Settings & Sidebar Styling Refinements
packages/app/src/components/settings-list.tsx, packages/app/src/components/titlebar.tsx
Removed bg-surface-base and rounded-lg from settings list wrapper; removed bg-background-base from titlebar header styling.
Internationalization Comments
packages/app/src/i18n/en.ts, packages/app/src/i18n/zh.ts
Added inline comments indicating session.new.subtitle strings are retained for parity/branding tests despite UI removal (reference #300).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Possibly related PRs

Suggested labels

app

Poem

🐰 In fonts of thirteen, we dance with glee,
Typography scales in harmony,
From twelve we rise to heights unknown,
The PawWork theme in grayscale sown.
New layouts bloom, the cards align,
Each pixel placed in perfect line!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 3.57% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the main change: a font hierarchy redesign referenced by issue #300. It is specific, concise, and accurately reflects the primary UI/typography refactoring focus of the changeset.
Description check ✅ Passed The description covers all major template sections: a clear summary of what changed (font hierarchy redesign), explicit link to issue #300, comprehensive test plan with manual verification checks completed, and explicit alignment with Conventional Commits and dev branch targeting.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/font-hierarchy

Comment @coderabbitai help to get the list of available commands and usage tips.

…tate layout

Task 5 of #300 moved skill chips below the composer (was above as a card grid).
The e2e assertion `cardBox.y < composerBox.y` (cards above composer) is now stale;
flip to `>` to match the new "composer first, chips second" reading order.

Refs #300

@coderabbitai coderabbitai Bot left a comment

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.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/styles/utilities.css`:
- Line 46: The rename removed the .text-12-regular utility but index.html still
uses that class, causing fallback typography; either restore compatibility by
adding a .text-12-regular rule that mirrors the styles of .text-13-regular in
packages/ui/src/styles/utilities.css (create an alias selector or duplicate the
declarations) or update the root usage to .text-13-regular in the HTML where the
body uses text-12-regular; ensure all occurrences of text-12-regular are updated
or aliased (also check the related renamed utilities at the other reported
locations).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 6f0ed8f5-d9dc-41d3-bc7c-04a1d3383b88

📥 Commits

Reviewing files that changed from the base of the PR and between 4c17591 and 056451f.

📒 Files selected for processing (53)
  • packages/app/src/app.tsx
  • packages/app/src/components/dialog-connect-websearch.tsx
  • packages/app/src/components/dialog-custom-provider.tsx
  • packages/app/src/components/dialog-edit-project.tsx
  • packages/app/src/components/dialog-select-file.tsx
  • packages/app/src/components/dialog-select-mcp.tsx
  • packages/app/src/components/dialog-settings.tsx
  • packages/app/src/components/file-tree.tsx
  • packages/app/src/components/model-tooltip.tsx
  • packages/app/src/components/prompt-input.tsx
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/components/prompt-input/image-attachments.tsx
  • packages/app/src/components/prompt-input/slash-popover.tsx
  • packages/app/src/components/session/session-context-tab.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/session-sortable-shell-tab.tsx
  • packages/app/src/components/session/session-status-connections.tsx
  • packages/app/src/components/session/session-status-summary.tsx
  • packages/app/src/components/settings-general.tsx
  • packages/app/src/components/settings-keybinds.tsx
  • packages/app/src/components/settings-list.tsx
  • packages/app/src/components/settings-page.tsx
  • packages/app/src/components/settings-providers.tsx
  • packages/app/src/components/status-popover-body.tsx
  • packages/app/src/components/titlebar.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/i18n/zh.ts
  • packages/app/src/index.css
  • packages/app/src/pages/home.tsx
  • packages/app/src/pages/layout.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
  • packages/app/src/pages/layout/sidebar-project.tsx
  • packages/app/src/pages/session/composer/session-permission-dock.tsx
  • packages/app/src/pages/session/files-tab.tsx
  • packages/app/src/pages/session/message-timeline.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/ui/src/components/accordion.css
  • packages/ui/src/components/button.css
  • packages/ui/src/components/checkbox.css
  • packages/ui/src/components/collapsible.css
  • packages/ui/src/components/file-search.tsx
  • packages/ui/src/components/icon-button.css
  • packages/ui/src/components/keybind.css
  • packages/ui/src/components/message-part.tsx
  • packages/ui/src/components/select.css
  • packages/ui/src/components/tabs.css
  • packages/ui/src/components/tag.css
  • packages/ui/src/components/text-field.css
  • packages/ui/src/components/tooltip.css
  • packages/ui/src/styles/theme.css
  • packages/ui/src/styles/utilities.css
  • packages/ui/src/theme/themes/pawwork.json
💤 Files with no reviewable changes (1)
  • packages/ui/src/components/tabs.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: unit-windows-app
  • GitHub Check: unit-windows-desktop
  • GitHub Check: unit-windows-opencode-session
  • GitHub Check: unit-windows-opencode-config-project
  • GitHub Check: unit-windows-opencode-server-tools
  • GitHub Check: smoke-macos-arm64
🧰 Additional context used
📓 Path-based instructions (1)
packages/app/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (packages/app/AGENTS.md)

Always prefer createStore over multiple createSignal calls in SolidJS

Files:

  • packages/app/src/components/dialog-select-file.tsx
  • packages/app/src/components/session/session-sortable-shell-tab.tsx
  • packages/app/src/components/prompt-input/image-attachments.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/components/settings-list.tsx
  • packages/app/src/components/session/session-status-summary.tsx
  • packages/app/src/components/settings-keybinds.tsx
  • packages/app/src/pages/session/composer/session-permission-dock.tsx
  • packages/app/src/pages/layout/sidebar-project.tsx
  • packages/app/src/components/prompt-input.tsx
  • packages/app/src/pages/home.tsx
  • packages/app/src/app.tsx
  • packages/app/src/components/file-tree.tsx
  • packages/app/src/components/prompt-input/slash-popover.tsx
  • packages/app/src/components/dialog-custom-provider.tsx
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/components/dialog-settings.tsx
  • packages/app/src/components/model-tooltip.tsx
  • packages/app/src/components/dialog-connect-websearch.tsx
  • packages/app/src/components/settings-providers.tsx
  • packages/app/src/components/session/session-status-connections.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/settings-page.tsx
  • packages/app/src/pages/session/message-timeline.tsx
  • packages/app/src/components/dialog-select-mcp.tsx
  • packages/app/src/pages/layout.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
  • packages/app/src/components/dialog-edit-project.tsx
  • packages/app/src/components/settings-general.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/i18n/zh.ts
  • packages/app/src/pages/session/files-tab.tsx
  • packages/app/src/components/titlebar.tsx
  • packages/app/src/components/status-popover-body.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-context-tab.tsx
🧠 Learnings (19)
📓 Common learnings
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:58.310Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 224
File: packages/app/src/i18n/zh.ts:0-0
Timestamp: 2026-04-24T17:08:46.780Z
Learning: In Astro-Han/pawwork PR `#224`, the first-occurrence `PawWork 爪印` branding rule originally specified in issue `#196` was superseded by an updated Chinese-branding spec. On all zh UI surfaces in `packages/app/src/i18n/zh.ts` (e.g., `dialog.model.unpaid.freeModels.title`, `session.new.subtitle`, `sidebar.gettingStarted.line1`), the correct and intentional target is fully localized `爪印` branding — no `PawWork` prefix. Do NOT flag these strings as missing the first-occurrence `PawWork 爪印` rule in future reviews.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 198
File: packages/ui/src/theme/themes/pawwork.json:32-33
Timestamp: 2026-04-23T17:02:39.474Z
Learning: In Astro-Han/pawwork, `#FF5910` is the locked PawWork brand orange used for `button-primary-base` (and `--accent-brand` in `index.css`, theme token `interactive`/`primary`). The `text-on-interactive-base: `#FFFFFF`` on `button-primary-base: `#FF5910`` combination produces a contrast ratio of ~3.14:1. This intentionally fails WCAG AA normal-text (4.5:1) but passes AA non-text (SC 1.4.11, 3:1) and AA large-text (SC 1.4.3, 3:1). The tradeoff is accepted for brand consistency; do NOT flag this contrast pair as a WCAG violation in future reviews. If a specific surface requires stricter contrast, it should be addressed individually (e.g., larger text, ghost variant, outline button) rather than changing the palette.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 208
File: packages/app/src/components/prompt-input.tsx:1569-1611
Timestamp: 2026-04-24T05:39:58.329Z
Learning: In Astro-Han/pawwork `packages/app/src/components/prompt-input.tsx`, after the composer unification in PR `#208` (fixed in commit 5d810aa):
- `SendButton.disabled` does NOT gate on `store.mode !== "normal"`. Shell mode has a fully visible, clickable orange submit button that calls `handleSubmit` directly (same path as the Enter key in `handleKeyDown`). Do NOT suggest re-adding the mode gate.
- `SendButton` does NOT use the `buttons()` spring opacity animation (`style={buttons()}`). It is always fully visible regardless of mode.
- `WorkspaceChip` is gated on `props.homeMode && store.mode === "normal"` so it hides in shell mode (preventing it from appearing isolated/bright while neighboring controls fade).
- The left-side chip group (`aria-hidden={store.mode !== "normal"}`) covers attach/model/variant/workspace controls only; `SendButton` remains in a separate right-side sibling div.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 270
File: packages/opencode/src/tool/todo.ts:9-18
Timestamp: 2026-04-28T06:51:54.812Z
Learning: In `packages/opencode/src/tool/todo.ts` (Astro-Han/pawwork), `TodoItem.status` and `TodoItem.priority` are intentionally declared as plain `Schema.String` rather than closed literal unions. This matches the upstream opencode baseline (`dev:packages/opencode/src/tool/todo.ts`). The tightening — `Schema.Literals(["pending","in_progress","completed","cancelled"])` for `status` and `Schema.Literals(["high","medium","low"])` for `priority` — is tracked as a follow-up under the harness/tool-set-v1 series (issue `#129`) to land either as part of a tool-schema tightening sweep or upstream-first. Do NOT re-flag the free-form strings for these fields in upstream-sync PRs; flag it only in a PawWork-authored PR or the dedicated sweep that touches `TodoItem` schema.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 191
File: packages/app/src/components/session/pawwork-skill-meta.ts:38-39
Timestamp: 2026-04-23T15:10:25.201Z
Learning: In Astro-Han/pawwork, Tailwind v4 is configured with `--color-*: initial`, which resets the entire default palette. This means standard Tailwind color utilities like `text-violet-500` resolve to no CSS variable and render black (i.e., they are a no-op). For accent/brand colors that do not have a semantic design token (e.g., the violet writing-assistant accent `#8B5FBF`), use an inline style (e.g., `homeIconStyle: { color: "#8B5FBF" }`) and document the reason with a comment. Do NOT suggest replacing inline hex colors with Tailwind palette utilities in this repo.
📚 Learning: 2026-04-23T07:23:23.849Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/session-new-view.tsx:13-18
Timestamp: 2026-04-23T07:23:23.849Z
Learning: In pawwork (Astro-Han/pawwork), prefer using `createStore` instead of multiple `createSignal` calls only when the signals represent **coupled** object state that is updated together (i.e., there is at least one shared batch-update site where the state is changed in the same transaction). If the state fields are **independent** and are mutated by separate handlers (e.g., one handler updates only `selectedSkill` while another updates only `mode`), keep them as individual `createSignal` calls—using `createStore` for truly independent fields adds boilerplate without behavioral benefit.

Applied to files:

  • packages/app/src/components/dialog-select-file.tsx
  • packages/app/src/components/session/session-sortable-shell-tab.tsx
  • packages/app/src/components/prompt-input/image-attachments.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/components/settings-list.tsx
  • packages/app/src/components/session/session-status-summary.tsx
  • packages/app/src/components/settings-keybinds.tsx
  • packages/app/src/pages/session/composer/session-permission-dock.tsx
  • packages/app/src/pages/layout/sidebar-project.tsx
  • packages/app/src/components/prompt-input.tsx
  • packages/app/src/pages/home.tsx
  • packages/app/src/app.tsx
  • packages/app/src/components/file-tree.tsx
  • packages/app/src/components/prompt-input/slash-popover.tsx
  • packages/app/src/components/dialog-custom-provider.tsx
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/components/dialog-settings.tsx
  • packages/app/src/components/model-tooltip.tsx
  • packages/app/src/components/dialog-connect-websearch.tsx
  • packages/app/src/components/settings-providers.tsx
  • packages/app/src/components/session/session-status-connections.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/settings-page.tsx
  • packages/app/src/pages/session/message-timeline.tsx
  • packages/app/src/components/dialog-select-mcp.tsx
  • packages/app/src/pages/layout.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
  • packages/app/src/components/dialog-edit-project.tsx
  • packages/app/src/components/settings-general.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/i18n/zh.ts
  • packages/app/src/pages/session/files-tab.tsx
  • packages/app/src/components/titlebar.tsx
  • packages/app/src/components/status-popover-body.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-context-tab.tsx
📚 Learning: 2026-04-23T15:10:21.635Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 191
File: packages/app/src/components/session/pawwork-skill-meta.ts:38-39
Timestamp: 2026-04-23T15:10:21.635Z
Learning: This repo configures Tailwind v4 with `--color-*: initial`, which effectively breaks standard Tailwind palette utilities (e.g., `text-violet-500` can resolve to no CSS variable and render as a no-op/black). For brand/accent colors that are not backed by semantic design tokens, use inline styles with the exact hex value (e.g., `style={{ color: '#8B5FBF' }}` / `homeIconStyle: { color: '#8B5FBF' }`) and add a short comment explaining that Tailwind palette utilities won’t work due to the `--color-*: initial` setup. Do not suggest replacing these inline hex colors with Tailwind palette classes anywhere in this repo.

Applied to files:

  • packages/app/src/components/dialog-select-file.tsx
  • packages/app/src/components/session/session-sortable-shell-tab.tsx
  • packages/app/src/components/prompt-input/image-attachments.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/components/settings-list.tsx
  • packages/app/src/components/session/session-status-summary.tsx
  • packages/app/src/components/settings-keybinds.tsx
  • packages/app/src/pages/session/composer/session-permission-dock.tsx
  • packages/app/src/pages/layout/sidebar-project.tsx
  • packages/app/src/components/prompt-input.tsx
  • packages/app/src/pages/home.tsx
  • packages/app/src/app.tsx
  • packages/app/src/components/file-tree.tsx
  • packages/app/src/components/prompt-input/slash-popover.tsx
  • packages/app/src/components/dialog-custom-provider.tsx
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/components/dialog-settings.tsx
  • packages/app/src/components/model-tooltip.tsx
  • packages/app/src/components/dialog-connect-websearch.tsx
  • packages/app/src/components/settings-providers.tsx
  • packages/app/src/components/session/session-status-connections.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/settings-page.tsx
  • packages/app/src/pages/session/message-timeline.tsx
  • packages/app/src/components/dialog-select-mcp.tsx
  • packages/app/src/pages/layout.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
  • packages/app/src/components/dialog-edit-project.tsx
  • packages/app/src/components/settings-general.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/i18n/zh.ts
  • packages/app/src/pages/session/files-tab.tsx
  • packages/app/src/components/titlebar.tsx
  • packages/app/src/components/status-popover-body.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-context-tab.tsx
📚 Learning: 2026-04-23T17:02:35.873Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 198
File: packages/app/src/index.css:95-97
Timestamp: 2026-04-23T17:02:35.873Z
Learning: In the pawwork repository, Stylelint is intentionally not configured (per AGENTS.md, only linting is enforced and the Biome formatter is disabled). When reviewing CSS files, do not raise Stylelint rule-based issues (e.g., `declaration-empty-line-before`) because they are false positives and not enforced by the project toolchain.

Applied to files:

  • packages/ui/src/components/accordion.css
  • packages/ui/src/styles/theme.css
  • packages/ui/src/components/checkbox.css
  • packages/ui/src/components/keybind.css
  • packages/ui/src/components/tooltip.css
  • packages/ui/src/components/tag.css
  • packages/ui/src/components/collapsible.css
  • packages/ui/src/components/text-field.css
  • packages/ui/src/components/button.css
  • packages/ui/src/components/select.css
  • packages/ui/src/components/icon-button.css
  • packages/ui/src/styles/utilities.css
  • packages/app/src/index.css
📚 Learning: 2026-04-24T05:39:58.329Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 208
File: packages/app/src/components/prompt-input.tsx:1569-1611
Timestamp: 2026-04-24T05:39:58.329Z
Learning: In Astro-Han/pawwork `packages/app/src/components/prompt-input.tsx`, after the composer unification in PR `#208` (fixed in commit 5d810aa):
- `SendButton.disabled` does NOT gate on `store.mode !== "normal"`. Shell mode has a fully visible, clickable orange submit button that calls `handleSubmit` directly (same path as the Enter key in `handleKeyDown`). Do NOT suggest re-adding the mode gate.
- `SendButton` does NOT use the `buttons()` spring opacity animation (`style={buttons()}`). It is always fully visible regardless of mode.
- `WorkspaceChip` is gated on `props.homeMode && store.mode === "normal"` so it hides in shell mode (preventing it from appearing isolated/bright while neighboring controls fade).
- The left-side chip group (`aria-hidden={store.mode !== "normal"}`) covers attach/model/variant/workspace controls only; `SendButton` remains in a separate right-side sibling div.

Applied to files:

  • packages/app/src/components/prompt-input/image-attachments.tsx
  • packages/app/src/components/prompt-input.tsx
  • packages/app/src/components/prompt-input/slash-popover.tsx
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/components/dialog-connect-websearch.tsx
  • packages/app/src/components/session/session-new-view.tsx
📚 Learning: 2026-04-24T17:08:46.780Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 224
File: packages/app/src/i18n/zh.ts:0-0
Timestamp: 2026-04-24T17:08:46.780Z
Learning: In Astro-Han/pawwork PR `#224`, the first-occurrence `PawWork 爪印` branding rule originally specified in issue `#196` was superseded by an updated Chinese-branding spec. On all zh UI surfaces in `packages/app/src/i18n/zh.ts` (e.g., `dialog.model.unpaid.freeModels.title`, `session.new.subtitle`, `sidebar.gettingStarted.line1`), the correct and intentional target is fully localized `爪印` branding — no `PawWork` prefix. Do NOT flag these strings as missing the first-occurrence `PawWork 爪印` rule in future reviews.

Applied to files:

  • packages/app/src/i18n/en.ts
  • packages/app/src/i18n/zh.ts
  • packages/app/src/pages/session/files-tab.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/ui/src/theme/themes/pawwork.json
📚 Learning: 2026-04-27T12:59:49.844Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 264
File: packages/opencode/test/session/prompt-effect.test.ts:0-0
Timestamp: 2026-04-27T12:59:49.844Z
Learning: In `packages/opencode/test/session/prompt-effect.test.ts` and `packages/opencode/src/session/diagnostics.ts` (PR `#264`), the recovery reminder copy differs between signature kinds: the input-repeat variant says "repeated the same tool input 3 times" (uses a literal count), while the target-repeat variant says "failed against the same target multiple times" (uses "multiple times" with no count). Assertions that check for injected reminder text in LLM inputs must accept both phrasings when a scenario produces both `input:` and `target:` signatures (e.g., `read` tool with a `filePath` parameter). Do NOT narrow the assertion to only the input-variant phrasing.

Applied to files:

  • packages/app/src/i18n/en.ts
  • packages/app/src/components/prompt-input/context-items.tsx
  • packages/app/src/i18n/zh.ts
📚 Learning: 2026-04-22T05:32:29.012Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 98
File: packages/desktop-electron/src/main/menu-labels.ts:1-2
Timestamp: 2026-04-22T05:32:29.012Z
Learning: In Astro-Han/pawwork, the app i18n layer (`packages/app/src/i18n/`) only contains `en.ts` and `zh.ts`, and `normalizeLocale` (in `packages/app/src/context/language.tsx`) only returns `"en"` or `"zh"`. The desktop `MenuLocale = "en" | "zh"` union in `packages/desktop-electron/src/main/menu-labels.ts` is intentionally limited to these two locales and is not a broader restriction — do not flag it as overly restrictive or suggest adding other locales.

Applied to files:

  • packages/app/src/i18n/en.ts
  • packages/app/src/i18n/zh.ts
📚 Learning: 2026-04-24T06:50:05.142Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 211
File: packages/opencode/src/provider/models.ts:113-179
Timestamp: 2026-04-24T06:50:05.142Z
Learning: In Astro-Han/pawwork (`packages/opencode/src/provider/models.ts`), `PublishModel` and `PublishProvider` intentionally duplicate fields from `Model` and `Provider` with looser optionality. The split is a deliberate behavior boundary: `PublishModel`/`PublishProvider` (with `.passthrough()`) are used for lenient publish-time validation of incoming catalogs, while `Model`/`Provider` are used for strict runtime normalization. Do not flag this duplication as a maintenance burden or suggest extracting a shared base schema — the explicit separation is intentional and tied to the models-refresh reliability path introduced in PR `#211`.

Applied to files:

  • packages/app/src/components/dialog-custom-provider.tsx
📚 Learning: 2026-04-24T17:12:26.774Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 224
File: packages/desktop-electron/electron-builder.config.ts:14-18
Timestamp: 2026-04-24T17:12:26.774Z
Learning: In Astro-Han/pawwork, the `localizedMacDisplayNameByChannel` map in `packages/desktop-electron/electron-builder.config.ts` is intentionally kept separate from `localizedAppDisplayName` in `packages/desktop-electron/src/main/app-display-name.ts`. The former is a build-time packaging helper; the latter is a runtime UI helper that localizes the current app name by locale. Coupling them would introduce a build-time dependency on runtime main logic. Do not suggest deduplicating or sharing this mapping — the explicit local table is covered by focused regression tests in `electron-builder-app-update.test.ts`.

Applied to files:

  • packages/app/src/components/dialog-settings.tsx
  • packages/app/src/i18n/zh.ts
📚 Learning: 2026-04-23T15:26:07.250Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 193
File: packages/app/src/pages/layout/sidebar-items.tsx:102-107
Timestamp: 2026-04-23T15:26:07.250Z
Learning: In Astro-Han/pawwork (`packages/app/src/pages/layout/sidebar-items.tsx`), the `indicator()` function in `SessionRow` intentionally renders `props.leadingSlot` (the pin button) only as a fallback when no status indicator (running/permission/error/unseen) is active. When a higher-priority status wins the slot, the pin button is removed from the DOM — this is a deliberate design choice for the merged leading slot (`#150`). The keyboard unpin path is preserved via: (1) focusing the row anchor triggers `group-focus-within` which reveals the dots menu trigger, then Tab → Enter → "Unpin Session"; (2) the context menu (right-click / Shift+F10) exposes "Unpin Session". The "always render + CSS overlay" approach was considered but rejected due to z-index/pointer-events complexity; residual `...` slot behavior is tracked in `#192`. Do NOT flag the absence of the pin button from the DOM when a status is active as an accessibility regression.

Applied to files:

  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
📚 Learning: 2026-04-26T16:34:57.130Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 247
File: packages/ui/src/components/message-part.tsx:1322-1324
Timestamp: 2026-04-26T16:34:57.130Z
Learning: In Astro-Han/pawwork (`packages/ui/src/components/message-part.tsx`), the `taskId` createMemo and `childSessionId` createMemo both intentionally read only from `partMetadata().sessionId` (populated post-execution), not from `input.task_id` / `input.subagent_session_id`. This has always been the case — the original code never read the input field either. Adding an `input.subagent_session_id` fallback would be a new capability, not a bug fix. Do NOT flag the absence of this fallback as a regression in PR `#247` or future PRs unless there is a concrete case where metadata is not populated.

Applied to files:

  • packages/ui/src/components/message-part.tsx
📚 Learning: 2026-04-28T04:56:13.350Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 270
File: packages/opencode/src/tool/tool.ts:8-10
Timestamp: 2026-04-28T04:56:13.350Z
Learning: In `packages/opencode/src/tool/tool.ts` (Astro-Han/pawwork, PR `#270`), the `Metadata` interface uses `[key: string]: any` as its index signature. This is upstream-inherited code adopted wholesale via the graft strategy (per `project_upstream_strategy.md`). The fix — tightening to `Record<string, unknown>` and explicitly narrowing framework-owned fields like `truncated` — is intentionally deferred to a follow-up PR or upstream report. Do NOT re-flag the `any` index signature on `Metadata` in PR `#270` or in future upstream-sync PRs that carry the same upstream baseline.

Applied to files:

  • packages/ui/src/components/message-part.tsx
📚 Learning: 2026-04-28T08:14:31.436Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 270
File: packages/opencode/src/tool/edit.ts:48-48
Timestamp: 2026-04-28T08:14:31.436Z
Learning: In `packages/opencode/src/tool/edit.ts` (Astro-Han/pawwork), the `filePath` schema description (`"The absolute path to the file to modify"`) is upstream-inherited from `dev:packages/opencode/src/tool/edit.ts:48`. The runtime actually accepts relative paths (resolved via `Instance.directory` at lines 79-81), but the description fix is intentionally deferred to a single PawWork-authored description-cleanup PR that will also cover the identical mismatch in `packages/opencode/src/tool/write.ts:24`. Do NOT re-flag the too-narrow `filePath` description in upstream-sync PRs; flag it only in the dedicated description-cleanup PR.

Applied to files:

  • packages/app/src/pages/layout.tsx
📚 Learning: 2026-04-22T09:32:58.310Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:58.310Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.

Applied to files:

  • packages/app/src/pages/layout.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/index.css
  • packages/ui/src/theme/themes/pawwork.json
📚 Learning: 2026-04-28T03:01:37.478Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 282
File: packages/ui/src/i18n/zh.ts:109-109
Timestamp: 2026-04-28T03:01:37.478Z
Learning: In Astro-Han/pawwork PR `#282` (`packages/ui/src/i18n/zh.ts`), the translation for `ui.tool.questions` is intentionally `提出问题` (verb-object structure), NOT `向你提问` (prepositional-phrase structure). The choice was made after a UI smoke run to keep consistent verb-object phrasing across all zh tool-card labels (`执行命令`, `列出目录`, `查找文件`, `搜索文本`, `读取文件`, `读取网页`, `批量修改`, `查看待办`). Do NOT flag `提出问题` as incorrect for this key.

Applied to files:

  • packages/app/src/i18n/zh.ts
📚 Learning: 2026-04-28T06:51:54.812Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 270
File: packages/opencode/src/tool/todo.ts:9-18
Timestamp: 2026-04-28T06:51:54.812Z
Learning: In `packages/opencode/src/tool/todo.ts` (Astro-Han/pawwork), `TodoItem.status` and `TodoItem.priority` are intentionally declared as plain `Schema.String` rather than closed literal unions. This matches the upstream opencode baseline (`dev:packages/opencode/src/tool/todo.ts`). The tightening — `Schema.Literals(["pending","in_progress","completed","cancelled"])` for `status` and `Schema.Literals(["high","medium","low"])` for `priority` — is tracked as a follow-up under the harness/tool-set-v1 series (issue `#129`) to land either as part of a tool-schema tightening sweep or upstream-first. Do NOT re-flag the free-form strings for these fields in upstream-sync PRs; flag it only in a PawWork-authored PR or the dedicated sweep that touches `TodoItem` schema.

Applied to files:

  • packages/app/src/components/status-popover-body.tsx
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/ui/src/theme/themes/pawwork.json
📚 Learning: 2026-04-23T17:02:39.474Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 198
File: packages/ui/src/theme/themes/pawwork.json:32-33
Timestamp: 2026-04-23T17:02:39.474Z
Learning: In Astro-Han/pawwork, `#FF5910` is the locked PawWork brand orange used for `button-primary-base` (and `--accent-brand` in `index.css`, theme token `interactive`/`primary`). The `text-on-interactive-base: `#FFFFFF`` on `button-primary-base: `#FF5910`` combination produces a contrast ratio of ~3.14:1. This intentionally fails WCAG AA normal-text (4.5:1) but passes AA non-text (SC 1.4.11, 3:1) and AA large-text (SC 1.4.3, 3:1). The tradeoff is accepted for brand consistency; do NOT flag this contrast pair as a WCAG violation in future reviews. If a specific surface requires stricter contrast, it should be addressed individually (e.g., larger text, ghost variant, outline button) rather than changing the palette.

Applied to files:

  • packages/app/src/index.css
  • packages/ui/src/theme/themes/pawwork.json
📚 Learning: 2026-04-23T15:10:25.201Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 191
File: packages/app/src/components/session/pawwork-skill-meta.ts:38-39
Timestamp: 2026-04-23T15:10:25.201Z
Learning: In Astro-Han/pawwork, Tailwind v4 is configured with `--color-*: initial`, which resets the entire default palette. This means standard Tailwind color utilities like `text-violet-500` resolve to no CSS variable and render black (i.e., they are a no-op). For accent/brand colors that do not have a semantic design token (e.g., the violet writing-assistant accent `#8B5FBF`), use an inline style (e.g., `homeIconStyle: { color: "#8B5FBF" }`) and document the reason with a comment. Do NOT suggest replacing inline hex colors with Tailwind palette utilities in this repo.

Applied to files:

  • packages/app/src/index.css
  • packages/ui/src/theme/themes/pawwork.json
🔇 Additional comments (53)
packages/ui/src/theme/themes/pawwork.json (2)

20-22: Light background token hierarchy looks consistent.

The explicit background-weak/strong/stronger overrides are coherent with the neutralized light surface direction and keep token intent clear.


54-67: Dark surface and border overrides are complete and internally consistent.

This set correctly includes surface-raised-stronger-non-alpha and updated border tokens used by downstream UI surfaces.

packages/ui/src/components/select.css (1)

133-133: Typography annotation update is correct.

The comment now reflects the migrated text-13-medium utility naming consistently.

packages/ui/src/components/checkbox.css (1)

59-59: Comment token rename is aligned with the typography rollout.

packages/app/src/components/dialog-select-file.tsx (1)

492-492: Timestamp typography class migration is safe and consistent.

packages/ui/src/components/collapsible.css (1)

46-46: Updated typography annotation is accurate.

packages/ui/src/components/accordion.css (1)

46-46: Comment update correctly reflects the text-13-regular utility.

packages/app/src/components/settings-keybinds.tsx (1)

421-421: Keybind button typography update is correctly scoped.

The class swap preserves active/inactive state styling logic while aligning with the new text scale.

packages/app/src/components/session/session-sortable-shell-tab.tsx (1)

29-29: Shell tab label typography change is clean and non-disruptive.

packages/app/src/components/prompt-input/image-attachments.tsx (1)

52-52: Typography utility migration looks consistent.

Class update is aligned with the text-13-* rollout and does not affect interaction behavior.

packages/app/src/components/prompt-input.tsx (1)

300-300: UI-only change is safe.

This class rename is consistent with the typography migration and does not alter prompt-input behavior.

packages/app/src/components/titlebar.tsx (1)

91-91: Background class removal is correctly scoped.

Given the dedicated titlebar-shell background rule in packages/app/src/index.css, removing the component-level background class is clean and safe.

packages/ui/src/components/keybind.css (1)

12-12: Comment update is fine.

No functional CSS behavior changed; this is a harmless annotation sync.

packages/app/src/pages/home.tsx (1)

118-118: Both text-size migrations look good.

These updates are purely presentational and align with the new text-13-* naming without affecting page behavior.

Also applies to: 129-129

packages/app/src/components/session/session-status-summary.tsx (1)

16-16: Section title update is consistent and safe.

No functional impact; this is a straightforward typography migration.

packages/app/src/pages/session/composer/session-permission-dock.tsx (1)

67-67: Permission pattern typography change is good.

This is a safe UI-only update and matches the PR’s typography hierarchy work.

packages/app/src/pages/session/session-side-panel.tsx (1)

354-354: Keybind label class updates look correct.

Both changes are presentation-only and align with the text-13-* migration.

Also applies to: 365-365

packages/ui/src/components/tooltip.css (1)

34-34: Comment update is consistent with the typography migration.

This aligns with the token rename and keeps the docs-in-CSS accurate.

packages/app/src/i18n/en.ts (1)

630-630: Retention note for session.new.subtitle is clear and appropriate.

Good call documenting why this key remains despite UI removal.

Based on learnings: “On zh UI surfaces ... do NOT flag branding phrasing regressions from the older rule.”

packages/ui/src/components/button.css (1)

122-122: Both size annotation updates look correct.

The comment labels now match the migrated typography utilities without changing behavior.

Also applies to: 142-142

packages/app/src/components/dialog-select-mcp.tsx (1)

125-125: Typography class migration is clean here.

All three metadata text paths are consistently updated to text-13-regular.

Also applies to: 128-128, 132-132

packages/app/src/app.tsx (1)

349-349: Connection error text updates are consistent and safe.

Both labels now follow the new text-13-* baseline as intended.

Also applies to: 353-353

packages/app/src/pages/layout/sidebar-project.tsx (1)

203-203: Sidebar label typography change looks good.

The preview header now aligns with the updated typography scale.

packages/app/src/components/dialog-custom-provider.tsx (1)

229-229: Section label typography updates are aligned with the redesign.

Both labels are migrated consistently with no functional side effects.

Also applies to: 273-273

packages/ui/src/components/text-field.css (1)

34-34: Text-field annotation updates are correct.

Comment labels now stay in sync with the text-13-* utility naming.

Also applies to: 125-125

packages/ui/src/components/file-search.tsx (1)

38-38: LGTM! Typography update aligns with PR objectives.

The match counter text class update from text-12-regular to text-13-regular is consistent with the PR-wide font hierarchy redesign.

packages/app/src/components/model-tooltip.tsx (1)

82-88: LGTM! Consistent typography updates.

All three tooltip text elements correctly updated from text-12-regular to text-13-regular, matching the PR's font hierarchy redesign.

packages/app/src/components/session/session-status-connections.tsx (1)

16-16: LGTM! Typography updates across status connections UI.

All four text sizing updates (lines 16, 42, 178, 245) correctly apply the new text-13-* utilities, consistent with the PR's font hierarchy redesign.

Also applies to: 42-42, 178-178, 245-245

packages/app/src/components/settings-list.tsx (1)

4-4: LGTM! Surface styling flattened per PR design objectives.

Removing bg-surface-base and rounded-lg aligns with the PR's settings page visual flattening (removing group card backgrounds and borders).

packages/ui/src/components/icon-button.css (1)

133-133: LGTM! Comment updated to match new utility naming.

The inline comment correctly reflects the typography utility rename from text-12-medium to text-13-medium.

packages/app/src/components/dialog-edit-project.tsx (1)

141-141: LGTM! Typography updates in project edit dialog.

All three label and hint text updates (lines 141, 214, 223) correctly apply the new text-13-* utilities, consistent with the PR's font hierarchy redesign.

Also applies to: 214-214, 223-223

packages/app/src/components/file-tree.tsx (1)

96-96: LGTM! Typography updates across file tree UI.

All four text sizing updates (lines 96, 170, 183, 433) correctly apply the new text-13-* utilities for drag preview, node names, diff labels, and the recursion fallback, consistent with the PR's font hierarchy redesign.

Also applies to: 170-170, 183-183, 433-433

packages/app/src/components/dialog-connect-websearch.tsx (1)

261-261: LGTM! Typography updates in websearch dialog.

Both descriptive text elements (lines 261, 276) correctly updated from text-12-regular to text-13-regular, consistent with the PR's font hierarchy redesign.

Also applies to: 276-276

packages/app/src/components/dialog-settings.tsx (1)

52-54: LGTM! Typography updates align with the redesign.

The updates from text-12-medium/text-11-regular to text-13-medium/text-13-regular are consistent with the PR-wide typography hierarchy redesign where class names now match the actual rendered pixel sizes.

packages/ui/src/components/message-part.tsx (1)

1122-1132: LGTM! Consistent typography updates across message metadata.

The migration from text-12-regular to text-13-regular for user message meta elements, the compaction divider label, and assistant text-part meta is consistent with the broader typography hierarchy redesign. All changes preserve existing utility classes and only update the font size designation.

Also applies to: 1349-1349, 1390-1390, 1505-1505

packages/app/src/i18n/zh.ts (1)

587-588: Good practice documenting the retained translation key.

Adding the inline comment to explain why session.new.subtitle is kept despite being removed from the UI in #300 prevents future confusion and accidental cleanup. This is especially helpful for maintaining parity across localization test suites.

packages/ui/src/components/tag.css (1)

16-16: LGTM! Documentation comment synchronized with utility class renames.

Updating the inline CSS comment from text-12-medium to text-13-medium keeps the documentation aligned with the renamed utility classes, making it easier for developers to understand the styling intent.

packages/ui/src/styles/theme.css (1)

12-12: LGTM! New typography token properly integrated.

The addition of --font-size-2x-large: 28px extends the font-size scale consistently, following the existing naming convention and supporting the new .text-28-regular utility class introduced in this PR.

packages/app/src/pages/session/files-tab.tsx (1)

68-68: LGTM! Typography updates across file preview states.

The migration from text-11-regular/text-12-regular to text-13-regular for loading indicators, binary content placeholders, metadata rows, and error messages aligns with the repo-wide typography redesign. All changes are presentation-only with no impact on data handling or control flow.

Also applies to: 74-74, 92-92, 134-134, 144-144

packages/app/src/components/prompt-input/context-items.tsx (1)

53-53: LGTM! Context items typography updated consistently.

The updates from text-11-regular to text-13-regular for the file label and from text-12-regular to text-13-regular for the comment text align with the broader typography hierarchy redesign while preserving all other styling and functionality.

Also applies to: 78-78

packages/app/src/components/settings-general.tsx (1)

286-286: LGTM! Settings UI typography updated consistently.

The migration from text-11-regular/text-12-regular to text-13-regular across web search status indicators, TextField inputs, and SettingsRow descriptions aligns with the repository-wide typography redesign, improving text hierarchy and readability while preserving all functionality.

Also applies to: 295-305, 458-458, 481-481, 729-729

packages/app/src/pages/layout.tsx (1)

1758-1758: Typography migration looks consistent and safe.

Line 1758, Line 1832, and Line 2213 cleanly apply the text-13-* update without affecting behavior.

Also applies to: 1832-1834, 2213-2215

packages/app/src/pages/session/message-timeline.tsx (1)

921-921: Class updates are correct for the new typography scale.

Line 921, Line 970, and Line 986 apply the text-13-* classes consistently with no functional side effects.

Also applies to: 970-970, 986-987

packages/app/src/components/prompt-input/slash-popover.tsx (1)

104-110: Popover metadata typography change is good.

Line 104 and Line 113 now align with the text-13-* hierarchy and keep the existing rendering logic intact.

Also applies to: 113-113

packages/app/src/components/settings-providers.tsx (1)

203-203: Settings provider text scale update is clean.

Line 203 and Line 230 correctly migrate note/description text to text-13-regular without changing behavior.

Also applies to: 230-232

packages/app/src/components/settings-page.tsx (1)

98-98: Settings page typography adjustments look correct.

Line 98, Line 142, and Line 144 are consistent with the new hierarchy and do not impact keyboard/focus handling logic.

Also applies to: 142-145

packages/app/src/pages/layout/sidebar-items.tsx (1)

128-128: Sidebar label style migration is solid.

Line 128 and Line 304 correctly apply the new base text size while preserving .active emphasis behavior.

Also applies to: 304-304

packages/app/src/components/status-popover-body.tsx (1)

259-274: Status popover typography migration is consistent.

Line 259–274 and Line 306–309 cleanly migrate labels/badges to text-13-* with no behavioral impact.

Also applies to: 306-311

packages/app/src/components/session/session-context-tab.tsx (1)

33-34: Session context typography updates are correct and uniform.

Line 33, Line 76, Line 285, Line 317, and Line 326 consistently apply the new text-13-* scale without changing logic.

Also applies to: 76-76, 285-310, 317-327

packages/app/src/pages/layout/pawwork-sidebar.tsx (1)

149-150: Typography/spacing refresh is consistent and low-risk.

These updates are coherent with the text-13-* migration and keep behavior unchanged while improving hierarchy clarity.

Also applies to: 301-307, 331-331

packages/app/src/components/session/session-new-view.tsx (1)

23-23: Empty-state composition and chip restyle look solid.

The updated hierarchy and chip treatment preserve the existing interaction behavior while aligning with the new visual spec.

Also applies to: 25-32, 41-45, 49-50

packages/ui/src/styles/utilities.css (1)

111-118: New utility additions are correctly tokenized.

text-16-regular and text-28-regular are aligned with the theme token model and integrate cleanly with updated consumers.

Also applies to: 129-136

packages/app/src/index.css (1)

41-45: Palette and titlebar surface updates are coherent with the shell redesign.

The light/dark token shifts and macOS titlebar background simplification are consistent and look safe.

Also applies to: 62-66, 81-81, 88-88, 93-93

Comment thread packages/ui/src/styles/utilities.css
The Task 2 mass-rename sed command in #300 scoped to packages/app/src and
packages/ui/src, missing the root packages/app/index.html which sets
baseline body typography. Without the rename, .text-12-regular on <body>
no longer resolves and the entire app falls back to default styles.

Caught by CodeRabbit on PR #306.

Refs #300

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request implements a comprehensive UI redesign focused on typography and color themes across the application. Key changes include migrating most small text elements from 11px or 12px to a new 13px standard, updating the "pawwork" theme color palette for both light and dark modes, and restructuring the new session view to prioritize the composer while simplifying skill card navigation. Additionally, various layout spacing adjustments were made across the sidebar, dialogs, and session components to align with the updated font hierarchy. I have no feedback to provide.

@Astro-Han Astro-Han merged commit 474160b into dev Apr 28, 2026
22 of 23 checks passed
@Astro-Han Astro-Han deleted the claude/font-hierarchy branch April 28, 2026 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request P2 Medium priority ui Design system and user interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant