feat: :lipstick: nicer "continue server loading" UI

8 files changed, 83 insertions, 22 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 5eada708..df3f970c 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -32,7 +32,9 @@ const SEARCH_INDEX_NAME = "continue_context_items";
 const mainInputFontSize = 13;
 
 const EmptyPillDiv = styled.div`
-  padding: 8px;
+  padding: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
   border-radius: ${defaultBorderRadius};
   border: 1px dashed ${lightGray};
   color: ${lightGray};
diff --git a/extension/react-app/src/components/RingLoader.tsx b/extension/react-app/src/components/RingLoader.tsx
new file mode 100644
index 00000000..5eb8a60f
--- /dev/null
+++ b/extension/react-app/src/components/RingLoader.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import { buttonColor, vscBackground, vscForeground } from ".";
+
+const rotate = keyframes`
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 12;
+  }
+`;
+
+const LoaderSvg = styled.svg`
+  transform: rotate(-90deg);
+  width: 40px;
+  height: 40px;
+  opacity: 50%;
+
+  circle {
+    fill: none;
+    stroke: ${vscForeground};
+    stroke-width: 2;
+    stroke-dasharray: 100;
+    stroke-dashoffset: 0;
+    animation: ${rotate} 6s ease-out infinite;
+    stroke-linecap: round;
+  }
+`;
+
+const RingLoader = () => (
+  <div className="m-auto w-full text-center">
+    <LoaderSvg viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="14" />
+    </LoaderSvg>
+  </div>
+);
+
+export default RingLoader;
diff --git a/extension/react-app/src/hooks/useWebsocket.ts b/extension/react-app/src/hooks/useWebsocket.ts
index 6b36be97..be34861b 100644
--- a/extension/react-app/src/hooks/useWebsocket.ts
+++ b/extension/react-app/src/hooks/useWebsocket.ts
@@ -25,8 +25,11 @@ function useContinueGUIProtocol(useVscodeMessagePassing: boolean = true) {
       "/gui/ws?session_id=" +
       encodeURIComponent(sessionId);
 
-    console.log("Creating websocket", serverUrlWithSessionId);
-    console.log("Using vscode message passing", useVscodeMessagePassing);
+    console.log(
+      "Creating GUI websocket",
+      serverUrlWithSessionId,
+      useVscodeMessagePassing
+    );
     const newClient = new ContinueGUIClientProtocol(
       serverUrlWithSessionId,
       useVscodeMessagePassing
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 54897944..ed73ce85 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -32,6 +32,7 @@ import {
   setBottomMessage,
   setBottomMessageCloseTimeout,
 } from "../redux/slices/uiStateSlice";
+import RingLoader from "../components/RingLoader";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -402,11 +403,31 @@ function GUI(props: GUIProps) {
       >
         {typeof client === "undefined" && (
           <>
-            <Loader />
-            <p style={{ textAlign: "center" }}>Loading Continue server...</p>
-            {/* <p style={{ textAlign: "center" }}>
-              Make sure you have a folder opened in VS Code
-            </p> */}
+            <RingLoader />
+            <p
+              style={{
+                textAlign: "center",
+                margin: "0px",
+                fontSize: "14px",
+              }}
+            >
+              Continue Server Starting
+            </p>
+            <p
+              style={{
+                margin: "auto",
+                textAlign: "center",
+                marginTop: "4px",
+                fontSize: "12px",
+                cursor: "pointer",
+                opacity: 0.7,
+              }}
+              onClick={() => {
+                postVscMessage("toggleDevTools", {});
+              }}
+            >
+              <u>Click to view logs</u>
+            </p>
           </>
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
diff --git a/extension/src/activation/environmentSetup.ts b/extension/src/activation/environmentSetup.ts
index d6fe4261..db215e11 100644
--- a/extension/src/activation/environmentSetup.ts
+++ b/extension/src/activation/environmentSetup.ts
@@ -82,18 +82,18 @@ export function getExtensionVersion() {
 
 // Returns whether a server of the current version is already running
 async function checkOrKillRunningServer(serverUrl: string): Promise<boolean> {
-  console.log("Checking if server is old version");
   const serverRunning = await checkServerRunning(serverUrl);
   // Kill the server if it is running an old version
   if (fs.existsSync(serverVersionPath())) {
     const serverVersion = fs.readFileSync(serverVersionPath(), "utf8");
     if (serverVersion === getExtensionVersion() && serverRunning) {
       // The current version is already up and running, no need to continue
+      console.log("Continue server already running");
       return true;
     }
   }
   if (serverRunning) {
-    console.log("Killing old server...");
+    console.log("Killing server from old version of Continue");
     try {
       await fkill(":65432");
     } catch (e: any) {
@@ -196,16 +196,10 @@ export async function startContinuePythonServer() {
   // Get name of the corresponding executable for platform
   if (os.platform() === "darwin") {
     // Add necessary permissions
-    console.log("Setting permissions for Continue server...");
     fs.chmodSync(destination, 0o7_5_5);
-    const [stdout1, stderr1] = await runCommand(
-      `xattr -dr com.apple.quarantine ${destination}`
-    );
-    console.log("stdout: ", stdout1);
-    console.log("stderr: ", stderr1);
+    await runCommand(`xattr -dr com.apple.quarantine ${destination}`);
   } else if (os.platform() === "linux") {
     // Add necessary permissions
-    console.log("Setting permissions for Continue server...");
     fs.chmodSync(destination, 0o7_5_5);
   }
 
@@ -217,7 +211,7 @@ export async function startContinuePythonServer() {
   }
 
   // Run the executable
-  console.log("Starting Continue server...");
+  console.log("Starting Continue server");
   const child = spawn(destination, {
     detached: true,
     stdio: "ignore",
diff --git a/extension/src/continueIdeClient.ts b/extension/src/continueIdeClient.ts
index 1fa41383..cb7baaa6 100644
--- a/extension/src/continueIdeClient.ts
+++ b/extension/src/continueIdeClient.ts
@@ -413,7 +413,7 @@ class IdeProtocolClient {
           clearInterval(interval);
           resolve(null);
         } else {
-          console.log("Websocket not yet open, trying again...");
+          // console.log("Websocket not yet open, trying again...");
         }
       }, 1000);
     });
diff --git a/extension/src/debugPanel.ts b/extension/src/debugPanel.ts
index e7568f0d..d1fe565f 100644
--- a/extension/src/debugPanel.ts
+++ b/extension/src/debugPanel.ts
@@ -181,13 +181,11 @@ export function setupDebugPanel(
     switch (data.type) {
       case "onLoad": {
         let sessionId: string;
-        console.log("Waiting for session id");
         if (typeof sessionIdPromise === "string") {
           sessionId = sessionIdPromise;
         } else {
           sessionId = await sessionIdPromise;
         }
-        console.log("Done with onLoad: ", sessionId);
         panel.webview.postMessage({
           type: "onLoad",
           vscMachineId: vscode.env.machineId,
@@ -240,6 +238,11 @@ export function setupDebugPanel(
         openEditorAndRevealRange(data.path, undefined, vscode.ViewColumn.One);
         break;
       }
+      case "toggleDevTools": {
+        vscode.commands.executeCommand("workbench.action.toggleDevTools");
+        vscode.commands.executeCommand("continue.viewLogs");
+        break;
+      }
       case "blurContinueInput": {
         setFocusedOnContinueInput(false);
         break;
diff --git a/extension/src/util/messenger.ts b/extension/src/util/messenger.ts
index 3044898e..bcc88fe1 100644
--- a/extension/src/util/messenger.ts
+++ b/extension/src/util/messenger.ts
@@ -1,4 +1,3 @@
-console.log("Websocket import");
 const WebSocket = require("ws");
 import fetch from "node-fetch";