chore(cloud): add floating hedgehog waiting screen for queued cloud tasks (#1779)

Author: VojtechBartos

apps/code/src/renderer/features/command-center/components/CommandCenterSessionView.tsx

@@ -31,6 +31,7 @@ export function CommandCenterSessionView({
     promptStartedAt,
     isInitializing,
     cloudBranch,
+    cloudStatus,
     errorTitle,
     errorMessage,
   } = useSessionViewState(taskId, task);
@@ -68,6 +69,8 @@ export function CommandCenterSessionView({
         onRetry={isCloud ? undefined : handleRetry}
         onNewSession={isCloud ? undefined : handleNewSession}
         isInitializing={isInitializing}
+        isCloud={isCloud}
+        cloudStatus={cloudStatus}
         compact
         isActiveSession={isActiveSession}
       />

apps/code/src/renderer/features/sessions/components/CloudInitializingView.tsx

@@ -0,0 +1,87 @@
+import { Spinner } from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
+import zenHedgehog from "@renderer/assets/images/zen.png";
+import type { TaskRunStatus } from "@shared/types";
+import { useEffect, useState } from "react";
+
+interface CloudInitializingViewProps {
+  cloudStatus: TaskRunStatus | null;
+}
+
+const REVEAL_DELAY_MS = 2000;
+
+function copyFor(cloudStatus: TaskRunStatus | null): {
+  heading: string;
+  subtitle: string;
+} {
+  switch (cloudStatus) {
+    case "queued":
+      return {
+        heading: "Waiting in the queue…",
+        subtitle: "Reserving a cloud sandbox — this can take a few seconds.",
+      };
+    case "in_progress":
+      return {
+        heading: "Starting the sandbox…",
+        subtitle: "Connecting to your cloud runner.",
+      };
+    default:
+      return {
+        heading: "Getting things ready…",
+        subtitle: "Connecting to your cloud runner.",
+      };
+  }
+}
+
+export function CloudInitializingView({
+  cloudStatus,
+}: CloudInitializingViewProps) {
+  const { heading, subtitle } = copyFor(cloudStatus);
+
+  const [revealed, setRevealed] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setRevealed(true), REVEAL_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!revealed) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        className="absolute inset-0 bg-background"
+      >
+        <Spinner size={32} className="animate-spin text-gray-9" />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      direction="column"
+      gap="5"
+      className="absolute inset-0 bg-background"
+    >
+      <div className="zen-float">
+        <img
+          src={zenHedgehog}
+          alt=""
+          style={{ width: "160px", display: "block" }}
+        />
+      </div>
+      <Flex direction="column" align="center" gap="2">
+        <Flex align="center" gap="2">
+          <Spinner size={16} className="animate-spin text-gray-9" />
+          <Text size="3" weight="medium">
+            {heading}
+          </Text>
+        </Flex>
+        <Text size="2" color="gray">
+          {subtitle}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}

apps/code/src/renderer/features/sessions/components/SessionView.tsx

@@ -15,6 +15,7 @@ import { useIsWorkspaceCloudRun } from "@features/workspace/hooks/useWorkspace";
 import { useAutoFocusOnTyping } from "@hooks/useAutoFocusOnTyping";
 import { Pause, Spinner, Warning } from "@phosphor-icons/react";
 import { Box, Button, ContextMenu, Flex, Text } from "@radix-ui/themes";
+import type { TaskRunStatus } from "@shared/types";
 import {
   type AcpMessage,
   isJsonRpcNotification,
@@ -27,6 +28,7 @@ import {
   useSessionViewActions,
   useShowRawLogs,
 } from "../stores/sessionViewStore";
+import { CloudInitializingView } from "./CloudInitializingView";
 import { ConversationView } from "./ConversationView";
 import { DropZoneOverlay } from "./DropZoneOverlay";
 import { ModelSelector } from "./ModelSelector";
@@ -54,6 +56,8 @@ interface SessionViewProps {
   onRetry?: () => void;
   onNewSession?: () => void;
   isInitializing?: boolean;
+  isCloud?: boolean;
+  cloudStatus?: TaskRunStatus | null;
   slackThreadUrl?: string;
   compact?: boolean;
   isActiveSession?: boolean;
@@ -85,6 +89,8 @@ export function SessionView({
   onRetry,
   onNewSession,
   isInitializing = false,
+  isCloud = false,
+  cloudStatus = null,
   slackThreadUrl,
   compact = false,
   isActiveSession = true,
@@ -411,13 +417,17 @@ export function SessionView({
               </Box>
             </>
           ) : isInitializing ? (
-            <Flex
-              align="center"
-              justify="center"
-              className="absolute inset-0 bg-background"
-            >
-              <Spinner size={32} className="animate-spin text-gray-9" />
-            </Flex>
+            isCloud ? (
+              <CloudInitializingView cloudStatus={cloudStatus} />
+            ) : (
+              <Flex
+                align="center"
+                justify="center"
+                className="absolute inset-0 bg-background"
+              >
+                <Spinner size={32} className="animate-spin text-gray-9" />
+              </Flex>
+            )
           ) : (
             <>
               <DropZoneOverlay isVisible={isDraggingFile} />

apps/code/src/renderer/features/task-detail/components/TaskLogsPanel.tsx

@@ -57,6 +57,7 @@ export function TaskLogsPanel({ taskId, task, hideInput }: TaskLogsPanelProps) {
     promptStartedAt,
     isInitializing,
     cloudBranch,
+    cloudStatus,
     errorTitle,
     errorMessage,
   } = useSessionViewState(taskId, task);
@@ -147,6 +148,8 @@ export function TaskLogsPanel({ taskId, task, hideInput }: TaskLogsPanelProps) {
               onRetry={handleRetry}
               onNewSession={isCloud ? undefined : handleNewSession}
               isInitializing={isInitializing}
+              isCloud={isCloud}
+              cloudStatus={cloudStatus}
               slackThreadUrl={slackThreadUrl}
             />
           </ErrorBoundary>