helg
/
wordle


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skill Analysis Report</title>
<style>
  :root {
    --bg: #0f1b2d;
    --panel: #16263d;
    --panel-2: #1d3250;
    --ink: #e9eef6;
    --ink-dim: #9fb0c7;
    --line: #294366;
    --accent: #b66d46;
    --accent-ink: #f4d9c8;
    --critical: #e05656;
    --high: #e0904a;
    --medium: #d8c24a;
    --low: #5aa0d0;
    --ok: #4caf72;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 80px; }
  header h1 { font-size: 22px; margin: 0 0 4px; }
  header .meta { color: var(--ink-dim); font-size: 13px; }
  header .meta b { color: var(--ink); font-weight: 600; }

  .banner {
    display: none;
    background: #3a1414;
    border: 1px solid var(--critical);
    color: #ffd9d9;
    padding: 14px 16px;
    border-radius: 8px;
    margin: 16px 0;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
  .banner.show { display: block; }

  .overview {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    margin: 18px 0;
  }
  .grade {
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 8px;
    text-transform: capitalize;
  }
  .grade.g-excellent { color: var(--ok); }
  .grade.g-good { color: var(--low); }
  .grade.g-fair { color: var(--medium); }
  .grade.g-poor { color: var(--critical); }
  .verdict { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
  .summary { color: var(--ink-dim); margin: 0 0 14px; }
  .counts { display: flex; flex-wrap: wrap; gap: 10px; }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-size: 13px;
  }
  .pill .dot { width: 10px; height: 10px; border-radius: 50%; }
  .pill .n { font-weight: 700; }
  .dot.critical { background: var(--critical); }
  .dot.high { background: var(--high); }
  .dot.medium { background: var(--medium); }
  .dot.low { background: var(--low); }

  /* Generic synthesis/agent-block panel */
  .block {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    margin: 18px 0;
  }
  .block > h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    margin: 0 0 12px;
  }
  .block .mono, .block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    background: var(--panel-2);
    padding: 1px 5px;
    border-radius: 4px;
  }
  .kv { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; }
  .kv dt { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
  .kv dd { margin: 0; }

  /* Themes */
  .theme { padding: 12px 0; border-top: 1px solid var(--line); }
  .theme:first-of-type { border-top: none; padding-top: 0; }
  .theme .t-head { display: flex; align-items: center; gap: 10px; }
  .theme .t-title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
  .theme .t-cause { color: var(--ink-dim); margin-top: 4px; }
  .theme .t-action { margin-top: 4px; }
  .theme .t-findings { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
  .theme .t-finding { font-size: 13px; color: var(--ink-dim); padding: 2px 0; }

  /* Strengths */
  .strength-list { margin: 0; padding-left: 20px; }
  .strength-list li { padding: 2px 0; }

  /* Recommendations */
  .rec { padding: 8px 0; border-top: 1px solid var(--line); }
  .rec:first-of-type { border-top: none; padding-top: 0; }
  .rec .rank { font-weight: 700; color: var(--accent-ink); margin-right: 8px; }
  .rec .resolves { color: var(--ink-dim); font-size: 12px; margin-left: 8px; }

  /* Experience journeys */
  .block .journey { padding: 8px 0; border-top: 1px solid var(--line); }
  .block .journey:first-of-type { border-top: none; padding-top: 0; }
  .block .journey .j-name { font-weight: 600; }
  .block .journey .j-steps { color: var(--ink-dim); margin-top: 2px; }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px;
    flex-wrap: wrap;
  }
  .toolbar .sel-count { color: var(--ink-dim); font-size: 13px; }
  button {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--ink);
    padding: 8px 14px;
  }
  button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a0e07;
    font-weight: 600;
  }
  button:disabled { opacity: 0.5; cursor: default; }
  button.link {
    background: none;
    border: none;
    color: var(--accent-ink);
    padding: 4px 6px;
    font-size: 13px;
  }
  button.small { padding: 5px 10px; font-size: 13px; flex: 0 0 auto; }

  .no-findings {
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    color: var(--ink-dim);
  }
  .no-findings .big { font-size: 18px; color: var(--ok); margin-bottom: 6px; }

  .group { margin: 18px 0; }
  .group > h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .finding {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: 8px;
    margin: 8px 0;
    overflow: hidden;
  }
  .finding.sev-critical { border-left-color: var(--critical); }
  .finding.sev-high { border-left-color: var(--high); }
  .finding.sev-medium { border-left-color: var(--medium); }
  .finding.sev-low { border-left-color: var(--low); }

  .finding .row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }
  .finding .row .chk { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
  .finding .row .head { flex: 1 1 auto; cursor: pointer; min-width: 0; }
  .finding .row .title { font-weight: 600; }
  .finding .row .sub { color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
  .finding .tag {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink-dim);
  }
  .finding .caret { flex: 0 0 auto; color: var(--ink-dim); transition: transform 0.15s; cursor: pointer; }
  .finding.open .caret { transform: rotate(90deg); }

  .finding .body {
    display: none;
    padding: 0 14px 14px 42px;
    border-top: 1px solid var(--line);
  }
  .finding.open .body { display: block; }
  .finding .body dl { margin: 12px 0 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; }
  .finding .body dt { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
  .finding .body dd { margin: 0; }
  .finding .body code, .finding .body .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    background: var(--panel-2);
    padding: 1px 5px;
    border-radius: 4px;
  }

  .toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: var(--ok);
    color: #06160c;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .toast.show { opacity: 1; }

  .fallback-area { margin-top: 12px; display: none; }
  .fallback-area.show { display: block; }
  .fallback-area textarea {
    width: 100%;
    min-height: 160px;
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>Skill Analysis Report</h1>
    <div class="meta">
      <span>Subject: <b id="m-subject">—</b></span> &nbsp;·&nbsp;
      <span>Generated: <b id="m-generated">—</b></span> &nbsp;·&nbsp;
      <span>Schema: <b id="m-schema">—</b></span>
    </div>
  </header>

  <div id="parse-banner" class="banner"></div>

  <section id="overview" class="overview" hidden>
    <div id="grade" class="grade" hidden></div>
    <p id="verdict" class="verdict"></p>
    <p id="summary-text" class="summary" hidden></p>
    <div id="counts" class="counts"></div>
  </section>

  <!-- Synthesis layer (themes, strengths, recommendations). Hidden when absent. -->
  <section id="themes" class="block" hidden></section>
  <section id="strengths" class="block" hidden></section>
  <section id="recommendations" class="block" hidden></section>

  <!-- Experience: journeys plus headless (experience). Hidden when absent. -->
  <section id="experience" class="block" hidden></section>

  <div id="toolbar" class="toolbar" hidden>
    <button id="btn-copy" class="primary" disabled>Copy selected as paste-back prompt</button>
    <span id="sel-count" class="sel-count">0 selected</span>
    <button id="btn-select-all" class="link">Select all</button>
    <button id="btn-clear" class="link">Clear</button>
    <button id="btn-expand-all" class="link">Expand all</button>
    <button id="btn-collapse-all" class="link">Collapse all</button>
  </div>

  <div id="fallback" class="fallback-area">
    <p class="sel-count">Clipboard was unavailable. Copy the text below manually:</p>
    <textarea id="fallback-text" readonly></textarea>
  </div>

  <div id="findings-root"></div>
</div>

<div id="toast" class="toast">Copied</div>

<!-- scripts/render_report.py replaces the contents of this island per run.
     The placeholder below is intentionally unusable: the shell refuses to
     render it, so a failed injection can never look like real findings. -->
<script type="application/json" id="report-data">
{
  "schema_version": 2,
  "subject": "__PLACEHOLDER__",
  "generated": "",
  "verdict": "",
  "findings": []
}
</script>

<script>
(function () {
  "use strict";

  var SEVERITIES = ["critical", "high", "medium", "low"];
  var SEV_LABEL = { critical: "Critical", high: "High", medium: "Medium", low: "Low" };
  var GRADES = ["excellent", "good", "fair", "poor"];
  var PLACEHOLDER_SUBJECT = "__PLACEHOLDER__";

  var els = {
    banner: document.getElementById("parse-banner"),
    overview: document.getElementById("overview"),
    grade: document.getElementById("grade"),
    verdict: document.getElementById("verdict"),
    summaryText: document.getElementById("summary-text"),
    counts: document.getElementById("counts"),
    themes: document.getElementById("themes"),
    strengths: document.getElementById("strengths"),
    recommendations: document.getElementById("recommendations"),
    experience: document.getElementById("experience"),
    toolbar: document.getElementById("toolbar"),
    root: document.getElementById("findings-root"),
    subject: document.getElementById("m-subject"),
    generated: document.getElementById("m-generated"),
    schema: document.getElementById("m-schema"),
    selCount: document.getElementById("sel-count"),
    btnCopy: document.getElementById("btn-copy"),
    btnSelectAll: document.getElementById("btn-select-all"),
    btnClear: document.getElementById("btn-clear"),
    btnExpandAll: document.getElementById("btn-expand-all"),
    btnCollapseAll: document.getElementById("btn-collapse-all"),
    fallback: document.getElementById("fallback"),
    fallbackText: document.getElementById("fallback-text"),
    toast: document.getElementById("toast")
  };

  var selected = Object.create(null);
  var findings = [];
  var findingsById = Object.create(null);
  var subjectPath = "";
  var standards = null;

  function showBanner(message) {
    els.banner.textContent = message;
    els.banner.classList.add("show");
  }

  function esc(value) {
    var s = value == null ? "" : String(value);
    return s.replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  // Normalize an arbitrary parsed object against schema_version 2, supplying
  // defaults so a partial or future island still renders. Unknown fields are
  // ignored, not fatal. Severity counts are always derived from the findings
  // array, never read from the island, so they cannot disagree with it. The
  // synthesis blocks (grade, summary, themes, strengths, recommendations) and
  // the experience block are OPTIONAL: each normalizes to an empty value that
  // renders nothing rather than an empty panel or an error.
  function normalize(raw) {
    var obj = raw && typeof raw === "object" ? raw : {};
    var rawFindings = Array.isArray(obj.findings) ? obj.findings : [];

    var norm = {
      schema_version: typeof obj.schema_version === "number" ? obj.schema_version : 2,
      subject: obj.subject != null ? String(obj.subject) : "(unspecified)",
      generated: obj.generated != null ? String(obj.generated) : "(unspecified)",
      verdict: obj.verdict != null ? String(obj.verdict) : "(no verdict supplied)",
      grade: GRADES.indexOf(String(obj.grade || "").toLowerCase()) >= 0
        ? String(obj.grade).toLowerCase() : "",
      summary: typeof obj.summary === "string" ? obj.summary : "",
      standards: (obj.standards && typeof obj.standards === "object") ? {
        canon: obj.standards.canon != null ? String(obj.standards.canon) : "",
        principles: obj.standards.principles != null ? String(obj.standards.principles) : "",
        scripts: obj.standards.scripts != null ? String(obj.standards.scripts) : ""
      } : null,
      themes: normalizeThemes(obj.themes),
      strengths: normalizeStrengths(obj.strengths),
      recommendations: normalizeRecommendations(obj.recommendations),
      experience: normalizeExperience(obj.experience),
      counts: { critical: 0, high: 0, medium: 0, low: 0 },
      findings: []
    };

    rawFindings.forEach(function (f, i) {
      if (!f || typeof f !== "object") { return; }
      var sev = SEVERITIES.indexOf(f.severity) >= 0 ? f.severity : "low";
      norm.findings.push({
        id: f.id != null ? String(f.id) : "finding-" + (i + 1),
        lens: f.lens != null ? String(f.lens) : "(unknown)",
        severity: sev,
        title: f.title != null ? String(f.title) : "(untitled finding)",
        location: f.location != null ? String(f.location) : "",
        evidence: f.evidence != null ? String(f.evidence) : "",
        recommendation: f.recommendation != null ? String(f.recommendation) : "",
        proposed_smallest: f.proposed_smallest != null ? String(f.proposed_smallest) : "",
        predicted_delta: f.predicted_delta != null ? String(f.predicted_delta) : ""
      });
      norm.counts[sev] += 1;
    });

    return norm;
  }

  function normalizeThemes(raw) {
    if (!Array.isArray(raw)) { return []; }
    var list = [];
    raw.forEach(function (t) {
      if (!t || typeof t !== "object") { return; }
      var ids = [];
      if (Array.isArray(t.finding_ids)) {
        t.finding_ids.forEach(function (id) { if (id != null) { ids.push(String(id)); } });
      }
      var title = t.title != null ? String(t.title) : "";
      if (!title && !ids.length) { return; }
      list.push({
        title: title || "(untitled theme)",
        root_cause: t.root_cause != null ? String(t.root_cause) : "",
        action: t.action != null ? String(t.action) : "",
        finding_ids: ids
      });
    });
    return list;
  }

  function normalizeStrengths(raw) {
    if (!Array.isArray(raw)) { return []; }
    var list = [];
    raw.forEach(function (s) {
      if (typeof s === "string" && s) { list.push(s); }
      else if (s && typeof s === "object" && s.title) {
        list.push(String(s.title) + (s.detail ? " — " + String(s.detail) : ""));
      }
    });
    return list;
  }

  function normalizeRecommendations(raw) {
    if (!Array.isArray(raw)) { return []; }
    var list = [];
    raw.forEach(function (r, i) {
      if (!r || typeof r !== "object") { return; }
      var action = r.action != null ? String(r.action) : "";
      if (!action) { return; }
      var resolves = "";
      if (Array.isArray(r.resolves)) { resolves = r.resolves.map(String).join(", "); }
      else if (typeof r.resolves === "number") { resolves = r.resolves + " findings"; }
      else if (r.resolves != null) { resolves = String(r.resolves); }
      list.push({
        rank: typeof r.rank === "number" ? r.rank : i + 1,
        action: action,
        resolves: resolves
      });
    });
    list.sort(function (a, b) { return a.rank - b.rank; });
    return list;
  }

  // Optional experience block: journeys plus a headless note. Returns null when
  // neither is usable.
  function normalizeExperience(raw) {
    if (!raw || typeof raw !== "object") { return null; }
    var journeys = [];
    if (Array.isArray(raw.journeys)) {
      raw.journeys.forEach(function (j) {
        if (!j || typeof j !== "object") { return; }
        var name = j.name != null ? String(j.name) : "";
        var steps = j.steps != null ? String(j.steps) : "";
        if (!name && !steps) { return; }
        journeys.push({ name: name, steps: steps });
      });
    }
    var headless = raw.headless != null ? String(raw.headless) : "";
    if (!journeys.length && !headless) { return null; }
    return { journeys: journeys, headless: headless };
  }

  function renderOverview(data) {
    els.subject.textContent = data.subject;
    els.generated.textContent = data.generated;
    els.schema.textContent = String(data.schema_version);
    els.verdict.textContent = data.verdict;

    if (data.grade) {
      els.grade.textContent = data.grade;
      els.grade.className = "grade g-" + data.grade;
      els.grade.hidden = false;
    }
    if (data.summary) {
      els.summaryText.textContent = data.summary;
      els.summaryText.hidden = false;
    }

    els.counts.innerHTML = "";
    SEVERITIES.forEach(function (s) {
      var pill = document.createElement("span");
      pill.className = "pill";
      pill.innerHTML =
        '<span class="dot ' + s + '"></span>' +
        '<span class="lbl">' + SEV_LABEL[s] + '</span>' +
        '<span class="n">' + data.counts[s] + "</span>";
      els.counts.appendChild(pill);
    });
    els.overview.hidden = false;
  }

  // Every copied fix prompt opens by anchoring the fixing session to the same
  // standards that produced the findings, so the fix is held to the bar too.
  function standardsPreamble() {
    if (!standards || !standards.canon) { return []; }
    var bar = standards.canon + (standards.principles ? " and " + standards.principles : "");
    var lines = [
      "Hold " + bar + " as the bar for every line you change — a fix that adds ceremony is a new finding, not a fix."
    ];
    if (standards.scripts) {
      lines.push("If the fix adds or changes scripts, follow " + standards.scripts + ".");
    }
    lines.push("");
    return lines;
  }

  function composeThemePrompt(theme, resolved) {
    var lines = standardsPreamble();
    lines.push("Fix the following theme in " + subjectPath + ": " + theme.title);
    lines.push("");
    if (theme.root_cause) { lines.push("Root cause: " + theme.root_cause); }
    if (theme.action) { lines.push("Fix: " + theme.action); }
    if (resolved.length) {
      lines.push("");
      lines.push("Findings to address:");
      resolved.forEach(function (f, i) {
        lines.push((i + 1) + ". " + f.title);
        if (f.location) { lines.push("   Location: " + f.location); }
        if (f.evidence) { lines.push("   Evidence: " + f.evidence); }
        if (f.recommendation) { lines.push("   Recommendation: " + f.recommendation); }
      });
    }
    return lines.join("\n") + "\n";
  }

  function renderThemes(themes) {
    if (!themes.length) { els.themes.hidden = true; return; }
    els.themes.innerHTML = "<h2>Themes</h2>";
    themes.forEach(function (t) {
      var resolved = t.finding_ids
        .map(function (id) { return findingsById[id]; })
        .filter(function (f) { return !!f; });
      var items = resolved.map(function (f) {
        return '<div class="t-finding"><span class="mono">' + esc(f.id) + "</span> " +
          esc(f.title) +
          (f.location ? ' · <span class="mono">' + esc(f.location) + "</span>" : "") +
          "</div>";
      }).join("");

      var node = document.createElement("div");
      node.className = "theme";
      node.innerHTML =
        '<div class="t-head"><span class="t-title">' + esc(t.title) + "</span>" +
        '<button class="small t-fix">Fix This Theme</button></div>' +
        (t.root_cause ? '<div class="t-cause">Root cause: ' + esc(t.root_cause) + "</div>" : "") +
        (t.action ? '<div class="t-action"><b>Fix:</b> ' + esc(t.action) + "</div>" : "") +
        (items ? '<div class="t-findings">' + items + "</div>" : "");
      node.querySelector(".t-fix").addEventListener("click", function () {
        copyText(composeThemePrompt(t, resolved));
      });
      els.themes.appendChild(node);
    });
    els.themes.hidden = false;
  }

  function renderStrengths(list) {
    if (!list.length) { els.strengths.hidden = true; return; }
    els.strengths.innerHTML =
      "<h2>Strengths</h2><ul class=\"strength-list\">" +
      list.map(function (s) { return "<li>" + esc(s) + "</li>"; }).join("") +
      "</ul>";
    els.strengths.hidden = false;
  }

  function renderRecommendations(recs) {
    if (!recs.length) { els.recommendations.hidden = true; return; }
    var html = "<h2>Recommendations</h2>";
    recs.forEach(function (r) {
      html += '<div class="rec"><span class="rank">#' + esc(String(r.rank)) + "</span>" +
        esc(r.action) +
        (r.resolves ? '<span class="resolves">resolves: ' + esc(r.resolves) + "</span>" : "") +
        "</div>";
    });
    els.recommendations.innerHTML = html;
    els.recommendations.hidden = false;
  }

  function renderExperience(exp) {
    if (!exp) { els.experience.hidden = true; return; }
    var html = "<h2>Experience</h2>";
    if (exp.journeys.length) {
      html += exp.journeys.map(function (j) {
        return '<div class="journey">' +
          '<div class="j-name">' + esc(j.name || "(unnamed journey)") + "</div>" +
          (j.steps ? '<div class="j-steps">' + esc(j.steps) + "</div>" : "") +
          "</div>";
      }).join("");
    }
    if (exp.headless) {
      html += '<dl class="kv" style="margin-top:12px"><dt>Headless</dt><dd>' +
        esc(exp.headless) + "</dd></dl>";
    }
    els.experience.innerHTML = html;
    els.experience.hidden = false;
  }

  function renderNoFindings() {
    els.root.innerHTML =
      '<div class="no-findings">' +
      '<div class="big">No findings</div>' +
      "<div>The scanners returned a clean pass for this subject.</div>" +
      "</div>";
  }

  function findingNode(f) {
    var node = document.createElement("div");
    node.className = "finding sev-" + f.severity;
    node.setAttribute("data-id", f.id);

    var sub =
      esc(f.lens) +
      (f.location ? ' · <span class="mono">' + esc(f.location) + "</span>" : "");

    var rows =
      "<dt>Lens</dt><dd>" + esc(f.lens) + "</dd>" +
      (f.location ? "<dt>Location</dt><dd><code>" + esc(f.location) + "</code></dd>" : "") +
      (f.evidence ? "<dt>Evidence</dt><dd>" + esc(f.evidence) + "</dd>" : "") +
      (f.recommendation ? "<dt>Recommendation</dt><dd>" + esc(f.recommendation) + "</dd>" : "") +
      (f.proposed_smallest ? "<dt>Proposed smallest</dt><dd>" + esc(f.proposed_smallest) + "</dd>" : "") +
      (f.predicted_delta ? "<dt>Predicted delta</dt><dd>" + esc(f.predicted_delta) + "</dd>" : "");

    node.innerHTML =
      '<div class="row">' +
      '<input type="checkbox" class="chk" aria-label="Select finding">' +
      '<div class="head">' +
      '<div class="title">' + esc(f.title) + "</div>" +
      '<div class="sub">' + sub + "</div>" +
      "</div>" +
      '<span class="tag">' + SEV_LABEL[f.severity] + "</span>" +
      '<span class="caret">▸</span>' +
      "</div>" +
      '<div class="body"><dl>' + rows + "</dl></div>";

    var chk = node.querySelector(".chk");
    chk.checked = !!selected[f.id];
    chk.addEventListener("change", function () {
      if (chk.checked) { selected[f.id] = true; } else { delete selected[f.id]; }
      updateSelection();
    });

    var head = node.querySelector(".head");
    var caret = node.querySelector(".caret");
    function toggle() { node.classList.toggle("open"); }
    head.addEventListener("click", toggle);
    caret.addEventListener("click", toggle);

    return node;
  }

  function renderFindings(list) {
    els.root.innerHTML = "";
    if (list.length === 0) {
      renderNoFindings();
      els.toolbar.hidden = true;
      return;
    }
    els.toolbar.hidden = false;

    SEVERITIES.forEach(function (sev) {
      var group = list.filter(function (f) { return f.severity === sev; });
      if (group.length === 0) { return; }
      var wrap = document.createElement("div");
      wrap.className = "group";
      var h = document.createElement("h2");
      h.innerHTML = '<span class="dot ' + sev + '"></span>' + SEV_LABEL[sev] + " (" + group.length + ")";
      wrap.appendChild(h);
      group.forEach(function (f) { wrap.appendChild(findingNode(f)); });
      els.root.appendChild(wrap);
    });
  }

  function updateSelection() {
    var n = Object.keys(selected).length;
    els.selCount.textContent = n + " selected";
    els.btnCopy.disabled = n === 0;
  }

  function composePrompt() {
    var picked = findings.filter(function (f) { return selected[f.id]; });
    if (picked.length === 0) { return ""; }
    var lines = standardsPreamble();
    lines.push("Fix the following issues in " + subjectPath + ":");
    lines.push("");
    picked.forEach(function (f, i) {
      lines.push((i + 1) + ". " + f.title);
      if (f.location) { lines.push("   Location: " + f.location); }
      if (f.evidence) { lines.push("   Evidence: " + f.evidence); }
      if (f.recommendation) { lines.push("   Recommendation: " + f.recommendation); }
      if (f.proposed_smallest) { lines.push("   Proposed smallest: " + f.proposed_smallest); }
      lines.push("");
    });
    return lines.join("\n").replace(/\n+$/, "\n");
  }

  function showToast(text) {
    els.toast.textContent = text;
    els.toast.classList.add("show");
    setTimeout(function () { els.toast.classList.remove("show"); }, 1600);
  }

  function fallbackCopy(text) {
    els.fallbackText.value = text;
    els.fallback.classList.add("show");
    els.fallbackText.focus();
    els.fallbackText.select();
    try {
      var ok = document.execCommand && document.execCommand("copy");
      if (ok) {
        showToast("Copied");
        return;
      }
    } catch (e) { /* fall through to manual */ }
    showToast("Copy the text shown below");
  }

  function copyText(text) {
    if (!text) { return; }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(
        function () { showToast("Copied"); },
        function () { fallbackCopy(text); }
      );
    } else {
      fallbackCopy(text);
    }
  }

  function doCopy() {
    copyText(composePrompt());
  }

  function wireToolbar() {
    els.btnCopy.addEventListener("click", doCopy);
    els.btnSelectAll.addEventListener("click", function () {
      findings.forEach(function (f) { selected[f.id] = true; });
      document.querySelectorAll(".finding .chk").forEach(function (c) { c.checked = true; });
      updateSelection();
    });
    els.btnClear.addEventListener("click", function () {
      selected = Object.create(null);
      document.querySelectorAll(".finding .chk").forEach(function (c) { c.checked = false; });
      els.fallback.classList.remove("show");
      updateSelection();
    });
    els.btnExpandAll.addEventListener("click", function () {
      document.querySelectorAll(".finding").forEach(function (n) { n.classList.add("open"); });
    });
    els.btnCollapseAll.addEventListener("click", function () {
      document.querySelectorAll(".finding").forEach(function (n) { n.classList.remove("open"); });
    });
  }

  function init() {
    var island = document.getElementById("report-data");
    var parsed;
    try {
      if (!island) { throw new Error("report-data island element not found"); }
      parsed = JSON.parse(island.textContent);
    } catch (err) {
      showBanner(
        "Could not parse the report data island.\n\n" +
        "Error: " + (err && err.message ? err.message : String(err)) + "\n\n" +
        "The findings could not be rendered. The JSON inside the " +
        'report-data island (the application/json script tag) is malformed.'
      );
      return;
    }

    var data = normalize(parsed);

    if (data.subject === PLACEHOLDER_SUBJECT) {
      els.subject.textContent = data.subject;
      showBanner(
        "This is the unfilled report shell.\n\n" +
        "The report-data island still carries the placeholder subject, so " +
        "there are no findings here. Generate a real report with " +
        "scripts/render_report.py."
      );
      return;
    }

    findings = data.findings;
    subjectPath = data.subject;
    standards = data.standards;
    findingsById = Object.create(null);
    findings.forEach(function (f) { findingsById[f.id] = f; });

    renderOverview(data);
    renderThemes(data.themes);
    renderStrengths(data.strengths);
    renderRecommendations(data.recommendations);
    renderExperience(data.experience);
    renderFindings(findings);
    wireToolbar();
    updateSelection();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();
</script>
</body>
</html>