Subchapter 2.1

Report Template

Raw file

report-template.html

HTML227 lines12 KB

1<!--
2  AI Readiness Report — canonical template
3  --------------------------------------------
4  This file is the single source of truth for the look & feel of the
5  reports/index.html output. The @ai-readiness-reporter agent MUST load
6  this file, substitute the {{placeholders}} with real data from
7  `agentrc readiness --json`, and write the result to reports/index.html.
8
9  Rules for the agent:
10  - Do NOT change the HTML structure, class names, CSS variables or the
11    inline <style> block. The template is intentionally fixed so every
12    consumer of this plugin gets an identical-looking report.
13  - Replace every {{placeholder}} with concrete data. Repeat the marked
14    blocks (pillar cards, plan rows, maturity rows, extra rows) for

report-template.html on GitHub

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)

-->

<!DOCTYPE html>

<head>

<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>

<h1>AI Readiness Report</h1>

<strong>{{repoName}}</strong> · Assessed {{date}} ·

<span class="badge lvl-{{level}}">L{{level}} — {{levelName}}</span> ·

Overall <strong>{{overallPct}}%</strong> · Grade <strong>{{grade}}</strong>

</div>

</header>

<main>

<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>

<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>

<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>

<h2>Active Policy</h2>

<p><code>{{policyName}}</code> — {{policySummary}}</p>

</section>

<h2>Repo Health Breakdown</h2>

<!--

Repeat one .pillar block per Repo Health pillar (8 pillars):

Style, Build, Testing, Docs, Dev Environment, Code Quality, Observability, Security.

<h3>

<span class="rel {{pillarRelevance}}">AI relevance: {{pillarRelevance}}</span>

<span style="margin-left:auto;color:var(--muted);font-size:13px">{{pillarScore}}%</span>

</h3>

<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>

<h2>AI Setup Breakdown</h2>

</div>

</section>

<h2>Extras (informational, do not affect score)</h2>

<table>

<thead><tr><th></th><th>Extra</th><th>Status</th></tr></thead>

<tbody>

</tbody>

</table>

</section>

<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></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></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></tbody></table>

</section>

<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>

<summary style="cursor:pointer;color:var(--muted)">Raw AgentRC JSON</summary>

<pre style="overflow:auto;font-size:11px;color:#b8c0d2">{{rawJsonPretty}}</pre>

</details>

</main>

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>