// doc-provenance.jsx — "where did this number come from?" viewer. // Renders the original PDF and highlights the source line of each parsed item, // so extracted data can be double-checked against the document at a glance. // // No parser/prompt changes: the viewer re-reads the PDF text layer (which // carries page + x/y for every glyph run), reconstructs lines with the same // Y-grouping the parser uses, then locates each item by scoring lines on // description tokens, SKU, and the qty/unit/amount numbers. Works on the // in-memory file right after upload AND retroactively on stored invoices // via their Firebase Storage _fileUrl. // // Pure logic (pdfSourceOf / extractDocLines / locateItemLines) lives in // doc-provenance-core.js so Node tests can run it against real PDFs. // ── shared document loader ────────────────────────────────────────────────── // Loads a document's PDF, reconstructs its text-layer lines, and locates ALL // items at once (locateAllItems — cross-item claiming prevents the highlight // of one row from bleeding onto a sibling's description line). Cached at // module scope per file so the trace modal and every row snippet share one // parse per document for the whole page session. const _docSourceCache = new Map(); function loadDocSources(doc) { const src = pdfSourceOf(doc); if (!src) return Promise.reject(new Error('No PDF available for this document.')); const key = (doc._fileUrl || doc._fileName || doc.id) + (src.file ? '#local' : '#remote'); if (!_docSourceCache.has(key)) { const p = (async () => { const param = src.file ? { data: await src.file.arrayBuffer(), isEvalSupported: false } // CVE-2024-4367 mitigation : { url: src.url, isEvalSupported: false }; const pdf = await pdfjsLib.getDocument(param).promise; const docLines = await extractDocLines(pdf); const locs = locateAllItems(doc.items || [], docLines); return { pdf, docLines, locs }; })(); p.catch(() => _docSourceCache.delete(key)); // don't cache failures _docSourceCache.set(key, p); } return _docSourceCache.get(key); } // A bare "Failed to fetch" means the stored PDF was loaded over the network // (no in-session File) and the cross-origin request to Firebase Storage was // blocked — usually a missing bucket CORS policy. const _loadErrMsg = (e) => /failed to fetch|load failed|networkerror/i.test(e?.message || '') ? "Couldn't fetch the stored PDF. Tracing reads the file you uploaded this session — re-upload it here to trace, or add a CORS policy to the Firebase Storage bucket so saved PDFs can be fetched." : (e?.message || 'Could not load the PDF.'); // ── modal viewer ──────────────────────────────────────────────────────────── function DocProvenanceModal({ invoice, onClose }) { const [pdf, setPdf] = React.useState(null); const [docLines, setLines] = React.useState(null); const [locs, setLocs] = React.useState(null); const [err, setErr] = React.useState(null); const [sel, setSel] = React.useState(0); const [pageNum, setPageNum] = React.useState(1); const [vp, setVp] = React.useState(null); // current page viewport (CSS px) const canvasRef = React.useRef(null); const scrollRef = React.useRef(null); const renderTask = React.useRef(null); // Load document + reconstruct lines + locate items once (shared cache). React.useEffect(() => { let dead = false; loadDocSources(invoice) .then(({ pdf, docLines, locs }) => { if (dead) return; setPdf(pdf); setLines(docLines); setLocs(locs); }) .catch((e) => { if (!dead) setErr(_loadErrMsg(e)); }); return () => { dead = true; }; }, [invoice]); const selLines = (locs && locs[sel] ? locs[sel] : []).map((i) => docLines[i]); // Jump to the selected item's page. React.useEffect(() => { if (selLines.length) setPageNum(selLines[0].page); }, [sel, locs]); // Render the current page to canvas (devicePixelRatio-aware). React.useEffect(() => { if (!pdf || !canvasRef.current) return; let dead = false; (async () => { try { const page = await pdf.getPage(pageNum); const cw = (scrollRef.current?.clientWidth || 820) - 24; const scale = Math.min(2, cw / page.getViewport({ scale: 1 }).width); const view = page.getViewport({ scale }); const dpr = window.devicePixelRatio || 1; const canvas = canvasRef.current; if (!canvas || dead) return; canvas.width = Math.floor(view.width * dpr); canvas.height = Math.floor(view.height * dpr); canvas.style.width = `${view.width}px`; canvas.style.height = `${view.height}px`; renderTask.current?.cancel?.(); renderTask.current = page.render({ canvasContext: canvas.getContext('2d'), viewport: view, transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : null, }); await renderTask.current.promise; if (!dead) setVp(view); } catch (e) { if (e?.name !== 'RenderingCancelledException' && !dead) setErr(e.message); } })(); return () => { dead = true; }; }, [pdf, pageNum]); // Highlight rectangles for the selected item on the current page (CSS px). const rects = React.useMemo(() => { if (!vp) return []; return selLines .filter((ln) => ln.page === pageNum) .map((ln) => { const r = vp.convertToViewportRectangle([ln.x0, ln.y0, ln.x1, ln.y1]); return { left: Math.min(r[0], r[2]), top: Math.min(r[1], r[3]), width: Math.abs(r[2] - r[0]), height: Math.abs(r[3] - r[1]), }; }); }, [vp, sel, locs, pageNum]); // Bring the first highlight into view after each render. React.useEffect(() => { if (rects.length && scrollRef.current) { scrollRef.current.scrollTo({ top: Math.max(0, rects[0].top - 120), behavior: 'smooth' }); } }, [rects]); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const numPages = pdf?.numPages || 1; const items = invoice.items || []; return (
{ if (e.target === e.currentTarget) onClose(); }}>
{invoice._fileName || invoice.id} click a line item to see where it was read from
{pageNum} / {numPages}
{items.map((it, i) => { const located = locs ? (locs[i] || []).length > 0 : null; return ( ); })} {items.length === 0 &&
No line items.
}
{err ? (
{err}
) : !pdf ? (
Loading document…
) : (
{rects.map((r, k) => (
))} {locs && locs[sel] && locs[sel].length === 0 && (
Couldn’t locate this item in the text layer — it may be wrapped across lines or the PDF may be a scan (no embedded text).
)}
)}
); } const DocProvenanceStyles = () => ( ); // ── row source snippets ───────────────────────────────────────────────────── // Inline "where did this number come from?" panes for a budget row: a cropped // strip of the original PDF around the located line, with the highlight, for // the quote AND each invoice the row drew from. Falls back to the parsed // values when a document has no PDF (pasted text / spreadsheet) or the line // can't be located in the text layer. // Items inside budget rows are matcher clones — recover their index in the // source document so the cached whole-document locations can be looked up. function _itemIndexIn(doc, item) { if (typeof item._qIndex === 'number') return item._qIndex; const m = /::(\d+)$/.exec(item._id || ''); if (m) return +m[1]; return (doc.items || []).findIndex((it) => it.desc === item.desc && it.qty === item.qty && (it.sku || '') === (item.sku || '')); } function PdfSnippet({ kind, doc, item }) { const [state, setState] = React.useState({ status: 'loading' }); const [hl, setHl] = React.useState([]); // highlight rects within the crop const [pageNo, setPage] = React.useState(null); const wrapRef = React.useRef(null); const canvasRef = React.useRef(null); React.useEffect(() => { let dead = false; (async () => { try { if (!pdfSourceOf(doc)) { setState({ status: 'nopdf' }); return; } const { pdf, docLines, locs } = await loadDocSources(doc); if (dead) return; const idx = _itemIndexIn(doc, item); const lineIdxs = (idx >= 0 && locs[idx]) || []; if (!lineIdxs.length) { setState({ status: 'notfound' }); return; } const lines = lineIdxs.map((i) => docLines[i]); const pageNum = lines[0].page; const page = await pdf.getPage(pageNum); if (dead) return; // Full page width (rows span it), vertically cropped to the located // lines plus ~one neighboring row of context on each side. const cw = wrapRef.current?.clientWidth || 560; const scale = cw / page.getViewport({ scale: 1 }).width; const view = page.getViewport({ scale }); const rects = lines.filter((ln) => ln.page === pageNum).map((ln) => { const r = view.convertToViewportRectangle([ln.x0, ln.y0, ln.x1, ln.y1]); return { left: Math.min(r[0], r[2]), top: Math.min(r[1], r[3]), width: Math.abs(r[2] - r[0]), height: Math.abs(r[3] - r[1]), }; }); const pad = 22; const top = Math.max(0, Math.min(...rects.map((r) => r.top)) - pad); const bottom = Math.min(view.height, Math.max(...rects.map((r) => r.top + r.height)) + pad); const dpr = window.devicePixelRatio || 1; const canvas = canvasRef.current; if (!canvas) return; canvas.width = Math.floor(view.width * dpr); canvas.height = Math.floor((bottom - top) * dpr); canvas.style.width = `${view.width}px`; canvas.style.height = `${bottom - top}px`; await page.render({ canvasContext: canvas.getContext('2d'), viewport: view, transform: [dpr, 0, 0, dpr, 0, -top * dpr], }).promise; if (dead) return; setHl(rects.map((r) => ({ ...r, top: r.top - top }))); setPage(pageNum); setState({ status: 'ok' }); } catch (e) { if (e?.name !== 'RenderingCancelledException' && !dead) { setState({ status: 'err', msg: _loadErrMsg(e) }); } } })(); return () => { dead = true; }; }, [doc, item]); const { status } = state; const parsedLine = [ item.qty != null ? `${item.qty.toLocaleString()}${item.uom ? ' ' + item.uom : ''}` : null, item.unit != null ? `@ ${fmtUSD(item.unit)}` : null, item.desc, ].filter(Boolean).join(' · '); return (
{kind === 'quote' ? 'Quote' : 'Invoice'} {doc._fileName || doc.id} {status === 'ok' && pageNo != null && p. {pageNo}}
{hl.map((r, k) => (
))}
{status === 'loading' &&
Loading source…
} {status !== 'ok' && status !== 'loading' && (
{parsedLine}
{status === 'nopdf' && 'No PDF for this document — values above are as parsed.'} {status === 'notfound' && 'Couldn’t locate this line on the PDF (it may be wrapped oddly or a scan).'} {status === 'err' && state.msg}
)}
); } // One pane per source document the row touches: the quote line (when the row // is on the quote) and each invoice line it drew from. Rows that exist on // only one side naturally show just that side. function RowSourcePanel({ row, quote, invoices }) { // attachLocalFile clones the doc, so memoize — otherwise every parent // re-render changes doc identity and the snippets reload for nothing. const srcs = React.useMemo(() => { const out = []; if (row.quoteItem && quote) { out.push({ key: 'q', kind: 'quote', doc: attachLocalFile(quote), item: row.quoteItem }); } (row.breakdown || []).forEach((b, i) => { if (!b.srcItem) return; const inv = (invoices || []).find((iv) => iv.id === b.invoiceId); if (inv) out.push({ key: `i${i}`, kind: 'invoice', doc: attachLocalFile(inv), item: b.srcItem }); }); return out; }, [row, quote, invoices]); if (srcs.length === 0) return null; return (
1 ? 'rsp-multi' : ''}`}> {srcs.map((s) => )}
); } const RowSourceStyles = () => ( ); Object.assign(window, { DocProvenanceModal, RowSourcePanel, loadDocSources });