refactor(frontend): the global stylesheets move into @agenta/ui, one token source for oss, ee and mobile by ardaerzin · Pull Request #5874 · Agenta-AI/agenta

ardaerzin · 2026-08-10T07:04:40Z

Two commits: register the new workspace packages in the OSS and EE builds, then move the global
stylesheets into @agenta/ui so all three apps read one token source instead of three copies
that quietly disagreed about spacing and color.
Not run in a browser — static gates only (pnpm lint-fix 24/24, tsc --noEmit clean
for @agenta/shared, ui, entities, entity-ui, settings-ui, oss, ee, mobile).

Stacked on playground/de-antd; review only this lane's diff.

ardaerzin · 2026-08-10T07:04:41Z

@coderabbitai review

vercel · 2026-08-10T07:04:45Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Error		Aug 11, 2026 5:10am

coderabbitai · 2026-08-10T07:04:47Z

⚠️ Action not completed

Review rate limited.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-08-10T07:04:50Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 8a30c4ed-2425-40cd-a484-554fbcb4d8a7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Summary by CodeRabbit

New Features
- Added reusable starter-template cards with provider logos, descriptions, tools, and selection support.
- Added shared light and dark theme styling across surfaces, editors, controls, statuses, and animations.
- Added improved table column resizing and quiet scrollbar styles.
- Added Markdown and code-block rendering support.
Bug Fixes
- Improved mobile messaging and modal display.
- Corrected shared styling imports and surface mappings across applications.
- Removed conflicting global heading styles.

Walkthrough

The PR centralizes shared UI tokens and surface styles, integrates them into mobile, OSS, and EE applications, adds shared message rendering to mobile, updates Markdown rendering dependencies, and introduces reusable home template components.

Changes

Shared UI integration

Layer / File(s)	Summary
Shared theme and surface foundation `web/packages/agenta-ui/src/styles/*`, `web/mobile/scripts/generate-shadcn-tokens.ts`, `web/scripts/generate-tailwind-tokens.ts`	Adds light and dark theme tokens, surface utilities, scrollbar styles, resize-handle styles, and scoped editor styling.
Mobile theme consumption and provider wiring `web/mobile/src/styles/globals.css`, `web/mobile/src/pages/_app.tsx`, `web/mobile/next.config.ts`	Imports shared styles, expands token and animation mappings, scans workspace packages, and renders `AppMessageContext`.
OSS and EE package and stylesheet adoption `web/oss/`, `web/ee/`	Adopts shared styles, configures workspace transpilation, adds Streamdown and renderer packages, removes Ant Design Markdown packages, and registers drive renderers.
Home template components `web/packages/agenta-home-ui/src/TemplateCard.tsx`, `web/packages/agenta-home-ui/src/TemplateProviderMarks.tsx`	Adds reusable template cards and provider logo marks with tooltips and selection callbacks.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

Agenta-AI/agenta#5098: Shared UI and theme-token changes support the related TemplateStrip components.
Agenta-AI/agenta#5392: The PR builds on related palette retheming and token relocation work.
Agenta-AI/agenta#5679: The mobile scaffold changes extend the related token, provider, and workspace configuration.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main stylesheet migration and shared token source for OSS, EE, and mobile.
Description check	✅ Passed	The description directly explains the workspace registration, stylesheet migration, shared token goal, and completed static checks.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 60.00%.
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.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch pkg/ui-styles

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

ardaerzin · 2026-08-10T15:15:39Z

@coderabbitai review

coderabbitai · 2026-08-10T15:15:47Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

web/packages/agenta-home-ui/src/TemplateCard.tsx (1)
10-17: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Reduce the design prose in this source file.

Move the product rationale to design documentation or the PR description. Keep only a short comment if it protects a non-obvious implementation constraint. As per coding guidelines, keep in-code comments to at most one short line unless they document a genuinely surprising constraint.
Proposed change
-/**
- * A template, in the same card shape an agent uses.
- *
- * A template IS an agent you haven't made yet, so the two read as one object type: monogram
- * straddling the top edge, name, description, then a footer of the connections it needs. The
- * design's "1.2k uses" has no telemetry behind it — the footer carries what the template actually
- * declares (its tools and when it fires) instead of an invented popularity number.
- */
+/** Selectable card for an agent starter template. */
Source: Coding guidelines
web/mobile/scripts/generate-shadcn-tokens.ts (1)

66-68: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Shorten the added implementation comments.

The added comments exceed the one-short-line policy. Keep only short constraints that are necessary at the code site.

web/mobile/scripts/generate-shadcn-tokens.ts#L66-L68: reduce the zinc-scale rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L75-L76: reduce the token-coverage rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L89-L92: reduce the overlay-token rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L113-L117: reduce the surface-role rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L148-L152: reduce the surface-ladder rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L204-L206: reduce the shell-variable rationale to one short line.

web/mobile/scripts/generate-shadcn-tokens.ts#L255-L257: reduce the composer-variable rationale to one short line.

web/ee/src/pages/_app.tsx#L4-L5: reduce the Streamdown stylesheet rationale to one short line.

web/oss/src/pages/_app.tsx#L8-L9: reduce the renderer-injection rationale to one short line.

As per coding guidelines, “Keep in-code comments to at most one short line.”

Source: Coding guidelines

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: c9c0b082-3b93-4117-8bf4-a855dc5543eb

📥 Commits

Reviewing files that changed from the base of the PR and between 8a4399f and 322ae65.

⛔ Files ignored due to path filters (2)

web/mobile/src/styles/theme.generated.css is excluded by !**/*.generated.*
web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (19)

web/ee/package.json
web/ee/src/pages/_app.tsx
web/mobile/next.config.ts
web/mobile/scripts/generate-shadcn-tokens.ts
web/mobile/src/pages/_app.tsx
web/mobile/src/styles/globals.css
web/oss/next.config.ts
web/oss/package.json
web/oss/src/pages/_app.tsx
web/oss/src/styles/globals.css
web/oss/tailwind.config.ts
web/packages/agenta-home-ui/src/TemplateCard.tsx
web/packages/agenta-home-ui/src/TemplateProviderMarks.tsx
web/packages/agenta-ui/src/styles/code-editor-styles.css
web/packages/agenta-ui/src/styles/custom-resize-handle.css
web/packages/agenta-ui/src/styles/editor-theme.css
web/packages/agenta-ui/src/styles/surfaces.css
web/packages/agenta-ui/src/styles/theme-variables.css
web/scripts/generate-tailwind-tokens.ts

coderabbitai · 2026-08-10T15:20:12Z

+        /* Plain CSS, not `@apply scrollbar-*`: that plugin exists only in the desktop app's
+           Tailwind v3 config, and one unknown utility makes the WHOLE stylesheet unparsable
+           wherever it is imported. Same rendering, no plugin dependency. */
+        &::-webkit-scrollbar {
+            height: 0;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #ddd;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: #f0f0f0;
+        }

-        &:hover {
-            @apply scrollbar-h-[2px];
+        &:hover::-webkit-scrollbar {
+            height: 2px;


🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use theme-aware scrollbar colors.

Lines 214-217 add raw colors in a shared stylesheet. These colors do not adapt to the active appearance. Use shared scrollbar tokens and verify both themes.

Proposed fix

&::-webkit-scrollbar-thumb { - background-color: `#ddd`; + background-color: var(--ag-scroll-thumb); } &::-webkit-scrollbar-track { - background-color: `#f0f0f0`; + background-color: transparent; }

As per coding guidelines, “do not use raw hex colors” and implement light and dark states for changed UI elements.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

/* Plain CSS, not `@apply scrollbar-*`: that plugin exists only in the desktop app's

Tailwind v3 config, and one unknown utility makes the WHOLE stylesheet unparsable

wherever it is imported. Same rendering, no plugin dependency. */

&::-webkit-scrollbar {

height: 0;

}

&::-webkit-scrollbar-thumb {

background-color: #ddd;

}

&::-webkit-scrollbar-track {

background-color: #f0f0f0;

}

&:hover {

@apply scrollbar-h-[2px];

&:hover::-webkit-scrollbar {

height: 2px;

/* Plain CSS, not `@apply scrollbar-*`: that plugin exists only in the desktop app's

Tailwind v3 config, and one unknown utility makes the WHOLE stylesheet unparsable

wherever it is imported. Same rendering, no plugin dependency. */

&::-webkit-scrollbar {

height: 0;

}

&::-webkit-scrollbar-thumb {

background-color: var(--ag-scroll-thumb);

}

&::-webkit-scrollbar-track {

background-color: transparent;

}

&:hover::-webkit-scrollbar {

height: 2px;

Source: Coding guidelines

…e builds

…token source for oss, ee and mobile

code-editor-styles.css painted its thumb #ddd on an #f0f0f0 track and editor-theme.css painted #999 — fixed light values in stylesheets that oss, ee and mobile all import, so the scrollbars stayed light-mode in dark. The --ag-scroll-thumb token already carries both appearances and .ag-scroll-quiet already uses it; the tracks follow that class's transparent treatment.

ardaerzin force-pushed the playground/de-antd branch from 52698fd to 8a4399f Compare August 10, 2026 14:58

ardaerzin force-pushed the pkg/ui-styles branch from 09cb133 to 322ae65 Compare August 10, 2026 14:58

vercel Bot had a problem deploying to Preview August 10, 2026 14:58 Failure

coderabbitai Bot reviewed Aug 10, 2026

View reviewed changes

ardaerzin added 3 commits August 11, 2026 02:42

chore(frontend): register the new workspace packages in the oss and e…

067666a

…e builds

refactor(frontend): the global stylesheets move into @agenta/ui, one …

9296685

…token source for oss, ee and mobile

ardaerzin force-pushed the pkg/ui-styles branch from 322ae65 to be3fe94 Compare August 11, 2026 05:10

vercel Bot had a problem deploying to Preview August 11, 2026 05:10 Failure

Navigation Menu

Uh oh!

refactor(frontend): the global stylesheets move into @agenta/ui, one token source for oss, ee and mobile - #5874

refactor(frontend): the global stylesheets move into @agenta/ui, one token source for oss, ee and mobile#5874
ardaerzin wants to merge 3 commits into
playground/de-antdfrom
pkg/ui-styles

ardaerzin commented Aug 10, 2026

Uh oh!

ardaerzin commented Aug 10, 2026

Uh oh!

vercel Bot commented Aug 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

Review skipped

Summary by CodeRabbit

Walkthrough

Changes

Review ran into problems

Uh oh!

ardaerzin commented Aug 10, 2026

Uh oh!

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Aug 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

ardaerzin commented Aug 10, 2026

Uh oh!

ardaerzin commented Aug 10, 2026

Uh oh!

vercel Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Summary by CodeRabbit

Walkthrough

Changes

Review ran into problems

Uh oh!

ardaerzin commented Aug 10, 2026

Uh oh!

coderabbitai Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Aug 10, 2026 •

edited

Loading

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading