querysub 0.556.0 → 0.558.0

package/appSecrets.ts

@@ -1,62 +1,11 @@
 import fs from "fs";
-import os from "os";
-import { isNode } from "socket-function/src/misc";
 import { lazy } from "socket-function/src/caching";
 import { ArchivesBackblaze } from "sliftutils/storage/backblaze";
-import { parseArgsFactory } from "./src/misc/rawParams";
+import { STORAGE_DIR, getDomain, getBackblazePath } from "./src/misc/appPaths";
 import { Querysub } from "./src/4-querysub/Querysub";
 
-// getSecret always imports us relative to the process cwd, so the cwd is the repo root and this matches what getStorageDir would resolve
-const STORAGE_DIR = "./database-storage/";
-
-// querysubConfig and getDomain are copied verbatim from src/config.ts, so this file has no dependencies on our own application (parseArgsFactory is fine to import, as it has no dependencies of its own)
-
-let yargObj = parseArgsFactory()
-    .option("domain", { type: "string", desc: `Sets the domain` })
-    .argv
-    ;
-
-type QuerysubConfig = {
-    domain?: string;
-    emaildomain?: string;
-    notifyemails?: string[];
-};
-let querysubConfig = lazy((): QuerysubConfig => {
-    if (!isNode()) throw new Error("querysubConfig is only available on the server");
-    const path = "./querysub.json";
-    if (!fs.existsSync(path)) {
-        return {};
-    }
-    try {
-        return JSON.parse(fs.readFileSync(path, "utf8"));
-    } catch (e) {
-        console.error("Error parsing querysub.json", e);
-        return {};
-    }
-});
-
-export function getDomain() {
-    if (!isNode()) {
-        return location.hostname.split(".").slice(-2).join(".");
-    }
-    return yargObj.domain || querysubConfig().domain || "querysub.com";
-}
-
 const keysArchives = lazy(() => new ArchivesBackblaze({ bucketName: getDomain() }));
 
-export function getBackblazePath() {
-    let testPaths = [
-        STORAGE_DIR + "backblaze.json",
-        os.homedir() + "/backblaze.json",
-    ];
-    for (let path of testPaths) {
-        if (fs.existsSync(path)) {
-            return path;
-        }
-    }
-    return testPaths[0];
-}
-
 export const getCloudflareCreds = lazy(async (): Promise<{ key: string; email: string }> => {
     let archives = keysArchives();
     let credsJSON = await archives.get("keys/cloudflare.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.556.0",
+  "version": "0.558.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/-0-hooks/hooks.ts

@@ -1,5 +1,5 @@
-import { MaybePromise } from "socket-function/src/types";
-import { CallInterceptor } from "../3-path-functions/PathFunctionHelpers";
+import type { MaybePromise } from "socket-function/src/types";
+import type { CallInterceptor } from "../3-path-functions/PathFunctionHelpers";
 import type { EdgeNodeConfig } from "../4-deploy/edgeNodes";
 import type { ExtraMetadata } from "../5-diagnostics/nodeMetadata";
 

package/src/-a-archives/archivesBackBlaze.ts

@@ -3,7 +3,7 @@ import { Archives } from "./archives";
 import fs from "fs";
 import { isNode, timeInMinute } from "socket-function/src/misc";
 import { isLogBackblaze } from "../config";
-import { getBackblazePath } from "../../appSecrets";
+import { getBackblazePath } from "../misc/appPaths";
 import { ArchivesBackblaze as ArchivesBackblazeBase } from "sliftutils/storage/backblaze";
 import type { IArchives, ArchivesConfig } from "sliftutils/storage/IArchives";
 

package/src/0-path-value-core/PathWatcher.ts

@@ -50,6 +50,12 @@ function incrementWatcherSequence() {
     });
 }
 
+if (!registerResource) {
+    debugger;
+    require("debugbreak")(2);
+    debugger;
+}
+
 // WATCH CASES
 // 1) getOwnNodeId() is used to trigger pathValueClientWatcher (no one else should be using it)
 // 2) Use other nodes to immediately proxy to the other nodes

package/src/4-querysub/Querysub.ts

@@ -50,7 +50,6 @@ import yargs, { check } from "yargs";
 import { parseArgsFactory } from "../misc/rawParams";
 
 import * as typesafecss from "typesafecss";
-import "../library-components/urlResetGroups";
 import { createLocalSchema } from "./schemaHelpers";
 
 setTimeout(() => import("./FunctionRunnerTracking"));

package/src/deployManager/components/ProcessesView.tsx

@@ -0,0 +1,169 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../4-dom/qreact";
+import { css } from "typesafecss";
+import { t } from "../../2-proxy/schema2";
+import { Querysub } from "../../4-querysub/Querysub";
+import { formatTime, formatDateTimeDetailed } from "socket-function/src/formatting/format";
+import { sort, timeInSecond, nextId } from "socket-function/src/misc";
+import { MachineController, watchProcessOutput, stopWatchingProcessOutput } from "../machineController";
+import type { ProcessRecord } from "../processLogs";
+import { Button } from "../../library-components/Button";
+import { parseAnsiColors } from "../../diagnostics/logs/ansiFormat";
+
+module.hotreload = true;
+
+const RUNNING_COLOR = { h: 130, s: 55, l: 88 };
+const DEAD_COLOR = { h: 0, s: 0, l: 92 };
+const OUTPUT_BUFFER_LIMIT = 1_000_000;
+const OUTPUT_BUFFER_KEPT = 100_000;
+const OUTPUT_MAX_HEIGHT = "40vh";
+
+/** One process's live output. Mounting starts the stream, unmounting stops it, so the watch lifetime is exactly the time it is on screen. */
+class ProcessOutput extends qreact.Component<{ record: ProcessRecord; machineNodeId: string }> {
+    state = t.state({
+        data: t.type(""),
+    });
+    private callbackId = nextId();
+    // Unmounting before the watch finishes registering would otherwise stop a callback that gets added right after, leaving it streaming into a component that is gone
+    private watching: Promise<void> = Promise.resolve();
+    private unmounted = false;
+    componentDidMount() {
+        // Props are synchronized state, so the plain values the async work needs are read here
+        let { folder, launchId } = this.props.record;
+        let nodeId = this.props.machineNodeId;
+        let callbackId = this.callbackId;
+        this.watching = (async () => {
+            await watchProcessOutput({
+                nodeId,
+                folder,
+                launchId,
+                callbackId,
+                onData: async (data: string) => {
+                    Querysub.commit(() => {
+                        let full = this.state.data + data;
+                        // Trimmed well below the limit, so trimming is rare - each trim jumps the scroll position
+                        if (full.length > OUTPUT_BUFFER_LIMIT) {
+                            full = full.slice(-OUTPUT_BUFFER_KEPT);
+                        }
+                        this.state.data = full;
+                    });
+                },
+            });
+            // Unmounted while we were registering, so stop the watch we just started
+            if (this.unmounted) {
+                await stopWatchingProcessOutput({ callbackId });
+            }
+        })();
+    }
+    componentWillUnmount() {
+        this.unmounted = true;
+        let callbackId = this.callbackId;
+        let watching = this.watching;
+        Querysub.onCommitFinished(async () => {
+            await watching;
+            await stopWatchingProcessOutput({ callbackId });
+        });
+    }
+    render() {
+        return <div className={
+            css.fontFamily("monospace").whiteSpace("pre-wrap").fillWidth
+                .maxHeight(OUTPUT_MAX_HEIGHT).overflow("auto").pad2(10, 8)
+                .hsl(0, 0, 12).colorhsl(0, 0, 90)
+        }>
+            {parseAnsiColors(this.state.data)}
+        </div>;
+    }
+}
+
+class ProcessRow extends qreact.Component<{ record: ProcessRecord; machineNodeId: string }> {
+    state = t.state({
+        watching: t.type(false),
+    });
+    render() {
+        let record = this.props.record;
+        let now = Querysub.nowDelayed(timeInSecond);
+        let running = record.deadTime === undefined;
+        let color = running && RUNNING_COLOR || DEAD_COLOR;
+        return <div className={css.vbox(6).fillWidth.pad2(10, 8).bord2(color.h, color.s, color.l - 20).hsl(color.h, color.s, color.l)}>
+            <div className={css.hbox(10).wrap.alignItems("center")}>
+                <div className={css.boldStyle}>{record.screenName}</div>
+                <div className={css.colorhsl(0, 0, 35)}>{record.serviceKey} #{record.index}</div>
+                <div className={css.hbox(4)}>
+                    <span>started</span>
+                    <span className={css.boldStyle}>{formatDateTimeDetailed(record.startTime)}</span>
+                    <span className={css.colorhsl(0, 0, 40)}>({formatTime(now - record.startTime)} ago)</span>
+                </div>
+                {running && <div>● running for {formatTime(now - record.startTime)}</div>}
+                {!running && <div className={css.hbox(4)}>
+                    <span>died</span>
+                    <span className={css.boldStyle}>{formatDateTimeDetailed(record.deadTime || 0)}</span>
+                    <span className={css.colorhsl(0, 0, 40)}>
+                        ({formatTime(now - (record.deadTime || 0))} ago, ran {formatTime((record.deadTime || 0) - record.startTime)})
+                    </span>
+                </div>}
+                {record.pid !== undefined && <div className={css.colorhsl(0, 0, 45)}>pid {record.pid}</div>}
+                <div className={css.flexGrow(1)} />
+                <Button flavor="tiny" onClick={() => this.state.watching = !this.state.watching}>
+                    {this.state.watching && "Hide output" || "Watch output"}
+                </Button>
+            </div>
+            {this.state.watching && <ProcessOutput record={record} machineNodeId={this.props.machineNodeId} />}
+        </div>;
+    }
+}
+
+class MachineProcesses extends qreact.Component<{ machineId: string; applyNodeId: string; serviceId?: string }> {
+    state = t.state({
+        showHistorical: t.type(false),
+    });
+    render() {
+        let records = MachineController(SocketFunction.browserNodeId()).listOtherProcesses({ nodeId: this.props.applyNodeId });
+        if (!records) return <div className={css.pad2(10, 8)}>{this.props.machineId}: loading processes...</div>;
+        let shown = records;
+        if (this.props.serviceId) {
+            shown = shown.filter(x => x.serviceId === this.props.serviceId);
+        }
+        let running = shown.filter(x => x.deadTime === undefined);
+        let historical = shown.filter(x => x.deadTime !== undefined);
+        sort(running, x => -x.startTime);
+        sort(historical, x => -(x.deadTime || 0));
+        return <div className={css.vbox(8).fillWidth}>
+            <div className={css.hbox(10).wrap.alignItems("center")}>
+                <div className={css.boldStyle}>{this.props.machineId}</div>
+                <div className={css.colorhsl(0, 0, 45)}>{running.length} running</div>
+                {historical.length > 0 && <Button flavor="tiny" onClick={() => this.state.showHistorical = !this.state.showHistorical}>
+                    {this.state.showHistorical && `Hide ${historical.length} historical` || `Show ${historical.length} historical`}
+                </Button>}
+            </div>
+            {running.map(record => <ProcessRow key={record.launchId} record={record} machineNodeId={this.props.applyNodeId} />)}
+            {this.state.showHistorical && historical.map(record =>
+                <ProcessRow key={record.launchId} record={record} machineNodeId={this.props.applyNodeId} />
+            )}
+        </div>;
+    }
+}
+
+/** Every machine's processes. The listing is cached per machine, so Invalidate empties it and each machine repopulates as its own call returns - watching a process streams live regardless. */
+export class ProcessesView extends qreact.Component<{
+    machines: { machineId: string; applyNodeId: string }[];
+    serviceId?: string;
+}> {
+    render() {
+        return <div className={css.vbox(14).fillWidth}>
+            <div className={css.hbox(10).alignItems("center")}>
+                <h3 className={css.flexGrow(1)}>Processes</h3>
+                <Button onClick={() => {
+                    MachineController(SocketFunction.browserNodeId()).listOtherProcesses.resetAll();
+                }}>
+                    Invalidate
+                </Button>
+            </div>
+            {this.props.machines.map(machine => <MachineProcesses
+                key={machine.machineId}
+                machineId={machine.machineId}
+                applyNodeId={machine.applyNodeId}
+                serviceId={this.props.serviceId}
+            />)}
+        </div>;
+    }
+}

package/src/deployManager/components/RouteConfigView.tsx

@@ -5,6 +5,7 @@ import { css } from "typesafecss";
 import { sort } from "socket-function/src/misc";
 import { formatNumber, formatDateTime, formatTime, formatDateTimeDetailed } from "socket-function/src/formatting/format";
 import { parseHostedUrl, parseBackblazeUrl } from "sliftutils/storage/remoteStorage/remoteConfig";
+import { resolveIntermediateSources, getIntermediateSources } from "sliftutils/storage/remoteStorage/intermediateSources";
 import { SocketFunction } from "socket-function/SocketFunction";
 import { FULL_VALID_WINDOW, FULL_ROUTE } from "sliftutils/storage/IArchives";
 import type { RemoteConfig, RemoteConfigBase, HostedConfig, BackblazeConfig } from "sliftutils/storage/IArchives";
@@ -20,6 +21,7 @@ type Source = HostedConfig | BackblazeConfig;
 const DEFAULT_HTTPS_PORT = 443;
 const TAG_COLOR = { h: 210, s: 45, l: 88 };
 const WARNING_COLOR = { h: 35, s: 90, l: 85 };
+const NOTICE_COLOR = { h: 205, s: 70, l: 88 };
 const SOURCE_BORDER_COLOR = { h: 0, s: 0, l: 75 };
 const ACTIVE_COLOR = { h: 130, s: 55, l: 85 };
 const PAST_COLOR = { h: 0, s: 0, l: 90 };
@@ -454,10 +456,29 @@ class WindowRanges extends qreact.Component<{ sources: Source[]; ownBucketName:
     }
 }
 
+/** Two configs that differ only by switchover windows are not really in conflict - resolving those away is exactly what a client does before using the config, so if the remainder matches, every server is working from the same underlying configuration. The version is ignored: a config gains a version purely by having an intermediate written into it. */
+function getIntermediateOnlyDifference(consensus: RemoteConfig, other: RemoteConfig, now: number): {
+    intermediateOnly: boolean;
+    /** Undefined when nothing is pending; otherwise when the last switchover window still in the future ends */
+    expiresAt?: number;
+} {
+    let sourcesOf = (config: RemoteConfig) => JSON.stringify(resolveIntermediateSources(config).sources);
+    let intermediateOnly = sourcesOf(consensus) === sourcesOf(other);
+    let ends = [...getIntermediateSources(consensus), ...getIntermediateSources(other)].map(x => x.validWindow[1]);
+    let pending = ends.filter(end => end > now);
+    return {
+        intermediateOnly,
+        expiresAt: pending.length && Math.max(...pending) || undefined,
+    };
+}
+
 class ConflictWarning extends qreact.Component<{ consensus: ConfigVariant; conflict: ConfigConflict }> {
     render() {
         let { consensus, conflict } = this.props;
         let { bucketName, variant } = conflict;
+        let now = Querysub.timeDelayed(TIME_REFRESH_INTERVAL);
+        let { intermediateOnly, expiresAt } = getIntermediateOnlyDifference(consensus.rawConfig, variant.rawConfig, now);
+        let color = intermediateOnly && NOTICE_COLOR || WARNING_COLOR;
         let consensusKeys = new Set(consensus.sources.map(x => getSourceKey(x, bucketName)));
         let conflictKeys = new Set(variant.sources.map(x => getSourceKey(x, bucketName)));
         let extra = variant.sources.filter(x => !consensusKeys.has(getSourceKey(x, bucketName)));
@@ -469,10 +490,15 @@ class ConflictWarning extends qreact.Component<{ consensus: ConfigVariant; confl
                 route {(source.route || FULL_ROUTE).join(" – ")}, valid {formatWindowTime(source.validWindow[0])} → {formatWindowTime(source.validWindow[1])}
             </div>
         </div>;
-        return <div className={css.vbox(6).pad2(10, 8).hsl(WARNING_COLOR.h, WARNING_COLOR.s, WARNING_COLOR.l).bord2(WARNING_COLOR.h, WARNING_COLOR.s, WARNING_COLOR.l - 25)}>
+        return <div className={css.vbox(6).pad2(10, 8).hsl(color.h, color.s, color.l).bord2(color.h, color.s, color.l - 25)}>
             <div className={css.boldStyle}>
-                ⚠ {bucketName}: {variant.servers.length} server{variant.servers.length === 1 && "" || "s"} report a different routing config (version {String(variant.version ?? "none")}, consensus is version {String(consensus.version ?? "none")})
+                {intermediateOnly && "ℹ" || "⚠"} {bucketName}: {variant.servers.length} server{variant.servers.length === 1 && "" || "s"} report a different routing config (version {String(variant.version ?? "none")}, consensus is version {String(consensus.version ?? "none")})
             </div>
+            {intermediateOnly && <div>
+                Only the switchover windows differ - with those resolved away, every server is working from the same configuration.
+                {expiresAt === undefined && " They are all in the past, so this shouldn't break anything."}
+                {expiresAt !== undefined && ` The sources become consistent again once the last one expires, ${formatTime(expiresAt - now)} from now (${formatWindowTimeDetailed(expiresAt)}).`}
+            </div>}
             <div className={css.vbox(2).fontSize(TAG_FONT_SIZE)}>
                 {variant.servers.map(server => <div key={server}>{server}</div>)}
             </div>

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -8,30 +8,24 @@ import { currentViewParam, selectedServiceIdParam, selectedMachineIdParam } from
 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";
+import { deepCloneJSON, sort, timeInSecond } from "socket-function/src/misc";
 import { InputLabel } from "../../library-components/InputLabel";
 import { Button } from "../../library-components/Button";
 import { isDefined } from "../../misc";
-import { watchScreenOutput, stopWatchingScreenOutput } from "../machineController";
+import { ProcessesView } from "./ProcessesView";
 import { getPathStr2 } from "../../path";
 import { ATag, Anchor } from "../../library-components/ATag";
 import { ScrollOnMount } from "../../library-components/ScrollOnMount";
-import { StickyBottomScroll } from "../../library-components/StickyBottomScroll";
 import { PrimitiveDisplay } from "../../diagnostics/logs/ObjectDisplay";
-import { parseAnsiColors, rgbToHsl } from "../../diagnostics/logs/ansiFormat";
 import { RenderGitRefInfo, UpdateServiceButtons, bigEmoji, buttonStyle } from "./deployButtons";
 import { TypedConfigEditor } from "../../library-components/TypedConfigEditor";
 import { managementPageURL } from "../../diagnostics/managementPages";
 import { getLogViewerParams } from "../../diagnostics/logs/IndexedLogs/LogViewerParams";
-import { getScreenName } from "../machineApplyMainCode";
+import { getScreenName } from "../processManager";
 import { getOwnThreadId } from "../../-f-node-discovery/NodeDiscovery";
 import { decodeNodeId } from "sliftutils/misc/https/certs";
 import { showModal } from "../../5-diagnostics/Modal";
 
-// Trimmed well below the limit, so trimming is rare - each trim jumps the relative scroll position
-const OUTPUT_BUFFER_LIMIT = 1_000_000;
-const OUTPUT_BUFFER_KEPT = 100_000;
-
 export class ServiceDetailPage extends qreact.Component {
     state = t.state({
         // The editor's current value. Purely in the browser — nothing is written anywhere until a deploy is scheduled (or forced). Whether there are unsaved changes is DERIVED by comparing this to the deployed config, never tracked separately.
@@ -41,13 +35,6 @@ export class ServiceDetailPage extends qreact.Component {
         expandedErrors: t.lookup({
             expanded: t.type(false)
         }),
-        watchingOutputs: t.lookup({
-            isWatching: t.type(false),
-            data: t.type(""),
-            callbackId: t.type(""),
-            // The launch the buffered output belongs to. A new launch is a new process, so its output must not be appended to the previous one's.
-            launchTime: t.number(0),
-        }),
         // Milliseconds; 0 means no scheduled time picked yet (use Deploy Now instead)
         switchTime: t.number(0),
         // Seconds until the release goes live; 0 means use the default (DEFAULT_OVERLAP_TIME)
@@ -66,66 +53,6 @@ export class ServiceDetailPage extends qreact.Component {
         this.state.editorState = updatedConfig;
     }
 
-    private async startWatchingOutput(config: {
-        nodeId: string;
-        key: string;
-        index: number;
-        launchTime: number;
-    }) {
-        const { nodeId, key, index, launchTime } = config;
-        const outputKey = getPathStr2(key, index + "");
-        let callbackId = nextId();
-
-        // Drop the previous watch first: two live callbacks writing to one buffer is what interlaced the output of the old and new processes
-        let previousCallbackId = Querysub.localRead(() => this.state.watchingOutputs[outputKey].callbackId);
-        if (previousCallbackId) {
-            await stopWatchingScreenOutput({ callbackId: previousCallbackId });
-        }
-
-        Querysub.commit(() => {
-            // Cleared, so the buffer only ever holds the output of the launch it is watching
-            this.state.watchingOutputs[outputKey] = { isWatching: true, data: "", callbackId, launchTime };
-        });
-
-        await watchScreenOutput({
-            nodeId,
-            key,
-            index,
-            callbackId,
-            onData: async (data: string, dataConfig?: { reset?: boolean }) => {
-                Querysub.localCommit(() => {
-                    let watchingState = this.state.watchingOutputs[outputKey];
-                    // A callback that outlived its watch (a restart raced with in-flight data) must not write into the new process's buffer
-                    if (watchingState.callbackId !== callbackId) return;
-                    // The screen's process changed, so what we have belongs to a process that is gone
-                    let fullData = (dataConfig?.reset && "" || watchingState.data) + data;
-                    // Don't trim every time, otherwise the relative scroll position changes by too much
-                    if (fullData.length > OUTPUT_BUFFER_LIMIT) {
-                        fullData = fullData.slice(-OUTPUT_BUFFER_KEPT);
-                    }
-                    watchingState.data = fullData;
-                });
-            }
-        });
-    }
-
-    private async stopWatchingOutput(key: string, index: number) {
-        const outputKey = getPathStr2(key, index + "");
-
-        let callbackId = Querysub.localRead(() => {
-            const watchingState = this.state.watchingOutputs[outputKey];
-            let previousCallbackId = watchingState.callbackId;
-            watchingState.isWatching = false;
-            // Clearing this stops any in-flight data from landing in the buffer, and marks that there is no watch to stop next time
-            watchingState.callbackId = "";
-            return previousCallbackId;
-        });
-
-        Querysub.onCommitFinished(async () => {
-            await stopWatchingScreenOutput({ callbackId });
-        });
-    }
-
     // Deploys the editor's config (with parameters.releaseTime deciding when it goes live). The editor is NEVER reset — it is set to exactly what was deployed, so it keeps its content and simply compares as having no unsaved changes.
     private deployConfig(deployConfig: ServiceConfig) {
         // Do not let them update the serviceId, as that would break things
@@ -435,13 +362,8 @@ export class ServiceDetailPage extends qreact.Component {
                         }
 
                         let key = config.parameters.key;
-                        const outputKey = getPathStr2(key, index + "");
-                        const isWatching = this.state.watchingOutputs[outputKey].isWatching;
-                        let outputData = this.state.watchingOutputs[outputKey].data;
                         const screenName = getScreenName({ serviceKey: key, index });
 
-                        let launchTime = serviceInfo?.lastLaunchedTime || 0;
-
                         return <div key={machineId}
                             className={css.pad2(12).vbox(10).bord2(0, 0, 20).fillWidth + backgroundColor}
                         >
@@ -510,24 +432,6 @@ export class ServiceDetailPage extends qreact.Component {
                                 </Anchor>
 
 
-                                <div
-                                    className={css.button.pad2(16, 8).bord2(0, 0, 10) + (isWatching ? css.hsl(0, 70, 90) : css.hsl(120, 70, 90))
-                                    }
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        let applyNodeId = machineInfo.applyNodeId;
-                                        Querysub.onCommitFinished(() => {
-                                            if (isWatching) {
-                                                void this.stopWatchingOutput(key, index);
-                                            } else {
-                                                void this.startWatchingOutput({ nodeId: applyNodeId, key, index, launchTime });
-                                            }
-                                        });
-                                    }}
-                                >
-                                    {isWatching ? "Stop Watching Output" : "Watch Screen Output"}
-                                </div>
-
                                 <ATag values={getLogViewerParams({ __machineId: machineId })}>
                                     Machine Logs
                                 </ATag>
@@ -559,34 +463,15 @@ export class ServiceDetailPage extends qreact.Component {
                                 </div>
                             )}
 
-                            {isWatching &&
-                                <div
-                                    className={
-                                        css.pad2(8).bord2(0, 0, 10).hsl(0, 0, 10).colorhsl(0, 0, 100)
-                                            .whiteSpace("pre-wrap").fontFamily("monospace")
-                                            .overflowAuto
-                                            .height("60vh")
-                                            .vbox0
-                                            .fillWidth
-                                    }
-                                    onClick={e => e.stopPropagation()}
-                                >
-                                    <div className={css.flexShrink0}>
-                                        {(() => {
-                                            let parts = parseAnsiColors(outputData);
-                                            return parts.map(({ text, color }) => {
-                                                if (!color) return <span>{text}</span>;
-                                                let hue = rgbToHsl(color).h;
-                                                return <span className={css.hsl(hue, 60, 30)}>{text}</span>;
-                                            });
-                                        })()}
-                                    </div>
-                                    <StickyBottomScroll debugText={`Screen ${outputKey}`} time={Date.now()} />
-                                </div>
-                            }
                         </div>;
                     })}
                 </div>
+                <ProcessesView
+                    serviceId={selectedServiceId || ""}
+                    machines={machineStatuses
+                        .filter(x => x.machineInfo)
+                        .map(x => ({ machineId: x.machineId, applyNodeId: x.machineInfo!.applyNodeId }))}
+                />
             </div>}
 
             <div className={css.hbox(12).fillWidth}>