@cleartrip/frontguard 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/frontguard",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Org-wide frontend PR guardrails: linting, hygiene, any-delta, cycles, dead code, bundle/CWV hints, custom rules, optional LLM brief",
   "type": "module",
   "bin": {

package/templates/bitbucket-pipelines.yml

@@ -1,17 +1,12 @@
-# FrontGuard + PR comment (Bitbucket Cloud) — FreeKit.dev report URL
+# FrontGuard — PR comment: checks screenshot (inline) + FreeKit full report
 #
-# HTML report is uploaded to https://freekit.dev via their public API (no API key for POST /sites).
-# Docs: https://freekit.dev/docs
+# • FrontGuard renders the checks table to HTML, then to PNG using Playwright (`npx`, no apt Chromium).
+# • The PNG is embedded in the PR comment as a small base64 image (no Bitbucket Downloads / extra tokens).
+# • Full HTML report is uploaded to FreeKit; the comment links to that URL for details.
 #
-# Per-repo setup:
-# 1. Repository variable (secured): BITBUCKET_ACCESS_TOKEN — permission to comment on pull requests.
-# 2. Add @cleartrip/frontguard as a devDependency and use this file (or merge the step).
+# Secured variable: BITBUCKET_ACCESS_TOKEN — must be allowed to post pull request comments.
 #
-# API hostname for comments MUST be api.bitbucket.org (Bitbucket Cloud).
-#
-# The PR comment body is the hosted https://freekit.dev/s/... URL (one line).
-#
-# Caveats (see templates/freekit-ci-setup.md): public URL, third-party service, size/rate limits.
+# Optional: FREEKIT_BASE_URL — override FreeKit API host (default https://freekit.dev).
 
 image: node:20
 
@@ -19,28 +14,35 @@ pipelines:
   pull-requests:
     '**':
       - step:
-          name: FrontGuard – FreeKit report + PR comment
+          name: FrontGuard — report + PR comment
           caches:
             - node
           artifacts:
             - frontguard-report.html
             - frontguard-report.md
+            - frontguard-checks.html
+            - frontguard-checks.png
           script:
             - corepack enable
             - yarn install --immutable || yarn install
             - |
               yarn frontguard run --markdown \
                 --htmlOut frontguard-report.html \
+                --checksSnapshotOut frontguard-checks.html \
+                --checksPngOut frontguard-checks.png \
                 > frontguard-report.md
             - |
               python3 << 'PY'
+              import base64
               import json
               import os
               from urllib.error import HTTPError
               from urllib.request import Request, urlopen
 
-              base = os.environ.get("FREEKIT_BASE_URL", "https://freekit.dev").rstrip("/")
+              DETAILED = "For detailed check analysis, please open the full interactive report:"
+              MAX_B64 = 290_000
 
+              base = os.environ.get("FREEKIT_BASE_URL", "https://freekit.dev").rstrip("/")
               with open("frontguard-report.html", encoding="utf-8") as f:
                   html = f.read()
 
@@ -62,15 +64,25 @@ pipelines:
                   raise SystemExit(f"FreeKit error: {json.dumps(parsed)[:4000]}")
 
               data = parsed.get("data") or {}
-              url = (data.get("url") or "").strip()
-              if not url:
+              report_url = (data.get("url") or "").strip()
+              if not report_url:
                   raise SystemExit(f"FreeKit: missing data.url in {json.dumps(parsed)[:2000]}")
 
-              with open("frontguard-pr-comment.md", "w", encoding="utf-8") as out:
-                  out.write(url + "\n")
+              with open("frontguard-checks.png", "rb") as f:
+                  raw = f.read()
+              b64 = base64.standard_b64encode(raw).decode("ascii")
+              img_line = f"![FrontGuard — checks summary](data:image/png;base64,{b64})"
+              if len(img_line) > MAX_B64:
+                  raise SystemExit(
+                      f"Checks PNG too large for inline comment ({len(raw)} bytes). "
+                      "Shrink the table or raise MAX_B64 after verifying Bitbucket limits."
+                  )
 
+              body = f"{img_line}\n\n{DETAILED}\n{report_url}\n"
+              with open("frontguard-pr-comment.md", "w", encoding="utf-8") as out:
+                  out.write(body)
               with open("frontguard-payload.json", "w", encoding="utf-8") as out:
-                  json.dump({"content": {"raw": url}}, out, ensure_ascii=False)
+                  json.dump({"content": {"raw": body}}, out, ensure_ascii=False)
               PY
             - |
               test -n "${BITBUCKET_ACCESS_TOKEN:-}" || { echo "Missing secured var BITBUCKET_ACCESS_TOKEN"; exit 1; }

package/templates/checks-snapshot-bitbucket-snippet.yml

@@ -1,30 +1 @@
-# Optional fragment: PNG of the Checks table in the PR comment (Bitbucket Cloud)
-#
-# Merge into pull-requests after `frontguard run` produces:
-#   - frontguard-checks.html   (--checksSnapshotOut)
-#   - frontguard-report.html   (--htmlOut)
-#
-# Flow:
-# 1. Screenshot the minimal HTML with Playwright (Chromium).
-# 2. Upload the PNG somewhere HTTPS-public (examples below).
-# 3. export FRONTGUARD_CHECKS_IMAGE_URL='https://.../frontguard-checks.png'
-# 4. Run frontguard again with --prCommentOut (or only export + re-run snippet step) so the comment includes ![...](url).
-#
-# The PR body is Markdown: Bitbucket renders ![](https://...) images when the URL is reachable.
-
-# --- Example: screenshot + upload to Bitbucket Downloads (public file URL for repo viewers) ---
-#   - npx playwright@1.49.0 install chromium
-#   - |
-#     FILE_URL="$(node --input-type=module -e "import { pathToFileURL } from 'node:url'; console.log(pathToFileURL('frontguard-checks.html').href)")"
-#     npx playwright@1.49.0 screenshot "$FILE_URL" frontguard-checks.png --viewport-size=920,2000
-#   - |
-#     curl --silent --show-error --fail --request POST \
-#       --url "https://api.bitbucket.org/2.0/repositories/${BITBUCKET_REPO_FULL_NAME}/downloads" \
-#       --header "Authorization: Bearer ${BITBUCKET_ACCESS_TOKEN}" \
-#       --form "files=@frontguard-checks.png"
-#   # Then set FRONTGUARD_CHECKS_IMAGE_URL to the href Bitbucket returns for that file (see API response),
-#   # or construct the known downloads URL pattern for your workspace.
-#
-# --- Example: same image hosted on your CDN / object storage ---
-#   - aws s3 cp frontguard-checks.png s3://my-bucket/ci/frontguard-checks-${BITBUCKET_BUILD_NUMBER}.png --acl public-read
-#   - export FRONTGUARD_CHECKS_IMAGE_URL="https://my-bucket.s3.amazonaws.com/ci/frontguard-checks-${BITBUCKET_BUILD_NUMBER}.png"
+# Deprecated: use `templates/bitbucket-pipelines.yml` — it now uses `--checksPngOut` + inline PNG.

package/templates/freekit-ci-setup.md

@@ -1,10 +1,12 @@
 # FreeKit.dev + FrontGuard (Bitbucket Pipelines)
 
-The Bitbucket template uploads `frontguard-report.html` with **no signup or API key**, using FreeKit’s public API:
+The Bitbucket template (`templates/bitbucket-pipelines.yml`) runs FrontGuard with **`--checksPngOut`** (Playwright via `npx`), uploads the full HTML to **FreeKit**, and posts a PR comment that **inlines** the checks PNG as `data:image/png;base64,...` plus the FreeKit URL. You only need **`BITBUCKET_ACCESS_TOKEN`** with permission to **comment on pull requests** — no Repository Downloads or `repository:write`.
+
+The same step uploads `frontguard-report.html` to FreeKit’s public API:
 
 - **Docs:** [FreeKit API](https://freekit.dev/docs)
 - **Endpoint:** `POST https://freekit.dev/api/v1/sites` with JSON `{"html": "<full report html>"}`
-- **Response:** `data.url` like `https://freekit.dev/s/<siteId>` — this URL is posted as the PR comment.
+- **Response:** `data.url` like `https://freekit.dev/s/<siteId>` — this URL is included in the PR comment below the checks screenshot caption.
 
 Optional env (advanced): **`FREEKIT_BASE_URL`** — override the API host (e.g. self‑hosted instance per FreeKit docs).
 
@@ -24,24 +26,7 @@ On **Bitbucket Pipelines** pull-request builds, FrontGuard reads **`BITBUCKET_PR
 
 ## Checks table image in PR comments
 
-Bitbucket renders **`![](https://.../checks.png)`** in PR comments when the URL is public HTTPS. FrontGuard can emit a **minimal HTML** file that contains only the Checks table (same styling as the full report):
-
-```bash
-yarn frontguard run --markdown \
-  --htmlOut frontguard-report.html \
-  --checksSnapshotOut frontguard-checks.html \
-  > frontguard-report.md
-```
-
-Then:
-
-1. **Screenshot** `frontguard-checks.html` with headless Chromium (e.g. `npx playwright screenshot "<file://...>" frontguard-checks.png`).
-2. **Upload** the PNG to a reachable URL (Bitbucket Downloads API, S3, CDN, etc.).
-3. Set **`FRONTGUARD_CHECKS_IMAGE_URL`** to that URL **before** writing the PR comment (e.g. before `formatBitbucketPrSnippet` / `--prCommentOut`).
-
-The snippet places the image at the **top** of the comment and keeps the **full interactive report** link below (with a short line explaining that details are in the HTML).
-
-See **`templates/checks-snapshot-bitbucket-snippet.yml`** for merge-ready pipeline examples.
+The default pipeline uses **`--checksPngOut`** so FrontGuard runs **Playwright via `npx`** and writes `frontguard-checks.png`. A short Python step base64-embeds that image in the PR comment (no extra hosting). If the PNG is too large for Bitbucket, raise the limit in the pipeline script cautiously or host the image and set **`FRONTGUARD_CHECKS_IMAGE_URL`** with **`--prCommentOut`** instead.
 
 ## Compared to Surge