refactor(frontend): create waiting for runtime component (#10931)

frontend/src/components/features/chat/waiting-for-runtime-message.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+import { cn } from "#/utils/utils";
+
+interface WaitingForRuntimeMessageProps {
+  className?: string;
+  testId?: string;
+}
+
+export function WaitingForRuntimeMessage({
+  className,
+  testId,
+}: WaitingForRuntimeMessageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(
+        "w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light",
+        className,
+      )}
+    >
+      {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
+    </div>
+  );
+}

frontend/src/components/features/jupyter/jupyter.tsx

@@ -8,6 +8,7 @@ import { ScrollToBottomButton } from "#/components/shared/buttons/scroll-to-bott
 import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
 import { I18nKey } from "#/i18n/declaration";
 import JupyterLargeIcon from "#/icons/jupyter-large.svg?react";
+import { WaitingForRuntimeMessage } from "../chat/waiting-for-runtime-message";
 
 interface JupyterEditorProps {
   maxWidth: number;
@@ -28,11 +29,7 @@ export function JupyterEditor({ maxWidth }: JupyterEditorProps) {
 
   return (
     <>
-      {isRuntimeInactive && (
-        <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-          {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-        </div>
-      )}
+      {isRuntimeInactive && <WaitingForRuntimeMessage />}
       {!isRuntimeInactive && cells.length > 0 && (
         <div className="flex-1 h-full flex flex-col" style={{ maxWidth }}>
           <div

frontend/src/components/features/terminal/terminal.tsx

@@ -1,10 +1,10 @@
 import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
 import { RootState } from "#/store";
 import { useTerminal } from "#/hooks/use-terminal";
 import "@xterm/xterm/css/xterm.css";
 import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
 import { cn } from "#/utils/utils";
+import { WaitingForRuntimeMessage } from "../chat/waiting-for-runtime-message";
 
 function Terminal() {
   const { commands } = useSelector((state: RootState) => state.cmd);
@@ -12,19 +12,13 @@ function Terminal() {
 
   const isRuntimeInactive = RUNTIME_INACTIVE_STATES.includes(curAgentState);
 
-  const { t } = useTranslation();
-
   const ref = useTerminal({
     commands,
   });
 
   return (
     <div className="h-full flex flex-col rounded-xl">
-      {isRuntimeInactive && (
-        <div className="w-full flex items-center text-center justify-center text-2xl text-tertiary-light pt-16">
-          {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-        </div>
-      )}
+      {isRuntimeInactive && <WaitingForRuntimeMessage className="pt-16" />}
 
       <div className="flex-1 min-h-0 p-4">
         <div

frontend/src/routes/vscode-tab.tsx

@@ -6,6 +6,7 @@ import { RootState } from "#/store";
 import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
 import { useVSCodeUrl } from "#/hooks/query/use-vscode-url";
 import { VSCODE_IN_NEW_TAB } from "#/utils/feature-flags";
+import { WaitingForRuntimeMessage } from "#/components/features/chat/waiting-for-runtime-message";
 
 function VSCodeTab() {
   const { t } = useTranslation();
@@ -39,20 +40,8 @@ function VSCodeTab() {
     }
   };
 
-  if (isRuntimeInactive) {
-    return (
-      <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-        {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
-        {t("DIFF_VIEWER$WAITING_FOR_RUNTIME")}
-      </div>
-    );
+  if (isRuntimeInactive || isLoading) {
+    return <WaitingForRuntimeMessage />;
   }
 
   if (error || (data && data.error) || !data?.url || iframeError) {