);
}
// Login stage — the universe matches the platform: dark canvas, ambient
// parallax dots, the same Nudge brand mark. Centered card with email +
// password. Prototype behaviour: any non-empty submit signs you in.
function LoginScreen({ onSubmit }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [touched, setTouched] = useState(false);
const emailRef = useRef(null);
useEffect(() => {
if (emailRef.current) emailRef.current.focus();
}, []);
const submit = (e) => {
if (e) e.preventDefault();
setTouched(true);
// Prototype gate — any click signs you in, whether fields are filled
// or not. Real auth lives behind a real backend; this is just a stage.
onSubmit();
};
return (
Nudge®
Sign in
Welcome back. Pick up your deals where you left them.
);
}
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [projectSettings, setProjectSettings] = useState(loadProjectSettings);
// Navigation starts at the login screen. Anything typed and submitted
// counts as a successful sign-in — this is a prototype gate, not real
// auth — so the rest of the app loads after the first click.
const [loggedIn, setLoggedIn] = useState(false);
const [route, setRouteRaw] = useState("deals");
const [prevRoute, setPrevRoute] = useState("deals");
const [settingsSection, setSettingsSection] = useState("profile");
const setRoute = useCallback((next) => {
setRouteRaw((current) => {
if (next === "settings" && current !== "settings") setPrevRoute(current);
return next;
});
}, []);
const exitSettings = useCallback(() => {
setRouteRaw(prevRoute && prevRoute !== "settings" ? prevRoute : "deals");
}, [prevRoute]);
const [dashboardView, setDashboardView] = useState(() => projectSettings.workspace?.defaultView || "ae");
const [managerSection, setManagerSection] = useState("home");
const [deals, setDeals] = useState(() => {
const cloned = SEED_DEALS.map((deal) => ({
...deal,
activity: [...(deal.activity || [])],
meetings: deal.meetings ? deal.meetings.map((meeting) => ({ ...meeting })) : undefined,
}));
// Demo freshener — inject "right now" activity + a near-term meeting
// per priority deal so every demo opens in a deal-in-motion state.
return typeof window.freshenDeals === "function"
? window.freshenDeals(cloned)
: cloned;
});
const [openId, setOpenId] = useState(null);
const [detailTab, setDetailTab] = useState("overview");
const [view, setView] = useState(tweaks.dealView || "cards");
const [forecastOpen, setForecastOpen] = useState(false);
const [sidebarExpanded, setSidebarExpanded] = useState(true);
const handleProjectSettingsChange = useCallback((edits) => {
setProjectSettings((current) => {
const merge = window.mergeNudgeSettings || ((settings) => settings || {});
return merge({ ...current, ...edits });
});
if (edits.workspace?.defaultView && edits.workspace.defaultView !== dashboardView) {
setDashboardView(edits.workspace.defaultView);
setManagerSection("home");
}
}, [dashboardView]);
const resetProjectSettings = useCallback((nextSettings) => {
const merge = window.mergeNudgeSettings || ((settings) => settings || {});
const next = merge(nextSettings);
setProjectSettings(next);
setDashboardView(next.workspace?.defaultView || "ae");
setRoute("home");
setManagerSection("home");
}, []);
useEffect(() => {
saveProjectSettings(projectSettings);
}, [projectSettings]);
// Global handle so the homepage weather banner (or any other surface)
// can open the forecast — the sidebar no longer carries a dedicated
// forecast button.
useEffect(() => {
window.openBuyerForecast = () => setForecastOpen(true);
return () => { delete window.openBuyerForecast; };
}, []);
// Global receipts target — any AgentChip can call window.openReceipts({ ... })
// to open the slide-over. Lives at App level so a single panel serves every
// screen and modal.
const [receiptPayload, setReceiptPayload] = useState(null);
useEffect(() => {
window.openReceipts = (payload) => setReceiptPayload(payload || null);
return () => { delete window.openReceipts; };
}, []);
// Global toast — any CTA can call window.fireToast(msg) to confirm an
// action. Single slot, auto-dismisses; new toasts replace the previous.
const [toast, setToast] = useState(null);
useEffect(() => {
window.fireToast = (msg, opts = {}) => {
if (!msg) return;
setToast({ id: Date.now() + Math.random(), msg, ...opts });
};
return () => { delete window.fireToast; };
}, []);
// Action preview — modal that shows WHAT will happen before it fires.
// Carousel CTAs call window.previewAction({ ..., onConfirm }) instead of
// executing directly. Confirm runs the payload.onConfirm callback.
const [previewPayload, setPreviewPayload] = useState(null);
useEffect(() => {
window.previewAction = (payload) => setPreviewPayload(payload || null);
return () => { delete window.previewAction; };
}, []);
// Addy state — the sidebar logo dots are Addy's presence. State drives
// their animation vocabulary (idle / scanning / has-something / speaking
// / needs-you / listening). Demo hooks: window.setAddyState(state) and
// window.setAddyUnread(n).
const [addyState, setAddyState] = useState("idle");
const [addyUnread, setAddyUnread] = useState(0);
useEffect(() => {
window.setAddyState = (state) => setAddyState(state || "idle");
window.setAddyUnread = (n) => setAddyUnread(Math.max(0, Number(n) || 0));
return () => {
delete window.setAddyState;
delete window.setAddyUnread;
};
}, []);
// Addy whisper — floating bubble where she speaks. Single slot; a new
// whisper replaces the previous one. While visible, dots run "speaking";
// on dismiss they return to "idle". Every fired whisper is also pushed
// onto whisperLog so the spotlight can show what she recently noticed.
const [whisper, setWhisper] = useState(null);
const [whisperLog, setWhisperLog] = useState([]);
const dismissWhisper = useCallback((opts = {}) => {
setWhisper(null);
setAddyState((s) => (s === "speaking" ? "idle" : s));
if (opts.unread) {
setAddyUnread((n) => n + 1);
setAddyState("has-something");
}
}, []);
useEffect(() => {
window.fireWhisper = (payload) => {
if (!payload || !payload.text) return;
const item = { id: Date.now() + Math.random(), at: new Date(), ...payload };
setWhisper(item);
setWhisperLog((log) => [item, ...log].slice(0, 20));
setAddyState("speaking");
};
window.dismissWhisper = () => dismissWhisper();
return () => {
delete window.fireWhisper;
delete window.dismissWhisper;
};
}, [dismissWhisper]);
// Addy spotlight — summoned by clicking the sidebar dots or pressing
// ⌘K / Ctrl+K. Anchored top-left so it reads as "growing from her eyes."
// Opening absorbs any visible whisper, clears the unread badge, and
// sets dots to "listening".
const [spotlightOpen, setSpotlightOpen] = useState(false);
const openSpotlight = useCallback(() => {
setSpotlightOpen(true);
setWhisper(null);
setAddyUnread(0);
setAddyState("listening");
}, []);
const closeSpotlight = useCallback(() => {
setSpotlightOpen(false);
setAddyState("idle");
}, []);
useEffect(() => {
window.openAddy = openSpotlight;
window.closeAddy = closeSpotlight;
return () => {
delete window.openAddy;
delete window.closeAddy;
};
}, [openSpotlight, closeSpotlight]);
// ⌘K / Ctrl+K — global summon hotkey.
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
e.preventDefault();
if (spotlightOpen) closeSpotlight();
else openSpotlight();
}
};
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [spotlightOpen, openSpotlight, closeSpotlight]);
// Keep the first screen on Deal Truth; the forecast remains available from
// the sidebar instead of opening over the default experience.
useEffect(() => {
if (typeof window !== "undefined" && window !== window.parent) return;
if (route !== "deals" && shouldShowForecastToday()) setForecastOpen(true);
}, [route]);
const closeForecast = useCallback(() => {
markForecastShown();
setForecastOpen(false);
}, []);
// Apply theme + density + accent CSS vars to document
useEffect(() => {
const themeTarget = document.documentElement;
themeTarget.dataset.theme = tweaks.theme;
themeTarget.dataset.density = tweaks.density;
document.body.dataset.theme = tweaks.theme;
document.body.dataset.density = tweaks.density;
const a = ACCENTS[tweaks.accent] || ACCENTS.ember;
const L = a.lightness ?? 0.74;
const root = themeTarget.style;
root.setProperty("--accent", `oklch(${L} ${a.chroma} ${a.hue})`);
root.setProperty("--accent-soft", `oklch(${L} ${a.chroma} ${a.hue} / 0.18)`);
root.setProperty("--accent-strong", `oklch(${Math.min(L + 0.05, 0.92)} ${a.chroma + 0.02} ${a.hue - 5})`);
root.setProperty("--accent-ink", a.ink);
}, [tweaks.theme, tweaks.density, tweaks.accent]);
useEffect(() => { setView(tweaks.dealView); }, [tweaks.dealView]);
// Hash-based deep link to the /brand preview. Doesn't replace the
// sidebar router — just lets `#brand` (or `#/brand`) land directly on
// the brand identity page so it can be linked from outside the app.
useEffect(() => {
const checkHash = () => {
const h = (window.location.hash || "").replace(/^#\/?/, "");
if (h === "brand" || h === "brand-preview") setRoute("brand");
};
checkHash();
window.addEventListener("hashchange", checkHash);
return () => window.removeEventListener("hashchange", checkHash);
}, []);
const openDeal = (id, initialTab = "overview") => {
setDetailTab(initialTab);
setOpenId(id);
};
const closeDeal = () => setOpenId(null);
const updateDeal = useCallback((id, updater) => {
setDeals((current) => current.map((deal) => {
if (deal.id !== id) return deal;
return typeof updater === "function" ? updater(deal) : { ...deal, ...updater };
}));
}, []);
// Resolve the open deal. SEED_DEALS first; manager-synthetic deals
// (mgr-meridian / mgr-evergreen / mgr-kestrel) aren't in SEED_DEALS so
// fall back to the manager-shape lookup exposed by ManagerView when in
// manager mode.
const deal = (() => {
if (!openId) return null;
const fromSeed = deals.find((d) => d.id === openId);
if (fromSeed) return fromSeed;
if (dashboardView === "manager" && typeof window.findManagerDeal === "function") {
return window.findManagerDeal(openId);
}
return null;
})();
const homeSuggestion = {
title: "Would you like me to draft a follow-up email for Sarah?",
sub: "I can prepare a personalised email based on the deal context.",
deal: "atlas",
};
const dealsSuggestion = {
title: "3 deals have seller activity ahead of buyer progression.",
sub: "Switch lenses to see the seller story, buyer story, and full deal truth.",
};
const routeLabels = {
home: "Home",
deals: "Deal Truth",
analytics: "Analytics",
alerts: "Alerts",
setup: "Setup",
settings: "Settings",
playbook: "Playbooks",
};
const routeLabel = routeLabels[route] || "Nudge";
const currentTourMode = (() => {
if (deal) return dashboardView === "manager" ? "mgr-deal-room" : "ae-deal-room";
if (dashboardView === "manager" && managerSection === "deals") return "mgr-deals";
if (dashboardView === "manager" && managerSection === "config") return "mgr-analytics";
if (route === "home") return dashboardView === "manager" ? "manager" : "ae";
if (route === "deals") return "deals";
if (route === "analytics") return "analytics";
if (route === "alerts") return "alerts";
if (route === "setup") return "setup";
if (route === "playbook") return "playbook";
return null;
})();
const currentTourAutoKey = currentTourMode
? `nudge.demoTour.pageSeen.v3.${currentTourMode}`
: "";
const contextualSuggestion = deal
? {
title: `Ask Addy about ${deal.company}`,
sub: `${deal.stage} · ${(deal.value / 1000).toFixed(0)}K · ${deal.statusLabel}`,
deal: deal.id,
}
: {
title: `Ask Addy about ${routeLabel}`,
sub: route === "deals" ? "Seller activity, buyer progression, and the full deal truth." : "Context-aware help for this section.",
};
const suggestion = route === "home" ? homeSuggestion : deal ? contextualSuggestion : route === "deals" ? dealsSuggestion : contextualSuggestion;
const activeSuggestion = suggestion;
const navigateTour = useCallback((mode = "ae") => {
setPreviewPayload(null);
setForecastOpen(false);
if (mode === "ae-deal-room" || mode === "mgr-deal-room") {
const isMgr = mode === "mgr-deal-room";
setDashboardView(isMgr ? "manager" : "ae");
setRoute("deals");
setManagerSection("deals");
setDetailTab("overview");
setOpenId("atlas");
return;
}
if (mode === "mgr-deals" || mode === "mgr-analytics") {
setOpenId(null);
setDashboardView("manager");
setRoute("home");
setManagerSection(mode === "mgr-deals" ? "deals" : "config");
if (mode === "mgr-deals") {
setView("cards");
setTweak("dealView", "cards");
}
return;
}
if (mode === "deals" || mode === "analytics" || mode === "alerts" || mode === "setup" || mode === "playbook") {
setOpenId(null);
setRoute(mode);
if (mode === "deals") setManagerSection("deals");
if (mode === "deals") {
setView("cards");
setTweak("dealView", "cards");
}
return;
}
setOpenId(null);
setDashboardView(mode === "manager" ? "manager" : "ae");
setRoute("home");
setManagerSection("home");
}, []);
// Login gate — the rest of the app is hidden until the user signs in.
// Any non-empty submit counts as success (prototype, not real auth).
if (!loggedIn) {
return (
setLoggedIn(true)} />
);
}
// Embedded mode (mobile preview iframe): show only the deals list view.
// No sidebar, no AI dock, no forecast popup, no tweaks panel, no tour.
const isEmbedded = typeof window !== "undefined" && window !== window.parent;
if (isEmbedded) {
return (
);
}
// Format big money — used by AnimatedMoney as the dollars tick up.
// Matches the existing fmtK shape used by carousels ($X.XM or $XXX K).
function fmtBigMoney(n) {
const abs = Math.abs(n);
if (abs >= 1000000) return `$${(abs / 1000000).toFixed(abs >= 10000000 ? 0 : 1)}M`;
return `$${Math.round(abs / 1000)}K`;
}
// Tick a dollar value from $0 up to the target on mount. Quartic ease-out
// so it sprints out, then lingers on the final value — felt as the system
// "landing" on a number, not just animating one in. ~1.2s feels noticed
// without dragging on the modal reveal.
function AnimatedMoney({ value, duration = 1200, delay = 220 }) {
const [n, setN] = useState(0);
useEffect(() => {
if (!value || value <= 0) { setN(0); return; }
let raf;
let startDelay;
const begin = (startTime) => {
const step = (t) => {
const p = Math.min(1, (t - startTime) / duration);
const eased = 1 - Math.pow(1 - p, 4);
setN(value * eased);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
};
// small delay so the modal slide-in plays first, then the number ticks.
startDelay = setTimeout(() => begin(performance.now()), delay);
return () => {
if (raf) cancelAnimationFrame(raf);
if (startDelay) clearTimeout(startDelay);
};
}, [value, duration, delay]);
return fmtBigMoney(n);
}
// Global action toast. Pops bottom-center when window.fireToast(msg) is
// called. Auto-dismisses after ~3.5s; consecutive toasts swap the slot.
function NudgeToast({ toast, onDismiss }) {
useEffect(() => {
if (!toast) return;
const t = setTimeout(onDismiss, 3500);
return () => clearTimeout(t);
}, [toast && toast.id, onDismiss]);
if (!toast) return null;
return (
{toast.msg}
);
}
// Action preview modal — shown before any CTA fires its action. Renders a
// drafted message / challenge / review item, with evidence backing the
// move. Cancel closes; Confirm calls payload.onConfirm and closes.
function ActionPreview({ payload, onClose }) {
useEffect(() => {
if (!payload) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.removeEventListener("keydown", onKey);
document.body.style.overflow = prev;
};
}, [payload, onClose]);
if (!payload) return null;
const confirm = () => {
if (typeof payload.onConfirm === "function") payload.onConfirm();
onClose();
};
return (
{typeof e === "string"
? e
: (<>{e.label}{e.label ? " · " : ""}{e.value})}
))}
)}
);
}
// Addy whisper — Addy's voice surfacing in context. Pops bottom-right of
// the viewport. Auto-dismisses unless dismissed manually. Identity tied to
// the sidebar dots via the mini ·· mark inside the bubble. Up to 3 actions
// + always a close × (dismisses without acting). Esc closes too.
function AddyWhisper({ whisper, onDismiss }) {
useEffect(() => {
if (!whisper) return;
const duration = whisper.durationMs || 12000;
const t = setTimeout(() => onDismiss({ unread: true }), duration);
const onKey = (e) => { if (e.key === "Escape") onDismiss({ unread: true }); };
document.addEventListener("keydown", onKey);
return () => {
clearTimeout(t);
document.removeEventListener("keydown", onKey);
};
}, [whisper && whisper.id, onDismiss]);
if (!whisper) return null;
const variant = whisper.variant || "default";
const actions = (whisper.actions || []).slice(0, 3);
return (
Addy
{whisper.text}
{actions.length > 0 && (
{actions.map((a, i) => (
))}
)}
);
}
// AddyTrace — small ◆ Addy badge on any card she originated, with a
// click-to-trace popover. Visually ties to the dots (same ·· mark, accent
// color). Trace content is per-card: signal → variable → drafted action →
// time. Exposed via window.AddyTrace so screen files can render it without
// prop-drilling. Popover dismisses on outside click or Esc.
function AddyTrace({ signal, variable, action, drafted, time }) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDoc);
document.removeEventListener("keydown", onKey);
};
}, [open]);
return (
{open && (
How Addy got here
{signal && (
Signal
{signal}
)}
{variable && (
Variable
{variable}
)}
{action && (
{drafted ? "Drafted" : "Surfaced"}
{action}
)}
{time && (
When
{time}
)}
)}
);
}
// Tiny relative-time formatter — "just now", "12m ago", "2h ago".
function addyTimeAgo(date) {
if (!date) return "";
const ms = Date.now() - new Date(date).getTime();
if (ms < 60000) return "just now";
if (ms < 3600000) return `${Math.round(ms / 60000)}m ago`;
if (ms < 86400000) return `${Math.round(ms / 3600000)}h ago`;
return `${Math.round(ms / 86400000)}d ago`;
}
// Addy spotlight — summoned by clicking the sidebar dots or ⌘K. Anchored
// top-left so it reads as growing from her eyes. Shows what she recently
// noticed (the whisper log), plus a free-text ask input.
function AddySpotlight({ open, onClose, whisperLog }) {
const inputRef = useRef(null);
const threadRef = useRef(null);
const replyTimerRef = useRef(null);
const [messages, setMessages] = useState([]);
const [thinking, setThinking] = useState(false);
useEffect(() => {
if (!open) {
// Reset thread when the spotlight closes so each summon starts fresh.
setMessages([]);
setThinking(false);
if (replyTimerRef.current) {
clearTimeout(replyTimerRef.current);
replyTimerRef.current = null;
}
return;
}
const t = setTimeout(() => { if (inputRef.current) inputRef.current.focus(); }, 220);
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => {
clearTimeout(t);
document.removeEventListener("keydown", onKey);
};
}, [open, onClose]);
// Auto-scroll the thread to the latest message.
useEffect(() => {
const el = threadRef.current;
if (el) el.scrollTop = el.scrollHeight;
}, [messages.length, thinking]);
if (!open) return null;
const recent = (whisperLog || []).slice(0, 6);
const noticed = recent.length;
const hasThread = messages.length > 0 || thinking;
// Cheap improv replies so Addy responds in-character without an LLM call.
// Matched by keywords; falls through to a neutral acknowledgment.
const improviseReply = (q) => {
const t = q.toLowerCase();
if (/(next|move|do now|priorit)/.test(t)) return "Pull the Atlas pricing thread first — it's been quiet 9 days and the redline-clarification draft is the lowest-friction restart. I have it ready.";
if (/(summar|status|where)/.test(t)) return "Three deals carry risk: Atlas (procurement blocked), Nexus (single-threaded), Quantum (no decision criteria). Atlas is the most leveraged of the three.";
if (/(draft|write|email)/.test(t)) return "I can draft a champion check-in for Atlas or a finance intro for Nexus. Which one helps more right now?";
if (/(forecast|number|commit)/.test(t)) return "Weighted forecast holds at $2.4M, but $640K of that depends on Atlas closing — worth treating that one as the swing.";
if (/(why|reason)/.test(t)) return "Buyer activity dropped 15 pts on Atlas after the procurement handoff, and the champion went dark for 9 days. That's the signal.";
if (/(thank|thanks|ok|got it)/.test(t)) return "On it. I'll surface anything new as it lands.";
return "Got it. I'll pull the latest on that and surface what I'm seeing.";
};
const onAskKey = (e) => {
if (e.key === "Enter" && e.target.value.trim()) {
e.preventDefault();
const q = e.target.value.trim();
e.target.value = "";
setMessages((m) => [...m, { role: "user", text: q, ts: Date.now() }]);
setThinking(true);
if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
replyTimerRef.current = setTimeout(() => {
setThinking(false);
setMessages((m) => [...m, { role: "addy", text: improviseReply(q), ts: Date.now() }]);
replyTimerRef.current = null;
}, 900);
}
};
return (