# HTML Report Format
# HTML Report Format
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
The architectural review is rendered as a single self-contained HTML file in the OS temp directory. Tailwind and Mermaid both come from CDNs. Mermaid handles graph-shaped diagrams reliably; hand-built divs and inline SVG handle the more editorial visuals (mass diagrams, cross-sections). Mix the two: don't lean on Mermaid for everything, it'll start to look generic.
The architectural review is rendered as a single self-contained HTML file under `.greenline/tmp/improve-codebase-architecture/`. It is offline-complete: the CSS is embedded and every diagram is static inline SVG or HTML, so no script, style, font, or image loads from a network. Inline SVG draws the graph-shaped diagrams; hand-built divs and inline SVG handle the more editorial visuals (mass diagrams, cross-sections). Mix the two: don't lean on one pattern for everything, it'll start to look generic.
3 unchanged lines
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="en">
<meta charset="utf-8" />
<meta charset="utf-8" />
<title>Architecture review for {{repo name}}</title>
<title>Architecture review for {{repo name}}</title>
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
<script src="https://cdn.tailwindcss.com"></script>
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" });
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
/* small custom layer for things Tailwind doesn't cover cleanly:
/* the whole stylesheet is embedded: nothing loads from a network */
body { margin: 0; background: #fafaf9; color: #0f172a; font-family: system-ui, sans-serif; }
main { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem; }
main > * + * { margin-top: 3rem; }
article { border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; padding: 1.5rem; }
article + article { margin-top: 2.5rem; }
.badge { display: inline-block; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; }
.strong { background: #d1fae5; color: #065f46; }
.explore { background: #fef3c7; color: #92400e; }
.speculative { background: #e2e8f0; color: #334155; }
.files { font-family: ui-monospace, monospace; font-size: 0.875rem; }
.label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.diagram { border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; padding: 1rem; }
.callout { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 0.375rem; padding: 0.5rem 0.75rem; }
/* small custom layer for the diagrams:
dashed seam lines, hand-drawn-feeling arrow heads, etc. */
dashed seam lines, hand-drawn-feeling arrow heads, etc. */
.seam { stroke-dasharray: 4 4; }
.seam { stroke-dasharray: 4 4; }
.leak { stroke: #dc2626; }
.leak { stroke: #dc2626; }
.deep { background: linear-gradient(135deg, #0f172a, #1e293b); }
.deep { background: linear-gradient(135deg, #0f172a, #1e293b); }
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
<body class="bg-stone-50 text-slate-900 font-sans">
<body>
<main class="max-w-5xl mx-auto px-6 py-12 space-y-12">
<main>
<header>...</header>
<header>...</header>
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
<section id="candidates" class="space-y-10">...</section>
<section id="candidates">...</section>
<section id="top-recommendation">...</section>
<section id="top-recommendation">...</section>
6 unchanged lines
Repo name, date, and a compact legend: solid box = module, dashed line = seam, red arrow = leakage, thick dark box = deep module. No introduction paragraph. Straight into the candidates.
Repo name, date, and a compact legend: solid box = module, dashed line = seam, red arrow = leakage, thick dark box = deep module. No introduction paragraph. Straight into the candidates.
## Candidate card
## Candidate card
The diagrams carry the weight. Prose is sparse, plain, and uses the glossary terms (from the `/codebase-design` skill) without ceremony.
The diagrams carry the weight. Prose is sparse, plain, and uses the glossary terms (from the `codebase-design` skill) without ceremony.
Each candidate is one `<article>`:
Each candidate is one `<article>`:
- **Title**: short, names the deepening (e.g. "Collapse the Order intake pipeline").
- **Title**: short, names the deepening (e.g. "Collapse the Order intake pipeline").
- **Badge row**: recommendation strength (`Strong` = emerald, `Worth exploring` = amber, `Speculative` = slate), plus a tag for the dependency category (`in-process`, `local-substitutable`, `ports & adapters`, `mock`).
- **Badge row**: recommendation strength (`Strong` = emerald, `Worth exploring` = amber, `Speculative` = slate), plus a tag for the dependency category (`in-process`, `local-substitutable`, `ports & adapters`, `mock`).
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
- **Files**: monospaced list, `font-mono text-sm`.
- **Files**: monospaced list (the `.files` class).
- **Before / After diagram**: the centrepiece. Two columns, side by side. See patterns below.
- **Before / After diagram**: the centrepiece. Two columns, side by side. See patterns below.
- **Problem**: one sentence. What hurts.
- **Problem**: one sentence. What hurts.
- **Solution**: one sentence. What changes.
- **Solution**: one sentence. What changes.
6 unchanged lines
- **Wins**: bullets, ≤6 words each. e.g. "Tests hit one interface", "Pricing logic stops leaking", "Delete 4 shallow wrappers".
- **Wins**: bullets, ≤6 words each. e.g. "Tests hit one interface", "Pricing logic stops leaking", "Delete 4 shallow wrappers".
- **ADR callout** (if applicable): one line in an amber-tinted box.
- **ADR callout** (if applicable): one line in an amber-tinted box.
No paragraphs of explanation. If the diagram needs a paragraph to be understood, redraw the diagram.
No paragraphs of explanation. If the diagram needs a paragraph to be understood, redraw the diagram.
## Diagram patterns
## Diagram patterns
Pick the pattern that fits the candidate. Mix them. Don't make every diagram look the same. Variety is part of the point.
Pick the pattern that fits the candidate. Mix them. Don't make every diagram look the same. Variety is part of the point.
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
### Mermaid graph (the workhorse for dependencies / call flow)
### Inline SVG graph (the workhorse for dependencies / call flow)
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
Use a Mermaid `flowchart` or `graph` when the point is "X calls Y calls Z, and look at the mess." Wrap it in a Tailwind-styled card so it doesn't feel parachuted in. Style with classDef to colour leakage edges red and the deep module dark. Sequence diagrams work well for "before: 6 round-trips; after: 1."
Draw the graph directly in SVG when the point is "X calls Y calls Z, and look at the mess": modules as `<rect>` elements with a `<text>` label, calls as `<path>` elements ending in an arrowhead `<marker>`, laid out by hand left to right. Wrap it in a `.diagram` card so it doesn't feel parachuted in. Put the `leak` class on leakage edges to colour them red and the `deep` treatment on the deep module. Prefix marker ids per diagram so two SVGs on the page never share one. A hand-drawn sequence (lifelines as vertical lines, messages as horizontal arrows) works well for "before: 6 round-trips; after: 1."
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
<div class="rounded-lg border border-slate-200 bg-white p-4">
<div class="diagram">
<pre class="mermaid">
<svg viewBox="0 0 560 120" role="img" aria-label="OrderHandler calls OrderValidator, which calls OrderRepo, which leaks into PricingClient">
A[OrderHandler] --> B[OrderValidator]
<marker id="c1-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
B --> C[OrderRepo]
<polygon points="0 0, 8 3, 0 6" fill="#475569" />
C -.leak.-> D[PricingClient]
</marker>
classDef leak stroke:#dc2626,stroke-width:2px;
</defs>
class C,D leak
<rect x="8" y="40" width="112" height="40" rx="4" fill="#fff" stroke="#0f172a" />
</pre>
<text x="64" y="64" text-anchor="middle" font-size="12">OrderHandler</text>
<rect x="168" y="40" width="112" height="40" rx="4" fill="#fff" stroke="#0f172a" />
<text x="224" y="64" text-anchor="middle" font-size="12">OrderValidator</text>
<rect x="328" y="40" width="88" height="40" rx="4" fill="#fff" stroke="#dc2626" />
<text x="372" y="64" text-anchor="middle" font-size="12">OrderRepo</text>
<rect x="456" y="40" width="96" height="40" rx="4" fill="#fff" stroke="#dc2626" />
<text x="504" y="64" text-anchor="middle" font-size="12">PricingClient</text>
<path d="M120 60 H168" stroke="#475569" fill="none" marker-end="url(#c1-arrow)" />
<path d="M280 60 H328" stroke="#475569" fill="none" marker-end="url(#c1-arrow)" />
<path class="leak seam" d="M416 60 H456" stroke-width="2" fill="none" marker-end="url(#c1-arrow)" />
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
### Hand-built boxes-and-arrows (when Mermaid's layout fights you)
### Hand-built boxes-and-arrows (when the graph needs weight)
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
Modules as `<div>`s with borders and labels. Arrows as inline SVG `<line>` or `<path>` elements positioned absolutely over a relative container. Reach for this when you want the "after" diagram to feel like one thick-bordered deep module with greyed-out internals, since Mermaid won't render that with the right weight.
Modules as `<div>`s with borders and labels. Arrows as inline SVG `<line>` or `<path>` elements positioned absolutely over a relative container. Reach for this when you want the "after" diagram to feel like one thick-bordered deep module with greyed-out internals, since a plain node graph won't carry that weight.
### Cross-section (good for layered shallowness)
### Cross-section (good for layered shallowness)
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
Stack horizontal bands (`h-12 border-l-4`) to show layers a call passes through. Before: 6 thin layers each doing nothing. After: 1 thick band labelled with the consolidated responsibility.
Stack horizontal bands (3rem tall, with a thick left border) to show layers a call passes through. Before: 6 thin layers each doing nothing. After: 1 thick band labelled with the consolidated responsibility.
### Mass diagram (good for "interface as wide as implementation")
### Mass diagram (good for "interface as wide as implementation")
5 unchanged lines
Two rectangles per module: one for interface surface area, one for implementation. Before: interface rectangle is nearly as tall as the implementation rectangle (shallow). After: interface rectangle is short, implementation rectangle is tall (deep).
Two rectangles per module: one for interface surface area, one for implementation. Before: interface rectangle is nearly as tall as the implementation rectangle (shallow). After: interface rectangle is short, implementation rectangle is tall (deep).
### Call-graph collapse
### Call-graph collapse
Before: a tree of function calls rendered as nested boxes. After: the same tree collapsed into one box, with the now-internal calls shown faded inside it.
Before: a tree of function calls rendered as nested boxes. After: the same tree collapsed into one box, with the now-internal calls shown faded inside it.
## Style guidance
## Style guidance
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
- Lean editorial, not corporate-dashboard. Generous whitespace. Serif optional for headings (`font-serif` works well with stone/slate).
- Lean editorial, not corporate-dashboard. Generous whitespace. Serif optional for headings (a serif stack works well with stone/slate).
- Colour sparingly: one accent (emerald or indigo) plus red for leakage and amber for warnings.
- Colour sparingly: one accent (emerald or indigo) plus red for leakage and amber for warnings.
- Keep diagrams ~320px tall so before/after sits comfortably side by side without scrolling.
- Keep diagrams ~320px tall so before/after sits comfortably side by side without scrolling.
dependencychangedfold-2026-09-11The report is offline-complete: embedded CSS and static inline SVG replace the Tailwind and Mermaid CDN scripts in step 2 and throughout HTML-REPORT.md (the scaffold's stylesheet, the SVG graph pattern in place of the Mermaid workhorse, the utility-class mentions, the no-scripts rule), with a network-off check before handoff and the HTML-REPORT.md passed to any delegate; greenline's consumer must open the report with no network, and HTML-REPORT.md's intro line also names the tmp home the report lives in.
- Use `text-xs uppercase tracking-wider` for module labels inside diagrams, so they read as schematic, not as UI.
- Use the `.label` treatment (small, uppercase, tracked) for module labels inside diagrams, so they read as schematic, not as UI.
- The only scripts are the Tailwind CDN and the Mermaid ESM import. The report is otherwise static: no app code, no interactivity beyond Mermaid's own rendering.
- No scripts at all. The report is static: no app code, no interactivity, and nothing fetched from a network, so it reads the same with the network off.
## Top recommendation section
## Top recommendation section
1 unchanged lines
One larger card. Candidate name, one sentence on why, anchor link to its card. That's it.
One larger card. Candidate name, one sentence on why, anchor link to its card. That's it.
Plain English, concise, but the architectural nouns and verbs come straight from the `/codebase-design` skill. Concision is not an excuse to drift.
Plain English, concise, but the architectural nouns and verbs come straight from the `codebase-design` skill. Concision is not an excuse to drift.
**Use exactly:** module, interface, implementation, depth, deep, shallow, seam, adapter, leverage, locality.
**Use exactly:** module, interface, implementation, depth, deep, shallow, seam, adapter, leverage, locality.
8 unchanged lines
**Never substitute:** component, service, unit (for module) · API, signature (for interface) · boundary (for seam) · layer, wrapper (for module, when you mean module).
**Never substitute:** component, service, unit (for module) · API, signature (for interface) · boundary (for seam) · layer, wrapper (for module, when you mean module).
**Phrasings that fit the style:**
**Phrasings that fit the style:**
- "Order intake module is shallow: interface nearly matches the implementation."
- "Order intake module is shallow: interface nearly matches the implementation."
- "Pricing leaks across the seam."
- "Pricing leaks across the seam."
- "Deepen: one interface, one place to test."
- "Deepen: one interface, one place to test."
- "Two adapters justify the seam: HTTP in prod, in-memory in tests."
- "Two adapters justify the seam: HTTP in prod, in-memory in tests."
**Wins bullets** name the gain in glossary terms: *"locality: bugs concentrate in one module"*, *"leverage: one interface, N call sites"*, *"interface shrinks; implementation absorbs the wrappers"*. Don't write *"easier to maintain"* or *"cleaner code"*, because those terms aren't in the glossary and don't earn their place.
**Wins bullets** name the gain in glossary terms: *"locality: bugs concentrate in one module"*, *"leverage: one interface, N call sites"*, *"interface shrinks; implementation absorbs the wrappers"*. Don't write *"easier to maintain"* or *"cleaner code"*, because those terms aren't in the glossary and don't earn their place.
No hedging, no throat-clearing, no "it's worth noting that…". If a sentence could be a bullet, make it a bullet. If a bullet could be cut, cut it. If a term isn't in the `/codebase-design` glossary, reach for one that is before inventing a new one.
No hedging, no throat-clearing, no "it's worth noting that…". If a sentence could be a bullet, make it a bullet. If a bullet could be cut, cut it. If a term isn't in the `codebase-design` glossary, reach for one that is before inventing a new one.