// theSitrep shared atoms + Lucide-style icon set // (Self-contained · no link to theSitrep 2.1) const { useState, useEffect, useRef, useMemo, useCallback } = React; function Icon({ name, size = 16, className = '', strokeWidth = 1.75 }) { const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', className }; const paths = { 'activity': , 'home': <>, 'users': <>, 'user': <>, 'search': <>, 'command': , 'chevron-down': , 'chevron-right': , 'chevron-left': , 'arrow-up': <>, 'arrow-down': <>, 'arrow-right': <>, 'sun': <>, 'moon': , 'plus': <>, 'check': , 'x': <>, 'sliders': <>, 'circle-dot': <>, 'circle': , 'alert-triangle': <>, 'info': <>, 'flag': <>, 'git-branch': <>, 'git-pull': <>, 'git-commit': <>, 'git-merge': <>, 'briefcase': <>, 'message-square': , 'calendar': <>, 'video': <>, 'bell': <>, 'filter': , 'settings': <>, 'sparkles': <>, 'flame': , 'zap': , 'shield': , 'layers': <>, 'panel-left': <>, 'more': <>, 'trending-up': <>, 'trending-down': <>, 'rocket': <>, 'clock': <>, 'link': <>, 'external': <>, 'heartbeat': , 'award': <>, 'coffee': <>, 'bot': <>, 'pen': <>, 'pulse': , 'mic': <>, 'shuffle': <>, 'eye': <>, 'check-circle': <>, 'minus': , 'lock': <>, }; return {paths[name] || null}; } function Avatar({ initials, size = 24, glow = false }) { const palette = ['#6b6fbb','#ad6b9a','#7e9d6a','#bb9a6b','#6b9dbb','#9a6bbb','#bb6b6b','#6bbb9a','#9abb6b','#bb8a6b']; let h = 0; for (const c of initials) h = (h * 31 + c.charCodeAt(0)) >>> 0; const bg = palette[h % palette.length]; return {initials}; } function StatusCircle({ kind = 'todo', size = 14 }) { const c = { todo: 'var(--text-3)', progress: 'var(--warn)', review: 'var(--accent)', done: 'var(--good)', bug: 'var(--bad)', blocked: 'var(--bad)' }; const stroke = c[kind] || 'var(--text-3)'; const radius = size / 2 - 1.2; return {kind === 'done' ? ( <> ) : kind === 'progress' ? ( <> ) : kind === 'review' ? ( ) : kind === 'bug' || kind === 'blocked' ? ( <> ! ) : ( )} ; } // AI authorship dual-band: AI % + Hand-written % function AuthorshipSplit({ aiPct, label = true, height = 6, period }) { const ai = Math.max(0, Math.min(100, Math.round(aiPct || 0))); const human = 100 - ai; const tip = `AI: ${ai}% · Hand-written: ${human}%${period ? ' · ' + period : ''}`; return (
{label && (
AI {ai}% Hand-written {human}%
)}
); } // Persisted state hook function usePersistedState(key, initial) { const [v, setV] = useState(() => { try { const s = localStorage.getItem(key); return s !== null ? JSON.parse(s) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]); return [v, setV]; } // Per-widget window preference, namespaced under `thesitrep.windowPrefs`. // `widgetKey` is a stable identifier (e.g., 'windowState', 'carryover.bucketSize'). function useWindowPref(widgetKey, defaultValue) { const root = 'thesitrep.windowPrefs'; const [v, setV] = useState(() => { try { const all = JSON.parse(localStorage.getItem(root) || '{}'); return widgetKey in all ? all[widgetKey] : defaultValue; } catch { return defaultValue; } }); useEffect(() => { try { const all = JSON.parse(localStorage.getItem(root) || '{}'); all[widgetKey] = v; localStorage.setItem(root, JSON.stringify(all)); } catch {} }, [widgetKey, v]); return [v, setV]; } // WindowSizeChip · small mono-caps pill rendered in a widget header to let // the user pick the rolling-window size. Options are weeks (1, 2, 3, 4). function WindowSizeChip({ value, onChange, options = [1, 2, 3, 4] }) { return ( {options.map(w => ( ))} ); } // WeekStepper · prev/next control for browsing previous weeks. `value` is the // week offset (0 = current); higher offsets are older. `weeks` is DATA.weeks. function WeekStepper({ weeks, value, onChange }) { const w = weeks[value] || weeks[0]; const atOldest = value >= weeks.length - 1; const atNewest = value <= 0; return ( {w.label} · {w.range} ); } // Tiny hash router function useRoute() { const [hash, setHash] = useState(() => window.location.hash || '#/'); useEffect(() => { const h = () => setHash(window.location.hash || '#/'); window.addEventListener('hashchange', h); return () => window.removeEventListener('hashchange', h); }, []); const navigate = useCallback((p) => { window.location.hash = p.startsWith('#') ? p : '#' + p; }, []); // path[0]=view, path[1]=id (e.g. /dev/eng-04 → view=dev, id=eng-04) const stripped = hash.replace(/^#\/?/, ''); const parts = stripped.split('/').filter(Boolean); const view = parts[0] || 'dashboard'; const id = parts[1] || null; return { hash, view, id, navigate, parts }; } // Format helpers function fmtDays(n) { return n === 1 ? '1d' : `${n}d`; } function fmtHours(n) { return n === 1 ? '1h' : `${n}h`; } function fmtTimestamp(d) { const dt = (d instanceof Date) ? d : new Date(d); return dt.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); } function fmtRelative(daysAgo) { if (daysAgo === 0) return 'today'; if (daysAgo === 1) return 'yesterday'; if (daysAgo > 0) return `${daysAgo}d ago`; if (daysAgo === -1) return 'tomorrow'; return `in ${-daysAgo}d`; } // Tone helper from a 0-100 score-like value (only used for AI %, never as a score) function toneFromPct(v, goodMin = 30, warnMin = 60) { if (v < goodMin) return 'good'; if (v < warnMin) return 'warn'; return 'bad'; } // TeamFilter · single-select searchable dropdown for picking a team (or "all"). // Lives here so multiple pages can share it. function TeamFilter({ teams, value, onChange }) { const [open, setOpen] = useState(false); const [q, setQ] = useState(''); const wrapRef = useRef(null); const inputRef = useRef(null); useEffect(() => { if (!open) return; setQ(''); setTimeout(() => inputRef.current?.focus(), 30); const close = (e) => { if (!wrapRef.current?.contains(e.target)) setOpen(false); }; const esc = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', close); document.addEventListener('keydown', esc); return () => { document.removeEventListener('mousedown', close); document.removeEventListener('keydown', esc); }; }, [open]); const Q = q.toLowerCase(); const filtered = teams.filter(t => t.toLowerCase().includes(Q)); const label = value === 'all' ? 'All teams' : value; return (
{open && (
setQ(e.target.value)} placeholder="Search teams…" style={{ flex: 1, background: 'transparent', border: 0, outline: 0, fontSize: 12.5, color: 'var(--text)' }} />
{[{ key: 'all', label: 'All teams' }, ...filtered.map(t => ({ key: t, label: t }))].map(opt => ( ))} {filtered.length === 0 && q && (
No matches
)}
)}
); } // DevMultiSelect · searchable multi-select dropdown for engineers. // `value` is an array of engineer ids. Empty array = "All developers". function DevMultiSelect({ devs, value, onChange }) { const [open, setOpen] = useState(false); const [q, setQ] = useState(''); const wrapRef = useRef(null); const inputRef = useRef(null); useEffect(() => { if (!open) return; setQ(''); setTimeout(() => inputRef.current?.focus(), 30); const close = (e) => { if (!wrapRef.current?.contains(e.target)) setOpen(false); }; const esc = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', close); document.addEventListener('keydown', esc); return () => { document.removeEventListener('mousedown', close); document.removeEventListener('keydown', esc); }; }, [open]); const Q = q.toLowerCase(); const filtered = devs.filter(d => d.name.toLowerCase().includes(Q) || (d.level || '').toLowerCase().includes(Q) || (d.role || '').toLowerCase().includes(Q) ); const label = (() => { if (value.length === 0) return 'All developers'; if (value.length === 1) { const d = devs.find(x => x.id === value[0]); return d ? d.name : '1 developer'; } return `${value.length} developers`; })(); const toggle = (id) => { if (value.includes(id)) onChange(value.filter(v => v !== id)); else onChange([...value, id]); }; return (
{open && (
setQ(e.target.value)} placeholder="Search developers…" style={{ flex: 1, background: 'transparent', border: 0, outline: 0, fontSize: 12.5, color: 'var(--text)' }} /> {value.length > 0 && ( )}
{filtered.map(d => { const selected = value.includes(d.id); return ( ); })} {filtered.length === 0 && (
No matches
)}
)}
); } Object.assign(window, { Icon, Avatar, StatusCircle, AuthorshipSplit, usePersistedState, useWindowPref, useRoute, WindowSizeChip, TeamFilter, DevMultiSelect, fmtDays, fmtHours, fmtTimestamp, fmtRelative, toneFromPct, });