feat(ui): add keycloak theme #1881

kapetr · 2026-01-22T17:43:02Z

Summary

This PR adds a custom Keycloak theme for AgentStack using Keycloakify to generate theme artifacts. The login page uses Carbon components and supports dark mode with theme persistence across the main application. Keycloakify has been integrated into the build pipeline to compile the React-based theme into Keycloak-compatible resources, which are packaged as a JAR file and deployed via Helm charts.

Linked Issues

Closes #1860

Documentation

No Docs Needed: included README for dev purposes, that should suffice for now

If this PR adds new feature or changes existing. Make sure documentation is adjusted accordingly. If the docs is not needed, please explain why.

gemini-code-assist · 2026-01-22T17:43:52Z

Summary of Changes

Hello @kapetr, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user authentication experience for AgentStack by introducing a custom Keycloak theme. The new theme provides a modern, branded login interface, leveraging React and Carbon components for a responsive and accessible design. A key feature is the seamless dark mode support, which persists across the application. The changes also streamline the theme's lifecycle, from development and compilation using Keycloakify to its deployment within the existing infrastructure via Helm, offering flexibility for both production and development environments.

Highlights

Custom Keycloak Theme: Introduced a new custom Keycloak theme for AgentStack, built using Keycloakify to generate theme artifacts.
Carbon Components Integration: The login page now utilizes Carbon components for a consistent UI/UX, including support for dark mode with theme persistence.
Build Pipeline Integration: Keycloakify has been integrated into the build pipeline to compile the React-based theme into Keycloak-compatible resources, packaged as a JAR file.
Helm Chart Deployment: The custom theme is deployed via Helm charts, with options to use a custom Docker image with the built-in theme or mount theme files via ConfigMap for development/testing.
Development Environment Setup: Added new mise tasks for local development, building, and Storybook integration for the Keycloak theme, along with necessary tool dependencies (Java, Maven).

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a custom Keycloak theme for AgentStack using Keycloakify, integrating it into the build pipeline and deployment process. The changes include adding a new keycloak-theme application with its own dependencies, scripts, and configurations for development and deployment. The theme uses Carbon components and supports dark mode. The Helm charts have been updated to conditionally deploy the custom theme either as a built-in Docker image or via ConfigMap. Overall, the implementation is well-structured and follows good practices for integrating a custom Keycloak theme.

apps/keycloak-theme/src/login/components/LoginForm/LoginForm.tsx

apps/keycloak-theme/src/login/pages/Login.tsx

helm/values.yaml

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

PetrBulanek

The error message is not correctly styled in dark theme.

apps/keycloak-theme/src/login/components/LocaleNav/LocaleNav.tsx

apps/keycloak-theme/src/constants.ts

PetrBulanek · 2026-01-27T08:45:06Z

apps/keycloak-theme/src/login/hooks/useDarkModeScript.ts

We already have this code copy-pasted in three places. It's definitely not the scope of this PR, but maybe we could think about how to centralize it. Perhaps into a separate app, similar to linting?

Yes, for sure. I would have done it already here, but I didnt want a separate app for that (that's quite a minor piece of code for a separate app) and agentstack-ui can't be dependency here. But we can at least do that for web and ui, and maybe just include it here via relative path, not via module, or leave it as is here.

apps/keycloak-theme/src/login/pages/Login.tsx

apps/keycloak-theme/src/login/pages/Terms.module.scss

PetrBulanek · 2026-01-27T09:05:36Z

apps/keycloak-theme/index.html

+      href="/favicon-dark.svg"
+      media="(prefers-color-scheme: dark)"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />


I don't think we actually use this file, do we?

That's vite entrypoint file, we do need it.

I meant the favicon file favicon-32x32.png. Sorry for not making myself clearer. :-)

apps/keycloak-theme/package.json

Signed-off-by: Petr Kadlec <petr@puradesign.cz> feat(ui): add keycloak pages - register, terms, login reset Signed-off-by: Petr Kadlec <petr@puradesign.cz> feat(ui): keycloak theme final updates, deployment setup Signed-off-by: Petr Kadlec <petr@puradesign.cz> Signed-off-by: Petr Kadlec <petr@puradesign.cz> Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

kapetr · 2026-01-27T11:57:59Z

docs/development/deploy-agent-stack/deployment-guide.mdx

+<Warning>
+**Email Verification Required:** Agent Stack requires the `email_verified` claim to be `true` in JWT tokens. When configuring external identity providers in Keycloak, ensure that:
+- Users verify their email addresses before authenticating
+- The `email_verified` claim is mapped to the token (this is included by default in the `email` scope)
+- External providers pass the email verification status correctly
+
+Without verified emails, authentication will fail with "Verified email not found" error.
+</Warning>


@jezekra1 Please review

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

github-project-automation bot added this to Agent Stack Jan 22, 2026

kapetr marked this pull request as draft January 22, 2026 17:43

dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Jan 22, 2026

gemini-code-assist bot reviewed Jan 22, 2026

View reviewed changes

kapetr force-pushed the feat/1860-add-custom-keycloak-theme branch from f54d57f to 1785d5b Compare January 26, 2026 13:44

kapetr changed the base branch from add-keycloak-poc to main January 26, 2026 13:46

kapetr requested review from PetrBulanek and jezekra1 January 26, 2026 13:57

kapetr marked this pull request as ready for review January 27, 2026 08:00

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels Jan 27, 2026

feat(ui): add custom keycloak theme WIP

01adb17

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

PetrBulanek requested changes Jan 27, 2026

View reviewed changes

kapetr added 2 commits January 27, 2026 10:15

fixup! review comments

a2d3c71

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

kapetr force-pushed the feat/1860-add-custom-keycloak-theme branch from 63dab26 to a2d3c71 Compare January 27, 2026 11:50

kapetr requested a review from PetrBulanek January 27, 2026 11:50

fixup! update docs

321ec53

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

kapetr commented Jan 27, 2026

View reviewed changes

kapetr added 2 commits January 27, 2026 13:01

fixup! remove old favicon

693c913

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

fixup! sign out on server auth errors

a0e70a2

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

PetrBulanek approved these changes Jan 27, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 27, 2026

jezekra1 approved these changes Jan 27, 2026

View reviewed changes

JanPokorny changed the title ~~[DRAFT] feat(ui): add keycloak theme~~ feat(ui): add keycloak theme Jan 27, 2026

kapetr requested a review from JanPokorny January 27, 2026 12:20

jezekra1 merged commit a508fbe into main Jan 27, 2026
10 checks passed

jezekra1 deleted the feat/1860-add-custom-keycloak-theme branch January 27, 2026 12:29

github-project-automation bot moved this to Done in Agent Stack Jan 27, 2026

jezekra1 pushed a commit that referenced this pull request Jan 27, 2026

feat(ui): add keycloak theme (#1881)

69b38ce

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

feat(ui): add keycloak theme #1881

feat(ui): add keycloak theme #1881

Conversation

kapetr commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Linked Issues

Documentation

Uh oh!

gemini-code-assist bot commented Jan 22, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PetrBulanek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

PetrBulanek Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

kapetr Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PetrBulanek Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

kapetr Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

PetrBulanek Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kapetr Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kapetr commented Jan 22, 2026 •

edited

Loading