No stages yet
{canManageSched ? "Add the first one with + Add stage. Each stage shows here and as a bar on the calendar." : "The producer has not planned the stages yet."}
{(_isPF || script.modified)
?
SCRIPT · MODIFIED {script.modified}
: SCRIPT
}
{/* 15 Sep 2026 — a project with no script yet (Trøpé) has no title: String() keeps the page up */}
{String(script.title || "").split(" — ")[0]}
{/* 15 Sep 2026 — a templated project with no container yet: the container word, no Paradise Found row. */}
{!_isPF && episodes.length === 0 && (
)}
{tab === "screenplay" && (
No {_containerWord(true).toLowerCase()} yet.
)}
{episodes.map(ep => {
const isOpen = openEpisode === ep.id;
return (
{isOpen && (
);
})}
{/* v07zz62 — Hugo: "I asked you to use those
briefs as GUIDE to PARSE FROM and rebuild
the script sections like you had before.
Not add some stupod block of text." The
SOURCE SCRIPTS picker + body is removed.
briefScripts is still fetched (above) and
used as a parser data source on the server
side so brief content can enrich the
per-shot parsed scenes; nothing renders
directly in the UI. */}
{/* v07zz49 — Character filter row. Click a pill to
highlight that character's lines and dim
everything else. Click again or "All" to clear.
Sticky position so it stays at the top of the
script as Hugo scrolls. */}
{speakers.length > 0 && (
.json exists. */}
{voScript && ep.id === _activeEpId && voScript.paragraphs
.map((p, i) => ({ ...p, _idx: i }))
.filter(p => !characterFilter || p.speaker === characterFilter)
.map(p => (
))}
{/* v07zz51 — Speaker filter behaviour changed. Hugo:
"if we click on Columbus, we would see only
columbus' lines, one after the other, not
greyed out." Now: when a filter is active, we
FILTER OUT scenes that don't include that speaker
AND within each remaining scene only render the
matching lines. No more dim/grey-out. */}
{!voScript && ep.scenes
.filter(sc => !characterFilter || (sc.lines || []).some(ln => ln && ln.speaker === characterFilter))
.map((sc, i) => {
const visibleLines = (sc.lines || []).filter(ln =>
!characterFilter || (typeof ln !== "string" && ln.speaker === characterFilter)
);
return (
{sc.speaker && li === 0 &&
);
}
return (
);
})}
)}
{speakers.map(sp => (
))}
)}
{ep.scenes.length === 0 && (
{_isPF
? <>Script for this episode is in {ep.status}. No scenes yet.
: `No scenes yet for this ${_containerWord(false).toLowerCase()}.`}
)}
{/* v07zz551 — VO-paragraph view (the ingested Prompt Script).
Consecutive same-speaker scenes = ONE copyable paragraph with a
"Scenes NNN–NNN · first → last title" note. Replaces the
per-line list when data/vo-scripts/
{String(p._idx + 1).padStart(2, "0")}
{p.title_from || "(untitled)"}{p.title_to && p.title_to !== p.title_from ? " → " + p.title_to : ""}
{p.scene_from === p.scene_to
? `SCENE ${String(p.scene_from).padStart(3, "0")}`
: `SCENES ${String(p.scene_from).padStart(3, "0")}–${String(p.scene_to).padStart(3, "0")}`}
{` · ${p.scenes.length} shot${p.scenes.length === 1 ? "" : "s"}`}
{p.speaker}
{p.text}
{String(i + 1).padStart(2, "0")}
{sc.heading}
{sc.shot_id ? sc.shot_id : (!_isPF && sc.seq == null) ? "" : `SEQ ${String(sc.seq).padStart(2,"0")}`}
{visibleLines.map((ln, li) => {
if (typeof ln === "string") {
return (
{sc.speaker}
}
{ln}
{ln.speaker && (
);
})}
{ln.speaker}{ln.qualifier ? ` (${ln.qualifier})` : ""}
)}
{ln.line}
{!screenplay.found && (
)}
{screenplay.found && (
)}
{tab === "shotlist" && (() => {
// v03i / fix — 21:9 thumb ratio (cinema standard for Paradise Found).
// 15 Sep 2026 — a templated project uses its own aspect ratio (projects.aspect_ratio).
const aspect = _isPF ? "21:9" : (window.__projectAspectRatio || "21:9");
// Detect a latin binomial pattern (Genus species) to split species
// out of the Characters column.
const isSpeciesName = (s) => /\b[A-Z][a-z]+\s+[a-z]+\b/.test(String(s || ""));
const stageTintFor = (s) => {
const SP = (window.STAGE_TINTS) || {};
const stage = window.getCurrentStage ? window.getCurrentStage(s) : "PENDING";
return { stage, tint: SP[stage] || SP.PENDING || { bg: "var(--st-pending-fill, var(--pill-bg))", border: "var(--st-pending-line, var(--st-pending))", color: "var(--st-pending-ink)", dot: "var(--st-pending)", label: stage } };
};
return (
No screenplay file yet
Drop a screenplay.txt (or a .fountain file) into this {_isPF ? "episode" : _containerWord(false).toLowerCase()}'s brief folder and it appears here, formatted:
{_spPathHint}
Standard screenplay format — scene headings (INT./EXT.), a character name in CAPS on its own line, an optional (V.O.) parenthetical, then the dialogue, with action paragraphs in between.
{(screenplay.elements || []).map((el, i) => {
if (el.type === "title") return
)}
{String(el.text).split("\n").map((l, k) =>
;
if (el.type === "scene") return {l}
)}{el.text}
;
if (el.type === "transition") return {el.text}
;
if (el.type === "super") return {el.text}
;
if (el.type === "character") return {el.text}
;
if (el.type === "parenthetical") return {el.text}
;
if (el.type === "dialogue") return {el.text}
;
return {el.text}
; })}
{/* v03i — 10 columns: ID · Thumb · Seq · Frame Title · Type ·
Characters · Species · Location · Assets · Status.
Header row gets rounded corners via .shotlist-row--head. */}
);
})()}
IDThumbSeqFrame TitleType
CharactersSpeciesLocationAssetsStatus
{shots.slice(0, 80).map(s => {
const img = s.image_paths && (s.image_paths.selected || s.image_paths.first_pass);
// v03i — split: latin binomial → Species column; everything else → Characters column.
const speciesGuess = isSpeciesName(s.species) ? s.species : null;
const charactersText = !speciesGuess && s.species ? s.species : (s.behaviour || "—");
const location = s.landscape || "—";
// v03i / v04w — Assets column. Round avatar list for each
// reference_assets slug. Archival shots get a film-strip
// glyph in their first avatar slot.
const refSlugs = Array.isArray(s.reference_assets) ? s.reference_assets : [];
const archivalAvatar = s.is_archive ? [{ kind: "archival", label: "Archival footage" }] : [];
const avatars = [...archivalAvatar, ...refSlugs.slice(0, 3 - archivalAvatar.length).map(slug => ({ kind: "ref", slug }))];
const extraCount = Math.max(0, (refSlugs.length + archivalAvatar.length) - avatars.length);
const { tint } = stageTintFor(s);
// v04v — clickable rows: row click opens the shot popup
// via window.__nav.openShot. Inner thumb click also opens
// (no event isolation needed). cursor:pointer applied via CSS.
const onRowClick = () => { if (window.__nav && window.__nav.openShot) window.__nav.openShot(s.id); };
return (
{s.id}
);
})}
{/* v07zz31 — Mipmap: shotlist rows are 56×32 px, so
width-160 covers 2× retina with the smallest
pre-generated mipmap. Previously this loaded
1-3 MB full-res originals on every Shotlist
open — ~80 rows × multi-MB = noticeable lag. */}
{img && 
}
{/* v07zz60 — Hugo: "why is the placeholder shot
thumbnail saying SH10 instead of SH0010?"
Show the full canonical id so it matches
the SHOT column on the same row. */}
{!img && {s.id}}
{String(s.seq).padStart(2,"0")}
{s.frame_title}
{s.shot_type || "—"}
{charactersText}
{speciesGuess || "—"}
{location}
{/* v04w — round avatar stack for references + archival glyph. */}
{avatars.length === 0 ? — : (
<>
{avatars.map((a, i) => (
{a.kind === "archival" ? "🎞" : (a.slug || "?").charAt(0).toUpperCase()}
))}
{extraCount > 0 && +{extraCount}}
)}
{/* v03i — status uses the exact same pill component / colours / typography as the shot row pills. */}
{tint.label}
!busy && onClose()}>
), portalRoot);
}
// 24 Sep 2026 (G7 review) - another project's Schedule starts with no stages and no payment
// milestones (its own settings row "schedule"), so the page needs a way to create both: this box
// adds a stage (PATCH /api/schedule/phases with a name - the Move box and the "Original ..." line
// work on it from then on) or a payment milestone (POST /api/schedule/milestones). It reuses the
// Move box's .confirm-delete-* / .sched-move-* look; the status line always keeps its room (#20).
const _SCHED_STAGE_SWATCHES = ["#7FA85E", "#D4A574", "#6FA3C7", "#B58BD6", "#E08A6C", "#9A9A8A"];
function _schedIsoToday() { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; }
function ScheduleAddModal({ kind, schedule, onClose }) {
const isStage = kind === "stage";
const phases = ((schedule && schedule.phases) || []).filter(Boolean);
const addDays = window.schedAddDays || ((x) => x);
const firstDay = React.useMemo(() => {
const ends = phases.map(p => String(p.end || "")).filter(s => /^\d{4}-\d{2}-\d{2}$/.test(s)).sort();
if (isStage && ends.length) return addDays(ends[ends.length - 1], 1);
return (schedule && schedule.project_start) || _schedIsoToday();
}, []); // the suggestion is taken once, when the box opens
const [name, setName] = React.useState("");
const [start, setStart] = React.useState(firstDay);
const [end, setEnd] = React.useState(() => (isStage ? addDays(firstDay, 6) : ""));
const [color, setColor] = React.useState(_SCHED_STAGE_SWATCHES[phases.length % _SCHED_STAGE_SWATCHES.length]);
const [amount, setAmount] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState("");
React.useEffect(() => {
const onKey = (e) => { if (e.key === "Escape" && !busy) onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [busy, onClose]);
const ISO = /^\d{4}-\d{2}-\d{2}$/;
const fmt = window.schedFmtDay || ((x) => x);
const nm = name.trim();
const datesOk = ISO.test(start) && (!isStage || (ISO.test(end) && end >= start));
const ok = !!nm && datesOk;
const days = isStage && datesOk && window.schedDayDiff ? window.schedDayDiff(start, end) + 1 : 0;
const amt = parseInt(String(amount || "").replace(/[^0-9]/g, ""), 10) || 0;
let line, bad = false;
if (err) { line = err; bad = true; }
else if (!datesOk) { line = isStage ? "The end must be on or after the start." : "Pick the date."; bad = true; }
else if (!nm) line = isStage ? "Name the stage. It shows as a card below the calendar and as a bar on it." : "Name the payment. Only people who may see money see it.";
else line = isStage
? `${nm} · ${fmt(start)} → ${fmt(end)} · ${days} day${days === 1 ? "" : "s"}`
: `${nm} · ${fmt(start)}${amt ? ` · $${amt.toLocaleString()}` : ""}`;
const save = async () => {
if (!ok || busy) return;
setBusy(true); setErr("");
try {
const r = isStage
? await (window.authFetch || fetch)("/api/schedule/phases", {
method: "PATCH", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: nm, start, end, color }),
})
: await (window.authFetch || fetch)("/api/schedule/milestones", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: nm, date: start, amount: amt }),
});
const j = await r.json().catch(() => ({}));
if (!r.ok) throw new Error(j.error || ("HTTP " + r.status));
if (window.reloadAppData) window.reloadAppData();
onClose();
} catch (e) { setErr("Could not add it: " + (e.message || "unknown error")); setBusy(false); }
};
const onEnter = (e) => { if (e.key === "Enter") save(); };
const portalRoot = document.getElementById("modal-root") || document.body;
return ReactDOM.createPortal((
e.stopPropagation()}>
setReason(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") save(); }}/>
{/* Always three lines of room, so the box never changes height (invariant #20). */}
MOVE A STAGE
{phase.name}
Now {fmt(phase.start)} → {fmt(phase.end)}
{bp ? ` · original ${fmt(bp.start)} → ${fmt(bp.end)}` : " · not in the original plan"}
{line}
!busy && onClose()}>
), portalRoot);
}
function ScheduleView({ schedule }) {
// v06p — Budget/cost visibility now driven by the `view_budget`
// permission instead of a hard-coded role list. Admin bypasses.
const _ctx = React.useContext(window.UserContext || React.createContext({ user: null }));
const _role = (_ctx && _ctx.user && _ctx.user.role) || null;
const _perms = (_ctx && _ctx.user && _ctx.user.permissions) || {};
// v07zz340 — `window.__hideMoney` (Settings → Hide all money figures) suppresses every amount
// even for admins/budget roles. Folded in here so the schedule's phase + milestone amounts vanish.
const canSeeCosts = (_role === "admin" || !!_perms.view_budget) && !window.__hideMoney;
// v07zz278 — Untangle money-visibility from schedule-management.
// `view_budget` gates SEEING amounts; `manage_schedule` gates the WRITE
// controls (add deliverable event, cycle payment status, edit amount).
// Editing an amount needs both — you can't edit money you can't see.
const canManageSched = _role === "admin" || !!_perms.manage_schedule;
// 24 Sep 2026 (G7) — another project's own schedule works here too (its settings row "schedule").
// Outside Paradise Found: no hover tooltips (Hugo), and the header reads the project's own dates.
const _schedPF = !(typeof window !== "undefined" && typeof window.__isDefaultProject === "function") || window.__isDefaultProject();
const _tip = (t) => (_schedPF ? t : undefined);
// v07perf — Hugo: "I need to be able to tick the ones that have
// been paid, and also maybe modify the amounts." Optimistic overlay
// of in-flight edits keyed by milestone id, so a click → status
// flip / amount type → blur feels instant. Failed PATCH reverts
// the overlay entry. canSeeCosts gates both view + edit (only
// producer+ has view_budget).
const [milestoneEdits, setMilestoneEdits] = React.useState({});
const patchMilestone = React.useCallback((id, patch) => {
setMilestoneEdits(prev => ({ ...prev, [id]: { ...(prev[id] || {}), ...patch } }));
(window.authFetch || fetch)(`/api/schedule/milestones/${encodeURIComponent(id)}`, {
method: "PATCH",
body: JSON.stringify(patch),
})
.then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
.catch(err => {
console.warn("[milestone] patch failed:", err.message);
setMilestoneEdits(prev => {
const next = { ...prev };
delete next[id];
return next;
});
});
}, []);
// v07perf — Hugo: 4 stages. Cycle order is the natural lifecycle
// forward — not_ready → upcoming (due) → paid (completed) → late
// (overdue) → back to not_ready. Each click advances one step;
// wraps round so you can flick through to whichever state you
// need.
const cycleStatus = (current) => current === "not_ready" ? "upcoming"
: current === "upcoming" ? "paid"
: current === "paid" ? "late"
: current === "late" ? "not_ready"
: "upcoming"; // unknown → start the cycle
// v07zz72 — HOOKS-ORDER FIX: every useState below was previously
// declared AFTER the `if (!schedule) return null` guard, which meant
// React saw a different hook count on the null vs loaded renders →
// exactly the same class of crash that took down ScriptView before
// v07zz65. All hooks must run on EVERY render. Lifted them above
// the guard.
const [cursor, setCursor] = React.useState(() => {
const d = new Date();
return new Date(d.getFullYear(), d.getMonth(), 1);
});
const [hoveredPhase, setHoveredPhase] = React.useState(null);
const [moveFor, setMoveFor] = React.useState(null); // v1086 — the stage in the Move box
const [addKind, setAddKind] = React.useState(null); // 24 Sep 2026 (G7 review) — "stage" | "milestone" (another project)
const [openEvent, setOpenEvent] = React.useState(null); // event for popup
// v07zz60 — Add-milestone popover state. v07zz62 — Hugo wants the
// popover to render NEAR the clicked cell (not as a fullscreen
// modal), but visually above any phase bars / lines. We store
// { date, anchor } where anchor is the cell's viewport rect at
// click time, then portal the popover to position:fixed at the
// top-right corner of that rect with z-index above everything.
const [addOnDate, setAddOnDate] = React.useState(null);
const [addAnchor, setAddAnchor] = React.useState(null);
// v07zz72 — Hoisted above the `if (!schedule) return null` guard so
// the hook count stays constant regardless of whether schedule has
// loaded yet. Same fix that v07zz65 applied to ScriptView.
const [addName, setAddName] = React.useState("");
const [addAmount, setAddAmount] = React.useState("");
const [adding, setAdding] = React.useState(false);
const [addErr, setAddErr] = React.useState(""); // 24 Sep 2026 (G7) — the popover's inline error line
const submitAddMilestone = React.useCallback((dateStr) => {
const name = String(addName || "").trim();
if (!name || adding) return;
const amount = parseInt(String(addAmount || "").replace(/[^0-9]/g, ""), 10) || 0;
setAdding(true);
setAddErr("");
// v07zz66 — Hugo: "Create Milestones on the calendar creates a
// PAYMENT milestones for some reason. NO NO NO, I want to
// create an Event, or a asset deliverable event, nothing to do
// with the payment milestones." Switched the POST target to
// /api/schedule/events which writes into schedule.events (not
// schedule.milestones). The Amount field still flows for
// back-compat but is ignored server-side for events.
(window.authFetch || fetch)("/api/schedule/events", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: name, date: dateStr, type: "deliverable", summary: amount ? `Amount: $${amount}` : "" }),
})
.then(r => r.ok ? r.json() : r.text().then(t => Promise.reject(new Error(`HTTP ${r.status}: ${t}`))))
.then(() => {
setAddOnDate(null);
setAddAnchor(null);
setAddName("");
setAddAmount("");
// Refresh schedule data so the new milestone appears.
if (window.reloadAppData) window.reloadAppData();
})
.catch(err => {
console.warn("[milestone] add failed:", err.message);
// 24 Sep 2026 (G7) — a line inside the popover, never a native alert (Hugo). The server's own
// sentence when it sent one ("HTTP 400: {"error":"…"}"), else the raw message.
let msg = String(err.message || "");
try { const j = JSON.parse(msg.replace(/^HTTP \d+:\s*/, "")); if (j && j.error) msg = j.error; } catch (_) {}
setAddErr("Could not add it: " + msg);
})
.finally(() => setAdding(false));
}, [addName, addAmount, adding]);
// v07zz72 — Hoisted ABOVE the `if (!schedule) return null` guard
// for hook-count constancy. These three (state + effect + memos)
// used to live mid-component which made them post-guard hooks.
const [calEvents, setCalEvents] = React.useState([]);
React.useEffect(() => {
const fetcher = window.authFetch || fetch;
fetcher("/api/calendar/events")
.then(r => r.ok ? r.json() : null)
.then(d => setCalEvents((d && d.events) || []))
.catch(() => setCalEvents([]));
}, []);
const mappedCalEvents = React.useMemo(() => (calEvents || []).map(e => ({
date: e.date,
type: e.type === "ics" ? "weekly" : (e.type || "event"),
label: e.title || "Event",
summary: e.sub || "",
lead: "Calendar",
utc: e.utc,
// v07zz60 — Carry the meeting URL through so the event modal's
// "Join meeting" button can link to it. Hugo: "still no link to
// join meeting when opening the card". parseICS extracts URL +
// auto-detects Meet/Zoom/Teams from the description; the API
// returns it in `e.url` — we just have to forward it.
url: e.url || null,
})), [calEvents]);
const allEventsMemo = React.useMemo(
() => [...((schedule && schedule.events) || []), ...mappedCalEvents],
[schedule && schedule.events, mappedCalEvents]
);
// v07zz72 — `if (!schedule)` guard moved here, AFTER every hook
// declaration. From this point onward we can use plain non-hook
// logic safely; the JSX return is right below.
if (!schedule) return null;
// v07zz55 — TODAY was hardcoded to May 6, 2026 as a demo anchor.
// Now use the real system date so the calendar shows today's date
// (May 28 etc.) as TODAY and Phase 1's bar lands where it should.
const TODAY = new Date();
TODAY.setHours(0, 0, 0, 0);
const y = cursor.getFullYear(), mo = cursor.getMonth();
const ndays = new Date(y, mo + 1, 0).getDate();
const offset = new Date(y, mo, 1).getDay();
// v07zz61 — Hugo: "Calendar is not showing previous month's days
// greyed out like any calendar usually does". Fill the lead/trail
// cells with real Date objects from the prev/next month and tag
// them with isOutOfMonth so the cell can render dim.
const cells = [];
const prevMonthDays = new Date(y, mo, 0).getDate();
for (let i = 0; i < offset; i++) {
const day = prevMonthDays - offset + 1 + i;
cells.push({ date: new Date(y, mo - 1, day), out: true });
}
for (let d = 1; d <= ndays; d++) cells.push({ date: new Date(y, mo, d), out: false });
let trailingDay = 1;
while (cells.length % 7 !== 0) {
cells.push({ date: new Date(y, mo + 1, trailingDay++), out: true });
}
const rows = Math.ceil(cells.length / 7);
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
// v07zz72 — calEvents state + fetch effect + mappedCalEvents + allEvents
// memos all live ABOVE the schedule-null guard now. allEventsMemo is
// the hoisted version. Reuse it under the local name `allEvents`.
const allEvents = allEventsMemo;
const eventOnDate = (date) => allEvents.find(e => sameDay(new Date(e.date), date));
// Build per-row phase segments — each week-row produces N continuous bars,
// where each bar starts at the leftmost active day in that row and spans
// until the phase ends (or the row ends, whichever first).
// v07zz61 — cells now hold { date, out } objects instead of Date|null,
// so we read c.date when computing whether a cell falls in a phase.
// v07zz64 — Hugo: "why do I have gaps of one day in between phases?"
// Root cause: `new Date("2026-05-27")` parses as UTC midnight. In a
// non-UTC timezone that's a different LOCAL date — so the day
// comparison rejected the boundary day. Parse as local-midnight by
// appending "T00:00:00" before constructing the Date, then compare
// by Y/M/D components instead of timestamps so DST shifts and tz
// offsets can't drop boundary days.
const _parseLocalDate = (s) => new Date(String(s || "") + "T00:00:00");
const _ymd = (d) => d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate();
const buildBars = () => {
const bars = []; // {row, col, span, phase, lane}
schedule.phases.forEach((p, pIdx) => {
const psK = _ymd(_parseLocalDate(p.start));
const peK = _ymd(_parseLocalDate(p.end));
let runStart = -1;
cells.forEach((c, i) => {
const d = c && c.date;
const dK = d ? _ymd(d) : -1;
const inPhase = d && dK >= psK && dK <= peK;
if (inPhase && runStart < 0) runStart = i;
if ((!inPhase || (i + 1) % 7 === 0) && runStart >= 0) {
const endIdx = inPhase ? i : i - 1;
const row = Math.floor(runStart / 7);
const col = runStart % 7;
const span = endIdx - runStart + 1;
bars.push({ row, col, span, phase: p, lane: pIdx });
runStart = inPhase && (i + 1) % 7 === 0 ? -1 : -1;
}
});
});
return bars;
};
const bars = buildBars();
const shiftMonth = (delta) => setCursor(prev => new Date(prev.getFullYear(), prev.getMonth() + delta, 1));
const today = () => setCursor(new Date(TODAY.getFullYear(), TODAY.getMonth(), 1));
// v1086 — the original plan (schedule.baseline) next to the dates in force, and the moves.
const _fmtD = window.schedFmtDay || ((x) => String(x || "—"));
const _dd = window.schedDayDiff || (() => 0);
const _sgn = (n) => (n > 0 ? "+" : n < 0 ? "−" : "") + Math.abs(n);
const _short = (id) => { const ph = (schedule.phases || []).find(x => x && x.id === id); return ph ? String(ph.name).replace(/^Phase\s*[\d.]+\s*[\u2014\u2013-]\s*/i, "") : id; };
const _base = window.baselineSchedule ? window.baselineSchedule(schedule) : null;
const _baseById = new Map(((_base && _base.phases) || []).map(x => [x.id, x]));
const _origEnd = _base ? _base.project_end : null;
const _slip = _origEnd ? _dd(_origEnd, schedule.project_end) : 0;
const _changes = Array.isArray(schedule.changes) ? schedule.changes.slice().reverse() : [];
return (
e.stopPropagation()}>
{isStage ? "ADD A STAGE" : "ADD A PAYMENT MILESTONE"}
{ setName(e.target.value); setErr(""); }} onKeyDown={onEnter}/>
{isStage && (
)}
{isStage ? (
Colour
) : (
)}
{_SCHED_STAGE_SWATCHES.map(c => (
{line}
PRODUCTION SCHEDULE
{_schedPF
? 10-Week Build · {schedule.project_start} → {schedule.project_end}
: {(schedule.project_start || schedule.project_end) ? `Schedule · ${schedule.project_start || "no start"} → ${schedule.project_end || "no deadline"}` : "Schedule · no dates yet"}
}
{SCHED_MONTHS_LONG[mo]} {y}
{SCHED_DOW_SHORT.map(d =>
{d}
)}
{cells.map((c, i) => {
const day = c.date;
const isOut = !!c.out;
const evt = isOut ? null : eventOnDate(day);
const isToday = !isOut && sameDay(day, TODAY);
const isWeekend = day.getDay() === 0 || day.getDay() === 6;
// v07zz60 — Milestones inline on their date.
const cellDateStr = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, "0")}-${String(day.getDate()).padStart(2, "0")}`;
const milestonesOnDate = isOut ? [] : (schedule.milestones || []).filter(m => m && m.date === cellDateStr);
return (
);
})}
{/* Phase bars overlay — same grid spec as cells, absolute on top */}
{day.getDate()}
{/* v01p — explicit TODAY label so the highlighted day reads at a glance. */}
{isToday && }
{/* v07zz61 — + button only on in-month cells.
v07zz278 — gated on manage_schedule (adds a
deliverable EVENT, not money) — not view_budget. */}
{!isOut && canManageSched && (
)}
{milestonesOnDate.map(m => {
// Phase-begin milestones get the colour of their
// phase + an inline anchor look so they read as
// "this is where Phase X starts".
const phaseMatch = (schedule.phases || []).find(p => p && p.id === m.phase_id);
const isPhase = !!phaseMatch;
const style = isPhase ? { background: phaseMatch.color || "var(--leaf)", color: "var(--ink-on-leaf)" } : undefined;
return (
);
})}
{evt && (
)}
{bars.map((b, i) => {
const dim = hoveredPhase && hoveredPhase !== b.phase.id;
const lifted = hoveredPhase === b.phase.id;
return (
setHoveredPhase(b.phase.id)}
onMouseLeave={() => setHoveredPhase(null)}
title={_tip(b.phase.name)}>
{/* v07zz64 — Hugo: "put the title of each phase
row at the start of the row, not only at
the start of the left one." Drop the
span > 2 gate — every segment shows the
label, truncated via CSS if needed. */}
{b.phase.name}
);
})}
STAGES
{canManageSched && (
)}
)}
{!_schedPF && schedule.phases.length === 0 && (
)}
{schedule.phases.map(p => (
setHoveredPhase(p.id)}
onMouseLeave={() => setHoveredPhase(null)}>
))}
{/* v1086 — SCHEDULE CHANGES: the delivery date against the original plan, then every
move, newest first (the two moves made by hand in the file come from its history). */}
{(_origEnd || _changes.length > 0) && (
{p.name}
{/* v1086 — Move sits at the end of the dates line (in the card's corner it covered the
name). It opens a box, so the page does not move. */}
{p.start} → {p.end}
{canManageSched && (
)}
{p.weeks} weeks
{/* v1086 — this stage against the original plan. One line on every card, so they keep the same height. */}
{_base && (() => {
const bp = _baseById.get(p.id);
if (!bp) return Not in the original plan
;
const d = _dd(bp.end, p.end);
if (!d && bp.start === p.start) return On the original dates
;
return 0 ? " is-late" : "")} title={_tip(`Original ${bp.start} → ${bp.end}`)}>Original {_fmtD(bp.start)} → {_fmtD(bp.end)} · {_sgn(d)} days
;
})()}
{canSeeCosts && ${p.amount.toLocaleString()}
}
DELIVERABLES
-
{p.deliverables.map((d, i) =>
- {d} )}
SCHEDULE CHANGES
{_origEnd && (
0 ? " is-late" : "")}>
Delivery {_fmtD(schedule.project_end)} · original {_fmtD(_origEnd)} · {_slip ? `${_sgn(_slip)} days` : "on time"}
)}
{_changes.length === 0 ? (
No moves yet.
) : (
{_changes.map((c, i) => {
const dEnd = (c.end_from && c.end_to) ? _dd(c.end_from, c.end_to) : 0;
return (
);
})}
)}
{_fmtD(String(c.at || "").slice(0, 10))}{c.by || "—"}
{c.phase_name || _short(c.phase)}
{c.from && c.to ? ` ${_fmtD(c.from.start)} → ${_fmtD(c.from.end)} became ${_fmtD(c.to.start)} → ${_fmtD(c.to.end)}` : ""}
{Array.isArray(c.moved) && c.moved.length ? ` · ${c.moved.map(_short).join(", ")} moved too` : ""}
{c.reason && {c.reason}
}
0 ? " is-late" : "")} title={_tip("How far the delivery date moved")}>
{dEnd ? `${_sgn(dEnd)} d` : "0 d"}
{c.end_from && c.end_to && c.end_from !== c.end_to ? `delivery ${_fmtD(c.end_from)} → ${_fmtD(c.end_to)}` : "delivery the same"}
{_schedPF ? ,
// views-pages.css), so a skin can reach it; an unknown status draws as not_ready.
const STATUS_VISUAL = {
not_ready: { icon: "○", bg: "color-mix(in srgb, var(--grey-3) 18%, transparent)", border: "color-mix(in srgb, var(--grey-3) 55%, transparent)", label: "Not yet ready" },
upcoming: { icon: DueClockIcon, bg: "color-mix(in srgb, var(--gold-3) 22%, transparent)", border: "color-mix(in srgb, var(--gold-3) 85%, transparent)", label: "Due" },
paid: { icon: "✓", bg: "color-mix(in srgb, var(--ok) 22%, transparent)", border: "color-mix(in srgb, var(--ok) 85%, transparent)", label: "Completed" },
late: { icon: "!", bg: "color-mix(in srgb, var(--danger-soft) 22%, transparent)", border: "color-mix(in srgb, var(--danger-soft) 85%, transparent)", label: "Late" },
};
const v = STATUS_VISUAL[m.status] || STATUS_VISUAL.not_ready;
return (
)}
)}
{moveFor && PAYMENT MILESTONES
: (
PAYMENT MILESTONES
{canManageSched && (
)}
)}
{!_schedPF && schedule.milestones.length === 0 && (
No payment milestones yet.
)}
{schedule.milestones.map(_m => {
// Apply optimistic overlay so a click feels instant.
const m = { ..._m, ...(milestoneEdits[_m.id] || {}) };
// v07perf — 4-stage visual status:
// not_ready grey ○ project hasn't reached this gate yet
// upcoming amber ● due / current
// paid green ✓ completed
// late red ✕ overdue
// Inline styles so the look is obvious without depending
// on CSS that may not be loaded yet. The status badge
// is a 22px round chip with the icon centered.
// v07perf — Hugo: "I dont like the Due one, it should be
// amber and have an icon that is more adequate. The Late
// icon should be an exclamation mark, not a cross."
// Due → small clock face (circle + hands) — conveys
// time-sensitivity without alarming.
// Late → bold ! character — Hugo's pick.
// not_ready and Completed unchanged (they already worked).
const DueClockIcon = (
);
// 17 Sep 2026 - the icon's colour is a class per status (.sched-milestone-status--
{/* v07perf — Click cycles not_ready→upcoming→paid→late.
Gated on canSeeCosts so non-budget viewers can't
toggle. The chip carries colour + label in its title
so the meaning is obvious. */}
);
})}
patchMilestone(m.id, { status: cycleStatus(m.status) }) : undefined}
title={_tip(canManageSched
? `${v.label} · click to advance`
: v.label)}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
width: 22,
height: 22,
borderRadius: "50%",
background: v.bg,
border: `1.5px solid ${v.border}`,
fontWeight: "var(--fw-bold)",
fontSize: "var(--fs-body)",
lineHeight: 1,
cursor: canManageSched ? "pointer" : "default",
userSelect: "none",
transition: "transform 80ms ease",
}}
>{v.icon}
{m.name}
{m.date}
{canSeeCosts && (
{"$"}
{
const raw = String(e.currentTarget.textContent || "").replace(/[,\s$]/g, "");
const v = parseInt(raw, 10);
if (Number.isFinite(v) && v >= 0 && v !== m.amount) {
patchMilestone(m.id, { amount: v });
} else {
// Revert visual to current value on bad input
e.currentTarget.textContent = m.amount.toLocaleString();
}
}}
onKeyDown={(e) => {
if (e.key === "Enter") { e.preventDefault(); e.currentTarget.blur(); }
if (e.key === "Escape") { e.currentTarget.textContent = m.amount.toLocaleString(); e.currentTarget.blur(); }
}}
/* v07zz68 — Hugo: "i tried modifying the
payment milestones amount and the font
wasnt locked, when I pasted it, it
pasted the wrong font format". The
browser's default paste behaviour
includes formatting (HTML/Word styles).
Intercept the paste, strip everything
except digits, and insert as a plain
text node so it inherits the surrounding
font. Same idea for `drop` to catch
drag-and-drop. */
onPaste={(e) => {
e.preventDefault();
const raw = (e.clipboardData || window.clipboardData).getData("text/plain") || "";
const cleaned = raw.replace(/[^0-9]/g, "");
// Use modern execCommand fallback; most
// browsers still support insertText on a
// contenteditable element.
document.execCommand("insertText", false, cleaned);
}}
onDrop={(e) => {
e.preventDefault();
const raw = e.dataTransfer && e.dataTransfer.getData("text/plain") || "";
const cleaned = raw.replace(/[^0-9]/g, "");
document.execCommand("insertText", false, cleaned);
}}
style={{
outline: "none",
borderBottom: "1px dashed color-mix(in srgb, var(--gold-19) 35%, transparent)",
padding: "0 3px",
minWidth: "48px",
display: "inline-block",
cursor: canManageSched ? "text" : "default",
/* v07zz68 — force pasted content to inherit
the parent's typography. Without these
rules an inserted node can carry its
own font / weight / color across. */
font: "inherit",
color: "inherit",
lineHeight: "inherit",
letterSpacing: "inherit",
}}
title={_tip("Click to edit amount · Enter to save · Esc to cancel")}
>{m.amount.toLocaleString()}
{" "}
({m.pct}%)
)}
setOpenEvent(null)}>
), portalRoot);
})()}
{/* v07zz62 — Hugo: "i like what you had before but it didnt pop
up ABOVE the calendar, it was behind the lines. Revert to
that placement but update the fact that the pop up is over
everything and not getting hidden behind lines or other
things." So: render the popover as a small portal anchored
to the cell's viewport rect with position:fixed and a high
z-index that puts it above the phase bars layer + event
chips. No fullscreen modal backdrop. Click outside (the
transparent overlay) closes. */}
{addOnDate && addAnchor && (() => {
const portalRoot = document.getElementById("modal-root") || document.body;
// Anchor at cell's top-right corner, with a small offset so
// it doesn't cover the + button itself. Clamp to viewport so
// the popover never goes off-screen.
const W = 220, H = 170;
let left = addAnchor.right - W + 6;
if (left + W > window.innerWidth - 8) left = window.innerWidth - W - 8;
if (left < 8) left = 8;
let top = addAnchor.top + 28;
if (top + H > window.innerHeight - 8) top = addAnchor.top - H - 6;
if (top < 8) top = 8;
return ReactDOM.createPortal((
<>
{/* Invisible overlay that captures click-outside-to-close
without dimming the calendar behind it. */}
e.stopPropagation()}>
{/* v07zz59 — Reuse the standard .modal-close-btn so the
X matches the rest of the app's modals (the legacy
.evt-modal-close was hand-styled and stuck out). */}
{(openEvent.type || "event").toUpperCase()}
{openEvent.label}
{new Date(openEvent.date).toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" })}
{openEvent.lead && Lead: {openEvent.lead}}
{openEvent.summary || openEvent.description || "No summary available."}
{/* v07zz59 — Join link for ICS events that carry a URL
(auto-extracted by parseICS — Meet / Zoom / Teams). */}
{openEvent.url && (
Join meeting ↗
)}
setAddOnDate(null)}
style={{position:"fixed", inset:0, background:"transparent", zIndex: "var(--z-crop)"}}
/>
e.stopPropagation()}
style={{position:"fixed", top, left, width: W, zIndex: "var(--z-crop-panel)", margin: 0}}
>
{/* v07zz66 — Calendar event creator (NOT a payment
milestone). Amount field removed; events have no
cost field. */}
), portalRoot);
})()}
);
}
/* ─────────────────────────── ASSETS ─────────────────────────── */
// v07zn — Per-category asset creation modal. Each kind gets a
// tailored form: characters have name + role + bio; animals have
// name + latin name; locations have name + scenes; props have
// name + type; refs have name + type. Submission hits
// POST /api/assets/create which creates the disk folder + appends
// to data/assets.json. Returns the created asset to the caller so
// the view can splice it in without a full reload.
const ASSET_KIND_LABELS = {
character: { title: "Character", placeholder: "e.g. Mark Twain" },
animal: { title: "Animal", placeholder: "e.g. Monarch Butterfly" },
location: { title: "Location", placeholder: "e.g. Missouri Farm" },
prop: { title: "Prop", placeholder: "e.g. Steam Engine" },
ref: { title: "Reference", placeholder: "e.g. Costume study v3" },
music: { title: "Music track", placeholder: "e.g. Sequence 02 score" },
vo: { title: "VO clip", placeholder: "e.g. Narrator intro" },
};
function CreateAssetModal({ kind, onClose, onCreated }) {
// 15 Sep 2026 — on a templated project `kind` is one of the project's own
// category ids (characters / instruments / wardrobe …): title from the
// category label, a neutral placeholder, and the category's declared fields
// (row.asset_categories[].fields when the server sends them) instead of the
// film-doc role / latin / scenes / type inputs. Paradise Found keeps its
// labels, placeholders and fields exactly as before.
const _isPF = !(typeof window !== "undefined" && typeof window.__isDefaultProject === "function") || window.__isDefaultProject();
const _cat = (!_isPF && window.__projectCategories) ? (window.__projectCategories().find(c => c.id === kind) || null) : null;
const _catFields = _cat && Array.isArray(_cat.fields) ? _cat.fields.filter(f => f && f.key && f.key !== "notes" && f.key !== "name") : [];
const [extra, setExtra] = React.useState({}); // templated project: { [field.key]: value }
const label = _cat
? { title: (window.__projectCategoryLabel ? window.__projectCategoryLabel(kind, true) : _cat.label), placeholder: "" }
: (ASSET_KIND_LABELS[kind] || { title: "Asset", placeholder: "" });
const [name, setName] = React.useState("");
// Category-specific fields. We collect them all up front; the
// server only persists the ones it recognises.
const [role, setRole] = React.useState(""); // characters
const [latin, setLatin] = React.useState(""); // animals
const [scenes, setScenes] = React.useState(""); // locations
const [type, setType] = React.useState(""); // props / refs
const [notes, setNotes] = React.useState(""); // all
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
// v07zq — AI suggest state.
const [suggesting, setSuggesting] = React.useState(false);
const [suggestErr, setSuggestErr] = React.useState(null);
const portalRoot = document.getElementById("modal-root") || document.body;
// v07zq — Call /api/assets/suggest-fields with the current name and
// populate any empty form fields with the model's suggestions.
// Fields the user has already typed are left alone — we don't
// clobber their input.
const suggestWithAI = async () => {
const trimmed = name.trim();
if (!trimmed || suggesting) return;
setSuggesting(true); setSuggestErr(null);
const fetcher = window.authFetch || fetch;
const PLURAL = {
character: "characters", animal: "animals", location: "locations",
prop: "props", ref: "refs", music: "music", vo: "vo",
};
const serverCategory = _cat ? kind : (PLURAL[kind] || kind);
// v07zr — Hugo: first call almost always returned "Error
// fetching" (likely a Railway proxy / Gemini cold-start
// timeout). Retry once silently before surfacing the error.
const callOnce = async () => {
const r = await fetcher("/api/assets/suggest-fields", {
method: "POST",
body: JSON.stringify({ category: serverCategory, name: trimmed }),
});
const body = await r.json().catch(() => ({}));
if (!r.ok || !body.ok) throw new Error(body.error || `HTTP ${r.status}`);
return body.fields || {};
};
try {
let f;
try {
f = await callOnce();
} catch (firstErr) {
// One quiet retry. Gemini Flash cold-start can land >5 s
// the first time after deploy; a second call almost always
// succeeds quickly. If the second one fails too we surface
// the second error so the user sees the real cause.
await new Promise(r => setTimeout(r, 500));
f = await callOnce();
}
// Only overwrite empty fields — respect anything Hugo already typed.
if (_cat) {
// 15 Sep 2026 — templated project: fill whichever declared fields came back empty.
setExtra(prev => {
const next = { ...prev };
for (const fd of _catFields) { const v = f[fd.key]; if (typeof v === "string" && v && !String(next[fd.key] || "").trim()) next[fd.key] = v; }
return next;
});
}
if (kind === "character" && !role.trim() && f.role) setRole(f.role);
if (kind === "animal" && !latin.trim() && f.latin) setLatin(f.latin);
if (kind === "location" && !scenes.trim()&& f.scenes) setScenes(f.scenes);
if ((kind === "prop" || kind === "ref") && !type.trim() && f.type) setType(f.type);
if (!notes.trim() && f.notes) setNotes(f.notes);
} catch (e) {
setSuggestErr(e.message);
} finally {
setSuggesting(false);
}
};
React.useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [onClose]);
const submit = async (e) => {
e && e.preventDefault();
const trimmed = name.trim();
if (!trimmed || busy) return;
setBusy(true); setErr(null);
const fetcher = window.authFetch || fetch;
// v07zn — Server endpoint expects PLURAL category names; map.
const PLURAL = {
character: "characters", animal: "animals", location: "locations",
prop: "props", ref: "refs", music: "music", vo: "vo",
};
const serverCategory = _cat ? kind : (PLURAL[kind] || kind);
// v07zp — Send ALL category-specific fields so the server can
// persist them into data/assets.json. Previously the modal
// patched fields locally only, so they vanished on reload.
const extraFields = {};
// 15 Sep 2026 — templated project: the category's declared fields, as typed.
if (_cat) for (const fd of _catFields) { const v = String(extra[fd.key] || "").trim(); if (v) extraFields[fd.key] = v; }
if (kind === "character") extraFields.role = role.trim();
if (kind === "animal") extraFields.latin = latin.trim();
if (kind === "location") extraFields.scenes = scenes.trim();
if (kind === "prop") extraFields.type = type.trim();
if (kind === "ref") extraFields.type = type.trim();
if (notes.trim()) extraFields.notes = notes.trim();
try {
const r = await fetcher("/api/assets/create", {
method: "POST",
body: JSON.stringify({
category: serverCategory,
name: trimmed,
fields: extraFields,
}),
});
const body = await r.json().catch(() => ({}));
if (!r.ok || !body.ok) throw new Error(body.error || `HTTP ${r.status}`);
// Patch any fields the server didn't echo back, so the card
// renders the values the user typed immediately.
const created = { ...body.asset, ...extraFields };
onCreated && onCreated(created);
} catch (e2) {
setErr(e2.message);
setBusy(false);
}
};
/* v07zu — Same drag-cancel fix as EditAssetModal. */
const _backdropDownRefCreate = React.useRef(false);
const onBackdropMouseDownCreate = (e) => {
_backdropDownRefCreate.current = (e.target === e.currentTarget);
};
const onBackdropClickCreate = (e) => {
if (_backdropDownRefCreate.current && e.target === e.currentTarget) onClose();
_backdropDownRefCreate.current = false;
};
return ReactDOM.createPortal((
New event
{ setAddName(e.target.value); setAddErr(""); }}
onKeyDown={e => {
if (e.key === "Enter") submitAddMilestone(addOnDate);
if (e.key === "Escape") setAddOnDate(null);
}}
/>
{/* 24 Sep 2026 (G7) — always there, so the popover never grows when an error shows (#20). */}
{addErr}
e.stopPropagation()}
role="dialog"
aria-modal="true"
>
NEW {label.title.toUpperCase()}
Create {label.title.toLowerCase()}
{_cat ? (
Registers it in this project's
) : (
Adds a folder under
)}
{_cat.label.toLowerCase()} catalog. Add reference images to it afterwards.WATCH_PATH/work/episodes/<ep>/assets/{kind === "ref" ? "refs" : kind + "s"}/<slug>/
{" "}and registers it in the catalog. Drop reference files into the folder afterwards.