const { useState, useEffect, useLayoutEffect, useRef } = React; const D = window.RetroData; const emojify = text => text.replace(/<3/g, '❤️').replace(/:\)/g, '🙂'); const readStore = (key, fallback, storage = localStorage) => { try { const raw = storage.getItem(key); return raw ? JSON.parse(raw) : fallback; } catch { return fallback; } }; const writeStore = (key, value, storage = localStorage) => { try { storage.setItem(key, JSON.stringify(value)); return true; } catch { return false; } }; const pageRoutes = { dashboard: 'overview', retrospective: 'new-retrospective', actions: 'actions' }; const sessionFromHash = () => window.location.hash.match(/^#session\/([A-Za-z0-9_-]{1,128})$/)?.[1] || null; const pageHash = (page, sessionId) => page === 'retrospective' && sessionId ? `#session/${sessionId}` : `#${pageRoutes[page]}`; const pageFromHash = () => sessionFromHash() ? 'retrospective' : window.location.hash === '#retrospectives' ? 'dashboard' : Object.keys(pageRoutes).find(page => `#${pageRoutes[page]}` === window.location.hash); const initialPage = () => { const linkedPage = pageFromHash(); if (linkedPage) return linkedPage; try { const saved = localStorage.getItem('retrospective-activeTab'); if (Object.prototype.hasOwnProperty.call(pageRoutes, saved)) return saved; } catch {} return 'dashboard'; }; const iconPaths = { grid: <>, layers: <>, board: <>, plus: , arrow: , 'arrow-up': , chevron: , down: , close: , search: <>, calendar: <>, users: <>, check: , 'check-circle': <>, circle: , progress: <>, clock: <>, bulb: <>, smile: <>, sun: <>, moon: , logout: <>, lock: <>, help: <>, menu: , spark: , }; function Icon({ name, size = 20, className = '' }) { return ; } function Flower({ className = '', size = 36 }) { return ; } function ZendropMark({ size = 28 }) { return ; } function Brand() { return
Team Retrospective
; } function GoogleIcon() { return ; } function TeamBadge({ team, dot = true }) { return {dot && }{D.teamName(team)}; } function Avatar({ user }) { const [failed, setFailed] = useState(false); return user?.photoURL && !failed ? setFailed(true)}/> : {(user?.displayName || 'You').split(' ').map(n => n[0]).slice(0, 2).join('')}; } function EmptyState({ icon = 'layers', title, text, action, onAction }) { return

{title}

{text}

{action && }
; } function Modal({ title, onClose, children, className = '' }) { const ref = useRef(null); useEffect(() => { const previous = document.activeElement; const overflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; ref.current?.focus(); const keydown = e => { if (e.key === 'Escape') onClose(); if (e.key === 'Tab') { const items = ref.current?.querySelectorAll('button, a[href], input, select, textarea, [tabindex="0"]'); if (!items?.length) { e.preventDefault(); return; } const first = items[0], last = items[items.length - 1]; if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && (document.activeElement === last || document.activeElement === ref.current)) { e.preventDefault(); first.focus(); } } }; document.addEventListener('keydown', keydown); return () => { document.body.style.overflow = overflow; document.removeEventListener('keydown', keydown); previous?.focus(); }; }, []); return
e.target === e.currentTarget && onClose()}>
{children}
; } function SignIn({ onSignIn, signingIn, authLoading, error }) { return

Team Retrospective

{error &&
{error}
}
; } function CompletionCelebration({ onComplete }) { const ref = useRef(null); const callback = useRef(onComplete); const finished = useRef(false); callback.current = onComplete; const finish = () => { if (finished.current) return; finished.current = true; callback.current(); }; useLayoutEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const animations = []; const animate = (element, frames, options) => { if (element?.animate) animations.push(element.animate(frames, { fill: 'both', ...options })); }; ref.current.querySelectorAll('.zendrop-z path').forEach((path, index) => { const length = path.getTotalLength(); path.style.stroke = '#fff'; path.style.strokeWidth = '1.1'; path.style.strokeDasharray = `${length}`; animate(path, [ { strokeDashoffset: `${length}px`, fillOpacity: 0, strokeOpacity: 1 }, { strokeDashoffset: '0px', fillOpacity: 0, strokeOpacity: 1, offset: .65 }, { strokeDashoffset: '0px', fillOpacity: 1, strokeOpacity: 0 }, ], { duration: 850, delay: index * 110, easing: 'ease-in-out' }); }); animate(ref.current.querySelector('.completion-aura'), [ { opacity: 0, transform: 'scale(.55)' }, { opacity: .85, transform: 'scale(1)', offset: .55 }, { opacity: .55, transform: 'scale(1.1)' }, ], { duration: 1300, easing: 'ease-out' }); animate(ref.current.querySelector('.completion-ring'), [ { opacity: 0, transform: 'scale(.6)' }, { opacity: .45, offset: .2 }, { opacity: 0, transform: 'scale(1.65)' }, ], { duration: 1100, delay: 180, easing: 'ease-out' }); animate(ref.current.querySelector('h2'), [ { opacity: 0, transform: 'translateY(8px)' }, { opacity: 1, transform: 'translateY(0)' }, ], { duration: 400, delay: 430, easing: 'ease-out' }); return () => animations.forEach(animation => animation.cancel()); }, []); useEffect(() => { const timer = setTimeout(finish, 1600); return () => clearTimeout(timer); }, []); return

Retrospective complete

; } function App() { const [sdk, setSdk] = useState(null); const [user, setUser] = useState(null); const [authLoading, setAuthLoading] = useState(true); const [authError, setAuthError] = useState(''); const [signingIn, setSigningIn] = useState(false); const [demo, setDemo] = useState(() => !sessionFromHash() && readStore('retro-demo-active', false, sessionStorage)); const [page, setPage] = useState(initialPage); const [liveSessionId, setLiveSessionId] = useState(sessionFromHash); const [team, setTeam] = useState('all'); const [search, setSearch] = useState(''); const [retros, setRetros] = useState([]); const [actions, setActions] = useState([]); const [dataLoading, setDataLoading] = useState(true); const [dataError, setDataError] = useState(''); const [revision, setRevision] = useState(0); const [toast, setToast] = useState(null); const [celebration, setCelebration] = useState(null); const [highlightedRetro, setHighlightedRetro] = useState(null); const [review, setReview] = useState(null); const [guide, setGuide] = useState(false); const [mobileNav, setMobileNav] = useState(false); const [theme, setTheme] = useState(document.documentElement.dataset.theme || 'dark'); const [pendingActions, setPendingActions] = useState(new Set()); const [completingActions, setCompletingActions] = useState(new Set()); const pendingRef = useRef(new Set()); const sessionVersion = useRef(0); const visibleUser = demo ? { displayName: 'Alex Morgan', email: 'demo@example.com' } : user; const restoringSession = authLoading && !demo; const workspaceLoading = restoringSession || dataLoading; const stats = D.statsFor(actions); const notify = (message, type = 'success') => setToast({ message, type, id: Date.now() }); const navigate = (target, sessionId = null) => { if (!Object.prototype.hasOwnProperty.call(pageRoutes, target)) return; setPage(target); setSearch(''); setTeam('all'); setMobileNav(false); if (target === 'retrospective' && !sessionId && !demo && user) { try { sessionId = localStorage.getItem(`retro-active-session-${user.uid}`); } catch {} } setLiveSessionId(target === 'retrospective' ? sessionId : null); const hash = pageHash(target, sessionId); if (window.location.hash !== hash) window.history.pushState(null, '', hash); try { localStorage.setItem('retrospective-activeTab', target); } catch {} window.scrollTo({ top: 0, behavior: 'instant' }); }; useEffect(() => { if (!sessionFromHash() && window.location.hash !== pageHash(page)) window.history.replaceState(null, '', pageHash(page)); const restorePage = () => { const restored = pageFromHash() || 'dashboard'; const sessionId = sessionFromHash(); if (window.location.hash !== pageHash(restored, sessionId)) window.history.replaceState(null, '', pageHash(restored, sessionId)); setLiveSessionId(sessionId); setPage(restored); setCelebration(null); setSearch(''); setTeam('all'); setMobileNav(false); setReview(null); setGuide(false); }; window.addEventListener('popstate', restorePage); window.addEventListener('hashchange', restorePage); return () => { window.removeEventListener('popstate', restorePage); window.removeEventListener('hashchange', restorePage); }; }, []); useEffect(() => { try { localStorage.setItem('retrospective-activeTab', page); } catch {} }, [page]); useEffect(() => { let active = true, unsubscribe; const timeout = setTimeout(() => { if (active) { setAuthLoading(false); setAuthError('The connection is taking a little longer. Please refresh and try again.'); } }, 12000); window.firebaseReady.then(service => { if (!active) return; setSdk(service); unsubscribe = service.onAuthStateChanged(service.auth, account => { if (!active) return; clearTimeout(timeout); setUser(account?.email?.toLowerCase().endsWith('@zendrop.com') ? account : null); setAuthLoading(false); setAuthError(''); }, () => { if (active) { setAuthLoading(false); setAuthError('We couldn’t connect to your account. Please refresh and try again.'); } }); }).catch(() => { if (active) { clearTimeout(timeout); setAuthLoading(false); setAuthError('We couldn’t connect to your workspace. Check your connection and try again.'); } }); return () => { active = false; clearTimeout(timeout); unsubscribe?.(); }; }, []); useEffect(() => { let active = true; sessionVersion.current += 1; pendingRef.current.clear(); setPendingActions(new Set()); setCompletingActions(new Set()); setCelebration(null); setHighlightedRetro(null); setDataError(''); setRetros([]); setActions([]); if (demo) { const stored = readStore('retro-demo-data', null, sessionStorage); const data = stored && Array.isArray(stored.retros) && Array.isArray(stored.actions) ? stored : D.makeDemo(); setRetros(data.retros); setActions(data.actions); setDataLoading(false); return; } if (!user || !sdk) return; setDataLoading(true); Promise.all(['retrospectives', 'actionPoints'].map(name => sdk.getDocs(sdk.query(sdk.collection(sdk.db, name), sdk.orderBy('createdAt', 'desc'))).then(snapshot => snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }))))).then(([r, a]) => { if (active) { setRetros(r); setActions(a); } }).catch(() => { if (active) setDataError('Your workspace couldn’t be loaded. Please check your connection and try again.'); }).finally(() => { if (active) setDataLoading(false); }); return () => { active = false; }; }, [demo, user, sdk, revision]); useEffect(() => { if (demo && retros.length) writeStore('retro-demo-data', { retros, actions }, sessionStorage); }, [demo, retros, actions]); useEffect(() => { if (!toast) return; const timer = setTimeout(() => setToast(null), 5500); return () => clearTimeout(timer); }, [toast]); useEffect(() => { if (!highlightedRetro) return; const timer = setTimeout(() => setHighlightedRetro(null), 2800); return () => clearTimeout(timer); }, [highlightedRetro]); useEffect(() => { document.documentElement.dataset.theme = theme; try { localStorage.setItem('retro-theme-v2', theme); } catch {} }, [theme]); useEffect(() => { document.title = `${({ dashboard: 'Overview', retrospective: 'New retrospective', actions: 'Action board' })[page]} — Team Retrospective`; }, [page]); useEffect(() => { if (!mobileNav) return; const close = e => { if (e.key === 'Escape') setMobileNav(false); }; document.addEventListener('keydown', close); return () => document.removeEventListener('keydown', close); }, [mobileNav]); const signIn = async () => { if (!sdk) { setAuthError('Your workspace is still connecting. Please refresh and try again.'); return; } setSigningIn(true); setAuthError(''); try { const result = await sdk.signInWithPopup(sdk.auth, sdk.provider); if (!result.user.email?.toLowerCase().endsWith('@zendrop.com')) { await sdk.signOut(sdk.auth); setAuthError('Please sign in with your @zendrop.com Google account.'); } } catch (error) { if (error.code !== 'auth/popup-closed-by-user') setAuthError(error.code === 'auth/popup-blocked' ? 'Allow pop-ups for this site, then try signing in again.' : 'Sign-in didn’t finish. Please try again.'); } finally { setSigningIn(false); } }; const exit = async () => { if (demo) { writeStore('retro-demo-active', false, sessionStorage); setDemo(false); navigate('dashboard'); return; } try { await sdk.signOut(sdk.auth); navigate('dashboard'); } catch { notify('We couldn’t sign you out. Please try again.', 'error'); } }; const changeStatus = async (id, status) => { const action = actions.find(item => item.id === id); if (!action || action.status === status || !D.statuses.some(s => s.value === status) || pendingRef.current.has(id)) return; const version = sessionVersion.current; pendingRef.current.add(id); setPendingActions(new Set(pendingRef.current)); if (status !== 'done') setActions(current => current.map(item => item.id === id ? { ...item, status } : item)); try { if (!demo) await sdk.updateDoc(sdk.doc(sdk.db, 'actionPoints', id), { status }); if (version !== sessionVersion.current) return; if (status === 'done') { setCompletingActions(current => new Set([...current, id])); if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) await new Promise(resolve => setTimeout(resolve, 460)); if (version !== sessionVersion.current) return; setActions(current => current.map(item => item.id === id ? { ...item, status } : item)); } if (version === sessionVersion.current) notify(status === 'done' ? 'Action completed.' : `Action moved to ${D.statuses.find(s => s.value === status).label.toLowerCase()}.`); } catch { if (version === sessionVersion.current) { setActions(current => current.map(item => item.id === id ? { ...item, status: action.status } : item)); notify('That change couldn’t be saved. Please try again.', 'error'); } } finally { if (version === sessionVersion.current) { pendingRef.current.delete(id); setPendingActions(new Set(pendingRef.current)); setCompletingActions(current => { const next = new Set(current); next.delete(id); return next; }); } } }; const sharedSaved = ({ id, retro, actions: savedActions }) => { setRetros(current => [{ ...retro, id }, ...current.filter(item => item.id !== id)]); setActions(current => [...savedActions, ...current.filter(item => !savedActions.some(saved => saved.id === item.id))]); try { localStorage.removeItem(`retro-active-session-${user.uid}`); } catch {} setToast(null); setCelebration({ id }); }; const startLiveRetro = async (form, pendingId) => { const id = await window.RetroLive.create(sdk, user, form, pendingId); try { localStorage.setItem(`retro-active-session-${user.uid}`, id); localStorage.removeItem('retrospective-formData'); localStorage.removeItem(`retro-pending-session-${user.uid}`); } catch {} return id; }; const saveRetro = async form => { const version = sessionVersion.current; const id = demo ? `demo-retro-${Date.now()}` : sdk.doc(sdk.collection(sdk.db, 'retrospectives')).id; const { retro, actions: newActions } = D.prepareSubmission(form, visibleUser.email, id); const savedActions = newActions.map((action, i) => ({ ...action, id: demo ? `${id}-action-${i}` : sdk.doc(sdk.collection(sdk.db, 'actionPoints')).id })); if (!demo) { const batch = sdk.writeBatch(sdk.db); batch.set(sdk.doc(sdk.db, 'retrospectives', id), retro); savedActions.forEach(({ id: actionId, ...action }) => batch.set(sdk.doc(sdk.db, 'actionPoints', actionId), action)); await batch.commit(); } if (version !== sessionVersion.current) return; setRetros(current => [{ ...retro, id }, ...current]); setActions(current => [...savedActions, ...current]); setToast(null); setCelebration({ id }); }; const finishCelebration = () => { if (!celebration) return; setHighlightedRetro(celebration.id); setCelebration(null); navigate('dashboard'); }; if (!visibleUser && !restoringSession) return ; return
Skip to content
{visibleUser && <>}
{demo &&
Demo workspace · Sample data
}
{dataError &&
{dataError}
} {page === 'dashboard' && { navigate('actions'); setTeam(name); }}/ >} {page === 'actions' && navigate('retrospective')}/>} {page === 'retrospective' && (liveSessionId && !demo ? sdk && user ? navigate('dashboard')}/> :
Connecting to the live retrospective…
: demo ? : sdk && user ? navigate('retrospective', id)}/> :
Connecting to your retrospective…
)}
{toast &&
{toast.message}
} {celebration && } {review && setReview(null)}/>} {guide && setGuide(false)} className="guide-modal">MAKE SPACE FOR THE GOOD STUFF

Good conversations.
Better next steps.

A simple rhythm for your next team retrospective.

{[{ title: 'Reflect, without rushing.', text: 'Give everyone a few quiet minutes to capture what went well and what could be better.' }, { title: 'Get curious, together.', text: 'Talk through the themes. Use +1 votes to see what resonates, and focus on learning rather than blame.' }, { title: 'Pick a small next step.', text: 'Turn each challenge into a concrete action. Agree who will take it forward, then track it on the action board.' }].map((step, i) =>
0{i + 1}

{step.title}

{step.text}

)}}
; } function PageHeading({ eyebrow, title, description, action }) { return
{eyebrow && {eyebrow}}

{title}

{description}

{action}
; } function Overview({ user, retros, actions, loading, highlightedRetro, navigate, onReview }) { const stats = D.statsFor(actions); return
ZENDROP / TEAM WORKSPACE

Team Retrospective

Team momentum

{loading ? '—' : stats.rate}%

of actions completed

Done{loading ? '—' : stats.done}
In progress{loading ? '—' : stats.progress}
To do{loading ? '—' : stats.todo}
{loading ? 'Loading your actions…' : `${stats.total} actions across your team`}

Retrospectives

navigate('retrospective')}/>
; } function Filters({ team, onTeam, search, onSearch, placeholder }) { return
; } function RetroList({ retros, loading, highlightedRetro, onReview, onCreate }) { const [limit, setLimit] = useState(6); if (loading) return
{[1, 2, 3].map(i =>
)}
; if (!retros.length) return ; return <>
{retros.slice(0, limit).map(retro => { const wins = retro.whatWentWell?.length || 0; const issues = retro.negativePoints?.length || 0; return ; })}
{retros.length > limit &&
}; } function ActionBoard({ actions, loading, team, setTeam, search, setSearch, onChange, pending, completing, onCreate }) { const filtered = actions.filter(action => (team === 'all' || D.teamName(action.team) === team) && [action.title, action.relatedIssue, action.sprintNumber, D.teamName(action.team)].join(' ').toLowerCase().includes(search.toLowerCase())); const stats = D.statsFor(filtered); return
New retrospective}/>
{stats.done} of {stats.total} actions completed{stats.total ? 'Keep going. Progress adds up.' : 'Turn your next reflection into a step forward.'}
{stats.rate}%
{!loading && !filtered.length &&
{actions.length ? 'No actions match these filters. Try another team or search.' : 'Your action board is ready. Add an action to a retrospective to get started.'}
}
{D.statuses.map(status => a.status === status.value)} loading={loading} onChange={onChange} pending={pending} completing={completing}/>)}
Move cards between columns, or use the status selector on each card.
; } function KanbanColumn({ status, actions, loading, onChange, pending, completing }) { const [over, setOver] = useState(false); return
{ e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setOver(true); }} onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setOver(false); }} onDrop={e => { e.preventDefault(); setOver(false); onChange(e.dataTransfer.getData('text/plain'), status.value); }}>

{status.label}

{loading ? '—' : actions.length}
{loading ? [1, 2].map(i =>
) : actions.map(action =>
{ e.dataTransfer.setData('text/plain', action.id); e.dataTransfer.effectAllowed = 'move'; const card = e.currentTarget; requestAnimationFrame(() => { if (card.isConnected) card.classList.add('is-dragging'); }); }} onDragEnd={e => e.currentTarget.classList.remove('is-dragging')}>
{D.sessionTitle(action)}

{action.title}

{action.relatedIssue &&

{action.relatedIssue}

}
{completing.has(action.id) ? : pending.has(action.id) ? : action.status !== 'done' ? : }
)}{!loading && !actions.length &&

{status.value === 'done' ? 'Good things are on their way.' : status.value === 'in-progress' ? 'A little momentum starts here.' : 'A little room for what’s next.'}

Drop an action here
}
; } function AutoTextarea(props) { const ref = useRef(null); const resize = () => { const field = ref.current; if (!field) return; field.style.height = 'auto'; field.style.height = `${field.scrollHeight}px`; }; useLayoutEffect(resize, [props.value]); useEffect(() => { const field = ref.current; if (typeof ResizeObserver === 'undefined') { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); } let width = field.getBoundingClientRect().width; const observer = new ResizeObserver(() => { const nextWidth = field.getBoundingClientRect().width; if (nextWidth !== width) { width = nextWidth; resize(); } }); observer.observe(field); return () => observer.disconnect(); }, []); return