querysub 0.528.0 → 0.530.0

package/src/4-dom/qreactGlobal.d.ts

@@ -0,0 +1,17 @@
+import type { qreact as qreactType } from "./qreact";
+
+// qreact.tsx assigns itself onto globalThis at runtime, but only files that import { qreact } see it in the type system. Sliftutils' .tsx sources get pulled into our program (its .d.ts files' relative imports resolve to the neighboring sources) and compile under our qreact jsxFactory without importing it — this ambient declaration gives them the global qreact value and the global JSX fallback namespace.
+declare global {
+    const qreact: typeof qreactType;
+    namespace JSX {
+        type IntrinsicElements = qreactType.JSX.IntrinsicElements;
+        type Element = qreactType.JSX.Element;
+        type IntrinsicClassAttributes<T = unknown> = qreactType.JSX.IntrinsicClassAttributes<T>;
+        interface ElementClass {
+            render: any;
+        }
+        interface ElementAttributesProperty {
+            props: {};
+        }
+    }
+}

package/src/deployManager/components/MachineDetailPage.tsx

@@ -11,6 +11,7 @@ import { managementPageURL } from "../../diagnostics/managementPages";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/Querysub";
 import { getLogViewerParams } from "../../diagnostics/logs/IndexedLogs/LogViewerParams";
+import { UsageBar, getUsageThresholds } from "../../library-components/UsageBar";
 
 export class MachineDetailPage extends qreact.Component {
     render() {
@@ -119,16 +120,7 @@ export class MachineDetailPage extends qreact.Component {
                                 <ShowMore className={css.whiteSpace("pre-wrap")} maxHeight={80}>
                                     {(() => {
                                         if (typeof value === "object") {
-                                            return <div className={css.pad2(6, 2).hsla(0, 0, 0, 0.1).relative}>
-                                                <div className={
-                                                    css.absolute.pos(0, 0)
-                                                        .size(`${value.value / value.max * 100}%`, "100%")
-                                                        .hsl(0, 0, 70)
-                                                } />
-                                                <div className={css.relative}>
-                                                    {value.type} ({formatNumber(value.value)} / {formatNumber(value.max)})
-                                                </div>
-                                            </div>;
+                                            return <UsageBar label={value.type} value={value.value} max={value.max} {...getUsageThresholds(value.type)} />;
                                         }
                                         return value;
                                     })()}

package/src/deployManager/components/MachinesListPage.tsx

@@ -11,6 +11,7 @@ import { formatDateJSX } from "../../misc/formatJSX";
 import { DeployMachineButtons, RenderGitRefInfo } from "./deployButtons";
 import { isDefined } from "../../misc";
 import { Anchor, createLink } from "../../library-components/ATag";
+import { UsageBar, getUsageThresholds } from "../../library-components/UsageBar";
 
 export class MachinesListPage extends qreact.Component {
     state = t.state({
@@ -182,17 +183,7 @@ export class MachinesListPage extends qreact.Component {
                                     <RenderGitRefInfo gitRef={machineInfo.gitRef} />
                                     {Object.values(machineInfo.info).map(value => {
                                         if (typeof value === "string") return undefined;
-                                        return <div className={css.pad2(6, 2).hsla(0, 0, 0, 0.1).relative}>
-                                            <div className={
-                                                css.absolute.pos(0, 0)
-                                                    .size(`${value.value / value.max * 100}%`, "100%")
-                                                    .hsl(0, 0, 70)
-                                            } />
-                                            <div className={css.relative}>
-                                                {value.type} ({formatNumber(value.value)} / {formatNumber(value.max)})
-                                            </div>
-                                        </div>;
-
+                                        return <UsageBar label={value.type} value={value.value} max={value.max} {...getUsageThresholds(value.type)} />;
                                     })}
                                 </div>
                                 <div className={css.vbox(4).flexGrow(1)}>

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -5,7 +5,7 @@ import { css } from "typesafecss";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/Querysub";
 import { currentViewParam, selectedServiceIdParam, selectedMachineIdParam } from "../urlParams";
-import { formatDateTimeDetailed, formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { formatDateTime, formatDateTimeDetailed, formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { InputPicker } from "../../library-components/InputPicker";
 import { MachinePicker } from "./MachinePicker";
 import { deepCloneJSON, nextId, sort, timeInSecond } from "socket-function/src/misc";
@@ -46,7 +46,9 @@ export class ServiceDetailPage extends qreact.Component {
         }),
         // Milliseconds; 0 means no scheduled time picked yet (use Deploy Now instead)
         switchTime: t.number(0),
-        // Seconds; 0 means use the service's configured overlapTime
+        // Seconds until the release goes live; 0 means use the default (DEFAULT_OVERLAP_TIME)
+        releaseDelayOverride: t.number(0),
+        // Seconds the old instances outlive the release; 0 means use the default (DEFAULT_OVERLAP_TIME). The no-overlap deploy buttons are how you deploy with an actual 0.
         overlapOverride: t.number(0),
     });
 
@@ -123,6 +125,7 @@ export class ServiceDetailPage extends qreact.Component {
                 Querysub.commit(() => {
                     this.state.editorState = stripReleaseState(deployConfig);
                     this.state.switchTime = 0;
+                    this.state.releaseDelayOverride = 0;
                     this.state.overlapOverride = 0;
                 });
             } finally {
@@ -151,11 +154,13 @@ export class ServiceDetailPage extends qreact.Component {
             content: <div className={css.fixed.pos(0, 0).size("100vw", "100vh").hsla(0, 0, 0, 0.5).display("flex").alignItems("center").justifyContent("center")}>
                 <div className={css.vbox(12).pad2(20).hsl(0, 0, 12).colorhsl(0, 0, 90).bord2(0, 0, 40) + " keepModalsOpen"}>
                     <div className={css.boldStyle.fontSize(16)}>⚡ Force deploy now?</div>
-                    <div>This config becomes live immediately. The old instances are shut down right away, with no overlap.</div>
+                    <div>{deployConfig.parameters.overlapTime
+                        ? `This config becomes live immediately. The old instances keep running for ${formatTime(deployConfig.parameters.overlapTime)} before shutting down.`
+                        : "This config becomes live immediately. The old instances are shut down right away, with no overlap."}</div>
                     <div className={css.hbox(10)}>
                         <Button hue={0} onClick={() => {
                             modal && modal.close();
-                            deployConfig.parameters.releaseTime = undefined;
+                            deployConfig.parameters.releaseTime = Date.now();
                             this.deployConfig(deployConfig);
                         }}>⚡ Force Deploy Now</Button>
                         <Button onClick={() => modal && modal.close()}>Cancel</Button>
@@ -251,7 +256,18 @@ export class ServiceDetailPage extends qreact.Component {
             if (!releaseTime || Date.now() >= releaseTime || !originalConfig.oldParameters) return undefined;
             return {
                 switchTime: releaseTime,
-                overlapTime: originalConfig.parameters.overlapTime || DEFAULT_OVERLAP_TIME,
+                overlapTime: originalConfig.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME,
+            };
+        })();
+        // By our calculation both the old and new parameters' instances are running (the release passed, but the old instances haven't been shut down yet). Purely time-based — we don't verify the instances are actually running.
+        const overlappingDeploy = (() => {
+            let releaseTime = originalConfig.parameters.releaseTime || 0;
+            let overlapTime = originalConfig.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME;
+            if (!releaseTime || !originalConfig.oldParameters) return undefined;
+            if (Date.now() < releaseTime || Date.now() >= releaseTime + overlapTime) return undefined;
+            return {
+                oldParameters: originalConfig.oldParameters,
+                shutdownTime: releaseTime + overlapTime,
             };
         })();
 
@@ -378,16 +394,15 @@ export class ServiceDetailPage extends qreact.Component {
                     this.updateEditorState(updated);
                 }}
             />
-            <InputLabel
-                label="Deploy overlap (seconds)"
-                integer
-                value={Math.round((config.parameters.overlapTime || DEFAULT_OVERLAP_TIME) / timeInSecond)}
-                onChangeValue={value => {
-                    let updated = deepCloneJSON(config);
-                    updated.parameters.overlapTime = (Number(value) || 0) * timeInSecond;
-                    this.updateEditorState(updated);
-                }}
-            />
+            <div className={css.hbox(12)}>
+                {(() => {
+                    let lastDeployTime = getLiveServiceParameters(originalConfig).releaseTime;
+                    if (!lastDeployTime || lastDeployTime > now) return undefined;
+                    return <span>
+                        Last deploy at {formatDateTime(lastDeployTime)} ({formatTime(now - lastDeployTime)} ago)
+                    </span>;
+                })()}
+            </div>
             {/* Machine Status */}
             {config.parameters.deploy && <div className={css.vbox(8).fillWidth}>
                 <h3>Deployed Machines ({machineIds.length})</h3>
@@ -668,7 +683,7 @@ export class ServiceDetailPage extends qreact.Component {
                 <ParametersDiff base={getLiveServiceParameters(originalConfig)} next={originalConfig.parameters} />
                 <div className={css.vbox(4)}>
                     <div>
-                        Live instance deployed at {scheduledDeploy.switchTime - scheduledDeploy.overlapTime <= now && `${formatTime(now - (scheduledDeploy.switchTime - scheduledDeploy.overlapTime))} ago` || `in ${formatTime(scheduledDeploy.switchTime - scheduledDeploy.overlapTime - now)}`} ({formatDateTimeDetailed(scheduledDeploy.switchTime - scheduledDeploy.overlapTime)})
+                        Old instances shut down in {formatTime(scheduledDeploy.switchTime + scheduledDeploy.overlapTime - now)} ({formatDateTimeDetailed(scheduledDeploy.switchTime + scheduledDeploy.overlapTime)})
                     </div>
                     <div className={css.hbox(8)}>
                         <button
@@ -684,10 +699,27 @@ export class ServiceDetailPage extends qreact.Component {
                             }}>
                             Cancel Scheduled Deploy
                         </button>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                            disabled={this.state.isDeploying}
+                            title="Changes the scheduled deploy to go live immediately"
+                            onClick={() => {
+                                this.confirmForceDeployNow(deepCloneJSON(stripReleaseState(originalConfig)));
+                            }}>
+                            ⚡ Force Schedule Now
+                        </button>
                     </div>
                 </div>
             </div>}
 
+            {/* The release went live, but the old instances are still running out their overlap */}
+            {overlappingDeploy && <div className={css.vbox(10).pad2(12).fillWidth.bord2(280, 60, 50).hsl(280, 40, 95)}>
+                <div className={css.boldStyle.fontSize(15)}>
+                    🔀 Overlapping configs — the new config is live, and the old instances shut down in {formatTime(overlappingDeploy.shutdownTime - now)} ({formatDateTimeDetailed(overlappingDeploy.shutdownTime)})
+                </div>
+                <ParametersDiff base={overlappingDeploy.oldParameters} next={originalConfig.parameters} />
+            </div>}
+
             {/* The EDITOR's changes (browser-only) — deploying them schedules a (new) deploy */}
             {(() => {
                 if (!hasUnsavedChanges) return undefined;
@@ -707,18 +739,19 @@ export class ServiceDetailPage extends qreact.Component {
                         <span title={`${configCompareKey(config)} !== ${configCompareKey(deployedConfig)}`}>Only the title / notes changed, so this saves immediately</span>
                     </div>;
                 }
-                let overlapSeconds = this.state.overlapOverride || Math.round((config.parameters.overlapTime || DEFAULT_OVERLAP_TIME) / timeInSecond);
+                let releaseDelaySeconds = this.state.releaseDelayOverride || Math.round(DEFAULT_OVERLAP_TIME / timeInSecond);
+                let releaseDelay = releaseDelaySeconds * timeInSecond;
+                let overlapSeconds = this.state.overlapOverride || Math.round(DEFAULT_OVERLAP_TIME / timeInSecond);
                 let overlap = overlapSeconds * timeInSecond;
                 let scheduledTime = this.state.switchTime;
-                let notEnoughTime = !!scheduledTime && scheduledTime > now && scheduledTime - now < overlap;
-                const makeDeployConfig = (releaseTime: number) => {
+                const makeDeployConfig = (releaseTime: number, overlapTime = overlap) => {
                     let deployConfig = deepCloneJSON(config);
                     deployConfig.parameters.releaseTime = releaseTime;
-                    deployConfig.parameters.overlapTime = overlap;
+                    deployConfig.parameters.overlapTime = overlapTime;
                     return deployConfig;
                 };
-                // The switch time is inferred from the overlap, unless one is explicitly set (in which case the overlap only controls when the new instances start)
-                let effectiveSwitchTime = scheduledTime || now + overlap;
+                // The switch time is inferred from the release delay, unless one is explicitly set
+                let effectiveSwitchTime = scheduledTime || now + releaseDelay;
                 return <div className={css.vbox(10).pad2(12).fillWidth.bord2(45, 70, 45).hsl(45, 60, 95)}>
                     <div className={css.boldStyle.fontSize(15)}>
                         ✏️ Edited (only in this browser, until deployed)
@@ -729,10 +762,19 @@ export class ServiceDetailPage extends qreact.Component {
                             className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 85).fontWeight("bold")}
                             disabled={this.state.isDeploying}
                             onClick={() => {
-                                this.deployConfig(makeDeployConfig(scheduledTime || Date.now() + overlap));
+                                this.deployConfig(makeDeployConfig(scheduledTime || Date.now() + releaseDelay));
                             }}>
                             {this.state.isDeploying && "⏳ Scheduling..." || scheduledDeploy && "🔁 Replace Scheduled Deploy" || "🚀 Schedule Deploy"}
                         </button>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(35, 70, 85)}
+                            disabled={this.state.isDeploying}
+                            title="Deploys with the configured release delay, but the old instances shut down immediately at release time (overlap of 0)"
+                            onClick={() => {
+                                this.deployConfig(makeDeployConfig(scheduledTime || Date.now() + releaseDelay, 0));
+                            }}>
+                            Deploy, No Overlap
+                        </button>
                         <div className={css.opacity(scheduledTime && 1 || 0.5)}>
                             <InputLabel
                                 label="Switch at"
@@ -749,34 +791,48 @@ export class ServiceDetailPage extends qreact.Component {
                             onClick={() => {
                                 this.state.switchTime = 0;
                             }}>
-                            ↺ Reset to overlap-based time
+                            ↺ Reset to delay-based time
                         </button>}
                         <div className={css.opacity(scheduledTime && 0.5 || 1)}>
                             <InputLabel
-                                label="Overlap (seconds)"
+                                label="Release in (seconds)"
                                 integer
-                                value={overlapSeconds}
+                                value={releaseDelaySeconds}
                                 onChangeValue={value => {
-                                    this.state.overlapOverride = Number(value) || 0;
+                                    this.state.releaseDelayOverride = Number(value) || 0;
                                 }}
                             />
                         </div>
+                        <InputLabel
+                            label="Overlap (seconds)"
+                            integer
+                            value={overlapSeconds}
+                            onChangeValue={value => {
+                                this.state.overlapOverride = Number(value) || 0;
+                            }}
+                        />
                     </div>
                     {!!scheduledTime && scheduledTime <= now && <span className={css.colorhsl(0, 85, 45).fontWeight("bold")}>
                         ⚠️ The switch time is in the past — deploying switches immediately
                     </span>}
-                    {notEnoughTime && <span className={css.colorhsl(35, 85, 40).fontWeight("bold")}>
-                        ⚠️ The switch time is sooner than the overlap ({formatTime(overlap)}) — the new instances won't be fully started before the old ones shut down
-                    </span>}
                     <div className={css.hbox(8)}>
                         <button
                             className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
                             disabled={this.state.isDeploying}
                             onClick={() => {
-                                this.confirmForceDeployNow(makeDeployConfig(0));
+                                this.confirmForceDeployNow(makeDeployConfig(Date.now()));
                             }}>
                             ⚡ Force Deploy Now
                         </button>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 90, 30).hsl(0, 85, 65).colorhsl(0, 0, 100).fontWeight("bold")}
+                            disabled={this.state.isDeploying}
+                            title="Deploys immediately AND shuts down the old instances immediately (overlap of 0)"
+                            onClick={() => {
+                                this.confirmForceDeployNow(makeDeployConfig(Date.now(), 0));
+                            }}>
+                            ⚡ Force Deploy Now, No Overlap
+                        </button>
                     </div>
                 </div>;
             })()}
@@ -790,21 +846,27 @@ export class ServiceDetailPage extends qreact.Component {
             )}
 
             {/* Config Editor */}
-            <TypedConfigEditor
-                value={config}
-                onValueChange={(newValue) => {
-                    this.updateEditorState(newValue as ServiceConfig);
-                }}
-                typeDefinition={serviceConfigType}
-                sizeClassName={css.size(1000, 600)}
-            />
-            {hasUnsavedChanges && <button
-                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 50)}
-                onClick={() => {
-                    this.state.editorState = undefined;
-                }}>
-                Discard Changes
-            </button>}
+            {(() => {
+                const discardButton = hasUnsavedChanges && <button
+                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 50)}
+                    onClick={() => {
+                        this.state.editorState = undefined;
+                    }}>
+                    Discard Changes
+                </button>;
+                return <>
+                    {discardButton}
+                    <TypedConfigEditor
+                        value={config}
+                        onValueChange={(newValue) => {
+                            this.updateEditorState(newValue as ServiceConfig);
+                        }}
+                        typeDefinition={serviceConfigType}
+                        sizeClassName={css.size(1000, 600)}
+                    />
+                    {discardButton}
+                </>;
+            })()}
         </div>;
     }
 }

package/src/deployManager/components/deployButtons.tsx

@@ -46,7 +46,7 @@ export class UpdateButtons extends qreact.Component<{
     state = t.state({
         isDeploying: t.type(false),
     });
-    // Deploys all outdated services to latestRef. Scheduled releases use the configured overlap so the new instances are running before the old ones shut down; immediate skips the release entirely (old instances restart right away, no overlap).
+    // Deploys all outdated services to latestRef. Scheduled releases delay the release by the configured overlap (an unrelated value, but a reasonable delay); immediate releases right away.
     private deployAll(outdatedServices: ServiceConfig[], latestRef: string, immediate: boolean) {
         this.state.isDeploying = true;
         // Props are synchronized state, so everything the async work needs is cloned into plain locals HERE, in the synced part
@@ -56,7 +56,7 @@ export class UpdateButtons extends qreact.Component<{
             if (immediate) {
                 updated.parameters.releaseTime = undefined;
             } else {
-                let overlap = updated.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                let overlap = updated.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME;
                 updated.parameters.releaseTime = Date.now() + overlap;
             }
             return updated;
@@ -183,8 +183,8 @@ export class UpdateServiceButtons extends qreact.Component<{
                     // Props are synchronized state, so everything the async work needs is cloned into plain locals HERE, in the synced part
                     let service = deepCloneJSON(this.props.service);
                     service.parameters.gitRef = gitInfo.latestRef;
-                    // Release with the configured overlap, so the new instances are running before the old ones shut down
-                    let overlap = service.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                    // Delay the release by the configured overlap (an unrelated value, but a reasonable delay)
+                    let overlap = service.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME;
                     service.parameters.releaseTime = Date.now() + overlap;
                     Querysub.onCommitFinished(async () => {
                         try {

package/src/deployManager/machineApplyMainCode.ts

@@ -25,6 +25,7 @@ import { onServiceConfigChange, scheduleNodeShutdown } from "./machineController
 import { PromiseObj } from "../promise";
 import path from "path";
 import { fsExistsAsync } from "../fs";
+import { ALIVE_WINDOW_FOREVER, ParametersTimelineEntry, syncParametersTimelineFiles } from "./parametersTimeline";
 
 // The deployed-service stdout log (pipe.txt) is a rolling buffer: once it grows
 // to PIPE_FILE_LINE_LIMIT lines it is truncated down to PIPE_FILE_LINE_KEEP. The
@@ -132,9 +133,9 @@ const SCREEN_SUFFIX = "-dply";
 export function getScreenName(config: { serviceKey: string; index: number }): string {
     return `${config.serviceKey}-${config.index}${SCREEN_SUFFIX}`.replace(/[^a-zA-Z0-9\-_]/g, "_");
 }
-// The new instances started during a release overlap. They cover the service while the canonical screens are restarted with the new config at release time, and are killed shortly after.
-export function getNextScreenName(config: { serviceKey: string; index: number }): string {
-    return getScreenName({ serviceKey: config.serviceKey + "-next", index: config.index });
+// The old instances kept alive during a release overlap. The canonical screens restart with the new config at release time; these keep the OLD version serving until releaseTime + overlapTime, and are killed shortly after.
+export function getOldScreenName(config: { serviceKey: string; index: number }): string {
+    return getScreenName({ serviceKey: config.serviceKey + "-old", index: config.index });
 }
 
 export async function streamScreenOutput(config: {
@@ -585,35 +586,41 @@ const ensureGitSynced = measureWrap(async function ensureGitSynced(config: {
 let launchesPerService = new Map<string, number>();
 let lastLaunchedTimePerService = new Map<string, number>();
 
-// Starts (or verifies) the "-next" instance of a service during a release overlap, running the new (not yet live) parameters. It covers the service while the canonical screens restart with the new parameters at release time, and is killed by the unused-screen cleanup afterwards (once the release passes we stop ensuring it).
-async function ensureNextInstance(config: {
-    next: ServiceParameters;
+// Starts (or verifies) the "-old" instance of a service during a release overlap, running the old (no longer live) parameters. It keeps the old version serving while the new canonical instances start up, and is killed by the unused-screen cleanup afterwards (once releaseTime + overlapTime passes we stop ensuring it).
+async function ensureOldInstance(config: {
+    old: ServiceParameters;
+    aliveWindow: [number, number];
     index: number;
     screenNamesUsed: Set<string>;
     screenStateMap: Map<string, { screenName: string; isProcessRunning: boolean; pid: string }>;
 }) {
-    let { next, index } = config;
-    let nextScreenName = getNextScreenName({ serviceKey: next.key, index });
-    config.screenNamesUsed.add(nextScreenName);
+    let { old, index } = config;
+    let oldScreenName = getOldScreenName({ serviceKey: old.key, index });
+    config.screenNamesUsed.add(oldScreenName);
+    let shutdownTime = config.aliveWindow[1];
+    const syncTimeline = async () => {
+        let pid = parseInt(config.screenStateMap.get(oldScreenName)?.pid || "") || undefined;
+        await syncParametersTimelineFiles(os.homedir() + "/" + SERVICE_FOLDER + oldScreenName + "/", [{ pid, aliveWindow: config.aliveWindow, parameters: old }]);
+    };
 
     let root = os.homedir() + "/" + SERVICE_FOLDER;
-    let folder = root + nextScreenName + "/";
+    let folder = root + oldScreenName + "/";
     let gitFolder = folder + "git/";
     await fs.promises.mkdir(gitFolder, { recursive: true });
-    if (next.gitRef) {
+    if (old.gitRef) {
         let prevGitRef = "";
         try {
             prevGitRef = await getGitRefLive(gitFolder);
         } catch { }
         await ensureGitSynced({
             gitFolder,
-            repoUrl: next.repoUrl,
-            gitRef: next.gitRef,
+            repoUrl: old.repoUrl,
+            gitRef: old.gitRef,
         });
         let afterGitRef = await getGitRefLive(gitFolder);
         let nodeModulesMissing = !await fsExistsAsync(gitFolder + "node_modules");
         if (afterGitRef !== prevGitRef || nodeModulesMissing) {
-            console.log(green(`Yarn installing for ${magenta(nextScreenName)} (ref ${prevGitRef} -> ${afterGitRef}, nodeModulesMissing=${nodeModulesMissing})`));
+            console.log(green(`Yarn installing for ${magenta(oldScreenName)} (ref ${prevGitRef} -> ${afterGitRef}, nodeModulesMissing=${nodeModulesMissing})`));
             await runPromise(`yarn install --mutex network`, { cwd: gitFolder });
         }
     }
@@ -623,23 +630,27 @@ async function ensureNextInstance(config: {
     if (await fsExistsAsync(parameterPath)) {
         prevParameters = await fs.promises.readFile(parameterPath, "utf8");
     }
-    let newParametersString = JSON.stringify(next);
-    let sameParameters = sameRestartParameters(prevParameters, next);
-    let screenIsRunning = config.screenStateMap.get(nextScreenName)?.isProcessRunning;
+    let newParametersString = JSON.stringify(old);
+    let sameParameters = sameRestartParameters(prevParameters, old);
+    let screenIsRunning = config.screenStateMap.get(oldScreenName)?.isProcessRunning;
     if (sameParameters && screenIsRunning) {
         if (prevParameters !== newParametersString) {
             await fs.promises.writeFile(parameterPath, newParametersString);
         }
-        console.log(green(`Verified release-overlap instance ${magenta(nextScreenName)} is running`));
+        await notifyServiceShutdown(oldScreenName, shutdownTime);
+        await syncTimeline();
+        console.log(green(`Verified release-overlap old instance ${magenta(oldScreenName)} is running`));
         return;
     }
 
-    console.log(`Starting release-overlap instance ${magenta(nextScreenName)}, with ${newParametersString}, isRunning = ${screenIsRunning}, sameParameters = ${sameParameters}`);
+    console.log(`Starting release-overlap old instance ${magenta(oldScreenName)}, with ${newParametersString}, isRunning = ${screenIsRunning}, sameParameters = ${sameParameters}`);
     await fs.promises.writeFile(parameterPath, newParametersString);
     await runScreenCommand({
-        screenName: nextScreenName,
-        command: next.command,
+        screenName: oldScreenName,
+        command: old.command,
     });
+    await notifyServiceShutdown(oldScreenName, shutdownTime);
+    await syncTimeline();
 }
 
 function sameRestartParameters(prevParametersJSON: string, next: ServiceParameters): boolean {
@@ -656,8 +667,8 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
     let machineId = getOwnMachineId(getDomain());
     let allConfigs = await getEffectiveServiceConfigs();
     let relevantConfigs = allConfigs
-        .filter(config => getMachineIdList(getLiveServiceParameters(config)).includes(machineId) || getMachineIdList(config.parameters).includes(machineId))
-        .filter(x => getLiveServiceParameters(x).deploy || x.parameters.deploy);
+        .filter(config => getMachineIdList(getLiveServiceParameters(config)).includes(machineId) || getMachineIdList(config.parameters).includes(machineId) || config.oldParameters && getMachineIdList(config.oldParameters).includes(machineId))
+        .filter(x => getLiveServiceParameters(x).deploy || x.parameters.deploy || x.oldParameters?.deploy);
 
     let machineInfo = await getLiveMachineInfo();
 
@@ -669,25 +680,29 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
     for (let record of relevantConfigs) {
         let config = { ...record, parameters: getLiveServiceParameters(record) };
         let releaseTime = record.parameters.releaseTime || 0;
+        // The overlap length always comes from the NEWEST parameters, even though it governs how long the OLD instances outlive the release
+        let overlapTime = record.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME;
         let isUpcomingRelease = !!releaseTime && Date.now() < releaseTime && !!record.oldParameters;
-        let overlapTime = record.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
-        if (isUpcomingRelease) {
+        let isOverlapRunning = !!releaseTime && Date.now() >= releaseTime && Date.now() < releaseTime + overlapTime && !!record.oldParameters;
+        if (isUpcomingRelease || isOverlapRunning) {
             upcomingReleases.push({ releaseTime, overlapTime });
-            console.log(magenta(`Release in flight for ${record.serviceId} (${record.parameters.key}): new instances start at ${new Date(releaseTime - overlapTime).toLocaleString()}${Date.now() >= releaseTime - overlapTime && " (overlap running)" || ""}, old instances shut down at ${new Date(releaseTime).toLocaleString()}`));
-            // The release-overlap instances follow the NEW parameters' machineIds, so machines that are only in the new parameters still start their instances at overlap time (their canonical instances start once the release passes)
-            if (Date.now() >= releaseTime - overlapTime && record.parameters.deploy) {
-                let nextTargets = getMachineTargets(record.parameters).filter(target => target.machineId === machineId);
-                for (let i = 0; i < nextTargets.length; i++) {
-                    try {
-                        await ensureNextInstance({
-                            next: { ...record.parameters, command: applyCommandTemplate(record.parameters.command, nextTargets[i].variables) },
-                            index: i,
-                            screenNamesUsed,
-                            screenStateMap,
-                        });
-                    } catch (e: any) {
-                        console.error(`Error starting release-overlap instance for ${record.serviceId} (${record.parameters.key}): ${e.stack}`);
-                    }
+            console.log(magenta(`Release in flight for ${record.serviceId} (${record.parameters.key}): new instances start at ${new Date(releaseTime).toLocaleString()}${isOverlapRunning && " (overlap running)" || ""}, old instances shut down at ${new Date(releaseTime + overlapTime).toLocaleString()}`));
+        }
+        // The old-overlap instances follow the OLD parameters' machineIds, so machines being removed by the release still keep the old version alive through the overlap (their canonical screens die at release time)
+        if (isOverlapRunning && record.oldParameters?.deploy) {
+            let oldParameters = record.oldParameters;
+            let oldTargets = getMachineTargets(oldParameters).filter(target => target.machineId === machineId);
+            for (let i = 0; i < oldTargets.length; i++) {
+                try {
+                    await ensureOldInstance({
+                        old: { ...oldParameters, command: applyCommandTemplate(oldParameters.command, oldTargets[i].variables) },
+                        aliveWindow: [releaseTime, releaseTime + overlapTime],
+                        index: i,
+                        screenNamesUsed,
+                        screenStateMap,
+                    });
+                } catch (e: any) {
+                    console.error(`Error starting release-overlap old instance for ${record.serviceId} (${record.parameters.key}): ${e.stack}`);
                 }
             }
         }
@@ -748,6 +763,24 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
                 let sameParameters = sameRestartParameters(prevParameters, instanceParameters);
                 let screenIsRunning = screenStateMap.get(screenName)?.isProcessRunning;
 
+                const syncTimeline = async (pid: string | undefined) => {
+                    let entries: ParametersTimelineEntry[] = [{
+                        pid: parseInt(pid || "") || undefined,
+                        aliveWindow: [config.parameters.releaseTime || 0, isUpcomingRelease ? releaseTime : ALIVE_WINDOW_FOREVER],
+                        parameters: instanceParameters,
+                    }];
+                    if (isUpcomingRelease) {
+                        let futureTargets = getMachineTargets(record.parameters).filter(target => target.machineId === machineId);
+                        if (i < futureTargets.length) {
+                            entries.push({
+                                aliveWindow: [releaseTime, ALIVE_WINDOW_FOREVER],
+                                parameters: { ...record.parameters, command: applyCommandTemplate(record.parameters.command, futureTargets[i].variables) },
+                            });
+                        }
+                    }
+                    await syncParametersTimelineFiles(folder, entries);
+                };
+
                 let nodePathId = folder + SERVICE_NODE_FILE_NAME;
                 if (await fsExistsAsync(nodePathId)) {
                     let nodeId = await fs.promises.readFile(nodePathId, "utf8");
@@ -758,6 +791,7 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
                     if (prevParameters !== newParametersString) {
                         await fs.promises.writeFile(parameterPath, newParametersString);
                     }
+                    await syncTimeline(screenStateMap.get(screenName)?.pid);
                     console.log(green(`Verified ${magenta(screenName)} is running`));
                     continue;
                 }
@@ -798,6 +832,7 @@ const resyncServicesBase = runInSerial(measureWrap(async function resyncServices
                     throw new Error(`${logs}\n\nService ${magenta(screenName)} is not running after starting. Trying again in ${formatTime(MACHINE_RESYNC_INTERVAL)}, or on next change. Last logs above.`);
                 }
                 console.log(green(`Service ${magenta(screenName)} is verified to be running after starting.`));
+                await syncTimeline(foundScreen?.pid);
 
                 launchCount++;
                 lastLaunchedTime = Date.now();
@@ -838,13 +873,13 @@ async function resyncServices() {
     }
 }
 
-// The regular resync poll is too coarse for release boundaries (the overlap start and the release itself), so schedule an extra resync at the next boundary.
+// The regular resync poll is too coarse for release boundaries (the release itself and the overlap end), so schedule an extra resync at the next boundary.
 let cancelReleaseResync: (() => void) | undefined;
 function scheduleReleaseResync(upcomingReleases: { releaseTime: number; overlapTime: number }[]) {
     let now = Date.now();
     let next: number | undefined;
     for (let release of upcomingReleases) {
-        for (let boundary of [release.releaseTime - release.overlapTime, release.releaseTime]) {
+        for (let boundary of [release.releaseTime, release.releaseTime + release.overlapTime]) {
             if (boundary <= now) continue;
             if (next === undefined || boundary < next) {
                 next = boundary;