frontend/project: if project does not support exec-stream service yet, a modal pops up to ask for a project restart (to get the newer project code)

Author: haraldschilly

src/packages/conat/names.ts

@@ -15,6 +15,9 @@ import generateVouchers from "@cocalc/util/vouchers";
 import type { Location } from "./types";
 import { encodeBase64 } from "@cocalc/conat/util";
 
+// Service names for conat subjects
+export const EXEC_STREAM_SERVICE = "exec-stream";
+
 // nice alphanumeric string that can be used as conat subject, and very
 // unlikely to randomly collide with another browser tab from this account.
 export function randomId() {

src/packages/frontend/client/project.ts

@@ -7,9 +7,12 @@
 Functionality that mainly involves working with a specific project.
 */
 
+import { throttle } from "lodash";
+import { join } from "path";
+
 import { readFile, type ReadFileOptions } from "@cocalc/conat/files/read";
 import { writeFile, type WriteFileOptions } from "@cocalc/conat/files/write";
-import { projectSubject } from "@cocalc/conat/names";
+import { projectSubject, EXEC_STREAM_SERVICE } from "@cocalc/conat/names";
 import { redux } from "@cocalc/frontend/app-framework";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
 import { dialogs } from "@cocalc/frontend/i18n";
@@ -40,8 +43,6 @@ import {
 } from "@cocalc/util/misc";
 import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import { DirectoryListingEntry } from "@cocalc/util/types";
-import { throttle } from "lodash";
-import { join } from "path";
 import { WebappClient } from "./client";
 import { ExecStream } from "./types";
 
@@ -214,13 +215,12 @@ export class ProjectClient {
     */
   execStream = (
     opts: ExecOptsBlocking & {
-      execStream?: ExecStream;
       startStreamExplicitly?: boolean;
       debug?: string;
     },
     startExplicitly = false,
   ): ExecStream => {
-    const execStream = opts.execStream ?? new ExecStream();
+    const execStream = new ExecStream();
     (async () => {
       try {
         await this.execStreamAsync({ ...opts, execStream });
@@ -277,7 +277,7 @@ export class ProjectClient {
       const subject = projectSubject({
         project_id: opts.project_id,
         compute_server_id: opts.compute_server_id ?? 0,
-        service: "exec-stream",
+        service: EXEC_STREAM_SERVICE,
       });
 
       let lastSeq = -1;

src/packages/frontend/frame-editors/latex-editor/util.ts

@@ -5,13 +5,19 @@
 
 // data and functions specific to the latex editor.
 
+import { Modal } from "antd";
+
+import { redux } from "@cocalc/frontend/app-framework";
 import { ExecOutput } from "@cocalc/frontend/frame-editors/generic/client";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { ExecOptsBlocking } from "@cocalc/util/db-schema/projects";
 import { separate_file_extension } from "@cocalc/util/misc";
 import { ExecuteCodeOutputAsync } from "@cocalc/util/types/execute-code";
 import { TIMEOUT_LATEX_JOB_S } from "./constants";
 
+// Track which projects have already shown the restart dialog
+const shownRestartDialogs = new Set<string>();
+
 export function pdf_path(path: string): string {
   // if it is already a pdf, don't change the upper/lower casing -- #4562
   const { name, ext } = separate_file_extension(path);
@@ -167,12 +173,49 @@ export async function runJob(opts: RunJobOpts): Promise<ExecOutput> {
       resolve(result);
     });
 
-    stream.on("error", () => {
-      reject(
-        new Error(
-          "Unable to run the compilation. Please check up on the project.",
-        ),
-      );
+    stream.on("error", (err) => {
+      // Check if this is a 503 error (exec-stream service not available in old project)
+      if (err?.code === 503) {
+        showProjectRestartDialog(project_id);
+        reject(err);
+      } else {
+        reject(
+          new Error(
+            "Unable to run the compilation. Please check up on the project.",
+          ),
+        );
+      }
     });
   });
 }
+
+function showProjectRestartDialog(project_id: string): void {
+  // Only show the dialog once per project
+  if (shownRestartDialogs.has(project_id)) {
+    return;
+  }
+
+  shownRestartDialogs.add(project_id);
+
+  const actions = redux.getActions("projects");
+
+  Modal.confirm({
+    title: "Project Needs Update",
+    content: `This project needs to be restarted to support the new streaming compilation feature.
+    Your work is automatically saved and will not be lost.`,
+    okText: "Restart Project",
+    cancelText: "Not Now",
+    width: 500,
+    onOk: () => {
+      if (actions) {
+        actions.restart_project(project_id);
+      }
+      // Clear the tracking when user clicks OK
+      shownRestartDialogs.delete(project_id);
+    },
+    onCancel: () => {
+      // Clear the tracking when user dismisses the dialog
+      shownRestartDialogs.delete(project_id);
+    },
+  });
+}

src/packages/project/exec-stream.ts

@@ -3,17 +3,15 @@ Project-side exec-stream service that handles streaming execution requests.
 Similar to how the project API service works, but specifically for streaming exec.
 */
 
-import { executeStream, StreamEvent  } from "@cocalc/backend/exec-stream";
+import { executeStream, StreamEvent } from "@cocalc/backend/exec-stream";
 import { Message, Subscription } from "@cocalc/conat/core/client";
-import { projectSubject } from "@cocalc/conat/names";
+import { projectSubject, EXEC_STREAM_SERVICE } from "@cocalc/conat/names";
 import { connectToConat } from "@cocalc/project/conat/connection";
 import { project_id } from "@cocalc/project/data";
 import { getLogger } from "@cocalc/project/logger";
 
 const logger = getLogger("project:exec-stream");
 
-
-
 export function init() {
   serve();
 }
@@ -23,8 +21,8 @@ async function serve() {
   const cn = connectToConat();
   const subject = projectSubject({
     project_id,
-    compute_server_id: 0, // This is the project service, always 0
-    service: "exec-stream",
+    compute_server_id: 0, // This is the project home base, always 0
+    service: EXEC_STREAM_SERVICE,
   });
 
   logger.debug(