@replohq/sandbox-runtime 1.24.6 → 1.25.0

package/_vendor/schemas/previewHealthIframeRpc.d.ts

@@ -75,10 +75,15 @@ declare const previewDiagnosticReportSchema: z.ZodObject<{
         at: z.ZodNumber;
     }, z.core.$strip>;
 }, z.core.$strip>;
+declare const devServerConnectionStateSchema: z.ZodEnum<{
+    connecting: "connecting";
+    connected: "connected";
+}>;
 export type PreviewErrorDetail = z.infer<typeof previewErrorDetailSchema>;
 export type PreviewHealth = z.infer<typeof previewHealthSchema>;
 export type PreviewStatusReport = z.infer<typeof previewStatusReportSchema>;
 export type PreviewDiagnosticReport = z.infer<typeof previewDiagnosticReportSchema>;
+export type DevServerConnectionState = z.infer<typeof devServerConnectionStateSchema>;
 export declare const previewHealthToEditorMethodConfig: {
     documentArrived: {
         inputSchema: z.ZodObject<{
@@ -141,6 +146,17 @@ export declare const previewHealthToEditorMethodConfig: {
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
     };
+    devServerConnectionChanged: {
+        inputSchema: z.ZodObject<{
+            state: z.ZodEnum<{
+                connecting: "connecting";
+                connected: "connected";
+            }>;
+            route: z.ZodString;
+            documentId: z.ZodString;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
 };
 export declare const editorToPreviewHealthMethodConfig: {};
 /**
@@ -148,7 +164,7 @@ export declare const editorToPreviewHealthMethodConfig: {};
  * status from current runtimes and null from older runtimes, which only say
  * ok or error.
  */
-export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArrived, onStatus, onDiagnostic, onPeerVersionMismatch, }: {
+export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArrived, onStatus, onDiagnostic, onDevServerConnectionChanged, onPeerVersionMismatch, }: {
     getFrameWindow: () => Window | null;
     onDocumentArrived?: () => void;
     onStatus: (update: {
@@ -156,6 +172,7 @@ export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArr
         report: PreviewStatusReport | null;
     }) => void;
     onDiagnostic?: (report: PreviewDiagnosticReport) => void;
+    onDevServerConnectionChanged?: (state: DevServerConnectionState) => void;
     onPeerVersionMismatch?: (mismatch: IframeRpcVersionMismatch) => void;
 }): () => void;
 export {};

package/_vendor/schemas/previewHealthIframeRpc.mjs

@@ -47,6 +47,7 @@ var previewDiagnosticReportSchema = z.object({
     at: z.number()
   })
 });
+var devServerConnectionStateSchema = z.enum(["connecting", "connected"]);
 var previewHealthToEditorMethodConfig = {
   documentArrived: {
     inputSchema: z.object({ route: z.string() }),
@@ -59,6 +60,14 @@ var previewHealthToEditorMethodConfig = {
   diagnosticRecorded: {
     inputSchema: previewDiagnosticReportSchema,
     outputSchema: z.void()
+  },
+  devServerConnectionChanged: {
+    inputSchema: z.object({
+      state: devServerConnectionStateSchema,
+      route: z.string(),
+      documentId: z.string()
+    }),
+    outputSchema: z.void()
   }
 };
 var editorToPreviewHealthMethodConfig = {};
@@ -72,6 +81,7 @@ function subscribeToPreviewHealth({
   onDocumentArrived,
   onStatus,
   onDiagnostic,
+  onDevServerConnectionChanged,
   onPeerVersionMismatch
 }) {
   const isFromFrame = (event) => {
@@ -97,6 +107,9 @@ function subscribeToPreviewHealth({
       },
       diagnosticRecorded: (report) => {
         onDiagnostic?.(report);
+      },
+      devServerConnectionChanged: ({ state }) => {
+        onDevServerConnectionChanged?.(state);
       }
     }
   });

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.24.6",
+  "version": "1.25.0",
   "branch": "HEAD",
-  "commit": "12bcf877e300038e72dc16ebd4fcdec038826d27",
-  "builtAt": "2026-11-08T23:15:21.565Z"
+  "commit": "c5e3259b4bbe7b22046b0b2a57fe9b826917748e",
+  "builtAt": "2026-11-09T23:38:05.958Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.24.6",
+  "version": "1.25.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.24.6",
+    "version": "1.25.0",
     "branch": "HEAD",
-    "commit": "12bcf877e300038e72dc16ebd4fcdec038826d27",
-    "builtAt": "2026-11-08T23:15:21.565Z"
+    "commit": "c5e3259b4bbe7b22046b0b2a57fe9b826917748e",
+    "builtAt": "2026-11-09T23:38:05.958Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/previewHealth.js

@@ -295,14 +295,21 @@ function createPreviewHealthMonitor() {
   overlayStyle.textContent = "nextjs-portal{display:none!important}";
   document.head.append(overlayStyle);
   const stopScrollLockRelease = releaseNextOverlayScrollLock();
-  const stopBuildStatus = subscribeToBuildStatus({
-    onBuildErrors: actions.buildErrorsChanged
+  const unsubscribeFromDevServer = subscribeToDevServer({
+    onBuildErrors: actions.buildErrorsChanged,
+    onConnectionChanged: (state) => {
+      editor.devServerConnectionChanged({
+        state,
+        route: window.location.pathname,
+        documentId
+      });
+    }
   });
   return {
     actions,
     dispose() {
       unsubscribe();
-      stopBuildStatus();
+      unsubscribeFromDevServer();
       overlayStyle.remove();
       stopScrollLockRelease();
       cancelPendingRecovery();
@@ -351,8 +358,9 @@ function openSocket(url) {
     });
   });
 }
-function subscribeToBuildStatus({
-  onBuildErrors
+function subscribeToDevServer({
+  onBuildErrors,
+  onConnectionChanged
 }) {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   const getUrl = (path) => {
@@ -388,14 +396,20 @@ function subscribeToBuildStatus({
   };
   const reconnect = async (path) => {
     const socket = await retry(
-      async () => {
+      async (_bail, attempt) => {
         if (isStopped) {
           return null;
         }
         const opened = await openSocket(getUrl(path));
         if (opened === null) {
+          if (attempt === 1) {
+            onConnectionChanged("connecting");
+          }
           throw new HmrSocketClosedError(path);
         }
+        if (attempt > 1) {
+          onConnectionChanged("connected");
+        }
         return opened;
       },
       {

package/select-mode/annotationFrames.js

@@ -30,19 +30,8 @@ function getOrCreateFramesLayerContainer({
   document.body.append(container);
   return container;
 }
-const ANNOTATION_FONT_STYLE_ID = "replo-annotation-font";
 const BADGE_SIZE_PX = 30;
-const EDITORIAL_ITALIC_FONT_URL = "https://assets.replocdn.com/PPEditorialNew-Italic.woff2";
-const BADGE_FONT = 'italic 400 16px/1 "PP Editorial New", Georgia, "Times New Roman", serif';
-function ensureBadgeFont() {
-  if (document.getElementById(ANNOTATION_FONT_STYLE_ID)) {
-    return;
-  }
-  const style = document.createElement("style");
-  style.id = ANNOTATION_FONT_STYLE_ID;
-  style.textContent = `@font-face{font-family:"PP Editorial New";src:url("${EDITORIAL_ITALIC_FONT_URL}") format("woff2");font-weight:normal;font-style:italic;font-display:swap;}`;
-  document.head.append(style);
-}
+const BADGE_FONT = "600 14px/1 Inter, system-ui, sans-serif";
 const badgeNodesById = /* @__PURE__ */ new Map();
 let activeBadgeId = null;
 function badgeRestingTransform(id) {
@@ -98,7 +87,7 @@ function createFrameNode(spec) {
     "cursor: pointer",
     "pointer-events: auto",
     "margin: 0",
-    "padding: 0 0 1px 0"
+    "padding: 0"
   ].join(";");
   badge.addEventListener("pointerdown", () => {
     badge.style.transform = "scale(0.9)";
@@ -127,7 +116,6 @@ function showAnnotationFrames({
   if (!container) {
     return;
   }
-  ensureBadgeFont();
   activeBadgeId = frames.find((spec) => spec.isActive)?.id ?? null;
   badgeNodesById.clear();
   container.replaceChildren(...frames.map((spec) => createFrameNode(spec)));