osac-project · openshift-merge-bot · Aug 17, 2026 · Aug 12, 2026 · Aug 12, 2026 · Aug 7, 2026
diff --git a/apps/app-frontend/index.html b/apps/app-frontend/index.html
@@ -5,6 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OSAC</title>
+    <!-- External (not inline) so a strict script-src CSP can allow 'self' without unsafe-inline. -->
+    <script src="/theme-boot.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
@@ -15,11 +15,11 @@
     "@connectrpc/connect-web": "^2.1.2",
     "@osac/types": "workspace:*",
     "@osac/ui-components": "workspace:*",
-    "@patternfly/patternfly": "^6.4.0",
-    "@patternfly/react-charts": "^8.0.0",
-    "@patternfly/react-core": "^6.4.1",
-    "@patternfly/react-icons": "^6.4.0",
-    "@patternfly/react-table": "^6.4.0",
+    "@patternfly/patternfly": "^6.6.1",
+    "@patternfly/react-charts": "^8.6.1",
+    "@patternfly/react-core": "^6.6.1",
+    "@patternfly/react-icons": "^6.6.1",
+    "@patternfly/react-table": "^6.6.1",
     "@tanstack/react-query": "^5.0.0",
     "i18next": "^23.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
@@ -28,6 +28,7 @@
     "react-dom": "^19.2.4",
     "react-i18next": "^15.0.0",
     "react-router-dom": "^7.0.0",
+    "react-svg": "^16.2.0",
     "victory": "^37.3.6"
   },
   "devDependencies": {

diff --git a/apps/app-frontend/public/theme-boot.js b/apps/app-frontend/public/theme-boot.js
@@ -0,0 +1,19 @@
+// Apply PatternFly theme/contrast before React boots to avoid a flash of the wrong theme.
+(function () {
+  const html = document.documentElement;
+  // Felt brand tokens — always on
+  html.classList.add('pf-v6-theme-felt');
+
+  let theme = localStorage.getItem('osac/theme') || 'system';
+  if (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = 'dark';
+  }
+  html.classList.toggle('pf-v6-theme-dark', theme === 'dark');
+
+  let contrast = localStorage.getItem('osac/contrast') || 'system';
+  if (contrast === 'system') {
+    contrast = window.matchMedia('(prefers-contrast: more)').matches ? 'contrast' : 'glass';
+  }
+  html.classList.toggle('pf-v6-theme-high-contrast', contrast === 'contrast');
+  html.classList.toggle('pf-v6-theme-glass', contrast === 'glass');
+})();
diff --git a/apps/app-frontend/src/shell/AppShell.tsx b/apps/app-frontend/src/shell/AppShell.tsx
@@ -1,13 +1,15 @@
 import { type ReactNode } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import { Page } from '@patternfly/react-core';
+import { Page, SkipToContent } from '@patternfly/react-core';
 
+import { CatalogItemDetailPage } from '@osac/ui-components/components/catalog/details/CatalogItemDetailPage.tsx';
 import ErrorBoundary from '@osac/ui-components/components/ErrorBoundary/ErrorBoundary';
 import IdentityProviderRoutes from '@osac/ui-components/components/IdentityProvider/IdentityProviderRoutes';
 import ProjectRoutes from '@osac/ui-components/components/Project/ProjectRoutes';
 import RoleBindingRoutes from '@osac/ui-components/components/RoleBinding/RoleBindingRoutes';
 import { VmDetailsPage } from '@osac/ui-components/components/vm/VmDetailsPage';
 import { useSession } from '@osac/ui-components/hooks/use-session';
+import { useTranslation } from '@osac/ui-components/hooks/useTranslation';
 import { SecurityGroupDetailPage } from '@osac/ui-components/pages/networking/SecurityGroupDetailPage';
 import { SecurityGroupsListPage } from '@osac/ui-components/pages/networking/SecurityGroupsListPage';
 import { VirtualNetworkDetailPage } from '@osac/ui-components/pages/networking/VirtualNetworkDetailPage';
@@ -25,6 +27,8 @@ import { ShellSidebar } from './ShellSidebar';
 import { StorageRoutes } from './StorageRoutes';
 import { TenantRoutes } from './TenantRoutes';
 
+const MAIN_CONTENT_ID = 'osac-main-content';
+
 const ShellRoute = ({ children }: { children: ReactNode }) => {
   const { pathname } = useLocation();
 
@@ -33,6 +37,7 @@ const ShellRoute = ({ children }: { children: ReactNode }) => {
 
 export const AppShell = ({ logout }: { logout: () => Promise<void> }) => {
   const { role } = useSession();
+  const { t } = useTranslation();
 
   const defaultRoute = defaultRouteForRole(role);
 
@@ -41,6 +46,11 @@ export const AppShell = ({ logout }: { logout: () => Promise<void> }) => {
       masthead={<ShellMasthead onLogout={logout} />}
       sidebar={<ShellSidebar />}
       isManagedSidebar
+      mainContainerId={MAIN_CONTENT_ID}
+      skipToContent={
+        <SkipToContent href={`#${MAIN_CONTENT_ID}`}>{t('Skip to content')}</SkipToContent>
+      }
+      isContentFilled
     >
       <Routes>
         <Route
@@ -51,6 +61,14 @@ export const AppShell = ({ logout }: { logout: () => Promise<void> }) => {
             </ShellRoute>
           }
         />
+        <Route
+          path="/catalog/:kind/:id"
+          element={
+            <ShellRoute>
+              <CatalogItemDetailPage />
+            </ShellRoute>
+          }
+        />
         <Route
           path="/projects/*"
           element={

diff --git a/apps/app-frontend/src/shell/ShellMasthead.tsx b/apps/app-frontend/src/shell/ShellMasthead.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { ReactSVG } from 'react-svg';
 import {
   Alert,
   Button,
@@ -19,16 +20,14 @@ import {
   ModalFooter,
   ModalHeader,
   PageToggleButton,
-  Stack,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import { UserIcon } from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
+import osacIcon from '@osac/ui-components/assets/RH-OSAC.svg';
 import { SubtleContent } from '@osac/ui-components/components/SubtleContent/SubtleContent';
 import UserPreferencesModal from '@osac/ui-components/components/UserPreferences/UserPreferencesModal';
 import { useSession } from '@osac/ui-components/hooks/use-session';
@@ -47,19 +46,19 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => {
   const [logoutError, setLogoutError] = React.useState<string>();
   const navigate = useNavigate();
   const { role, username, tenantId } = useSession();
-  const displayName = username || 'User';
+  const displayName = username || t('User');
 
   return (
     <>
       {logoutError && (
         <Modal variant="small" isOpen onClose={() => setLogoutError(undefined)}>
-          <ModalHeader title="Logout failed" titleIconVariant="danger" />
+          <ModalHeader title={t('Logout failed')} titleIconVariant="danger" />
           <ModalBody>
             <Alert variant="danger" isInline title={logoutError ?? ''} />
           </ModalBody>
           <ModalFooter>
             <Button variant="primary" onClick={() => setLogoutError(undefined)}>
-              Close
+              {t('Close')}
             </Button>
           </ModalFooter>
         </Modal>
@@ -68,22 +67,23 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => {
       <Masthead display={{ default: 'inline' }}>
         <MastheadMain>
           <MastheadToggle>
-            <PageToggleButton variant="plain" aria-label="Global navigation">
-              <BarsIcon />
-            </PageToggleButton>
+            <PageToggleButton isHamburgerButton aria-label={t('Global navigation')} />
           </MastheadToggle>
-          <MastheadLogo>
+          <div>
             <MastheadBrand>
-              <Stack>
-                <Title headingLevel="h4" size="lg">
-                  Red Hat OSAC
-                </Title>
-                {tenantId && (
-                  <SubtleContent>{t('Tenant: {{ tenantId }}', { tenantId })}</SubtleContent>
-                )}
-              </Stack>
+              <MastheadLogo
+                aria-label={t('Red Hat OSAC')}
+                component={(props) => <a {...props} href="#" />}
+              >
+                <ReactSVG src={osacIcon} aria-hidden className="pf-v6-c-brand" />
+              </MastheadLogo>
             </MastheadBrand>
-          </MastheadLogo>
+            {tenantId ? (
+              <SubtleContent className="pf-v6-u-mt-sm">
+                {t('Tenant: {{ tenantId }}', { tenantId })}
+              </SubtleContent>
+            ) : null}
+          </div>
         </MastheadMain>
 
         <MastheadContent>
@@ -106,7 +106,7 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => {
                         isExpanded={isUserMenuOpen}
                         onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
                         icon={<UserIcon />}
-                        aria-label="Account menu"
+                        aria-label={t('Account menu')}
                       >
                         {displayName}{' '}
                         <Label color="grey" variant="outline" isCompact>
@@ -117,7 +117,7 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => {
                   >
                     <DropdownList>
                       <DropdownItem onClick={() => setPreferencesOpen(true)}>
-                        Preferences
+                        {t('Preferences')}
                       </DropdownItem>
                       <DropdownItem
                         onClick={async () => {
@@ -129,7 +129,7 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => {
                           }
                         }}
                       >
-                        Log out
+                        {t('Log out')}
                       </DropdownItem>
                     </DropdownList>
                   </Dropdown>

diff --git a/apps/app-frontend/src/shell/ShellSidebar.tsx b/apps/app-frontend/src/shell/ShellSidebar.tsx
@@ -35,7 +35,7 @@ export const ShellSidebar = () => {
 
   return (
     <PageSidebar>
-      <PageSidebarBody isFilled>
+      <PageSidebarBody usePageInsets isFilled>
         <Nav aria-label="Primary navigation">
           {navRows.map((row) => {
             if (isNavSection(row)) {