[jeffspahr]

Problem

Core Pipelines workflows use inconsistent navigation, page layouts and interaction patterns, making common run, pipeline and experiment tasks harder to discover and use. The UI needs a coherent, accessible design while preserving API contracts, ownership boundaries and existing workflow behavior.

Modernizes the Pipelines UI across the main workflows with a shared light/dark design system while retaining API and functional contracts. Part of #14572; no KEP is required.

What changes

• Shell and navigation: responsive sidebar, theme/help controls, command search with explicit shared-pipeline scope, bundled fonts, and preserved namespace, deployment metadata and embedded-mode behavior.
• Workflow pages: Runs, task inspection and Timeline, comparison, Pipelines/versions, Experiments, recurring runs, creation forms, Artifacts/lineage and rich viewers use shared tables, forms, dialogs and status semantics.
• UI stack: Base UI, Tailwind primitives and shared-token component styles replace retired MUI/Emotion/typestyle presentation. Components are grouped by role: shell, navigation, tables, inspection, pipelines and runs. Route entry points use Page, contents use role names such as Form, View and Dialog, and context wrappers use WithContext; sole presentation implementations no longer carry Modern, Enhanced or V2 labels. API version labels and feature-flagged query page alternatives remain explicit.
• Ownership: CustomTable remains the filtering/sorting/pagination controller; page controllers own requests and mutations; chrome renders explicit action definitions. Class pages remain supported. Architecture and styling contracts define these boundaries.
• Upload recovery: after an acknowledged local-file upload, version discovery retries successful empty reads for up to 10 seconds. Explicit Retry version discovery reuses the uploaded pipeline without another upload; API errors remain visible and edits/navigation cancel stale work. API consistency limits are documented. Release counterpart: fix(frontend): retry uploaded version discovery without reuploading [2.18] #14808.
• Graphs: preserves master’s expanded inline sub-DAGs, scoped iteration identities, saved expansion choices, keyboard panning/movement and flush tab-to-canvas layout. Graph controls and group cards use the modern theme and component stack; short run viewports retain scrolling with reachable controls.
• Loading: creation/transfer pages and the YAML/JSON editor load on demand. The production server negotiates precompressed JS/CSS assets with identity fallback.

The workflow contracts distinguish preserved functionality from deliberate major-release UX improvements. Coverage includes all 19 toolbar action keys through the real factory and renderer, encoded resource links, selectable rows, URL-owned inspection history, status semantics, scoped search races, native form submission and duplicate-mutation protection. JupyterHub navigation was already disabled by #1046. Runs status filtering, global counts and the 48-hour failure summary remain deferred.

Scope and qualification

Production-browser regression suites and the required Linux Chromium lane remain here. Broad browser/device qualification, historical performance builds and Kubernetes deployment/rollback tooling are extracted into draft #14757, which lands after this PR. Its weekly/manual runs remain observational until #14754 and #14755 establish reliability and maintainers separately approve any promotion.

Generated evidence is excluded from the source tree. Kubeflow-owned archives and hashes preserve prior measurements, screenshots and manifests; all 271 remaining generated files were verified against the October 8 archive before removal. Executable fixtures remain with their tests. Both original archives and browsable snapshots are retained on the dedicated Kubeflow-owned codex/ui-modernization-evidence branch, pinned to d9aed93d6184be1f65d36066b40eb92028a2aa25. Original archive hashes and all 312 indexed files were verified from a fresh upstream clone. Routine results belong in Actions artifacts, with project-owned storage for retained evidence.

Demo

Watch the 2:18 legacy/modern walkthrough with Tom narration · Captions · Transcript and recording provenance

Includes Timeline, export/import, the compact footer and UI-library changes. It compares legacy b018d7ed with modern a9561f1a0; it predates final review fixes and is a workflow demonstration, not a speed benchmark.

Verification

• Rebased onto master 9316e66c7, preserving inline sub-DAG rendering (feat(frontend): render sub-DAGs as expanded inline groups #14751) and flush graph layout (fix(frontend): make graph canvases flush with tabs #14878). Independent merge-tree comparison confirms all non-frontend files match the combined inputs; graph integration received a separate review.
• TypeScript, production bundle build and focused source lint pass. All 240 affected graph, detail-panel, layout and tooltip unit tests pass; the focused local run uses a 30-second per-test timeout without changing repository limits.
• Production Chromium acceptance passes: 200-task pagination/geometry/zoom/pan/selection; nested iteration identities, history and expansion; pipeline/run tab-to-canvas geometry at 900px and 500px heights with scrolling access to controls; all 11 Run Details browser cases covering namespace gating, logs, retries, embedded links and responsive focus.
• Earlier full-suite, performance and cluster evidence is revision-specific. Required hosted CI must validate this rebased head; broad qualification remains extracted into draft test(frontend): separate broad release qualification from PR checks #14757.

Before merge

• DCO-signed commits rebased onto current master; merge conflicts resolved.
• Functional, styling and ownership contracts documented; evidence archived and broad qualification extracted.
• Required CI passes on the current head.
• Maintainer approval/LGTM.

Latest conflict resolution

Rebased onto master a9ccfc740. Integrated the newly merged System Logs tab with the modernized inspection tabs and error dialog, retaining driver-log polling, refresh recovery, and task/URI/namespace isolation. The final rebased tree exactly matches an independently resolved merge. All 49 RuntimeNodeDetails tests, targeted ESLint, TypeScript, formatting, and whitespace checks pass. Earlier graph and browser evidence above remains revision-specific; fresh hosted CI must validate head 203619c37.

Latest CI repair

The deep-linked iteration regression now uses a minimal valid loop body rather than repeating unrelated evaluation and artifact subgraphs across eleven iterations. The complete original navigation sequence and assertions remain intact: reveal iteration 10, inspect its task details, close the panel, and inspect the enclosing loop while retaining the root graph. No production behavior or test timeout changed. The final regression passes with V8 coverage under Node 24.14.0; TypeScript, configured UI lint, formatting, and whitespace checks pass. Required hosted CI must validate the new head.

[google-oss-prow]

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

[github-actions]

Contributor Report for @jeffspahr

Metric	Value
Kubeflow org member	Yes
Issues opened in kubeflow/pipelines	350
Merged PRs in kubeflow/pipelines	289
GitHub account age	3470 days (created 2017-04-21)
PR comments in kubeflow/pipelines	1505