/* global React, Ic, Pill, Btn, ScoreRing, ScoreBar, TOP_RISKS, TOP_FIXES, FOLLOWUPS, useState, useEffect */ /* Proben MVP 5 — Context readiness before important meetings. Blueprint skin (radar.css). */ const SIG5 = [ { label: 'Goal clarity', v: 8.0, tone: 'good', note: 'Do you know what decision you need?' }, { label: 'Strategic context', v: 5.8, tone: 'risk', note: 'Not tied to a company priority' }, { label: 'Evidence strength', v: 6.0, tone: 'amber', note: 'Business impact missing' }, { label: 'Stakeholder risk', v: 5.5, tone: 'risk', note: 'VP may challenge timing' }, { label: 'Decision ask', v: 5.2, tone: 'risk', note: 'Ask not specific enough' }, ]; const CHECKS5 = [ ['Goal clarity', 'Do you know what decision you need?'], ['Strategic context', 'Does your idea connect to company goals, OKRs, strategy, customer insight, revenue, cost, or risk?'], ['Evidence strength', 'Do you have numbers, examples, assumptions, or proof?'], ['Stakeholder risk', 'Do you know what each person will push back on?'], ['Decision ask', 'Is your ask specific enough to approve, reject, or revise?'], ]; const GAPS = [ { t: 'Business impact is unclear', d: 'You mention validation, but not the revenue, cost, or risk behind it.', q: 'What metric or business outcome does this protect?', why: 'Without this, your ask may sound like an opinion, not a business case.' }, { t: 'Stakeholder concern is underdefined', d: 'Dana likely cares about timing and team capacity.', q: 'What is her strongest objection likely to be?', why: 'If you can’t name the objection, you can’t prepare the answer that decides the meeting.' }, { t: 'Decision threshold is missing', d: 'You ask to validate, but don’t define what result would justify the next step.', q: 'What result would make this validation worth continuing?', why: 'A clear threshold turns a vague request into something a stakeholder can approve or reject.' }, ]; const tcol = (t) => t === 'good' ? 'var(--c-good)' : t === 'amber' ? 'var(--c-warn)' : t === 'risk' ? 'var(--c-bad)' : 'var(--muted-2)'; const MEETINGS = ['Strategy review', 'Board update', 'Client call', 'Data presentation', 'Design review', 'Promotion panel', 'Performance review', 'Conflict conversation', 'Job interview', 'Other']; const SAMPLE_CONTEXT = 'Leadership wants to pivot the roadmap toward a new horizontal feature. I think we should run a narrow 2-week validation on the enterprise segment first, because it is already blocked. I need Dana to approve the validation without reopening the whole roadmap.'; /* ===== chrome ===== */ function TopBar({ left, center, right }) { return (
{left}
{center}
{right}
); } const Back = ({ onClick, label }) => ; /* ===== hero radar (5 signals) ===== */ const RW = 660, RH = 540, HUB5 = { x: 330, y: 392 }, ORG5 = { x: 330, y: 540 }; const MAP5 = [ { v: 8.0, tone: 'good', label: 'Goal clarity', gap: 'Goal is clear', x: 330, y: 96 }, { v: 5.8, tone: 'risk', label: 'Strategic context', gap: 'Business impact unclear', x: 132, y: 206 }, { v: 5.2, tone: 'risk', label: 'Decision ask', gap: 'Threshold missing', x: 528, y: 206 }, { v: 6.0, tone: 'amber', label: 'Evidence', gap: 'Needs one number', x: 108, y: 360 }, { v: 5.5, tone: 'risk', label: 'Stakeholder', gap: 'Pushback likely', x: 552, y: 360 }, ]; function spoke5(c) { const dx = c.x - HUB5.x, dy = c.y - HUB5.y, l = Math.hypot(dx, dy) || 1, ux = dx / l, uy = dy / l; return { x1: HUB5.x + ux * 14, y1: HUB5.y + uy * 14, x2: c.x - ux * 46, y2: c.y - uy * 46 }; } function RadarHero5() { const arcs = [120, 210, 300, 392]; return (
{arcs.map((r, i) => )} {MAP5.map((s, i) => { const p = spoke5(s); return ; })} {[0, 1.4].map((d, i) => )}
CONTEXT ANALYZED · notes · slides · metrics · stakeholder concern
AI
{MAP5.map((s, i) => { const col = tcol(s.tone); return (
{s.label} {s.v.toFixed(1)}
{s.gap}
); })}
YOUR MEETING
Strategy review
6.2/10
PARTLY READY
3 context gaps found
); } /* ===== STEP 1 — paste context ===== */ const FORMATS = [ ['PDF', 'PDF'], ['PPT / Slides', 'PPT'], ['Screenshots', 'IMG'], ['Audio notes', 'M4A'], ['Markdown', 'MD'], ['Agenda', 'DOC'], ['Notes / memo', 'TXT'], ['Draft answer', 'DOC'], ['Metrics', 'CSV'], ]; const EXAMPLES = ['PDF strategy doc', 'PPT deck', 'dashboard screenshot', 'voice note', 'markdown brief from Claude Code', 'meeting transcript', 'KPI / metrics CSV']; /* neutral monochrome line glyphs — recognizable tool shapes, never bare letters */ const sgProps = { viewBox: '0 0 24 24', width: '1em', height: '1em', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' }; const SG = { drive: , docs: , slides: , notion: , slack: , confluence: , jira: , linear: , dropbox: , zoom: , upload: , }; /* [name, helper, tooltip, glyph] — flows into a 3-col grid as 4 rows */ const SRC = [ ['Google Drive', 'Docs, decks & notes', 'Find docs, decks, and notes.', 'drive'], ['Google Docs', 'Briefs & drafts', 'Pull meeting briefs and drafts.', 'docs'], ['Google Slides', 'Deck structure', 'Review presentation structure.', 'slides'], ['Notion', 'Product & strategy', 'Pull product notes and strategy docs.', 'notion'], ['Slack', 'Stakeholder threads', 'Find stakeholder comments and objections.', 'slack'], ['Confluence', 'Team docs', 'Pull team documentation.', 'confluence'], ['Jira', 'Delivery & risks', 'Understand delivery scope and risks.', 'jira'], ['Linear', 'Roadmap & tasks', 'Pull roadmap and task context.', 'linear'], ['Dropbox', 'External files', 'Add external files.', 'dropbox'], ['Zoom', 'Recordings & transcripts', 'Analyze meeting recordings or transcripts.', 'zoom'], ['Local upload', 'Upload files directly', 'Upload files directly.', 'upload'], ]; const SRC_GLYPH = SRC.reduce((m, s) => { m[s[0]] = s[3]; return m; }, {}); const MORE_SOURCES = ['Microsoft Teams', 'Outlook Calendar', 'Google Calendar', 'Figma', 'Miro', 'GitHub', 'Gong / call recordings', 'Loom', 'Coda']; function SrcTile({ children, on }) { return {children}; } function Input5({ onBack, onAnalyze }) { const [type, setType] = useState('Strategy review'); const [text, setText] = useState('Leadership wants to pivot the roadmap toward a new horizontal feature. I think we should run a narrow 2-week validation on the enterprise segment first, because it is already blocked. I need Dana to approve the validation without reopening the whole roadmap.'); const [moreSrc, setMoreSrc] = useState(false); const [hi, setHi] = useState(false); const [picked, setPicked] = useState(['PPT / Slides', 'Metrics']); const [conn, setConn] = useState(['Notion']); const [moreDet, setMoreDet] = useState(false); const [det, setDet] = useState({ stakeholder: 'Dana, VP Product', room: '', goal: 'Get approval for a narrow validation', outcome: '', worry: 'I may sound defensive', deadline: 'Tomorrow', objections: '', link: '' }); const togF = (f) => setPicked((x) => x.includes(f) ? x.filter((y) => y !== f) : [...x, f]); const togC = (c) => setConn((x) => x.includes(c) ? x.filter((y) => y !== c) : [...x, c]); const flashDrop = () => { setHi(true); setTimeout(() => setHi(false), 1500); }; const set = (k, v) => setDet((d) => ({ ...d, [k]: v })); const [sub, setSub] = useState(0); // 0..4 const TOTAL = 5; const go = (n) => { window.scrollTo(0, 0); setSub(Math.max(0, Math.min(TOTAL - 1, n))); }; const next = () => sub === TOTAL - 1 ? onAnalyze() : go(sub + 1); const back = () => sub === 0 ? onBack() : go(sub - 1); const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0; const HELP = [ ['Why this matters', 'Pick the kind of conversation you’re preparing for. Proben uses it to adjust the checks, the likely objections, and the readiness output.'], ['What good input looks like', 'You don’t need a polished brief. Rough notes are fine. Proben looks for missing context, stakeholder risk, evidence, and clarity of ask.'], ['Materials are optional', 'You can continue without attachments. Raw context alone is enough for a first readiness check — files just sharpen it.'], ['Sources are optional', 'Pull context from tools you already use to surface stakeholder threads, strategy docs, and delivery risk. Skip anytime.'], ['Before you analyze', 'Proben works with raw text, docs, slides, screenshots, and audio notes. No perfect formatting required.'], ]; return (
} center={'STEP 1 / 5 · CONTEXT · ' + (sub + 1) + ' OF ' + TOTAL} right={{['MEETING TYPE', 'RAW CONTEXT', 'MATERIALS', 'SOURCES', 'REVIEW'][sub]}} /> {/* local progress bar */}
{Array.from({ length: TOTAL }).map((_, i) => (
{/* ── SUBSTEP 1 — MEETING TYPE ── */} {sub === 0 && ( <>

What are you preparing for?

Choose the conversation type. Proben tailors the readiness check to the kind of meeting you’re walking into.

{MEETINGS.map((m) => { const on = type === m; return ( ); })}
)} {/* ── SUBSTEP 2 — RAW CONTEXT ── */} {sub === 1 && ( <>

What’s the situation?

Paste your raw meeting context. No formatting needed — a few rough sentences are enough.

RAW CONTEXT