Upgrade Console SDK to 4.22, align styling with PF6/Console patterns

[jhadvig]

Summary

• Upgrade Console SDK from 4.21 to 4.22 (@openshift-console/dynamic-plugin-sdk 4.22.0-prerelease.3) with all required shared module upgrades: React 17→18, react-router v5→v7, react-i18next v11→v16, i18next v23→v25, PatternFly 6.2→6.4
• Align plugin styling with OpenShift Console and PatternFly 6 standards — replace custom CSS with SDK/PF components, add missing CSS definitions, remove stylelint violations
• Fix Dockerfile build stage to include devDependencies needed for TypeScript compilation
• Update README to reflect the actual plugin purpose (AI Hub for Lightspeed remediation proposals) instead of the template boilerplate

SDK Upgrade (4.21 → 4.22)

Package	Before	After
@openshift-console/dynamic-plugin-sdk	4.21-latest	4.22.0-prerelease.3
@openshift-console/dynamic-plugin-sdk-webpack	4.21-latest	4.22.0-prerelease.3
react / react-dom	^17.0.1	^18.3.1
@types/react	^17.0.37	^18.3.28
react-router	5.3.x (via react-router-dom)	~7.13.1
react-i18next	^11.7.3	~16.5.8
i18next	^23.11.5	^25.8.18
@patternfly/react-core	^6.2.2	^6.4.3
@patternfly/react-icons	^6.2.2	^6.4.0
@patternfly/react-table	^6.2.2	^6.4.3
@console/pluginAPI	^4.21.0	>=4.22.0-0

Removed packages: react-router-dom, react-router-dom-v5-compat, @types/react-router-dom, @testing-library/react-hooks, react-test-renderer

Added: @testing-library/react (replaces deprecated @testing-library/react-hooks for React 18)

Code migrations

• useHistory → useNavigate, history.push() → navigate() (3 files)
• Imports from react-router-dom → react-router
• Test imports from @testing-library/react-hooks → @testing-library/react

Styling Alignment

Use SDK ListPageHeader instead of custom header div

Replaced custom <div> + Flex layout with the SDK's ListPageHeader component, aligning page header spacing with all other console list pages.

Use PF PageSection type="breadcrumb" for breadcrumbs

Replaced custom breadcrumb wrapper div with PF PageSection for proper page-level insets.

Replace custom split button with PF MenuToggle splitButtonItems

Replaced hand-rolled split button (two adjacent Buttons with zeroed border-radii) with PF6's MenuToggle with splitButtonItems and danger color override via PF CSS variables.

Replace custom <textarea> with PF TextArea

Replaced hand-styled HTML textarea with PF's TextArea component for automatic theming and dark mode support.

Replace inline styles with CSS classes

Moved 3 inline style={{}} instances to named CSS classes (ols-plugin__option-actions, ols-plugin__option-select-btn).

Remove .pf-v6-c-expandable-section__toggle override

Removed the stylelint-disabled PF internal selector override that was targeting .pf-v6-c-expandable-section__toggle. The PF6 default styling is acceptable.

Add missing CSS for dynamic component classes

Created dynamic-components.css with styles for ~20 previously unstyled ols-plugin__chat-* classes: markdown text, resource diffs, action picker, status timeline, evidence/data tables, chart containers, status icons, CMO components. All styles use PF CSS variables exclusively (no hex colors).

Dockerfile Fix

Changed npm ci --omit=dev --omit=optional to npm ci in the build stage so @types/react and other TypeScript type definitions (devDependencies) are available during the webpack/TS compilation step. The final production image remains lean since it only copies dist/ from the build stage.

Screenshots

AI Hub — Proposals List Page

Proposal list with filter, phase labels, and configuration button

The AI Hub navigation item appears under Administration. The list page uses the SDK ListPageHeader component with filterable VirtualizedTable showing all Proposal CRs across namespaces.

AI Hub — Proposal Detail Page

Proposal Detail - Overview

Proposal Detail - Proposal Tab

Proposal Detail - Execution Tab

Proposal Detail - Verification Tab

Multi-tab workflow view with chevron navigation, live log streaming, and verification results

The detail page shows the proposal workflow with Overview, Proposal, Execution, and Verification tabs. Active-phase tabs show a pulsing dot indicator. The Proposal tab includes live sandbox log streaming. The Verification tab renders markdown results with structured pass/fail checks.

AI Hub — Configuration Page

Configuration - Approval Policy

Configuration - Agents

Configuration - LLM Providers

Approval policy toggles, agent tier management, and LLM provider configuration

Configuration page with breadcrumb navigation using PF PageSection type="breadcrumb". Three tabs: Approval Policy (manual/automatic per stage), LLM Providers (CRUD for provider backends), and Agents (CRUD for agent configurations with model, max turns, and timeouts).

Test plan

• npm run build — webpack compiles without errors
• npm test — all 55 unit tests pass
• npm run lint — stylelint passes with zero errors on all CSS files
• Visual verification on OpenShift 4.22 cluster with Lightspeed Agentic operator

🤖 Generated with Claude Code

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign hongkailiu for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.