report

report: the chat card, as a standalone HTML file

One goal: the saved report looks EXACTLY like the chat cards. You never design, never write CSS; a script injects the kit.

Workflow

1. Collect content. If the user is exporting an existing card, reuse that card's CONTENT HTML verbatim, then apply only the changes they asked for (extend, add sections, more detail). Otherwise write fresh content. Building blocks only, no <style>, no <script>, no wrapper div: <h2> once as title, <p class="lead">, <h3> sections, <p>, <ul>/<ol>, <li class="ok|no">, callouts <div class="cal tip|note|warn|danger"><div>…</div></div>, <code> around every LTR token, <table> + <span class="badge ok|warn|info"> (10+ row stat tables: <table class="zebra dense">, striped + tight, combinable; 100+ rows: wrap as <div class="scroll-table"><table>...</table></div> for a scrollbox with pinned header that expands fully in print; very wide tables: <div class="scroll-table wide"> keeps cells on one line and scrolls sideways, wraps again in print), kv, grid/kpi/trend (+ optional compact caveat <div class="f"> last inside a kpi), bars (+ two-metric total/subset overlay <div class="bar duo"> with two <i> in the track, first total second subset, both colors named once in a <div class="leg"> first inside .bars: <span class="a"><i></i>total</span><span class="b"><i></i>subset</span>), spark (trend sparkline, same SVG contract as chat cards), donut, flow, tl, hub (one centre, up to eight arrowed legs; <div class="hub"><div class="c">centre<span>note</span></div><div class="s">item</div><div class="s out">item</div></div>, where out turns one leg's arrow around to separate "reads from" from "writes to"), hub tree (same markup plus tree: a root, branches and leaves, no arrows, for items that group; a branch may nest its own <div class="s"> children, and this is what nine or more items want instead of a hub), <hr>, and fold — a collapsible block <details class="fold"><summary>label</summary>…blocks…</details>, closed by default, native and JS-free, for long content the reader wants on demand (a full run log, a raw payload, a long quote); never a substitute for sections or tables. Its content is normal blocks, one level of nesting is fine, a <pre> inside wraps and scrolls vertically instead of stretching the page, and every fold prints open. Also: cards — a row of repeatable units, <div class="cards"><div class="card">…</div>…</div>, each with a free-form body (prose, a list, a kv, a badge); add c2 to the wrapper for exactly two per row, which is what a four-option comparison wants (2x2, no orphan card), and mark the recommended one <div class="card pick">. box is one full-width card for a standout block, with an optional <div class="lbl"> eyebrow label above its heading. cols — <div class="cols"> with 2-3 child <div>s side by side for pros vs cons or before vs after. <blockquote> for a real citation, with an optional <cite> line. <div class="src"> for a small caption directly under a table or chart ("source: …", "not measured"). <i class="ic NAME"></i> for a minimal icon in the brand accent, sized from the surrounding text (in an h3 it replaces the section dot, all-or-none across the report's headings); NAME is one of: check x alert info clock user file folder code terminal git db zap shield search link. <a class="preview" href="…"><b>title</b><span>one line of context</span><small>host</small></a> for a link to ANOTHER DOCUMENT, drawn as a document instead of a kv row — see Links out below. <figure><img src="shot.png" alt="..."><figcaption>caption</figcaption></figure> for a screenshot, diagram, or a /fig animation — read Images: when, and when not below before adding one. numbered — see below. All of these reflow or stack on narrow widths and print without wasting ink. ALL components are always available here (the script embeds the full kit), so unlike chat cards there are no snippets to manage. Skip CTA buttons: sendPrompt does not exist in a standalone file.
2. Write the fragment to a temp file (scratchpad), e.g. content.html.
3. Build:
   • Persian: python3 "<this skill dir>/build.py" content.html -o <target>.html
   • English: add --lang en (LTR + Inter automatically)
   • --title "..." optional; defaults to the <h2> text. Default output name if the user gave none: report-<short-slug>.html in the project directory (or the path they named).
4. Deliver: the script prints the absolute path; report it as a clickable link. Offer to open it in the browser. Do not paste the HTML into chat.