/* Mesh — Product page: "The agentic close" section. Recreates the v5 "trust & governance layer" stages (Aggregate · Standardize · Estimate · Audit) as a HORIZONTAL-SCROLL track: the four product panels sit side-by-side in a scroll-snap rail; the stage tabs above are clickable and stay in sync with the scroll position. */ const AG_STAGES = [ { t: 'Aggregate', s: 'every signal source' }, { t: 'Standardize', s: 'map & clean every column' }, { t: 'Estimate', s: 'with auditable logic' }, { t: 'Audit', s: 'every change traced' }, ]; /* ---------- 1 · Aggregate ---------- */ const AG_PREFS = [ { t: 'Purchase Orders', s: 'PO line items, vendors, and committed amounts', auto: true, query: true }, { t: 'Invoices', s: 'Vendor invoices matched against open POs', auto: true }, { t: 'Internal Outreach', s: 'Cost-estimate requests sent to internal DRIs', auto: false }, { t: 'Vendor Outreach', s: 'Invoice-confirmation outreach sent to vendors', auto: false }, { t: 'Exclusion Criteria', s: 'Rules for POs excluded from the accrual', auto: false }, ]; function AggregatePanel({ focus = -1 }) { const fi = focus < 0 ? -1 : Math.round(focus / 3 * (AG_PREFS.length - 1)); return (
Integrations NetSuite Connected
N Data preferences

Which workbook sheets NetSuite feeds — uploaded by hand (Manual) or pulled automatically (Automated).

{AG_PREFS.map((p, idx) => (
{p.t}{p.query && View query}
{p.s}
Manual Automated
))}
); } /* ---------- 2 · Standardize ---------- */ const AG_MAP = [ ['po_line', 'PO + Line', 'string', 'Unique purchase order line identifier'], ['supplier_id', 'Supplier #', 'string', 'Numeric supplier reference from your ERP'], ['supplier_name', 'Supplier Name', 'string', 'Full legal name of the supplier'], ['item_descr', 'Item', 'string', 'Short description of goods or services'], ['dept', 'Department', 'string', 'Owning business unit / department'], ['contact_name', 'Name', 'string', 'Primary internal contact for outreach'], ['contact_email', 'Email', 'string', 'Email address used to send outreach'], ['contact_role', 'Role', 'string', 'Title or function of the contact'], ['svc_provided', 'Service Provided', 'string', 'Whether services were rendered for this PO line — yes/no'], ['cost_estimate_usd', 'Cost Estimate', 'money', 'DRI-provided estimate of the cost amount in USD'], ]; function StandardizePanel({ focus = -1 }) { const fi = focus < 0 ? -1 : Math.round(focus / 3 * (AG_MAP.length - 1)); return (
Match columns to Mesh fields

We've matched 10 of 10 columns automatically. Review or edit before saving.

Required fields — Mesh has identified the required fields for Purchase Orders. Unmapped required fields will block save.
10 columns in file 10 auto-mapped 0 unmapped 528 rows detected
Column HeaderMesh_NameTypeBusiness Context
{AG_MAP.map(([col, name, type, ctx], idx) => (
{col} {name} {type} {ctx}
))}
8 auto-mapped · 2 inferred by Mesh AI
); } /* ---------- 3 · Estimate ---------- */ const AG_EST = [ { po: '6577-1', frac: 6 / 6, hc: '6/6', ok: true, amt: '$456,000.00', exp: 'Straight-line calculation', mesh: true, prep: 'Mesh', rev: 'Erin C.', line: '456,000.00' }, { po: '7646-1', frac: 5 / 6, hc: '5/6', ok: false, amt: '$101,600.00', exp: 'Estimated using $12,700.00 last month invoice with 8x multiplier', mesh: false, prep: 'Sarah K.', rev: 'Sarah L.', line: '174,800.00' }, { po: '2294-1', frac: 5 / 6, hc: '5/6', ok: false, amt: '$41,377.00', exp: 'Estimated using $5,911.00 last month invoice with 7x multiplier', mesh: true, prep: 'Mesh', rev: 'Erin C.', line: '95,916.00' }, { po: '6679-1', frac: 5 / 6, hc: '5/6', ok: false, amt: '$183,440.00', amtGreen: true, meshExp: true, exp: 'Estimated using $34,764.00 last month invoice with 8x multiplier', mesh: true, prep: 'Mesh', rev: 'Erin C.', line: '220,704.00' }, ]; function Ring({ frac, color }) { const r = 6, C = 2 * Math.PI * r; return ( ); } function EstimatePanel({ focus = -1 }) { const fi = focus < 0 ? -1 : Math.round(focus / 3 * (AG_EST.length - 1)); return (
Expense Accruals · May 2026
PO + LineHealthMesh Accrual AmountMesh Explanation PreparerReviewerStatusLine Total
{AG_EST.map((r, idx) => (
{r.po} {r.hc} {r.amt} {r.meshExp && } {r.exp} {r.mesh && } {r.prep} {r.rev} Ready for Review {r.line}
))}
); } /* ---------- 4 · Audit ---------- */ const AG_AUD_LIST = [ ['7646-1', 'Atlas Partners Group'], ['6679-1', 'Nexus Industrial USA'], ['2333-1', 'Vertex Manufacturing LLC', true], ['2380-1', 'Vertex Industries USA'], ['6577-1', 'Nexus Partners Worldwide'], ['2294-1', 'Vertex Systems Co.'], ]; const AG_TL = [ { head: 'Data imported · Apr 23, 2026 · 10:51 AM', by: 'Created by: Mesh', rows: [{ t: 'Row was created in the system' }, { t: 'Source: File upload • Acme Accruals — Purchase Orders (5).csv', mut: true }] }, { head: 'Computed result · Apr 23, 2026 · 10:51 AM', by: 'Created by: Mesh', diffs: [['Mesh Accrual', '$9,000.00'], ['Explanation', 'Booked via project cost accounting module']] }, { head: 'Updated · Apr 23, 2026 · 10:52 AM', by: 'Updated by: Erin C. · Controller', status: ['Needs Review', 'Reviewed – Comments'] }, { head: 'Updated (Current) · Apr 23, 2026 · 10:52 AM', by: 'Updated by: Mesh Admin', rows: [{ t: 'No changes detected', mut: true }] }, ]; function AuditPanel({ focus = -1 }) { const fi = focus < 0 ? -1 : Math.round(focus / 3 * (AG_TL.length - 1)); return (
Expense Accruals · May 2026
PO + LineVendor
{AG_AUD_LIST.map(([po, v, sel]) => (
{po}{v}
))}
2333-1
Vertex Manufacturing LLC · Customer Success
{['Details', 'Invoices 5', 'Comments 1', 'Emails', 'Activity'].map((t, i) => ( {t} ))}
{AG_TL.map((e, i) => (
{e.head}
{e.by}
{e.rows && e.rows.map((r, j) =>
{r.t}
)} {e.diffs && (
{e.diffs.map(([k, val]) => (
{k}—→{val}
))}
)} {e.status && (
Status{e.status[0]}→{e.status[1]}
)}
))}
); } const AG_PANELS = [AggregatePanel, StandardizePanel, EstimatePanel, AuditPanel]; const AG_DWELL = 4800; // ms each stage holds before auto-advancing const FOCUS_STEPS = 4; // components highlighted per stage before advancing const FOCUS_DWELL = AG_DWELL / FOCUS_STEPS; function AgenticClose() { const [active, setActive] = React.useState(0); const [focus, setFocus] = React.useState(0); const [playing, setPlaying] = React.useState(true); const trackRef = React.useRef(null); const secRef = React.useRef(null); const lock = React.useRef(false); const inView = React.useRef(false); const resumeTimer = React.useRef(null); const activeRef = React.useRef(0); const focusRef = React.useRef(0); React.useEffect(() => { activeRef.current = active; }, [active]); React.useEffect(() => { focusRef.current = focus; }, [focus]); // Pause autoplay on manual interaction, then resume after a short idle. const nudge = () => { setPlaying(false); clearTimeout(resumeTimer.current); resumeTimer.current = setTimeout(() => setPlaying(true), 9000); }; // Only autoplay while the section is on screen. React.useEffect(() => { const el = secRef.current; if (!el || typeof IntersectionObserver === 'undefined') { inView.current = true; return; } const obs = new IntersectionObserver( (es) => es.forEach(e => { inView.current = e.isIntersecting; }), { threshold: 0.35 }); obs.observe(el); return () => obs.disconnect(); }, []); // Autoplay loop: step through each stage's components, then advance the stage. React.useEffect(() => { if (!playing) return; const id = setInterval(() => { if (!inView.current || document.hidden || lock.current) return; const nf = focusRef.current + 1; if (nf >= FOCUS_STEPS) { setFocus(0); goTo((activeRef.current + 1) % AG_PANELS.length); } else { setFocus(nf); } }, FOCUS_DWELL); return () => clearInterval(id); }, [playing]); const goTo = (i) => { const track = trackRef.current; if (!track) return; lock.current = true; setActive(i); // This engine ignores scrollTo({behavior:'smooth'}) on the rail, and // mandatory snap reverts mid-tween values — so disable snap and animate // scrollLeft by hand, then restore snap for manual swipes. track.style.scrollSnapType = 'none'; const start = track.scrollLeft; const target = i * track.clientWidth; const t0 = (typeof performance !== 'undefined' ? performance.now() : Date.now()); const dur = 460; const ease = (t) => 1 - Math.pow(1 - t, 3); cancelAnimationFrame(lock.raf); const step = (now) => { const p = Math.min(1, (now - t0) / dur); track.scrollLeft = start + (target - start) * ease(p); if (p < 1) { lock.raf = requestAnimationFrame(step); } else { track.scrollLeft = target; track.style.scrollSnapType = ''; lock.current = false; } }; lock.raf = requestAnimationFrame(step); }; const onScroll = () => { const track = trackRef.current; if (!track || lock.current) return; const i = Math.round(track.scrollLeft / track.clientWidth); setActive(Math.max(0, Math.min(AG_PANELS.length - 1, i))); }; const jump = (i) => { nudge(); setFocus(0); goTo(i); }; return (
The agentic close

The trust and governance layer for your agentic close

{AG_STAGES.map((s, i) => ( ))}
{AG_PANELS.map((P, i) => (

))}
{AG_PANELS.map((_, i) => ( ))}
); } Object.assign(window, { AgenticClose });