/* global React, ReactDOM, Icon, Avatar */ const { useState, useMemo, useEffect, useRef, useCallback } = React; function FixedTooltip({ text, anchorRef }) { const [pos, setPos] = useState(null); useEffect(() => { if (!anchorRef.current) return; const rect = anchorRef.current.getBoundingClientRect(); setPos({ top: rect.top + rect.height / 2, left: rect.right + 8 }); }, [text]); if (!pos || !text) return null; return ReactDOM.createPortal( React.createElement( "div", { style: { position: "fixed", top: pos.top, left: pos.left, transform: "translateY(-50%)", background: "var(--ink)", color: "#fff", fontSize: 11.5, lineHeight: 1.4, fontWeight: 500, padding: "6px 10px", borderRadius: 6, whiteSpace: "pre-line", width: "max-content", maxWidth: 200, pointerEvents: "none", zIndex: 9999, }, }, text, ), document.body, ); } function ScopeRing({ done, total }) { const ref = useRef(null); const [hover, setHover] = useState(false); const pct = total > 0 ? Math.round((done / total) * 100) : 0; const r = 8, strokeW = 2.5, sz = 22, c = sz / 2; const circ = 2 * Math.PI * r; const offset = circ - (pct / 100) * circ; return React.createElement( "span", { ref, className: "scope-ring", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), }, React.createElement( "svg", { className: "scope-ring-svg", viewBox: `0 0 ${sz} ${sz}`, width: sz, height: sz, }, React.createElement("circle", { cx: c, cy: c, r, fill: "none", stroke: "rgba(31,26,46,0.1)", strokeWidth: strokeW, }), React.createElement("circle", { cx: c, cy: c, r, fill: "none", stroke: "var(--ok)", strokeWidth: strokeW, strokeLinecap: "round", strokeDasharray: circ, strokeDashoffset: offset, transform: `rotate(-90 ${c} ${c})`, style: { transition: "stroke-dashoffset 600ms ease" }, }), ), hover && React.createElement(FixedTooltip, { text: `${pct}% — ${done} of ${total} checked in`, anchorRef: ref, }), ); } // ── Profile panel (opens from user card) ────────────────── function ProfilePanel({ authUser, onClose, onSignOut, onProfileSave, onViewCheckins, }) { const apiBase = window.PULSE_CONFIG?.apiBase || "http://localhost:8000"; const authToken = localStorage.getItem("pulse_token"); const [profile, setProfile] = useState(null); const [orgs, setOrgs] = useState([]); const [editing, setEditing] = useState(false); const [saving, setSaving] = useState(false); const [activeTheme, setActiveTheme] = useState( () => document.documentElement.getAttribute("data-theme") || localStorage.getItem("pulse_theme") || "classic", ); // Editable fields const [editName, setEditName] = useState(""); const [editRole, setEditRole] = useState(""); const [editRoleTag, setEditRoleTag] = useState(""); const [editTz, setEditTz] = useState(""); const [editRhythm, setEditRhythm] = useState(""); const [editSquadId, setEditSquadId] = useState(""); const [editSquadIds, setEditSquadIds] = useState([]); useEffect(() => { fetch(`${apiBase}/me`, { headers: { Authorization: `Bearer ${authToken}` }, }) .then((r) => r.json()) .then((data) => { setProfile(data); setEditName(data.name || ""); setEditRole(data.role || ""); setEditRoleTag(data.role_tag || ""); setEditTz(data.timezone || "Europe/London"); setEditRhythm(data.rhythm || "daily"); setEditSquadId(data.squad_id || ""); setEditSquadIds( data.squad_ids || (data.squad_id ? [data.squad_id] : []), ); }) .catch(() => {}); fetch(`${apiBase}/orgs`) .then((r) => r.json()) .then(setOrgs) .catch(() => {}); }, []); const ancestry = useMemo(() => { if (!profile || !orgs.length) return []; const sids = profile.squad_ids?.length ? profile.squad_ids : profile.squad_id ? [profile.squad_id] : []; if (!sids.length) return []; const chain = []; let current = orgs.find((o) => o.id === sids[0]); while (current) { chain.push(current); current = orgs.find((o) => o.id === current.parent_id); } return chain; }, [profile, orgs]); const profileSquadNames = useMemo(() => { if (!profile?.squad_ids?.length || !orgs.length) return []; return profile.squad_ids .map((sid) => orgs.find((o) => o.id === sid)?.name) .filter(Boolean); }, [profile, orgs]); const editAncestry = useMemo(() => { if (!editSquadId || !orgs.length) return []; const chain = []; let current = orgs.find((o) => o.id === editSquadId); while (current) { chain.push(current); current = orgs.find((o) => o.id === current.parent_id); } return chain; }, [editSquadId, orgs]); const squadOptions = orgs.filter((o) => o.type === "squad"); const handleSave = async () => { setSaving(true); try { await fetch(`${apiBase}/me/profile`, { method: "PATCH", headers: { "Content-Type": "application/json", Authorization: `Bearer ${authToken}`, }, body: JSON.stringify({ name: editName, role: editRole, role_tag: editRoleTag || null, timezone: editTz, rhythm: editRhythm, squad_id: editSquadIds[0] || editSquadId || null, squad_ids: editSquadIds, }), }); // Refresh profile const r = await fetch(`${apiBase}/me`, { headers: { Authorization: `Bearer ${authToken}` }, }); const data = await r.json(); setProfile(data); setEditSquadIds(data.squad_ids || []); setEditing(false); // Update localStorage so the rest of the app sees changes localStorage.setItem( "pulse_user", JSON.stringify({ id: data.id, name: data.name, email: data.email, role: data.role, squad_id: data.squad_id, timezone: data.timezone, rhythm: data.rhythm, }), ); if (onProfileSave) onProfileSave(); } catch { } finally { setSaving(false); } }; const TYPE_LABELS = { squad: "Squad", team: "Team", group: "Group", function: "Function", business: "Business", }; return (

Profile

{!profile ? (
Loading…
) : editing ? ( <>
setEditName(e.target.value)} />
setEditRole(e.target.value)} placeholder="e.g. Product Lead" />
{squadOptions.map((s) => { const checked = editSquadIds.includes(s.id); return ( ); })}
) : ( <>
{profile.name}
{profile.email}
Job title {profile.role || "—"}
Role {profile.role_tag || "—"}
Timezone {(profile.timezone || "Europe/London").replace(/_/g, " ")}
Rhythm {profile.rhythm || "daily"}
Organisation
{profileSquadNames.length > 1 && (
Squads: {profileSquadNames.join(", ")}
)} {ancestry.length > 0 ? (
{ancestry.map((node) => (
{TYPE_LABELS[node.type] || node.type} {node.name}
))}
) : (
No squad selected
)}
Permissions
Coming soon
Theme
Classic
Wabi
Nord
Ember
Horizon
{onViewCheckins && ( )}
{onSignOut && ( )}
)}
); } // ── Left rail ───────────────────────────────────────────── function Rail({ scope, setScope, squad, authUser, onSignOut, scopeCounts, userSquads, activeSquadId, setActiveSquadId, view, onProfileSave, }) { const { SCOPES } = window.SEED; const apiBase = window.PULSE_CONFIG?.apiBase || "http://localhost:8000"; const authToken = localStorage.getItem("pulse_token"); const [groups, setGroups] = useState([]); const [showCreate, setShowCreate] = useState(false); const [newName, setNewName] = useState(""); const [newIcon, setNewIcon] = useState("Hash"); const [profileOpen, setProfileOpen] = useState(false); const [groupsOpen, setGroupsOpen] = useState(true); // [COMING SOON] Groups API — to be re-enabled once feature is approved // const refreshGroups = () => { // if (!authToken) return; // fetch(`${apiBase}/groups`, { headers: { Authorization: `Bearer ${authToken}` } }) // .then(r => r.ok ? r.json() : []) // .then(setGroups) // .catch(() => {}); // }; // useEffect(() => { refreshGroups(); }, [authToken]); const refreshGroups = () => {}; // [COMING SOON] Group creation — to be re-enabled once feature is approved const handleCreate = () => {}; // const handleCreate = () => { // const name = newName.trim(); // if (!name) return; // fetch(`${apiBase}/groups`, { // method: 'POST', // headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${authToken}` }, // body: JSON.stringify({ name, icon: newIcon }), // }) // .then(r => r.ok ? r.json() : null) // .then(g => { // if (g) { refreshGroups(); setShowCreate(false); setNewName(''); setNewIcon('Hash'); } // }) // .catch(() => {}); // }; // [COMING SOON] Group join/leave — to be re-enabled once feature is approved const handleJoinLeave = () => {}; // const handleJoinLeave = (gid, isMember) => { // fetch(`${apiBase}/groups/${gid}/${isMember ? 'leave' : 'join'}`, { // method: 'POST', // headers: { Authorization: `Bearer ${authToken}` }, // }) // .then(r => r.ok ? r.json() : null) // .then(() => refreshGroups()) // .catch(() => {}); // }; return ( ); } // ── Right rail ──────────────────────────────────────────── function RightRail({ todos, setTodos, scope, onViewFull, authToken, showTodos = true, }) { const { GOALS } = window.SEED; const [expanded, setExpanded] = useState(false); const [adding, setAdding] = useState(false); const [newText, setNewText] = useState(""); const [newPriority, setNewPriority] = useState("medium"); const [newDueDate, setNewDueDate] = useState(""); const [sentimentData, setSentimentData] = useState(null); const LIMIT = 5; const apiBase = window.PULSE_CONFIG?.apiBase || "http://localhost:8000"; useEffect(() => { if (!authToken || !showTodos) return; fetch(`${apiBase}/todos`, { headers: { Authorization: `Bearer ${authToken}` }, }) .then((r) => (r.ok ? r.json() : [])) .then((data) => { if (data.length) setTodos(data); }) .catch(() => {}); }, [authToken]); // [COMING SOON] Sentiment API — disabled until feature is approved // useEffect(() => { // if (!authToken) return; // const scopeParam = scope || 'squad'; // fetch(`${apiBase}/sentiment?scope=${scopeParam}`, { headers: { Authorization: `Bearer ${authToken}` } }) // .then(r => r.ok ? r.json() : null) // .then(data => { if (data) setSentimentData(data); }) // .catch(() => {}); // }, [authToken, scope]); const [completing, setCompleting] = useState(new Set()); const handleToggle = (id, currentDone) => { if (!currentDone) { // Completing: play the exit animation, then move to done after delay. setCompleting((s) => new Set(s).add(id)); setTimeout(() => { setTodos((ts) => ts.map((x) => (x.id === id ? { ...x, done: true } : x)), ); setCompleting((s) => { const n = new Set(s); n.delete(id); return n; }); }, 500); } else { // Un-completing: instant (no drama needed for restoring). setTodos((ts) => ts.map((x) => (x.id === id ? { ...x, done: false } : x)), ); } fetch(`${apiBase}/todos/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json", Authorization: `Bearer ${authToken}`, }, body: JSON.stringify({ done: !currentDone }), }).catch(() => {}); }; const handleAdd = () => { const text = newText.trim(); if (!text) return; const tempId = `td-${Date.now()}`; setTodos((ts) => [ { id: tempId, text, done: false, source: null, priority: newPriority, due_date: newDueDate || null, }, ...ts, ]); setNewText(""); setNewPriority("medium"); setNewDueDate(""); setAdding(false); fetch(`${apiBase}/todos`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${authToken}`, }, body: JSON.stringify({ text, priority: newPriority, due_date: newDueDate || null, }), }) .then((r) => (r.ok ? r.json() : null)) .then((data) => { if (data) setTodos((ts) => ts.map((t) => (t.id === tempId ? { ...t, id: data.id } : t)), ); }) .catch(() => {}); }; const openTodos = todos.filter((t) => !t.done); const completedTodos = todos.filter((t) => t.done); const visibleOpen = expanded ? openTodos : openTodos.slice(0, LIMIT); const hasMore = openTodos.length > LIMIT; const [showCompleted, setShowCompleted] = useState(false); return ( ); } window.Rail = Rail; window.RightRail = RightRail;