// screens-notifications.jsx — the Notification Center. Vault's default view.
//
// Built to the Claude Design "Vault Notification Center.dc.html". Where the mock
// worked off hypotheticals, the copy is unified against Vault's real sources —
// see the CARVE-OUTS block below for every place this deliberately differs from
// the mock, and why.
//
// ARCHITECTURE. This screen renders; it does not aggregate. All eleven sources
// are normalized by lib-actions-feed.js, which also derives the six categories
// and four sections. Nothing here is stored: completing or re-dating an item
// writes to the SOURCE row and the next load reflects it. The only persistence
// is read-state (notification_reads) and preferences (notification_prefs).
//
// CARVE-OUTS FROM THE MOCK
// 1. The mock's ROUTE map sent Team -> "Action Dashboard". That screen is being
// retired, so Team items route to the screen owning the underlying record;
// a personal to-do has no owning screen and opens in place.
// 2. The mock showed the completion tick only on In Progress rows. Brian asked
// for reflexive completion, so the tick shows wherever the SOURCE supports
// it — and is absent, rather than fake, where it does not (meetings, call
// batches, RPM cards).
// 3. The mock's "push" is an in-app toast layer on a 1-minute-plays-as-1-second
// clock. Kept as a real clock. OS-level push (tab closed) is a later goal.
// 4. Added, not in the mock: a date-move control, a timezone selector, and a
// meeting lead-time selector. The first is Brian's write-back ruling; the
// other two are what make meeting times correct in Pacific.
// 5. The mock's Recent Activity card was hardcoded. It now reads the real
// completed tail.
// These were the root tokens as they stood BEFORE the 8/20 theme work, copied
// inline. Repointing them moves the Center onto the current neutrals (a slightly
// cooler page, darker ink) and makes it follow dark mode. Not a no-op -- the
// default view will look marginally different, by design.
const NC = {
canvas: "var(--bg)", ink: "var(--ink)", sec: "var(--muted)", muted: "var(--muted-2)",
line: "var(--line)", hair: "var(--line-2)", chip: "var(--surface-2)",
accent: "var(--accent)", accentDeep: "var(--accent-2)", accentSoft: "var(--accent-soft)",
good: "var(--ok)", risk: "var(--risk)", warn: "var(--warn)",
mono: "var(--f-mono)",
panel: {
background: "var(--surface)", border: "1px solid var(--line)",
borderRadius: "var(--r-card)", boxShadow: "var(--shadow-none)",
},
};
const NC_KICKER = {
fontSize: 11, fontWeight: 600, letterSpacing: ".04em",
textTransform: "uppercase", color: NC.muted,
};
// [LABEL, VALUE] — the same order as NC_POSITIONS/NC_FREQS/NC_LEADS above.
// I wrote this pair backwards first: NCSegGroup destructures ([label, val]), so
// the buttons read "light"/"dark" AND patched theme:"Light", which the CHECK in
// sql_87 rejected with a 400. The constraint did its job.
const NC_THEMES = [["Light", "light"], ["Dark", "dark"]];
// Timezones offered in Settings. Deliberately short: these are the zones Harvey
// actually operates in. A free-text field would let a typo through, and while
// sql_84's trigger would reject it, a dropdown never gets there.
const NC_ZONES = [
["Pacific", "America/Los_Angeles"],
["Mountain", "America/Denver"],
["Central", "America/Chicago"],
["Eastern", "America/New_York"],
["UTC", "UTC"],
];
// RETIRED 2026-09-01. reminder_freq was a single integer per person driving one
// setInterval, priority-blind and category-blind. Kept only so an older saved
// value still renders something if this file is ever rolled back.
const NC_FREQS = [["Off", 0], ["15 min", 15], ["30 min", 30], ["60 min", 60]];
// The five presets Brian approved, 2026-08-31. Deliberately NOT a free number:
// a cadence anyone can set to anything drifts into uselessness, and the grid
// stops being readable at a glance.
const NC_PRESETS = [
["Off", "off"], ["30 Min", "30min"], ["Hourly", "hourly"],
["Morning + Afternoon", "morning_afternoon"], ["Once Daily", "daily"],
];
// Meetings are ABSENT on purpose: they have their own lead-time reminder
// (meeting_lead_min, below), and adding them here would notify them twice.
const NC_REMIND_CATS = [
["Pipeline", "lead"], ["Client", "client"], ["Research", "research"],
["Outreach", "outreach"], ["Team", "team"],
];
const NC_PRIOS = [["High", "high"], ["Medium", "medium"], ["Low", "low"]];
// Must match list_due_reminder_slots(). One fact in two places, so it is named
// as such: if these move, sql_191 moves with them.
const NC_PRESET_DEFAULT = { high: "hourly", medium: "morning_afternoon", low: "daily" };
const NC_LEADS = [["At start", 0], ["5 min", 5], ["10 min", 10], ["15 min", 15], ["30 min", 30], ["60 min", 60]];
const NC_POSITIONS = [["Top right", "top-right"], ["Bottom right", "bottom-right"], ["Top center", "top-center"]];
// Delegates to VaultAlpha. This parsed hex text, so once its inputs became
// tokens in the 8/20 sweep it returned "rgba(NaN,NaN,NaN,a)" -- an invalid
// colour the browser drops silently, which is how the aging ramp on Weekly
// Research Progression went grey without an error.
function ncHexA(color, a) {
return window.VaultAlpha ? window.VaultAlpha(color, a)
: `color-mix(in srgb, ${color} ${Math.round((a || 0) * 100)}%, transparent)`;
}
// Segmented-control button. Hoisted to module scope on purpose — a component
// defined inside a render closure is a NEW type on every keystroke, which
// unmounts and remounts its subtree and steals focus from any input inside it.
function NCSeg({ label, active, onClick }) {
return (
);
}
function NCSegGroup({ options, value, onChange }) {
return (
);
}
function NCToggle({ on, onClick }) {
return (
);
}
// The cadence grid: category down, priority across. SPARSE — a cell only writes
// a value when it differs from the priority default, so changing the defaults
// later does not have to rewrite everyone's saved rules. Storing the resolved
// value in every cell is the "derived value stored as if authoritative" defect
// this codebase keeps paying for.
function NCReminderGrid({ rules, onChange }) {
const set = (cat, prio, val) => {
const next = JSON.parse(JSON.stringify(rules || {}));
if (val === NC_PRESET_DEFAULT[prio]) {
// back to the default: REMOVE the override rather than writing the same
// value, so the row stays sparse and keeps following the default.
if (next[cat]) { delete next[cat][prio]; if (!Object.keys(next[cat]).length) delete next[cat]; }
} else {
next[cat] = next[cat] || {};
next[cat][prio] = val;
}
onChange(next);
};
const valueOf = (cat, prio) =>
(rules && rules[cat] && rules[cat][prio]) || NC_PRESET_DEFAULT[prio];
return (
);
}
// ---------------------------------------------------------------- one row
function NCRow({ item, viewerTz, onReview, onComplete, onMoveDate, busy }) {
const [dateOpen, setDateOpen] = React.useState(false);
// The date popover had no way out except committing a date: clicking away or
// pressing Escape did nothing, so "changed my mind" meant moving the item.
const dateRef = React.useRef(null);
React.useEffect(() => {
if (!dateOpen) return;
const onDoc = (e) => { if (dateRef.current && !dateRef.current.contains(e.target)) setDateOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setDateOpen(false); };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
}, [dateOpen]);
const emphasise = item.unread;
return (
{item.headline || item.description}
{/* NEW is green: it means "arrived", not "wrong". Red here competed with
the overdue treatment and made an ordinary new item look urgent. */}
{item.unread && (
NEW
)}
{/* EVERY priority renders, not just High. Showing only High made the
board look like it contained nothing else — the team read the
absence of a badge as an absence of priority. */}
{item.priority_ && (
{item.priority_.toUpperCase()}
)}
{item.projectName}
{item.assignedBy ? {" \u2014 assigned by " + item.assignedBy} : null}
{!item.assignedBy && item.type !== "meeting" && item.description !== item.headline
? {" \u2014 " + item.description} : null}
{item.type === "meeting" && item.location ? {" \u2014 " + item.location} : null}
{item.catLabel}
{item.timeLabel}
{/* Date move — only where the source can actually accept a new date. */}
{item.canMoveDate && (
{dateOpen && (
Move to
{/* Anchored on the VIEWER'S zone, not the browser's. todayStr() is
the browser date; between midnight and 8am UTC it is a day
ahead of Pacific, so "Tomorrow" would move the item two days. */}
{[["Today", 0], ["Tomorrow", 1], ["Next week", 7]].map(([lbl, d]) => (
))}
{ if (e.target.value) { setDateOpen(false); onMoveDate(item, e.target.value); } }}
style={{ border: "1px solid " + NC.line, borderRadius: "var(--r-ctl)", padding: "5px 7px",
fontFamily: NC.mono, fontSize: 11, color: NC.ink }}/>
)}
)}
{/* Completion — absent, not fake, where the source owns it. */}
{item.canComplete && (
)}
);
}
// ---------------------------------------------------------------- loader
// NCLoading moved to shell.jsx as window.VaultLoader. The Calendar screen needs
// the same 25-second-wait treatment, and two copies of a loading animation is
// exactly the kind of thing that drifts.
// ---------------------------------------------------------------- toasts
// NCToastLayer lived here and is gone. The toast layer is the shell's
// (VaultPushLayer) so it renders on every screen and, critically, ABOVE the
// settings overlay. Leaving a second copy here would be dead code that a later
// change could re-wire at the wrong z-index and reintroduce the invisible-toast
// bug.
// ---------------------------------------------------------------- add action
// PORTED from the deleted Action Dashboard. Removing that screen took the ONLY
// way to create a personal or project action with it — nothing else in Vault
// calls createUserAction or createProjectAction. The Notification Center owns
// the Team and Client categories those rows feed, so the entry point belongs
// here.
//
// Module scope, not declared inside the screen: a component defined in a render
// closure is a new type every keystroke, which remounts the inputs and steals
// focus after each character.
const NC_ADD_CTL = {
width: "100%", fontSize: 15, color: NC.ink, background: "var(--surface)",
border: "1px solid " + NC.line, borderRadius: "var(--r-ctl)", padding: "11px 13px",
outline: "none", boxSizing: "border-box", fontFamily: "inherit",
};
const NC_ADD_LAB = { fontSize: 11, marginBottom: 3, color: NC.muted };
function NCAddActionModal({ viewer, peoplePickerList, onClose, onCreated }) {
const people = peoplePickerList || [];
const [ownerId, setOwnerId] = React.useState((viewer && viewer.id) || (people[0] && people[0].id) || null);
const [kind, setKind] = React.useState("personal"); // personal -> user_actions, project -> project_actions
const [projectPick, setProjectPick] = React.useState("");
const [description, setDescription] = React.useState("");
const [dueDate, setDueDate] = React.useState(() => window.VaultActionsFeed.todayStr());
const [projectName, setProjectName] = React.useState("");
const [priority, setPriority] = React.useState("normal");
const [notes, setNotes] = React.useState("");
const [saving, setSaving] = React.useState(false);
const submit = async () => {
if (!description.trim()) { window.VaultUI.toast("error", "Description is required."); return; }
if (!dueDate) { window.VaultUI.toast("error", "Due date is required."); return; }
if (!ownerId) {
window.VaultUI.toast("error", "Assigned-to is required. If you don't see yourself in the dropdown, your account may not be linked to a Vault person \u2014 flag for admin.");
return;
}
if (kind === "project" && !projectPick && !projectName.trim()) {
window.VaultUI.toast("error", "Pick a project (or type a project name) for a Project action.");
return;
}
setSaving(true);
try {
const moduleHandle = viewer.team || (viewer.subteam ? String(viewer.subteam).replace(/^st-/, "") : null);
if (kind === "project") {
const proj = (window.HARVEY_CLIENTS || []).find(p => String(p.id) === String(projectPick)) || null;
await window.VaultAPI.createProjectAction({
ownerId: ownerId,
projectId: proj ? proj.id : null,
projectName: proj ? proj.client : (projectName.trim() || null),
module: moduleHandle,
nextAction: description.trim(),
dueDate: dueDate,
notes: notes.trim() || null,
});
} else {
await window.VaultAPI.createUserAction({
ownerId: ownerId,
module: moduleHandle,
projectName: projectName.trim() || null,
description: description.trim(),
dueDate: dueDate,
priority: priority,
notes: notes.trim() || null,
});
}
onCreated();
} catch (err) {
setSaving(false);
window.VaultUI.toast("error", "Failed to create action: " + (err.message || err));
}
};
return ReactDOM.createPortal(