// Caliber — Interactive demos for /ai-principles. // Three small demos that prove the items in the "What AI does" list: // 1) Scout search (imports ScoutDemo from product-mocks.jsx) // 2) JD draft — role brief → animated JD text // 3) CV parsing — CV card → candidate record fields populating // // Each demo is self-contained, no network calls, pre-baked data. They // respect the existing typing/fade-in idioms used elsewhere in the codebase. // // Exports: const AIPD_MONO = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace'; /* ══════════════════════════════════════════════════════════════ JD DRAFT DEMO ══════════════════════════════════════════════════════════════ */ const JD_ROLE = 'Senior React Engineer'; const JD_MUSTHAVES = ['React', 'TypeScript', '5+ years', 'Auckland']; const JD_LINES = [ { kind: 'h', text: 'About the role' }, { kind: 'p', text: "We're a Series-A Auckland fintech building tools used by 40,000 recruiters across Aotearoa and Australia. We're looking for a Senior React Engineer to join the product team." }, { kind: 'h', text: "What you'll do" }, { kind: 'li', text: 'Build user-facing features in React and TypeScript' }, { kind: 'li', text: 'Partner with design and product to ship well-crafted UI' }, { kind: 'li', text: 'Own a shared component library used across the product' }, { kind: 'h', text: "What we're looking for" }, { kind: 'li', text: '5+ years in a senior front-end role' }, { kind: 'more', text: '+ 12 more lines — responsibilities, benefits, how to apply. You edit anything before it ships.' }, ]; function JDDraftDemo() { const [phase, setPhase] = React.useState('idle'); // idle | writing | done const [revealed, setRevealed] = React.useState(0); const start = React.useCallback(() => { if (phase !== 'idle') return; setPhase('writing'); setRevealed(0); let i = 0; const tick = () => { i += 1; setRevealed(i); if (i < JD_LINES.length) { setTimeout(tick, 260); } else { setPhase('done'); } }; setTimeout(tick, 320); }, [phase]); const reset = () => { setPhase('idle'); setRevealed(0); }; return (
{/* Header */}
Draft a job advert
{/* Inputs */}
Role
{JD_ROLE}
Must haves
{JD_MUSTHAVES.map(m => ( {m} ))}
{/* CTA / state */} {phase === 'idle' ? ( ) : (
{phase === 'writing' ? ( <> Drafting… ) : ( <> Draft ready — you edit before it goes live. )}
)} {/* Output — fixed min-height so page doesn't grow as lines animate in */}
{phase === 'idle' ? ( // Idle state — faded preview of first 3 lines so the box isn't empty
About the role
A modern platform used by 40,000 recruiters across Aotearoa and Australia…
What you'll do
– Build user-facing features in React and TypeScript
Click "Draft the advert" to generate a real first draft.
) : ( <> {JD_LINES.slice(0, revealed).map((ln, i) => ( ln.kind === 'h' ? (
{ln.text}
) : ln.kind === 'li' ? (
– {ln.text}
) : ln.kind === 'more' ? (
{ln.text}
) : (
{ln.text}
) ))} {phase === 'writing' && ( ▍ )} )}
); } /* ══════════════════════════════════════════════════════════════ CV PARSING DEMO ══════════════════════════════════════════════════════════════ */ const CV_FIELDS = [ { label: 'Name', value: 'Kate Morrison' }, { label: 'Current role', value: 'Senior Software Engineer' }, { label: 'Employer', value: 'Xero' }, { label: 'Location', value: 'Wellington, New Zealand' }, { label: 'Seniority', value: 'Senior (8 yrs)' }, { label: 'Skills', value: 'React · TypeScript · Node.js · PostgreSQL' }, ]; function CVParsingDemo() { const [phase, setPhase] = React.useState('idle'); const [filled, setFilled] = React.useState(0); const start = React.useCallback(() => { if (phase !== 'idle') return; setPhase('parsing'); setFilled(0); let i = 0; const tick = () => { i += 1; setFilled(i); if (i < CV_FIELDS.length) { setTimeout(tick, 220); } else { setPhase('done'); } }; setTimeout(tick, 400); }, [phase]); const reset = () => { setPhase('idle'); setFilled(0); }; return (
{/* Header */}
Parse a CV
{/* Split: CV preview | field panel */}
{/* CV card */}
kate-morrison.pdf
Kate Morrison
kate.morrison@example.com · 021 400 400 · Wellington, NZ
Experience
Senior Software Engineer, Xero
2019 – present · Wellington
React + TypeScript frontend. Design system. Shared component library.
Full Stack Engineer, Pushpay
2016 – 2019 · Auckland
Graduate Developer, Catalyst IT
2014 – 2016 · Wellington
Skills
React · TypeScript · Node.js · PostgreSQL · GraphQL
{/* Field panel */}
Candidate record {filled}/{CV_FIELDS.length}
{CV_FIELDS.map((f, i) => { const isFilled = i < filled; return (
{f.label}
{isFilled ? f.value : '—'}
); })}
{/* CTA / state */} {phase === 'idle' ? ( ) : (
{phase === 'parsing' ? ( <> Reading CV… ) : ( <> Record ready — you check the fields and save. )}
)}
); } /* ══════════════════════════════════════════════════════════════ SCOUT DEMO WRAPPER — reuses from product-mocks.jsx, wraps it in the same framed-card vocabulary as the other two demos. ══════════════════════════════════════════════════════════════ */ function ScoutDemoFrame() { return (
Brief Scout in plain English
Watch Scout turn a plain-English brief into a structured search across 2.4 billion public profiles — no ranking, no fit score, no black box. The filter chips show you exactly what it searched for. The candidate list is ordered by profile completeness, not by a model's opinion.
1,025 matched · under 15 seconds · your call on who to advance.
); } /* ══════════════════════════════════════════════════════════════ TRIO — composite layout. Row 1: Scout demo full-width. Row 2: JD + CV side-by-side. ══════════════════════════════════════════════════════════════ */ function AIPDemos() { return (
); } Object.assign(window, { AIPDemos, JDDraftDemo, CVParsingDemo, ScoutDemoFrame });