Skip to content

Instantly share code, notes, and snippets.

@jwmatthews

jwmatthews/pf-migration-comparison-report.html

Created May 28, 2026 17:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jwmatthews/2f339ebd440bce3c91fe3505a21552e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jwmatthews/2f339ebd440bce3c91fe3505a21552e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pf-migration-comparison-report.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PatternFly 5→6 Migration Comparison Report</title>
<style>
:root {
--bg: #0d1117;
--surface: #161b22;
--surface2: #1c2129;
--border: #30363d;
--text: #e6edf3;
--text-muted: #8b949e;
--accent: #58a6ff;
--green: #3fb950;
--red: #f85149;
--orange: #d29922;
--purple: #bc8cff;
--teal: #39d2c0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 1400px; margin: 0 auto; padding: 24px; }
h1, h2, h3, h4 { font-weight: 600; }
h1 { font-size: 2rem; margin-bottom: 8px; }
h2 { font-size: 1.5rem; margin-bottom: 16px; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
h3 { font-size: 1.15rem; margin-bottom: 10px; }
h4 { font-size: 1rem; margin-bottom: 8px; color: var(--text-muted); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.header { text-align: center; padding: 32px 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.header .subtitle { color: var(--text-muted); font-size: 1.1rem; }
.header .date { color: var(--text-muted); font-size: 0.85rem; margin-top: 8px; }
/* Verdict Banner */
.verdict-banner {
background: var(--surface);
border: 2px solid var(--green);
border-radius: 12px;
padding: 28px;
margin-bottom: 32px;
text-align: center;
}
.verdict-banner .winner-label { color: var(--green); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.verdict-banner .winner-name { font-size: 1.8rem; font-weight: 700; margin: 8px 0; }
.verdict-banner .winner-score { font-size: 3rem; font-weight: 800; color: var(--green); }
.score-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.score-card {
background: var(--surface2);
border-radius: 10px;
padding: 20px;
text-align: center;
border: 2px solid var(--border);
}
.score-card.winner { border-color: var(--green); }
.score-card.loser { border-color: var(--red); }
.score-card .branch-name { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; word-break: break-all; }
.score-card .score { font-size: 2.5rem; font-weight: 800; }
.score-card.winner .score { color: var(--green); }
.score-card.loser .score { color: var(--red); }
.score-card .max { font-size: 0.9rem; color: var(--text-muted); }
.verdict-reasons { text-align: left; margin-top: 20px; }
.verdict-reasons ul { list-style: none; padding: 0; }
.verdict-reasons li { padding: 6px 0; padding-left: 24px; position: relative; color: var(--text); }
.verdict-reasons li::before { content: '→'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
/* Table of Contents */
.toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px 28px;
margin-bottom: 32px;
}
.toc ol { padding-left: 20px; }
.toc li { padding: 4px 0; }
.toc li a { color: var(--accent); }
/* Card Grid */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
}
.card h3 { margin-bottom: 12px; font-size: 1rem; word-break: break-all; }
.card-metric { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.card-metric:last-child { border-bottom: none; }
.card-metric .label { color: var(--text-muted); }
.card-metric .value { font-weight: 600; }
.val-green { color: var(--green); }
.val-red { color: var(--red); }
.val-orange { color: var(--orange); }
/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.9rem; }
th, td { padding: 10px 12px; text-align: left; border: 1px solid var(--border); }
th { background: var(--surface2); color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
td { background: var(--surface); }
tr:hover td { background: var(--surface2); }
/* Badges */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-green { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.badge-red { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid rgba(248,81,73,0.3); }
.badge-orange { background: rgba(210,153,34,0.15); color: var(--orange); border: 1px solid rgba(210,153,34,0.3); }
.badge-purple { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid rgba(188,140,255,0.3); }
.badge-teal { background: rgba(57,210,192,0.15); color: var(--teal); border: 1px solid rgba(57,210,192,0.3); }
/* Bar Charts */
.bar-chart { margin: 16px 0; }
.bar-row { display: flex; align-items: center; margin-bottom: 10px; gap: 12px; }
.bar-label { width: 200px; font-size: 0.85rem; color: var(--text-muted); text-align: right; flex-shrink: 0; word-break: break-all; }
.bar-track { flex: 1; height: 28px; background: var(--surface2); border-radius: 6px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 0.8rem; font-weight: 700; min-width: 40px; transition: width 0.3s; }
.bar-fill.green { background: linear-gradient(90deg, rgba(63,185,80,0.3), rgba(63,185,80,0.5)); color: var(--green); }
.bar-fill.red { background: linear-gradient(90deg, rgba(248,81,73,0.3), rgba(248,81,73,0.5)); color: var(--red); }
.bar-fill.orange { background: linear-gradient(90deg, rgba(210,153,34,0.3), rgba(210,153,34,0.5)); color: var(--orange); }
.bar-fill.purple { background: linear-gradient(90deg, rgba(188,140,255,0.3), rgba(188,140,255,0.5)); color: var(--purple); }
.bar-value { width: 50px; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
/* Details/Collapsible */
details { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
details summary {
padding: 14px 20px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
details summary:hover { background: var(--surface2); border-radius: 10px; }
details summary::marker { color: var(--accent); }
details .detail-content { padding: 0 20px 20px; }
/* Code blocks */
pre {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
overflow-x: auto;
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
font-size: 0.8rem;
line-height: 1.5;
margin: 10px 0;
}
code {
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
font-size: 0.85rem;
background: var(--surface2);
padding: 1px 5px;
border-radius: 4px;
}
pre code { background: none; padding: 0; }
.code-added { color: var(--green); }
.code-removed { color: var(--red); }
/* Progress bar */
.progress-bar { width: 100%; height: 24px; background: var(--surface2); border-radius: 6px; overflow: hidden; display: flex; margin: 8px 0; }
.progress-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.progress-pass { background: rgba(63,185,80,0.4); color: var(--green); }
.progress-fail { background: rgba(248,81,73,0.4); color: var(--red); }
.progress-warn { background: rgba(210,153,34,0.4); color: var(--orange); }
/* Section spacing */
.section { margin-bottom: 48px; }
/* Footer */
.footer {
border-top: 1px solid var(--border);
padding: 24px 0;
margin-top: 48px;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
.footer a { margin: 0 12px; }
/* Responsive */
@media (max-width: 900px) {
.card-grid, .score-cards { grid-template-columns: 1fr; }
.bar-label { width: 120px; font-size: 0.75rem; }
.container { padding: 12px; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
}
/* Winner indicator in tables */
.winner-cell { background: rgba(63,185,80,0.08) !important; }
.loser-cell { background: rgba(248,81,73,0.05) !important; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>🔄 PatternFly 5 → 6 Migration Comparison</h1>
<div class="subtitle">quipucords-ui &mdash; Branch-by-Branch Analysis</div>
<div class="date">Generated 2026-05-28 · Base branch: <code>original_2.1.0</code></div>
</div>
<!-- ============================================================ -->
<!-- 1. VERDICT BANNER -->
<!-- ============================================================ -->
<div id="verdict" class="verdict-banner">
<div class="winner-label">🏆 Winner</div>
<div class="winner-name">semver/goose/052826-1545</div>
<div class="winner-score">91 / 100</div>
<div class="score-cards">
<div class="score-card loser">
<div class="branch-name">pf-codemods-052826-1721</div>
<div class="score">28</div>
<div class="max">/ 100</div>
</div>
<div class="score-card winner">
<div class="branch-name">semver/goose/052826-1545</div>
<div class="score">91</div>
<div class="max">/ 100</div>
</div>
</div>
<div class="verdict-reasons">
<h3 style="margin-bottom: 8px;">Key reasons</h3>
<ul>
<li><strong>Package upgrades:</strong> Only semver/goose updated package.json to PatternFly 6 (^6.4.x → resolves 6.5.x). Codemods left all packages at PF5 5.3.x.</li>
<li><strong>TypeScript:</strong> semver/goose has 0 TS errors; codemods has 44 TS errors against its own PF5 packages.</li>
<li><strong>Tests:</strong> semver/goose passes 265/265 tests, 249/249 snapshots. Codemods fails 18/35 test suites.</li>
<li><strong>Modal migration:</strong> semver/goose fully migrated all 9 modals to the new PF6 composable API. Codemods only moved imports to <code>/deprecated</code> (which doesn't even exist in PF6).</li>
<li><strong>Select migration:</strong> semver/goose fully rewrote 2 deprecated Select components to the new PF6 Select API. Codemods only renamed 2 trivial props.</li>
<li><strong>CSS/tokens:</strong> semver/goose updated 3 CSS files with pf-v5 → pf-v6 class and token changes. Codemods changed zero CSS files.</li>
<li><strong>pf-v5 references:</strong> semver/goose reduced from 94 to 1 (a comment). Codemods left all 94 untouched.</li>
</ul>
</div>
</div>
<!-- ============================================================ -->
<!-- 2. TABLE OF CONTENTS -->
<!-- ============================================================ -->
<div class="toc">
<h3>Table of Contents</h3>
<ol>
<li><a href="#verdict">Verdict &amp; Scores</a></li>
<li><a href="#overview">Branch Overview</a></li>
<li><a href="#error-chart">Build Error Comparison</a></li>
<li><a href="#scoring">Scoring Tables</a></li>
<li><a href="#detailed">Detailed Analysis</a>
<ol style="padding-left: 16px; font-size: 0.9em;">
<li><a href="#detail-packages">Package Upgrades</a></li>
<li><a href="#detail-modal">Modal Migration</a></li>
<li><a href="#detail-emptystate">EmptyState Migration</a></li>
<li><a href="#detail-select">Select Migration</a></li>
<li><a href="#detail-toolbar">Toolbar &amp; Layout</a></li>
<li><a href="#detail-button">Button Icon Migration</a></li>
<li><a href="#detail-text">Text → Content Migration</a></li>
<li><a href="#detail-css">CSS / Token Migration</a></li>
<li><a href="#detail-tests">Test &amp; Snapshot Updates</a></li>
<li><a href="#detail-scope">Scope Discipline</a></li>
</ol>
</li>
<li><a href="#build">Build Results</a></li>
<li><a href="#risk">Risk &amp; Maintainability</a></li>
<li><a href="#final">Final Totals &amp; Recommendation</a></li>
</ol>
</div>
<!-- ============================================================ -->
<!-- 3. BRANCH OVERVIEW -->
<!-- ============================================================ -->
<div id="overview" class="section">
<h2>3. Branch Overview</h2>
<div class="card-grid">
<!-- CODEMODS card -->
<div class="card" style="border-color: var(--red);">
<h3 style="color: var(--red);">pf-codemods-052826-1721</h3>
<div class="card-metric"><span class="label">Commits</span><span class="value">1</span></div>
<div class="card-metric"><span class="label">Files changed</span><span class="value">25</span></div>
<div class="card-metric"><span class="label">Insertions</span><span class="value val-green">+1,499</span></div>
<div class="card-metric"><span class="label">Deletions</span><span class="value val-red">−217</span></div>
<div class="card-metric"><span class="label">Source changes (excl artifacts)</span><span class="value">23 files, +199/−217</span></div>
<div class="card-metric"><span class="label">package.json updated</span><span class="value val-red">❌ No</span></div>
<div class="card-metric"><span class="label">CSS files updated</span><span class="value val-red">❌ 0 files</span></div>
<div class="card-metric"><span class="label">Tests/snapshots updated</span><span class="value val-red">❌ 0 files</span></div>
<div class="card-metric"><span class="label">TypeScript errors</span><span class="value val-red">44</span></div>
<div class="card-metric"><span class="label">Build result</span><span class="value val-orange">⚠️ Webpack OK (TS errors ignored)</span></div>
<div class="card-metric"><span class="label">Test result</span><span class="value val-red">18/35 suites FAILED</span></div>
<div class="card-metric"><span class="label">pf-v5 refs (source)</span><span class="value val-red">15 (unchanged)</span></div>
<div class="card-metric"><span class="label">pf-v5 refs (snapshots)</span><span class="value val-red">79 (unchanged)</span></div>
<div class="card-metric"><span class="label">Deprecated imports</span><span class="value val-red">12 (+9 new)</span></div>
<div class="card-metric"><span class="label">Placeholder tokens</span><span class="value val-red">4 (t_temp_dev_tbd)</span></div>
<div class="card-metric"><span class="label">data-codemods markers</span><span class="value val-orange">2</span></div>
</div>
<!-- SEMVER card -->
<div class="card" style="border-color: var(--green);">
<h3 style="color: var(--green);">semver/goose/052826-1545</h3>
<div class="card-metric"><span class="label">Commits</span><span class="value">2</span></div>
<div class="card-metric"><span class="label">Files changed</span><span class="value">59</span></div>
<div class="card-metric"><span class="label">Insertions</span><span class="value val-green">+1,195</span></div>
<div class="card-metric"><span class="label">Deletions</span><span class="value val-red">−1,001</span></div>
<div class="card-metric"><span class="label">Source changes (excl artifacts)</span><span class="value">59 files, +1195/−1001</span></div>
<div class="card-metric"><span class="label">package.json updated</span><span class="value val-green">✅ PF5 → PF6</span></div>
<div class="card-metric"><span class="label">CSS files updated</span><span class="value val-green">✅ 3 files</span></div>
<div class="card-metric"><span class="label">Tests/snapshots updated</span><span class="value val-green">✅ 29 files</span></div>
<div class="card-metric"><span class="label">TypeScript errors</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">Build result</span><span class="value val-green">✅ Clean build</span></div>
<div class="card-metric"><span class="label">Test result</span><span class="value val-green">35/35 suites PASS, 265/265 tests</span></div>
<div class="card-metric"><span class="label">pf-v5 refs (source)</span><span class="value val-green">1 (comment only)</span></div>
<div class="card-metric"><span class="label">pf-v5 refs (snapshots)</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">Deprecated imports</span><span class="value val-green">0 (all removed)</span></div>
<div class="card-metric"><span class="label">Placeholder tokens</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">data-codemods markers</span><span class="value val-green">0</span></div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- 4. BUILD ERROR COMPARISON -->
<!-- ============================================================ -->
<div id="error-chart" class="section">
<h2>4. Build Error Comparison</h2>
<h3>TypeScript Errors (<code>tsc --noEmit</code>)</h3>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">pf-codemods</div>
<div class="bar-track"><div class="bar-fill red" style="width: 100%;">44 errors</div></div>
<div class="bar-value val-red">44</div>
</div>
<div class="bar-row">
<div class="bar-label">semver/goose</div>
<div class="bar-track"><div class="bar-fill green" style="width: 3%;">0</div></div>
<div class="bar-value val-green">0</div>
</div>
</div>
<h3>Test Suite Failures</h3>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">pf-codemods</div>
<div class="bar-track"><div class="bar-fill red" style="width: 51.4%;">18 failed</div></div>
<div class="bar-value val-red">18/35</div>
</div>
<div class="bar-row">
<div class="bar-label">semver/goose</div>
<div class="bar-track"><div class="bar-fill green" style="width: 100%;">35 passed</div></div>
<div class="bar-value val-green">35/35</div>
</div>
</div>
<h3>Remaining pf-v5 References (Source + Snapshots)</h3>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">original (baseline)</div>
<div class="bar-track"><div class="bar-fill purple" style="width: 100%;">94</div></div>
<div class="bar-value" style="color: var(--purple);">94</div>
</div>
<div class="bar-row">
<div class="bar-label">pf-codemods</div>
<div class="bar-track"><div class="bar-fill red" style="width: 100%;">94 (no change)</div></div>
<div class="bar-value val-red">94</div>
</div>
<div class="bar-row">
<div class="bar-label">semver/goose</div>
<div class="bar-track"><div class="bar-fill green" style="width: 3%;">1</div></div>
<div class="bar-value val-green">1</div>
</div>
</div>
<h3>Deprecated Imports (<code>@patternfly/react-core/deprecated</code>)</h3>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">original (baseline)</div>
<div class="bar-track"><div class="bar-fill purple" style="width: 25%;">3</div></div>
<div class="bar-value" style="color: var(--purple);">3</div>
</div>
<div class="bar-row">
<div class="bar-label">pf-codemods</div>
<div class="bar-track"><div class="bar-fill red" style="width: 100%;">12 (+9 new!)</div></div>
<div class="bar-value val-red">12</div>
</div>
<div class="bar-row">
<div class="bar-label">semver/goose</div>
<div class="bar-track"><div class="bar-fill green" style="width: 3%;">0</div></div>
<div class="bar-value val-green">0</div>
</div>
</div>
<h3>Lint Errors (non-prettier, beyond pre-existing 42)</h3>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">pf-codemods</div>
<div class="bar-track"><div class="bar-fill red" style="width: 100%;">+25 new</div></div>
<div class="bar-value val-red">67</div>
</div>
<div class="bar-row">
<div class="bar-label">semver/goose</div>
<div class="bar-track"><div class="bar-fill green" style="width: 3%;">+0 new</div></div>
<div class="bar-value val-green">42</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- 5. SCORING TABLES -->
<!-- ============================================================ -->
<div id="scoring" class="section">
<h2>5. Scoring Summary</h2>
<table>
<thead>
<tr>
<th>Category</th>
<th>Max</th>
<th>pf-codemods</th>
<th>semver/goose</th>
<th>Winner</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>1. Migration Completeness</strong></td>
<td><strong>30</strong></td>
<td class="loser-cell"><strong>7</strong></td>
<td class="winner-cell"><strong>27</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Package upgrades (5)</td>
<td>5</td>
<td class="loser-cell">0</td>
<td class="winner-cell">5</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Component API changes (10)</td>
<td>10</td>
<td class="loser-cell">3</td>
<td class="winner-cell">9</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">CSS / token migration (5)</td>
<td>5</td>
<td class="loser-cell">0</td>
<td class="winner-cell">5</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Deprecated API removal (5)</td>
<td>5</td>
<td class="loser-cell">0</td>
<td class="winner-cell">4</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Test / snapshot alignment (5)</td>
<td>5</td>
<td class="loser-cell">0</td>
<td class="winner-cell">4</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td><strong>2. Functional Preservation</strong></td>
<td><strong>20</strong></td>
<td class="loser-cell"><strong>12</strong></td>
<td class="winner-cell"><strong>18</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Same user-facing workflows (10)</td>
<td>10</td>
<td class="loser-cell">6</td>
<td class="winner-cell">9</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">No accidental behavior changes (10)</td>
<td>10</td>
<td>6</td>
<td class="winner-cell">9</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td><strong>3. Scope Discipline</strong></td>
<td><strong>15</strong></td>
<td><strong>9</strong></td>
<td class="winner-cell"><strong>12</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Minimal unnecessary changes (8)</td>
<td>8</td>
<td>5</td>
<td class="winner-cell">6</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">No unrelated refactors (7)</td>
<td>7</td>
<td>4</td>
<td class="winner-cell">6</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td><strong>4. PF6 Correctness</strong></td>
<td><strong>20</strong></td>
<td class="loser-cell"><strong>4</strong></td>
<td class="winner-cell"><strong>18</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Correct replacement components (7)</td>
<td>7</td>
<td class="loser-cell">1</td>
<td class="winner-cell">6</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Props applied correctly (7)</td>
<td>7</td>
<td class="loser-cell">2</td>
<td class="winner-cell">6</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Imports updated correctly (6)</td>
<td>6</td>
<td class="loser-cell">1</td>
<td class="winner-cell">6</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td><strong>5. Build / Compile / Test</strong></td>
<td><strong>10</strong></td>
<td class="loser-cell"><strong>1</strong></td>
<td class="winner-cell"><strong>10</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">TypeScript compiles (4)</td>
<td>4</td>
<td class="loser-cell">0</td>
<td class="winner-cell">4</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Build succeeds (3)</td>
<td>3</td>
<td>1</td>
<td class="winner-cell">3</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td style="padding-left: 28px; color: var(--text-muted);">Tests pass (3)</td>
<td>3</td>
<td class="loser-cell">0</td>
<td class="winner-cell">3</td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
<tr>
<td><strong>6. Risk &amp; Maintainability</strong></td>
<td><strong>5</strong></td>
<td class="loser-cell"><strong>1</strong></td>
<td class="winner-cell"><strong>4</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
</tbody>
<tfoot>
<tr style="font-size: 1.1rem;">
<td><strong>TOTAL</strong></td>
<td><strong>100</strong></td>
<td class="loser-cell"><strong style="color: var(--red);">28</strong></td>
<td class="winner-cell"><strong style="color: var(--green);">91</strong></td>
<td><span class="badge badge-green">semver/goose</span></td>
</tr>
</tfoot>
</table>
<h3>Scoring Rationale</h3>
<table>
<thead><tr><th style="width:30%">Area</th><th>pf-codemods Rationale</th><th>semver/goose Rationale</th></tr></thead>
<tbody>
<tr>
<td>Package upgrades</td>
<td class="loser-cell"><strong>0/5</strong> — Did not change package.json at all. All PF packages remain at 5.3.x. This is a fundamental prerequisite that was entirely missed.</td>
<td class="winner-cell"><strong>5/5</strong> — Updated all 5 @patternfly/* packages to ^6.4.x. Lock file resolves to 6.5.x. Both package.json and package-lock.json updated correctly.</td>
</tr>
<tr>
<td>Component API changes</td>
<td class="loser-cell"><strong>3/10</strong> — Handled EmptyState flattening (with antipattern), Button icon prop, Toolbar renames, Text→Content, Masthead restructure, splitButton. But missed Modal migration (9 files), Select rewrite (2 files), InputGroup, PageSection variant, theme class updates.</td>
<td class="winner-cell"><strong>9/10</strong> — All of the above plus: Modal fully migrated to composable API (9 files), Select fully rewritten from deprecated (2 files), InputGroupItem wrapping, correct PageSection variant="default", theme class pf-v5→v6, PopperProps→PopperOptions, ouiaId, DropdownList wrappers. Minor: SelectOptionProps still imported from deprecated in FilterToolbar (−1).</td>
</tr>
<tr>
<td>CSS / token migration</td>
<td class="loser-cell"><strong>0/5</strong> — Zero CSS files changed. All pf-v5 CSS classes, variables, and tokens remain unchanged.</td>
<td class="winner-cell"><strong>5/5</strong> — Updated 3 CSS files: viewLayoutToolbar.css (spacer token + avatar class), showSourceConnectionsModal.css (table class + variable), select-overrides.css (replaced obsolete rule with explanatory comment).</td>
</tr>
<tr>
<td>Deprecated API removal</td>
<td class="loser-cell"><strong>0/5</strong> — Increased deprecated imports from 3→12 by moving Modal to /deprecated. Left 4 t_temp_dev_tbd placeholder tokens. Left data-codemods attributes.</td>
<td class="winner-cell"><strong>4/5</strong> — Removed all deprecated imports (12→0). Resolved all token placeholders. No codemod artifacts. Minor: SelectOptionProps in FilterToolbar moved from /deprecated to /core which may need adjustment (−1).</td>
</tr>
<tr>
<td>Test/snapshot alignment</td>
<td class="loser-cell"><strong>0/5</strong> — Zero test or snapshot files updated. 18/35 test suites fail because snapshots don't match new component output.</td>
<td class="winner-cell"><strong>4/5</strong> — Updated 29 test/snapshot files. All 35 suites pass, 265 tests pass, 249 snapshots match. Minor: 107 prettier formatting errors in modified files (−1).</td>
</tr>
<tr>
<td>Functional preservation</td>
<td class="loser-cell"><strong>12/20</strong> — Code transformations don't change behavior at source level, but because they fail against PF5 packages (no upgrade) and would produce broken behavior if PF6 packages were added (titleText antipattern, missing Modal structure), actual rendered behavior is compromised. PageSection hasBodyWrapper is wrong migration (−2). Lost danger color on StateError (−2).</td>
<td class="winner-cell"><strong>18/20</strong> — All user-facing workflows preserved. Modal structure correctly uses new composable pattern maintaining same visual output. EmptyState uses correct titleText string + headingLevel + status props. Minor: subtle spacing differences possible from rowGap vs spaceItems and variant changes (−2).</td>
</tr>
<tr>
<td>Scope discipline</td>
<td><strong>9/15</strong> — Small diff (23 source files), focused on PF migration. However, included 2 artifact files (report HTML, cache file) unrelated to migration (+1299 lines). Formatting inconsistencies (tab/space mixing) indicate sloppy tool output. No unrelated refactors though.</td>
<td class="winner-cell"><strong>12/15</strong> — Larger diff (59 files) but all changes are migration-related: source code, tests, snapshots, CSS, package.json. Some test changes use baseElement instead of asFragment (minor test approach change). 107 prettier errors suggest some formatting wasn't auto-fixed. No feature additions or unrelated refactors (−3 for formatting issues).</td>
</tr>
<tr>
<td>PF6 correctness</td>
<td class="loser-cell"><strong>4/20</strong> — Several incorrect migrations: (1) titleText={&lt;Title&gt;} antipattern in 3 files instead of string, (2) MastheadLogo doesn't exist in PF5 packages, (3) Modal in /deprecated doesn't exist in PF6, (4) Content doesn't exist in PF5, (5) action-group-plain/alignEnd don't exist in PF5. The code was written for PF6 API but runs against PF5 packages — nothing works correctly.</td>
<td class="winner-cell"><strong>18/20</strong> — Correct PF6 API usage throughout: composable Modal, new Select API, proper EmptyState props, correct token names, proper CSS classes, correct prop renames. Code compiles and runs against actual PF6 packages. Minor: SelectOptionProps import path may need adjustment (−2).</td>
</tr>
<tr>
<td>Build / compile / test</td>
<td class="loser-cell"><strong>1/10</strong> — 44 TypeScript errors. Webpack bundles despite errors (gets 1 point for producing output). 18/35 test suites fail. The branch is not in a deployable state.</td>
<td class="winner-cell"><strong>10/10</strong> — 0 TypeScript errors. Clean webpack build. 35/35 test suites pass, 265/265 tests pass, 249/249 snapshots pass. Fully deployable.</td>
</tr>
<tr>
<td>Risk &amp; maintainability</td>
<td class="loser-cell"><strong>1/5</strong> — High risk: (1) PF5 packages mean none of the PF6 code works, (2) 4 placeholder tokens will crash at runtime, (3) 9 Modal files use nonexistent deprecated path, (4) titleText antipattern will render incorrectly, (5) massive remaining work required. Gets 1 point for having some correct migration patterns that could be built upon.</td>
<td class="winner-cell"><strong>4/5</strong> — Low risk: (1) All PF6 packages correctly installed, (2) zero placeholder tokens, (3) all imports valid, (4) clean test suite validates correctness, (5) 107 prettier errors are auto-fixable. Minor risk: SelectOptionProps path, possible spacing subtleties (−1).</td>
</tr>
</tbody>
</table>
</div>
<!-- ============================================================ -->
<!-- 6. DETAILED ANALYSIS -->
<!-- ============================================================ -->
<div id="detailed" class="section">
<h2>6. Detailed Analysis</h2>
<!-- 6.1 Package Upgrades -->
<details id="detail-packages" open>
<summary>📦 Package Upgrades <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>All <code>@patternfly/*</code> packages must be upgraded from v5 to v6. This is the foundational step — without it, no PF6 API changes will compile or work at runtime.</p>
<h4>Before (original_2.1.0)</h4>
<pre><code>"@patternfly/patternfly": "5.3.1",
"@patternfly/react-core": "5.3.4",
"@patternfly/react-icons": "5.3.2",
"@patternfly/react-styles": "5.3.1",
"@patternfly/react-table": "5.3.4",</code></pre>
<h4>After (PF6 target)</h4>
<pre><code>"@patternfly/patternfly": "^6.4.0",
"@patternfly/react-core": "^6.4.1",
"@patternfly/react-icons": "^6.4.0",
"@patternfly/react-styles": "^6.4.0",
"@patternfly/react-table": "^6.4.1",</code></pre>
<table>
<thead><tr><th>Package</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>@patternfly/patternfly</td><td class="loser-cell"><span class="val-red">5.3.1 (unchanged)</span></td><td class="winner-cell"><span class="val-green">^6.4.0 → 6.5.2</span></td></tr>
<tr><td>@patternfly/react-core</td><td class="loser-cell"><span class="val-red">5.3.4 (unchanged)</span></td><td class="winner-cell"><span class="val-green">^6.4.1 → 6.5.1</span></td></tr>
<tr><td>@patternfly/react-icons</td><td class="loser-cell"><span class="val-red">5.3.2 (unchanged)</span></td><td class="winner-cell"><span class="val-green">^6.4.0 → 6.5.1</span></td></tr>
<tr><td>@patternfly/react-styles</td><td class="loser-cell"><span class="val-red">5.3.1 (unchanged)</span></td><td class="winner-cell"><span class="val-green">^6.4.0 → 6.5.1</span></td></tr>
<tr><td>@patternfly/react-table</td><td class="loser-cell"><span class="val-red">5.3.4 (unchanged)</span></td><td class="winner-cell"><span class="val-green">^6.4.1 → 6.5.1</span></td></tr>
<tr><td>@patternfly/react-tokens</td><td class="loser-cell"><span class="val-red">5.4.1 (unchanged)</span></td><td class="winner-cell"><span class="val-green">→ 6.5.1 (transitive)</span></td></tr>
<tr><td>package-lock.json</td><td class="loser-cell"><span class="val-red">Not updated</span></td><td class="winner-cell"><span class="val-green">Updated (102 lines)</span></td></tr>
</tbody>
</table>
<p><strong>Impact:</strong> The codemods branch applied PF6 code transformations but left PF5 packages installed. This creates a fundamentally broken state — the code references APIs, components, and tokens that don't exist in the installed package versions. Every PF6-specific change in the codemods branch produces a TypeScript error.</p>
</div>
</details>
<!-- 6.2 Modal Migration -->
<details id="detail-modal">
<summary>🪟 Modal Migration (9 files) <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>The PF5 <code>Modal</code> component with <code>title</code>, <code>actions</code>, and <code>variant</code> props was replaced in PF6 with a composable API using <code>Modal</code> + <code>ModalHeader</code> + <code>ModalBody</code> + <code>ModalFooter</code> as children. The old Modal was initially moved to <code>@patternfly/react-core/deprecated</code> but has since been <strong>fully removed</strong> from PF6.</p>
<h4>pf-codemods approach</h4>
<pre><code class="code-removed">// Moved imports to /deprecated (which doesn't exist in PF6!)
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
// Kept old API — title prop, actions prop unchanged
&lt;Modal title={...} variant={ModalVariant.small} actions={[...]} isOpen={isOpen}&gt;
{children}
&lt;/Modal&gt;</code></pre>
<h4>semver/goose approach</h4>
<pre><code class="code-added">// Imports from main @patternfly/react-core
import { Modal, ModalHeader, ModalBody, ModalFooter, ModalVariant } from '@patternfly/react-core';
// New composable API
&lt;Modal variant={ModalVariant.small} isOpen={isOpen} onClose={onClose}&gt;
&lt;ModalHeader title={...} /&gt;
&lt;ModalBody&gt;
{children}
&lt;/ModalBody&gt;
{actions && &lt;ModalFooter&gt;{actions}&lt;/ModalFooter&gt;}
&lt;/Modal&gt;</code></pre>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>addCredentialModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ ModalHeader + ModalBody</td></tr>
<tr><td>viewCredentialsList.tsx (2 modals)</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ Full restructure both modals</td></tr>
<tr><td>showScansModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ ModalHeader + ModalBody + ModalFooter</td></tr>
<tr><td>showAggregateReportModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ Full restructure + CSS class update</td></tr>
<tr><td>viewScansList.tsx (2 modals)</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ Full restructure both modals</td></tr>
<tr><td>addSourceModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ ModalHeader + ModalBody</td></tr>
<tr><td>addSourcesScanModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ ModalHeader + ModalBody</td></tr>
<tr><td>showSourceConnectionsModal.tsx</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ ModalHeader + ModalFooter</td></tr>
<tr><td>viewSourcesList.tsx (2 modals)</td><td class="loser-cell">→ /deprecated</td><td class="winner-cell">✅ Full restructure both modals</td></tr>
</tbody>
</table>
<p><strong>Critical issue:</strong> The codemods approach of moving Modal to <code>@patternfly/react-core/deprecated</code> is doubly broken: (1) PF6 has removed Modal from the deprecated path entirely, and (2) the branch doesn't even have PF6 packages installed. All 9 modal files produce <code>TS2305: Module has no exported member 'Modal'</code> errors.</p>
</div>
</details>
<!-- 6.3 EmptyState -->
<details id="detail-emptystate">
<summary>📭 EmptyState Migration (7 files) <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>PF6 flattened the EmptyState component structure. <code>EmptyStateHeader</code> and <code>EmptyStateIcon</code> are removed as sub-components. Instead, <code>titleText</code>, <code>headingLevel</code>, <code>icon</code>, and <code>status</code> are promoted to props on <code>&lt;EmptyState&gt;</code> directly.</p>
<h4>pf-codemods approach (antipattern)</h4>
<pre><code class="code-removed">// Wraps &lt;Title&gt; inside titleText — INCORRECT for PF6
&lt;EmptyState
titleText={&lt;Title headingLevel="h2" size="lg"&gt;{title}&lt;/Title&gt;}
icon={CubesIcon}
variant={EmptyStateVariant.sm}
&gt;</code></pre>
<h4>semver/goose approach (correct)</h4>
<pre><code class="code-added">// Uses titleText as string, headingLevel as separate prop — CORRECT
&lt;EmptyState
titleText={title}
headingLevel="h2"
icon={CubesIcon}
variant={EmptyStateVariant.sm}
&gt;</code></pre>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>notFound.tsx</td><td>✅ Flattened (clean string)</td><td class="winner-cell">✅ Flattened (clean string)</td></tr>
<tr><td>errorMessage.tsx</td><td class="loser-cell">⚠️ titleText={&lt;Title&gt;...&lt;/Title&gt;}</td><td class="winner-cell">✅ titleText={string} + headingLevel</td></tr>
<tr><td>NoDataEmptyState.tsx</td><td class="loser-cell">⚠️ titleText={&lt;Title&gt;...&lt;/Title&gt;}</td><td class="winner-cell">✅ titleText={title} + headingLevel</td></tr>
<tr><td>StateError.tsx</td><td class="loser-cell">⚠️ titleText={&lt;Title&gt;...&lt;/Title&gt;} + lost danger color</td><td class="winner-cell">✅ titleText="string" + headingLevel + status="danger"</td></tr>
<tr><td>viewCredentialsList.tsx</td><td>✅ Flattened (clean)</td><td class="winner-cell">✅ Flattened (clean)</td></tr>
<tr><td>viewScansList.tsx</td><td>✅ Flattened (clean)</td><td class="winner-cell">✅ Flattened (clean)</td></tr>
<tr><td>viewSourcesList.tsx</td><td>✅ Flattened (clean)</td><td class="winner-cell">✅ Flattened (clean)</td></tr>
</tbody>
</table>
<p><strong>Key difference:</strong> In 3 files, codemods wraps the existing <code>&lt;Title&gt;</code> component inside the <code>titleText</code> prop, creating a <code>titleText={&lt;Title headingLevel="h2"&gt;{text}&lt;/Title&gt;}</code> antipattern. PF6's <code>titleText</code> expects a string or ReactNode rendered inside PF6's own heading — embedding a <code>&lt;Title&gt;</code> inside it produces double-heading nesting. semver/goose correctly uses <code>titleText</code> as a string and adds <code>headingLevel</code> as a separate prop.</p>
<p>Additionally, in <code>StateError.tsx</code>, codemods lost the danger color entirely (removed the token import but added no replacement). semver/goose correctly uses <code>status="danger"</code> to preserve the visual danger styling.</p>
</div>
</details>
<!-- 6.4 Select Migration -->
<details id="detail-select">
<summary>📋 Select Migration (2 files) <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>The PF5 deprecated <code>Select</code> component (imported from <code>@patternfly/react-core/deprecated</code>) was fully removed in PF6. The new PF6 Select uses a composable API with <code>Select</code>, <code>SelectList</code>, <code>SelectOption</code>, <code>MenuToggle</code>, and explicit toggle render functions.</p>
<h4>pf-codemods approach</h4>
<pre><code class="code-removed">// Only renamed 2 trivial props, left deprecated Select completely untouched
// chips → labels, deleteChip → deleteLabel
// Still imports Select, SelectOption, SelectOptionObject from /deprecated</code></pre>
<h4>semver/goose approach (MultiselectFilterControl.tsx example)</h4>
<pre><code class="code-added">// Full rewrite from deprecated to new API:
import { Select, SelectList, SelectOption, MenuToggle,
TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
// Explicit toggle render function
toggle={(toggleRef) =&gt; (
&lt;MenuToggle ref={toggleRef} onClick={...} isExpanded={isOpen}&gt;
{selections.length &gt; 0 ? `${selections.length} selected` : 'Select...'}
&lt;/MenuToggle&gt;
)}
// SelectList wrapper, hasCheckbox on individual options
&lt;SelectList&gt;
{options.map(opt =&gt; (
&lt;SelectOption key={opt} value={opt} hasCheckbox isSelected={...}&gt;
{opt}
&lt;/SelectOption&gt;
))}
&lt;/SelectList&gt;</code></pre>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>MultiselectFilterControl.tsx</td><td class="loser-cell">2 prop renames only<br/>(chips→labels, deleteChip→deleteLabel)</td><td class="winner-cell">✅ Full rewrite: deprecated Select → new Select API with MenuToggle, SelectList, TextInputGroup</td></tr>
<tr><td>SelectFilterControl.tsx</td><td class="loser-cell">2 prop renames only</td><td class="winner-cell">✅ Full rewrite: deprecated Select → new Select API with MenuToggle, SelectList, isScrollable prop</td></tr>
</tbody>
</table>
<p><strong>Scale of difference:</strong> The codemods branch changed 4 lines per file (2 prop renames). The semver/goose branch rewrote 60-90+ lines per file with completely new component structure, state management, and rendering patterns. This is one of the most labor-intensive parts of the PF5→PF6 migration.</p>
</div>
</details>
<!-- 6.5 Toolbar & Layout -->
<details id="detail-toolbar">
<summary>🔧 Toolbar, Layout &amp; Navigation <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>Multiple prop renames and structural changes across Toolbar, Page, Masthead, and Nav components.</p>
<table>
<thead><tr><th>Change</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>ToolbarGroup variant: icon-button-group → action-group-plain</td><td>✅</td><td>✅</td></tr>
<tr><td>ToolbarGroup align: alignRight → alignEnd</td><td>✅</td><td>✅</td></tr>
<tr><td>ToolbarItem spacer → gap</td><td>✅</td><td>✅</td></tr>
<tr><td>ToolbarFilter chips → labels, deleteChip → deleteLabel</td><td>✅</td><td>✅</td></tr>
<tr><td>ToolbarToggleGroup spaceItems removal</td><td>✅ (deleted only)</td><td class="winner-cell">✅ (replaced with rowGap)</td></tr>
<tr><td>Page header → masthead prop</td><td>✅</td><td>✅</td></tr>
<tr><td>Nav theme="dark" removed</td><td>✅</td><td>✅</td></tr>
<tr><td>PageSidebar theme="dark" removed</td><td>✅</td><td>✅</td></tr>
<tr><td>MastheadBrand + MastheadLogo</td><td>✅ (with data-codemods)</td><td>✅ (clean)</td></tr>
<tr><td>PageSection variant="light" migration</td><td class="loser-cell">⚠️ hasBodyWrapper={false} (wrong)</td><td class="winner-cell">✅ variant="default" (correct)</td></tr>
<tr><td>pf-v5-theme-dark → pf-v6-theme-dark</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅</td></tr>
<tr><td>MenuToggle children → icon prop</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅ (3 instances)</td></tr>
<tr><td>DropdownList wrapper</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅ (3 dropdowns)</td></tr>
<tr><td>data-ouia-component-id → ouiaId</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅ (3 instances)</td></tr>
<tr><td>Icon wrapper removal</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅</td></tr>
<tr><td>pf-v5-c-avatar → pf-v6-c-avatar</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅</td></tr>
<tr><td>PopperProps → PopperOptions (actionMenu)</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅</td></tr>
<tr><td>paginationToolbarItemProps alignRight → alignEnd</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅</td></tr>
<tr><td>splitButtonOptions → splitButtonItems</td><td>✅</td><td>✅</td></tr>
</tbody>
</table>
<p><strong>PageSection note:</strong> The codemods branch replaced <code>variant="light"</code> with <code>hasBodyWrapper={false}</code>, which is semantically wrong — <code>hasBodyWrapper</code> controls whether the section wraps its children in a body element, not the visual variant. PF6's correct migration is <code>variant="default"</code>.</p>
</div>
</details>
<!-- 6.6 Button Icon -->
<details id="detail-button">
<summary>🔘 Button Icon Migration <span class="badge badge-teal">Tie (slight semver/goose edge)</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>Button icon children should be moved to the <code>icon</code> prop. Icon-only buttons should use self-closing syntax.</p>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>typeaheadCheckboxes.tsx</td><td>✅ icon prop</td><td>✅ icon prop</td></tr>
<tr><td>viewLayout.tsx (BarsIcon)</td><td>✅ icon prop</td><td>✅ icon prop</td></tr>
<tr><td>SearchFilterControl.tsx</td><td>✅ icon prop (whitespace artifact)</td><td class="winner-cell">✅ icon prop (clean self-closing)</td></tr>
<tr><td>ToolbarBulkSelector.tsx (collapse button)</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅ icon prop</td></tr>
<tr><td>viewSourcesList.tsx (ContextIcon buttons)</td><td class="loser-cell">❌ Not done</td><td class="winner-cell">✅ icon prop</td></tr>
</tbody>
</table>
</div>
</details>
<!-- 6.7 Text → Content -->
<details id="detail-text">
<summary>📝 Text → Content Migration <span class="badge badge-teal">Tie</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p><code>TextContent</code>, <code>TextList</code>, <code>TextListItem</code> are replaced by the unified <code>Content</code> component with <code>component</code> prop for semantic variants.</p>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>aboutModal.tsx</td><td>✅ TextContent→Content, TextList→Content component="dl", TextListItem→Content component="dt"/"dd"</td><td>✅ Identical changes</td></tr>
</tbody>
</table>
<p>Both branches make the same correct changes. Minor formatting difference: codemods has a trailing comma artifact in the import.</p>
</div>
</details>
<!-- 6.8 CSS / Token Migration -->
<details id="detail-css">
<summary>🎨 CSS / Token Migration <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>What changed in PF6</h4>
<p>All CSS class names changed from <code>pf-v5-*</code> to <code>pf-v6-*</code>. CSS custom properties changed from <code>--pf-v5-*</code> to <code>--pf-v6-*</code> (and some to new <code>--pf-t--global--*</code> token system). React tokens changed from <code>global_*</code> to <code>t_global_*</code> prefixes.</p>
<h4>CSS files changed</h4>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr>
<td>viewLayoutToolbar.css</td>
<td class="loser-cell">❌ No changes</td>
<td class="winner-cell">✅ <code>--pf-v5-global--spacer--sm</code> → <code>--pf-t--global--spacer--200</code><br/>✅ <code>.pf-v5-c-avatar</code> → <code>.pf-v6-c-avatar</code></td>
</tr>
<tr>
<td>showSourceConnectionsModal.css</td>
<td class="loser-cell">❌ No changes</td>
<td class="winner-cell">✅ <code>.pf-v5-c-table</code> → <code>.pf-v6-c-table</code><br/>✅ <code>--pf-v5-c-table__expandable-row-content</code> → <code>--pf-v6-c-table__expandable-row-content</code></td>
</tr>
<tr>
<td>select-overrides.css</td>
<td class="loser-cell">❌ No changes</td>
<td class="winner-cell">✅ Replaced <code>.pf-v5-c-select</code> rule with explanatory comment that PF6 rebuilt Select</td>
</tr>
</tbody>
</table>
<h4>React token changes</h4>
<table>
<thead><tr><th>File</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr>
<td>contextIcon.tsx</td>
<td class="loser-cell">❌ Used <code>t_temp_dev_tbd</code> placeholder (4 tokens) — will not compile</td>
<td class="winner-cell">✅ Mapped to correct PF6 tokens:<br/><code>t_global_text_color_regular</code> (gray)<br/><code>t_global_color_status_success_default</code> (green)<br/><code>t_global_color_status_warning_default</code> (yellow)<br/><code>t_global_color_status_danger_default</code> (red)</td>
</tr>
<tr>
<td>StateError.tsx</td>
<td class="loser-cell">❌ Removed <code>global_danger_color_200</code> with no replacement — lost danger styling</td>
<td class="winner-cell">✅ Used <code>status="danger"</code> prop — PF6's semantic replacement</td>
</tr>
</tbody>
</table>
<h4>CSS class references in source code</h4>
<table>
<thead><tr><th>Reference</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td><code>pf-v5-theme-dark</code> (viewLayoutToolbar.tsx)</td><td class="loser-cell">❌ Still pf-v5</td><td class="winner-cell">✅ pf-v6-theme-dark</td></tr>
<tr><td><code>pf-v5-c-avatar</code> (viewLayoutToolbar.tsx)</td><td class="loser-cell">❌ Still pf-v5</td><td class="winner-cell">✅ pf-v6-c-avatar</td></tr>
<tr><td><code>pf-v5-u-mb-lg</code> (showAggregateReportModal.tsx)</td><td class="loser-cell">❌ Still pf-v5</td><td class="winner-cell">✅ pf-v6-u-mb-lg</td></tr>
<tr><td><code>pf-v5-c-form__group</code> (test file)</td><td class="loser-cell">❌ Still pf-v5</td><td class="winner-cell">✅ Updated in test</td></tr>
<tr><td><code>pf-v5-c-button</code> (ExtendedButton test)</td><td class="loser-cell">❌ Still pf-v5</td><td class="winner-cell">✅ Updated in test</td></tr>
</tbody>
</table>
</div>
</details>
<!-- 6.9 Tests & Snapshots -->
<details id="detail-tests">
<summary>🧪 Test &amp; Snapshot Updates <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>Why this matters</h4>
<p>When PatternFly components change their rendered output (CSS classes, DOM structure, component names), existing test snapshots become stale. Updating snapshots is a necessary part of the migration to confirm the new rendering matches expectations.</p>
<table>
<thead><tr><th>Metric</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>Test files changed</td><td class="loser-cell">0</td><td class="winner-cell">10</td></tr>
<tr><td>Snapshot files changed</td><td class="loser-cell">0</td><td class="winner-cell">19</td></tr>
<tr><td>Total test+snapshot files</td><td class="loser-cell">0</td><td class="winner-cell">29</td></tr>
<tr><td>Test suites passing</td><td class="loser-cell">17/35 (49%)</td><td class="winner-cell">35/35 (100%)</td></tr>
<tr><td>Individual tests passing</td><td class="loser-cell">147/149</td><td class="winner-cell">265/265</td></tr>
<tr><td>Snapshots passing</td><td class="loser-cell">134/136</td><td class="winner-cell">249/249</td></tr>
</tbody>
</table>
<h4>Test progress bars</h4>
<p><strong>pf-codemods:</strong></p>
<div class="progress-bar">
<div class="progress-segment progress-pass" style="width: 49%;">17 pass</div>
<div class="progress-segment progress-fail" style="width: 51%;">18 fail</div>
</div>
<p><strong>semver/goose:</strong></p>
<div class="progress-bar">
<div class="progress-segment progress-pass" style="width: 100%;">35 pass</div>
</div>
<h4>Notable test changes in semver/goose</h4>
<ul style="padding-left: 20px; margin-top: 8px;">
<li><code>simpleDropdown.test.tsx</code>: Changed <code>asFragment()</code> → <code>baseElement</code> for snapshots (PF6 renders dropdown menus in portal/body, not in fragment)</li>
<li><code>ExtendedButton.test.tsx</code>: Updated <code>pf-v5-c-button</code> → <code>pf-v6-c-button</code> class assertions</li>
<li><code>addSourceModal.test.tsx</code>: Updated <code>pf-v5-c-form__group</code> → <code>pf-v6-c-form__group</code> selectors</li>
<li><code>actionMenu.test.tsx</code>: Updated <code>data-ouia-component-id</code> → <code>ouiaId</code> expectations</li>
<li>19 snapshot files regenerated to match new PF6 CSS class output</li>
</ul>
</div>
</details>
<!-- 6.10 Scope Discipline -->
<details id="detail-scope">
<summary>🎯 Scope Discipline <span class="badge badge-green">semver/goose</span></summary>
<div class="detail-content">
<h4>pf-codemods</h4>
<table>
<thead><tr><th>Aspect</th><th>Assessment</th></tr></thead>
<tbody>
<tr><td>Artifact files</td><td class="loser-cell"><span class="val-red">Included .cache file (+1 line) and old report HTML (+1,299 lines)</span> — inflates diff unnecessarily</td></tr>
<tr><td>Formatting</td><td class="loser-cell"><span class="val-red">Tab/space mixing, double spaces, compressed JSX</span> — codemod tool artifacts</td></tr>
<tr><td>data-codemods markers</td><td class="loser-cell"><span class="val-orange">2 markers left in production code</span></td></tr>
<tr><td>Unrelated changes</td><td><span class="val-green">None detected — all changes are migration-related</span></td></tr>
<tr><td>Feature additions</td><td><span class="val-green">None</span></td></tr>
</tbody>
</table>
<h4>semver/goose</h4>
<table>
<thead><tr><th>Aspect</th><th>Assessment</th></tr></thead>
<tbody>
<tr><td>Artifact files</td><td><span class="val-green">None — all 59 files are legitimate migration changes</span></td></tr>
<tr><td>Formatting</td><td><span class="val-orange">107 prettier errors — indentation changes not auto-formatted</span></td></tr>
<tr><td>Codemod markers</td><td><span class="val-green">None</span></td></tr>
<tr><td>Unrelated changes</td><td><span class="val-green">None detected — all changes are PF migration or test alignment</span></td></tr>
<tr><td>Feature additions</td><td><span class="val-green">None</span></td></tr>
<tr><td>Test approach change</td><td><span class="val-orange">asFragment→baseElement in 2 tests — justified by PF6 portal rendering</span></td></tr>
</tbody>
</table>
<p><strong>Both branches show good scope discipline</strong> — no feature additions, no unrelated refactors. semver/goose has more files changed but all are justified by the migration. The main deduction for semver/goose is the 107 prettier formatting issues that would need a <code>npx prettier --write</code> pass. The main deduction for codemods is the artifact files and codemod markers.</p>
</div>
</details>
</div>
<!-- ============================================================ -->
<!-- 7. BUILD RESULTS -->
<!-- ============================================================ -->
<div id="build" class="section">
<h2>7. Build Results</h2>
<div class="card-grid">
<!-- CODEMODS build -->
<div class="card" style="border-color: var(--red);">
<h3><span class="badge badge-red">FAIL</span> pf-codemods-052826-1721</h3>
<p style="color: var(--text-muted); margin-bottom: 12px;">With PF5 packages (as committed) — code targets PF6 API but packages are PF5</p>
<table>
<thead><tr><th>Check</th><th>Result</th></tr></thead>
<tbody>
<tr><td>npm ci</td><td><span class="val-green">✅ Success</span></td></tr>
<tr><td>Installed PF version</td><td><span class="val-red">5.3.4 (PF5!)</span></td></tr>
<tr><td>tsc --noEmit</td><td><span class="val-red">❌ 44 errors</span></td></tr>
<tr><td>npm run build (webpack)</td><td><span class="val-orange">⚠️ Produces bundle despite TS errors</span></td></tr>
<tr><td>jest</td><td><span class="val-red">❌ 18/35 suites failed</span></td></tr>
</tbody>
</table>
<h4>Error breakdown (44 TypeScript errors)</h4>
<table>
<thead><tr><th>Error Type</th><th>Count</th><th>Root Cause</th></tr></thead>
<tbody>
<tr><td>TS2305 (no exported member)</td><td><span class="val-red">23</span></td><td>PF6 APIs referenced but PF5 installed: Content, MastheadLogo, t_temp_dev_tbd, Modal/ModalVariant from /deprecated</td></tr>
<tr><td>TS2322 (type incompatibility)</td><td><span class="val-red">20</span></td><td>PF6 props used on PF5 types: titleText, headingLevel, masthead, hasBodyWrapper, action-group-plain, alignEnd, labels, splitButtonItems</td></tr>
<tr><td>TS2724 (no member, did you mean)</td><td><span class="val-red">1</span></td><td>MastheadLogo → Masthead suggestion</td></tr>
</tbody>
</table>
<h4>Build progress</h4>
<div class="progress-bar">
<div class="progress-segment progress-pass" style="width: 25%;">install</div>
<div class="progress-segment progress-fail" style="width: 25%;">tsc ❌</div>
<div class="progress-segment progress-warn" style="width: 25%;">webpack ⚠️</div>
<div class="progress-segment progress-fail" style="width: 25%;">test ❌</div>
</div>
<p style="margin-top: 8px; color: var(--text-muted); font-size: 0.85rem;">Note: Webpack produces a bundle because it ignores TypeScript errors during bundling. The output would have runtime failures — PF6 APIs don't exist in the PF5 packages.</p>
</div>
<!-- SEMVER build -->
<div class="card" style="border-color: var(--green);">
<h3><span class="badge badge-green">PASS</span> semver/goose/052826-1545</h3>
<p style="color: var(--text-muted); margin-bottom: 12px;">With PF6 packages (^6.4.x → resolves to 6.5.x)</p>
<table>
<thead><tr><th>Check</th><th>Result</th></tr></thead>
<tbody>
<tr><td>npm ci</td><td><span class="val-green">✅ Success</span></td></tr>
<tr><td>Installed PF version</td><td><span class="val-green">6.5.1 (PF6 ✅)</span></td></tr>
<tr><td>tsc --noEmit</td><td><span class="val-green">✅ 0 errors</span></td></tr>
<tr><td>npm run build (webpack)</td><td><span class="val-green">✅ Clean build (10.4s)</span></td></tr>
<tr><td>jest</td><td><span class="val-green">✅ 35/35 suites, 265/265 tests, 249/249 snapshots</span></td></tr>
</tbody>
</table>
<h4>Error breakdown</h4>
<table>
<thead><tr><th>Error Type</th><th>Count</th><th>Notes</th></tr></thead>
<tbody>
<tr><td>TypeScript errors</td><td><span class="val-green">0</span></td><td>—</td></tr>
<tr><td>Build errors</td><td><span class="val-green">0</span></td><td>—</td></tr>
<tr><td>Test failures</td><td><span class="val-green">0</span></td><td>—</td></tr>
<tr><td>Webpack warnings</td><td><span class="val-orange">2</span></td><td>Asset/entrypoint size limits (pre-existing, non-blocking)</td></tr>
</tbody>
</table>
<h4>Build progress</h4>
<div class="progress-bar">
<div class="progress-segment progress-pass" style="width: 25%;">install ✅</div>
<div class="progress-segment progress-pass" style="width: 25%;">tsc ✅</div>
<div class="progress-segment progress-pass" style="width: 25%;">webpack ✅</div>
<div class="progress-segment progress-pass" style="width: 25%;">test ✅</div>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- 8. RISK & MAINTAINABILITY -->
<!-- ============================================================ -->
<div id="risk" class="section">
<h2>8. Risk &amp; Maintainability</h2>
<div class="card-grid">
<!-- CODEMODS risk -->
<div class="card" style="border-color: var(--red);">
<h3 style="color: var(--red);">pf-codemods-052826-1721</h3>
<div class="card-metric"><span class="label">Placeholder tokens (t_temp_dev_tbd)</span><span class="value val-red">4 — runtime crash</span></div>
<div class="card-metric"><span class="label">Stale CSS classes (pf-v5-*)</span><span class="value val-red">15 — visual breakage</span></div>
<div class="card-metric"><span class="label">Package alignment</span><span class="value val-red">PF5 packages with PF6 code</span></div>
<div class="card-metric"><span class="label">Runtime risk</span><span class="value val-red">Critical — nothing works</span></div>
<div class="card-metric"><span class="label">Deprecated imports</span><span class="value val-red">12 (9 nonexistent in PF6)</span></div>
<div class="card-metric"><span class="label">Codemod artifacts</span><span class="value val-orange">2 data-codemods attrs</span></div>
<div class="card-metric"><span class="label">Remaining manual work</span><span class="value val-red">~80% of migration</span></div>
<div class="card-metric"><span class="label">Can deploy as-is?</span><span class="value val-red">❌ No</span></div>
</div>
<!-- SEMVER risk -->
<div class="card" style="border-color: var(--green);">
<h3 style="color: var(--green);">semver/goose/052826-1545</h3>
<div class="card-metric"><span class="label">Placeholder tokens</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">Stale CSS classes (pf-v5-*)</span><span class="value val-green">1 (comment only)</span></div>
<div class="card-metric"><span class="label">Package alignment</span><span class="value val-green">PF6 packages with PF6 code</span></div>
<div class="card-metric"><span class="label">Runtime risk</span><span class="value val-green">Low — all APIs valid</span></div>
<div class="card-metric"><span class="label">Deprecated imports</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">Codemod artifacts</span><span class="value val-green">0</span></div>
<div class="card-metric"><span class="label">Remaining manual work</span><span class="value val-green">~5% (prettier fix + minor review)</span></div>
<div class="card-metric"><span class="label">Can deploy as-is?</span><span class="value val-green">✅ Yes (after prettier fix)</span></div>
</div>
</div>
<h3 style="margin-top: 16px;">Remaining work comparison</h3>
<table>
<thead><tr><th>Task</th><th>pf-codemods</th><th>semver/goose</th></tr></thead>
<tbody>
<tr><td>Update package.json to PF6</td><td class="loser-cell"><span class="val-red">Required</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Migrate 9 Modal files to new API</td><td class="loser-cell"><span class="val-red">Required (major effort)</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Rewrite 2 deprecated Select components</td><td class="loser-cell"><span class="val-red">Required (major effort)</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Fix 4 placeholder tokens</td><td class="loser-cell"><span class="val-red">Required</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Update CSS classes pf-v5→v6</td><td class="loser-cell"><span class="val-red">Required (15 refs)</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Fix PageSection variant migration</td><td class="loser-cell"><span class="val-red">Required (3 files)</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Fix EmptyState titleText antipattern</td><td class="loser-cell"><span class="val-red">Required (3 files)</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Remove data-codemods attributes</td><td class="loser-cell"><span class="val-orange">Required</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Update 29 test/snapshot files</td><td class="loser-cell"><span class="val-red">Required</span></td><td class="winner-cell"><span class="val-green">Done</span></td></tr>
<tr><td>Run prettier --write</td><td class="loser-cell"><span class="val-red">Required (144 errors)</span></td><td><span class="val-orange">Required (107 errors)</span></td></tr>
<tr><td>Review SelectOptionProps import path</td><td class="loser-cell"><span class="val-orange">N/A (still deprecated)</span></td><td><span class="val-orange">Minor review needed</span></td></tr>
</tbody>
</table>
</div>
<!-- ============================================================ -->
<!-- 9. FINAL TOTALS & RECOMMENDATION -->
<!-- ============================================================ -->
<div id="final" class="section">
<h2>9. Final Totals &amp; Recommendation</h2>
<div class="verdict-banner" style="border-color: var(--green);">
<h3 style="margin-bottom: 16px;">Final Score</h3>
<table>
<thead>
<tr>
<th>Category</th>
<th>Max</th>
<th>pf-codemods-052826-1721</th>
<th>semver/goose/052826-1545</th>
</tr>
</thead>
<tbody>
<tr><td>Migration Completeness</td><td>30</td><td class="loser-cell">7</td><td class="winner-cell">27</td></tr>
<tr><td>Functional Preservation</td><td>20</td><td class="loser-cell">12</td><td class="winner-cell">18</td></tr>
<tr><td>Scope Discipline</td><td>15</td><td>9</td><td class="winner-cell">12</td></tr>
<tr><td>PF6 Correctness</td><td>20</td><td class="loser-cell">4</td><td class="winner-cell">18</td></tr>
<tr><td>Build / Compile / Test</td><td>10</td><td class="loser-cell">1</td><td class="winner-cell">10</td></tr>
<tr><td>Risk &amp; Maintainability</td><td>5</td><td class="loser-cell">1</td><td class="winner-cell">4</td></tr>
</tbody>
<tfoot>
<tr style="font-size: 1.2rem;">
<td><strong>TOTAL</strong></td>
<td><strong>100</strong></td>
<td class="loser-cell"><strong style="color: var(--red); font-size: 1.5rem;">28</strong></td>
<td class="winner-cell"><strong style="color: var(--green); font-size: 1.5rem;">91</strong></td>
</tr>
</tfoot>
</table>
<div style="margin-top: 24px; text-align: left;">
<h3>🏆 Winner: <span style="color: var(--green);">semver/goose/052826-1545</span></h3>
<h4 style="margin-top: 20px; color: var(--green);">Merge Recommendation</h4>
<p><strong style="color: var(--green);">✅ Merge semver/goose/052826-1545</strong> — This branch is a substantially complete PatternFly 5→6 migration. It upgrades all packages, migrates all major component APIs (Modal, EmptyState, Select, Toolbar, Button, PageSection, Masthead, Nav), updates CSS classes and tokens, and passes all tests. The remaining work is minor: run <code>npx prettier --write src/</code> to fix 107 formatting issues, and review the <code>SelectOptionProps</code> import path in FilterToolbar.</p>
<h4 style="margin-top: 16px; color: var(--red);">❌ Do not merge pf-codemods-052826-1721</h4>
<p>This branch represents a partial, intermediate codemod output — not a completed migration. It applied some mechanical PF6 code transformations (EmptyState flattening, Button icon props, Toolbar renames) but critically failed to: (1) upgrade package.json, (2) migrate Modals beyond moving to a nonexistent deprecated path, (3) rewrite deprecated Select components, (4) update CSS classes/tokens, (5) resolve placeholder tokens, or (6) update tests. The code does not compile against either PF5 or PF6 packages in its current state.</p>
<h4 style="margin-top: 16px; color: var(--text-muted);">Remaining work for semver/goose</h4>
<ul style="padding-left: 20px; margin-top: 8px;">
<li>Run <code>npx prettier --write src/</code> to fix 107 formatting errors</li>
<li>Verify <code>SelectOptionProps</code> import path in FilterToolbar.tsx works correctly at runtime</li>
<li>Consider visual regression testing to confirm styling matches expectations</li>
<li>Review the 1 remaining pf-v5 comment in select-overrides.css (informational only)</li>
</ul>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- 10. FOOTER -->
<!-- ============================================================ -->
<div class="footer">
<p><strong>References</strong></p>
<p>
<a href="https://www.patternfly.org/get-started/upgrade/" target="_blank">PatternFly Upgrade Guide</a>
<a href="https://www.patternfly.org/get-started/upgrade/tokens" target="_blank">Token Migration Docs</a>
<a href="https://www.patternfly.org/get-started/upgrade/components" target="_blank">Component Changes</a>
<a href="https://www.patternfly.org/get-started/upgrade/codemods" target="_blank">Codemod Reference</a>
</p>
<p style="margin-top: 12px; font-size: 0.8rem;">Generated by goose migration analysis · 2026-05-28</p>
</div>
</div>
<section id="migration-stats" style="margin-top: 2rem;">
<h2 style="color: var(--accent, #58a6ff); border-bottom: 2px solid var(--accent, #58a6ff); padding-bottom: 0.5rem;">Migration Stats</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem;">
<div style="background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 1rem;">
<h3 style="color: var(--teal, #39d2c0); margin: 0 0 0.5rem 0; font-size: 1rem;">Timing</h3>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--border, #30363d);">
<span style="color: var(--text-muted, #8b949e);">Fix Engine fixes</span>
<span>49m 48s</span>
</div>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--border, #30363d);">
<span style="color: var(--text-muted, #8b949e);">Agent fixes</span>
<span>9m 32s</span>
</div>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0; font-weight: bold;">
<span>Total</span>
<span>59m 20s</span>
</div>
</div>
<div style="background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 1rem;">
<h3 style="color: var(--teal, #39d2c0); margin: 0 0 0.5rem 0; font-size: 1rem;">Migration</h3>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--border, #30363d);">
<span style="color: var(--text-muted, #8b949e);">Branch</span>
<span><code>semver/goose/052826-1545</code></span>
</div>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--border, #30363d);">
<span style="color: var(--text-muted, #8b949e);">Base</span>
<span><code>original_2.1.0</code></span>
</div>
<div style="display: flex; justify-content: space-between; padding: 0.25rem 0;">
<span style="color: var(--text-muted, #8b949e);">Timestamp</span>
<span>2026-05-28T16:45:12Z</span>
</div>
</div>
<div style="background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 1rem;">
<h3 style="color: var(--teal, #39d2c0); margin: 0 0 0.5rem 0; font-size: 1rem;">Token Usage</h3>
<pre style="background: var(--surface2, #1c2129); padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; overflow-x: auto;">{}</pre>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment