mirror of
https://github.com/github/awesome-copilot.git
synced 2026-05-04 14:15:55 +00:00
228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!--
|
|
AI Readiness Report — canonical template
|
|
--------------------------------------------
|
|
This file is the single source of truth for the look & feel of the
|
|
reports/index.html output. The @ai-readiness-reporter agent MUST load
|
|
this file, substitute the {{placeholders}} with real data from
|
|
`agentrc readiness --json`, and write the result to reports/index.html.
|
|
|
|
Rules for the agent:
|
|
- Do NOT change the HTML structure, class names, CSS variables or the
|
|
inline <style> block. The template is intentionally fixed so every
|
|
consumer of this plugin gets an identical-looking report.
|
|
- Replace every {{placeholder}} with concrete data. Repeat the marked
|
|
blocks (pillar cards, plan rows, maturity rows, extra rows) for
|
|
each item. Remove blocks that don't apply (e.g. policy section if
|
|
no policy is active).
|
|
- Keep the file self-contained: no external CSS/JS, no network fonts.
|
|
- Preserve the <script type="application/json" id="raw-data"> block
|
|
and embed the compact AgentRC JSON inside it.
|
|
|
|
Placeholders used:
|
|
{{repoName}} repository name
|
|
{{date}} ISO date the report was generated
|
|
{{level}} maturity level number (1-5)
|
|
{{levelName}} maturity level name (Functional, Documented, ...)
|
|
{{overallPct}} overall readiness as integer percent
|
|
{{grade}} letter grade A-F
|
|
{{passRatePct}} pass rate as integer percent (or "—" if N/A)
|
|
{{thresholdPct}} policy pass-rate threshold (or "—")
|
|
{{policyName}} active policy name (omit policy section if none)
|
|
{{policySummary}} one-paragraph summary of disabled/overridden criteria
|
|
{{rawJsonCompact}} compact JSON for embedding
|
|
{{rawJsonPretty}} pretty JSON for the <details> view
|
|
|
|
Pillar card placeholders (repeat per pillar):
|
|
{{pillarName}} {{pillarScore}} {{pillarRelevance}} (high|medium|low)
|
|
{{pillarStatus}} (good|warn|bad — drives bar + dot colour)
|
|
{{pillarWhat}} {{pillarWhyAi}} {{pillarCurrent}} {{pillarRecommendation}}
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>AI Readiness — {{repoName}}</title>
|
|
<style>
|
|
:root {
|
|
--bg:#0f1115; --panel:#161a22; --panel-2:#1d2230; --border:#262c3a;
|
|
--text:#e6e9ef; --muted:#8a93a6; --accent:#6ea8ff;
|
|
--good:#4ade80; --warn:#fbbf24; --bad:#f87171;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html,body { margin:0; background:var(--bg); color:var(--text);
|
|
font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
|
|
a { color: var(--accent); }
|
|
header { padding: 28px 32px; border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(180deg,#141823,#0f1115); }
|
|
header h1 { margin: 0 0 4px; font-size: 22px; }
|
|
header .meta { color: var(--muted); font-size: 13px; }
|
|
main { max-width: 1180px; margin: 0 auto; padding: 24px 32px 80px; }
|
|
.panel { background:var(--panel); border:1px solid var(--border);
|
|
border-radius:10px; padding:20px; margin-bottom:18px; }
|
|
.grid { display:grid; gap:16px; }
|
|
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
|
.kpi .num { font-size: 30px; font-weight: 700; }
|
|
.kpi .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
|
|
.badge { display:inline-block; padding:3px 10px; border-radius:999px;
|
|
font-size:12px; font-weight:600; }
|
|
.lvl-1 { background:#3a1f24; color:#f87171; }
|
|
.lvl-2 { background:#3b2c1d; color:#fbbf24; }
|
|
.lvl-3 { background:#2c3119; color:#d3e85e; }
|
|
.lvl-4 { background:#1d3325; color:#4ade80; }
|
|
.lvl-5 { background:#1c2c3d; color:#6ea8ff; }
|
|
.bar { height:8px; background:var(--panel-2); border-radius:4px; overflow:hidden; }
|
|
.bar > span { display:block; height:100%; background: var(--accent); }
|
|
.bar.good > span { background: var(--good); }
|
|
.bar.warn > span { background: var(--warn); }
|
|
.bar.bad > span { background: var(--bad); }
|
|
table { width:100%; border-collapse:collapse; }
|
|
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
|
|
th { color:var(--muted); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.8px; }
|
|
code { background:#0a0c11; padding:1px 6px; border-radius:4px; }
|
|
h2 { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin:0 0 12px; }
|
|
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
|
|
.dot.good { background:var(--good); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--bad); }
|
|
footer { color: var(--muted); font-size: 12px; text-align: center; padding: 20px; }
|
|
|
|
/* Pillar cards */
|
|
.pillar { background:var(--panel-2); border:1px solid var(--border);
|
|
border-radius:8px; padding:14px 16px; }
|
|
.pillar h3 { margin:0 0 6px; font-size:15px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
|
|
.pillar .why { color:var(--muted); font-size:13px; margin:8px 0 0; }
|
|
.pillar .what { font-size:13px; margin:6px 0 0; }
|
|
.pillar .rec { font-size:13px; margin:8px 0 0; }
|
|
.rel { font-size:10px; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
|
|
.rel.high { background:#1c2c3d; color:#6ea8ff; }
|
|
.rel.medium { background:#2c3119; color:#d3e85e; }
|
|
.rel.low { background:#262c3a; color:#8a93a6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>AI Readiness Report</h1>
|
|
<div class="meta">
|
|
<strong>{{repoName}}</strong> · Assessed {{date}} ·
|
|
<span class="badge lvl-{{level}}">L{{level}} — {{levelName}}</span> ·
|
|
Overall <strong>{{overallPct}}%</strong> · Grade <strong>{{grade}}</strong>
|
|
<!-- if a policy is active, append: · Policy <code>{{policyName}}</code> -->
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- 1. What is AI Readiness? -->
|
|
<section class="panel">
|
|
<h2>What is AI Readiness?</h2>
|
|
<p>AI coding agents are only as effective as the context they receive. AgentRC measures how AI-ready a repo is across <strong>9 pillars</strong> in two categories — Repo Health and AI Setup — and maps the result to a <strong>5-level maturity model</strong>. This report is the <em>Measure</em> step in AgentRC's <em>Measure → Generate → Maintain</em> loop.</p>
|
|
<p style="color:var(--muted);font-size:13px;margin-top:8px">Each pillar carries an <strong>AI relevance</strong> rating (High / Medium / Low) so you can tell at a glance which gaps most directly affect Copilot's output and which are general engineering hygiene.</p>
|
|
</section>
|
|
|
|
<!-- 2. KPIs -->
|
|
<section class="grid cols-3">
|
|
<div class="panel kpi"><span class="lbl">Maturity</span><div class="num"><span class="badge lvl-{{level}}">L{{level}} — {{levelName}}</span></div></div>
|
|
<div class="panel kpi"><span class="lbl">Overall Score</span><div class="num">{{overallPct}}%</div><div style="color:var(--muted);font-size:12px">Grade {{grade}}</div></div>
|
|
<div class="panel kpi"><span class="lbl">Pass rate</span><div class="num">{{passRate}}</div><div style="color:var(--muted);font-size:12px">Threshold {{threshold}}</div></div>
|
|
</section>
|
|
|
|
<!-- 3. Maturity progression -->
|
|
<section class="panel">
|
|
<h2>Maturity Progression</h2>
|
|
<table>
|
|
<thead><tr><th>Level</th><th>Name</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<!-- Render levels 5 → 1. Mark the current level with "◼ You are here". Example row:
|
|
<tr><td>L3</td><td>Standardized</td><td>◼ You are here</td></tr>
|
|
-->
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- 4. Active policy (omit this section entirely when no policy is active) -->
|
|
<section class="panel">
|
|
<h2>Active Policy</h2>
|
|
<p><code>{{policyName}}</code> — {{policySummary}}</p>
|
|
</section>
|
|
|
|
<!-- 5. Repo Health Pillars -->
|
|
<section class="panel">
|
|
<h2>Repo Health Breakdown</h2>
|
|
<div class="grid cols-2">
|
|
<!--
|
|
Repeat one .pillar block per Repo Health pillar (8 pillars):
|
|
Style, Build, Testing, Docs, Dev Environment, Code Quality, Observability, Security.
|
|
|
|
<div class="pillar">
|
|
<h3>
|
|
<span class="dot {{pillarStatus}}"></span>
|
|
{{pillarName}}
|
|
<span class="rel {{pillarRelevance}}">AI relevance: {{pillarRelevance}}</span>
|
|
<span style="margin-left:auto;color:var(--muted);font-size:13px">{{pillarScore}}%</span>
|
|
</h3>
|
|
<div class="bar {{pillarStatus}}"><span style="width:{{pillarScore}}%"></span></div>
|
|
<p class="what"><strong>What it measures:</strong> {{pillarWhat}}</p>
|
|
<p class="why"><strong>Why it matters for AI:</strong> {{pillarWhyAi}}</p>
|
|
<p class="rec"><strong>Current state:</strong> {{pillarCurrent}}</p>
|
|
<p class="rec"><strong>Recommendation:</strong> {{pillarRecommendation}}</p>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. AI Setup Pillars -->
|
|
<section class="panel">
|
|
<h2>AI Setup Breakdown</h2>
|
|
<div class="grid cols-2">
|
|
<!-- AI Tooling pillar block — same structure as above, AI relevance is always "high". -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. Extras -->
|
|
<section class="panel">
|
|
<h2>Extras (informational, do not affect score)</h2>
|
|
<table>
|
|
<thead><tr><th></th><th>Extra</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<!-- agents-doc, pr-template, pre-commit, architecture-doc rows. Use ✅ or ◻. -->
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- 8. Prioritised Remediation Plan -->
|
|
<section class="panel">
|
|
<h2>Prioritised Remediation Plan</h2>
|
|
<h3 style="color:var(--bad)">🔴 Fix First (high impact / low effort)</h3>
|
|
<table><thead><tr><th>#</th><th>Finding</th><th>File / config</th><th>Why it matters</th></tr></thead><tbody><!-- rows --></tbody></table>
|
|
<h3 style="color:var(--warn)">🟡 Fix Next (medium impact / low effort)</h3>
|
|
<table><thead><tr><th>#</th><th>Finding</th><th>File / config</th><th>Why</th></tr></thead><tbody><!-- rows --></tbody></table>
|
|
<h3 style="color:var(--accent)">🔵 Plan (medium impact / medium effort)</h3>
|
|
<table><thead><tr><th>#</th><th>Finding</th><th>File / config</th><th>Why</th></tr></thead><tbody><!-- rows --></tbody></table>
|
|
</section>
|
|
|
|
<!-- 9. Next steps -->
|
|
<section class="panel">
|
|
<h2>Next Steps</h2>
|
|
<ol>
|
|
<li>Generate or refresh instructions: <code>agentrc instructions --output .github/copilot-instructions.md</code> (or use the <code>generate-instructions</code> skill).</li>
|
|
<li>Address each item under <strong>🔴 Fix First</strong>; re-run this report to confirm score improvement.</li>
|
|
<li>Codify org standards via a JSON policy (<code>strict.json</code>, <code>ai-only.json</code>, …) and re-run with <code>--policy</code>.</li>
|
|
<li>Wire <code>agentrc readiness --fail-level <n></code> into CI to prevent regressions.</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<!-- 10. Raw data -->
|
|
<details class="panel">
|
|
<summary style="cursor:pointer;color:var(--muted)">Raw AgentRC JSON</summary>
|
|
<pre style="overflow:auto;font-size:11px;color:#b8c0d2">{{rawJsonPretty}}</pre>
|
|
</details>
|
|
<script type="application/json" id="raw-data">{{rawJsonCompact}}</script>
|
|
</main>
|
|
|
|
<footer>
|
|
Generated by <a href="https://github.com/github/awesome-copilot/tree/main/plugins/acreadiness-cockpit">acreadiness-cockpit</a>
|
|
· powered by <a href="https://github.com/microsoft/agentrc">microsoft/agentrc</a>.
|
|
</footer>
|
|
</body>
|
|
</html>
|