+
+ );
+}
+
+function NoProviderState() {
+ return (
+
+
+
+
+
+
+ Review the writing with AI
+
+
+
+ {jobDescription?.trim() ? (
+
+
+
+
+
+
+ {review &&
+
+ {review.summary &&
+ );
+}
diff --git a/apps/web/src/features/ats-checker/ai-review/locked-card.tsx b/apps/web/src/features/ats-checker/ai-review/locked-card.tsx
new file mode 100644
index 000000000..69560d9da
--- /dev/null
+++ b/apps/web/src/features/ats-checker/ai-review/locked-card.tsx
@@ -0,0 +1,33 @@
+import { Trans } from "@lingui/react/macro";
+import { ArrowRightIcon, SparkleIcon } from "@phosphor-icons/react";
+import { Link } from "@tanstack/react-router";
+import { Button } from "@reactive-resume/ui/components/button";
+
+/**
+ * What a signed-out visitor sees below the report. The deterministic check above is complete on
+ * its own; this is an offer, not a paywall on the result they came for.
+ */
+export function LockedAiCard() {
+ return (
+ {review.summary}
} + + {review.suggestions.length > 0 && ( +
+
+
+
+
+ )}
+
+ {review.strengths.length > 0 && (
+
+ Suggestions
+
+
+ -
+ {review.suggestions.map((suggestion) => (
+
-
+ + ++ + {suggestion.section && ( +
{suggestion.issue}
++ {impactLabel(suggestion.impact)} + ++
+ )} + + {suggestion.rewrite && ( +In {suggestion.section} ++ {suggestion.rewrite} +
+ )} +
+ ))}
+
+
+
+
+ )}
+
+ {review.jdAlignment && (
+
+ Strengths
+
+ -
+ {review.strengths.map((strength) => (
+
- {strength} + ))} +
+
+
+
+ {review.jdAlignment.verdict && (
+
+ )}
+
+
+ Against the job description
+
+
+ {review.jdAlignment.verdict && (
+ {review.jdAlignment.verdict}
+ )} + + {review.jdAlignment.missingConcepts.length > 0 && ( +
+
+ )}
+
+ {review.jdAlignment.strengths.length > 0 && (
+
+
+ {review.jdAlignment.missingConcepts.map((concept) => (
+
+ {concept}
+
+ ))}
+
+ -
+ {review.jdAlignment.strengths.map((strength) => (
+
- {strength} + ))} +
+
+ Sign in
+
+ );
+}
diff --git a/apps/web/src/features/ats-checker/extract-client.test.ts b/apps/web/src/features/ats-checker/extract-client.test.ts
new file mode 100644
index 000000000..2bfcd6a61
--- /dev/null
+++ b/apps/web/src/features/ats-checker/extract-client.test.ts
@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const pdfjsMock = vi.hoisted(() => {
+ const page = {
+ pageNumber: 1,
+ rotate: 0,
+ view: [0, 0, 595.28, 841.89],
+ commonObjs: { has: () => true, get: () => ({ name: "AAAAAA+Inter" }) },
+ getTextContent: vi.fn(async () => ({
+ items: [
+ {
+ str: "Ada Lovelace",
+ transform: [10, 0, 0, 10, 56, 780],
+ width: 60,
+ height: 10,
+ fontName: "g_d0_f1",
+ hasEOL: true,
+ },
+ ],
+ })),
+ getAnnotations: vi.fn(async () => []),
+ getOperatorList: vi.fn(async () => ({ fnArray: [], argsArray: [] })),
+ cleanup: vi.fn(),
+ };
+
+ const document = {
+ numPages: 1,
+ getPage: vi.fn(async () => page),
+ getMetadata: vi.fn(async () => ({ info: { Producer: "Test", Language: "en-GB" } })),
+ getMarkInfo: vi.fn(async () => ({ Marked: true })),
+ };
+
+ const loadingTask = { destroy: vi.fn(), promise: Promise.resolve(document) };
+
+ return {
+ document,
+ loadingTask,
+ page,
+ legacyModule: {
+ getDocument: vi.fn(() => loadingTask),
+ GlobalWorkerOptions: {} as { workerSrc?: string },
+ },
+ };
+});
+
+vi.mock("pdfjs-dist", () => {
+ throw new Error("Modern pdfjs-dist runtime should not be imported by the ATS checker.");
+});
+
+vi.mock("pdfjs-dist/legacy/build/pdf.mjs", () => pdfjsMock.legacyModule);
+
+const pdfFile = (bytes: number[], name = "resume.pdf") =>
+ new File([new Uint8Array(bytes)], name, { type: "application/pdf" });
+
+const PDF_HEADER = [0x25, 0x50, 0x44, 0x46, 0x2d, 0x31, 0x2e, 0x37];
+
+const { extractPdf, hasPdfMagicBytes, PdfTooLargeError, PdfUnreadableError } = await import("./extract-client");
+
+beforeEach(() => {
+ pdfjsMock.legacyModule.GlobalWorkerOptions.workerSrc = undefined;
+ pdfjsMock.legacyModule.getDocument.mockClear();
+ pdfjsMock.loadingTask.destroy.mockClear();
+ pdfjsMock.page.getOperatorList.mockClear();
+});
+
+describe("hasPdfMagicBytes", () => {
+ it("accepts a real PDF header and rejects anything else", async () => {
+ await expect(hasPdfMagicBytes(new Blob([new Uint8Array(PDF_HEADER)]))).resolves.toBe(true);
+ await expect(hasPdfMagicBytes(new Blob([new Uint8Array([0x50, 0x4b, 0x03, 0x04])]))).resolves.toBe(false);
+ });
+});
+
+describe("extractPdf", () => {
+ it("loads the legacy PDF.js runtime and configures its worker", async () => {
+ await extractPdf(pdfFile(PDF_HEADER));
+
+ expect(pdfjsMock.legacyModule.GlobalWorkerOptions.workerSrc).toContain(
+ "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
+ );
+ });
+
+ it("asks for the extra font properties the font checks depend on", async () => {
+ await extractPdf(pdfFile(PDF_HEADER));
+
+ expect(pdfjsMock.legacyModule.getDocument).toHaveBeenCalledWith(
+ expect.objectContaining({ data: expect.any(Uint8Array), fontExtraProperties: true }),
+ );
+ });
+
+ it("destroys the loading task once it is done", async () => {
+ await extractPdf(pdfFile(PDF_HEADER));
+
+ expect(pdfjsMock.loadingTask.destroy).toHaveBeenCalledTimes(1);
+ });
+
+ it("returns plain serialisable JSON", async () => {
+ const raw = await extractPdf(pdfFile(PDF_HEADER, "ada.pdf"));
+
+ expect(raw.file).toEqual({ name: "ada.pdf", sizeBytes: PDF_HEADER.length, magicBytesOk: true });
+ expect(raw.pages[0]?.items[0]?.str).toBe("Ada Lovelace");
+ expect(JSON.parse(JSON.stringify(raw))).toEqual(raw);
+ });
+
+ it("refuses a file that is not a PDF before loading PDF.js at all", async () => {
+ pdfjsMock.legacyModule.getDocument.mockClear();
+
+ await expect(extractPdf(pdfFile([0x50, 0x4b, 0x03, 0x04], "resume.pdf"))).rejects.toBeInstanceOf(
+ PdfUnreadableError,
+ );
+ expect(pdfjsMock.legacyModule.getDocument).not.toHaveBeenCalled();
+ });
+
+ it("refuses an oversized file before reading it into memory", async () => {
+ const huge = pdfFile(PDF_HEADER);
+ Object.defineProperty(huge, "size", { value: 40_000_000 });
+
+ await expect(extractPdf(huge)).rejects.toBeInstanceOf(PdfTooLargeError);
+ });
+
+ it("reports progress as it works", async () => {
+ const phases: string[] = [];
+ await extractPdf(pdfFile(PDF_HEADER), { onProgress: (progress) => phases.push(progress.phase) });
+
+ expect(phases[0]).toBe("loading");
+ expect(phases).toContain("text");
+ });
+});
diff --git a/apps/web/src/features/ats-checker/extract-client.ts b/apps/web/src/features/ats-checker/extract-client.ts
new file mode 100644
index 000000000..9daf8f9ef
--- /dev/null
+++ b/apps/web/src/features/ats-checker/extract-client.ts
@@ -0,0 +1,93 @@
+import type { HarvestProgress, RawExtraction } from "@reactive-resume/resume/ats-pdf";
+import { HARVEST_DEFAULTS, harvestPdfDocument } from "@reactive-resume/resume/ats-pdf";
+
+/**
+ * The only file in the app that talks to PDF.js for the ATS checker.
+ *
+ * Everything downstream works on the plain JSON this produces, which is what lets the analysis
+ * itself live in a universal package, and what would let a server or MCP adapter reuse all of it
+ * without a browser.
+ *
+ * The file never leaves the browser. It is read into an ArrayBuffer, handed to PDF.js, and the
+ * bytes are dropped when this function returns.
+ */
+
+/** Refused before PDF.js is even loaded: nothing good happens after this size in a browser tab. */
+export const MAX_UPLOAD_BYTES = 25_000_000;
+
+export type ExtractProgress = HarvestProgress | { phase: "loading"; page: 0; pageCount: 0 };
+
+export type ExtractOptions = {
+ onProgress?: (progress: ExtractProgress) => void;
+ signal?: AbortSignal;
+};
+
+export class PdfPasswordRequiredError extends Error {
+ constructor() {
+ super("This PDF is password protected.");
+ this.name = "PdfPasswordRequiredError";
+ }
+}
+
+export class PdfTooLargeError extends Error {
+ constructor(readonly sizeBytes: number) {
+ super("This PDF is too large to check in the browser.");
+ this.name = "PdfTooLargeError";
+ }
+}
+
+export class PdfUnreadableError extends Error {
+ constructor(cause?: unknown) {
+ super("This file could not be read as a PDF.");
+ this.name = "PdfUnreadableError";
+ this.cause = cause;
+ }
+}
+
+const PDF_MAGIC_BYTES = [0x25, 0x50, 0x44, 0x46] as const; // "%PDF"
+
+/** Sniffs the format from the bytes rather than trusting the extension or the reported MIME type. */
+export async function hasPdfMagicBytes(file: Blob): Promise
+
+
+
+
+
+ Want a second opinion on the writing?
+
+
+
+
+ What a person sees
+
+
+ What a parser reads
+
+
+
+
+
+
+
+ 
+
+ {/* The sweep that ties the two halves together. */}
+
+
+
+
+
+ {/* The sweep that ties the two halves together. */}
+
+ -
+ {EXTRACTED_FIELDS.map((field, index) => (
+
{children}
; +} diff --git a/apps/web/src/features/ats-checker/report/finding-row.tsx b/apps/web/src/features/ats-checker/report/finding-row.tsx new file mode 100644 index 000000000..3a2148296 --- /dev/null +++ b/apps/web/src/features/ats-checker/report/finding-row.tsx @@ -0,0 +1,54 @@ +import type { PdfFinding, PdfSeverity } from "@reactive-resume/resume/ats-pdf"; +import { match } from "ts-pattern"; +import { Badge } from "@reactive-resume/ui/components/badge"; +import { cn } from "@reactive-resume/utils/style"; +import { getPdfFindingMessage, getPdfSeverityLabel } from "../messages"; + +function severityDotClass(severity: PdfSeverity) { + return match(severity) + .with("blocker", () => "bg-rose-600") + .with("warning", () => "bg-amber-600") + .with("tip", () => "bg-sky-600") + .exhaustive(); +} + +type FindingRowProps = { + finding: PdfFinding; +}; + +export function FindingRow({ finding }: FindingRowProps) { + const message = getPdfFindingMessage(finding.code); + const evidence = finding.evidence; + + return ( +
+
+
+
+ {getPdfSeverityLabel(finding.severity)}
+
+
+
+ {(evidence?.snippet || evidence?.page !== undefined) && (
+
+
+
+ {message.title}
+{message.action}
+
+ {evidence.snippet && (
+
+ Page {evidence.page}
+
+ )}
+
+ )}
+
+ {evidence.snippet}
+
+ )}
+ {evidence.page !== undefined && (
+
+
+
+ );
+}
diff --git a/apps/web/src/features/ats-checker/report/report-view.tsx b/apps/web/src/features/ats-checker/report/report-view.tsx
new file mode 100644
index 000000000..6c6b8b60d
--- /dev/null
+++ b/apps/web/src/features/ats-checker/report/report-view.tsx
@@ -0,0 +1,163 @@
+import type { PdfAtsReport, PdfCategory, PdfCategoryScore } from "@reactive-resume/resume/ats-pdf";
+import { Trans } from "@lingui/react/macro";
+import { CheckCircleIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion";
+import { Badge } from "@reactive-resume/ui/components/badge";
+import { cn } from "@reactive-resume/utils/style";
+import { getPdfCategoryDescription, getPdfCategoryLabel } from "../messages";
+import { FindingRow } from "./finding-row";
+import { JdCoverage } from "./jd-coverage";
+import { ScoreHeader } from "./score-header";
+
+type ReportViewProps = {
+ report: PdfAtsReport;
+ className?: string;
+};
+
+function categoryTone(score: number) {
+ if (score >= 80) return "text-emerald-600";
+ if (score >= 60) return "text-amber-600";
+ return "text-rose-600";
+}
+
+/**
+ * The whole report, built compact-first so the same component serves the narrow builder sidebar
+ * and the full-width page without a second implementation.
+ */
+export function AtsPdfReportView({ report, className }: ReportViewProps) {
+ const findingsByCategory = useMemo(() => {
+ const grouped = new Map
+
+
+ {missing.length > 0 && (
+
+
+
+
+ )}
+
+ {matched.length > 0 && (
+
+
+ {missing.map((term) => (
+
+ {term.term}
+
+ ))}
+
+
+
+ )}
+
+ {jd.stuffedTerms.length > 0 && (
+
+
+ {matched.map((term) => (
+
+ {term.term}
+
+ ))}
+
+
+
+
+
+ {report.categories.map((category) => (
+
+
+ {report.jd &&
+ );
+}
+
+type CategorySectionProps = {
+ category: PdfCategoryScore;
+ findings: PdfAtsReport["findings"];
+};
+
+function CategorySection({ category, findings }: CategorySectionProps) {
+ return (
+
+
+
+ {getPdfCategoryDescription(category.category)}{" "}
+
+ Nothing to fix here.
+
+
+ ) : (
+ -
+ {findings.map((finding) => (
+
{getPdfCategoryDescription("content")}
+ + {tips.length === 0 ? ( +
+ Nothing to suggest.
+
+
+ ) : (
+ -
+ {tips.map((tip) => (
+
+
+ );
+}
diff --git a/apps/web/src/features/ats-checker/run-ats-check.ts b/apps/web/src/features/ats-checker/run-ats-check.ts
new file mode 100644
index 000000000..08e352f6d
--- /dev/null
+++ b/apps/web/src/features/ats-checker/run-ats-check.ts
@@ -0,0 +1,41 @@
+import type { PdfAtsReport } from "@reactive-resume/resume/ats-pdf";
+import type { ExtractProgress } from "./extract-client";
+import { extractPdf } from "./extract-client";
+
+export type AtsCheckResult = {
+ report: PdfAtsReport;
+ /** Extracted text in reading order. Kept for the optional AI tier; never sent anywhere on its own. */
+ fullText: string;
+};
+
+export type RunAtsCheckOptions = {
+ jobDescription?: string;
+ onProgress?: (progress: ExtractProgress) => void;
+ signal?: AbortSignal;
+};
+
+/**
+ * The whole deterministic check, end to end, in the browser.
+ *
+ * The engine is imported lazily alongside PDF.js so neither lands in the initial bundle: a visitor
+ * who never uploads a file never downloads either.
+ */
+export async function runAtsCheck(file: File, options: RunAtsCheckOptions = {}): Promise
+ {report.score}
+
+ out of 100
+
+
+
+
+
+
+
+
+
+
+ {report.passedChecks} of {report.applicableChecks} applicable checks passed
+
+
+
+ {report.skippedChecks > 0 && (
+
+
+ {report.skippedChecks} skipped
+
+
+ Some checks need information this file does not carry: page contents that could not be inspected, or
+ text in a language these checks do not cover. They are counted as neither passed nor failed.
+
+
+
+ )}
+
+
+ {cap && (
+
+
+
+
+