// Loop MVP — Skills, Compare, Tasks, Notifications, Dataroom, Settings, More const Do = () => window.LOOP_DATA; // ───────────────────────────────────────────────────────────── // SkillsScreen — skills library // ───────────────────────────────────────────────────────────── function SkillsScreen({ persona, go }) { const skills = Do().skills; return (
go('more')} title="Skills library" eyebrow="Reusable building blocks" />

Skills are the verbs your agents speak. Share, fork, and combine them.

{skills.filter(s => !s.custom).map((s, i, arr) => (
{s.name}
{s.desc}
{s.uses} runs · this month {s.by}
))}
Author}> {skills.filter(s => s.custom).map((s) => (
{s.name}
Custom
{s.desc}
{s.by} · {s.uses} runs
 ))}
); } // ───────────────────────────────────────────────────────────── // CompareScreen — side-by-side comparative analysis // ───────────────────────────────────────────────────────────── function CompareScreen({ persona, go }) { const c = Do().compare[persona]; return (
go('more')} title="Compare" eyebrow="Comparative analysis" />
Subject

{c.subject}

{c.items.length} candidates · {c.rubric.length} dimensions · scored by Loop

{/* Header row */}
{c.items.map((it, i) => { const person = findPerson(it.name); return (
{it.name}
); })}
{/* Matrix */} {c.rubric.map((r, ri) => (
{`0${ri + 1}`}
{r}
{c.items.map((it, ii) => (
{it.notes[ri]}
))}
))} {/* Loop's read */}

{persona === 'principal' ? 'Sequoia leads on conviction and board fit but Founders Fund will close two weeks faster. If timing is the gating factor, push Founders Fund. If you want Roelof in your boardroom, hold for Sequoia and accept the slower close.' : 'Yara is the safer hire — she has done the scale jump before. Mae has higher ceiling but more risk. If you can absorb six months of ramp uncertainty, hire Mae. If you need the org settled by Q3, hire Yara.'}

); } // ───────────────────────────────────────────────────────────── // TasksScreen — to-do list / daily reminders // ───────────────────────────────────────────────────────────── function TasksScreen({ persona, go }) { const initial = Do().todos[persona]; const [done, setDone] = React.useState({}); const toggle = (id) => setDone(d => ({ ...d, [id]: !d[id] })); const groups = [ { key: 'high', label: 'High signal', tone: 'high' }, { key: 'med', label: 'This week', tone: 'med' }, { key: 'low', label: 'When you can', tone: 'low' }, ]; return (
Daily ritual draft is ready
3 high-signal items · 6 min to clear
{groups.map(g => { const list = initial.filter(t => t.priority === g.key); if (!list.length) return null; return (
{list.map((t, i) => ( toggle(t.id)} style={{ width: 26, height: 26, borderRadius: '50%', background: done[t.id] ? 'var(--ink)' : 'transparent', border: '1.5px solid var(--ink)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', }}> {done[t.id] && } } title={{t.body}} subtitle={`${t.from} · ${t.due}`} trailing={} /> ))}
); })}
); } // ───────────────────────────────────────────────────────────── // NotificationsScreen — smart digest + signals // ───────────────────────────────────────────────────────────── function NotificationsScreen({ persona, go }) { const notifs = Do().notifications[persona]; const groups = [ { key: 'high', label: 'Signal · act today' }, { key: 'med', label: 'This morning' }, { key: 'low', label: 'Tracked' }, ]; const kindIcon = { brief: 'file-text', commit: 'eye', risk: 'alert-triangle', digest: 'sun', crm: 'database' }; return (
go('home')} title="Notifications" eyebrow="Signal, not noise" trailing={} />

Loop suppresses 87% of typical app noise. Only what changes your day is here.

{groups.map(g => { const list = notifs.filter(n => n.signal === g.key); if (!list.length) return null; return (
{list.map((n, i) => (
{n.body}
{n.kind} · {n.when}
))}
); })}
); } // ───────────────────────────────────────────────────────────── // DataroomScreen — secure document hub // ───────────────────────────────────────────────────────────── function DataroomScreen({ persona, go }) { const docs = Do().dataroom; const folders = {}; docs.forEach(d => { (folders[d.folder] = folders[d.folder] || []).push(d); }); const [view, setView] = React.useState('grid'); const kindIcon = { pdf: 'file-text', xlsx: 'file-spreadsheet', doc: 'file-text' }; const kindTint = { pdf: '#B12318', xlsx: '#1F7A4D', doc: '#3860BE' }; return (
} />
{/* Sources */}
{[ { name: 'Google Drive', count: '4,210 files', status: 'synced' }, { name: 'Microsoft 365', count: '2,860 files', status: 'synced' }, { name: 'Salesforce', count: '184 records', status: 'synced' }, { name: 'Greenhouse', count: '38 candidates', status: 'synced' }, ].map((s, i) => ( {s.status}
{s.name}
{s.count}
 ))}
{Object.entries(folders).map(([fname, list]) => (
{view === 'grid' ? (
{list.map(d => (
{d.name}
{d.meta}
 ))}
) : ( {list.map((d, i) => (
} title={d.name} subtitle={d.meta} trailing={} /> ))} )} ))}
); } // ───────────────────────────────────────────────────────────── // SettingsScreen — integrations + persona profile + custom OS // ───────────────────────────────────────────────────────────── function SettingsScreen({ persona, go }) { const u = Do()[persona]; const integrations = Do().integrations; const groups = {}; integrations.forEach(i => { (groups[i.kind] = groups[i.kind] || []).push(i); }); return (
{/* Profile */}
{u.name}
{u.role}
{/* Custom OS */}
} title="Layout" subtitle={persona === 'principal' ? 'Principal · meetings-first' : 'Moderator · pipeline-first'} trailing={} /> } title="Daily rituals" subtitle={persona === 'principal' ? '06:30 brief · 21:00 close-out' : '08:00 pipeline · 18:00 close-out'} trailing={} /> } title="My people view" subtitle="4 groups · auto-grouped from CRM" trailing={} onClick={() => go('people')} /> } title="Appearance" subtitle="Cream · auto · large type off" divider={false} trailing={} />
{/* Integrations */} {Object.entries(groups).map(([kind, list]) => (
{list.map((it, i) => ( {it.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
} title={it.name} subtitle={it.detail} trailing={ it.status === 'connected' ? Connected : it.status === 'available' ? : Coming soon } /> ))} ))}
} title="Privacy & data" subtitle="Recording consent, retention, regions" trailing={} /> } title="Help & feedback" divider={false} trailing={} />
); } // ───────────────────────────────────────────────────────────── // MoreScreen — drawer for secondary destinations // ───────────────────────────────────────────────────────────── function MoreScreen({ persona, go }) { const u = Do()[persona]; const sections = [ { label: 'Workspace', items: [ { id: 'dataroom', name: 'Dataroom', sub: 'Your working context', icon: 'folder' }, { id: 'tasks', name: 'To do list', sub: 'Daily reminders, seeded from meetings', icon: 'check-square' }, { id: 'notifications', name: 'Notifications', sub: 'Signal, not noise', icon: 'bell' }, ], }, { label: 'Intelligence', items: [ { id: 'compare', name: 'Comparative analysis', sub: 'Candidates, vendors, deals, proposals', icon: 'columns' }, { id: 'skills', name: 'Skills library', sub: '8 skills · 2 custom', icon: 'zap' }, { id: 'agent-builder', name: 'Build an agent', sub: 'No-code agent builder', icon: 'sparkles' }, ], }, { label: 'You', items: [ { id: 'settings', name: 'Settings & integrations', sub: '8 connected · 1 coming soon', icon: 'settings' }, ], }, ]; return (
Your custom OS

{persona === 'principal' ? 'Tuned for the principal' : 'Tuned for the moderator'}

{persona === 'principal' ? 'Investor relations, board prep, key relationships. 06:30 brief, 21:00 close-out.' : 'Pipeline keeper, panel summaries, comparative analysis. 08:00 pipeline brief.'}

{sections.map((s, si) => (
{s.items.map((it, i) => (
} title={it.name} subtitle={it.sub} trailing={} onClick={() => go(it.id)} /> ))} ))}
); } Object.assign(window, { SkillsScreen, CompareScreen, TasksScreen, NotificationsScreen, DataroomScreen, SettingsScreen, MoreScreen, });