// ============================================================================= // JARVIS DASHBOARD — App shell // // Architecture: // - All data flows through window.useJarvisData(key) → the active adapter. // - All mutations flow through window.JD.mutate(method, ...args). // - Cross-tab interaction state (Jarvis drawer, prep checks, Store-Boss chat) // lives in SharedContext and is read via window.useShared(). // - Per-tab UI lives in src/tabs/*.jsx and registers on window.JD_TABS. // // The shell itself contains zero business logic — no canned tasks, no fake // counts, no hardcoded clients. Everything renders from adapter responses. // ============================================================================= (function () { const { useState, useRef, useEffect, useCallback, useMemo } = React; const { C, TABS } = window.JD_THEME; const { Empty } = window.JD_STYLES; // ---- Shared interaction state -------------------------------------------- const SharedContext = React.createContext(null); function SharedProvider({ children }) { // Jarvis drawer const [jarvisOpen, setJarvisOpen] = useState(false); const [jarvisInput, setJarvisInput] = useState(""); const [jarvisMessages, setJarvisMessages] = useState([]); const [voiceMode, setVoiceMode] = useState(false); const jarvisRef = useRef(null); // 72-hr prep checks (Dashboard + Calendar + top-bar popup all share) const [prepChecks, setPrepChecks] = useState({}); const [meetingAlertOpen, setMeetingAlertOpen] = useState(false); // Store Boss chat (Dashboard inline + Store tab full panel) const [storeMsg, setStoreMsg] = useState(""); const [storeMsgs, setStoreMsgs] = useState([]); const sendJarvis = useCallback(async () => { if (!jarvisInput.trim()) return; const msg = jarvisInput; setJarvisMessages(m => [...m, { role: "user", msg }]); setJarvisInput(""); try { const reply = await window.JD.mutate("sendJarvisMessage", msg); if (reply && reply.msg) setJarvisMessages(m => [...m, reply]); } catch (e) { setJarvisMessages(m => [...m, { role: "assistant", msg: "Adapter error: " + e.message }]); } setTimeout(() => { if (jarvisRef.current) jarvisRef.current.scrollTop = jarvisRef.current.scrollHeight; }, 50); }, [jarvisInput]); const sendStoreBoss = useCallback(async () => { if (!storeMsg.trim()) return; const msg = storeMsg; setStoreMsgs(m => [...m, { role: "user", msg }]); setStoreMsg(""); try { const reply = await window.JD.mutate("sendStoreBossMessage", msg); if (reply && reply.msg) setStoreMsgs(m => [...m, reply]); } catch (e) { setStoreMsgs(m => [...m, { role: "assistant", msg: "Adapter error: " + e.message }]); } }, [storeMsg]); const value = useMemo(() => ({ jarvisOpen, setJarvisOpen, jarvisInput, setJarvisInput, jarvisMessages, setJarvisMessages, voiceMode, setVoiceMode, jarvisRef, sendJarvis, prepChecks, setPrepChecks, meetingAlertOpen, setMeetingAlertOpen, storeMsg, setStoreMsg, storeMsgs, setStoreMsgs, sendStoreBoss, }), [ jarvisOpen, jarvisInput, jarvisMessages, voiceMode, prepChecks, meetingAlertOpen, storeMsg, storeMsgs, sendJarvis, sendStoreBoss, ]); return {children}; } window.useShared = () => React.useContext(SharedContext); // ---- Top bar ------------------------------------------------------------- function TopBar({ tab, setTab }) { const { jarvisOpen, setJarvisOpen, meetingAlertOpen, setMeetingAlertOpen, prepChecks, setPrepChecks } = window.useShared(); const { data: user } = window.useJarvisData("user"); const { data: emails } = window.useJarvisData("emails"); const { data: meetings72 } = window.useJarvisData("meetings72"); const { data: calEvents } = window.useJarvisData("calendarEvents"); const { data: highest } = window.useJarvisData("highestValueTask"); const today = new Date(); const dateLabel = today.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }); const unread = (emails || []).length; const eventsThisWeek = Object.values(calEvents || {}).flat().length; const u = user || {}; const m72 = meetings72 || []; const { bgg, br } = window.JD_STYLES; const { EVT } = window.JD_THEME; return ( <>
{u.org || "Lovejoy Innovative Planning"}
{dateLabel}
{unread} unread
0 overdue
{eventsThisWeek} events this week
{meetingAlertOpen && (
Upcoming Meetings
{m72.length === 0 ? : m72.map((m, i) => (
{m.title}
{m.date} · {m.time}
{prepChecks[i] !== true && (
)}
))}
)}
{u.initials || "—"}
Today
{highest ? <>Highest value task: {highest} : Run morning brief to set highest-value task}
{TABS.map(t => (
t === "Jarvis" ? setJarvisOpen(!jarvisOpen) : setTab(t)} style={{ padding: "11px 18px", fontSize: 14, letterSpacing: "0.12em", textTransform: "uppercase", color: (tab === t && t !== "Jarvis") || (t === "Jarvis" && jarvisOpen) ? C.gold : "rgba(222,214,185,0.78)", borderBottom: "2px solid " + ((tab === t && t !== "Jarvis") || (t === "Jarvis" && jarvisOpen) ? C.gold : "transparent"), cursor: "pointer", fontFamily: "Georgia,serif", whiteSpace: "nowrap" }}> {t}
))}
); } function pillStyle(color, alpha) { return { fontSize: 14, color: "rgba(222,214,185,0.7)", padding: "3px 10px", background: hexA(color, alpha), borderRadius: 10, border: "0.5px solid " + hexA(color, 0.2), }; } function hexA(hex, a) { // approximate alpha; we use rgba strings for known colors const rgb = parseInt(hex.replace("#", ""), 16); const r = (rgb >> 16) & 0xff, g = (rgb >> 8) & 0xff, b = rgb & 0xff; return `rgba(${r},${g},${b},${a})`; } // ---- Jarvis drawer ------------------------------------------------------- function JarvisDrawer() { const { jarvisOpen, setJarvisOpen, jarvisInput, setJarvisInput, jarvisMessages, voiceMode, setVoiceMode, jarvisRef, sendJarvis } = window.useShared(); const { data: user } = window.useJarvisData("user"); const { inp, bg, Empty } = window.JD_STYLES; if (!jarvisOpen) return null; return (
Jarvis
Executive AI Assistant
{jarvisMessages.length === 0 && } {jarvisMessages.map((m, i) => (
{m.role === "user" ? ((user && user.initials && user.initials[0]) || "U") : "J"}
{m.msg}
))}
setJarvisInput(e.target.value)} onKeyDown={e => e.key === "Enter" && sendJarvis()} placeholder="Ask Jarvis anything..." style={{ ...inp, flex: 1 }} />
); } // ---- App root ------------------------------------------------------------ function App() { const [tab, setTab] = useState("Dashboard"); const tabs = window.JD_TABS || {}; const TabComponent = tabs[tab] || tabs.Dashboard; // Body uses cream background for content tabs (matches design). return (
{TabComponent ? :
Tab missing: {tab}
}
); } // Load tab modules then mount. We expect tab scripts to load before app.jsx, // but they may use a deferred registration pattern — wait one tick. function mount() { if (!window.JD_TABS || !window.JD_TABS.Dashboard) { // try again next tick return requestAnimationFrame(mount); } ReactDOM.createRoot(document.getElementById("root")).render(); } mount(); })();